nsgk_mobile/src/views/user/accountSetting/userInformation/companyInformation.vue

<template>
  <div class="app-container">
    <navBar title="资料修改" background="0" positionType="fixed"></navBar>
    <van-form @submit="submitForm">
      <div class="block_box">
        <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">用户信息</van-divider>
        <van-field v-model="tel" readonly type="tel" label="手机号" placeholder="请输入手机号" required :rules="[{ required:true }]" >
  <!--        <template #extra >-->
  <!--          <p style="color: #007e72" onclick="window.location='phoneInformation'">修改手机号</p>-->
  <!--        </template>-->
        </van-field>
  <!--      <van-field value="15314031621" label="密码" placeholder="请输入密码" required :rules="[{ required:true }]"/>-->
        <van-field v-model="userForm.companyName" label="公司名称" placeholder="请输入公司名称" required :rules="[{ required:true }]"/>
        <van-field v-model="userForm.companyCode" label="社会信用代码" placeholder="请输入公司的社会信用代码"/>

        <van-field
          readonly
          clickable
          label="企业性质"
          :value="companyNameValue"
          placeholder="选择企业性质"
          @click="showPickerPiker = true"
        />
        <van-popup v-model="showPickerPiker" round position="bottom">
          <van-picker
            show-toolbar
            :columns="companyNameList"
            @cancel="showPickerPiker = false"
            @confirm="onConfirmCompany"
          />
        </van-popup>
  <!--      <van-field v-model="userForm.companyNature" label="企业性质" placeholder="请输入企业性质" required :rules="[{ required:true }]" />-->


        <van-field v-model="userForm.companyScope" label="经营范围" placeholder="请输入经营范围" />
        <van-field v-model="userForm.companyTimeLimit" label="经营期限" placeholder="请输入经营期限" />
        <van-field
          readonly
          clickable
          label="成立时间"
          :value="userForm.companySetupTime"
          placeholder="选择成立时间"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" round position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="date"
            title="选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
            @cancel="showPicker = false"
            @confirm="onConfirm"
          />
        </van-popup>

        <!--<van-field v-model="userForm.companySetupTime" label="成立时间" placeholder="请输入成立时间" required :rules="[{ required:true }]" />-->
        <van-field v-model="userForm.companyCapital" label="注册资金" placeholder="请输入注册资金" />
        <van-field v-model="userForm.address" label="联系地址" placeholder="请输入联系地址" />
        <van-field v-model="userForm.realname" label="法人姓名" placeholder="请输入法人姓名" required :rules="[{ required:true }]"/>
        <van-field v-model="userForm.idCardNum" label="身份证号" placeholder="请输入法人身份证号" required :rules="[{ required:true }]"/>

        <van-field name="uploader" label="法人证件照" required>
          <template #input>
            <van-uploader :after-read="afterReadFRZJZ" :before-delete="deleteFileFRZJZ" v-model="fileListFRZJZ" multiple :max-count="1" />
          </template>
        </van-field>

        <van-field name="uploader" label="营业执照" required>
          <template #input>
            <van-uploader :after-read="afterReadYYZZ" :before-delete="deleteFileYYZZ" v-model="fileListYYZZ" multiple :max-count="1" />
          </template>
        </van-field>

        <van-field name="uploader" label="开户证明" required>
          <template #input>
            <van-uploader :after-read="afterReadKHZM" :before-delete="deleteFileKHZM" v-model="fileListKHZM" multiple :max-count="1" />
          </template>
        </van-field>

        <van-field v-model="userForm.bankCardName" label="开户姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
        <van-field v-model="userForm.bankCardNum" label="开户账号" placeholder="请输入开户账号" required :rules="[{ required:true }]"/>

        <van-field
          v-model="accountType"
          is-link
          readonly
          required
          :rules="[{ required:true }]"
          label="账户类型"
          placeholder="请选择账户类型"
          @click="showAccountType = true"
        />
        <van-popup v-model:show="showAccountType" position="bottom">
          <van-picker
            show-toolbar
            value-key="dictLabel"
            :columns="accountTypeOption"
            @confirm="onConfirmAccountType"
            @cancel="showAccountType = false"
          />
        </van-popup>
      </div>

      <div class="block_box">
        <van-divider :style="{ borderColor: '#0CBEA6', padding: '0 16px' }">银行信息</van-divider>
        <van-field
          v-model="bankType"
          is-link
          readonly
          required
          :rules="[{ required:true }]"
          label="所属银行"
          placeholder="请选择所属银行"
          @click="showBankType = true"
        />
        <van-popup v-model:show="showBankType" position="bottom">
          <van-picker
            show-toolbar
            value-key="dictLabel"
            :columns="bankTypeOption"
            @confirm="onConfirmBankType"
            @cancel="showArea = false"
          />
        </van-popup>

        <van-field
          v-model="sheng"
          is-link
          readonly
          label="开户省市"
          placeholder="请选择开户省市"
          @click="showSheng = true"
        />
        <van-popup v-model:show="showSheng" position="bottom">
          <van-picker
            show-toolbar
            value-key="label"
            :columns="shengOption"
            @confirm="onConfirmSheng"
            @cancel="showSheng = false"
          />
        </van-popup>

        <van-field v-model="userForm.bankDeposit" label="关键词" placeholder="请输入开户行地址关键词"/>
        <van-field
          v-model="userForm.bankAddress"
          label="开户银行"
          placeholder="请输入开户银行"
          required
          :rules="[{ required:true }]"
          readonly
          @click="showBankAddress = true"
        >
          <template #button>
            <van-button size="small" type="primary" color="#FD683F" native-type="button" @click="searchBankAddress">检索</van-button>
          </template>
        </van-field>
        <van-popup v-model:show="showBankAddress" position="bottom">
          <van-picker
            show-toolbar
            value-key="bankDeposit"
            :columns="bankAddressOption"
            @confirm="onConfirmBankAddress"
            @cancel="showBankAddress = false"
          />
        </van-popup>

        <van-field v-model="userForm.payeePaymentLines" label="联行号" placeholder="请输入开户银行" required :rules="[{ required:true }]"/>
      </div>
      <div class="submit" v-if="activitiStatus != '1'">
        <van-button round block type="info" color="#0DBCAA" native-type="submit" style="width: 90%;margin: 0 auto;">保存</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { getInfo } from "@/api/login/index";
