CBB3/components/ui-pay/pay.vue

<template>
	<view class="shandow-box" v-if="box">
		<view class="pay_box">
			<view class="box_title fx-r fx-bc">
				<text>选择支付方式</text>
				<button class='nt fx-r fx-bc fx-ac' @tap="closeBox()">
					<image src="/static/img/m_close.png"></image>
				</button>
			</view>
			<view class="pay-contain">
				<view class="pay-item fx-r fx-bc" v-if="sysData.wxpay == 1"  @tap="payTypeSelect('wxpay')">
					<view class="pay-ico fx-r fx-bc">
						<image src="/static/img/weixin_pay.png"></image>
					</view>
					<view class="pay-title">微信支付</view>
					<button class="nt pay-select-btn fx-r fx-bc fx-ac">
						<image :src="payType == 'wxpay'? '/static/img/pay_select_btn.png' : '/static/img/pay_select.png'"></image>
					</button>
				</view>
				
				<view  v-if="sysData.ailpay == 1"  class="pay-item fx-r fx-bc" @tap="payTypeSelect('ailpay')">
					<view class="pay-ico fx-r fx-bc">
						<image src="/static/img/alipay_pay.png"></image>
					</view>
					<view class="pay-title">支付宝</view>
					<button class="nt pay-select-btn fx-r fx-bc fx-ac">
						<image :src="payType == 'ailpay'? '/static/img/pay_select_btn.png' : '/static/img/pay_select.png'"></image>
					</button>
				</view>
				
				<view  v-if="sysData.bank == 1"  class="pay-item fx-r fx-bc" @tap="payTypeSelect('unionpay')">
					<view class="pay-ico fx-r fx-bc">
						<image src="/static/img/unionpay.png"></image>
					</view>
					<view class="pay-title">银联支付</view>
					<button class="nt pay-select-btn fx-r fx-bc fx-ac">
						<image :src="payType == 'unionpay'? '/static/img/pay_select_btn.png' : '/static/img/pay_select.png'"></image>
					</button>
				</view>
				
				
		
	
				<button class="pay-btn12" @tap="tapCheckPay(0)">确认支付</button>
	
			</view>
		</view>
		<ui-pay ref="uipay"></ui-pay>
		
		
		
	</view>
