Loki
/
zsw-farm-bxg
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

增加首页直播入口

zyh
Gao xiaosong 4 years ago
parent
c7d20dbf8e
commit
4e0e928850
6 changed files with 705 additions and 112 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      api/live.js
  2. 306
      components/ShoproLiveCard.vue
  3. 8
      manifest.json
  4. 255
      pages/home/components/Live.vue
  5. 9
      pages/home/index.vue

17
api/live.js
Unescape View File

@ -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 });
}

306
components/ShoproLiveCard.vue
Unescape View File

@ -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>

8
manifest.json
Unescape View File

@ -139,6 +139,14 @@
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},
"plugins": {
"live-player-plugin": {
// 注意填写该直播组件最新版本号，微信开发者工具调试时可获取最新版本号（复制时请去掉注释）
"version": "1.0.15",
// 必须填该直播组件appid，该示例值即为直播组件appid（复制时请去掉注释）
"provider": "wx2b03c6e691cd7370"
}
}
},
"mp-alipay": {

255
pages/home/components/Live.vue
Unescape View File

@ -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>

9
pages/home/index.vue
Unescape View File

@ -55,6 +55,8 @@
<ProductsRecommended :detail="bastList"></ProductsRecommended>
<!-- 促销单品
<PromoteProduct :detail="benefit"></PromoteProduct> -->
<!-- 直播 -->
<Live :detail="live"></Live>
<!-- 为您推荐 -->
<PromotionGood :benefit="benefit"></PromotionGood>
@ -82,6 +84,7 @@
import HotCommodity from './components/HotCommodity';
import FirstNewProduct from './components/FirstNewProduct';
import ProductsRecommended from './components/ProductsRecommended';
import Live from './components/Live';
import {
getHomeData,
@ -109,7 +112,8 @@
Groupon,
HotCommodity,
FirstNewProduct,
ProductsRecommended
ProductsRecommended,
Live
},
props: {},
data: function () {
@ -141,6 +145,7 @@
bastList: []
},
likeInfo: [],
live: [],
lovely: [],
benefit: [],
couponList: [],
@ -230,6 +235,7 @@
that.$set(that, 'firstList', res.data.firstList);
that.$set(that, 'bastList', res.data.bastList);
that.$set(that, 'likeInfo', res.data.likeInfo);
that.$set(that, 'live', res.data.live);
that.$set(that, 'lovely', res.data.lovely);
that.$set(that, 'benefit', res.data.benefit);
that.$set(that, 'couponList', res.data.couponList);
@ -531,6 +537,7 @@
font-size: 15px;
}
}
.home_content_box {
margin-top: -10rpx;
}

Write Preview
Loading…
Cancel
Save