alipay-emulator/pages/finance-management/edit/edit.vue

<template>
	<view class="container">
		<NavBar title="修改理财数据" bgColor="#F5F5F5" isRightButton @right-click="handleRightButtonClick"></NavBar>

		<scroll-view scroll-y class="form-content">
			<!-- 基础信息 -->
			<view class="section-title">基础信息</view>
			<view class="card">
				<view class="form-item">
					<text class="label">持卡人姓名</text>
					<input class="input" v-model="financeInfo.cardHolderName" />
				</view>
				<picker mode="selector" :range="vipLevels" @change="onVipLevelChange">
					<view class="form-item">
						<text class="label">财富等级</text>
						<view class="picker-value">{{ financeInfo.vipLevel }} </view>
					</view>
				</picker>
				<view class="form-item">
					<text class="label">权益文案</text>
					<input class="input" v-model="financeInfo.benefitsText" />
				</view>
			</view>

			<!-- 财富收益 -->
			<view class="section-title">财富收益</view>
			<view class="card" v-for="(item, key) in financeInfo.fortune" :key="key">
				<view class="card-header">{{ getFortuneName(key) }}</view>
				<view class="form-item">
					<text class="label">总金额</text>
					<input class="input" type="digit" v-model="item.labelSub" @input="onTotalAmountInput(item)" />
				</view>
				<view class="form-item">
					<text class="label">昨日收益</text>
					<input class="input" type="digit" v-model="item.value" />
				</view>
			</view>

			<!-- 资产信息 -->
			<view class="section-title">资产信息</view>
			<view class="card">
				<view class="form-item">
					<text class="label">家庭保障份数</text>
					<input class="input" type="number" v-model="financeInfo.familyProtection" />
				</view>
				<view class="form-item">
					<text class="label">保险信息</text>
					<input class="input" v-model="financeInfo.myAssets.baoxian.labelSub" />
				</view>
			</view>

			<!-- 额度信息 -->
			<view class="section-title">额度信息</view>
			<view class="card">
				<view class="form-item" v-for="(item, key) in financeInfo.myQuota" :key="key">
					<text class="label">{{ getQuotaName(key) }}</text>
					<input class="input" v-model="item.labelSub" />
				</view>
			</view>

			<view class="placeholder"></view>
		</scroll-view>
	</view>
</template>

<script setup>
import NavBar from '@/components/nav-bar/nav-bar.vue'
import { ref, reactive, toRefs, onMounted } from 'vue';

const defualtData = {
	benefitsText: '尊享礼遇18000元/年',
	cardHolderName: 'XiaoMing',
	vipLevel: "v3",
	navigationMenuStyle: "style-1",
	bgImage: "/static/image/finance-management/bg-style/style-1.png",
	familyProtection: "3",
	searchText: "小而美的基金",
	fortune: {
		yuebao: { value: 3.53, labelSub: "100000" },
		dingqi: { value: 50, labelSub: "100000" },
		jijin: { value: 5000, labelSub: "100000" },
		huangjin: { value: -300, labelSub: "100000" },
		yulingbao: { value: 20, labelSub: "100000" }
	},
	myAssets: {
		baoxian: { labelSub: "3份保单保障中", type: "text" }
	},
	myQuota: {
		huabei: { labelSub: "可用100000", type: "text" },
		jubei: { labelSub: "可用100000", type: "text" },
		beizhi: { labelSub: "可用100000", type: "text" },
		wangshangdai: { labelSub: "预计可借100000", type: "text" }
	}
}

const data = reactive({
	financeInfo: JSON.parse(JSON.stringify(defualtData))
})

const { financeInfo } = toRefs(data)

const fortuneMap = {
	yuebao: '余额宝',
	dingqi: '定期',
	jijin: '基金',
	huangjin: '黄金',
	yulingbao: '余利宝'
}
const quotaMap = {
	huabei: '花呗',
	jubei: '借呗',
	beizhi: '备用金',
	wangshangdai: '网商贷'
}

const getFortuneName = (key) => fortuneMap[key] || key
const getQuotaName = (key) => quotaMap[key] || key

const vipLevels = ['v1', 'v2', 'v3']
const onVipLevelChange = (e) => {
	financeInfo.value.vipLevel = vipLevels[e.detail.value]
}

const onTotalAmountInput = (item) => {
	// 使用 setTimeout 确保 v-model 更新后再处理，或者直接处理 value
	// 简单的非负数过滤
	if (item.labelSub && item.labelSub.toString().includes('-')) {
		item.labelSub = item.labelSub.replace('-', '')
	}
}

onMounted(() => {
	const stored = {
		...defualtData,
		...uni.getStorageSync('financeInfo')
	}
	if (stored) {
		// Deep merge to ensure structure integrity
		Object.assign(data.financeInfo, stored)
	}
})

const handleRightButtonClick = () => {
	uni.setStorageSync('financeInfo', data.financeInfo)
	uni.navigateBack()
}
</script>

<style>
@import "@/common/main.css";

page {
	background-color: #F8F8F8;
	height: 100vh;
	overflow: hidden;
}
</style>

<style lang="less" scoped>
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
}

.form-content {
	flex: 1;
	height: 0;
	padding: 24rpx;
	box-sizing: border-box;
}

.section-title {
	font-size: 28rpx;
	color: #666;
	margin: 24rpx 0 16rpx 12rpx;
	font-weight: 500;
}

.card {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 0 24rpx;
	margin-bottom: 24rpx;

	.card-header {
		padding: 24rpx 0 12rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		border-bottom: 1rpx solid #f5f5f5;
		margin-bottom: 12rpx;
	}
}

.form-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #F5F5F5;

	&:last-child {
		border-bottom: none;
	}

	.label {
		font-size: 30rpx;
		color: #333;
		width: 240rpx;
	}

	.input {
		flex: 1;
		font-size: 30rpx;
		color: #333;
		text-align: right;
	}

	.picker-value {
		flex: 1;
		font-size: 30rpx;
		color: #333;
		text-align: right;
	}
}

.placeholder {
	height: 60rpx;
}
</style>