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">
            <view class="goods-row" v-for="(item, index) in goodsList" :key="index">
				<view class="goods-img-box">
					<image class="goods-img" :src="item.imgPath" mode="aspectFill"></image>
				</view>
				<view class="goods-info">
					<view>
						<text class="goods-name">{{item.productName}}</text>
					</view>
					<text class="goods-sales">{{item.sellCount ? item.sellCount : 0}}人付款</text>
					<text class="price">原价:{{item.originalPrice}}</text>
					<view class="goods-number-bottom">
						<view class="goods-number">
							<!-- <text class="goods-number-left">惊爆价:</text> -->
							<text class="goods-icon">￥</text>
							<text class="goods-spec">{{item.bizPrice}}</text>
						</view>
					</view>
				</view>
            </view>
          </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(() => 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;
}

.good-box {
	width: 750rpx;
	height: 230px;
	padding: 0 0 10px 0;
	overflow: visible;
}

.goods-row:first-child {
	margin-top: 12px;
}

.goods-row {
	width: 700rpx;
	height: 104px;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	background-color: #FFFFFF;
	box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	margin: 0 15px 10px 15px;
}

.goods-img-box {
	margin-right: 15px;
}

.goods-img {
	width: 104px;
	height: 104px;
	object-fit: cover;
}

.goods-info {
	flex: 1;
	padding-top: 10px;
}

.goods-name {
	line-height: 15px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-wrap: break-word;
	text-overflow: ellipsis;
	font-size: 15px;
	font-family: PingFang SC;
	color: #333333;
}

.goods-sales {
	font-size: 12px;
	font-family: PingFang SC;
	color: #666666;
	line-height: 15px;
	margin: 8px 0 8px 0;
}

.price {
	font-size: 12px;
	text-decoration: line-through;
	color: #A67954;
}

.goods-number-bottom {
	display: flex;
	flex-direction: row;
}

.goods-number {
	display: flex;
	flex-direction: row;
	white-space: nowrap;
	line-height: 24px;
}

.goods-number-left {
	font-size: 12px;
	color: #666666;
}

.goods-icon {
	font-size: 14px;
	font-family: PingFang SC;
	color: #52A63A;
}

.goods-spec {
	font-size: 24px;
	font-family: PingFang SC;
	color: #52A63A;
}

.more-button {
	width: 24px;
	height: 24px;
	position: absolute;
	right: 16px;
}

.more-button-iconfont {
	font-size: 36px;
	color: #999999;
	text-align: center;
}
</style>