guosen-ldt-client/pages/checkstand/pay-result.vue

<template>
	<view @click="tooltipShow=false">
		<u-navbar :is-back="false" title="支付结果"></u-navbar>
		<view class="content">
			<image :src="payData.icon" mode=""></image>
			<view class="tips">
				<text class="title">{{payData.title}}</text>
				<text class="desc" v-if="payData.payStatus!=1">{{payData.desc}}</text>
				<view v-else class="desc" id="tips1"  @click.stop="showTips('tips1')">
					<text >已支付 {{payResult.totalPrice || 0}} 元</text>
					<text  class="cuIcon-question" style="margin-left: 5rpx;"></text>
				</view>
			</view>
			<view  class="cu-btn btn radius line-gray" @click.stop="confirm">
				确认
			</view>
		</view>
		
		<tooltips
			 gravity="bottom"
			:tooltipShow="tooltipShow"
			:btns="tooltipBtns"
			:eleId="eleId"></tooltips>
	</view>
</template>

<script>
	import tooltips from '@/components/tooltips/tooltips.vue'
	export default {
		components:{
			tooltips
		},
		data() {
			return {
				tooltipShow:false,
				tooltipBtns:[''],
				eleId:"",
				
				payResult:{},
				payData:{
					payStatus:0,
					title:'支付处理中',
					desc:'正在处理中，请等待',
					icon:"/static/icon/pay-handel.png"
				}
			}
		},
		onLoad(options) {
			if (this.$isEmpty(options.payResult)) {
				this.$dialog.showModalAndBack('支付结果不能为空')
				return
			}
			this.payResult=JSON.parse(options.payResult)
			this.handelPayResult()
		},
		methods: {
			showTips(id){
				let tipsTxt1='现金支付 '+this.payResult.amountNum+" 元"
				let tipsTxt2='积分支付 '+this.payResult.pointsNum+" 元"
				this.tooltipBtns=[tipsTxt1,tipsTxt2]
				this.tooltipShow = true;
				this.eleId =id;
			},
			confirm(){
				uni.reLaunch({
					url:'/pages/mine/mine'
				})
			},
			//处理支付回调结果
			handelPayResult(){
				if (this.payResult.isSuccess==true) {
					this.changePayData(1)
				}
				if (this.payResult.isSuccess==false) {
					this.changePayData(2)
				}
			},
			changePayData(type){
				if (type==1) {
					this.payData={
						payStatus:1,
						title:'支付成功',
						icon:"/static/icon/pay-success.png"
					}
				}else if (type==2) {
					this.payData={
						payStatus:2,
						title:'支付失败',
						desc:this.payResult.msg,
						icon:"/static/icon/pay-fail.png"
					}
				}
			},
		}
	}
</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;
			
			.title{
				font-size: 38rpx;
			}
			
			.desc{
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #969696;
			}
		}
		
		.btn{
			margin-top: 180rpx;
			width: 60%;
			padding: 42rpx;
		}
	}
</style>