hxj/src/components/basic-component/app-layout/app-payment/app-payment.vue

<!-- 全局支付组件 -->
<template>
	<view class="app-payment main-center cross-center" :class="showPayment?'show':''">
		<view class="modal" v-if="payData">
			<view class="title">
				<view>支付方式</view>
				<view class="cancel" @click="cancel">
					<image src="https://shop.9026.com/web/statics/image/mall/static/icon/close.png"></image>
				</view>
			</view>
			<view class="pay-amount">支付金额 ￥{{balance <0 ? setPrice(payData.amount, balance) : payData.amount}} 元</view>
			<view class="pay-type-list">
				<view v-for="(item, index) in payData.list" @click="checkPayType(index)" :key="index"
					class="pay-type-item cross-center">
					<view class="box-grow-0">
						<image class="pay-type-icon" :src="item.icon"></image>
					</view>
					<view class="box-grow-1">
						<view class="pay-type-name">{{item.name}}</view>
						<view class="pay-type-desc" v-if="item.desc">{{item.desc}}</view>
					</view>
					<view class="box-grow-0">
						<view v-if="item.key === 'balance' && item.desc === '账户余额不足'" style="height: 26rpx;width:113rpx"
							@click.prevent.stop="navPay">
							<image style="height: 100%;width:100%" load-lazy="true"
								src="https://shop.9026.com/web/statics/img/mall/static/pay-td.png"></image>
						</view>
						<app-radio v-else-if="item.checked" :theme="getTheme" v-model="item.checked" type="round">
						</app-radio>
					</view>
					<view class="into-modal main-center cross-center" v-if="printPassword && item.key === 'balance'">
						<view class="password-tip" v-if="item.is_pay_password == 0 && !setPassword">
							<view class="password-content dir-top-nowrap main-center cross-center">
								<view>您的账户尚未设置余额支付密码</view>
								<view>是否立即设置？</view>
							</view>
							<view class="password-btn main-center cross-center">
								<view @click="payByBalance">暂不设置</view>
								<view class="line"></view>
								<view @click="setPassword = !setPassword;password=''" :style="{'color':getTheme.color}">
									确认</view>
							</view>
						</view>
						<view class="password-view" v-else-if="printPassword">
							<image class="password-close"
								@click="printPassword = false;setPassword = false;verifyPassword = false;"
								src="https://shop.9026.com/web/statics/image/mall/static/icon/icon-close.png"></image>
							<view class="password-title">请{{verifyPassword ? '确认':'输入'}}余额支付密码</view>
							<!-- #ifdef MP-ALIPAY -->
							<input type="number" :class="!haveFocus ? 'input' :''" @focus="haveFocus=true"
								@input="passwordInput" @blur="haveFocus=false;getFocus=false" v-model="password">
							<!-- #endif -->
							<!-- #ifdef MP-WEIXIN -->
							<input type="number" style="top:0;right: 400%" @input="passwordInput" :focus="getFocus"
								@blur="getFocus=false" v-model="password">
							<!-- #endif -->
							<!-- #ifndef MP-ALIPAY || MP-WEIXIN -->
							<input type="number" v-show="getFocus" style="top:0;right: 400%" @input="passwordInput"
								:focus="getFocus" @blur="getFocus=false" v-model="password">
							<!-- #endif -->
							<view @click="getInputFocus" class="passoword-input main-center cross-center">
								<view class="password-item main-center cross-center">
									<view v-if="password.length > 0" class="password-placeholder"></view>
								</view>
								<view class="password-item main-center cross-center">
									<view v-if="password.length > 1" class="password-placeholder"></view>
								</view>
								<view class="password-item main-center cross-center">
									<view v-if="password.length > 2" class="password-placeholder"></view>
								</view>
								<view class="password-item main-center cross-center">
									<view v-if="password.length > 3" class="password-placeholder"></view>
								</view>
								<view class="password-item main-center cross-center">
									<view v-if="password.length > 4" class="password-placeholder"></view>
								</view>
								<view class="password-item main-center cross-center">
									<view v-if="password.length > 5" class="password-placeholder"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="footer">
				<!--  #ifdef MP -->
				<app-button type="important" :theme="getTheme" @click="confirm" round>提交订单</app-button>
				<!--  #endif-->
				<!--  #ifdef H5 -->
				<app-button type="important" :theme="getTheme" @click.native.stop="confirm" round>提交订单</app-button>
				<!--  #endif-->
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue';
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import AppRadio from '@/components/basic-component/app-radio/app-radio';

	export default {
		name: 'app-payment',
		components: {
			AppRadio
		},
		computed: {
			...mapState({
				mall: state => state.mallConfig.mall,
				userInfo: state => state.user.info,
				showPayment: function(state) {
					return state.payment.showPayment;
				},
				payData: state => state.payment.payData,
			}),
			...mapGetters('mallConfig', {
				getTheme: 'getTheme',
			}),
		},
		data() {
			return {
				balance: 0, // 余额
				is_need_pay_password: 0,
				haveFocus: false,
				getFocus: false,
				printPassword: false,
				setPassword: false,
				verifyPassword: false,
				password: '',
				verify_pay_password: '',
				pay_password: '',
				payPassword: '',
			}
		},
		created() {
			this.setPayment();
			this.getSetting();
		},
		destroyed(){
			this.$store.commit('payment/showPayment', false);
		},
		methods: {
			getInputFocus() {
				this.$nextTick(() => {
					this.getFocus = true;
				})
			},
			passwordInput() {
				if (this.password.length == 6) {
					setTimeout(() => {
						if (this.setPassword) {
							this.setPayPassword();
						} else {
							uni.showLoading({
								mask: true
							});
							uni.hideKeyboard();
							this.verifyPayPassword();
						}
					})
				}
			},
			setPayPassword() {
				if (this.password.length < 6) {
					return false;
				}
				if (!this.verifyPassword) {
					this.pay_password = this.password.toString().substring(0, 6);
					this.verifyPassword = true;
					this.password = '';
				} else {
					this.verify_pay_password = this.password.toString().substring(0, 6);;
					if (this.pay_password === this.verify_pay_password) {
						uni.showLoading({
							mask: true
						});
						let data = {
							pay_password: this.pay_password,
							verify_pay_password: this.verify_pay_password,
						}
						this.$request({
							url: this.$api.member.set_password,
							method: "post",
							data: data
						}).then(response => {
							uni.hideLoading();
							if (response.code === 0) {
								this.payPassword = this.pay_password;
								this.printPassword = false;
								this.setPassword = false;
								this.verifyPassword = false;
								this.password = '';
								this.pay_password = '';
								this.verify_pay_password = '';
								this.$store.commit('payment/showPayment', false);
								this.payByBalance();
							} else {
								this.password = '';
								this.pay_password = '';
								this.verify_pay_password = '';
								uni.showToast({
									icon: 'none',
									title: response.msg
								});
							}
						});
					} else {
						this.verifyPassword = false;
						this.password = '';
						this.pay_password = '';
						this.verify_pay_password = '';
						uni.showToast({
							icon: 'none',
							title: '两次输入的密码不一致'
						})
					}
				}
			},
			navPay() {
				this.$store.commit('payment/showPayment', false);
				this.$store.state.payment.reject({
					errMsg: '5b03b6e009796c698d132908cb635fca',
				});
				uni.navigateTo({
					url: "/pages/balance/recharge"
				});
			},
			// 获取余额接口
			getSetting: function() {
				if ((this.$store.state.user.accessToken === '' || this.$store.state.user.accessToken === null)) {
					return true;
				}
				const self = this;
				self.$request({
					url: self.$api.balance.index,
				}).then(info => {
					if (info.code === 0) {
						this.balance = Number(info.data.balance);
					}
				});
			},
			setPrice(price, balance) {
				price = Number(price)
				balance = Math.abs(balance)
				return price + balance
			},
			// 提交订单
			setPayment() {
				const vm = this;
				Vue.use({
					install(Vue, options) {
						Vue.prototype.$payment = {
							pay: vm.pay,
						};
					},
				});
			},
			pay(id) {
				return new Promise((resolve, reject) => {
					this.$store.commit('payment/setAll', {
						showPayment: false,
						payData: null,
						payType: null,
						id: id,
						resolve: resolve,
						reject: reject,
					});
					
					uni.showLoading({
						mask: true,
						title: '请求支付...',
					});
					this.$request({
						url: this.$api.payment.get_payments,
						data: {
							id: id,
						}
					}).then(response => {
						uni.hideLoading();
						console.log('debug 1--->', response);
						if (response.code === 0) {
							console.log('debug payment, set resolve 2,', this.$store.state.payment
							.resolve);
							return this.showPaymentModal(response.data);
						} else {
							response.errMsg = response.msg || '';
							return this.$store.state.payment.reject(response.msg);
						}
					}).catch(e => {
						uni.hideLoading();
						e.errMsg = e.msg || '';
						return this.$store.state.payment.reject(e);
					});
				});
			},
			showPaymentModal(data) {
				console.log('debug 2--->', data);
				for (let i in data.list) {
					if (typeof data.list[i].checked === 'undefined') {
						data.list[i].checked = false;
					}
				}
				this.$store.commit('payment/payData', data);
				if (data.amount === 0 || data.amount === 0.00 || data.amount === '0' || data.amount === '0.00') {
					this.$store.commit('payment/payType', 'balance');
					for (let i in this.$store.state.payment.payData.list) {
						if (this.$store.state.payment.payData.list[i].key === 'balance') {
							this.$store.state.payment.payData.list[i].checked = true;
						} else {
							this.$store.state.payment.payData.list[i].checked = false;
						}
					}
					this.confirm();
					return;
				}
				this.$store.commit('payment/showPayment', true);
			},
			confirm() {
				
				for (let i in this.$store.state.payment.payData.list) {
					if (this.$store.state.payment.payData.list[i].checked) {
						this.$store.commit('payment/payType', this.$store.state.payment.payData.list[i].key);
					}
				}
				if (!this.$store.state.payment.payType) {
					uni.showModal({
						title: '提示',
						content: '请选择支付方式',
						showCancel: false,
					});
					return;
				}
				this.$store.commit('payment/showPayment', false);
				console.log('payment confirm 2:', this.$store.state.payment.payType);
				console.log('debug payment, confirm 2,', this.$store.state.payment.resolve);
				return this.getPayData();
			},
			cancel() {
				this.$store.commit('payment/showPayment', false);
				return this.$store.state.payment.reject({
					errMsg: '支付取消',
				});
			},
			checkPayType(index) {
				if (this.$store.state.payment.payData.list[index].disabled || this.$store.state.payment.payData.list[index]
					.checked) {
					return false;
				}
				const payData = this.$store.state.payment.payData;
				for (let i in payData.list) {
					if (i == index) {
						payData.list[i].checked = true;
					} else {
						payData.list[i].checked = false;
					}
				}
				this.$store.commit('payment/payData', payData);
			},
			getPayData() {
				console.log('debug payment, getPayData 1,', this.$store.state.payment.resolve);
				uni.showLoading({
					mask: true,
					title: '请求支付...',
				});
				let _this = this;
				let data = {
					id: this.$store.state.payment.id,
					pay_type: this.$store.state.payment.payType,
				}
				// #ifdef H5
				this.$storage.setStorageSync('WEB_URL', window.location.href + '&pay_id_weChart=' + data.id +
					'&isWechat=true');
				if (window.location.hash.indexOf('/pages/balance/recharge') > -1) {
					data.url = window.location.href.split('#')[0] + '#/pages/balance/recharge?isPay=ture';
				} else {
					if (window.location.hash.indexOf('?') > -1) {
						data.url = window.location.href + '&isPay=ture'
					} else {
						data.url = window.location.href + '?isPay=ture'
					}
				}
				data.url += `&isWechat=true&payType=${this.$store.state.payment.payType}`
				if (!this.$jwx.isWechat()) {
					data.url += '&pay_id_weChart=' + data.id
				}
				// #endif
				this.$request({
					url: this.$api.payment.pay_data,
					data: data
				}).then(response => {
					uni.hideLoading();
					if (response.code === 0) {
						switch (this.$store.state.payment.payType) {
							case 'balance':
								this.callBranch(response.data);
								break;
							case 'huodao':
								this.callHuodao(response.data);
								break;
								// #ifdef H5
							case 'wechat_h5':
								console.log('debug payment, wechat_h5');
								this.$jwx.chooseWXPay({
									timestamp: response.data.timeStamp,
									nonceStr: response.data.nonceStr,
									packAge: response.data.package,
									signType: response.data.signType,
									paySign: response.data.paySign,
									webUrl: response.data.mweb_url,
									success() {
										_this.$store.state.payment.resolve({
											errMsg: '支付成功',
										});
									},
									fail(res) {
										_this.$store.state.payment.reject({
											errMsg: res.msg
										});
									}
								});
								uni.showModal({
									content: '确定已完成支付？',
									confirmText: '确定',
									cancelText: '返回支付',
									success(res) {
										if (res.confirm) {
											_this.weChartPay(_this.$store.state.payment.id);
										} else if (res.cancel) {
											_this.$store.state.payment.reject({
												errMsg: '支付取消'
											});
										}
									}
								});
								break;
							case 'alipay_h5':
								if (this.$jwx.isWechat()) {
									_AP.pay(response.data.url);
								} else {
									window.location.href = response.data.url;
									uni.showModal({
										content: '确定已完成支付？',
										confirmText: '确定',
										cancelText: '返回支付',
										success(res) {
											if (res.confirm) {
												_this.weChartPay(_this.$store.state.payment.id);
												// _this.$store.state.payment.resolve({
												//     errMsg: '支付成功',
												// });
											} else if (res.cancel) {
												_this.$store.state.payment.reject({
													errMsg: '支付取消'
												});
											}
										},
										fail() {}
									});
								}
								console.log('debug payment, alipay_h5');
								break;
								// #endif
							default:
								// #ifdef MP
								console.log('debug payment, getPayData 2,', this.$store.state.payment.resolve);
								this.callPlatformPayment(response.data);
								// #endif
								break;
						}
					} else {
						return this.$store.state.payment.reject(response.msg);
					}
				}).catch(e => {
					uni.hideLoading();
					e.errMsg = e.msg || '';
					return this.$store.state.payment.reject(e);
				});
			},
			callBranch(data) {
				let that = this;
				if (data.order_amount === 0 || data.order_amount === 0.00 || data.order_amount === '0' || data
					.order_amount === '0.00') {
					this.payByBalance();
				} else {
					uni.showModal({
						title: '余额支付确认',
						content: `账户余额：${data.balance_amount}，支付金额：${data.order_amount}`,
						success: (e) => {
							if (e.confirm) {
								for (let item of this.payData.list) {
									if (item.key == 'balance') {
										if (item.is_open_pay_password == 1) {
											this.payPassword = '';
											this.is_need_pay_password = item.is_pay_password;
											this.password = '';
											this.$store.commit('payment/showPayment', true);
											this.printPassword = true;
											setTimeout(() => {
												this.getFocus = true;
											}, 800)
										} else {
											this.payByBalance();
										}
										break
									}
								}
							} else {
								return this.$store.state.payment.reject({
									errMsg: '支付取消.',
								});
							}
						}
					});
				}
			},
			verifyPayPassword() {
				if (this.password.length < 6) {
					return false;
				}
				this.payPassword = this.password.toString().substring(0, 6);
				this.$request({
					url: this.$api.member.verify_password,
					data: {
						pay_password: this.payPassword,
					},
					method: 'post'
				}).then(response => {
					this.password = '';
					uni.hideLoading();
					if (response.code === 0) {
						this.$store.commit('payment/showPayment', false);
						this.payByBalance();
					} else {
						this.password = '';
						this.payPassword = '';
						uni.showModal({
							title: '提示',
							content: response.msg,
							showCancel: false
						});
					}
				}).catch(e => {
					uni.hideLoading();
					e.errMsg = e.msg || '';
					return this.$store.state.payment.reject(e);
				});
			},
			payByBalance() {
				uni.showLoading({
					mask: true,
					title: '支付中...',
				});
				let para = {
					id: this.$store.state.payment.id,
					pay_password: this.payPassword ? this.payPassword : '',
					is_need_pay_password: this.is_need_pay_password
				}
				this.$request({
					url: this.$api.payment.pay_buy_balance,
					data: para
				}).then(response => {
					uni.hideLoading();
					if (response.code === 0) {
						this.$store.commit('payment/showPayment', false);
						return this.$store.state.payment.resolve({
							errMsg: '支付成功',
						});
					} else {
						return this.$store.state.payment.reject({
							errMsg: response.msg,
						});
					}
				}).catch(e => {
					e.errMsg = e.msg || '';
					return this.$store.state.payment.reject(e);
				});
			},
			callHuodao() {
				uni.showLoading({
					mask: true,
					title: '提交中...',
				});
				this.$request({
					url: this.$api.payment.pay_buy_huodao,
					data: {
						id: this.$store.state.payment.id,
					},
				}).then(response => {
					uni.hideLoading();
					if (response.code === 0) {
						return this.$store.state.payment.resolve({
							errMsg: '支付成功',
						});
					} else {
						return this.$store.state.payment.reject({
							errMsg: response.msg,
						});
					}
				}).catch(e => {
					uni.hideLoading();
					e.errMsg = e.msg || '';
					return this.$store.state.payment.reject(e);
				});
			},
			// #ifdef MP
			callPlatformPayment(data) {
				console.log('debug payment, callPlatformPayment 1,', this.$store.state.payment.resolve);
				let paymentProvider = null;
				// #ifdef MP-WEIXIN
				paymentProvider = ['wxpay'];
				// #endif
				// #ifdef MP-ALIPAY
				paymentProvider = ['alipay'];
				// #endif
				// #ifdef MP-BAIDU
				paymentProvider = ['baidu'];
				// #endif
				// #ifdef MP-TOUTIAO
				paymentProvider = ['toutiao'];
				// #endif
				uni.requestPayment({
					provider: paymentProvider,
					success: (e) => {
						console.log('debug payment, callPlatformPayment 3,', this.$store.state.payment
						.resolve);
						console.log('success:', e);
						// #ifndef MP-ALIPAY
						return this.$store.state.payment.resolve(e);
						// #endif
						// #ifdef MP-ALIPAY
						if (e.resultCode === 9000 || e.resultCode === '9000') {
							return this.$store.state.payment.resolve(e);
						} else {
							return this.$store.state.payment.reject({
								errMsg: e.memo,
							});
						}
						// #endif
					},
					fail: (e) => {
						const cancelMsgList = [
							'requestPayment:fail cancel',
						];
						if (e.errMsg && cancelMsgList.indexOf(e.errMsg) >= 0) {
							e.errMsg = '取消支付';
						}
						console.log('debug payment, callPlatformPayment 4,', this.$store.state.payment
						.resolve);
						console.log('fail:', e);
						return this.$store.state.payment.reject(e);
					},
					...data
				});
			},
			// #endif
			// #ifdef H5
			alipayH5Pay() {},
			weChartPay(id) {
				this.$request({
					url: this.$api.registered.pay,
					method: 'get',
					data: {
						payment_order_union_id: id
					}
				}).then((res) => {
					if (res.code === 0) {
						if (res.data.status === 1) {
							this.$store.state.payment.resolve({
								errMsg: '支付成功',
							});
							uni.redirectTo({
								url: `/pages/order-submit/pay-result?payment_order_union_id=${id}`,
							});
						} else {
							uni.redirectTo({
								url: '/pages/order/index/index'
							});
						}
					}
				})
			}
			// #endif
		},
	}
