webSocket

assets/http/global.js

@@ -5,7 +5,7 @@ global.baseUrl='https://ldt.guosen-fumao.cn/api/'
 
 // global.baseUrl='http://localhost:2539/'
 
-global.WebSocketUrl='ws://ldt.guosen-fumao.cn/websocket/'
+global.WebSocketUrl='wss://ldt.guosen-fumao.cn/websocket/'
 
 global.tokenUrl=global.baseUrl+ 'blade-auth/oauth/token?tenantId=000000&password=f67e0b29283bb804f96e28f43ddce79f&username=admin'
 

components/mescroll-body/mescroll-uni-option.js

@@ -27,7 +27,7 @@ const GlobalOption = {
 		},
 		empty: {
 			use: true, // 是否显示空布局
-			icon: "/static/agent/empty1.png", // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
+			icon: "/static/icon/empty5.png", // 图标路径 (建议放入static目录, 如 /static/img/mescroll-empty.png )
 			tip: '数据为空' // 提示
 		}
 	}

main.js

@@ -112,4 +112,5 @@ const app = new Vue({
 	store,
     ...App
 })
+
 app.$mount()

pages/checkstand/pay-qrcode.vue

@@ -31,6 +31,7 @@
 	import tkiQrcode from "tki-qrcode"
 	import tkiBarcode from "@/components/tki-barcode/tki-barcode.vue"
 	import totp from "@/utils/totp.js"
+	import socket from "@/utils/socket.js"
 	export default {
 		components: {
 			tkiBarcode,
@@ -55,14 +56,67 @@
 					width: 3,
 					height: 130,
 					displayValue: false
-				}
+				},
+				//webSocket
+				webSocket:{}
 			}
 		},
+		async onLoad(options) {
+			let res = await this.$api.loginUser.detail({
+				id: this.vuex_userId
+			})
+			this.nickName=res.data.nickName
+			// this.avatar =(await  this.initAvatat(res.data.avatar)).tempFilePath;
+			//清除缓存
+			await this.clearBillRecordCache()
+			//连接websocket
+			this.onSocketOpen()
+		},
+		async mounted() {
+			//获取用户ID
+			this.id = this.vuex_userId
+			//生成动态密码
+			this.refreshCode();
+		},
+		onUnload() {
+			this.handelOut()
+		},
+		beforeDestroy() {
+			this.handelOut()
+		},
 		methods: {
+			handelOut(){
+				uni.hideLoading()
+				this.webSocket.closeSocket()
+				clearInterval(this.timer);
+				clearInterval(this.timerBillRecords);
+			},
+			// 启动webSocket
+			onSocketOpen() {
+				this.webSocket=new socket({
+					sid:this.vuex_userId
+				})
+				this.webSocket.init(()=>{
+					console.log("启动成功");
+					//连接成功，清除轮询
+					clearInterval(this.timerBillRecords)
+				});
+				this.webSocket.error = ()=>{
+					//连接失败就轮询查询订单
+					 this.timerBillRecords =  setInterval(this.queryBillRecords,5000);
+				}
+				this.webSocket.acceptMessage=(res)=>{
+					console.log(res.content);
+					console.log(res.content==this.$global.socketMessage.payForPaymentCode);
+					//收到商户通知用户去支付
+					if (res.content==this.$global.socketMessage.payForPaymentCode) {
+						this.queryBillRecords()
+					}
+				}
+			},
 			refreshCode() {
 				this.timer = setInterval(() => {
 					this.secret = totp.getSecret(this.id);
-					console.log(this.secret);
 				}, 1000)
 			},
 			async initAvatat(url) {
@@ -78,13 +132,17 @@
 					})
 				})
 			},
