deming/pages/zhibo/index.nvue

<template>
  <view>
    <video :src="url" class="vodio" :autoplay="true" id="myVideo" :show-fullscreen-btn="false" :show-play-btn="false" :enable-progress-gesture="false" :show-center-play-btn="false" :show-progress="false" :controls="false" :style="{'height':height}" @error="errors">

    </video>
    <view class="user" :style="{'top': top}">
      <view class="back"></view>
      <image class="head" :src="info.member_avatar"></image>
      <view class="userinfo">
        <text class="name">{{info.member_nickname}}</text>
        <text class="info">{{info.live_desc}}</text>
      </view>
      <view class="guanzhu" @click="guanzhu"><text style="color:#fff;font-size:24rpx">{{info.is_attention == 1 ? '已关注' : '关注'}}</text></view>
    </view>
    <view class="userlist" :style="{'top': top + 10 * rpx}">
        <image class="userlistitem" v-for="(i,j) in room.onlineUsers.users.slice(0,3)" :src="i.avatar" :style="{'right': (-j * 15 * rpx) + 'px'}" :key="j"></image>
    </view>
    <view class="hot" :style="{'top': top + 10 * rpx}">
      <text class="hottext">{{room.onlineUsers.users.length}}</text>
    </view>
    <image v-if="list.length != 0" class="cart" src="../../static/cart.png" @click="show = true">

    </image>
    <view class="danmufasongbox" @click="danmu = $store.state.hasLogin">
      <view class="danmufasongboxback"></view>
      <image src="../../static/danmu.png" class="danmubianji"></image>
      <text style="font-size:26rpx;color:#fff;margin-left:20rpx">{{ $store.state.hasLogin ? '想说点什么' : '请先登录'}}</text>
    </view>
    <!-- <image class="liketap" src="../../static/like.png" @click=""> -->

    <view class="danmuinputbox" v-if="danmu">
      <input type="text" focus="true" style="width:600rpx;margin-left:30rpx;font-size:26rpx" maxlength="100" @blur="danmu=false" :focus="danmu" v-model="danmutext">
      <view class="danmufasong" @click="sendMessage(room.MessageType.CHAT,danmutext)">
        <text style="font-size:24rpx;color:#fff">发送</text>
      </view>
    </view>
    <div class="danmulist">
        <text class="danmuitem" v-for="(i,j) in danmulist" :key="j">{{i.senderNickname}}:{{i.content}}</text>
        
    </div>
    <image class="closeimg" src="../../static/close.png" :style="{'top': top + 30 * rpx}" @click="back"></image>
    </image>
      <div class="bottom" :style="{'height':height + 'px'}" v-if="show" @click="show = false">
        <div class="tanchuceng" @click="zuzhi">
          <div class="heads">
              <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" :key="j" @click="xuanzhong(j)">
                <image class="shopimg" :src="i.goods_image"></image>
                <div class="infos">
                  <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>
  </view>
</template>

