<template>
|
<view class="diy-live" v-if="itemData.data.length>0" :style="{ background: itemData.style.background }">
|
<view class="diy-head d-e-c" :style="'background-image: url('+itemData.style.background_image+');'">
|
<view class="right" @click="gotoList">
|
<text @click="gotoPage('/pagesLive/live/index')" 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==104}"
|
v-if="item.live_status==101||item.live_status==102||item.live_status==104">
|
{{convertStatus(item.live_status)}}
|
</text>
|
<image :src="item.share.file_path" mode="aspectFit"></image>
|
<view class="anchor">{{item.anchor_name}}</view>
|
</view>
|
<view class="text-ellipsis f30 live_name tc">{{ item.name }}</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() {
|
this.gotoPage('/pages/plus/live/wx/list');
|
},
|
/*跳转产品详情*/
|
gotoDetail(item) {
|
// 第三方直播
|
this.gotoPage('/pagesLive/live/live?room_id=' + item.room_id + "&sence=join");
|
}
|
}
|
};
|
</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: 246rpx;
|
margin-right: 20rpx;
|
height: 330rpx;
|
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: 246rpx;
|
}
|
.diy-live .list .item .pic .state{
|
position: absolute;
|
z-index: 90;
|
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: 246rpx;
|
height: 246rpx;
|
border-radius: 16rpx;
|
}
|
.diy-live .anchor{
|
position: absolute;
|
bottom: 12rpx;
|
left: 18rpx;
|
font-size: 24rpx;
|
line-height: 24rpx;
|
|
}
|
</style>
|
