tuanfeng-pc-admin/src/views/business/businessList/index.vue

<!--  -->
<template>
  <div>
    <div class="pending">
      <!-- 搜索 -->
      <div class="formSearch">
        <el-form :inline="true" :model="formInline">
          <el-form-item label="店铺名称">
            <el-input v-model="formInline.shopName" maxlength="20" placeholder="请输入店铺名称" />
          </el-form-item>
          <el-form-item label="店铺编码">
            <el-input v-model="formInline.shopCode" maxlength="20" placeholder="请输入店铺编码" />
          </el-form-item>
          <el-form-item label="负责人">
            <el-input v-model="formInline.chargePersonName" maxlength="20" placeholder="请输入负责人" />
          </el-form-item>
          <el-form-item label="合同状态">
            <el-select v-model="formInline.contractState" placeholder="请选择">
              <el-option label="有效" value="1" />
              <el-option label="无效" value="0" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="onSubmit">
              查询
            </el-button>
            <el-button type="success" plain @click="addbuss">
              新建商家
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableBox">
        <el-table ref="multipleTable" :data="tableData" border
          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%">
          <el-table-column label="店铺名称" width="220">
            <template slot-scope="scope">{{ scope.row.shopName }}</template>
          </el-table-column>
          <el-table-column prop="shopCode" label="店铺编码" />
          <el-table-column prop="chargePersonName" label="负责人" />
          <el-table-column prop="chargePersonPhone" label="联系电话" />
          <el-table-column label="合同状态">
            <template slot-scope="scope">
              <span v-if="scope.row.contractState === 0">无效</span>
              <span v-if="scope.row.contractState === 1">有效</span>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column label="操作" show-overflow-tooltip>
            <template slot-scope="scope">
              <div class="btnList">
                <el-button type="text" @click="seeMore(scope.row)">
                  查看
                </el-button>
                <el-button type="text" @click="edit(scope.row)">
                  编辑
                </el-button>
                <el-button v-if="scope.row.state == 1" type="text" @click="del(scope.row)">
                  禁用
                </el-button>
                <el-button v-else type="text" @click="del(scope.row)">
                  启用
                </el-button>
                <el-button type="text" @click="delBusiness(scope.row)">
                  删除
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="10"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        </div>
      </div>
      <!-- ******************************************************弹框开始****************************************************** -->
      <!-- 新建商家弹框 -->
      <el-dialog :title="userState === 0
        ? '新增商家'
        : userState === 1
          ? '修改商家'
          : '查看商家'
        " :visible.sync="dialogVisible" width="30%" center :before-close="closeFn" :close-on-click-modal="false">
        <div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="授权信息" name="first">
              <el-form ref="ruleFormInfo" :model="ruleForm" :rules="rulesInfo" label-width="120px">
                <el-form-item label="店铺名称" prop="shopName">
                  <el-input v-model="ruleForm.shopName" maxlength="20" :disabled="disabled" />
                </el-form-item>
                <el-form-item label="店铺负责人" prop="chargePersonName">
                  <el-input v-model="ruleForm.chargePersonName" maxlength="20" :disabled="disabled" />
                </el-form-item>
                <el-form-item label="负责人电话" prop="chargePersonPhone">
                  <el-input v-if="cpPhoneShow" :value="hidden(ruleForm.chargePersonPhone, 3, 4)" maxlength="11"
                    :disabled="disabled" @focus="focuscpPhoneInput" />
                  <el-input v-else ref="cpPhoneCls" v-model="ruleForm.chargePersonPhone" maxlength="11" clearable
                    :disabled="disabled" @change="changecpPhoneInput" />
                </el-form-item>
                <el-form-item label="请选择区域" prop="areaId">
                  <el-cascader v-if="!isEdit" :disabled="disabled" :props="areaData" ref="cascaderRef"
                    @change="handleCascaderChange"></el-cascader>
                  <div v-else>
                    {{ ruleForm.areaId }}
                    <el-button :disabled="disabled" size="mini" type="primary" style="margin-left: 15px;"
                      @click="isEdit = !isEdit">{{ isEdit ? '修改' : '取消' }}</el-button>
                  </div>
                </el-form-item>

                <el-form-item label="请选择门店分类" prop="classificationId">
                  <el-cascader :disabled="disabled" v-model="ruleForm.classificationId" :options="allShopCategoryList"
                    :props="{ label: 'storeName', value: 'id', children: 'childs' }"></el-cascader>
                </el-form-item>
                <el-form-item label="店铺地址" prop="shopAdress">
                  <el-input ref="addressCls" v-model="ruleForm.shopAdress" maxlength="60" :disabled="disabled" />
                  <!-- <div v-else @click="inputAddress">
                    <el-input :value="hidden(ruleForm.shopAdress, 1, 1)" :disabled="disabled" />
                  </div> -->
                </el-form-item>
                <el-form-item label="店铺经纬度" prop="longitude">
                  <div>
                    <span v-if="ruleForm.longitude">
                      {{ ruleForm.longitude }} - {{ ruleForm.latitude }}
                    </span>
                    <el-button size="mini" type="primary" style="margin-left: 20px;"
                      @click="$refs.selectAddressMapRef && $refs.selectAddressMapRef.show()">{{ ruleForm.longitude ? '修改'
                        :
                        '选择' }}</el-button>
                  </div>
                </el-form-item>
                <el-form-item label="生效日期" prop="effectiveDate">
                  <el-date-picker v-model="ruleForm.effectiveDate" :disabled="disabled" value-format="yyyy-MM-dd"
                    type="date" placeholder="选择日期" />
                </el-form-item>
                <el-form-item label="生效年限" prop="effectiveYear">
                  <el-input v-model="ruleForm.effectiveYear" type="text" :disabled="disabled" placeholder="请输入内容"
                    maxlength="4" class="elipt" style="width: 50%" show-word-limit />
                  <span class="elspan">年</span>
                </el-form-item>
                <el-form-item label="合同状态" prop="contractState">
                  <el-radio-group v-model="ruleForm.contractState">
                    <el-radio :disabled="disabled" :label="1">
                      有效
                    </el-radio>
                    <el-radio :disabled="disabled" :label="0">
                      无效
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="店铺类型" prop="shopType">
                  <el-radio-group v-model="ruleForm.shopType">
                    <el-radio :disabled="disabled" :label="1">
                      商家
                    </el-radio>
                    <el-radio :disabled="disabled" :label="2">
                      本地
                    </el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item v-if="ruleForm.shopType === 2" prop="startTime" label="营业开始时间" :rules="[
                  { required: true, message: '请选择营业开始时间', trigger: 'blur' }]">

                  <el-time-select :disabled="disabled" placeholder="起始时间" v-model="ruleForm.startTime" :picker-options="{
                    start: '08:30',
                    step: '00:05',
                  }">
                  </el-time-select>

                </el-form-item>

                <el-form-item v-if="ruleForm.shopType === 2" prop="endTime" label="营业结束时间" :rules="[
                  { required: true, message: '请选择营业开始时间', trigger: 'blur' }]">

                  <el-time-select :disabled="disabled" placeholder="营业结束时间" v-model="ruleForm.endTime" :picker-options="{
                    step: '00:05',
                    end: '18:30',
                    minTime: ruleForm.endTime
                  }">
                  </el-time-select>
                </el-form-item>

                <el-form-item label="是否支持代金卷" prop="isVoucher">
                  <el-radio-group v-model="ruleForm.isVoucher">
                    <el-radio :disabled="disabled" :label="1">
                      允许
                    </el-radio>
                    <el-radio :disabled="disabled" :label="2">
                      拒绝
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item v-if="ruleForm.isVoucher === 1" :rules="[
                  { required: true, message: '请输入代金券返还比例', trigger: 'blur' },
                  { type: 'number', max: 100, min: 0, message: '请输入正确的代金券返还比例，0 ~ 100', trigger: ['blur', 'change'] }
                ]" label="代金券返还比例" prop="voucherReturn">
                  <el-input :disabled="disabled" placeholder="请填写代金券返还比例，范围0 ~ 100"
                    v-model.number="ruleForm.voucherReturn">
                    <template slot="append">%</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="直播间审核" prop="auditLive">
                  <el-radio-group v-model="ruleForm.auditLive">
                    <el-radio :disabled="disabled" :label="1">
                      开启
                    </el-radio>
                    <el-radio :disabled="disabled" :label="0">
                      关闭
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="直播间商品审核" prop="auditLiveProduct">
                  <el-radio-group v-model="ruleForm.auditLiveProduct">
                    <el-radio :disabled="disabled" :label="1">
                      开启
                    </el-radio>
                    <el-radio :disabled="disabled" :label="0">
                      关闭
                    </el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item class="b-shop-rate" prop="score" label="评分">
                  <el-rate :disabled="disabled" v-model="ruleForm.score"></el-rate>
                </el-form-item>

                <el-form-item prop="monthlySales" label="月售">
                  <el-input :disabled="disabled" placeholder="请输入商家月售额" v-model.number="ruleForm.monthlySales"
                    type="number"></el-input>
                </el-form-item>

                <el-form-item prop="perCapita" label="人均">
                  <el-input :disabled="disabled" type="number" placeholder="请输入人均消费额" v-model.number="ruleForm.perCapita"
                    closeable></el-input>
                </el-form-item>

                <el-form-item prop="advertisement" label="广告图">
                  <el-upload :disabled="disabled" class="avatar-uploader" list-type="picture-card"
                    :file-list="advertisementList" :action="action" :on-success="handleAvatarSuccess"
                    :on-remove="handleRemovePic">
                    <i class="el-icon-plus avatar-uploader-icon" />
                  </el-upload>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="客户信息" name="second">
              <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
                <el-form-item label="账号" prop="shopPhone">
                  <el-input v-if="shopPhoneShow" :value="hidden(ruleForm.shopPhone, 3, 4)" :disabled="disabled"
                    maxlength="20" @focus="focusShopPhoneInput" />
                  <el-input v-else ref="shopPhoneCls" v-model="ruleForm.shopPhone" :disabled="disabled" maxlength="20" />
                </el-form-item>
                <el-form-item label="密码" prop="shopPassword">
                  <el-input v-model="ruleForm.shopPassword" type="password" :disabled="disabled" maxlength="16" />
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeFn">取 消</el-button>
          <el-button v-if="activeName == 'first'" type="primary" @click="next">下一步</el-button>
          <el-button v-else type="primary" @click="addCheck('ruleForm')">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 选择经纬度 -->
    <SelectAddressMap ref="selectAddressMapRef" @select="handleSelectLngAndLat"></SelectAddressMap>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import {
  businessListGetAll,
  businessListSave,
  businessListGetById,
  businessListUpdate,
  businessListStart,
  delBusinessById
} from '@/api/business'
import { uploadUrl } from '@/utils/request'
import { getProvinceList, getChildAreaList } from '@/api/address'
import { businessClassList } from '@/api/business'
import SelectAddressMap from './components/SelectAddressMap'

