完成花呗首页UI及逻辑

components/nav-bar/nav-bar.vue

@@ -2,27 +2,31 @@
 	<view style="width: 100%;" :style="{ height: `${data.statusBarHeight + 44}px` }"></view>
 	<view class="nav-bar-container" :style="{ backgroundColor: bgColor }">
 		<view class="status-placeholder" :style="{ height: `${data.statusBarHeight}px` }"></view>
+		<view style="width: 100%;height: 44px;" @click="openPopup">
+			<slot>
 				<uni-nav-bar backgroundColor="#00000000" class="nav-bar" :border="false" :title="title" v-bind="$attrs"
 					v-on="$attrs">
 					<template v-slot:left>
 						<view class="nav-bar-left">
 							<slot name="left">
-						<view class="left-icon" @click="onBack">
+								<view class="left-icon" @click.stop="onBack">
-							<image class="nav-icon-back" src="/static/image/nav-bar/back-black.png" mode=""></image>
+									<image class="nav-icon-back" src="/static/image/nav-bar/back-black.png" mode="">
+									</image>
 								</view>
 							</slot>
 						</view>
 					</template>
-			<view class="nav-bar-title w100 h100 flex-1" @click="openPopup">
+					<view class="nav-bar-title w100 h100 flex-1" @click="openPopup" :style="{ color: textColor }">
 						<slot name="center">
 							{{ title }}
 						</slot>
 					</view>
 					<template v-slot:right>
-				<view class="nav-bar-right" @click="onRightClick">
+						<view class="nav-bar-right" @click.stop="onRightClick">
 							<slot name="right">
 								<view v-if="isRightIcon" class="right-icon">
-							<image class="nav-icon-more" src="/static/image/nav-bar/more-black.png" mode=""></image>
+									<image class="nav-icon-more" src="/static/image/nav-bar/more-black.png" mode="">
+									</image>
 								</view>
 								<view v-if="isRightButton" class="right-button">
 									{{ rightButtonText }}
@@ -31,6 +35,10 @@
 						</view>
 					</template>
 				</uni-nav-bar>
+			</slot>
+		</view>
+
+
 		<popup ref="topPopup">
 			<view class="button-group w100 flex-between flex-wrap">
 				<view class="button-box" v-for="button in buttonGroup" @click="buttonClick(button)">
@@ -59,6 +67,10 @@ const props = defineProps({
 		type: String,
 		default: '#fff'
 	},
+	textColor: {
+		type: String,
+		default: '#000'
+	},
 	title: {
 		type: String,
 		default: ''

pages.json

@@ -4,7 +4,7 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "uni-app",
+				"navigationBarTitleText": "支付宝模拟器首页",
 				"navigationStyle": "custom"
 			}
 		}
@@ -53,6 +53,16 @@
 				}
 			]
 		},
