fix bug

xuxueyang

2024-07-15 f09d9ec905b6247b36a394158662fe90d02197a5

 sub_pages/supplier/supplier-info/supplier-info.vue

@@ -1,566 +1,631 @@
<template>
   <view class="container-page">
      <view>
         <view class="form-item">
            <view class="label required">店铺类型</view>
            <view class="m-l-a m-r-0 flex " :class="[!dto.typeId?'desc-gray':'']" @click="()=>{
               if(!id){
                  show_select_type=true
               }
            }">
               <view>{{dto.typeName || '请选择'}}</view>
               <u-icon class="m-l-a" name="arrow-right"></u-icon>
            </view>
            <!--    <view class="m-l-a m-r-0 flex " :class="[!dto.typeId?'desc-gray':'']">
               <uni-data-picker @change="(e)=>{PickData('typeId','typeStr',e)}" placeholder="请选择"
                  :localdata="columns_types">
                  {{dto.typeStr || '请选择'}}
               </uni-data-picker>
               <u-icon class="m-l-a" name="arrow-right"></u-icon>
            </view> -->
         </view>
         <view class="form-item before-line">
            <view class="label required">店铺名称</view>
            <view class="m-l-a m-r-0 flex">
               <input v-model="dto.name" placeholder="请输入店铺名称" style="margin-top: 16px;text-align: right;"></input>

            </view>
         </view>
         <view class="form-item bottom-border-no">
            <view class="label required" style="width: 360rpx;">店铺头像（750*750px）</view>
            <view class="m-l-a m-r-0 flex m-t-20 m-b-20">
               <view class="component-button-upload" @click="uploadIcon('cover')">

               </view>
            </view>
         </view>
         <view v-if="dto.cover">
            <view class="flex p20 form-item bottom-border-no" style="padding-top: 0rpx;padding-bottom: 10rpx">
               <view class="m-r-10 ">
                  <image class="banner-img" :src="dto.cover" @click.stop="previewImg(dto.cover)">

                  </image>
                  <view class="t-red text-center" @click.stop="deleteImg('cover','')">删除</view>
               </view>
            </view>
         </view>
         <u-divider></u-divider>

         <view class="form-item before-line">
            <view class="label required">联系人姓名</view>
            <view class="m-l-a m-r-0 flex">
               <input v-model="dto.contactName" placeholder="请输入联系人姓名"
                  style="margin-top: 16px;text-align: right;"></input>

            </view>
         </view>
         <view class="form-item before-line">
            <view class="label required">联系方式</view>
            <view class="m-l-a m-r-0 flex">
               <input v-model="dto.contactTel" placeholder="请输入联系方式"
                  style="margin-top: 16px;text-align: right;"></input>

            </view>
         </view>
         <view class="form-item before-line">
            <view class="label required">集货站</view>
            <view class="m-l-a m-r-0 flex " :class="[!dto.stationId?'desc-gray':'']" @click="()=>{
               if(!id){
                  show_select_station=true
               }
            }">
               <view>{{dto.stationName || '请选择'}}</view>
               <u-icon class="m-l-a" name="arrow-right"></u-icon>
            </view>
            <!--          <view class="m-l-a m-r-0 flex " :class="[!dto.stationId?'desc-gray':'']">
               <uni-data-picker @change="(e)=>{PickData('stationId','stationStr',e)}" placeholder="请选择"
                  :localdata="columns_station">
                  {{dto.typeStr || '请选择'}}
               </uni-data-picker>
               <u-icon class="m-l-a" name="arrow-right"></u-icon>
            </view> -->

         </view>
         <view class="form-item before-line">
            <view class="label required">地区</view>
            <!--          <view class="m-l-a m-r-0 flex " :class="[!dto.applicationType?'desc-gray':'']" @click="()=>{
               if(!id){
                  show_select_type=true
               }
            }">
               <view>{{dto.applicationTypeStr||dto.applicationType || '请选择'}}</view>
					
					
               <u-icon class="m-l-a" name="arrow-right"></u-icon>
            </view> -->
            <view class="m-l-a m-r-0 flex " :class="[!dto['province']?'desc-gray':'']">
               <uni-data-picker @change="(e)=>{PickArea(dto,e)}" placeholder="" :localdata="regionDataPlus">
                  {{ dto['province'] || '请选择' }}{{ dto['city'] && ('/' + dto['city']) || '' }}{{
                                          dto['region'] && ('/' + dto['region']) || ''
                                        }}
               </uni-data-picker>
               <u-icon class="m-l-a" name="arrow-right"></u-icon>
            </view>

         </view>
         <view class="form-item before-line">
            <view class="label required">地址</view>
            <view class="m-l-a m-r-0 flex">
               <input v-model="dto.address" placeholder="请输入地址"
                  style="margin-top: 16px;text-align: right;"></input>

            </view>
         </view>
         <view class="form-item before-line">
            <view class="label required">店铺简介</view>
         </view>
         <view class="flex">
            <u--textarea v-model="dto.description" placeholder="请输入店铺简介"></u--textarea>
         </view>
         <view class="form-item before-line m-t-20">
            <view class="label required">选择审核方式</view>
            <view class="m-l-a m-r-0 flex">

               <u-radio-group v-model="dto.idcardType" placement="row">
                  <u-radio :customStyle="{'margin-bottom': '8px','margin-right': '8px','font-size':'28rpx'}"
                     v-for="(item, index) in shTypeList" :key="index" :label="item.name" :name="item.name">
                  </u-radio>
               </u-radio-group>
            </view>
         </view>
         <view class="form-item bottom-border-no before-line m-t-20 p-b-20" v-if="dto.idcardType=='身份证'">
            <view class="label required">身份证正反面</view>
            <view class="m-l-a m-r-0 flex">
               <!--                <view class="component-button-upload m-r-15" @click="uploadIcon('idCards')">

               </view> -->
               <view class="component-button-upload" @click="uploadIcon('idCards')">

               </view>
            </view>
         </view>
         <view class="flex p20" style="padding-top: 0rpx;padding-bottom: 10rpx"
            v-if="dto.idcardType=='身份证'&&dto.idCards&&dto.idCards.length>0">
            <view class="m-t-12 m-r-10 " v-for="(tBanner,index) of dto.idCards" :key="index">
               <image class="banner-img" :src="tBanner.url" @click.stop="previewImg(tBanner.url)">

               </image>
               <view class="t-red text-center" @click.stop="deleteImg('idCards',index)">删除</view>
            </view>
         </view>
         <view class="form-item bottom-border-no before-line m-t-20 p-b-20" v-if="dto.idcardType=='营业执照'">
            <view class="label required">营业执照</view>
            <view class="m-l-a m-r-0 flex">
               <view class="component-button-upload m-r-15" @click="uploadIcon('pictures')">

               </view>

            </view>
         </view>
         <view class="flex p20" style="padding-top: 0rpx;padding-bottom: 10rpx"
            v-if="dto.idcardType=='营业执照'&&dto.pictures&&dto.pictures.length>0">
            <view class="m-t-12 m-r-10 " v-for="(tBanner,index) of dto.pictures" :key="index">
               <image class="banner-img" :src="tBanner.url" @click.stop="previewImg(tBanner.url)">

               </image>
               <view class="t-red text-center" @click.stop="deleteImg('pictures',index)">删除</view>
            </view>
         </view>



         <view class="button-green-1 m-t-20 button-fixed-bottom before-line " @click="submit">
            提交审核
         </view>

      </view>

      <view style="min-height: 200rpx;">
         &nbsp;
      </view>
      <u-picker @confirm="select_type" keyName="name" @cancel="show_select_type=false" :show="show_select_type"
         :columns="columns_types"></u-picker>

      <u-picker @confirm="select_station" keyName="name" @cancel="show_select_station=false"
         :show="show_select_station" :columns="columns_station"></u-picker>


   </view>
