qjd-shell-uniapp/pagesMedia/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="handleRemoteUser" />
    <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: true,
        linkMic: false,
        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.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.creatPickVideo, {orderId: this.orderId}, 'GET').then(res => {
          this.liveId = res.data.liveId
          this.roomId = res.data.roomId;
          this.goodsList = res.data.liveProducResVO
          this.$nextTick(() => 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();
      },
      handleRemoteUser(users) {
        this.subtitle = users.length;
        users.length&&this.request(API.getMainInfo +"?userId="+ users[0], {}, 'GET').then(res => {
          this.avatar = res.data.headimg;
          this.title = res.data.nickname;
        }).catch(error => {
          uni.showToast({
            title: error.data.msg,
            duration: 2000
          });
        })
      },
      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>