cxc/yshopb2c-uniapp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

完成直播模块功能开发

Browse Source
This commit is contained in:
Gaoxs
2020-09-09 19:59:14 +08:00
parent 69e3d5cc59
commit f05af3c3f7
9 changed files with 246 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
components/ShoproLiveCard.vue
View File

@ -1,30 +1,29 @@
<template> <template>
<view class="sp-live-card" :style="{ width: wh + 'rpx' }"> <view class="sp-live-card" :style="{ width: wh + 'rpx' }">
<view class="live-content" @tap="goRoom" :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> <image class="item-cover" :src="detail.shareImge" mode="aspectFill"></image>
<view class="item-status"> <view class="item-status">
<image class="status-img" :src="liveStatus[detail.live_status].img" mode=""></image> <image class="status-img" :src="liveStatus[detail.liveStatus].img" mode=""></image>
<text class="status-text">{{ liveStatus[detail.live_status].title }}</text> <text class="status-text">{{ liveStatus[detail.liveStatus].title }}</text>
</view> </view>
<view class="item-title" :style="{ width: wh + 'rpx' }">{{ detail.name }}</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> --> <!-- <image v-if="detail.liveStatus == 101" class="like-img" src="http://shopro.7wpp.com/imgs/live/zan.gif" mode=""></image> -->
</view> </view>
<view class="live-bottom" :style="{ width: wh + 'rpx' }"> <view class="live-bottom" :style="{ width: wh + 'rpx' }">
<view class="live-info"> <view class="live-info">
<view class="info-box"> <view class="info-box">
<!-- <image class="info-avatar" :src="detail.anchor_img" mode=""></image> --> <!-- <image class="info-avatar" :src="detail.anchor_img" mode=""></image> -->
<view class="info-name">{{ detail.anchor_name }}</view> <view class="info-name">{{ detail.anchorName }}</view>
</view> </view>
<!-- <text class="views">15W观看</text> --> <!-- <text class="views">15W观看</text> -->
</view> </view>
<slot name="liveGoods"> <slot name="liveGoods">
<view class="live-goods" v-if="detail.goods.length"> <view class="live-goods" v-if="detail.product.length">
<view class="live-goods__item" v-for="(goods, index) in detail.goods" :key="goods.id" <view class="live-goods__item" v-for="(goods, index) in detail.product" :key="goods.id" v-if="index < 3">
v-if="index < 3"> <image class="live-goods__img" :src="goods.coverImgeUrl" mode=""></image>
<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__price" v-if="index < 2">￥{{ goods.price }}</view>
<view class="live-goods__mark" v-else> <view class="live-goods__mark" v-else>
<text>{{ detail.goods.length }}+</text> <text>{{ detail.product.length }}+</text>
</view> </view>
</view> </view>
</view> </view>
@ -96,10 +95,10 @@
this.getLiveStatus(); this.getLiveStatus();
}, },
mounted() { mounted() {
let that = this; // let that = this;
timer = setInterval(() => { // timer = setInterval(() => {
that.getLiveStatus(); // that.getLiveStatus();
}, 60000); // }, 60000);
}, },
beforeDestroy() { beforeDestroy() {
timer = null; timer = null;
@ -108,31 +107,31 @@
goRoom() { goRoom() {
let that = this; let that = this;
wx.navigateTo({ wx.navigateTo({
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${that.detail.room_id}` url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${that.detail.roomId}`
}); });
}, },
// 轮询liveStatus // 轮询liveStatus
getLiveStatus() { getLiveStatus() {
if (HAS_LIVE) { // if (HAS_LIVE) {
let that = this; // let that = this;
let date = ''; // let date = '';
if (that.detail.live_status == 102) { // if (that.detail.liveStatus == 102) {
date = that.$tools.dateFormat('mm-dd HH:MM', new Date(that.detail.starttime * 1000)).replace('-', // date = that.$tools.dateFormat('mm-dd HH:MM', new Date(that.detail.starttime * 1000)).replace('-',
'/'); // '/');
that.liveStatus['102'].title = '预告 ' + date; // that.liveStatus['102'].title = '预告 ' + date;
} // }
livePlayer // livePlayer
.getLiveStatus({ // .getLiveStatus({
room_id: that.detail.room_id // room_id: that.detail.room_id
}) // })
.then(res => { // .then(res => {
// 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常，107：已过期 // // 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常，107：已过期
that.detail.live_status = res.liveStatus; // that.detail.liveStatus = res.liveStatus;
}) // })
.catch(err => { // .catch(err => {
console.log('get live status', err); // console.log('get live status', err);
}); // });
} // }
} }
} }
}; };

