qjd-user-uniapp/pagesGood/liveDetail.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" :num="num" :likes="likes" :name="name" />
		<jhimlive ref="jhimlive" class="jhimlive" :sdkAppID="sdkAppID" :secretKey="secretKey" :userId="userId" :roomId="roomId"
		 :isAuthor="isAuthor" :avatar="avatar" :name="name" @onMemberCount="num=$event" />
		 <view class="popup-open" @click="openPop()">
			<!-- #ifdef APP-PLUS -->
		 	<text class="nvue-iconfont" :style="{fontFamily:'nvueIconfont'}">&#xe63f;</text>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<text class="iconfont iconzhibo-shangpin"></text>
			<!-- #endif -->
		 </view>
		<uni-popup ref="popup" animation type="bottom" >
			<view class="popup-box">
				<view @click="closePop()" class="popup-close">
					<text class="popup-close-text">收起</text>
				</view>
				<scroll-view scroll-y="true" class="good-box">
					<view class="goods-row" v-for="(item, index) in goodsList" :key="index" @click="goToGoodDetails(item)">
						<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}}人付款</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 class="more-button">
									<!-- #ifdef APP-PLUS -->
									<text class="nvue-iconfont more-button-iconfont" :style="{fontFamily:'nvueIconfont'}">&#xe623;</text>
									<!-- #endif -->
									<!-- #ifdef MP-WEIXIN -->
									<text class="iconfont more-button-iconfont"></text>
									<!-- #endif -->
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import jhlive from "@/jhlive/jhlive";
	import jhimlive from "@/jhim/jhimlive";
	const NET = require('@/utils/request')
	const API = require('@/config/api')

	export default {
		components: {
			jhlive,
			jhimlive
		},
		data() {
			return {
				isAuthor: false,
				linkMic: false,
				sdkAppID: API.sdkAppID,
				secretKey: API.secretKey,
				windowWidth: 0,
				windowHeight: 0,
				userId: '',
				roomId: '',
				liveId: '',
				num: 0,
				likes: 0,
				name: "",
				avatar: "../static/images/loginLogo.png",
				userData: {},
				enabledIM: false,
				imReady: false,
				imMsgs: [],
				videoUrl: '',
				goodsList: [],
			}
		},
		beforeCreate() {
			
			uni.showToast({
				title: '222',
				duration: 2000
			})
			const domModule = uni.requireNativePlugin('dom')
			console.log(111111111111111111,domModule)
			domModule.addRule('fontFace', {
				'fontFamily': "nvueIconfont",
				'src': "url('https://at.alicdn.com/t/font_2119167_43jbldmjpr3.ttf')"
			});
			console.log(222222222222222)
		},
		onLoad(options) {
			this.roomId = options.roomId;
			this.liveId = options.liveId
			this.userData = uni.getStorageSync("userData");
			this.userId = this.userData.userId;
			let info = uni.getSystemInfoSync();
			this.windowWidth = info.windowWidth;
			this.windowHeight = info.windowHeight;

			this.videoUrl = uni.getStorageSync("videoUrl").replace("http://","https://")
			NET.request(API.getLiveGoodsDetail + options.liveId, {}, 'GET').then(res => {
				this.goodsList = res.data
			}).catch(res => {
				this.$refs.uTips.show({
					title: '获取商品列表失败',
					type: 'warning',
				})
			})
		},
		onReady() {
			this.isAuthor = false;
			// this.linkMic = true;
			// this.userId = "123";
			// this.name = 'test';
			// this.roomId = '1';
			this.$nextTick(() => this.enterRoom());
			return;

			this.init();
		},
		onUnload() {
			this.exitRoom();
		},
		methods: {
			init() {
				this.avatar = uni.getStorageSync("liveImgUrl");
				this.name = uni.getStorageSync("liveName");
				this.$nextTick(() => this.enterRoom());
			},
			enterRoom() {
				this.$refs.jhimlive && this.$refs.jhimlive.enterRoom();
				this.$refs.jhlive && this.$refs.jhlive.enterRoom();
			},
			exitRoom() {
				this.$refs.jhimlive && this.$refs.jhimlive.exitRoom();
				this.$refs.jhlive && this.$refs.jhlive.exitRoom();
			},
			handleShop(msg) {},
			openPop() {
				this.$refs.popup.open()
			},
			closePop() {
				this.$refs.popup.close()
			},
			goToGoodDetails(item) {
				uni.navigateTo({
					url: '/pagesGood/goodDetails?goodId=' + item.productId
				});
			},
			
		},
	}
</script>

<style>
	.nvue-iconfont {
	  font-family: "nvueIconfont";
	  font-size: 16px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
</style>

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

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

	.jhimlive {
		width: 400rpx;
		position: absolute;
		bottom: 10px;
		left: 10px;
	}
	.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;
	}
	.popup-box {
		background-color: #FFFFFF;
		width: 750rpx;
		height: 265px;
		// border-radius: 10px 10px 0 0;
		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;
	}
	.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;
	}
</style>