feature: new tim

jhim/jhim.js

@@ -1,9 +1,11 @@
+// #ifdef H5
 import './runtime'
-import TIM from './tim-wx';
-import LibGenerateTestUserSig from "./lib-generate-test-usersig-es.min";
-
-const EXPIRETIME = 604800;
-const LOGTAG = '--JHIM--:';
+// #endif
+import TIM from './tim-wx';
+import LibGenerateTestUserSig from "./lib-generate-test-usersig-es.min";
+
+const EXPIRETIME = 604800;
+const LOGTAG = '--JHIM--:';
 
 class JhImGroup {
 	constructor(jhim, groupId, groupType, name ,avatar) {
@@ -67,7 +69,9 @@ class JhImGroup {
 	getProfile() {
 		return this.jhim.tim.getGroupProfile({
 			groupID: this.groupId
-		}).then(res => res.data.group);
+		}).then(res => {
+			return res.data.group;
+		});
 		// memberCount
 	}
 	on(cb, type) {
@@ -81,6 +85,7 @@ class JhImGroup {
 			});
 			if(msgs.length) cb(msgs);
 		}
+		this.jhim.tim.on(TIM.EVENT.MESSAGE_RECEIVED, cb.jhimgroupcb);
 		return this;
 	}
 	off(cb) {
@@ -90,6 +95,7 @@ class JhImGroup {
 	}
 	onReady(cb) {
 		if(!cb) return this;
+		if(this.jhim.ready) cb(true);//cb(this.ready);
 		cb.jhimcbready = event => {
 			cb(this.ready)
 		}
@@ -114,6 +120,8 @@ class JhImGroup {
 				text
 			},
 		})
+		message.nick = this.name;
+		message.avatar = this.avatar;
 		return this.jhim.tim.sendMessage(message).then(() => message);
 	}
 	sendCustomMessage(payload) {
@@ -122,85 +130,87 @@ class JhImGroup {
 			conversationType: TIM.TYPES.CONV_GROUP,
 			payload,
 		})
+		message.nick = this.name;
+		message.avatar = this.avatar;
 		return this.tim.sendMessage(message).then(() => message);
 	}
 }
 
