申请提现

 export default function() {
   return {
     form: '',
+    showLoading: true,
     data: {
       seasons: '',
       productIntro: '',

@@ -4,15 +4,25 @@
       <Form-item label="店铺名称">
         <span>{{ data.shopName }}</span>
       </Form-item>
-      <Form-item label="可提现金额">
-        <span>{{ data.availableAmount }}</span
-        ><br /><span class="red">*支付宝每日转账最高限额10万元人民币，单日超过10万人民币限额的，请联系平台客服</span>
+      <Form-item label="可提现金额(元)">
+        <span>{{ data.availableAmount }}</span>
+        <br />
+        <span class="red">*支付宝每日转账最高限额10万元人民币，单日超过10万人民币限额的，请联系平台客服</span>
       </Form-item>
       <Form-item label="提现方式">
-        <span>{{ data.type }}</span>
+        <span>最大可提现</span><span>{{ formatDate(data.billBeginTime) }}</span
+        >~<span>{{ formatDate(data.billEndTime) }}</span
+        ><br /><span>请选择账单日期</span
+        ><Date-picker
+          :value="data.range"
+          type="datetimerange"
+          format="yyyy-MM-dd"
+          placeholder="选择日期时间"
+          @on-change="clickAvailableDate"
+        />
       </Form-item>
       <Form-item label="提现金额">
-        <span>{{ data.availableAmount }}</span>
+        <input :value="data.availableAmount" placeholder="请输入..." />
       </Form-item>
       <Form-item label="提现到帐号">
         <span>{{ data.withdrawAccount }}</span>
@@ -20,14 +30,11 @@
       <Form-item label="账号名称">
         <span>{{ data.withdrawAccountName }}</span>
       </Form-item>
-      <Form-item label="账号名称">
-        <span>{{ data.withdrawAccountName }}</span>
-      </Form-item>
       <Form-item label="备注">
         <span>{{ data.remark }}</span>
       </Form-item>
       <Form-item>
-        <Button id="btnSubmit" type="primary" size="large" @click="submit">确认提现</Button>
+        <Button id="btnSubmit" type="primary" size="large" @click="save">确认提现</Button>
         <Button type="primary" size="large">联系客服</Button>
         <Button id="cancel" type="primary" size="large">联系客服</Button>
       </Form-item>
@@ -36,6 +43,8 @@
 </template>
 
 <script>
+import _ from 'lodash';
+import moment from 'moment';
 import FinanceService from 'services/finance/finance-service';
 import { WithdrawApply } from './store';
 
@@ -70,12 +79,111 @@ export default {
         }
       });
     },
+    validateWithdrawApply() {
+      return new Promise(resolve => {
+        this.$refs.data.validate(valid => {
+          if (valid) {
+            resolve(true);
+          } else {
+            resolve(false);
+          }
+        });
+      });
+    },
+    beforeSave() {
+      const newApply = {};
+      newApply.availableAmount = this.data.availableAmount;
+      newApply.applyType = this.data.applyType;
+      newApply.beginTime = this.data.beginTime;
+      newApply.endTime = this.data.endTime;
+      newApply.applyAmount = this.data.applyAmount;
+      newApply.targetAccount = this.data.targetAccount;
+      newApply.remarks = this.data.remarks;
+      newApply.timestamp = this.data.timestamp;
+      newApply.token = this.data.token;
+      newApply.sign = this.data.sign;
+      return newApply;
+    },
+    save() {
+      const newApply = this.beforeSave();
+      this.$Loading.start();
+      return this.financeService.shopWithdrawApply(newApply).then(result => {
+        if (result.code === 200) {
+          this.$Loading.finish();
+          this.$Notice.success({
+            title: '提交成功',
+            desc: '确认提现成功！',
+          });
+          this.go(this.from);
+        } else {
+          this.$Loading.error();
+          this.$Notice.error({
+            title: '提交错误',
+            desc: result.message,
+          });
+        }
+      });
+    },
     submit() {
-      this.getInfo();
+      this.validateWithdrawApply()
+        .then(([r1, r2]) => {
+          if (r1 & r2) {
+            return Promise.resolve();
+          } else {
+            this.$Message.error('请填写必填项');
+            return Promise.reject();
+          }
+        })
+        .then(this.save)
+        .catch(() => this.$Loading.error());
     },
     refresh() {
       this.getInfo();
     },
+    formatDate(date) {
+      if (date) {
+        return moment.unix(date).format('YYYY-MM-DD');
+      }
+    },
+    clickAvailableDate(time) {
+      if (!_.isArray(time)) {
+        time = time.split(' - ');
+      }
+      if ((time[0] + '').length) {
+        const billBeginStr = moment.unix(this.data.billBeginTime).format('YYYY-MM-DD');
+        const billEndStr = moment.unix(this.data.billEndTime).format('YYYY-MM-DD');
+        if (time[0] < billBeginStr || time[1] > billEndStr) {
+          this.data.beginTime = '';
+          this.data.endTime = '';
+          this.$Notice.error({
+            title: '时间选择错误',
+            desc: '请选择范围内时间',
+          });
+        }
+        this.data.beginTime = time[0];
+        this.data.endTime = time[1];
+        this.getAvailableAmount();
+      } else {
+        this.data.beginTime = '';
+        this.data.endTime = '';
+      }
+    },
+    getAvailableAmount() {
+      const params = {};
+      params.beginTime = this.data.beginTime;
+      params.endTime = this.data.endTime;
+      this.financeService.shopGetAvailableAmount(params).then(result => {
+        if (result.code === 200) {
+          this.data.availableAmount = result.availableAmount;
+        } else {
+          this.$Loading.error();
+          this.$Notice.error({
+            title: '查询错误',
+            desc: result.message,
+          });
+        }
+      });
+    },
   },
 };
 </script>
@@ -115,5 +223,9 @@ export default {
       z-index: 1002;
     }
   }
+
+  .red {
+    color: red;
+  }
 }
 </style>