wuye/wuyeH5/pages/pay/pay.vue

<template>
	<view class="content">
		<view class="">
			长按下方二维码，识别二维码支付！
		</view>
		<view class="row">
			<view class="">
				待付金额:
			</view>
			<view class="price">
				{{price}}元
			</view>
		</view>
		<view class="img">
			<image src="https://taohaoliang.oss-cn-beijing.aliyuncs.com/pcfiles/dongfangyu.png" mode="widthFix"></image>
		</view>
		<view class="row3">
			支付完成后，请点击支付完成按钮!
		</view>
		<u-popup :show="flag>1" @close="flag=1" mode="center" :closeOnClickOverlay='false' :round="10">
			<view class="pay-btn">
				<u-button type="primary" text="支付完成" @click="finishPay" class="pay btn"></u-button>
				<u-button type="primary" text="取消支付" @click="qxPay" class="pay btn"></u-button>
			</view>

		</u-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				price: '',
				flag: 0
			};
		},
		onLoad(option) {
			this.price = option.price
			console.log("option", option)
			console.log(option)
			this.flag = 0
			this.id = option.id
		},
		onShow() {
			this.flag++
		},
		methods: {
			qxPay() {
				this.flag = 1
			},
			finishPay() {

				this.$request.baseRequest('wuyeAmountInfoApp', 'update', {
					wuyeAmountInfo: JSON.stringify({
						id: this.id,
						totalActualPayment: this.price,
						paymentMethod:'在线扫码支付',
					})
				}, failres => {
					this.$refs.uToast.show({
						type: 'error',
						message: failres.errmsg,
					})
					uni.hideLoading()
				}).then(res => {
					uni.navigateTo({
						url: '/pages/index/index'
					})
				})
			}
		},
	}
</script>

<style lang="scss">
	.content {
		padding: 40rpx;
	}

	.img {
		display: flex;
		justify-content: center;
		margin-top: 20rpx
	}

	.row {
		margin-top: 20rpx;
		display: flex;
	}
	.price{
		font-size: 36rpx;
		font-weight: 700;
		margin-left: 50rpx;
		color:#21d261;
	}
	.row3 {
		margin: 40rpx;
		color:red
	}

	.pay-btn {
		padding: 40rpx 20rpx;
		width: 80vw;
		display: flex;

		.btn {
			margin: 0 10rpx;
		}
	}
</style>