经销商管理

doum

2025-12-10 47c9193f257d66925a5d40a1d0b12eba331b8f4a

 admin/src/components/business/OperaShopWindow.vue

@@ -1,68 +1,191 @@
<template>
  <GlobalAlertWindow
  <GlobalWindow
    v-loading="isUploading"
    :title="title"
    width="60%"
    :visible.sync="visible"
    :confirm-working="isWorking"
    @confirm="confirm"
  >
    <el-form :model="form" ref="form" :rules="rules" label-width="110px" label-suffix="：" inline>
      <el-form-item label="店铺名称" prop="name">
      <p class="tip-header" >账号信息</p>
      <el-form-item label="登录账号" prop="username">
        <el-input v-model="form.username" placeholder="请输入登录账号" :maxlength="20" v-trim/>
      </el-form-item>
      <p class="tip-warn" style="width: 100%;text-align: center"><i class="el-icon-warning"></i>新建或者修改账号，密码默认为:【门店ID+"@123456"】，如门店ID为S001,默认密码：S001@123456</p>
      <p class="tip-header" >基本信息</p>
      <el-form-item label="经销商名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入店铺名称，20字以内" :maxlength="20" v-trim/>
      </el-form-item>
      <el-form-item label="店铺LOGO" prop="imgurl">
        <UploadAvatarImage
          :file="{ 'imgurlfull': form.imgurlfull, 'imgurl': form.imgurl }"
          :uploadData="uploadData"
          @uploadSuccess="uploadAvatarSuccess"
          @uploadEnd="isUploading = false"
          @uploadBegin="isUploading = true"
        />
      <el-form-item label="门店ID" prop="code">
        <el-input v-model="form.code" placeholder="请输入门店ID，10字以内" :maxlength="10" v-trim/>
      </el-form-item>
      <el-form-item label="店铺地址" prop="addr">
        <el-input v-model="form.addr" placeholder="请输入地址" v-trim/>
      <el-form-item label="销售模式" prop="saleType">
        <el-radio-group v-model="form.saleType">
          <el-radio :label="0">平台铺货</el-radio>
          <el-radio :label="1">自主采购</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="店铺负责人" prop="memberId">
        <el-select
          v-model="form.memberId"
          placeholder="请输入会员昵称/手机号，再选择"
          filterable
          remote
          reserve-keyword
          :remote-method="remoteMethod"
          :loading="searchLoading"
        >
      <el-form-item label="联系人" prop="realname">
        <el-input v-model="form.realname" placeholder="请输入联系人"  v-trim/>
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入联系电话"  v-trim/>
      </el-form-item>
      <el-form-item label="营业时间" prop="startTime">
        <el-input v-model="form.startTime" placeholder="请输入营业时间"  v-trim/>
      </el-form-item>
      <el-form-item label="所属区域" prop="bigAreaId">
        <el-select v-model="form.bigAreaId" placeholder="请选择所属区域"  filterable clearable>
          <el-option
            v-for="item in users"
            :key="item.id"
            :label="item.nickname"
            :value="item.id">
          </el-option>
              v-for="item in bigAreas"
              :key="item.id"
              :value="item.id"
              :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <div  style="display: flex; ">
        <el-form-item label="选择省市区" prop="provinceId">
          <el-select v-model="form.provinceId" placeholder="选择省份" clearable @change="selectProvince">
            <el-option
                v-for="item in provinces"
                :key="item.id"
                :value="item.id"
                :label="item.name"
            ></el-option>
          </el-select>
      </el-form-item>
        <el-form-item label="" prop="cityId">
          <el-select v-model="form.cityId" placeholder="选择城市" clearable  @change="selectCity">
            <el-option
                v-for="item in cities"
                :key="item.id"
                :value="item.id"
                :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="areaId" >
          <el-select v-model="form.areaId" placeholder="选择县区" clearable>
            <el-option
                v-for="item in areas"
                :key="item.id"
                :value="item.id"
                :label="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item label="详细地址" prop="addr">
        <el-input v-model="form.addr" placeholder="请输入详细地址" v-trim/>
      </el-form-item>
      <el-form-item label="定位信息" prop="locationInfo">
        <div  style="display: flex;  ">
          <el-input v-model="form.locationInfo" placeholder="请点击选择按钮，搜索[纬度,经度]信息" v-trim  style=" width: calc(100% - 100px);"/>
          <el-button type="primary" style=" margin-left: 20px; width: 80px" @click="selectLocation">选择</el-button>
         </div>
        <p class="tip-warn" style="width: 100%;"><i class="el-icon-warning"></i>
          点击[选择]，跳转后根据门店地址搜索地图定位地址，获取[纬度,经度]信息。</p>
      </el-form-item>
      <el-form-item label="门店图片" prop="imgurl">
        <div  style="display: flex; display: flex; align-items: center;justify-content: center;  height: 100%; width: 100%">
          <UploadAvatarImage
            :file="{ 'imgurlfull': form.imgurlfull, 'imgurl': form.imgurl }"
            :uploadData="uploadData"
            @uploadSuccess="uploadAvatarSuccess"
            @uploadEnd="isUploading = false"
            @uploadBegin="isUploading = true"
            style=" width: 120px;"
          />
          <div class="tip-warn" style=" margin-left: 20px; margin-top: 30px;">
            建议尺寸：100px X 100px
            支持png、jpg、jpeg格式，大小不超过2M，上传图片不允许涉及政治敏感与色情
          </div>
        </div>
      </el-form-item>
      <el-form-item label="宣传海报" prop="posterImg">
        <div  style="display: flex;  align-items: center;justify-content: center;  height: 100%; width: 100%">
        <UploadAvatarImage
            :file="{ 'imgurlfull': form.posterImgfull, 'imgurl': form.posterImg }"
            :uploadData="uploadData"
            @uploadSuccess="uploadAvatarSuccess1"
            @uploadEnd="isUploading1 = false"
            @uploadBegin="isUploading1 = true"
            style=" width: 120px;"
        />
          <div class="tip-warn" style=" margin-left: 20px; margin-top: 30px;">
            建议尺寸：100px X 100px
            支持png、jpg、jpeg格式，大小不超过2M，上传图片不允许涉及政治敏感与色情
          </div>
        </div>
      </el-form-item>
      <p class="tip-header" >资质信息</p>
      <el-form-item label="营业执照" prop="businessImg">
        <div  style="display: flex; align-items: center;justify-content: center;  height: 100%; width: 100%">
        <UploadAvatarImage
            :file="{ 'imgurlfull': form.businessImgfull, 'imgurl': form.businessImg}"
            :uploadData="uploadData"
            @uploadSuccess="uploadAvatarSuccess2"
            @uploadEnd="isUploading2 = false"
            @uploadBegin="isUploading2= true"
            style=" width: 120px;"
        />
        <div class="tip-warn" style=" margin-left: 20px; margin-top: 30px;">
          建议尺寸：100px X 100px
          支持png、jpg、jpeg格式，大小不超过2M，上传图片不允许涉及政治敏感与色情
        </div>
        </div>
      </el-form-item>
      <el-form-item label="法人姓名" prop="legalPersonName">
        <el-input v-model="form.legalPersonName" placeholder="请输入法人姓名" v-trim/>
      </el-form-item>
      <el-form-item label="法人电话" prop="legalPersonPhone">
        <el-input v-model="form.legalPersonPhone" placeholder="请输入法人联系电话" v-trim/>
      </el-form-item>
      <div  style="display: flex;  height: 100%; width: 100%">
       <el-form-item label="身份证照"   prop="idcardImg"   style=" width: 250px;">
        <UploadAvatarImage
            :file="{ 'imgurlfull': form.idcardImgfull, 'imgurl': form.idcardImg}"
            :uploadData="uploadData"
            @uploadSuccess="uploadAvatarSuccess3"
            @uploadEnd="isUploading3 = false"
            @uploadBegin="isUploading3= true"
        />
         <div class="tip-warn" style=" margin-left: 20px; ">  人像面  </div>
          </el-form-item>
        <el-form-item label="" prop="idcardImgBack" style="  width: 200px;margin-left: 30px">
          <UploadAvatarImage
              :file="{ 'imgurlfull': form.idcardImgBackfull, 'imgurl': form.idcardImgBack}"
              :uploadData="uploadData"
              @uploadSuccess="uploadAvatarSuccess4"
              @uploadEnd="isUploading4 = false"
              @uploadBegin="isUploading4= true"
          />
          <div class="tip-warn" style=" margin-left: 20px; ">国徽面</div>
        </el-form-item>
        </div>
    </el-form>
  </GlobalAlertWindow>
  </GlobalWindow>
