CBB3/components/ui-pay/index.vue

<template>
	<view>
	<view class="pay-view fx-h fx-ac fx-bc" v-if="isShow">
		<view class="bg"></view>
		<view class="pay-body">
			<view class="pay-inner fx-h fx-bc fx-ac">
				<image src="../../static/img/wating.png" mode="widthFix" class="alipay-icon"></image>
				<view class="pay-txt">如果您支付成功，点击已支付，如果支付取消，请点击重新支付！</view>
				<view class="fx-r" style="width: 100%;">
					<view class="btn1" @tap="tapClick">已支付</view>
					<view class="btn2" @tap="hide">取消</view>
				</view>
			</view>
		</view>    
	</view>
	</view>
</template>
<style>
	.pay-view{ position:fixed;top: 0px;left: 0px; width: 100%;height: 100%;z-index: 99;}
	.pay-view .bg{ position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.6);}
	.alipay-icon{width: 80px;}
	.pay-view .pay-body{ border-radius: 10px;background: #fff;width: 90%;z-index: 9;}
	.pay-view .pay-inner{padding: 20px;}
	.pay-view .pay-txt{font-size: 14px;color: #303033;padding: 20px 0;}
	.pay-view .btn1{text-align: center;line-height: 30px;background: #FA4171;border-radius:2px;color: #fff;height: 30px; width: 47%;}
	.pay-view .btn2{margin-left: 5%;text-align: center;line-height: 30px;background: #f1f1f1;border-radius:2px;color: #000;height: 30px; width: 47%;}
	.pay-view .btn2:hover{opacity: .8;}
</style>
<script>
	import {mapState,mapMutations} from 'vuex';
	export default {
		computed: mapState(['user']),
		
		name: 'ui-pay',
		props: {
		},
		data() {
			return {
				isShow : false,
				orderId : "",
				interval : 0,
				fn : null
			}
		},

		mounted() {
			
		},
		methods: {
			
			show:function(orderId,fn){
				this.isShow = true;
				this.fn = fn;
				this.orderId = orderId;
				if(this.interval > 0) {
					clearInterval(this.interval);
				}
				this.interval = setInterval(()=>{
					this
						.request
						.post("checkPay",{orderId : this.orderId})
						.then(res=>{
							if(res.code == 200){
								clearInterval(this.interval);
								if(this.fn == null) {
									uni.redirectTo({
										url:"/pages/user/buy/order_ok"
									});
								} else {
									this.fn();
								}
							}
						})
						.catch(err=>{});
				},1000);
			},
			
			hide:function(){
				this.isShow = false;
				if(this.interval > 0) {
					clearInterval(this.interval);
					this.interval = 0;
				}
			},
			
			tapClick:function(){
				uni.showLoading({ title:"获取支付状态.."});
				this
					.request
					.post("checkPay",{orderId : this.orderId})
					.then(res=>{
						uni.hideLoading();
						if(res.code == 200) {
							clearInterval(this.interval);
							if(this.fn == null) {
								uni.redirectTo({
									url:"/pages/user/buy/order_ok"
								});
							} else {
								this.fn();
							}
						} else {
							uni.showToast({
								'title'	: "未支付成功，请稍等",
								duration : 1500,
								icon:'none'
							});
						}
					})
					.catch(err=>{
						console.log(err);
						uni.hideLoading();
						uni.showModal({ title: '系统提示', content: "获取失败:" + err, showCancel: false});
					});	
					
			}
		}
	};
</script>