qjd-shell-uniapp/pagesMedia/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 class="popup-close">
					<text class="popup-close-text" @click="closePop()">收起</text>
					<text class="popup-close-text">绑定</text>
				</view>
				<scroll-view v-if="true" scroll-y="true" class="good-box2">
					<view class="goods-row2" v-for="(item, index) in goodsList" :key="index">
						<view class="good-check">
							<view @click="checkGoods(item)">
							<!-- #ifdef MP-WEIXIN -->
								<text class="iconfont good-check-iconfont" :class="item.check ? 'iconqueding' : 'iconfeigouxuan'" ></text>
							<!-- #endif -->
							</view>
							<!-- #ifdef APP-PLUS -->
								<text class="nvue-iconfont good-check-iconfont" :style="{fontFamily:'nvueIconfont'}">{{item.check ? '&#xe626;' : '&#xe646;'}}</text>
							<!-- #endif -->
						</view>
						<view class="good-card2">
							<view class="goods-img-box2">
								<image class="goods-img2" :src="item.imgPath" mode="aspectFill"></image>
							</view>
							<view class="goods-info2">
								<view>
									<text class="goods-name2">{{item.productName}}</text>
								</view>
								<text class="goods-sales2">销量：{{item.sellCount}}</text>
								<text class="price2">原价:{{item.originalPrice}}</text>
								<view class="goods-number2">
									<text class="goods-icon2">￥</text>
									<text class="goods-icon2">{{item.bizPrice}}/{{item.unit}}</text>
								</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: true,
				linkMic: false,
				sdkAppID: API.sdkAppID,
				secretKey: API.secretKey,
				windowWidth: 0,
				windowHeight: 0,
				userId: '',
				roomId: '1',
				liveId: '',
				num: 0,
				likes: 0,
				name: "",
				avatar: "../static/images/loginLogo.png",
				userData: {},
				enabledIM: false,
				imReady: false,
				imMsgs: [],
				videoUrl: '',
				goodsList: [],
				goodsIds:[]
			}
		},
		beforeCreate() {		
			uni.showToast({
				title: '222',
				duration: 2000
			})
			const domModule = uni.requireNativePlugin('dom')
			domModule.addRule('fontFace', {
				'fontFamily': "nvueIconfont",
				'src': "url('https://at.alicdn.com/t/font_2119167_43jbldmjpr3.ttf')"
			});
		},
		onLoad(options) {
			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.goodsList.push({
				productId: 1336146105292816384,
				tenantCode: null,
				imgPath: 'https: //www.qianjiadi.com:443/file/2020/12/2af4eb48-35c4-4aa7-80c9-ab7a7cb49984.jpg',
				productName: '测试拍卖商品zxw111',
				sellCount: 0,
				owner: 1,
				productType: 2,
				originalPrice: 1.00,
				bizPrice: 0.01,
				unit: '个'
			},{
				productId: 1336146105292816386,
				tenantCode: null,
				imgPath: 'https: //www.qianjiadi.com:443/file/2020/12/2af4eb48-35c4-4aa7-80c9-ab7a7cb49984.jpg',
				productName: '测试拍卖商品zxw222',
				sellCount: 0,
				owner: 1,
				productType: 2,
				originalPrice: 1.00,
				bizPrice: 0.01,
				unit: '个'
			})
			this.goodsIds = this.goodsList.map(site => {
				return site.productId
			}).join(',')
			this.goodsList.forEach(site => {
				site.check = this.goodsIds.indexOf(site.productId) != -1
			})
		},
		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() {
				NET.request(API.startStream + 2, 'GET').then(res => {
					this.avatar = res.data.imgUrl;
					this.name = res.data.liveName;
					this.roomId = Number(res.data.roomId);
					this.$nextTick(() => this.enterRoom());
				}).catch(res => {
					uni.showToast({
						title: error.data.msg,
						duration: 2000
					});
				})
			},
			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();

				NET.request(API.creatLive, {
					liveId: this.liveId,
					liveStatus: 2
				}, 'GET');
			},
			handleShop(msg) {},
			openPop() {
				this.$refs.popup.open()
			},
			closePop() {
				this.$refs.popup.close()
			},
			//  勾选商品
			checkGoods(site) {
				site.check = !site.check
			}
		},
	}
</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;
		// background-color: blue;
	}
	.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;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.popup-close-text{
		color: #52A63A;
		font-size: 15px;
		font-family: PingFang SC;
	}
	// 商户端直播样式，暂时在用户端里调试
	.good-check {
		width: 30px;
		height: 104px;
		line-height: 104px;
		margin-right: 10px;
	}
	.good-check-iconfont {
		font-size: 40px;
		text-align: center;
		color: #51A539;
		line-height: 104px;
	}
	
	.good-box2 {
		width: 750rpx;
		height: 230px;
		padding: 0 0 10px 0;
		overflow: visible;
	}
	
	.goods-row2:first-child {
		margin-top: 12px;
	}
	
	.goods-row2 {
		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;
	}
	.good-card2 {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}
	.goods-img-box2 {
		margin-right: 15px;
	}
	
	.goods-img2 {
		width: 104px;
		height: 104px;
		object-fit: cover;
	}
	
	.goods-info2 {
		width: 180px;
		flex: 1;
		padding-top: 10px;
	}
	
	.goods-name2 {
		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-sales2 {
		font-size: 12px;
		font-family: PingFang SC;
		color: #666666;
		line-height: 15px;
		margin: 8px 0 8px 0;
	}
	
	.price2 {
		font-size: 12px;
		text-decoration: line-through;
		color: #A67954;
	}
	
	.goods-number-bottom2 {
		display: flex;
		flex-direction: row;
	}
	
	.goods-number2 {
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		line-height: 24px;
	}
	
	.goods-number-left2 {
		font-size: 12px;
		color: #666666;
	}
	
	.goods-icon2 {
		font-size: 14px;
		font-family: PingFang SC;
		color: #52A63A;
	}
	
	.goods-spec2 {
		font-size: 24px;
		font-family: PingFang SC;
		color: #52A63A;
	}
</style>