tuanfeng-pc-settle/src/views/SettleIn/individualBusiness.vue

<template>
  <div class="warp12">
    <div class="statusBox">
      <cent-logo></cent-logo>
      <div class="personal infoBox">
        <div class="title">个体工商户</div>
        <div class="content">
          <div class="formBox">
            <el-form
            :model="personalForm"
            :rules="personalRules"
            :label-position="'top'"
            ref="ruleForm"
            label-width="150px"
            class="ruleForm">
              <div class="formTit">
                <span class="serialNumber">01</span>
                <span class="formName">店铺信息</span>
              </div>
              <el-form-item label="店铺名称" prop="shopName">
                <el-input maxlength="100" placeholder="请输入店铺名称" v-model="personalForm.shopName"></el-input>
              </el-form-item>
              <el-form-item label="客服电话" prop="servicePhone">
                <el-input maxlength="100" placeholder="请输入客服电话" @blur="changeShopPone" v-model="personalForm.servicePhone"></el-input>
              </el-form-item>
              <el-form-item label="店铺负责人" prop="chargePersonName">
                <el-input maxlength="100" placeholder="请输入店铺负责人" v-model="personalForm.chargePersonName"></el-input>
              </el-form-item>
              <el-form-item label="负责人电话" prop="chargePersonPhone">
                <el-input  maxlength="100" placeholder="请输入负责人电话" v-model="personalForm.chargePersonPhone"></el-input>
              </el-form-item>
              <el-form-item label="店铺类型" prop="isVoucher">
                <el-radio-group v-model="personalForm.shopType">
                  <el-radio :label="1">商城</el-radio>
                  <el-radio :label="2">商圈</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="是否开放使用代金卷" prop="isVoucher">
                <el-radio-group v-model="personalForm.isVoucher">
                  <el-radio :label="1">支持</el-radio>
                  <el-radio :label="2">不支持</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="代金卷抵扣比例" prop="voucherReturn">
                <el-input :disabled="personalForm.isVoucher == 2" maxlength="100" placeholder="请输入代金卷抵扣比例(以你填写的数值作为百分比的数值,如你填1,则为1%,关闭使用代金卷则默认为0)" v-model="personalForm.voucherReturn"></el-input>
              </el-form-item>
              <el-form-item label="入驻套餐" prop="packageId" class="idType">
                <el-select v-model="personalForm.packageId" placeholder="请选择">
                  <el-option
                    v-for="item in setMealData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="店铺地址" prop="areaId">
                <el-cascader
                      ref="addressChange"
                      size="large"
                      :options="options"
                      v-model="personalForm.areaId"
                      :props="{ checkStrictly: true,emitPath: false, label:'name',value: 'id', lazy: true, lazyLoad: lazyLoadAddres }"
                      @change="addressChange">
                </el-cascader>
                <!-- <el-cascader
                  size="large"
                  :options="options"
                  v-model="selectedOptions"
                  @change="addressChange">
                </el-cascader> -->
              </el-form-item>
              <el-form-item label="" prop="storeAddressDetail">
                <el-input maxlength="200" resize="none" placeholder="请输入详细地址" type="textarea" :rows="3" v-model="personalForm.storeAddressDetail"></el-input>
              </el-form-item>
              <el-form-item label="是否绑定策划师">
                <el-radio-group v-model="isPersonalForm">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="isPersonalForm" label="绑定策划师" class="idType">
                <el-select v-model="personalForm.parentId" placeholder="请先选择好地址，如果当前地区没有营销策划师也可以不绑定">
                  <el-option
                    v-for="item in plannerColumns"
                    :key="item.id"
                    :label="item.name"
                    :value="item.platformUserId">
                  </el-option>
                </el-select>
              </el-form-item>
              <div class="formTit">
                <span class="serialNumber">02</span>
                <span class="formName">主体信息</span>
              </div>
              <el-form-item label="商户名称" prop="subjectName">
                <el-input maxlength="100" placeholder="请输入商户名称" v-model="personalForm.subjectName"></el-input>
                <p>需与当地政府颁发的商业许可证书或企业注册证上的企业名称完全一致，信息审核审核成功后企业名称不可修改</p>
              </el-form-item>
              <el-form-item label="社会信用代码" prop="subjectCode">
                <el-input maxlength="100" placeholder="请输入社会信用代码" v-model="personalForm.subjectCode"></el-input>
              </el-form-item>
              <el-form-item label="注册地址" prop="subjectRegion">
                <el-cascader
                  size="large"
                  :options="options2"
                  v-model="registeredAddress"
                  @change="registeredAddressChange">
                </el-cascader>
              </el-form-item>
              <el-form-item label="" prop="subjectAdress">
                <el-input maxlength="200" resize="none" placeholder="请输入详细地址" type="textarea" :rows="3" v-model="personalForm.subjectAdress"></el-input>
              </el-form-item>
              <div class="dateBox">
                <el-form-item label="营业期限" prop="subjectStartTime" class="businessDate">
                  <el-date-picker
                    v-model="personalForm.subjectStartTime"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd">
                  </el-date-picker>
                  <span class="description">至</span>
                  <el-date-picker
                    v-model="personalForm.subjectEndTime"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </div>
              <div class="describe"><p>请填写营业执照上的营业期限 注意参照示例中的格式 结束时间需大于开始时间 有效期必须大于60天</p></div>
              <el-form-item label="营业执照" prop="subjectLicense">
                <div class="idImgesBox">
                  <div class="idImgaeLeft">
                    <el-upload
                      list-type="picture-card"
                      :action="action"
                      :headers="myHeaders"
                      :show-file-list="false"
                      :on-success="handleHandHeld">
                      <img v-if="personalForm.subjectLicense" :src="personalForm.subjectLicense" class="avatar">
                      <div v-else class="noImg">
                        <div class="bgBox">
                          <img src="../../assets/images/yingyezhiz@2x.png" alt="">
                        </div>
                      </div>
                      <div class="changeImg">更换</div>
                      <div class="bgInfo">营业执照</div>
                    </el-upload>
                    <p>仅支持在有效期内的中国大陆工商局或市场监督管理局颁发的工商营业执照。格式要求：原证照片、扫描件或者 复印件加盖企业公章后的扫描</p>
                  </div>
                </div>
              </el-form-item>
              <div class="formTit">
                <span class="serialNumber">03</span>
                <span class="formName">经营者信息</span>
              </div>
              <el-form-item label="经营者姓名" prop="subjectOperator">
                <el-input maxlength="100" placeholder="请输入经营者姓名" v-model="personalForm.subjectOperator"></el-input>
              </el-form-item>
              <el-form-item label="证件类型" prop="subjectCardType" class="idType">
                <el-select v-model="personalForm.subjectCardType" placeholder="请选择">
                  <el-option
                    v-for="item in idCardList"
                    :key="item.dictId"
                    :label="item.dictName"
                    :value="item.dictId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="身份证号码" prop="subjectIdCard">
                <el-input maxlength="100" placeholder="请输入身份证号码" v-model="personalForm.subjectIdCard"></el-input>
              </el-form-item>
              <div class="dateBox idDateBox">
                <el-form-item label="身份证有效期" prop="subjectCardStartTime" class="businessDate">
                  <el-date-picker
                    v-model="personalForm.subjectCardStartTime"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd">
                  </el-date-picker>
                  <span class="description">至</span>
                  <el-date-picker
                    v-model="personalForm.subjectCardEndTime"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </div>
              <el-form-item label="证件照片" prop="subjectCardPositive">
                <div class="idImgesBox">
                  <div class="idImgaeLeft">
                    <el-upload
                      list-type="picture-card"
                      :action="action"
                      :headers="myHeaders"
                      :show-file-list="false"
                      :on-success="handleIdPositive">
                      <img v-if="personalForm.subjectCardPositive" :src="personalForm.subjectCardPositive" class="avatar">
                      <div v-else class="noImg">
                        <div class="bgBox">
                          <img src="../../assets/images/shenfenz@2x.png" alt="">
                        </div>
                      </div>
                      <!--                      <div class="zoomImg" @click="handlePictureCardPreview()">放大</div>-->
                      <div class="changeImg">更换</div>
                      <div class="bgInfo">身份证人像面</div>
                    </el-upload>
                  </div>
                  <div class="idImgaeRight">
                    <el-upload
                      list-type="picture-card"
                      :action="action"
                      :headers="myHeaders"
                      :show-file-list="false"
                      :on-success="handleIdBack">
                      <img v-if="personalForm.subjectCardSide" :src="personalForm.subjectCardSide" class="avatar">
                      <div v-else class="noImg">
                        <div class="bgBox">
                          <img src="../../assets/images/shenfenzb@2x.png" alt="">
                        </div>
                      </div>
                      <div class="changeImg">更换</div>
                      <div class="bgInfo">身份证国徽面</div>
                    </el-upload>
                  </div>
                </div>
              </el-form-item>
            </el-form>
          </div>
					<div style="margin-top: 28px;display: flex;justify-content: center;align-items: center;text-align: center;">
						<el-checkbox v-model="isAgreeService"></el-checkbox>
						<div style="margin-left: 12px;font-size: 14px;color: #646a73;">
							点击提交，代表你已阅读并同意
							<a style="color: #3370ff" href="https://www.tuanfengkeji.cn/TFShop_Uni_H5/#/pages/service-agreement/settle-agreement" target="_blank">《商家入驻协议》</a>
							和
							<a style="color: #3370ff" href="https://www.tuanfengkeji.cn/TFShop_Uni_H5/#/pages/service-agreement/privacy-policy" target="_blank">《隐私政策》</a>
						</div>
					</div>
          <el-button @click="submitForm('ruleForm')" class="submitBtn" type="primary">提交</el-button>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import CentLogo from '@/components/centLogo'