-let instance = null;
-export default class JhIm {
-	static getInstance(userId, sdkAppID, secretKey, userSig) {
-		if (JhIm.instance) return JhIm.instance;
-		return JhIm.instance = new JhIm(userId, sdkAppID, secretKey, userSig);
-	}
-
-	constructor(userId, sdkAppID, secretKey, userSig) {
-		this.userId = userId;
-		this.sdkAppID = sdkAppID;
-		this.secretKey = secretKey;
-		this.tim = TIM.create({
-			SDKAppID: this.sdkAppID
-		});
-		const generator = new LibGenerateTestUserSig(this.sdkAppID, this.secretKey, EXPIRETIME);
-		this.userSig = userSig || generator.genTestUserSig(this.userId);
+let instance = null;
+export default class JhIm {
+	static getInstance(userId, sdkAppID, secretKey, userSig) {
+		if (JhIm.instance) return JhIm.instance;
+		return JhIm.instance = new JhIm(userId, sdkAppID, secretKey, userSig);
+	}
+
+	constructor(userId, sdkAppID, secretKey, userSig) {
+		this.userId = userId;
+		this.sdkAppID = sdkAppID;
+		this.secretKey = secretKey;
+		this.tim = TIM.create({
+			SDKAppID: this.sdkAppID
+		});
+		const generator = new LibGenerateTestUserSig(this.sdkAppID, this.secretKey, EXPIRETIME);
+		this.userSig = userSig || generator.genTestUserSig(this.userId);
 		this.ready = false;
-		this.roomId = null;
-		this.groupReady = false;
-
-		// 0 普通级别，日志量较多，接入时建议使用
-		// 1 release级别，SDK 输出关键信息，生产环境时建议使用
-		// 2 告警级别，SDK 只输出告警和错误级别的日志
-		// 3 错误级别，SDK 只输出错误级别的日志
-		// 4 无日志级别，SDK 将不打印任何日志
+		this.roomId = null;
+		this.groupReady = false;
+
+		// 0 普通级别，日志量较多，接入时建议使用
+		// 1 release级别，SDK 输出关键信息，生产环境时建议使用
+		// 2 告警级别，SDK 只输出告警和错误级别的日志
+		// 3 错误级别，SDK 只输出错误级别的日志
+		// 4 无日志级别，SDK 将不打印任何日志
 		this.tim.setLogLevel(3);
 		
 		this.TYPES = TIM.TYPES;
-		this.EVENT = TIM.EVENT;
-
-		this.tim.on(TIM.EVENT.MESSAGE_RECEIVED, event => {
-			console.log(LOGTAG + 'recv', event);
-			let msgs = [];
+		this.EVENT = TIM.EVENT;
+
+		this.tim.on(TIM.EVENT.MESSAGE_RECEIVED, event => {
+			console.log(LOGTAG + 'recv', event);
+			let msgs = [];
 			event.data.forEach(v => {
-				// https://imsdk-1252463788.file.myqcloud.com/IM_DOC/Web/Message.html
+				// https://imsdk-1252463788.file.myqcloud.com/IM_DOC/Web/Message.html
 				if (v.type == TIM.TYPES.MSG_TEXT) {
-					msgs.push(v);
-					msgs.push({
-						type: v.type,
-						name: v.nick,
-						avatar: v.avatar,
-						text: v.payload.text,
-						conversationType: v.conversationType,
-						time: v.time,
-					})
-				} else if (v.type == "TIMGroupTipElem") {
-					this.onIMGroupTipElem && this.onIMGroupTipElem(v.payload);
-				}
-			})
-
-			this.onIMMessageReceived && this.onIMMessageReceived(msgs);
-		}, this);
-
+					msgs.push(v);
+					msgs.push({
+						type: v.type,
+						name: v.nick,
+						avatar: v.avatar,
+						text: v.payload.text,
+						conversationType: v.conversationType,
+						time: v.time,
+					})
+				} else if (v.type == "TIMGroupTipElem") {
+					this.onIMGroupTipElem && this.onIMGroupTipElem(v.payload);
+				}
+			})
+
+			this.onIMMessageReceived && this.onIMMessageReceived(msgs);
+		}, this);
+
 		this.tim.on(TIM.EVENT.SDK_READY, event => {
 			this.ready = true;
-		}, this);
-		this.tim.on(TIM.EVENT.SDK_NOT_READY, event => {
-			this.ready = false;
-		}, this);
-
-		return this;
+		}, this);
+		this.tim.on(TIM.EVENT.SDK_NOT_READY, event => {
+			this.ready = false;
+		}, this);
+
+		return this;
 	}
 	destory() {
 		this.tim = null;
-	}
+	}
 	on(name, cb) {
 		// 事件
 		// https://imsdk-1252463788.file.myqcloud.com/IM_DOC/Web/module-EVENT.html
 		// 1. 收到消息 TIM.EVENT.MESSAGE_RECEIVED
 		// https://imsdk-1252463788.file.myqcloud.com/IM_DOC/Web/Message.html
-		// -- type,
-		// -- nick,
-		// -- avatar,
-		// -- payload
-		// -- conversationType
+		// -- type,
+		// -- nick,
+		// -- avatar,
+		// -- payload
+		// -- conversationType
 		// -- time,
 		// 2. 接入 TIM.EVENT.SDK_READY
 		// 3. 掉线 TIM.EVENT.SDK_NOT_READY
@@ -209,13 +219,13 @@ export default class JhIm {
 		// 5. 收到 SDK 发生错误通知 TIM.EVENT.ERROR
 		// - event.name - TIM.EVENT.ERROR
 		// - event.data.code - 错误码
-		// - event.data.message - 错误信息
+		// - event.data.message - 错误信息
 		this.tim.on(name, cb);
-		return this;
-	}
-	off(name, cb) {
+		return this;
+	}
+	off(name, cb) {
 		this.tim.off(name, cb);
-		return this;
+		return this;
 	}
 	login(name, avatar) {
 		if (this.ready) return Promise.resolve();
@@ -233,6 +243,9 @@ export default class JhIm {
 					avatar: avatar,
 					allowType: TIM.TYPES.ALLOW_TYPE_ALLOW_ANY
 				});
+				// this.tim.on(TIM.EVENT.MESSAGE_RECEIVED, event=>{
+				// 	debugger
+				// });
 				resolve();
 				this.tim.off(TIM.EVENT.SDK_READY, cb, this);
 			}
