456 lines
9.7 KiB
Vue
456 lines
9.7 KiB
Vue
<template>
|
|
<view class="u_live">
|
|
<scroll-view scroll-x="true" class="mb80" v-if="toplist">
|
|
<view class="top_list d-s-c">
|
|
<view v-for="(item, index) in toplist" :key="index" class="top_item">
|
|
<view class="top_item_img"><image :src="item.avatarUrl" mode=""></image></view>
|
|
<view class="live_status">直播中</view>
|
|
<view class="live_top_name">{{ item.user }}</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<view class="uLive_top" v-if="scrollTopNum >= 185">
|
|
<scroll-view scroll-x="true" class="">
|
|
<view class="d-s-c">
|
|
<view :class="params.is_top == 1 ? 'type_item_active' : 'type_item'" @click="chooseTop()">热门</view>
|
|
<view :class="params.is_follow == 1 ? 'type_item_active' : 'type_item'" @click="chooseFollow()">关注</view>
|
|
<view
|
|
:class="category_id == item.category_id ? 'type_item_active' : 'type_item'"
|
|
v-for="(item, index) in categorytype"
|
|
:key="index"
|
|
@click="chooseType(item.category_id)"
|
|
>
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="live_content" v-if="categorytype != ''">
|
|
<view>
|
|
<scroll-view scroll-x="true" class="">
|
|
<view class="d-s-c">
|
|
<view :class="params.is_top == 1 ? 'type_item_active' : 'type_item'" @click="chooseTop()">热门</view>
|
|
<view :class="params.is_follow == 1 ? 'type_item_active' : 'type_item'" @click="chooseFollow()">关注</view>
|
|
<view
|
|
:class="category_id == item.category_id ? 'type_item_active' : 'type_item'"
|
|
v-for="(item, index) in categorytype"
|
|
:key="index"
|
|
@click="chooseType(item.category_id)"
|
|
>
|
|
{{ item.name }}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="live_list " v-if="!isLoading && typelist">
|
|
<view @click="toRoom(liveitem)" class="live_item" v-for="(liveitem, liveindex) in typelist" :key="liveindex" v-if="liveitem.live_status != 107">
|
|
<view class="live_item_status" v-if="liveitem.live_status == 103">
|
|
<view class="live_item_statusL reLive">回放</view>
|
|
<text class="live_item_statusR">直播回看</text>
|
|
</view>
|
|
<view class="live_item_status" v-if="liveitem.live_status == 101">
|
|
<view class="live_item_statusL onLive"><image src="../../static/zhibo.gif" mode=""></image></view>
|
|
<text class="live_item_statusR">直播中</text>
|
|
</view>
|
|
<view class="live_item_status" v-if="liveitem.live_status == 102">
|
|
<view class="live_item_statusL">预告</view>
|
|
<text class="live_item_statusR">直播预告</text>
|
|
</view>
|
|
<view class="live_item_img"><image :src="liveitem.share.file_path" mode="aspectFill"></image></view>
|
|
<view class="d-b-c live_item_b">
|
|
<view class="live_item_bl">
|
|
<view class="live_item_blt">{{ liveitem.name }}</view>
|
|
<view class="d-s-c live_item_blb">
|
|
<view class="live_item_blbimg"><image :src="liveitem.user.avatarUrl" mode=""></image></view>
|
|
<view class="live_item_blbtxt">{{ liveitem.user.nickName }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="live_item_brbox" v-if="liveitem.product[0]">
|
|
<view class="live_item_br"><image :src="liveitem.product[0].product.image[0].file_path" mode=""></image></view>
|
|
<view class="live_item_brb">￥{{ liveitem.product[0].product.product_price }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 没有记录 -->
|
|
<view class="d-c-c p30" v-if="typelist.length == 0 && !isLoading">
|
|
<text class="iconfont icon-wushuju"></text>
|
|
<text class="cont">亲，暂无相关记录哦</text>
|
|
</view>
|
|
<uni-load-more v-else :loadingType="loadingType"></uni-load-more>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import uniLoadMore from '@/components/uni-load-more.vue';
|
|
export default {
|
|
components: {
|
|
uniLoadMore
|
|
},
|
|
data() {
|
|
return {
|
|
/* 设备高度 */
|
|
phoneHeight: 0,
|
|
/* 滑动窗口高度 */
|
|
scrollviewHigh: 0,
|
|
/* 类别列表 */
|
|
categorytype: [],
|
|
/* 当前选中的类别 */
|
|
category_id: 0,
|
|
roomlist: [],
|
|
/* 直播列表 */
|
|
typelist: [],
|
|
isLoading: true,
|
|
/*底部加载*/
|
|
loading: true,
|
|
/*没有更多*/
|
|
no_more: false,
|
|
/*当前页面*/
|
|
page: 1,
|
|
/* 滚动条高度 */
|
|
scrollTopNum: 0,
|
|
params: {
|
|
is_top: 1
|
|
},
|
|
toplist: []
|
|
};
|
|
},
|
|
computed: {
|
|
/*加载中状态*/
|
|
loadingType() {
|
|
if (this.isLoading) {
|
|
return 1;
|
|
} else {
|
|
if (this.typelist.length != 0 && this.no_more) {
|
|
return 2;
|
|
} else {
|
|
return 0;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getCategory();
|
|
},
|
|
onPageScroll(res) {
|
|
this.scrollTopNum = res.scrollTop;
|
|
console.log(res.scrollTop); //距离页面顶部距离
|
|
},
|
|
methods: {
|
|
/*可滚动视图区域到底触发*/
|
|
onReachBottom() {
|
|
let self = this;
|
|
if (self.no_more) {
|
|
return;
|
|
}
|
|
self.page++;
|
|
if (self.page <= self.last_page) {
|
|
self.getData();
|
|
} else {
|
|
self.no_more = true;
|
|
}
|
|
},
|
|
/*初始化*/
|
|
init() {
|
|
let _this = this;
|
|
uni.getSystemInfo({
|
|
success(res) {
|
|
_this.phoneHeight = res.windowHeight;
|
|
}
|
|
});
|
|
},
|
|
getCategory() {
|
|
let self = this;
|
|
self.isLoading = true;
|
|
self._post('plus.live.RoomApply/category', {}, function(res) {
|
|
self.categorytype = res.data.list;
|
|
self.typelist.length = self.categorytype.length;
|
|
self.typelist[0] = res.data.list[0];
|
|
self.getData();
|
|
self.init();
|
|
});
|
|
},
|
|
getData() {
|
|
let self = this;
|
|
self.isLoading = true;
|
|
uni.showLoading({
|
|
title: '加载中...'
|
|
});
|
|
let params = self.params;
|
|
self._post(
|
|
'plus.live.Room/lists',
|
|
{
|
|
...params
|
|
},
|
|
function(res) {
|
|
self.toplist = res.data.live.data;
|
|
self.typelist = res.data.list.data;
|
|
uni.hideLoading();
|
|
self.isLoading = false;
|
|
self.last_page = res.data.list.last_page;
|
|
if (res.data.list.last_page <= 1) {
|
|
self.no_more = true;
|
|
} else {
|
|
self.no_more = false;
|
|
}
|
|
console.log(self.typelist);
|
|
}
|
|
);
|
|
},
|
|
chooseType(id) {
|
|
let self = this;
|
|
self.category_id = id;
|
|
console.log(self.category_id);
|
|
self.params = {
|
|
category_id: self.category_id
|
|
};
|
|
self.getData();
|
|
},
|
|
chooseTop() {
|
|
let self = this;
|
|
self.params = {
|
|
is_top: 1
|
|
};
|
|
self.category_id = 0;
|
|
self.getData();
|
|
},
|
|
chooseFollow() {
|
|
let self = this;
|
|
self.params = {
|
|
is_follow: 1
|
|
};
|
|
self.category_id = 0;
|
|
self.getData();
|
|
},
|
|
toRoom(e) {
|
|
if (e.live_status == 103) {
|
|
if (e.record_url != '') {
|
|
this.gotoPage('/pagesLive/live/playback?room_id=' + e.room_id);
|
|
} else {
|
|
this.showError('暂无回放');
|
|
}
|
|
} else {
|
|
this.gotoPage('/pagesLive/live/live?room_id=' + e.room_id + '&sence=join');
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
.u_live {
|
|
}
|
|
|
|
.mb80 {
|
|
margin-bottom: 80rpx;
|
|
}
|
|
|
|
.uLive_top {
|
|
position: fixed;
|
|
z-index: 1000;
|
|
background: #f5f5f5;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.top_list {
|
|
padding: 26rpx;
|
|
}
|
|
|
|
.top_item {
|
|
text-align: center;
|
|
position: relative;
|
|
margin-right: 22rpx;
|
|
}
|
|
|
|
.top_item_img {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
padding: 4rpx;
|
|
border-radius: 50%;
|
|
border: 2rpx solid #da7399;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.live_status {
|
|
position: absolute;
|
|
top: 105rpx;
|
|
left: 14rpx;
|
|
width: 105rpx;
|
|
height: 30rpx;
|
|
background-color: #f2517b;
|
|
color: #ffffff;
|
|
font-size: 20rpx;
|
|
text-align: center;
|
|
line-height: 30rpx;
|
|
border-radius: 15rpx;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
.live_top_name {
|
|
letter-spacing: 4rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
width: 132rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.top_item_img image {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.type_item {
|
|
padding: 0 20rpx;
|
|
flex-shrink: 0;
|
|
height: 44rpx;
|
|
line-height: 44rpx;
|
|
font-size: 25rpx;
|
|
color: #000000;
|
|
text-align: center;
|
|
margin-left: 19rpx;
|
|
letter-spacing: 3rpx;
|
|
}
|
|
|
|
.type_item_active {
|
|
padding: 0 20rpx;
|
|
flex-shrink: 0;
|
|
height: 44rpx;
|
|
line-height: 44rpx;
|
|
font-size: 25rpx;
|
|
color: #ffffff;
|
|
text-align: center;
|
|
margin-left: 19rpx;
|
|
background-color: #fb4a74;
|
|
border-radius: 22rpx;
|
|
letter-spacing: 3rpx;
|
|
}
|
|
|
|
.live_content {
|
|
padding-top: 30rpx;
|
|
background-color: #f6f6f6;
|
|
}
|
|
|
|
.live_list {
|
|
padding: 29rpx 26rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.live_list .live_item {
|
|
position: relative;
|
|
width: 343rpx;
|
|
height: 431rpx;
|
|
height: 591rpx;
|
|
background-color: #ffffff;
|
|
margin-bottom: 16rpx;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.live_item_img image {
|
|
width: 343rpx;
|
|
height: 431rpx;
|
|
}
|
|
|
|
.live_item_b {
|
|
padding: 19rpx 16rpx;
|
|
}
|
|
|
|
.live_item_blt {
|
|
width: 182rpx;
|
|
font-size: 26rpx;
|
|
line-height: 39rpx;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
overflow: hidden;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
|
|
.live_item_blbimg image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 50%;
|
|
margin-right: 10rpx;
|
|
}
|
|
|
|
.live_item_blbtxt {
|
|
font-size: 21rpx;
|
|
color: #a8a8a8;
|
|
}
|
|
|
|
.live_item_br image {
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.live_item_brb {
|
|
height: 32rpx;
|
|
line-height: 32rpx;
|
|
font-size: 20rpx;
|
|
color: red;
|
|
}
|
|
|
|
.live_item_status {
|
|
position: absolute;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
height: 30rpx;
|
|
line-height: 30rpx;
|
|
border-radius: 15rpx;
|
|
background-color: rgba($color: #000000, $alpha: 0.6);
|
|
padding-right: 11rpx;
|
|
font-size: 19rpx;
|
|
top: 15rpx;
|
|
left: 16rpx;
|
|
}
|
|
|
|
.live_item_statusL {
|
|
color: #ffffff;
|
|
height: 30rpx;
|
|
line-height: 30rpx;
|
|
border-radius: 15rpx;
|
|
padding: 0 10rpx;
|
|
background-color: #60d785;
|
|
margin-right: 5rpx;
|
|
}
|
|
|
|
.reLive {
|
|
background-color: #ff6633;
|
|
}
|
|
|
|
.onLive {
|
|
background-color: #fb4a74;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.live_item_statusR {
|
|
color: #ffffff;
|
|
}
|
|
|
|
.live_item_statusL image {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
|
|
.live_item_brbox {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
</style>
|