qjd-user-uniapp/pagesGood/liveDetail.nvue

<template>
	<view class="container" :style="'height: '+windowHeight+'px;'">
		<jhlive 
		    v-if="videoType == 1"
			ref="jhlive" class="jhlive" 
			:sdkAppID="sdkAppID" :secretKey="secretKey" :userId="userId" :roomId="roomId"
			:isAuthor="isAuthor" :linkMic="linkMic" 
			:avatar="avatar" :subtitle="subtitle" :title="title" 
			:showFav="showFav" :isFav="isLiveFav" @onLiveFav="onLiveFav" 
			:btns="btns" @onBtnClick="onBtnClick"
			:showIm="true" :imStatus="imStatus" :imMsgs="imMsgs" @onImSend="onImSend" 
			@onRemoteUser="num=$event.length" />
		<video v-if="videoType == 2" id="myVideo" class="jhlive" :src="videoUrl" @error="videoErrorCallback" controls>
			<cover-view class="popup-open" @click="$refs.popup.open()">
				<!-- #ifdef APP-PLUS -->
				<text class="nvue-iconfont iconzhibo-shangpin" :style="{fontFamily:'nvueIconfont'}">&#xe63f;</text>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<text class="iconfont iconzhibo-shangpin"></text>
				<!-- #endif -->
			</cover-view>
		</video>
        <view v-if="(videoType == 1) && (num<=0)" class="tips-box" :style="'top: '+windowHeight/3+'px;'">
			<text class="tips-box-text">提示</text>
			<text class="tips-box-text" style="margin-top: 10px;">讲解员未进入</text>
		</view>
		<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>
		<!-- <u-modal v-if="(videoType == 1) && (num<=0)" :value="true" content="讲解员未进入" :show-confirm-button="false" :async-close="true"></u-modal> -->
	</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: [],
				videoType: null,
				videoId: '',
				num: 0, // 开麦人数
				// #ifdef MP-WEIXIN
				showFav: true, // 是否展示收藏，app中不展示，小程序中 展示
				// #endif
				// #ifdef APP-PLUS
				showFav: false,
				// #endif
			}
		},
		onLoad(options) {
			this.videoType = options.videoType
			if (this.videoType == 1) {
				this.roomId = options.roomId;
				this.liveId = options.liveId;
				this.userData = uni.getStorageSync("userData");
				this.userId = this.userData.userId;
				this.userName = this.userData.userName;
				uni.setNavigationBarTitle({
					title: '产品讲解'
				})
			} else {
				this.videoType = options.videoType
				this.videoId = options.videoId
				uni.setNavigationBarTitle({
					title: '正在播放短视频'
				})
				this.videoUrl = uni.getStorageSync("videoUrl").replace("http://","https://")
			}
			let info = uni.getSystemInfoSync();
			this.windowWidth = info.windowWidth;
			this.windowHeight = info.windowHeight;
			console.log('宽高',this.windowWidth,this.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();
		},
		//  #ifdef APP-PLUS
		beforeCreate() {
		  let domModule = weex.requireModule('dom');
		  domModule.addRule('fontFace',{
			'fontFamily': "nvueIconfont",
			'src': "url('https://at.alicdn.com/t/font_2119167_43jbldmjpr3.ttf')"
		  })
		},
		// #endif 
		onUnload() {
		  if (this.videoType == 1) {
			 this.exitRoom();
		  }
		},
		methods: {
			init() {
				if (this.videoType == 1) {					
					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());
					// 查询是否关注
					NET.request(API.isSubscribed + this.liveId, {}, 'GET').then(res => {
						if(res.data==false){
							this.isLiveFav=false
						}else{
							this.isLiveFav=true
						}
					}).catch(res => {
						console.log(res)
					})
				} else {
					NET.request(API.getShortGoodsDetail + this.videoId, {}, 'GET').then(res => {
						this.goodsList = res.data
					}).catch(res => {
						uni.showToast({
							title: '获取商品列表失败',
							type: 'warning',
						})
					})
				}
			},
			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.jhimgroup.getProfile().then(v=>{
					this.subtitle = v.memberCount + '人在观看';
				});
			},
			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() {
				let data = {liveId: this.liveId}
				data.isDelete = this.isLiveFav ? 1 : 0
			    NET.request(API.subscribeLive, data, 'POST').then(res => {
					this.isLiveFav = !this.isLiveFav
			    }).catch(res => {
			    	console.log(res)
			    })
			},
			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().then(()=>this.jhim.destroy()));
				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
				});
			},
			//  短视频报错
			videoErrorCallback(e) {
				console.log('短视频报错：' + e)
			}
		}
	}
</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: 750rpx;
		padding: 0 0 10px 0;
		overflow: visible;
	}

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

	.goods-row {
		width: 700rpx;
		height: 114px;
		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: 114px;
		height: 114px;
		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;
	}
	.tips-box {
		padding: 10px;
		width: 400rpx;
		border-radius: 6px;
		position: absolute;
		left: 175rpx;
		background-color: #ffffff;
	}
	.tips-box-text {
		text-align: center;
		color: #808080;
		font-size: 14px;
	}
</style>