提现功能页面

src/assets/css/common.css

@@ -31,6 +31,10 @@
 }
 .flex{
 	display: flex;
+
+}
+.f-wrap{
+  flex-wrap: wrap;
 }
 .j-s{
 	justify-content: space-between;

src/views/Letter/Appletter.vue

@@ -1,60 +0,0 @@
-<template>
-  <div>
-    <div class="iframe-wrap">
-      <iframe :src="this.global.h5BaseUrl" allowtransparency="true" frameborder="0"   scrolling="auto"  width="420" class="iframe" ref="homePage"></iframe>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      clientHeight: "",
-    
-    };
-  },
-  mounted() {
-    // 获取浏览器可视区域高度
-    this.clientHeight = `${document.documentElement.clientHeight}`; //document.body.clientWidth;
-    //console.log(self.clientHeight);
-    window.onresize = function temp() {
-      this.clientHeight = `${document.documentElement.clientHeight}`;
-    };
-  },
-  watch: {
-    // 如果 `clientHeight` 发生改变，这个函数就会运行
-    clientHeight: function () {
-      this.changeFixed(this.clientHeight);
-    },
-  },
-  created() { },
-  methods: {
-    changeFixed(clientHeight) {
-      //动态修改样式
-      this.$refs.homePage.style.height = clientHeight - 120 + "px";
-
-    },
-  },
-};
-</script>
-<style scoped  lang="scss">
-.iframe-wrap {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-.demo-table-expand {
-    font-size: 0;
-    padding: 20px;
-    box-sizing: border-box;
-  }
-  .demo-table-expand label {
-    width: 90px;
-    color: #99a9bf;
-  }
-  .demo-table-expand .el-form-item {
-    margin-right: 0;
-    margin-bottom: 0;
-    width: 50%;
-  }
-</style>

src/views/Letter/Wallet/AmountManagement.vue

@@ -0,0 +1,475 @@
+<!-- 模板区域 -->
+<template>
+  <div id="body">
+    <!-- 模板内容 -->
+    <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>
+    </div>
+    <div class="content">
+      <div class="header flex a-c j-s">
+        <template v-if="formQuery.amountStatus == '1'">
+          <div class="flex a-end j-s sum">
+            <div class="flex f-c a-start j-s" style="height:100%;">
+              <span>可提现（元）</span>
+              <span v-if="MoneyData.handlingFee" style="font-size: 28px;font-weight: bold;color: #333;">{{
+                MoneyData.handlingFee }}</span>
+              <span v-else>0.00</span>
+            </div>
+            <el-button type="primary" size="small">提现</el-button>
+          </div>
+          <div class="flex f-c a-c j-s">
+            <span>预收金额（元）</span>
+            <span v-if="MoneyData.willHalding">{{ MoneyData.willHalding }}</span>
+            <span v-else>0.00</span>
+          </div>
+          <div class="flex f-c a-c j-s">
+            <span>提现中（元）</span>
+            <span v-if="MoneyData.withdrawalHalding">{{ MoneyData.withdrawalHalding }}</span>
+            <span v-else>0.00</span>
+          </div>
+          <div class="flex f-c a-c j-s">
+            <span>已提现（元）</span>
+            <span v-if="MoneyData.approvedHalding">{{ MoneyData.approvedHalding }}</span>
+            <span v-else>0.00</span>
+          </div>
+        </template>
+        <template v-if="formQuery.amountStatus == '2'">
+          <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-else>0.00</span>
+            </div>
+            <el-button type="primary" size="small">提现</el-button>
+          </div>
+          <div class="flex f-c a-c j-s">
+            <span>预收金额（元）</span>
+            <span v-if="MoneyData.willDocumentary">{{ MoneyData.willDocumentary }}</span>
+            <span v-else>0.00</span>
+          </div>
+          <div class="flex f-c a-c j-s">
+            <span>提现中（元）</span>
+            <span v-if="MoneyData.withdrawalDocumentary">{{ MoneyData.withdrawalDocumentary }}</span>
+            <span v-else>0.00</span>
+
+          </div>
+          <div class="flex f-c a-c j-s">
+            <span>已提现（元）</span>
+            <span v-if="MoneyData.approvedDocumentary">{{ MoneyData.approvedDocumentary }}</span>
+            <span v-else>0.00</span>
+
+          </div>
+        </template>
+        <template v-if="formQuery.amountStatus == '3'">
+          <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>
+
+            </div>
+            <el-button type="primary" size="small">提现</el-button>
+          </div>
+          <div class="flex f-c a-c j-s">
+            <span>预收金额（元）</span>
+            <span v-if="MoneyData.willPromotion">{{ MoneyData.willPromotion }}</span>
+            <span v-else>0.00</span>
+
+          </div>
+          <div class="flex f-c a-c j-s">
+            <span>提现中（元）</span>
+            <span v-if="MoneyData.withdrawalPromotion">{{ MoneyData.withdrawalPromotion }}</span>
+            <span v-else>0.00</span>
+
+          </div>
+          <div class="flex f-c a-c j-s">
+            <span>已提现（元）</span>
+            <span v-if="MoneyData.approvedPromotion">{{ MoneyData.approvedPromotion }}</span>
+            <span v-else>0.00</span>
+          </div>
+        </template>
+      </div>
+      <el-form :inline="true" :model="formQuery" class="demo-form-inline" size="small" style="margin: 15px 0;">
+        <el-row>
+          <el-col :span="8">
+            <el-form-item label="订单状态:">
+              <el-radio-group v-model="formQuery.auditingStatus" @input="radioinput">
+                <el-radio v-for="val in statusList" :key="val.value" :label="val.value">{{ val.label
+                }}</el-radio>
+              </el-radio-group>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="8">
+            <el-form-item label="日期查询:">
+              <el-date-picker v-model="datetime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
+              </el-date-picker>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="onSubmit">查询</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+      <el-table size="small" :data="[2, 3].includes(formQuery.auditingStatus) ? pageResult : preReceivedPageResult"
+        height="500" border highlight-current-row stripe :header-cell-style="{
+          background: '#F2F7FC',
+          fontWeight: '700',
+          color: '#606266',
+        }">
+        <template v-if="[2, 3].includes(formQuery.auditingStatus)">
+          <el-table-column prop="id" label="订单号" align="center"></el-table-column>
+          <el-table-column prop="createTime" label="提现时间" align="center"></el-table-column>
+          <el-table-column prop="paytime" label="到账时间" align="center"></el-table-column>
+          <el-table-column prop="amount" label="金额" align="center"></el-table-column>
+        </template>
+        <template v-else>
+          <el-table-column prop="id" label="订单号" align="center"></el-table-column>
+          <el-table-column prop="signingTime" label="签单时间" align="center"></el-table-column>
+          <el-table-column prop="licenseno" label="车牌号" align="center"></el-table-column>
+          <el-table-column prop="willAmount" label="金额" align="center"></el-table-column>
+        </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>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!-- 车辆报价新页面 -->
+    <detailsDialog ref="detailsDialog" :orderInfo.sync="orderInfo" :Feepermissions="false"></detailsDialog>
+  </div>
+</template>
+<!-- 行为区域 -->
+<script>
+import KtCommonTable from "@/views/Core/KtCommonTable.vue"; //表格组件
+import detailsDialog from "@/views/Core/components/detailsDialog.vue";
+
+export default {
+  components: {
+    KtCommonTable,
+    detailsDialog
+  },
+  // 数据存放区域
+  data() {
+    return {
+      pageResult: [],
+      preReceivedPageResult: [],
+      datetime: '',
+      Columns: [
+        //数据列
+        { prop: "id", label: " 订单号", minWidth: 160 },
+        { prop: "createTime", label: "提现时间", minWidth: 160 },
+        { prop: "paytime", label: "到账时间", minWidth: 160 },
+        { prop: "amount", label: "金额", minWidth: 160 },
+      ],
+      preReceivedColumns: [
+        //数据列
+        { prop: "id", label: " 订单号", minWidth: 160 },
+        { prop: "signingTime", label: "签单时间", minWidth: 160 },
+        { prop: "licenseno", label: "车牌号", minWidth: 160 },
+        { prop: "willAmount", label: "金额", minWidth: 160 },
+      ],
+      activeName: 'first',
+      formQuery: {
+        pageNum: 1,
+        pageSize: 20,
+        auditingStatus: 2,
+        amountStatus: '',
+      },
+      searchType: "",
+      amountType: "1",
+      statusList: [{
+        label: '预收',
+        value: 0,
+        searchType: 1,
+      },
+      {
+        label: '实收',
+        value: 1,
+        searchType: 2,
+      },
+      {
+        label: '提现中',
+        value: 2,
+      },
+      {
+        label: '已提现',
+        value: 3,
+      },
+      ],
+      MoneyData: {},
+      pageTitle:"",
+      orderInfo: {
+        //选中的订单
+        ownerinfo: {},
+        carinfo: {},
+        applyinfo: {},
+        insureinfo: {},
+        kindinfo: [],
+        riskinfo: [],
+        ownerinfo: {},
+        orderCommissionVo: {},
+        extendInfo: {}
+      },
+    }
+  },
+  // 生命周期函数
+  created() {
+    this.formQuery.amountStatus = this.$route.query.type;
+    switch (this.formQuery.amountStatus) {
+      case 1:
+        this.pageTitle="手续金额"
+        break;
+      case 2:
+      this.pageTitle="跟单金额"
+
+        break;
+      case 3:
+      this.pageTitle="推广金额"
+
+        break;
+    }
+    this.amountType = this.$route.query.type;
+    this.datetime = this.transformTime();
+    this.allamount();
+    this.FindPage();
+  },
+  // 方法函数
+  methods: {
+    OrderDetails(index, row) {
+      for (let i = 0; i < this.global.insureList.length; i++) {
+        this.global.insureList[i].coveragePremium = "";
+        this.global.insureList[i].amount = 0;
+      }
+      let params = {
+        companyId: row.id
+      };
+      this.$api.letter.getByCompanyId(params).then(res => {
+        if (res.code == 200) {
+          this.licenseNo = res.data.licenseno; //车牌号
+          this.inscompany = res.data.inscompany; //保险公司
+          // res.data.carinfo.carnature = this.natureOfVehicleUseCap(
+          //   res.data.carinfo.carnature
+          // );
+          if (res.data.accidentInfo) {
+            res.data.accidentInfo.constructor === Object
+              ? [res.data.accidentInfo]
+              : res.data.accidentInfo;
+          }
+          Object.assign(this.orderInfo, res.data);
+          if (this.orderInfo.riskinfo && this.orderInfo.riskinfo.length > 0) {
+            for (let i = 0; i < this.orderInfo.riskinfo.length; i++) {
+              if (this.orderInfo.riskinfo[i].riskCode == "0510") {
+                for (let j = 0; j < this.orderInfo.kindinfo.length; j++) {
+                  for (let m = 0; m < this.global.insureList.length; m++) {
+                    if (
+                      this.orderInfo.kindinfo[j].kindCode ==
+                      this.global.insureList[m].kindCode
+                    ) {
+                      this.global.insureList[
+                        m
+                      ].coveragePremium = this.orderInfo.kindinfo[
+                        j
+                      ].coveragePremium;
+                      if (this.orderInfo.kindinfo[j].kindCode == "B") {
+                        this.global.insureList[9].amtList[0].value = this.orderInfo.kindinfo[
+                          j
+                        ].amount;
+                      }
+                      if (this.orderInfo.kindinfo[j].kindCode == "A") {
+                        this.global.insureList[m].amount = "1";
+                      } else if (this.global.insureList[m].kindCode == "D4") {
+                        this.global.insureList[
+                          m
+                        ].amount = this.orderInfo.kindinfo[j].unitAmount;
+                      } else if (
+                        this.global.insureList[m].isMainRisk ||
+                        this.global.insureList[m].kindCode == "BD" ||
+                        this.global.insureList[m].kindCode == "L"
+                      ) {
+                        this.global.insureList[
+                          m
+                        ].amount = this.orderInfo.kindinfo[j].amount;
+                      } else {
+                        this.global.insureList[
+                          m
+                        ].amount = this.orderInfo.kindinfo[j].deductibleRate;
+                      }
+                    }
+                  }
+                }
+              }
+            }
+          }
+
+
+          this.$refs.detailsDialog.setBackupVisible(true);
+        } else {
+          this.$message.error("订单获取失败");
+        }
+      });
+    },
+
+    ordersUpdate(index,row){
+      console.log(row)
+    },
+    radioinput(id) {
+      let info = this.statusList.find(val => val.value == id)
+      this.searchType = info.searchType;
+    },
+    onSubmit() {
+      switch (this.formQuery.auditingStatus) {
+        case 0:
+        case 1:
+          let param = {
+            timeFiltering: this.datetime,
+            amountType: this.amountType,
+            searchType: this.searchType,
+          }
+          this.$api.letter.sysUsergetInsOrders(param).then((res) => {
+            if (res.code == '200') {
+              this.preReceivedPageResult = res.data.insFeeOrderNewList;
+            } else {
+              this.$message({
+                type: 'error',
+                message: res.msg,
+              });
+            }
+          });
+          break;
+        case 2:
+        case 3:
+          this.FindPage();
+          break;
+      }
+    },
+    allamount() {
+      this.$api.letter.getSysAllAmount().then((res) => {
+        if (res.code == '200') {
+          this.MoneyData = res.data;
+        } else {
+          this.$message({
+            type: 'error',
+            message: res.msg,
+          });
+        }
+      });
+    },
+    productUpdate() {
+
+    },
+    preReceivedFindPage(data) {
+
+    },
+    //产品分页json
+    FindPage(data) {
+      if (data && data.pageRequest) {
+        this.formQuery.pageNum = data.pageRequest.pageNum;
+        this.formQuery.pageSize = data.pageRequest.pageSize;
+      } else {
+        this.formQuery.pageNum = 1;
+        this.formQuery.pageSize = 20;
+      }
+      let params = {
+        [this.formQuery.auditingStatus == 2 ? "withdrawalTime" : "timeFiltering"]: this.datetime,
+      }
+      this.$api.letter.queryAppPage({ ...params, ...this.formQuery }).then((res) => {
+        if (res.code == '200') {
+          this.pageResult = res.data.content;
+        } else {
+          this.$message({
+            type: 'error',
+            message: res.msg,
+          });
+        }
+      });
+    },
+    back() {
+      this.$router.push({
+        path: "fundsWallet",
+      });
+    },
+    handleClick(tab, event) {
+      console.log(tab.label);
+      switch (tab.label) {
+        case "手续金额":
+
+          break;
+        case "车险金额":
+
+          break;
+        case "推广金额":
+
+          break;
+      }
+    },
+    transformTime(day) {
+      var date = new Date();
+      date.setFullYear(date.getFullYear());
+      date.setTime(date.getTime());
+      var strYear = date.getFullYear();
+      var strDay = day ? date.getDate() - day : date.getDate();
+      var strMonth = date.getMonth() + 1;
+      if (strMonth < 10) {
+        strMonth = "0" + strMonth;
+      }
+      if (strDay < 10) {
+        strDay = "0" + strDay;
+      }
+      var datastr = strYear + "-" + strMonth + "-" + strDay;
+      return datastr;
+    },
+  },
+  // 计算属性
+  computed: {
+  }
+}
+</script>
+<!-- 样式区域 -->
+<style lang='scss' scoped>
+#body {
+  padding: 0 24px;
+}
+
+.content {
+  padding: 5px 24px 20px 24px;
+
+  .header {
+    width: 100%;
+    height: 108px;
+    background: #F5F6F8;
+    border-radius: 12px 12px 12px 12px;
+    padding: 15px 40px;
+    box-sizing: border-box;
+
+    >div {
+      width: 25%;
+      height: 100%;
+
+      span:nth-child(2) {
+        font-family: DIN, DIN;
+        font-size: 28px;
+        font-weight: bold;
+      }
+
+    }
+
+    .sum {
+      border-right: 1px solid #D7DBE7;
+      box-sizing: border-box;
+      padding-right: 80px;
+
+      span:nth-child(1) {
+        font-family: DIN, DIN;
+        font-size: 20px;
+        color: rgba(51, 51, 51, 0.8);
+      }
+
+    }
+  }
+}
+</style>