+			async clearBillRecordCache(){
+				await this.$api.loginUser.clearBillRecordCache({userId:this.vuex_userId})
+			},
 			async queryBillRecords(){
 				let resp=await this.$api.loginUser.getBillrecordFromRedis({userId:this.vuex_userId})
 				if (this.$isEmpty(resp.data)) {
 					return
 				}
+				//清除缓存
+				await this.clearBillRecordCache()
 				if (resp.data.realPayAmount>0) {
-					clearInterval(this.timerBillRecords)
 					//去支付
 					let params={
 						orderType:this.$global.orderType.USER_PAY,
@@ -95,47 +153,36 @@
 					if (!this.$isEmpty(res.data.prePayTn)) {
 						let prePayTn= JSON.parse(res.data.prePayTn)
 						this.$mpi.requestPayment(prePayTn).then(()=>{
-							this.$dialog.showModal('支付成功',false).then(()=>{
-								this.$api.loginUser.clearBillRecordCache({userId:this.vuex_userId})
-								uni.navigateBack({
-									delta:1
-								})
-							})
+							//通知商户端付款成功
+							this.sendInfo(resp.data)
+							this.handelResult('支付成功')
 						}).catch(err=>{
-							this.$dialog.showModal('支付失败',false).then(()=>{
-								this.$api.loginUser.clearBillRecordCache({userId:this.vuex_userId})
-								uni.navigateBack({
-									delta:1
-								})
-							})
+							this.handelResult('支付失败')
 						})
+						return
 					}
+					this.handelResult('支付失败')
+					
+				}else{
+					this.handelResult('已使用积分抵扣成功')
 				}
 			},
+			handelResult(content){
+				this.$dialog.showModal(content,false).then(()=>{
+					this.$api.loginUser.clearBillRecordCache({userId:this.vuex_userId})
+					uni.reLaunch({
+						url:"/pages/mine/mine"
+					})
+				})
+			},
+			sendInfo(data){
+				let msg={
+					sid:data.shopId,
+					content:"账户到账 "+data.payAmount,
+				}
+				this.$api.webSocket.sendInfo(msg)
+			},
 		},
-		async created(option) {
-			let res = await this.$api.loginUser.detail({
-				id: this.vuex_userId
-			})
-			this.nickName=res.data.nickName
-			// this.avatar =(await  this.initAvatat(res.data.avatar)).tempFilePath;
-			//清除缓存
-			await this.$api.loginUser.clearBillRecordCache({userId:this.vuex_userId})
-			//轮询	
-			this.timerBillRecords =  setInterval(this.queryBillRecords,5000);
-		},
-		async mounted(option) {
-			//获取用户ID
-			this.id = this.vuex_userId
-			//生成动态密码
-			this.refreshCode();
-		},
-		beforeDestroy() {
-			clearInterval(this.timer);
-			clearInterval(this.timerBillRecords);
-			uni.hideLoading()
-		}
-		
 	}
 </script>
 

pages/checkstand/pay-qrcode1.vue

@@ -1,3 +1,4 @@
+<!-- 纯轮询做法 -->
 <template>
 	<view class="code-container">
 		<view class="title center">{{isPayment? "向商家付款":"扫一扫，向我付款"}}</view>
@@ -55,47 +56,14 @@
 					width: 3,
 					height: 130,
 					displayValue: false
-				},
-				
-				//webSocket
-				connected: false,
-				connecting: false,
-				socketTask: false,
-				msg: false,
-			}
-		},
-		async onLoad(options) {
-			let res = await this.$api.loginUser.detail({
-				id: this.vuex_userId
-			})
-			this.nickName=res.data.nickName
-			// this.avatar =(await  this.initAvatat(res.data.avatar)).tempFilePath;
-			//清除缓存
-			await this.$api.loginUser.clearBillRecordCache({userId:this.vuex_userId})
-			//连接websocket
-			this.connect()
-		},
-		async mounted() {
-			//获取用户ID
-			this.id = this.vuex_userId
-			//生成动态密码
-			this.refreshCode();
-		},
-		onUnload() {
-		    uni.hideLoading()
-			if (this.socketTask && this.socketTask.close) {
-				this.socketTask.close()
+				}
 			}
 		},