<style lang="scss" scoped>
.vodio{
  width: 750rpx;
}
.infos{
    height: 160rpx;
    justify-content: space-between;
    margin-left: 10rpx;
    width: 404rpx;
}
.shopimg{
    width: 160rpx;
    height: 160rpx;
    // background-color: #0f0;
    

}
.heads{
    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;
    
}
.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;
}
.cart{
  width: 50rpx;
  height: 46rpx;
  position: fixed;
  bottom: 36rpx;
  // right: 154rpx;
  right: 54rpx;

}
.hottext{
  font-size: 20rpx;
  color: #fff;
}
.hot{
  width: 60rpx;
  height: 60rpx;
  background-color: rgb(104, 104, 104);
  position: fixed;
  border-radius: 30rpx;
  right: 86rpx;
  align-items: center;
  justify-content: center;
}
.userlistitem{
    width: 60rpx;
    height: 60rpx;
    position: relative;
    border-radius: 30rpx;
}
.userlist{
    display: flex;
    flex-direction: row-reverse;
    width: 150rpx; 
    height: 60rpx;
    position: fixed;
    right: 156rpx;

}
.name {
  font-size: 24rpx;
  color: #fff;
  lines: 1;
  text-overflow: ellipsis;
}
.info {
  font-size: 20rpx;
  color: #fff;
  margin-top: 6rpx;
  lines: 1;
  text-overflow: ellipsis;
}
.userinfo {
  display: flex;
  flex-direction: column;
  width: 100rpx;
  margin-left: 20rpx;

}
.guanzhu {
  width: 100rpx;
  height: 50rpx;
  background-color: #ff780f;
  border-radius: 25rpx;
  margin-left: 10rpx;
  align-items: center;
  justify-content: center;
}
.head {
  width: 70rpx;
  height: 70rpx;
  border-radius: 35rpx;
}
.back {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #000;
  opacity: 0.2;
  width: 308rpx;
  height: 70rpx;
  border-radius: 35rpx;
}
.user {
  position: fixed;
  left: 30rpx;
  width: 308rpx;
  height: 70rpx;
  display: flex;
  align-items: center;
  border-radius: 35rpx;
  overflow: hidden;
  flex-direction: row;
}
.video {
  width: 750rpx;
}
.liketap{
  width: 55rpx;
  height: 57rpx;
  position: fixed;
  bottom: 30rpx;
  right: 54rpx;
}
.closeimg{
  width: 31rpx;
  height: 31rpx;
  position: fixed;
  right: 31rpx;
}
.danmufasongbox{
  width: 308rpx;
  height: 58rpx;
  position: fixed;
  left: 30rpx;
  bottom: 30rpx;
  flex-direction: row;
  align-items: center;
}
.danmufasongboxback{
  position: absolute;
  top: 0;
  left: 0;
  width: 308rpx;
  height: 58rpx;
  background-color: #000;
  opacity: 0.4;
  border-radius: 29rpx;
}
.danmubianji{
  width: 27rpx;
  height: 32rpx;
  margin-left: 20rpx;
}
.danmuinputbox{
  position: fixed;
  bottom:0;
  height: 100rpx;
  width: 750rpx;
  z-index: 9999;
  background-color: #fff;
  flex-direction: row;
  align-items: center;

}
.danmufasong{
  width: 85rpx;
  height: 51rpx;
  background-color: #FF780F;
  align-items: center;
  justify-content: center;
  border-radius: 5rpx;
}
.danmulist{
    position: fixed;
    left: 30rpx;
    bottom: 118rpx;
    width: 690rpx;
}
.danmuitem{
    font-size: 26rpx;
    color: #fff;
    flex-direction: column-reverse;
    word-wrap:anywhere;
}
</style>

