Commit 36fbe921 by 程智春

直播

parent 1f5770ae
...@@ -72,5 +72,9 @@ export default { ...@@ -72,5 +72,9 @@ export default {
//获取服务器时间戳 //获取服务器时间戳
queryServerTimeNow(){ queryServerTimeNow(){
return requestGET(`${process.env.OLSHOP_URL}/liveBroadcastInfo/getServerTimeNow`) return requestGET(`${process.env.OLSHOP_URL}/liveBroadcastInfo/getServerTimeNow`)
} },
// 获取个人资料
getUserInfo() {
return requestPOST(`${process.env.OLSHOP_URL}/user/get_user_info`)
},
}; };
\ No newline at end of file
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
:key="index" :key="index"
@click="toGoodsInfo(item)" @click="toGoodsInfo(item)"
> >
<img :src="item.productImgUrl" alt /> <!-- <img :src="item.productImgUrl" alt /> -->
<image :src="item.productImgUrl" mode="aspectFill" alt=""></image>
<p class="num">{{item.number}}</p> <p class="num">{{item.number}}</p>
<div class="explain" v-if="item.upperScreenState==1">讲解中</div> <div class="explain" v-if="item.upperScreenState==1">讲解中</div>
</div> </div>
...@@ -17,7 +18,8 @@ ...@@ -17,7 +18,8 @@
<!-- 左上角展示讲解中商品 --> <!-- 左上角展示讲解中商品 -->
<div class="fixedGoods" v-else-if="showFixedGoods&&fixedGoodsList&&fixedGoodsList.length>0"> <div class="fixedGoods" v-else-if="showFixedGoods&&fixedGoodsList&&fixedGoodsList.length>0">
<div class="goodsList" v-for="(item,index) in fixedGoodsList" :key="index" @click="toGoodsInfo(item)"> <div class="goodsList" v-for="(item,index) in fixedGoodsList" :key="index" @click="toGoodsInfo(item)">
<img :src="item.productImgUrl" alt /> <!-- <img :src="item.productImgUrl" alt /> -->
<image :src="item.productImgUrl" mode="aspectFill" alt=""></image>
<!-- <p class="num">{{item.number}}</p> --> <!-- <p class="num">{{item.number}}</p> -->
<div class="explain" v-if="item.upperScreenState==1">讲解中</div> <div class="explain" v-if="item.upperScreenState==1">讲解中</div>
<p class="price" v-if="item.minPrice"> <p class="price" v-if="item.minPrice">
...@@ -40,12 +42,14 @@ export default { ...@@ -40,12 +42,14 @@ export default {
list: [], list: [],
// 讲解中浮动商品 // 讲解中浮动商品
fixedGoodsList: [], fixedGoodsList: [],
firstCom: true //首次进入 firstCom: true, //首次进入
liveId: 0,
}; };
}, },
watch: { watch: {
updateGoods() { updateGoods() {
console.log(this.goodsList,'---------------------------------46goodsList') console.log(this.goodsList,'---------------------------------46goodsList')
console.log(this.firstCom,'this.firstCom----------')
if (this.firstCom == true) { if (this.firstCom == true) {
this.list = []; this.list = [];
this.firstCom = false; this.firstCom = false;
...@@ -54,11 +58,12 @@ export default { ...@@ -54,11 +58,12 @@ export default {
this.goodsList.forEach((item, index) => { this.goodsList.forEach((item, index) => {
if (item.upperScreenState == 1) { if (item.upperScreenState == 1) {
arr1.push(item); arr1.push(item);
} else if (item.upperScreenState == 0) { } else if (item.upperScreenState == 0 || item.upperScreenState == 2) {
arr2.push(item); arr2.push(item);
} }
}); });
this.list = [...arr1, ...arr2]; this.list = [...arr1, ...arr2];
console.log(this.list,'--------------------------------this.list1212')
setTimeout(() => { setTimeout(() => {
this.fixedGoodsList = arr1 ? arr1 : []; this.fixedGoodsList = arr1 ? arr1 : [];
this.showFixedGoods = true; this.showFixedGoods = true;
...@@ -81,7 +86,10 @@ export default { ...@@ -81,7 +86,10 @@ export default {
components: {}, components: {},
computed: {}, computed: {},
created() {}, created() {},
onLoad() {}, onLoad(options) {
let params = JSON.parse(options.params);
this.liveId = params.liveId;
},
onUnload() { onUnload() {
this.fixedGoodsList = []; this.fixedGoodsList = [];
this.showFixedGoods = false; this.showFixedGoods = false;
...@@ -206,9 +214,9 @@ img { ...@@ -206,9 +214,9 @@ img {
border: 1px solid #949494; border: 1px solid #949494;
margin-right: 10px; margin-right: 10px;
overflow: hidden; overflow: hidden;
img { image {
width: 100%; width: 30vw;
height: 100%; height: 30vw;
object-fit: cover; object-fit: cover;
} }
.num { .num {
...@@ -242,14 +250,15 @@ img { ...@@ -242,14 +250,15 @@ img {
left: 12px; left: 12px;
.goodsList { .goodsList {
width: 22vw; width: 22vw;
border: 1px solid #ff3334; // border: 1px solid #ff3334;
margin-right: 10px; margin-right: 10px;
overflow: hidden; overflow: hidden;
margin-bottom: 10px; margin-bottom: 10px;
position: relative; position: relative;
img { border-radius: 2px;
image {
width: 22vw; width: 22vw;
height: 22vw; height: 28vw;
object-fit: cover; object-fit: cover;
} }
.num { .num {
......
...@@ -3,36 +3,46 @@ ...@@ -3,36 +3,46 @@
<van-popup <van-popup
:show="showDia" :show="showDia"
position="bottom" position="bottom"
custom-style="height: 50vh;padding:14px;border-top-left-radius:10px;border-top-right-radius:10px;" custom-style="height: 50vh;border-top-left-radius:10px;border-top-right-radius:10px;"
:close-on-click-overlay="true" :close-on-click-overlay="true"
@close="closeDia" @close="closeDia"
> >
<div class="list" v-if="list.length>0">
<div class="item" v-for="(item,index) in list" :key="index"> <div class="tit" v-if="list.length>0">
<div class="img" @click="toGoodsInfo(item)"> <span>商品列表</span>
<div class="num">{{item.number}}</div> <span>({{list.length}})</span>
<img v-if="item.productImgUrl" :src="item.productImgUrl" alt /> </div>
</div>
<div class="info"> <div class="list" v-if="list.length>0">
<p class="name line-clamp2">{{item.productName}}</p>
<div class="bottom"> <div class="item" v-for="(item,index) in list" :key="index">
<div class="price"> <div class="img" @click="toGoodsInfo(item)">
<p> <div class="num">{{item.number}}</div>
<span></span> <!-- <img v-if="item.productImgUrl" :src="item.productImgUrl" alt /> -->
<span>{{item.minPrice}}</span> <image v-if="item.productImgUrl" :src="item.productImgUrl" mode="aspectFill" alt=""></image>
</p> </div>
<!-- <p class="del"> <div class="info">
<span></span> <p class="name line-clamp2">{{item.productName}}</p>
<span>{{999}}</span> <div class="bottom">
</p>--> <div class="price">
</div> <p>
<div class="icon" @click="isLogin(item)"> <span></span>
<img src="../../../static/images/lived/shopCart.png" alt=""> <span>{{item.minPrice}}</span>
</p>
<!-- <p class="del">
<span></span>
<span>{{999}}</span>
</p>-->
</div>
<div class="icon" @click="isLogin(item)">
<img src="../../../static/images/lived/shopCart.png" alt="">
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div style="text-align:center;font-size:16px;padding-top:10px;" v-else>暂无商品</div> <div style="text-align:center;font-size:16px;padding-top:10px;" v-else>暂无商品</div>
</van-popup> </van-popup>
<!-- 选择规格弹层 --> <!-- 选择规格弹层 -->
...@@ -206,7 +216,14 @@ img{ ...@@ -206,7 +216,14 @@ img{
display: block; display: block;
} }
.livedGoodsList { .livedGoodsList {
.tit {
font-size: 16px;
padding: 14px 14px 6px 14px;
}
.list { .list {
overflow-y:auto;
max-height: 44vh;
padding: 0 14px;
.item { .item {
padding: 10px 4px; padding: 10px 4px;
display: flex; display: flex;
...@@ -218,7 +235,7 @@ img{ ...@@ -218,7 +235,7 @@ img{
overflow: hidden; overflow: hidden;
background: #999; background: #999;
position: relative; position: relative;
img { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
......
...@@ -31,7 +31,8 @@ ...@@ -31,7 +31,8 @@
<div class="item" v-for="(item,index) in list" :key="index" :class="{'itemBorder':index!=list.length-1}"> <div class="item" v-for="(item,index) in list" :key="index" :class="{'itemBorder':index!=list.length-1}">
<div class="img" @click="toGoodsInfo(item)"> <div class="img" @click="toGoodsInfo(item)">
<div class="num">{{item.number}}</div> <div class="num">{{item.number}}</div>
<img :src="item.productImgUrl" alt /> <!-- <img :src="item.productImgUrl" alt /> -->
<image :src="item.productImgUrl" mode="aspectFill" alt=""></image>
</div> </div>
<div class="info"> <div class="info">
<p class="name line-clamp2">{{item.productName}}</p> <p class="name line-clamp2">{{item.productName}}</p>
...@@ -283,7 +284,7 @@ export default { ...@@ -283,7 +284,7 @@ export default {
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
img { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
......
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
v-if="againLoadingPoster" v-if="againLoadingPoster"
:showPosterDia="showPosterDia" :showPosterDia="showPosterDia"
:posterInfo="posterInfo" :posterInfo="posterInfo"
:userInfo="userInfo"
@closePosterDia="closePosterDia" @closePosterDia="closePosterDia"
></livedposterDia> ></livedposterDia>
</div> </div>
...@@ -50,7 +51,8 @@ export default { ...@@ -50,7 +51,8 @@ export default {
backPath: "", backPath: "",
showPosterDia: false, showPosterDia: false,
posterInfo: {}, posterInfo: {},
againLoadingPoster: false // 是否开始加载海报 againLoadingPoster: false, // 是否开始加载海报
userInfo : {},
}; };
}, },
components: { components: {
...@@ -96,9 +98,20 @@ export default { ...@@ -96,9 +98,20 @@ export default {
query.qrCode = qrCode.replace("http", "https"); query.qrCode = qrCode.replace("http", "https");
} }
this.posterInfo = query; this.posterInfo = query;
this.againLoadingPoster = true;
live.getUserInfo().then(res1 => {
if(res1.data.code == '200'){
res1.data.data.headPortraitUrl = DFSImg(res1.data.data.headPortraitUrl)
this.userInfo = res1.data.data;
this.againLoadingPoster = true;
console.log(this.userInfo)
console.log('111111111111111111111111111')
}
})
} }
}); });
}, },
initShare() {}, initShare() {},
// 关闭 // 关闭
......
...@@ -7,7 +7,11 @@ ...@@ -7,7 +7,11 @@
@close="closeDia" @close="closeDia"
> >
<div class="posterWrap" @click="closeDia"> <div class="posterWrap" @click="closeDia">
<canvas canvas-id="posterCanvas" class="myCanvas"></canvas> <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="getImg">点击保存海报</div>
</div> </div>
</van-popup> </van-popup>
...@@ -17,7 +21,7 @@ ...@@ -17,7 +21,7 @@
<script type="text/ecmascript-6"> <script type="text/ecmascript-6">
import live from "@/api/live"; import live from "@/api/live";
export default { export default {
props: ["showPosterDia", "posterInfo"], props: ["showPosterDia", "posterInfo","userInfo"],
name: "", name: "",
data() { data() {
return { return {
...@@ -33,16 +37,20 @@ export default { ...@@ -33,16 +37,20 @@ export default {
nickName: "", nickName: "",
avatarUrl: "", avatarUrl: "",
miniCode: "" miniCode: ""
} },
posterStatus : false,
}; };
}, },
components: {}, components: {},
computed: {}, computed: {},
onLoad(options) { onLoad(options) {
this.posterStatus = false;
this.params = JSON.parse(options.params); this.params = JSON.parse(options.params);
this.liveId = this.params.liveId; this.liveId = this.params.liveId;
console.log(this.userInfo)
Object.assign(this.info, this.info, this.posterInfo); Object.assign(this.info, this.info, this.posterInfo);
console.log(this.info, "--------------------35"); console.log(this.info, "--------------------35");
console.log(this.$store.state)
this.init(); this.init();
}, },
created() {}, created() {},
...@@ -55,12 +63,13 @@ export default { ...@@ -55,12 +63,13 @@ export default {
// wx.showLoading({ // wx.showLoading({
// title: "生成中..." // title: "生成中..."
// }); // });
this.$set(this.info,'avatarUrl',this.userInfo.headPortraitUrl)
// this.info.avatarUrl = this.userInfo.headPortraitUrl
let _this = this; let _this = this;
wx.getUserInfo({ wx.getUserInfo({
//获取微信用户信息 //获取微信用户信息
success: function(res) { success: function(res) {
(_this.info.nickName = res.userInfo.nickName), (_this.info.nickName = res.userInfo.nickName),
(_this.info.avatarUrl = res.userInfo.avatarUrl),
_this.initPoster(_this.info); _this.initPoster(_this.info);
}, },
fail: function(res) { fail: function(res) {
...@@ -80,6 +89,8 @@ export default { ...@@ -80,6 +89,8 @@ export default {
//封面 //封面
this.saveThe(info.posterCoverUrl, path => { this.saveThe(info.posterCoverUrl, path => {
console.log(this.info)
console.log('0000000000000000000000封面')
ctx.drawImage(path, 0, 0, 310 * bili, 370 * bili); ctx.drawImage(path, 0, 0, 310 * bili, 370 * bili);
ctx.save(); ctx.save();
// 微信昵称 // 微信昵称
...@@ -111,6 +122,7 @@ export default { ...@@ -111,6 +122,7 @@ export default {
ctx.save(); ctx.save();
ctx.stroke(); ctx.stroke();
ctx.draw(); ctx.draw();
this.posterStatus = true;
console.log("--------海报生成成功"); console.log("--------海报生成成功");
}); });
}); });
...@@ -124,16 +136,20 @@ export default { ...@@ -124,16 +136,20 @@ export default {
console.log(res.path, "--------------------131"); console.log(res.path, "--------------------131");
callback(res.path); callback(res.path);
}, },
fail: function(res) {} fail: function(res) {
console.log('saveTheFail ___________________________',res)
}
}); });
}, },
getImg() { getImg() {
let query = { if(this.posterStatus){
liveBroadcastId: this.liveId, let query = {
shareType: "HB" liveBroadcastId: this.liveId,
}; shareType: "HB"
live.addShareRecord(query).then(); };
this.handleSave(); live.addShareRecord(query).then();
this.handleSave();
}
}, },
// 点击保存时,将画布生成海报 // 点击保存时,将画布生成海报
handleSave() { handleSave() {
...@@ -269,12 +285,31 @@ export default { ...@@ -269,12 +285,31 @@ export default {
min-height: calc(100vh - 80px); min-height: calc(100vh - 80px);
padding-top: 80px; padding-top: 80px;
// background-color: #f1f1f1; // background-color: #f1f1f1;
.myCanvas { .canvas-wrap{
width: 310px; width: 310px;
height: 520px; height: 520px;
margin: 0 auto; margin: 0 auto;
background: #fff; background: #fff;
position: relative;
.myCanvas {
width: 100%;
height: 100%;
background: #fff;
}
.masker{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: white;
text-align: center;
line-height: 520px;
font-size: 16px;
color: #666;
}
} }
.saveBtn { .saveBtn {
margin: 0 auto; margin: 0 auto;
margin-top: 20px; margin-top: 20px;
......
<template> <template>
<div class="notStarted"> <div class="notStarted">
<div class="title">{{info.title}}</div>
<p class="tit">直播倒计时</p> <p class="tit">直播倒计时</p>
<div class="time"> <div class="time">
<timeDown v-if="startTime" :startTime="startTime"></timeDown> <timeDown v-if="startTime" :startTime="startTime"></timeDown>
...@@ -30,6 +31,7 @@ export default { ...@@ -30,6 +31,7 @@ export default {
this.liveId = params.liveId; this.liveId = params.liveId;
console.log(params, "--------------------126"); console.log(params, "--------------------126");
this.startTime = this.info.startTime; this.startTime = this.info.startTime;
console.log(this.info)
}, },
mounted() {}, mounted() {},
methods: { methods: {
...@@ -72,6 +74,11 @@ export default { ...@@ -72,6 +74,11 @@ export default {
}, },
fail(res) { fail(res) {
console.log("message fail response: ", res); console.log("message fail response: ", res);
wx.showToast({
title: res,
icon: "none"
});
} }
}); });
} }
...@@ -115,12 +122,18 @@ export default { ...@@ -115,12 +122,18 @@ export default {
.notStarted { .notStarted {
position: absolute; position: absolute;
width: 70vw; width: 70vw;
top: 40%; top: 35%;
left: 15vw; left: 15vw;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.title{
font-size: 18px;
font-weight: bold;
color: #fff;
margin-bottom: 20px;
}
.tit { .tit {
font-size: 16px; font-size: 16px;
color: #fff; color: #fff;
......
...@@ -91,9 +91,11 @@ export default { ...@@ -91,9 +91,11 @@ export default {
} else if (options.from && options.from == "livedToIndex") { } else if (options.from && options.from == "livedToIndex") {
//来自直播详情 //来自直播详情
this.page = decodeURIComponent(options.backpath); this.page = decodeURIComponent(options.backpath);
this.params += "&" + serialize(options.params);
} else if (options.from && options.from == "livedBackShop") { } else if (options.from && options.from == "livedBackShop") {
//直播页back到商城 //直播页back到商城
this.page = decodeURIComponent(options.backpath); this.page = decodeURIComponent(options.backpath);
this.params += "&" + serialize(options.params);
} else if(options.from && options.from == "liveList"){ } else if(options.from && options.from == "liveList"){
//从主播端跳到商品 //从主播端跳到商品
this.page = decodeURIComponent(options.backpath); this.page = decodeURIComponent(options.backpath);
......
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
:enable-mic="enableMic" :enable-mic="enableMic"
:remote-mirror="remoteMirror" :remote-mirror="remoteMirror"
:local-mirror="remoteMirror" :local-mirror="remoteMirror"
:mirror="mirror"
style="width: 100%; height: 100vh;position:fixed;top:0;left:0;z-index:-1" style="width: 100%; height: 100vh;position:fixed;top:0;left:0;z-index:-1"
@statechange="statechange" @statechange="statechange"
@error="binderror" @error="binderror"
...@@ -216,6 +217,8 @@ export default { ...@@ -216,6 +217,8 @@ export default {
overOrStop : 1, //是暂停还是结束 overOrStop : 1, //是暂停还是结束
isDetailControlLock : true, isDetailControlLock : true,
mirror : false,
} }
}, },
watch:{ watch:{
...@@ -424,6 +427,7 @@ export default { ...@@ -424,6 +427,7 @@ export default {
//镜像 //镜像
updateRemoteMirror(val){ updateRemoteMirror(val){
this.remoteMirror = val; this.remoteMirror = val;
this.mirror = val == 'enable' ? true : false
}, },
//麦克风 //麦克风
updateEnableMic(val){ updateEnableMic(val){
...@@ -548,6 +552,7 @@ export default { ...@@ -548,6 +552,7 @@ export default {
this.noStartLive = false; this.noStartLive = false;
this.isSetBeauty = true; this.isSetBeauty = true;
this.enableCamera = true; this.enableCamera = true;
this.isDetailControlLock = false;
this.isBgImg = false; this.isBgImg = false;
this.pusher.startPreview() this.pusher.startPreview()
}, },
...@@ -616,7 +621,7 @@ export default { ...@@ -616,7 +621,7 @@ export default {
console.log('开始直播') console.log('开始直播')
this.pusher.start(); //开始推流 this.pusher.start(); //开始推流
this.isCountDown = false; this.isCountDown = false;
this.isDetailControlLock = true;
this.isSetBeauty = false; this.isSetBeauty = false;
clearInterval(timer) clearInterval(timer)
this.changeLiveStatus(1); this.changeLiveStatus(1);
...@@ -643,6 +648,7 @@ export default { ...@@ -643,6 +648,7 @@ export default {
this.enableCamera = false; this.enableCamera = false;
this.pusher.pause(); this.pusher.pause();
} }
this.isDetailControlLock = true;
this.$set(this.liveInfo,'liveBroadcastState',val) this.$set(this.liveInfo,'liveBroadcastState',val)
// this.pusher.resume(); // this.pusher.resume();
...@@ -684,11 +690,11 @@ export default { ...@@ -684,11 +690,11 @@ export default {
beginTime: dataTime, //评论时间 beginTime: dataTime, //评论时间
userActivebeginTime : userTime, //用户进入时间 userActivebeginTime : userTime, //用户进入时间
}).then(res => { }).then(res => {
this.isTimeLock = true;
if(res.data.code == '200'){ if(res.data.code == '200'){
this.isTimeFirstReq = false; this.isTimeFirstReq = false;
this.isTimeLock = true;
let result = res.data.data; let result = res.data.data;
if(result.liveState == 'IN_LIVE' || result.liveState == 'SUSPEND_LIVE' || result.liveState == 'NO_LIVE'){ // if(result.liveState == 'IN_LIVE' || result.liveState == 'SUSPEND_LIVE' || result.liveState == 'NO_LIVE' || result.liveState == 'PAUSE_LIVE'){
//用户通知 //用户通知
this.entryNoticeText = ""; this.entryNoticeText = "";
if (result.entryNoticeList.length > 0) { if (result.entryNoticeList.length > 0) {
...@@ -719,7 +725,7 @@ export default { ...@@ -719,7 +725,7 @@ export default {
} }
this.updateVal = new Date().getTime(); //监听使用数据 this.updateVal = new Date().getTime(); //监听使用数据
} // }
} }
}) })
}else{ }else{
...@@ -763,7 +769,7 @@ export default { ...@@ -763,7 +769,7 @@ export default {
}, },
//获取商品列表 //获取商品列表
getProductList(){ getProductList(){
liveApi.queryProductList({id : this.liveId}).then(res => { liveApi.queryProductList({id : this.liveId,pageNum : 0,pageSize:0}).then(res => {
if(res.data.code == '200'){ if(res.data.code == '200'){
let productIdArr = [] let productIdArr = []
......
<template> <template>
<div class="container" :style="{'padding-top':navHeight +'px'}"> <div class="container" :style="{'padding-top':navHeight +'px'}">
<div class="masker"></div>
<image class="bg-img" :src="overInfo.coverUrl" mode="aspectFill" alt=""></image> <image class="bg-img" :src="overInfo.coverUrl" mode="aspectFill" alt=""></image>
<navBar :navTop="navTop" :liveInfo="liveInfo" :navHeight="navHeight" :type="type"></navBar> <div class="conbox">
<div class="live-over">
<div class="live-over"> <div class="over-text">直播已结束</div>
<div class="over-text">直播已结束</div> <div class="live-time">直播时长:{{overInfo.liveTime}}</div>
<div class="live-time">直播时长:{{overInfo.liveTime}}</div>
</div>
<div class="live-info">
<div class="info-row item-row-one">
<div class="info-item">
<div class="item-num">{{overInfo.watchNum}}</div>
<div class="item-text">观看</div>
</div>
<div class="info-item">
<div class="item-num">{{overInfo.goodsClickNum}}</div>
<div class="item-text">商品点击</div>
</div>
</div> </div>
<div class="info-row">
<div class="info-item"> <div class="live-info">
<div class="item-num">{{overInfo.shareNum}}</div> <div class="info-row item-row-one">
<div class="item-text">分享</div> <div class="info-item">
</div> <div class="item-num">{{overInfo.watchNum}}</div>
<div class="info-item"> <div class="item-text">观看</div>
<div class="item-num">{{overInfo.guestBookNum}}</div> </div>
<div class="item-text">评论</div> <div class="info-item">
<div class="item-num">{{overInfo.goodsClickNum}}</div>
<div class="item-text">商品点击</div>
</div>
</div> </div>
<div class="info-item"> <div class="info-row">
<div class="item-num">{{overInfo.likeNum}}</div> <div class="info-item">
<div class="item-text"></div> <div class="item-num">{{overInfo.shareNum}}</div>
<div class="item-text">分享</div>
</div>
<div class="info-item">
<div class="item-num">{{overInfo.guestBookNum}}</div>
<div class="item-text">评论</div>
</div>
<div class="info-item">
<div class="item-num">{{overInfo.likeNum}}</div>
<div class="item-text"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
<navBar :navTop="navTop" :liveInfo="liveInfo" :navHeight="navHeight" :type="type"></navBar>
</div> </div>
</template> </template>
...@@ -116,13 +120,30 @@ export default { ...@@ -116,13 +120,30 @@ export default {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
.conbox{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.masker{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(102,102,102,.38);
}
.bg-img{ .bg-img{
width: 100%; width: 100%;
height: 100vh; height: 100vh;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
z-index: -1; background-color: rgba(102,102,102,.38);
} }
.live-over{ .live-over{
color: white; color: white;
......
...@@ -2,7 +2,8 @@ ...@@ -2,7 +2,8 @@
<div class="lived"> <div class="lived">
<!-- 背景(未开始&&已结束) --> <!-- 背景(未开始&&已结束) -->
<div class="bgImg" v-if="liveNoticeInfo.coverUrl&&liveNoticeInfo.liveBroadcastState!=1"> <div class="bgImg" v-if="liveNoticeInfo.coverUrl&&liveNoticeInfo.liveBroadcastState!=1">
<img :src="liveNoticeInfo.coverUrl" alt /> <!-- <img :src="liveNoticeInfo.coverUrl" alt /> -->
<image :src="liveNoticeInfo.coverUrl" mode="aspectFill" alt=""></image>
</div> </div>
<!-- 直播展示层 --> <!-- 直播展示层 -->
<div class="liveModel" v-if="liveNoticeInfo.liveBroadcastState>-1"> <div class="liveModel" v-if="liveNoticeInfo.liveBroadcastState>-1">
...@@ -121,12 +122,12 @@ export default { ...@@ -121,12 +122,12 @@ export default {
spokesmanObj: {}, //分销员信息 spokesmanObj: {}, //分销员信息
navTop: 0, navTop: 0,
navHeight: 0, navHeight: 0,
isTimeLock : true, //时间锁 isTimeLock: true, //时间锁
isTimeFirstReq : true, //第一次数据请求 isTimeFirstReq: true, //第一次数据请求
newCommentsTime : 0, newCommentsTime: 0,
userActivebeginTime : 0, userActivebeginTime: 0
}; };
}, },
components: { components: {
...@@ -137,10 +138,10 @@ export default { ...@@ -137,10 +138,10 @@ export default {
}, },
computed: {}, computed: {},
onLoad(options) { onLoad(options) {
console.log('onLoad') console.log("onLoad");
this.isTimeLock = true; this.isTimeLock = true;
this.isTimeFirstReq = true; this.isTimeFirstReq = true;
this.newCommentsTime = 0; this.newCommentsTime = 0;
wx.setKeepScreenOn({ wx.setKeepScreenOn({
keepScreenOn: true keepScreenOn: true
}); });
...@@ -180,7 +181,7 @@ export default { ...@@ -180,7 +181,7 @@ export default {
}); });
} }
this.init(); this.init();
// this.userEntry("IN"); // this.userEntry("IN");
// 通过分享进入直播间重新查询订阅消息配置 // 通过分享进入直播间重新查询订阅消息配置
...@@ -225,11 +226,11 @@ export default { ...@@ -225,11 +226,11 @@ export default {
console.log(shareObj, "----------------168"); console.log(shareObj, "----------------168");
return shareObj; return shareObj;
}, },
onHide(){ onHide() {
this.userEntry("OUT"); this.userEntry("OUT");
}, },
onShow(){ onShow() {
console.log('onShow') console.log("onShow");
this.userEntry("IN"); this.userEntry("IN");
}, },
onUnload() { onUnload() {
...@@ -262,14 +263,14 @@ export default { ...@@ -262,14 +263,14 @@ export default {
? DFSImg(this.liveNoticeInfo.coverUrl) ? DFSImg(this.liveNoticeInfo.coverUrl)
: ""; : "";
this.liveNoticeInfo.shareUrl = this.liveNoticeInfo.coverUrl this.liveNoticeInfo.shareUrl = this.liveNoticeInfo.coverUrl
? DFSImg(this.liveNoticeInfo.coverUrl,500,400) ? DFSImg(this.liveNoticeInfo.coverUrl, 500, 400)
: ""; : "";
this.getGoodsList(); this.getGoodsList();
if (this.liveNoticeInfo.liveBroadcastState == 2) { if (this.liveNoticeInfo.liveBroadcastState == 2) {
// 调直播结束 // 调直播结束
this.endLived(); this.endLived();
} else { } else {
console.log('这里') console.log("这里");
this.timingGetInfo(); this.timingGetInfo();
} }
if (this.liveNoticeInfo.liveBroadcastState != 2 && !this.goodTiming) { if (this.liveNoticeInfo.liveBroadcastState != 2 && !this.goodTiming) {
...@@ -287,9 +288,14 @@ export default { ...@@ -287,9 +288,14 @@ export default {
}); });
}, },
back() { back() {
let query = {
sessionid: wx.getStorageSync("sessionid") || ""
};
// 返回商城 // 返回商城
wx.reLaunch({ wx.reLaunch({
url: `../index/main?from=livedBackShop&backpath=${this.backPath}` url: `../index/main?from=livedBackShop&backpath=${
this.backPath
}&params=${JSON.stringify(query)}`
}); });
}, },
// 是否登录 // 是否登录
...@@ -347,21 +353,24 @@ export default { ...@@ -347,21 +353,24 @@ export default {
}, },
// 定时查询直播数据 // 定时查询直播数据
timingGetInfo(serverTime) { timingGetInfo(serverTime) {
if(this.isTimeLock){ if (this.isTimeLock) {
this.isTimeLock = false; this.isTimeLock = false;
let dataTime = this.isTimeFirstReq ? serverTime - 2000 : this.newCommentsTime let dataTime = this.isTimeFirstReq
let userTime = this.isTimeFirstReq ? serverTime - 2000 : this.userActivebeginTime ? serverTime - 2000
: this.newCommentsTime;
let userTime = this.isTimeFirstReq
? serverTime - 2000
: this.userActivebeginTime;
// 前五秒 // 前五秒
let query = { let query = {
id: Number(this.liveId), id: Number(this.liveId),
beginTime: dataTime, beginTime: dataTime,
userActivebeginTime : userTime, //用户进入时间 userActivebeginTime: userTime //用户进入时间
}; };
live.getLiveStateById(query).then(res => { live.getLiveStateById(query).then(res => {
this.isTimeFirstReq = false; this.isTimeFirstReq = false;
this.isTimeLock = true; this.isTimeLock = true;
if (res.data.code == 200) { if (res.data.code == 200) {
let resData = res.data.data; let resData = res.data.data;
// 1、判断状态如果发生改变才init(); // 1、判断状态如果发生改变才init();
// 2、直播中给用户进入通知、评论、点赞数赋值 // 2、直播中给用户进入通知、评论、点赞数赋值
...@@ -412,11 +421,17 @@ export default { ...@@ -412,11 +421,17 @@ export default {
} }
// console.log("resData.guestBookList---》", resData.guestBookList) // console.log("resData.guestBookList---》", resData.guestBookList)
this.guestBookList = resData.guestBookList; //评论列表 this.guestBookList = resData.guestBookList; //评论列表
if(resData.guestBookList && resData.guestBookList.length){ if (resData.guestBookList && resData.guestBookList.length) {
this.newCommentsTime = resData.guestBookList[resData.guestBookList.length - 1].createTimeStamp this.newCommentsTime =
resData.guestBookList[
resData.guestBookList.length - 1
].createTimeStamp;
} }
if(resData.entryNoticeList && resData.entryNoticeList.length){ if (resData.entryNoticeList && resData.entryNoticeList.length) {
this.userActivebeginTime = resData.entryNoticeList[resData.entryNoticeList.length - 1].createTimeStamp this.userActivebeginTime =
resData.entryNoticeList[
resData.entryNoticeList.length - 1
].createTimeStamp;
} }
this.likeInfo = resData.likeInfo; //点赞信息 this.likeInfo = resData.likeInfo; //点赞信息
// 直播中且接口直播中---主要操作 // 直播中且接口直播中---主要操作
...@@ -427,12 +442,12 @@ export default { ...@@ -427,12 +442,12 @@ export default {
if (resData.entryNoticeList.length == 1) { if (resData.entryNoticeList.length == 1) {
this.entryNoticeText = `${resData.entryNoticeList[0].userName}`; //用户进入 this.entryNoticeText = `${resData.entryNoticeList[0].userName}`; //用户进入
} else { } else {
this.entryNoticeText = `${resData.entryNoticeList[0].userName}${ this.entryNoticeText = `${
resData.entryNoticeList.length resData.entryNoticeList[0].userName
}人`; //用户进入 }${resData.entryNoticeList.length}人`; //用户进入
} }
} }
this.updateVal = new Date().getTime(); //监听使用数据 this.updateVal = new Date().getTime(); //监听使用数据
} else { } else {
// if (this.infoTiming) { // if (this.infoTiming) {
...@@ -440,8 +455,8 @@ export default { ...@@ -440,8 +455,8 @@ export default {
// } // }
} }
}); });
}else{ } else {
console.log('上次请求未结束,进行了下一次请求') console.log("上次请求未结束,进行了下一次请求");
} }
}, },
// 获取商品列表 // 获取商品列表
...@@ -495,22 +510,22 @@ export default { ...@@ -495,22 +510,22 @@ export default {
}); });
}, },
//服务器时间戳 //服务器时间戳
getServerTimeNow(){ getServerTimeNow() {
live.queryServerTimeNow().then(res => { live.queryServerTimeNow().then(res => {
if(res.data.code == 200){ if (res.data.code == 200) {
//定时查询数据 //定时查询数据
// this.timingGetInfo(res.data.data); // this.timingGetInfo(res.data.data);
this.newCommentsTime = res.data.data this.newCommentsTime = res.data.data;
this.userActivebeginTime = res.data.data this.userActivebeginTime = res.data.data;
console.log('newCommentsTime',this.newCommentsTime) console.log("newCommentsTime", this.newCommentsTime);
// setTimeout(() => { // setTimeout(() => {
this.infoTiming = setInterval(() => { this.infoTiming = setInterval(() => {
this.timingGetInfo(res.data.data); this.timingGetInfo(res.data.data);
}, 2000); }, 2000);
// }, 2000); // }, 2000);
} }
}) });
}, },
error(res) { error(res) {
console.log(res, "------------------237"); console.log(res, "------------------237");
...@@ -572,7 +587,7 @@ img { ...@@ -572,7 +587,7 @@ img {
bottom: 0; bottom: 0;
right: 0; right: 0;
z-index: -1; z-index: -1;
img { image {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
......
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