<template>
|
<view class="cu-page cu-page--with-footer cu-page--with-fab">
|
<view v-if="device" class="cu-recharge-hero cu-recharge-hero--electric">
|
<view class="cu-recharge-hero__gradient">
|
<view class="cu-recharge-hero__balance-block">
|
<text class="cu-recharge-hero__balance-label">当前账户余额（元）</text>
|
<text :class="['cu-recharge-hero__balance-value', balanceTone ? 'cu-recharge-hero__balance-value--' + balanceTone : '']">{{ balanceText }}</text>
|
</view>
|
</view>
|
<view class="cu-recharge-hero__panel">
|
<view class="cu-recharge-hero__device">
|
<view class="cu-recharge-hero__icon cu-recharge-hero__icon--electric">⚡</view>
|
<view class="cu-recharge-hero__device-main">
|
<view class="cu-recharge-hero__title-row">
|
<view class="cu-recharge-hero__title-wrap">
|
<text class="cu-recharge-hero__title">{{ device.deviceName || '电表' }}</text>
|
</view>
|
<text :class="['cu-recharge-hero__status', device.statusCode === 1 ? 'cu-recharge-hero__status--ok' : 'cu-recharge-hero__status--bad']">{{ device.statusText || '未知' }}</text>
|
</view>
|
<text class="cu-recharge-hero__sub">{{ device.roomInfo || '暂无房间信息' }}</text>
|
</view>
|
</view>
|
<view class="cu-recharge-hero__meta">
|
<view class="cu-recharge-hero__meta-item">
|
<text class="cu-recharge-hero__meta-label">电表地址</text>
|
<text class="cu-recharge-hero__meta-value">{{ device.meterAddress || '-' }}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="cu-pay-amount-box">
|
<view class="cu-pay-amount-box__label">充值金额</view>
|
<view class="cu-pay-amount-box__input-wrap">
|
<text class="cu-pay-amount-box__symbol">¥</text>
|
<input v-model="amount" class="cu-pay-amount-box__input" type="digit" placeholder="0.00" />
|
</view>
|
<view class="cu-quick-amounts">
|
<text
|
v-for="q in quickAmounts"
|
:key="q"
|
:class="['cu-quick-amount', String(amount) === String(q) ? 'cu-quick-amount--active' : '']"
|
@click="amount = String(q)"
|
>{{ q }}元</text>
|
</view>
|
<view class="cu-pay-amount-box__remark">
|
<text class="cu-pay-amount-box__remark-label">备注</text>
|
<input v-model="remark" placeholder="选填" />
|
</view>
|
</view>
|
|
<view class="cu-page-footer">
|
<view class="cu-btn cu-btn--primary" @click="submit">确认充值{{ amount ? ' ¥' + amount : '' }}</view>
|
</view>
|
<cu-workbench-fab />
|
</view>
|
</template>
|
|
<script>
|
import { customerDeviceDetail, customerPayCreate } from '@/api'
|
import { invokeWxPay } from '@/utils/wxpay.js'
|
import { getBalanceTone } from '@/utils/utils.js'
|
export default {
|
data () {
|
return {
|
deviceId: null,
|
device: null,
|
amount: '',
|
remark: '',
|
quickAmounts: [50, 100, 200, 500]
|
}
|
},
|
onLoad (q) { this.deviceId = q.id; this.load() },
|
computed: {
|
balanceText () {
|
if (!this.device || this.device.balance === null || this.device.balance === undefined || this.device.balance === '') return '-'
|
const n = Number(this.device.balance)
|
return Number.isNaN(n) ? this.device.balance : n.toFixed(2)
|
},
|
balanceTone () {
|
return getBalanceTone(this.device && this.device.balance)
|
}
|
},
|
methods: {
|
load () {
|
customerDeviceDetail({ deviceType: 0, deviceId: this.deviceId }).then(res => { this.device = res.data })
|
},
|
submit () {
|
if (!this.amount) return uni.showToast({ title: '请输入金额', icon: 'none' })
|
customerPayCreate({
|
orderType: 0,
|
electricalId: Number(this.deviceId),
|
amount: Number(this.amount),
|
remark: this.remark,
|
openid: this.$store.state.openId
|
}).then(async res => {
|
try {
|
await invokeWxPay(res.data)
|
uni.redirectTo({ url: `/pages/customer/pay/result?success=1&orderNo=${res.data.orderNo}&type=recharge` })
|
} catch (e) {
|
uni.redirectTo({ url: `/pages/customer/pay/result?success=0&orderNo=${res.data.orderNo}&type=recharge` })
|
}
|
})
|
}
|
}
|
}
|
</script>
|
