花呗完成逾期页面

components/nav-bar/nav-bar.vue

@@ -1,6 +1,6 @@
 <template>
 	<view style="width: 100%;" :style="{ height: `${data.statusBarHeight + 44}px` }"></view>
-	<view class="nav-bar-container" :style="{ backgroundColor: bgColor }">
+	<view class="nav-bar-container" :style="{ backgroundColor: bgColor, zIndex: zIndex }">
 		<view class="status-placeholder" :style="{ height: `${data.statusBarHeight}px` }"></view>
 		<view style="width: 100%;height: 44px;" @click="openPopup">
 			<slot>
@@ -41,10 +41,19 @@
 
 		<popup ref="topPopup">
 			<view class="button-group w100 flex-between flex-wrap">
-				<view class="button-box" v-for="button in buttonGroup" @click="buttonClick(button)">
+				<view class="button-box" v-for="(button, index) in buttonGroup" :key="index"
-					<view class="button">
+					@click="buttonClick(button)">
-						{{ button.name }}
+					<!-- 使用作用域插槽，允许父组件自定义按钮内容 -->
+
+					<!-- 默认渲染 -->
+					<view class="button flex-align-center flex-justify-center">
+						<slot name="button" :button="button" :index="index">
+							{{ button.name }}
+							<switch v-if="button.isSwitch" :checked="button.value" @change="buttonClick(button)"
+								style="transform: scale(0.7);"></switch>
+						</slot>
 					</view>
+
 				</view>
 			</view>
 		</popup>
@@ -90,6 +99,10 @@ const props = defineProps({
 	rightButtonText: {
 		type: String,
 		default: '确定'
+	},
+	zIndex: {
+		type: Number,
+		default: 999
 	}
 })
 

pages.json

