Signed-off-by: liuboyan <632697560@qq.com>

直播

pagesGood/auctionDetail.vue

@@ -78,10 +78,12 @@
 					this.goodData = {
 						imgPath: res.data.imgPath,
 						productName: res.data.productName,
-						currentPrice: res.data.currentPrice,
-						auctionMinAddPrice: res.data.auctionMinAddPrice,
+						currentPrice: parseFloat(res.data.currentPrice),
+						auctionMinAddPrice: parseFloat(res.data.auctionMinAddPrice),
 						unit: res.data.unit,
+						auctionEndTime: res.data.auctionEndTime,
 					}
+					this.auctionBaseList[1].payTime = '竞拍截止时间：' + res.data.auctionEndTime
 					this.auctionList = res.data.userPriceResVOs.concat(this.auctionBaseList)
 					if (this.price <= this.goodData.currentPrice + this.goodData.auctionMinAddPrice) {
 						this.price = this.goodData.currentPrice + this.goodData.auctionMinAddPrice
@@ -97,11 +99,13 @@
 			reducePrice() {
 				if (this.price > this.goodData.currentPrice + this.goodData.auctionMinAddPrice) {
 					this.price -= this.goodData.auctionMinAddPrice
+					this.price = parseFloat(this.price.toFixed(2))
 				}
 			},
 			//  加价
 			addPrice() {
 				this.price += this.goodData.auctionMinAddPrice
+				this.price = parseFloat(this.price.toFixed(2))
 			},
 			//  去支付
 			submitAuction() {

pagesGood/liveDetail.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="container">
+		<trtc-room ref="trtc-component" :config="rtcConfig"> </trtc-room>
 		<view class="popup-open" @click="showGoods()">
 			<view class="iconfont iconzhibo-shangpin"></view>
 		</view>
@@ -32,15 +33,36 @@
 <script>
 	const NET = require('@/utils/request')
 	const API = require('@/config/api')
+	import {
+		genTestUserSig,
+		setData
+	} from "@/pagesGood/debug/GenerateTestUserSig";
+	import trtcRoom from "@/pagesGood/trtc-room/trtc-room";
 	export default {
+		components: {
+			trtcRoom
+		},
 		data() {
 			return {
 				videoType: '',
+				roomID: '',
 				goodsList: [],
+				rtcConfig: {
+					sdkAppID: '',
+					// 必要参数 开通实时音视频服务创建应用后分配的 sdkAppID
+					userID: '',
+					// 必要参数 用户 ID 可以由您的帐号系统指定
+					userSig: '',
+					// 必要参数 身份签名，相当于登录密码的作用
+					template: '' // 必要参数 组件模版，支持的值 1v1 grid custom ，注意：不支持动态修改, iOS 不支持 pusher 动态渲染
+				},
+				showTipToast: false,
+				options: {}
 			}
 		},
 		onLoad(options) {
 			this.videoType = options.videoType
+			this.roomID = options.roomID
 			NET.request(API.getLiveGoodsDetail + options.liveId, {}, 'GET').then(res => {
 				this.goodsList = res.data
 			}).catch(res => {
@@ -50,6 +72,20 @@
 				})
 			})
 		},
+		onReady() {
+			wx.setKeepScreenOn({
+				keepScreenOn: true
+			}); // 获取 rtcroom 实例
+			this.trtcComponent = this.$refs['trtc-component']; // 监听TRTC Room 关键事件
+			this.bindTRTCRoomEvent(); // 将String 类型的 true false 转换成 boolean
+			this.options.localAudio = false; //开启麦克风
+			this.options.localVideo = false; //开启视频
+			this.enterRoom({
+				roomID: Number(this.roomID),
+				userID: uni.getStorageSync("userData").userId,
+				template: "grid",
+			});
+		},
 		methods: {
 			//  打开弹窗
 			showGoods() {
@@ -64,6 +100,167 @@
 					url: '/pagesGood/goodDetails?goodId=' + item.productId
 				});
 			},