import api from '@/api'
import { listSearchMixin } from '@/config/mixin'
import { regionData, CodeToText } from 'element-china-area-data'
import Cookie from 'js-cookie'
export default {
  name: 'individualBusiness',
  mixins: [listSearchMixin],
  components: {CentLogo},
  data () {
    return {
      options: null,
      options2: regionData,
      selectedOptions: [],
      registeredAddress: [],
      setMealData: [],
      personalForm: {
        shopName: '', // 店铺名称
        shopPhone: '', // 手机号
        servicePhone: '', // 客服电话
        chargePersonName: '', // 店铺负责人
        chargePersonPhone: '', // 负责人电话
        shopAdress: '', // 店铺地址
        shopAdressProvince: '', // 店铺地址省
        shopAdressCity: '', // 店铺地址市
        storeAddressDetail: '', // 店铺详细地址
        subjectName: '', // 商户名称
        subjectCode: '', // 统一社会信用代码
        subjectRegion: '', // 注册地址 省-市-区
        subjectAdress: '', // 注册地址详细
        subjectStartTime: '', // 营业期限开始时间
        subjectEndTime: '', // 营业期限结束时间
        subjectLicense: '', // 营业执照图片地址
        subjectOperator: '', // 经营者姓名
        subjectCardType: '', // 身份证类型
        subjectIdCard: '', // 经营者身份证号码
        subjectCardStartTime: '', // 证件有效开始时间
        subjectCardEndTime: '', // 证件有效结束时间
        subjectCardPositive: '', // 身份证正面照
        subjectCardSide: '', // 身份证反面照
        shopType: 1, // 店铺类型 1商城 2本地
        isVoucher: 1, // 是否支持使用代金卷
        voucherReturn: '', // 代金卷的抵扣比例/返还比例
        areaId: '', // 区域ID
        packageId: '',
        parentId: ''
      },
      queryData: {
        page: 1,
        size: 20 // 策划师的角色在某个省可能会很多，但是一块区域肯定不会太多，放心大胆的写死为20！！！，不建议模仿 略略略 ψ(｀∇´)ψ
      },
      isPersonalForm: false,
      plannerColumns: null,
      idCardList: [],
      dictName: '证件类型',
      isShowImg: true,
      personalRules: {
        shopName: [
          { required: true, message: '请输入店铺名称', trigger: 'blur' }
        ],
        servicePhone: [
          { required: true, message: '请输入客服电话', trigger: 'blur' },
          { validator: function (rule, value, callback) {
              if (!/^1[34578]\d{9}$/.test(value) && !/^(\d{3,4}-)?\d{7,8}$/.test(value)) {
                callback(new Error('请输入正确的客服电话'))
              } else {
                callback()
              }
            },
            trigger: 'blur' }
        ],
        chargePersonName: [
          { required: true, message: '请输入店铺负责人', trigger: 'blur' }
        ],
        chargePersonPhone: [
          { required: true, message: '请输入店铺负责人电话', trigger: 'blur' },
          { validator: function (rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) === false) {
                callback(new Error('请输入正确的手机号'))
              } else {
                callback()
              }
            },
            trigger: 'blur' }
        ],
        shopAdressProvince: [
          { required: true, message: '请选择省份和城市', trigger: 'change' }
        ],
        storeAddressDetail: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        subjectName: [
          { required: true, message: '请输入商户名称', trigger: 'blur' }
        ],
        subjectCode: [
          { required: true, message: '请输入社会信用代码', trigger: 'blur' }
        ],
        subjectRegion: [
          { required: true, message: '请输入注册地址', trigger: 'blur' }
        ],
        subjectAdress: [
          { required: true, message: '请输入注册详细地址', trigger: 'blur' }
        ],
        subjectStartTime: [{required: true, message: '请选择营业执照起始日期'}],
        subjectEndTime: [{required: true, message: '请选择营业执照到期时间'}],
        subjectLicense: [
          { required: true, message: '请选择上传营业执照', trigger: 'blur' }
        ],
        subjectOperator: [
          { required: true, message: '请输入经营者姓名', trigger: 'blur' }
        ],
        subjectIdCard: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
          { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '你的身份证格式不正确' }
        ],
        subjectCardStartTime: [{required: true, message: '请选择身份证起始日期'}],
        subjectCardEndTime: [{required: true, message: '请选择身份证到期时间'}],
        subjectCardType: [
          { required: true, message: '请选择证件类型' }
        ],
        subjectCardPositive: [
          { required: true, message: '请选择上传身份证正面照', trigger: 'change' }
        ],
        subjectCardSide: [
          { required: true, message: '请选择上传手持身份证照片', trigger: 'change' }
        ]
      },
      dialogImageUrl: '',
      dialogVisible: false,
      imageUrl: '',
      action: api.upload,
      myHeaders: {},
			isAgreeService: false
    }
  },
  created () {
    this.sendReq({
        url: api.getTreeClass,
        method: 'GET',
        params: {}
      }, (res) => {
        // console.log(res) // 获取地址选择器数据并去除空的子项
        this.options = res.data
      })
    this.sendReq({
      url: api.getAdditional, // 套餐购买类型：1-商家，2-策划师 3-分公司
      method: 'GET',
      params: {
        type: 1
      }
    }, (res) => {
      // console.log(res) // 获取地址选择器数据并去除空的子项
      this.setMealData = res.data
      // console.log(this.options)
    })
  },
  mounted () {
    if (Cookie.get('token')) {
      this.myHeaders.Authorization = Cookie.get('token')
    }
    this.getDictList()
  },
  methods: {
    getDictList () {
      let self = this
      let params = {
        url: api.getByName + '?dictName=' + self.dictName,
        method: 'GET'
      }
      self.sendReq(params, (res) => {
        if (res.code === '') {
          self.idCardList = res.data
        }
      })
    },
    handleIdPositive (res, file) {
      this.personalForm.subjectCardPositive = res.data.url
      console.log(this.personalForm.subjectCardPositive)
    },
    handleIdBack (res, file) {
      this.personalForm.subjectCardSide = res.data.url
      console.log(this.personalForm.subjectCardPositive)
    },
    handleHandHeld (res, file) {
      this.personalForm.subjectLicense = res.data.url
      console.log(this.personalForm.subjectLicense)
    },
    addressChange (arr) {
      // console.log(arr)
      this.personalForm.shopAdress = ''
      let datas = this.$refs.addressChange.getCheckedNodes(false)[0] // 获取选中的节点数据
      for (let i = 0; i < datas.pathNodes.length; i++) {
        if (i >= datas.pathNodes.length - 1) {
          this.personalForm.shopAdress += datas.pathNodes[i].label
        } else {
          this.personalForm.shopAdress += datas.pathNodes[i].label + '/'
        }
      }
      this.sendReq({ // 获取可选择的分公司/策划师
        url: api.selectAnd,
        method: 'POST',
        data: {
          area: datas.value, // 地区编号
          type: 2,
          level: datas.level, // "区级别不能为空"
          page: this.queryData.page,
          pageSize: this.queryData.size
        }
        }, (res) => {
          this.plannerColumns = res.data.list
          console.log(res)
        })
    },
    // addressChange (arr) {
    //   this.personalForm.shopAdress = `${CodeToText[arr[0]]}-${CodeToText[arr[1]]}-${CodeToText[arr[2]]}`
    //   this.personalForm.shopAdressProvince = CodeToText[arr[0]]
    //   this.personalForm.shopAdressCity = CodeToText[arr[1]]
    //   console.log(this.personalForm.shopAdress)
    // },
    registeredAddressChange (arr) {
      this.personalForm.subjectRegion = `${CodeToText[arr[0]]}-${CodeToText[arr[1]]}-${CodeToText[arr[2]]}`
      console.log(this.personalForm.subjectRegion)
    },
    handlePictureCardPreview () {
      this.dialogImageUrl = this.idPositive
      this.dialogVisible = true
    },
    changeShopPone () {
      this.personalForm.shopPhone = this.personalForm.servicePhone
    },
    // 提交入驻
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
					if(!this.isAgreeService) return this.$message({ message: '请先同意《用户服务协议》和《隐私政策》', type: 'warning' })
          this.personalForm.shopAdress = `${this.personalForm.shopAdress}，${this.personalForm.storeAddressDetail}`
          let params = {
            url: api.individualCheck,
            method: 'POST',
            data: this.personalForm
          }
          this.sendReq(params, (res) => {
            if (res.code === '200') {
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.$router.push({path: '/status'})
            } else {
              this.$message({
                message: res.message,
                type: 'error'
              })
            }
          })
        } else {
          this.$message({
            message: '信息填写不完整！',
            type: 'warning'
          })
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    lazyLoadAddres (node, resolve) {
        // console.log(node)
         this.sendReq({
          url: api.getTreeOne,
          method: 'GET',
          params: {
            parentId: node.data.id
          }
          }, (res) => {
             resolve(res.data)
        })
      }
  }
}
</script>

