Skip to content

M
mayi-mp-shop
Commit 0c1816c9 by 程智春
Options

直播v2.0

parent bd105099
Showing with 100 additions and 74 deletions
src/components/livedModel/livedControls.vue
......@@ -9,11 +9,11 @@
</div>
<!-- 评论层 -->
<livedIsMsg
v-if="(info.liveBroadcastState!=2 || info.liveBroadcastState!=4) &&guestBookList"
:guestBookList="guestBookList"
:updateVal="updateVal"
:isSend="isSend"
:liveId="liveId"
:info="info"
:fixedHeight="getBottom"
></livedIsMsg>
<!-- 带货商品层 -->
......@@ -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" @click="isLogin">跟主播说点什么...</div>
<div class="iptCopy" v-if="!info.playbackUrl || info.liveBroadcastState==3" @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/livedGoodsDia.vue
......@@ -15,8 +15,8 @@
<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="item" v-for="(item,index) in list" :key="index" @click="toGoodsInfo(item)">
<div class="img" >
<div class="num">{{item.number}}</div>
<!-- <img v-if="item.productImgUrl" :src="item.productImgUrl" alt /> -->
<image v-if="item.productImgUrl" :src="item.productImgUrl" mode="aspectFill" alt=""></image>
......@@ -34,7 +34,7 @@
<span>{{999}}</span>
</p>-->
</div>
<div class="icon" @click="isLogin(item)">
<div class="icon" @click.stop="isLogin(item)">
<img src="../../../static/images/lived/shopCart.png" alt="">
</div>
</div>
......
src/components/livedModel/livedIsMsg.vue
......@@ -19,7 +19,7 @@
<script type="text/ecmascript-6">
import liveApi from "@/api/live";
export default {
props:["guestBookList","updateVal","isSend","fixedHeight","liveId"],
props:["guestBookList","updateVal","isSend","fixedHeight","liveId","info"],
name: "",
data() {
return {
......@@ -29,15 +29,22 @@ export default {
},
watch:{
updateVal(){
this.list=[...this.list,...this.guestBookList];
this.scrollTop=this.list.length*1000;
if(!this.info.playbackUrl){
console.log('2222222222222')
this.list=[...this.list,...this.guestBookList];
this.scrollTop=this.list.length*1000;
}
}
},
components: {},
computed: {},
created() {},
onLoad(){
this.init()
if(this.info.playbackUrl && this.info.playbackUrl[0]){
this.init()
}
},
mounted() {},
methods: {
......@@ -51,7 +58,10 @@ export default {
beginTime : 1
}
liveApi.queryPlaybackComments(query).then(res => {
console.log(res.data)
if(res.data.code == '200'){
this.list= res.data.data.guestBookList.slice(-100);
this.scrollTop=this.list.length*1000;
}
})
}
}
......
src/components/livedModel/livedShareDia.vue
......@@ -134,8 +134,7 @@ export default {
}
console.log('query -----------------',query)
let newTime = new Date(this.info.startTime.replace(/-/g, "/"));
query.livedTime = `${newTime.getMonth() + 1}月${newTime.getDate() -
1}日 ${Number(newTime.getHours()) < 10 ? '0' + Number(newTime.getHours()) : newTime.getHours()}:${Number(newTime.getMinutes()) < 10 ? '0' + Number(newTime.getMinutes()) : newTime.getMinutes()}`;
query.livedTime = `${newTime.getMonth() + 1}月${newTime.getDate()}日 ${Number(newTime.getHours()) < 10 ? '0' + Number(newTime.getHours()) : newTime.getHours()}:${Number(newTime.getMinutes()) < 10 ? '0' + Number(newTime.getMinutes()) : newTime.getMinutes()}`;
let qrCode = DFSImg(res.data.data);
if (qrCode.indexOf("https") == -1) {
query.qrCode = qrCode.replace("http", "https");
......@@ -145,21 +144,7 @@ export default {
live.getUserInfo().then(res1 => {
if(res1.data.code == '200'){
this.userInfo = res1.data.data;
// res1.data.data.headPortraitUrl = DFSImg(res1.data.data.headPortraitUrl)
live.imgToBase64(DFSImg(res1.data.data.headPortraitUrl)).then(res2 => {
console.log(res2.data.code,'res2.data.code')
if(res2.data.code == '200'){
console.log('2222222222222')
let suffix = ''
let index = DFSImg(res1.data.data.headPortraitUrl).lastIndexOf("?")
let index1 = DFSImg(res1.data.data.headPortraitUrl).lastIndexOf(".")
suffix = DFSImg(res1.data.data.headPortraitUrl).substring(index1+1,index+1);
this.$set(this.userInfo,'headPortraitUrl',`data:image/${suffix};base64,` + res2.data.data)
console.log(this.userInfo)
console.log('2222222222222')
this.againLoadingPoster = true;
}
})
this.againLoadingPoster = true;
console.log(this.userInfo)
......
src/components/livedModel/livedposterDia.vue
......@@ -33,7 +33,7 @@ export default {
info: {
posterCoverUrl: "",
livedStatus: 1, //直播状态 0未开播 1一开播
livedTime: "3月21日 20:20",
livedTime: "",
livedTitle: "",
nickName: "",
avatarUrl: "",
......@@ -69,6 +69,7 @@ export default {
this.$emit("closePosterDia");
},
init() {
wx.hideLoading();
// wx.showLoading({
// title: "生成中..."
// });
......@@ -115,34 +116,36 @@ export default {
ctx.setFillStyle("#FDC330");
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);
console.log('直播预告')
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()
ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(14);
ctx.fillText(this.info.livedTime, 188 * bili , 355 * bili);
ctx.fillText(this.info.livedTime, 184 * 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);
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);
ctx.fillText(this.info.livedStatus == 1 ? '直播中' : '直播预告', 52 * bili , 355 * bili);
ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(14);
ctx.fillText(this.info.livedTime, 188 * bili , 355 * bili);
let liveText = '';
if(this.info.livedStatus == 0){
liveText = '直播预告'
}else if(this.info.livedStatus == 1){
liveText = '直播中'
}else{
liveText = '直播结束'
}
ctx.fillText(liveText, 48 * bili , 355 * bili);
})
......@@ -165,13 +168,16 @@ export default {
ctx.save();
//头像
ctx.clip();
ctx.drawImage(info.avatarUrl, 10 * bili, 370 * bili, 54 * bili, 54 * bili);
ctx.save();
ctx.stroke();
ctx.draw();
this.saveThe(info.avatarUrl,path => {
ctx.drawImage(path, 10 * bili, 370 * bili, 54 * bili, 54 * bili);
ctx.save();
ctx.stroke();
ctx.draw();
this.posterStatus = true;
console.log("--------海报生成成功");
this.posterStatus = true;
console.log("--------海报生成成功");
})
});
});
},
......@@ -183,7 +189,7 @@ export default {
callback(res.path);
},
fail: function(res) {
console.log('saveTheFail ___________________________',res)
console.log('saveTheFail ___________________________',url + '------url-----',res)
}
});
},
......@@ -200,18 +206,26 @@ export default {
// 点击保存时，将画布生成海报
handleSave() {
var that = this;
wx.showLoading({
title: "正在保存...",
mask: true
});
wx.getSetting({
success(res) {
console.log('11111111111')
if (res.authSetting["scope.writePhotosAlbum"]) {
wx.showLoading({
title: "正在保存...",
mask: true
});
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() {
......@@ -223,9 +237,15 @@ 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({
......@@ -240,7 +260,7 @@ export default {
fail: err => {
wx.hideLoading();
wx.showToast({
title: "出现了错误，请稍后再试",
title: "出现了错误，请稍后再试11111",
icon: "none"
});
}
......@@ -286,7 +306,7 @@ export default {
fail: err => {
wx.hideLoading();
wx.showToast({
title: "出现了错误，请稍后再试",
title: "出现了错误，请稍后再试2222",
icon: "none"
});
}
......@@ -337,6 +357,8 @@ export default {
margin: 0 auto;
background: #fff;
position: relative;
overflow: hidden;
border-radius: 5px;
.myCanvas {
width: 100%;
height: 100%;
......
src/pages/live/index.vue
......@@ -336,9 +336,12 @@ export default {
console.log('onHide',this.overOrStop)
this.pusher.stop();
if(this.overOrStop){
if(this.liveInfo.liveBroadcastState == 1){
this.changeLiveStatus(3)
this.isSetBeauty = false;
}
}
......@@ -655,6 +658,7 @@ export default {
if(this.liveCountDown == 0){
console.log('开始直播')
this.pusher.start(); //开始推流
this.isCountDown = false;
this.isSetBeauty = false;
......
src/pages/liveList/index.vue
......@@ -296,7 +296,7 @@ export default {
checkLogin(e) {
if (this.isHaveUnion) {
wx.hideLoading();
var data = wx_decode(
var data = wx_decode(
this.appid,
this.session_key,
e.mp.detail.encryptedData,
......@@ -537,6 +537,7 @@ export default {
key: "phoneNumber",
data: res.data.data.mobilephone
});
}
})
},
......@@ -704,6 +705,7 @@ export default {
// height: 50vh;
// margin-bottom: 60px;
padding-bottom: 60px;
box-sizing: border-box;
background-color: #efefef;
}
.history-wrap{
......
src/pages/liveOver/index.vue
......@@ -4,11 +4,11 @@
<image class="bg-img" :src="overInfo.coverUrl" mode="aspectFill" alt=""></image>
<div class="conbox">
<div class="live-over">
<div class="over-text">直播已结束</div>
<div class="live-time">直播时长：{{overInfo.liveTime}}</div>
<div class="over-text">直播已{{liveInfo.liveBroadcastState == 2 ? '结束' : '失效'}}</div>
<div class="live-time" v-if="liveInfo.liveBroadcastState == 2">直播时长：{{overInfo.liveTime}}</div>
</div>
<div class="live-info">
<div class="live-info" v-if="liveInfo.liveBroadcastState == 2">
<div class="info-row item-row-one">
<div class="info-item">
<div class="item-num">{{overInfo.watchNum}}</div>
......@@ -77,6 +77,8 @@ export default {
},
onLoad(options){
this.overInfo = {}
if(options.type){
......@@ -85,6 +87,8 @@ export default {
this.liveInfo = JSON.parse(options.liveInfo)
console.log(this.liveInfo)
this.getOverInfo(options.id)
},
......
src/pages/lived/index.vue
......@@ -62,6 +62,7 @@
:src="liveNoticeInfo.playbackUrl[0]"
autoplay
loop
:controls="false"
:show-fullscreen-btn="false"
object-fit="cover"
/>
......@@ -461,21 +462,9 @@ export default {
timingGetInfo(serverTime) {
if (this.isTimeLock) {
this.isTimeLock = false;
let dataTime = ''
if(this.liveNoticeInfo.openPlayback == 0 &&
this.liveNoticeInfo.playbackUrl &&
this.liveNoticeInfo.playbackUrl[0] &&
this.liveNoticeInfo.liveBroadcastState == 2
){
console.log('回放功能------------------------------' + new Date(this.liveNoticeInfo.realStartTime).getTime())
dataTime = new Date(this.liveNoticeInfo.realStartTime).getTime()
}else{
dataTime = this.isTimeFirstReq ? serverTime - 2000 : this.newCommentsTime;
}
// let dataTime = this.isTimeFirstReq
// ? serverTime - 2000
// : this.newCommentsTime;
let dataTime = this.isTimeFirstReq
? serverTime - 2000
: this.newCommentsTime;
let userTime = this.isTimeFirstReq
? serverTime - 2000
: this.userActivebeginTime;
......
src/pages/login/index.vue
......@@ -189,6 +189,15 @@ export default {
// }&params=${encodeURIComponent(this.backParams)}`
// });
// 跳转回小程序页面
var data = wx_decode(
this.appid,
this.session_key,
e.mp.detail.encryptedData,
e.mp.detail.iv
);
this.userInfo = JSON.parse(e.target.rawData);
this.$store.commit('setUserInfo',this.userInfo)
this.pushPageType();
} else {
var data = wx_decode(
......@@ -200,6 +209,7 @@ export default {
this.unionId = data.unionId || "";
this.userInfo = JSON.parse(e.target.rawData);
console.log(this.userInfo, "this.userInfo");
this.$store.commit('setUserInfo',this.userInfo)
if (this.unionId) {
login
......
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