Skip to content

M
mayi-mp-shop
Commit 36fbe921 by 程智春
Options

直播

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