jje_uniapp/components/pay/pay.vue

<template>
	<!--支付组件-->
	<view>
		<uni-popup ref="popup" type="bottom" @maskClick="maskClick()" :catchtouchmove="true">
			<view class=" payView">
				<view class="flex-row justify-between">
					<text class="payType">请选择支付方式</text>
					<image class="x" src="/static/common/ox.png" @click="closePayPopup"></image>
				</view>
				<view class="payTitle">
					<text>选择微信支付或余额支付</text>
				</view>

				<view class=" payItemView">
					<view v-if="blPay" class="payItem  flex-row justify-between" @click="payItem(1)">
						<view class="flex-row">
							<u-icon name="/static/me/u701.png" color="#38db38" size="36"></u-icon>
							<view class="payName flex-col justify-center">
								<text>余额支付</text>
								<text class="balance">可用余额￥{{balance}}</text>
							</view>
						</view>
						<view class="flex-col justify-center">
							<u-icon v-if="curServiceTab === 1" name="checkmark-circle-fill" color="#38db38"
									size="25"></u-icon>
							<u-icon v-else name="/static/order/ud9.png" color="green" size="25"></u-icon>
						</view>
					</view>

					<view v-if="wxPay" class="payItem  flex-row justify-between" @click="payItem(2)">
						<view class="flex-row">
							<u-icon name="weixin-circle-fill" color="#38db38" size="36"></u-icon>
							<view class="payName flex-col justify-center">
								<text class="payName">微信支付</text>
							</view>
						</view>
						<view class="flex-col justify-center">
							<u-icon v-if="curServiceTab === 2" name="checkmark-circle-fill" color="#38db38"
									size="25"></u-icon>
							<u-icon v-else name="/static/order/ud9.png" color="green" size="25"></u-icon>
						</view>
					</view>
				</view>
				<view class="commitBtn" @click="payment">
					<text>确定</text>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="passwordPopup">
			<view class="passwordView flex-col">
				<view class="h-pay-title flex-row justify-center">
					<text>请输入交易密码</text>
				</view>
				<view class="h-tab-bar flex-row justify-center">
					<u-code-input v-model="password" mode="box" dot></u-code-input>
				</view>
				<view class="flex-row justify-center">
					<view class="h-operate-btn flex-row justify-center" @click="balancePay">
						<text>确定</text>
					</view>
				</view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	/**
	 *   props参数
	 *1，needPassword：Boolean类型 是否需要输入密码。true,使用余额支付时开启密码输入框，false，使用余额支付时不弹出密码输入框直接支付。默认false。
	 *2，wxPay：Boolean类型，是否显示微信支付选项。true--显示，false--不显示。默认true。
	 *3，blPay：Boolean类型，是否显示余额支付选项。true--显示，false--不显示。默认true。
	 *4，selectBlPay：Boolean类型，余额支付选项是否能够选中。使用时请根据用户的余额进行判断。true--能，false--不能。默认true。
	 *5，orderNo：String类型，支付的订单号。
	 *6，openType：Number类型，1--支付预约费用，2---支付子订单费用。
	 *7，balance：用户余额
	 *
	 *   function 回调函数
	 * 1，payResult(e),支付结果回调。
	 * 2,improperClose 点击遮罩层和关闭按钮x 关闭弹窗时的回调
	 */
	export default {
		name: "myPay",
		props: {
			needPassword: {
				type: Boolean,
				default () {
					return false
				}
			},
			wxPay: {
				type: Boolean,
				default () {
					return true
				}
			},
			blPay: {
				type: Boolean,
				default () {
					return true
				}
			},
			selectBlPay: {
				type: Boolean,
				default () {
					return true
				}
			},
			orderNo: {
				type: String,
				default () {
					return ''
				}
			},
			openType: {
				type: Number,
				default () {
					return 1
				}
			},
			balance: {
				type: Number,
				default () {
					return 0
				}
			}
		},
		data() {
			return {
				curServiceTab: 2,
				userInfo: {},
				password: ''
			};
		},
		methods: {
			closePayPopup() {
				this.$refs.popup.close()
				this.$emit('improperClose')
			},
			openPopup() {
				this.password = ''
				this.$refs.popup.open()
			},
			payItem(num) {
				if (!this.selectBlPay) {
					return
				}
				this.curServiceTab = num
			},
			maskClick(){
				this.$emit('improperClose')
			},

			payment() {
				this.$refs.popup.close()
				if (this.curServiceTab === 1) {
					if (this.needPassword) {
						this.$refs.passwordPopup.open()
					} else {
						//余额支付
						this.balancePay()
					}
				} else {
						//微信支付
					if (this.openType == 1){
						this.wechatPay()     //支付预约费用
					}else {
						this.wechatPayTradeNo()   //支付子订单费用
					}
				}
			},



			//支付子订单的统一下单接口
			wechatPayTradeNo(){
				this.$api.wechatPayTradeNo({
					tradeNo: this.orderNo
				}).then((res) => {
					this.requestPayment(res.data.data)
				}).catch((err) => {
					this.$emit('payResult',{
						payResult:false,
						res:err
					})
				});
			},

			//支付预约费用的统一下单接口
			wechatPay() {
				this.$api.wechatPay({
					orderNo: this.orderNo
				}).then((res) => {
					this.requestPayment(res.data.data)
				}).catch((err) => {
					this.$emit('payResult',{
						payResult:false,
						res:err
					})
				});
			},

			//调起微信支付
			requestPayment(param){
				uni.requestPayment({
					appId: param.appid,
					timeStamp: param.timestamp + "",
					nonceStr: param.noncestr,
					package: "prepay_id=" + param.prepayid,
					signType: "RSA",
					paySign: param.sign,
					success: res => {
						this.$emit('payResult',{
							payResult:true,
							res:res
						})
					},
					fail: res => {
						this.$emit('payResult',{
							payResult:false,
							res:res
						})
					}
				});
			},

			//余额支付
			balancePay() {
				if (this.password.length < 6 && this.needPassword) {
					uni.showToast({
						title: "交易密码不能小于6位"
					})
					return;
				}
				this.$refs.passwordPopup.close()

				if (this.openType == 1){    // 支付预约费用
					this.$api.balancePay({
						orderNo: this.orderNo,
						password: this.password
					}).then((res) => {
						this.$emit('payResult',{
							payResult:true,
							res:res
						})
					}).catch((res) => {
						this.$emit('payResult',{
							payResult:false,
							res:res
						})
					});
				}else {  //支付子订单费用
					this.$api.trade({
						tradeNo: this.orderNo,
						password: this.password
					}).then((res) => {
						this.$emit('payResult',{
							payResult:true,
							res:res
						})
					}).catch((res) => {
						this.$emit('payResult',{
							payResult:false,
							res:res
						})
					});
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.payView {
		height: 638rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.03);
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding: 24rpx 32rpx;
	}

	.payType {
		font-size: 32rpx;
		font-weight: bord;
		color: #111111;
		line-height: 48rpx;
	}

	.x {
		width: 35rpx;
		height: 35rpx;
		border-radius: 18rpx;
	}

	.payTitle {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 40rpx;
		margin-top: 8rpx;
	}
	.payItemView{
		height: 345rpx;
	}

	.payItem {
		background: #FAFAFA;
		border-radius: 20rpx;
		padding: 34rpx 32rpx;
		margin-top: 32rpx;
	}

	.payName {
		margin-left: 24rpx;
	}

	.balance {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 40rpx;
	}

	.commitBtn {
		width: 686rpx;
		height: 108rpx;
		background: #FFE05C;
		border-radius: 60rpx;
		margin-top: 32rpx;

		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bold;
		color: #111111;
		line-height: 108rpx;
		text-align: center;
	}

	.passwordView {
		background: #FFFFFF;
		width: 686rpx;
		height: 400rpx;
		border-radius: 20rpx;
		padding: 34rpx 0;
	}

	.h-tab-bar {
		margin-top: 80rpx;
	}

	.h-operate-btn {
		width: 550rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: #FFE05C;
		line-height: 80rpx;
		text-align: center;
		margin-top: 80rpx;
	}
</style>