v-for的使用，有默认传参的函数额外传自定义参数

男娘i 2022-08-28 05:39 3阅读 0赞

**1.有1个默认参数**

@click = "handle($event, index)"  //用$event 承载默认参数，被触发函数如下，正常接参：
    handle( event, index ){  }

**2.有多个默认参数：**

@click = "((param1,param2)=>{handle(param1,param2,index)})" //利用闭包，被触发函数如下，正常接参：
    handle( event1,event2, index ){   }

<template>
    <div class="app" >
      <van-nav-bar
      class="nav"
      title="代客申请贷款"
      fixed
      />
      
      <div class="con">
        <van-overlay v-if="load" :show="show" @click="show = false">
          <div class="wrapper" @click.stop>
            <van-loading type="spinner"  color="#1989fa" size="48" />
          </div>
        </van-overlay>
        
        <div>
        <span class="tit">贷款信息</span>
        <van-cell-group>
          <van-field required input-align='right' style="padding-right:60px"   v-model="postData.applyAmt" label="申请金额" placeholder="请输入申请金额 " />
          <van-text  type="text" style="position: relative;top:-2rem; margin-left:86vw;color:#ccc;font-size:14px ">万元</van-text>
          <van-field readonly="true" required input-align='right' is-link @click="showhk" placeholder="请选择还款方式" label="还款方式" :value="hkhk"></van-field>
          <van-popup v-model="hk" position="bottom" :style="{ height: '50%' }">
            <van-picker show-toolbar title="" :columns="huankuan" @cancel="hk = false" @confirm="onhk" @change="onChhk"  :default-index="0" />
          </van-popup>
          <van-field readonly="true" required input-align='right' v-if="postData.repayType>0"  is-link @click="showqx" placeholder="请选择贷款期限" label="贷款期限" :value="qxqx"></van-field>
          <van-popup v-model="qx" position="bottom" :style="{ height: '50%' }">
            <van-picker show-toolbar title="" :columns="qixian" @cancel="qx = false" @confirm="onqx" @change="onChqx"  :default-index="0" />
          </van-popup>
          <van-field readonly="true" required input-align='right' is-link @click="showjy" placeholder="请选择贷款用途" label="贷款用途" :value="jyjy"></van-field>
          <van-popup v-model="jy" position="bottom" :style="{ height: '50%' }">
            <van-picker show-toolbar title="" :columns="jingying" @cancel="jy = false" @confirm="onjy" @change="onChjy"  :default-index="0" />
          </van-popup>
        </van-cell-group>
        <div class="for" v-for="(item,i) in arr" :key="i">
          <span class="tit">抵押物（房产）信息<span v-if="item.id!=0">{ { i+1}}</span></span>
          <span class="add" @click="adddd" v-if="item.id==0"><van-icon name="add" class="iconadd" />增加抵押物</span>
          <span class="add red" @click="del(item.id)" v-if="item.id!=0"><van-icon name="clear" class="iconadd " />删除抵押物</span>
          <van-cell-group>
            <van-field readonly="true" required input-align='right' is-link @click="showciti(item.id)"  placeholder="请选择抵押物地址" label="抵押物地址" :value="item.citiciti"></van-field>
            <van-popup v-model="item.citi" position="bottom" :style="{ height: '50%' }">
              <van-area title="选择地区" :area-list="areaList" value="110101" :columns-placeholder="['请选择', '请选择', '请选择']"   :columns-num="3"  @cancel="item.citi = false" @confirm="onciti($event,item.id)" @change="onChciti"/>
            </van-popup>
            <van-field required input-align='right' v-model="item.houseAdress" label="详细地址" placeholder="填写房产证的详细地址、具体至门牌号" />
            <van-field readonly="true" required input-align='right' is-link @click="showdy(item.id)" placeholder="请选择抵押类型" label="抵押类型" :value="item.dydy"></van-field>
            <van-popup v-model="item.dy" position="bottom" :style="{ height: '50%' }">
              <van-picker show-toolbar title="" :columns="diya" @cancel="item.dy = false" @confirm="ondy($event,$event,item.id)" @change="onChdy"  :default-index="0" />
            </van-popup>
            <van-field required input-align='right' style="padding-right:60px"  v-if="item.dydyindex=='二抵'||item.dydyindex=='三抵'"  v-model="item.mortgageOne" label="一抵贷款余额" placeholder="请输入一抵贷款余额" />
            <van-text v-if="item.dydyindex=='二抵'||item.dydyindex=='三抵'" type="text" style="position: relative;top:-2rem; margin-left:88vw;color:#ccc;font-size:14px ">元</van-text>
            <van-field required input-align='right' style="padding-right:60px"  v-if="item.dydyindex=='三抵'"  v-model="item.mortgageTwo" label="二抵贷款余额" placeholder="请输入二抵贷款余额" />
            <van-text v-if="item.dydyindex=='三抵'" type="text" style="position: relative;top:-2rem; margin-left:88vw;color:#ccc;font-size:14px ">元</van-text>
            <van-field required input-align='right' style="padding-right:60px"   v-model="item.houseBuildArea" label="抵押物面积" placeholder="请输入抵押物面积" />
            <van-text  type="text" style="position: relative;top:-2rem; margin-left:88vw;color:#ccc;font-size:14px ">㎡</van-text>
          </van-cell-group>
        </div>
        
        <span class="tit">申请人信息</span>
        <van-cell-group>
          <van-field required input-align='right' v-model="postData.custName" label="姓名" placeholder="请输入贷款客户姓名" />
          <van-field required input-align='right' v-model="postData.idNo" label="证件号码" placeholder="请输入贷款客户证件号码" />
          <van-field required input-align='right' v-model="postData.custPhone" label="手机号码" placeholder="请输入贷款客户手机号码" />
        </van-cell-group>
        <span class="tit">上传贷款材料<span class="red">*</span>（房产证信息页与房产证附记页必传）</span>
            <van-uploader class="img"  max-count="1"
                         upload-text="上传身份证正面"
                         :upload-icon="require('../../assets/img/身份证正面.png')"
                         v-model="postData.idNoUrl1"
                         :after-read="uploadIDcardFront(1111)"
          ></van-uploader>
            <van-uploader class="img" max-count="1"
                         upload-text="上传户口簿申请人页"
                         :upload-icon="require('../../assets/img/户口簿.png')"
                         v-model="postData.passportUrl1"
                         :after-read="uploadIDcardFront(2222)"
          ></van-uploader>
          <van-uploader class="img" v-for="(item,i) in arr"  max-count="1"
                         upload-text="上传房产证照片"
                         :upload-icon="require('../../assets/img/房产信息.png')"
                         v-model="item.frontFileList"
                         :after-read="uploadIDcardFront(item.id)"
          ></van-uploader>
        </div>
      </div>
      <div class="foot1"></div>
    <div class="foot"><van-button @click="submit" class="btn"  type="primary" block >确认提交</van-button></div>
    
    </div>
    </template>
    <style>
      .wrapper { 
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }
    .img{ 
      margin-left: 5%;
    }
    .add{ 
      display: inline-block;
      color: #286afe;
      margin-left: 36%;
      font-size: 12px;
      line-height: 50px;
    }
    .red{ 
      color: red;
    }
    .tit{ 
      display: inline-block;
      padding:14px 5%;
      font-size: 10px;
    }
    .app{ 
      background: #f4f5f7;
    }
    .con{ 
      margin-top:46px ;
      margin-bottom: 50px;
    }
    .nav{ 
      background-color: rgb(40, 106, 254);
    }
    .van-nav-bar__title { 
      color: rgb(255, 255, 255) !important;
        font-weight: 700;
        font-size: 16px;
        line-height: 30px;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .foot1{ 
      margin-top: 30px;
      height: 60px;
    }
    .foot{ 
      height: 60px;
      background-color: white;
      width: 100%;
      position: fixed;
      bottom: 0;
      margin-top: 50px;
      border: none;
    }
    .btn{ 
      margin: 10px 3%;
      border-radius: 10px;
      width: 94%;
      height: 40px;
      background: #286afe;
      border: none;
    }
    </style>
    
    <style lang="scss" scoped>
    /deep/ .van-uploader__upload,
    /deep/ .van-image,
    /deep/ .van-uploader__preview-image{ 
      width: 40vw;
      height: 90px;
      border: rgb(121, 120, 120) 1px solid;
    }
    /deep/ .van-uploader__upload-text { 
      margin-top: 8px;
      color: #969799;
      font-size: 10px;
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 30px;
      line-height: 30px;
      color: black;
      text-align: center;
    }
    /deep/ .van-uploader__upload,
    /deep/ .van-image{ 
      border-radius: 10px;
      overflow: hidden;
    }
    /deep/ .van-icon__image { 
      width: 4em;
      height: 3em;
      -o-object-fit: contain;
      object-fit: contain;
      margin-bottom: 23px;
    }
    </style>
    
    <script>
    import Vue from 'vue'
    import {  NavBar,Overlay,Loading,Text,Button ,Field ,Toast,Picker,Popup,Cell,CellGroup,Icon,Area,Uploader,Col,Row  } from 'vant';
    Vue.use(Area);
    Vue.use(NavBar );
    Vue.use(Button );
    Vue.use(Field );
    Vue.use(Picker );
    Vue.use(Popup);
    Vue.use(Cell);
    Vue.use(CellGroup);
    Vue.use(Icon);
    Vue.use(Toast);
    Vue.use(Uploader);
    Vue.use(Col);
    Vue.use(Row);
    Vue.use(Loading);
    Vue.use(Overlay);
    // Vue.use(Text);
    import request from '@/utils/request'
    import {  compile } from 'path-to-regexp';
    const Base64 = require('js-base64').Base64
    const areaList=require('../../assets/c.json')
    import {  getToken } from '@/utils/auth'
    import requestPy from '@/utils/requestPy'
    export default { 
      components: {  },
      data() { 
        return { 
          arr111:[],
          idNoUrl1:[],
          passportUrl1: [],
          show: false,
          load:false,
          uploadUrl:'https://hmimage.hmdata.com.cn/upload',
          imgurl:process.env.VUE_APP_IMAGE_HOST+ '/images/',
          Rsize:process.env.VUE_APP_IMAGE_SIZE,
          id:0,
          applyAmt:'',
          pawnList:[],
          arr:[{ 
            id:0,
            citi:false,
            citiciti:'',
            dy:false,
            dydy:'',
            dydyindex:null,
            houseProvince:'',//抵押物所在省
            houseCity:'',//抵押物所在市
            houseDistrict:'',//抵押物所在区
            houseAdress:'',//抵押物地址（不包含省市区）
            houseFullAdress:'',//抵押物详细地址（包含省市区）
            mortgageCon:'',//抵押顺位（1：一抵；2：二抵；3：三抵）
            mortgageOne:'',//mortgageCon为2或3，必传
            mortgageTwo:'',//mortgageCon为2，必传
            houseBuildArea:'',//抵押物面积
            houseCardUrl:'',//房产证照片
            frontFileList:[],
          },],
          houseBuildArea:'',
          huankuan: ['先息后本', '等额本息', '气球贷'],
          qixian: ['12个月', '24个月', '30个月', '31个月', '32个月','33个月','36个月','60个月',],
          jingying:['经营'],
          diya: ['一抵', '二抵', '三抵'],
          houseAdress:'',
          hk:false,
          qx:false,
          jy:false,
          citi:false,
          hkhk:'',
          qxqx:'',
          jyjy:'经营',
          postData: { 
            applyAmt: '',
            repayType: '',
            termMon: '',
            idNoUrl1:[],
            passportUrl1: [],
            idNoUrl:'',
            passportUrl: '',
            pawnList: [],
            custPhone: '',
            custName: '',
            idNo: '',
            source:'',
          },
        }
      },
      created() { 
        this.areaList=areaList
        if(this.$route.query.data){ 
          var dataInfo = this.$route.query.data
          console.log(1111,Base64.decode(dataInfo))
          this.postData.source = JSON.parse(Base64.decode(dataInfo)).source
          console.log(this.postData.source)//0：嗨小墨 1：墨推 2：嗨小墨API
        }
    
      },
      methods: { 
        submit(){ 
          if(!this.postData.applyAmt){ 
            Toast('请输入申请金额');
            return
          }
          if(!this.hkhk){ 
            Toast('请选择还款方式');
            return
          }
          if(!this.postData.custName){ 
            Toast('请输入贷款人姓名');
            return
          }
          if(!this.postData.idNo){ 
            Toast('请输入贷款人身份证号');
            return
          }
          if(!this.postData.custPhone){ 
            Toast('请输入贷款人手机号');
            return
          }
          if(!(/^1[3456789]\d{9}$/.test(this.postData.custPhone))){ 
            Toast('请输入正确的手机号');
            return
          }
          if(!this.qxqx){ 
            Toast('请选择贷款期限');
            return
          }
          if(!this.postData.idNoUrl){ 
            Toast('请上传身份证照片');
            return
          }
          if(!this.postData.passportUrl){ 
            Toast('请上传户口簿申请人照片');
            return
          }
          this.arr111=JSON.parse(JSON.stringify(this.arr))
          for(let j=0;j<this.arr.length;j++){ 
              if(!this.arr[j].citiciti){ 
                  Toast('请选择抵押物地址');
                  return
                }
                if(!this.arr[j].houseAdress){ 
                  Toast('请填写抵押物详细地址');
                  return
                }
                if(!this.arr[j].dydy){ 
                  Toast('请选择抵押类型');
                  return
                }
                if(!this.arr[j].houseBuildArea){ 
                  Toast('请填写抵押物面积');
                  return
                }
                if(!this.arr[j].houseCardUrl){ 
                  Toast('请上传房产证照片');
                  return 
                }
                this.arr[j].houseFullAdress=this.arr[j].citiciti+this.arr[j].houseAdress
          }
          for(let j=0;j<this.arr.length;j++){ 
                delete this.arr[j].frontFileList;
          }
          this.postData.pawnList=this.arr
          this.idNoUrl1=this.postData.idNoUrl1
          this.passportUrl1=this.postData.passportUrl1
          delete this.postData.idNoUrl1;
          delete this.postData.passportUrl1;
          this.load=true
          this.show=true
          request({ 
            url: '/fanHua/pdd/save',
            method: 'post',
            data: this.postData
          }).then(res => { 
            if(res.errorCode==0){ 
              this.arr=JSON.parse(JSON.stringify(this.arr111))
              this.postData.idNoUrl1=this.idNoUrl1
              this.postData.passportUrl1=this.passportUrl1
              this.load=false
              this.show=false
              Toast.success('提交成功')
              setTimeout(function(){ 
                window.location.reload();
              },2000)
            }
          }).finally(()=>{ 
            this.arr=JSON.parse(JSON.stringify(this.arr111))
            this.postData.idNoUrl1=this.idNoUrl1
            this.postData.passportUrl1=this.passportUrl1
            this.load=false
            this.show=false
          })
        },
        adddd(){ 
          this.id=++this.id
          this.arr.push({ 
            id:this.id,
            citi:false,
            citiciti:'',
            dy:false,
            dydy:'',
            dydyindex:null,
            houseProvince:'',//抵押物所在省
            houseCity:'',//抵押物所在市
            houseDistrict:'',//抵押物所在区
            houseAdress:'',//抵押物地址（不包含省市区）
            houseFullAdress:'',//抵押物详细地址（包含省市区）
            mortgageCon:'',//抵押顺位（1：一抵；2：二抵；3：三抵）
            mortgageOne:'',//mortgageCon为2或3，必传
            mortgageTwo:'',//mortgageCon为2，必传
            houseBuildArea:'',//抵押物面积
            houseCardUrl:'',//房产证照片
          })
        },
        del(id){ 
          for(let j=0;j<this.arr.length;j++){ 
            if(this.arr[j].id==id){ 
              this.arr.splice(j, 1);
            }
          }
        },
        showhk() { 
          this.hk = true;
        },
        showjy() { 
          this.jy = true;
        },
        showqx() { 
          this.qx = true;
        },
        showdy(id) { 
          for(let j=0;j<this.arr.length;j++){ 
            if(this.arr[j].id==id){ 
              this.arr[j].dy=true
            }
          }
        },
        showciti(id) { 
          for(let j=0;j<this.arr.length;j++){ 
            if(this.arr[j].id==id){ 
              this.arr[j].citi=true
            }
          }
        },
        onhk(value, index) { 
          this.qxqx=this.postData.termMon=''
          this.hkhk=value
          if(index==0){ 
            this.postData.repayType=10
          }else if(index==1){ 
            this.postData.repayType=1
          }else if(index==2){ 
            this.postData.repayType=3
          }
          if(this.postData.repayType==10){ 
            this.qixian= ['1个月', '3个月', '4个月', '5个月', '6个月','7个月','8个月','9个月', '10个月','11个月','12个月',]
          }else{ 
            this.qixian= ['12个月', '24个月', '30个月', '31个月', '32个月','33个月','36个月','60个月',]
          }
          this.hk=false;
        },
        onjy(value, index) { 
          this.jy=false;
        },
        onqx(value, index) { 
          this.qxqx=value
          this.postData.termMon= parseFloat(value)
          this.qx=false;
        },
        ondy(value,index,id) { 
          for(let j=0;j<this.arr.length;j++){ 
            if(this.arr[j].id==id){ 
              this.arr[j].dydy=value
              this.arr[j].dy=false
              this.arr[j].dydyindex=index
              if(index=='一抵'){ 
                this.arr[j].mortgageCon=1
              }else if(index=='二抵'){ 
                this.arr[j].mortgageCon=2
              }else if(index=='三抵'){ 
                this.arr[j].mortgageCon=3
              }
              
            }
          }
        },
        onciti(value,id) { 
          for(let j=0;j<this.arr.length;j++){ 
            if(this.arr[j].id==id){ 
              this.arr[j].citiciti=value[0].name+value[1].name+value[2].name
              this.arr[j].houseProvince=value[0].code
              this.arr[j].houseCity=value[1].code
              this.arr[j].houseDistrict=value[2].code
              this.arr[j].citi=false
            }
          }
        },
        onChhk(){ 
          
        },
        onChjy(){ },
        onChqx(){ },
        onChdy(){ },
        onChciti(){ },
        uploadIDcardFront(id){ 
          return file => { 
            console.log(id)
            var timestamp = Date.parse(new Date());
            var sign=this.$md5(timestamp.toString())
            let formData = new FormData();
            formData.append('file', file.file)
            formData.append('is_public', 1)
            file.status = 'uploading';
            file.message = '上传中...';
            requestPy({ 
              url: this.uploadUrl,
              method: 'post',
              headers: { 
              'timestamp':timestamp,
              'sign':sign
              },
              data:formData
            }).then((res) => { 
              if(res.code_no=='0'){ 
                file.status = 'done';
                if(id==1111){ 
                  this.postData.idNoUrl=res.data.url
                  // this.postData.idNoUrl1.push(res.data.file_name)
                }else if(id==2222){ 
                  this.postData.passportUrl=res.data.url
                  // this.postData.passportUrl.push(res.data.file_name)
                }
                for(let j=0;j<this.arr.length;j++){ 
                  if(this.arr[j].id==id){ 
                    this.arr[j].houseCardUrl=res.data.url
                    // this.postData.houseCardUrl.push(res.data.file_name)
                  }
                }
                // this.postData.enclosure.push(res.data.file_name)
              }else{ 
                file.status = 'failed';
                file.message = '上传失败';
              }
          })
          }
          
        },
    
    
    
    
      }
      
    }
    </script>