银农：增加待支付和支付记录模块

src/api/onlineHome/bankAgriculture/paymentApproval.js

@@ -8,6 +8,58 @@ export function listTransfer(query) {
     params: query
   })
 }
+// 查询银行转账待支付列表
+export function payList(query) {
+  return request({
+    url: '/yinnong/transfer/payList',
+    method: 'get',
+    params: query
+  })
+}
+// 查询银行转账支付记录列表
+export function payRecordList(query) {
+  return request({
+    url: '/yinnong/transfer/payRecordList',
+    method: 'get',
+    params: query
+  })
+}
+// 支付
+export function pay(query) {
+  return request({
+    url: '/yinnong/transfer/pay',
+    method: 'get',
+    params: query
+  })
+}
+export function sendSms(query) {
+  return request({
+    url: '/yinnong/transfer/sendSms',
+    method: 'get',
+    params: query
+  })
+}
+// 核实结果
+export function transactionStatusQuery(id) {
+  return request({
+    url: '/yinnong/transfer/transactionStatusQuery/' + id,
+    method: 'get'
+  })
+}
+// 支付复核
+export function editDoubleConfirmationStatus(id) {
+  return request({
+    url: '/yinnong/transfer/editDoubleConfirmationStatus/' + id,
+    method: 'get'
+  })
+}
+// 重置银行转账=撤回
+export function resetTYinnongTransfer(id) {
+  return request({
+    url: '/yinnong/transfer/resetTYinnongTransfer/' + id,
+    method: 'get'
+  })
+}
 // 查询现金提现申请列表
 export function listCash(query) {
   return request({
@@ -23,16 +75,17 @@ export function getTransfer(id) {
     method: 'get'
   })
 }
-
-export function transactionStatusQuery(id) {
+//重新申请
+export function reapply(id) {
   return request({
-    url: '/yinnong/transfer/transactionStatusQuery/' + id,
+    url: '/yinnong/transfer/reapply/' + id,
     method: 'get'
   })
 }
-export function reapply(id) {
+//取消支付
+export function reapplyDraft(id) {
   return request({
-    url: '/yinnong/transfer/reapply/' + id,
+    url: '/yinnong/transfer/reapplyDraft/' + id,
     method: 'get'
   })
 }

src/router/index.js

@@ -5584,7 +5584,33 @@ export const constantRoutes = [
     },
     component: (resolve) => require(['@/views/yinnong/bankAgriculture/recordDetail/recordDetailList'], resolve)
   },
-
+  {
+    path: '/sunVillage_info/paymentPendingList',
+    name: 'sunVillagePaymentPendingList',
+    meta: {
+      title: '待我支付',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage_info/bankAgriculture/paymentPending/approvalList'], resolve)
+  },
+  {
+    path: '/sunVillage_info/payRecordList',
+    name: 'sunVillagePayRecordList',
+    meta: {
+      title: '支付记录',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage_info/bankAgriculture/paymentPending/payRecordList'], resolve)
+  },
+  {
+    path: '/sunVillage_info/paymentPendingApprovalDetail',
+    name: 'sunVillagePaymentPendingApprovalDetail',
+    meta: {
+      title: '银农银行卡转账申请',
+      hidden: true,
+    },
+    component: (resolve) => require(['@/views/sunVillage_info/bankAgriculture/paymentPending/approvalDetail'], resolve)
+  },
   //<--------------------------------------农业大托管-------------------------------------->
   {
     path: '/agriculturalTrusteeship/index',

src/views/sunVillage_info/bankAgriculture/paymentPending/approvalDetail.vue

@@ -0,0 +1,663 @@
+<template>
+  <div class="app-container">
+    <van-nav-bar
+      left-arrow
+      fixed
+      placeholder
+      @click-left="$router.back(-1)"
+    >
+      <template #title>
+        <p style="font-weight: bold;">查看银行卡转账申请</p>
+      </template>
+      <template #right>
+        <van-icon name="../../../../static/images/sunVillage_info/icon_flow.png" size="20" @click="goFlow"/>
+      </template>
+    </van-nav-bar>
+    <div class="main_box">
+      <p class="main_title"><i></i>基础信息</p>
+      <van-field readonly label="申请时间" v-model="form.applyDate" input-align="right" />
+      <van-field readonly label="资金支出类别" v-model="capitalExpenditureType" input-align="right" label-width="auto" />
+      <van-field readonly label="支出总金额" v-model="form.expenditureAmount" input-align="right" label-width="auto"/>
+      <van-field name="radio" label="审批模式" input-align="right" autocomplete="off" readonly>
+        <template #input>
+          <van-radio-group v-model="form.approvalMode" direction="horizontal">
+            <van-radio name="1">线上审批</van-radio>
+            <van-radio name="2">线下审批</van-radio>
+          </van-radio-group>
+        </template>
+      </van-field>
+      <van-field v-if="form.approvalMode==1" readonly label="审批流程" :value="tempalteFormat(form.approvalTemplateId)" input-align="right" label-width="auto"/>
+    </div>
+
+    <div class="main_box" style="margin-top: 10px;">
+      <van-field readonly label="转账附言" v-model="form.remark" type="textarea" input-align="right" rows="3" label-width="auto"/>
+    </div>
+
+    <div class="main_box" style="margin-top: 10px;">
+      <van-field readonly label="说明情况" v-model="form.explainSituation" type="textarea" input-align="right" rows="3" label-width="auto"/>
+    </div>
+
+    <div class="main_box" style="margin-top: 10px;">
+      <p class="main_title"><i></i>付款方信息</p>
+      <van-field readonly label="付款方" v-model="form.payer" input-align="right" label-width="auto"/>
+      <van-field readonly label="付款方账户" v-model="form.payerAccount" input-align="right" label-width="auto"/>
+      <van-field readonly label="余额" v-model="form.balance" input-align="right" label-width="auto"/>
+    </div>
+
+    <div class="main_box" v-if="capitalExpenditureOpen" style="margin-bottom: 10px;margin-top: 10px;position:relative;">
+      <van-field readonly label="项目名称" v-model="projectForm.projectName" input-align="right" />
+      <van-field readonly label="承建单位" v-model="projectForm.projectContractor" input-align="right" label-width="auto"/>
+      <van-field readonly label="合同价款（元）" v-model="projectForm.projectAmount" input-align="right" label-width="auto"/>
+      <van-field readonly label="工程款类型" v-model="projectFundType" input-align="right" />
+      <van-field readonly label="工程发票号" v-model="projectForm.projectBillNum" input-align="right" label-width="auto"/>
+    </div>
+    <div class="main_box" v-if="contractOpen" style="margin-bottom: 10px;margin-top: 10px;position:relative;">
+      <van-field readonly label="合同名称" v-model="infoForm.name" input-align="right" />
+      <van-field readonly label="合同编码" v-model="infoForm.code" input-align="right" label-width="auto"/>
+      <van-field readonly label="合同价款（元）" v-model="infoForm.totalAmount" input-align="right" label-width="auto"/>
+    </div>
+
+    <div class="main_box" style="position:relative;margin-top: 10px;">
+      <p class="main_title"><i></i>收款方信息</p>
+      <van-field readonly label="收款账户类型" v-if="form.bankType==1" v-model="form.accountType == 1 ? '公户':'私户'" input-align="right" label-width="auto" />
+      <van-field readonly label="行内转账" v-if="form.bankType==2||form.bankType==3||form.bankType==4" v-model="form.isPeers == 'Y' ? '是':'否'" input-align="right" label-width="auto" />
+      <div style="margin-bottom: 10px;position:relative;" v-for="(item, index) in chargeItme" :key="index" v-if="index<listLength">
+        <van-field readonly label="收款方" v-model="item.payee" input-align="right" />
+        <van-field readonly label="收款账户" v-model="item.payeeAccount" input-align="right" label-width="auto"/>
+        <van-field readonly label="开户银行" v-model="item.bankDeposit" input-align="right" label-width="auto"/>
+        <van-field readonly label="收入金额" v-model="item.incomeAmount" input-align="right" label-width="auto"/>
+        <van-field readonly label="所属银行" v-model="item.bankTypeText" input-align="right" />
+        <van-field v-if="item.transferStatus=='成功'||item.transferStatus=='失败'" readonly label="转账状态" v-model="item.transferStatus" input-align="right" />
+        <van-field v-if="item.transferStatus=='成功'||item.transferStatus=='失败'" readonly label="交易结果描述" v-model="item.causeFailure"  type="textarea" input-align="right" rows="3" label-width="auto" />
+      </div>
+      <p class="main_more" v-if="chargeItme.length>1 && showbtn" @click="listLength = chargeItme.length,showbtn=false">查看更多</p>
+      <p class="main_more" v-if="chargeItme.length>1 && !showbtn" @click="listLength = 1,showbtn=true">收起列表</p>
+    </div>
+
+    <div class="main_box" style="padding: 5px 0 0 0;margin-top: 10px;">
+      <p class="main_title"><i></i>上传附件</p>
+      <van-cell value="收据" />
+      <van-uploader v-model="fileList1" v-if="fileList1==null||fileList1.length==0" :deletable="false"  disabled  :upload-text="'未上传附件'" style="margin-left:8px;"></van-uploader>
+      <van-uploader v-model="fileList1" v-if="fileList1!=null&&fileList1.length>0" :deletable="false" @click-preview="previewPreview" :max-count="fileList1.length"  style="margin-left:8px;">
+        <template #preview-cover="file">
+          <div class="preview-cover">
+            <img src="../../../../assets/images/sunVillage_info/WORD.png" width="75" v-if="file.type == 'docx' || file.type == 'doc'"/>
+            <img src="../../../../assets/images/sunVillage_info/ECEL.png" width="75" v-if="file.type == 'xlsx' || file.type == 'xls'" />
+            <img src="../../../../assets/images/sunVillage_info/PDF.png" width="75" v-if="file.type == 'pdf'" />
+            <img src="../../../../assets/images/sunVillage_info/PPT.png" width="75" v-if="file.type == 'ppt'" />
+            <img src="../../../../assets/images/sunVillage_info/RAR.png" width="75" v-if="file.type == 'zip' || file.type == 'rar'" />
+          </div>
+        </template>
+      </van-uploader>
+      <van-cell value="发票" />
+      <van-uploader v-model="fileList2" v-if="fileList2==null||fileList2.length==0" :deletable="false"  disabled  :upload-text="'未上传附件'" style="margin-left:8px;"></van-uploader>
+      <van-uploader v-model="fileList2" v-if="fileList2!=null&&fileList2.length>0" :deletable="false" @click-preview="previewPreview" :max-count="fileList2.length"  style="margin-left:8px;">
+        <template #preview-cover="file">
+          <div class="preview-cover">
+            <img src="../../../../assets/images/sunVillage_info/WORD.png" width="75" v-if="file.type == 'docx' || file.type == 'doc'"/>
+            <img src="../../../../assets/images/sunVillage_info/ECEL.png" width="75" v-if="file.type == 'xlsx' || file.type == 'xls'" />
+            <img src="../../../../assets/images/sunVillage_info/PDF.png" width="75" v-if="file.type == 'pdf'" />
+            <img src="../../../../assets/images/sunVillage_info/PPT.png" width="75" v-if="file.type == 'ppt'" />
+            <img src="../../../../assets/images/sunVillage_info/RAR.png" width="75" v-if="file.type == 'zip' || file.type == 'rar'" />
+          </div>
+        </template>
+      </van-uploader>
+      <van-cell value="其他" />
+      <van-uploader v-model="fileList3" v-if="fileList3==null||fileList3.length==0" :deletable="false"  disabled  :upload-text="'未上传附件'" style="margin-left:8px;"></van-uploader>
+      <van-uploader v-model="fileList3" v-if="fileList3!=null&&fileList3.length>0" :deletable="false" @click-preview="previewPreview" :max-count="fileList3.length" style="margin-left:8px;" >
+        <template #preview-cover="file">
+          <div class="preview-cover">
+            <img src="../../../../assets/images/sunVillage_info/WORD.png" width="75" v-if="file.type == 'docx' || file.type == 'doc'"/>
+            <img src="../../../../assets/images/sunVillage_info/ECEL.png" width="75" v-if="file.type == 'xlsx' || file.type == 'xls'" />
+            <img src="../../../../assets/images/sunVillage_info/PDF.png" width="75" v-if="file.type == 'pdf'" />
+            <img src="../../../../assets/images/sunVillage_info/PPT.png" width="75" v-if="file.type == 'ppt'" />
+            <img src="../../../../assets/images/sunVillage_info/RAR.png" width="75" v-if="file.type == 'zip' || file.type == 'rar'" />
+          </div>
+        </template>
+      </van-uploader>
+    </div>
+    <div class="main_box"  style="padding: 10px 10px;margin-top: 10px;" v-if="form.auditStatus=='3' && form.paymentState=='1'">
+      <div v-if="form.doubleConfirmationStatus == 'Y'">
+        <div v-if="form.doubleConfirmationUser == '' || form.doubleConfirmationUser == null">
+          <p style="text-align: center">等待领导复核中。。。</p>
+        </div>
+        <div v-else>
+          <p style="text-align: center">{{ form.doubleConfirmationUser +'已于'+form.doubleConfirmationTime +'进行复核。'}}</p>
+        </div>
+      </div>
+      <div v-if="form.doubleConfirmationStatus != 'Y' || !(form.doubleConfirmationUser == '' || form.doubleConfirmationUser == null)">
+        <div v-if="form.bankType == '1' || form.bankType == '2' || form.bankType == '3' || form.bankType == '5' || form.bankType == '9' || form.bankType == '10' || form.bankType == '18'">
+          <van-field label="支付口令" required :rules="[{ required: true , message:'请输入支付口令' }]" v-model="form.accountPassword" placeholder="请输入支付口令" 
+            input-align="right" label-width="auto"/>
+          <div style="margin-top: 10xp;">
+            <van-col span="24" align="center">
+              <van-button type="info" :disabled="paySubmitDisabled1 || form.accountPassword == null || form.accountPassword == undefined || form.accountPassword == ''" 
+              @click="paySubmit">支<i style="margin-right: 1em;"></i>付</van-button>
+            </van-col>
+          </div>
+        </div>
+        <div v-else>
+          <van-field label="验证码" required :rules="[{ required: true , message:'请输入验证码' }]" v-model="form.alternateField1" placeholder="请输入验证码" input-align="right" label-width="auto"/>
+          <template v-if="smsStatus">
+            <p style="color: red;font-size: 14PX;margin-right: 5px;text-align: center">*验证码三分钟内有效</p>
+          </template>
+          <van-row>
+            <van-col span="12" align="center">
+              <van-button type="primary" :disabled="sms_disabled" @click="getSendSms">{{smsText}}</van-button>
+            </van-col>
+            <van-col span="12" align="center">
+              <van-button type="info" v-if="smsStatus" :disabled="paySubmitDisabled || form.alternateField1 == null || form.alternateField1 == undefined || form.alternateField1 == ''" 
+              @click="paySubmit">支<i style="margin-right: 1em;"></i>付</van-button>
+            </van-col>
+          </van-row>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { getCashierAccount,getTransfer ,pay, queryTransferDetail , listPayee , editDoubleConfirmationStatus , getProjectto , sendSms , addProjectto , customSubmit,getInfoto,listTemplate} from "@/api/onlineHome/bankAgriculture/paymentApproval";
+  import request from '@/utils/request'
+  import {
+    attachmentList,
+    commonAttach,
+    systemAttachment
+  } from "../../../../api/onlineHome/bankAgriculture/paymentApproval";
+  export default {
+    name: "approvalDetail",
+    data() {
+      return {
+        clickOut:true,
+        payStatus:false,
+        smsStatus:false,
+        sms_disabled:false,
+        getPayStatus:false,
+        smsText:'发送验证码',
+        paySubmitDisabled:true,
+        paySubmitDisabled1:false,
+
+        showcapital:false,
+        showpayee:false,
+        showlasj:false,
+        showbankType:false,
+        showproject:false,
+        showFundType:false,
+        showbtn:true,
+
+        listLength:1,
+
+        minDate: new Date(),
+        maxDate: new Date(2025, 10, 1),
+        currentDate: new Date(),
+        form:{},
+        fileList1:[],
+        fileList2:[],
+        fileList3:[],
+        capitalExpenditureType:'',
+        payee:'',
+        bankType:'',
+
+        wfydlxDictionaries:[],
+        jglxDictionaries:[],
+        sysDictionaries:[],
+        capitalExpenditureTypeOptions:[],
+        bankTypeDictionaries:[],
+        projectList:[],
+        projectFundTypeOptions:[],
+        transferStatusOptions:[],
+        projectFundTypeDictionaries:[],
+        projectList:[],
+
+        chargeItme:[],
+        chargeItmeShow:[],
+
+        payeeList:[],
+        // 查询参数
+        queryParams: {
+          transferType:"",
+          orderByColumn: "id",
+          isAsc: "desc",
+        },
+        capitalExpenditureOpen:false,
+        contractOpen:false,
+        projectForm:{
+          projectId:null,
+          projectName:null,
+          projectContractor:null,
+          projectAmount:null,
+          projectBillNum:null,
+          projectFundType:'1',
+          outId:null,
+          ynType:'1'
+        },
+        infoForm:{
+          infoId:null,
+          name:null,
+          code:null,
+          totalAmount:null,
+          contractionId:null,
+          transferId:null
+        },
+        projectFundType:'',
+        templateList:[],
+      };
+    },
+    created() {
+      this.getDicts("project_fund_type").then((response) => {
+        for (var i = 0; i < response.data.length; i++) {
+          this.projectFundTypeOptions.push({text: response.data[i].dictLabel, value: response.data[i].dictValue});
+        }
+        this.projectFundTypeDictionaries = response.data;
+      });
+      this.getDicts("transfer_status").then((response) => {
+        this.transferStatusOptions = response.data;
+      });
+      this.getDictionaries();
+      this.getFileList();
+      this.getTemplateList();
+    },
+    methods: {
+      getTemplateList(){
+        let templateQueryParams = {
+          // 分页
+          pageNum: 1,
+          pageSize: 999,
+        };
+        listTemplate(templateQueryParams).then(response => {
+          this.templateList = response.rows;
+        });
+      },
+      paySubmit(){
+        this.diglogStatus = false;
+        this.paySubmitDisabled = true;
+        this.paySubmitDisabled1 = true;
+        const id = this.form.id;
+        this.queryParams.id = id;
+        this.queryParams.alternateField1 = this.form.alternateField1;
+        let queryParams = this.queryParams;
+        var that = this;
+        // that.payLoading = this.$loading({
+        //   lock: true,
+        //   text: '正在支付',
+        //   spinner: 'el-icon-loading',
+        //   background: 'rgba(0, 0, 0, 0.7)'
+        // });
+        pay(queryParams).then((response) => {
+          // that.payLoading.close();
+          this.$toast.success("支付成功,请等待银行进行处理，稍后可通过查询结果按钮查询银行处理结果。");
+          clearTimeout(this.sms_timer);
+          this.open = false;
+          this.smsStatus = false;
+          this.sms_disabled = false;
+          this.smsText = "发送验证码";
+          setTimeout(function(){
+            history.go(-1)
+          },1000)
+        })
+        .catch((err) => {
+          // that.payLoading.close();
+          if(err.toString().indexOf('错误代码：-1') == -1 && err.toString().indexOf('错误代码：-2') == -1){
+            this.getList();
+            clearTimeout(this.sms_timer);
+            this.open = false;
+            this.smsStatus = false;
+            this.sms_disabled = false;
+            this.smsText = "发送验证码";
+          }
+          setTimeout(function(){
+            history.go(-1)
+          },2000)
+        });
+      },
+      getSendSms(){
+        clearTimeout(this.sms_timer);
+        this.form.alternateField1 = '';
+        this.sms_time = 60;
+        this.clickOut = false;
+        this.sms_disabled = true;
+        const id = this.form.id;
+        const bankType = this.form.bankType;
+        this.queryParams.id = id;
+        this.queryParams.bankType = bankType;
+        let queryParams = this.queryParams;
+        sendSms(queryParams).then(res=>{
+          console.log(res.msg)
+          if (res.msg.indexOf('短信发送失败') == -1){
+            this.paySubmitDisabled = false;
+            this.$toast.success(res.msg);
+            this.smsStatus = true;
+            this.smsText = this.sms_time+'s后可重新发送';
+            this.sms_timer = setInterval(()=>{
+              this.sms_time--;
+              this.smsText = this.sms_time+'s后可重新发送';
+              if (this.sms_time == 0){
+                clearInterval(this.sms_timer);
+                this.sms_time = 60 ;
+                this.smsText = '发送验证码';
+                this.sms_disabled = false;
+                this.clickOut = true;
+              }
+            },1000)
+          }else{
+            this.sms_disabled = false;
+            console.log(res.msg)
+            this.$toast.error(res.msg);
+          }
+        });
+      },
+      editDoubleConfirmationStatus(){
+        let id = this.form.id
+        editDoubleConfirmationStatus(id).then(response => {
+          if(res.code = 200){
+            this.$toast.success(response.msg);
+            setTimeout(function(){
+              history.go(0)
+            },2000)
+          }
+        })
+      },
+      tempalteFormat(id){
+        let name = ""
+        this.templateList.map(res => {
+          if(res.id==id){
+            console.log(res.name)
+            name =  res.name
+          }
+        })
+        return name
+      },
+      goFlow(){
+        window.location='approvalProcess?id='+this.$route.query.id+'&auditbatchNo='+this.$route.query.auditbatchNo;
+      },
+      previewPreview(file, index, len) {
+        const baseImgUrl = this.$store.getters.baseRoutingUrl;
+        if (file.url) {
+          //已上传文件
+          let fileName = file.file.name || file.url;
+          let subIndex = fileName.lastIndexOf(".");
+          let ext = fileName.substring(subIndex + 1, fileName.length);
+          let imgi = file.listIndex
+          //console.log(ext)
+          let allUrl = file.url;
+          if(ext  !== 'jpg' && ext  !== 'png' && ext  !== 'gif' && ext  !== 'svg' && ext  !== 'ico' && ext  !== 'bmp'){
+            const link = document.createElement("a");
+            link.style.display = "none";
+            link.target = "_blank"
+            link.href = allUrl;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+          }
+
+        } else {
+          //新上传文件
+          let fileName = file.file.name;
+          // console.info(file.file.name)
+          let subIndex = fileName.lastIndexOf(".");
+          let ext = fileName.substring(subIndex + 1, fileName.length);
+          if(ext  !== 'jpg' && ext  !== 'png' && ext  !== 'gif' && ext  !== 'svg' && ext  !== 'ico' && ext  !== 'bmp'){
+            let type = this.getfileType(ext);
+            // 将文件转换为base64编码
+            this.fileToBase64(file.file, ext).then(res => {
+              this.downloadFile(res, fileName, ext, type);
+            })
+          }
+        }
+      },
+      getfileType(type) {
+        switch (type) {
+          case 'txt':
+            return 'text/plain';
+          case 'doc':
+            return 'application/msword';
+          case 'docx':
+            return 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
+          case 'xls':
+            return 'application/vnd.ms-excel';
+          case 'xlsx':
+            return 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+          case 'pdf':
+            return 'application/pdf';
+          case 'pptx':
+            return 'application/vnd.openxmlformats-officedocument.presentationml.presentation';
+          case 'png':
+            return 'image/png';
+          case 'jpg':
+            return 'image/jpeg';
+          case 'gif':
+            return 'image/gif';
+          case 'svg':
+            return 'image/svg+xml';
+          case 'ico':
+            return 'image/x-icon';
+          case 'bmp':
+            return 'image/bmp,';
+        }
+      },
+      downloadFile(base64, fileName, fileType, mimetype) {
+        const typeHeader = 'data:application/' + fileType + ';base64,';
+        const blob = this.base64ToBlob(base64, mimetype);
+        this.downloadFileDownload(blob, fileName, fileType);
+      },
+      base64ToBlob(base64, mime) {
+        //解码base64得到二进制字符串
+
+        let raw = window.atob(base64.substring(base64.indexOf(',') + 1));
+        let rawLength = raw.length
+        //创建8位无符号整数值的类型化数组
+        let uInt8Array = new Uint8Array(rawLength)
+        for (let i = 0; i < rawLength; ++i) {
+          uInt8Array[i] = raw.charCodeAt(i);
+        }
+        return new Blob([uInt8Array], {type: mime})
+      },
+      downloadFileDownload(blob, fileName, fileType) {
+        const downloadElement = document.createElement('a');
+        let href = blob;
+        if (typeof blob === 'string') {
+          downloadElement.target = '_blank'
+        } else {
+          href = window.URL.createObjectURL(blob)
+        }
+        downloadElement.href = href;
+        downloadElement.download = fileName + '.' + fileType;//下载后文件名
+        document.body.appendChild(downloadElement);
+        downloadElement.click();
+        document.body.removeChild(downloadElement)
+        if (typeof blob !== 'string') {
+          window.URL.revokeObjectURL(href)
+        }
+      },
+      fileToBase64(file,fileType){
+        return new Promise((resolve,reject)=>{
+          //创建一个新的FileReader 对象
+          const reader = new FileReader();
+          //读取file对象
+          reader.readAsDataURL(file);
+          reader.onload=function () {
+            const base64String =  reader.result.split(",")[1];
+            resolve('data:application/' + fileType + ';base64,'+base64String);
+          }
+          reader.onerror=function () {
+            reject(new Error("Failed to load file") )
+          }
+        })
+      },
+      getDictionaries(){
+        getTransfer(this.$route.query.id).then((response) => {
+          getCashierAccount(response.data.cashierId).then(res => {
+            this.form.balance = res.data.balance
+          })
+          this.getDicts("capital_expenditure_type").then((res) => {
+            for (var i = 0; i < res.data.length; i++) {
+              this.capitalExpenditureTypeOptions.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
+            }
+            this.capitalExpenditureType = this.selectDictLabel(res.data, response.data.capitalExpenditureType);
+          });
+          if(response.data.capitalExpenditureType==2){
+            this.capitalExpenditureOpen = true
+            let param={
+              'outId' : response.data.id,
+              'ynType' : '1'
+            }
+            getProjectto(param).then(res => {
+              this.projectFundType = this.selectDictLabel(this.projectFundTypeDictionaries, res.data.projectFundType);
+              this.projectForm = res.data
+            })
+          }else if(response.data.capitalExpenditureType==4) {
+            this.contractOpen = true
+            let param = {
+              'transferId': response.data.id
+            }
+            getInfoto(param).then(res => {
+              this.infoForm = res.data
+            })
+          }else{
+            this.showproject = false
+          }
+          this.form = response.data;
+        });
+        queryTransferDetail(this.$route.query.id).then((response) => {
+          this.getDicts("bank_type_all").then(res => {
+            for (var i = 0; i < res.data.length; i++) {
+              this.bankTypeDictionaries.push({text: res.data[i].dictLabel, value: res.data[i].dictValue});
+            }
+            for (var j = 0 ; j < response.rows.length ; j++){
+              response.rows[j].bankTypeText = this.selectDictLabel(res.data, response.rows[j].bankType);
+              response.rows[j].transferStatus = this.selectDictLabel(this.transferStatusOptions, response.rows[j].transferStatus);
+            }
+            this.chargeItme = response.rows;
+          });
+          this.getPayeeList();
+        });
+      },
+      getPayeeList() {
+        //普通转账
+        this.queryParams.accountType = this.form.accountType
+        this.queryParams.status = "0"
+        listPayee(this.queryParams).then((response) => {
+          for (var i = 0; i < response.rows.length; i++) {
+            this.payeeList.push({text: response.rows[i].payee, value: response.rows[i].id});
+          }
+        });
+      },
+      getFileList(){
+        let oData1= {
+          tableId: this.$route.query.id,
+          tableName: "t_yinnong_transfer",
+          bizPath: "transfer",
+          fileType: "1",
+        }
+        attachmentList(oData1).then(res => {
+          res.rows.map(r => {
+            let baseUrl = location.protocol+"//"+location.host+request.defaults.baseURL
+            let subIndex = r.fileName.lastIndexOf(".");
+            let ext =  r.fileName.substring(subIndex + 1, r.fileName.length);
+            this.fileList1.push({"url": baseUrl + r.fileUrl, "file": new File([], r.fileName, {}), "id": r.id,"type":ext})
+          })
+        })
+        let oData2= {
+          tableId: this.$route.query.id,
+          tableName: "t_yinnong_transfer",
+          bizPath: "transfer",
+          fileType: "2",
+        }
+        attachmentList(oData2).then(res => {
+          res.rows.map(r => {
+            let baseUrl = location.protocol+"//"+location.host+request.defaults.baseURL
+            let subIndex = r.fileName.lastIndexOf(".");
+            let ext =  r.fileName.substring(subIndex + 1, r.fileName.length);
+            this.fileList2.push({"url": baseUrl + r.fileUrl, "file": new File([], r.fileName, {}), "id": r.id,"type":ext})
+          })
+        })
+        let oData3= {
+          tableId: this.$route.query.id,
+          tableName: "t_yinnong_transfer",
+          bizPath: "transfer",
+          fileType: "3",
+        }
+        attachmentList(oData3).then(res => {
+          res.rows.map(r => {
+            let baseUrl = location.protocol+"//"+location.host+request.defaults.baseURL
+            let subIndex = r.fileName.lastIndexOf(".");
+            let ext =  r.fileName.substring(subIndex + 1, r.fileName.length);
+            this.fileList3.push({"url": baseUrl + r.fileUrl, "file": new File([], r.fileName, {}), "id": r.id,"type":ext})
+          })
+        })
+      },
+      goBack(){
+        window.history.go(-1)
+      },
+      //删除家庭成员
+      deleteChargeItme(index){
+        this.chargeItme.splice(index,1)
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+  .app-container {
+    padding: 2% 0;
+  }
+  /deep/ .van-nav-bar{
+    background: linear-gradient(to right , #9EF7FF , #2637D8);
+    p,i{
+      color: #ffffff;
+    }
+  }
+  .main_more{
+    width: 96%;
+    margin: 0 auto;
+    margin-top: 10px;
+    border-radius: 6px;
+    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
+    overflow: hidden;
+    background-color: #FFF;
+    text-align: center;
+    padding: 10PX 0;
+  }
+  .main_title{
+    font-size: 0.45rem;
+    color: #333333;
+    margin: 0.4rem 3% 0.2rem;
+    position: relative;
+    display: flex;
+    align-items: center;
+    i{
+      display: block;
+      width: 3PX;
+      height: 0.4rem;
+      background-color: #4B72E4;
+      margin-right: 10PX;
+    }
+  }
+  .main_box{
+    width: 96%;
+    margin: 0 auto;
+    border-radius: 6px;
+    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
+    overflow: hidden;
+    background-color: #FFF;
+  }
+  .submitButton{
+    width: 80%;
+    margin: 0 auto;
+    background-color: #1D6FE9;
+  }
+
+  .addFamily{
+    position: absolute;
+    top: -2px;
+    right: 0;
+    border-radius: 50%;
+  }
+  .deleteFamily{
+    position: absolute;
+    top: 0rem;
+    right: 6%;
+    z-index: 9;
+    border-radius: 50%;
+  }
+</style>

src/views/sunVillage_info/bankAgriculture/paymentPending/approvalList.vue

@@ -0,0 +1,313 @@
+<template>
+    <div class="app-container">
+      <van-nav-bar
+        left-arrow
+        fixed
+        placeholder
+        @click-left="onClickLeft"
+      >
+        <template #title>
+          <p style="font-weight: bold;">银行卡转账待支付列表</p>
+        </template>
+        <!-- <template #right>
+          <van-icon name="add-o" size="25" v-show="showBtn"/>
+        </template> -->
+      </van-nav-bar>
+
+<!--      <div class="header_main">-->
+<!--        银行卡转账申请列表-->
+<!--        <div class="return_btn" @click="onClickLeft"></div>-->
+<!--&lt;!&ndash;        <div class="add_btn" @click="goAdd" v-show="showBtn"></div>&ndash;&gt;-->
+<!--        <van-icon class="add_btn" name="add-o" size="25" @click="goAdd" v-show="showBtn" />-->
+<!--      </div>-->
+
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="getList">
+        <van-swipe-cell v-for="(item,index) in applicationList" :key="index">
+          <van-cell :title="item.remark" center :to="{name:'sunVillagePaymentPendingApprovalDetail', query: {id:item.id,auditbatchNo:item.auditbatchNo}}">
+            <template #icon>
+              <van-icon name="../../../../static/images/sunVillage_info/icon_yn1.png" size="30" color="#FF4646" style="margin-right: 10px;" />
+            </template>
+            <template #label>
+              <p><span><i>￥</i>{{stateFormat(item.expenditureAmount)}}</span><i style="margin-right: 30px;"></i>{{item.applyDate}}</p>
+            </template>
+            <template #default>
+              <span v-if="item.paymentState === '1'" style="color: #696969">{{ selectDictLabel(paymentStateOptions, item.paymentState)}} </span>
+              <span v-else-if="item.paymentState === '2' " style="color: #909399">{{ selectDictLabel(paymentStateOptions, item.paymentState)}} </span>
+              <span v-else-if="item.paymentState === '3' " style="color: #409eff">{{ selectDictLabel(paymentStateOptions, item.paymentState)}} </span>
+              <span v-else-if="item.paymentState === '4' " style="color: #f56c6c">{{ selectDictLabel(paymentStateOptions, item.paymentState)}} </span>
+              <span v-else-if="item.paymentState === '5' " style="color: #e6a23c">{{ selectDictLabel(paymentStateOptions, item.paymentState)}} </span>
+              <span  v-else style="color: #67c23a;">{{ selectDictLabel(paymentStateOptions, item.paymentState) }} </span>
+            </template>
+          </van-cell>
+          <template #right>
+            <van-row>
+              <van-col>
+                <van-button v-if="item.paymentState == '3'" square text="核实结果" type="info" @click="transactionStatusQuery(item.id)" class="delete-button" />
+              </van-col>
+              <van-col>
+                <van-button v-if="item.doubleConfirmationStatus == 'Y' && (item.doubleConfirmationUser == '' || item.doubleConfirmationUser == null) && item.paymentState == '1'" 
+                square text="复核" type="info" @click="editDoubleConfirmationStatus(item.id)" class="delete-button" />
+              </van-col>
+              <van-col>
+                <van-button v-if="item.paymentState == '4' || item.paymentState == '5'" square text="重新申请"  color="#FFA63E" type="info" @click="reapply(item.id)" class="delete-button" />
+              </van-col>
+              <van-col>
+                <van-button v-if="item.paymentState == '1'" square text="取消支付" type="danger" @click="reapplyDraft(item.id)" class="delete-button" />
+              </van-col>
+            </van-row>
+          </template>
+        </van-swipe-cell>
+      </van-list>
+    </div>
+</template>
+
+<script>
+import { payList,transactionStatusQuery,editDoubleConfirmationStatus,payRecordList,resetTYinnongTransfer,reapply,reapplyDraft } from "@/api/onlineHome/bankAgriculture/paymentApproval";
+export default {
+  name: "approvalList",
+  data() {
+    return {
+      applicationList:[],
+      auditStatusOptions:[],
+      paymentStateOptions:[],
+      loading: false,
+      finished: false,
+      queryParams:{
+        pageNum:1,
+        pageSize:10,
+        transferType:"1",
+      },
+      form:{},
+      showBtn:true,
+    };
+  },
+  created() {
+    this.getDicts("payment_state").then((response) => {
+      this.paymentStateOptions = response.data;
+    });
+    if (this.$route.query.type == 'code'){
+      this.showBtn = false;
+    }
+  },
+  methods: {
+    //金额千分符 会在整数后添加两个0
+    stateFormat(cellValue) {
+      if (cellValue) {
+        return Number(cellValue)
+          .toFixed(2)
+          .replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => {
+            return $1 + ",";
+          })
+          .replace(/\.$/, "") + "元";
+      }
+    },
+    goAdd(){
+      window.location = 'approvalAdd';
+    },
+    getList(){
+      setTimeout(() => {
+        payList(this.queryParams).then(response => {
+          console.log(response)
+          for (var i = 0; i <response.rows.length; i++) {
+            if(response.rows[i].remark.length > 12){
+              response.rows[i].remark = response.rows[i].remark.substring(0,12)+"...";
+            }
+            this.applicationList.push(response.rows[i]);
+          }
+          console.log(this.applicationList.length >= response.total)
+          if(this.applicationList.length >= response.total){
+            this.finished = true;
+            return;
+          }else{
+            this.loading = false;
+            this.queryParams.pageNum += 1 ;
+          }
+        });
+      }, 1000);
+    },
+    transactionStatusQuery(id){
+      this.$dialog.confirm({
+        message: '是否确认查询【' + id + '】号单据的转账结果?',
+      })
+      .then(() => {
+        transactionStatusQuery(id).then(res => {
+          if(res.code = 200){
+            this.$toast.success(res.msg);
+            setTimeout(function(){
+              history.go(0)
+            },2000)
+          }
+        });
+      })
+      .catch(() => {
+        // on cancel
+      });
+    },
+    editDoubleConfirmationStatus(id){
+      this.$dialog.confirm({
+        message: '是否确认复核【' + id + '】号单据?',
+      })
+      .then(() => {
+        editDoubleConfirmationStatus(id).then(res => {
+          if(res.code = 200){
+            this.$toast.success('复核成功！');
+            setTimeout(function(){
+              history.go(0)
+            },2000)
+          }
+        });
+      })
+      .catch(() => {
+        // on cancel
+      });
+    },
+    resetTYinnongTransfer(id){
+      this.$dialog.confirm({
+        message: '是否确认重置【' + id + '】号单据?<br>重置后申请单需要重新审批，请谨慎操作！',
+      })
+      .then(() => {
+        resetTYinnongTransfer(id).then(res => {
+          if(res.code = 200){
+            this.$toast.success('重置成功！');
+            setTimeout(function(){
+              history.go(0)
+            },2000)
+          }
+        });
+      })
+      .catch(() => {
+        // on cancel
+      });
+    },
+    reapply(id){
+      this.$dialog.confirm({
+        message: '此操作会将【' + id + '】号单据<br>中支付失败的记录重新申请，<br>请先确保收款账户已修改准确，<br>再执行此操作！',
+      })
+      .then(() => {
+        reapply(id).then(res => {
+          if(res.code = 200){
+            this.$toast.success('重新申请成功！');
+            setTimeout(function(){
+              history.go(0)
+            },2000)
+          }
+        });
+      })
+      .catch(() => {
+        // on cancel
+      });
+    },
+    reapplyDraft(id){
+      this.$dialog.confirm({
+        message: '此操作会将【' + id + '】号单据<br/>的审批状态置为草稿，请谨慎操作！',
+      })
+      .then(() => {
+        reapplyDraft(id).then(res => {
+          if(res.code = 200){
+            this.$toast.success('取消成功！');
+            setTimeout(function(){
+              history.go(0)
+            },2000)
+          }
+        });
+      })
+      .catch(() => {
+        // on cancel
+      });
+    },
+    goBack(){
+      this.$router.push({path:'/sunVillage_info/index'})
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+  /deep/ .van-nav-bar{
+    background: linear-gradient(to right , #9EF7FF , #2637D8);
+    p,i{
+      color: #ffffff;
+    }
+  }
+  .app-container {
+    .header_main{
+      height: 116px;
+      /*background: url('../../../../assets/images/sunVillage_info/list_head.png') no-repeat;*/
+      background: linear-gradient(to right , #9EF7FF , #2637D8);
+      background-size: 100% 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      font-size: 36px;
+      line-height: 116px;
+      text-align: center;
+      color: #fff;
+      position: relative;
+      .return_btn{
+        width: 24px;
+        height: 43.2px;
+        background: url('../../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
+        background-size: 20px 36px;
+        position: absolute;
+        left: 38px;
+        top: 36px;
+      }
+      .add_btn{
+        /*width: 56.4px;*/
+        /*height: 40.8px;*/
+        /*background: url('../../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;*/
+        /*background-size: 47px 34px;*/
+        position: absolute;
+        right: 38px;
+        top: 36px;
+      }
+    }
+  }
+  /deep/.van-list{
+    padding: 0.2rem 3%;
+  }
+  /deep/.van-cell__title{
+    flex: 0.7;
+  }
+  /deep/.van-cell__title span{
+    font-family: Arial;
+    font-size: 0.4rem;
+    font-weight: normal;
+
+  }
+  /deep/.van-cell__label span{
+    color: #FF0000;
+    font-weight: bold;
+    i{
+      font-size: 0.2rem;
+    }
+  }
+  /deep/.van-cell__value{
+    flex: 0.3;
+    color: #1D6FE9;
+    font-weight: bold;
+  }
+  /deep/.van-swipe-cell{
+    margin-bottom: 0.2rem;
+    border-radius: 0.2rem;
+    overflow: hidden;
+    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
+  }
+  /deep/van-ellipsis{
+    font-weight: bold;
+  }
+  .van-row{
+    height: 100%;
+  }
+  .van-col{
+    height: 100%;
+  }
+  .delete-button {
+    height: 100%;
+  }
+</style>

src/views/sunVillage_info/bankAgriculture/paymentPending/approvalProcess.vue

@@ -0,0 +1,267 @@
+<template>
+    <div class="app-container">
+      <van-nav-bar
+        left-arrow
+        fixed
+        placeholder
+        @click-left="$router.back(-1)"
+      >
+        <template #title>
+          <p style="font-weight: bold;">付款申请流程</p>
+        </template>
+      </van-nav-bar>
+      <div class="main_box">
+        <van-row v-for="(item,index) in processList" :key="index">
+          <van-divider content-position="center"><h4>批次号：{{index}}</h4></van-divider>
+          <div>
+          <van-row class="row1" type="flex" align="center" v-for="(item1,index,i) in item" :key="i">
+            <van-col span="4">
+              <i></i>
+<!--              <p class="icon_jian" v-show="item1.auditStatus=='1'"><van-icon name="minus" size="14" /></p>-->
+<!--              <p class="icon_jian blue" v-show="item1.auditStatus=='3'"><van-icon name="success" size="14" /></p>-->
+<!--              <p class="icon_jian red" v-show="item1.auditStatus=='2'"><van-icon name="cross" size="14" /></p>-->
+              <p class="icon_jian" v-show="item1.auditStatus=='1'"></p>
+              <p class="icon_jian blue" v-show="item1.auditStatus=='3'"></p>
+              <p class="icon_jian red" v-show="item1.auditStatus=='2'"></p>
+              <i></i>
+            </van-col>
+            <van-col span="20">
+              <div class="right_main">
+              <van-row>
+                <van-col span="8" style="padding: 0;">
+                  <p v-show="item1.auditStatus == '1'">{{item1.actorName}}</p>
+                  <p v-show="item1.auditStatus == '3'" class="textBlue">{{item1.actorName}}</p>
+                  <p v-show="item1.auditStatus == '2'" class="textRed">{{item1.actorName}}</p>
+                </van-col>
+                <van-col span="16" style="padding: 0;text-align: right;" >
+                  <p v-show="item1.auditStatus == '1'">{{item1.auditTime}}</p>
+                  <p v-show="item1.auditStatus == '3'" class="textBlue">{{item1.auditTime}}</p>
+                  <p v-show="item1.auditStatus == '2'" class="textRed">{{item1.auditTime}}</p>
+                </van-col>
+              </van-row>
+              <van-row>
+                <van-col span="12" style="padding: 0;" >
+                  <p v-show="item1.auditStatus == '1'">{{item1.auditBy}}</p>
+                  <p v-show="item1.auditStatus == '3'" class="textBlue">{{item1.auditBy}}</p>
+                  <p v-show="item1.auditStatus == '2'" class="textRed">{{item1.auditBy}}</p>
+                </van-col>
+                <van-col span="12" style="padding: 0;text-align: right;">
+                  <p v-show="item1.auditStatus == '1'">{{item1.auditRemark}}</p>
+                  <p v-show="item1.auditStatus == '3'" class="textBlue">{{item1.auditRemark}}</p>
+                  <p v-show="item1.auditStatus == '2'" class="textRed">{{item1.auditRemark}}</p>
+                </van-col>
+              </van-row>
+              </div>
+            </van-col>
+          </van-row>
+          </div>
+        </van-row>
+        <van-divider content-position="center" v-if="approvalTemplateDetailList.length>0"><h4>审批流程</h4></van-divider>
+        <div>
+        <van-row class="row2" type="flex" align="center" v-if="approvalTemplateDetailList.length>0" v-for="(item1,index,i) in approvalTemplateDetailList" :key="i">
+          <van-col span="4" align="right">
+            <i></i>
+            <p class="icon_jian" ></p>
+            <i></i>
+          </van-col>
+          <van-col span="20">
+            <div class="right_main">
+            <van-row>
+              <van-col span="12" style="padding: 0;">
+                <p>{{item1.name}}</p>
+              </van-col>
+              <van-col span="12" style="padding: 0;text-align: right;">
+                <p v-show="item1.approvalLevel == 1">组级审批</p>
+                <p v-show="item1.approvalLevel == 2">村级审批</p>
+                <p v-show="item1.approvalLevel == 3">镇级审批</p>
+                <p v-show="item1.approvalLevel == 4">区县审批</p>
+              </van-col>
+            </van-row>
+            <van-row>
+              <van-col span="24" style="padding: 0;">
+                <p>{{item1.nickName}}<span v-if="item1.feeLimit != 0 && item1.nickName != null">({{item1.feeLimit}}元)</span></p>
+              </van-col>
+            </van-row>
+            </div>
+          </van-col>
+        </van-row>
+        </div>
+      </div>
+    </div>
+</template>
+
+<script>
+import {
+  getTransferProcess,
+  getTransfer,
+  getProjectto,
+  queryTransferDetail,
+  selectApprovalByTemplateId
+} from "@/api/onlineHome/bankAgriculture/paymentApproval";
+export default {
+  name: "approvalProcess",
+  data() {
+    return {
+      processList:{},
+      form:{},
+      approvalTemplateDeptList:[],
+      approvalTemplateDetailList:[]
+    };
+  },
+  created() {
+    this.handleUpdate(this.$route.query.id);
+  },
+  methods: {
+    //查询审批进程
+    getTransferProcess(id){
+      getTransferProcess(id).then(res => {
+        this.processList = res.data
+        console.info( this.processList);
+      })
+    },
+    handleUpdate(id) {
+      getTransfer(id).then((response) => {
+        this.form = response.data;
+        this.processList = {}
+        if(this.form.auditStatus != 0){
+          this.getTransferProcess(id);
+        }
+        if(this.form.approvalMode == 1){
+          selectApprovalByTemplateId(this.form.approvalTemplateId).then(rs => {
+            this.approvalTemplateDeptList = rs.approvalDepts;
+            this.approvalTemplateDetailList = rs.approvalDetails;
+            console.log("this.approvalTemplateDetailList:"+this.approvalTemplateDetailList);
+            if(this.form.approveLevel === "1"){
+              this.approvalTemplateDetailList.push({"approvalLevel":"3"});
+            }else if(this.form.approveLevel === "2"){
+              this.approvalTemplateDetailList.push({"approvalLevel":"4"});
+            }
+          })
+        }
+        if(this.form.capitalExpenditureType==2){
+          this.capitalExpenditureOpen = true
+          let param={
+            'outId' : this.form.id,
+            'ynType' : '1'
+          }
+          getProjectto(param).then(res => {
+            this.projectForm = res.data
+            this.projectForm.projectFundType+=""
+            queryTransferDetail(id).then((r) => {
+              this.chargeItme = r.rows;
+              this.length = this.chargeItme.length;
+              this.detailTotal = r.total;
+              this.loading = false;
+            });
+          })
+        }else{
+          this.capitalExpenditureOpen = false
+          queryTransferDetail(id).then((r) => {
+            this.chargeItme = r.rows;
+            this.length = this.chargeItme.length;
+            this.detailTotal = r.total;
+            this.loading = false;
+          });
+        }
+
+      });
+
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+  .app-container {
+    padding: 0.2rem 0;
+  }
+  /deep/ .van-nav-bar{
+    background: linear-gradient(to right , #9EF7FF , #2637D8);
+    p,i{
+      color: #ffffff;
+    }
+  }
+  .main_box{
+    width: 96%;
+    margin: 0 auto;
+    border-radius: 6px;
+    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
+    overflow: hidden;
+    background-color: #FFF;
+    padding: 20Px 0;
+  }
+  .icon_jian{
+    border: 3PX solid #2638D8;
+    display: inline-block;
+    width: 20Px;
+    height: 20Px;
+    border-radius: 50%;
+    color: #FFF;
+  }
+  .blue{
+    border-color: #2638D8;
+  }
+  .red{
+    border-color: rgb(245, 108, 108);
+  }
+  .textBlue{
+    color: #1D6FE9!important;
+  }
+  .textRed{
+    color: rgb(245, 108, 108)!important;
+  }
+  .van-col{
+    padding: 0Px 10Px;
+  }
+  .van-col--20{
+    padding: 10Px 20Px 10Px 0;
+  }
+  .van-col:nth-child(2){
+    font-size: 16Px;
+    color: #878787;
+    line-height: 22Px;
+  }
+  .van-col--4{
+    height: 94PX;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    /*justify-content: right;*/
+    i{
+      display: block;
+      height: 37PX;
+      border-right: 2PX dashed #929BEB;
+    }
+  }
+  .van-row{
+
+    .van-row{
+      .van-col{
+        /*padding: 5Px 0 0 0!important;*/
+        color: #878787;
+      }
+    }
+  }
+  .row1,.row2{
+    &:first-child{
+      .van-col--4{
+        i:first-child{
+          border-color: transparent;
+        }
+      }
+    }
+
+    &:last-child{
+      .van-col--4{
+        i:last-child{
+          border-color: transparent;
+        }
+      }
+    }
+  }
+  .right_main{
+    background-color: #F2F5FE;
+    padding: 10PX;
+    border-radius: 10PX;
+  }
+</style>

src/views/sunVillage_info/bankAgriculture/paymentPending/payRecordList.vue

@@ -0,0 +1,204 @@
+<template>
+    <div class="app-container">
+      <van-nav-bar
+        left-arrow
+        fixed
+        placeholder
+        @click-left="onClickLeft"
+      >
+        <template #title>
+          <p style="font-weight: bold;">银行卡转账待支付列表</p>
+        </template>
+        <!-- <template #right>
+          <van-icon name="add-o" size="25" v-show="showBtn"/>
+        </template> -->
+      </van-nav-bar>
+
+<!--      <div class="header_main">-->
+<!--        银行卡转账申请列表-->
+<!--        <div class="return_btn" @click="onClickLeft"></div>-->
+<!--&lt;!&ndash;        <div class="add_btn" @click="goAdd" v-show="showBtn"></div>&ndash;&gt;-->
+<!--        <van-icon class="add_btn" name="add-o" size="25" @click="goAdd" v-show="showBtn" />-->
+<!--      </div>-->
+
+      <van-list
+        v-model="loading"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="getList">
+        <van-swipe-cell v-for="(item,index) in applicationList" :key="index">
+          <van-cell :title="item.remark" center :to="{name:'sunVillagePaymentPendingApprovalDetail', query: {id:item.id,auditbatchNo:item.auditbatchNo}}">
+            <template #icon>
+              <van-icon name="../../../../static/images/sunVillage_info/icon_yn1.png" size="30" color="#FF4646" style="margin-right: 10px;" />
+            </template>
+            <template #label>
+              <p><span><i>￥</i>{{stateFormat(item.expenditureAmount)}}</span><i style="margin-right: 30px;"></i>{{item.applyDate}}</p>
+            </template>
+            <template #default>
+              <span v-if="item.paymentState === '4' && item.downId != null" style="color: #409EFF">{{ selectDictLabel(paymentStateOptions, item.paymentState)}} <br>(已申请)</span>
+              <span v-else-if="item.paymentState === '5' && item.downId != null" style="color: #E6A23C">{{ selectDictLabel(paymentStateOptions, item.paymentState)}} <br>(已申请)</span>
+              <span v-else-if="item.paymentState != '6' && item.downId === null" style="color: #F56C6C">{{ selectDictLabel(paymentStateOptions, item.paymentState)}} <br>(待申请)</span>
+              <span v-else-if="item.paymentState === '6'" style="color: #67C23A">{{ selectDictLabel(paymentStateOptions, item.paymentState) }} </span>
+            </template>
+          </van-cell>
+        </van-swipe-cell>
+      </van-list>
+    </div>
+</template>
+
+<script>
+import { payRecordList} from "@/api/onlineHome/bankAgriculture/paymentApproval";
+export default {
+  name: "approvalList",
+  data() {
+    return {
+      applicationList:[],
+      auditStatusOptions:[],
+      paymentStateOptions:[],
+      loading: false,
+      finished: false,
+      queryParams:{
+        pageNum:1,
+        pageSize:10,
+        transferType:"1",
+      },
+      form:{},
+      showBtn:true,
+    };
+  },
+  created() {
+    this.getDicts("payment_state").then((response) => {
+      this.paymentStateOptions = response.data;
+    });
+    if (this.$route.query.type == 'code'){
+      this.showBtn = false;
+    }
+  },
+  methods: {
+    //金额千分符 会在整数后添加两个0
+    stateFormat(cellValue) {
+      if (cellValue) {
+        return Number(cellValue)
+          .toFixed(2)
+          .replace(/(\d)(?=(\d{3})+\.)/g, ($0, $1) => {
+            return $1 + ",";
+          })
+          .replace(/\.$/, "") + "元";
+      }
+    },
+    goAdd(){
+      window.location = 'approvalAdd';
+    },
+    getList(){
+      setTimeout(() => {
+        payRecordList(this.queryParams).then(response => {
+          console.log(response)
+          for (var i = 0; i <response.rows.length; i++) {
+            if(response.rows[i].remark.length > 12){
+              response.rows[i].remark = response.rows[i].remark.substring(0,12)+"...";
+            }
+            this.applicationList.push(response.rows[i]);
+          }
+          console.log(this.applicationList.length >= response.total)
+          if(this.applicationList.length >= response.total){
+            this.finished = true;
+            return;
+          }else{
+            this.loading = false;
+            this.queryParams.pageNum += 1 ;
+          }
+        });
+      }, 1000);
+    },
+    goBack(){
+      this.$router.push({path:'/sunVillage_info/index'})
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+  /deep/ .van-nav-bar{
+    background: linear-gradient(to right , #9EF7FF , #2637D8);
+    p,i{
+      color: #ffffff;
+    }
+  }
+  .app-container {
+    .header_main{
+      height: 116px;
+      /*background: url('../../../../assets/images/sunVillage_info/list_head.png') no-repeat;*/
+      background: linear-gradient(to right , #9EF7FF , #2637D8);
+      background-size: 100% 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      font-size: 36px;
+      line-height: 116px;
+      text-align: center;
+      color: #fff;
+      position: relative;
+      .return_btn{
+        width: 24px;
+        height: 43.2px;
+        background: url('../../../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
+        background-size: 20px 36px;
+        position: absolute;
+        left: 38px;
+        top: 36px;
+      }
+      .add_btn{
+        /*width: 56.4px;*/
+        /*height: 40.8px;*/
+        /*background: url('../../../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;*/
+        /*background-size: 47px 34px;*/
+        position: absolute;
+        right: 38px;
+        top: 36px;
+      }
+    }
+  }
+  /deep/.van-list{
+    padding: 0.2rem 3%;
+  }
+  /deep/.van-cell__title{
+    flex: 0.7;
+  }
+  /deep/.van-cell__title span{
+    font-family: Arial;
+    font-size: 0.4rem;
+    font-weight: normal;
+
+  }
+  /deep/.van-cell__label span{
+    color: #FF0000;
+    font-weight: bold;
+    i{
+      font-size: 0.2rem;
+    }
+  }
+  /deep/.van-cell__value{
+    flex: 0.3;
+    color: #1D6FE9;
+    font-weight: bold;
+  }
+  /deep/.van-swipe-cell{
+    margin-bottom: 0.2rem;
+    border-radius: 0.2rem;
+    overflow: hidden;
+    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
+  }
+  /deep/van-ellipsis{
+    font-weight: bold;
+  }
+  .van-row{
+    height: 100%;
+  }
+  .van-col{
+    height: 100%;
+  }
+  .delete-button {
+    height: 100%;
+  }
+</style>