guosen-ldt-shop/pages/pay/pay-result.vue

<template>
	<view>
		<u-navbar :is-back="false" title="收款结果"></u-navbar>
		<view class="content">
			<image :src="payData.icon" mode=""></image>
			<view class="tips">
				<text >{{payData.title}}</text>
				<text >{{payData.desc}}</text>
			</view>
			<view  class="cu-btn btn radius line-gray" @click="confirm">
				确认
			</view>
		</view>
		<read-text ref="readText"></read-text>
	</view>
</template>

<script>
	import socket from "@/utils/socket.js"
	import readText from "@/components/read-text.vue"
	export default {
		components:{
			readText
		},
		data() {
			return {
				//webSocket
				webSocket:{},
				count: 0,
				//支付参数
				payParams:{},
				//支付数据
				payData:{
					payStatus:0,
					title:'订单处理中',
					desc:'正在处理中，请等待',
					icon:"/static/icon/pay-handel.png"
				},
				payAmount:0,
				failReason:'订单收款失败'
			}
		},
		beforeDestroy() {
			this.handelClose()
		},
		onUnload() {
			this.handelClose()
		},
		onHide() {
			this.handelClose()
		},
		onLoad(options) {
			if (this.$isEmpty(options.payParams)) {
				this.$dialog.showModalAndBack('支付参数不能为空')
				return
			}
			this.payParams=JSON.parse(options.payParams)
			this.openSocket()
		},
		methods: {
			confirm(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			//开启socket begin
			openSocket() {
				this.webSocket=new socket({
					sid:this.$global.SOCKET_PRE + this.vuex_shopId
				})
				this.webSocket.init(() => {
					console.log("启动成功，120s后关闭");
					this.payBefore()
					this.timeToClose()
				});
				this.webSocket.acceptMessage = (res) => {
					if (res.isSuccess==true) {
						//支付成功
						this.payAmount=res.totalPrice
						this.changePayData(1)
					}
					if (res.isSuccess==false) {
						this.failReason=res.msg
						this.changePayData(2)
					}
				}
				this.webSocket.error = (err) => {
					this.$dialog.showModalAndBack('网络错误')
				}
			},
			//定时关闭连接
			timeToClose() {
				let _this = this
				this.timerSocket = setInterval(() => {
					_this.count++
					if (_this.count == 120) {
						_this.handelClose()
					}
				}, 1000)
			},
			handelClose() {
				this.count = 0
				clearTimeout(this.timerSocket)
				this.timerSocket = null
				if (!this.$isEmpty(this.webSocket)) {
					this.webSocket.closeSocket()
				}
			},
			//开启socket end
			async payBefore(){
				this.$api.shop.scanPay(this.payParams).then(res=>{
					if (!res.success) {
						this.failReason=res.msg
						this.changePayData(2)
					}
				}).catch(err=>{
					this.changePayData(2)
				})
			},
			changePayData(type){
				if (type==1) {
					this.payData={
						payStatus:1,
						title:'收款成功',
						desc:'已收款'+this.payAmount+'元',
						icon:"/static/icon/pay-success.png"
					}
					let text='小程序收款'+this.payAmount+'元'
					this.$refs.readText.read(text)
					
				}else if (type==2) {
					this.payData={
						payStatus:2,
						title:'收款失败',
						desc:this.failReason,
						icon:"/static/icon/pay-fail.png"
					}
				}
				this.handelClose()
			}
		}
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.content{
		margin-top: 180rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		
		image{
			width: 150rpx;
			height: 150rpx;
		}
		
		.tips{
			margin-top: 50rpx;
			display: flex;
			flex-direction: column;
			text-align: center;
			
			text:first-child{
				font-size: 38rpx;
			}
			
			text:last-child{
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #969696;
			}
		}
		
		.btn{
			margin-top: 180rpx;
			width: 60%;
			padding: 42rpx;
		}
	}
</style>