import {getMember, base64Attach, userUpdate, showUserImg, deleteUserImg, options} from "@/api/user/index";
import {Dialog} from "vant";
import {base64Upload, depositList, realtimeBackList} from "@/api/register";
import navBar from "@/components/common/nav_bar.vue";
export default {
  name: "companyInformation",
  components: { navBar },
  data() {
    return {
      activitiStatus:0,
      height:0,
      tel:'',
      showPicker: false,
      showPickerPiker: false,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      value:'',
      companyNameValue:'',
      fileList:[],
      companyNameList:[],
      fileListKHZM:[],
      fileListFRZJZ:[],
      fileListYYZZ:[],
      form: {
        files:[],
        fileType:'',
        bizPath:'transaction',
        tableName:'t_transaction_member',
        tableId:''
      },
      userForm:{
        companyName:'',
        idCardNum:'',
        realname:'',
        companyCode:'',
        companyNature:'',
        companyScope:'',
        companyTimeLimit:'',
        companySetupTime:'',
        companyCapital:'',
        companyLicense:'',
        address:'',
        accountOpenCert:'',
      },
      userInfo:[],
      upLoadList:[],
      bankTypeOption:[],
      sheng:'',
      shi:'',
      bankType:'',
      accountType:'',
      bankDeposit:'',
      showBankType:false,
      showSheng :false,
      shengOption:options,
      showShi :false,
      shiOption:[],
      showBankAddress :false,
      accountTypeOption:[],
      showAccountType :false,
      bankAddressOption:[],
    };
  },
  created() {
    this.height = document.body.clientHeight
    this.getDicts("bank_type_all").then(response => {
      this.bankTypeOption = response.data;
    });
    this.getDicts("bank_account_type").then(response => {
      this.accountTypeOption = response.data;
    });
    this.getInfo()
    this.getDicts("company_nature").then(res => {
      console.log(res);
      for (var i = 0 ; i < res.data.length ; i++ ){
        this.companyNameList.push(res.data[i].dictLabel)
      }
      //this.value = this.selectDictLabel(res.data,response.data.supplyDemandType);
    });
  },
  methods: {
    searchBankAddress(){
      let data = {
        sheng:this.userForm.sheng,
        shi:this.userForm.shi,
        bankType:this.userForm.bankType,
        bankDeposit:this.userForm.bankDeposit,
      }
      depositList(data).then(response => {
        if (response.rows.length<1){
          if (this.userForm.sheng==''||this.userForm.shi==''){
            this.$toast({
              icon: 'fail', // 找到自己需要的图标
              message: '请选择省市',
              duration:"1000",
            })
            return;
          }
          if (this.userForm.bankDeposit==''){
            this.$toast({
              icon: 'fail', // 找到自己需要的图标
              message: '请输入关键词',
              duration:"1000",
            })
            return;
          }
          realtimeBackList(data).then(response2 => {
            console.log(response2)
            this.bankAddressOption = response2.data;
          });
        }else{
          this.bankAddressOption = response.rows;
        }
      });
    },
    onConfirmCompany(value,index){
      console.log(value)
      this.companyNameValue = value;
      this.showPickerPiker = false;
      this.userForm.companyNature = index+1
      console.log(this.userForm.companyName)
    },
    onConfirm(value) {
      this.userForm.companySetupTime = this.getNowFormatDate(value).substr(0,10);
      console.log(new Date())
      this.showPicker = false;
    },
    getInfo(){
      getInfo().then(response => {
        getMember(response.user.userId).then(response => {
          console.log(response)

          // this.userForm.companyName = response.data.companyName;
          // this.userForm.idCardNum = response.data.idCardNum;
          // this.userForm.realname = response.data.realname;
          // this.userForm.companyCode = response.data.companyCode;
          // this.userForm.companyName = response.data.companyName;
          // this.userForm.companyNature = response.data.companyNature;
          // this.userForm.companyScope = response.data.companyScope;
          // this.userForm.companyTimeLimit = response.data.companyTimeLimit;
          // this.userForm.companySetupTime = response.data.companySetupTime;
          // this.userForm.companyCapital = response.data.companyCapital;
          // // this.userForm.companyLicense = response.data.companyLicense;
          // this.userForm.address = response.data.address;


          this.userForm = response.data;
          this.bankType = this.selectDictLabel(this.bankTypeOption,response.data.bankType);
          this.accountType = this.selectDictLabel(this.accountTypeOption,response.data.accountType);
          this.userForm.bankCardName = response.data.bankCardName;
          this.userForm.bankCardNum = response.data.bankCardNum;
          this.userForm.bankAddress = response.data.bankAddress;
          this.userForm.id = response.data.id;

          this.activitiStatus = response.data.activitiStatus;

          if (response.data.accountOpenCert!=''){
            this.fileListKHZM = [{
              url:'/api'+response.data.accountOpenCert,
              isImage: true
            }];
          }

          if (response.data.idCardPic!=''){
            this.fileListFRZJZ = [{
              url:'/api'+response.data.idCardPic,
              isImage: true
            }];
          }

          if (response.data.companyLicense!=''){
            this.fileListYYZZ = [{
              url:'/api'+response.data.companyLicense,
              isImage: true
            }];
          }

          this.tel = response.data.phone

          this.getDicts("company_nature").then(res => {
            console.log(res);
            this.companyNameValue = this.selectDictLabel(res.data,response.data.companyNature);
          });

          this.userForm.id = response.data.id;
          this.form.tableId = response.data.id;
          // showUserImg(response.data.id).then(responseSecond => {
          //   console.log(responseSecond)
          //   this.form.files = responseSecond.data
          //   for (var i = 0 ; i < responseSecond.data.length ; i++){
          //     this.fileList.push({url:this.global.severApi+responseSecond.data[i].fileUrl,id:responseSecond.data[i].id})
          //   }
          // });
        });
      });
    },
    afterReadFRZJZ(file) {
      // 此时可以自行将文件上传至服务器
      this.$toast.loading({
        message: "上传中...",
        forbidClick: true,
        duration: 0,
      });
      let params1 = {
        file:file.content
      }
      base64Upload(params1).then((r1) => {
        this.userForm.idCardPic = r1.fileName;
      })
    },
    deleteFileFRZJZ(elIndex){
      return (file, name) => {
        let fileIndex = name.index
        this.fileListFRZJZ[elIndex].splice(fileIndex, 1)
        this.userForm.idCardPic = '';
      }
    },
    afterReadKHZM(file) {
      // 此时可以自行将文件上传至服务器
      let params1 = {
        file:file.content
      }
      base64Upload(params1).then((r1) => {
        this.userForm.accountOpenCert = r1.fileName;
      })
    },
    deleteFileKHZM(elIndex){
      return (file, name) => {
        let fileIndex = name.index
        this.fileListKHZM[elIndex].splice(fileIndex, 1)
        this.userForm.accountOpenCert = '';
      }
    },
    afterReadYYZZ(file) {
      this.$toast.loading({
        message: "上传中...",
        forbidClick: true,
        duration: 0,
      });
      // 此时可以自行将文件上传至服务器
      let params1 = {
        file:file.content
      }
      base64Upload(params1).then((r1) => {
        this.userForm.companyLicense = r1.fileName;
      })
    },
    deleteFileYYZZ(elIndex){
      return (file, name) => {
        let fileIndex = name.index
        this.fileListYYZZ[elIndex].splice(fileIndex, 1)
        this.userForm.companyLicense = '';
      }
    },
    submitForm(){
      if (this.userForm.accountOpenCert == ''){
        this.$toast({
          icon: 'error', // 找到自己需要的图标
          message: '请上传开户证明',
          duration:"2000",
          onClose:function(){
          }
        })
        return;
      }
      if (this.userForm.companyLicense == ''){
        this.$toast({
          icon: 'error', // 找到自己需要的图标
          message: '请上传营业执照',
          duration:"2000",
          onClose:function(){
          }
        })
        return;
      }
      userUpdate(this.userForm).then(response => {
        if(response.code == 200) {
            Dialog.confirm({
              title: '系统提示',
              message: '修改成功',
              confirmButtonText: '确定',
            })
              .then(() => {
                this.onClickLeft()
              })
        }
      });
    },
    onConfirmBankType(value){
      this.showBankType = false;
      this.userForm.bankAddress = '';
      this.userForm.payeePaymentLines = '';
      this.bankType = value.dictLabel;
      this.userForm.bankType = value.dictValue;
    },
    onConfirmSheng(value){
      console.log(value)
      this.showSheng = false;
      this.userForm.sheng = value[0];
      this.userForm.shi = value[1];
      this.sheng = value.join('/');
    },
    onConfirmBankAddress(value){
      console.log(value)
      this.userForm.bankAddress = value.bankDeposit;
      this.userForm.payeePaymentLines = value.payeePaymentLines;
      this.showBankAddress = false;
    },
    onConfirmAccountType(value){
      console.log(value)
      this.userForm.accountType = value.dictValue;
      this.accountType = value.dictLabel;
      this.showAccountType = false;
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  background-color: #F4F8FB;
  height: calc(100vh - 0Px);
  overflow-y: scroll;
}
.block_box{
  width: 94%;
  margin: 3vw auto;
  background: #ffffff;
  padding: 3vw 0;
  border-radius: 15Px;
  overflow: hidden;
  .block_tt{
    font-size: 16Px;
    display: flex;
    align-items: center;
    padding: 0 3vw;
    line-height: 1;
    i{
      display: block;
      width: 3Px;
      height: 14Px;
      background: #0CBEA6;
      margin-right: 5PX;
      border-radius: 5PX;
    }
    /*border-left: 3Px solid #0CBEA6;*/
  }
}
.submit{
  width: 100%;
  padding: 5% 0;
  p{
    text-align: center;
    margin-bottom: 0.2rem;
    span{
      color: #007E72;
    }
  }
}
</style>