app-AgricultureSmart/vue/src/views/front/ApplyForUp.vue

<script>
// 申请成为up的申请界面
import UploadPic from "@/components/UploadPic.vue";
import {provinceAndCityData,pcTextArr,regionData,pcaTextArr,codeToText,} from'element-china-area-data'
export default {
  name: "ApplyForUp",
  components:{
    UploadPic:UploadPic
  },
  data() {
    return {
      user: JSON.parse(localStorage.getItem('xm-user') || '{}'), // user信息解压
      isSubmit:false, //  是否申请了表格
      state:"", // 申请状态
      formData:{
        keeperName :'', // 姓名
        idCard:"", //申请人身份证
        businessLicense:"", //营业许可证URL
        reason:"", // 申请理由
        picsUrl:"", // 店铺图片
      },
      provinceAndCityData,
      pcaTextArr,
      selectedOptions:[], // 地址选项
      placeDetail:"",
      rules:{
        desc:[{require:true}]
      }
    };
  },
  computed:{
    address(){
      let res = ""
      console.log(this.selectedOptions)
      for(let city in this.selectedOptions) res +=this.selectedOptions[city]
      return res + this.placeDetail;
    }
  }
  ,
  created(){
    let id = this.user.id;
    console.log(id)
    this.$request.get(`/audits/selectAll`,{
      params:{
        adminId:id,
      }
    }).then(res=>{
      console.log(res);
      if(res.code == 200 ){
        // 存在结果
        if(res.data[0])  // 进入注册界面
        {
          this.isSubmit = true;
          let audit = res.data[0]; // 获取到的申请表信息
          console.log(res.data)
          this.state = audit.state
          this.formData = audit
        }

      }
    })

  }
  ,
  methods: {
    onSubmit() {
      const requestForm = {
        storeAddress:this.address,
        idcard:this.formData.idCard,
        businessLicense: this.formData.businessLicense,
        reason:this.formData.reason,
        picsUrl:this.formData.picsUrl,
        keeperName:this.formData.keeperName
      }
      console.log(requestForm)
      this.$request.post("/audits/add",requestForm).then(res=>{
        console.log(res)
      })

    },
    updateBsCard(data){this.formData.businessLicense = data[0].url},
    updateDeleBsCard(file){this.formData.businessLicense = null},
    updateFarm(data){this.formData.picsUrl= data[0].url},//农村图片
    updateDeleFarm(data){this.formData.picsUrl = null},//删除选中的图片
    showCheck(data){this.isSubmit = false},
  }
}

</script>

<template>
<div>
  <el-card class="applyForm" style="margin-left:10%;margin-right: 10%; width: 80%" v-if="!isSubmit">
    <div style="text-align: center "> 申 请 店 铺 </div>
    <el-form :rule="rules" label-position="left" ref="form" :model="formData" label-width="80px" size="mini" class="demo-ruleForm">
      <el-form-item label="姓名" style="width: 30%">
        <el-input v-model="formData.keeperName"></el-input>
      </el-form-item>

      <el-form-item label="营业许可证照片" :rule="[
          {require:true,message:'请上传营业许可照片'}
      ]">
        <UploadPic fileType="营业许可证照片" @update:uploadFile="updateBsCard" @update:cancelUpload="updateDeleBsCard">
        </UploadPic>
      </el-form-item>
      <el-form-item label="农铺照片" :rule="[
          {require:true,message:'请上传农铺照片'}
      ]">
        <UploadPic fileType="农铺照片" @update:uploadFile="updateFarm" @update:cancelUpload="updateDeleFarm">
        </UploadPic>
      </el-form-item>
      <el-form-item label="申请理由" prop="desc">
        <el-input
            type="textarea"
            placeholder="请输入内容"
            maxlength="300"
            v-model="formData.reason"
            show-word-limit
            autosize
            style="font-family: 'PingFang SC' "
        >
        </el-input>
      </el-form-item>
      <el-form-item label="店铺地址" >
        <el-col :span="63">
        <el-cascader
            size="large"
            :options="pcaTextArr"
            v-model="selectedOptions">
        </el-cascader>
          <i> 详细地址 </i> <el-input v-model="placeDetail" style="width: 100%"></el-input>
        </el-col>

      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="onSubmit">提交申请</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>

  </el-card>
  <el-card v-if="isSubmit">
<!--    显示申请状态-->
    <el-tag >{{state}}</el-tag>
<!--    点击查看申请列表  -->
    <el-button @click="showCheck()"></el-button>
  </el-card>
</div>
</template>

<style>
// 这里把他放到居中位置
.applyForm {
  width: 400px; /* 设置表单的宽度 */
  margin: 0 auto; /* 使用 margin 属性将表单水平居中 */
}

</style>