Files
yshopb2c-uniapp/components/ShoproLiveCard.vue
xuwenbo 3a847ac185 升级小程序直播组件版本1.1.9
首页直播间列表点击全部进入一个直播bug
活动商品拼sku显示价格与库存为共享库存的bug
更改直播间id ->roomId
直播中开放轮询直播状态接口
直播回放不生效的问题,因为直播组件版本太低
2020-09-10 22:51:10 +08:00

306 lines
6.8 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="sp-live-card" :style="{ width: wh + 'rpx' }">
<view class="live-content" @tap="goRoom" :style="{ width: wh + 'rpx' }">
<image class="item-cover" :src="detail.shareImge" mode="aspectFill"></image>
<view class="item-status">
<image class="status-img" :src="liveStatus[detail.liveStatus].img" mode=""></image>
<text class="status-text">{{ liveStatus[detail.liveStatus].title }}</text>
</view>
<view class="item-title" :style="{ width: wh + 'rpx' }">{{ detail.name }}</view>
<!-- <image v-if="detail.liveStatus == 101" class="like-img" src="http://shopro.7wpp.com/imgs/live/zan.gif" mode=""></image> -->
</view>
<view class="live-bottom" :style="{ width: wh + 'rpx' }">
<view class="live-info">
<view class="info-box">
<!-- <image class="info-avatar" :src="detail.anchor_img" mode=""></image> -->
<view class="info-name">{{ detail.anchorName }}</view>
</view>
<!-- <text class="views">15W观看</text> -->
</view>
<slot name="liveGoods">
<view class="live-goods" v-if="detail.product.length">
<view class="live-goods__item" v-for="(goods, index) in detail.product" :key="goods.goodsId" v-if="index < 3">
<image class="live-goods__img" :src="goods.coverImgeUrl" mode=""></image>
<view class="live-goods__price" v-if="index < 2">{{ goods.price }}</view>
<view class="live-goods__mark" v-else>
<text>{{ detail.product.length }}+</text>
</view>
</view>
</view>
</slot>
</view>
</view>
</template>
<script>
let HAS_LIVE = false
// #ifdef MP-WEIXIN
HAS_LIVE = true
let livePlayer = null;
if (HAS_LIVE) {
livePlayer = requirePlugin('live-player-plugin');
}
// #endif
let timer = null;
export default {
name: 'shoproLiveCard',
components: {},
data() {
return {
liveStatus: {
'101': {
img: 'http://shopro.7wpp.com/imgs/live/live.png',
title: '直播中'
},
'102': {
img: 'http://shopro.7wpp.com/imgs/live/prevue.png',
title: '未开始'
},
'103': {
img: 'http://shopro.7wpp.com/imgs/live/playback.png',
title: '已结束'
},
'104': {
img: 'http://shopro.7wpp.com/imgs/live/104.png',
title: '禁播'
},
'105': {
img: 'http://shopro.7wpp.com/imgs/live/105.png',
title: '暂停中'
},
'106': {
img: 'http://shopro.7wpp.com/imgs/live/106.png',
title: '异常'
},
'107': {
img: 'http://shopro.7wpp.com/imgs/live/past.png',
title: '已过期'
}
}
};
},
props: {
detail: {
type: Object,
default: null
},
wh: {
type: Number,
default: 345
}
},
computed: {},
created() {
this.getLiveStatus();
},
mounted() {
let that = this;
timer = setInterval(() => {
that.getLiveStatus();
}, 60000);
},
beforeDestroy() {
timer = null;
},
methods: {
goRoom() {
let that = this;
wx.navigateTo({
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${that.detail.roomId}`
});
},
// 轮询liveStatus
getLiveStatus() {
if (HAS_LIVE) {
let that = this;
let date = '';
if (that.detail.liveStatus == 102) {
// date = that.$tools.dateFormat('mm-dd HH:MM', new Date(that.detail.starttime * 1000)).replace('-',
// '/');
that.liveStatus['102'].title = '预告 ' ;
}
livePlayer
.getLiveStatus({
room_id: that.detail.roomId
})
.then(res => {
// 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常107已过期
that.detail.liveStatus = res.liveStatus;
})
.catch(err => {
console.log('get live status', err);
});
}
}
}
};
</script>
<style lang="scss">
.sp-live-card {
width: 344rpx;
box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
border-radius: 20rpx;
height: 100%;
overflow: auto;
margin-bottom: 20rpx;
}
.live-content {
position: relative;
width: 344rpx;
height: 344rpx;
overflow: hidden;
.item-cover {
background-color: #eee;
width: 100%;
height: 100%;
border-radius: 20rpx 20rpx 0 0;
}
.item-status {
position: absolute;
top: 20rpx;
left: 10rpx;
height: 40rpx;
background: rgba(0, 0, 0, 0.4);
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
.status-img {
width: 40rpx;
height: 40rpx;
}
.status-text {
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
padding: 0 10rpx;
}
}
.item-title {
width: 345rpx;
position: absolute;
bottom: 0;
line-height: 60rpx;
padding: 0 20rpx;
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
background: linear-gradient(transparent, rgba(#000, 0.5));
padding-right: 60rpx;
}
.like-img {
position: absolute;
bottom: 20rpx;
right: 10rpx;
width: 60rpx;
height: 130rpx;
}
}
.live-bottom {
background-color: #fff;
padding: 20rpx;
width: 345rpx;
.live-info {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
.info-box {
display: flex;
align-items: center;
}
.info-avatar {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
margin-right: 10rpx;
background: #eee;
}
.info-name {
width: 150rpx;
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: rgba(51, 51, 51, 1);
}
.views {
font-size: 20rpx;
font-family: PingFang SC;
font-weight: 400;
color: rgba(153, 153, 153, 1);
}
}
.live-goods {
display: flex;
align-items: center;
margin-top: 20rpx;
&__item {
position: relative;
width: 96rpx;
height: 96rpx;
border: 1rpx solid rgba(238, 238, 238, 1);
border-radius: 10rpx;
overflow: hidden;
margin-right: 8rpx;
&:nth-child(3n) {
margin-right: 0;
}
}
&__img {
background: #eee;
width: 100%;
height: 100%;
}
&__price {
position: absolute;
bottom: 0;
line-height: 40rpx;
width: 100%;
background: linear-gradient(transparent, rgba(#000, 0.5));
font-size: 20rpx;
color: #fff;
}
&__mark {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
background: rgba(#000, 0.3);
font-size: 24rpx;
font-family: PingFang SC;
font-weight: 500;
color: rgba(255, 255, 255, 1);
}
}
}
</style>