</template>
<style>
	.shandow-box{position: fixed;z-index: 9999;bottom:0px;left:0px;top:0px;width:100vw;background: rgba(0,0,0,0.4);
	/* #ifdef H5 */
	    top:60px;
	/* #endif */
	}
	.pay_box{background: #ffffff;position: absolute;bottom:0px;left:0px;right:0px;padding: 5px 0px;z-index: 2;}
	.box_title{text-align: left;width:calc(100% - 24px);height:38px;line-height: 38px;border-bottom:1px solid #eeeeee;padding: 0px 12px;}
	.box_title text{color:#333333;font-size: 14px;font-weight: 700;width:calc(100% - 38px)}
	.box_title button{height:38px;width:38px;}
	.box_title button image{width:20px;height:20px;}
	.pay-contain{width:calc(100% - 24px);padding: 0px 12px;}
	.pay-item{width:100%;border-bottom:1px solid #eeeeee;height:50px;}
	.pay-ico{width:30px;height:50px;}
	.pay-ico image{height:20px;width:20px}
	.pay-title{height:50px;width:calc(100% - 30px - 50px);text-align: left;line-height: 50px;font-size: 14px;color:#3f454b;}
	button.pay-select-btn{width:50px;height:50px;}
	button.pay-select-btn image{width:20px;height:20px;}
	.pay-btn12{ background: #ff383e; color: #fff;}
	
	.pop-bank{ position: fixed;z-index: 9999;width: 100%;height: 100vh;top: 0;left: 0;background: rgba(0,0,0,0.2);}
	.pop-bank .pop-body{width: 90%;background: #fff;border-radius: 8px;height: 60vh;}
	.pop-bank .pop-top{height: 40px;border-bottom: 1px solid #F1F1F1; position: relative;}
	.pop-bank .pop-top{ text-align: center; line-height: 40px;font-size: 18px;}
	.pop-bank .pop-left{position: absolute;font-size: 14px;color: #007AFF;left: 10px;top: 0px;}
	.pop-bank .pop-top .close image{width: 20px;height: 20px; position: absolute; right: 10px;top: 10px;}
	.pop-bank scroll-view{height: calc(60vh - 100px);}
	.pop-bank .pop-bank-list{ border-bottom: 1px solid #F1F1F1; padding: 20px;}
	.pop-bank .pop-bank-list:hover{background: #F1F1F1;}
	.pop-bank .pop-bank-list image{width: 20px;height: 20px;}
	.pop-bank .pop-bank-list text{ margin-left: 10px;}
	.pop-bank .pop-bank-add{ height: 60px;text-align: center;line-height: 60px;font-size: 18px;}
	.view-btn{height: 40px;border-top: 1px solid #F1F1F1;line-height: 40px;text-align: center;color: #007AFF;}
	
	
</style>
<script>
	import {mapState,mapMutations} from 'vuex';
	import uiPay from '@/components/ui-pay/index.vue';
	export default {
		computed: mapState(['user','sysData']),
		components: {uiPay},
		name: 'ui-check-pay',
		props: {
		},
		data() {
			return {
				box : false,
				payType:"",
				orderId : "",
				isPopBank:false,
				bindBank : [],
				bankId : 0,
				isJbing : false,
				buyType : "shop",
				fn 	: null
			}
		},

		mounted() {
			
		},
		methods: {
			...mapMutations(['payPayment']),
			setbuyType(v){
				this.buyType = v;
			},
			show(orderId,fn){
				this.orderId = orderId;
				this.fn = fn;
				this.box = true;
			},
			hide:function(){
				this.box = false;
				if(this.$refs['uipay'] != null)
				this.$refs.uipay.hide();
				uni.$off('bankInit');
			},
	
			
			//
			closeBox: function() {
				this.box = false;
			},
			/**
			 * 支付类型
			 * @param {Object} type
			 */
			payTypeSelect: function(type) {
				this.payType = type;
			},
			/**
			 * 提交支付
			 */
			tapCheckPay:function(type){
				
				if(this.payType == ''){
					return this.utils.Tip("请选择支付类型");
				}
				
				if(type == 0 && this.payType == 'bank') {
					this.tapPayBank();
					return;
				}
				
				uni.showLoading({ title: '提交支付数据中..' });
				var post = {
					page	  : this,
					payType   : this.payType,
					orderId   : this.orderId,
					buyType	  : this.buyType,
					bankId	  : this.bankId,
					afterFn	  : ()=>{
						uni.hideLoading();
					},
				};
				if(this.fn != null) {
					post.payOk = this.fn;
				}
				this.payPayment(post);
			},
			
			
			/**
			 * 选择银行卡
			 */
			tapPayBank:function(){
				this.utils.loadIng("获取数据中..");
				this
					.request
					.post("JoinpayBindList")
					.then(res=>{
						uni.hideLoading();
						if(res.code == 200) {
							this.isPopBank = true;
							this.bindBank = res.data;
						} else {
							this.utils.Tip(res.msg);
						}
					})
					.catch(err=>{
						uni.hideLoading();
						this.utils.Tip("网络错误，请稍后尝试");
					});
			},
			/**
			 * 选择支付
			 */
			tapBankItem:function(id){
				if(this.isJbing) {
					uni.showModal({
						title: "提示",
						content: "确认要解绑本银行卡吗？",
						success: res => {
							if (res.confirm) {
								this.utils.loadIng("操作中..");
								this
									.request
									.post("JoinpayUnbind",{id:id})
									.then(res=>{
										uni.hideLoading();
										if(res.code == 200) {
											this.tapPayBank();
										} else {
											this.utils.Tip(res.msg);
										}
									})
									.catch(err=>{
										uni.hideLoading();
										this.utils.Tip("网络错误，请稍后尝试");
									});
							}
						},
				});	
				} else {
					uni.showModal({
						title: "提示",
						content: "确定要支付吗？",
						success: res => {
							if (res.confirm) {
							this.bankId = id;
							this.tapCheckPay(1);	
							}
						},
					});
				}
			},
			/**
			 * 解绑操作
			 */
			tapJbing:function(){
				this.isJbing = !this.isJbing;
			},
					
			/**
			 * 添加银行卡
			 */
			tapBankAdd:function(){
				uni.navigateTo({url:"/pages/user/buy/bankAdd"});
				uni.$on('bankInit',()=>{
					this.tapPayBank();
				});
			}
		}
	};
</script>