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" :subtitle="subtitle" :title="title" 
			:showSwitch="true" :showBeauty="true" :btns="btns" @onBtnClick="onBtnClick"
			:showIm="true" :imStatus="imStatus" :imMsgs="imMsgs" @onImSend="onImSend" />
		<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>
					<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 Jhim from "@/jhim/jhim.js";
	const NET = require('@/utils/request')
	const API = require('@/config/api')

	export default {
		components: {
			jhlive,
		},
		data() {
			return {
				windowWidth: 0,
				windowHeight: 0,
				liveId: '',
				userData: {},
				videoUrl: '',
				goodsList: [],
				goodsIds: [],

				btns: [{picture:"../static/images/live-good.png",title:''}],
				isAuthor: true,
				linkMic: false,
				sdkAppID: API.sdkAppID,
				secretKey: API.secretKey,
				userId: '',
				userName: '',
				roomId: '',
				avatar: "../static/images/loginLogo.png",
				title: "加载中",
				subtitle: "0人在观看",
				isLiveFav: false,
				imStatus: '',
				imMsgs: [],
			}
		},
		onLoad(options) {
			this.liveId = options.liveId
			this.userData = uni.getStorageSync("userData");
			this.userId = this.userData.userId;
			this.userName = this.userData.userName;
			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 = true;
			// this.linkMic = false;
			// 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.title = res.data.liveName;
					this.roomId = String(res.data.roomId);
					this.$nextTick(() => this.enterRoom());
				}).catch(res => {
					uni.showToast({
						title: error.data.msg,
						duration: 2000
					});
				})
			},
			enterRoom() {
				this.jhim = Jhim.getInstance(this.userId, this.sdkAppID, this.secretKey);
				this.jhim.login(this.userName, this.avatar).then(()=>{
					this.jhimgroup = this.jhim.createGroup(this.roomId);
					this.jhimgroup 
						.on(this.onImText, this.jhim.TYPES.MSG_TEXT)
						.on(this.onImCustomMessage, this.jhim.TYPES.MSG_CUSTOM)
						.on(this.onImGroupTip, this.jhim.TYPES.MSG_GRP_TIP)
						.onReady(this.onImGroupReady)
						.join(this.isAuthor)
				})
				this.$refs.jhlive && this.$refs.jhlive.enterRoom();
			},
			onImText(e) {
				this.imMsgs = [...this.imMsgs, ...e.map(v=>({
					type: 'text',
					name: v.nick,
					text: v.payload.text
				}))];
			},
			onImCustomMessage() {
				this.imMsgs = [...this.imMsgs, ...e.map(v=>({
					type: v.payload.description,
					text: v.payload.data
				}))];
			},
			onImGroupTip(e) {
				this.subtitle = e[0].payload.userIDList.length + '人在观看';
			},
			onImGroupReady(e) {
				this.imStatus = e?'':'登录中...';
			},
			onImSend(text) {
				this.jhimgroup.sendText(text).then(msg => {
					this.imMsgs.push({
						type: 'text',
						name: msg.nick,
						text: msg.payload.text
					});
					this.$refs.jhlive && this.$refs.jhlive.cleanImInput();
				});
			},
			exitRoom() {
				this.jhimgroup.off(this.onImText);
				this.jhimgroup.off(this.onImCustomMessage);
				this.jhimgroup.off(this.onImGroupTip);
				this.jhimgroup.offReady(this.onImGroupReady);
				this.jhimgroup.exit(this.isAuthor).then(()=>this.jhim.logout());
				this.$refs.jhlive && this.$refs.jhlive.exitRoom();
			},
			onBtnClick(index, item) {
				if(index === 0) {
					this.$refs.popup.open()
				}
			},
			//  勾选商品
			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>