171 lines
3.4 KiB
Vue
171 lines
3.4 KiB
Vue
<template>
|
|
<view class="diy-live" :style="{ background: itemData.style.background }" v-if="itemData.data.length>0">
|
|
<view class="diy-head d-e-c" :style="'background-image: url('+itemData.style.background_image+');'">
|
|
<view class="right" @click="gotoList">
|
|
<text class="white">更多</text>
|
|
<text class="iconfont icon-jiantou mr20" style="font-size: 24rpx;color: #999999;"></text>
|
|
</view>
|
|
</view>
|
|
<view class="list d-s-c f-w">
|
|
<view class="item" v-for="(item, index) in itemData.data" :key="index" @click="gotoDetail(item)">
|
|
<view class="pic pr">
|
|
<text class="state"
|
|
:class="{bg101:item.live_status==101,bg102:item.live_status==102,bg103:item.live_status==103}"
|
|
v-if="item.live_status==101||item.live_status==102||item.live_status==103">
|
|
{{convertStatus(item.live_status)}}
|
|
</text>
|
|
<image :src="item.share_img" mode="aspectFill"></image>
|
|
<!-- <view class="anchor">{{item.anchor_name}}</view> -->
|
|
</view>
|
|
<view class="p20">
|
|
<view class="text-ellipsis-2 f26">{{ item.name }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {};
|
|
},
|
|
props: ['itemData'],
|
|
created() {},
|
|
methods: {
|
|
scroll(e) {},
|
|
|
|
/*状态转换*/
|
|
convertStatus(num) {
|
|
let str = '';
|
|
switch (num) {
|
|
case 101:
|
|
str = '直播中';
|
|
break;
|
|
case 102:
|
|
str = '未开始';
|
|
break;
|
|
case 103:
|
|
str = '已结束';
|
|
break;
|
|
case 104:
|
|
str = '禁播';
|
|
break;
|
|
case 105:
|
|
str = '暂停';
|
|
break;
|
|
case 106:
|
|
str = '异常';
|
|
break;
|
|
case 107:
|
|
str = '已过期';
|
|
break;
|
|
}
|
|
return str;
|
|
},
|
|
|
|
/*跳转列表*/
|
|
gotoList() {
|
|
let url = '/pages/plus/live/wx/list';
|
|
this.gotoPage(url);
|
|
},
|
|
|
|
/*跳转产品详情*/
|
|
gotoDetail(item) {
|
|
let roomId = item.roomid;
|
|
let customParams = {
|
|
path: 'pages/index/index'
|
|
};
|
|
wx.navigateTo({
|
|
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${encodeURIComponent(JSON.stringify(customParams))}`
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.diy-live {
|
|
margin: 20rpx;
|
|
border-radius: 20rpx;
|
|
background: #ffffff;
|
|
// box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.diy-live .diy-head {
|
|
height: 90rpx;
|
|
align-items: center;
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
.diy-live .diy-head .name {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
width: 200rpx;
|
|
}
|
|
|
|
.diy-live .list {
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.diy-live .list .item {
|
|
width: 320rpx;
|
|
margin-right: 30rpx;
|
|
margin-bottom: 30rpx;
|
|
height: 340rpx;
|
|
background-color: #f6f6f6;
|
|
border-radius: 12rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.diy-live .list .item:nth-child(2n + 0) {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.diy-live .list .item .pic {
|
|
width: 246rpx;
|
|
height: 240rpx;
|
|
}
|
|
|
|
.diy-live .list .item .pic .state {
|
|
position: absolute;
|
|
z-index: 80;
|
|
top: 20rpx;
|
|
left: 20rpx;
|
|
padding: 4rpx 8rpx;
|
|
background: red;
|
|
color: #FFFFFF;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.diy-live .list .item .pic .state.bg101 {
|
|
background: red;
|
|
}
|
|
|
|
.diy-live .list .item .pic .state.bg102 {
|
|
background: #ffb100;
|
|
}
|
|
|
|
.diy-live .list .item .pic .state.bg103 {
|
|
background: #333333;
|
|
}
|
|
|
|
.diy-live .list .item image {
|
|
width: 320rpx;
|
|
height: 240rpx;
|
|
border-radius: 12rpx;
|
|
}
|
|
|
|
.diy-live .anchor {
|
|
position: absolute;
|
|
bottom: 12rpx;
|
|
left: 18rpx;
|
|
font-size: 24rpx;
|
|
line-height: 24rpx;
|
|
|
|
}
|
|
</style>
|