</template>

<script>
import BaseOpera from '@/components/base/BaseOpera'
import GlobalAlertWindow from '@/components/common/GlobalAlertWindow'
import UploadAvatarImage from '@/components/common/UploadAvatarImage'
import { findAll } from '@/api/business/member'
import GlobalWindow from '@/components/common/GlobalWindow'
import { listByParentId } from '@/api/business/areas'
import { findAll as listBigAreas } from '@/api/business/labels'
export default {
  name: 'OperaShopWindow',
  extends: BaseOpera,
  components: { GlobalAlertWindow, UploadAvatarImage },
  components: { GlobalWindow, UploadAvatarImage },
  data () {
    let memberRule = (rule, value, callBack) => {
      if (!value) {
        callBack(new Error())
      } else {
        callBack()
      }
    }
    return {
      isUploading: false,
      isUploading1: false,
      isUploading2: false,
      isUploading3: false,
      isUploading4: false,
      searchLoading: false,
      uploadData: {
        folder: 'shop'
@@ -71,23 +194,89 @@
      form: {
        id: null,
        name: '',
        username: '',
        realname: '',
        phone: '',
        code: '',
        startTime: null,
        bigAreaId: null,
        areaId: null,
        saleType: 0,
        provinceId: null,
        legalPersonName: null,
        legalPersonPhone: null,
        cityId: null,
        imgurl: '',
        imgurlfull: '',
        businessImg: '',
        businessImgfull: '',
        idcardImgBack: '',
        idcardImgBackfull: '',
        idcardImg: '',
        idcardImgfull: '',
        posterImg: '',
        posterImgfull: '',
        locationInfo: '',
        addr: '',
        memberId: ''
      },
      users: [],
      bigAreas: [],
      provinces: [],
      cities: [],
      areas: [],
      // 验证规则
      rules: {
        name: [
          { required: true, message: '请输入店铺名称', tigger: 'blur' }
          { required: true, message: '请输入名称', tigger: 'blur' }
        ],
        imgurl: [
          { required: true, message: '请上传店铺LOGO', tigger: 'change' }
        saleType: [
          { required: true, message: '请选择销售模式' }
        ],
        memberId: [
          { required: true, validator: memberRule,  message: '请选择关联用户', tigger: 'change' }
        addr: [
          { required: true, message: '请输入详细地址', tigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入上传门店ID', tigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入登录账号', tigger: 'blur' }
        ],
        realname: [
          { required: true, message: '请输入联系人姓名', tigger: 'blur' }
        ],
        legalPersonName: [
          { required: true, message: '请输入法人姓名', tigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入联系人电话', tigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '请输入营业时间', tigger: 'blur' }
        ],
        locationInfo: [
          { required: true, message: '请完善定位信息', tigger: 'blur' }
        ],
        businessImg: [
          { required: true, message: '请上传营业执照', tigger: 'change' }
        ],
        idcardImgBack: [
          { required: true, message: '请上传法人身份证国徽面', tigger: 'change' }
        ],
        idcardImg: [
          { required: true, message: '请上传法人身份证人像面', tigger: 'change' }
        ],
        provinceId: [
          { required: true, message: '请选择省市' }
        ],
        cityId: [
          { required: true, message: '请选择城市' }
        ],
        areaId: [
          { required: true, message: '请选择县区' }
        ],
        bigAreaId: [
          { required: true, message: '请选择所属区域' }
        ]
      }
    }
  },
@@ -96,14 +285,75 @@
      api: '/business/shop',
      'field.id': 'id'
    })
    listBigAreas({ type: 13 })
      .then(data => {
        this.bigAreas = data
      })
    listByParentId({ type: 0, parentId: '' })
      .then(data => {
        this.provinces = data
      })
  },
  methods: {
    selectProvince (val) {
      this.form.cityId = null
      this.form.areaId = null
      this.cities = []
      this.areas = []
      listByParentId({ type: 1, parentId: val })
        .then(data => {
          this.cities = data
        })
        .catch(e => {
          this.$tip.error(e)
        })
    },
    selectCity (val) {
      this.form.areaId = null
      this.areas = []
      listByParentId({ type: 2, parentId: val })
        .then(data => {
          this.areas = data
        })
        .catch(e => {
          this.$tip.error(e)
        })
    },
    initCityArea (proid, cityid) {
      listByParentId({ type: 1, parentId: proid })
        .then(data => {
          this.cities = data
        })
        .catch(e => {
          this.$tip.error(e)
        })
      listByParentId({ type: 2, parentId: cityid })
        .then(data => {
          this.areas = data
        })
        .catch(e => {
          this.$tip.error(e)
        })
    },

    selectLocation () {
      window.open('https://lbs.qq.com/tool/getpoint/get-point.html')
    },
    open (title, target) {
      this.title = title
      this.visible = true
      // this.isEdit = false
      this.form.imgurlfull = ''
      this.form.imgurl = ''
      this.form.idcardImgfull = ''
      this.form.idcardImg = ''
      this.form.idcardImgBackfull = ''
      this.form.idcardImgBack = ''
      this.form.businessImgfull = ''
      this.form.businessImg = ''
      this.form.posterImgfull = ''
      this.form.posterImg = ''
      this.cities = []
      this.areas = []
      // 新建
      if (target == null) {
        this.$nextTick(() => {
@@ -118,32 +368,50 @@
        for (const key in this.form) {
          this.form[key] = target[key]
        }
        this.form.imgurlfull = target.imgFullUrl + target.imgurl
        this.remoteMethod(target.nikeName)
        if (target.idcardImg) {
          this.form.idcardImgfull = target.imgFullUrl + target.idcardImg
        }
        if (target.idcardImgBack) {
          this.form.idcardImgBackfull = target.imgFullUrl + target.idcardImgBack
        }
        if (target.imgurl) {
          this.form.imgurlfull = target.imgFullUrl + target.imgurl
        }
        if (target.businessImg) {
          this.form.businessImgfull = target.imgFullUrl + target.businessImg
        }
        if (target.posterImg) {
          this.form.posterImgfull = target.imgFullUrl + target.posterImg
        }
        console.log('==========================', target.areas)
        if (target.areas != null) {
          this.form.provinceId = target.areas.provinceId
          this.form.cityId = target.areas.cityId
          this.initCityArea(this.form.provinceId, this.form.cityId)
        }
      })
    },
    uploadAvatarSuccess(file) {
    uploadAvatarSuccess (file) {
      this.form.imgurl = file.imgurl
      this.form.imgurlfull = file.imgurlfull
    },
    remoteMethod(query) {
      if (query !== '') {
        this.searchLoading = true
        findAll({
          model: {
            nickname: query,
            status: 0
          }
        })
          .then(res => {
            this.users = res
          })
          .finally(() => {
            this.searchLoading = false
          })
      }
    uploadAvatarSuccess1 (file) {
      this.form.posterImg = file.imgurl
      this.form.posterImgfull = file.imgurlfull
    },
    uploadAvatarSuccess2 (file) {
      this.form.businessImg = file.imgurl
      this.form.businessImgfull = file.imgurlfull
    },
    uploadAvatarSuccess4 (file) {
      this.form.idcardImgBack = file.imgurl
      this.form.idcardImgBackfull = file.imgurlfull
    },
    uploadAvatarSuccess3 (file) {
      this.form.idcardImg = file.imgurl
      this.form.idcardImgfull = file.imgurlfull
    }
  },
  }
}
</script>