直播
This commit is contained in:
jia
parent
d1050cc01d
commit
7e8b29b9b8
144
api/live.js
Normal file
144
api/live.js
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
import request from "@/utils/requestc.js";
|
||||||
|
import requesta from "@/utils/request.js";
|
||||||
|
/**
|
||||||
|
* 直播列表
|
||||||
|
*/
|
||||||
|
export function live(data) {
|
||||||
|
return request.get("zhibo/live" ,data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 直播详情
|
||||||
|
*/
|
||||||
|
export function liveDetail(data) {
|
||||||
|
return request.get("zhibo/liveDetail" ,data);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取直播详情接口
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 创建直播间
|
||||||
|
*/
|
||||||
|
export function createPushLive(data) {
|
||||||
|
return request.post("zhibo/createPushLive", data);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 关闭直播间
|
||||||
|
*/
|
||||||
|
export function stopPushLive(data) {
|
||||||
|
return request.post("zhibo/stopPushLive", data);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 绑定用户client客户
|
||||||
|
*/
|
||||||
|
export function bindUser(data) {
|
||||||
|
return request.post("zhibo/bindUser", data);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加入直播间聊天室
|
||||||
|
*/
|
||||||
|
export function joinChatRoom(data) {
|
||||||
|
return request.post("zhibo/joinChatRoom", data);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 直播间聊天室发言
|
||||||
|
*/
|
||||||
|
export function sendGroupMessage(data) {
|
||||||
|
return request.post("zhibo/sendGroupMessage", data);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//商品列表
|
||||||
|
export function good(data) {
|
||||||
|
return requesta.get("product/spu/lst", data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取用户信息
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
export function getUserInfo() {
|
||||||
|
return request.get('user');
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//关注
|
||||||
|
export function getfans(id,data) {
|
||||||
|
return requesta.post('community/fans/'+id,data);
|
||||||
|
}
|
||||||
|
|
||||||
|
//我关注的人
|
||||||
|
export function getfocuslst(data) {
|
||||||
|
return requesta.post('community/focus/lst',data);
|
||||||
|
}
|
||||||
|
|
||||||
|
//关注我的人
|
||||||
|
export function getfanslst(data) {
|
||||||
|
return requesta.post('community/fans/lst',data);
|
||||||
|
}
|
||||||
|
|
||||||
|
//用户送礼
|
||||||
|
export function reward(data) {
|
||||||
|
return request.post('zhibo/reward',data);
|
||||||
|
}
|
||||||
|
//获取礼物
|
||||||
|
export function rewardList(data) {
|
||||||
|
return requesta.get('zhibo/rewardList',data);
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取礼物
|
||||||
|
export function giftList(data) {
|
||||||
|
return request.get('zhibo/giftList',data);
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取房间人数
|
||||||
|
export function liveAudience(data) {
|
||||||
|
return request.get('zhibo/liveAudience',data);
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取用户余额
|
||||||
|
export function getuser(data) {
|
||||||
|
return requesta.get('user',data);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//送礼
|
||||||
|
export function sendGift(data) {
|
||||||
|
return request.post('zhibo/sendGift',data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 充值金额选择
|
||||||
|
*/
|
||||||
|
export function getRechargeApi() {
|
||||||
|
return requesta.get("common/recharge_quota");
|
||||||
|
}
|
||||||
|
|
||||||
|
//历史直播记录
|
||||||
|
|
||||||
|
export function playbackList(data) {
|
||||||
|
return request.get("zhibo/playbackList",data);
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取直播回放详情
|
||||||
|
export function playbackDetail(data) {
|
||||||
|
return request.get("zhibo/playbackDetail",data);
|
||||||
|
}
|
||||||
|
//获取观众关注主播状态
|
||||||
|
export function getAjuser(id) {
|
||||||
|
return requesta.get(`community/user/info/${id}`);
|
||||||
|
}
|
||||||
169
components/gb-popup/gb-popup.vue
Normal file
169
components/gb-popup/gb-popup.vue
Normal file
@ -0,0 +1,169 @@
|
|||||||
|
<template>
|
||||||
|
<view class="men-ban box " v-if ='isShow' @touchmove.stop.prevent="">
|
||||||
|
<view class="box_next">
|
||||||
|
<view class="box_next_title">
|
||||||
|
<text class="box_next_title_z">{{title}}</text>
|
||||||
|
</view>
|
||||||
|
<slot></slot>
|
||||||
|
<view class="box_next_but_d" v-if="isBut">
|
||||||
|
<view @click='show' class="box_next_but_d_but">
|
||||||
|
<text class="box_next_but_d_but_text">{{nName}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="box_next_but_s" v-else>
|
||||||
|
<view class="box_next_but_s_lbut" @click="lEvent">
|
||||||
|
<text class="box_next_but_d_but_text">{{lName}}</text>
|
||||||
|
</view>
|
||||||
|
<view @click="rEvent" class="box_next_but_s_rbut" hover-class="zcolor-while1">
|
||||||
|
<text class="box_next_but_d_but_text">{{rName}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "温馨提示"
|
||||||
|
},
|
||||||
|
isShow: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
nName: String,
|
||||||
|
lName: String,
|
||||||
|
rName: String,
|
||||||
|
isBut: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
show() {
|
||||||
|
|
||||||
|
this.$emit('show');
|
||||||
|
},
|
||||||
|
lEvent() {
|
||||||
|
this.$emit('lEvent');
|
||||||
|
},
|
||||||
|
rEvent() {
|
||||||
|
this.$emit('rEvent');
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.men-ban {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 999999;
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.box_next {
|
||||||
|
background-color: #ffffff;
|
||||||
|
width: 550rpx;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box_next_title {
|
||||||
|
padding: 30rpx 30rpx 0 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box_next_title_z {
|
||||||
|
font-size: 31rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box_next_but_d {
|
||||||
|
width: 550rpx;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 130rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box_next_but_d_but {
|
||||||
|
width: 500rpx;
|
||||||
|
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
background-color: #fee610;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box_next_but_d_but_text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box_next_but_s {
|
||||||
|
width: 550rpx;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
height: 130rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box_next_but_s_lbut {
|
||||||
|
width: 200rpx;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box_next_but_s_rbut {
|
||||||
|
width: 200rpx;
|
||||||
|
background-color: #fee610;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
/* #endif */
|
||||||
|
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 80rpx;
|
||||||
|
border-radius: 50rpx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
183
components/mh-msgList/mh-msgList.vue
Normal file
183
components/mh-msgList/mh-msgList.vue
Normal file
@ -0,0 +1,183 @@
|
|||||||
|
<template>
|
||||||
|
<view class="msg-view">
|
||||||
|
<scroll-view class="msg-view-p" scroll-y="true" :scroll-top="msgPanelScrollTop">
|
||||||
|
<view id="chatArea">
|
||||||
|
<view class="chat-area-line" v-for="(item,index) in msgList">
|
||||||
|
|
||||||
|
<view class="system-msg"
|
||||||
|
:style="{'flex-direction':((item.userName.length + item.content.length)<15?'row':'')}"
|
||||||
|
v-if="item.msg_type == 'system'">
|
||||||
|
<view class="system-msg-detail ">
|
||||||
|
<text class="system-msg-detail-username " v-for="i in item.userName">{{i}}</text>
|
||||||
|
<text class="system-msg-detail-content " v-for="i in ':'">{{i}}</text>
|
||||||
|
<text class="system-msg-detail-content " v-for="i in item.content">{{i}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="user-msg"
|
||||||
|
:style="{'flex-direction':((item.userName.length + item.content.length)<15?'row':'')}" v-else>
|
||||||
|
|
||||||
|
<view class="user-msg-detail">
|
||||||
|
<view class="user-msg-detail-tag">
|
||||||
|
<!-- <text style="text-align: center;font-size: 20px;color: #DD524D;">★1</text> -->
|
||||||
|
<!-- 这里可以根据用户等级显示图片 -->
|
||||||
|
<image :src="item.avatar" class="user-msg-detail-tag"></image>
|
||||||
|
</view>
|
||||||
|
<text class="user-msg-detail-username" v-for="i in item.userName"
|
||||||
|
@click="test(item.userName)">{{i}}</text>
|
||||||
|
<text class="user-msg-detail-content" v-for="i in ':'">{{i}}</text>
|
||||||
|
<text class="user-msg-detail-content" v-for="i in item.content">{{i}}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'MhMsgList',
|
||||||
|
props: {
|
||||||
|
msgList: {
|
||||||
|
type: [Object, Array],
|
||||||
|
default: [{
|
||||||
|
userName: "系统通知",
|
||||||
|
content: "直播倡导绿色直播，严禁发布涉黄涉毒涉赌，严禁发布涉政、违法及低俗违规内容。健康直播，文明互动",
|
||||||
|
cmd: "say",
|
||||||
|
|
||||||
|
msg_type: "system"
|
||||||
|
}, ]
|
||||||
|
},
|
||||||
|
msgPanelScrollTop: {
|
||||||
|
type: [Number, String],
|
||||||
|
default: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
test(e) {
|
||||||
|
uni.showToast({
|
||||||
|
title: e,
|
||||||
|
icon: 'none'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
setMsgPanelScroll() {
|
||||||
|
var that = this;
|
||||||
|
setTimeout(function() {
|
||||||
|
const query = uni.createSelectorQuery().in(that);
|
||||||
|
query.select('#chatArea').boundingClientRect(data => {
|
||||||
|
that.msgPanelScrollTop = data.height - 200;
|
||||||
|
}).exec();
|
||||||
|
}, 50)
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.msg-view-p {
|
||||||
|
display: flex;
|
||||||
|
width: 550rpx;
|
||||||
|
height: 550rpx;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.chat-area-line {
|
||||||
|
width: 550upx;
|
||||||
|
|
||||||
|
flex-direction: row;
|
||||||
|
margin-bottom: 5upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.system-msg {
|
||||||
|
width: 550upx;
|
||||||
|
margin-bottom: 5upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.system-msg-detail {
|
||||||
|
// max-width: 550upx;
|
||||||
|
|
||||||
|
padding: 10upx;
|
||||||
|
border-radius: 30upx;
|
||||||
|
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-right: 14upx;
|
||||||
|
|
||||||
|
>.system-msg-detail-username {
|
||||||
|
color: red;
|
||||||
|
font-size: 32upx;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 40upx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
>.system-msg-detail-content {
|
||||||
|
font-size: 32upx;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 40upx;
|
||||||
|
color: #A0CFFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-line {
|
||||||
|
// max-width: 530upx;
|
||||||
|
padding: 10upx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
flex-direction: row;
|
||||||
|
border-radius: 30upx;
|
||||||
|
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||||
|
margin-right: 14upx;
|
||||||
|
font-size: 28upx;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 40upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-msg {
|
||||||
|
width: 530upx;
|
||||||
|
|
||||||
|
|
||||||
|
margin-bottom: 5upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-msg-detail-tag {
|
||||||
|
width: 40upx;
|
||||||
|
height: 40upx;
|
||||||
|
border-radius: 50%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-msg-detail {
|
||||||
|
padding: 10upx;
|
||||||
|
border-radius: 30upx;
|
||||||
|
background-color: rgba($color: #000000, $alpha: 0.4);
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-right: 14upx;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
>.user-msg-detail-username {
|
||||||
|
color: #A0CFFF;
|
||||||
|
font-size: 32upx;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 40upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
>.user-msg-detail-content {
|
||||||
|
font-size: 32upx;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 40upx;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
2085
components/sd-live-page/histroy.nvue
Normal file
2085
components/sd-live-page/histroy.nvue
Normal file
File diff suppressed because it is too large
Load Diff
2110
components/sd-live-page/livepage.nvue
Normal file
2110
components/sd-live-page/livepage.nvue
Normal file
File diff suppressed because it is too large
Load Diff
241
components/unipopup/live-uni-popup.vue
Normal file
241
components/unipopup/live-uni-popup.vue
Normal file
@ -0,0 +1,241 @@
|
|||||||
|
<template>
|
||||||
|
<view v-if="showPopup" class="uni-popup" @touchmove.stop.prevent="clear">
|
||||||
|
<uni-transition :mode-class="['fade']" :styles="maskClass" :show="showTrans" @click="onTap" />
|
||||||
|
<uni-transition :mode-class="ani" :styles="transClass" :show="showTrans" @click="onTap">
|
||||||
|
<view class="uni-popup__wrapper-box" @click.stop="clear">
|
||||||
|
<slot />
|
||||||
|
</view>
|
||||||
|
</uni-transition>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
|
||||||
|
|
||||||
|
props: {
|
||||||
|
// 开启动画
|
||||||
|
animation: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'center'
|
||||||
|
},
|
||||||
|
// maskClick
|
||||||
|
maskClick: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
ani: [],
|
||||||
|
showPopup: false,
|
||||||
|
showTrans: false,
|
||||||
|
maskClass: {
|
||||||
|
'position': 'fixed',
|
||||||
|
'bottom': 0,
|
||||||
|
'top': 0,
|
||||||
|
'left': 0,
|
||||||
|
'right': 0,
|
||||||
|
'backgroundColor': 'rgba(0, 0, 0, 0)'
|
||||||
|
},
|
||||||
|
transClass: {
|
||||||
|
'position': 'fixed',
|
||||||
|
'left': 0,
|
||||||
|
'right': 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
type: {
|
||||||
|
handler: function(newVal) {
|
||||||
|
switch (this.type) {
|
||||||
|
case 'top':
|
||||||
|
this.ani = ['slide-top']
|
||||||
|
this.transClass = {
|
||||||
|
'position': 'fixed',
|
||||||
|
'left': 0,
|
||||||
|
'right': 0,
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 'bottom':
|
||||||
|
this.ani = ['slide-bottom']
|
||||||
|
this.transClass = {
|
||||||
|
'position': 'fixed',
|
||||||
|
'left': 0,
|
||||||
|
'right': 0,
|
||||||
|
'bottom': 0
|
||||||
|
}
|
||||||
|
console.log('直播调用弹窗')
|
||||||
|
break
|
||||||
|
case 'center':
|
||||||
|
this.ani = ['zoom-out', 'fade']
|
||||||
|
this.transClass = {
|
||||||
|
'position': 'fixed',
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
'display': 'flex',
|
||||||
|
'flexDirection': 'column',
|
||||||
|
/* #endif */
|
||||||
|
'bottom': 0,
|
||||||
|
'left': 0,
|
||||||
|
'right': 0,
|
||||||
|
'top': 0,
|
||||||
|
'justifyContent': 'center',
|
||||||
|
'alignItems': 'center'
|
||||||
|
}
|
||||||
|
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
methods: {
|
||||||
|
clear(e) {
|
||||||
|
// TODO nvue 取消冒泡
|
||||||
|
e.stopPropagation()
|
||||||
|
},
|
||||||
|
open() {
|
||||||
|
this.showPopup = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.showTrans = true
|
||||||
|
}, 0);
|
||||||
|
})
|
||||||
|
this.$emit('change', {
|
||||||
|
show: true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
close(type) {
|
||||||
|
this.showTrans = false
|
||||||
|
this.$nextTick(() => {
|
||||||
|
clearTimeout(this.timer)
|
||||||
|
this.timer = setTimeout(() => {
|
||||||
|
this.$emit('change', {
|
||||||
|
show: false
|
||||||
|
})
|
||||||
|
this.showPopup = false
|
||||||
|
}, 0)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onTap() {
|
||||||
|
if (!this.maskClick) return
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.uni-popup {
|
||||||
|
position: fixed;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
top: var(--window-top);
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef H5 */
|
||||||
|
top: 0;
|
||||||
|
/* #endif */
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
z-index: 99;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__mask {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mask-ani {
|
||||||
|
transition-property: opacity;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-top-mask {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-bottom-mask {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-center-mask {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__wrapper {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: block;
|
||||||
|
/* #endif */
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
transform: translateY(-500px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
transform: translateY(500px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
/* #endif */
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
transform: scale(1.2);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__wrapper-box {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: block;
|
||||||
|
/* #endif */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-ani {
|
||||||
|
/* transition: transform 0.3s;
|
||||||
|
*/
|
||||||
|
transition-property: transform, opacity;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.uni-top-content {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-bottom-content {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-center-content {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
241
components/unipopup/uni-popup.vue
Normal file
241
components/unipopup/uni-popup.vue
Normal file
@ -0,0 +1,241 @@
|
|||||||
|
<template>
|
||||||
|
<view v-if="showPopup" class="uni-popup" @touchmove.stop.prevent="clear">
|
||||||
|
<uni-transition :mode-class="['fade']" :styles="maskClass" :show="showTrans" @click="onTap" />
|
||||||
|
<uni-transition :mode-class="ani" :styles="transClass" :show="showTrans" @click="onTap">
|
||||||
|
<view class="uni-popup__wrapper-box" @click.stop="clear">
|
||||||
|
<slot />
|
||||||
|
</view>
|
||||||
|
</uni-transition>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
|
||||||
|
props: {
|
||||||
|
// 开启动画
|
||||||
|
animation: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
|
||||||
|
type: {
|
||||||
|
type: String,
|
||||||
|
default: 'center'
|
||||||
|
},
|
||||||
|
// maskClick
|
||||||
|
maskClick: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
ani: [],
|
||||||
|
showPopup: false,
|
||||||
|
showTrans: false,
|
||||||
|
maskClass: {
|
||||||
|
'position': 'fixed',
|
||||||
|
'bottom': 0,
|
||||||
|
'top': 0,
|
||||||
|
'left': 0,
|
||||||
|
'right': 0,
|
||||||
|
'backgroundColor': 'rgba(0, 0, 0, 0.4)'
|
||||||
|
},
|
||||||
|
transClass: {
|
||||||
|
'position': 'fixed',
|
||||||
|
'left': 0,
|
||||||
|
'right': 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
type: {
|
||||||
|
handler: function(newVal) {
|
||||||
|
switch (this.type) {
|
||||||
|
case 'top':
|
||||||
|
this.ani = ['slide-top']
|
||||||
|
this.transClass = {
|
||||||
|
'position': 'fixed',
|
||||||
|
'left': 0,
|
||||||
|
'right': 0,
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 'bottom':
|
||||||
|
this.ani = ['slide-bottom']
|
||||||
|
this.transClass = {
|
||||||
|
'position': 'fixed',
|
||||||
|
'left': 0,
|
||||||
|
'right': 0,
|
||||||
|
'bottom': 0
|
||||||
|
}
|
||||||
|
console.log('底部条用')
|
||||||
|
console.log(this.type)
|
||||||
|
break
|
||||||
|
case 'center':
|
||||||
|
this.ani = ['zoom-out', 'fade']
|
||||||
|
this.transClass = {
|
||||||
|
'position': 'fixed',
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
'display': 'flex',
|
||||||
|
'flexDirection': 'column',
|
||||||
|
/* #endif */
|
||||||
|
'bottom': 0,
|
||||||
|
'left': 0,
|
||||||
|
'right': 0,
|
||||||
|
'top': 0,
|
||||||
|
'justifyContent': 'center',
|
||||||
|
'alignItems': 'center'
|
||||||
|
}
|
||||||
|
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
methods: {
|
||||||
|
clear(e) {
|
||||||
|
// TODO nvue 取消冒泡
|
||||||
|
e.stopPropagation()
|
||||||
|
},
|
||||||
|
open() {
|
||||||
|
this.showPopup = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.showTrans = true
|
||||||
|
}, 50);
|
||||||
|
})
|
||||||
|
this.$emit('change', {
|
||||||
|
show: true
|
||||||
|
})
|
||||||
|
},
|
||||||
|
close(type) {
|
||||||
|
this.showTrans = false
|
||||||
|
this.$nextTick(() => {
|
||||||
|
clearTimeout(this.timer)
|
||||||
|
this.timer = setTimeout(() => {
|
||||||
|
this.$emit('change', {
|
||||||
|
show: false
|
||||||
|
})
|
||||||
|
this.showPopup = false
|
||||||
|
}, 300)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onTap() {
|
||||||
|
if (!this.maskClick) return
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.uni-popup {
|
||||||
|
position: fixed;
|
||||||
|
/* #ifdef H5 */
|
||||||
|
top: var(--window-top);
|
||||||
|
/* #endif */
|
||||||
|
/* #ifndef H5 */
|
||||||
|
top: 0;
|
||||||
|
/* #endif */
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
z-index: 99;
|
||||||
|
/* #endif */
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__mask {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.4);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mask-ani {
|
||||||
|
transition-property: opacity;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-top-mask {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-bottom-mask {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-center-mask {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__wrapper {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: block;
|
||||||
|
/* #endif */
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
transform: translateY(-500px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom {
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
transform: translateY(500px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
/* #endif */
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
transform: scale(1.2);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-popup__wrapper-box {
|
||||||
|
/* #ifndef APP-NVUE */
|
||||||
|
display: block;
|
||||||
|
/* #endif */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-ani {
|
||||||
|
/* transition: transform 0.3s;
|
||||||
|
*/
|
||||||
|
transition-property: transform, opacity;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.uni-top-content {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-bottom-content {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.uni-center-content {
|
||||||
|
transform: scale(1);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -7,6 +7,7 @@ let httpApi
|
|||||||
let httpApiTwo
|
let httpApiTwo
|
||||||
let httpApiThree
|
let httpApiThree
|
||||||
let httpApiFour
|
let httpApiFour
|
||||||
|
let httpApiFive
|
||||||
|
|
||||||
// 在打包之前请检查当前环境是否正确
|
// 在打包之前请检查当前环境是否正确
|
||||||
const env = 'dev'; // 开发
|
const env = 'dev'; // 开发
|
||||||
@ -31,6 +32,7 @@ switch (env) {
|
|||||||
httpApiTwo = "https://nk.lihaink.cn"
|
httpApiTwo = "https://nk.lihaink.cn"
|
||||||
httpApiThree = 'http://ceshi-oa.lihaink.cn'
|
httpApiThree = 'http://ceshi-oa.lihaink.cn'
|
||||||
httpApiFour = 'https://ceshi-worker-task.lihaink.cn'
|
httpApiFour = 'https://ceshi-worker-task.lihaink.cn'
|
||||||
|
httpApiFive = 'https://ceshi-zhibo.lihaink.cn'
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -39,6 +41,7 @@ switch (env) {
|
|||||||
// 聊天接口修改此字符 小程序聊天要求wss 例如：wss://mer.crmeb.net
|
// 聊天接口修改此字符 小程序聊天要求wss 例如：wss://mer.crmeb.net
|
||||||
// let wsApi = 'ws://192.168.3.20:8324'
|
// let wsApi = 'ws://192.168.3.20:8324'
|
||||||
let wsApi = 'wss://shop.lihaink.cn'
|
let wsApi = 'wss://shop.lihaink.cn'
|
||||||
|
let wsApi_one = 'wss://ceshi-zhibo.lihaink.cn/chat_room'
|
||||||
module.exports = {
|
module.exports = {
|
||||||
// 请求域名 格式： https://您的域名
|
// 请求域名 格式： https://您的域名
|
||||||
// #ifdef MP || APP-PLUS
|
// #ifdef MP || APP-PLUS
|
||||||
@ -47,19 +50,23 @@ module.exports = {
|
|||||||
HTTP_REQUEST_URL_TWO: httpApiTwo,
|
HTTP_REQUEST_URL_TWO: httpApiTwo,
|
||||||
HTTP_REQUEST_URL_THREE: httpApiThree,
|
HTTP_REQUEST_URL_THREE: httpApiThree,
|
||||||
HTTP_REQUEST_URL_FOUR: httpApiFour,
|
HTTP_REQUEST_URL_FOUR: httpApiFour,
|
||||||
|
HTTP_REQUEST_URL_FIVE: httpApiFive,
|
||||||
VUE_APP_WS_URL: `${wsApi}?type=user`,
|
VUE_APP_WS_URL: `${wsApi}?type=user`,
|
||||||
|
VUE_APP_WS_URL_ONE:wsApi_one,
|
||||||
// #endif
|
// #endif
|
||||||
|
|
||||||
// #ifdef H5
|
// #ifdef H5
|
||||||
//H5接口是浏览器地址
|
//H5接口是浏览器地址
|
||||||
HTTP_REQUEST_URL: process.env.NODE_ENV == 'development'? httpApi : window.location.protocol + "//" + window.location.host,
|
HTTP_REQUEST_URL: process.env.NODE_ENV == 'development'? httpApi : window.location.protocol + "//" + window.location.host,
|
||||||
HTTP_REQUEST_URL_TWO: httpApiTwo,
|
HTTP_REQUEST_URL_TWO: httpApiTwo,
|
||||||
|
HTTP_REQUEST_URL_FIVE: httpApiFive,
|
||||||
HTTP_REQUEST_URL_FOUR: window.location.host == 'shop.lihaink.cn' ?'https://worker-task.lihaink.cn':window.location.host == 'test.shop.lihaink.cn'?'https://preview-worker-task.lihaink.cn':'https://ceshi-worker-task.lihaink.cn',
|
HTTP_REQUEST_URL_FOUR: window.location.host == 'shop.lihaink.cn' ?'https://worker-task.lihaink.cn':window.location.host == 'test.shop.lihaink.cn'?'https://preview-worker-task.lihaink.cn':'https://ceshi-worker-task.lihaink.cn',
|
||||||
|
|
||||||
// 聊天长连接地址
|
// 聊天长连接地址
|
||||||
VUE_APP_WS_URL: wsApi ? `${wsApi}?type=user` : VUE_APP_WS_URL,
|
VUE_APP_WS_URL: wsApi ? `${wsApi}?type=user` : VUE_APP_WS_URL,
|
||||||
// #endif
|
// #endif
|
||||||
openPlantGrass: openPlantGrass,
|
openPlantGrass: openPlantGrass,
|
||||||
|
|
||||||
HEADER: {
|
HEADER: {
|
||||||
'content-type': 'application/json',
|
'content-type': 'application/json',
|
||||||
//#ifdef H5
|
//#ifdef H5
|
||||||
|
|||||||
21
pages.json
21
pages.json
@ -64,6 +64,27 @@
|
|||||||
"navigationBarTitleText": "购物车"
|
"navigationBarTitleText": "购物车"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/room/index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "直播列表",
|
||||||
|
"enablePullDownRefresh": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/room/spectator",
|
||||||
|
"style": {
|
||||||
|
"navigationStyle": "custom",
|
||||||
|
"navigationBarTitleText": "直播间"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
,{
|
||||||
|
"path": "pages/room/histroyroom",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "历史直播间",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/plant_grass/index",
|
"path": "pages/plant_grass/index",
|
||||||
"style": {
|
"style": {
|
||||||
|
|||||||
@ -210,6 +210,16 @@
|
|||||||
url: 'https://ceshi-worker-task.lihaink.cn/uploads/files/20231019/20231019151519e8f484737.wgt',
|
url: 'https://ceshi-worker-task.lihaink.cn/uploads/files/20231019/20231019151519e8f484737.wgt',
|
||||||
},
|
},
|
||||||
type: 4,
|
type: 4,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '里海直播',
|
||||||
|
icon: '/static/applet/live.png',
|
||||||
|
data: {
|
||||||
|
id: "__UNI__0E46DAD",
|
||||||
|
url: 'https://lihai001.oss-cn-chengdu.aliyuncs.com/app/__UNI__0E46DAD.wgt',
|
||||||
|
},
|
||||||
|
type: 4,
|
||||||
|
|
||||||
}
|
}
|
||||||
// {
|
// {
|
||||||
// name: '大屏控制',
|
// name: '大屏控制',
|
||||||
|
|||||||
@ -38,6 +38,9 @@
|
|||||||
</zbpSwiper>
|
</zbpSwiper>
|
||||||
|
|
||||||
|
|
||||||
|
<view class="zhibo" @click="zhibo">
|
||||||
|
<image src="@/static/img/zhi.png" mode="aspectFit"></image>
|
||||||
|
</view>
|
||||||
|
|
||||||
<view class="tabs_wrapper">
|
<view class="tabs_wrapper">
|
||||||
<!-- <u-tabs :list="tabsData.list" @click="tabsChange" lineColor="#F84221" keyName="cate_name"
|
<!-- <u-tabs :list="tabsData.list" @click="tabsChange" lineColor="#F84221" keyName="cate_name"
|
||||||
@ -204,6 +207,7 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
onPullDownRefresh() {
|
onPullDownRefresh() {
|
||||||
|
this.where.page=1
|
||||||
this.getCateList()
|
this.getCateList()
|
||||||
this.getGoods(true)
|
this.getGoods(true)
|
||||||
this.Area()
|
this.Area()
|
||||||
@ -309,6 +313,13 @@
|
|||||||
this.$bus.$off('value-updated')
|
this.$bus.$off('value-updated')
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
//直播
|
||||||
|
|
||||||
|
zhibo(){
|
||||||
|
uni.navigateTo({
|
||||||
|
url:'/pages/room/index'
|
||||||
|
})
|
||||||
|
},
|
||||||
//弹出
|
//弹出
|
||||||
open() {
|
open() {
|
||||||
this.$refs.popup.open()
|
this.$refs.popup.open()
|
||||||
@ -741,6 +752,15 @@
|
|||||||
|
|
||||||
// background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
|
// background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
|
||||||
}
|
}
|
||||||
|
.zhibo{
|
||||||
|
height: 130rpx;
|
||||||
|
image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.location {
|
.location {
|
||||||
background-color: #f6f6f6;
|
background-color: #f6f6f6;
|
||||||
|
|||||||
104
pages/room/histroyroom.nvue
Normal file
104
pages/room/histroyroom.nvue
Normal file
@ -0,0 +1,104 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;z-inde:-1;'">
|
||||||
|
<!--
|
||||||
|
1.这里的 swiper 不是用来控制视频滑动的，而是用来控制左右滑动的，如果不需要的可以改成 view
|
||||||
|
2.为了 视频无限加载，已经把 21 行的 appear 去掉了，加上了 loadmore 方法（第10行）
|
||||||
|
3.由于方法比较多，可以采取下面的方式查看代码：
|
||||||
|
（1）Mac：按住 option 键，然后点击方法名，即可跳转到方法
|
||||||
|
（2）windows：按住 Alt 键，然后鼠标左击，即可跳转到方法
|
||||||
|
-->
|
||||||
|
<view class="root">
|
||||||
|
<video ref="videoPlayer" :src="currentSrc" controls @ended="playNext" :object-fit="object_fit" :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;z-inde:-1;'"></video>
|
||||||
|
</view>
|
||||||
|
<sd-float-page :room='room' :msgList='msgList'
|
||||||
|
:style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;position: absolute;' "></sd-float-page>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import sdFloatPage from '@/components/sd-live-page/histroy.nvue';
|
||||||
|
|
||||||
|
import {
|
||||||
|
playbackDetail
|
||||||
|
} from '@/api/live.js'
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
sdFloatPage
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
rtmpSources: [],
|
||||||
|
currentIndex: 0,
|
||||||
|
room: {},
|
||||||
|
wHeight: 0, //获取的屏幕高度🌟💗
|
||||||
|
boxStyle: { //视频，图片封面样式🌟💗
|
||||||
|
'height': 0,
|
||||||
|
'width': 0,
|
||||||
|
},
|
||||||
|
object_fit: 'cover', //视频样式默认包含🌟💗
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
currentSrc() {
|
||||||
|
return this.rtmpSources[this.currentIndex];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
this.room = JSON.parse(decodeURIComponent(options.data));
|
||||||
|
this.platform = uni.getSystemInfoSync().platform
|
||||||
|
this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
|
||||||
|
this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
|
||||||
|
this.wHeight = uni.getSystemInfoSync().screenHeight; //获取屏幕高度
|
||||||
|
this.boxStyle.height = this.wHeight; //改变视频高度
|
||||||
|
this.get()
|
||||||
|
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
// 初始化时播放第一个源
|
||||||
|
this.playCurrent();
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
playCurrent() {
|
||||||
|
this.$refs.videoPlayer.load();
|
||||||
|
this.$refs.videoPlayer.play();
|
||||||
|
},
|
||||||
|
playNext() {
|
||||||
|
this.currentIndex++;
|
||||||
|
if (this.currentIndex >= this.rtmpSources.length) {
|
||||||
|
this.currentIndex = 0; // 回到第一个源
|
||||||
|
}
|
||||||
|
this.playCurrent();
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
get() {
|
||||||
|
let that = this
|
||||||
|
// console.log(this.room)
|
||||||
|
playbackDetail({
|
||||||
|
app_name: 'shop',
|
||||||
|
live_stream_id: this.room.live_stream_id
|
||||||
|
}).then((res) => {
|
||||||
|
console.log(res.data, '1111')
|
||||||
|
|
||||||
|
this.rtmpSources = res.data.playback_url;
|
||||||
|
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
482
pages/room/index.vue
Normal file
482
pages/room/index.vue
Normal file
@ -0,0 +1,482 @@
|
|||||||
|
<template>
|
||||||
|
<view class="view_body">
|
||||||
|
<view>
|
||||||
|
<view class="search_content flex_a_c_j_sb">
|
||||||
|
<view class="flex_a_c">
|
||||||
|
<view class="iconfont icon-sousuo" style="font-size: 39rpx;"></view>
|
||||||
|
<input type="text" v-model="keyword" placeholder="搜索主播或关键字" placeholder-style="font-size: 30rpx;"
|
||||||
|
@input="change">
|
||||||
|
</view>
|
||||||
|
<button class="search_btn" @click="search">搜索</button>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="banner">
|
||||||
|
<view class="banner-detail" v-for="(item,i) in list" :key='i' @click="zhisort(i)">
|
||||||
|
<view class="banner-name">
|
||||||
|
{{item.name}}
|
||||||
|
</view>
|
||||||
|
<view class="banner-t" v-if="isindex==i">
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<scroll-view scroll-top="0" scroll-y="true" class="goods_body_scroll" v-if="isindex==0">
|
||||||
|
<view class="roomsbox">
|
||||||
|
<view class="roomblock" v-for="(room,index) in roomList" :key="index" @click="jump(room)"
|
||||||
|
style="border: 1px solid #e1d9d4;">
|
||||||
|
<image :src="room.cover" mode="aspectFill" v-if="room.cover"></image>
|
||||||
|
<image src="/static/lw/6.gif" mode="aspectFill" v-else></image>
|
||||||
|
<view class="livetitle">{{room.live_name}}</view>
|
||||||
|
<view class="roomstatus-d" v-if="room.status==1" style="background-color: #09BB07;">
|
||||||
|
</view>
|
||||||
|
<view class="roomstatus-d" v-else style="background-color: #fa2306;">
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="roomstatus" style="color: #00B26A;" v-if="room.status==1">直播中
|
||||||
|
</view>
|
||||||
|
<view class="roomstatus" style="color: #fa2306;" v-else>已停播
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</scroll-view>
|
||||||
|
<scroll-view scroll-top="0" scroll-y="true" class="goods_body_scroll" v-if="isindex==1">
|
||||||
|
<view v-for="(pp,index) in roomList" :key="index">
|
||||||
|
<view class="roomsbox-a" v-for="(kk,i) in pp" :key="i">
|
||||||
|
<view class="roomsbox-title">
|
||||||
|
{{i}}
|
||||||
|
</view>
|
||||||
|
<view class="roomsbox">
|
||||||
|
<view class="roomblock" style="border: 1px solid #e1d9d4;" v-for="(room,j) in kk"
|
||||||
|
:key="j" @click="hsitroyjump(room)">
|
||||||
|
<image :src="room.cover" mode="aspectFill" v-if="room.cover"></image>
|
||||||
|
<image src="/static/lw/6.gif" mode="aspectFill" v-else></image>
|
||||||
|
<view class="livetitle">{{room.live_name}}</view>
|
||||||
|
<view class="roomstatus-d" v-if="room.status==1" style="background-color: #09BB07;">
|
||||||
|
</view>
|
||||||
|
<view class="roomstatus-d" v-if="room.status==2"
|
||||||
|
style="background-color: #fa2306;">
|
||||||
|
</view>
|
||||||
|
<view class="roomstatus-d" v-if="room.status==3" style="background-color: #e1d9d4;">
|
||||||
|
</view>
|
||||||
|
<view class="roomstatus" style="color: #00B26A;" v-if="room.status==1">直播中
|
||||||
|
</view>
|
||||||
|
<view class="roomstatus" style="color: #fa2306;" v-else>已停播
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</scroll-view>
|
||||||
|
<view class="noshuju" v-if="roomList.length==0">
|
||||||
|
<emptyPage title="暂无房间信息"></emptyPage>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import emptyPage from '@/components/emptyPage.vue';
|
||||||
|
import {
|
||||||
|
live,
|
||||||
|
playbackList
|
||||||
|
} from '@/api/live.js'
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
emptyPage
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
keyword: '',
|
||||||
|
device_height: 380,
|
||||||
|
page: 1,
|
||||||
|
dataindex: 1,
|
||||||
|
page_data: true,
|
||||||
|
list: [{
|
||||||
|
name: '直播精选'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '历史直播'
|
||||||
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
roomList: [],
|
||||||
|
user: [],
|
||||||
|
index: 0,
|
||||||
|
isGetLoginInfo: true,
|
||||||
|
isindex: 0,
|
||||||
|
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getRoomList()
|
||||||
|
},
|
||||||
|
onShow() {},
|
||||||
|
onReachBottom() {
|
||||||
|
this.getRoomList()
|
||||||
|
},
|
||||||
|
|
||||||
|
onPullDownRefresh: function() {
|
||||||
|
console.log('下拉刷新')
|
||||||
|
this.getRoomList()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
//输入
|
||||||
|
change(e) {
|
||||||
|
// console.log(e)
|
||||||
|
if (e.detail.value.length <= 0) {
|
||||||
|
this.page = 1
|
||||||
|
this.getRoomList()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//查询
|
||||||
|
search() {
|
||||||
|
this.page = 1
|
||||||
|
this.roomList=[]
|
||||||
|
if (this.isindex == 0) {
|
||||||
|
this.getRoomList()
|
||||||
|
} else {
|
||||||
|
this.getbackList()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//分类
|
||||||
|
zhisort(i) {
|
||||||
|
this.isindex = i
|
||||||
|
this.page = 1
|
||||||
|
this.keyword=''
|
||||||
|
this.roomList=[]
|
||||||
|
if (i == 0) {
|
||||||
|
this.getRoomList()
|
||||||
|
} else {
|
||||||
|
this.getbackList()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getbackList: function() {
|
||||||
|
playbackList({
|
||||||
|
page_size: 100,
|
||||||
|
page: this.page,
|
||||||
|
app_name: 'shop',
|
||||||
|
keyword: this.keyword
|
||||||
|
}).then(res => {
|
||||||
|
|
||||||
|
if (res.data.code = 1) {
|
||||||
|
uni.hideLoading()
|
||||||
|
const groupedArray = res.data.lists.reduce((acc, obj) => {
|
||||||
|
const date = obj.date;
|
||||||
|
if (!acc[date]) {
|
||||||
|
acc[date] = [];
|
||||||
|
}
|
||||||
|
acc[date].push(obj);
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
|
||||||
|
this.roomList.push(groupedArray)
|
||||||
|
// 输出结果
|
||||||
|
// console.log(this.roomList);
|
||||||
|
// this.page = this.page + 1
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 拉取房间列表
|
||||||
|
* @return {[type]}
|
||||||
|
* [description]
|
||||||
|
*/
|
||||||
|
getRoomList() {
|
||||||
|
live({
|
||||||
|
page_size: 10,
|
||||||
|
page: this.page,
|
||||||
|
app_name: 'shop',
|
||||||
|
keyword: this.keyword
|
||||||
|
}).then(res => {
|
||||||
|
console.log(res)
|
||||||
|
if (res.data.code = 1) {
|
||||||
|
uni.hideLoading()
|
||||||
|
if (res.data.lists.length > 0) {
|
||||||
|
let list = res.data.lists;
|
||||||
|
let productList = this.$util.SplitArray(list, this.roomList);
|
||||||
|
setTimeout(() => {
|
||||||
|
this.$set(this, 'roomList', productList);
|
||||||
|
}, 500)
|
||||||
|
this.page = this.page + 1
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
//历史直播间
|
||||||
|
hsitroyjump: function(e) {
|
||||||
|
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/room/histroyroom'+'?data=' + encodeURIComponent(JSON.stringify(e))
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
jump: function(e) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/room/spectator' + '?data=' + encodeURIComponent(JSON.stringify(e))
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
page {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.goods_body_scroll {
|
||||||
|
margin-top: 50rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search_content {
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 724rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
padding: 2px 2px 2px 21.05rpx;
|
||||||
|
border-radius: 175rpx;
|
||||||
|
background: #fff;
|
||||||
|
margin-bottom: 21rpx;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 2rpx solid #FCB9AD;
|
||||||
|
margin-top: 30rpx;
|
||||||
|
|
||||||
|
.icon-sousuo {
|
||||||
|
font-size: 26.32rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #c8c7c6;
|
||||||
|
margin-right: 17.54rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search_btn {
|
||||||
|
color: #fff;
|
||||||
|
width: 105.26rpx;
|
||||||
|
height: 56rpx;
|
||||||
|
line-height: 56rpx;
|
||||||
|
background: #f84221;
|
||||||
|
border-radius: 100px;
|
||||||
|
font-size: 28.07rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner {
|
||||||
|
display: flex;
|
||||||
|
padding-left: 28rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-detail {
|
||||||
|
width: 133rpx;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-name {
|
||||||
|
font-size: 33rpx;
|
||||||
|
font-family: PingFang SC-Medium, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
margin-bottom: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-t {
|
||||||
|
width: 46px;
|
||||||
|
height: 0rpx;
|
||||||
|
opacity: 1;
|
||||||
|
border: 2rpx solid #F84221;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noshuju {
|
||||||
|
height: 760upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mico-18 {
|
||||||
|
margin-top: 10upx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roomsbox-title {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-family: PingFang SC-Medium, PingFang SC;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #333333;
|
||||||
|
|
||||||
|
margin-bottom: 30rpx;
|
||||||
|
margin-left: 20rpx;
|
||||||
|
}
|
||||||
|
.roomstatus-d {
|
||||||
|
width: 20upx;
|
||||||
|
height: 20upx;
|
||||||
|
border-radius: 20upx;
|
||||||
|
position: absolute;
|
||||||
|
left: 20upx;
|
||||||
|
top: 20upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roomstatus {
|
||||||
|
position: absolute;
|
||||||
|
left: 40upx;
|
||||||
|
top: 10upx;
|
||||||
|
font-size: 28upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.livetitle {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 20upx;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
height: 70upx;
|
||||||
|
line-height: 70upx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top {
|
||||||
|
display: flex;
|
||||||
|
padding: 20upx;
|
||||||
|
top: 0;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
width: 95%;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top_li {
|
||||||
|
font-size: 32upx;
|
||||||
|
padding: 0 20upx;
|
||||||
|
display: table-cell;
|
||||||
|
/* vertical-align:bottom; */
|
||||||
|
padding-top: 10upx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-lable-box {
|
||||||
|
/* #ifdef APP-PLUS */
|
||||||
|
/* flex: 1; */
|
||||||
|
|
||||||
|
/* #endif */
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
font-size: 40upx;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #333333;
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roomsbox {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roomblock {
|
||||||
|
width: 45%;
|
||||||
|
height: 300upx;
|
||||||
|
border-radius: 10upx;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 20upx;
|
||||||
|
position: relative;
|
||||||
|
margin-left: 2.5%;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right_top_scroll {
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-view {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 30rpx;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
height: 60rpx;
|
||||||
|
line-height: 60rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.view_body {
|
||||||
|
background: #FFFFFF;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mico-14 {
|
||||||
|
margin-right: 4upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noshuju {
|
||||||
|
height: 750upx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noshuju_ico {
|
||||||
|
width: 120upx;
|
||||||
|
height: 80upx;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 300rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.noshuju_ico image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mico-18 {
|
||||||
|
margin-top: 10upx;
|
||||||
|
color: #666666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.create-but {
|
||||||
|
background-color: #1ce0c5;
|
||||||
|
width: 120upx;
|
||||||
|
height: 60upx;
|
||||||
|
line-height: 60upx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 10upx;
|
||||||
|
/* #ifdef MP-WEIXIN */
|
||||||
|
margin-left: 40upx;
|
||||||
|
/* #endif */
|
||||||
|
margin-top: 4upx;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
359
pages/room/spectator.nvue
Normal file
359
pages/room/spectator.nvue
Normal file
@ -0,0 +1,359 @@
|
|||||||
|
<template>
|
||||||
|
<view class="container">
|
||||||
|
<view :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;z-inde:-1;'">
|
||||||
|
<!--
|
||||||
|
1.这里的 swiper 不是用来控制视频滑动的，而是用来控制左右滑动的，如果不需要的可以改成 view
|
||||||
|
2.为了 视频无限加载，已经把 21 行的 appear 去掉了，加上了 loadmore 方法（第10行）
|
||||||
|
3.由于方法比较多，可以采取下面的方式查看代码：
|
||||||
|
（1）Mac：按住 option 键，然后点击方法名，即可跳转到方法
|
||||||
|
（2）windows：按住 Alt 键，然后鼠标左击，即可跳转到方法
|
||||||
|
-->
|
||||||
|
<list @loadmore="getData" @scroll="scrolls" :loadmoreoffset="wHeight*1" :show-scrollbar="false"
|
||||||
|
ref="listBox" :pagingEnabled="true" :scrollable="true">
|
||||||
|
<!-- 循环数据 -->
|
||||||
|
<cell v-for="(item,i) in dataList" :key="i">
|
||||||
|
<!-- 用div把视频模组套起来 -->
|
||||||
|
<div :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'">
|
||||||
|
<!-- <view v-if="Math.abs(k-i)<=1"> -->
|
||||||
|
<view v-if="Math.abs(k-i)<=1">
|
||||||
|
<view class="root">
|
||||||
|
<video :ref="'item'+i" :id="item.id" :loop="true" :autoplay="i == k"
|
||||||
|
:src="item.pull_url" :muted="item.isplay" :enable-progress-gesture="false"
|
||||||
|
:page-gesture="false" :controls="false" :show-loading="true" :is-live='true'
|
||||||
|
@error='vedioerr' :show-fullscreen-btn="false" :show-center-play-btn="false"
|
||||||
|
:style="boxStyle" :object-fit="object_fit" @timeupdate="timeupdate($event,i)">
|
||||||
|
|
||||||
|
</video>
|
||||||
|
<!-- {{item}} {{i}} -->
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<sd-float-page :room='room' :msgList='msgList'
|
||||||
|
:style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;position: absolute;' "></sd-float-page>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</cell>
|
||||||
|
</list>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import list from '@/uni_modules/uview-ui/libs/config/props/list';
|
||||||
|
import sdFloatPage from '@/components/sd-live-page/livepage.nvue';
|
||||||
|
import {
|
||||||
|
VUE_APP_WS_URL
|
||||||
|
} from '@/config/app';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
sdFloatPage
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
imgHost: '',
|
||||||
|
//下面打🌟号的是必须要的基础字段
|
||||||
|
//下面打💗号的是拥有滑动条的必须字段
|
||||||
|
dataList: [
|
||||||
|
'rtmp://live.lihaink.cn/ceshi/ceshi?auth_key=1697453509-0-0-c086ad0c4d8c581e26438a7a99a9f40f',
|
||||||
|
'rtmp://live.lihaink.cn/ceshi/ceshi?auth_key=1697453509-0-0-c086ad0c4d8c581e26438a7a99a9f40f'
|
||||||
|
], //用于数据循环的列表🌟💗
|
||||||
|
wHeight: 0, //获取的屏幕高度🌟💗
|
||||||
|
boxStyle: { //视频，图片封面样式🌟💗
|
||||||
|
'height': 0,
|
||||||
|
'width': 0,
|
||||||
|
},
|
||||||
|
k: 0, //默认为0🌟💗
|
||||||
|
max: 2,
|
||||||
|
playIngIds: [], //正在播放的视频id列队，列队用于处理滑动过快导致的跳频问题🌟💗
|
||||||
|
ready: false, //可忽略
|
||||||
|
isDragging: false, //false代表停止滑动🌟💗
|
||||||
|
refreshing: true, //用于下拉刷新🌟💗
|
||||||
|
windowWidth: 0, //获取屏幕宽度🌟💗
|
||||||
|
windowHeight: 0,
|
||||||
|
dex: [0, 0], //用于判断是上滑还是下滑，第一个存旧值，第二个存新值【目前在1.0.7已经废弃】
|
||||||
|
currents: 0, //用于左右滑动，0代表视频界面，1代表右滑界面🌟💗
|
||||||
|
platform: '', //用于获取操作系统：ios、android🌟💗
|
||||||
|
playIng: false, //用于视频初始化时是否播放，默认不播放🌟💗
|
||||||
|
videoTime: '', //视频总时长，这个主要用来截取时间数值💗
|
||||||
|
videoTimes: '', //视频时长，用这个来获取时间值，例如：00:30这个时间值💗
|
||||||
|
changeTime: '', //显示滑动进度条时变化的时间💗
|
||||||
|
isShowimage: false, //是否显示封面【1.0.4已废弃，但是意思需要记住】
|
||||||
|
currenttimes: 0, //当前时间💗
|
||||||
|
isShowProgressBarTime: false, //是否拖动进度条，如果拖动（true）则显示进度条时间，否则不显示（false）【1.0.4已废弃，但是意思需要记住】
|
||||||
|
ProgressBarOpacity: 0.7, //进度条不拖动时的默认值，就是透明的💗
|
||||||
|
dotWidth: 0, //播放的小圆点，默认没有💗
|
||||||
|
deleteHeight: 0, //测试高度🌟💗
|
||||||
|
percent: 0, //百分小数💗
|
||||||
|
currentPosition: 0, //滑块当前位置💗//2.0已弃用，现已用于后端参数
|
||||||
|
currentPositions: 0, //滑块当前位置的副本💗//2.0已弃用，现已用于后端参数
|
||||||
|
newTime: 0, //跟手滑动后的最新时间💗
|
||||||
|
timeNumber: 0, //🌟💗
|
||||||
|
ProgressBarBottom: 20, //进度条离底部的距离💗
|
||||||
|
object_fit: 'cover', //视频样式默认包含🌟💗
|
||||||
|
mode: 'aspectFit', //图片封面样式🌟💗
|
||||||
|
timeout: "", //🌟用来阻止 setTimeout()方法
|
||||||
|
voice: "", //🌟用来阻止 setTimeout()方法
|
||||||
|
oldVideo: "",
|
||||||
|
isAutoplay: false, //是否开启自动播放(默认不开启)
|
||||||
|
autoplayText: "开启自动播放",
|
||||||
|
msgList: [],
|
||||||
|
room: {},
|
||||||
|
socketTask: null,
|
||||||
|
userName: '',
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
async k(new_k, old_k) { //监听 k 值的变化，可以控制视频的播放与暂停
|
||||||
|
const max = new_k + 2;
|
||||||
|
if (this.max < max) {
|
||||||
|
this.max = max;
|
||||||
|
}
|
||||||
|
// if (this.oldCurrent != this.currentNav) {
|
||||||
|
// this.oldCurrent = this.currentNav
|
||||||
|
// return false
|
||||||
|
// }
|
||||||
|
this.dataList[old_k].playIng = false //如果视频暂停，就加载封面
|
||||||
|
this.dataList[old_k].isplay = true
|
||||||
|
this.dataList[old_k].state = 'pause'
|
||||||
|
// console.log('预留第' + (old_k) + '个视频：' + this.dataList[old_k].community_id)
|
||||||
|
// 2.0版本已经去掉了下面这一句，视频不用暂停，只需要把声音禁止就行
|
||||||
|
uni.createVideoContext(this.dataList[old_k].community_id, this)
|
||||||
|
.pause() //如果视频暂停，那么旧视频停止，这里的this.dataList[old_k].id + '' + old_k，后面加 old_k 是为了每一个视频的 id 值不同，这样就可以大程度的避免串音问题
|
||||||
|
// console.log('已经暂停 --> 第' + (old_k) + '个视频～') //提示
|
||||||
|
this.dataList[new_k].state = 'play'
|
||||||
|
this.dataList[new_k].isplay = false
|
||||||
|
this.dataList[new_k].playIng = true
|
||||||
|
uni.createVideoContext(this.dataList[new_k].community_id, this).play()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
uni.hideLoading();
|
||||||
|
// console.log('回到前台' + this.dataList.length);
|
||||||
|
if (this.dataList.length !== 0) {
|
||||||
|
this.dataList[this.k].state = 'play';
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.createVideoContext(this.dataList[this.k].id, this).play()
|
||||||
|
}, 250)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onHide() {
|
||||||
|
this.dataList[this.k].state = 'pause'; //界面隐藏也要停止播放视频
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.createVideoContext(this.dataList[this.k].community_id, this).pause(); //暂停以后继续播放
|
||||||
|
}, 250)
|
||||||
|
// console.log('到后台');
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
this.platform = uni.getSystemInfoSync().platform
|
||||||
|
this.windowWidth = uni.getSystemInfoSync().screenWidth //获取屏幕宽度
|
||||||
|
this.boxStyle.width = this.windowWidth + 'px' //给宽度加px
|
||||||
|
this.wHeight = uni.getSystemInfoSync().screenHeight; //获取屏幕高度
|
||||||
|
this.boxStyle.height = this.wHeight; //改变视频高度
|
||||||
|
console.log(this.boxStyle.height)
|
||||||
|
this.room = JSON.parse(decodeURIComponent(options.data));
|
||||||
|
this.get()
|
||||||
|
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
Ready() {},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
autoPlay() {
|
||||||
|
this.isAutoplay = !this.isAutoplay;
|
||||||
|
if (!this.isAutoplay) {
|
||||||
|
this.autoplayText = "开启自动播放"
|
||||||
|
uni.showToast({
|
||||||
|
title: "关闭自动播放",
|
||||||
|
icon: 'none',
|
||||||
|
duration: 3000
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.autoplayText = "关闭自动播放"
|
||||||
|
uni.showToast({
|
||||||
|
title: "开启自动播放",
|
||||||
|
icon: 'none',
|
||||||
|
duration: 3000
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getData() {
|
||||||
|
// 这里就是数据加载完以后再向后端发送数据的地方,
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
vedioerr(e) {
|
||||||
|
let timer = null
|
||||||
|
if (e.tye = 'error') {
|
||||||
|
timer = setInterval((res) => {
|
||||||
|
uni.createVideoContext('myVideo', this).play()
|
||||||
|
console.log('重新连接', '1111111111')
|
||||||
|
}, 600000)
|
||||||
|
} else {
|
||||||
|
timer = null
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
touchstart(event) {
|
||||||
|
this.dataList[this.k].isShowimage = true //刚触摸的时候就要显示预览视频图片了
|
||||||
|
this.dataList[this.k].isShowProgressBarTime = true //显示时间线
|
||||||
|
this.ProgressBarOpacity = 1 //让滑块显示起来更明显一点
|
||||||
|
this.dotWidth = 10 //让点显示起来更明显一点
|
||||||
|
},
|
||||||
|
touchend() { //当手松开后，跳到最新时间
|
||||||
|
uni.createVideoContext(this.dataList[this.k].community_id, this).seek(this.newTime)
|
||||||
|
if (this.dataList[this.k].state == 'pause') {
|
||||||
|
this.dataList[this.k].state = 'play'
|
||||||
|
uni.createVideoContext(this.dataList[this.k].community_id, this).play()
|
||||||
|
}
|
||||||
|
this.dataList[this.k].isShowProgressBarTime = false //触摸结束后，隐藏时间线
|
||||||
|
this.dataList[this.k].isShowimage = false //触摸结束后，隐藏时间预览
|
||||||
|
this.ProgressBarOpacity = 0.5 //隐藏起来进度条，不那么明显了
|
||||||
|
this.dotWidth = 0 //隐藏起来进度条，不那么明显了
|
||||||
|
},
|
||||||
|
touchmove(event) { //当手移动滑块时，计算位置、百分小数、新的时间
|
||||||
|
var msg = []
|
||||||
|
if (this.videoTime !== '') {
|
||||||
|
msg = this.videoTime.split(':')
|
||||||
|
}
|
||||||
|
var timeNumber = Number(msg[0]) * 60 + Number(msg[1])
|
||||||
|
this.currentPositions = event.changedTouches[0].screenX
|
||||||
|
this.percent = this.currentPositions / this.windowWidth
|
||||||
|
this.newTime = this.percent * timeNumber
|
||||||
|
this.currenttimes = parseInt(this.newTime)
|
||||||
|
let theTime = this.newTime
|
||||||
|
let middle = 0; // 分
|
||||||
|
if (theTime > 60) {
|
||||||
|
middle = parseInt(theTime / 60);
|
||||||
|
theTime = parseInt(theTime % 60);
|
||||||
|
}
|
||||||
|
this.changeTime =
|
||||||
|
`${Math.round(middle)>9?Math.round(middle):'0'+Math.round(middle)}:${Math.round(theTime)>9?Math.round(theTime):'0'+Math.round(theTime)}`
|
||||||
|
},
|
||||||
|
timeupdate(event, index) { //计算滑块当前位置，计算当前百分小数
|
||||||
|
if (index == this.k) {
|
||||||
|
var currenttime = event.detail.currentTime
|
||||||
|
this.timeNumber = Math.round(event.detail.duration)
|
||||||
|
this.getTime()
|
||||||
|
this.percent = currenttime / this.timeNumber
|
||||||
|
this.currentPosition = this.windowWidth * this.percent
|
||||||
|
let theTime = currenttime
|
||||||
|
let middle = 0; // 分
|
||||||
|
if (theTime > 60) {
|
||||||
|
middle = parseInt(theTime / 60);
|
||||||
|
theTime = parseInt(theTime % 60);
|
||||||
|
}
|
||||||
|
this.changeTime =
|
||||||
|
`${Math.round(middle)>9?Math.round(middle):'0'+Math.round(middle)}:${Math.round(theTime)>9?Math.round(theTime):'0'+Math.round(theTime)}`
|
||||||
|
//自动切换视频
|
||||||
|
if (this.isAutoplay) { //true,代表自动播放
|
||||||
|
if (Math.round(currenttime) == this.timeNumber - 1) {
|
||||||
|
const dom = uni.requireNativePlugin('dom')
|
||||||
|
let doms = 'item' + (this.k + 1)
|
||||||
|
setTimeout(() => {
|
||||||
|
let el = this.$refs[doms][0]
|
||||||
|
dom.scrollToElement(el, {
|
||||||
|
offset: 0,
|
||||||
|
animated: true
|
||||||
|
})
|
||||||
|
}, 500)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getTime() { //得到时间函数
|
||||||
|
this.videoTime = this.formatSeconds(this.timeNumber);
|
||||||
|
var msg = []
|
||||||
|
if (this.videoTime !== '') {
|
||||||
|
msg = this.videoTime.split(':')
|
||||||
|
}
|
||||||
|
this.videoTimes = `${msg[0]>9?msg[0]:'0'+msg[0]}:${msg[1]>9?msg[1]:'0'+msg[1]}`;
|
||||||
|
},
|
||||||
|
formatSeconds(value) { //获取时间函数
|
||||||
|
let theTime = parseInt(value); // 秒
|
||||||
|
let middle = 0; // 分
|
||||||
|
if (theTime > 60) {
|
||||||
|
middle = parseInt(theTime / 60);
|
||||||
|
theTime = parseInt(theTime % 60);
|
||||||
|
}
|
||||||
|
return `${middle>9?middle:middle}:${theTime>9?theTime:theTime}`;
|
||||||
|
},
|
||||||
|
moreVideo(index) {
|
||||||
|
|
||||||
|
},
|
||||||
|
toVideo(index) {
|
||||||
|
|
||||||
|
},
|
||||||
|
scrolls(event) {
|
||||||
|
|
||||||
|
this.showManage = false;
|
||||||
|
this.isDragging = event.isDragging;
|
||||||
|
if (!event.isDragging) { //isDragging：判断用户是不是在滑动，滑动：true，停止滑动：false。我们要用户停止滑动时才给 k 赋值，这样就可以避免很多麻烦
|
||||||
|
var i = Math.round(Math.abs(event.contentOffset.y) / (this.wHeight - this.deleteHeight +
|
||||||
|
1)) //先用绝对值取出滑动的距离，然后除以屏幕高度，取一个整，就知道你现在滑动到哪一个视频了
|
||||||
|
if (i !== this.k) { //这里加判断是因为这个方法会执行很多次，会造成重复请求，所以这里写一个限制
|
||||||
|
if (uni.getSystemInfoSync().platform == 'ios') {
|
||||||
|
this.k = i //判断了用户没有滑动，确认了用户的确是在看这个视频，然后就赋值啦
|
||||||
|
this.dataList[this.k].state = 'play'
|
||||||
|
// console.log('正在播放 --> 第' + (this.k + 1) + '个视频～')
|
||||||
|
} else {
|
||||||
|
clearTimeout(this.timers);
|
||||||
|
this.timers = setTimeout(() => {
|
||||||
|
this.k = i //判断了用户没有滑动，确认了用户的确是在看这个视频，然后就赋值啦
|
||||||
|
this.dataList[this.k].state = 'play'
|
||||||
|
// console.log('正在播放 --> 第' + (this.k + 1) + '个视频～')
|
||||||
|
}, 80)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
get() {
|
||||||
|
let that = this
|
||||||
|
var msg = [this.room];
|
||||||
|
// console.log(this.room)
|
||||||
|
for (let i = 0; i < msg.length; i++) {
|
||||||
|
msg[i]['isMore'] = false
|
||||||
|
msg[i]['playIng'] = false
|
||||||
|
msg[i]['state'] = false
|
||||||
|
msg[i]['isplay'] = false
|
||||||
|
msg[i]['loading'] = false
|
||||||
|
msg[i]['id'] = msg[i]['live_stream_id'].toString()
|
||||||
|
}
|
||||||
|
this.dataList = msg;
|
||||||
|
|
||||||
|
if (this.dataList.length !== 0) {
|
||||||
|
|
||||||
|
this.dataList[this.k].state = 'play';
|
||||||
|
uni.createVideoContext(this.dataList[this.k].id, this).play()
|
||||||
|
this.page = that.page + 1
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(this.dataList, this.dataList[this.k].id, 222222)
|
||||||
|
},
|
||||||
|
onpullingdown() {
|
||||||
|
this.refreshing = true
|
||||||
|
},
|
||||||
|
onrefresh() {
|
||||||
|
setTimeout(() => {
|
||||||
|
this.refreshing = false
|
||||||
|
}, 1000)
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
onReachBottom() {
|
||||||
|
uni.$emit('onReachBottom');
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
BIN
static/applet/live.png
Normal file
BIN
static/applet/live.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
static/img/X.png
Normal file
BIN
static/img/X.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 897 B |
BIN
static/img/close.png
Normal file
BIN
static/img/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1006 B |
BIN
static/img/colse1.png
Normal file
BIN
static/img/colse1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
static/img/gn.png
Normal file
BIN
static/img/gn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
static/img/jb.png
Normal file
BIN
static/img/jb.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
static/img/li.png
Normal file
BIN
static/img/li.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
static/img/shanpin.png
Normal file
BIN
static/img/shanpin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
static/img/zhi.png
Normal file
BIN
static/img/zhi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
71
utils/requestc.js
Normal file
71
utils/requestc.js
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
// +----------------------------------------------------------------------
|
||||||
|
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||||||
|
// +----------------------------------------------------------------------
|
||||||
|
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
|
||||||
|
// +----------------------------------------------------------------------
|
||||||
|
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||||||
|
// +----------------------------------------------------------------------
|
||||||
|
// | Author: CRMEB Team <admin@crmeb.com>
|
||||||
|
// +----------------------------------------------------------------------
|
||||||
|
import {
|
||||||
|
HTTP_REQUEST_URL_FIVE,
|
||||||
|
HEADER,
|
||||||
|
TOKENNAME
|
||||||
|
} from '@/config/app.js';
|
||||||
|
|
||||||
|
import store from '../store';
|
||||||
|
/**
|
||||||
|
* 发送请求
|
||||||
|
*/
|
||||||
|
function baseRequest(url, method, data, {
|
||||||
|
noAuth = false,
|
||||||
|
noVerify = false
|
||||||
|
}) {
|
||||||
|
let Url = HTTP_REQUEST_URL_FIVE,
|
||||||
|
header = HEADER;
|
||||||
|
if (store.state.app.token) header[TOKENNAME] = 'Bearer ' + store.state.app.token;
|
||||||
|
|
||||||
|
return new Promise((reslove, reject) => {
|
||||||
|
uni.request({
|
||||||
|
url: Url + '/api/' + url,
|
||||||
|
method: method || 'GET',
|
||||||
|
header: header,
|
||||||
|
data: data || {},
|
||||||
|
success: (res) => {
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
if (noVerify)
|
||||||
|
reslove(res.data, res);
|
||||||
|
else if (res.data.status == 200)
|
||||||
|
reslove(res.data, res);
|
||||||
|
else if ([410000, 410001, 410002, 40000].indexOf(res.data.status) !== -1) {
|
||||||
|
|
||||||
|
reject(res.data);
|
||||||
|
} else if (res.data.code==0||res.data.code==1) {
|
||||||
|
reslove(res.data, res);
|
||||||
|
}else if (res.data.status == 501) {
|
||||||
|
uni.reLaunch({
|
||||||
|
url: '/pages/error/index'
|
||||||
|
})
|
||||||
|
reject(res.data);
|
||||||
|
} else
|
||||||
|
reject(res.data.message || '系统错误');
|
||||||
|
},
|
||||||
|
fail: (message) => {
|
||||||
|
console.log(url, method, data)
|
||||||
|
reject('请求失败',message);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const request = {};
|
||||||
|
|
||||||
|
['options', 'get', 'post', 'put', 'head', 'delete', 'trace', 'connect'].forEach((method) => {
|
||||||
|
request[method] = (api, data, opt) => baseRequest(api, method, data, opt || {})
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default request;
|
||||||
Loading…
x
Reference in New Issue
Block a user