Skip to content

M
mayi-mp-shop
Commit 3079d345 by 李嘉林
Options

讲解对接

parent 310d5a9a
Showing with 169 additions and 83 deletions
src/api/live.js
......@@ -41,4 +41,8 @@ export default {
addLiveLikeByUser(options) {
return requestPOST(`${process.env.OLSHOP_URL}liveBroadcastInfo/addLiveLikeByUser`, options);
},
// 直播中商品列表
getListByLiveBroadcastId(options) {
return requestGET(`${process.env.OLSHOP_URL}liveBroadcastGoods/getListByLiveBroadcastId?id=${Number(options)}`);
},
};
\ No newline at end of file
src/components/livedModel/livedControls.vue
......@@ -10,12 +10,14 @@
<!-- 评论层 -->
<livedIsMsg v-if="info.liveBroadcastState==1&&guestBookList" :guestBookList="guestBookList" :updateVal="updateVal"></livedIsMsg>
<!-- 带货商品层 -->
<livedExplainingCommodities v-if="info.liveBroadcastState==1"></livedExplainingCommodities>
<livedExplainingCommodities v-if="info.liveBroadcastState==1&&list" :updateGoods="updateGoods" :list="list"></livedExplainingCommodities>
<!-- 商品列表弹层 -->
<livedGoodsDia
:showDia="showDia"
:info="info"
v-if="info.goodsRespDTOs&&showDia"
:updateVal="updateVal"
:list="list"
:updateGoods="updateGoods"
v-if="list&&showDia"
@changeStatus="changeStatus"
></livedGoodsDia>
<!-- 底部控制层 -->
......@@ -23,7 +25,7 @@
<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="info.goodsRespDTOs.length>0">{{info.goodsRespDTOs.length}}</p>
<p class="goodsNum" v-if="list.length>0">{{list.length}}</p>
</div>
<div class="iptCopy" @click="isLogin">跟主播说点什么...</div>
<div class="shareIcon">
......@@ -33,7 +35,7 @@
<van-icon name="like" class="like" />
<p class="heardNum" v-if="likeNum>0">{{likeNumCopy}}</p>
<div class="box">
<div class="img" v-for="(item,index) in imgList" :key="index">
<div class="img" :class="{'imgAni':imgAni}" v-for="(item,index) in imgList" :key="index">
<img :src="item.img" alt />
</div>
</div>
......@@ -63,7 +65,7 @@ import livedExplainingCommodities from "@/components/livedModel/livedExplainingC
import livedGoodsDia from "@/components/livedModel/livedGoodsDia";
import live from "@/api/live";
export default {
props: ["info","entryNoticeText","updateVal","guestBookList","likeInfo"],
props: ["info","entryNoticeText","updateVal","guestBookList","likeInfo","goodsList","updateGoods"],
name: "",
data() {
return {
......@@ -76,12 +78,14 @@ export default {
"//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, //显示商品列表弹窗
isSend: false, //显示评论输入框
sendVal: "", //输入内容
getFocus: false, //获取焦点
imgAni:false,//给点赞元素加动画
};
},
components: {
......@@ -110,7 +114,10 @@ export default {
}else{
this.userComing=false;
}
}
},
updateGoods(){
this.list=this.goodsList;
},
},
created() {},
onLoad(options) {
......@@ -125,6 +132,7 @@ export default {
},
// 点赞
addLike(val) {
this.imgAni=true;
if (this.info.liveBroadcastState < 1) {
this.notAgainLive();
return;
......@@ -213,10 +221,11 @@ export default {
},
// 失焦点
onblur() {
this.imgAni=false;
setTimeout(() => {
this.isSend = false;
this.sendVal = "";
}, 500);
}, 100);
},
// 点击发送留言
toSend() {
......@@ -348,7 +357,6 @@ export default {
margin-left: -20px;
width: 40px;
height: 40px;
animation: moveImg 1.5s linear 0.1s;
opacity: 0;
border-radius: 50%;
overflow: hidden;
......@@ -360,6 +368,9 @@ export default {
height: 40px;
}
}
.imgAni{
animation: moveImg 1.5s linear 0.1s;
}
@keyframes moveImg {
0% {
opacity: 1;
......
src/components/livedModel/livedExplainingCommodities.vue
......@@ -2,15 +2,10 @@
<!-- 讲解商品 -->
<div class="livedExplainingCommodities">
<div class="goods clearfix" v-if="!showFixedGoods">
<div
class="goodsList"
:class="{isEC:item.isEC}"
v-for="(item,index) in goodsList"
:key="index"
>
<div class="goodsList" :class="{isEC:item.upperScreenState==1}" v-for="(item,index) in list" :key="index">
<img :src="item.img" alt />
<p class="num">{{item.id}}</p>
<div class="explain" v-if="item.isEC">讲解中</div>
<div class="explain" v-if="item.upperScreenState==1">讲解中</div>
</div>
</div>
<!-- 左上角展示讲解中商品 -->
......@@ -18,79 +13,132 @@
<div class="goodsList" v-for="(item,index) in fixedGoodsList" :key="index">
<img :src="item.img" alt />
<p class="num">{{item.id}}</p>
<div class="explain" v-if="item.isEC">讲解中</div>
<div class="explain" v-if="item.upperScreenState==1">讲解中</div>
</div>
</div>
</div>
</template>
<script type="text/ecmascript-6">
import { DFSImg } from "@/utils/index";
export default {
props: ["updateGoods", "goodsList"],
name: "",
data() {
return {
showFixedGoods: false, //展示讲解中商品方式 false底部|true左侧固定
goodsList: [
{
isEC: true,
id: 1,
img:
"//img3.imgtn.bdimg.com/it/u=1870796683,3322238076&fm=11&gp=0.jpg"
},
{
isEC: true,
id: 2,
img:
"//img0.imgtn.bdimg.com/it/u=3318255953,3983626805&fm=26&gp=0.jpg"
},
{
isEC: false,
id: 3,
img:
"//img3.imgtn.bdimg.com/it/u=4241660740,3615994401&fm=26&gp=0.jpg"
},
{
isEC: false,
id: 4,
img:
"//img0.imgtn.bdimg.com/it/u=216605226,3652567530&fm=11&gp=0.jpg"
},
{
isEC: false,
id: 5,
img:
"//img0.imgtn.bdimg.com/it/u=216605226,3652567530&fm=11&gp=0.jpg"
}
],
list: [],
// 讲解中浮动商品
fixedGoodsList: []
fixedGoodsList: [],
firstCom:true,//首次进入
};
},
watch: {
updateGoods() {
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){
arr2.push(item);
}
});
this.list=[...arr1,...arr2];
setTimeout(() => {
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;
}
});
this.fixedGoodsList=newArr;
}
}
}
},
components: {},
computed: {},
created() {},
onLoad() {
setTimeout(() => {
let newArr = this.goodsList.filter((item, index) => {
if (item.isEC) {
return item;
}
});
this.fixedGoodsList=newArr?newArr:[];
this.showFixedGoods = true;
}, 5000);
},
onLoad() {},
onUnload() {
this.fixedGoodsList = [];
this.showFixedGoods = false;
},
mounted() {},
methods: {}
methods: {
/**
* 判断此对象是否是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;
}
}
};
</script>
<style lang="scss" scoped>
img{
img {
display: block;
}
.fl {
......@@ -160,7 +208,7 @@ img{
position: fixed;
top: 14vh;
left: 12px;
.goodsList{
.goodsList {
width: 22vw;
height: 22vw;
border: 1px solid #ff3334;
......
src/components/livedModel/livedGoodsDia.vue
......@@ -7,18 +7,18 @@
:close-on-click-overlay="true"
@close="closeDia"
>
<div class="list" v-if="goodsList.length>0">
<div class="item" v-for="(item,index) in goodsList" :key="index">
<div class="list" v-if="list.length>0">
<div class="item" v-for="(item,index) in list" :key="index">
<div class="img" @click="toGoodsInfo(item)">
<img v-if="item.goodsImageUrl" :src="item.goodsImageUrl" alt />
<img v-if="item.productImgUrl" :src="item.productImgUrl" alt />
</div>
<div class="info">
<p class="name line-clamp2">{{item.goodsName}}</p>
<p class="name line-clamp2">{{item.productName}}</p>
<div class="bottom">
<div class="price">
<p>
<span>￥</span>
<span>{{item.goodsPrice}}</span>
<span>{{item.minPrice}}</span>
</p>
<!-- <p class="del">
<span>￥</span>
......@@ -55,15 +55,12 @@ import livedSelectionSpe from "@/components/livedModel/livedSelectionSpe";
import { DFSImg } from "@/utils/index";
import live from "@/api/live";
export default {
props: {
showDia: Boolean,
info: Object
},
props:["showDia","updateGoods","goodsList"],
name: "",
data() {
return {
liveId: 0,
goodsList: [],
list: [],
itemGoods: {}, //选中商品
showSpe: false
};
......@@ -76,12 +73,9 @@ export default {
onLoad(options) {
let params = JSON.parse(options.params);
this.liveId = params.liveId;
this.goodsList = this.info.goodsRespDTOs;
this.goodsList.forEach((item, index) => {
item.goodsPrice = Number(item.goodsPrice);
if (item.goodsImageUrl) {
item.goodsImageUrl = DFSImg(item.goodsImageUrl);
}
this.list = this.goodsList;
this.list.forEach((item, index) => {
item.minPrice = Number(item.minPrice);
});
},
mounted() {},
......
src/pages/lived/index.vue
......@@ -28,7 +28,7 @@
<!-- 未开始展示 -->
<notStarted v-if="liveNoticeInfo.liveBroadcastState==0" :info="liveNoticeInfo"></notStarted>
<!-- 结束展示 -->
<livedIsEnded v-if="liveNoticeInfo.liveBroadcastState==2"></livedIsEnded>
<livedIsEnded v-if="liveNoticeInfo.liveBroadcastState==2" :updateGoods="updateGoods" :goodsList="goodsList"></livedIsEnded>
<!-- 控件层 -->
<livedControls
v-if="liveNoticeInfo&&liveNoticeInfo.liveBroadcastState<2"
......@@ -36,7 +36,9 @@
:entryNoticeText="entryNoticeText"
:guestBookList="guestBookList"
:updateVal="updateVal"
:updateGoods="updateGoods"
:likeInfo="likeInfo"
:goodsList="goodsList"
@toSendMsg="toSendMsg"
></livedControls>
</div>
......@@ -48,6 +50,7 @@
mode="RTC"
autoplay
@error="error"
@statechange="changes"
/>
</div>
</template>
......@@ -73,7 +76,9 @@ export default {
liveNoticeInfo: {}, //详情
entryNoticeText: "", //用户通知
guestBookList: [], // 定时查评论
goodsList:[],//商品列表
updateVal: 0, //子组件监听此数据进行数据赋值
updateGoods:0,//商品相关组件监听
likeInfo: {}, //点赞
isVideo: false, //是否有直播或回放链接
liveTime: null, //定时器
......@@ -113,6 +118,7 @@ export default {
setTimeout(() => {
this.infoTiming = setInterval(() => {
this.timingGetInfo();
this.getGoodsList();
}, 5000);
}, 2000);
this.userEntry("IN");
......@@ -137,12 +143,13 @@ export default {
this.liveNoticeInfo.coverUrl = this.liveNoticeInfo.coverUrl
? DFSImg(this.liveNoticeInfo.coverUrl)
: "";
if (this.liveNoticeInfo.liveBroadcastState > 2 && this.infoTiming) {
if(this.liveNoticeInfo.liveBroadcastState > 1 && this.infoTiming) {
clearInterval(this.infoTiming);
} else {
// 调用定时接口
this.timingGetInfo();
}
this.getGoodsList();
}
});
},
......@@ -199,7 +206,6 @@ export default {
}
}
this.guestBookList=resData.guestBookList;//评论列表
this.likeInfo=resData.likeInfo;
} else if (
this.liveNoticeInfo.liveBroadcastState == 1 &&
resData.liveState == "END_LIVE"
......@@ -207,6 +213,7 @@ export default {
// 直播中且接口已结束
this.init();
}
this.likeInfo=resData.likeInfo;
this.updateVal = Math.random();
} else {
if (this.infoTiming) {
......@@ -215,6 +222,24 @@ export default {
}
});
},
// 获取商品列表
getGoodsList(){
let id=this.liveId;
live.getListByLiveBroadcastId(id).then(res=>{
if(res.data.code==200){
this.goodsList=[];
this.updateGoods = Math.random();
if(res.data.data.length>0){
this.goodsList=res.data.data.forEach((item,index)=>{
if(item.productImgUrl){
item.productImgUrl=DFSImg(item.productImgUrl);
}
})
console.log(this.goodsList,'--------------238')
}
}
})
},
userEntry(type) {
let query = {
liveBroadcastId: Number(this.liveId),
......@@ -235,6 +260,9 @@ export default {
},
error(res){
console.log(res,'------------------237')
},
changes(res){
console.log(res,'---------------241')
}
}
};
......
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