@@ -283,23 +296,27 @@ export default class JhIm {
 	offMessageRecv(cb) {
 		if(!cb) return;
 		this.time.off(TIM.EVENT.MESSAGE_RECEIVED,cb.jhimcb);
-	}
-	sendText(text, to) {
-		const message = this.tim.createTextMessage({
-			to,
-			conversationType: TIM.TIM.TYPES.CONV_C2C,
-			payload: {
-				text
-			},
-		})
-		return this.tim.sendMessage(message).then(() => message);
-	}
-	sendCustomMessage(payload, to) {
-		const message = this.tim.createCustomMessage({
-			to: to,
-			conversationType: TIM.TYPES.CONV_C2C,
-			payload,
-		})
-		return this.tim.sendMessage(message).then(() => message);
-	}
+	}
+	sendText(text, to) {
+		const message = this.tim.createTextMessage({
+			to,
+			conversationType: TIM.TIM.TYPES.CONV_C2C,
+			payload: {
+				text
+			},
+		})
+		message.nick = this.name;
+		message.avatar = this.avatar;
+		return this.tim.sendMessage(message).then(() => message);
+	}
+	sendCustomMessage(payload, to) {
+		const message = this.tim.createCustomMessage({
+			to: to,
+			conversationType: TIM.TYPES.CONV_C2C,
+			payload,
+		})
+		message.nick = this.name;
+		message.avatar = this.avatar;
+		return this.tim.sendMessage(message).then(() => message);
+	}
 }

jhlive/jhlive.nvue

@@ -7,9 +7,9 @@
 			<image class="top_left_box_img" :src="avatar"></image>
 			<view class="top_left_box_text">
 				<text class="top_left_box_text1">{{title}}</text>
-				<text class="top_left_box_text2">{{subtitle}}人观看</text>
+				<text class="top_left_box_text2">{{subtitle}}</text>
 			</view>
-			<image v-if="showCollect" class="top_left_box_collect" :src="collect"></image>
+			<image v-if="showFav" class="top_left_box_collect" :src="isFav?collect:notCollect" @click="$emit('onFav', isFav)"></image>
 		</view>
 		<view class="bottom-message">
 			<!-- 对话信息 -->
@@ -20,7 +20,7 @@
 			  </view>
 			</view>
 			<!-- 下方功能 -->
-			<view class="bottom-box">
+			<view v-if="showIm" class="bottom-box">
 				<view v-if="!imStatus" class="jhim-input-box">
 				  <image class="jhim-icon" :src="inputIcon"/>
 				  <input 
@@ -34,18 +34,21 @@
 				<!-- 按钮 -->
 				<view class="bottom-box-btns">
 					<!-- <view class="" v-if="isAuthor && showBeauty" @click="btnBeautify"> -->
-					<view class="bottom-box-btns-arr" @click="btnBeautify">
+					<view v-if="isAuthor&&showBeauty" class="bottom-box-btns-arr" @click="btnBeautify">
 						<image class="btns-icon" :src="beautyIcon"/>
-						<text v-if="showBtnText" class="btns-text">美颜</text>
+						<text class="btns-text">美颜</text>
 					</view>
 					<!-- <view class="" v-if="isAuthor && showSwitch" @click="btnChangeCamera"> -->
-					<view class="bottom-box-btns-arr" @click="btnChangeCamera">
+					<view v-if="isAuthor&&showSwitch" class="bottom-box-btns-arr" @click="btnChangeCamera">
 						<image class="btns-icon" :src="switchIcon"/>
-						<text v-if="showBtnText" class="btns-text">切换</text>
+						<text class="btns-text">切换</text>
 					</view>
-					<view class="bottom-box-btns-arr" v-for="(item,index) in btns" :key="index" @click="clickBtns(index)">
+					<view class="bottom-box-btns-arr" v-for="(item,index) in btns" :key="index" @click="clickBtns(index, item)">
 						<image class="btns-icon" :src="item.picture"/>
-						<text v-if="showBtnText" class="btns-text">{{item.title}}</text>
+						<text v-if="item.title" class="btns-text">{{item.title}}</text>
+					</view>
+					<view v-if="isAuthor&&showLike" class="bottom-box-btns-arr" @click="btnLike">
+						<image class="btns-icon" :src="likeIcon"/>
 					</view>
 				</view>
 			</view>
@@ -71,6 +74,7 @@
 		//#endif
 		data() {
 			return {
+				imInput: '',
 				userSig: '',
 				beautifyLevel: false,
 				collect:"../static/images/live-collect.png", // 已收藏图标
@@ -78,6 +82,7 @@
 				inputIcon: "../static/images/live-chat.png", // 输入框图标
 				beautyIcon:"../static/images/live-beauty.png", // 美颜图标
 				switchIcon: "../static/images/live-switch.png", // 切换摄像头图标
+				likeIcon: "../static/images/live-support.png"
 			};
 		},
 
