47 lines
1.4 KiB
JavaScript
47 lines
1.4 KiB
JavaScript
Vue.component("pay-method-selector", {
|
||
mounted: function () {
|
||
this.$emit("change", this.currentMethodCode)
|
||
|
||
let that = this
|
||
Tea.action("/finance/methodOptions")
|
||
.success(function (resp) {
|
||
that.isLoading = false
|
||
that.balance = resp.data.balance
|
||
that.methods = resp.data.methods
|
||
that.canPay = resp.data.enablePay
|
||
})
|
||
.post()
|
||
},
|
||
data: function () {
|
||
return {
|
||
isLoading: true,
|
||
canPay: true,
|
||
balance: 0,
|
||
methods: [],
|
||
currentMethodCode: "@balance"
|
||
}
|
||
},
|
||
methods: {
|
||
selectMethod: function (method) {
|
||
this.currentMethodCode = method.code
|
||
this.$emit("change", method.code)
|
||
}
|
||
},
|
||
template: `<div>
|
||
<div class="methods-box" v-if="!isLoading && canPay">
|
||
<div class="method-box" @click.prevent="selectMethod({'code':'@balance'})">
|
||
<radio name="methodCode" :value="'@balance'" :v-value="'@balance'">余额支付 <span class="grey small">（{{balance}}元）</span></radio>
|
||
<p class="comment">使用余额支付</p>
|
||
</div>
|
||
<div class="method-box" :class="{active: currentMethodCode == method.code}" v-for="method in methods" @click.event="selectMethod(method)">
|
||
<radio name="methodCode" :value="method.code" :v-value="method.code" v-model="currentMethodCode">{{method.name}}</radio>
|
||
<p class="comment">{{method.description}}</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="!isLoading && !canPay">
|
||
暂时不支持线上支付，请联系客服购买。
|
||
</div>
|
||
|
||
</div>`
|
||
}) |