src/views/Letter/Wallet/BankCard.vue

@@ -0,0 +1,279 @@
+<!-- 模板区域 -->
+<template>
+  <div id="body" class="flex f-wrap  a-c">
+    <!-- 模板内容 -->
+    <div class="bankClass " @click="bankAdd">
+      <div class="add flex j-c a-c">
+        <img src="../../../../static/bankadd.png" alt="">
+        <span>添加银行卡提现</span>
+      </div>
+    </div>
+    <div class="bankdata flex f-c j-s" :style="{ background: item.stylelist.background }"
+      v-for="(item, index) in cardPackList" :key="index">
+      <img class="Backgroundimage" src="../../../../static/bankLogo/img1.png" alt="">
+      <div class="flex j-s a-start">
+        <div class="flex">
+          <div class="logo">
+            <img :src="item.stylelist.logo" mode="">
+          </div>
+          <div class="banktitle flex f-c">
+            <span>{{ item.bankAccount }}</span>
+            <span>储蓄卡</span>
+          </div>
+        </div>
+        <img src="../../../../static/bankdel.png" mode="" style="width: 24px;height: 24px;" @click="bankdel(item.id)"
+          v-loading.fullscreen.lock="Loading">
+      </div>
+      <div class="bank flex j-s a-c">
+        <div>****</div>
+        <div>****</div>
+        <div>****</div>
+        <span>{{ item.bankNumber.slice(-4) }}</span>
+      </div>
+    </div>
+    <el-dialog title="添加银行卡" :visible.sync="bankAddVisible" width="30%" >
+      <div class="dialogCentent">
+
+      </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>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+<!-- 行为区域 -->
+<script>
+export default {
+  // 数据存放区域
+  data() {
+    return {
+      bankAddVisible:false,
+      Loading: false,
+      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%)"
+      },
+      ],
+    }
+  },
+  // 生命周期函数
+  created() {
+    this.banklist();
+  },
+  // 方法函数
+  methods: {
+    bankAdd() {
+
+    },
+    bankdel(id) {
+      this.$confirm('是否删除银行卡?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.loading = true;
+        this.$api.letter.Bankdelete(id).then((res) => {
+          if (res.code == '200') {
+            this.banklist();
+            this.$message({
+              type: 'success',
+              message: '删除成功!'
+            });
+            this.loading = false;
+          } else {
+            this.$message({
+              type: 'error',
+              message: res.msg,
+            });
+          }
+        });
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        });
+      });
+
+    },
+    banklist() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Loading',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      });
+      this.$api.letter.getUserBankList().then((res) => {
+        if (res.code == '200') {
+          res.data.map(val => {
+            let name = this.bankList.find(ele => ele.bankName === val.bankAccount)
+            if (name) {
+              val.stylelist = {
+                ...name
+              };
+            } else {
+              val.stylelist = {
+                logo: "/static/image/bindBank/img1.png",
+                background: 'linear-gradient(90deg, rgba(229, 166,0,0.7) 0%, #e5a600 100%)',
+              }
+            }
+          })
+          this.cardPackList = res.data;
+          loading.close();
+        } else {
+          this.$message({
+            type: 'error',
+            message: res.msg,
+          });
+        }
+      });
+    },
+  },
+  // 计算属性
+  computed: {
+  }
+}
+</script>
+<!-- 样式区域 -->
+<style lang='scss' scoped>
+#body {
+  padding: 24px;
+}
+.bankClass,
+.bankdata {
+  width: 322px;
+  height: 178px;
+  background: linear-gradient(90deg, rgba(45, 77, 137, 0.7) 0%, #2D4D89 100%);
+  border-radius: 12px 12px 12px 12px;
+  font-size: 16px;
+  color: #fff;
+  padding: 14px;
+  margin: 10px 40px;
+  box-sizing: border-box;
+  position: relative;
+  cursor: pointer;
+
+  .Backgroundimage {
+    width: 117px;
+    height: 107px;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+  }
+
+  .banktitle {
+    margin-left: 12px;
+
+    span:first-child {
+      color: #fff;
+      font-weight: 600;
+      font-size: 16px;
+    }
+
+    span:last-child {
+      color: #fff;
+      font-size: 12px;
+    }
+  }
+
+  .bank {
+    font-size: 20px;
+    color: #fff;
+    margin-bottom: 30px;
+
+    span {
+      font-size: 20px;
+    }
+  }
+
+  .add {
+    width: 100%;
+    height: 100%;
+    border-radius: 8px 8px 8px 8px;
+    border: 1px dashed #fff;
+    background: transparent;
+
+    img {
+      width: 28px;
+      height: 28px;
+      margin-right: 16px;
+    }
+  }
+
+  .logo {
+    width: 40px;
+    height: 40px;
+    background: #FFFFFF;
+    border-radius: 8px 8px 8px 8px;
+
+    >img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+
+
+}
+
+.bankClass:hover {
+  background: linear-gradient(90deg, rgba(88, 113, 161, 0.7) 0%, #5871A1 100%);
+}
+</style>

src/views/Letter/Wallet/FundsWallet.vue

@@ -0,0 +1,236 @@
+<!-- 模板区域 -->
+<template>
+  <div id="body">
+    <!-- 模板内容 -->
+    <div class="header flex a-c j-s">
+      <div class="flex f-c a-c j-s" @click="toBillDetails(1)">
+        <span>手续金额（元）</span>
+        <span class="color1" v-if="MoneyData.handlingFee">{{ MoneyData.handlingFee.toFixed(2) }}</span>
+        <span class="color1" v-else>0.00</span>
+      </div>
+      <div class="flex f-c a-c j-s center" @click="toBillDetails(2)">
+        <span>车险金额（元）</span>
+        <span class="color2" v-if="MoneyData.documentary">{{ MoneyData.documentary.toFixed(2) }}</span>
+        <span class="color2" v-else>0.00</span>
+      </div>
+      <div class="flex f-c a-c j-s" @click="toBillDetails(3)">
+        <span>推广金额（元）</span>
+        <span class="color3" v-if="MoneyData.promotion">{{ MoneyData.promotion.toFixed(2) }}</span>
+        <span v-else class="color3">0.00</span>
+      </div>
+    </div>
+    <div class="content flex f-wrap j-s a-c">
+      <div class="flex f-c a-c j-s">
+        <span>手续金额预收（元）</span>
+        <span v-if="MoneyData.willHalding">{{ MoneyData.willHalding }}</span>
+        <span v-else>0.00</span>
+      </div>
+      <div class="flex f-c a-c j-s">
+        <span>跟单金额预收（元）</span>
+        <span v-if="MoneyData.willDocumentary">{{ MoneyData.willDocumentary }}</span>
+        <span v-else>0.00</span>
+      </div>
+      <div class="flex f-c a-c j-s">
+        <span>推广金额预收（元）</span>
+        <span v-if="MoneyData.willPromotion">{{ MoneyData.willPromotion }}</span>
+        <span v-else>0.00</span>
+      </div>
+      <div class="flex f-c a-c j-s">
+        <span>手续金额提现中（元）</span>
+        <span v-if="MoneyData.withdrawalHalding">{{ MoneyData.withdrawalHalding }}</span>
+        <span v-else>0.00</span>
+      </div>
+      <div class="flex f-c a-c j-s">
+        <span>跟单金额提现中（元）</span>
+        <span v-if="MoneyData.withdrawalDocumentary">{{ MoneyData.withdrawalDocumentary }}</span>
+        <span v-else>0.00</span>
+      </div>
+      <div class="flex f-c a-c j-s">
+        <span>推广金额提现中（元）</span>
+        <span v-if="MoneyData.withdrawalPromotion">{{ MoneyData.withdrawalPromotion }}</span>
+        <span v-else>0.00</span>
+      </div>
+      <div class="flex f-c a-c j-s">
+        <span>手续金额已提现（元）</span>
+        <span v-if="MoneyData.approvedHalding">{{ MoneyData.approvedHalding }}</span>
+        <span v-else>0.00</span>
+      </div>
+      <div class="flex f-c a-c j-s">
+        <span>跟单金额已提现（元）</span>
+        <span v-if="MoneyData.approvedDocumentary">{{ MoneyData.approvedDocumentary }}</span>
+        <span v-else>0.00</span>
+      </div>
+      <div class="flex f-c a-c j-s">
+        <span>推广金额已提现（元）</span>
+        <span v-if="MoneyData.approvedPromotion">{{ MoneyData.approvedPromotion }}</span>
+        <span v-else>0.00</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<!-- 行为区域 -->
+<script>
+export default {
+  // 数据存放区域
+  data() {
+    return {
+      MoneyData: {},//数据对象
+    }
+  },
+  // 生命周期函数
+  created() {
+    this.allamount();
+  },
+  // 方法函数
+  methods: {
+    toBillDetails(type) {
+      this.$router.push({
+        path: "amountManagement",
+        query: { type: type },
+      });
+    },
+    allamount() {
+      const loading = this.$loading({
+          lock: true,
+          text: 'Loading',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        });
+      this.$api.letter.getSysAllAmount().then((res) => {
+        if (res.code == '200') {
+          this.MoneyData = res.data;
+          loading.close();
+        } else {
+          this.$message({
+            type: 'error',
+            message: res.msg,
+          });
+        }
+      });
+    }
+  },
+  // 计算属性
+  computed: {
+  }
+}
+</script>
+<!-- 样式区域 -->
+<style lang='scss' scoped>
+#body {
+  padding: 20px 24px;
+}
+
+.color1 {
+  color: #0052FF;
+}
+
+.color2 {
+  color: #FF5600;
+}
+
+.color3 {
+  color: #229805;
+}
+
+.header {
+  width: 100%;
+  height: 108px;
+  background: #F2F5FD;
+  border-radius: 12px 12px 12px 12px;
+  padding: 16px;
+  box-sizing: border-box;
+
+  div {
+    width: 33.33%;
+    height: 100%;
+
+    span:nth-child(1) {
+      font-size: 20px;
+      color: rgba(51, 51, 51, 0.8);
+    }
+
+    span:nth-child(2) {
+      font-family: DIN, DIN;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  }
+
+  .center {
+    border: 1px solid #D7DBE7;
+    border-top: none;
+    border-bottom: none;
+  }
+}
+
+.content {
+  width: 100%;
+  height: 283px;
+  background: #F5F6F8;
+  border-radius: 12px 12px 12px 12px;
+  padding: 28px;
+  box-sizing: border-box;
+  margin-top: 18px;
+
+  div {
+    width: 33.33%;
+    text-align: left;
+
+    span:nth-child(2) {
+      margin-top: 12px;
+      font-family: DIN, DIN;
+      font-size: 28px;
+      font-weight: bold;
+    }
+  }
+
+  :nth-child(1),
+  :nth-child(4),
+  :nth-child(7) {
+    span:nth-child(1) {
+      &::before {
+        content: "";
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        background: #0052FF;
+        margin-right: 6px;
+        border-radius: 50%;
+      }
+    }
+  }
+
+  :nth-child(2),
+  :nth-child(5),
+  :nth-child(8) {
+    span:nth-child(1) {
+      &::before {
+        content: "";
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        background: #FF5600;
+        margin-right: 6px;
+        border-radius: 50%;
+      }
+    }
+  }
+
+  :nth-child(3),
+  :nth-child(6),
+  :nth-child(9) {
+    span:nth-child(1) {
+      &::before {
+        content: "";
+        display: inline-block;
+        width: 10px;
+        height: 10px;
+        background: #229805;
+        margin-right: 6px;
+        border-radius: 50%;
+      }
+    }
+  }
+}
+</style>