@@ -56,12 +56,20 @@
 		{
 			"root": "pages/ant-credit-pay",
 			"pages": [{
-				"path": "index",
+					"path": "index",
-				"style": {
+					"style": {
-					"navigationBarTitleText": "花呗首页",
+						"navigationBarTitleText": "花呗首页",
-					"navigationStyle": "custom"
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "overdue-payment/overdue-payment",
+					"style": {
+						"navigationBarTitleText": "花呗逾期",
+						"navigationStyle": "custom"
+					}
 				}
-			}]
+			]
 		},
 		{
 			"root": "pages/common",

pages/ant-credit-pay/index.vue

@@ -10,6 +10,17 @@
 		<view class="main-container">
 			<NavBar v-if="!selectedImage" title="花呗" :bgColor="data.navBar.bgColor" :buttonGroup="buttonGroup"
 				@button-click="clickTitlePopupButton">
+				<!-- 使用作用域插槽自定义按钮渲染，特别是switch的checked绑定 -->
+				<template #button="{ button }">
+					<view class="button flex-align-center flex-justify-center">
+						{{ button.name }}
+						<view @tap.stop>
+							<switch v-if="button.isSwitch" :checked="data.huabeiInfo.isOverdue" @change="button.click"
+								style="transform: scale(0.7);"></switch>
+						</view>
+					</view>
+				</template>
+
 				<view class="nav-bar flex-between w100" :class="{ 'ios-nav-bar': $system == 'iOS' }">
 					<view class="flex-align-center flex-1">
 						<view class="left" @click.stop="goBack">
@@ -76,7 +87,8 @@
 			@longpress="chooseImage">
 			<view v-if="!huabeiInfo.image" class="flex-align-center flex-column">
 				<image style="width:92rpx; height: 92rpx;margin-top: 16rpx;"
-					src="/static/image/common/upload-screenshot.png"></image>
+					src="/static/image/common/upload-screenshot.png">
+				</image>
 				<text style="font-size: 36rpx;color: #1777FF;">长按替换真实截图</text>
 			</view>
 			<view v-else class="w100 h100">
@@ -168,7 +180,8 @@
 <script setup>
 import NavBar from '@/components/nav-bar/nav-bar'
 import {
-	numberUtil
+	numberUtil,
+	util
 } from '@/utils/common.js'
 import {
 	ref,
@@ -177,7 +190,8 @@ import {
 	reactive
 } from 'vue';
 import {
-	onLoad
+	onLoad,
+	onShow
 } from '@dcloudio/uni-app';
 
 const instance = getCurrentInstance();
@@ -199,6 +213,18 @@ const buttonGroup = [{
 		data.huabeiInfo.image = ""
 		uni.setStorageSync(data.huabeiInfoStorageKey, data.huabeiInfo)
 	}
+}, {
+	name: "花呗逾期",
+	isSwitch: true,
+	click: () => {
+		data.huabeiInfo.isOverdue = !data.huabeiInfo.isOverdue
+		uni.setStorageSync(data.huabeiInfoStorageKey, data.huabeiInfo)
+		if (data.huabeiInfo.isOverdue) {
+			uni.redirectTo({
+				url: '/pages/ant-credit-pay/overdue-payment/overdue-payment'
+			})
+		}
+	}
 }]
 
 const data = reactive({
@@ -217,7 +243,8 @@ const data = reactive({
 		styleType: 1,
 		installmentBadgeText: '4折起',
 		image: "",
-		isOverdue: false
+		isOverdue: false,
+		daysPastDue: 1
 	},
 	selectedImage: '',
 	showMask: false
@@ -276,6 +303,13 @@ onLoad((option) => {
 	}
 })
 
+onShow(() => {
+	// #ifdef APP-PLUS
+	util.setAndroidSystemBarColor('#ffffff')
+	plus.navigator.setStatusBarStyle("light");
+	// #endif
+})
+
 // 打开弹窗
 const openDialog = () => {
 	// 深拷贝当前数据到编辑表单
@@ -364,7 +398,6 @@ const confirmImage = () => {
 					0, sTop, sWidth, sHeight, // 源图裁剪区域
 					0, 0, canvasW, canvasH // 画布绘制区域
 				)
-
 				ctx.draw(false, () => {
 					uni.canvasToTempFilePath({
 						canvasId: 'crop-canvas',

pages/ant-credit-pay/overdue-payment/overdue-payment.vue

@@ -0,0 +1,635 @@
+<template>
+
+	<view class="page-container">
+		<view class="main-container">
+
+			<!-- 头部背景 (带弧度) -->
+			<view class="header-bg"></view>
+
+			<!-- 导航栏 - 降低层级以显示水印 -->
+			<NavBar title="花呗 | 信用购" :bgColor="'transparent'" textColor="#fff" :isFixed="true" :zIndex="10"
+				:buttonGroup="buttonGroup" @button-click="clickTitlePopupButton">
+				<!-- 使用作用域插槽自定义按钮渲染，特别是switch的checked绑定 -->
+				<template #button="{ button }">
+					<view class="button flex-align-center flex-justify-center">
+						{{ button.name }}
+						<view @tap.stop>
+							<switch v-if="button.isSwitch" :checked="data.huabeiInfo.isOverdue" @change="button.click"
+								style="transform: scale(0.7);"></switch>
+						</view>
+					</view>
+				</template>
+				<view class="nav-bar flex-between w100" :class="{ 'ios-nav-bar': $system == 'iOS' }">
+					<view class="flex-align-center flex-1">
+						<view class="left" @click.stop="goBack">
+							<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="header-content-wrapper">
+				<view class="current-month flex-align-center flex-justify-center">逾期金额(元) | <text
+						style="color: #FFF3A8;margin-left: 14rpx;">
+						已逾期{{ huabeiInfo.daysPastDue }}天,逾期影响信用</text>
+				</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="#D2DBE3"></uni-icons>
+				</view>
+				<view class="style-1 button-group">
+					<view class="button-item second-button" :class="{ 'ios-button': $system == 'iOS' }">立即还款</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>
+		<view class="overdue-box">
+			<view class="overdue-info">
+				<image class="icon" src="/static/image/ant-credit-pay/overdue-payment/warring-icon.png"></image>
+				<view class="err-text">抱歉，您暂时无法使用该服务！服务机构将不定期评估您的使用资格，请保持良好信用行为并耐心等待通知</view>
+				<view class="info-text">你已逾期{{ huabeiInfo.daysPastDue }}天，还款后花呗可恢复正常</view>
+				<view class="button">立即还款并恢复花呗</view>
+			</view>
+		</view>
+		<view class="service-box">
+			<view class="service-info" v-for="item in serviceList" :key="item.id">
+				<image class="icon" :src="item.image"></image>
+				<view class="name">{{ item.name }}</view>
+			</view>
+		</view>
+		<view class="consumption-box">
+			<view class="left flex-align-center">
+				<image class="img " src="/static/image/ant-credit-pay/overdue-payment/consume-dot.png">
+				</image>
+				<view class="text-box">消费记录</view>
+			</view>
+			<view class="right flex-align-center">
+				<view class="date">2025/09/22</view>
+				<image class="icon" src="/static/image/ant-credit-pay/overdue-payment/right-icon.png"></image>
+			</view>
+		</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="number" v-model="editHuabeiInfo.daysPastDue" placeholder="请输入逾期天数" />
+				</view>
+				<view class="form-item">
+					<text class="label">总计额度</text>
+					<input class="input" type="digit" v-model="editHuabeiInfo.totalAmount" placeholder="请输入总计额度" />
+				</view>
+				<view class="popup-btns">
+					<view class="btn cancel" @click="closeDialog">取消</view>
+					<view class="btn confirm" @click="confirmDialog">确定</view>
+				</view>
+			</view>
+
+		</uni-popup>
+	</view>
+
+	<!-- 水印 -->
+	<view v-if="$isVip()">
+		<watermark :dark="data.dark" />
+		<liu-drag-button :canDocking="false" @clickBtn="$goRechargePage('watermark')">
+			<c-lottie ref="cLottieRef" :src='$watermark()' width="94px" height='74px' :loop="true"></c-lottie>
+		</liu-drag-button>
+	</view>
+</template>
+
+<script setup>
+import NavBar from '@/components/nav-bar/nav-bar'
+import {
+	numberUtil,
+	util
+} from '@/utils/common.js'
+import {
+	ref,
+	toRefs,
+	reactive
+} from 'vue';
+import {
+	onLoad,
+	onShow
+} from '@dcloudio/uni-app';
+
+const buttonGroup = [{
+	name: "编辑花呗数据",
+	click: () => {
+		openDialog()
+	}
+}, {
+	name: "花呗逾期",
+	isSwitch: true,
+	click: () => {
+		data.huabeiInfo.isOverdue = !data.huabeiInfo.isOverdue
+		uni.setStorageSync(data.huabeiInfoStorageKey, data.huabeiInfo)
+		if (!data.huabeiInfo.isOverdue) {
+			uni.redirectTo({
+				url: '/pages/ant-credit-pay/index'
+			})
+		}
+	}
+}]
+
+const serviceList = [{
+	id: 1,
+	name: "花呗金",
+	image: "/static/image/ant-credit-pay/overdue-payment/huabeijin.png"
+},
+{
+	id: 2,
+	name: "周报",
+	image: "/static/image/ant-credit-pay/overdue-payment/zhoubao.png"
+},
+{
+	id: 3,
+	name: "生活号",
+	image: "/static/image/ant-credit-pay/overdue-payment/shenghuohao.png"
+},
+{
+	id: 3,
+	name: "分期生活",
+	image: "/static/image/ant-credit-pay/overdue-payment/fenqishenghuo.png"
+},
+{
+	id: 3,
+	name: "备用金",
+	image: "/static/image/ant-credit-pay/overdue-payment/beiyongjin.png"
+}]
+
+const clickTitlePopupButton = (button) => {
+	button.click()
+}
+
+const data = reactive({
+	navBar: {
+		bgColor: "#717E91",
+		textColor: "#fff"
+	},
+	huabeiInfoStorageKey: 'huabei_info_storage',
+	huabeiInfo: {
+		mouth: 1,
+		money: 100,
+		dueDate: 15,
+		totalAmount: 200000,
+		descText: "当前账单进度已超出预期，花超了",
+		isInstallment: false,
+		styleType: 1,
+		installmentBadgeText: '4折起',
+		image: "",
+		isOverdue: false,
+		daysPastDue: 1
+	},
+})
+
+let {
+	huabeiInfo,
+} = toRefs(data)
+// 编辑表单数据
+const editHuabeiInfo = ref({})
+
+const popup = ref(null)
+
+const monthRange = Array.from({
+	length: 12
+}, (_, i) => i + 1)
+const onMonthChange = (e) => {
+	editHuabeiInfo.value.mouth = monthRange[e.detail.value]
+}
+
+onLoad((option) => {
+	console.log(option)
+	// 读取缓存
+	let savedInfo = uni.getStorageSync(data.huabeiInfoStorageKey)
+	// savedInfo.image = ""
+	// uni.setStorageSync(data.huabeiInfoStorageKey, savedInfo)
+	console.log("savedInfo====", savedInfo)
+	if (savedInfo) {
+		// 合并默认值，防止旧数据缺少新字段
+		data.huabeiInfo = {
+			...data.huabeiInfo,
+			...savedInfo
+		}
+	}
+})
+
+onShow(() => {
+	// #ifdef APP-PLUS
+	util.setAndroidSystemBarColor('#F6F6F6')
+	// #endif
+})
+
+// 打开弹窗
+const openDialog = () => {
+	// 深拷贝当前数据到编辑表单
+	editHuabeiInfo.value = JSON.parse(JSON.stringify(data.huabeiInfo))
+	popup.value.open()
+}
+
+// 关闭弹窗
+const closeDialog = () => {
+	popup.value.close()
+}
+
+// 确认修改
+const confirmDialog = () => {
+	data.huabeiInfo = JSON.parse(JSON.stringify(editHuabeiInfo.value))
+	// 保存到缓存
+	uni.setStorageSync(data.huabeiInfoStorageKey, data.huabeiInfo)
+	popup.value.close()
+	uni.showToast({
+		title: '保存成功',
+		icon: 'success'
+	})
+}
+
+const goBack = () => {
+	uni.navigateBack()
+}
+</script>
+
+<style>
+@import "/common/main.css";
+</style>
+
+<style lang="less" scoped>
+.page-container {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	background-color: #F6F6F6;
+	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;
+		}
+	}
+
+	/* 头部背景 */
+	.header-bg {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		background: linear-gradient(180deg, #647589 0%, #768497 100%);
+		/* 底部自然弧度 */
+		border-radius: 0 0 100% 100% / 0 0 32px 32px;
+		z-index: 0;
+	}
+
+	.header-content-wrapper {
+		position: relative;
+		z-index: 1;
+	}
+
+	.main-container {
+		background-color: #717E91;
+		padding-bottom: 32rpx;
+
+		.current-month {
+			margin-top: 12rpx;
+			color: #D2DBE3;
+			font-size: 24rpx;
+			text-align: center;
+		}
+
+		.money-box {
+			text-align: center;
+			justify-content: center;
+
+			.money {
+				font-size: 64rpx;
+				line-height: 2.5rem;
+				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 {
+				background-color: #8C9BAF;
+			}
+
+			.ios-button {
+				border-radius: 33rpx !important;
+			}
+		}
+
+		.style-1 {
+			margin-top: 18rpx;
+			display: flex;
+			justify-content: center;
+			justify-content: center;
+		}
+
+		.total-info-box {
+			margin-top: 48rpx;
+
+			.info-item {
+				width: 50%;
+				text-align: center;
+
+				.label {
+					color: #ffffff;
+					font-size: 30rpx;
+					line-height: 42rpx;
+				}
+
+				.value {
+					color: #D2DBE3;
+					font-size: 26rpx;
+					line-height: 36rpx;
+				}
+			}
+		}
+
+	}
+
+	.overdue-box {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding-top: 18rpx;
+		background-image: url('/static/image/ant-credit-pay/overdue-payment/overdue-bg.png');
+		background-size: contain;
+		background-repeat: no-repeat;
+
+		.overdue-info {
+			width: 654rpx;
+			height: 628rpx;
+			background: linear-gradient(180deg, #FFF5F4 0%, #FFFBF7 100%);
+			border-radius: 20rpx 20rpx 20rpx 20rpx;
+			padding: 100rpx 24rpx 60rpx;
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+
+			.icon {
+				width: 72rpx;
+				height: 72rpx;
+			}
+
+			.err-text {
+				margin-top: 24rpx;
+				font-size: 28rpx;
+				color: #E83443;
+				text-align: center;
+			}
+
+			.info-text {
+				margin-top: 50rpx;
+				font-size: 36rpx;
+				color: #333333;
+				text-align: center;
+			}
+
+			.button {
+				background-color: #1777FF;
+				width: 100%;
+				height: 100rpx;
+				border-radius: 50rpx 50rpx 50rpx 50rpx;
+				font-size: 36rpx;
+				line-height: 100rpx;
+				text-align: center;
+				color: #ffffff;
+				margin-top: 38rpx;
+			}
+		}
+	}
+
+	.service-box {
+		background-color: #ffffff;
+		border-radius: 16rpx;
+		margin: 16rpx 24rpx 0;
+		display: flex;
+		align-items: center;
+		flex-wrap: wrap;
+		padding-bottom: 12rpx;
+
+		.service-info {
+			width: 25%;
+			flex-shrink: 0;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			margin-top: 26rpx;
+			padding-bottom: 20rpx;
+			font-size: 26rpx;
+
+			.name {
+				font-size: 26rpx;
+				color: #3D3D3D;
+			}
+		}
+
+		.icon {
+			width: 56rpx;
+			height: 56rpx;
+		}
+	}
+
+	.consumption-box {
+		margin: 16rpx 24rpx;
+		background-color: #ffffff;
+		border-radius: 12rpx;
+		padding: 24rpx 16rpx;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		.left {
+			display: flex;
+			align-items: center;
+
+			.img {
+				width: 24rpx;
+				height: 24rpx;
+				margin-right: 12rpx;
+			}
+
+			.text-box {
+				font-size: 24rpx;
+				color: #333;
+			}
+		}
+
+		.right {
+			display: flex;
+			align-items: center;
+
+			.date {
+				color: #969696;
+				font-size: 24rpx;
+			}
+
+			.icon {
+				width: 28rpx;
+				height: 28rpx;
+			}
+		}
+	}
+
+}
+
+.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: #717E91;
+				color: #fff;
+			}
+		}
+	}
+}
+</style>

pages/index/index.nvue

@@ -301,7 +301,12 @@ const clickMenu = (item) => {
 	if (!item.path) {
 		uiUtil.showError('开发中')
 	} else {
-		util.goPage(item.path)
+		const isOverdue = storage.get("huabei_info_storage").isOverdue || false
+		let url = item.path
+		if (item.name == "花呗" && isOverdue) {
+			url = "/pages/ant-credit-pay/overdue-payment/overdue-payment"
+		}
+		util.goPage(url)
 	}
 }