Skip to content

M
mayi-mp-shop
Commit b909156b by 程智春
Options

4.15直播

parent 39db792e
Showing with 177 additions and 108 deletions
src/components/livedModel/livedControls.vue
......@@ -20,6 +20,7 @@
v-if="(info.liveBroadcastState==1||info.liveBroadcastState==3)&&list"
:updateGoods="updateGoods"
:goodsList="list"
:isFocusComments="isFocusComments"
></livedExplainingCommodities>
<!-- 商品列表弹层 -->
<livedGoodsDia
......@@ -119,6 +120,8 @@ export default {
getBottom:0,//动态绑定输入框位置
loadingShare:false,
isClick:true,
isFocusComments:false, //是否在评论中，如果在评论中就隐藏掉上屏商品
};
},
components: {
......@@ -182,7 +185,7 @@ export default {
methods: {
// 数量大于1w
watchMan(val) {
return val - 0 > 10000 ? Math.floor(val / 10000 * 100) / 100 + "w" : val;
return val - 0 > 10000 ? ((val - 0) / 10000).toFixed(1) + "w" : val;
},
// 点赞
addLike(val) {
......@@ -282,10 +285,12 @@ export default {
setTimeout(() => {
this.isSend = false;
this.sendVal = "";
this.isFocusComments = false;
}, 300);
},
// 获取焦点
onFocus(e){
this.isFocusComments = true;
this.getBottom=(e.mp.detail.height-10);
},
// 点击发送留言
......@@ -500,7 +505,7 @@ export default {
font-size: 16px;
.sendIpt {
width: 70vw;
color: #999;
color: white;
margin-left: 10px;
}
.send {
......
src/components/livedModel/livedExplainingCommodities.vue
......@@ -16,7 +16,7 @@
</div>
</div>
<!-- 左上角展示讲解中商品 -->
<div class="fixedGoods" v-else-if="showFixedGoods&&fixedGoodsList&&fixedGoodsList.length>0">
<div class="fixedGoods" v-else-if="showFixedGoods&&fixedGoodsList&&fixedGoodsList.length>0&&!isFocusComments">
<div class="goodsList" v-for="(item,index) in fixedGoodsList" :key="index" @click="toGoodsInfo(item)">
<div class="explain" v-if="item.upperScreenState==1">讲解中</div>
<image :src="item.productImgUrl" mode="aspectFill" alt=""></image>
......@@ -32,7 +32,7 @@
import { DFSImg } from "@/utils/index";
import live from "@/api/live";
export default {
props: ["updateGoods", "goodsList"],
props: ["updateGoods", "goodsList","isFocusComments"],
name: "",
data() {
return {
......@@ -269,7 +269,7 @@ img {
}
.fixedGoods {
position: fixed;
top: 14vh;
top: 22vh;
left: 12px;
.goodsList {
width: 78px;
......
src/components/livedModel/livedIsEnded.vue
......@@ -5,19 +5,19 @@
<p class="endTxt">直播已{{status == 2 ? '结束' : "失效"}}</p>
<p class="time">
<span>直播时长：</span>
<span>{{endInfo.liveTime}}</span>
<span>{{status == 2 ? endInfo.liveTime : '00:00:00'}}</span>
</p>
<div class="data">
<div>
<p>{{endInfo.watchNum}}</p>
<p>{{status == 2 ? endInfo.watchNum : 0}}</p>
<p>观看</p>
</div>
<div>
<p>{{endInfo.guestBookNum}}</p>
<p>{{status == 2 ? endInfo.guestBookNum : 0}}</p>
<p>评论</p>
</div>
<div>
<p>{{endInfo.likeNum}}</p>
<p>{{status == 2 ? endInfo.likeNum : 0}}</p>
<p>赞</p>
</div>
</div>
......
src/components/livedModel/livedposterDia.vue
......@@ -116,6 +116,18 @@ export default {
ctx.fillRect(0, 330 * bili, 310 * bili, 40 * bili);
if(this.info.livedStatus == 0){
this.saveThe('https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/1a33da04-8224-4980-9299-a4a8e32be678.png',path => {
ctx.drawImage(path, 160 * bili , 340 * bili, 20 * bili, 20 * bili);
ctx.save()
ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(14);
ctx.fillText(this.info.livedTime, 188 * bili , 355 * bili);
})
}
this.saveThe('https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/1eaa8c87-e20a-4b5b-8c21-596dac8fa093.png',path => {
ctx.drawImage(path, 20 * bili , 340 * bili, 26 * bili, 20 * bili);
ctx.save()
......@@ -124,18 +136,13 @@ export default {
ctx.setFontSize(14);
ctx.fillText(this.info.livedStatus == 1 ? '直播中' : '直播预告', 52 * bili , 355 * bili);
if(this.info.livedStatus == 0){
this.saveThe('https://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/1a33da04-8224-4980-9299-a4a8e32be678.png',path => {
ctx.drawImage(path, 160 * bili , 340 * bili, 20 * bili, 20 * bili);
ctx.save()
ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(14);
ctx.fillText(this.info.livedTime, 188 * bili , 355 * bili);
ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(14);
ctx.fillText(this.info.livedTime, 188 * bili , 355 * bili);
})
}
})
......
src/components/livedModel/notStarted.vue
......@@ -45,65 +45,96 @@ export default {
methods: {
// 开播提醒
remind() {
let _this = this;
console.log("点击开播,'------------34");
try {
const subscribeMessageObj = this.$store.state.subscribeMessageObj;
if (
subscribeMessageObj &&
Object.keys(subscribeMessageObj).length > 0
) {
// TODO 开播订阅
const tmplIds = [];
for (var key in subscribeMessageObj) {
// 改成开播key
if (key == "start_live") {
tmplIds.push(subscribeMessageObj[key]);
}
}
if (tmplIds.length > 0) {
wx.requestSubscribeMessage({
tmplIds: tmplIds,
success:(res)=> {
console.log(res,res[tmplIds[0]],'---------------------58')
if(res[tmplIds[0]]=="accept"){
wx.showToast({
title: "您已成功订阅~",
icon: "success"
});
let query = {
liveBroadcastId: Number(_this.liveId),
openId: wx.getStorageSync("openid"),
subMessageTemplateId:tmplIds[0],
};
live.addLiveNoticeByCustomer(query).then(res => {});
wx.getSetting({
withSubscriptions: true,
success (res) {
console.log(res.subscriptionsSetting,'subscriptionsSetting')
if(!res.subscriptionsSetting.mainSwitch){
wx.showModal({
content: '检测到您没打开订阅消息的权限，是否去设置打开？',
confirmText : '确认',
confirmColor : '#07c160',
success : (res2) => {
if (res2.confirm) {
wx.openSetting({
withSubscriptions : true,
success (res1) {
console.log(res1.authSetting,'authSetting')
}
})
}
}
console.log("message success response: ", res);
},
fail(res) {
console.log("message fail response: ", res);
})
}else{
try {
const subscribeMessageObj = _this.$store.state.subscribeMessageObj;
if (
subscribeMessageObj &&
Object.keys(subscribeMessageObj).length > 0
) {
// TODO 开播订阅
const tmplIds = [];
for (var key in subscribeMessageObj) {
// 改成开播key
if (key == "start_live") {
tmplIds.push(subscribeMessageObj[key]);
}
}
if (tmplIds.length > 0) {
wx.requestSubscribeMessage({
tmplIds: tmplIds,
success:(res)=> {
console.log(res,res[tmplIds[0]],'---------------------58')
if(res[tmplIds[0]]=="accept"){
wx.showToast({
title: "您已成功订阅~",
icon: "success"
});
let query = {
liveBroadcastId: Number(_this.liveId),
openId: wx.getStorageSync("openid"),
subMessageTemplateId:tmplIds[0],
};
live.addLiveNoticeByCustomer(query).then(res => {});
}
console.log("message success response: ", res);
},
fail(res) {
console.log("message fail response: ", res);
wx.showToast({
title: '订阅失败，是否授权或者网络错误',
icon: "none"
});
}
});
}
}else{
wx.showToast({
title: res,
title: '订阅失败，是否授权或者网络错误',
icon: "none"
});
console.log('开播失败')
}
});
} catch (err) {
wx.showToast({
title: '订阅失败，是否授权或者网络错误',
icon: "none"
});
console.error("subscribeMessage-err", err);
}
}
}else{
wx.showToast({
title: '订阅失败',
icon: "none"
});
console.log('开播失败')
}
} catch (err) {
wx.showToast({
title: '订阅失败',
icon: "none"
});
console.error("subscribeMessage-err", err);
}
})
},
// 是否登录
isLogin() {
......
src/components/setting/index.vue
......@@ -221,31 +221,32 @@ 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')
}
}
}
})
// 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
......@@ -11,9 +11,9 @@
:whiteness="whiteness"
:device-position="devicePosition"
:enable-mic="enableMic"
:remote-mirror="remoteMirror"
:local-mirror="remoteMirror"
:remote-mirror="mirror"
:mirror="mirror"
:local-mirror="remoteMirror"
:waiting-image="liveInfo.coverUrl"
style="width: 100%; height: 100vh;position:fixed;top:0;left:0;z-index:-1"
@statechange="statechange"
......@@ -115,7 +115,7 @@
@updateRemoteMirror="updateRemoteMirror"
@updateEnableMic="updateEnableMic"
v-if="isSetBeauty"
@setBeautyStart="startLive"
@setBeautyStart="checkLiveEnv"
>
</setting>
<!-- 评论 -->
......@@ -160,7 +160,7 @@ export default {
clear:'HD',
devicePosition : 'front', //前置或者后置 back => 后置
enableMic: true, //麦克风是否开启
remoteMirror:'enable', //镜像
remoteMirror:'disable', //镜像
userInfo : null,
......@@ -219,7 +219,7 @@ export default {
isDetailControlLock : true,
mirror : true,
mirror : false,
}
},
filter(){
......@@ -731,11 +731,11 @@ export default {
}
}
//观看
this.look = result.historyWatchNum - 0 >= 10000 ? Math.floor(result.historyWatchNum / 10000)+ "w" : result.historyWatchNum
this.look = result.historyWatchNum - 0 >= 10000 ? ((result.historyWatchNum - 0) / 10000).toFixed(1)+ "w" : result.historyWatchNum
//在线
this.online = result.watchNum - 0 >= 10000 ? Math.floor(result.watchNum / 10000)+ "w" : result.watchNum
this.online = result.watchNum - 0 >= 10000 ?((result.watchNum - 0) / 10000).toFixed(1)+ "w" : result.watchNum
//点赞
this.praise = result.likeInfo.likeNum - 0 >= 10000 ? Math.floor(result.likeInfo.likeNum / 10000)+ "w" : result.likeInfo.likeNum
this.praise = result.likeInfo.likeNum - 0 >= 10000 ? ((result.likeInfo.likeNum - 0) / 10000).toFixed(1)+ "w" : result.likeInfo.likeNum
//评论
result.guestBookList.forEach(item => {
this.commentsList.push(item)
......
src/pages/liveOver/index.vue
......@@ -95,10 +95,17 @@ export default {
}).then(res => {
// console.log(res.data.code == 200)
if(res.data.code == 200){
let result = res.data.data
// console.log(res.data.data)
res.data.data.coverUrl = DFSImg(res.data.data.coverUrl)
this.overInfo = res.data.data
result.watchNum = result.watchNum - 0 > 10000 ? ((result.watchNum - 0) / 10000).toFixed(1) + 'w' : result.watchNum
result.goodsClickNum = result.goodsClickNum - 0 > 10000 ? ((result.goodsClickNum - 0) / 10000).toFixed(1) + 'w' : result.goodsClickNum
result.shareNum = result.shareNum - 0 > 10000 ? ((result.shareNum - 0) / 10000).toFixed(1) + 'w' : result.shareNum
result.guestBookNum = result.guestBookNum - 0 > 10000 ? ((result.guestBookNum - 0) / 10000).toFixed(1) + 'w' : result.guestBookNum
result.likeNum = result.likeNum - 0 > 10000 ? ((result.likeNum - 0) / 10000).toFixed(1) + 'w' : result.likeNum
this.overInfo = result
console.log(this.overInfo)
}
......
src/pages/lived/index.vue
......@@ -45,7 +45,7 @@
></livedIsEnded>
<!-- 控件层 -->
<livedControls
v-if="liveNoticeInfo&&liveNoticeInfo.liveBroadcastState!=2"
v-if="liveNoticeInfo&&liveNoticeInfo.liveBroadcastState!=2&&liveNoticeInfo.liveBroadcastState!=4"
:info="liveNoticeInfo"
:entryNoticeText="entryNoticeText"
:guestBookList="guestBookList"
......@@ -129,7 +129,8 @@ export default {
isTimeFirstReq: true, //第一次数据请求
newCommentsTime: 0,
userActivebeginTime: 0
userActivebeginTime: 0,
videoContext:null,
};
},
components: {
......@@ -140,6 +141,11 @@ export default {
},
computed: {},
onLoad(options) {
if(this.videoContext){
this.videoContext.resume()
this.videoContext.play()
}
console.log("onLoad",options);
this.isTimeLock = true;
this.isTimeFirstReq = true;
......@@ -168,7 +174,9 @@ export default {
}
});
if(options.params){
this.params = JSON.parse(options.params);
console.log(this.params, "-----------------133");
this.$store.commit("setOfflineShopCode", this.params.offlineShopCode);
this.liveId = this.params.liveId;
......@@ -271,6 +279,11 @@ export default {
this.userEntry("OUT");
},
onShow() {
if(this.videoContext){
this.videoContext.resume()
this.videoContext.play()
}
console.log("onShow");
this.userEntry("IN");
this.isLogin()
......@@ -279,8 +292,8 @@ export default {
this.liveNoticeInfo.liveBroadcastState = -1;
this.liveNoticeInfo = {};
this.liveNoticeInfo.boStreamRTMP = "";
let videoContext = wx.createLivePlayerContext("liveDemo");
videoContext.stop();
this.videoContext = wx.createLivePlayerContext("liveDemo");
this.videoContext.stop();
this.userEntry("OUT");
this.firstComing = true;
if (this.infoTiming) {
......@@ -355,6 +368,7 @@ export default {
});
},
back() {
console.log(this.backPath,'this.backPath')
let query = {
sessionid: wx.getStorageSync("sessionid") || ""
};
......@@ -514,7 +528,7 @@ export default {
// 直播中且接口直播中---主要操作
// 数据初始化
this.entryNoticeText = "";
this.liveNoticeInfo.historyWatchNum = resData.historyWatchNum; //观看人数
this.liveNoticeInfo.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}`; //用户进入
......@@ -564,7 +578,11 @@ export default {
};
live.getLiveStatisticsById(query).then(res => {
if (res.data.code == 200) {
this.endInfo = res.data.data;
let result = res.data.data
result.watchNum = result.watchNum - 0 > 10000 ? ((result.watchNum - 0) / 10000).toFixed(1) + 'w' : result.watchNum
result.guestBookNum = result.guestBookNum - 0 > 10000 ? ((result.guestBookNum - 0) / 10000).toFixed(1) + 'w' : result.guestBookNum
result.likeNum = result.likeNum - 0 > 10000 ? ((result.likeNum - 0) / 10000).toFixed(1) + 'w' : result.likeNum
this.endInfo = result;
}
});
},
......
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