Skip to content

M
mayi-mp-shop
Commit c4c24254 by 程智春
Options

直播组件

parent 53822a5f
Showing with 411 additions and 0 deletions
static/nativeComponents/LiveBroadcast/index.js 0 → 100644
// static/nativeComponents/LiveBroadcast/index.js
let app = getApp()
const { indexApi } = app
Component({
/**
* 组件的属性列表
*/
properties: {
datas: {
type: Object
}
},
/**
* 组件的初始数据
*/
data: {
showNum : 0,
showList : true,
},
ready(){
if (this.data.datas.componentData.liveList.length >= this.data.datas.componentData.showNum) {
this.setData({
showNum: this.data.datas.componentData.showNum
})
} else {
this.setData({
showNum: this.data.datas.componentData.liveList.length
})
}
this.init()
console.log('datas.componentData.style', this.data.datas.componentData.liveList)
},
/**
* 组件的方法列表
*/
methods: {
init(){
this.setData({
'datas.componentData.liveList' : []
})
console.log(this.data.datas.componentData.liveList, 'this.data.datas.componentData.liveList')
indexApi.getLiveCon(this.data.datas.componentData.liveIdList).then(res => {
if(res.data.code == '200'){
if(res.data.data.length == 0){
this.setData({
showList : false,
'datas.componentData.liveList' : [],
'datas.componentData.liveIdList':[]
})
}else{
res.data.data.forEach(item => {
item.coverUrl = app.DFSImg(item.coverUrl);
item.anchorHeadImages = app.DFSImg(item.anchorHeadImages);
item.watchNum = item.watchNum ? (Number(item.watchNum) > 10000 ?( Number(item.watchNum)/10000).toFixed(1) + 'w' : item.watchNum ) : 0
})
this.setData({
'datas.componentData.liveList' : res.data.data
})
}
console.log(this.data.datas.componentData.liveList,'this.data.datas.componentData.liveList')
}else{
this.setData({
showList : false
})
}
})
},
toList(){
app.$themeToLink({
type: 1,
link: '/liveBroadcast/list'
})
},
toLiveDetail(e){
let id = e.currentTarget.dataset.itemid
app.$themeToLink({
type: 1,
link: '/liveBroadcast/lived?liveId=' + id
})
}
}
})
static/nativeComponents/LiveBroadcast/index.json 0 → 100644
{
"component": true,
"usingComponents": {}
}
\ No newline at end of file
static/nativeComponents/LiveBroadcast/index.wxml 0 → 100644
<!--static/nativeComponents/LiveBroadcast/index.wxml-->
<view class="live-broadcast" wx:if="{{showList}}">
<view class="top flex">
<view style="font-weight:bold;font-size:36rpx">直播</view>
<view class="seeMore" bindtap="toList">查看更多</view>
</view>
<view class="liveList" wx:if="{{datas.componentData.liveList.length>0}}" style="padding:{{datas.componentData.style==1 ? '0px' : ''}}">
<view wx:if="{{datas.componentData.style==1}}">
<view class="live live3" wx:for="{{showNum}}" wx:key="index" bindtap="toLiveDetail" data-itemid="{{datas.componentData.liveList[index].id}}">
<view class="img">
<image class="cover-img" src="{{datas.componentData.liveList[index].coverUrl}}" mode="aspectFill">
</image>
<view class="live-info">
<view class="isLive" style="background-color:{{ datas.componentData.liveList[index].liveBroadcastState == 2 ? '#000000' :'#ff3300'}}">
<i class="dot"></i>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 0}}">预告</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 1}}">直播中</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 2}}">已结束</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 3}}">暂停直播</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 4}}">直播超时</view>
</view>
<view class="live-title">{{datas.componentData.liveList[index].title}}</view>
</view>
<image class="common-iconbofang" src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/3784cd9c-d7e5-4db5-a800-f6e5ca43bb44.png"></image>
</view>
<view class="user-info" wx:if="{{datas.componentData.liveInfoShow}}">
<view class="avator">
<image src="{{datas.componentData.liveList[index].anchorHeadImages}}"></image>
</view>
<view class="name">{{datas.componentData.liveList[index].anchorName}}</view>
</view>
</view>
</view>
<view wx:if="{{datas.componentData.style==2}}">
<view class="live live1" wx:for="{{showNum}}" wx:key="index" bindtap="toLiveDetail" data-itemid="{{datas.componentData.liveList[index].id}}">
<view class="title line-clamp1">{{datas.componentData.liveList[index].title}}</view>
<view class="img">
<image class="cover-img" src="{{datas.componentData.liveList[index].coverUrl}}" mode="aspectFill">
</image>
<view class="isLive" style="background-color:{{ datas.componentData.liveList[index].liveBroadcastState == 2 ? '#000000' :'#ff3300'}}">
<i class="dot"></i>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 0}}">预告</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 1}}">直播中</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 2}}">已结束</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 3}}">暂停直播</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 4}}">直播超时</view>
</view>
<view class="watch-num">{{datas.componentData.liveList[index].watchNum ?datas.componentData.liveList[index].watchNum : 0 }}次观看</view>
<image class="common-iconbofang" src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/3784cd9c-d7e5-4db5-a800-f6e5ca43bb44.png"></image>
</view>
<view class="user-info" wx:if="{{datas.componentData.liveInfoShow}}">
<view class="avator">
<image src="{{datas.componentData.liveList[index].anchorHeadImages}}"></image>
</view>
<view class="name">{{datas.componentData.liveList[index].anchorName}}</view>
</view>
</view>
</view>
<view wx:if="{{datas.componentData.style==3}}">
<view class="live live2" style="padding:{{datas.componentData.liveInfoShow ? '0 9px 10px':''}}" wx:for="{{showNum}}" wx:key="index" bindtap="toLiveDetail" data-itemid="{{datas.componentData.liveList[index].id}}">
<view class="user-info" wx:if="{{datas.componentData.liveInfoShow}}">
<view class="avator">
<image src="{{datas.componentData.liveList[index].anchorHeadImages}}"></image>
</view>
<view class="name">{{datas.componentData.liveList[index].anchorName}}</view>
</view>
<view class="live-detail">
<view class="img">
<image class="cover-img" mode="aspectFill" src="{{datas.componentData.liveList[index].coverUrl}}"></image>
<view class="isLive" style="background-color:{{datas.componentData.liveList[index].liveBroadcastState == 2 ? '#000000' :'#ff3300'}}">
<view class="dot"></view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 0}}">预告</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 1}}">直播中</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 2}}">已结束</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 3}}">暂停直播</view>
<view wx:if="{{datas.componentData.liveList[index].liveBroadcastState == 4}}">直播超时</view>
</view>
<image class="common-iconbofang" src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/3784cd9c-d7e5-4db5-a800-f6e5ca43bb44.png"></image>
</view>
<view class="info">
<view class="title line-clamp1">{{datas.componentData.liveList[index].title}}</view>
<view class="time"></view>
</view>
</view>
</view>
</view>
</view>
</view>
\ No newline at end of file
static/nativeComponents/LiveBroadcast/index.wxss 0 → 100644
/* static/nativeComponents/LiveBroadcast/index.wxss */
.top{
display: flex;
justify-content: space-between;
align-items: center;
font-size: 32rpx;
height: 80rpx;
padding: 0 40rpx;
background-color: white;
color: #333;
}
.seeMore{
font-size: 28rpx;
color: var(--main-color);
}
.liveList{
width: 100%;
padding: 20rpx 28rpx;
box-sizing: border-box;
}
.liveList .live{
width: 100%;
border-radius: 8rpx;
overflow: hidden;
margin-top: 28rpx;
background-color: white
}
.liveList .live .img{
width: 100%;
}
.liveList .live .img .cover-img{
width: 100%;
}
.liveList .common-iconbofang{
position: absolute;
width: 80rpx;
height: 80rpx;
top: 50%;
left: 50%;
margin-left: -40rpx;
margin-top: -40rpx;
color: rgba(0,0,0,.8);
opacity: 1;
transition: all .5s;
}
.liveList .live .user-info{
display: flex;
justify-content: flex-start;
align-items: center;
height: 84rpx;
}
.liveList .live .user-info .avator{
width: 56rpx;
height: 56rpx;
border-radius: 50%;
background-color: #999;
overflow: hidden;
}
.liveList .live .user-info .avator image{
width: 100%;
height: 100%;
}
.liveList .live .user-info .name{
font-size: 26rpx;
color: #333333;
margin-left: 12rpx;
}
.live3{
position: relative;
box-sizing: border-box;
border-radius: 0;
}
.live3:first-child{
margin-top: 0;
}
.live3 .img{
width: 100%;
height: 422rpx;
overflow: hidden;
position: relative;
}
.live3 .img .cover-img{
width: 100%;
height: 100%;
}
.live3 .img .live-info{
position: absolute;
left: 24rpx;
top: 16rpx;
display: flex;
justify-content: flex-start;
align-items: center;
}
.live3 .img .live-info .isLive{
color: #fff;
font-size: 24rpx;
border-radius: 4rpx;
width: 120rpx;
height: 40rpx;
display: flex;
text-align: center;
line-height: 40rpx;
align-items: center;
justify-content: center;
}
.live3 .img .live-info .isLive .dot{
width: 12rpx;
height:12rpx;
background: #fff;
border-radius: 50%;
margin-right: 8rpx;
}
.live3 .img .live-info .live-title{
font-size: 32rpx;
color: white;
margin-left:8rpx;
text-shadow: 4rpx 4rpx 4rpx #999;
}
.live3 .user-info{
padding-left: 24rpx;
}
.live1{
position: relative;
box-sizing: border-box;
padding:12rpx 24rpx 4rpx;
}
.live1 .title{
color: #333;
font-size: 30rpx;
line-height: 60rpx;
}
.live1 .img{
width: 100%;
height: 362rpx;
border-radius: 4rpx;
overflow: hidden;
position: relative;
}
.live1 .img .cover-img{
width: 100%;
height: 100%;
}
.live1 .img .isLive{
color: #fff;
font-size:24rpx;
border-radius: 4rpx;
width: 120rpx;
height: 40rpx;
display: flex;
text-align: center;
line-height: 40rpx;
align-items: center;
justify-content: center;
position: absolute;
left: 16rpx;
bottom: 16rpx;
}
.live1 .img .isLive .dot{
width: 12rpx;
height: 12rpx;
background: #fff;
border-radius: 50%;
margin-right: 8rpx;
}
.live1 .img .watch-num{
position: absolute;
right: 16rpx;
bottom: 16rpx;
font-size: 26rpx;
color: #FFFDFD;
}
.live2{
box-sizing: border-box;
}
.live2 .live-detail{
display: flex;
}
.live2 .live-detail .img{
width: 40%;
height: 20vh;
position: relative;
}
.live-detail .img .cover-img{
width: 100%;
height: 100%;
}
.live-detail .img .isLive{
color: #fff;
font-size: 24rpx;
border-radius: 4rpx;
width: 120rpx;
height: 40rpx;
display: flex;
text-align: center;
line-height: 40rpx;
align-items: center;
justify-content: center;
position: absolute;
left: 10rpx;
bottom: 10rpx;
}
.live-detail .img .isLive .dot {
width: 12rpx;
height: 12rpx;
background: #fff;
border-radius: 50%;
margin-right: 8rpx;
}
.live-detail .info{
width: 60%;
padding: 0 30rpx;
}
.live-detail .info .title{
line-height: 60rpx;
}
.line-clamp1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
\ No newline at end of file
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