diff --git a/common/utils/format.js b/common/utils/format.js new file mode 100644 index 0000000..47b6d71 --- /dev/null +++ b/common/utils/format.js @@ -0,0 +1,11 @@ + formatMoney(val) { + if (val === null || val === undefined || isNaN(val)) return '—'; + + val = Number(val); + + if (val >= 10000) { + return '¥' + (val / 10000).toFixed(2) + '万'; + } + + return '¥' + val.toFixed(2); + } \ No newline at end of file diff --git a/pages/center/center.vue b/pages/center/center.vue index 45ccb60..fe34ac2 100644 --- a/pages/center/center.vue +++ b/pages/center/center.vue @@ -141,115 +141,120 @@ diff --git a/pages/unpaid/unpaid.vue b/pages/unpaid/unpaid.vue index ad7a12c..e801ccd 100644 --- a/pages/unpaid/unpaid.vue +++ b/pages/unpaid/unpaid.vue @@ -19,12 +19,12 @@ > - + {{ item.feeName }} 缴费截止：{{ item.dueDate }} @@ -34,12 +34,11 @@ {{ formatMoney(item.amount) }} - 去支付 + >去支付 + @@ -51,13 +50,16 @@ - - - 已选 {{ selectedBills.length }} 项 - - 批量缴费 - - + + + 已选 {{ selectedBills.length }} 项 + + {{ formatMoney(sumAmount) }} + + + @@ -68,12 +70,15 @@ export default { bills: [], isRefreshing: false, loadStatus: 'more', + sumAmount: 0, selectedBills: [], // 勾选的账单集合 }; }, onLoad() { this.loadBills(); }, + onShow(){ + }, methods: { loadBills() { this.bills = [ @@ -81,7 +86,7 @@ export default { id: 'p101', feeName: '第一期租金（2024.12.01-2024.12.31）', dueDate: '2024-12-15', - amount: 3000, + amount: 300000, checked: false, }, { @@ -92,9 +97,8 @@ export default { checked: false, }, ]; - this.updateSelected(); + this.updateSelected(); }, - refresh() { this.isRefreshing = true; setTimeout(() => { @@ -107,16 +111,33 @@ export default { this.loadStatus = 'noMore'; }, - formatMoney(val) { - if (!val && val !== 0) return '—'; - return '¥' + Number(val).toFixed(2); - }, - - updateSelected() { - this.selectedBills = []; - this.selectedBills = this.bills.filter((item) => item.checked); - console.log(this.selectedBill.length) - }, + formatMoney(val) { + if (val === null || val === undefined || isNaN(val)) return '—'; + + val = Number(val); + + if (val >= 10000) { + return '¥' + (val / 10000).toFixed(2) + '万'; + } + + return '¥' + val.toFixed(2); + }, + toggleCheck(item) { + item.checked = !item.checked; + if(item.checked && !this.selectedBills.some(b => b.id === item.id)) { + this.selectedBills.push(item); + }else{ + // 取消勾选时从已选数组移除 + this.selectedBills = this.selectedBills.filter(b => b.id !== item.id); + } + let sumFee = 0; + this.selectedBills.forEach(b => sumFee += b.amount); + this.sumAmount = sumFee; + }, + updateSelected() { + if (!Array.isArray(this.bills)) return; + this.selectedBills = this.bills.filter(b => b.checked); + }, goPayTest(billList) { if (!billList || billList.length === 0) return; @@ -191,31 +212,7 @@ export default { uni.showToast({ title: '支付请求失败', icon: 'none' }); } }, - }, -computed: { - /** ✅ 已勾选账单列表 */ - selectedBills() { - return this.bills.filter(item => item.checked); - }, - - /** ✅ 已勾选数量 */ - selectedCount() { - return this.selectedBills.length; - }, - - /** ✅ 全选状态（双向绑定） */ - allSelected: { - get() { - return this.bills.length > 0 && this.selectedBills.length === this.bills.length; - }, - set(val) { - // 用 this.$set 保证响应式更新 - this.bills.forEach((item, index) => { - this.$set(this.bills, index, { ...item, checked: val }); - }); - } } -} }; @@ -248,7 +245,6 @@ computed: { .bill-info { display: flex; flex-direction: column; - margin-left: 12rpx; .bill-name { font-size: 28rpx; @@ -265,26 +261,31 @@ computed: { } .bill-right { - display: flex; flex-direction: column; align-items: flex-end; - + width: 30%; .amount { + text-align: center; font-size: 28rpx; - color: #333; + height: 28rpx; + line-height: 28rpx; + color: #ff7f00; } .pay-btn { margin-top: 12rpx; - padding: 0 24rpx; + padding: 0 40rpx; height: 60rpx; line-height: 60rpx; border-radius: 30rpx; // 圆角 font-size: 28rpx; color: #fff; - background-color: #007aff; // 蓝色主色 + background: linear-gradient(90deg, #007aff, #00aaff); text-align: center; } + .btn-text{ + padding-top: 13rpx; + } } .batch-pay-bar { @@ -292,24 +293,41 @@ computed: { bottom: 0; left: 0; right: 0; - background: #fff; - height: 80rpx; - padding: 0 20rpx; + height: 170rpx; + padding: 0 30rpx; + background-color: #fff; display: flex; align-items: center; justify-content: space-between; - box-shadow: 0 -2rpx 6rpx rgba(0, 0, 0, 0.08); + box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.08); z-index: 999; - - u-button { - height: 60rpx; - line-height: 60rpx; - padding: 0 30rpx; - border-radius: 30rpx; - font-size: 28rpx; - text-align: center; + .batch-pay-bar-left{ + font-size: 28rpx; + color: #333; + } + + .batch-pay-bar-right{ + flex-direction: column; + align-items: flex-end; + .sumAmount{ + font-size: 28rpx; + color: #ff7f00; + } + .bottomPayBtn { + margin-top: 12rpx; + height: 60rpx; + line-height: 60rpx; + padding: 0 40rpx; + border-radius: 30rpx; + font-size: 28rpx; + font-weight: bold; + text-align: center; + background: linear-gradient(90deg, #007aff, #00aaff); + } } } + + .empty { margin-top: 200rpx; text-align: center; diff --git a/pages/wae/wae.vue b/pages/wae/wae.vue index ddfaa5a..9420fe9 100644 --- a/pages/wae/wae.vue +++ b/pages/wae/wae.vue @@ -1,61 +1,65 @@ @@ -63,198 +67,270 @@ export default { data() { return { - records: [], - selectedIds: [], + bills: [], isRefreshing: false, - loadStatus: 'loadmore', - page: 1, - pageSize: 10, + loadStatus: 'more', + sumAmount: 0, + selectedBills: [], // 勾选的账单集合 }; }, onLoad() { - this.loadRecords(); + this.loadBills(); + }, + onShow(){ }, methods: { - // 模拟加载账单 - loadRecords() { - this.records = [ - { - id: 1, - feeName: '电费（2025.10）', - dueDate: '2025-11-20', - amount: 120.5, - }, - { - id: 2, - feeName: '水费（2025.10）', - dueDate: '2025-11-22', - amount: 60.2, - }, + loadBills() { + this.bills = [ + { + id: 1, + feeName: '电费（2025.10）', + dueDate: '2025-11-20', + amount: 120.5, + checked: false + }, + { + id: 2, + feeName: '水费（2025.10）', + dueDate: '2025-11-22', + amount: 60.2, + checked: false + } ]; + this.updateSelected(); }, refresh() { this.isRefreshing = true; setTimeout(() => { - this.loadRecords(); + this.loadBills(); this.isRefreshing = false; }, 1000); }, - loadMore() { - this.loadStatus = 'nomore'; - }, - toggleSelect(id) { - const idx = this.selectedIds.indexOf(id); - if (idx > -1) { - this.selectedIds.splice(idx, 1); - } else { - this.selectedIds.push(id); - } - }, - paySingle(item) { - uni.showModal({ - title: '确认支付', - content: `确认支付 ¥${item.amount} 吗？`, - success: (res) => { - if (res.confirm) { - this.createOrder([item.id]); - } - }, - }); - }, - batchPay() { - uni.showModal({ - title: '批量缴费', - content: `确认支付 ${this.selectedIds.length} 项账单？`, - success: (res) => { - if (res.confirm) { - this.createOrder(this.selectedIds); - } - }, - }); - }, - // 模拟调用后端生成支付订单 - createOrder(ids) { - console.log('创建支付订单：', ids); - uni.showToast({ - title: '生成支付订单中...', - icon: 'loading', - }); - // 模拟延迟 + 支付调用 - setTimeout(() => { - uni.showToast({ - title: '支付成功', - icon: 'success', - }); - // 清空选择 - this.selectedIds = []; - }, 1200); + loadMore() { + this.loadStatus = 'noMore'; }, - }, + + formatMoney(val) { + if (val === null || val === undefined || isNaN(val)) return '—'; + + val = Number(val); + + if (val >= 10000) { + return '¥' + (val / 10000).toFixed(2) + '万'; + } + + return '¥' + val.toFixed(2); + }, + toggleCheck(item) { + item.checked = !item.checked; + if(item.checked && !this.selectedBills.some(b => b.id === item.id)) { + this.selectedBills.push(item); + }else{ + // 取消勾选时从已选数组移除 + this.selectedBills = this.selectedBills.filter(b => b.id !== item.id); + } + let sumFee = 0; + this.selectedBills.forEach(b => sumFee += b.amount); + this.sumAmount = sumFee; + }, + updateSelected() { + if (!Array.isArray(this.bills)) return; + this.selectedBills = this.bills.filter(b => b.checked); + }, + goPayTest(billList) { + if (!billList || billList.length === 0) return; + + // 模拟后台生成订单返回 + const order = { + timeStamp: String(Date.now()), // 时间戳 + nonceStr: Math.random().toString(36).substr(2, 15), // 随机字符串 + package: 'prepay_id=TEST1234567890', // 模拟预支付ID + signType: 'MD5', + paySign: 'TEST_SIGN', // 模拟签名 + }; + + // 调用微信支付接口（测试） + uni.requestPayment({ + ...order, + success: () => { + uni.showToast({ title: '支付成功（测试）', icon: 'success' }); + // 清空勾选状态 + billList.forEach(b => b.checked = false); + this.updateSelected(); + // 刷新列表（可选） + this.loadBills(); + }, + fail: () => { + uni.showToast({ title: '支付失败（测试）', icon: 'none' }); + } + }); + }, + async goPay(billList) { + if (!billList || billList.length === 0) return; + + try { + // 1. 请求后台生成订单 + const res = await uni.request({ + url: 'https://api.example.com/payments/create', + method: 'POST', + data: { + userId: this.userId, + bills: billList.map(b => b.id), + } + }); + + if (res[1].data.code !== 0) { + uni.showToast({ title: res[1].data.msg, icon: 'none' }); + return; + } + + const order = res[1].data.data; // 后台返回的支付参数 + + // 2. 调用微信支付 + uni.requestPayment({ + timeStamp: order.timeStamp, + nonceStr: order.nonceStr, + package: order.package, + signType: order.signType, + paySign: order.paySign, + success: () => { + uni.showToast({ title: '支付成功', icon: 'success' }); + // 更新勾选状态 + billList.forEach(b => b.checked = false); + this.updateSelected(); + // 刷新列表 + this.loadBills(); + }, + fail: () => { + uni.showToast({ title: '支付失败', icon: 'none' }); + } + }); + + } catch (error) { + console.error('支付请求失败', error); + uni.showToast({ title: '支付请求失败', icon: 'none' }); + } +}, + } }; diff --git a/static/login.mp4 b/static/login.mp4 new file mode 100644 index 0000000..6daad34 Binary files /dev/null and b/static/login.mp4 differ diff --git a/static/loginbg1.jpg b/static/loginbg1.jpg new file mode 100644 index 0000000..474021f Binary files /dev/null and b/static/loginbg1.jpg differ diff --git a/static/loginbg2.jpg b/static/loginbg2.jpg new file mode 100644 index 0000000..c99c793 Binary files /dev/null and b/static/loginbg2.jpg differ