+		{
+			"root": "pages/ant-credit-pay",
+			"pages": [{
+				"path": "index",
+				"style": {
+					"navigationBarTitleText": "花呗首页",
+					"navigationStyle": "custom"
+				}
+			}]
+		},
 		{
 			"root": "pages/common",
 			"pages": [{

pages/ant-credit-pay/index.vue

@@ -0,0 +1,525 @@
+<template>
+	<view class="page-container">
+		<view class="main-container">
+			<NavBar title="花呗|信用购" :bgColor="data.navBar.bgColor" :buttonGroup="buttonGroup"
+				@button-click="clickTitlePopupButton">
+				<view class="nav-bar flex-between w100" :class="{ 'ios-nav-bar': $system == 'iOS' }">
+					<view class="flex-align-center flex-1">
+						<view class="left">
+							<image class=" back-icon" src="/static/image/nav-bar/back-white.png" mode="">
+							</image>
+						</view>
+						<view class="title ">
+							花呗|信用购
+						</view>
+					</view>
+
+					<view class="right">
+						<image class="icon" src="/static/image/ant-credit-pay/service.png"></image>
+						<image class="icon" src="/static/image/ant-credit-pay/setting.png"></image>
+					</view>
+				</view>
+			</NavBar>
+			<view class="current-month">{{ huabeiInfo.mouth }}月应还(元)</view>
+			<view class="money-box flex-align-center">
+				<text class="money alipay-font">{{ numberUtil.formatMoneyWithThousand(huabeiInfo.money) }}</text>
+				<uni-icons type="right" size="16" color="#B9D6FF"></uni-icons>
+			</view>
+			<view v-if="huabeiInfo.styleType == 1 || !huabeiInfo.styleType" class="style-1 button-group">
+				<view class="button-item second-button" :class="{ 'ios-button': $system == 'iOS' }">立即还款</view>
+				<view v-if="!huabeiInfo.isInstallment" class="button-item primary-button"
+					:class="{ 'ios-button': $system == 'iOS' }">
+					分期还款
+					<view v-if="huabeiInfo.installmentBadgeText" class="badge">{{ huabeiInfo.installmentBadgeText }}
+					</view>
+				</view>
+			</view>
+			<view v-if="huabeiInfo.styleType == 2" class="style-2 bubble-container">
+				<view class="bubble-box">
+					<view class="arrow"></view>
+					<text class="text">{{ huabeiInfo.descText }}</text>
+				</view>
+			</view>
+			<view v-if="huabeiInfo.styleType == 3" class="style-3 bubble-container">
+				<view class="bubble-box">
+					<view class="arrow"></view>
+					<text class="text flex-align-center">{{ huabeiInfo.descText }}
+						<uni-icons type="right" size="16" color="#B9D6FF"></uni-icons>
+					</text>
+				</view>
+			</view>
+			<view class="total-info-box flex-align-center">
+				<view class="info-item">
+					<view class="label">总计账单</view>
+					<view class="value">还款日每月{{ huabeiInfo.dueDate }}日</view>
+				</view>
+				<view class="info-item">
+					<view class="label">总计额度</view>
+					<view class="value">{{
+						numberUtil.formatMoneyWithThousand(Number(huabeiInfo.totalAmount) - Number(huabeiInfo.money)) }}可用
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="image-box flex-1">
+			<image style="width:92rpx; height: 92rpx;margin-top: 16rpx;"
+				src="/static/image/common/upload-screenshot.png"></image>
+			<text style="font-size: 36rpx;color: #1777FF;">长按替换真实截图</text>
+		</view>
+		<!-- 编辑弹窗 -->
+		<uni-popup ref="popup" type="center" :mask-click="false">
+			<view class="popup-content">
+				<view class="popup-title">编辑花呗数据</view>
+				<view class="form-item">
+					<text class="label">还款月份</text>
+					<picker :range="monthRange" :value="editHuabeiInfo.mouth - 1" @change="onMonthChange"
+						style="flex:1">
+						<view class="input">{{ editHuabeiInfo.mouth ? editHuabeiInfo.mouth + '月' : '请选择月份' }}</view>
+					</picker>
+				</view>
+				<view class="form-item">
+					<text class="label">本月应还</text>
+					<input class="input" type="digit" v-model="editHuabeiInfo.money" placeholder="请输入金额" />
+				</view>
+				<view class="form-item">
+					<text class="label">还款日</text>
+					<input class="input" type="number" v-model="editHuabeiInfo.dueDate" placeholder="请输入日期" />
+				</view>
+				<view class="form-item">
+					<text class="label">总计额度</text>
+					<input class="input" type="digit" v-model="editHuabeiInfo.totalAmount" placeholder="请输入总计额度" />
+				</view>
+				<view class="form-item">
+					<text class="label">描述文本</text>
+					<input class="input" type="text" v-model="editHuabeiInfo.descText" placeholder="请输入描述文本" />
+				</view>
+				<view class="form-item">
+					<text class="label">分期气泡</text>
+					<input class="input" type="text" v-model="editHuabeiInfo.installmentBadgeText"
+						placeholder="请输入分期还款气泡文案" />
+				</view>
+				<view class="form-item flex-between">
+					<text class="label">是否分期</text>
+					<switch :checked="editHuabeiInfo.isInstallment" style="transform: scale(0.8);"
+						@change="e => editHuabeiInfo.isInstallment = e.detail.value" />
+				</view>
+				<view class="popup-btns">
+					<view class="btn cancel" @click="closeDialog">取消</view>
+					<view class="btn confirm" @click="confirmDialog">确定</view>
+				</view>
+			</view>
+
+		</uni-popup>
+
+		<!-- 样式选择弹窗 -->
+		<uni-popup ref="stylePopup" type="center">
+			<view class="popup-content">
+				<view class="popup-title">选择展示样式</view>
+				<view class="style-list">
+					<view class="style-item" v-for="(item, index) in styleList" :key="index"
+						@click="confirmStyleDialog(item.value)">
+						<text>{{ item.label }}</text>
+						<uni-icons v-if="huabeiInfo.styleType == item.value" type="checkmarkempty" size="20"
+							color="#1777FF"></uni-icons>
+					</view>
+				</view>
+				<view class="popup-btns">
+					<view class="btn cancel" @click="closeStyleDialog">取消</view>
+				</view>
+			</view>
+		</uni-popup>
+	</view>
+</template>
+
+<script setup>
+import NavBar from '@/components/nav-bar/nav-bar'
+import { numberUtil } from '@/utils/common.js'
+import { ref, toRefs } from 'vue';
+import { onLoad } from '@dcloudio/uni-app';
+
+const buttonGroup = [{
+	name: "编辑花呗数据",
+	click: () => {
+		openDialog()
+	}
+}, {
+	name: "切换展示样式",
+	click: () => {
+		openStyleDialog()
+	}
+}]
+
+const data = ref({
+	navBar: {
+		bgColor: "#1777FF",
+		textColor: "#fff"
+	},
+	huabeiInfo: {
+		mouth: 1,
+		money: 100,
+		dueDate: 15,
+		totalAmount: 200000,
+		descText: "当前账单进度已超出预期，花超了",
+		isInstallment: false,
+		styleType: 1,
+		installmentBadgeText: '4折起'
+	},
+	huabeiInfoStorageKey: 'huabei_info_storage'
+})
+
+let { huabeiInfo } = toRefs(data.value)
+// 编辑表单数据
+const editHuabeiInfo = ref({})
+
+const popup = ref(null)
+const stylePopup = ref(null)
+
+const styleList = [
+	{ label: '样式 1 (默认)', value: 1 },
+	{ label: '样式 2 (纯气泡)', value: 2 },
+	{ label: '样式 3 (带箭头气泡)', value: 3 }
+]
+
+const monthRange = Array.from({ length: 12 }, (_, i) => i + 1)
+const onMonthChange = (e) => {
+	editHuabeiInfo.value.mouth = monthRange[e.detail.value]
+}
+
+onLoad((option) => {
+	console.log(option)
+	// 读取缓存
+	const savedInfo = uni.getStorageSync(data.value.huabeiInfoStorageKey)
+	if (savedInfo) {
+		// 合并默认值，防止旧数据缺少新字段
+		data.value.huabeiInfo = { ...data.value.huabeiInfo, ...savedInfo }
+	}
+})
+
+// 打开弹窗
+const openDialog = () => {
+	// 深拷贝当前数据到编辑表单
+	editHuabeiInfo.value = JSON.parse(JSON.stringify(data.value.huabeiInfo))
+	popup.value.open()
+}
+
+// 关闭弹窗
+const closeDialog = () => {
+	popup.value.close()
+}
+
+// 确认修改
+const confirmDialog = () => {
+	data.value.huabeiInfo = JSON.parse(JSON.stringify(editHuabeiInfo.value))
+	// 保存到缓存
+	uni.setStorageSync(data.value.huabeiInfoStorageKey, data.value.huabeiInfo)
+	popup.value.close()
+	uni.showToast({
+		title: '保存成功',
+		icon: 'success'
+	})
+}
+
+// 打开样式选择弹窗
+const openStyleDialog = () => {
+	stylePopup.value.open()
+}
+
+// 关闭样式选择弹窗
+const closeStyleDialog = () => {
+	stylePopup.value.close()
+}
+
+// 确认样式选择
+const confirmStyleDialog = (type) => {
+	data.value.huabeiInfo.styleType = type
+	// 保存到缓存
+	uni.setStorageSync(data.value.huabeiInfoStorageKey, data.value.huabeiInfo)
+	stylePopup.value.close()
+}
+
+// 点击标题弹出按钮
+const clickTitlePopupButton = (button) => {
+	button.click()
+}
+</script>
+
+<style>
+@import "/common/main.css";
+</style>
+
+<style lang="less" scoped>
+.page-container {
+	display: flex;
+	flex-direction: column;
+	background-color: #ffffff;
+	height: 100vh;
+	overflow: hidden;
+
+	.nav-bar {
+		height: 100%;
+		display: flex;
+		align-items: center;
+		padding: 0 20rpx;
+
+		.title {
+			color: #ffffff;
+			font-size: 17px;
+			font-weight: 500;
+			text-align: center;
+		}
+
+		.right {
+			width: 80px;
+		}
+
+		.icon {
+			margin-left: 18rpx;
+			margin-right: 10rpx;
+			width: 24px;
+			height: 24px;
+		}
+	}
+
+	.ios-nav-bar {
+		.left {
+			width: 80px;
+		}
+
+		.title {
+			flex: 1;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.right {
+			width: 80px;
+		}
+	}
+
+	.main-container {
+		background-color: #1777FF;
+		padding-bottom: 32rpx;
+
+		.current-month {
+			margin-top: 12rpx;
+			color: #B9D6FF;
+			font-size: 24rpx;
+			text-align: center;
+		}
+
+		.money-box {
+			text-align: center;
+			justify-content: center;
+
+			.money {
+				font-size: 64rpx;
+				color: #ffffff;
+			}
+		}
+
+		.button-group {
+			margin-top: 18rpx;
+			display: flex;
+			justify-content: center;
+			justify-content: center;
+
+			.button-item {
+				height: 64rpx;
+				line-height: 64rpx;
+				border-radius: 8rpx;
+				color: #ffffff;
+				font-size: 30rpx;
+				padding: 0 24rpx;
+			}
+
+			.second-button {
+				border: 2rpx solid #66B2FD;
+			}
+
+			.primary-button {
+				background-color: #66B2FD;
+				margin: 0 22rpx;
+				position: relative;
+
+				.badge {
+					position: absolute;
+					top: -16rpx;
+					right: -10rpx;
+					background-color: #F34624;
+					color: #fff;
+					font-size: 20rpx;
+					padding: 0 10rpx;
+					height: 32rpx;
+					line-height: 32rpx;
+					border-radius: 16rpx 16rpx 16rpx 0;
+					z-index: 1;
+				}
+			}
+
+			.ios-button {
+				border-radius: 33rpx !important;
+			}
+		}
+
+		.style-1 {
+			margin-top: 18rpx;
+			display: flex;
+			justify-content: center;
+			justify-content: center;
+		}
+
+		.bubble-container {
+			margin-top: 10rpx;
+			display: flex;
+			justify-content: center;
+
+			.bubble-box {
+				position: relative;
+				border: 1px solid #75bcff;
+				border-radius: 30rpx;
+				padding: 12rpx 24rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				.text {
+					color: #ffffff;
+					font-size: 26rpx;
+					line-height: 1.2;
+				}
+
+				.arrow {
+					position: absolute;
+					top: -5px;
+					left: 50%;
+					transform: translateX(-50%) rotate(45deg);
+					width: 8px;
+					height: 8px;
+					background-color: #1777FF;
+					border-left: 1px solid #75bcff;
+					border-top: 1px solid #75bcff;
+					z-index: 1;
+				}
+			}
+		}
+
+		.total-info-box {
+			margin-top: 48rpx;
+
+			.info-item {
+				width: 50%;
+				text-align: center;
+
+				.label {
+					color: #ffffff;
+					font-size: 30rpx;
+					line-height: 42rpx;
+				}
+
+				.value {
+					color: #ffffff;
+					font-size: 26rpx;
+					line-height: 36rpx;
+				}
+			}
+		}
+	}
+
+	.image-box {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+}
+
+.back-icon {
+	width: 24px;
+	height: 24px;
+}
+</style>
+
+<style lang="scss" scoped>
+.popup-content {
+	background-color: #fff;
+	width: 600rpx;
+	border-radius: 16rpx;
+	padding: 30rpx;
+
+	.popup-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		text-align: center;
+		margin-bottom: 30rpx;
+	}
+
+	.form-item {
+		display: flex;
+		align-items: center;
+		margin-bottom: 24rpx;
+
+		.label {
+			width: 140rpx;
+			font-size: 28rpx;
+			color: #333;
+		}
+
+		.input {
+			flex: 1;
+			height: 72rpx;
+			line-height: 72rpx;
+			background-color: #f5f5f5;
+			border-radius: 8rpx;
+			padding: 0 20rpx;
+			font-size: 28rpx;
+		}
+	}
+
+	.flex-between {
+		justify-content: space-between;
+	}
+
+	.popup-btns {
+		display: flex;
+		margin-top: 40rpx;
+
+		.btn {
+			flex: 1;
+			height: 80rpx;
+			line-height: 80rpx;
+			text-align: center;
+			border-radius: 12rpx;
+			font-size: 30rpx;
+
+			&.cancel {
+				background-color: #f5f5f5;
+				color: #666;
+				margin-right: 20rpx;
+			}
+
+			&.confirm {
+				background-color: #1777FF;
+				color: #fff;
+			}
+		}
+	}
+}
+
+
+.style-list {
+	.style-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 30rpx 0;
+		border-bottom: 1px solid #f5f5f5;
+		font-size: 30rpx;
+		color: #333;
+
+		&:last-child {
+			border-bottom: none;
+		}
+	}
+}
+</style>

pages/common/recharge/index.vue

@@ -590,12 +590,15 @@ onLoad(async () => {
 						item['isStatus'] = true
 					}
 					item['expire_times'] = item.expire_time
-				item.expire_time = item.expire_time.replace('-', '.').replace('-', '.').substring(0, 10)
+					item.expire_time = item.expire_time.replace('-', '.').replace('-', '.').substring(
+						0, 10)
 				})
 				data.myActivity = [
-				...activity.data.items.filter(item => (item.threshold == '' || zsItem.price >= (Number(item
+					...activity.data.items.filter(item => (item.threshold == '' || zsItem.price >= (Number(
+						item
 						.threshold) / 100)) && item.isStatus),
-				...activity.data.items.filter(item => (zsItem.price < (Number(item.threshold) / 100) && item
+					...activity.data.items.filter(item => (zsItem.price < (Number(item.threshold) / 100) &&
+						item
 						.threshold != '') || !item.isStatus)
 				]
 				data.myActivity = deduplicateKeepLast(data.myActivity)
@@ -805,10 +808,12 @@ function setPrice(status) {
 			origin_price = Number(data.goods.origin_price)
 			coupon = origin_price - price
 		} else {
-		price = data.goods.price - (data.activeCoupon.coupon_type_name != '折扣券' ? (Number(data.activeCoupon.coupon_value) /
+			price = data.goods.price - (data.activeCoupon.coupon_type_name != '折扣券' ? (Number(data.activeCoupon
+					.coupon_value) /
 				100) : ((1 - Number(data.activeCoupon.coupon_value)) * data.goods.price))
 			coupon = (Number(data.goods.origin_price) - Number(data.goods.price)) + (Number(data.goods.price) - (data.goods
-			.price - (data.activeCoupon.coupon_type_name != '折扣券' ? (Number(data.activeCoupon.coupon_value) / 100) : ((
+				.price - (data.activeCoupon.coupon_type_name != '折扣券' ? (Number(data.activeCoupon.coupon_value) /
+					100) : ((
 					1 - Number(data.activeCoupon.coupon_value)) * data.goods.price))))
 		}
 		data.coupon = numberUtil.toFiexd(coupon, 0)
@@ -889,14 +894,17 @@ async function getActivity() {
 				item.expire_time = item.expire_time.replace('-', '.').replace('-', '.').substring(0, 10)
 			})
 			data.myActivity = [
-			...activity.data.items.filter(item => (item.threshold == '' || data.goods.price >= (Number(item.threshold) /
+				...activity.data.items.filter(item => (item.threshold == '' || data.goods.price >= (Number(item
+						.threshold) /
 					100) && item.isStatus)),
-			...activity.data.items.filter(item => (data.goods.price < (Number(item.threshold) / 100) && item.threshold !=
+				...activity.data.items.filter(item => (data.goods.price < (Number(item.threshold) / 100) && item
+					.threshold !=
 					'') || !item.isStatus)
 			]
 			data.myActivity = deduplicateKeepLast(data.myActivity)
 		}
 	}
+
 	function deduplicateKeepLast(arr, idKey = 'id') {
 		const map = new Map();
 
@@ -986,8 +994,10 @@ async function onSelect(items, index) {
 			let defaultCoupon = data.myActivity.filter(item => item.activity_id == data.goods.default_activity)
 			if (defaultCoupon.length > 0) {
 				defaultCoupon.forEach(item => {
-				if ((data.goods.price >= (Number(item.threshold) / 100) || item.threshold == '') && item.isStatus) {
+					if ((data.goods.price >= (Number(item.threshold) / 100) || item.threshold == '') && item
-					item['price2'] = data.goods.price - (item.coupon_type_name != '折扣券' ? (Number(item.coupon_value) /
+						.isStatus) {
+						item['price2'] = data.goods.price - (item.coupon_type_name != '折扣券' ? (Number(item
+								.coupon_value) /
 							100) : ((1 - Number(item.coupon_value)) * data.goods.price))
 					} else {
 						item['price2'] = 10000000
@@ -1009,8 +1019,10 @@ async function onSelect(items, index) {
 			if (id == 0 && data.goods.default_activity != '') {
 				try {
 					data.myActivity.forEach(item => {
-					if ((data.goods.price >= (Number(item.threshold) / 100) || item.threshold == '') && item.isStatus) {
+						if ((data.goods.price >= (Number(item.threshold) / 100) || item.threshold == '') &&
-						item['price2'] = data.goods.price - (item.coupon_type_name != '折扣券' ? (Number(item.coupon_value) /
+							item.isStatus) {
+							item['price2'] = data.goods.price - (item.coupon_type_name != '折扣券' ? (Number(item
+									.coupon_value) /
 								100) : ((1 - Number(item.coupon_value)) * data.goods.price))
 						} else {
 							item['price2'] = 10000000
@@ -1043,7 +1055,8 @@ async function onSelect(items, index) {
 			if (list.length != 0) {
 				let listData = list.map(cell => {
 					return {
-					image: cell == 'weixin' ? '/static/image/recharge/wxpay.png' : '/static/image/recharge/alipay.png',
+						image: cell == 'weixin' ? '/static/image/recharge/wxpay.png' :
+							'/static/image/recharge/alipay.png',
 						name: cell == 'weixin' ? '微信支付' : '支付宝支付',
 						type: cell == 'weixin' ? 'wxpay' : 'alipay'
 					}
@@ -1187,7 +1200,7 @@ async function activateVip(type = '') {
 			coupon: data.active_id ? data.active_id : '',
 			pay_type: paymentMethod.value == "wxpay" ? 'weixin' : "alipay",
 			"pay_source": paymentMethod.value == "alipay" && proxy.$system == 'iOS' ? "h5" : "app",
-		source: "uniapp",
+			source: "uni_alipay",
 		})
 
 

pages/index/index.nvue

@@ -147,7 +147,7 @@ const menuList = [{
 	icon: "huabei",
 	name: "花呗",
 	isHot: false,
-	path: ""
+	path: "/pages/ant-credit-pay/index"
 },
 
 ]

store/index.js

@@ -40,24 +40,8 @@ export const store = reactive({
 });
 
 
-
-
 // 定义操作方法
 export const useStore = () => {
-  // 用户相关操作
-  const setUserInfo = (userInfo) => {
-    store.userInfo = userInfo;
-  };
-
-  const clearUserInfo = () => {
-    store.userInfo = null;
-  };
-
-  // 设置相关操作
-  const updateSettings = (settings) => {
-    store.settings = { ...store.settings, ...settings };
-  };
-
   // 账单相关操作
   const addBill = (bill) => {
     store.billList.unshift(bill);
@@ -114,23 +98,11 @@ export const useStore = () => {
     { deep: true }
   );
 
-  // 获取系统信息（从缓存读取）
-  const getSystemInfo = () => {
-    const cachedInfo = uni.getStorageSync('systemInfo')
-    if (cachedInfo) {
-      store.systemInfo = cachedInfo
-    }
-  };
-
   return {
     store,
-    setUserInfo,
-    clearUserInfo,
-    updateSettings,
     addBill,
     updateBill,
     deleteBill,
-    getBillList,
+    getBillList
-    getSystemInfo
   };
 };

utils/common.js

@@ -140,6 +140,22 @@ export const numberUtil = {
     return number.toFixed(decimals);
   },
 
+  /**
+   * 格式化金额，添加千分位并保留两位小数
+   * @param {number|string} val - 金额
+   * @returns {string} 格式化后的金额字符串
+   */
+  formatMoneyWithThousand(val) {
+    let num = Number(val);
+    if (isNaN(num)) {
+      return '0.00';
+    }
+    let str = num.toFixed(2);
+    let parts = str.split('.');
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return parts.join('.');
+  },
+
   /**
    * 随机数生成
    * @param {number} min - 最小值