-		beforeDestroy() {
-			clearInterval(this.timer);
-			clearInterval(this.timerBillRecords);
-			uni.hideLoading()
-		},
 		methods: {
 			refreshCode() {
 				this.timer = setInterval(() => {
 					this.secret = totp.getSecret(this.id);
+					console.log(this.secret);
 				}, 1000)
 			},
 			async initAvatat(url) {
@@ -117,10 +85,7 @@
 					return
 				}
 				if (resp.data.realPayAmount>0) {
-					//清除轮询
 					clearInterval(this.timerBillRecords)
-					//关闭通讯
-					this.close()
 					//去支付
 					let params={
 						orderType:this.$global.orderType.USER_PAY,
@@ -131,8 +96,6 @@
 					if (!this.$isEmpty(res.data.prePayTn)) {
 						let prePayTn= JSON.parse(res.data.prePayTn)
 						this.$mpi.requestPayment(prePayTn).then(()=>{
-							//通知商户端付款成功
-							this.sendInfo(resp.data)
 							this.$dialog.showModal('支付成功',false).then(()=>{
 								this.$api.loginUser.clearBillRecordCache({userId:this.vuex_userId})
 								uni.navigateBack({
@@ -147,88 +110,33 @@
 								})
 							})
 						})
-						return
-					}
-					this.$dialog.showModal('支付失败',false).then(()=>{
-						this.$api.loginUser.clearBillRecordCache({userId:this.vuex_userId})
-						uni.navigateBack({
-							delta:1
-						})
-					})
-				}
-			},
-			connect() {
-				if (this.connected || this.connecting) {
-					return false
-				}
-				this.connecting = true
-				this.socketTask = uni.connectSocket({
-					url: this.$global.WebSocketUrl+this.vuex_userId,
-					// #ifdef MP
-					header: {
-						'content-type': 'application/json'
-					},
-					// #endif
-					// #ifdef MP-WEIXIN
-					method: 'GET',
-					// #endif
-					success(res) {
-						console.log(res);
-					},
-					fail(err) {
-						console.log(err);
-					}
-				})
-				this.socketTask.onOpen((res) => {
-					this.connecting = false
-					this.connected = true
-					console.log('onOpen', res);
-					//连接成功，清除轮询
-					clearInterval(this.timerBillRecords)
-				})
-				this.socketTask.onError((err) => {
-					this.connecting = false
-					this.connected = false
-					//连接失败就轮询查询订单
-					 this.timerBillRecords =  setInterval(this.queryBillRecords,5000);
-				})
-				this.socketTask.onMessage((res) => {
-					this.msg= JSON.parse(res.data)
-					if (this.msg.content==this.$global.socketMessage.payForPaymentCode) {
-						this.queryBillRecords()
-					}
-				})
-				this.socketTask.onClose((res) => {
-					this.connected = false
-					this.socketTask = false
-					this.msg = false
-					console.log('onClose', res)
-				})
-			},
-			send(data) {
-				this.socketTask.send({
-					data: JSON.stringify(data),
-					success(res) {
-						console.log(res);
-					},
-					fail(err) {
-						console.log(err);
 					}
-				})
-			},
-			close() {
-				if (this.socketTask && this.socketTask.close) {
-					this.socketTask.close()
-				}
-			},
-			sendInfo(data){
-				let msg={
-					sid:data.shopId,
-					content:"账户到账"+data.payAmount,
 				}
-				this.$api.webSocket.sendInfo(msg)
 			},
 		},