<script>
const ChatRoomService =require('../../static/chatservice');
export default {
  name: "zhibo",
  data() {
    return {
      url: "",
      top: 0,
      height: 0,
      rpx:0,
      show:false,
      list:[],
      id:0,
      info:{},
      danmutext:"",
      danmu:false,
      room:{},
      chatRoomService:{},
      danmulist:[],
      videoContext:{}
    };
  },
  onBackPress(options) {  
      uni.setKeepScreenOn({
        keepScreenOn: false
      });
      return false;  
  },
  onShow(){
    this.videoContext.play()
  },
  onLoad(a) {
    this.videoContext = uni.createVideoContext('myVideo')
    this.url = a.url;
    this.id = a.id
    console.log(this.url);
    let that = this;
    uni.setKeepScreenOn({
      keepScreenOn: true
    });

    uni.getSystemInfo({
      success(a) {
        console.log(a.windowHeight);
        that.height = a.windowHeight;
        // that.start()
        that.top = a.statusBarHeight + 5;
        that.rpx = (a.windowWidth / 750)
        console.log(that.rpx)
      },
    });
    // this.$u.api.goodsShelves({live_id:this.id}).then((res)=>{
    //   console.log(res)
    // })
    const token = uni.getStorageSync('token');
    console.log(token,that.id)
    uni.request({
      url:"https://mall.dmygkeji.com/api/Specialci/goodsShelves",
      data:{
        live_id:that.id
      },
      method:"POST",
      header:{
        "Authorization" : 'Bearer' + " " + token
      },
      success(res){
        console.log(res)
        that.list= res.data.data
      }
    })
    setInterval(function(){
       uni.request({
          url:"https://mall.dmygkeji.com/api/Specialci/goodsShelves",
          data:{
            live_id:that.id
          },
          method:"POST",
          header:{
            "Authorization" : 'Bearer' + " " + token
          },
          success(res){
            console.log(res)
            that.list= res.data.data
          }
        })
          that.$forceUpdate();
          console.log(that.room)

    },10 * 1000)
    uni.request({
      url:"https://mall.dmygkeji.com/api/Specialci/livingUserInfo",
      data:{
        live_id:that.id
      },
      method:"POST",
      header:{
        "Authorization" : 'Bearer' + " " + token
      },
      success(res){
          
        console.log(res)
        that.info = res.data.data
        // that.list= res.data.data
      }
    })
    var room = {
        id : a.rid + "",
        name : a.rid + ""
    };
      that.chatRoomService = getApp().globalData.im
    //构造chatRoomService
    that.chatRoomService.subscribeRoomMessage(room)
    //获取当前聊天室数据
    that.room = that.chatRoomService.room;
    that.chatRoomService.initialWhenOnlineUserChange(that.newpeople)
    that.chatRoomService.initialWhenNewMessage(that.whenNewMessage);
    that.chatRoomService.jieshuzhibo = this.jieshu;
    this.$forceUpdate();
    console.log(that.room)
     
  },
  	onBackPress () {//返回取消订阅
			//断开连接
			this.chatRoomService.quitRoom();
		},
		beforeDestroy () {
			this.chatRoomService.quitRoom();
		},
  methods:{
    jieshu(text){
      console.log(text)
      uni.showModal({
          title: '提示',
          content: text.content,
          showCancel:false,
          success: function (res) {
              uni.navigateBack({
                  delta: 1
              });
          }
      });
    },
    errors(a){
        console.log(a)
    },
    newpeople(list){
      this.room.onlineUsers = list
      console.log(list.users.length)
      this.$forceUpdate();
    },
    sendMessage (messageType, content) {//发送消息
    if(!this.chatRoomService.status){
      uni.showToast({
          title: '连接聊天室中，请稍等',
          duration: 2000,
          icon: "none"
      });
      return
    }
    console.log(this.room,this.room.id,messageType, content)
				if(content == "" && messageType == 0) return;
				var message = {
					senderNickname : this.room.currentUser.nickname ,
					type : messageType,
					content : content
				}
				this.chatRoomService.sendMessages(this.room.id, message);
        this.danmutext = ""
        this.danmu = false
        uni.hideKeyboard()
			},
    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)
      if(message.type == 1){
          this.videoContext.stop();
          this.videoContext.play()
          console.log('stop')
          return ;
      }
              this.danmulist.push(message)

              if(this.danmulist.length > 7){
                  this.danmulist = this.danmulist.slice(this.danmulist.length - 7)
              }
    },
    back(){
      uni.navigateBack({
          delta: 1
      });
    },
    guanzhu(){
      if(!this.$store.state.hasLogin){
       uni.showToast({
          title: '请先登录',
          duration: 2000,
          icon:"none"
        });
        return ;
      }
      const token = uni.getStorageSync('token');
      let that = this
      console.log(token)
      uni.request({
        url:"https://mall.dmygkeji.com/api/member/attentionMember",
        data:{
          member_id:that.info.user_id
        },
        method:"POST",
        header:{
          "Authorization" : 'Bearer' + " " + token
        },
        success(res){
          console.log(res)
          uni.request({
            url:"https://mall.dmygkeji.com/api/Specialci/livingUserInfo",
            data:{
              live_id:that.id
            },
            method:"POST",
            header:{
              "Authorization" : 'Bearer' + " " + token
            },
            success(a){
              console.log(a)
              that.info = a.data.data;
              uni.showToast({
                  title: res.data.message,
                  icon: "none"
              })
              // that.list= res.data.data
            }
          })
          // that.list= res.data.data
        }
      })
    },
    xuanzhong(i){
      let that = this
      const token = uni.getStorageSync('token');
      if(this.$store.state.hasLogin){
        uni.request({
          url:"https://mall.dmygkeji.com/api/Specialci/viewingOPproducts",
          data:{
            good_id:that.list[i].goods_id,
            exple_id:that.info.user_id
          },
          method:"POST",
          header:{
            "Authorization" : 'Bearer' + " " + token
          },
          success(a){
            console.log(a)
          }
        })
      }
      uni.navigateTo({
          url: `/pageB/sdetails/index?id=${that.list[i].goods_id}&type=1`
      });

    },
    zuzhi(event){
      event.stopPropagation();  
    },
  }
};
</script>