Skip to content

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

直播小程序

parent a234435d
Showing with 161 additions and 66 deletions
src/components/comments/index.vue
......@@ -7,7 +7,7 @@
<div class="user">
<p class="live"></p>
<div class="name">
<span class="user">{{item.customerName}}：</span><span class="test">{{item.guestbookContent}}</span>
<span>{{item.customerName}}：</span><span class="test">{{item.guestbookContent}}</span>
</div>
</div>
</div>
......@@ -78,18 +78,19 @@ export default {
overflow: hidden;
bottom: 0;
padding-left: 10px;
border-radius: 9px;
.item {
width: 50vw;
padding: 4px 0;
display: flex;
align-items: flex-start;
line-height: 18px;
border-radius: 9px;
background-color: rgba(0,0,0,0.3);
margin-bottom: 4px;
padding-left: 8px;
box-sizing: border-box;
.user {
max-width: 50vw;
padding: 4px 8px;
display: inline-block;
line-height: 18px;
border-radius: 9px;
background-color: rgba(0,0,0,0.3);
box-sizing: border-box;
.name {
color: #f9a93c;
font-size: 12px;
......
src/components/livedModel/livedGoodsDia.vue
......@@ -22,7 +22,7 @@
<image v-if="item.productImgUrl" :src="item.productImgUrl" mode="aspectFill" alt=""></image>
</div>
<div class="info">
<div class="name line-clamp2">{{item.productName}}</div>
<div class="name text-overflow2">{{item.productName}}</div>
<div class="bottom">
<div class="price">
<div>
......@@ -218,16 +218,18 @@ img{
.livedGoodsList {
.tit {
font-size: 16px;
padding: 14px 14px 6px 14px;
padding: 10px 10px;
}
.list {
overflow-y:auto;
max-height: 44vh;
padding: 0 14px;
.item {
padding: 10px 4px;
display: flex;
align-items: center;
padding: 14px;
box-sizing: border-box;
border-bottom: 1rpx solid #EEEEED;
.img {
width: 70px;
height: 70px;
......
src/components/livedModel/livedIsEnded.vue
......@@ -2,7 +2,7 @@
<!-- 直播结束组件 -->
<div class="livedIsEnd">
<div class="end">
<p class="endTxt">直播已结束</p>
<p class="endTxt">直播已{{status == 2 ? '结束' : "失效"}}</p>
<p class="time">
<span>直播时长：</span>
<span>{{endInfo.liveTime}}</span>
......@@ -71,7 +71,7 @@ import livedSelectionSpe from "@/components/livedModel/livedSelectionSpe";
import { DFSImg } from "@/utils/index";
import live from "@/api/live";
export default {
props: ["updateGoods", "goodsList", "endInfo"],
props: ["updateGoods", "goodsList", "endInfo","status"],
name: "",
data() {
return {
......
src/components/livedModel/livedIsMsg.vue
......@@ -7,7 +7,7 @@
<div class="user">
<p class="live"></p>
<div class="name">
<span class="user">{{item.customerName}}：</span><span class="test">{{item.guestbookContent}}</span>
<span>{{item.customerName}}：</span><span class="test">{{item.guestbookContent}}</span>
</div>
</div>
</div>
......@@ -67,18 +67,19 @@ export default {
overflow: hidden;
bottom: 0;
padding-left: 10px;
border-radius: 9px;
.item {
width: 50vw;
padding: 4px 0;
display: flex;
align-items: flex-start;
line-height: 18px;
border-radius: 9px;
background-color: rgba(0,0,0,0.3);
margin-bottom: 4px;
padding-left: 8px;
box-sizing: border-box;
.user {
max-width: 50vw;
padding: 4px 8px;
display: inline-block;
line-height: 18px;
border-radius: 9px;
background-color: rgba(0,0,0,0.3);
box-sizing: border-box;
.name {
color: #f9a93c;
font-size: 14px;
......
src/components/livedModel/livedShareDia.vue
......@@ -71,6 +71,11 @@ export default {
},
onUnload() {},
mounted() {},
onShow(){
console.log('onSHow..........................')
this.againLoadingPoster = false;
this.init();
},
methods: {
closePosterDia() {
this.showPosterDia = false;
......@@ -80,16 +85,21 @@ export default {
// 获取小程序码
let id = Number(this.liveId);
live.getLiveQRCode(id).then(res => {
if (res.data.code == 200) {
let cImg = DFSImg(this.info.posterCoverUrl);
let query = {
liveId: this.liveId,
livedTitle: this.info.title,
livedStatus: this.info.liveBroadcastState
livedStatus: this.info.liveBroadcastState,
posterCoverUrl : DFSImg(this.info.posterCoverUrl)
};
let cImg = DFSImg(this.info.posterCoverUrl);
console.log('cImg -----------------',cImg)
if (cImg.indexOf("https") == -1) {
query.posterCoverUrl = cImg.replace("http", "https");
}
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()}`;
......@@ -101,9 +111,24 @@ export default {
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;
// 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;
}
})
console.log(this.userInfo)
console.log('111111111111111111111111111')
}
......
src/components/livedModel/livedposterDia.vue
......@@ -88,6 +88,8 @@ export default {
ctx.setFillStyle("#fff");
ctx.fillRect(0, 0, 310 * bili, 520 * bili);
console.log('info.posterCoverUrl',info.posterCoverUrl)
//封面
this.saveThe(info.posterCoverUrl, path => {
console.log(this.info)
......@@ -129,26 +131,6 @@ export default {
})
// ctx.drawImage(require('../../../static/images/bofang.png'), 20 * bili , 340 * bili, 26 * bili, 20 * bili);
// ctx.save()
// ctx.setTextAlign("left");
// ctx.setFillStyle("#3F2F00");
// ctx.setFontSize(14);
// ctx.fillText(this.info.livedStatus == 1 ? '直播中' : '直播预告', 52 * bili , 355 * bili);
// if(this.info.livedStatus == 0){
// ctx.drawImage(require('../../../static/images/lishi.png'), 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.fill()
ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
......@@ -167,20 +149,23 @@ export default {
ctx.drawImage(path, 200 * bili, 390 * bili, 100 * bili, 100 * bili);
ctx.save();
//头像
this.saveThe(info.avatarUrl, path => {
// this.saveThe(info.avatarUrl, path => {
ctx.clip();
ctx.drawImage(path, 10 * bili, 370 * bili, 54 * bili, 54 * bili);
ctx.drawImage(info.avatarUrl, 10 * bili, 370 * bili, 54 * bili, 54 * bili);
ctx.save();
ctx.stroke();
ctx.draw();
this.posterStatus = true;
console.log("--------海报生成成功");
});
// });
});
});
},
// 小程序需要将图片下载下来，然后才能绘制到画布上
saveThe(url, callback) {
console.log('url==========',url)
wx.getImageInfo({
src: url, //服务器返回的图片地址
success: res => {
......
src/components/livedModel/notStarted.vue
......@@ -83,9 +83,17 @@ export default {
});
}
}else{
wx.showToast({
title: '订阅失败',
icon: "none"
});
console.log('开播失败')
}
} catch (err) {
wx.showToast({
title: '订阅失败',
icon: "none"
});
console.error("subscribeMessage-err", err);
}
},
......
src/pages/index/index.vue
......@@ -365,6 +365,7 @@ export default {
console.log(this.shareUrl, "index12");
console.log(`/pages/index/main?share=${encodeURIComponent(this.shareUrl)}`, '测试直播分享相关')
return {
title: this.shareShopName, // 默认是小程序的名称
path: `/pages/index/main?share=${encodeURIComponent(this.shareUrl)}`, // 默认是当前页面
......
src/pages/live/index.vue
......@@ -14,6 +14,7 @@
:remote-mirror="remoteMirror"
:local-mirror="remoteMirror"
:mirror="mirror"
:waiting-image="liveInfo.coverUrl"
style="width: 100%; height: 100vh;position:fixed;top:0;left:0;z-index:-1"
@statechange="statechange"
@error="binderror"
......@@ -221,6 +222,11 @@ export default {
mirror : true,
}
},
filter(){
formatNum : (val) => {
return val - 0 > 10000 ? Math.floor(val / 10000)+ "w" : val
}
},
watch:{
//用户通知
entryNoticeText(){
......@@ -302,8 +308,6 @@ export default {
},
onShow(){
wx.setKeepScreenOn({
keepScreenOn: true
})
......@@ -532,12 +536,32 @@ export default {
day = Math.floor(getTimeAbs / (3600*1000*24))
hours = Math.floor((getTimeAbs%(24*3600*1000))/(3600*1000));
minute = Math.floor((getTimeAbs%(24*3600*1000)%(3600*1000) )/(60*1000))
minute = Math.floor((getTimeAbs%(24*3600*1000)%(3600*1000) )/(60*1000))
if(getTime > 0){
if(day > 0){
this.liveTime = `${day >= 10 ? day : '0' + day}天${hours >= 10 ? hours : '0' + hours}小时${minute >= 10 ? minute : '0' + minute}分`
let showHours = "";
let showMinute = "";
if(hours > 0){
if(hours >= 10){
showHours = hours + '小时'
}else{
showHours = '0' + hours + '小时'
}
}
if(minute >= 10){
showMinute = minute + '分'
}else{
showMinute = '0' + minute + '分'
}
this.liveTime = `${day >= 10 ? day : '0' + day}天${showHours}${showMinute}`
}else if(day <= 0 && hours > 0){
this.liveTime = `${hours >= 10 ? hours : '0' + hours}小时${minute >= 10 ? minute : '0' + minute}分`
let showMinute = "";
if(minute >= 10){
showMinute = minute + '分'
}else{
showMinute = '0' + minute + '分'
}
this.liveTime = `${hours >= 10 ? hours : '0' + hours}小时${showMinute}`
}else if(day <= 0 && hours <= 0 && minute >= 0){
this.liveTime = `${minute >= 10 ? minute : '0' + minute}分`
}
......@@ -707,11 +731,11 @@ export default {
}
}
//观看
this.look = result.historyWatchNum;
this.look = result.historyWatchNum - 0 >= 10000 ? Math.floor(result.historyWatchNum / 10000)+ "w" : result.historyWatchNum
//在线
this.online = result.watchNum
this.online = result.watchNum - 0 >= 10000 ? Math.floor(result.watchNum / 10000)+ "w" : result.watchNum
//点赞
this.praise = result.likeInfo.likeNum
this.praise = result.likeInfo.likeNum - 0 >= 10000 ? Math.floor(result.likeInfo.likeNum / 10000)+ "w" : result.likeInfo.likeNum
//评论
result.guestBookList.forEach(item => {
this.commentsList.push(item)
......
src/pages/lived/index.vue
......@@ -23,7 +23,7 @@
</div>
<div class="info">
<p class="name line-clamp1" v-if="shopName">{{shopName}}</p>
<p class="num" v-if="liveNoticeInfo.historyWatchNum>0">
<p class="num" v-if="liveNoticeInfo.liveBroadcastState != 2 && liveNoticeInfo.liveBroadcastState != 4">
<span>{{liveNoticeInfo.historyWatchNum}}</span>
<span style="margin-left:6px;">观看</span>
</p>
......@@ -37,9 +37,10 @@
<isPauseShow v-if="liveNoticeInfo.liveBroadcastState==3" :info="liveNoticeInfo"></isPauseShow>
<!-- 结束展示 -->
<livedIsEnded
v-if="liveNoticeInfo.liveBroadcastState==2"
v-if="liveNoticeInfo.liveBroadcastState==2 || liveNoticeInfo.liveBroadcastState==4"
:updateGoods="updateGoods"
:endInfo="endInfo"
:status="liveNoticeInfo.liveBroadcastState"
:goodsList="goodsList"
></livedIsEnded>
<!-- 控件层 -->
......@@ -117,9 +118,10 @@ export default {
endInfo: {}, //直播结束详情
firstComing: true, // 首次进入
params: {},
userId: "",
// userId: "",
hasInvitationStatus: 0, // 邀请资格：0-不能够邀请下级，1-能够邀请下级
spokesmanObj: {}, //分销员信息
userId : '', //用户id
navTop: 0,
navHeight: 0,
isTimeLock: true, //时间锁
......@@ -138,7 +140,7 @@ export default {
},
computed: {},
onLoad(options) {
console.log("onLoad");
console.log("onLoad",options);
this.isTimeLock = true;
this.isTimeFirstReq = true;
this.newCommentsTime = 0;
......@@ -177,7 +179,8 @@ export default {
this.$store.commit("setSpokesman", {
spokesmanGroupId: this.params.spokesmanGroupId,
spokesmanShopId: this.params.spokesmanShopId,
spokesmanRelId: this.params.spokesmanRelId
spokesmanRelId: this.params.spokesmanRelId,
userId : this.params.userId
});
}
this.init();
......@@ -198,10 +201,18 @@ export default {
};
live.addShareRecord(query).then();
let _this = this;
if (this.hasInvitationStatus == 1) {
Object.assign(this.params, this.params, this.spokesmanObj);
console.log(this.userId,'this.userId')
if(this.userId){
if (this.hasInvitationStatus == 1) {
Object.assign(this.params, this.params, this.spokesmanObj,{userId : this.userId});
}else{
Object.assign(this.params, this.params,{userId : this.userId});
}
}
console.log(options)
console.log(this.params, "--------------161");
console.log(`/pages/lived/main?params=${JSON.stringify(this.params)}`)
let shareObj = {
title: this.liveNoticeInfo.title,
path: `/pages/lived/main?params=${JSON.stringify(this.params)}`,
......@@ -232,6 +243,7 @@ export default {
onShow() {
console.log("onShow");
this.userEntry("IN");
this.isLogin()
},
onUnload() {
this.liveNoticeInfo.liveBroadcastState = -1;
......@@ -254,6 +266,7 @@ export default {
methods: {
// 初始化数据
init() {
let _this = this;
let liveBroadcastId = this.liveId;
live.getLiveInfo(liveBroadcastId).then(res => {
if (res.data.code == 200) {
......@@ -284,8 +297,31 @@ export default {
) {
clearInterval(this.goodTiming);
}
if(this.liveNoticeInfo.liveBroadcastState == 4){
this.endLived();
}
}
});
//绑定关系
wx.getStorage({
key: "sessionid",
success : res => {
// 查询分销员信息
console.log(res,'绑定关系',this.params,this.params.spokesmanRelId,this.params.userId)
if(this.params.spokesmanRelId){
live.becomepokesmanCustomer(this.params.spokesmanRelId).then(res=>{
console.log(res,"----------------------becomepokesmanCustomer")
})
}else if(this.params.userId){
live.saveCustomerInviterInviteeRel(this.params.userId).then(res=>{
console.log(res,"----------------------saveCustomerInviterInviteeRel")
})
}
},
fail(res) {}
});
},
back() {
let query = {
......@@ -306,6 +342,7 @@ export default {
success(res) {
// 查询分销员信息
_this.getSpokesman();
_this.getUserId();
},
fail(res) {}
});
......@@ -344,6 +381,14 @@ export default {
}
});
},
getUserId(){
live.getUserInfo().then(res => {
if(res.data.code=="200"&&res.data.data){
console.log('getUserId')
this.userId = res.data.data.userId
}
})
},
toShop() {
// 到商城首页
this.backPath = "/";
......@@ -587,6 +632,7 @@ img {
bottom: 0;
right: 0;
z-index: -1;
image {
width: 100%;
height: 100%;
......@@ -602,6 +648,7 @@ img {
top: 0;
left: 0;
z-index: 1;
background-color: rgba(102,102,102,.38);
.customBack {
position: absolute;
left: 12px;
......@@ -619,13 +666,12 @@ img {
background: rgba(0, 0, 0, 0.6);
border-radius: 30px;
align-items: center;
padding-right: 10px;
padding: 2px 10px 2px 2px;
.img {
width: 30px;
height: 30px;
border-radius: 50%;
overflow: hidden;
margin-left: 4px;
overflow: hidden;
img {
width: 100%;
height: 100%;
......
src/store/state.js
......@@ -15,6 +15,7 @@ const state = {
spokesmanGroupId: "",
spokesmanShopId: "",
spokesmanRelId: "",
userId : "",
subscribeMessageObj: {},
offlineShopCode:"",
isLogin,
......
src/utils/index.js
......@@ -74,6 +74,7 @@ export function DFSImg(path, w, h) { //
if (w && h) {
path += '.' + w + 'x' + h + '.jpg';
}
return baseImg[Math.floor(Math.random() * 100) % baseImg.length] + path;
}
}
......
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