+		async created(option) {
+			let res = await this.$api.loginUser.detail({
+				id: this.vuex_userId
+			})
+			this.nickName=res.data.nickName
+			// this.avatar =(await  this.initAvatat(res.data.avatar)).tempFilePath;
+			//清除缓存
+			await this.$api.loginUser.clearBillRecordCache({userId:this.vuex_userId})
+			//轮询	
+			this.timerBillRecords =  setInterval(this.queryBillRecords,5000);
+		},
+		async mounted(option) {
+			//获取用户ID
+			this.id = this.vuex_userId
+			//生成动态密码
+			this.refreshCode();
+		},
+		beforeDestroy() {
+			clearInterval(this.timer);
+			clearInterval(this.timerBillRecords);
+			uni.hideLoading()
+		}
+		
 	}
 </script>
 

pages/mine/bill-detail.vue

@@ -2,15 +2,15 @@
 	<view>
 		<block v-if="type=='point'">
 			<view class="top">
-				<image :src="item.logo" mode=""></image>
+				<image style="border-radius: 50%;" :src="item.logo" mode=""></image>
 				<text class="title">{{item.name}}</text>
 				<view class="data">
 					<image src="@/static/icon/points-value.png" mode="aspectFit"></image>
 					<view>
 						<text v-if="item.type==1||item.type==2">+</text>
 						<text v-if="item.type==3">-</text>
-						<text>{{billDetail.point}}</text>
-						<text>(价值 ￥ {{billDetail.pointValue}})</text>
+						<text>{{item.point}}</text>
+						<text>(价值 ￥ {{item.pointValue}})</text>
 					</view>
 				</view>
 			</view>

pages/mine/my-balance/my-balance.vue

@@ -24,7 +24,7 @@
 		</view>
 
 		<view class="card">
-			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
+			<mescroll-body :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
 				:up="upOption">
 				<view @click="$jump('/pages/mine/bill-detail?billDetail='+JSON.stringify(item)+'&type=balance')" class="item" hover-class="hoverClass"
 					v-for="(item,index) in list" :key="index">
@@ -66,7 +66,8 @@
 					month: true,
 				},
 				defaultTime:'',
-				pointValue:''
+				pointValue:'',
+				height:''
 			}
 		},
 		onLoad(options) {
@@ -75,7 +76,14 @@
 			}
 			this.defaultTime =this.$dateTime.format(new Date(),'YYYY-mm')
 		},
