Skip to content

M
mayi-mp-shop
Commit 3fc6ba20 by 程智春
Options

直播v2.0

parent 0c1816c9
Showing with 154 additions and 109 deletions
src/components/common/navbar.vue
......@@ -177,9 +177,9 @@ export default {
this.$set(this.liveInfo,'boStream','')
this.$set(this.liveInfo,'tuiStream','')
this.pusher.stop();
wx.navigateTo({url:`../liveOver/main?id=${this.id}&liveInfo=${JSON.stringify(this.liveInfo)}`})
// wx.reLaunch({url:`../liveList/main`})
}
})
},
......
src/components/livedModel/livedControls.vue
......@@ -43,7 +43,7 @@
<p class="goodsNum" v-if="list.length>0">{{list.length}}</p>
</div>
<div class="goodsImg" v-else></div>
<div class="iptCopy" v-if="!info.playbackUrl || info.liveBroadcastState==3" @click="isLogin">跟主播说点什么...</div>
<div class="iptCopy" v-if="!info.playbackUrl || info.liveBroadcastState==3 || info.liveBroadcastState==1" @click="isLogin">跟主播说点什么...</div>
<div class="iptCopy" style="background:none;" v-else></div>
<div class="shareIcon" @click="showShare">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADwElEQVR4Xu2aS6hNURjH//+RgYGRKAMDr1tmFJGBSxmIjGTgKq/rUURi5qKQkhKlLt1IHkl05VUG7r3lkW4MPMIVRXkNFMqAqL++2len45y99mPtc/bu7FWnc2qv9X3f/7fX41trHaLFC1tcP0oAZQ9ocQLlEGjxDlBOguUQKIdAixPI1RCQ1EbyZSPfSW4ASHoGYCqABwC2kBxsBIhcAJB0CsDKCsGfAKwleTNrCHkB0A9gbpXY3wDWkDyTJYQ8AxjWvY3k4awgFAGAad9PcmcWEIoCwLQfJ7nBN4QiATDtl22yJPnDF4iiATDdAwGEdz4gFBGA6bacwXrCo7QQmg5A0iQAJ2osgy5tliusInnLVTHsecMBSBoHYAaAmcG3/R6ZUITlCgbhXML2jTsPkDQdwLrgkzTeeu22kjySxGjmPSBj4ZWa95HsigshMwCSxgDYHnzixpW0fjfJjXEaZwJAkiUsJn5CnGA81b0EoIPkryj2vAKQNA3AAQALojjPsI5trlaQ/ODy4Q2ApIUAzgMY5XLaoOdPAwiPM18GJa0H0N0gYXHcWK5gPeF2vUape4CkGwDs7ee1WK6wjGRvrQBTAZB0BcCSvCqviOsNyYleAUg6CmBzAcRbiAMk270BkGTCDUBRSjtJ20X+V2IPAUnzANSdVHJIZArJV14mQUkjAPQBmJ1DodUhfQcwluRPb8ugpIMAdhRA/BDJtihxRh4CkhYDuBrFaJPr9JGcHzWGOADs4KHZKa5L12mSlRcsrvrRzgMkLQdw1mmtuRX2ktwVN4RIPUDSfQCz4hpvYP1Okj1J/DkBSOoA4Pt66huA5wCeADC4qxOcCZrePwAWpTkXjALgguXSSegGbT4HS6cJfQFgsPpcX1Ktu0GXy/c2J5E0m4lLKIDgAHMowaGlTZj3APSTvOuKLgGAhwAsu0t9QeICEGeba/tu2xz1kgzdg1cDiQngOklbkr0UF4BrNsYcnu4AOEQycY4QA0APyU4vygMjdQFIGg/gbYizj4Hw1FfXEQEkOvV1wQoDEDb7HwvEhwFy+f73PAKATSTNp/cSBuAigKU1PNq/Nk76jCQEwFe7SCFpJ72ZlDAANvtPrvI6h6TN7l5LHQC2vJl45yqSJpgwAMP/2hq2P5rklzTO6rWVtAfA7ornlheY+NdZ+Ku0GQbAgrIZ18a5HSpa4pFZkWSriN0f2tDr8rHGRwnWmQlGMVLkOiWAIr89H7GXPcAHxSLbKHtAkd+ej9jLHuCDYpFtlD2gyG/PR+wt3wP+AsW7I1AzjlUOAAAAAElFTkSuQmCC" alt="">
......
src/components/livedModel/livedExplainingCommodities.vue
......@@ -67,10 +67,14 @@ export default {
arr2.push(item);
}
});
this.list = [...arr1, ...arr2];
this.reserveList = arr1;
console.log(this.list,'--------------------------------this.list1212')
this.fixedGoodsTimer = setTimeout(() => {
console.log('这是上屏商品',arr1)
this.fixedGoodsList = arr1 ? arr1 : [];
this.showFixedGoods = true;
}, 5000);
......@@ -83,6 +87,7 @@ export default {
}
});
if (newArr) {
console.log('这是上屏商品',newArr)
this.fixedGoodsList = newArr;
}
}
......
src/components/livedModel/livedIsMsg.vue
......@@ -29,7 +29,7 @@ export default {
},
watch:{
updateVal(){
if(!this.info.playbackUrl){
if(!this.info.playbackUrl || this.info.liveBroadcastState == 1 || this.info.liveBroadcastState == 3){
console.log('2222222222222')
this.list=[...this.list,...this.guestBookList];
this.scrollTop=this.list.length*1000;
......@@ -41,7 +41,7 @@ export default {
computed: {},
created() {},
onLoad(){
if(this.info.playbackUrl && this.info.playbackUrl[0]){
if(this.info.playbackUrl && this.info.playbackUrl[0] && (this.info.liveBroadcastState != 1 || this.info.liveBroadcastState != 3)){
this.init()
}
......
src/components/livedModel/livedShareDia.vue
......@@ -31,6 +31,7 @@
:showPosterDia="showPosterDia"
:posterInfo="posterInfo"
:userInfo="userInfo"
:infoIsComplete="infoIsComplete"
@closePosterDia="closePosterDia"
></livedposterDia>
</div>
......@@ -55,6 +56,8 @@ export default {
againLoadingPoster: false, // 是否开始加载海报
userInfo : {},
spokesmanObj: {}, //分销员信息
infoIsComplete:false,
};
},
components: {
......@@ -85,6 +88,8 @@ export default {
mounted() {},
onShow(){
console.log('onSHow..........................')
this.showPosterDia = false;
this.infoIsComplete = false;
this.againLoadingPoster = false;
// this.init();
this.getSpokesman()
......@@ -143,6 +148,7 @@ export default {
live.getUserInfo().then(res1 => {
if(res1.data.code == '200'){
this.infoIsComplete = true
this.userInfo = res1.data.data;
this.againLoadingPoster = true;
......@@ -204,6 +210,7 @@ export default {
// 1}日 ${newTime.getHours()}:${newTime.getMinutes()}`;
// console.log(this.info, "--------------96");
// this.posterInfo=query;
this.$emit("closeShareDia");
this.showPosterDia = true;
// let url = `/pages/livedPoster/main?params=${JSON.stringify(query)}`;
// wx.navigateTo({
......
src/components/livedModel/livedposterDia.vue
......@@ -6,13 +6,13 @@
:close-on-click-overlay="true"
@close="closeDia"
>
<div class="posterWrap" @click="closeDia">
<div class="canvas-wrap">
<div class="posterWrap" @click.stop="closeDia">
<div class="canvas-wrap" >
<canvas canvas-id="posterCanvas" class="myCanvas"></canvas>
<div v-if="!posterStatus" class="masker">加载中...</div>
</div>
<div class="saveBtn" @click="getImg">点击保存海报</div>
<div class="saveBtn" @click.stop="getImg">点击保存海报</div>
</div>
</van-popup>
</div>
......@@ -22,7 +22,7 @@
import live from "@/api/live";
import { DFSImg } from '../../utils/common.js'
export default {
props: ["showPosterDia", "posterInfo","userInfo"],
props: ["showPosterDia", "posterInfo","userInfo","infoIsComplete"],
name: "",
data() {
return {
......@@ -40,6 +40,8 @@ export default {
miniCode: ""
},
posterStatus : false,
tempFilePath : '',
};
},
components: {},
......@@ -76,6 +78,7 @@ export default {
this.$set(this.info,'avatarUrl',this.userInfo.headPortraitUrl)
// this.info.avatarUrl = this.userInfo.headPortraitUrl
let _this = this;
if(this.infoIsComplete){
wx.getUserInfo({
//获取微信用户信息
success: function(res) {
......@@ -86,6 +89,8 @@ export default {
_this.initPoster(_this.info);
}
});
}
},
initPoster(info) {
console.log(info, "---------------------71");
......@@ -111,14 +116,11 @@ export default {
ctx.setFontSize(15);
ctx.fillText(info.nickName, 70 * bili, 410 * bili);
//
ctx.setFillStyle("#FDC330");
ctx.fillRect(0, 330 * bili, 310 * bili, 40 * bili);
if(this.info.livedStatus == 0){
console.log('直播预告')
console.log('直播时间',this.info.livedTime)
this.saveThe('https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/2a6cbdf0-91ca-4993-9ec5-963cb30ba9b8.png',path => {
ctx.drawImage(path, 160 * bili , 340 * bili, 18 * bili, 18 * bili);
ctx.save()
......@@ -126,9 +128,6 @@ export default {
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(14);
ctx.fillText(this.info.livedTime, 184 * bili , 355 * bili);
})
}
this.saveThe('https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/cc6db4d4-55bb-4add-a9ba-5733499aa5d0.png',path => {
ctx.drawImage(path, 20 * bili , 340 * bili, 20 * bili, 18 * bili);
......@@ -137,17 +136,73 @@ export default {
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(14);
let liveText = '';
if(this.info.livedStatus == 0){
liveText = '直播预告'
}else if(this.info.livedStatus == 1){
}else if(this.info.livedStatus == 1 || this.info.livedStatus == 3){
liveText = '直播中'
}else{
liveText = '直播结束'
}
console.log('直播状态',liveText)
ctx.fillText(liveText, 48 * bili , 355 * bili);
ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(14);
ctx.fillText("邀你一起看直播", 10 * bili, 450 * bili);
// 直播名
ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(18);
ctx.fillText(info.livedTitle, 10 * bili, 500 * bili);
//圆形头像框
ctx.setStrokeStyle("rgba(0,0,0,0)");
ctx.arc(36 * bili, 400 * bili, 25 * bili, 0, 2 * Math.PI);
ctx.fill();
this.saveThe(info.qrCode, path => {
ctx.drawImage(path, 200 * bili, 390 * bili, 100 * bili, 100 * bili);
ctx.save();
//头像
ctx.clip();
this.saveThe(info.avatarUrl,path => {
ctx.drawImage(path, 10 * bili, 370 * bili, 54 * bili, 54 * bili);
ctx.save();
ctx.stroke();
// ctx.draw(false,this.drawImageHanlder());
ctx.draw();
this.posterStatus = true;
console.log("--------海报生成成功");
})
});
})
})
} else{
this.saveThe('https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/cc6db4d4-55bb-4add-a9ba-5733499aa5d0.png',path => {
ctx.drawImage(path, 20 * bili , 340 * bili, 20 * bili, 18 * bili);
ctx.save()
ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(14);
let liveText = '';
if(this.info.livedStatus == 0){
liveText = '直播预告'
}else if(this.info.livedStatus == 1 || this.info.livedStatus == 3){
liveText = '直播中'
}else{
liveText = '直播结束'
}
console.log('直播状态',liveText)
ctx.fillText(liveText, 48 * bili , 355 * bili);
ctx.setTextAlign("left");
......@@ -173,12 +228,20 @@ export default {
ctx.save();
ctx.stroke();
// ctx.draw(false,this.drawImageHanlder());
ctx.draw();
this.posterStatus = true;
console.log("--------海报生成成功");
})
});
})
}
});
},
// 小程序需要将图片下载下来，然后才能绘制到画布上
......@@ -207,25 +270,19 @@ export default {
handleSave() {
var that = this;
wx.getSetting({
success(res) {
console.log('11111111111')
if (res.authSetting["scope.writePhotosAlbum"]) {
wx.showLoading({
title: "正在保存...",
mask: true
});
wx.getSetting({
success(res) {
if (res.authSetting["scope.writePhotosAlbum"]) {
that.saveImg();
} else if (res.authSetting["scope.writePhotosAlbum"] === undefined) {
console.log('3333333333333')
wx.authorize({
scope: "scope.writePhotosAlbum",
success() {
wx.showLoading({
title: "正在保存...",
mask: true
});
that.saveImg();
},
fail() {
......@@ -237,15 +294,9 @@ export default {
}
});
} else {
console.log('44444444444444')
wx.openSetting({
success(res) {
if (res.authSetting["scope.writePhotosAlbum"]) {
wx.showLoading({
title: "正在保存...",
mask: true
});
that.saveImg();
} else {
wx.showToast({
......@@ -267,6 +318,11 @@ export default {
});
},
saveImg() {
let _this = this;
// 按照设备比例去计算图片和画布尺寸
let bili = this.InfoSync.windowWidth / 375 * 1;
wx.canvasToTempFilePath({
......@@ -286,6 +342,7 @@ export default {
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
success(res) {
_this.$emit("closePosterDia");
wx.showModal({
content: "图片已保存到相册，赶紧晒一下吧~",
showCancel: false,
......@@ -304,6 +361,8 @@ export default {
});
},
fail: err => {
console.log(err,'保存相册出错');
wx.hideLoading();
wx.showToast({
title: "出现了错误，请稍后再试2222",
......
src/components/setting/index.vue
......@@ -222,31 +222,6 @@ export default {
//开始直播
startLive(){
this.$emit('setBeautyStart','start')
//判断网络环境
// wx.getNetworkType({
// success : (res) => {
// if(res.errMsg == 'getNetworkType:ok'){
// if(res.networkType != 'wifi'){
// wx.showModal({
// title: '流量提醒',
// content: '你目前处于非WIFI环境，是否继续',
// confirmText : '继续',
// confirmColor : '#07c160',
// success : (res1) => {
// if (res1.confirm) {
// this.$emit('setBeautyStart','start')
// console.log('用户点击确定')
// } else if (res1.cancel) {
// // console.log('用户点击取消')
// }
// }
// })
// }else{
// this.$emit('setBeautyStart','start')
// }
// }
// }
// })
}
}
......
src/pages/live/index.vue
......@@ -253,13 +253,6 @@ export default {
}
},
// tuiStream(oldval,newval){
// if(newval){
// console.log('tuiStream',newval)
// this.tuiStream = newval
// }
// }
},
components:{
navBar,
......@@ -454,9 +447,6 @@ export default {
//获取直播间详情
getLiveDetail(id){
console.log('获取',this.recoverLive)
if(this.isDetailLock && this.isDetailControlLock){
this.isDetailLock = false;
liveApi.queryLiveDetail({id}).then(res => {
......@@ -466,8 +456,6 @@ export default {
let result = res.data.data
if(result){
result.coverUrl = DFSImg(result.coverUrl)
result.logoUrl = DFSImg(result.logoUrl)
this.liveInfo = result;
......@@ -493,9 +481,6 @@ export default {
}else{
this.realStartTime = 0
}
this.getLiveTimeHandler(result.startTime)
this.getProductList(); //获取商品列表
......@@ -512,10 +497,6 @@ export default {
}
})
}
}else if(res.data.code == '-1'){
wx.showModal({
title: '提示',
......@@ -634,9 +615,29 @@ export default {
}
})
}else{
liveApi.queryLiveDetail({id : this.liveId}).then(res2 => {
if(res2.data.code == '200'){
if(res2.data.data == null || res2.data.data.liveBroadcastState == 4 || res2.data.data.liveBroadcastState == 2){
wx.showModal({
title: '提示',
content: '直播已关闭',
success (res3) {
if (res3.confirm) {
wx.reLaunch({url:`../liveList/main`})
} else if (res3.cancel) {
console.log('用户点击取消')
}
}
})
}else{
this.startLive(type);
}
}
})
}
}
}
})
},
......@@ -852,9 +853,9 @@ export default {
liveBroadcastId : this.liveId,
upperScreenState : type
}).then(res => {
this.isChangeProduct = true;
if(res.data.code == '200'){
if(res.data.code == '200'){
this.isChangeProduct = true;
console.log('上下屏')
if(type == 1){
......@@ -886,7 +887,7 @@ export default {
}
})
}
console.log(this.productList)
console.log(this.speakProductList, '上下屏商品')
}else{
wx.showModal({
......
src/pages/lived/index.vue
......@@ -24,7 +24,7 @@
<div class="info">
<p class="name line-clamp1" v-if="shopName">{{shopName}}</p>
<p class="num" v-if="liveNoticeInfo.liveBroadcastState != 2 && liveNoticeInfo.liveBroadcastState != 4">
<span>{{liveNoticeInfo.historyWatchNum}}</span>
<span>{{historyWatchNum}}</span>
<span style="margin-left:6px;">观看</span>
</p>
</div>
......@@ -61,8 +61,6 @@
style="width:100%;height:100vh;z-index:-1"
:src="liveNoticeInfo.playbackUrl[0]"
autoplay
loop
:controls="false"
:show-fullscreen-btn="false"
object-fit="cover"
/>
......@@ -120,6 +118,7 @@ export default {
status: 0, // 0：未开始 1：直播中 2：已结束
// 总数据
liveNoticeInfo: {}, //详情
historyWatchNum:0,
entryNoticeText: "", //用户通知
guestBookList: [], // 定时查评论
goodsList: [], //商品列表
......@@ -147,6 +146,8 @@ export default {
newCommentsTime: 0,
userActivebeginTime: 0,
videoContext:null,
openLiveTimer : null,
};
},
components: {
......@@ -237,7 +238,12 @@ export default {
}
}
this.init();
this.openLiveTimer = setInterval(() => {
this.init();
},5000)
// this.userEntry("IN");
......@@ -320,6 +326,10 @@ export default {
clearInterval(this.goodTiming);
this.goodTiming = null;
}
if(this.openLiveTimer){
clearInterval(this.openLiveTimer);
this.openLiveTimer = null;
}
},
mounted() {},
methods: {
......@@ -333,31 +343,27 @@ export default {
this.shopName = res.data.data.orgName;
this.shopLogo = DFSImg(res.data.data.logoUrl, 40, 40);
this.liveNoticeInfo = res.data.data;
this.liveNoticeInfo.coverUrl = this.liveNoticeInfo.coverUrl
? DFSImg(this.liveNoticeInfo.coverUrl)
: "";
this.liveNoticeInfo.shareUrl = this.liveNoticeInfo.coverUrl
? DFSImg(this.liveNoticeInfo.coverUrl, 500, 400)
: "";
this.liveNoticeInfo.coverUrl = this.liveNoticeInfo.coverUrl? DFSImg(this.liveNoticeInfo.coverUrl): "";
this.liveNoticeInfo.shareUrl = this.liveNoticeInfo.coverUrl? DFSImg(this.liveNoticeInfo.coverUrl, 500, 400): "";
this.getGoodsList();
if (this.liveNoticeInfo.liveBroadcastState == 2) {
// 调直播结束
this.endLived();
} else {
console.log("这里");
this.timingGetInfo();
}
if (this.liveNoticeInfo.liveBroadcastState != 2 && !this.goodTiming) {
this.goodTiming = setInterval(() => {
console.log("--------获取商品接口");
this.getGoodsList();
}, 5000);
} else if (
this.liveNoticeInfo.liveBroadcastState == 2 &&
this.goodTiming
) {
clearInterval(this.goodTiming);
// this.timingGetInfo();
}
// if (this.liveNoticeInfo.liveBroadcastState != 2 && !this.goodTiming) {
// this.goodTiming = setInterval(() => {
// console.log("--------获取商品接口");
// }, 5000);
// } else if (
// this.liveNoticeInfo.liveBroadcastState == 2 &&
// this.goodTiming
// ) {
// clearInterval(this.goodTiming);
// }
if(this.liveNoticeInfo.liveBroadcastState == 4){
this.endLived();
......@@ -503,13 +509,6 @@ export default {
(this.liveNoticeInfo.liveBroadcastState == 1 &&
resData.liveState == "END_LIVE")
) {
console.log(
this.liveNoticeInfo.liveBroadcastState,
resData.liveState,
this.firstComing,
"直播中----结束",
"结束----结束"
);
//直播结束且接口已结束
if (this.firstComing) {
this.firstComing = false;
......@@ -545,6 +544,7 @@ export default {
// 数据初始化
this.entryNoticeText = "";
this.liveNoticeInfo.historyWatchNum = resData.historyWatchNum - 0 >= 10000 ? ((resData.historyWatchNum - 0) / 10000).toFixed(1) + 'w' : resData.historyWatchNum; //观看人数
this.historyWatchNum = resData.historyWatchNum - 0 >= 10000 ? ((resData.historyWatchNum - 0) / 10000).toFixed(1) + 'w' : resData.historyWatchNum; //观看人数
if (resData.entryNoticeList.length > 0) {
if (resData.entryNoticeList.length == 1) {
this.entryNoticeText = `${resData.entryNoticeList[0].userName}`; //用户进入
......@@ -624,8 +624,6 @@ export default {
getServerTimeNow() {
live.queryServerTimeNow().then(res => {
if (res.data.code == 200) {
//定时查询数据
// this.timingGetInfo(res.data.data);
this.newCommentsTime = res.data.data;
this.userActivebeginTime = res.data.data;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment