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" :subtitle="subtitle" :title="title" 
			:showFav="true" :isFav="isLiveFav" @onLiveFav="" 
			: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>
				</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 icongengduo"></text>
									<!-- #endif -->
								</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: false,
				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.roomId = options.roomId;
			this.liveId = options.liveId;
			this.videoUrl = uni.getStorageSync("videoUrl").replace("http://", "https://");
			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;
		},
		onReady() {
			// this.isAuthor = false;
			// this.linkMic = true;
			// this.userId = "22";
			// this.userName = "ss";
			// this.title = 'test';
			// this.roomId = '11';
			// this.$nextTick(() => this.enterRoom());
			// return;

			this.init();
		},
		beforeCreate() {
		  let domModule = weex.requireModule('dom');
		  domModule.addRule('fontFace',{
			'fontFamily': "nvueIconfont",
			'src': "url('https://at.alicdn.com/t/font_2119167_43jbldmjpr3.ttf')"
		  })
		},
		onUnload() {
			this.exitRoom();
		},
		methods: {
			init() {
				NET.request(API.getLiveGoodsDetail + this.liveId, {}, 'GET').then(res => {
					this.goodsList = res.data
				}).catch(res => {
					uni.showToast({
						title: '获取商品列表失败',
						type: 'warning',
					})
				})
				
				this.avatar = uni.getStorageSync("liveImgUrl");
				this.title = uni.getStorageSync("liveName");
				this.$nextTick(() => this.enterRoom());
			},
			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();
				});
			},
			onLiveFav(isFav) {
			
			},
			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()
				}
			},
			goToGoodDetails(item) {
				uni.navigateTo({
					url: '/pagesGood/goodDetails?goodId=' + item.productId
				});
			}
		}
	}
</script>

<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;
		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>