jje_uniapp/components/pay/pay.vue

<template>
	<!--支付组件-->
	<view>
		<uni-popup ref="popup" type="bottom" :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">可以余额￥{{ userInfo.balance || 0 }}</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>
	export default {
		name: "myPay",
		props: {
			needPassword: {
				type: Boolean,
				default () {
					return false
				}
			},
			wxPay: {
				type: Boolean,
				default () {
					return true
				}
			},
			blPay: {
				type: Boolean,
				default () {
					return true
				}
			},
			orderNo: {
				type: String,
				default () {
					return ''
				}
			}
		},
		data() {
			return {
				curServiceTab: 2,
				userInfo: {},
				password: ''
			};
		},
		methods: {
			closePayPopup() {
				this.$refs.popup.close()
			},
			openPopup() {
				this.userInfo = uni.getStorageSync('userInfo')
				this.$refs.popup.open()
			},
			payItem(num) {
				if (this.userInfo.balance * 1 < this.price * 1) {
					return
				}
				this.curServiceTab = num
			},

			payment() {
				this.$refs.popup.close()
				if (this.curServiceTab === 1) {
					if (this.needPassword) {
						this.$refs.passwordPopup.open()
					} else {
						this.balancePay()
					}
				} else {

					this.wechatPay()

				}


			},

			//微信支付
			wechatPay() {
				// 发起微信支付
				this.$api.wechatPay({
					orderNo: this.orderNo
				}).then((res) => {
					var param = res.data.data;
					uni.requestPayment({
						appId: param.appid,
						timeStamp: param.timestamp + "",
						nonceStr: param.noncestr,
						package: "prepay_id=" + param.prepayid,
						signType: "RSA",
						paySign: param.sign,
						success: res => {
							uni.showToast({
								title: '支付成功!'
							});
							setTimeout(res => {
								uni.switchTab({
									url: '/pages/order/index'
								})
							}, 1000)
						},
						fail: res => {
							console.log(res)
							uni.showModal({
								content: '支付失败',
								showCancel: false
							});

							setTimeout(res => {
								uni.switchTab({
									url: '/pages/order/index'
								})
							}, 1000)

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

				this.$api.balancePay({
					orderNo: this.subOrderNo,
					password: this.password
				}).then((res) => {
					uni.showToast({
						title: '支付成功!'
					});

					setTimeout(res => {
						uni.switchTab({
							url: '/pages/order/index'
						})
					}, 1000)


					this.getUserInfo()
				}).catch((res) => {
					console.log(res)
					let msg = res.data.msg || '操作失败';
					uni.showToast({
						title: msg,
						icon: 'error'
					})
				});

			},

			getUserInfo() {
				this.$api.getUserInfo().then(res => {
					console.log('++++++++++++获取用户信息++++++++++++++++++', res)
					uni.setStorageSync('userInfo', res.data.data)
					this.userInfo = res.data.data
				})

			},

		}
	}
</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>