+		onReady() {
+			this.getElInfo()
+		},
 		methods: {
+			async getElInfo() {
+				let rectInfo = await this.$u.getRect('.card');
+				this.height = this.$u.sys().windowHeight - rectInfo.top + 'px'
+			},
 			confirmTime(e){
 				this.defaultTime = e.year + '-' +e.month
 				this.downCallback()

pages/mine/my-points/my-points.vue

@@ -29,7 +29,7 @@
 		</view>
 
 		<view class="card">
-			<view style="display: flex;">
+			<view style="display: flex;" class="cardTitle">
 				<view class="area1 area-padding " style="padding-left: 40rpx;">
 					<text>积分来源</text>
 				</view>
@@ -40,9 +40,9 @@
 					<text>价值</text>
 				</view>
 			</view>
-			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
+			<mescroll-body :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption"
 				:up="upOption">
-				<view @click="$jump('/pages/mine/bill-detail?billDetail='+JSON.stringify(item))+'&type=point'" class="item" hover-class="hoverClass"
+				<view @click="jump(item)" class="item" hover-class="hoverClass"
 					v-for="(item,index) in list" :key="index">
 					<view class="area1">
 						<view class="item-padding">
@@ -86,11 +86,13 @@
 					month: true,
 				},
 				defaultTime:'',
-				point:''
+				point:'',
+				height:''
 			}
 		},
 		onReady(){
 			this.defaultTime=this.$dateTime.format(new Date(),'YYYY-mm')
+			this.getElInfo()
 		},
 		onLoad(options) {
 			if(options.point){
@@ -98,6 +100,16 @@
 			}
 		},
 		methods: {
+			async getElInfo() {
+				let rectInfo = await this.$u.getRect('.cardTitle');
+				this.height = this.$u.sys().windowHeight - rectInfo.top + 'px'
+			},
+			jump(item){
+				console.log(item);
+				uni.navigateTo({
+					url:'/pages/mine/bill-detail?billDetail='+JSON.stringify(item)+'&type=point'
+				})
+			},
 			confirmTime(e){
 				this.defaultTime = e.year + '-' +e.month
 				this.downCallback()

pages/mine/setting/setting.vue

@@ -10,7 +10,7 @@
 			<view class="">
 				<text class="cuIcon-right"></text>
 			</view>
-			<button v-if="item.name=='官方客服'" hover-class="none" open-type="contact" show-message-card="true"></button>
+			<button class="cu-btn" style="border-radius: 0;border: none;" v-if="item.name=='官方客服'" hover-class="none" open-type="contact" show-message-card="true"></button>
 		</view>
 	</view>
 </template>

utils/socket.js

@@ -0,0 +1,112 @@
+import  global from '@/assets/http/global.js'
+const baseSocketUrl=global.WebSocketUrl
+class socket {
+	constructor(options) {
+		//用户id
+		this.sid=options.sid
+		this.socketUrl=baseSocketUrl+options.sid
+		this.socketStart = false;
+		this.enableHeartbeat=true
+		this.monitorSocketClose();
+		this.socketReceive();
+		this.monitorSocketError();
+	}
+	init(callback) {
+		const _this = this;
+		if (this.socketUrl) {
+			if (this.socketStart) {
+				console.log('webSocket已经启动了');
+			} else {
+				uni.connectSocket({
+					url: this.socketUrl,
+					method: 'GET'
+				});
+				uni.onSocketOpen((res) => {
+					this.socketStart = true;
+					callback && callback();
+					console.log('WebSocket连接已打开！');
+				});
+				setTimeout(() => {
+					_this.getHeartbeat();
+				}, 5000);
+			}
+		} else {
+			console.log('socketUrl为空');
+		}
+	}
+	//Socket给服务器发送消息
+	send(data, callback) {
+		const _this = this;
+		uni.sendSocketMessage({
+			data: JSON.stringify(data),
+			success: () => {
+				callback && callback(true);
+			},
+			fail: () => {
+				callback && callback(false);
+			}
+		});
+	}
+	//Socket接收服务器发送过来的消息
+	socketReceive() {
+		const _this = this;
+		uni.onSocketMessage(function(res) {
+			let data = JSON.parse(res.data);
+			console.log('收到服务器内容：', data);
+			_this.acceptMessage && _this.acceptMessage(data);
+		});
+	}
+	//关闭Socket
+	closeSocket() {
+		const _this = this;
+		uni.closeSocket();
+		_this.socketStart = false;
+		//关闭心跳
+		_this.enableHeartbeat = false
+	}
+	//监听Socket关闭
+	monitorSocketClose() {
+		const _this = this;
+		uni.onSocketClose(function(res) {
+			console.log('WebSocket 已关闭！');
+			_this.socketStart = false;
+			if (_this.enableHeartbeat) {
+				//开启心跳就自动重连
+				setTimeout(()=>{
+					_this.init()
+				},3000)
+			}
+		});
+	}
+	//监听Socket错误
+	monitorSocketError() {
+		const _this = this;
+		uni.onSocketError(function(res) {
+			_this.socketStart = false;
+			console.log('WebSocket连接打开失败，请检查！');
+			_this.error && _this.error(res);
+		});
+	}
+	//心跳
+	getHeartbeat() {
+		const _this = this;
+		if (!this.enableHeartbeat) {
+			//未开启心跳
+			return
+		}
+		//开启心跳
+		this.send({
+			content: "心跳",
+			sid:this.sid
+		}, (val) => {
+			setTimeout(() => {
+				if (val) {
+					_this.getHeartbeat();
+				} else {
+					_this.init();
+				}
+			}, 10000);
+		});
+	}
+}
+export default socket