<template>
|
<div v-loading="loading">
|
<div class="info-block">
|
<p>客户名称：{{ customer.name }}</p>
|
<p>剩余金额(元)：{{ leftMoney }}</p>
|
<p>余额同步时间：{{ syncDate || '-' }}</p>
|
<p v-if="platformInfo">总电量：{{ platformInfo.left_money_y != null ? platformInfo.left_money_y : '-' }}</p>
|
</div>
|
<el-form label-width="120px" size="small">
|
<el-form-item label="充值金额">
|
<el-input-number
|
v-model="form.money"
|
class="money-input-number"
|
:min="0"
|
:precision="2"
|
:step="10"
|
controls-position="right"
|
placeholder="请输入金额"
|
/>
|
</el-form-item>
|
<el-form-item label="充值备注">
|
<el-input v-model="form.remark" maxlength="300" style="width: 400px"/>
|
</el-form-item>
|
</el-form>
|
<div class="footer-btns">
|
<el-button type="primary" :loading="isOperating" v-permissions="['business:ywcustomerrecharge:recharge']" @click="confirmRecharge">确认充值</el-button>
|
<el-button type="warning" plain :loading="isOperating" v-permissions="['business:ywcustomerrecharge:recharge']" @click="confirmClean">账户清零</el-button>
|
<el-button @click="loadInfo">刷新余额</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as api from '@/api/business/ywcustomerrecharge'
|
|
export default {
|
name: 'YwCustomerConditionerRechargePanel',
|
props: {
|
customer: { type: Object, default: () => ({}) }
|
},
|
data () {
|
return {
|
loading: false,
|
isOperating: false,
|
gsConfig: null,
|
platformInfo: null,
|
form: { money: 0, remark: '' }
|
}
|
},
|
computed: {
|
leftMoney () {
|
if (this.gsConfig && this.gsConfig.leftMoney != null) return this.gsConfig.leftMoney
|
return '-'
|
},
|
syncDate () {
|
return this.gsConfig && this.gsConfig.syncDate
|
}
|
},
|
mounted () {
|
this.loadInfo()
|
},
|
methods: {
|
loadInfo () {
|
this.loading = true
|
api.getConditionerRechargeInfo(this.customer.id)
|
.then(res => {
|
this.gsConfig = res.gsConfig || null
|
this.platformInfo = res.platformInfo || null
|
})
|
.catch(e => this.$tip.apiFailed(e))
|
.finally(() => { this.loading = false })
|
},
|
confirmRecharge () {
|
this.$dialog.actionConfirm('确认充值吗？', '操作确认')
|
.then(() => {
|
this.isOperating = true
|
return api.rechargeConditioner({
|
customerId: this.customer.id,
|
money: this.form.money,
|
remark: this.form.remark
|
})
|
})
|
.then(msg => {
|
this.$tip.success(msg || '充值成功')
|
this.form.money = 0
|
this.loadInfo()
|
this.$emit('success')
|
})
|
.catch(e => { if (e !== 'cancel') this.$tip.apiFailed(e) })
|
.finally(() => { this.isOperating = false })
|
},
|
confirmClean () {
|
this.$dialog.actionConfirm('确认清零空调账户吗？', '操作确认')
|
.then(() => {
|
this.isOperating = true
|
return api.cleanConditioner(this.customer.id)
|
})
|
.then(msg => {
|
this.$tip.success(msg || '清零成功')
|
this.loadInfo()
|
this.$emit('success')
|
})
|
.catch(e => { if (e !== 'cancel') this.$tip.apiFailed(e) })
|
.finally(() => { this.isOperating = false })
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.info-block p { margin: 4px 0; line-height: 26px; }
|
.footer-btns { text-align: right; margin-top: 16px; }
|
.footer-btns .el-button { margin-left: 8px; }
|
.money-input-number {
|
width: 220px !important;
|
}
|
.money-input-number ::v-deep .el-input {
|
width: 100% !important;
|
}
|
.money-input-number ::v-deep .el-input__inner {
|
height: 32px;
|
line-height: 32px;
|
text-align: left;
|
padding-left: 12px;
|
padding-right: 42px;
|
}
|
.money-input-number ::v-deep .el-input-number__increase,
|
.money-input-number ::v-deep .el-input-number__decrease {
|
width: 28px;
|
background: #f5f7fa;
|
border-left: 1px solid #dcdfe6;
|
}
|
.money-input-number ::v-deep .el-input-number__increase {
|
border-bottom: 1px solid #dcdfe6;
|
line-height: 15px;
|
}
|
.money-input-number ::v-deep .el-input-number__decrease {
|
line-height: 15px;
|
}
|
</style>
|
