|
@@ -1,6 +1,6 @@
|
|
<template>
|
|
<template>
|
|
- <div class="contains">
|
|
|
|
- <h1>年度个人额度</h1>
|
|
|
|
|
|
+ <div class="contains" v-loading="listLoading" element-loading-text="查询中,请稍等...">
|
|
|
|
+ <h1>e码头供应链-海关跨境电子商务年度个人额度查询</h1>
|
|
<div class="step-contains">
|
|
<div class="step-contains">
|
|
<el-steps simple space="20%">
|
|
<el-steps simple space="20%">
|
|
<el-step title="放置身份证" status="finish" icon="el-icon-postcard"></el-step>
|
|
<el-step title="放置身份证" status="finish" icon="el-icon-postcard"></el-step>
|
|
@@ -9,14 +9,40 @@
|
|
</el-steps>
|
|
</el-steps>
|
|
</div>
|
|
</div>
|
|
<div id="result">
|
|
<div id="result">
|
|
- <h1>查询结果</h1>
|
|
|
|
- <div>{{ name }}</div>
|
|
|
|
- <div>{{ idNo }}</div>
|
|
|
|
- <div>{{ totalAmount }}</div>
|
|
|
|
- <div>{{ innerbalance }}</div>
|
|
|
|
- <el-button type="primary" @click="limit_query()">
|
|
|
|
- 发起服务请求
|
|
|
|
- </el-button>
|
|
|
|
|
|
+ <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()">
|
|
|
|
+ 查 询
|
|
|
|
+ </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>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
@@ -28,11 +54,13 @@ export default {
|
|
name: 'YearLimit',
|
|
name: 'YearLimit',
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- listLoading: true,
|
|
|
|
|
|
+ listLoading: false,
|
|
name: null,
|
|
name: null,
|
|
idNo: null,
|
|
idNo: null,
|
|
totalAmount: null,
|
|
totalAmount: null,
|
|
- innerbalance: null,
|
|
|
|
|
|
+ innerBalance: null,
|
|
|
|
+ inceptionDate: null,
|
|
|
|
+ currentDate: null,
|
|
listQuery: {
|
|
listQuery: {
|
|
page: 1,
|
|
page: 1,
|
|
limit: 20,
|
|
limit: 20,
|
|
@@ -42,32 +70,49 @@ export default {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
|
|
+ mounted() {
|
|
|
|
+ this.inception_date()
|
|
|
|
+ this.current_date()
|
|
|
|
+ this.create_interval()
|
|
|
|
+ },
|
|
methods: {
|
|
methods: {
|
|
limit_query() {
|
|
limit_query() {
|
|
- this.listLoading = true
|
|
|
|
- getLimit().then(response => {
|
|
|
|
- console.log('str' + JSON.stringify(response))
|
|
|
|
- // do something
|
|
|
|
- if (!response.code) {
|
|
|
|
- this.$message.error('[10]查询失败')
|
|
|
|
- this.listLoading = false
|
|
|
|
- return
|
|
|
|
- }
|
|
|
|
- if (response.code !== '0') {
|
|
|
|
- this.$message.error(response.msg)
|
|
|
|
|
|
+ if (!this.listLoading) {
|
|
|
|
+ this.listLoading = true
|
|
|
|
+ getLimit().then(response => {
|
|
|
|
+ console.log('str' + JSON.stringify(response))
|
|
|
|
+ // do something
|
|
this.listLoading = false
|
|
this.listLoading = false
|
|
- return
|
|
|
|
- }
|
|
|
|
|
|
+ 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
|
|
|
|
- this.listLoading = false
|
|
|
|
- }).catch(error => {
|
|
|
|
- this.$message.error(error || '数据加载失败')
|
|
|
|
- this.listLoading = false
|
|
|
|
- })
|
|
|
|
|
|
+ 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 + '日'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -75,9 +120,66 @@ export default {
|
|
|
|
|
|
<style scoped>
|
|
<style scoped>
|
|
.contains {
|
|
.contains {
|
|
- text-align:center
|
|
|
|
|
|
+ text-align: center;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ h1 {
|
|
|
|
+ color: #1890ff;
|
|
}
|
|
}
|
|
.step-contains {
|
|
.step-contains {
|
|
- width: 60%;margin:0 auto;border:0px solid #000;
|
|
|
|
|
|
+ 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>
|
|
</style>
|