demingshangjia/pages/release/zhibo.nvue

661 lines
22 KiB
Plaintext
Raw Normal View History

2020-07-24 00:57:03 +00:00
<template>
2020-07-25 00:57:32 +00:00
<div>
2020-07-24 00:57:03 +00:00
<live-pusher id='livePusher' ref="livePusher" class="livePusher" :url="url"
2020-08-09 10:36:37 +00:00
mode="FHD" :muted="false" :enable-camera="true" :auto-focus="true" :beauty="meiyan + 1" whiteness="0"
2020-07-24 00:57:03 +00:00
aspect="9:16" @statechange="statechange" @netstatus="netstatus" @error = "error"
:style="{'height':height + 'px'}"
></live-pusher>
2020-08-08 10:34:43 +00:00
<div class="bottom" :style="{'height':height }" v-if="show" @click="show = false">
2020-07-25 00:57:32 +00:00
<div class="tanchuceng" @click="zuzhi">
<div class="head">
<div style="flex-direction: row;align-items:center">
<text class="title">全部商品</text>
<text class="num">2件</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>
2020-07-25 06:53:19 +00:00
<div class="user">
</div>
<div 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_name}}</text>
2020-07-30 07:54:32 +00:00
<text class="username" style="font-size:20rpx">{{time}} | sadasdas</text>
2020-07-25 06:53:19 +00:00
</div>
</div>
2020-07-30 07:54:32 +00:00
<image class="closeimg" src="../../static/image/close.png" @click="closes"></image>
<image class="menuimg" src="../../static/image/menu.png" @click="tool = true"></image>
<image class="shoptapimg" @click="xianshi" src="../../static/image/shop.png"></image>
<text style="font-size:26rpx;color:#fff;width:512rpx;position:fixed;left:30rpx;top:793rpx">德铭阳光在线绿色直播请遵循相关法律法规警察叔叔24小时巡查哦。为了保障直播系统稳定现将全局开放防主播沉迷功能。主播积累直播16小时将自动下播休息2小时后方可继续开播。请大家注意休息/避免空播。
</text>
2020-08-03 08:47:46 +00:00
<div class="danmulist">
<text class="danmuitem" v-for="(i,j) in danmulist" :key="j">{{i.senderNickname}}:{{i.content}}</text>
</div>
2020-07-30 07:54:32 +00:00
<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 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 class="menutoolitemimg"></image>
<text class="menutoolitemtitle">美颜</text>
</view>
</picker>
</view>
</view>
</div>
2020-07-24 00:57:03 +00:00
<!-- <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>
2020-07-25 00:57:32 +00:00
<button class="btn" @click="startPrediv">开启摄像头预览</button>
<button class="btn" @click="stopPrediv">关闭摄像头预览</button>
2020-07-24 00:57:03 +00:00
rtmp://107268.livepush.myqcloud.com/live/26?txSecret=826e36f52669ebf9290644b82a1d8b33&txTime=5F1A84E4
<button class="btn" @click="switchCamera">切换摄像头</button> -->
2020-07-25 00:57:32 +00:00
</div>
2020-07-24 00:57:03 +00:00
</template>
<style lang="scss" scoped>
2020-07-30 07:54:32 +00:00
.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: 31rpx;
height: 31rpx;
}
2020-07-25 06:53:19 +00:00
.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;
}
2020-07-25 00:57:32 +00:00
.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;
}
2020-07-24 00:57:03 +00:00
.bottom{
width: 750rpx;
position: fixed;
top:0;
z-index: 10;
}
2020-07-25 00:57:32 +00:00
.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;
}
2020-07-24 00:57:03 +00:00
.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;
2020-07-25 00:57:32 +00:00
2020-07-24 00:57:03 +00:00
}
2020-07-30 07:54:32 +00:00
.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;
2020-08-09 10:36:37 +00:00
width: 750rpx;
height: 335rpx;
2020-07-30 07:54:32 +00:00
}
.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;
}
2020-08-03 08:47:46 +00:00
.danmulist{
position: fixed;
left: 30rpx;
bottom: 118rpx;
}
.danmuitem{
font-size: 26rpx;
color: #fff;
flex-direction: column-reverse;
}
2020-08-03 09:42:58 +00:00
.livePusher{
width: 750rpx;
}
2020-07-24 00:57:03 +00:00
</style>
<script>
2020-08-08 07:17:36 +00:00
const ChatRoomService =require('../../static/chatservice');
2020-07-24 00:57:03 +00:00
export default {
data: {
fil: true,
url:'',
height:0,
2020-07-30 07:54:32 +00:00
show:false,
2020-07-25 06:53:19 +00:00
list:[],
info:{},
2020-07-30 07:54:32 +00:00
im:{},
chatroom_id:0,
live_id:0,
tool:false,
meiyan:0,
2020-08-03 08:47:46 +00:00
time:'00:00:00',
room:{},
chatRoomService:{},
danmulist:[]
2020-07-24 00:57:03 +00:00
},
2020-08-08 07:09:56 +00:00
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=>{})
},
2020-07-24 00:57:03 +00:00
onReady() {
// 注意需要在onReady中 或 onLoad 延时
let that = this
2020-08-08 10:34:43 +00:00
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)
2020-07-24 00:57:03 +00:00
},
2020-08-03 08:47:46 +00:00
2020-07-24 00:57:03 +00:00
onLoad(a){
2020-08-08 07:09:56 +00:00
console.log(getApp().globalData.im)
2020-07-24 00:57:03 +00:00
this.url = a.url.replace("*","&")
2020-07-25 00:57:32 +00:00
let that = this
const token = uni.getStorageSync('token');
2020-07-30 00:46:35 +00:00
console.log('Bearer' + " " + token)
2020-07-30 07:54:32 +00:00
this.chatroom_id = a.id
this.live_id = a.live_id
uni.request({
url:"https://dmmall.sdbairui.com/storeapi/Streaming/liveStreamList",
method:"POST",
header:{
'Authorization' : 'Bearer' + " " + token
2020-07-25 06:53:19 +00:00
},
2020-07-30 07:54:32 +00:00
success(res){
console.log(res)
that.list= res.data.data
2020-07-25 06:53:19 +00:00
}
2020-07-30 00:46:35 +00:00
})
2020-07-30 07:54:32 +00:00
uni.request({
url:"https://dmmall.sdbairui.com/storeapi/member/memberInfo",
method:"POST",
header:{
'Authorization' : 'Bearer' + " " + token
},
success(res){
console.log(res.data)
that.info = res.data.data.memberInfo
2020-08-03 08:47:46 +00:00
2020-08-08 07:17:36 +00:00
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
};
2020-08-03 08:47:46 +00:00
var room = {
id : a.id + "",
name : a.id + ""
};
2020-08-08 07:17:36 +00:00
that.chatRoomService = getApp().globalData.im
console.log(room,currentUser)
//构造chatRoomService
that.chatRoomService.subscribeRoomMessage(room,currentUser)
that.chatRoomService.initialWhenNewMessage(that.whenNewMessage);
//获取当前聊天室数据
that.room = that.chatRoomService.room;
2020-07-30 07:54:32 +00:00
}
2020-07-30 00:46:35 +00:00
})
2020-07-30 07:54:32 +00:00
let shi = 0;
let fen = 0;
let miao = 0;
setInterval(() => {
shi = parseInt(shi)
fen = parseInt(fen)
miao = parseInt(miao)
miao = miao + 1
2020-08-03 08:47:46 +00:00
// console.log(miao)
2020-07-30 07:54:32 +00:00
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);
2020-08-03 08:47:46 +00:00
// var roomToken = JSON.parse(options.roomToken);
// //获取当前聊天室数据
// this.room = this.chatRoomService.room;
2020-07-30 07:54:32 +00:00
// 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)
// })
2020-07-25 00:57:32 +00:00
},
2020-07-24 00:57:03 +00:00
methods: {
2020-08-03 08:47:46 +00:00
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)
}
},
2020-07-30 07:54:32 +00:00
bindPickerChange(a){
console.log(a.detail.value)
this.meiyan = a.detail.value
uni.showToast({
title: '切换成功',
duration: 2000
});
},
closes(){
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://dmmall.sdbairui.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)
uni.navigateBack({
delta: 1
});
// that.list= res.data.data
}
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
2020-07-24 00:57:03 +00:00
statechange(e) {
console.log("statechange:" + JSON.stringify(e));
2020-08-08 10:34:43 +00:00
console.log(e)
2020-07-24 00:57:03 +00:00
},
netstatus(e) {
2020-07-25 00:57:32 +00:00
// console.log("netstatus:" + JSON.stringify(e));
2020-07-24 00:57:03 +00:00
},
error(e) {
console.log("error:" + JSON.stringify(e));
},
start: function() {
2020-08-08 10:34:43 +00:00
console.log("开始")
2020-07-24 00:57:03 +00:00
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));
}
});
},
2020-07-30 07:54:32 +00:00
xianshi(){
this.show = true;
console.log(111)
},
2020-07-24 00:57:03 +00:00
guanbi(){
this.show = false
console.log(123)
},
zuzhi(event){
event.stopPropagation();
2020-07-25 00:57:32 +00:00
},
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)
}
}
let that = this
uni.request({
url:"https://dmmall.sdbairui.com/storeapi/Streaming/updateGoods",
method:"POST",
data:{
goods_id:arr.join(',')
},
2020-07-30 07:54:32 +00:00
header:{
2020-07-25 00:57:32 +00:00
'Authorization' : 'Bearer' + " " + token
},
success(res){
console.log(res)
uni.request({
url:"https://dmmall.sdbairui.com//storeapi/Streaming/liveStreamList",
method:"POST",
2020-07-30 07:54:32 +00:00
header:{
2020-07-25 00:57:32 +00:00
'Authorization' : 'Bearer' + " " + token
},
success(res){
console.log(res)
that.list= res.data.data
}
})
}
})
2020-07-24 00:57:03 +00:00
}
}
}
</script>