Browse Source

添加银行卡、提现功能

@dongkboy 2 years ago
parent
commit
5d153f6095

+ 26 - 0
src/http/moudules/letter.js

@@ -965,3 +965,29 @@ export const Bankdelete = (id) => {
     method: "delete",
   })
 }
+//绑定银行卡
+
+export const insertByBankNumber = (data) => {
+  return axios({
+    url: "/userBank/insertByBankNumber",
+    method: "post",
+    data
+  })
+}
+//获取推广费分销详情
+
+export const getSubOrderDetails = (id) => {
+  return axios({
+    url: "/sysUserAccount/getSubOrderDetails?subOrderId="+id,
+    method: "get",
+  })
+}
+//提现
+
+export const withdrawalRequest = (data) => {
+  return axios({
+    url: "/sysUserAccount/insert",
+    method: "post",
+    data
+  })
+}

+ 372 - 14
src/views/Letter/Wallet/AmountManagement.vue

@@ -2,8 +2,8 @@
 <template>
   <div id="body">
     <!-- 模板内容 -->
-    <div  class="flex a-c">
-      <el-button  size="small" type="primary" icon="el-icon-arrow-left" @click="back">
+    <div class="flex a-c">
+      <el-button size="small" type="primary" icon="el-icon-arrow-left" @click="back">
         返回
       </el-button>
       <h2 style="display: inline-block;margin-left: 20px;">{{ pageTitle }}</h2>
@@ -18,7 +18,7 @@
                 MoneyData.handlingFee }}</span>
               <span v-else>0.00</span>
             </div>
-            <el-button type="primary" size="small">提现</el-button>
+            <el-button type="primary" size="small" @click="withdrawalVisible = true">立即提现</el-button>
           </div>
           <div class="flex f-c a-c j-s">
             <span>预收金额(元)</span>
@@ -40,10 +40,11 @@
           <div class="flex a-end j-s sum">
             <div class="flex f-c a-start j-s">
               <span>可提现(元)</span>
-              <span v-if="MoneyData.documentary" style="font-size: 28px;font-weight: bold;color: #333;">{{ MoneyData.documentary }}</span>
+              <span v-if="MoneyData.documentary" style="font-size: 28px;font-weight: bold;color: #333;">{{
+                MoneyData.documentary }}</span>
               <span v-else>0.00</span>
             </div>
-            <el-button type="primary" size="small">提现</el-button>
+            <el-button type="primary" size="small" @click="withdrawalVisible = true">立即提现</el-button>
           </div>
           <div class="flex f-c a-c j-s">
             <span>预收金额(元)</span>
@@ -67,11 +68,12 @@
           <div class="flex a-end j-s sum">
             <div class="flex f-c a-start j-s">
               <span>可提现(元)</span>
-              <span v-if="MoneyData.promotion" style="font-size: 28px;font-weight: bold;color: #333;">{{ MoneyData.promotion }}</span>
-            <span v-else>0.00</span>
+              <span v-if="MoneyData.promotion" style="font-size: 28px;font-weight: bold;color: #333;">{{
+                MoneyData.promotion }}</span>
+              <span v-else>0.00</span>
 
             </div>
-            <el-button type="primary" size="small">提现</el-button>
+            <el-button type="primary" size="small" @click="withdrawalVisible = true">立即提现</el-button>
           </div>
           <div class="flex f-c a-c j-s">
             <span>预收金额(元)</span>
@@ -134,13 +136,93 @@
         </template>
         <el-table-column label="操作" align="center" width="200" fixed="right">
           <template slot-scope="scope">
-            <el-button size="small" type="primary" @click="OrderDetails(scope.$index, scope.row)">编辑</el-button>
+            <el-button v-if="[0, 1].includes(formQuery.auditingStatus) && ['1', '2'].includes(formQuery.amountStatus)"
+              size="small" type="primary" @click="OrderDetails(scope.$index, scope.row)">详情</el-button>
+            <el-button size="small" type="primary" @click="regularDetails(scope.$index, scope.row)">详情</el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
     <!-- 车辆报价新页面 -->
     <detailsDialog ref="detailsDialog" :orderInfo.sync="orderInfo" :Feepermissions="false"></detailsDialog>