export default {
  // eslint-disable-next-line vue/match-component-file-name
  name: 'BusinessList',
  components: { SelectAddressMap },
  data() {
    // 这里存放数据
    return {
      action: uploadUrl,
      advertisementList: [],
      allShopCategoryList: [],
      areaData: {
        lazy: true,
        label: 'name',
        value: 'id',
        lazyLoad(node, resolve) {
          const { level, value } = node;
          if (level === 0) {
            getProvinceList().then(res => {
              resolve(res.data)
            })
          } else if (level != 0) {
            getChildAreaList(value).then(res => {
              resolve(res.data.map(item => {
                item.leaf = level === 3
                return item
              }))
            })
          }
        }
      },
      // 新建商家弹框
      dialogVisible: false,
      isEdit: false, // 是否是编辑
      originShopDetailInfo: null, // 点击编辑上架2详情原始数据
      activeName: 'first',
      formInline: {
        shopName: '', // 店铺名称
        shopCode: '', // 店铺编码
        chargePersonName: '', // 店铺负责人
        contractState: '', // 合同状态 1-有效 0-无效
        page: '1', // 当前页
        pageSize: '10' // 每页记录数
      },
      disabled: false,
      ruleForm: {
        shopName: '', // 店铺名称
        chargePersonName: '', // 店铺负责人
        chargePersonPhone: '', // 负责人电话
        shopType: 1, // 店铺类型 1商家 2本地
        isVoucher: 1, // 是否支持代金卷 1 true 2 false
        shopAdress: '', // 地址
        effectiveDate: '', // 生效日期
        effectiveYear: '', // 生效年限
        contractState: 1, // 合同状态 1-有效 0-无效
        auditLive: 1,
        auditLiveProduct: 1,
        shopPhone: '', // 账号
        shopPassword: '', // 密码
        perCapita: "", //人均
        score: 5, // 评分
        advertisement: '',
        classificationId: null, // 商家分类id
        startTime: "",
        endTime: ""
      },
      showPhone: false,
      showAddress: false,
      userPhone: '',
      showUserPhone: false,
      newAddress: '',
      personPhone: '',

      rulesInfo: {
        effectiveYear: [
          { required: true, message: '请输入生效时限', trigger: 'blur' }
        ],
        shopName: [
          { required: true, message: '请输入店铺名称', trigger: 'blur' }
        ],
        chargePersonName: [
          { required: true, message: '请输入店铺负责人', trigger: 'blur' }
        ],
        chargePersonPhone: [
          { required: true, message: '请输入负责人电话', trigger: 'blur' },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '目前只支持中国大陆的手机号码'
          }
        ],
        shopAdress: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
        contractState: [
          {
            required: true,
            message: '请选择合同状态',
            trigger: 'change'
          }
        ],
        shopType: [
          {
            required: true,
            message: '请选择店铺类型',
            trigger: 'change'
          }
        ],
        perCapita: [
          { required: true, message: "请输入人均消费额", trigger: "blur" }
        ],
        isVoucher: [
          {
            required: true,
            message: '请选择是否允许使用代金卷',
            trigger: 'change'
          }
        ], // 是否支持代金卷 1 true 2 false
        auditLive: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }
        ],
        auditLiveProduct: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }
        ],
        effectiveDate: [
          {
            required: true,
            message: '请选择日期',
            trigger: 'change'
          }
        ],
        score: [
          {
            required: true,
            message: '请选择商家评分',
            trigger: 'change'
          }
        ],
        monthlySales: [
          {
            required: true,
            message: '请输入商家月售额',
            trigger: 'trigger'
          }
        ],
        // advertisement: [
        //   {
        //     required: true,
        //     message: '请上传广告图',
        //     trigger: 'trigger'
        //   }
        // ],
        areaId: [
          {
            required: true,
            message: "请选择地址",
            trigger: 'blur'
          }
        ],
        longitude: [
          {
            required: true,
            message: "请选择商家经纬度",
            trigger: 'blur'
          }
        ]
      },
      rules: {
        shopPhone: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: '目前只支持中国大陆的手机号码'
          }
        ],
        shopPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },

          {
            pattern: /^[~!@#$%^&*\-+=_.0-9a-zA-Z]{8,16}$/,
            message: '8-16密码数字英文混合'
          }
        ]
      },
      total: 1,
      tableData: [],
      currentPage: 1,
      userState: 1,
      privacyTime: 0,
      cpPhoneShow: true, // 是否显示脱敏负责人手机号
      shopPhoneShow: true // 是否显示脱敏账号
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getAll(this.formInline)
    this.getCategoryList()
    this.privacyTime = localStorage.getItem('privacyTime')
    console.log(this.privacyTime)
  },
  // 方法集合
  methods: {
    focusShopPhoneInput() {
      this.shopPhoneShow = false
      this.ruleForm.shopPhone = ''
      // 自动获取焦点
      this.$nextTick(() => {
        this.$refs.shopPhoneCls.focus()
      })
    },
    focuscpPhoneInput() {
      this.cpPhoneShow = false
      this.ruleForm.chargePersonPhone = ''
      // 自动获取焦点
      this.$nextTick(() => {
        this.$refs.cpPhoneCls.focus()
      })
    },
    changecpPhoneInput() {
    },
    handleSizeChange(val) {
      this.formInline.pageSize = val
      this.getAll(this.formInline)
    },
    handleCurrentChange(val) {
      this.formInline.page = val
      this.getAll(this.formInline)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    onSubmit() {
      this.getAll(this.formInline)
    },
    // 新建商家
    addbuss() {
      this.userState = 0
      this.disabled = false
      this.newAddress = ''
      this.personPhone = ''
      this.ruleForm = {
        shopName: '', // 店铺名称
        chargePersonName: '', // 店铺负责人
        chargePersonPhone: '', // 负责人电话
        shopAdress: '', // 地址
        effectiveDate: '', // 生效日期
        effectiveYear: '', // 生效年限
        shopType: 1, // 商家类型 1 商家 2 本地
        isVoucher: 1, // 是否支持代金卷 1 true 2 false
        contractState: 1, // 合同状态 1-有效 0-无效
        auditLive: 1,
        auditLiveProduct: 1,
        shopPhone: '', // 账号
        shopPassword: '', // 密码
        advertisement: '', // 广告图
        areaId: '', // 区域id
        longitude: '', // 经纬度
        latitude: '', // 经纬度
      }
      this.dialogVisible = true
      this.advertisementList = []
    },
    next() {
      this.activeName = 'second'
    },
    closeFn() {
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields()
        this.$refs.ruleForm.clearValidate()
        this.$refs.ruleFormInfo.clearValidate()
        this.dialogVisible = false
      })
    },
    // 新建商家确定
    addCheck() {
      const submitData = JSON.parse(JSON.stringify(this.ruleForm))
      submitData.advertisement = this.advertisementList.map(item => item.url).join(',')
      console.log(submitData)

      this.$refs['ruleFormInfo'].validate((valid) => {
        if (valid) {
          console.log(this.userState)
          if (this.personPhone !== '') {
            submitData.chargePersonPhone = this.personPhone
          }
          if (this.newAddress !== '') {
            submitData.shopAdress = this.newAddress
          }
          if (this.userPhone !== '') {
            submitData.shopPhone = this.userPhone
          }
          if (submitData.shopName === '') {
            this.$message.error('请输入店铺名称')
            return
          }
          if (submitData.effectiveDate === '') {
            this.$message.error('请输入生效日期')
            return
          }
          if (submitData.effectiveYear === '') {
            this.$message.error('请输入生效年限')
            return
          }

          submitData.classificationId = submitData.classificationId[2]
          if (!this.userState) {
            businessListSave(submitData).then((res) => {
              console.log(res)
              if (res.code === '') {
                this.$message({
                  message: '新增成功',
                  type: 'success'
                })
              }
              this.getAll(this.formInline)
              this.dialogVisible = false
              this.$refs.ruleForm.clearValidate()
            })
          } else {
            businessListUpdate(submitData).then((res) => {
              console.log(res)
              if (res.code === '') {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.$refs.ruleForm.clearValidate()
              }
              this.getAll(this.formInline)
              this.dialogVisible = false
            })
          }
        } else {
          console.log('error submit!!')
          this.$message.error('请输入完整信息')
          return false
        }
      })
    },
    // 查看
    async seeMore(row) {
      this.showPhone = false
      this.cpPhoneShow = true
      this.shopPhoneShow = true
      const res = await businessListGetById({ shopId: row.shopId })
      if (res.code === '') {
        this.userState = 3
        this.disabled = true
        this.ruleForm = res.data
        this.dialogVisible = true
        this.initShopClassPath(this.ruleForm.classificationId)
        this.ruleForm.voucherReturn *= 1
        const advertisementStr = this.ruleForm.advertisement
        if (advertisementStr && typeof advertisementStr === 'string') {
          this.advertisementList = advertisementStr.split(',').map(item => {
            return {
              url: item,
              uid: item + Math.random() + new Date()
            }
          })
        }
      }
    },
    // 编辑
    async edit(row) {
      this.showPhone = false
      this.personPhone = ''
      this.userState = 1
      this.disabled = false
      this.cpPhoneShow = true
      const res = await businessListGetById({ shopId: row.shopId })
      this.ruleForm = res.data
      this.dialogVisible = true
      this.isEdit = true
      this.originShopDetailInfo = JSON.parse(JSON.stringify(res.data))
      this.initShopClassPath(this.ruleForm.classificationId)
      this.ruleForm.voucherReturn *= 1
      const advertisementStr = this.ruleForm.advertisement
      if (advertisementStr && typeof advertisementStr === 'string') {
        this.advertisementList = advertisementStr.split(',').map(item => {
          return {
            url: item,
            uid: item + Math.random() + new Date()
          }
        })
      }
    },
    // 删除
    async del(row) {
      console.log(row)
      if (row.state === 1) {
        const res = await businessListStart({
          shopName: row.shopName,
          state: 0,
          shopId: row.shopId
        })
        if (res.code === '') {
          this.$message({
            message: '停用成功',
            type: 'success'
          })
          this.getAll(this.formInline)
        }
      } else {
        const res = await businessListStart({
          shopName: row.shopName,
          state: 1,
          shopId: row.shopId
        })
        if (res.code === '') {
          this.$message({
            message: '启用成功',
            type: 'success'
          })
          this.getAll(this.formInline)
        }
      }
    },
    delBusiness(row) {
      // todo 判断商家状态
      this.$confirm('此操作将永久删除该商家, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delBusinessById({
          shopId: row.shopId
        })
        if (res.code === '') {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.getAll(this.formInline)
        }
      })
        .catch(() => {

        })
    },
    // businessListGetAll
    // 初始化查询所有数据
    async getAll(formInline) {
      const res = await businessListGetAll(formInline)
      this.total = res.data.total
      this.tableData = res.data.list
    },
    // 编辑号码
    inputPhone() {
      this.showPhone = true
      this.personPhone = ''
      this.$nextTick(() => {
        this.$refs.phoneCls.focus()
      })
    },
    // 编辑地址
    inputAddress() {
      this.showAddress = true
      this.newAddress = ''
      this.$nextTick(() => {
        this.$refs.addressCls.focus()
      })
    },
    // 编辑客户信息
    inputUserPhone() {
      this.showUserPhone = true
      this.userPhone = ''
      this.$nextTick(() => {
        this.$refs.userPhoneCls.focus()
      })
    },
    // 中间部分
    hidden(str, frontLen, endLen) {
      let endLenData = 0
      if (str.length !== 2) {
        endLenData = endLen
      }
      const len = str.length - frontLen - endLenData
      let xing = ''
      for (let i = 0; i < len; i++) {
        xing += '*'
      }
      return (
        str.substring(0, frontLen) + xing + str.substring(str.length - endLenData)
      )
    },

    handleAvatarSuccess(response) {
      const { url } = response.data
      this.advertisementList.push({
        url, uid: url + Math.random() + Date.now()
      })
    },

    handleRemovePic(e) {
      const { uid } = e
      this.advertisementList = this.advertisementList.filter(item => item.uid !== uid)
    },

    // 获取省数据
    handleCascaderChange() {
      const checkedNode = this.$refs.cascaderRef.getCheckedNodes()
      const nodeData = checkedNode[0].data
      this.ruleForm.areaId = nodeData.id
    },

    // 获取所有商家分类
    async getCategoryList() {
      const res = await businessClassList({
        page: 1,
        pageSize: 100
      })

      this.allShopCategoryList = res.data.records.map(item => {
        item.childs.map(item2 => {
          item2.childs.map(item3 => {
            delete item3.childs
            return item3
          })
          return item2
        })
        return item
      })
    },

    // 获取路径信息
    initShopClassPath(classId) {
      const allLevelThereList = []
      this.allShopCategoryList.forEach(item => {
        item.childs.forEach(item1 => {
          allLevelThereList.push(...item1.childs)
        })
      })

      const currentClassInfo = allLevelThereList.find(item => {
        return item.levelId.includes(classId)
      })

      if (currentClassInfo) {
        this.ruleForm.classificationId = currentClassInfo.levelId.slice(1).split('/').map(item => item * 1)
      }
    },

    // 选择经纬
    handleSelectLngAndLat(address) {
      this.ruleForm.longitude = address[0]
      this.ruleForm.latitude = address[1]
    }
  }
}
</script>

<style
  lang="scss"
  scoped
>
@import url("../../../styles/elDialog.scss");

.pending {
  padding: 30px;
}

.fenye {
  margin-top: 20px;
}

.elipt {
  width: 50%;
}

.elspan {
  margin-left: 10px;
}
</style>