qjd-user-uniapp/pagesGood/pickVideo.nvue

<template>
	<view class="container" :style="'height: '+windowHeight+'px;'">
    <jhlive 
			ref="jhlive" class="jhlive" 
			:sdkAppID="sdkAppID" :secretKey="secretKey" :userId="userId" :roomId="roomId"
			:isAuthor="isAuthor" :linkMic="linkMic" 
			:avatar="avatar" :subtitle="num?'已连接':'等待商家进入'" :title="title||'暂无'" 
			:btns="btns" @onBtnClick="onBtnClick" 
      @onRemoteUser="num=$event.length" />
      <uni-popup ref="popup" animation type="bottom">
        <view class="popup-box">
          <view class="popup-close">
            <text class="popup-close-text" @click="$refs.popup.close()">收起</text>
          </view>
          <scroll-view scroll-y="true" class="good-box">
            
          </scroll-view>
        </view>
      </uni-popup>
	</view>
</template>

<script>
	import jhlive from "@/jhlive/jhlive";
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	
	export default {
		components: { jhlive },
		data() {
			return {
        windowWidth: 0,
				windowHeight: 0,
        userData: {},
        orderId: '',
        tenantCode: '',
        goodsList: [],
        liveId: '',
        
        isAuthor: false,
        linkMic: true,
        sdkAppID:API.sdkAppID,
			  secretKey:API.secretKey,
        btns: [{picture:"../static/images/live-good.png",title:''}],
				userId: '',
				roomId: '',
				title: "",
        num: 0,
        avatar: "../static/images/loginLogo.png",
			}
		},
		onLoad(options) {
      this.tenantCode = options.tenantCode,
			this.orderId = options.orderId
      this.userData = uni.getStorageSync("userData");
			let info = uni.getSystemInfoSync();
			this.windowWidth = info.windowWidth;
      this.windowHeight = info.windowHeight;
    },
    onReady() {
      this.init();
    },
		methods: {
      init() {
        NET.request(API.linkPickVideo, {
          tenantCode : this.tenantCode,
          orderId: this.orderId
        }, 'GET').then(res => {
          this.title = res.data.tenantName;
          this.avatar = res.data.headImg;
          this.liveId = res.data.liveId;
          this.roomId = res.data.roomId;
          this.goodsList = res.data.liveProducResVO;
          
          this.$nextTick(() => {
            if(this.isAuthor) {
              permision.checkAndRequestPermission('scope.camera').then(()=>{
                permision.checkAndRequestPermission('scope.record').then(()=>{
                  this.enterRoom();
                },()=>{
                  uni.showToast({
                    title: '获取权限失败',
                    duration: 2000,
                  })
                });
              },()=>{
                uni.showToast({
                  title: '获取权限失败',
                  duration: 2000,
                })
              })
            }else if(this.linkMic) {
              permision.checkAndRequestPermission('scope.record').then(()=>{
                this.enterRoom();
              },()=>{
                uni.showToast({
                  title: '获取权限失败',
                  duration: 2000,
                })
              });
            }else {
              this.enterRoom();
            }
          });
        }).catch(error => {
          uni.showToast({
              title: error.data.msg,
              duration: 2000
            });
        });
      },
      enterRoom() {
				this.$refs.jhlive&&this.$refs.jhlive.enterRoom();
			},
			exitRoom() {
        this.$refs.jhlive&&this.$refs.jhlive.exitRoom();
			},
      onBtnClick(index, item) {
				if(index === 0) {
					this.$refs.popup.open()
				}
			},
		}
	}
</script>

<style lang="less" scoped>
.container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 750rpx;
}

.jhlive {
  width: 750rpx;
  flex: 1;
}	

.popup-open {
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: 15px;
  right: 15px;
  background-color: #52A63A;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
}

.iconzhibo-shangpin {
  color: #FFFFFF;
  font-size: 34px;
  text-align: center;
  line-height: 50px;
}

.popup-box {
  background-color: #FFFFFF;
  width: 750rpx;
  height: 750rpx;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.popup-close {
  padding: 10px;
  line-height: 16px;
}

.popup-close-text {
  color: #52A63A;
  font-size: 15px;
  font-family: PingFang SC;
  text-align: left;
}
</style>