+    <el-dialog title="账单详情" :visible.sync="detailsVisible" width="28%">
+      <div class="dialogCentent flex f-c j-s">
+        <template v-if="[2, 3].includes(formQuery.auditingStatus)">
+          <span v-if="orderDetail.id">交易编号: <span style="color: #333;">{{ orderDetail.id }}</span> </span>
+          <span v-if="orderDetail.createTime">申请时间: <span style="color: #333;">{{ orderDetail.createTime }}</span> </span>
+          <span v-if="formQuery.auditingStatus == '3' && orderDetail.paytime">到账时间: <span style="color: #333;">{{
+            orderDetail.paytime }}</span> </span>
+          <span v-if="orderDetail.bankNumber">提现账户: <span style="color: #333;">{{ orderDetail.bankNumber }}</span> </span>
+          <span v-if="orderDetail.bankAccount">提现银行 <span style="color: #333;">{{ orderDetail.bankAccount }}</span>
+          </span>
+          <span>交易编号: <span style="color: #333;">{{ orderDetail.id }}</span> </span>
+          <span>交易编号: <span style="color: #333;">{{ orderDetail.id }}</span> </span>
+        </template>
+        <template v-if="formQuery.amountStatus == '3' && [0, 1].includes(formQuery.auditingStatus)">
+          <div class="totalsum flex f-c a-c">
+            <span>金额</span>
+            <span>{{ tuiguangDetails.willAmount }}</span>
+          </div>
+          <span v-if="tuiguangDetails.subOrderId">订单编号: <span style="color: #333;">{{ tuiguangDetails.subOrderId }}</span>
+          </span>
+          <span v-if="tuiguangDetails.signingTime">承保时间: <span style="color: #333;">{{ tuiguangDetails.signingTime
+          }}</span> </span>
+          <span v-if="tuiguangDetails.licenseNo">车牌号: <span style="color: #333;">{{ tuiguangDetails.licenseNo }}</span>
+          </span>
+          <span v-if="tuiguangDetails.jypremium">驾意险: <span style="color: #333;">{{ tuiguangDetails.jypremium }}</span>
+          </span>
+          <span v-if="tuiguangDetails.jqpremium">交强险: <span style="color: #333;">{{ tuiguangDetails.jqpremium }}</span>
+          </span>
+          <span v-if="tuiguangDetails.sypremium">商业险: <span style="color: #333;">{{ tuiguangDetails.sypremium }}</span>
+          </span>
+          <span v-if="tuiguangDetails.agentName">代理人姓名: <span style="color: #333;">{{ tuiguangDetails.agentName }}</span>
+          </span>
+          <span v-if="tuiguangDetails.agentLevel">代理人级别: <span style="color: #333;">{{ tuiguangDetails.agentLevel
+          }}</span> </span>
+        </template>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="detailsVisible = false">取 消</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="提现" :visible.sync="withdrawalVisible" width="50%">
+      <div class="flex j-s a-start">
+        <div class="dialoglist">
+          <div class="data flex  a-c j-start" v-for="val in cardPackList" :key="val.id" @click="bankselection(val)">
+            <div class="checked">
+              <img v-if="val.id == bankCardInfo.id" src="../../../../static/bankchecked.png" alt="">
+            </div>
+            <div class="logo flex j-c a-c">
+              <img :src="val.logo" alt="">
+            </div>
+            <div class="flex f-c j-s">
+              <span style="font-size: 16px;color: #333;">{{ val.bankAccount }}储蓄卡({{ val.bankNumber.slice(-4) }})</span>
+              <span style="font-size: 14px;color: rgba(51,51,51,0.6);">72小时到账</span>
+            </div>
+          </div>
+        </div>
+        <div class="dialoginput">
+          <h3>提现金额</h3>
+          <div style="border-bottom: 1px solid #999;" class="flex ">
+            <span style="font-size: 45px;font-weight: bold;color: #333;">¥</span>
+            <input type="text" class="no-border" @input="suminput">
+          </div>
+          <div class="" style="padding:10px">
+            <span v-if="is_out" style="color: red;">输入金额超过可提现金额,账户余额{{ MoneyData.handlingFee }}元</span>
+            <span v-else-if="is_lowest" style="color: red;">最低{{ lowest }}元起提现,账户余额{{ MoneyData.handlingFee }}元</span>
+            <template v-else>
+              <span class="amountHint">当前可提现余额{{ MoneyData.handlingFee }}元</span>
+              <span class="allHint" @click="">全部提现</span>
+            </template>
+
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="withdrawalVisible = false">取 消</el-button>
+        <el-button size="small" type="danger" :disabled="!is_post" @click="withdrawalRequest">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 <!-- 行为区域 -->
@@ -156,8 +238,18 @@ export default {
   // 数据存放区域
   data() {
     return {
+      is_out: false,
+      is_lowest: false,
+      is_post: false,
+      lowest: 20,
+      extract: 0,
+      bankCardInfo: {},
+      withdrawalVisible: false,//提现弹窗
+      detailsVisible: false,//详情弹窗
       pageResult: [],
       preReceivedPageResult: [],
+      orderDetail: {},//提现详情
+      tuiguangDetails: {},//推广预收/实收详情
       datetime: '',
       Columns: [
         //数据列
@@ -202,7 +294,7 @@ export default {
       },
       ],
       MoneyData: {},
-      pageTitle:"",
+      pageTitle: "",
       orderInfo: {
         //选中的订单
         ownerinfo: {},
@@ -215,6 +307,68 @@ export default {
         orderCommissionVo: {},
         extendInfo: {}
       },
+      cardPackList: [],//银行卡数据
+      bankList: [{
+        bankName: "中国邮政储蓄银行",
+        logo: "../../../../static/bankLogo/youzheng.png",
+        background: "linear-gradient(90deg, rgba(79, 136, 69, 0.7) 0%, #4f8845 100%)"
+      },
+      {
+        bankName: "中国工商银行",
+        logo: "../../../../static/bankLogo/gongshang.png",
+        background: "linear-gradient(90deg, rgba(177, 0, 13, 0.7) 0%, #b1000d 100%)"
+      },
+      {
+        bankName: "中国农业银行",
+        logo: "../../../../static/bankLogo/nongye.png",
+        background: "linear-gradient(90deg, rgba(86,152, 130, 0.7) 0%, #569882 100%)"
+      },
+      {
+        bankName: "中国银行",
+        logo: "../../../../static/bankLogo/zhongguo.png",
+        background: "linear-gradient(90deg, rgba(157, 32, 40, 0.7) 0%, #9d2028 100%)"
+      },
+      {
+        bankName: "中国建设银行",
+        logo: "../../../../static/bankLogo/jianshe.png",
+        background: "linear-gradient(90deg, rgba(6, 89, 159, 0.7) 0%, #06569F 100%)"
+      },
+      {
+        bankName: "招商银行",
+        logo: "../../../../static/bankLogo/zhaoshang.png",
+        background: "linear-gradient(90deg, rgba(197, 0, 25, 0.7) 0%, #c50019 100%)"
+      },
+      {
+        bankName: "中国民生银行",
+        logo: "../../../../static/bankLogo/minsheng.png",
+        background: "linear-gradient(90deg, rgba(84,149, 92, 0.7) 0%, #54955c 100%)"
+      },
+      {
+        bankName: "中国光大银行",
+        logo: "../../../../static/bankLogo/guangda.png",
+        background: "linear-gradient(90deg, rgba(93, 30, 131, 0.7) 0%, #5d1e83 100%)"
+      },
+      {
+        bankName: "中信银行",
+        logo: "../../../../static/bankLogo/zhongxin.png",
+        background: "linear-gradient(90deg, rgba(184, 0,22, 0.7) 0%, #b80016 100%)"
+      },
+      {
+        bankName: "华夏银行",
+        logo: "../../../../static/bankLogo/huaxia.png",
+        background: "linear-gradient(90deg, rgba(216, 12, 24, 0.7) 0%, #d80c18 100%)"
+      },
+      {
+        bankName: "中国交通银行",
+        logo: "../../../../static/bankLogo/jiaotong.png",
+        background: "linear-gradient(90deg, rgba(33, 58, 120, 0.7) 0%, #213a78 100%)"
+      },
+      {
+        bankName: "晋商银行",
+        logo: "../../../../static/bankLogo/jinshang.png",
+        background: "linear-gradient(90deg, rgba(224, 150, 165, 0.7) 0%, #e096a5 100%)"
+      },
+      ],
     }
   },
   // 生命周期函数
@@ -222,14 +376,14 @@ export default {
     this.formQuery.amountStatus = this.$route.query.type;
     switch (this.formQuery.amountStatus) {
       case 1:
-        this.pageTitle="手续金额"
+        this.pageTitle = "手续金额"
         break;
       case 2:
-      this.pageTitle="跟单金额"
+        this.pageTitle = "跟单金额"
 
         break;
       case 3:
-      this.pageTitle="推广金额"
+        this.pageTitle = "推广金额"
 
         break;
     }
@@ -237,9 +391,119 @@ export default {
     this.datetime = this.transformTime();
     this.allamount();
     this.FindPage();
+    this.banklist();
   },
   // 方法函数
   methods: {
+    withdrawalRequest() {
+      let params = {
+        amount: this.extract,
+        amountStatus: this.formQuery.amountStatus,
+        fromBankCardId: this.bankCardInfo.id,
+      }
+      this.$api.letter.withdrawalRequest(params).then((res) => {
+        if (res.code == '200') {
+          this.$message({
+            type: 'success',
+            message: "提现成功",
+          });
+          this.allamount();
+          this.FindPage();
+          this.withdrawalVisible=false;
+        } else {
+          this.$message({
+            type: 'error',
+            message: res.msg,
+          });
+        }
+      });
+    },
+    suminput(e) {
+      if (e.data) {
+        this.extract = this.extract * 10 + parseInt(e.data);
+        console.log(this.extract)
+        this.checkMoney();
+      } else {
+        if (this.extract && this.extract > 0) {
+          let val = parseInt(this.extract / 10);
+          this.extract = val;
+          console.log(this.extract)
+          this.checkMoney();
+        }
+      }
+
+    },
+    checkMoney() {
+      if (!this.extract || this.extract < this.lowest) {
+        this.is_lowest = true;
+        this.is_post = false;
+      } else if (this.extract > this.MoneyData.handlingFee) {
+        this.is_out = true;
+        this.is_lowest = false;
+        this.is_post = false;
+      } else {
+        this.is_out = false;
+        this.is_lowest = false;
+        this.is_post = true;
+      }
+      if (parseFloat(this.extract).toString() == 'NaN') {
+        this.is_post = false;
+        this.$message({
+            type: 'error',
+            message: '输入金额不合法',
+          });
+      }
+    },
+    bankselection(data) {
+      this.bankCardInfo = data;
+    },
+    banklist() {
+      this.$api.letter.getUserBankList().then((res) => {
+        if (res.code == '200') {
+          this.bankList.map(val => {
+            res.data.map(ele => {
+              if (val.bankName == ele.bankAccount) {
+                ele.logo = val.logo;
+                return ele;
+              }
+            })
+          })
+          this.cardPackList = res.data;
+          let bankinfo = res.data.find(val => val.isDefault == 1)
+          if (bankinfo) {
+            this.bankCardInfo = bankinfo;
+          } else {
+            this.bankCardInfo = res.data[0]
+          }
+        } else {
+          this.$message({
+            type: 'error',
+            message: res.msg,
+          });
+        }
+      });
+    },
+    regularDetails(index, row) {
+      if (this.formQuery.amountStatus == "3" && [1, 2].includes(this.searchType)) {
+        this.$api.letter.getSubOrderDetails(row.id).then((res) => {
+          if (res.code == '200') {
+            this.tuiguangDetails = res.data;
+            this.tuiguangDetails.willAmount = row.willAmount;
+            this.detailsVisible = true;
+          } else {
+            this.$message({
+              type: 'error',
+              message: res.msg,
+            });
+          }
+        });
+      } else {
+        let obj = Object.assign({}, row);
+        this.orderDetail = obj;
+        this.detailsVisible = true;
+      }
+
+    },
     OrderDetails(index, row) {
       for (let i = 0; i < this.global.insureList.length; i++) {
         this.global.insureList[i].coveragePremium = "";
@@ -314,7 +578,7 @@ export default {
       });
     },
 
-    ordersUpdate(index,row){
+    ordersUpdate(index, row) {
       console.log(row)
     },
     radioinput(id) {
@@ -431,10 +695,104 @@ export default {
 </script>
 <!-- 样式区域 -->
 <style lang='scss' scoped>
+/deep/ {
+  .el-dialog__body {
+    background: #F2F2F2;
+  }
+
+  .el-dialog__footer {
+    padding: 10px;
+  }
+}
+
+.withdrawalinput {
+  border: none;
+}
+
 #body {
   padding: 0 24px;
 }
 
+.dialoglist {
+  width: 40%;
+  padding: 20px;
+  height: 300px;
+  overflow-y: auto;
+  cursor: pointer;
+
+  .checked {
+    width: 20px;
+    height: 20px;
+    border-radius: 4px 4px 4px 4px;
+    border: 1px solid #D7DBE7;
+  }
+
+  .data {
+    margin: 10px;
+    border-bottom: 1px solid #f2f2f2;
+    padding: 10px;
+  }
+
+  .logo {
+    width: 50px;
+    height: 50px;
+
+    >img {
+      width: 40px;
+      height: 40px;
+
+    }
+  }
+}
+
+.dialoginput {
+  width: 50%;
+
+  .amountHint {
+    font-size: 16px;
+    color: rgba(51, 51, 51, 0.6);
+  }
+
+  .allHint {
+    font-size: 16px;
+    color: #2D4D89;
+    margin-left: 10px;
+    cursor: pointer;
+  }
+
+  input.no-border {
+    border: none;
+    outline: none;
+    background: transparent;
+    font-size: 45px;
+    font-weight: bold;
+  }
+}
+
+.dialogCentent,
+.dialoglist,
+.dialoginput {
+  background: #FFFFFF;
+  border-radius: 4px 4px 4px 4px;
+  padding: 10px;
+
+  >span {
+    font-family: PingFang SC, PingFang SC;
+    font-weight: 500;
+    font-size: 13px;
+    margin-bottom: 10px;
+    color: rgba(51, 51, 51, 0.8);
+  }
+
+  .totalsum {
+    span:nth-child(2) {
+      font-size: 30px;
+      color: red;
+      font-weight: bold;
+    }
+  }
+}
+
 .content {
   padding: 5px 24px 20px 24px;
 

+ 137 - 6
src/views/Letter/Wallet/BankCard.vue

@@ -2,7 +2,7 @@
 <template>
   <div id="body" class="flex f-wrap  a-c">
     <!-- 模板内容 -->
-    <div class="bankClass " @click="bankAdd">
+    <div class="bankClass " @click="bankAddVisible = true">
       <div class="add flex j-c a-c">
         <img src="../../../../static/bankadd.png" alt="">
         <span>添加银行卡提现</span>
@@ -31,13 +31,26 @@
         <span>{{ item.bankNumber.slice(-4) }}</span>
       </div>
     </div>
-    <el-dialog title="添加银行卡" :visible.sync="bankAddVisible" width="30%" >
+    <el-dialog title="添加银行卡" :visible.sync="bankAddVisible" width="28%">
       <div class="dialogCentent">
+        <el-form ref="form" :model="bankAddform" label-width="80px">
+          <el-form-item label="选择银行">
+            <el-select v-model="bankAddform.bankAccount" placeholder="点击选择银行卡">
+              <el-option :label="item.label" :value="item.label" v-for="(item, index) in list " :key="index"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="银行卡">
+            <el-input v-model="bankAddform.bankNumber" placeholder="请输入银行卡号"></el-input>
+          </el-form-item>
+          <el-form-item label="开户行">
+            <el-input v-model="bankAddform.bankAddress" placeholder="请输入开户行"></el-input>
+          </el-form-item>
 
+        </el-form>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
-        <el-button size="small" type="primary" @click="dialogVisible = false">确 定</el-button>
+        <el-button size="small" @click="bankAddVisible = false">取 消</el-button>
+        <el-button size="small" type="primary" @click="bankAdd">确 定</el-button>
       </span>
     </el-dialog>
   </div>
@@ -48,9 +61,96 @@ export default {
   // 数据存放区域
   data() {
     return {
-      bankAddVisible:false,
+      bankAddform: {
+        "bankNumber": "",
+        "bankAccount": "",
+        "bankAddress": "",
+        "isDefault": 0,
+      },
+      bankAddVisible: false,
       Loading: false,
       cardPackList: [],
+      list: [{
+        value: '1',
+        label: '中国工商银行'
+      },
+      {
+        value: '2',
+        label: '中国农业银行'
+      },
+      {
+        value: '3',
+        label: '中国银行'
+      },
+      {
+        value: '4',
+        label: '中国建设银行'
+      },
+      {
+        value: '5',
+        label: '交通银行'
+      },
+      {
+        value: '6',
+        label: '中国邮政储蓄银行'
+      },
+      {
+        value: '7',
+        label: '招商银行'
+      },
+      {
+        value: '8',
+        label: '中信银行'
+      },
+      {
+        value: '9',
+        label: '中国光大银行'
+      },
+      {
+        value: '10',
+        label: '华夏银行'
+      },
+      {
+        value: '11',
+        label: '中国民生银行'
+      },
+      {
+        value: '12',
+        label: '广发银行'
+      },
+      {
+        value: '13',
+        label: '平安银行'
+      },
+      {
+        value: '14',
+        label: '上海浦东发展银行'
+      },
+      {
+        value: '15',
+        label: '兴业银行'
+      },
+      {
+        value: '16',
+        label: '浙商银行'
+      },
+      {
+        value: '17',
+        label: '渤海银行'
+      },
+      {
+        value: '18',
+        label: '恒丰银行'
+      },
+      {
+        value: '19',
+        label: '北京银行'
+      },
+      {
+        value: '20',
+        label: '上海银行'
+      },
+      ],
       bankList: [{
         bankName: "中国邮政储蓄银行",
         logo: "../../../../static/bankLogo/youzheng.png",
@@ -121,7 +221,21 @@ export default {
   // 方法函数
   methods: {
     bankAdd() {
-
+      this.$api.letter.insertByBankNumber(this.bankAddform).then((res) => {
+        if (res.code == '200') {
+          this.bankAddVisible = false;
+          this.banklist();
+          this.$message({
+            type: 'success',
+            message: "添加成功",
+          });
+        } else {
+          this.$message({
+            type: 'error',
+            message: res.msg,
+          });
+        }
+      });
     },
     bankdel(id) {
       this.$confirm('是否删除银行卡?', '提示', {
@@ -193,9 +307,26 @@ export default {
 </script>
 <!-- 样式区域 -->
 <style lang='scss' scoped>
+/deep/ {
+  .el-dialog__body {
+    background: #F2F2F2;
+  }
+
+  .el-dialog__footer {
+    padding: 10px;
+  }
+}
+
+.dialogCentent {
+  background: #FFFFFF;
+  border-radius: 4px 4px 4px 4px;
+  padding: 10px;
+}
+
 #body {
   padding: 24px;
 }
+
 .bankClass,
 .bankdata {
   width: 322px;

BIN
static/bankchecked.png