Skip to content

M
mallapp
Commit 7a614b1e authored by zhangjianguo's avatar zhangjianguo
Browse files
Options

直播组件

parent 191a2bb7
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 67 deletions
components/goods/list.vue
View file @ 7a614b1e
......@@ -114,7 +114,7 @@ export default {
display: block;
}
.u-good-list .good .good-name {
height: 38px;
height: 37px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
......
components/goods/style2.vue
View file @ 7a614b1e
......@@ -172,7 +172,7 @@ export default {
-webkit-box-orient: vertical;
margin: 3px 0;
font-size: 13px;
min-height: 35px;
min-height: 36px;
}
.good-two .good-info .good-price-info {
display: flex;
......
pages.json
View file @ 7a614b1e
......@@ -74,20 +74,20 @@
}
]
},
// {
// "root": "pages/live",
// "plugins": {
// "live-player-plugin": {
// "version": "1.0.18",
// "provider": "wx2b03c6e691cd7370"
// }
// },
// "pages": [
// {
// "path": "index"
// }
// ]
// },
{
"root": "pages/live",
"plugins": {
"live-player-plugin": {
"version": "1.0.18",
"provider": "wx2b03c6e691cd7370"
}
},
"pages": [
{
"path": "index"
}
]
},
{
"root": "pages/user-center",
"pages": [{
......
pages/live/index.vue
View file @ 7a614b1e
<template>
<view class="liveStyle" :style="{ height: contentHeight }">
<u-empty v-if="g.length == 0" text="暂无相关直播列表" mode="coupon"></u-empty>
<u-empty v-if="g.length == 0" text="暂无相关直播列表" mode="list"></u-empty>
<template
v-if="g.length > 0"
style="
height: calc(100vh -50px);
width: calc(100vw -20px);
overflow: hidden;
margin-left: 10px;
padding-top: 10px;
"
>
<scroll-view
:scroll-y="true"
:enable-back-to-top="true"
:enable-flex="true"
@scrolltolower="lower"
:style="{ height: '100%' ,}"
>
<view class="u-good-list" >
<u-row gutter="20">
<u-col span="6" v-for="(cx, ci) in g" :key="ci">
<view class="good" @click="clickHandler(cx)">
<view class="good-img">
<image
mode="aspectFit"
:src="cx.cover_img"
style="width: 100%; height: 100%;"
/>
</view>
<view class="good-name">{{ cx.name }}</view>
<view class="good-info">
<u-avatar :src="cx.anchor_img" size="80" ></u-avatar>
<Text style="font-size: 12px;">{{cx.anchor_name}}</Text>
</view>
</view>
</u-col>
</u-row>
</view>
<u-loadmore
:status="status"
:load-text="loadText"
:font-size="24"
:margin-top="20"
:margin-bottom="20"
bg-color="#f3f4f6"
/>
</scroll-view>
<view style="
height: calc(100vh - 50px);
width: calc(100vw - 20px);
margin-left: 10px;
overflow: hidden;
padding-top: 10px;
">
<scroll-view
:scroll-y="true"
:enable-back-to-top="true"
:enable-flex="true"
@scrolltolower="lower"
:style="{ height: '100%' ,}"
>
<view class="u-good-list" >
<u-row gutter="20">
<u-col span="6" v-for="(cx, ci) in g" :key="ci" >
<view class="good" @click="clickHandler(cx)">
<view class="good-img">
<image
mode="aspectFill"
:src="cx.cover_img"
style="width: 100%; height: 100%;"
/>
</view>
<view class="good-name">{{ cx.name }}</view>
<view class="good-info">
<u-avatar :src="cx.anchor_img" size="30" ></u-avatar>
<Text style="font-size: 12px;margin-left: 5px;">{{cx.anchor_name}}</Text>
</view>
<!-- 直播的状态 -->
<view class="liveState">
<view style="width: 6px;height: 6px;border-radius: 3px;background: #f5f5f5;"></view>
<Text class='liveState_text' v-if='cx.live_status==101'>直播中</Text>
<Text class='liveState_text' v-if='cx.live_status==102'>未开始</Text>
<Text class='liveState_text' v-if='cx.live_status==103'>已结束</Text>
<Text class='liveState_text' v-if='cx.live_status==104'>禁播</Text>
<Text class='liveState_text' v-if='cx.live_status==105'>暂停</Text>
<Text class='liveState_text' v-if='cx.live_status==106'>异常</Text>
<Text class='liveState_text' v-if='cx.live_status==107'>已过期</Text>
</view>
</view>
</u-col>
</u-row>
</view>
<u-loadmore
:status="status"
:load-text="loadText"
:font-size="24"
:margin-top="20"
:margin-bottom="20"
bg-color="#f3f4f6"
/>
</scroll-view>
</view>
</template>
<tabbars></tabbars>
</view>
</template>
<script>
import tabbars from '@/components/tabbar/index';
import tabbars from '@/components/tabbar/index';
export default {
components: {
tabbars
......@@ -106,6 +122,11 @@ export default {
title: this.pageTitle,
});
},
clickHandler(cx){
wx.navigateTo({
url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${cx.roomid}`
})
},
init() {
uni.showLoading({
title: '加载中'
......@@ -120,10 +141,10 @@ export default {
uni.hideNavigationBarLoading();
if(res.resultCode==1){
this.g = this.g.concat(res.data.pageData);
this.page_count = res.data.pageCount;
if (this.page_count == 1) {
this.status = "nomore";
}
this.page_count = res.data.pageCount;
if (this.page_count == 1) {
this.status = "nomore";
}
}
}
);
......@@ -146,11 +167,13 @@ export default {
.liveStyle{
background: #f3f4f6;
}
.liveStyle .u-good-list .good {
background: #fff;
border-radius: 10px;
overflow: hidden;
margin-bottom: 10px;
position: relative;
}
.liveStyle .u-good-list .good .good-img {
width: calc(50vw);
......@@ -172,8 +195,29 @@ export default {
display: flex;
margin: 7px 10px;
margin-top: 0;
align-items: flex-end;
padding-bottom: 5px;
flex-direction: row;
align-items: center;
}
.liveStyle .u-good-list .liveState{
width: 100px;
height: 30px;
position: absolute;
left: 0;
top:0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
background: #666666;
opacity: 0.9;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
}
.liveStyle .u-good-list .liveState .liveState_text{
color: #f5f5f5;
font-size: 14px;
margin-left: 5px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment