526 lines
12 KiB
Vue
526 lines
12 KiB
Vue
<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>
|