idcard_reader_web/appfront/src/views/limit/index.vue

<template>
  <div class="contains" v-loading="listLoading" element-loading-text="查询中，请稍等...">
    <h1>e码头供应链-海关跨境电子商务年度个人额度查询</h1>
    <div class="step-contains">
      <el-steps simple space="20%">
        <el-step title="放置身份证" status="finish" icon="el-icon-postcard"></el-step>
        <el-step title="点击查询" status="finish" icon="el-icon-thumb"></el-step>
        <el-step title="查询结果" status="finish" icon="el-icon-tickets"></el-step>
      </el-steps>
    </div>
    <div id="result">
      <h3>自{{ inceptionDate }}00:00起，至{{ currentDate }}24:00，您的个人额度如下：</h3>
      <table>
        <tbody>
          <tr>
            <td class="title">姓名：</td>
            <td class="value">
              <div>{{ name }}</div>
            </td>
            <td rowspan="4">
              <el-button id="button" type="primary" @click="limit_query()">
                查&nbsp;&nbsp;&nbsp;&nbsp;询
              </el-button>
            </td>
          </tr>
          <tr>
            <td class="title">身份证号：</td>
            <td class="value">
              <div>{{ idNo }}</div>
            </td>
          </tr>
          <tr>
            <td class="title">本年已用金额：</td>
            <td class="value">
              <div id="red">{{ totalAmount }}</div>
            </td>
          </tr>
          <tr>
            <td class="title">本年可用金额：</td>
            <td class="value">
              <div id="green">{{ innerBalance }}</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { getLimit } from '@/api/limit'

export default {
  name: 'YearLimit',
  data() {
    return {
      listLoading: false,
      name: null,
      idNo: null,
      totalAmount: null,
      innerBalance: null,
      inceptionDate: null,
      currentDate: null,
      listQuery: {
        page: 1,
        limit: 20,
        // 如下为搜索栏字段
        // 根据实际配置
        someParam: undefined
      }
    }
  },
  mounted() {
    this.inception_date()
    this.current_date()
    this.create_interval()
  },
  methods: {
    limit_query() {
      if (!this.listLoading) {
        this.listLoading = true
        getLimit().then(response => {
          console.log('str' + JSON.stringify(response))
          // do something
          this.listLoading = false
          if (!response.code) {
            this.$message.error('[10]查询失败')
            return
          }
          if (response.code !== '0') {
            this.$message.error(response.msg)
            return
          }

          this.name = response.rows[0].data.name
          this.idNo = response.rows[0].data.id_no
          this.totalAmount = response.rows[0].data.total_amount + '元'
          this.innerBalance = response.rows[0].data.innerbalance + '元'
        }).catch(error => {
          this.$message.error(error || '数据加载失败')
          this.listLoading = false
        })
      }
    },
    inception_date() {
      var date = new Date()
      var year = date.getFullYear()
      this.inceptionDate = year + '年1月1日'
    },
    current_date() {
      var date = new Date()
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      this.currentDate = year + '年' + month + '月' + strDate + '日'
    }
  }
}
</script>

<style scoped>
  .contains {
    text-align: center;
  }

  h1 {
    color: #1890ff;
  }
  .step-contains {
    width: 60%;
    margin: 0 auto;
    padding: 3% 0;
    border: 0px solid #000;
  }
  #result {
    width: 50%;
    margin: 0 auto;
  }
  h3 {
    font-weight: normal;
  }
  table {
    font-size: 18px;
    width: 90%;
    margin: 5% auto;
  }
  table td {
    height: 50px;
    position: relative;
    display: table-cell;
    padding: 0.2% 0;
  }
  table td.title {
    text-align: right;
    padding: 0 2% 0 0;
    width: 25%;
  }
  table td.value {
    width: 30%;
  }
  table td div {
    width: 100%;
    height: 30px;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    border: solid 1px silver;
    padding-top: 9px;
  }
  table td.value #red {
    color: red;
  }
  table td.value #green {
    color: green;
  }
  table td.value {
    width: 30%;
  }
  #button {
    width: 100px;
    height: 120px;
    margin: 0 50% 0 0;
    font-size: 16px;
  }
</style>