tangxinyue
/
alipay-emulator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增账单进度60%

This commit is contained in:
tangxinyue 2026-01-06 18:38:14 +08:00
parent 93612dbaf9
commit 183e4a7181
3 changed files with 279 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
pages/bill/add-bill/add-bill.json
View File

@ -15,7 +15,7 @@
},
{
"label": "付款方式",
"value": "",
"value": "招商银行储蓄卡(0123)",
"type": "text",
"focus": false,
"key": "payMethod"
@ -29,7 +29,7 @@
},
{
"label": "收单机构",
"value": "",
"value": "支付宝支付科技有限公司",
"type": "text",
"focus": false,
"key": "collectionOrganization"
@ -43,14 +43,14 @@
},
{
"label": "账单分类",
"value": "",
"value": "日用百货",
"type": "select",
"focus": false,
"key": "billCategory"
},
{
"label": "标签和备注",
"value": "",
"value": "添加",
"type": "text",
"focus": false,
"key": "tagAndNote"
@ -78,7 +78,7 @@
},
{
"label": "付款方式",
"value": "",
"value": "招商银行储蓄卡(0123)",
"type": "text",
"focus": false,
"key": "payMethod"
@ -99,14 +99,14 @@
},
{
"label": "账单分类",
"value": "",
"value": "日用百货",
"type": "select",
"focus": false,
"key": "billCategory"
},
{
"label": "标签和备注",
"value": "",
"value": "添加",
"type": "text",
"focus": false,
"key": "tagAndNote"
@ -135,7 +135,7 @@
},
{
"label": "付款方式",
"value": "",
"value": "招商银行储蓄卡(0123)",
"type": "text",
"focus": false,
"key": "payMethod"
@ -149,28 +149,28 @@
},
{
"label": "收单机构",
"value": "",
"value": "支付宝支付科技有限公司",
"type": "text",
"focus": false,
"key": "collectionOrganization"
},
{
"label": "清算机构",
"value": "",
"value": "中国中国银联股份有限公司",
"type": "text",
"focus": false,
"key": "clearingOrganization"
},
{
"label": "账单分类",
"value": "",
"value": "餐饮美食",
"type": "select",
"focus": false,
"key": "billCategory"
},
{
"label": "标签和备注",
"value": "",
"value": "添加",
"type": "text",
"focus": false,
"key": "tagAndNote"
@ -197,28 +197,28 @@
},
{
"label": "付款方式",
"value": "",
"value": "招商银行储蓄卡(0123)",
"type": "text",
"focus": false,
"key": "payMethod"
},
{
"label": "还款到",
"value": "",
"value": "花呗",
"type": "text",
"focus": false,
"key": "repaymentTo"
},
{
"label": "账单分类",
"value": "",
"value": "信用借还",
"type": "select",
"focus": false,
"key": "billCategory"
},
{
"label": "标签和备注",
"value": "",
"value": "添加",
"type": "text",
"focus": false,
"key": "tagAndNote"
@ -264,14 +264,14 @@
},
{
"label": "账单分类",
"value": "",
"value": "转账红包",
"type": "select",
"focus": false,
"key": "billCategory"
},
{
"label": "标签和备注",
"value": "",
"value": "添加",
"type": "text",
"focus": false,
"key": "tagAndNote"
@ -312,14 +312,14 @@
},
{
"label": "账单分类",
"value": "",
"value": "转账红包",
"type": "select",
"focus": false,
"key": "billCategory"
},
{
"label": "标签和备注",
"value": "",
"value": "添加",
"type": "text",
"focus": false,
"key": "tagAndNote"
@ -347,7 +347,7 @@
},
{
"label": "付款方式",
"value": "",
"value": "招商银行储蓄卡(0123)",
"type": "text",
"focus": false,
"key": "payMethod"
@ -361,14 +361,14 @@
},
{
"label": "账单分类",
"value": "",
"value": "转账红包",
"type": "select",
"focus": false,
"key": "billCategory"
},
{
"label": "标签和备注",
"value": "",
"value": "添加",
"type": "text",
"focus": false,
"key": "tagAndNote"
@ -412,14 +412,14 @@
},
{
"label": "账单分类",
"value": "",
"value": "收入",
"type": "select",
"focus": false,
"key": "billCategory"
},
{
"label": "标签和备注",
"value": "",
"value": "添加",
"type": "text",
"focus": false,
"key": "tagAndNote"
@ -456,7 +456,7 @@
},
{
"label": "退款方式",
"value": "",
"value": "招商银行储蓄卡(0123)",
"type": "text",
"focus": false,
"key": "refundMethod"
@ -470,14 +470,14 @@
},
{
"label": "账单分类",
"value": "",
"value": "退款",
"type": "select",
"focus": false,
"key": "billCategory"
},
{
"label": "标签和备注",
"value": "",
"value": "添加",
"type": "text",
"focus": false,
"key": "tagAndNote"
@ -504,7 +504,7 @@
},
{
"label": "付款方式",
"value": "",
"value": "招商银行储蓄卡(0123)",
"type": "text",
"focus": false,
"key": "payMethod"
@ -525,14 +525,14 @@
},
{
"label": "账单分类",
"value": "",
"value": "充值缴费",
"type": "select",
"focus": false,
"key": "billCategory"
},
{
"label": "标签和备注",
"value": "",
"value": "添加",
"type": "text",
"focus": false,
"key": "tagAndNote"
@ -561,7 +561,7 @@
},
{
"label": "付款方式",
"value": "",
"value": "招商银行储蓄卡(0123)",
"type": "text",
"focus": false,
"key": "payMethod"
@ -589,14 +589,14 @@
},
{
"label": "账单分类",
"value": "",
"value": "充值缴费",
"type": "select",
"focus": false,
"key": "billCategory"
},
{
"label": "标签和备注",
"value": "",
"value": "添加",
"type": "text",
"focus": false,
"key": "tagAndNote"
@ -630,21 +630,21 @@
},
{
"label": "付款方式",
"value": "",
"value": "招商银行储蓄卡(0123)",
"type": "text",
"focus": false,
"key": "payMethod"
},
{
"label": "账单分类",
"value": "",
"value": "日用百货",
"type": "select",
"focus": false,
"key": "billCategory"
},
{
"label": "标签和备注",
"value": "",
"value": "添加",
"type": "text",
"focus": false,
"key": "tagAndNote"
@ -672,7 +672,7 @@
},
{
"label": "付款方式",
"value": "",
"value": "招商银行储蓄卡(0123)",
"type": "text",
"focus": false,
"key": "payMethod"
@ -693,14 +693,14 @@
},
{
"label": "账单分类",
"value": "",
"value": "日用百货",
"type": "select",
"focus": false,
"key": "billCategory"
},
{
"label": "标签和备注",
"value": "",
"value": "添加",
"type": "text",
"focus": false,
"key": "tagAndNote"

228
pages/bill/add-bill/add-bill.vue
View File

@ -2,6 +2,7 @@
<view style="overflow: hidden;overflow-y: scroll; height: 100vh;">
<navBar isRightButton :title="data.navBar.title" :bgColor="data.navBar.bgColor" @right-click="onRightClick">
</navBar>
<!-- tabbar -->
<view class="tab-bar">
<view class="tab-item" :class="{ blue: billData.selectId == item.selectId }" v-for="item in classifyTabBar"
:key="item.selectId" @click="billData.selectId = Number(item.selectId)">
@ -20,6 +21,7 @@
</view>
<!-- 主要信息 -->
<view class="main-info flex-align-center flex-column">
<!-- 名称 -->
<view class="name info-item-input">
<!-- 隐藏的text用于测量宽度 -->
<text class="text-measure">{{ billData.name }}</text>
@ -27,6 +29,7 @@
<input class="text-input" type="text" v-model="billData.name" />
<image class="edit-image" src="/static/image/bill/add-bill/edit.png"></image>
</view>
<!-- 金额 -->
<view class=" money info-item-input" style="height: 77rpx;">
<!-- 隐藏的text用于测量宽度 -->
<text class="text-measure font-w500" style="font-size: 64rpx;">{{ billData.money }}</text>
@ -35,6 +38,7 @@
v-model="billData.money" />
<image class="edit-image" src="/static/image/bill/add-bill/edit.png"></image>
</view>
<!-- 订单状态 -->
<view class="order-status-info" :class="{ isRefund: billData.merchantOption.refund }">
{{ billData.orderStatus }}
</view>
@ -52,7 +56,8 @@
}}</text>
<input v-if="item.type == 'text' || item.type == 'digit' || item.type == 'number'"
class="text-input" :type="item.type" :focus="item.focus" v-model="item.value" @click.stop />
:style="{ color: item.textColor ? item.textColor : '#1a1a1a' }" class="text-input"
:type="item.type" :focus="item.focus" v-model="item.value" @click.stop />
</view>
<image class="edit-image" src="/static/image/bill/add-bill/edit.png" @click="onClickItemInfo(item)">
</image>
@ -62,63 +67,68 @@
<!-- switch选项列表 -->
<view class="switch-option-container">
<template v-for="option in data.switchOptions" :key="option.id">
<view class="switch-option" v-if="option.isShow()">
<view class="switch-option-text">{{ option.name }}</view>
<switch v-if="option.isSwitch" color="#1676FE" :checked="billData.merchantOption[option.key]"
style="transform:scale(0.8)" @change="(e) => onSwitchChange(e, option)" />
</view>
<!-- 服务详情 -->
<view class="service-detail"
v-if="option.key == 'serviceDetail' && billData.merchantOption.serviceDetail && option.isShow()">
<image class="service-detail-image" src="/static/image/bill/add-bill/service-detail-image.png" />
<view class="flex-1 over-hidden">
<view class="service-detail-info info-item-input">
<!-- 隐藏的text用于测量宽度 -->
<text class="text-measure" style="font-size: 22rpx;">{{
billData.merchantOption.serverDetailInfo.text }}</text>
<input class="text-input" maxlength="20" style="font-size: 22rpx;" type="text"
v-model="billData.merchantOption.serverDetailInfo.text" />
<image class="edit-image" src="/static/image/bill/add-bill/edit.png"></image>
</view>
<view v-if="option.isShow()" class="border-bottom"
:class="{ 'no-border-bottom': billData.merchantOption[option.key] && option.isShow() }">
<view class="switch-option">
<view class="switch-option-text">{{ option.name }}</view>
<switch v-if="option.isSwitch" color="#1676FE" :checked="billData.merchantOption[option.key]"
style="transform:scale(0.8)" @change="(e) => onSwitchChange(e, option)" />
</view>
<uni-data-select class="select" style="flex: none;width: 80px;"
v-model="billData.merchantOption.serverDetailInfo.rightText"
:localdata="serverDetailRightTextList" @change="changeTips" :clear="false"></uni-data-select>
<image class="right-icon" src="/static/image/common/right-grey.png" />
</view>
<!-- 推荐服务 -->
<view class="service-detail recommend-service "
v-if="option.key == 'recommendService' && billData.merchantOption.recommendService && option.isShow()">
<view class="flex-1 over-hidden">
<view class="service-detail-info info-item-input">
<!-- 隐藏的text用于测量宽度 -->
<text class="text-measure" style="font-size: 22rpx;">{{
billData.merchantOption.recommendServiceInfo.text }}</text>
<!-- 服务详情 -->
<view class="service-detail"
v-if="option.key == 'serviceDetail' && billData.merchantOption.serviceDetail && option.isShow()">
<image class="service-detail-image"
src="/static/image/bill/add-bill/service-detail-image.png" />
<view class="flex-1 over-hidden">
<view class="service-detail-info info-item-input">
<!-- 隐藏的text用于测量宽度 -->
<text class="text-measure" style="font-size: 22rpx;">{{
billData.merchantOption.serverDetailInfo.text }}</text>
<input class="text-input" maxlength="20" style="font-size: 22rpx;" type="text"
v-model="billData.merchantOption.recommendServiceInfo.text" />
<image class="edit-image" src="/static/image/bill/add-bill/edit.png"></image>
<input class="text-input" maxlength="20" style="font-size: 22rpx;" type="text"
v-model="billData.merchantOption.serverDetailInfo.text" />
<image class="edit-image" src="/static/image/bill/add-bill/edit.png"></image>
</view>
</view>
<uni-data-select class="select" style="flex: none;width: 80px;"
v-model="billData.merchantOption.serverDetailInfo.rightText"
:localdata="serverDetailRightTextList" @change="changeTips"
:clear="false"></uni-data-select>
<image class="right-icon" src="/static/image/common/right-grey.png" />
</view>
<text class="right-text">去看看</text>
<image class="right-icon" src="/static/image/common/right-grey.png" />
</view>
<!-- 服务推荐 -->
<view class="service-detail service-recommend "
v-if="option.key == 'serviceRecommend' && billData.merchantOption.serviceRecommend && option.isShow()">
<view class="flex-1 over-hidden">
<view class="service-detail-info info-item-input">
<!-- 隐藏的text用于测量宽度 -->
<text class="text-measure" style="font-size: 22rpx;">{{
billData.merchantOption.serviceRecommendInfo.text }}</text>
<!-- 推荐服务 -->
<view class="service-detail recommend-service "
v-if="option.key == 'recommendService' && billData.merchantOption.recommendService && option.isShow()">
<view class="flex-1 over-hidden">
<view class="service-detail-info info-item-input">
<!-- 隐藏的text用于测量宽度 -->
<text class="text-measure" style="font-size: 22rpx;">{{
billData.merchantOption.recommendServiceInfo.text }}</text>
<input class="text-input" maxlength="20" style="font-size: 22rpx;" type="text"
v-model="billData.merchantOption.serviceRecommendInfo.text" />
<image class="edit-image" src="/static/image/bill/add-bill/edit.png"></image>
<input class="text-input" maxlength="20" style="font-size: 22rpx;" type="text"
v-model="billData.merchantOption.recommendServiceInfo.text" />
<image class="edit-image" src="/static/image/bill/add-bill/edit.png"></image>
</view>
</view>
<text class="right-text">去看看</text>
<image class="right-icon" src="/static/image/common/right-grey.png" />
</view>
<!-- 服务推荐 -->
<view class="service-detail service-recommend "
v-if="option.key == 'serviceRecommend' && billData.merchantOption.serviceRecommend && option.isShow()">
<view class="flex-1 over-hidden">
<view class="service-detail-info info-item-input">
<!-- 隐藏的text用于测量宽度 -->
<text class="text-measure" style="font-size: 22rpx;">{{
billData.merchantOption.serviceRecommendInfo.text }}</text>
<input class="text-input" maxlength="20" style="font-size: 22rpx;" type="text"
v-model="billData.merchantOption.serviceRecommendInfo.text" />
<image class="edit-image" src="/static/image/bill/add-bill/edit.png"></image>
</view>
</view>
<image class="right-icon" src="/static/image/common/right-grey.png" />
</view>
<image class="right-icon" src="/static/image/common/right-grey.png" />
</view>
</template>
@ -137,7 +147,9 @@
</view>
</view>
<!-- 底部弹出层 -->
<uni-popup ref="timepopup" type="bottom">
<!-- 时间选择器 -->
<view v-if="selectItemInfo.type == 'time'" class="timeBox">
<view class="titleBox">
<view class="title" @click="closeTimePicker">
@ -150,6 +162,7 @@
<DateTimePicker :defaultDate="datePickerData.selectDate" :minDate="datePickerData.startDate"
:maxDate="datePickerData.endDate" :mode="4" @onChange="onChangeStartDate" />
</view>
<!-- 账单分类 -->
<view v-else class="bill-classify-box">
<view class="title-box">
<view class="title">
@ -178,6 +191,7 @@
import navBar from '@/components/nav-bar/nav-bar.vue'
import addBillJson from './add-bill.json'
import DateTimePicker from '@/components/dengrq-datetime-picker/dateTimePicker/index.vue';
import { stringUtil } from '@/utils/common.js';
import {
reactive,
@ -298,7 +312,7 @@ classifyTabBar.value.forEach(item => {
keySet.add(info.key)
allFieldsList.value.push({
key: info.key,
value: ""
value: info.value ? info.value : ""
})
}
})
@ -327,7 +341,8 @@ const data = reactive({
},
// 账单数据
billData: {
selectId: 1,
id: "",
selectId: -1,
name: '',
money: "",
orderStatus: '交易成功',
@ -359,6 +374,10 @@ const data = reactive({
let { billData, datePickerData, selectItemInfo } = toRefs(data)
onMounted(() => {
billData.value.selectId = 1
})
onShow(() => { })
// 监听selectId
@ -371,6 +390,7 @@ watch(() => billData.value.selectId, (newVal) => {
}
})
})
console.log("全部字段的值", allFieldsList.value)
// 获取当前分类的字段
let currentItemInfoList = []
classifyTabBar.value.forEach(item => {
@ -399,9 +419,85 @@ watch(() => billData.value.selectId, (newVal) => {
// 设置当前分类的底部字段
billData.value.bottomIcons = classifyTabBar.value.find(item => item.selectId == newVal).defaultBottomIcons
console.log("当前分类的底部字段", billData.value.bottomIcons)
setItemInfoValue(newVal)
})
onMounted(() => { })
/**
* 设置每个字段信息值
*/
const setItemInfoValue = (id) => {
billData.value.itemInfoList.forEach(item => {
switch (id) {
case 1:
if (item.key == 'receiverFullName') {
item.value = `${billData.value.name}有限公司`
} else if (item.key == 'productDescription') {
item.value = `xxxxxxx消费`
}
break;
case 2:
if (item.key == 'productDescription') {
item.value = `收钱码收款`
} else if (item.key == 'receiverFullName') {
item.value = `***(个人)`
}
break;
case 3:
if (item.key == 'productDescription') {
item.value = `xxxxxxx消费`
}
break;
case 4:
break;
case 5:
if (item.key == 'transferNote') {
item.value = `报销`
} else if (item.key == 'counterAccount') {
item.value = `${billData.value.name}`
}
break;
case 6:
if (item.key == 'transferNote') {
item.value = `转账`
} else if (item.key == 'counterAccount') {
item.value = `xxx123654789`
}
break;
case 7:
break;
case 8:
if (item.key == 'relatedRecord') {
item.value = `查看关联记录`
}
break;
case 9:
if (item.key == 'relatedRecord') {
item.value = `查看原账单`
}
break;
case 10:
break;
case 11:
break;
case 12:
break;
case 13:
break;
default:
break;
}
})
}
/**
* 保存账单
*/
const onRightClick = () => {
billData.value.id = stringUtil.uuid()
console.log("保存", billData.value)
}
// 点击itemInfo
const onClickItemInfo = (item) => {
@ -422,6 +518,10 @@ const onClickItemInfo = (item) => {
}
}
/**
* 底部icon点击选择
* @param option
*/
const onBottomIconClick = (option) => {
if (billData.value.bottomIcons.includes(option.id)) {
billData.value.bottomIcons = billData.value.bottomIcons.filter(item => item != option.id)
@ -582,6 +682,18 @@ page {
.detail-info-container {
padding-top: 36rpx;
.info-item-input {
font-size: 26rpx;
.text-measure {
font-size: 26rpx;
}
.text-input {
font-size: 26rpx;
}
}
}
.info-item-box {
@ -647,6 +759,14 @@ page {
background-color: #ffffff;
border-radius: 16rpx 16rpx 16rpx 16rpx;
.border-bottom {
border-bottom: 1px solid #efefef
}
.no-border-bottom {
border: none;
}
.switch-option {
padding: 24rpx;
// border-top: 1rpx solid #E4E4E4;

66
utils/common.js
View File

@ -324,6 +324,11 @@ export const uiUtil = {
* 其他工具方法
*/
export const util = {
/**
* 设置底部状态栏颜色
* @param {string} backgroundColor - 颜色值
* @returns {void}
*/
setAndroidSystemBarColor(backgroundColor) {
if (deviceUtil.isAndroid()) {
try {
@ -376,6 +381,64 @@ export const util = {
}
};
/**
* 生成随机数据工具
*/
export const randomUtil = {
/**
* 生成随机数
* @param {number} min - 最小值
* @param {number} max - 最大值
* @returns {number} 随机数
*/
random(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
/**
* 生成随机时间格式化时间
* @param {string|number|Date} startTime - 开始时间
* @param {string|number|Date} endTime - 结束时间
* @param {string} format - 格式化字符串
* @returns {string} 格式化后的时间
*/
randomTime(startTime, endTime, format = 'YYYY-MM-DD HH:mm:ss') {
const start = new Date(startTime).getTime();
const end = new Date(endTime).getTime();
const randomTimestamp = Math.floor(Math.random() * (end - start + 1)) + start;
return dateUtil.format(randomTimestamp, format);
},
/**
* 随机生成指定位数订单号
* @param {number} length - 订单号位数
* @returns {string} 订单号
*/
randomOrderNumber(length = 16) {
if (length < 13) {
// 长度小于13，直接返回随机数字字符串
let result = '';
for (let i = 0; i < length; i++) {
result += Math.floor(Math.random() * 10);
}
return result;
}
// 长度大于等于13，使用时间戳+随机数
const timestamp = Date.now().toString();
let result = timestamp;
const padding = length - timestamp.length;
if (padding > 0) {
for (let i = 0; i < padding; i++) {
result += Math.floor(Math.random() * 10);
}
}
return result;
}
};
// 默认导出所有工具方法
export default {
...dateUtil,
@ -383,5 +446,6 @@ export default {
...stringUtil,
...deviceUtil,
...uiUtil,
...util
...util,
...randomUtil
};