</template>

<script>
   import environments from '@/environments'

   import {
      mapState
   } from 'vuex'

   export default {

      data() {
         return {
            id: '',
            refresh: false,
            api: '',
            dto: {
               id: '',
               pictures: [],
               idCards: [],
               cover: '',
               idcardType: '身份证',
               description: '',
               address: '',
               stationId: '',
               stationName: '',
               id: '',
               userId: '',
               name: '',
               typeId: '',
               typeName: '',
               contactName: '',
               contactTel: '',
               province: '',
               city: '',
               region: '',
            },
            show_select_type: false,
            show_select_station: false,
            columns_types: [],
            columns_station: [],

            //审核方式
            shTypeList: [{
                  name: '身份证',
                  disabled: false
               },
               {
                  name: '营业执照',
                  disabled: false
               }
            ],
            regionDataPlus: [],
         }
      },
      onLoad(options) {
         if (options.id) {
            this.id = options.id
            this.getDetail()
         } else {
            this.getCurrentInfo()
            //类型和集火站
            this.$http.request('get', '/api/station/list', {
               params: {}
            }).then(res => {
               var data = res.data
               this.columns_station = [data || []]
               // this.columns_station = (data || []).map(item => {
               //    return {
               //       ...item,
               //       code: item.id,
               //       text: item.name,
               //    }
               // })
            })
            //类型和集火站
            this.$http.request('get', '/api/supplier/type/list', {
               params: {}
            }).then(res => {
               var data = res.data
               this.columns_types = [data || []]
               // this.columns_types = (data || []).map(item => {
               //    return {
               //       ...item,
               //       code: item.id,
               //       text: item.name,
               //    }
               // })
               // console.log('columns_types', this.columns_types)
            })
            this.init_area()
         }

      },

      methods: {
         PickArea(item, e) {
            console.log('PickArea', item, e)
            if (e.detail.value) {
               this.dto.province = ''
               this.dto.city = ''
               this.dto.region = ''
               if(e.detail.value.length<=3){
                  if (!!e.detail.value[0])
                     this.dto.province = e.detail.value[0].value
                  if (!!e.detail.value[1])
                     this.dto.city = e.detail.value[1].value
                  if (!!e.detail.value[2])
                     this.dto.region = e.detail.value[2].value
               }else{
                  //说明有重复的
                  var plusnum = e.detail.value.length - 3
                  if (!!e.detail.value[plusnum+0])
                     this.dto.province = e.detail.value[plusnum+0].value
                  if (!!e.detail.value[plusnum+1])
                     this.dto.city = e.detail.value[plusnum+1].value
                  if (!!e.detail.value[plusnum+2])
                     this.dto.region = e.detail.value[plusnum+2].value
               }

               this.$forceUpdate()

            }
         },
         PickData(valueKey, nameKey, e) {
            // console.log('PickArea', item, e)
            if (e.detail.value) {
               if (!!e.detail.value[0])
                  this.dto[valueKey] = e.detail.value[0].value || e.detail.value[0].id
               if (nameKey) {
                  this.dto[nameKey] = e.detail.value[0].label || e.detail.value[0].name || e.detail.value[0].value
               }
               this.$forceUpdate()

            }
         },
         async init_area() {
            const res = await this.$http.request('get', '/api/pub/china/area/json')
            // console.log('area', JSON.parse(res.data))
            this.regionDataPlus = res.data && JSON.parse(res.data.replaceAll('code', 'value').replaceAll('name',
               'text')) || []
					
            console.log('area', this.regionDataPlus)


         },

         select_type(e) {
            this.show_select_type = false
            this.dto.typeName = e.value[0].name
            this.dto.typeId = e.value[0].id
         },
         select_station(e) {
            this.show_select_station = false
            this.dto.stationName = e.value[0].name
            this.dto.stationId = e.value[0].id
         },
         async getCurrentInfo() {
            this.$message.showLoading()
            const {
               code,
               data
            } = await this.$http.request('get', "/api/current/supplier", {})
            if (code == 0) {
               this.dto = {
                  ...data,

               }
               if (!this.dto.pictures) {
                  this.dto.pictures = []
               } else if (typeof this.dto.pictures == 'string') {
                  this.dto.pictures = JSON.parse(this.dto.pictures)
               }
               if (!this.dto.idCards) {
                  this.dto.idCards = []
               } else if (typeof this.dto.idCards == 'string') {
                  this.dto.idCards = JSON.parse(this.dto.idCards)
               }

               if (this.dto.idcardType == '1') {
                  this.dto.idcardType = '身份证'
               }
               this.dto.userId = this.currentInfo.id

            }

            this.$message.hideLoading()
         },
         async getDetail() {
            this.$message.showLoading()
            const {
               code,
               data
            } = await this.$http.request('get', "/api/supplier/addOrUpdate/detail/" + this.id, {})
            if (code == 0) {
               this.dto = {
                  ...data,

               }
               if (!this.dto.pictures) {
                  this.dto.pictures = []
               } else if (typeof this.dto.pictures == 'string') {
                  this.dto.pictures = JSON.parse(this.dto.pictures)
               }
               if (!this.dto.idCards) {
                  this.dto.idCards = []
               } else if (typeof this.dto.idCards == 'string') {
                  this.dto.idCards = JSON.parse(this.dto.idCards)
               }
               if (this.dto.idcardType == '1') {
                  this.dto.idcardType = '身份证'
               }
            }

            this.$message.hideLoading()

         },
         async submit() {

            await this.$message.confirm(`是否确定提交/修改店铺信息`)


            var dto = {
               ...this.dto,
               idcardType: this.dto.idcardType === '身份证' ? "1" : '2'
            }
            this.$message.showLoading()
            const re = await this.$http.request('post', '/api/supplier/addOrUpdate', {
               data: dto
            })
            this.$message.hideLoading()
            if (re.code == 2000 || re.code == 0) {
               this.$message.showToast('操作成功')
               //需要标记加一下
               this.$store.dispatch('sign_add', 'info');
               this.$store.dispatch('getCurrentInfo')

               this.backpage()
            }
         },

         async deleteImg(key, index) {
            await this.$message.confirm('是否确认删除此图片')
            if (Array.isArray(this.dto[key])) {
               this.dto[key].splice(index, 1)

            } else {
               this.dto[key] = ''
            }
            this.$forceUpdate()
         },
         uploadIcon(key) {
            const that = this
            uni.chooseImage({
               count: 1, // 最多可以选择的图片张数，默认9
               sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
               sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
               success: function({
                  errMsg,
                  tempFiles
               }) {
                  if (errMsg === 'chooseImage:ok') {
<template>

   <view class="container-page">

      <view>

         <view class="form-item">

            <view class="label required">店铺类型</view>

            <view class="m-l-a m-r-0 flex " :class="[!dto.typeId?'desc-gray':'']" @click="()=>{

               if(!id){

                  show_select_type=true

               }

            }">

               <view>{{dto.typeName || '请选择'}}</view>

               <u-icon class="m-l-a" name="arrow-right"></u-icon>

            </view>

            <!--    <view class="m-l-a m-r-0 flex " :class="[!dto.typeId?'desc-gray':'']">

               <uni-data-picker @change="(e)=>{PickData('typeId','typeStr',e)}" placeholder="请选择"

                  :localdata="columns_types">

                  {{dto.typeStr || '请选择'}}

               </uni-data-picker>

               <u-icon class="m-l-a" name="arrow-right"></u-icon>

            </view> -->

         </view>

         <view class="form-item before-line">

            <view class="label required">店铺名称</view>

            <view class="m-l-a m-r-0 flex">

               <input v-model="dto.name" placeholder="请输入店铺名称" style="margin-top: 16px;text-align: right;"></input>



            </view>

         </view>

         <view class="form-item bottom-border-no">

            <view class="label required" style="width: 360rpx;">店铺头像（750*750px）</view>

            <view class="m-l-a m-r-0 flex m-t-20 m-b-20">

               <view class="component-button-upload" @click="uploadIcon('cover')">



               </view>

            </view>

         </view>

         <view v-if="dto.cover">

            <view class="flex p20 form-item bottom-border-no" style="padding-top: 0rpx;padding-bottom: 10rpx">

               <view class="m-r-10 ">

                  <image class="banner-img" :src="dto.cover" @click.stop="previewImg(dto.cover)">



                  </image>

                  <view class="t-red text-center" @click.stop="deleteImg('cover','')">删除</view>

               </view>

            </view>

         </view>

         <u-divider></u-divider>



         <view class="form-item before-line">

            <view class="label required">联系人姓名</view>

            <view class="m-l-a m-r-0 flex">

               <input v-model="dto.contactName" placeholder="请输入联系人姓名"

                  style="margin-top: 16px;text-align: right;"></input>



            </view>

         </view>

         <view class="form-item before-line">

            <view class="label required">联系方式</view>

            <view class="m-l-a m-r-0 flex">

               <input v-model="dto.contactTel" placeholder="请输入联系方式"

                  style="margin-top: 16px;text-align: right;"></input>



            </view>

         </view>

         <view class="form-item before-line">

            <view class="label required">集货站</view>

            <view class="m-l-a m-r-0 flex " :class="[!dto.stationId?'desc-gray':'']" @click="()=>{

               if(!id){

                  show_select_station=true

               }

            }">

               <view>{{dto.stationName || '请选择'}}</view>

               <u-icon class="m-l-a" name="arrow-right"></u-icon>

            </view>

            <!--          <view class="m-l-a m-r-0 flex " :class="[!dto.stationId?'desc-gray':'']">

               <uni-data-picker @change="(e)=>{PickData('stationId','stationStr',e)}" placeholder="请选择"

                  :localdata="columns_station">

                  {{dto.typeStr || '请选择'}}

               </uni-data-picker>

               <u-icon class="m-l-a" name="arrow-right"></u-icon>

            </view> -->



         </view>

         <view class="form-item before-line">

            <view class="label required">地区</view>

            <!--          <view class="m-l-a m-r-0 flex " :class="[!dto.applicationType?'desc-gray':'']" @click="()=>{

               if(!id){

                  show_select_type=true

               }

            }">

               <view>{{dto.applicationTypeStr||dto.applicationType || '请选择'}}</view>

					
					
               <u-icon class="m-l-a" name="arrow-right"></u-icon>

            </view> -->

            <view class="m-l-a m-r-0 flex " :class="[!dto['province']?'desc-gray':'']">

               <uni-data-picker :area="true" @change="(e)=>{PickArea(dto,e)}" placeholder=""

                  :localdata="regionDataPlus">

                  {{ dto['province'] || '请选择' }}{{ dto['city'] && ('/' + dto['city']) || '' }}{{

                                          dto['region'] && ('/' + dto['region']) || ''

                                        }}

               </uni-data-picker>

               <u-icon class="m-l-a" name="arrow-right"></u-icon>

            </view>



         </view>

         <view class="form-item before-line">

            <view class="label required">地址</view>

            <view class="m-l-a m-r-0 flex">

               <input v-model="dto.address" placeholder="请输入地址"

                  style="margin-top: 16px;text-align: right;"></input>



            </view>

         </view>

         <view class="form-item before-line">

            <view class="label required">店铺简介</view>

         </view>

         <view class="flex">

            <u--textarea v-model="dto.description" placeholder="请输入店铺简介"></u--textarea>

         </view>

         <view class="form-item before-line m-t-20">

            <view class="label required">选择审核方式</view>

            <view class="m-l-a m-r-0 flex">



               <u-radio-group v-model="dto.idcardType" placement="row">

                  <u-radio :customStyle="{'margin-bottom': '8px','margin-right': '8px','font-size':'28rpx'}"

                     v-for="(item, index) in shTypeList" :key="index" :label="item.name" :name="item.name">

                  </u-radio>

               </u-radio-group>

            </view>

         </view>

         <view class="form-item bottom-border-no before-line m-t-20 p-b-20" v-if="dto.idcardType=='身份证'">

            <view class="label required">身份证正反面</view>

            <view class="m-l-a m-r-0 flex">

               <!--                <view class="component-button-upload m-r-15" @click="uploadIcon('idCards')">



               </view> -->

               <view class="component-button-upload" @click="uploadIcon('idCards')">



               </view>

            </view>

         </view>

         <view class="flex p20" style="padding-top: 0rpx;padding-bottom: 10rpx"

            v-if="dto.idcardType=='身份证'&&dto.idCards&&dto.idCards.length>0">

            <view class="m-t-12 m-r-10 " v-for="(tBanner,index) of dto.idCards" :key="index">

               <image class="banner-img" :src="tBanner.url" @click.stop="previewImg(tBanner.url)">



               </image>

               <view class="t-red text-center" @click.stop="deleteImg('idCards',index)">删除</view>

            </view>

         </view>

         <view class="form-item bottom-border-no before-line m-t-20 p-b-20" v-if="dto.idcardType=='营业执照'">

            <view class="label required">营业执照</view>

            <view class="m-l-a m-r-0 flex">

               <view class="component-button-upload m-r-15" @click="uploadIcon('pictures')">



               </view>



            </view>

         </view>

         <view class="flex p20" style="padding-top: 0rpx;padding-bottom: 10rpx"

            v-if="dto.idcardType=='营业执照'&&dto.pictures&&dto.pictures.length>0">

            <view class="m-t-12 m-r-10 " v-for="(tBanner,index) of dto.pictures" :key="index">

               <image class="banner-img" :src="tBanner.url" @click.stop="previewImg(tBanner.url)">



               </image>

               <view class="t-red text-center" @click.stop="deleteImg('pictures',index)">删除</view>

            </view>

         </view>







         <view class="button-green-1 m-t-20 button-fixed-bottom before-line " @click="submit">

            提交审核

         </view>



      </view>



      <view style="min-height: 200rpx;">

         &nbsp;

      </view>

      <u-picker @confirm="select_type" keyName="name" @cancel="show_select_type=false" :show="show_select_type"

         :columns="columns_types"></u-picker>



      <u-picker @confirm="select_station" keyName="name" @cancel="show_select_station=false"

         :show="show_select_station" :columns="columns_station"></u-picker>





   </view>

</template>



<script>

   import environments from '@/environments'



   import {

      mapState

   } from 'vuex'



   export default {



      data() {

         return {

            id: '',

            refresh: false,

            api: '',

            dto: {

               id: '',

               pictures: [],

               idCards: [],

               cover: '',

               idcardType: '身份证',

               description: '',

               address: '',

               stationId: '',

               stationName: '',

               id: '',

               userId: '',

               name: '',

               typeId: '',

               typeName: '',

               contactName: '',

               contactTel: '',

               province: '',

               city: '',

               region: '',

            },

            requireFields: [{

                  name: '店铺类型',

                  key: 'typeId'

               },

               {

                  name: '店铺名称',

                  key: 'name'

               },

               {

                  name: '店铺头像',

                  key: 'cover'

               },

               {

                  name: '联系人姓名',

                  key: 'contactName'

               },

               {

                  name: '联系方式',

                  key: 'contactTel'

               },

               {

                  name: '集货站',

                  key: 'stationId'

               },

               {

                  name: '地区',

                  key: 'province'

               },

               {

                  name: '地址',

                  key: 'address'

               },

               {

                  name: '店铺简介',

                  key: 'description'

               },

            ],

            show_select_type: false,

            show_select_station: false,

            columns_types: [],

            columns_station: [],



            //审核方式

            shTypeList: [{

                  name: '身份证',

                  disabled: false

               },

               {

                  name: '营业执照',

                  disabled: false

               }

            ],

            regionDataPlus: [],

         }

      },

      onLoad(options) {

         if (options.id) {

            this.id = options.id

            this.getDetail()

         } else {

            this.getCurrentInfo()

            //类型和集火站

            this.$http.request('get', '/api/station/list', {

               params: {}

            }).then(res => {

               var data = res.data

               this.columns_station = [data || []]

               // this.columns_station = (data || []).map(item => {

               //    return {

               //       ...item,

               //       code: item.id,

               //       text: item.name,

               //    }

               // })

            })

            //类型和集火站

            this.$http.request('get', '/api/supplier/type/list', {

               params: {}

            }).then(res => {

               var data = res.data

               this.columns_types = [data || []]

               // this.columns_types = (data || []).map(item => {

               //    return {

               //       ...item,

               //       code: item.id,

               //       text: item.name,

               //    }

               // })

               // console.log('columns_types', this.columns_types)

            })

            this.init_area()

         }



      },



      methods: {

         PickArea(item, e) {

            console.log('PickArea', item, e)

            if (e.detail.value) {

               this.dto.province = ''

               this.dto.city = ''

               this.dto.region = ''

               if (e.detail.value.length <= 3) {

                  if (!!e.detail.value[0])

                     this.dto.province = e.detail.value[0].value

                  if (!!e.detail.value[1])

                     this.dto.city = e.detail.value[1].value

                  if (!!e.detail.value[2])

                     this.dto.region = e.detail.value[2].value

               } else {

                  //说明有重复的

                  var plusnum = e.detail.value.length - 3

                  if (!!e.detail.value[plusnum + 0])

                     this.dto.province = e.detail.value[plusnum + 0].value

                  if (!!e.detail.value[plusnum + 1])

                     this.dto.city = e.detail.value[plusnum + 1].value

                  if (!!e.detail.value[plusnum + 2])

                     this.dto.region = e.detail.value[plusnum + 2].value

               }



               this.$forceUpdate()



            }

         },

         PickData(valueKey, nameKey, e) {

            // console.log('PickArea', item, e)

            if (e.detail.value) {

               if (!!e.detail.value[0])

                  this.dto[valueKey] = e.detail.value[0].value || e.detail.value[0].id

               if (nameKey) {

                  this.dto[nameKey] = e.detail.value[0].label || e.detail.value[0].name || e.detail.value[0].value

               }

               this.$forceUpdate()



            }

         },

         async init_area() {

            const res = await this.$http.request('get', '/api/pub/china/area/json')

            // console.log('area', JSON.parse(res.data))

            this.regionDataPlus = res.data && JSON.parse(res.data.replaceAll('code', 'value').replaceAll('name',

               'text')) || []



            // console.log('area', this.regionDataPlus)





         },



         select_type(e) {

            this.show_select_type = false

            this.dto.typeName = e.value[0].name

            this.dto.typeId = e.value[0].id

         },

         select_station(e) {

            this.show_select_station = false

            this.dto.stationName = e.value[0].name

            this.dto.stationId = e.value[0].id

         },

         async getCurrentInfo() {

            this.$message.showLoading()

            const {

               code,

               data

            } = await this.$http.request('get', "/api/current/supplier", {})

            if (code == 0) {

               this.dto = {

                  ...data,



               }

               if (!this.dto.pictures) {

                  this.dto.pictures = []

               } else if (typeof this.dto.pictures == 'string') {

                  this.dto.pictures = JSON.parse(this.dto.pictures)

               }

               if (!this.dto.idCards) {

                  this.dto.idCards = []

               } else if (typeof this.dto.idCards == 'string') {

                  this.dto.idCards = JSON.parse(this.dto.idCards)

               }



               if (this.dto.idcardType == '1') {

                  this.dto.idcardType = '身份证'

               } else {

                  this.dto.idcardType = '营业执照'

               }

               this.dto.userId = this.currentInfo.id



            }



            this.$message.hideLoading()

         },

         async getDetail() {

            this.$message.showLoading()

            const {

               code,

               data

            } = await this.$http.request('get', "/api/supplier/addOrUpdate/detail/" + this.id, {})

            if (code == 0) {

               this.dto = {

                  ...data,



               }

               if (!this.dto.pictures) {

                  this.dto.pictures = []

               } else if (typeof this.dto.pictures == 'string') {

                  this.dto.pictures = JSON.parse(this.dto.pictures)

               }

               if (!this.dto.idCards) {

                  this.dto.idCards = []

               } else if (typeof this.dto.idCards == 'string') {

                  this.dto.idCards = JSON.parse(this.dto.idCards)

               }

               if (this.dto.idcardType == '1') {

                  this.dto.idcardType = '身份证'

               } else {

                  this.dto.idcardType = '营业执照'

               }

            }



            this.$message.hideLoading()



         },

         async submit() {

            for (var field of this.requireFields) {

               if (!this.dto[field.key]) {

                  this.$message.showToast(`${field.name}信息未填写`)

                  return

               }

            }

            if (this.dto.idcardType == '身份证' && this.dto.idCards.length == 0) {

               this.$message.showToast(`${this.dto.idcardType}信息未填写`)

               return

            }

            if (this.dto.idcardType !== '身份证' && this.dto.pictures.length == 0) {

               this.$message.showToast(`${this.dto.idcardType}信息未填写`)

               return

            }

            await this.$message.confirm(`是否确定提交/修改店铺信息`)





            var dto = {

               ...this.dto,

               idcardType: this.dto.idcardType === '身份证' ? "1" : '2'

            }

            this.$message.showLoading()

            const re = await this.$http.request('post', '/api/supplier/addOrUpdate', {

               data: dto

            })

            this.$message.hideLoading()

            if (re.code == 2000 || re.code == 0) {

               this.$message.showToast('操作成功')

               //需要标记加一下

               this.$store.dispatch('sign_add', 'info');

               this.$store.dispatch('getCurrentInfo')



               this.backpage()

            } else {

               console.log('error re', re)

               if (re.code === 30000 && Array.isArray(re.msg)) {

                  this.$message.showToast('字段未填写完整')



               }

            }

         },



         async deleteImg(key, index) {

            await this.$message.confirm('是否确认删除此图片')

            if (Array.isArray(this.dto[key])) {

               this.dto[key].splice(index, 1)



            } else {

               this.dto[key] = ''

            }

            this.$forceUpdate()

         },

         uploadIcon(key) {

            const that = this

            uni.chooseImage({

               count: 1, // 最多可以选择的图片张数，默认9

               sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有

               sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项

               success: function({

                  errMsg,

                  tempFiles

               }) {

                  if (errMsg === 'chooseImage:ok') {

                     // console.log(tempFiles[0])
                     that.$message.showLoading()
                     that.$http.upload(tempFiles[0].path).then(async res => {
                        var pic = res.data && res.data.length > 0 && res.data[
                           0] || {}
                        that.$message.hideLoading()
                        if (Array.isArray(that.dto[key])) {
                           that.dto[key].push(pic || '')

                        } else {
                           that.dto[key] = (pic || {}).url || ''

                        }
                        that.$forceUpdate()
                     }).catch(res => {
                        that.$message.hideLoading()

                     })
                  }
               }
            })
         },

      },
      computed: {
         ...mapState(['currentInfo'])
      },
      components: {}
   }
</script>

<style lang="scss" scoped>
   .banner-img {
      width: 96rpx;
      height: 96rpx;
      border-radius: 4rpx;
      border: 2rpx dashed #CECECE;
   }

   .form-item {
      // padding: 40rpx;
      border-bottom: 2rpx solid #F3F3F3;
      display: flex;
      // height: 100px;

      .label {
         width: 300rpx;
         line-height: 60px;

      }

      .flex {
         line-height: 60px;

         .flex1 {
            flex: 1;
            text-align: center;
            color: var(--selfblue)
         }


      }
   }

   .form-item.bottom-border-no {
      border-bottom: none;
   }

   .container-page {
      padding: 40rpx;
      background-color: #FFFFFF;
      // min-height: calc(100vh - 80rpx);
      min-height: 100vh;
   }

   .style {
      width: fit-content;
      margin: 0 auto;
      line-height: 64rpx;
      border-radius: 8rpx;
      padding-left: 20rpx;
      padding-right: 20rpx;
      // padding-top: 5rpx;
      // padding-bottom: 5rpx;
      border: 2rpx solid var(--selfblue);
      background-color: var(--selfbluebg);
      min-width: 100rpx;
   }


   .style-1 {
      border: 1px solid rgb(122, 187, 255);
      border: 1px solid #409EFF;
      color: #409EFF;
      background-color: rgb(240, 247, 255);
   }

   .style-2 {
      border: 1px solid rgb(255, 184, 78);
      border: 1px solid #FE9044;
      color: #FE9044;
      background-color: rgb(255, 247, 235);
   }

   .style-3 {
      border: 1px solid #19be6b;
      color: #19be6b;
      background-color: rgb(231, 244, 238);
   }

   .style-4 {
      border: 1px solid #F56c6c;
      color: #F56c6c;
      background-color: rgb(254, 243, 243);
   }
                     if (tempFiles[0].size > 1024 * 1024 * 5) {
                        that.$message.confirm('图片最多支持5M大小,超出大小限制')
                        return
                     }

                     that.$message.showLoading()

                     that.$http.upload(tempFiles[0].path).then(async res => {

                        var pic = res.data && res.data.length > 0 && res.data[

                           0] || {}

                        that.$message.hideLoading()

                        if (Array.isArray(that.dto[key])) {

                           that.dto[key].push(pic || '')



                        } else {

                           that.dto[key] = (pic || {}).url || ''



                        }

                        that.$forceUpdate()

                     }).catch(res => {

                        that.$message.hideLoading()



                     })

                  }

               }

            })

         },



      },

      computed: {

         ...mapState(['currentInfo'])

      },

      components: {}

   }

