679 lines
15 KiB
Vue
679 lines
15 KiB
Vue
<template>
|
||
|
||
<view class="page-container">
|
||
<view class="main-container">
|
||
|
||
<!-- 头部背景 (带弧度) -->
|
||
<view class="header-bg"></view>
|
||
|
||
<!-- 导航栏 - 降低层级以显示水印 -->
|
||
<NavBar title="花呗 | 信用购" :bgColor="'#717E91'" 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 flex-align-center" @click.stop="goBack">
|
||
<image class=" back-icon" src="/static/image/nav-bar/back-white.png" mode="">
|
||
</image>
|
||
</view>
|
||
<view class="title flex-align-center">
|
||
花呗
|
||
</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">消费成功{{ Number(huabeiInfo.consumptionAmount).toFixed(2) }}元</view>
|
||
</view>
|
||
<view class="right flex-align-center">
|
||
<view class="date">{{ huabeiInfo.consumptionDate }}</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>
|
||
<!-- <text>消费信息</text> -->
|
||
<view class="form-item">
|
||
<text class="label">消费金额</text>
|
||
<input class="input" type="digit" v-model="editHuabeiInfo.consumptionAmount"
|
||
placeholder="请输入消费金额" />
|
||
</view>
|
||
<view class="form-item">
|
||
<text class="label">消费日期</text>
|
||
<picker mode="date" :fields="$system == 'Android' ? 'day' : ''"
|
||
:value="editHuabeiInfo.consumptionDate" @change="onConsumptionDateChange"
|
||
:end="dateUtil.now('YYYY-MM-DD')" style="flex:1">
|
||
<view class="input">{{ editHuabeiInfo.consumptionDate || '请选择日期' }}</view>
|
||
</picker>
|
||
</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,
|
||
dateUtil,
|
||
util
|
||
} from '@/utils/common.js'
|
||
import {
|
||
ref,
|
||
toRefs,
|
||
reactive,
|
||
getCurrentInstance
|
||
} from 'vue';
|
||
import {
|
||
onLoad,
|
||
onShow
|
||
} from '@dcloudio/uni-app';
|
||
|
||
const instance = getCurrentInstance();
|
||
const { proxy } = instance;
|
||
|
||
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,
|
||
consumptionAmount: 66.5,
|
||
consumptionDate: '2025/09/22'
|
||
},
|
||
})
|
||
|
||
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]
|
||
}
|
||
|
||
const onConsumptionDateChange = (e) => {
|
||
// e.detail.value 格式通常为 YYYY-MM-DD，如果需要 YYYY/MM/DD 可以转换
|
||
editHuabeiInfo.value.consumptionDate = e.detail.value.replace(/-/g, '/')
|
||
}
|
||
|
||
onLoad((option) => {
|
||
// 进入花呗页面埋点
|
||
proxy.$apiUserEvent('all', {
|
||
type: 'click',
|
||
key: 'huabei',
|
||
value: "花呗"
|
||
})
|
||
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')
|
||
setTimeout(() => {
|
||
plus.navigator.setStatusBarStyle("light");
|
||
}, 500)
|
||
// #endif
|
||
})
|
||
|
||
// 打开弹窗
|
||
const openDialog = () => {
|
||
// 深拷贝当前数据到编辑表单
|
||
editHuabeiInfo.value = JSON.parse(JSON.stringify(data.huabeiInfo))
|
||
popup.value.open()
|
||
}
|
||
|
||
// 关闭弹窗
|
||
const closeDialog = () => {
|
||
popup.value.close()
|
||
}
|
||
|
||
// 确认修改
|
||
const confirmDialog = () => {
|
||
// 校验数据: 本月应还不能大于总计额度
|
||
if (Number(editHuabeiInfo.value.money) > Number(editHuabeiInfo.value.totalAmount)) {
|
||
uni.showToast({
|
||
title: '本月应还不能大于总计额度',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
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;
|
||
padding-bottom: 16rpx;
|
||
|
||
.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: 90px;
|
||
}
|
||
|
||
.icon {
|
||
margin-left: 18rpx;
|
||
margin-right: 10rpx;
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
}
|
||
|
||
.ios-nav-bar {
|
||
.left {
|
||
width: 90px;
|
||
}
|
||
|
||
.title {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.right {
|
||
width: 90px;
|
||
}
|
||
}
|
||
|
||
/* 头部背景 */
|
||
.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: 26rpx;
|
||
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;
|
||
margin-top: -1px;
|
||
|
||
.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 16rpx;
|
||
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> |