</script>

<style scoped lang="scss">
	$bigPadding: #{50rpx};
	$smallPadding: #{25rpx};
	$middlePadding: #{30rpx};
	$smallFont: #{24rpx};
	$lineWidth: #{1rpx};
	$modalWidth: #{600rpx};
	$iconWidth: #{60rpx};

	.app-payment {
		background: rgba(0, 0, 0, .5);
		position: fixed;
		z-index: 2000;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		visibility: hidden;
		opacity: 0;
		transition: 150ms;

		.modal {
			background: #fff;
			width: $modalWidth;
			border-radius: #{15rpx};

			.title {
				text-align: center;
				padding: $middlePadding;
				border-bottom: $lineWidth solid #e2e2e2;
				position: relative;
			}

			.cancel {
				position: absolute;
				right: 0;
				top: 0;
				padding: $middlePadding;

				image {
					width: #{36rpx};
					height: #{36rpx};
				}
			}

			.pay-amount {
				text-align: center;
				padding: $bigPadding;
				font-weight: bolder;
			}

			.pay-type-list {
				padding: 0 $bigPadding;
			}

			.pay-type-item {
				border-bottom: $lineWidth solid #e2e2e2;
				padding: $smallPadding 0;

				.pay-type-icon {
					width: $iconWidth;
					height: $iconWidth;
					margin-right: $smallPadding;
				}

				.pay-type-desc {
					color: #909090;
					font-size: $smallFont;
				}
			}

			.pay-type-item:last-child {
				border-bottom: none;
			}

			.footer {
				padding: $bigPadding;
			}
		}
	}

	.app-payment.show {
		visibility: visible;
		opacity: 1;
	}

	.into-modal {
		background: rgba(0, 0, 0, .5);
		position: fixed;
		z-index: 2100;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 1;
		transition: 150ms;

		.password-tip {
			width: #{630rpx};
			height: #{340rpx};
			position: relative;
			border-radius: #{16rpx};
			background-color: #fff;

			.password-content {
				height: #{240rpx};
				width: 100%;
				color: #353535;
			}

			.password-btn {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				color: #666666;
				height: #{88rpx};
				border-top: #{2rpx} solid #e2e2e2;

				>view {
					width: 50%;
					text-align: center;
					height: #{88rpx};
					line-height: #{88rpx};
				}

				.line {
					width: #{2rpx};
					height: #{32rpx};
					background-color: #e2e2e2;
				}
			}
		}

		.password-view {
			position: relative;
			width: #{560rpx};
			height: #{300rpx};
			border-radius: #{16rpx};
			background-color: #fff;
			margin-top: #{-200rpx};

			.password-close {
				position: absolute;
				top: #{29rpx};
				right: #{28rpx};
				width: #{30rpx};
				height: #{30rpx};
				z-index: 2101;
			}

			.password-title {
				height: #{140rpx};
				line-height: #{140rpx};
				text-align: center;
				margin-bottom: #{128rpx};
			}

			.password-button {
				padding: 0 #{60rpx};
				position: relative;
				z-index: 2101;
			}

			input {
				position: absolute;
				top: -300%;
				width: #{475rpx};
				height: #{78rpx};
				margin: 0 auto;
				z-index: 9999;
			}

			.input {
				top: #{144rpx};
				height: #{70rpx};
				left: #{42.5rpx};
				color: #fff;
				font-size: #{1rpx};
				background-color: transparent;
				opacity: 0;
			}

			.passoword-input {
				position: absolute;
				background-color: #fff;
				top: #{140rpx};
				left: 0;
				width: 100%;
				z-index: 2101;

				.password-item {
					border: #{2rpx} solid #e2e2e2;
					margin-left: #{-2rpx};
					height: #{78rpx};
					width: #{78rpx};

					.password-placeholder {
						width: #{24rpx};
						height: #{24rpx};
						border-radius: 50%;
						background-color: #353535;
					}
				}
			}
		}
	}
</style>