Skip to content

M
mayi-mp-shop
Commit b30110e8 by 李嘉林
Options

直播结束

parent 74719c90
Showing with 131 additions and 102 deletions
src/api/live.js
......@@ -39,10 +39,14 @@ export default {
},
// 直播间点赞接口
addLiveLikeByUser(options) {
return requestPOST(`${process.env.OLSHOP_URL}liveBroadcastInfo/addLiveLikeByUser`, options);
return requestPOST(`${process.env.OLSHOP_URL}/liveBroadcastInfo/addLiveLikeByUser`, options);
},
// 直播中商品列表
getListByLiveBroadcastId(options) {
return requestGET(`${process.env.OLSHOP_URL}liveBroadcastGoods/getListByLiveBroadcastId?id=${Number(options)}`);
return requestGET(`${process.env.OLSHOP_URL}/liveBroadcastGoods/getListByLiveBroadcastId?id=${Number(options)}`);
},
// 单次直播数据统计接口
getLiveStatisticsById(options) {
return requestPOST(`${process.env.OLSHOP_URL}/liveBroadcastInfo/getLiveStatisticsById`,options);
},
};
\ No newline at end of file
src/components/livedModel/livedGoodsDia.vue
......@@ -183,10 +183,10 @@ export default {
fromLived: 1,
liveId: this.liveId
};
this.backPath = `/goods/${val.productId}`;
let backPath = `/goods/${val.productId}`;
wx.reLaunch({
url: `../index/main?from=livedToGoodsInfo&backpath=${
this.backPath
backPath
}&params=${JSON.stringify(query)}`
});
}
......
src/components/livedModel/livedIsEnded.vue
......@@ -9,15 +9,15 @@
</p>
<div class="data">
<div>
<p>333</p>
<p>{{endInfo.watchNum}}</p>
<p>观看</p>
</div>
<div>
<p>333</p>
<p>{{endInfo.guestBookNum}}</p>
<p>评论</p>
</div>
<div>
<p>333</p>
<p>{{endInfo.likeNum}}</p>
<p>赞</p>
</div>
</div>
......@@ -29,15 +29,15 @@
</div>
<div class="list">
<div class="item" v-for="(item,index) in list" :key="index">
<div class="img">
<img :src="item.img" alt />
<div class="img" @click="toGoodsInfo(item)">
<img :src="item.productImgUrl" alt />
</div>
<div class="info">
<p class="name line-clamp2">{{item.name}}</p>
<p class="name line-clamp2">{{item.productName}}</p>
<div class="price">
<p>
<span>￥</span>
<span>{{item.price}}</span>
<span>{{item.minPrice}}</span>
</p>
<div class="icon">
<van-icon name="shopping-cart" />
......@@ -53,48 +53,42 @@
<script type="text/ecmascript-6">
export default {
props:["updateGoods","goodsList"],
props: ["updateGoods", "goodsList", "endInfo"],
name: "",
data() {
return {
list: [
{
name: "产品名称产品名称产品名称产品名称产品名称",
img:
"//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
price: 123
},
{
name: "产品名称产品名称产品名称产品名称产品名称",
img:
"//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
price: 123
},
{
name: "产品名称产品名称产品名称产品名称产品名称",
img:
"//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
price: 123
},
{
name: "产品名称产品名称产品名称产品名称产品名称",
img:
"//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
price: 123
}
]
list: [],
liveId: 0
};
},
watch:{
updateGoods(){
this.list=this.goodsList;
watch: {
updateGoods() {
this.list = this.goodsList;
}
},
components: {},
computed: {},
onLoad(options) {
let params = JSON.parse(options.params);
this.liveId = params.liveId;
},
created() {},
mounted() {},
methods: {}
methods: {
// 到商品详情
toGoodsInfo(val) {
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>
......@@ -159,7 +153,7 @@ export default {
}
.tit {
font-size: 16px;
padding: 0 4px;
padding: 0 4px 6px 0;
}
.list {
max-height: 50vh;
......@@ -188,20 +182,20 @@ export default {
display: flex;
flex-direction: column;
justify-content: space-between;
.name{
.name {
text-align: left;
}
.price{
.price {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 18px;
span{
color: #FF0000;
span {
color: #ff0000;
}
.icon{
.icon {
font-size: 22px;
color: #FF8181;
color: #ff8181;
}
}
}
......
src/components/livedModel/livedSelectionSpe.vue
......@@ -24,7 +24,7 @@
<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}}</!--> -->
<!-- <del style="color:#666;">￥{{product_goods_info.originalPrice}}</!-->
</div>
<div
v-else-if="product_goods_info.discountPrice-0<product_goods_info.goodsSuggestedRetailPrice-0"
......
src/pages/lived/index.vue
......@@ -28,7 +28,12 @@
<!-- 未开始展示 -->
<notStarted v-if="liveNoticeInfo.liveBroadcastState==0" :info="liveNoticeInfo"></notStarted>
<!-- 结束展示 -->
<livedIsEnded v-if="liveNoticeInfo.liveBroadcastState==2" :updateGoods="updateGoods" :goodsList="goodsList"></livedIsEnded>
<livedIsEnded
v-if="liveNoticeInfo.liveBroadcastState==2&&endInfo"
:updateGoods="updateGoods"
:endInfo="endInfo"
:goodsList="goodsList"
></livedIsEnded>
<!-- 控件层 -->
<livedControls
v-if="liveNoticeInfo&&liveNoticeInfo.liveBroadcastState<2"
......@@ -46,7 +51,7 @@
<live-player
v-if="liveNoticeInfo.liveBroadcastState==1&&liveNoticeInfo.boStreamRTMP"
class="livePlayer"
:src="'rtmp://live.mayi888.com/xgy/127?auth_key=1584633600000-0-0-ac39474385b37a7adac070d15b0bb5de'"
:src="liveNoticeInfo.boStreamRTMP"
mode="RTC"
autoplay
@error="error"
......@@ -76,14 +81,17 @@ export default {
liveNoticeInfo: {}, //详情
entryNoticeText: "", //用户通知
guestBookList: [], // 定时查评论
goodsList:[],//商品列表
goodsList: [], //商品列表
updateVal: 0, //子组件监听此数据进行数据赋值
updateGoods:0,//商品相关组件监听
updateGoods: 0, //商品相关组件监听
likeInfo: {}, //点赞
isVideo: false, //是否有直播或回放链接
liveTime: null, //定时器
isWifi: true, //提示网络环境
infoTiming: null //定时器
infoTiming: null, //全局定时器
goodTiming: null, //商品定时器
endInfo: {}, //直播结束详情
firstComing: true // 首次进入
};
},
components: {
......@@ -115,21 +123,22 @@ export default {
this.shopName = params.shopName;
this.shopLogo = DFSImg(params.shopLogo, 40, 40);
this.init();
setTimeout(() => {
this.infoTiming = setInterval(() => {
this.timingGetInfo();
this.getGoodsList();
}, 5000);
}, 2000);
this.infoTiming = setInterval(() => {
this.timingGetInfo();
}, 5000);
this.userEntry("IN");
},
onUnload() {
this.userEntry("OUT");
this.liveNoticeInfo.liveBroadcastState = -1;
this.liveNoticeInfo = {};
this.firstComing=true;
if (this.infoTiming) {
clearInterval(this.infoTiming);
}
if (this.goodTiming) {
clearInterval(this.goodTiming);
}
},
mounted() {},
methods: {
......@@ -143,16 +152,22 @@ export default {
this.liveNoticeInfo.coverUrl = this.liveNoticeInfo.coverUrl
? DFSImg(this.liveNoticeInfo.coverUrl)
: "";
if(this.liveNoticeInfo.liveBroadcastState > 1 && this.infoTiming) {
clearInterval(this.infoTiming);
} else {
// 调用定时接口
this.timingGetInfo();
}
this.getGoodsList();
if(this.liveNoticeInfo.liveBroadcastState >=2){
if (this.liveNoticeInfo.liveBroadcastState == 2) {
// 调直播结束
this.endLived();
} else {
this.timingGetInfo();
}
if (this.liveNoticeInfo.liveBroadcastState != 2 && !this.goodTiming) {
this.goodTiming = setInterval(() => {
this.getGoodsList();
}, 5000);
} else if (
this.liveNoticeInfo.liveBroadcastState == 2 &&
this.goodTiming
) {
clearInterval(this.goodTiming);
}
}
});
......@@ -187,38 +202,45 @@ export default {
) {
// 未开始且接口也未开始不作操作
} else if (
this.liveNoticeInfo.liveBroadcastState == 0 &&
resData.liveState == "IN_LIVE"
) {
// 未开始且接口直播中
this.init();
} else if (
this.liveNoticeInfo.liveBroadcastState == 1 &&
resData.liveState == "IN_LIVE"
) {
// 直播中且接口直播中---主要操作
// 数据初始化
this.entryNoticeText = "";
this.liveNoticeInfo.watchNum = resData.watchNum;//观看人数
this.liveNoticeInfo.watchNum = resData.watchNum; //观看人数
if (resData.entryNoticeList.length > 0) {
if (resData.entryNoticeList.length == 1) {
this.entryNoticeText = `${resData.entryNoticeList[0].userName}`;//用户进入
this.entryNoticeText = `${resData.entryNoticeList[0].userName}`; //用户进入
} else {
this.entryNoticeText = `${
resData.entryNoticeList[0].userName
}等${resData.entryNoticeList.length}人`;//用户进入
}等${resData.entryNoticeList.length}人`; //用户进入
}
}
} else if (
this.liveNoticeInfo.liveBroadcastState == 1 &&
resData.liveState == "END_LIVE"
this.liveNoticeInfo.liveBroadcastState == 0 &&
resData.liveState == "IN_LIVE"
) {
// 直播中且接口已结束
console.log("未开始----直播中")
// 未开始且接口直播中/直播中且接口已结束
this.init();
} else if (
(this.liveNoticeInfo.liveBroadcastState == 2 &&
resData.liveState == "END_LIVE") ||
(this.liveNoticeInfo.liveBroadcastState == 1 &&
resData.liveState == "END_LIVE")
) {
console.log(this.liveNoticeInfo.liveBroadcastState,resData.liveState,this.firstComing,"直播中----结束","结束----结束")
//直播结束且接口已结束
if (this.firstComing) {
this.firstComing = false;
this.init();
}
}
this.guestBookList=resData.guestBookList;//评论列表
this.likeInfo=resData.likeInfo;//点赞信息
this.updateVal = Math.random();//监听使用数据
this.guestBookList = resData.guestBookList; //评论列表
this.likeInfo = resData.likeInfo; //点赞信息
this.updateVal = Math.random(); //监听使用数据
} else {
if (this.infoTiming) {
clearInterval(this.infoTiming);
......@@ -227,28 +249,36 @@ export default {
});
},
// 获取商品列表
getGoodsList(){
let id=this.liveId;
live.getListByLiveBroadcastId(id).then(res=>{
if(res.data.code==200){
this.goodsList=[];
let arr=[];
if(res.data.data.length>0){
this.goodsList=res.data.data.forEach((item,index)=>{
if(item.productImgUrl){
item.productImgUrl=DFSImg(item.productImgUrl);
getGoodsList() {
let id = this.liveId;
live.getListByLiveBroadcastId(id).then(res => {
if (res.data.code == 200) {
this.goodsList = [];
let arr = [];
if (res.data.data.length > 0) {
this.goodsList = res.data.data.forEach((item, index) => {
if (item.productImgUrl) {
item.productImgUrl = DFSImg(item.productImgUrl);
item.minPrice = Number(item.minPrice);
}
arr.push(item);
})
this.goodsList=arr;
});
this.goodsList = arr;
this.updateGoods = Math.random();
}
}
})
});
},
// 直播结束数据
endLived(){
endLived() {
let query = {
id: Number(this.liveId)
};
live.getLiveStatisticsById(query).then(res => {
if (res.data.code == 200) {
this.endInfo = res.data.data;
}
});
},
userEntry(type) {
let query = {
......@@ -268,11 +298,11 @@ export default {
}
});
},
error(res){
console.log(res,'------------------237')
error(res) {
console.log(res, "------------------237");
},
changes(res){
console.log(res,'---------------241')
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