<style lang="less" scoped>
.statusBox {
	/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
		background-color: #0059ff;
	}
  .infoBox {
    width: 100%;
    height: 700px;
    background: #ffffff;
    .title {
      background: #FAFAFA;
      width: 100%;
      height: 42px;
      line-height: 42px;
      text-align: center;
      border-bottom: 1px solid #E6E6E6;
    }
    .content {
      width: 100%;
      padding: 0 80px 50px 80px;
      height: 650px;
      overflow-y: auto;
      .formTit {
        height: 55px;
        display: flex;
        align-items: center;
        width: 100%;
        margin: 50px 0;
        border-bottom: 1px solid #E6E6E6;
        .serialNumber {
          width: 24px;
          height: 24px;
          color: #C5AA7B;
          border: 1px solid #C5AA7B;
          border-radius: 4px;
          margin-right: 10px;
          text-align: center;
          line-height: 24px;
          font-size: 12px;
        }
        .formName {
          font-size: 20px;
          font-weight: 400;
          color: #333333;
          width: 200px;
        }
      }
      .formBox {
        width: 100%;
        /deep/ .ruleForm {
          .el-form-item{
            padding: 0 170px;
          }
        }
        /deep/ .el-cascader {
          width: 100%;
        }
        .idDateBox {
          margin-bottom: 30px;
          /deep/.el-form-item__content{
            display: flex;
          }
        }
        .describe {
          margin: 15px 0 30px 0;
          p {
            font-size: 12px;
            color: #999999;
          }
        }
        .idImgesBox {
          display: flex;
          justify-content: space-between;
          .idImgaeLeft {
            width: 50%;
            /deep/ .el-upload-list--picture-card {
              background-color: #000!important;
              width: 284px;
              height: 180px;
            }
          }
          .idImgaeRight {
            width: 50%;
            text-align: right;
          }
          /deep/ .el-upload-list--picture-card {
            background-color: #000!important;
            width: 284px;
            height: 180px;
          }
          /deep/ .el-upload--picture-card {
            width: 284px;
            height: 180px;
            position: relative;
            .avatar {
              width: 100%;
              max-height: 178px;
            }
            .noImg {
              position: absolute;
              left: 0;
              top: 0;
              bottom: 0;
              right: 0;
              background: #F7F7F7;
              .bgBox {
                height: 149px;
                align-items: center;
                display: flex;
                justify-content: center;
              }
            }
            .bgInfo {
              color: #FFFFFF;
              font-size: 14px;
              height: 39px;
              line-height: 39px;
              background: #A0C1FF;
              position: absolute;
              left: 0;
              bottom: 0;
              width: 100%;
            }
            .changeImg {
              display: none;
              position: absolute;
              top: 40px;
              left: 112px;
              width: 60px;
              height: 60px;
              line-height: 60px;
              background: #000000;
              opacity: 0.6;
              border-radius: 50%;
              color: #FFFFFF;
            }
            .zoomImg {
              position: absolute;
              top: 40px;
              left: 50px;
              width: 60px;
              height: 60px;
              line-height: 60px;
              background: #000000;
              opacity: 0.6;
              border-radius: 50%;
              color: #FFFFFF;
            }
            &:hover {
              .changeImg {
                display: block;
              }
            }
          }
          /deep/ .el-upload-list--picture-card .el-upload-list__item {
            width: 284px;
            height: 180px;
          }
        }
        .businessDate {
          span {
            display: inline-block;
            text-align: center;
            width: 50px;
            color: #666666;
          }
          .el-date-editor--date {
            width: 268px;
          }
        }
        .idType {
          /deep/ .el-select {
            width: 100%;
          }
        }
      }
      .submitBtn {
        display: block;
        width: 750px;
        height: 50px;
        margin: 40px auto 0 auto;
        color: #FFEBC4;
        background: #333333;
        box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.2);
      }
    }
  }
  /deep/ .el-form-item__content {
    p {
      font-size: 12px;
      color: #999999;
      line-height: 20px;
      margin-top: 8px;
    }
    .el-input__inner,.el-textarea__inner{
      border-radius: 0;
      border: 1px solid transparent;
      color: #333;
      background: #F9F9F9;
      &:focus{
        border-color: #C5AA7B;
      }
    }
  }
}
.hide {
  /deep/ .el-upload--picture-card {
    display: none;
  }
}
.avatar-uploader {
  img {
    width: 100%;
  }
}

</style>