Skip to content

M
mayi-mp-shop
Commit 70e867f4 by 李嘉林
Options

暂时删除直播组件

parent 0bcc3a32
Showing with 0 additions and 3656 deletions
src/components/livedModel/isPauseShow.vue deleted 100644 → 0
<template>
<!-- 直播暂停 -->
<div class="pauseShow">
<p class="tit">主播暂时离开</p>
</div>
</template>
<script type="text/ecmascript-6">
export default {
name: "",
data() {
return {};
},
components: {},
computed: {},
created() {},
mounted() {},
methods: {}
};
</script>
<style lang="scss" scoped>
.pauseShow {
position: absolute;
width: 70vw;
top: 40%;
left: 15vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 2;
.tit {
font-size: 30px;
font-weight: bold;
color: #fff;
}
}
</style>
src/components/livedModel/liveReplay.vue deleted 100644 → 0
<template>
<div class="replay">
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
\ No newline at end of file
src/components/livedModel/livedAnnouncement.vue deleted 100644 → 0
<template>
<!-- 公告组件 -->
<div class="livedAnnouncement" v-show="isShow">
<scroll-view :style="{'max-height': '20vh','width':'40vw'}" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true">
<div class="label">
<span class="labelTit">公告：</span><span class="test">{{liveNotice}}</span>
</div>
</scroll-view>
</div>
</template>
<script type="text/ecmascript-6">
export default {
props:["liveNotice"],
name: "",
data() {
return {
isShow:true,
scrollTop:0,
};
},
components: {},
computed: {},
created() {},
onLoad(){
console.log('----公告')
this.isShow=true;
setTimeout(() => {
this.scrollTop=1000;
}, 2000);
setTimeout(() => {
this.isShow=false;
}, 7000);
},
mounted() {},
methods: {}
};
</script>
<style lang="scss" scoped>
.livedAnnouncement{
margin-left:12px;
width: 40vw;
background: rgba(#000,0.4);
border-radius: 10px;
padding: 6px;
margin-bottom: 10px;
animation:toLeft 6s linear;
opacity: 0;
span{
font-size: 14px;
color: #f1f1f1;
}
.label{
.labelTit{
color: #f9a93c;
}
}
}
@keyframes toLeft {
0%{
opacity: 1;
}
80%{
opacity: 0.6;
}
100%{
opacity: 0;
}
}
</style>
src/components/livedModel/livedControls.vue deleted 100644 → 0
<template>
<div class="livedControls" :style="{'bottom' : info.openPlayback == 0 && info.playbackUrl && info.playbackUrl[0] && info.liveBroadcastState == 2 ? '40px' : '20px'}">
<!-- 公告层 -->
<livedAnnouncement v-if="info.liveNotice && !info.playbackUrl" :liveNotice="info.liveNotice"></livedAnnouncement>
<!-- 用户进入通知 -->
<div class="userComing userComingAni" v-if="userComing">
<span>{{entryNoticeText}}</span>
<span>来了</span>
</div>
<!-- 评论层 -->
<livedIsMsg
:guestBookList="guestBookList"
:updateVal="updateVal"
:isSend="isSend"
:liveId="liveId"
:info="info"
:fixedHeight="getBottom"
></livedIsMsg>
<!-- 带货商品层 -->
<livedExplainingCommodities
v-if="(info.liveBroadcastState==1||info.liveBroadcastState==3)&&list"
:updateGoods="updateGoods"
:goodsList="list"
:isFocusComments="isFocusComments"
></livedExplainingCommodities>
<!-- 商品列表弹层 -->
<livedGoodsDia
:showDia="showDia"
:updateVal="updateVal"
:goodsList="list"
:updateGoods="updateGoods"
v-if="list"
@changeStatus="changeStatus"
></livedGoodsDia>
<!-- 分享弹层 -->
<livedShareDia v-if="loadingShare" :showShareDia="showShareDia" @closeShareDia="closeShareDia" :info="info"></livedShareDia>
<!-- 底部控制层 -->
<div class="control flex" >
<template v-if="!isSend">
<div class="goodsImg" @click="showGoodsList" v-if="info.liveBroadcastSales==0">
<img src="../../../static/images/lived/goodsImg.png" alt />
<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 || info.liveBroadcastState==3 || info.liveBroadcastState==1" @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="">
</div>
<div class="heardIcon">
<div class="clickEl" @click="addLike(1)"></div>
<img class="like" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAADu0lEQVR4Xu2aTYhOURjH//+VspRSksiKKRsjWShT2FE2jK80xAj5CpHkI8nkm8aYwZiGGTORDQsKzcpqZomtmixsWCnZPHpypl5v8957zrnnfrzve596N+99znP+z+8+5957PogmNzZ5/igBlBXQ5ATKIdDkBVA+BMshkHQIiMhiAGsBLAIwx/y+A9DfJwAvSP7w6UdEFgBYDaClIvYvE1vjPyI56RN7qo13BYhIO4AjAFZYCBgCMELytYUvHGOPABiyjV3dvzMAEVkK4DQABeBqrwD01RKbZuxaQp0AiMhmADcAzHXNvMr/Fsmjlf+lGTtKqzUAETkP4FzCxCubvyOpzw4t+dRix+m1AiAiXQBOxgXzuK6Jq4aQYKdkXCGpQzXSYgGIyA4Ag3GBCnr9AkmFXNNsAIwDWFbQBG1ktZKc8HoIisheAL02vRTYR986nb4APgJYWeDkbKUtJPl1OueaQ0BE5gFI9JVlqy4Dvw6SA64AtgAYzkBcFl0MkOxwBXAVwPEs1GXQxzjJ5a4A9NWnr8BGsEmS810BvAWwrhGyB/CH5AxXAC8BbGwQAD9JznIF0ANgX4MA+EJyiSuA0BOUPFmOkWxzBaAfQPoh1AhWc04QORcQkW8B5v5FANhGcsypAtRZRHQeoPOBerYJkq21EoirAJ0F6mywnq2TZJ8XgAaogsi7r/nZrAfMBvCmDtcEfqtmkp+jyjcWgKmCVQbCzDoaCy1xyVtVwFTCIrIJwGidAFhD8r2NVqsKqICgewHPbALn6LOBpO4/WJkTADMctupOjFX07J3aSTpVqTMAA2E7gCfZ5xfZ4y6Sj101eQEwEHYCmHaZyVVEAP8DJO/5xPEGYCDoMlO/T8cB25wgec03XiIABsJuAA99BSRsd47kxSQxEgMwEPborm8SIR5tu0ie8mj3X5MgAAwE3Xy4n1SQZfs7JA9b+ka6BQNgIOwH0B1CWESMbpIHQ/URFICBoOLuhhJYFaeHpEIOZsEBGAiHANwOpvJfoF6SwdcoUwFgIOj5oZuBIDwgmcrCTGoADIRjAK4nhNBPUl+1qViqAAwE3V7TbTYfq7mn5xNsujapAzAQ9HiNHrNxsUGS+rmdqmUCwEDQ8zqXLbN5SjKTfcnMABgIZwBcioEwTHKbJajEbpkCMBDOAqj1/T5K0ucApjeIzAEYCHosrvr01nOSuuyWqeUCwEDQMb4egB5+/kAylwWW3ABkepsjOisBFOVO5KWjrIC8yBel37ICinIn8tJRVkBe5IvS71/x8QxQBHuXTgAAAABJRU5ErkJggg==" alt="">
<p class="heardNum" v-if="likeNum>0">{{likeNumCopy}}</p>
<div class="box">
<div
class="img"
:class="{'imgAni':imgAni}"
v-for="(item,index) in imgList"
:key="index"
>
<img :src="item.img" alt />
</div>
</div>
</div>
</template>
<template v-else>
<div class="sendOut" :style="{'bottom':getBottom+'px'}">
<input
class="sendIpt"
:adjust-position="false"
:focus="getFocus"
type="text"
@focus="onFocus"
@blur="onblur"
v-model="sendVal"
placeholder="和主播说点什么吧~"
/>
<div class="send" :class="{'noSendVal':sendVal==''}" @click="toSend">发送</div>
</div>
</template>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import livedAnnouncement from "@/components/livedModel/livedAnnouncement";
import livedIsMsg from "@/components/livedModel/livedIsMsg";
import livedExplainingCommodities from "@/components/livedModel/livedExplainingCommodities";
import livedGoodsDia from "@/components/livedModel/livedGoodsDia";
import livedShareDia from "@/components/livedModel/livedShareDia";
import live from "@/api/live";
export default {
props: [
"info",
"entryNoticeText",
"updateVal",
"guestBookList",
"likeInfo",
"goodsList",
"updateGoods"
],
name: "",
data() {
return {
liveId: 0,
imgList: [],
likeNum: 0,
iconList: [
// "//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
// "//img0.imgtn.bdimg.com/it/u=216605226,3652567530&fm=11&gp=0.jpg",
// "//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
// "//img2.imgtn.bdimg.com/it/u=1354268575,1268995723&fm=26&gp=0.jpg"
],
list: [],
num: 0,
userComing: false,
showDia: false, //显示商品列表弹窗
showShareDia: false, //显示分享弹窗
isSend: false, //显示评论输入框
sendVal: "", //输入内容
getFocus: false, //获取焦点
imgAni: false, //给点赞元素加动画
getBottom:0,//动态绑定输入框位置
loadingShare:false,
isClick:true,
isFocusComments:false, //是否在评论中，如果在评论中就隐藏掉上屏商品
};
},
components: {
livedAnnouncement,
livedIsMsg,
livedExplainingCommodities,
livedGoodsDia,
livedShareDia
},
computed: {
likeNumCopy() {
return this.watchMan(this.likeNum);
}
},
watch: {
updateVal(newVal, oldVal) {
if (this.likeNum < this.likeInfo.likeNum) {
this.getAdd();
}
this.likeNum = this.likeInfo.likeNum;
if (this.entryNoticeText) {
this.userComing = true;
setTimeout(() => {
this.userComing = false;
}, 4600);
} else {
this.userComing = false;
}
},
updateGoods() {
this.list = this.goodsList;
}
},
created() {},
onLoad(options) {
if(options.params){
let params = JSON.parse(options.params);
this.liveId = params.liveId;
}else if(options.scene){
var scene = decodeURIComponent(options.scene); //参数二维码传递过来的参数
console.log(scene)
let sceneInfo = scene.split(',')
console.log('sceneInfo',sceneInfo)
this.liveId = sceneInfo[0].split('=')[1]
}
let _this=this;
wx.getStorage({
key: "sessionid",
success(res) {
_this.loadingShare=true;
},
fail(res) {
_this.loadingShare=false;
}
});
// 获取直播配置
this.getLivedConfig();
},
mounted() {},
methods: {
// 数量大于1w
watchMan(val) {
return val - 0 > 10000 ? ((val - 0) / 10000).toFixed(1) + "w" : val;
},
// 点赞
addLike(val) {
this.imgAni = true;
if (val == 1) {
// if (this.info.liveBroadcastState < 1) {
// this.notAgainLive();
// return;
// }
this.likeNum++;
let query = {
liveBroadcastId: this.liveId,
clickNum: 1
};
live.addLiveLikeByUser(query).then(res => {});
}
setTimeout(() => {
this.num++;
if (this.num >= 4) {
this.num = 0;
}
this.imgList.push({
img: this.iconList[this.num]
});
}, 300);
},
// 直播未开始提示
notAgainLive() {
wx.showModal({
content: "直播还未开始",
confirmColor: "#ff877d",
success: function(res) {
if (res.confirm) {
} else if (res.cancel) {
}
}
});
},
// 接口获取触发点赞
getAdd() {
if (this.imgList.length > 20) {
this.imgList = [];
}
for (let i = 0; i < this.iconList.length; i++) {
setTimeout(() => {
this.addLike(2);
}, 200 * i);
}
},
// 显示商品
showGoodsList() {
this.showDia = true;
},
changeStatus() {
this.showDia = false;
},
showShare() {
this.loadingShare=true;
this.showShareDia = true;
},
closeShareDia() {
this.showShareDia = false;
},
// 是否登录
isLogin() {
let _this = this;
wx.getStorage({
key: "sessionid",
success(res) {
_this.toSendOut();
},
fail(res) {
console.log("未登录------150");
// 跳转登录页
let backUrl = "/lived/main";
let query = {
liveId: _this.liveId,
fromType: "mini"
};
let url = `/pages/login/main?back=${backUrl}&params=${JSON.stringify(
query
)}`;
wx.navigateTo({
url: url
});
}
});
},
// 发送评论
toSendOut() {
this.isSend = true;
this.getFocus = true;
},
// 失焦点
onblur() {
this.imgAni = false;
setTimeout(() => {
this.isSend = false;
this.sendVal = "";
this.isFocusComments = false;
}, 300);
},
// 获取焦点
onFocus(e){
this.isFocusComments = true;
this.getBottom=(e.mp.detail.height-10);
},
// 点击发送留言
toSend() {
if(this.isClick){
this.isClick=false;
setTimeout(() => {
this.isClick=true;
},300);
console.log("点击按钮-------------------200");
if (this.sendVal == "") {
this.getFocus = true;
} else {
let query = {
guestbookType: "1",
guestbookContent: this.sendVal,
liveBroadcastId: Number(this.liveId)
};
this.$emit("toSendMsg", query);
}
}
},
getLivedConfig(){
let configCode="LIVE_LIKE_ICON";
live.getConfigValueByConfigCode({configCode}).then(res=>{
if(res.data.code==200){
let newArr=res.data.data;
this.iconList=JSON.parse(newArr);
}
})
}
}
};
</script>
<style lang="scss" scoped>
.flex {
display: flex;
}
.livedControls {
position: fixed;
left: 0;
width: 100vw;
z-index: 2;
.userComing {
margin-bottom: 10px;
background: rgba(#000, 0.4);
color: #fff;
font-size: 16px;
height: 26px;
line-height: 26px;
border-radius: 26px;
padding: 0 8px;
display: inline-block;
}
.userComingAni {
animation: userComingAni 4.7s linear;
}
@keyframes userComingAni {
0% {
transform: translateX(150vw);
opacity: 0.3;
}
30% {
transform: translateX(12px);
opacity: 1;
}
80% {
transform: translateX(12px);
opacity: 1;
}
100% {
transform: translateX(-150vw);
opacity: 0;
}
}
.control {
height: 40px;
align-items: center;
justify-content: space-around;
padding: 0 12px;
.goodsImg {
width: 30px;
height: 30px;
position: relative;
img {
width: 30px;
height: 30px;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.goodsNum {
color: #fff;
font-size: 14px;
text-align: center;
margin-top: 10px;
}
}
.iptCopy {
margin: 0 10px;
width: 50vw;
background: rgba(#000, 0.4);
color: #999;
font-size: 16px;
height: 38px;
border-radius: 38px;
line-height: 38px;
text-indent: 1em;
}
.shareIcon,
.heardIcon{
position: relative;
width: 50px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
img{
width: 32px;
height: 32px;
}
}
.heardIcon {
.clickEl{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
}
.like {
position: absolute;
top: 0;
left: 50%;
margin-left: -16px;
}
.heardNum {
text-align: center;
transform: translateY(-20px);
background: rgba(#e60012, 0.5);
border-radius: 8px;
padding: 0 2px;
font-size: 12px;
color: #fff;
min-width: 30px;
}
.box {
width: 100px;
height: 260px;
position: absolute;
overflow: hidden;
bottom: 0;
right: -30px;
pointer-events: none;
.img {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -20px;
width: 40px;
height: 40px;
opacity: 0;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
img {
width: 40px;
height: 40px;
}
}
.imgAni {
animation: moveImg 1.5s linear 0.1s;
}
@keyframes moveImg {
0% {
opacity: 1;
}
20% {
transform: translateY(-40px) translateX(-5px) scale(1);
}
40% {
transform: translateY(-80px) translateX(0) scale(1);
}
60% {
transform: translateY(-120px) translateX(0) scale(1);
}
80% {
transform: translateY(-160px) translateX(5px) scale(1);
}
100% {
opacity: 0;
transform: translateY(-200px) translateX(0) scale(1);
}
}
}
}
.sendOut {
position: absolute;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(#000, 0.4);
width: 96vw;
height: 40px;
border-radius: 40px;
line-height: 40px;
font-size: 16px;
.sendIpt {
width: 70vw;
color: white;
margin-left: 10px;
}
.send {
color: #fff;
height: 30px;
width: 70px;
text-align: center;
line-height: 30px;
border-radius: 30px;
background: linear-gradient(to right, #ff877d, #fb566d);
margin-right: 6px;
}
.noSendVal {
background: #ababa9;
}
}
}
}
</style>
src/components/livedModel/livedExplainingCommodities.vue deleted 100644 → 0
<template>
<!-- 讲解商品 -->
<div class="livedExplainingCommodities">
<div class="goods clearfix" v-if="!showFixedGoods" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
<div
class="goodsList"
:class="{isEC:item.upperScreenState==1}"
v-for="(item,index) in list"
:key="index"
@click="toGoodsInfo(item)"
>
<!-- <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>
</div>
<!-- 左上角展示讲解中商品 -->
<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>
<div class="price" v-if="item.minPrice">
<span>￥</span> <span>{{item.minPrice}}</span>
</div>
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import { DFSImg } from "@/utils/index";
import live from "@/api/live";
export default {
props: ["updateGoods", "goodsList","isFocusComments"],
name: "",
data() {
return {
showFixedGoods: false, //展示讲解中商品方式 false底部|true左侧固定
list: [],
// 讲解中浮动商品
fixedGoodsList: [],
firstCom: true, //首次进入
liveId: 0,
fixedGoodsTimer : null, //讲解商品隐藏的定时器
reserveList : []
};
},
watch: {
updateGoods() {
console.log(this.goodsList,'---------------------------------46goodsList')
this.goodsList.forEach((item,index) => {
this.$set(this.goodsList[index],'minPrice',Number(item.minPrice).toFixed(2))
})
console.log(this.firstCom,'this.firstCom----------')
if (this.firstCom == true) {
this.list = [];
this.firstCom = false;
let arr1 = [];
let arr2 = [];
this.goodsList.forEach((item, index) => {
if (item.upperScreenState == 1) {
arr1.push(item);
} else if (item.upperScreenState == 0 || item.upperScreenState == 2) {
arr2.push(item);
}
});
this.list = [...arr1, ...arr2];
this.reserveList = arr1;
console.log(this.list,'--------------------------------this.list1212')
this.fixedGoodsTimer = setTimeout(() => {
console.log('这是上屏商品',arr1)
this.fixedGoodsList = arr1 ? arr1 : [];
this.showFixedGoods = true;
}, 5000);
} else {
if (!this.equalsObj(this.list, this.goodsList)) {
let newArr = [];
newArr = this.goodsList.filter((item, index) => {
if (item.upperScreenState == 1) {
return item;
}
});
if (newArr) {
console.log('这是上屏商品',newArr)
this.fixedGoodsList = newArr;
}
}
}
}
},
components: {},
computed: {},
created() {},
onLoad(options) {
if(options.params){
let params = JSON.parse(options.params);
this.liveId = params.liveId;
}else if(options.scene){
var scene = decodeURIComponent(options.scene); //参数二维码传递过来的参数
console.log(scene)
let sceneInfo = scene.split(',')
console.log('sceneInfo',sceneInfo)
this.liveId = sceneInfo[0].split('=')[1]
}
},
onUnload() {
this.fixedGoodsList = [];
this.showFixedGoods = false;
},
mounted() {},
methods: {
// 到商品详情
toGoodsInfo(val) {
// 点击商品埋点
let info={
liveBroadcastId:Number(this.liveId),
liveBroadcastGoodsId:Number(val.productId),
}
live.addLiveUserGoodsByUser(info).then(res=>{});
let query = {
fromLived: 1,
liveId: this.liveId
};
let backPath = `/goods/${val.productId}`;
wx.reLaunch({
url: `../index/main?from=livedToGoodsInfo&backpath=${
backPath
}&params=${JSON.stringify(query)}`
});
},
/**
* 判断此对象是否是Object类型
* @param {Object} obj
*/
isObject(obj) {
return Object.prototype.toString.call(obj) === "[object Object]";
},
/**
* 判断此类型是否是Array类型
* @param {Array} arr
*/
isArray(arr) {
return Object.prototype.toString.call(arr) === "[object Array]";
},
/**
* 深度比较两个对象是否相同
* @param {Object} oldData
* @param {Object} newData
*/
equalsObj(oldData, newData) {
// 类型为基本类型时,如果相同,则返回true
if (oldData === newData) return true;
if (
this.isObject(oldData) &&
this.isObject(newData) &&
Object.keys(oldData).length === Object.keys(newData).length
) {
// 类型为对象并且元素个数相同
// 遍历所有对象中所有属性,判断元素是否相同
for (const key in oldData) {
if (oldData.hasOwnProperty(key)) {
if (!this.equalsObj(oldData[key], newData[key]))
// 对象中具有不相同属性 返回false
return false;
}
}
} else if (
this.isArray(oldData) &&
this.isArray(oldData) &&
oldData.length === newData.length
) {
// 类型为数组并且数组长度相同
for (let i = 0, length = oldData.length; i < length; i++) {
if (!this.equalsObj(oldData[i], newData[i]))
// 如果数组元素中具有不相同元素,返回false
return false;
}
} else {
// 其它类型,均返回false
return false;
}
// 走到这里,说明数组或者对象中所有元素都相同,返回true
return true;
},
touchstart(){
clearTimeout(this.fixedGoodsTimer)
},
touchmove(){
clearTimeout(this.fixedGoodsTimer)
},
touchend(){
this.fixedGoodsTimer = setTimeout(() => {
this.fixedGoodsList = this.reserveList
this.showFixedGoods = true;
},5000)
},
}
};
</script>
<style lang="scss" scoped>
img {
display: block;
}
.fl {
float: left;
}
/*清除浮动*/
.clearfix {
zoom: 1;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
width: 0;
height: 0;
visibility: hidden;
}
.livedExplainingCommodities {
width: 100%;
padding: 0 12px;
overflow-x: auto;
.goods {
overflow-x: auto;
white-space: nowrap;
overflow-y: hidden;
margin-bottom: 10px;
.goodsList {
display: inline-block;
position: relative;
width: 30vw;
height: 30vw;
border: 1px solid #949494;
margin-right: 10px;
overflow: hidden;
image {
width: 30vw;
height: 30vw;
}
.num {
position: absolute;
top: 0;
left: 0;
color: #fff;
font-size: 12px;
background: #666;
padding: 2px 4px;
border-bottom-right-radius: 6px;
}
.explain {
position: absolute;
top: 0;
right: 0;
color: #fff;
font-size: 12px;
background: #ff3334;
padding: 2px 4px;
border-bottom-left-radius: 6px;
}
}
}
.isEC {
border-color: #ff3334;
}
.fixedGoods {
position: fixed;
top: 22vh;
left: 12px;
.goodsList {
width: 78px;
margin-bottom: 15px;
border-radius: 2px;
overflow: hidden;
position: relative;
background-color: white;
image {
width: 22vw;
height: 78px;
}
.num {
position: absolute;
top: 0;
left: 0;
color: #fff;
font-size: 12px;
background: #666;
padding: 2px 4px;
border-bottom-right-radius: 6px;
}
.explain {
position: absolute;
top: 0;
left: 0;
color: #fff;
font-size: 12px;
background: #ff3334;
padding: 2px 4px;
border-bottom-right-radius: 6px;
}
.price{
width: 100%;
color: #FA7018;
background: #fff;
text-align: center;
height: 21px;
font-size: 16px;
line-height: 17px;
}
}
}
}
</style>
src/components/livedModel/livedGoodsDia.vue deleted 100644 → 0
<template>
<div class="livedGoodsList">
<van-popup
:show="showDia"
position="bottom"
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" @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>
</div>
<div class="info">
<div class="name text-overflow2">{{item.productName}}</div>
<div class="bottom">
<div class="price">
<div>
<span>￥</span>
<span>{{item.minPrice}}</span>
</div>
<!-- <p class="del">
<span>￥</span>
<span>{{999}}</span>
</p>-->
</div>
<div class="icon" @click.stop="isLogin(item)">
<img src="../../../static/images/lived/shopCart.png" alt="">
</div>
</div>
</div>
</div>
</div>
<div style="text-align:center;font-size:16px;padding-top:10px;" v-else>暂无商品</div>
</van-popup>
<!-- 选择规格弹层 -->
<livedSelectionSpe
v-if="showSpe"
:show="showSpe"
:productInfoId="itemGoods.productId"
:minSale="itemGoods.minSale"
:maxSale="itemGoods.maxSale"
:goodsImg="itemGoods.goodsImg"
:minSuggestedRetailPrice="itemGoods.minSuggestedRetailPrice"
:maxSuggestedRetailPrice="itemGoods.maxSuggestedRetailPrice"
:goodsLowerShelf="itemGoods.goodsLowerShelf"
@closeSpeDia="closeSpeDia"
></livedSelectionSpe>
</div>
</template>
<script type="text/ecmascript-6">
import livedSelectionSpe from "@/components/livedModel/livedSelectionSpe";
import { DFSImg } from "@/utils/index";
import live from "@/api/live";
export default {
props:["showDia","updateGoods","goodsList"],
name: "",
data() {
return {
liveId: 0,
list: [],
itemGoods: {}, //选中商品
showSpe: false
};
},
components: {
livedSelectionSpe
},
watch:{
updateGoods(){
this.list=this.goodsList;
this.list.forEach((item, index) => {
item.minPrice = Number(item.minPrice).toFixed(2);
});
},
},
computed: {},
created() {},
onLoad(options) {
if(options.params){
let params = JSON.parse(options.params);
this.liveId = params.liveId;
}else if(options.scene){
var scene = decodeURIComponent(options.scene); //参数二维码传递过来的参数
console.log(scene)
let sceneInfo = scene.split(',')
console.log('sceneInfo',sceneInfo)
this.liveId = sceneInfo[0].split('=')[1]
}
},
mounted() {},
methods: {
// 关闭
closeDia() {
this.$emit("changeStatus");
},
// 是否登录
isLogin(val) {
let _this = this;
wx.getStorage({
key: "sessionid",
success(res) {
_this.showSpeDia(val);
},
fail(res) {
console.log("未登录------150");
// 跳转登录页
let backUrl = "/lived/main";
let query = {
liveId: _this.liveId,
fromType: "mini"
};
let url = `/pages/login/main?back=${backUrl}&params=${JSON.stringify(
query
)}`;
wx.navigateTo({
url: url
});
}
});
},
showSpeDia(val) {
if (val.multiSpecificationFlag != 1) {
// 不是多规格直接加入购物车
live
.addCart([{ productGoodsId: val.productGoodsId, qty: 1}])
.then(res => {
if (res.data.code == 200) {
wx.showToast({
title: "加入成功",
icon: "success"
});
this.showSize = false;
} else {
wx.showToast({
title: res.data.msg,
icon: "none"
});
}
});
return;
}
let productId = val.productId;
this.itemGoods.productId = productId;
wx.showLoading({
title: "加载中..."
});
live.getProductInfo(productId).then(res => {
wx.hideLoading();
if (res.data.code == 200) {
this.itemGoods.maxSale = Number(
res.data.data.maxSuggestedRetailPrice
);
this.itemGoods.minSale = Number(
res.data.data.minSuggestedRetailPrice
);
this.itemGoods.maxDiscountPrice = Number(
res.data.data.maxDiscountPrice
);
this.itemGoods.minDiscountPrice = Number(
res.data.data.minDiscountPrice
);
this.itemGoods.productNature = res.data.data.productNature;
this.itemGoods.goodsLowerShelf =
res.data.data.saleStatus != 1 ? true : false; //1 上架 0下架 true 下架
if (
res.data.data.productPictures &&
res.data.data.productPictures.length > 0
) {
this.itemGoods.goodsImg = DFSImg(
res.data.data.productPictures[0].url
);
}
this.showSpe = true;
} else {
wx.showToast({
title: res.data.msg,
icon: "none"
});
}
});
},
closeSpeDia() {
this.showSpe = false;
},
// 到商品详情
toGoodsInfo(val) {
// 点击商品埋点
let info={
liveBroadcastId:Number(this.liveId),
liveBroadcastGoodsId:Number(val.productId),
}
live.addLiveUserGoodsByUser(info).then(res=>{});
let query = {
fromLived: 1,
liveId: this.liveId
};
let backPath = `/goods/${val.productId}`;
wx.reLaunch({
url: `../index/main?from=livedToGoodsInfo&backpath=${
backPath
}&params=${JSON.stringify(query)}`
});
}
}
};
</script>
<style lang="scss" scoped>
img{
display: block;
}
.livedGoodsList {
.tit {
font-size: 16px;
padding: 10px 10px;
}
.list {
overflow-y:auto;
max-height: 44vh;
.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;
border-radius: 6px;
overflow: hidden;
background: #999;
position: relative;
image {
width: 100%;
height: 100%;
object-fit: cover;
}
.num {
position: absolute;
top: 0;
left: 0;
color: #fff;
font-size: 12px;
background: #666;
padding: 2px 6px;
border-bottom-right-radius: 6px;
}
}
.info {
flex: 1;
height: 80px;
margin-left: 16px;
color: #333;
font-size: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
.name {
text-align: left;
}
.bottom {
display: flex;
justify-content: space-between;
align-items: center;
span {
color: #ff0000;
}
.price {
font-size: 18px;
.del {
font-size: 16px;
text-decoration: line-through;
span {
color: #666;
}
}
}
.icon {
img{
width: 30px;
height: 26px;
}
}
}
}
}
}
}
</style>
src/components/livedModel/livedIsEnded.vue deleted 100644 → 0
<template>
<!-- 直播结束组件 -->
<div class="livedIsEnd">
<div class="end">
<p class="endTxt">直播已{{status == 2 ? '结束' : "失效"}}</p>
<p class="time">
<span>直播时长：</span>
<span>{{status == 2 ? endInfo.liveTime : '00:00:00'}}</span>
</p>
<div class="data">
<div>
<p>{{status == 2 ? endInfo.watchNum : 0}}</p>
<p>观看</p>
</div>
<div>
<p>{{status == 2 ? endInfo.guestBookNum : 0}}</p>
<p>评论</p>
</div>
<div>
<p>{{status == 2 ? endInfo.likeNum : 0}}</p>
<p>赞</p>
</div>
</div>
<!-- 商品列表 -->
<div class="goodsList" v-if="list.length>0">
<div class="tit">
<span>商品列表</span>
<span>({{list.length}})</span>
</div>
<div class="list">
<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 /> -->
<image :src="item.productImgUrl" mode="aspectFill" alt=""></image>
</div>
<div class="info">
<p class="name line-clamp2">{{item.productName}}</p>
<div class="price">
<p>
<span>￥</span>
<span>{{item.minPrice}}</span>
</p>
<div class="icon" @click="isLogin(item)">
<img src="../../../static/images/lived/shopCart.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 选择规格弹层 -->
<livedSelectionSpe
v-if="showSpe"
:show="showSpe"
:productInfoId="itemGoods.productId"
:minSale="itemGoods.minSale"
:maxSale="itemGoods.maxSale"
:goodsImg="itemGoods.goodsImg"
:minSuggestedRetailPrice="itemGoods.minSuggestedRetailPrice"
:maxSuggestedRetailPrice="itemGoods.maxSuggestedRetailPrice"
:goodsLowerShelf="itemGoods.goodsLowerShelf"
@closeSpeDia="closeSpeDia"
></livedSelectionSpe>
</div>
</template>
<script type="text/ecmascript-6">
import livedSelectionSpe from "@/components/livedModel/livedSelectionSpe";
import { DFSImg } from "@/utils/index";
import live from "@/api/live";
export default {
props: ["updateGoods", "goodsList", "endInfo","status"],
name: "",
data() {
return {
list: [],
liveId: 0,
itemGoods: {}, //选中商品
showSpe: false
};
},
watch: {
updateGoods() {
this.list = this.goodsList;
}
},
components: {
livedSelectionSpe
},
computed: {},
onLoad(options) {
if(options.params){
let params = JSON.parse(options.params);
this.liveId = params.liveId;
}else if(options.scene){
var scene = decodeURIComponent(options.scene); //参数二维码传递过来的参数
console.log(scene)
let sceneInfo = scene.split(',')
console.log('sceneInfo',sceneInfo)
this.liveId = sceneInfo[0].split('=')[1]
}
},
created() {},
mounted() {},
methods: {
// 到商品详情
toGoodsInfo(val) {
// 点击商品埋点
let info={
liveBroadcastId:Number(this.liveId),
liveBroadcastGoodsId:Number(val.productId),
}
live.addLiveUserGoodsByUser(info).then(res=>{});
let query = {
fromLived: 1,
liveId: this.liveId
};
let backPath = `/goods/${val.productId}`;
wx.reLaunch({
url: `../index/main?from=livedToGoodsInfo&backpath=${backPath}&params=${JSON.stringify(
query
)}`
});
},
// 是否登录
isLogin(val) {
let _this = this;
wx.getStorage({
key: "sessionid",
success(res) {
_this.showSpeDia(val);
},
fail(res) {
console.log("未登录------150");
// 跳转登录页
let backUrl = "/lived/main";
let query = {
liveId: _this.liveId,
fromType: "mini"
};
let url = `/pages/login/main?back=${backUrl}&params=${JSON.stringify(
query
)}`;
wx.navigateTo({
url: url
});
}
});
},
showSpeDia(val) {
if (val.multiSpecificationFlag != 1) {
// 不是多规格直接加入购物车
live
.addCart([{ productGoodsId: val.productGoodsId, qty: 1 }])
.then(res => {
if (res.data.code == 200) {
wx.showToast({
title: "加入成功",
icon: "success"
});
this.showSize = false;
} else {
wx.showToast({
title: res.data.msg,
icon: "none"
});
}
});
return;
}
let productId = val.productId;
this.itemGoods.productId = productId;
wx.showLoading({
title: "加载中..."
});
live.getProductInfo(productId).then(res => {
wx.hideLoading();
if (res.data.code == 200) {
this.itemGoods.maxSale = Number(
res.data.data.maxSuggestedRetailPrice
);
this.itemGoods.minSale = Number(
res.data.data.minSuggestedRetailPrice
);
this.itemGoods.maxDiscountPrice = Number(
res.data.data.maxDiscountPrice
);
this.itemGoods.minDiscountPrice = Number(
res.data.data.minDiscountPrice
);
this.itemGoods.productNature = res.data.data.productNature;
this.itemGoods.goodsLowerShelf =
res.data.data.saleStatus != 1 ? true : false; //1 上架 0下架 true 下架
if (
res.data.data.productPictures &&
res.data.data.productPictures.length > 0
) {
this.itemGoods.goodsImg = DFSImg(
res.data.data.productPictures[0].url
);
}
this.showSpe = true;
} else {
wx.showToast({
title: res.data.msg,
icon: "none"
});
}
});
},
closeSpeDia() {
this.showSpe = false;
}
}
};
</script>
<style lang="scss" scoped>
.line-clamp2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 22px;
word-break: break-all;
}
.livedIsEnd {
position: absolute;
top: 20vh;
bottom: 0;
left: 0;
right: 0;
display: flex;
z-index: 2;
flex-direction: column;
align-items: center;
.end {
p {
text-align: center;
color: #fff;
}
.endTxt {
font-size: 34px;
font-weight: bold;
}
.time {
margin-top: 10px;
font-size: 16px;
}
.data {
margin-top: 20px;
width: 70vw;
display: flex;
justify-content: space-around;
align-items: center;
& > div {
p {
text-align: center;
font-size: 20px;
}
}
}
.goodsList {
position: absolute;
bottom: 0;
left: 0;
background: rgba(#000, 0.4);
border-top-left-radius: 10px;
border-top-right-radius: 10px;
padding: 12px;
width: 100%;
box-sizing: border-box;
p,
span {
color: #fff;
}
.tit {
font-size: 16px;
padding: 0 4px 6px 0;
}
.list {
max-height: 48vh;
overflow-y: auto;
.item {
padding: 14px 4px;
display: flex;
.img {
width: 100px;
height: 100px;
border-radius: 6px;
overflow: hidden;
position: relative;
image {
width: 100%;
height: 100%;
object-fit: cover;
}
.num {
position: absolute;
top: 0;
left: 0;
color: #fff;
font-size: 12px;
background: #666;
padding: 2px 6px;
border-bottom-right-radius: 6px;
}
}
.info {
flex: 1;
height: 100px;
margin-left: 16px;
color: #fff;
font-size: 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
.name {
text-align: left;
}
.price {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 18px;
span {
color: #ff0000;
}
.icon {
img{
width: 30px;
height: 26px;
}
}
}
}
}
.itemBorder{
border-bottom: 0.5px solid #EEEEED;
}
}
}
}
}
</style>
src/components/livedModel/livedIsMsg.vue deleted 100644 → 0
<template>
<!-- 评论模块 -->
<div class="livedIsMsg" v-if="list.length>0" :class="{'livedIsMsgFixed':isSend}" :style="{'bottom':isSend?(fixedHeight+50)+'px':''}">
<div class="list">
<scroll-view :style="{'height': '24vh','width':'52vw'}" :scroll-y="true" :scroll-top="scrollTop" :scroll-with-animation="true" @scrolltolower="scrolltolower">
<div class="item flex" v-for="(item,index) in list" :key="index">
<div class="user">
<p class="live"></p>
<div class="name">
<span>{{item.customerName}}：</span><span class="test">{{item.guestbookContent}}</span>
</div>
</div>
</div>
</scroll-view>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import liveApi from "@/api/live";
export default {
props:["guestBookList","updateVal","isSend","fixedHeight","liveId","info"],
name: "",
data() {
return {
list: [],
scrollTop:0,
};
},
watch:{
updateVal(){
if(!this.info.playbackUrl || this.info.liveBroadcastState == 1 || this.info.liveBroadcastState == 3){
console.log('2222222222222')
this.list=[...this.list,...this.guestBookList];
this.scrollTop=this.list.length*1000;
}
}
},
components: {},
computed: {},
created() {},
onLoad(){
if(this.info.playbackUrl && this.info.playbackUrl[0] && (this.info.liveBroadcastState != 1 || this.info.liveBroadcastState != 3)){
this.init()
}
},
mounted() {},
methods: {
scrolltolower(){
},
init(){
let query = {
id : this.liveId,
userActivebeginTime : 1,
beginTime : 1
}
liveApi.queryPlaybackComments(query).then(res => {
if(res.data.code == '200'){
this.list= res.data.data.guestBookList.slice(-100);
this.scrollTop=this.list.length*1000;
}
})
}
}
};
</script>
<style lang="scss" scoped>
/* 一行否则出现省略号 */
.line-clamp1 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.livedIsMsg {
margin-left: 12px;
padding: 8px;
margin-bottom: 10px;
position: relative;
width: 60vw;
.list {
width: 50vw;
overflow: hidden;
bottom: 0;
padding-left: 10px;
border-radius: 9px;
.item {
width: 50vw;
border-radius: 9px;
margin-bottom: 4px;
.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;
}
}
.test {
font-size: 14px;
color: #f1f1f1;
word-break: break-all;
}
}
}
}
.livedIsMsgFixed{
position: absolute;
margin: 0;
left: 12px;
}
</style>
src/components/livedModel/livedSelectionSpe.vue deleted 100644 → 0
<template>
<!-- 选择商品规格 -->
<div class="livedSelectionSpe">
<van-popup
:show="show"
position="bottom"
custom-style="border-top-left-radius:10px;border-top-right-radius:10px;"
:close-on-click-overlay="true"
@close="closeDia"
>
<div class="goodsMess">
<div class="sku">
<!-- 关闭按钮 -->
<div class="close" @click="closeDia">
<van-icon name="cross" />
</div>
<!-- 内容 -->
<div class="cont flex">
<div class="pic">
<img width="100%" height="100%" :src="product_goods_info.goodsImgUrl" alt />
</div>
<div class="content">
<div class="price" v-if="product_goods_info.discountPrice">
<div>￥{{product_goods_info.discountPrice}}</div>
<div v-if="product_goods_info.singleItemActivityId">
<p class="delPrice">￥{{product_goods_info.originalPrice}}</p>
<!-- <del style="color:#666;">￥{{product_goods_info.originalPrice}}</!-->
</div>
<div
v-else-if="product_goods_info.discountPrice-0<product_goods_info.goodsSuggestedRetailPrice-0"
>
<p class="delPrice">￥{{product_goods_info.goodsSuggestedRetailPrice}}</p>
<!-- <del style="color:#666;">￥{{product_goods_info.goodsSuggestedRetailPrice}}</del> -->
</div>
</div>
<template v-else-if="minSale<maxSale">
<div class="price">￥{{minSale}}-￥{{maxSale}}</div>
<p class="delPrice" v-if="(minSale-0<minSuggestedRetailPrice-0)&&(maxSale-0<maxSuggestedRetailPrice-0)">
￥{{minSuggestedRetailPrice}}-￥{{maxSuggestedRetailPrice}}
</p>
<!-- <del
v-if="(minSale-0<minSuggestedRetailPrice-0)&&(maxSale-0<maxSuggestedRetailPrice-0)"
>￥{{minSuggestedRetailPrice}}-￥{{maxSuggestedRetailPrice}}</del> -->
</template>
<template v-else>
<div class="price">￥{{minSale}}</div>
</template>
<div class="num" v-if="product_goods_info.oversoldFlag==1&&isGetMixId">库存充足</div>
<div
class="num"
v-else-if="product_goods_info.oversoldFlag!=1&&isGetMixId"
>库存{{product_goods_info.sellMaxQty}}件</div>
<div class="Choice" v-if="isChoice">【请选择规格】</div>
<div class="Choice line-clamp1" v-else>
<span v-for="(item,index) in goodsGuige" :key="index">{{item}}&nbsp;&nbsp;&nbsp;</span>
</div>
</div>
</div>
<div class="commoditySty">
<ul>
<li v-for="(ProductItem,n) in goodsGuiges" :key="n">
<div class="property">{{ProductItem.specificationName}}</div>
<div class="specification clearfix">
<div
v-for="(oItem,index) in ProductItem.specificationValue"
:key="index"
@click="specificationBtn(oItem.name,n,$event,index)"
:class="[oItem.isShow?'':'soldOut',subIndex[n] == index?'active':'']"
class="specification-item"
>
<div>{{oItem.name}}</div>
</div>
</div>
</li>
</ul>
</div>
<div class="buyQty flex">
<div class="ti">购买数量</div>
<van-stepper
:value="buyQty"
:min="product_goods_info.productMinCount>0?product_goods_info.productMinCount:1"
:max="MaxQtyNum"
:disable-input="true"
@change="changeQty"
input-class="ipt"
/>
</div>
</div>
<div v-if="!goodsLowerShelf&&!sellOut" class="bottom flex">
<div class="addCart van-button" @click="onAddCartClicked">加入购物车</div>
<div class="toPay van-button" @click="onBuyClicked">立即购买</div>
</div>
<div v-else-if="!goodsLowerShelf&&sellOut" class="goodsStand">商品已售罄</div>
<div v-else class="goodsStand">商品已下架</div>
</div>
</van-popup>
</div>
</template>
<script type="text/ecmascript-6">
import { DFSImg } from "@/utils/index";
import live from "@/api/live";
export default {
props: {
show: Boolean,
productInfoId: String,
minSale: String,
maxSale: String,
goodsImg: String,
minSuggestedRetailPrice: String,
maxSuggestedRetailPrice: String,
goodsLowerShelf: Boolean
},
name: "",
data() {
return {
product_goods_info: {
afterSaleContent: "",
goodsImgUrl: "",
maxQty: "",
pdtName: "",
productGoodsId: "",
productGoodsMixId: "",
productId: "",
referencePrice: "",
marketPrice: "",
oversoldFlag: Number,
originalPrice: "",
sellMaxQty: "",
limitQty: "",
specifications: [], //原规格
discountPrice: ""
},
buyQty: 1,
goodsGuige: [],
// 对应商品所有规格
goodsGuiges: [],
// 规格转json对象
goodsString: {},
// 规格对象
choose: {},
MaxQtyNum: 0,
isGetMixId: false, // 是否取价格
isChoice: true, //显示“请选择规格”
getProductInfos: [], //产品信息数组
getProductInfo: {}, //产品信息
isSingle: false, //是否为单规格商品
saleStatus: 1, //销售状态,
goodsStand: 1, //上下架,
shopItemInfo: {}, //存放要和选中的值进行匹配的数据
subIndex: [], //是否选中 因为不确定是多规格还是但规格，所以这里定义数组来判断
isLogin: false, //是否登录
nonstandardGoods: false, //无规格商品
selectedPrice: "", // 选中的规格价格
isChoice: true, //显示“请选择规格”
productUrl: "", // 产品主图
sellOut: false, //售罄及无库存且不是超卖
isGetMixId: false, // 是否取价格
paramData: "", //埋点数据
maxSelectedPrice: 0, // 限时特惠选中规格后划线价
allSellOut: false, //全部售罄标识
isDefault:false,
};
},
components: {},
computed: {},
created() {},
onLoad(options) {
if(options.params){
let params = JSON.parse(options.params);
this.liveId = params.liveId;
}else if(options.scene){
var scene = decodeURIComponent(options.scene); //参数二维码传递过来的参数
console.log(scene)
let sceneInfo = scene.split(',')
console.log('sceneInfo',sceneInfo)
this.liveId = sceneInfo[0].split('=')[1]
}
this.product_goods_info.goodsImgUrl=this.goodsImg;
this.init();
},
mounted() {},
methods: {
// 初始化
async init() {
let productInfoId = this.productInfoId;
await live
.getProductGoodsByProductInfo({productInfoId})
.then(res => {
if (res.data.code == 200) {
this.getProductInfos = res.data.data;
this.product_goods_info.productGoodsId = res.data.data[0].productGoodsId;
this.product_goods_info.goodsId = res.data.data[0].goodsId;
this.product_goods_info.productGoodsMixId =
res.data.data[0].productGoodsMixId;
this.product_goods_info.specifications = res.data.data[0].specifications;
this.product_goods_info.oversoldFlag = res.data.data[0].oversoldFlag;
}
});
// 获取商品规格
let productId = this.productInfoId;
await live.getProductGoodsSpecifications(productId).then(res => {
if (res.data.code == 200) {
this.goodsGuiges = res.data.data;
console.log(this.goodsGuiges,'------------188')
//做判断如果只有一套规格，直接添加规格 不用弹出选择规格弹窗直接进行下单 4.8建
let isSingles = [];
this.goodsGuiges.forEach((item, index) => {
if (item.specificationValue.length >= 2) {
isSingles.push(1);
}
if (isSingles.length != 0) {
this.isSingle = false; //多规格
this.goodsGuige = [];
this.subIndex.pop();
} else {
this.isSingle = true; // 单规格商品
this.isChoice = false;
// this.goodsGuige.push(item.specificationValue[0]);
this.goodsGuige = [];
this.subIndex.push(0);
// 通过mixid取价格
}
});
if (this.isSingle == true) {
this.getMixId(0);
}
// 规格数据重组
for (var i = 0; i < this.goodsGuiges.length; i++) {
for (
var j = 0;
j < this.goodsGuiges[i].specificationValue.length;
j++
) {
this.goodsGuiges[i].specificationValue[j] = {
name: this.goodsGuiges[i].specificationValue[j],
isShow: true
};
}
}
// console.log(this.specifications,'-------------规格')
this.getProductInfos.forEach((item, index) => {
item.twoSpecifications = [];
item.specifications.forEach((item1, index1) => {
item.specifications.splice(index1, 1, item1.specificationValue);
item.twoSpecifications.splice(
index1,
1,
item1.specificationValue
);
});
item.specifications = item.specifications.join("abab@&*");
});
for (var i in this.getProductInfos) {
this.shopItemInfo[
this.getProductInfos[i].specifications
] = this.getProductInfos[i]; //修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
}
// let defaultnoSellOut=this.getProductInfos.filter((item,index)=>{return !((item.oversoldFlag==0&&item.saleQty-0<=0)||item.saleStatus=='0')});
// 默认选中一个只有一个未售罄的规格
// this.defaultSelection(defaultnoSellOut[0].twoSpecifications,this.goodsGuiges);
if (this.goodsGuiges.length == 1) {
this.goodsGuiges[0].specificationValue.forEach((item, index) => {
for (var i in this.shopItemInfo) {
if (item.name == i && this.shopItemInfo[i].saleStatus == "0") {
item.isShow = false;
}
if (
item.name == i &&
this.shopItemInfo[i].oversoldFlag == 0 &&
this.shopItemInfo[i].saleQty - 0 <= 0
) {
item.isShow = false;
}
}
});
}
// this.checkItem();
} else if (res.code == -1) {
this.isSingle = true;
this.nonstandardGoods = true;
this.goodsGuige = [];
this.getMixId(0);
}
});
},
changeQty(event){
console.log(event.mp.detail,'------------------------------279')
this.buyQty=event.mp.detail;
this.getMixId(1,true);
},
// 默认选中一组规格
// 两个参数goodsSpc,allSpc sku及所有规格
defaultSelection(goodsSpc,allSpc){
// 是默认调取getMixid接口状态
this.isDefault=true;
// console.log(goodsSpc,'-------371')
// console.log(allSpc,'-------372')
for(let i=0;i<allSpc.length;i++){
for(let j=0;j<allSpc[i].specificationValue.length;j++){
for(let k=0;k<goodsSpc.length;k++){
if(allSpc[i].specificationValue[j].name==goodsSpc[k]){
this.specificationBtn(allSpc[i].specificationValue[j].name,i,null,j);
break;
}
}
}
}
},
onAddCartClicked() {
let productGoodsId = this.product_goods_info.productGoodsId;
if (
this.goodsGuige.length < this.goodsGuiges.length ||
this.checkGoodsGuigeValue()
) {
wx.showToast({
title: '请选择规格',
icon: 'none',
})
} else if (
this.product_goods_info.oversoldFlag == 0 &&
this.product_goods_info.sellMaxQty <= 0
) {
wx.showToast({
title: '商品暂无库存',
icon: 'none',
})
} else {
live
.addCart([{ productGoodsId: productGoodsId, qty: this.buyQty }])
.then(res => {
if (res.data.code == 200) {
wx.showToast({
title: '加入成功',
icon: 'success',
})
this.showSize = false;
} else {
wx.showToast({
title: res.data.msg,
icon: 'none',
})
}
});
}
},
// 立即购买
onBuyClicked(){
if (
this.goodsGuige.length < this.goodsGuiges.length ||
this.checkGoodsGuigeValue()
) {
wx.showToast({
title: '请选择规格',
icon: 'none',
})
} else if (
this.product_goods_info.oversoldFlag == 0 &&
this.product_goods_info.sellMaxQty <= 0
) {
wx.showToast({
title: '商品暂无库存',
icon: 'none',
})
} else {
let query ={};
query.productGoodsMixId = this.product_goods_info.productGoodsMixId;
query.productGoodsId = this.product_goods_info.productGoodsId;
query.goodsId = this.product_goods_info.goodsId;
query.qty = this.buyQty;
query.goodsString = JSON.stringify(this.goodsString);
query.maxQty = this.product_goods_info.maxQty;
query.productMinCount = this.product_goods_info.productMinCount;
query.fromLived = 1;
query.liveId = this.liveId;
// 将规格转化为json字符串
this.backPath=`/order/orderConfirm`;
wx.reLaunch({
url: `../index/main?from=livedToOrderConfirm&backpath=${
this.backPath
}&params=${JSON.stringify(query)}`
})
}
},
// 取价格
getMixId(val,getNewPrice) {
if(!this.isDefault){
wx.showLoading({
title: '加载中...',
})
}
this.isDefault=false;
this.isGetMixId = true;
let productGoodsMixId=this.product_goods_info.productGoodsMixId
live
.getProductGoodsByMixId(productGoodsMixId)
.then(res => {
wx.hideLoading()
if (res.data.code == 200) {
if (this.nonstandardGoods == false) {
res.data.data.specifications.forEach((item, index) => {
if (item.specificationPictureUrl != "") {
this.product_goods_info.goodsImgUrl = DFSImg(
item.specificationPictureUrl,
400,
400
);
}
});
if (this.product_goods_info.goodsImgUrl == "") {
this.productUrl = res.data.data.productUrl || "";
this.product_goods_info.goodsImgUrl =
DFSImg(res.data.data.productUrl, 400, 400) || "";
}
} else {
this.productUrl = res.data.data.productUrl || "";
}
this.product_goods_info.goodsImgUrl =
DFSImg(res.data.data.productUrl, 400, 400) || DFSImg("", 400, 400);
this.product_goods_info.marketPrice = Number(res.data.data.marketPrice);
this.product_goods_info.originalPrice = Number(res.data.data.originalPrice);
this.product_goods_info.discountPrice = Number(res.data.data.discountPrice);
this.product_goods_info.sellMaxQty = Number(res.data.data.sellMaxQty); //可销售库存
this.product_goods_info.limitQty = Number(res.data.data.limitQty); // 实际库存
this.product_goods_info.productMinCount = Number(res.data.data.productMinCount); //最小购买数 0不限
this.product_goods_info.maxQty = Number(res.data.data.maxQty); // 最大购买数 0不限
this.product_goods_info.oversoldFlag = res.data.data.oversoldFlag; // 1超卖 0不超卖
this.product_goods_info.goodsSuggestedRetailPrice =
Number(res.data.data.goodsSuggestedRetailPrice);
this.product_goods_info.singleItemActivityId =
res.data.data.singleItemActivityId||'';
if(!getNewPrice){
this.buyQty =
this.product_goods_info.productMinCount > 0 ? this.product_goods_info.productMinCount :1;
}
if (
this.product_goods_info.oversoldFlag != 1 &&
this.product_goods_info.sellMaxQty - 0 <= 0
) {
this.sellOut = true;
// console.log(this.sellOut, "cg416");
} else {
this.sellOut = false;
}
this.getMaxQtyNum(); //更新最大值
this.$forceUpdate();
}
});
},
checkGoodsGuigeValue() {
for (let i = 0; i < this.goodsGuige.length; i++) {
if (
this.goodsGuige[i] == "" ||
this.goodsGuige[i] == "undefined" ||
this.goodsGuige[i] == undefined
) {
return true;
}
}
return false;
},
getMaxQtyNum() {
let num = 0;
if (this.product_goods_info.maxQty == "0") {
//无限制
if (this.product_goods_info.oversoldFlag == "0") {
//不允许超卖
num = this.product_goods_info.sellMaxQty;
} else {
num = 999;
}
} else {
if (
this.product_goods_info.sellMaxQty > this.product_goods_info.maxQty
) {
num = this.product_goods_info.sellMaxQty;
} else {
num = this.product_goods_info.maxQty;
}
}
this.MaxQtyNum = num;
},
specificationBtn(item, n, event, index) {
this.isChoice = false;
if (this.goodsGuige[n] != item) {
this.goodsGuige[n] = item;
// this.goodsGuige[n] = item;
this.subIndex[n] = index;
this.subIndex.splice(n, 1, index);
} else {
this.goodsGuige[n] = "";
this.subIndex[n] = -1; //去掉选中的颜色
this.subIndex.splice(n, 1, -1); //去掉选中的颜色
this.product_goods_info.discountPrice = null;
this.goodsStand = 1;
let isChoice = 0;
// this.product_goods_info.goodsImgUrl=DFSImg(this.goodsImg,400,400);
this.product_goods_info.goodsImgUrl =
this.goodsImg || DFSImg("", 1024, 1024);
this.sellOut = false;
this.isGetMixId = false;
this.goodsGuige.forEach((item, index) => {
if (item == "") {
isChoice++;
}
});
if (isChoice == this.goodsGuige.length) {
this.isChoice = true;
this.goodsGuige = [];
isChoice = 0;
} else {
this.isChoice = false;
}
}
this.checkItem();
let noStr = 0;
this.goodsGuige.forEach((item, index) => {
if (item != "") noStr++;
});
if (noStr == this.goodsGuiges.length) {
this.getMixId(1);
}
},
checkItem() {
var option = this.goodsGuiges;
var result = []; //定义数组存储被选中的值
// console.log(this.goodsGuiges,"cg524")
for (var i in option) {
result[i] = this.goodsGuige[i] ? this.goodsGuige[i] : "";
}
for (var i in option) {
var last = result[i]; //把选中的值存放到字符串last去
for (var k in option[i].specificationValue) {
result[i] = option[i].specificationValue[k].name; //赋值，存在直接覆盖，不存在往里面添加name值
option[i].specificationValue[k].isShow = this.isMay(result); //在数据里面添加字段isShow来判断是否可以选择
}
result[i] = last; //还原，目的是记录点下去那个值，避免下一次执行循环时避免被覆盖
}
this.$forceUpdate(); //重绘
},
isMay: function(result) {
for (var i in result) {
if (result[i] == "") {
return true; //如果数组里有为空的值，那直接返回true
}
}
// console.log(result,this.goodsGuige,"cg494")
for (var i in this.shopItemInfo) {
let newArr = i.split("abab@&*");
let isTrue = this.isContained(result, newArr);
if (isTrue == true) {
// console.log(newArr,i,result,"cg498")
if (this.goodsGuige.length == this.goodsGuiges.length) {
let isGoods = this.isContained(this.goodsGuige, newArr);
if (isGoods == true) {
this.product_goods_info.productGoodsMixId = this.shopItemInfo[
i
].productGoodsMixId;
this.product_goods_info.productGoodsId = this.shopItemInfo[
i
].productGoodsId;
this.product_goods_info.goodsId = this.shopItemInfo[i].goodsId;
}
}
// 判断上下架、售罄
console.log(
this.shopItemInfo[i].saleStatus == 0,
this.shopItemInfo[i].oversoldFlag == 0 &&
this.shopItemInfo[i].saleQty - 0 <= 0,
"-------------------703"
);
if (
this.shopItemInfo[i].saleStatus == 0 ||
(this.shopItemInfo[i].oversoldFlag == 0 &&
this.shopItemInfo[i].saleQty - 0 <= 0)
) {
return false;
} else {
return true;
}
}
}
},
isContained(aa, bb) {
if (
!(aa instanceof Array) ||
!(bb instanceof Array) ||
aa.length < bb.length
) {
return false;
}
for (var i = 0; i < bb.length; i++) {
var flag = false;
for (var j = 0; j < aa.length; j++) {
if (aa[j] == bb[i]) {
flag = true;
break;
}
}
if (flag == false) {
return flag;
}
}
return true;
},
// 关闭
closeDia() {
this.$emit("closeSpeDia");
}
}
};
</script>
<style lang="scss" scoped>
.delPrice{
text-decoration: line-through;
color: #666;
}
.flex{
display: flex;
}
/*清除浮动*/
.clearfix {
zoom: 1;
}
.clearfix:after {
clear: both;
content: '.';
display: block;
width: 0;
height: 0;
visibility: hidden;
}
/* 一行否则出现省略号 */
.line-clamp1 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.line-clamp2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 22px;
}
.livedSelectionSpe {
.goodsMess {
width: 100%;
background: rgba(255, 255, 255, 1);
border-radius: 8px 8px 0px 0px;
.sku {
padding: 8px 10px;
position: relative;
.close {
position: absolute;
right: 8px;
top: 8px;
font-size: 20px;
}
}
.cont {
width: 100%;
height: 126px;
border-bottom: 1px solid #e5e5e5;
.pic {
width: 100px;
height: 100px;
img {
width: 100%;
height: 100%;
}
}
.content {
margin-left: 8px;
width: 65%;
.price {
font-size: 13px;
font-weight: 400;
color: #ff4240;
margin-top: 10px;
}
.num,
.size {
font-size: 11px;
font-weight: 400;
color: rgba(146, 146, 146, 1);
}
.size {
color: rgba(41, 41, 41, 1);
}
.Choice {
width: 100%;
margin-top: 10px;
font-size: 14px;
color: #292929;
}
.num,
.soldout {
margin-top: 10px;
margin-bottom: 13px;
}
}
}
.commoditySty {
border-bottom: 1px solid #e5e5e5;
// max-height: 240px;
// overflow-y: scroll;
ul {
height: 100%;
li {
height: 100%;
.property {
margin: 10px 0;
font-size: 15px;
}
.specification {
div.specification-item {
font-size: 15px;
border: 1px solid #606060;
border-radius: 4px;
color: #606060;
text-align: center;
padding: 2px 4px;
float: left;
margin-right: 6px;
min-width: 30px;
margin-bottom: 6px;
box-sizing: content-box;
div {
text-align: left;
display: inline-block;
}
}
div.active {
color: #fff;
background-color: #ff4240;
border-color: #ff4240;
}
div.soldOut {
background-color: #ccc;
opacity: 0.4;
color: #000;
pointer-events: none;
border-color: #606060;
}
}
}
}
}
.buyQty {
margin-top: 10px;
width: 100%;
height: 60px;
justify-content: space-between;
.ti{
font-size: 14px;
}
/deep/.ipt{
color: #000!important;
}
}
.bottom {
margin-top: 60px;
.van-button {
width: 50vw;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 14px;
}
.toPay {
background: #ff4240;
color: #fff;
}
.addCart {
background-color: #fff;
color: #292929;
}
}
.goodsStand {
margin-top: 60px;
background: #606060;
width: 100%;
height: 49px;
text-align: center;
line-height: 49px;
color: #fff;
font-size: 16px;
}
}
}
</style>
src/components/livedModel/livedShareDia.vue deleted 100644 → 0
<template>
<div class="livedShareDia">
<van-popup
:show="showShareDia"
position="bottom"
:close-on-click-overlay="true"
@close="closeDia"
>
<div class="share flex">
<div class="wxShare">
<button data-name="shareBtn" open-type="share" plain="true">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAQDklEQVR4Xu1dCXBURRr+ehIggYAQznCK4b50lWuCFKDECy8UwYuUC64uuFqCihUmFKFMSOnKsovrQumiLhFFKEQ5REWXqJAhcggC4QwgkTshHLmPeVv/G8MOkbxjXr9+b5L3V03NVE33///9/9/rfv33390MDtVrC7B63Xqn8XAAUM9B4ADAAUA9t0A9b77TAzgAqOcWqOfNd3oABwB10AI/p7VASVUsfIgF6OO6Qf6WpCgwNAEQBQnVvwEJRWAoBFDo/83odw7gOyJ/u5CDyLAcDEgsqGvWqhs9wMbkKDQKjwdjdwCI9zvdFDoIYA1c2ICwih8wMLnYFCkCmYYuADLTuoH57gbYaEC6HZCfbJF0GcAGABmQXOsRl3hYpHBeskILAFecjrsB+WMnWg9gfaiBITQA4E0dDwkJYBhjJ4/XqouEdWBYArdnud31tS8ANr3eFK5KcvpEAEPsbsha9MuChHT4wpfg1ldpyLAd2RMAm19LRphrIiTQ23voE8MRVPnSMWxWst0aYy8AeF8bCYTNBqSRdjMUH31YBlA1B+5ZGXz4GediHwDQU+9yzTbepBDg4PPNsUtvYD0AtqTcCsn1Wt196msDJMsA883C0KRNVkLWWgBkprwIxtIARFhpBAtll0KSEhGX9HerdLAGAN+ldEJDpAHsCasabi+50lKUIxEjknJF6yUeAJkpY+FiaZDQU3RjbS2P4QB8cm+wSqSeYgGQmfIIGLN9cESkA34vi02Fe+ZCUTqIA4DjfO0+FThLEAOALXMnQpKWaLeAUxKCQGA+AOrT/J43bgWAwFwAOM43DgnGEjB0ZrpxRtfmYB4AHOfz85kkjUdc0gp+DP/PyRwAeOdOAaR/maFwveVpEgj4A4Dm+Yx9Wm8dZWbDJekh3nECvgCgCF8jtsEJ8piEAgoWlUnxPCOGfAHgTfnQCe+a5PwrbKWlcCc9yUsKPwD4F3bm81LM4aNgAUmaxmsBiQ8A5CVdRhmy9XVVTzReS8GkeB5LyXwA4J27sf6t54v2eU15LAPumaOMamEcAM5836gPgq/PIVJoDAByDp9rY/AtcGoat4BvlJEcQ4MAcLp+4w40ysHYUBA8AJyu36jneNZPhtszJxiGwQGANm2EV+6sM3n7wVjOTnVo30Fl+E3BbD4JDgCZqc+B4Z92skG910XCXxDneVuvHYIDgDd1i123a13f6Dr4P83l7/OVpSioKkVBZSmOlV3AnuJzem0UKuWz4PYM1ausfgDQRk3gE72CzCo/sllnjGzWBSOadQH9VqMjpRew7sJhbLqciy8u5KCwqlytSij9P0HvhlT9AMhMXWv1Lt3OjZrh8ZZ98XirvujfuE3QDsotv4RPzx+QP99fOh40H9tUpF3JcZ579eijDwD+/fmH9AjgWZa69Bnt3bLjrwtrxJM1lufvw5unsrC18CRXvsKZSa7ueg6r0AcAb+rzABYIbxSAp1oPwOyOw+Vx3SyqlHyYdyoLs3O/R5lUZZYYs/m+ALfnLa1C9ALgCytO5ng/9l4ZAKJoW9EpTDi4CkfKLogSyVPOerg992hlqB0AFnX/i2PHYFLrG7W2h2u54XvT5ZfFkCMdw4B2AFjQ/c/rcjumx1h7OEiHHW/hZLktD/dQwqXmYUAPAFYCeEjU0/BSzBC82YUO/7KWqAe4Y9/HKPFVWquILulsNdwzH9BSRRsAtiU3RkWD0wCaamFqtAzN5zf0fhzhzKXI6tuLx7C24BDOVZYgsUMc+ka20iR6R9FpfH3xKDZf/hUJrfrhkZa9Feu9f+5nTMpZq4m3TQoVobSiHUYl04GXiqQNAFmpd8KHL9WY8fi/aVhD2flDotorsnvll2/laVsgben3lGq99Lw9SDi8+qp6C66/A8+3G6go77FDn2FZfjaPJorhoTGDWBsAvKlvAnhJhOZ/bnszFna9S1VUy23zcb6y5Kpyb3e9E1Pb3qJY974DK+ReI5CoB1jefaxiPQohj8hOl0PLIUKL4PZMUdNVKwAOAOihxozH/+QItS6Z5Azd8wGyagRtPu3xMMZGKx878MKxr/HW6W1XqfpyzBD8VcP7xtNH1mHx2V08mimCRw7cnm5qgtQBQAcvF/nOqzHi8X+EKxwlg2doYkVj+Nunt2H1b0+zlqeYGJ+pKMKM4/+VI3+lvkr0iWyFdb0maAowvXduFybnrNOkny0KNXFFqx1wrQ6ArJSB8LGtIhp0d/NYfNFrgi5RZyuKkF2Sr2khKJBxuVSFzMsn0LpB41pfHmkFsXol8fJvi0Z37V+GslCZEbikQRiSdHV3V8O66gDwpkwA2DJdXgmyML2I0QuZVXSs7CIyLv0irxKuyN9nlRoc5UqPwp2kuHKrBQAzAZbKUataWWl5GzdDj8OlBVhweuvv3g0aMJe8zNwyPALR4ZHyp9hXgbyKEuRXFoOmk6crisxQiRNPyQN30lwlZhoAMPffgDSZk0aKbKj7p2FAJM359QcsOL3tyowi0hWOcdG98UB0d9zfogcIBEqUcek4vrqQg28uHgOtIdiL2GK4Zz5tFADCNn181O0BPNaqrxAb5leW4L4Dy+G9fEKW169xazzaso/8iY1oEZQOH+XtxZK83fjqAl00YgdSzxhW7wEyU7eCQTlKwqmtKZ1GwNNhGCdutbPZUngC7j3/uVKAZJJsXkRTxaTcDOuHBwnbEOcZZLAHSKXwl3KslJPlnm37Byzqau49EHtL8tBv1zuyxr0jW+GNzrfh3haq02XdLSQ5BILPztMtM5bRPrg9fYwCgHKlOolowj3Nu2FdL0o5NIfIKeMOrsT+kny0bdBEnnLe3KSdOcJ+4zr16JdYeGaHqTIUmOfC7VFMlNQyBJwHQ3CDos5mhzEXfuo/Gf0bt9ZZU1vxP+asxQfnfpZf7Fb3HI+7mou5jiAp9zukntisTUmepSQUIM4TbbQHKAPQkKdeSrymxwzGvC6juYv75uJRxO/7WOY7//p4vNhOcWjkLp+WlDdcPMqdrwrDcrg9ismT6j2AN1UoAFqER8i9QBfOuX/3H1iBNQWH8GB0D6zqMU7RbrTG4C08IUcXb2rclktZcj6BQDBxAEBmqrAhoNo4lPyZ3HE4N1vRXoDYnf5Dy7L6PYXBCkvNNK8flf3hFdkb+zxZa5hZT1limHB4DdLzdnNrlyojTkOAsJfAwAZ93fsxxF/XVbWNWgrMP/Ujpv/yjexIcqgSkfPJsdWkVEdPWeK38vx+jDso9AA1Di+BXnHTwEDHNGBhKBg0HU1cDbT4WJNT/9ZlNKbFDFYse66iGG22++9viGkYJSen1JZppKcs8auQfOi1axGoRxJEHKaBAgNBNY1C4+9PA4xHodtvX4BTFYXY3n+S5mnfojM75FR0WqJWIz1lnzj8OShiKIT4BIKsPQSCnkJyXEyDqKBsdrGqDM23zpOnfoWDX0FDFhYUH16VaDpI00IxxCMU7BW3GKRklMU3jMGkNvr3B/xYeBJD9nwgR/2yb3xGjN0VpIh9D+CyGJQibDlYzTs0M6AZgh46WV6IDjsWoGdkS+y/8Vk9VU0pSxtRHz5IGfYiiMtysLiEEDWT5A2chpbhkWrFfvd/5I9vyOlflwa9DMo6tpLeOOnFq8dFnavFIyFEYEqYkmOGNe2ITX0TgvIdrfzRCiDVJz5W0uQj6/CeqMRSLilhApNClRyzrPuDmNDy6oUtSsJIPbEJ3SKi0T2ihfzdLaIFukdEgxI7qmnK0S9Bb+q8l32DAdLA3e9hexHtsRFAXJJCSU9vqrC08NrMknvz8+jY0L8xaW3BYXlxhZ7q2qhDw6YyKHLLL8uZwHQSCCV97B7wJwGWv7aId87+hGePrBcln1NauB8AwjaGXMs6T7e5Ce/ecI+cyp12MhM7i84EbcTPe46TU72sIKFPP8BxY4jArWHXcgydD0AvT/tK8g37zci7hBHhKSc2Y5aw+T8ArlvDBG8ODTQ0nQhC6do86fXOt2FGe90HagWtwrtnd+KZI3S2hjDivDnUPwwI3R5upqlEJoTkVRaj9TbRd0Pz3h7uB4Bl5wOZAQYRKWG0ZyBm+z/MUF+NpwkHRFh0RIxaS438b2ZSaM3MYyN66q5ryhEx/l7AkkOidBtAZwXe8YGthacweM/7OrXgVtykQ6Lq4DAQaHIeG0MC+bEtijuyuHn7Gow0d/9UVz0nMFBCHRwGahqQIoj3t+iO4U07Y3izThigcBIpzU6yS85hb3GefHglBZ+q6aGDK7HqPMXPBJOO7l8/AKiGDY6KFWlSAgSFlinETKFm2o6+t+QcsovzUOSruEqV59rdgrROo+QFp0/ys/Hooc9EqgqYflSsfxiw1WHRYi2sLo0AQ+8U9LFgGBBwWLQfBLY9Ll7dRWJK0AbT1uGNFdcrOGsi6Lh4/zDgXBjB2XuG2Qm9MMK5Msawv7gyEH5lDGnvXBrF1YeGmBm4P1DfNLCmls6NoYb8xqeyeuavkhyDAHAujuTjRCNcrLw40hkKjHjOeF0DXX+1cGM9QDUXZygw7kzdHIx1/XwB4Fwfr9t9BivY7Pp4OTaQ8iIYm2+wYU51LRaQpGmIS+KSZcJnCLgyFKR8CLAntLTBKROsBaSlcCcp73HXwZovAL5L6YRGbAMkKB/ZrUNBp2iABRgOoEyKx4gkbhcZ8QWAfygYC8aEnoJQb0CiMdNXjz34A4Cke+dOAST/mSwO8bGAJI1HXNIKPsz+z8UcAMggSJ0NIJm3wvWSn0nOJ1uaBwDi7qwXGMcrYwkYOjPdOKNrczAXAA4IjPmNQ6RPTQHzAUAabJk7EZK0RE0Z5/8ACwhwvvlDQKBHM1MeAWPLHSdrsIAg54sFAElzQKDB+2wq3DMXaijIpYiYIeDqnmAsXCzNCRbV8B8FeXxSIuKSVnHxrEYm4gFAilHEsCHSnLBxtZekpShHIs8In0b/mzwNVNPCv4CUBiBCrWgd/b8UkvzUc1nYCcZG1vQAgZrKS8mu1wBpZDANCN06LAPMNwtDkzZZ2QbrAVDd+voUNBL4lq8GLvsAgDT1Uo5h2Oy62xuwDKBqDtyzMtQcI+p/ewGgutW0jsCQAAli7nQx29qUt1/lS8ewWbZbG7EnAMghtPnEVZkAhokAhpjtI5P4Z0FCOnzhS3Drq5dNkmGIrX0BENgs2pAqgcAwxlBrRVWmXboMS+D22D7yGRoAqHac/3wCuliw+iPKpVrk0AmQ6yG51iMu8bCWCnYoE1oACLTYFTCw0YB0O4Amgg1KXfoGABmh5vRAO4UuAAJbsTE5Co3C48EY3T0fD8CsG6jpGtA1cGEDwip+wMDkYsGg4y6ubgCgplnogOuSqlj4ZCDEAi6aTcRCkqLA5J4iChKqf9PJGkVgKARQ6P/N6HcO4KNboHPgQg4iw3IwILGAuwcsZlg3AWCxUUNJvAOAUPKWCbo6ADDBqKHE0gFAKHnLBF0dAJhg1FBi6QAglLxlgq4OAEwwaiixdAAQSt4yQdf/AUsWasyb1xL8AAAAAElFTkSuQmCC"
alt
/>
<p class="tit">微信分享</p>
</button>
</div>
<div class="createPoster" @click="isLogin">
<img
src="data:image/png;base64,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"
alt
/>
<p class="tit">生成海报</p>
</div>
</div>
<div class="cancel" @click="closeDia">取消</div>
</van-popup>
<livedposterDia
v-if="againLoadingPoster"
:showPosterDia="showPosterDia"
:posterInfo="posterInfo"
:userInfo="userInfo"
:infoIsComplete="infoIsComplete"
@closePosterDia="closePosterDia"
></livedposterDia>
</div>
</template>
<script type="text/ecmascript-6">
import livedposterDia from "@/components/livedModel/livedposterDia";
import live from "@/api/live";
import { DFSImg } from "@/utils/index";
import spokesman from "@/api/spokesman";
export default {
props: ["showShareDia", "info"],
name: "",
data() {
return {
liveId: "",
shopName: "",
shopLogo: "",
backPath: "",
showPosterDia: false,
posterInfo: {},
againLoadingPoster: false, // 是否开始加载海报
userInfo : {},
spokesmanObj: {}, //分销员信息
infoIsComplete:false,
};
},
components: {
livedposterDia
},
computed: {},
created() {},
onLoad(options) {
if(options.params){
let params = JSON.parse(options.params);
this.liveId = params.liveId;
this.shopName = params.shopName;
this.backPath = params.fromPagePath || "/";
this.shopLogo = DFSImg(params.shopLogo, 40, 40);
}else if(options.scene){
var scene = decodeURIComponent(options.scene); //参数二维码传递过来的参数
console.log(scene)
let sceneInfo = scene.split(',')
console.log('sceneInfo',sceneInfo)
this.liveId = sceneInfo[0].split('=')[1]
}
this.getSpokesman()
// this.init();
console.log(this.info, "--------------------------67");
},
onUnload() {},
mounted() {},
onShow(){
console.log('onSHow..........................')
this.showPosterDia = false;
this.infoIsComplete = false;
this.againLoadingPoster = false;
// this.init();
this.getSpokesman()
},
methods: {
closePosterDia() {
this.showPosterDia = false;
},
getSpokesman() {
spokesman.getSpokesmanidByShare().then(res => {
if (res.data.code == 200) {
if (res.data.data.hasInvitationStatus == 1) {
this.hasInvitationStatus = 1;
this.spokesmanObj = {
spokesmanGroupId: res.data.data.groupId,
spokesmanShopId: res.data.data.shopId,
spokesmanRelId: res.data.data.spokesmanId
};
}
this.init()
}
});
},
// 初始化信息
init() {
// 获取小程序码
console.log(this.spokesmanObj,'this.spokesmanObj')
let id = Number(this.liveId);
let fxyInfo = '';
if(this.spokesmanObj.spokesmanGroupId){
fxyInfo = `hb_${this.spokesmanObj.spokesmanGroupId}_${this.spokesmanObj.spokesmanShopId}_${this.spokesmanObj.spokesmanRelId}`
}
live.getLiveQRCode(id,fxyInfo).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,
posterCoverUrl : 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()}日 ${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");
}
this.posterInfo = query;
live.getUserInfo().then(res1 => {
if(res1.data.code == '200'){
this.infoIsComplete = true
this.userInfo = res1.data.data;
this.againLoadingPoster = true;
console.log(this.userInfo)
console.log('111111111111111111111111111')
}
})
}
});
},
initShare() {},
// 关闭
closeDia() {
this.$emit("closeShareDia");
},
// 是否登录
isLogin(val) {
let _this = this;
wx.getStorage({
key: "sessionid",
success(res) {
console.log('1111111111')
_this.toCreatePoster();
},
fail(res) {
_this.$emit("closeShareDia");
console.log("未登录------150");
// 跳转登录页
let backUrl = "/lived/main";
let query = {
liveId: _this.liveId,
fromType: "mini"
};
let url = `/pages/login/main?back=${backUrl}&params=${JSON.stringify(
query
)}`;
wx.navigateTo({
url: url
});
}
});
},
// 去海报页面
toCreatePoster() {
// let query = {
// liveId: this.liveId,
// livedTitle: this.info.title,
// livedStatus: this.info.liveBroadcastState
// };
// let cImg = DFSImg(this.info.coverUrl);
// if (cImg.indexOf("https") == -1) {
// query.coverUrl = cImg.replace("http", "https");
// }
// let newTime = new Date(this.info.startTime.replace(/-/g, "/"));
// query.livedTime = `${newTime.getMonth() + 1}月${newTime.getDate() -
// 1}日 ${newTime.getHours()}:${newTime.getMinutes()}`;
// console.log(this.info, "--------------96");
// this.posterInfo=query;
this.$emit("closeShareDia");
this.showPosterDia = true;
// let url = `/pages/livedPoster/main?params=${JSON.stringify(query)}`;
// wx.navigateTo({
// url: url
// });
}
}
};
</script>
<style lang="scss" scoped>
.flex {
display: flex;
}
img {
display: block;
}
.livedShareDia {
width: 100vw;
.share {
box-sizing: border-box;
width: 100%;
justify-content: space-around;
align-items: center;
padding: 20px;
& > div {
display: flex;
flex-direction: column;
align-items: center;
line-height: 30px;
img {
width: 60px;
height: 60px;
}
.tit {
font-size: 16px;
color: #000;
}
}
.wxShare {
button {
display: flex;
flex-direction: column;
align-items: center;
line-height: 30px;
}
button[plain] {
border: 0;
}
}
}
.cancel {
border-top: 10px solid #e5e4e9;
text-align: center;
height: 60px;
line-height: 60px;
font-size: 18px;
}
}
</style>
src/components/livedModel/livedposterDia.vue deleted 100644 → 0
<template>
<div class="livedposterDia">
<van-popup
:show="showPosterDia"
custom-style="width:100vw;height:100vh;background:transparent;"
:close-on-click-overlay="true"
@close="closeDia"
>
<div class="posterWrap" @click.stop="closeDia">
<div class="canvas-wrap" >
<canvas canvas-id="posterCanvas" class="myCanvas"></canvas>
<div v-if="!posterStatus" class="masker">加载中...</div>
</div>
<div class="saveBtn" @click.stop="getImg">点击保存海报</div>
</div>
</van-popup>
</div>
</template>
<script type="text/ecmascript-6">
import live from "@/api/live";
import { DFSImg } from '../../utils/common.js'
export default {
props: ["showPosterDia", "posterInfo","userInfo","infoIsComplete"],
name: "",
data() {
return {
InfoSync: {},
liveId: 0,
params: {},
// 海报中信息
info: {
posterCoverUrl: "",
livedStatus: 1, //直播状态 0未开播 1一开播
livedTime: "",
livedTitle: "",
nickName: "",
avatarUrl: "",
miniCode: ""
},
posterStatus : false,
tempFilePath : '',
};
},
components: {},
computed: {},
onLoad(options) {
this.posterStatus = false;
if(options.params){
let params = JSON.parse(options.params);
this.liveId = params.liveId;
}else if(options.scene){
var scene = decodeURIComponent(options.scene); //参数二维码传递过来的参数
console.log(scene)
let sceneInfo = scene.split(',')
console.log('sceneInfo',sceneInfo)
this.liveId = sceneInfo[0].split('=')[1]
}
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() {},
mounted() {},
methods: {
closeDia() {
this.$emit("closePosterDia");
},
init() {
wx.hideLoading();
// wx.showLoading({
// title: "生成中..."
// });
this.$set(this.info,'avatarUrl',this.userInfo.headPortraitUrl)
// this.info.avatarUrl = this.userInfo.headPortraitUrl
let _this = this;
if(this.infoIsComplete){
wx.getUserInfo({
//获取微信用户信息
success: function(res) {
(_this.info.nickName = res.userInfo.nickName),
_this.initPoster(_this.info);
},
fail: function(res) {
_this.initPoster(_this.info);
}
});
}
},
initPoster(info) {
console.log(info, "---------------------71");
const InfoSync = wx.getSystemInfoSync();
this.InfoSync = InfoSync;
let bili = InfoSync.windowWidth / 375 * 1;
// let bili = 1;
const ctx = wx.createCanvasContext("posterCanvas");
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)
console.log('0000000000000000000000封面')
ctx.drawImage(path, 0, 0, 310 * bili, 370 * bili);
ctx.save();
// 微信昵称
ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(15);
ctx.fillText(info.nickName, 70 * bili, 410 * bili);
ctx.setFillStyle("#FDC330");
ctx.fillRect(0, 330 * bili, 310 * bili, 40 * bili);
if(this.info.livedStatus == 0){
console.log('直播时间',this.info.livedTime)
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, 184 * bili , 355 * 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);
let liveText = '';
if(this.info.livedStatus == 0){
liveText = '直播预告'
}else if(this.info.livedStatus == 1 || this.info.livedStatus == 3){
liveText = '直播中'
}else{
liveText = '直播结束'
}
console.log('直播状态',liveText)
ctx.fillText(liveText, 48 * bili , 355 * bili);
ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(14);
ctx.fillText("邀你一起看直播", 10 * bili, 450 * bili);
// 直播名
ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(18);
ctx.fillText(info.livedTitle, 10 * bili, 500 * bili);
//圆形头像框
ctx.setStrokeStyle("rgba(0,0,0,0)");
ctx.arc(36 * bili, 400 * bili, 25 * bili, 0, 2 * Math.PI);
ctx.fill();
this.saveThe(info.qrCode, path => {
ctx.drawImage(path, 200 * bili, 390 * bili, 100 * bili, 100 * bili);
ctx.save();
//头像
ctx.clip();
this.saveThe(info.avatarUrl,path => {
ctx.drawImage(path, 10 * bili, 370 * bili, 54 * bili, 54 * bili);
ctx.save();
ctx.stroke();
// ctx.draw(false,this.drawImageHanlder());
ctx.draw();
this.posterStatus = true;
console.log("--------海报生成成功");
})
});
})
})
} else{
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);
let liveText = '';
if(this.info.livedStatus == 0){
liveText = '直播预告'
}else if(this.info.livedStatus == 1 || this.info.livedStatus == 3){
liveText = '直播中'
}else{
liveText = '直播结束'
}
console.log('直播状态',liveText)
ctx.fillText(liveText, 48 * bili , 355 * bili);
ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(14);
ctx.fillText("邀你一起看直播", 10 * bili, 450 * bili);
// 直播名
ctx.setTextAlign("left");
ctx.setFillStyle("#3F2F00");
ctx.setFontSize(18);
ctx.fillText(info.livedTitle, 10 * bili, 500 * bili);
//圆形头像框
ctx.setStrokeStyle("rgba(0,0,0,0)");
ctx.arc(36 * bili, 400 * bili, 25 * bili, 0, 2 * Math.PI);
ctx.fill();
this.saveThe(info.qrCode, path => {
ctx.drawImage(path, 200 * bili, 390 * bili, 100 * bili, 100 * bili);
ctx.save();
//头像
ctx.clip();
this.saveThe(info.avatarUrl,path => {
ctx.drawImage(path, 10 * bili, 370 * bili, 54 * bili, 54 * bili);
ctx.save();
ctx.stroke();
// ctx.draw(false,this.drawImageHanlder());
ctx.draw();
this.posterStatus = true;
console.log("--------海报生成成功");
})
});
})
}
});
},
// 小程序需要将图片下载下来，然后才能绘制到画布上
saveThe(url, callback) {
wx.getImageInfo({
src: url, //服务器返回的图片地址
success: res => {
callback(res.path);
},
fail: function(res) {
console.log('saveTheFail ___________________________',url + '------url-----',res)
}
});
},
getImg() {
if(this.posterStatus){
let query = {
liveBroadcastId: this.liveId,
shareType: "HB"
};
live.addShareRecord(query).then();
this.handleSave();
}
},
// 点击保存时，将画布生成海报
handleSave() {
var that = this;
wx.showLoading({
title: "正在保存...",
mask: true
});
wx.getSetting({
success(res) {
if (res.authSetting["scope.writePhotosAlbum"]) {
that.saveImg();
} else if (res.authSetting["scope.writePhotosAlbum"] === undefined) {
wx.authorize({
scope: "scope.writePhotosAlbum",
success() {
that.saveImg();
},
fail() {
wx.hideLoading();
wx.showToast({
title: "您没有授权，无法保存到相册",
icon: "none"
});
}
});
} else {
wx.openSetting({
success(res) {
if (res.authSetting["scope.writePhotosAlbum"]) {
that.saveImg();
} else {
wx.showToast({
title: "您没有授权，无法保存到相册",
icon: "none"
});
}
}
});
}
},
fail: err => {
wx.hideLoading();
wx.showToast({
title: "出现了错误，请稍后再试11111",
icon: "none"
});
}
});
},
saveImg() {
let _this = this;
// 按照设备比例去计算图片和画布尺寸
let bili = this.InfoSync.windowWidth / 375 * 1;
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 310 * bili,
height: 520 * bili,
destWidth: 310 * bili * this.InfoSync.pixelRatio,
destHeight: 520 * bili * this.InfoSync.pixelRatio,
fileType: "png",
quality: 1,
canvasId: "posterCanvas",
success: function(res) {
wx.hideLoading();
var tempFilePath = res.tempFilePath;
// 需要权限
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
success(res) {
_this.$emit("closePosterDia");
wx.showModal({
content: "图片已保存到相册，赶紧晒一下吧~",
showCancel: false,
confirmText: "好的",
confirmColor: "#333"
});
},
fail: function(res) {
wx.hideLoading();
wx.showToast({
title: "没有相册权限",
icon: "none",
duration: 2000
});
}
});
},
fail: err => {
console.log(err,'保存相册出错');
wx.hideLoading();
wx.showToast({
title: "出现了错误，请稍后再试2222",
icon: "none"
});
}
});
},
// 发送给朋友，以图片的方式，先生成临时图片地址，然后调用微信api显示转发
handleShowImg() {
let bili = this.InfoSync.windowWidth / 375 * 1;
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 310 * bili,
height: 520 * bili,
destWidth: 310 * bili * this.InfoSync.pixelRatio,
destHeight: 520 * bili * this.InfoSync.pixelRatio,
fileType: "png",
quality: 1,
canvasId: "posterCanvas",
success: function(res) {
wx.hideLoading();
wx.previewImage({
urls: [res.tempFilePath],
current: res.tempFilePath
});
},
fail: err => {
wx.hideLoading();
wx.showToast({
title: "出现了错误，请稍后再试",
icon: "none"
});
}
});
}
}
};
</script>
<style lang="scss" scoped>
.livedposterDia {
.posterWrap {
min-height: calc(100vh - 80px);
padding-top: 80px;
// background-color: #f1f1f1;
.canvas-wrap{
width: 310px;
height: 520px;
margin: 0 auto;
background: #fff;
position: relative;
overflow: hidden;
border-radius: 5px;
.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;
background: #f82f31;
width: 50vw;
height: 40px;
border-radius: 40px;
text-align: center;
line-height: 40px;
color: #fff;
}
}
}
</style>
src/components/livedModel/notStarted.vue deleted 100644 → 0
<template>
<div class="notStarted">
<div class="title">{{info.title}}</div>
<p class="tit">直播倒计时</p>
<div class="time">
<timeDown v-if="startTime" :startTime="startTime"></timeDown>
</div>
<div class="remindBtn" @click="isLogin">开播提醒</div>
</div>
</template>
<script type="text/ecmascript-6">
import live from "@/api/live";
import timeDown from "@/components/livedModel/timeDown";
export default {
props: ["info"],
name: "",
data() {
return {
liveId: 0,
startTime: null
};
},
components: {
timeDown
},
computed: {},
created() {},
onLoad(options) {
if(options.params){
let params = JSON.parse(options.params);
this.liveId = params.liveId;
}else if(options.scene){
var scene = decodeURIComponent(options.scene); //参数二维码传递过来的参数
console.log(scene)
let sceneInfo = scene.split(',')
console.log('sceneInfo',sceneInfo)
this.liveId = sceneInfo[0].split('=')[1]
}
this.startTime = this.info.startTime;
console.log(this.info)
},
mounted() {},
methods: {
// 开播提醒
remind() {
let _this = this;
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')
}
})
}
}
})
}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: '订阅失败，是否授权或者网络错误',
icon: "none"
});
console.log('开播失败')
}
} catch (err) {
wx.showToast({
title: '订阅失败，是否授权或者网络错误',
icon: "none"
});
console.error("subscribeMessage-err", err);
}
}
}
})
},
// 是否登录
isLogin() {
let _this = this;
wx.getStorage({
key: "sessionid",
success(res) {
_this.remind();
},
fail(res) {
console.log("未登录------150");
// 跳转登录页
let backUrl = "/lived/main";
let query = {
liveId: _this.liveId,
fromType: "mini"
};
let url = `/pages/login/main?back=${backUrl}&params=${JSON.stringify(
query
)}`;
wx.navigateTo({
url: url
});
}
});
}
}
};
</script>
<style lang="scss" scoped>
.notStarted {
position: absolute;
width: 70vw;
top: 35%;
left: 15vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 2;
.title{
font-size: 18px;
font-weight: bold;
color: #fff;
margin-bottom: 20px;
}
.tit {
font-size: 16px;
color: #fff;
}
.time {
margin-top: 16px;
}
.remindBtn {
margin-top: 16px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 6px;
color: #fff;
font-size: 18px;
padding: 14px 40px;
background: linear-gradient(to right, #ff877d, #fb566d);
}
}
</style>
\ No newline at end of file
src/components/livedModel/timeDown.vue deleted 100644 → 0
<template>
<!-- 倒计时组件 -->
<div class="days">
<template v-if="days-0>0">
<span class="item">{{days}}</span>
<span class="label">天</span>
</template>
<template v-if="hours-0>0">
<span class="item">{{hours}}</span>
<span class="label">时</span>
</template>
<span class="item">{{minute}}</span>
<span class="label">分</span>
</div>
</template>
<script type="text/ecmascript-6">
let d = null;
// 倒计时方法
if (typeof xcsoft == "undefined") var xcsoft = new function() {}();
xcsoft.countdown = function(a, b, c) {
d = new Object();
var e = 0;
if (typeof a == "object") {
var f = parseInt(new Date().getTime() / 1000);
var g = a.startTime ? parseInt(a.startTime) : 0;
g = g == 0 ? f : g;
var h = a.endTime;
var x = g - f;
d.decimal = parseInt(a.msec ? a.msec : 0);
} else {
var f = 0;
var x = 0;
d.decimal = 0;
var h = a;
var i = h.toString();
if (i.indexOf(".") > 0) {
d.decimal = i.split(".")[1];
if (d.decimal > 3) {
d.decimal = 3;
}
}
}
d.time = h;
d.finish = false;
if (isNaN(h)) {
var j = h.substring(0, 19);
j = j.replace(/-/g, "/");
d.time = new Date(j).getTime() / 1000;
}
var k = d.decimal == 0 ? 100 : 100;
d.day = 0;
d.hour = 0;
d.minute = 0;
d.second = 0;
d.t = setInterval(function() {
e = new Date().getTime();
f = parseInt(e / 1000 + x);
var l = d.time - f;
if (l <= 0) {
e = 0;
l = 0;
}
if (l >= 0) {
d = xcsoft.getTimeObject(d, l);
}
if (d.decimal == 1) {
d.msecZero = d.msec = parseInt(10 - (e % 1000) / 100);
if (d.msec == 10 || l == 0) {
d.msecZero = d.msec = 0;
}
} else if (d.decimal == 2) {
d.msecZero = d.msec = parseInt(100 - (e % 1000) / 10);
if (d.msec < 10) {
d.msecZero = "0" + d.msec;
} else if (d.msec == 100 || l == 0) {
d.msec = 0;
d.msecZero = "0" + d.msec;
}
} else {
d.msecZero = d.msec = parseInt(1000 - e % 1000);
if (d.msec < 10) {
d.msecZero = "00" + d.msec;
} else if (d.msec < 100) {
d.msecZero = "0" + d.msec;
} else if (d.msec == 1000 || l == 0) {
d.msec = 0;
d.msecZero = "00" + d.msec;
}
}
if (b) {
b(d);
}
if (l <= 0 || d.stop == true) {
clearInterval(d.t);
d.finish = true;
if (c) c(d);
}
}, k);
};
xcsoft.getTimeObject = function(a, l) {
var b = 60;
var c = b * b;
var d = 24 * c;
a.days = Math.floor(l / d);
a.year = Math.floor(a.days / 365);
a.day = Math.floor(a.days % 365);
a.hour = Math.floor((l % d) / c);
a.minute = Math.floor((l - (a.days * d + a.hour * c)) / b);
a.second = Math.floor(l % b);
a.dayZero = a.day < 10 ? "0" + a.day : a.day;
a.daysZero = a.days < 10 ? "0" + a.days : a.days;
a.hourZero = a.hour < 10 ? "0" + a.hour : a.hour;
a.minuteZero = a.minute < 10 ? "0" + a.minute : a.minute;
a.secondZero = a.second < 10 ? "0" + a.second : a.second;
return a;
};
export default {
props: ["startTime"],
name: "",
data() {
return {
days: 0,
hours: 0,
minute: 0,
second: 0
};
},
onLoad() {
let _this = this;
console.log(this.startTime, "--------129");
xcsoft.countdown(
this.startTime,
function(time) {
// console.log(time.day,time.hourZero, time.minuteZero, time.secondZero,'--------39')
_this.days = time.dayZero;
_this.hours = time.hourZero;
_this.minute = time.minuteZero;
_this.second = time.secondZero;
},
function(time) {
//倒计时结束后的操作
}
);
},
onUnload() {
// 清除未开播倒计时
d.stop = true;
},
components: {},
computed: {},
mounted() {},
methods: {}
};
</script>
<style lang="scss" scoped>
.days{
font-size: 28px;
font-weight: bold;
color: #fff;
span{
padding: 0 2px;
}
}
</style>
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