95 lines
4.0 KiB
Vue
95 lines
4.0 KiB
Vue
<template>
|
||
<view class="hmb-page">
|
||
<view class="hmb-list">
|
||
<view class="hmb-card" v-for="b in bills" :key="b.id">
|
||
<view class="hmb-head">
|
||
<text class="hmb-no">{{ b.bill_no }}</text>
|
||
<text class="hmb-status" :class="b.pay_status === 1 ? 'status-warn' : b.pay_status === 2 ? 'status-ok' : ''">{{ statusText(b.pay_status) }}</text>
|
||
</view>
|
||
<view class="hmb-body" @tap="toContract(b)">
|
||
<image class="hmb-pic" :src="picUrl + (b.service_pic || '')" mode="aspectFill" />
|
||
<view class="hmb-info">
|
||
<view class="hmb-name">{{ b.service_name }}</view>
|
||
<view class="hmb-month">{{ b.bill_month }} 月度账单</view>
|
||
<view class="hmb-amount">¥{{ b.amount }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="hmb-foot">
|
||
<view class="hmb-link" @tap.stop="toContract(b)">查看合同 ›</view>
|
||
<view class="hmb-pay" v-if="b.pay_status === 1" @tap.stop="payBill(b)">去支付</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="bills.length === 0" class="hmb-empty">暂无待支付月账单</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { request, picUrl, NavgateTo } from '@/utils'
|
||
import { apiArr } from '@/api/homeService'
|
||
|
||
export default {
|
||
data() {
|
||
return { picUrl, bills: [] }
|
||
},
|
||
onShow() {
|
||
this.loadBills()
|
||
},
|
||
methods: {
|
||
loadBills() {
|
||
const userId = uni.getStorageSync('userId')
|
||
request(apiArr.userMonthlyBillList, 'POST', { user_id: userId, page_num: 1, page_size: 50 }, {}, false).then(res => {
|
||
this.bills = res.rows || []
|
||
})
|
||
},
|
||
statusText(payStatus) {
|
||
return payStatus === 1 ? '待支付' : payStatus === 2 ? '已支付' : payStatus === 3 ? '已退款' : ''
|
||
},
|
||
toContract(b) {
|
||
NavgateTo('/packages/homeService/contractDetail/index?id=' + b.contract_id)
|
||
},
|
||
payBill(b) {
|
||
const userId = uni.getStorageSync('userId')
|
||
request(apiArr.userMonthlyBillPreOrder, 'POST', { bill_id: b.id, user_id: userId, trans_type: '71' }).then(pay => {
|
||
uni.requestPayment({
|
||
provider: 'wxpay',
|
||
timeStamp: pay.timeStamp,
|
||
nonceStr: pay.nonceStr,
|
||
package: pay.package,
|
||
signType: pay.signType || 'RSA',
|
||
paySign: pay.paySign,
|
||
success: () => {
|
||
request(apiArr.userMonthlyBillTradeQuery, 'POST', { bill_id: b.id }, {}, false).finally(() => {
|
||
uni.showToast({ title: '支付成功', icon: 'none' })
|
||
this.loadBills()
|
||
})
|
||
},
|
||
fail: () => { uni.showToast({ title: '支付已取消', icon: 'none' }) }
|
||
})
|
||
}).catch(err => {
|
||
uni.showToast({ title: err.errMsg || '发起支付失败', icon: 'none' })
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.hmb-page { background: #f5f5f5; min-height: 100vh; padding: 20rpx; box-sizing: border-box; }
|
||
.hmb-list {}
|
||
.hmb-card { background: #fff; border-radius: 12rpx; padding: 20rpx; margin-bottom: 18rpx; border-left: 6rpx solid #FF370B; }
|
||
.hmb-head { display: flex; justify-content: space-between; align-items: center; font-size: 24rpx; color: #999; margin-bottom: 16rpx; }
|
||
.hmb-status { font-size: 26rpx; }
|
||
.status-warn { color: #FF9800; }
|
||
.status-ok { color: #4CAF50; }
|
||
.hmb-body { display: flex; }
|
||
.hmb-pic { width: 150rpx; height: 150rpx; border-radius: 8rpx; background: #f0f0f0; flex-shrink: 0; }
|
||
.hmb-info { flex: 1; margin-left: 18rpx; display: flex; flex-direction: column; }
|
||
.hmb-name { font-size: 30rpx; color: #222; font-weight: 600; }
|
||
.hmb-month { font-size: 24rpx; color: #666; margin-top: 8rpx; }
|
||
.hmb-amount { font-size: 32rpx; color: #FF370B; font-weight: 600; margin-top: auto; }
|
||
.hmb-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16rpx; }
|
||
.hmb-link { font-size: 24rpx; color: #666; }
|
||
.hmb-pay { background: linear-gradient(91deg, #FF7658, #FF370B); color: #fff; font-size: 26rpx; padding: 12rpx 40rpx; border-radius: 40rpx; margin-left: auto; }
|
||
.hmb-empty { text-align: center; color: #999; font-size: 26rpx; padding: 80rpx 0; }
|
||
</style> |