+			setData,
+			enterRoom: function(params) {
+				params.template = params.template || '1v1';
+				params.roomID = params.roomID || 2333;
+				params.userID = params.userID || new Date().getTime().toString(16);
+				console.log('* room enterRoom', params);
+				const Signature = genTestUserSig(params.userID);
+				params.sdkAppID = Signature.sdkAppID;
+				params.userSig = Signature.userSig;
+				this.template = params.template;
+				this.rtcConfig = {
+					sdkAppID: params.sdkAppID,
+					// 您的实时音视频服务创建应用后分配的 sdkAppID
+					userID: params.userID,
+					userSig: params.userSig,
+					template: params.template,
+					// 1v1 grid custom
+					debugMode: false,
+					// 非必要参数，打开组件的调试模式，开发调试时建议设置为 true
+					// cloudenv: params.cloudenv, // 非必要参数
+					frontCamera: "front",
+					enableEarMonitor: false,
+					enableAutoFocus: true,
+					localMirror: 'auto',
+					enableAgc: true,
+					enableAns: true,
+					encsmall: false ? 1 : 0,
+					videoWidth: 1280,
+					videoHeight: 720,
+					scene: "live",
+					maxBitrate: 2000,
+					minBitrate: 1500,
+					beautyLevel: 9 // 默认开启美颜
+				};
+				this.setData({
+					rtcConfig: this.rtcConfig
+				}, () => {
+					// roomID 取值范围 1 ~ 4294967295
+					this.trtcComponent.enterRoom({
+						roomID: params.roomID
+					}).then(() => {
+						if (this.template === 'custom') {
+							// 设置推流端视窗的坐标和尺寸
+							this.trtcComponent.setViewRect({
+								userID: params.userID,
+								xAxis: '480rpx',
+								yAxis: '160rpx',
+								width: '240rpx',
+								height: '320rpx'
+							});
+						}
+					}).catch(res => {
+						console.error('* room joinRoom 进房失败:', res);
+					});
+				});
+			},
+			bindTRTCRoomEvent: function() {
+				const TRTC_EVENT = this.trtcComponent.EVENT;
+				this.timestamp = []; // 初始化事件订阅
+				this.trtcComponent.on(TRTC_EVENT.LOCAL_JOIN, event => {
+					console.log('* room LOCAL_JOIN', event); // 进房成功，触发该事件后可以对本地视频和音频进行设置
+					if (this.options.localVideo === true || this.options.template === '1v1') {
+						this.trtcComponent.publishLocalVideo();
+					}
+					if (this.options.localAudio === true || this.options.template === '1v1') {
+						this.trtcComponent.publishLocalAudio();
+					}
+				});
+				this.trtcComponent.on(TRTC_EVENT.LOCAL_LEAVE, event => {
+					console.log('* room LOCAL_LEAVE', event);
+				});
+				this.trtcComponent.on(TRTC_EVENT.ERROR, event => {
+					console.log('* room ERROR', event);
+				}); // 远端用户进房
+				this.trtcComponent.on(TRTC_EVENT.REMOTE_USER_JOIN, event => {
+					console.log('* room REMOTE_USER_JOIN ---  room.vue', event, this.trtcComponent.getRemoteUserList(), this.template);
+					this.timestamp.push(new Date()); // 1v1视频通话时限制人数为两人的简易逻辑，建议通过后端实现房间人数管理
+					// 2人以上同时进行通话请选择网格布局
+					if (this.template === '1v1' && this.timestamp.length > 1) {
+						const interval = this.timestamp[1] - this.timestamp[0];
+						if (interval < 1000) {
+							// 房间里已经有两个人
+							this.setData({
+								showTipToast: true
+							}, () => {
+								setTimeout(() => {
+									this.setData({
+										showTipToast: false
+									});
+									wx.navigateBack({
+										delta: 1
+									});
+								}, 4000);
+							});
+						}
+					}
+				}); // 远端用户退出
+				this.trtcComponent.on(TRTC_EVENT.REMOTE_USER_LEAVE, event => {
+					console.log('* room REMOTE_USER_LEAVE', event, this.trtcComponent.getRemoteUserList());
+					if (this.template === '1v1') {
+						this.timestamp = [];
+					}
+					if (this.template === '1v1' && this.remoteUser === event.data.userID) {
+						this.remoteUser = null;
+					}
+				}); // 远端用户推送视频
+				this.trtcComponent.on(TRTC_EVENT.REMOTE_VIDEO_ADD, event => {
+					console.log('* room REMOTE_VIDEO_ADD', event, this.trtcComponent.getRemoteUserList()); // 订阅视频
+					const userList = this.trtcComponent.getRemoteUserList();
+					const data = event.data;
+					if (this.template === '1v1' && (!this.remoteUser || this.remoteUser === data.userID)) {
+						// 1v1 只订阅第一个远端流
+						this.remoteUser = data.userID;
+						this.trtcComponent.subscribeRemoteVideo({
+							userID: data.userID,
+							streamType: data.streamType
+						});
+					} else if (this.template === 'grid') {
+						this.trtcComponent.subscribeRemoteVideo({
+							userID: data.userID,
+							streamType: data.streamType
+						});
+					}
+					if (this.template === 'custom' && data.userID && data.streamType) {
+						let index = userList.findIndex(item => {
+							return item.userID === data.userID;
+						});
+						index++;
+						const y = 320 * index + 160; // 设置远端视图坐标和尺寸
+						this.trtcComponent.setViewRect({
+							userID: data.userID,
+							streamType: data.streamType,
+							xAxis: '480rpx',
+							yAxis: y + 'rpx',
+							width: '240rpx',
+							height: '320rpx'
+						});
+					}
+				}); // 远端用户取消推送视频
+				this.trtcComponent.on(TRTC_EVENT.REMOTE_VIDEO_REMOVE, event => {
+					console.log('* room REMOTE_VIDEO_REMOVE', event, this.trtcComponent.getRemoteUserList());
+				}); // 远端用户推送音频
+				this.trtcComponent.on(TRTC_EVENT.REMOTE_AUDIO_ADD, event => {
+					console.log('* room REMOTE_AUDIO_ADD', event, this.trtcComponent.getRemoteUserList()); // 订阅音频
+					const data = event.data;
+					if (this.template === '1v1' && (!this.remoteUser || this.remoteUser === data.userID)) {
+						this.remoteUser = data.userID;
+						this.trtcComponent.subscribeRemoteAudio({
+							userID: data.userID
+						});
+					} else if (this.template === 'grid' || this.template === 'custom') {
+						this.trtcComponent.subscribeRemoteAudio({
+							userID: data.userID
+						});
+					} // 如果不订阅就不会自动播放音频
+					// this.trtcComponent.subscribeRemoteAudio({ userID: data.userID })
+				}); // 远端用户取消推送音频
+				this.trtcComponent.on(TRTC_EVENT.REMOTE_AUDIO_REMOVE, event => {
+					console.log('* room REMOTE_AUDIO_REMOVE', event, this.trtcComponent.getRemoteUserList());
+				});
+			}
 		},
 	}
 </script>

pagesGood/trtc-room/template/grid/grid.css

@@ -55,7 +55,7 @@
   position: absolute;
   bottom: 5%;
   width: 100%;
-  display: flex;
+  display: none;
   flex-direction: row;
   justify-content: center;
 }

pagesGood/videoList.vue

@@ -91,7 +91,7 @@
 					})
 				}
 				uni.navigateTo({
-					url: '/pagesGood/'(this.videoType == 1 ? ('liveDetail?liveId=' + item.liveId) :
+					url: '/pagesGood/' + (this.videoType == 1 ? ('liveDetail?liveId=' + item.liveId + '&roomId=' + item.roomId) :
 						('videoDetail?videoId=' + item.videoId))
 				});
 			}