6
pages.json
View File

@ -404,6 +404,12 @@
"style": { "style": {
"navigationBarTitleText": "地图" "navigationBarTitleText": "地图"
} }
},
{
"path": "pages/shop/Live/LiveList/index",
"style": {
"navigationBarTitleText": "直播列表"
}
} }
], ],
"globalStyle": { "globalStyle": {

1
pages/home/components/FirstNewProduct.vue
View File

@ -61,7 +61,6 @@
created() {}, created() {},
watch: { watch: {
detail(next) { detail(next) {
console.log(next)
this.goodsList = this.sortData(next, 4); this.goodsList = this.sortData(next, 4);
} }
}, },

5
pages/home/components/HotCommodity.vue
View File

@ -60,7 +60,6 @@
created() {}, created() {},
watch: { watch: {
detail(next) { detail(next) {
console.log(next)
this.goodsList = this.sortData(next, 4); this.goodsList = this.sortData(next, 4);
} }
}, },
@ -212,5 +211,9 @@
} }
} }
} }
.min-goods{
margin-right: 22rpx;
}
} }
</style> </style>

76
pages/home/components/Live.vue
View File

@ -2,29 +2,30 @@
<view class="live-el mx20 mb10"> <view class="live-el mx20 mb10">
<view class="head"> <view class="head">
<text class="head-title">热门直播</text> <text class="head-title">热门直播</text>
<view class="head-more" @tap="$Router.push('/pages/app/live/list')"> <view class="head-more" @tap="$yrouter.push('/pages/shop/Live/LiveList/index')">
<text>更多</text> <text>更多</text>
<text class="cuIcon-right"></text> <text class="cuIcon-right"></text>
</view> </view>
</view> </view>
<view class="content-one" v-if="detail.style == 1"> <view class="content-one">
<view class="content-one__item" v-for="live in liveList" :key="live.id" @tap="goRoom(live)"> <view class="content-one__item" v-for="live in detail" :key="live.id" @tap="goRoom(live)">
<image class="item-cover" :src="live.share_img" mode="widthFix"></image> <image class="item-cover" :src="live.shareImge" mode="widthFix"></image>
<view class="item-status"> <view class="item-status">
<image class="status-img" :src="liveStatus[live.live_status].img" mode=""></image> <image class="status-img" :src="liveStatus[live.liveStatus].img" mode=""></image>
<text class="status-text">{{ liveStatus[live.live_status].title }}</text> <text class="status-text">{{ liveStatus[live.liveStatus].title }}</text>
</view> </view>
<view class="item-title">{{ live.name }}</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> --> <image v-if="live.liveStatus == 101" class="like-img" src="http://shopro.7wpp.com/imgs/live/zan.gif"
mode=""></image>
</view> </view>
</view> </view>
<view class="content-two" v-if="detail.style == 2"> <!-- <view class="content-two">
<view class="content-two__item" v-for="live in detail" :key="live.id"> <view class="content-two__item" v-for="live in detail" :key="live.id">
<ShoproLiveCard :detail="live" :wh="320"> <ShoproLiveCard :detail="live" :wh="320">
<block slot="liveGoods"><text></text></block> <block slot="liveGoods"><text></text></block>
</ShoproLiveCard> </ShoproLiveCard>
</view> </view>
</view> </view> -->
</view> </view>
</template> </template>
@ -88,7 +89,6 @@
detail: Array detail: Array
}, },
created() { created() {
this.getLiveList();
}, },
mounted() { mounted() {
let that = this; let that = this;
@ -103,40 +103,40 @@
methods: { methods: {
// 直播列表 // 直播列表
getLiveList() { getLiveList() {
let that = this; // let that = this;
yxWechatLive({ // yxWechatLive({
page: 1, // page: 1,
size: 10, // size: 10,
}).then(res => { // }).then(res => {
console.log(res) // console.log(res)
}) // })
}, },
// 轮询liveStatus // 轮询liveStatus
getLiveStatus() { getLiveStatus() {
if (HAS_LIVE) { // if (HAS_LIVE) {
let that = this; // let that = this;
let date = ''; // let date = '';
if (that.detail.live_status == 102) { // if (that.detail.live_status == 102) {
date = that.$tools.dateFormat('mm-dd HH:MM', new Date(that.detail.starttime * 1000)).replace('-', // date = that.$tools.dateFormat('mm-dd HH:MM', new Date(that.detail.starttime * 1000)).replace('-',
'/'); // '/');
that.liveStatus['102'].title = '预告 ' + date; // that.liveStatus['102'].title = '预告 ' + date;
} // }
livePlayer // livePlayer
.getLiveStatus({ // .getLiveStatus({
room_id: that.detail.room_id // room_id: that.detail.room_id
}) // })
.then(res => { // .then(res => {
// 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常，107：已过期 // // 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常，107：已过期
that.detail.live_status = res.liveStatus; // that.detail.live_status = res.liveStatus;
}) // })
.catch(err => { // .catch(err => {
console.log('get live status', err); // console.log('get live status', err);
}); // });
} // }
}, },
goRoom(live) { goRoom(live) {
wx.navigateTo({ wx.navigateTo({
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${live.room_id}` url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${live.roomId}`
}); });
} }
} }

1
pages/home/components/ProductsRecommended.vue
View File

@ -60,7 +60,6 @@
created() {}, created() {},
watch: { watch: {
detail(next) { detail(next) {
console.log(next)
this.goodsList = this.sortData(next, 4); this.goodsList = this.sortData(next, 4);
} }
}, },

1
pages/home/components/PromoteProduct.vue
View File

@ -61,7 +61,6 @@
created() {}, created() {},
watch: { watch: {
detail(next) { detail(next) {
console.log(next)
this.goodsList = this.sortData(next, 4); this.goodsList = this.sortData(next, 4);
} }
}, },

12
pages/home/index.vue
View File

@ -36,13 +36,13 @@
<!-- 超值拼团 --> <!-- 超值拼团 -->
<Groupon :detail="combinationList" /> <Groupon :detail="combinationList" />
<!-- 首发新品->秒杀 --> <!-- 首发新品->秒杀 -->
<FirstNewProduct :detail="firstList"></FirstNewProduct> <!-- <FirstNewProduct :detail="firstList"></FirstNewProduct> -->
<!-- 精品推荐 --> <!-- 精品推荐 -->
<ProductsRecommended :detail="bastList"></ProductsRecommended> <!-- <ProductsRecommended :detail="bastList"></ProductsRecommended> -->
<!-- 促销单品 <!-- 促销单品
<PromoteProduct :detail="benefit"></PromoteProduct> --> <PromoteProduct :detail="benefit"></PromoteProduct> -->
<!-- 直播 --> <!-- 直播 -->
<!-- <Live :detail="live"></Live> --> <Live :detail="live"></Live>
<!-- 为您推荐 --> <!-- 为您推荐 -->
<PromotionGood :benefit="benefit"></PromotionGood> <PromotionGood :benefit="benefit"></PromotionGood>
@ -69,7 +69,7 @@
import HotCommodity from './components/HotCommodity'; import HotCommodity from './components/HotCommodity';
import FirstNewProduct from './components/FirstNewProduct'; import FirstNewProduct from './components/FirstNewProduct';
import ProductsRecommended from './components/ProductsRecommended'; import ProductsRecommended from './components/ProductsRecommended';
// import Live from './components/Live'; import Live from './components/Live';
import { import {
getHomeData, getHomeData,
@ -99,7 +99,7 @@
HotCommodity, HotCommodity,
FirstNewProduct, FirstNewProduct,
ProductsRecommended, ProductsRecommended,
// Live Live
}, },
props: {}, props: {},
data: function () { data: function () {
@ -220,7 +220,7 @@
that.$set(that, 'firstList', res.data.firstList); that.$set(that, 'firstList', res.data.firstList);
that.$set(that, 'bastList', res.data.bastList); that.$set(that, 'bastList', res.data.bastList);
that.$set(that, 'likeInfo', res.data.likeInfo); that.$set(that, 'likeInfo', res.data.likeInfo);
that.$set(that, 'live', res.data.live); that.$set(that, 'live', res.data.liveList);
that.$set(that, 'lovely', res.data.lovely); that.$set(that, 'lovely', res.data.lovely);
that.$set(that, 'benefit', res.data.benefit); that.$set(that, 'benefit', res.data.benefit);
that.$set(that, 'couponList', res.data.couponList); that.$set(that, 'couponList', res.data.couponList);

158
pages/shop/Live/LiveList/index.vue Normal file
View File

@ -0,0 +1,158 @@
<template>
<view class="page_box">
<view class="head_box">
<view class="live-tab">
<view class="live-tab__item" v-for="tab in liveTab" :key="tab.title" @tap="selTab(tab)">
<view class="live-tab__item-name">{{ tab.name }}</view>
<text class="live-tab__item--link" :class="{ 'live-tab__item--active': tabCur == tab.title }"></text>
</view>
</view>
</view>
<view class="content_box">
<scroll-view scroll-y="true" @scrolltolower="loadMore" class="scroll-box">
<view class="list-box">
<block v-for="live in liveList" :key="live.id">
<shopro-live-card :detail="live"></shopro-live-card>
</block>
</view>
<view v-if="liveList.length" class="cu-load text-gray" :class="loadStatus"></view>
</scroll-view>
</view>
</view>
</template>
<script>
import {
yxWechatLive
} from "@/api/live";
import ShoproLiveCard from '@/components/ShoproLiveCard.vue'
export default {
components: {
ShoproLiveCard
},
data() {
return {
tabCur: 'all',
liveStatus: '',
liveTab: [{
title: 'all',
name: '全部',
code: ''
},
{
title: 'living',
name: '直播中',
code: '101'
},
{
title: 'lived',
name: '已结束',
code: '103'
}
],
liveList: [],
loadStatus: '', //loading,over
currentPage: 0,
size: 10,
lastPage: 0
};
},
computed: {},
onLoad() {
this.getLiveList();
},
onHide() {},
methods: {
// 切换tab
selTab(tab) {
this.tabCur = tab.title;
this.liveStatus = tab.code;
this.liveList = [];
this.getLiveList();
},
// 加载更多
loadMore() {
if (this.currentPage < this.lastPage) {
this.currentPage += 1;
this.getLiveList();
}
},
// 直播列表
getLiveList() {
let that = this;
yxWechatLive({
liveStatus: that.liveStatus,
page: that.currentPage,
size: that.size
}).then(res => {
that.liveList = [...that.liveList, ...res.data.content];
that.lastPage = res.data.lastPage;
if (that.currentPage < res.data.lastPage) {
that.loadStatus = '';
} else {
that.loadStatus = 'over';
}
});
}
}
};
</script>
<style lang="scss">
// tab
.live-tab {
width: 100%;
height: 96rpx;
background: #fff;
display: flex;
align-items: center;
&__item {
flex: 1;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
&__item-name {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: bold;
color: rgba(51, 51, 51, 1);
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
&__item--link {
width: 68rpx;
height: 4rpx;
background: transparent;
border-radius: 2rpx;
}
&__item--active {
width: 68rpx;
height: 4rpx;
background: rgba(213, 166, 90, 1);
border-radius: 2rpx;
}
}
// 瀑布流 list
.scroll-box {
.list-box {
width: 100%;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
padding: 25rpx;
}
}
</style>