直播
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 httpApiThree
|
||||
let httpApiFour
|
||||
let httpApiFive
|
||||
|
||||
// 在打包之前请检查当前环境是否正确
|
||||
const env = 'dev'; // 开发
|
||||
@ -31,6 +32,7 @@ switch (env) {
|
||||
httpApiTwo = "https://nk.lihaink.cn"
|
||||
httpApiThree = 'http://ceshi-oa.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
|
||||
// let wsApi = 'ws://192.168.3.20:8324'
|
||||
let wsApi = 'wss://shop.lihaink.cn'
|
||||
let wsApi_one = 'wss://ceshi-zhibo.lihaink.cn/chat_room'
|
||||
module.exports = {
|
||||
// 请求域名 格式： https://您的域名
|
||||
// #ifdef MP || APP-PLUS
|
||||
@ -47,19 +50,23 @@ module.exports = {
|
||||
HTTP_REQUEST_URL_TWO: httpApiTwo,
|
||||
HTTP_REQUEST_URL_THREE: httpApiThree,
|
||||
HTTP_REQUEST_URL_FOUR: httpApiFour,
|
||||
HTTP_REQUEST_URL_FIVE: httpApiFive,
|
||||
VUE_APP_WS_URL: `${wsApi}?type=user`,
|
||||
VUE_APP_WS_URL_ONE:wsApi_one,
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
//H5接口是浏览器地址
|
||||
HTTP_REQUEST_URL: process.env.NODE_ENV == 'development'? httpApi : window.location.protocol + "//" + window.location.host,
|
||||
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',
|
||||
|
||||
// 聊天长连接地址
|
||||
VUE_APP_WS_URL: wsApi ? `${wsApi}?type=user` : VUE_APP_WS_URL,
|
||||
// #endif
|
||||
openPlantGrass: openPlantGrass,
|
||||
|
||||
HEADER: {
|
||||
'content-type': 'application/json',
|
||||
//#ifdef H5
|
||||
|
||||
21
pages.json
21
pages.json
@ -64,6 +64,27 @@
|
||||
"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",
|
||||
"style": {
|
||||
|
||||
@ -210,6 +210,16 @@
|
||||
url: 'https://ceshi-worker-task.lihaink.cn/uploads/files/20231019/20231019151519e8f484737.wgt',
|
||||
},
|
||||
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: '大屏控制',
|
||||
|
||||
@ -38,6 +38,9 @@
|
||||
</zbpSwiper>
|
||||
|
||||
|
||||
<view class="zhibo" @click="zhibo">
|
||||
<image src="@/static/img/zhi.png" mode="aspectFit"></image>
|
||||
</view>
|
||||
|
||||
<view class="tabs_wrapper">
|
||||
<!-- <u-tabs :list="tabsData.list" @click="tabsChange" lineColor="#F84221" keyName="cate_name"
|
||||
@ -204,6 +207,7 @@
|
||||
},
|
||||
|
||||
onPullDownRefresh() {
|
||||
this.where.page=1
|
||||
this.getCateList()
|
||||
this.getGoods(true)
|
||||
this.Area()
|
||||
@ -309,6 +313,13 @@
|
||||
this.$bus.$off('value-updated')
|
||||
},
|
||||
methods: {
|
||||
//直播
|
||||
|
||||
zhibo(){
|
||||
uni.navigateTo({
|
||||
url:'/pages/room/index'
|
||||
})
|
||||
},
|
||||
//弹出
|
||||
open() {
|
||||
this.$refs.popup.open()
|
||||
@ -741,6 +752,15 @@
|
||||
|
||||
// background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
|
||||
}
|
||||
.zhibo{
|
||||
height: 130rpx;
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.location {
|
||||
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