</script>



<style lang="scss" scoped>

   .banner-img {

      width: 96rpx;

      height: 96rpx;

      border-radius: 4rpx;

      border: 2rpx dashed #CECECE;

   }



   .form-item {

      // padding: 40rpx;

      border-bottom: 2rpx solid #F3F3F3;

      display: flex;

      // height: 100px;



      .label {

         width: 300rpx;

         line-height: 60px;



      }



      .flex {

         line-height: 60px;



         .flex1 {

            flex: 1;

            text-align: center;

            color: var(--selfblue)

         }





      }

   }



   .form-item.bottom-border-no {

      border-bottom: none;

   }



   .container-page {

      padding: 40rpx;

      background-color: #FFFFFF;

      // min-height: calc(100vh - 80rpx);

      min-height: 100vh;

   }



   .style {

      width: fit-content;

      margin: 0 auto;

      line-height: 64rpx;

      border-radius: 8rpx;

      padding-left: 20rpx;

      padding-right: 20rpx;

      // padding-top: 5rpx;

      // padding-bottom: 5rpx;

      border: 2rpx solid var(--selfblue);

      background-color: var(--selfbluebg);

      min-width: 100rpx;

   }





   .style-1 {

      border: 1px solid rgb(122, 187, 255);

      border: 1px solid #409EFF;

      color: #409EFF;

      background-color: rgb(240, 247, 255);

   }



   .style-2 {

      border: 1px solid rgb(255, 184, 78);

      border: 1px solid #FE9044;

      color: #FE9044;

      background-color: rgb(255, 247, 235);

   }



   .style-3 {

      border: 1px solid #19be6b;

      color: #19be6b;

      background-color: rgb(231, 244, 238);

   }



   .style-4 {

      border: 1px solid #F56c6c;

      color: #F56c6c;

      background-color: rgb(254, 243, 243);

   }

</style>