173 lines
3.7 KiB
Vue
173 lines
3.7 KiB
Vue
<template>
|
||
<view class="live-item" :class="{
|
||
'live-item--row': type == 'row'
|
||
}" @click="toLivePlayer">
|
||
|
||
<view class="live-item__status" :class="{
|
||
'live-item__status--not-started': data.live_status == 102,
|
||
'live-item__status--closed': data.live_status == 103,
|
||
'live-item__status--expired': data.live_status == 107
|
||
}">
|
||
<template v-if="data.live_status == 101">
|
||
<u-icon name="/static/images/live.gif" :size="24" />
|
||
<text class="status__text">{{ data.live_status_text }}</text>
|
||
</template>
|
||
<template v-else-if="data.live_status == 103">
|
||
<u-icon name="play-circle" :size="28" />
|
||
<text class="status__text">回放</text>
|
||
</template>
|
||
<template v-else-if="data.live_status == 102">
|
||
<u-icon name="clock" :size="28" />
|
||
<text class="status__text"> {{ data.start_time_tips }}</text>
|
||
</template>
|
||
<template v-else>
|
||
<u-icon name="error-circle" :size="28" />
|
||
<text class="status__text"> {{ data.live_status_text }}</text>
|
||
</template>
|
||
</view>
|
||
<template v-if="type == 'column'">
|
||
<view class="live-item__image">
|
||
<view class="live-item__image-content">
|
||
<u-image :src="data.feeds_img" width="100%" height="100%" mode="aspectFill" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="live-item__content">
|
||
<view class="shop-logo m-l-20" style="margin-top: -32rpx;">
|
||
<u-avatar :src="data.shop.logo" :size="64"></u-avatar>
|
||
</view>
|
||
<view class="shop-name bold">
|
||
{{ data.shop.name }}
|
||
</view>
|
||
<view class="line-2 xxs">
|
||
{{ data.name }}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-if="type == 'row'">
|
||
<u-image :src="data.feeds_img" width="240rpx" height="240rpx" mode="aspectFill" />
|
||
<view class="flex-1 m-l-20" style="min-width: 0;">
|
||
<view class="line-2 xxl bold">
|
||
{{ data.name }}
|
||
</view>
|
||
<view class="m-t-10">
|
||
主播：{{ data.anchor_name }}
|
||
</view>
|
||
<view class="live-item__btn live-item__btn--start" v-if="data.live_status == 102">
|
||
开播提醒
|
||
</view>
|
||
<view class="live-item__btn live-item__btn--ing" v-if="data.live_status == 101">
|
||
立即观看
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
toLivePlayer
|
||
} from '@/utils/tools'
|
||
export default {
|
||
name: "live-item",
|
||
props: {
|
||
data: {
|
||
type: Object,
|
||
default: () => ({})
|
||
},
|
||
type: {
|
||
type: String,
|
||
default: 'column'
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
|
||
};
|
||
},
|
||
methods: {
|
||
toLivePlayer() {
|
||
toLivePlayer([this.data.wx_room_id])
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.live-item {
|
||
width: 100%;
|
||
position: relative;
|
||
background-color: #fff;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
&--row {
|
||
border-radius: 0rpx;
|
||
display: flex;
|
||
padding: 20rpx;
|
||
.live-item__status {
|
||
top: 40rpx;
|
||
left: 40rpx;
|
||
}
|
||
}
|
||
|
||
&__image {
|
||
padding-top: 80%;
|
||
height: 0;
|
||
position: relative;
|
||
|
||
&-content {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
}
|
||
}
|
||
|
||
&__content {
|
||
padding: 0 20rpx 14rpx;
|
||
}
|
||
|
||
&__status {
|
||
position: absolute;
|
||
top: 20rpx;
|
||
left: 24rpx;
|
||
z-index: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: $-color-primary;
|
||
color: #fff;
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 100rpx;
|
||
&--not-started {
|
||
background-color: #06AEE4;;
|
||
}
|
||
&--closed {
|
||
background-color: #46B89B;;
|
||
}
|
||
&--expired {
|
||
background-color: #fa3534;
|
||
}
|
||
& .status__text {
|
||
margin-left: 4rpx;
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
|
||
&__btn {
|
||
width: 300rpx;
|
||
border: 1px solid currentColor;
|
||
padding: 10rpx 0;
|
||
border-radius: 100rpx;
|
||
text-align: center;
|
||
margin-top: 20rpx;
|
||
&--start {
|
||
color: #06AEE4;
|
||
}
|
||
&--ing {
|
||
color: $-color-primary;
|
||
}
|
||
}
|
||
}
|
||
</style>
|