demingshangjia/pages/release/zhibo.nvue
2020-08-27 09:52:43 +08:00

789 lines
26 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" class="shoptapimg" @click="xianshi" src="../../static/image/shop.png"></image>
<text v-if="zhibo" style="font-size:26rpx;color:#fff;width:512rpx;position:fixed;left:30rpx;top:793rpx">德铭阳光在线绿色直播请遵循相关法律法规警察叔叔24小时巡查哦。为了保障直播系统稳定现将全局开放防主播沉迷功能。主播积累直播16小时将自动下播休息2小时后方可继续开播。请大家注意休息/避免空播。
</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'}"></div>
<image class="closeimg" src="../../static/image/cloneb.png" @click="closes"></image>
<text class="jieshutitle">徳铭阳光在线</text>
<image class="jieshuheadimg" :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">{{renshumax}}</text>
<text style="color:#fff;font-size:30rpx;margin-top:10rpx">热度</text>
</view>
<view class="jieshuboxitem">
<text style="color:#fff;font-size:30rpx">RMB {{jieshu.sales_amount}}</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;
position: fixed;
top: 70rpx;
left: 31rpx;
height: 31rpx;
}
.jieshuback{
background-color: #000;
opacity: 0.8;
position: absolute;
left: 0;
top: 0;
width: 750rpx;
}
.jieshu{
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: fixed;
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;
display: flex;
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;
display: flex;
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;
}
.danmuitem{
font-size: 26rpx;
color: #fff;
flex-direction: column-reverse;
}
.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
},
onLaunch: function() {
console.log('App Launch');
},
onShow: function() {
this.stop()
this.startPreview()
this.start()
},
onHide: function() {
console.log('App Hide');
},
//模拟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;
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(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);
// 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
}
},
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
});
},
closes(){
if(!this.zhibo){
uni.navigateBack({
delta:1
});
return ;
}
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>