demingshangjia/pages/release/zhibo.nvue
2020-11-09 09:48:34 +08:00

846 lines
28 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div>
<live-pusher id='livePusher' ref="livePusher" class="livePusher" :url="url"
mode="FHD" :muted="false" :enable-camera="true" :auto-focus="true" :beauty="meiyan + 1" whiteness="0"
aspect="9:16" @statechange="statechange" @netstatus="netstatus" @error = "error"
:style="{'height':height + 'px'}"
></live-pusher>
<div class="bottom" :style="{'height':height }" v-if="show" @click="show = false">
<div class="tanchuceng" @click="zuzhi">
<div class="head">
<div style="flex-direction: row;align-items:center">
<text class="title">全部商品</text>
<text class="num">{{list.length}}件</text>
</div>
<!-- <div class="add">
<text style="font-size:28rpx;color: #fff;text-align:center">添加/管理商品</text>
</div> -->
</div>
<list class="list">
<cell class="item" v-for="(i,j) in list" @click="xuanzhong(j)">
<image class="shopimg" :src="i.goods_image"></image>
<div class="info">
<div>
<text style="font-size:26rpx;colro:#333;margin-top:12rpx;lines:1;text-overflow:ellipsis">{{i.goods_name}}</text>
<text style="font-size:24rpx;color:#333;margin-top:14rpx;lines:1;text-overflow:ellipsis">{{i.goods_advword}}</text>
</div>
<div style="flex-direction: row; align-items: flex-end;">
<text style="font-size:28rpx;color:#FF3131">¥{{i.goods_price}}</text>
<text style="font-size:26rpx;color:#999">¥{{i.goods_marketprice}}</text>
</div>
</div>
<image :src="'../../static/image/release/' + (i.putaway == 1 ? 'on' : 'off') + '.png'" style="width:55rpx;height:35rpx;margin-top:120rpx;margin-left:150rpx"></image>
</cell>
</list>
</div>
</div>
<div v-if="zhibo" class="user">
</div>
<div v-if="zhibo" style="position: fixed;top: 60rpx;left: 30rpx;flex-direction: row;align-items:center">
<image class="userhead" :src="info.member_avatar"></image>
<div class="userinfo">
<text class="username">{{info.member_nickname}}</text>
<text class="username" style="font-size:20rpx">{{time}} | {{room.onlineUsers.users.length - 1 < 0 ? 0 : room.onlineUsers.users.length - 1}}</text>
</div>
</div>
<image v-if="zhibo" class="closeimg" src="../../static/image/close.png" @click="closes"></image>
<image v-if="zhibo" class="menuimg" src="../../static/image/menu.png" @click="tool = true"></image>
<image v-if="zhibo && list.length != 0" class="shoptapimg" @click="xianshi" src="../../static/image/shop.png" ></image>
<text v-if="zhibo && fen" style="font-size:26rpx;color:#fff;width:512rpx;position:fixed;left:30rpx;top:793rpx;">本平台提倡绿色健康直播,严禁在平台内外出现诱导未成年人诈骗、赌博、低俗色情、吸烟酗酒等不当行为,若有违反,将向相关部门依法追究您的法律责任。如因此给平台造成损失,有权向您全额追偿。
</text>
<div v-if="zhibo" class="danmulist">
<text class="danmuitem" v-for="(i,j) in danmulist" :key="j">{{i.senderNickname}}:{{i.content}}</text>
</div>
<div class="bottom" :style="{'height':height + 'px'}" v-if="tool" @click="tool = false">
<view class="menu" @click="zuzhi">
<view class="menuback"></view>
<text class="menutitle">直播工具</text>
<view class="menutool">
<view class="menutoolitem" @click="switchCamera">
<image src="../../static/images/fanzhuan.png" class="menutoolitemimg"></image>
<text class="menutoolitemtitle">翻转</text>
</view>
<picker @change="bindPickerChange" :value="meiyan" :range="[1,2,3,4,5,6,7,8,9]">
<view class="menutoolitem">
<image src="../../static/images/meiyan.png" class="menutoolitemimg"></image>
<text class="menutoolitemtitle">美颜</text>
</view>
</picker>
</view>
</view>
</div>
<div class="jieshu" v-if="!zhibo" :style="{'height':height + 'px'}">
<div class="jieshuback" :style="{'height':height + 'px'}" @click="closes1"></div>
<image class="closeimg" src="../../static/image/cloneb.png" @click="closes"></image>
<text class="jieshutitle">徳铭阳光在线</text>
<image class="jieshuheadimg" @click="closes1" :src="info.member_avatar"></image>
<text class="jieshuusername">{{info.member_nickname}}</text>
<div class="jieshubox">
<view class="jieshuboxitem">
<text style="color:#fff;font-size:30rpx">{{jieshu.newfans}}</text>
<text style="color:#fff;font-size:30rpx;margin-top:10rpx">新粉丝</text>
</view>
<view class="jieshuboxitem">
<text style="color:#fff;font-size:30rpx">{{jieshu.headcount}}</text>
<text style="color:#fff;font-size:30rpx;margin-top:10rpx">观看人数</text>
</view>
<view class="jieshuboxitem" v-if="list.length != 0">
<text style="color:#fff;font-size:30rpx">RMB {{jieshu.sales_amount}}</text>
<text style="color:#fff;font-size:30rpx;margin-top:10rpx">直播销量</text>
</view>
<view class="jieshuboxitem" v-if="list.length != 0">
<text style="color:#fff;font-size:30rpx">{{jieshu.buy_num}}</text>
<text style="color:#fff;font-size:30rpx;margin-top:10rpx">购买人数</text>
</view>
</div>
</div>
<!-- <button class="btn" @click="start">开始推流1</button>
<button class="btn" @click="pause">暂停推流</button>
<button class="btn" @click="resume">resume</button>
<button class="btn" @click="stop">停止推流</button>
<button class="btn" @click="snapshot">快照</button>
<button class="btn" @click="startPrediv">开启摄像头预览</button>
<button class="btn" @click="stopPrediv">关闭摄像头预览</button>
rtmp://107268.livepush.myqcloud.com/live/26?txSecret=826e36f52669ebf9290644b82a1d8b33&txTime=5F1A84E4
<button class="btn" @click="switchCamera">切换摄像头</button> -->
</div>
</template>
<style lang="scss" scoped>
.jieshuboxitem{
width: 210rpx;
height: 120rpx;
align-items: center;
justify-content: center;
}
.jieshubox{
width: 438rpx;
height: 288rpx;
border-width: 1rpx;
border-color: #fff;
margin-top: 78rpx;
flex-direction: row;
flex-wrap: wrap;
}
.jieshuusername{
font-size: 30rpx;
margin-top: 31rpx;
color: #fff;
}
.jieshuheadimg{
width: 154rpx;
height: 154rpx;
border-radius: 77rpx;
}
.jieshutitle{
font-size: 30rpx;
color:#fff;
width: 350rpx;
position: absolute;
top: 70rpx;
left: 31rpx;
height: 31rpx;
}
.jieshuback{
background-color: #000;
opacity: 0.8;
position: absolute;
left: 0;
top: 0;
width: 750rpx;
}
.jieshu{
z-index: 9999;
position: fixed;
top: 0;
left: 0;
width: 750rpx;
align-items: center;
justify-content: center;
}
.shoptapimg{
width: 65rpx;
height: 65rpx;
position: fixed;
right: 26rpx;
bottom: 24rpx;
}
.menuimg{
width: 60rpx;
height: 55rpx;
position: fixed;
left: 26rpx;
bottom: 24rpx;
}
.closeimg{
position: absolute;
top: 70rpx;
right: 31rpx;
width: 51rpx;
height: 51rpx;
padding:10rpx;
z-index:99999;
}
.username{
font-size: 24rpx;
color: #fff;
lines:1;
text-overflow:ellipsis
}
.userinfo{
height: 60rpx;
margin-left: 20rpx;
justify-content: space-between;
width: 200rpx;
}
.userhead{
width: 70rpx;
height: 70rpx;
// position: fixed;
// top: 60rpx;
// left: 30rpx;
border-radius: 35rpx;
}
.user{
width: 308rpx;
height: 70rpx;
border-radius: 35rpx;
background-color: #000;
opacity:0.2;
position: fixed;
top: 60rpx;
left: 30rpx;
}
.info{
height: 160rpx;
justify-content: space-between;
margin-left: 10rpx;
width: 304rpx;
}
.shopimg{
width: 160rpx;
height: 160rpx;
}
.item{
width: 690rpx;
height: 200rpx;
border-bottom-width: 2rpx;
border-style: solid;
border-color: #ECECEC;
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
}
.list{
width: 750rpx;
height: 694rpx;
padding-left: 30rpx;
padding-right: 30rpx;
}
.add{
width: 221rpx;
height: 40rpx;
background-color: #FF780F;
border-radius: 20rpx;
justify-content: center;
margin-right: 30rpx;
}
.num{
font-size: 26rpx;
color: #FF3131;
margin-left: 30rpx;
}
.bottom{
width: 750rpx;
position: fixed;
top:0;
z-index: 10;
}
.head{
width: 750rpx;
height: 88rpx;
border-bottom-width: 2rpx;
border-style: solid;
border-color: #ECECEC;
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.title{
font-size: 30rpx;
color:#333;
margin-left: 30rpx;
}
.tanchuceng{
width: 750rpx;
height: 782rpx;
position: fixed;
bottom: 0;
border-top-left-radius:20rpx;
border-top-left-radius:20rpx;
background-color: #fff;
transition: bottom 0.5s;
z-index: 20;
}
.menu{
width: 750rpx;
height: 335rpx;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
overflow: hidden;
position: fixed;
bottom: 0;
left: 0;
}
.menuback{
background-color: #000;
opacity: 0.8;
position: absolute;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
overflow: hidden;
top: 0;
left: 0;
width: 750rpx;
height: 335rpx;
}
.menutitle{
font-size: 30rpx;
color: #fff;
margin-left: 30rpx;
margin-top: 30rpx;
}
.menutool{
flex-direction: row;
margin-top: 59rpx;
margin-left: 30rpx;
}
.menutoolitem{
align-items: center;
margin-right: 60rpx;
}
.menutoolitemtitle{
margin-top: 30rpx;
font-size: 28rpx;
color: #fff;
}
.menutoolitemimg{
width: 100rpx;
height: 100rpx;
}
.danmulist{
position: fixed;
left: 30rpx;
bottom: 118rpx;
width: 690rpx;
}
.danmuitem{
font-size: 30rpx;
color: #fff;
flex-direction: column-reverse;
/* #ifndef APP-PLUS-NVUE */
word-wrap:anywhere;
/* #endif */
font-weight: bold;
}
.livePusher{
width: 750rpx;
}
</style>
<script>
const ChatRoomService =require('../../static/chatservice');
export default {
data: {
fil: true,
url:'',
height:0,
show:false,
list:[],
info:{},
im:{},
chatroom_id:0,
live_id:0,
tool:false,
meiyan:0,
time:'00:00:00',
room:{},
chatRoomService:{},
danmulist:[],
zhibo:true,
jieshu:{},
renshumax:0,
changeLiveRealtimeNumber:{},
fen:true
},
onLaunch: function() {
console.log('App Launch');
},
onShow: function() {
if(!this.zhibo){
return ;
}
this.stop()
this.startPreview()
this.start()
// var message = {
// senderNickname : this.room.currentUser.nickname ,
// type : 1,
// content : '重连'
// }
// this.chatRoomService.sendMessages(this.room.id, message);
},
onHide: function() {
console.log('App Hide');
this.chatRoomService.warrings = ()=>{};
},
//模拟onshow生命周期
created() {
//监听当前窗口显示
currentWebview.addEventListener('show',e=>{
console.log('search show');
this.startPreview()
this.start()
})
},
//摧毁之前的声明周期
beforeDestroy() {
//移除监听事件
console.log(123)
currentWebview.removeEventListener('show',e=>{})
},
onReady() {
// 注意需要在onReady中 或 onLoad 延时
let that = this
setTimeout(()=>{
uni.getSystemInfo({
success(a){
console.log(a.windowHeight,1212)
that.height = a.windowHeight
// that.start()
setTimeout(()=>{
that.context = uni.createLivePusherContext("livePusher", that);
that.startPreview()
},500)
}
})
},500)
},
onBackPress(options) {
if (options.from === 'navigateBack' || !this.zhibo) {
return false;
}
this.closes();
return true;
},
onLoad(a){
console.log(getApp().globalData.im)
uni.setKeepScreenOn({
keepScreenOn: true
});
this.url = a.url.replace("*","&")
let that = this
const token = uni.getStorageSync('token');
console.log('Bearer' + " " + token)
this.chatroom_id = a.id
this.live_id = a.live_id
uni.request({
url:"https://mall.dmygkeji.com/storeapi/Streaming/liveStreamList",
method:"POST",
header:{
'Authorization' : 'Bearer' + " " + token
},
success(res){
console.log(res)
that.list= res.data.data
}
})
uni.request({
url:"https://mall.dmygkeji.com/storeapi/member/memberInfo",
method:"POST",
header:{
'Authorization' : 'Bearer' + " " + token
},
success(res){
console.log(res.data)
that.info = res.data.data.memberInfo
console.log(uni.getStorageSync('userinfo'),123)
//当前用户
var currentUser = {
id : Date.parse(new Date()) + "",
nickname : res.data.data.memberInfo.member_nickname + "",
avatar: res.data.data.memberInfo.member_avatar
};
var room = {
id : a.id + "",
name : a.id + ""
};
that.chatRoomService = getApp().globalData.im
console.log(room,currentUser)
//构造chatRoomService
that.chatRoomService.subscribeRoomMessage(room,currentUser)
that.chatRoomService.initialWhenNewMessage(that.whenNewMessage);
that.chatRoomService.warrings = that.jinggao
//获取当前聊天室数据
that.room = that.chatRoomService.room;
console.log(that.room)
that.chatRoomService.initialWhenOnlineUserChange(that.renqu)
}
})
let shi = 0;
let fen = 0;
let miao = 0;
setInterval(() => {
shi = parseInt(shi)
fen = parseInt(fen)
miao = parseInt(miao)
miao = miao + 1
// console.log(miao)
if(fen > 0){
that.fen = false;
}
if(miao == 60){
miao = 0;
fen +=1
}
if(fen == 60){
shi += 1
fen = 0
}
if(shi < 10){
shi = '0' + shi
}
if(fen < 10){
fen = '0' + fen
}
if(miao < 10){
miao = '0' + miao
}
that.time = shi + ":" + fen + ":" + miao
}, 1000);
setInterval(()=>{
console.log("定时")
uni.request({
url:"https://mall.dmygkeji.com/storeapi/Streaming/changeLiveRealtimeNumber",
method:"POST",
header:{
'Authorization' : 'Bearer' + " " + token
},
data:{
live_id:that.live_id,
realtime_number: that.room.onlineUsers.users.length - 1 < 0 ? 0 : that.room.onlineUsers.users.length - 1
},
success(res){
console.log(JSON.stringify(res))
}
})
},
10 * 1000)
// var roomToken = JSON.parse(options.roomToken);
// //获取当前聊天室数据
// this.room = this.chatRoomService.room;
// var config = {
// appkey: 'mgb7ka1',
// debug:true
// };
// var im = RongIMLib.init(config);
// var conversationList = []; // 当前已存在的会话列表
// im.watch({
// conversation: function(event){
// var updatedConversationList = event.updatedConversationList; // 更新的会话列表
// console.log('更新会话汇总:', updatedConversationList);
// console.log('最新会话列表:', im.Conversation.merge({
// conversationList,
// updatedConversationList
// }));
// },
// message: function(event){
// var message = event.message;
// console.log('收到新消息:', message);
// },
// status: function(event){
// var status = event.status;
// console.log('连接状态码:', status);
// }
// });
// var user = {
// token: uni.getStorageSync('rongyun')
// };
// console.log(user,123)
// im.connect(user).then(function(user) {
// console.log('链接成功, 链接用户 id 为: ', user.id);
// }).catch(function(error) {
// console.log('链接失败: ', error.code, error);
// });
// var chatRoom = im.ChatRoom.get({
// id: a.id
// })
// chatRoom.join({
// count: 20 // 进入后, 自动拉取 20 条聊天室最新消息
// }).then(function() {
// console.log('加入聊天室成功');
// }).catch((err)=>{
// console.log(err,262)
// })
},
methods: {
jinggao(text){
console.log(text)
if(text.message_type == 1){
uni.showModal({
title: '警告',
content: text.content,
showCancel:false,
success: function (res) {
}
});
}else if(text.message_type == 2){
uni.showModal({
title: '警告',
content: text.content,
showCancel:false,
success: function (res) {
uni.navigateBack({
delta: 1
});
}
});
this.stop()
}
},
renqu(res){
if(res.users.length > this.renqu){
this.renqu = res.users.length
}
this.$forceUpdate()
},
whenNewMessage (message) {//新消息监听
// if(message.type == this.room.MessageType.PROP){
// this.propAnimation(parseInt(message.content))
// }
// setTimeout(() => {
// this.contentPosition = 'message-box'+(this.room.messages.length-1);
// }, 300)
console.log(message)
this.danmulist.push(message)
if(this.danmulist.length > 7){
this.danmulist = this.danmulist.slice(this.danmulist.length - 7)
}
},
bindPickerChange(a){
console.log(a.detail.value)
this.meiyan = a.detail.value
uni.showToast({
title: '切换成功',
duration: 2000
});
},
closes1() {
console.log(111);
},
closes(){
console.log(this.zhibo)
if(!this.zhibo){
uni.navigateBack({
delta:1
});
return ;
}
this.chatRoomService.warrings = ()=>{};
const token = uni.getStorageSync('token');
let that = this
console.log(that.url)
uni.showModal({
title: '提示',
content: '是否关闭直播',
success: function (res) {
if (res.confirm) {
uni.request({
url:"https://mall.dmygkeji.com/storeapi/Streaming/destroyChatRoom",
data:{
chatroom_id:that.chatroom_id,
live_id:that.live_id,
url: that.url
},
method:"POST",
header:{
"Authorization" : 'Bearer' + " " + token
},
success(res){
console.log(res)
that.stop()
that.jieshu = res.data.data
that.zhibo = false
// uni.navigateBack({
// delta: 1
// });
// that.list= res.data.data
}
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
statechange(e) {
console.log("statechange:" + JSON.stringify(e));
console.log(e)
},
netstatus(e) {
// console.log("netstatus:" + JSON.stringify(e));
},
error(e) {
console.log("error:" + JSON.stringify(e));
},
start: function() {
console.log("开始")
console.log(this.url)
this.context.start({
success: (a) => {
console.log("livePusher.start:" + JSON.stringify(a));
}
});
},
close: function() {
this.context.close({
success: (a) => {
console.log("livePusher.close:" + JSON.stringify(a));
}
});
},
snapshot: function() {
this.context.snapshot({
success: (e) => {
console.log(JSON.stringify(e));
}
});
},
resume: function() {
this.context.resume({
success: (a) => {
console.log(this.url + '12')
console.log("livePusher.resume:" + JSON.stringify(a));
}
});
},
pause: function() {
this.context.pause({
success: (a) => {
console.log("livePusher.pause:" + JSON.stringify(a));
}
});
},
stop: function() {
this.context.stop({
success: (a) => {
console.log(JSON.stringify(a));
}
});
},
switchCamera: function() {
this.context.switchCamera({
success: (a) => {
console.log("livePusher.switchCamera:" + JSON.stringify(a));
}
});
},
startPreview: function() {
let that = this
this.context.startPreview({
success: (a) => {
console.log("livePusher.startPreview:" + JSON.stringify(a));
that.start()
}
});
},
stopPreview: function() {
this.context.stopPreview({
success: (a) => {
console.log("livePusher.stopPreview:" + JSON.stringify(a));
}
});
},
xianshi(){
this.show = true;
console.log(111)
},
guanbi(){
this.show = false
console.log(123)
},
zuzhi(event){
event.stopPropagation();
},
xuanzhong(i){
this.list[i].putaway = this.list[i].putaway == 0 ? 1 : 0
const token = uni.getStorageSync('token');
let arr = []
for(let i in this.list){
if(this.list[i].putaway == 1){
arr.push(this.list[i].goods_id)
}
}
console.log(arr.join(','))
let that = this
uni.request({
url:"https://mall.dmygkeji.com/storeapi/Streaming/updateGoods",
method:"POST",
data:{
goods_id:arr.join(',')
},
header:{
'Authorization' : 'Bearer' + " " + token
},
success(res){
console.log(res)
uni.request({
url:"https://mall.dmygkeji.com//storeapi/Streaming/liveStreamList",
method:"POST",
header:{
'Authorization' : 'Bearer' + " " + token
},
success(res){
console.log(res)
that.list= res.data.data
}
})
}
})
}
}
}
</script>