@@ -91,25 +96,23 @@
 			title: String,
 			avatar: String,
 			subtitle: String,
-			showCollect: {default: true,type: Boolean}, // 是否显示收藏
-			showBeauty: {default: true,type: Boolean}, // 是否显示美颜
-			showSwitch: {default: true,type: Boolean}, // 是否显示切换摄像头
-			showBtnText: {default: false,type: Boolean}, // 是否显示功能按钮的文字
+			isFav: {default: false,type: Boolean}, // 是否显示收藏
+			showFav: {default: false,type: Boolean}, // 是否显示收藏
+			showBeauty: {default: false,type: Boolean}, // 是否显示美颜
+			showSwitch: {default: false,type: Boolean}, // 是否显示切换摄像头
+			showLike: {default: false,type: Boolean},
+			showIm: {default: false,type: Boolean},
 			btns:{
-				default: [{picture:"../static/images/live-good.png",title:'商品'},{picture:"../static/images/live-support.png",title:'点赞'}],
+				default: [],
 				type: Array
 			}, // 按钮数组
 			imMsgs:{
-				default: [{avatar: '../static/images/loginLogo.png', name: '小鱼小鱼', text:'好吃'}, {avatar: '../static/images/loginLogo.png', name: '小鱼小鱼hh', text:'还想买哈哈哈哈'}],
+				default: [],
 				type: Array
 			},
-			imInput:{
-				default: '',
-				type: String
-			},
 			imStatus:{
 				default: '',
-				type: Boolean
+				type: String
 			}
 		},
 		onLoad() {
@@ -149,6 +152,9 @@
 				console.log(LOGTAG + 'exitRoom');
 				this.$refs.liveView.exitRoom();
 			},
+			cleanImInput() {
+				this.imInput = '';
+			},
 			btnChangeCamera() {
 				console.log(LOGTAG + 'btnChangeCamera');
 				this.$refs.liveView.switchCarema();
@@ -197,10 +203,9 @@
 				this.remoteUsers = this.remoteUsers.filter(v => v != e.detail);
 				this.$emit('onRemoteUser', this.remoteUsers);
 			},
-			clickBtns(index) {
-				
+			clickBtns(index, item) {
+				this.$emit("onBtnClick", index, item);
 			}
-
 		}
 	};
 </script>
@@ -266,7 +271,7 @@
 	.bottom-message {
 		width: 750rpx;
 		display: flex;
-		flex-direction: row;
+		flex-direction: column;
 		position: absolute;
 		bottom: 0px;
 	}
@@ -274,15 +279,13 @@
 		width: 750rpx;
 		display: flex;
 		flex-direction: row;
-		position: absolute;
 		bottom: 0px;
 		background-color:rgba(0, 0, 0, 0.4);
 	}
 	.jhim-message-box {
 	  /* position: absolute; */
-	  padding: 5;
-	  bottom: 60px;
-	  left: 5px;
+	  /* padding: 5;
+	  left: 5px; */
 	  /* display: flex; */
 	  /* z-index: 100; */
 	}
@@ -322,10 +325,11 @@
 	}
 	.jhim-logining {
 	  padding: 5px;
+	  flex: 1;
 	}
 	.jhim-logining-text {
 	  color: #fff;
-	  font-size: 24rpx;
+	  font-size: 28rpx;
 	}
 	.bottom-box-btns {
 		display: flex;

pagesGood/liveDetail.nvue

@@ -3,21 +3,15 @@
 		<jhlive 
 			ref="jhlive" class="jhlive" 
 			:sdkAppID="sdkAppID" :secretKey="secretKey" :userId="userId" :roomId="roomId"
-		    :isAuthor="isAuthor" :linkMic="linkMic" 
-			:avatar="avatar" :subtitle="num" :title="name" 
-			:imMsgs="imMsgs" @onImSend="onImSend" />
-		<!-- <view class="popup-open" @click="openPop()"> -->
-			<!-- #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 -->
-		<!-- </view> -->
+			:isAuthor="isAuthor" :linkMic="linkMic" 
+			:avatar="avatar" :subtitle="subtitle" :title="title" 
+			:showFav="true" :isFav="isLiveFav" @onLiveFav="" 
+			:showSwitch="false" :showBeauty="false" :showLike="false" :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="closePop()">收起</text>
+					<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)">
@@ -55,78 +49,58 @@
 
 <script>
 	import jhlive from "@/jhlive/jhlive";
