完成微信支付页面

pages.json

@@ -428,6 +428,14 @@
 						"navigationBarTitleText" : "王者荣耀",
 						"navigationStyle": "custom"
 					}
+				},
+				{
+					"path" : "wx-payment-success/wx-payment-success",
+					"style" : 
+					{
+						"navigationBarTitleText" : "微信支付成功",
+						"navigationStyle": "custom"
+					}
 				}
 			]
 		},

pages/index/index.nvue

@@ -251,19 +251,14 @@ const otherList = [{
 	path: "/pages/other/tickets-app/index?type=trainTicket"
 },
 {
-	icon: "/static/image/index/qita/gongzidan.png",
+	icon: "/static/image/index/qita/gouwu.png",
-	name: "工资条",
+	name: "购物",
-	path: "/pages/other/splash/splash"
+	path: "/pages/shopping/index"
 },
 {
-	icon: "/static/image/index/qita/shipinqunliao.png",
+	icon: "/static/image/other/bank/bank.png",
-	name: "视频群聊",
+	name: "银行卡",
-	path: "/pages/other/video-group-chat/video-group-chat"
+	path: "/pages/other/bank/index"
-},
-{
-	icon: "/static/image/index/qita/card.png",
-	name: "身份证",
-	path: "/pages/other/card/card"
 },
 {
 	icon: "/static/image/index/qita/message.png",
@@ -276,14 +271,34 @@ const otherList = [{
 	path: "/pages/common/call-and-message-entry/call-and-message-entry?type=call"
 },
 {
-	icon: "/static/image/index/qita/ranking.png",
+	icon: "/static/image/index/qita/shipinqunliao.png",
-	name: "从夯倒拉排名",
+	name: "视频群聊",
-	path: "/pages/other/ranking/ranking"
+	path: "/pages/other/video-group-chat/video-group-chat"
 },
 {
-	icon: "/static/image/index/qita/gouwu.png",
+	icon: "/static/image/index/qita/zhifuchenggong-wx.png",
-	name: "购物",
+	name: "微信支付",
-	path: "/pages/shopping/index"
+	path: "/pages/other/wx-payment-success/wx-payment-success"
+},
+{
+	icon: "/static/image/index/qita/gongzidan.png",
+	name: "工资条",
+	path: "/pages/other/splash/splash"
+},
+{
+	icon: "/static/image/index/qita/card.png",
+	name: "身份证",
+	path: "/pages/other/card/card"
+},
+{
+	icon: "/static/image/index/qita/about-iphone.png",
+	name: "关于本机",
+	path: "/pages/other/about-this-iphone/about-this-iphone"
+},
+{
+	icon: "/static/image/index/qita/game.png",
+	name: "王者主页",
+	path: "/pages/other/game/honor-of-kings"
 },
 {
 	icon: "/static/image/other/certificate/certificate.png",
@@ -296,19 +311,9 @@ const otherList = [{
 	path: "/pages/other/silkBanner/silkBanner"
 },
 {
-	icon: "/static/image/index/qita/about-iphone.png",
+	icon: "/static/image/index/qita/ranking.png",
-	name: "关于本机",
+	name: "从夯倒拉排名",
-	path: "/pages/other/about-this-iphone/about-this-iphone"
+	path: "/pages/other/ranking/ranking"
-},
-{
-	icon: "/static/image/other/bank/bank.png",
-	name: "银行卡",
-	path: "/pages/other/bank/index"
-},
-{
-	icon: "/static/image/index/qita/game.png",
-	name: "王者主页",
-	path: "/pages/other/game/honor-of-kings"
 },
 ]
 

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

@@ -0,0 +1,211 @@
+<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>