alipay-emulator/pages/other/wx-payment-success/wx-payment-success.vue

<template>
	<view class="container">
		<nav-bar bgColor="transparent" :isBack="false" tipLayerType="wx-payment-tip" isTipLayer tipLayerText="修改支付信息"
			:buttonGroup="buttonGroup" @button-click="util.clickTitlePopupButton">
			<template v-slot:center>
				<view class="flex-cneter title-box flex">
					<image class="wx-logo" src="/static/image/other/payment-success/payment-success.png"></image>
					<text class="title">支付成功</text>
				</view>
			</template>
		</nav-bar>
		<view class="content-box flex-column flex-cneter">
			<text class="product-name">{{ paymetInfo.productName }}</text>
			<view class="money flex wx-font-medium">
				<image class="symbol" src="/static/image/other/payment-success/symbol-yuan.png"></image>{{
					Number(paymetInfo.money).toFixed(2) }}
			</view>
		</view>
		<view class="finish-butn" @click="util.goBack()">完成</view>

		<!-- 修改支付信息弹窗 -->
		<uni-popup ref="editPaymentInfoPopup" type="center">
			<view class="edit-popup">
				<view class="title">修改支付信息</view>
				<view class="input-item flex-align-center">
					<text class="label"><text style="color: #FF3B30;">*</text>商品名称</text>
					<input class="flex-1" type="text" v-model="paymetInfo.productName" placeholder="请输入商品名称" />
				</view>
				<view class="input-item flex-align-center">
					<text class="label"><text style="color: #FF3B30;">*</text>支付金额</text>
					<input class="flex-1" type="digit" v-model="paymetInfo.money" placeholder="请输入支付金额" />
				</view>
				<view class="btn-group flex">
					<view class="btn cancel flex-1" @click="editPaymentInfoPopup.close()">取消</view>
					<view style="width: 30rpx;"></view>
					<view class="btn confirm flex-1" @click="confirmEditPaymentInfo">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { util } from '@/utils/common';
import { storage } from '@/utils/storage';

const editPaymentInfoPopup = ref(null);

const editPaymentInfo = () => {
	editPaymentInfoPopup.value.open('center');
}

const confirmEditPaymentInfo = () => {
	editPaymentInfoPopup.value.close();
	storage.set('wx_payment_success_info', paymetInfo.value);
}

const buttonGroup = [
	{
		name: "修改支付信息",
		click: () => {
			editPaymentInfo()
		}
	}
]


const paymetInfo = ref({
	productName: '王者荣耀',
	money: 298
});

onShow(() => {
	const cachedInfo = storage.get('wx_payment_success_info');
	if (cachedInfo) {
		paymetInfo.value = cachedInfo;
	} else {
		paymetInfo.value = { productName: '王者荣耀', money: 168 };
	}
})
</script>

<style lang="less" scoped>
.title-box {
	.wx-logo {
		width: 40rpx;
		height: 36rpx;
	}

	.title {
		font-size: 32rpx;
		color: #16B264;
		line-height: 32rpx;
		font-weight: 500;
		margin-left: 10rpx;
	}
}

.content-box {
	margin-top: 162rpx;

	.product-name {
		font-size: 32rpx;
		color: #1A1A1A;
		line-height: 32rpx;
		text-align: center;
	}

	.money {
		align-items: center;
		justify-content: center;
		margin-top: 46rpx;
		font-weight: 500;
		font-size: 88rpx;
		color: #1A1A1A;
		line-height: 88rpx;

		.symbol {
			width: 32rpx;
			height: 46rpx;
			margin-right: 20rpx;
		}
	}
}

.finish-butn {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	width: 348rpx;
	height: 92rpx;
	background-color: #F1F1F1;
	color: #1A1A1A;
	line-height: 92rpx;
	font-size: 28rpx;
	font-weight: 500;
	border-radius: 12rpx;
	text-align: center;
	margin: 0 auto;
	bottom: 170rpx;
	bottom: calc(170rpx + env(safe-area-inset-bottom));
	bottom: calc(170rpx + constant(safe-area-inset-bottom));
}

.edit-popup {
	width: 600rpx;
	background-color: #FFFFFF;
	border-radius: 24rpx;
	padding: 40rpx;
	box-sizing: border-box;

	.title {
		font-size: 32rpx;
		color: #1A1A1A;
		font-weight: 500;
		text-align: center;
		margin-bottom: 40rpx;
	}

	.input-item {
		margin-bottom: 30rpx;

		.label {
			font-size: 28rpx;
			color: #1A1A1A;
			width: 140rpx;
		}

		input {
			height: 72rpx;
			background-color: #F8F8F8;
			border-radius: 12rpx;
			padding: 0 20rpx;
			font-size: 28rpx;
			color: #1A1A1A;
		}
	}

	.btn-group {
		margin-top: 50rpx;
		justify-content: space-between;

		.btn {
			height: 80rpx;
			border-radius: 12rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 30rpx;

			&.cancel {
				background-color: #F1F1F1;
				color: #333333;
			}

			&.confirm {
				background-color: #3b82f6;
				color: #FFFFFF;
			}
		}
	}
}
</style>
<style>
@import '/common/main.css';

page {
	background-color: #FFFFFF;
}
</style>