-	import jhimlive from "@/jhim/jhimlive";
-	const NET = require('@/utils/request')
-	const API = require('@/config/api')
+	import Jhim from "@/jhim/jhim.js";
+	const NET = require('@/utils/request');
+	const API = require('@/config/api');
 
 	export default {
 		components: {
-			jhlive,
-			jhimlive
+			jhlive
 		},
 		data() {
 			return {
-				isAuthor: true,
-				linkMic: false,
-				sdkAppID: API.sdkAppID,
-				secretKey: API.secretKey,
 				windowWidth: 0,
 				windowHeight: 0,
-				userId: '',
-				roomId: '',
 				liveId: '',
-				num: 0,
-				likes: 0,
-				name: "",
-				avatar: "../static/images/loginLogo.png",
 				userData: {},
-				enabledIM: false,
-				imReady: false,
-				imMsgs:  [{name: '小鱼小鱼', text:'好吃'}, {name: '小鱼小鱼hh', text:'还想买哈哈哈哈'}],
 				videoUrl: '',
 				goodsList: [],
-				goodsIds:[]
-			}
-		},
-		beforeCreate() {
+				goodsIds: [],
 
-			uni.showToast({
-				title: '222',
-				duration: 2000
-			})
-			const domModule = uni.requireNativePlugin('dom')
-			console.log(111111111111111111, domModule)
-			domModule.addRule('fontFace', {
-				'fontFamily': "nvueIconfont",
-				'src': "url('https://at.alicdn.com/t/font_2119167_43jbldmjpr3.ttf')"
-			});
-			console.log(222222222222222)
+				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.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;
-
-			this.videoUrl = uni.getStorageSync("videoUrl").replace("http://", "https://")
-			NET.request(API.getLiveGoodsDetail + options.liveId, {}, 'GET').then(res => {
-				this.goodsList = res.data
-			}).catch(res => {
-				uni.showToast({
-					title: '获取商品列表失败',
-					type: 'warning',
-				})
-			})
 		},
 		onReady() {
 			this.isAuthor = false;
 			this.linkMic = true;
 			this.userId = "123";
-			this.name = 'test';
-			this.roomId = '1';
+			this.userName = "aaa2";
+			this.title = 'test';
+			this.roomId = '11';
 			this.$nextTick(() => this.enterRoom());
 			return;
 
@@ -137,10 +111,35 @@
 		},
 		methods: {
 			init() {
+				NET.request(API.getLiveGoodsDetail + options.liveId, {}, 'GET').then(res => {
+					this.goodsList = res.data
+				}).catch(res => {
+					uni.showToast({
+						title: '获取商品列表失败',
+						type: 'warning',
+					})
+				})
+				
 				this.avatar = uni.getStorageSync("liveImgUrl");
-				this.name = uni.getStorageSync("liveName");
+				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.jhimgroup.getProfile().then( res => {
+						this.subtitle = res.memberCount + '人在观看';
+					})
+				})
+				this.$refs.jhlive && this.$refs.jhlive.enterRoom();
+			},
 			onImText(e) {
 				this.imMsgs = [...this.msgs, e.data.map(v=>({
 					type: 'text',
@@ -155,38 +154,46 @@
 				}))];
 			},
 			onImGroupTip(e) {
-				this.subtitle = e.payload.memberCount + '人在观看';
+				this.subtitle = e[0].payload.userIDList.length + '人在观看';
 			},
 			onImGroupReady(e) {
 				this.imStatus = e?'':'登录中...';
 			},
 			onImSend(text) {
 				this.jhimgroup.sendText(text).then(msg => {
-					this.$refs.jhlive && this.$refs.jhlive.cleanImInput();
 					this.imMsgs.push({
 						type: 'text',
 						name: msg.nick,
 						text: msg.payload.text
 					});
+					this.$refs.jhlive && this.$refs.jhlive.cleanImInput();
 				});
 			},
-			onImSend(text) {
-				this.imMsgs.push({name: 'xxx', text})
+			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>
-	.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;
@@ -230,7 +237,7 @@
 	.popup-box {
 		background-color: #FFFFFF;
 		width: 750rpx;
-		height: 265px;
+		height: 750rpx;
 		border-top-left-radius: 10px;
 		border-top-right-radius: 10px;
 	}