admin/RentWeAppFront
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整样式

Browse Source
This commit is contained in:
RuicyWu
2025-11-17 17:30:29 +08:00
parent 7ee926dc66
commit ab5c01bf5c
9 changed files with 643 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
pages/unpaid/unpaid.vue
View File

@@ -19,12 +19,12 @@
>
<!-- 左侧勾选 + 信息 -->
<view class="bill-left">
<u-checkbox
v-model="item.checked"
@change="updateSelected"
size="32"
active-color="#007aff"
/>
<u-checkbox
v-model="item.checked"
@change="toggleCheck(item)"
size="32"
active-color="#007aff"
/>
<view class="bill-info">
<text class="bill-name">{{ item.feeName }}</text>
<text class="bill-date">缴费截止：{{ item.dueDate }}</text>
@@ -34,12 +34,11 @@
<!-- 右侧金额 + 支付按钮 -->
<view class="bill-right">
<text class="amount">{{ formatMoney(item.amount) }}</text>
<u-button
size="small"
type="primary"
<button
class="pay-btn"
@click="goPayTest([item])"
>去支付</u-button>
>去支付
</button>
</view>
</view>
</view>
@@ -51,13 +50,16 @@
<u-loadmore :status="loadStatus" />
</scroll-view>
<!-- 底部批量支付栏 -->
<view v-if="selectedBills.length > 0" class="batch-pay-bar">
<text>已选 {{ selectedBills.length }} 项</text>
<u-button type="primary" size="small" @click="goPayTest(selectedBills)">
批量缴费
</u-button>
</view>
<!-- 底部批量支付栏 -->
<view v-if="selectedBills.length > 0" class="batch-pay-bar">
<view class="batch-pay-bar-left"><text>已选 {{ selectedBills.length }} 项</text></view>
<view class="batch-pay-bar-right">
<text class="sumAmount">{{ formatMoney(sumAmount) }}</text>
<button class="bottomPayBtn" color="linear-gradient(90deg, #007aff, #00aaff)" type="primary" size="small" @click="goPayTest(selectedBills)">
批量支付
</button>
</view>
</view>
</view>
</template>
@@ -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 });
});
}
}
}
};
</script>
@@ -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;