diff --git a/pages/bill/add-bill/add-bill.json b/pages/bill/add-bill/add-bill.json index 8606885..32543e9 100644 --- a/pages/bill/add-bill/add-bill.json +++ b/pages/bill/add-bill/add-bill.json @@ -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" diff --git a/pages/bill/add-bill/add-bill.vue b/pages/bill/add-bill/add-bill.vue index d902d94..1e675e0 100644 --- a/pages/bill/add-bill/add-bill.vue +++ b/pages/bill/add-bill/add-bill.vue @@ -2,6 +2,7 @@ + @@ -20,6 +21,7 @@ + {{ billData.name }} @@ -27,6 +29,7 @@ + {{ billData.money }} @@ -35,6 +38,7 @@ v-model="billData.money" /> + {{ billData.orderStatus }} @@ -52,7 +56,8 @@ }} + :style="{ color: item.textColor ? item.textColor : '#1a1a1a' }" class="text-input" + :type="item.type" :focus="item.focus" v-model="item.value" @click.stop /> @@ -62,63 +67,68 @@ @@ -137,7 +147,9 @@ + + @@ -150,6 +162,7 @@ + @@ -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; diff --git a/utils/common.js b/utils/common.js index ce91d9c..8759614 100644 --- a/utils/common.js +++ b/utils/common.js @@ -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 };