Gao xiaosong
4 years ago
6 changed files with 705 additions and 112 deletions
@ -0,0 +1,17 @@ |
|||||||
|
|
||||||
|
|
||||||
|
import request from "@/utils/request"; |
||||||
|
|
||||||
|
/** |
||||||
|
* 查询所有直播间 |
||||||
|
*/ |
||||||
|
export function yxWechatLive(data) { |
||||||
|
return request.get("/yxWechatLive", data, { login: true }); |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* 获取直播回放 |
||||||
|
*/ |
||||||
|
export function getLiveReplay(id, data) { |
||||||
|
return request.get("/yxWechatLive/getLiveReplay/" + id, data, { login: false }); |
||||||
|
} |
||||||
@ -0,0 +1,306 @@ |
|||||||
|
<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.share_img" mode="aspectFill"></image> |
||||||
|
<view class="item-status"> |
||||||
|
<image class="status-img" :src="liveStatus[detail.live_status].img" mode=""></image> |
||||||
|
<text class="status-text">{{ liveStatus[detail.live_status].title }}</text> |
||||||
|
</view> |
||||||
|
<view class="item-title" :style="{ width: wh + 'rpx' }">{{ detail.name }}</view> |
||||||
|
<!-- <image v-if="detail.live_status == 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.anchor_name }}</view> |
||||||
|
</view> |
||||||
|
<!-- <text class="views">15W观看</text> --> |
||||||
|
</view> |
||||||
|
<slot name="liveGoods"> |
||||||
|
<view class="live-goods" v-if="detail.goods.length"> |
||||||
|
<view class="live-goods__item" v-for="(goods, index) in detail.goods" :key="goods.id" |
||||||
|
v-if="index < 3"> |
||||||
|
<image class="live-goods__img" :src="goods.cover_img" mode=""></image> |
||||||
|
<view class="live-goods__price" v-if="index < 2">￥{{ goods.price }}</view> |
||||||
|
<view class="live-goods__mark" v-else> |
||||||
|
<text>{{ detail.goods.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.room_id}` |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 轮询liveStatus |
||||||
|
getLiveStatus() { |
||||||
|
if (HAS_LIVE) { |
||||||
|
let that = this; |
||||||
|
let date = ''; |
||||||
|
if (that.detail.live_status == 102) { |
||||||
|
date = that.$tools.dateFormat('mm-dd HH:MM', new Date(that.detail.starttime * 1000)).replace('-', |
||||||
|
'/'); |
||||||
|
that.liveStatus['102'].title = '预告 ' + date; |
||||||
|
} |
||||||
|
livePlayer |
||||||
|
.getLiveStatus({ |
||||||
|
room_id: that.detail.room_id |
||||||
|
}) |
||||||
|
.then(res => { |
||||||
|
// 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常，107：已过期 |
||||||
|
that.detail.live_status = 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> |
||||||
@ -0,0 +1,255 @@ |
|||||||
|
<template> |
||||||
|
<view class="live-el mx20 mb10"> |
||||||
|
<view class="head"> |
||||||
|
<text class="head-title">热门直播</text> |
||||||
|
<view class="head-more" @tap="$Router.push('/pages/app/live/list')"> |
||||||
|
<text>更多</text> |
||||||
|
<text class="cuIcon-right"></text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="content-one" v-if="detail.style == 1"> |
||||||
|
<view class="content-one__item" v-for="live in liveList" :key="live.id" @tap="goRoom(live)"> |
||||||
|
<image class="item-cover" :src="live.share_img" mode="widthFix"></image> |
||||||
|
<view class="item-status"> |
||||||
|
<image class="status-img" :src="liveStatus[live.live_status].img" mode=""></image> |
||||||
|
<text class="status-text">{{ liveStatus[live.live_status].title }}</text> |
||||||
|
</view> |
||||||
|
<view class="item-title">{{ live.name }}</view> |
||||||
|
<!-- <image v-if="live.live_status == 101" class="like-img" src="http://shopro.7wpp.com/imgs/live/zan.gif" mode=""></image> --> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="content-two" v-if="detail.style == 2"> |
||||||
|
<view class="content-two__item" v-for="live in detail" :key="live.id"> |
||||||
|
<ShoproLiveCard :detail="live" :wh="320"> |
||||||
|
<block slot="liveGoods"><text></text></block> |
||||||
|
</ShoproLiveCard> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import ShoproLiveCard from '@/components/ShoproLiveCard.vue' |
||||||
|
|
||||||
|
let HAS_LIVE = false |
||||||
|
// #ifdef MP-WEIXIN |
||||||
|
HAS_LIVE = true |
||||||
|
let livePlayer = null; |
||||||
|
if (HAS_LIVE) { |
||||||
|
livePlayer = requirePlugin('live-player-plugin'); |
||||||
|
} |
||||||
|
// #endif |
||||||
|
import { |
||||||
|
yxWechatLive, |
||||||
|
getLiveReplay |
||||||
|
} from '@/api/live'; |
||||||
|
|
||||||
|
let timer = null; |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
ShoproLiveCard |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
liveList: [], |
||||||
|
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: Array |
||||||
|
}, |
||||||
|
created() { |
||||||
|
this.getLiveList(); |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
let that = this; |
||||||
|
timer = setInterval(() => { |
||||||
|
that.getLiveStatus(); |
||||||
|
}, 60000); |
||||||
|
}, |
||||||
|
beforeDestroy() { |
||||||
|
timer = null; |
||||||
|
}, |
||||||
|
computed: {}, |
||||||
|
methods: { |
||||||
|
// 直播列表 |
||||||
|
getLiveList() { |
||||||
|
let that = this; |
||||||
|
yxWechatLive({ |
||||||
|
page: 1, |
||||||
|
size: 10, |
||||||
|
}).then(res => { |
||||||
|
console.log(res) |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 轮询liveStatus |
||||||
|
getLiveStatus() { |
||||||
|
if (HAS_LIVE) { |
||||||
|
let that = this; |
||||||
|
let date = ''; |
||||||
|
if (that.detail.live_status == 102) { |
||||||
|
date = that.$tools.dateFormat('mm-dd HH:MM', new Date(that.detail.starttime * 1000)).replace('-', |
||||||
|
'/'); |
||||||
|
that.liveStatus['102'].title = '预告 ' + date; |
||||||
|
} |
||||||
|
livePlayer |
||||||
|
.getLiveStatus({ |
||||||
|
room_id: that.detail.room_id |
||||||
|
}) |
||||||
|
.then(res => { |
||||||
|
// 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常，107：已过期 |
||||||
|
that.detail.live_status = res.liveStatus; |
||||||
|
}) |
||||||
|
.catch(err => { |
||||||
|
console.log('get live status', err); |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
goRoom(live) { |
||||||
|
wx.navigateTo({ |
||||||
|
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${live.room_id}` |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss"> |
||||||
|
.live-el { |
||||||
|
background: #fff; |
||||||
|
border-radius: 20rpx; |
||||||
|
padding: 30rpx 20rpx 25rpx; |
||||||
|
|
||||||
|
.head { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
&-title { |
||||||
|
font-size: 32rpx; |
||||||
|
font-weight: bold; |
||||||
|
font-family: PingFang SC; |
||||||
|
color: rgba(51, 51, 51, 1); |
||||||
|
} |
||||||
|
|
||||||
|
&-more { |
||||||
|
font-size: 26rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: rgba(51, 51, 51, 1); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 单个大图直播 |
||||||
|
.content-one { |
||||||
|
.content-one__item { |
||||||
|
position: relative; |
||||||
|
height: 280rpx; |
||||||
|
border-radius: 20rpx; |
||||||
|
margin-top: 25rpx; |
||||||
|
overflow: hidden; |
||||||
|
|
||||||
|
.item-cover { |
||||||
|
background-color: #eee; |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.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: 38rpx; |
||||||
|
height: 38rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.status-text { |
||||||
|
font-size: 22rpx; |
||||||
|
font-family: PingFang SC; |
||||||
|
font-weight: 500; |
||||||
|
color: rgba(255, 255, 255, 1); |
||||||
|
padding: 0 10rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.item-title { |
||||||
|
width: 680rpx; |
||||||
|
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)); |
||||||
|
} |
||||||
|
|
||||||
|
.like-img { |
||||||
|
position: absolute; |
||||||
|
bottom: 20rpx; |
||||||
|
right: 10rpx; |
||||||
|
width: 60rpx; |
||||||
|
height: 130rpx; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 双图直播 |
||||||
|
.content-two { |
||||||
|
width: 100%; |
||||||
|
// -moz-column-count: 2; |
||||||
|
// -webkit-column-count: 2; |
||||||
|
// column-count: 2; |
||||||
|
// padding-top: 20rpx; |
||||||
|
display: flex; |
||||||
|
flex-wrap: wrap; |
||||||
|
|
||||||
|
&__item { |
||||||
|
margin-right: 30rpx; |
||||||
|
margin-top: 20rpx; |
||||||
|
|
||||||
|
&:nth-child(2n) { |
||||||
|
margin-right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue