完成花呗首页UI及逻辑
This commit is contained in:
tangxinyue
parent
7c3e22324f
commit
c594174f14
|
|
@ -2,35 +2,43 @@
|
||||||
<view style="width: 100%;" :style="{ height: `${data.statusBarHeight + 44}px` }"></view>
|
<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 }">
|
||||||
<view class="status-placeholder" :style="{ height: `${data.statusBarHeight}px` }"></view>
|
<view class="status-placeholder" :style="{ height: `${data.statusBarHeight}px` }"></view>
|
||||||
<uni-nav-bar backgroundColor="#00000000" class="nav-bar" :border="false" :title="title" v-bind="$attrs"
|
<view style="width: 100%;height: 44px;" @click="openPopup">
|
||||||
v-on="$attrs">
|
<slot>
|
||||||
<template v-slot:left>
|
<uni-nav-bar backgroundColor="#00000000" class="nav-bar" :border="false" :title="title" v-bind="$attrs"
|
||||||
<view class="nav-bar-left">
|
v-on="$attrs">
|
||||||
<slot name="left">
|
<template v-slot:left>
|
||||||
<view class="left-icon" @click="onBack">
|
<view class="nav-bar-left">
|
||||||
<image class="nav-icon-back" src="/static/image/nav-bar/back-black.png" mode=""></image>
|
<slot name="left">
|
||||||
|
<view class="left-icon" @click.stop="onBack">
|
||||||
|
<image class="nav-icon-back" src="/static/image/nav-bar/back-black.png" mode="">
|
||||||
|
</image>
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
</view>
|
</view>
|
||||||
</slot>
|
</template>
|
||||||
</view>
|
<view class="nav-bar-title w100 h100 flex-1" @click="openPopup" :style="{ color: textColor }">
|
||||||
</template>
|
<slot name="center">
|
||||||
<view class="nav-bar-title w100 h100 flex-1" @click="openPopup">
|
{{ title }}
|
||||||
<slot name="center">
|
</slot>
|
||||||
{{ title }}
|
</view>
|
||||||
</slot>
|
<template v-slot:right>
|
||||||
</view>
|
<view class="nav-bar-right" @click.stop="onRightClick">
|
||||||
<template v-slot:right>
|
<slot name="right">
|
||||||
<view class="nav-bar-right" @click="onRightClick">
|
<view v-if="isRightIcon" class="right-icon">
|
||||||
<slot name="right">
|
<image class="nav-icon-more" src="/static/image/nav-bar/more-black.png" mode="">
|
||||||
<view v-if="isRightIcon" class="right-icon">
|
</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 }}
|
||||||
|
</view>
|
||||||
|
</slot>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="isRightButton" class="right-button">
|
</template>
|
||||||
{{ rightButtonText }}
|
</uni-nav-bar>
|
||||||
</view>
|
</slot>
|
||||||
</slot>
|
</view>
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
</uni-nav-bar>
|
|
||||||
<popup ref="topPopup">
|
<popup ref="topPopup">
|
||||||
<view class="button-group w100 flex-between flex-wrap">
|
<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 in buttonGroup" @click="buttonClick(button)">
|
||||||
|
|
@ -59,6 +67,10 @@ const props = defineProps({
|
||||||
type: String,
|
type: String,
|
||||||
default: '#fff'
|
default: '#fff'
|
||||||
},
|
},
|
||||||
|
textColor: {
|
||||||
|
type: String,
|
||||||
|
default: '#000'
|
||||||
|
},
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
|
|
|
||||||
12
pages.json
12
pages.json
|
|
@ -4,7 +4,7 @@
|
||||||
{
|
{
|
||||||
"path": "pages/index/index",
|
"path": "pages/index/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "uni-app",
|
"navigationBarTitleText": "支付宝模拟器首页",
|
||||||
"navigationStyle": "custom"
|
"navigationStyle": "custom"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -53,6 +53,16 @@
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"root": "pages/ant-credit-pay",
|
||||||
|
"pages": [{
|
||||||
|
"path": "index",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "花呗首页",
|
||||||
|
"navigationStyle": "custom"
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"root": "pages/common",
|
"root": "pages/common",
|
||||||
"pages": [{
|
"pages": [{
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -147,7 +147,7 @@ const menuList = [{
|
||||||
icon: "huabei",
|
icon: "huabei",
|
||||||
name: "花呗",
|
name: "花呗",
|
||||||
isHot: false,
|
isHot: false,
|
||||||
path: ""
|
path: "/pages/ant-credit-pay/index"
|
||||||
},
|
},
|
||||||
|
|
||||||
]
|
]
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 908 B |
Binary file not shown.
|
After Width: | Height: | Size: 990 B |
|
|
@ -40,24 +40,8 @@ export const store = reactive({
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 定义操作方法
|
// 定义操作方法
|
||||||
export const useStore = () => {
|
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) => {
|
const addBill = (bill) => {
|
||||||
store.billList.unshift(bill);
|
store.billList.unshift(bill);
|
||||||
|
|
@ -114,23 +98,11 @@ export const useStore = () => {
|
||||||
{ deep: true }
|
{ deep: true }
|
||||||
);
|
);
|
||||||
|
|
||||||
// 获取系统信息（从缓存读取）
|
|
||||||
const getSystemInfo = () => {
|
|
||||||
const cachedInfo = uni.getStorageSync('systemInfo')
|
|
||||||
if (cachedInfo) {
|
|
||||||
store.systemInfo = cachedInfo
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
store,
|
store,
|
||||||
setUserInfo,
|
|
||||||
clearUserInfo,
|
|
||||||
updateSettings,
|
|
||||||
addBill,
|
addBill,
|
||||||
updateBill,
|
updateBill,
|
||||||
deleteBill,
|
deleteBill,
|
||||||
getBillList,
|
getBillList
|
||||||
getSystemInfo
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -140,6 +140,22 @@ export const numberUtil = {
|
||||||
return number.toFixed(decimals);
|
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 - 最小值
|
* @param {number} min - 最小值
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue