[Java Script][Vue.js]充值頁面

<template>
  <div id="charge">
  <el-card class="box-card">
     <ul class="msg-box">
      <li>
        <h4>充值</h4>
      </li>
      <li>
          <h4 style="margin-bottom: 15px;">充值金額</h4>
            <el-radio-group v-model="amountVal" @change="amountChange">
                <el-radio border :label="''+ 20">20</el-radio>
                <el-radio border :label="''+ 50">50</el-radio>
                <el-radio border :label="''+ 100">100</el-radio>
                <el-radio border :label="''+ 200">200</el-radio>
                <el-radio border :label="''">自訂</el-radio>
            </el-radio-group>
      </li>
      <li>
          <h4 style="margin-bottom: 15px;">支付方式</h4>
            <el-radio-group v-model="rechargeParams.paymentType" @change="paymentTypeChange">
                <el-radio border :label="''+ 0">xxx</el-radio>
                <el-radio border :label="''+ 1">xxxxx</el-radio>
            </el-radio-group>
      </li>
      <li>
          <h4 style="margin-bottom: 15px;">充值金額</h4>
          <el-input :disabled="disabled" clearable v-model="rechargeParams.amount" placeholder="請輸入金額" style="width: 150px;"></el-input>
      </li>
    </ul>
    <div style="text-align: center; margin-top: 30px;">
      <el-button type="primary" @click="surePay">確認支付</el-button>
    </div>
  </el-card>
  </div>
</template>

<script>
// 引入axios
import axios from 'axios'

export default {
  data () {
    return {
      amountVal: '',
      disabled: false,
      // 充值交易參數
      rechargeParams: {
        'userId': this.$route.query.userId, // 取得用戶ID
        'amount': '', // 金額
        'currency': '', // 幣別
        'paymentType': '1', // 支付方式[0:xxx,1:xxxxx]
      }
    }
  },
  methods: {
    // 充值金額處理函數
    amountChange: function (val) {
      this.rechargeParams.amount = val
      if (val == '') {
        this.disabled = false
      } else {
        this.disabled = true
      }
    },
    // 支付方式處理函數
    paymentTypeChange: function (val) {
      this.rechargeParams.paymentType = val
    },
    // 確認支付按鈕事件觸發函數
    async surePay () {
      // eslint-disable-next-line eqeqeq
      if (this.rechargeParams.amount == '') {
        this.$message.warning('請輸入金額!')
        return
      }
      // 呼叫交易服務
      const res = await axios.post('/api/account/chargeOrder', this.rechargeParams)
      const {
        code,
        message,
        data
      } = res.data
      if (code === 0) {
        if (this.rechargeParams.paymentType == '0') {
          this.$message.success('xxx支付')
        } else if (this.rechargeParams.paymentType == '1') {
          this.$message.success('xxxxx支付')
        }
      } else if (code === 401) {
        this.$message.error(message)
        this.$router.push({
          name: 'login'
        })
      } else {
        this.$message.error(message)
      }
    },
  }
}
</script>

<style scoped>
#charge {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  margin-top: 0px;
}
/* 信息列表样式 */
.msg-box > li {
  list-style: none;
    border-bottom: 1px solid #c5c5c5;
    padding: 20px 10px;
}
</style>