mrr.sj.front/pages/ruzhu/sj-info.vue

<template>
  <view class="sj-info-page">

    <view class="section">
      <view class="section-title">
        <view class="title-bar"></view>
        <text class="title-text">营业执照</text>
      </view>

      <view class="form-item-one box-cont">
        <text class="label required">资质照片</text>
        <text class="upload-desc">请保证照片上的文字清晰、无遮挡、证件边角可见</text>
        <view class="" @click="chooseImage('uscc_photo')">
          <image v-if="formData.uscc_photo" :src="formData.uscc_photo" mode="aspectFill" class="upload-preview"></image>
          <view class="" v-else>
            <image
              src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/fa75ea1c-8f9d-4b2a-8d0c-b94de516afd0.png"
              mode="widthFix" class="upload-camera-img"></image>
          </view>
        </view>
        <text class="required placeholder1">请上传营业执照原件</text>
      </view>

      <view class="form-item-two box-cont">
        <text class="label required">商户类型</text>
        <input type="text" v-model="formData.uscc_type" placeholder="请输入商户类型" placeholder-class="placeholder"
          class="input" />
      </view>

      <view class="form-item-two box-cont">
        <text class="label required">证件号码</text>
        <view class="picker-content">
          <input type="text" v-model="formData.uscc_num" placeholder="请输入营业执照的证件号码" placeholder-class="placeholder"
            class="input" />
          <image class="label-icon"
            src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/25bd7f38-1a3e-4282-84ea-190d7f820108"
            mode="aspectFit" @click.stop="showTipPopup('uscc_num')"></image>
        </view>
      </view>

      <view class="form-item-two box-cont">
        <text class="label required">营业名称</text>
        <input type="text" v-model="formData.uscc_name" placeholder="请输入营业执照的企业名称" placeholder-class="placeholder"
          class="input" />
      </view>

      <view class="form-item-two box-cont" @click="showRegionPicker">
        <text class="label required">注册地区</text>
        <view class="picker-content">
          <text :class="formData.uscc_dependency ? 'picker-value' : 'placeholder1'">
            {{ formData.uscc_dependency || '请选择' }}
          </text>
          <image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/dccc4513-377c-4bfa-9fd2-a5cfdb9798f3"
            class="arrow-right" mode="aspectFit"></image>
        </view>
      </view>

      <view class="form-item-two box-cont" @click="getAddressInfo">
        <text class="label required">注册详细地址</text>
        <view class="picker-content">
          <text :class="formData.uscc_address ? 'picker-value' : 'placeholder'">
            {{ formData.uscc_address || '请选择' }}
          </text>
          <image src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/dccc4513-377c-4bfa-9fd2-a5cfdb9798f3"
            class="arrow-right" mode="aspectFit"></image>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="section-title">
        <view class="title-bar"></view>
        <text class="title-text">法人信息</text>
      </view>

      <view class="form-item-one box-cont">
        <text class="label required">身份证照片</text>
        <text class="upload-desc">请保证照片上的文字清晰、无遮挡、证件边角可见</text>
        <view class="upload-area" @click="chooseImage('legal_idcard_positive')">
          <image v-if="formData.legal_idcard_positive" :src="formData.legal_idcard_positive" mode="aspectFill"
            class="upload-preview">
          </image>
          <view class="" v-else>
            <image
              src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/fa75ea1c-8f9d-4b2a-8d0c-b94de516afd0.png"
              mode="widthFix" class="upload-camera-img" style="margin-left: -30rpx;"></image>
          </view>
          <text class="placeholder1 required">请上传身份证正面(人像面)</text>
        </view>
        <view class="upload-area" @click="chooseImage('legal_idcard_negative')" style="margin-top: 48rpx;">
          <image v-if="formData.legal_idcard_negative" :src="formData.legal_idcard_negative" mode="aspectFill"
            class="upload-preview">
          </image>
          <view class="" v-else>
            <image
              src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/fa75ea1c-8f9d-4b2a-8d0c-b94de516afd0.png"
              mode="widthFix" class="upload-camera-img" style="margin-left: -30rpx;"></image>
          </view>
          <text class="placeholder1 required">请上传身份证反面(国徽面)</text>
        </view>
      </view>

      <view class="form-item-two box-cont">
        <text class="label required">法人代表</text>
        <input type="text" v-model="formData.legal_name" placeholder="请输入营业执照的法人代表" placeholder-class="placeholder"
          class="input" />
      </view>

      <view class="form-item-two box-cont">
        <text class="label required">法人联系方式</text>
        <input type="number" v-model="formData.legal_phone" placeholder="请输入法人的联系方式" placeholder-class="placeholder"
          class="input" />
      </view>

      <view class="form-item-two box-cont">
        <text class="label required">法人身份证号</text>
        <input type="text" v-model="formData.legal_idcard_num" placeholder="请输入法人的身份证号码" placeholder-class="placeholder"
          class="input" />
      </view>

      <view class="form-item-column box-cont">
        <text class="label required">身份证有效期：</text>
        <view class="radio-group">
          <view class="radio-item" @click="setIdcardExpiryType('1')">
            <view class="radio" :class="{ checked: formData.legal_idcard_expiry_type === '1' }">
              <image v-if="formData.legal_idcard_expiry_type === '1'"
                src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/cb185ec8-9d30-4e53-b5dc-14b546013a60"
                class="radio-icon-image" mode="aspectFit"></image>
            </view>
            <text class="radio-label">永久有效</text>
          </view>
          <view class="radio-item" @click="setIdcardExpiryType('2')">
            <view class="radio" :class="{ checked: formData.legal_idcard_expiry_type === '2' }">
              <image v-if="formData.legal_idcard_expiry_type === '2'"
                src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/cb185ec8-9d30-4e53-b5dc-14b546013a60"
                class="radio-icon-image" mode="aspectFit"></image>
            </view>
            <text class="radio-label">指定日期有效</text>
          </view>
        </view>
      </view>
      <view class="date-row box-cont">
        <view class="date-col" @click="showDatePicker('start')">
          <text class="date-label">开始日期</text>
          <view class="date-input-box">
            <text :class="formData.legal_idcard_expiry_start ? 'date-value' : 'date-placeholder'">
              {{ formData.legal_idcard_expiry_start || '选择日期' }}
            </text>
            <image
              src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/5b01823b-7672-4e60-b6cc-a4de52294605.png"
              class="date-icon" mode="aspectFit"></image>
          </view>
        </view>
        <view class="date-col" @click="showDatePicker('end')">
          <text class="date-label">结束日期</text>
          <view class="date-input-box">
            <text :class="formData.legal_idcard_expiry_end ? 'date-value' : 'date-placeholder'">
              {{ formData.legal_idcard_expiry_end || '选择日期' }}
            </text>
            <image
              src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/5b01823b-7672-4e60-b6cc-a4de52294605.png"
              class="date-icon" mode="aspectFit"></image>
          </view>
        </view>
      </view>

    </view>

    <view class="section">
      <view class="section-title">
        <view class="title-bar"></view>
        <text class="title-text">其他信息</text>
      </view>

      <view class="form-item-one box-cont">
        <text class="label required">行业资质</text>
        <view class="image-list">
          <view class="image-item" v-for="(img, index) in formData.qualifications_sector" :key="'industry-' + index">
            <image :src="img" mode="aspectFill" class="qualification-image"></image>
            <view class="image-delete" @click="removeImage('qualifications_sector', index)">×</view>
          </view>
          <view class="image-add" @click="chooseMultiImage('qualifications_sector')"
            v-if="(formData.qualifications_sector || []).length < 9">
            <image
              src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/0d4af728-c7bf-447d-85b2-e7c682471b86.png"
              mode="aspectFit" class="upload-icon-small"></image>
            <text class="add-text">添加照片</text>
          </view>
        </view>
        <text class="label" style="margin-top: 30rpx;">其他资质</text>
        <view class="image-list">
          <view class="image-item" v-for="(img, index) in formData.qualifications_other" :key="'other-' + index">
            <image :src="img" mode="aspectFill" class="qualification-image"></image>
            <view class="image-delete" @click="removeImage('qualifications_other', index)">×</view>
          </view>
          <view class="image-add" @click="chooseMultiImage('qualifications_other')"
            v-if="(formData.qualifications_other || []).length < 9">
            <image
              src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/0d4af728-c7bf-447d-85b2-e7c682471b86.png"
              mode="aspectFit" class="upload-icon-small"></image>
            <text class="add-text">添加照片</text>
          </view>
        </view>
      </view>
    </view>

    <view class="popup" :class="{ show: showRegionPopupFlag }">
      <view class="popup-mask" @click="hideRegionPopup"></view>
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">选择注册地区</text>
          <text class="popup-close" @click="hideRegionPopup">×</text>
        </view>
        <view class="region-body">
          <picker-view @change="bindChangeRegion" class="picker-scroll" :indicator-style="indicatorStyle"
            :value="regionValue">
            <picker-view-column>
              <view class="picker-item" v-for="(item, index) in ChinaCitys" :key="index">
                {{ item.province }}
              </view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="(item, index) in regionCitys" :key="index">
                {{ item.city }}
              </view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="(item, index) in regionAreas" :key="index">
                {{ item.area }}
              </view>
            </picker-view-column>
          </picker-view>
        </view>
        <view class="popup-footer">
          <view class="popup-btn cancel" @click="hideRegionPopup">
            <text class="btn-text">取消</text>
          </view>
          <view class="popup-btn confirm" @click="confirmRegionSelect">
            <text class="btn-text">确定</text>
          </view>
        </view>
      </view>
    </view>

    <view class="popup" :class="{ show: showDatePickerFlag }">
      <view class="popup-mask" @click="hideDatePicker"></view>
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">{{ currentPickerType === 'start' ? '选择开始日期' : '选择结束日期' }}</text>
          <text class="popup-close" @click="hideDatePicker">×</text>
        </view>
        <view class="region-body">
          <picker-view :value="datePickerValue" @change="bindDateChange" class="picker-scroll"
            :indicator-style="indicatorStyle">
            <picker-view-column>
              <view class="picker-item" v-for="(year, index) in years" :key="index">
                {{ year }}年
              </view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="(month, index) in months" :key="index">
                {{ month }}月
              </view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="(day, index) in days" :key="index">
                {{ day }}日
              </view>
            </picker-view-column>
          </picker-view>
        </view>
        <view class="popup-footer">
          <view class="popup-btn cancel" @click="hideDatePicker">
            <text class="btn-text">取消</text>
          </view>
          <view class="popup-btn confirm" @click="confirmDateSelect">
            <text class="btn-text">确定</text>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import request from '../../utils/request';
import ChinaCitys from '../../static/data/ChinaCitys.json';
import { recognizeIdCard, recognizeBusinessLicense, parseValidPeriod } from '../../utils/orc';

export default {
  data() {
    return {
      formData: {
        uscc_photo: '',
        uscc_type: '',
        uscc_num: '',
        uscc_name: '',
        uscc_dependency: '',
        uscc_address: '',
        uscc_province: '',
        uscc_city: '',
        uscc_area: '',
        longitude: '',
        latitude: '',
        legal_idcard_positive: '',
        legal_idcard_negative: '',
        legal_name: '',
        legal_phone: '',
        legal_idcard_num: '',
        legal_idcard_expiry_type: '1',
        legal_idcard_expiry_start: '',
        legal_idcard_expiry_end: '',
        qualifications_sector: [],
        qualifications_other: []
      },
      ChinaCitys: ChinaCitys,
      regionCitys: [],
      regionAreas: [],
      regionValue: [0, 0, 0],
      showRegionPopupFlag: false,
      showDatePickerFlag: false,
      currentPickerType: 'start',
      datePickerValue: [0, 0, 0],
      indicatorStyle: 'height: 68rpx;',
      isRecognizing: false,
      recognizeType: '',
      userId: null,
      identity: 3,
      addressListener: null,
      sjAddressListener: null
    }
  },

  computed: {
    years() {
      return Array.from({
        length: 50
      }, (_, i) => 2020 + i);
    },
    months() {
      return Array.from({
        length: 12
      }, (_, i) => i + 1);
    },
    days() {
      return Array.from({
        length: 31
      }, (_, i) => i + 1);
    }
  },

  async mounted() {
    await this.getUserInfo();
    this.regionCitys = this.ChinaCitys[0].citys;
    this.regionAreas = this.regionCitys[0].areas;
    this.setupAddressListener();
  },
  beforeDestroy() {
    this.removeAddressListener();
  },

  methods: {
    getUserInfo() {
      return request.post('/sj/User/getUser').then(result => {
        this.userId = result.data.id;
      }).catch(err => {
        console.error('获取用户信息失败:', err);
      });
    },

    chooseImage(type) {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: async (res) => {
          if (!res.tempFilePaths || res.tempFilePaths.length === 0) return;
          const tempFilePath = res.tempFilePaths[0];
          const file = {
            path: tempFilePath,
            size: 0
          };
          const url = await this.directUpload(file, this.userId, 3);
          if (url) {
            this.$set(this.formData, type, url);
            if (type === 'uscc_photo') {
              await this.recognizeBusinessLicense(url);
            } else if (type === 'legal_idcard_positive') {
              await this.recognizeIdCardFront(url);
            } else if (type === 'legal_idcard_negative') {
              await this.recognizeIdCardBack(url);
            }
          }
        }
      });
    },

    chooseMultiImage(type) {
      const current = this.formData[type] || [];
      const remaining = 9 - current.length;
      if (remaining <= 0) {
        uni.showToast({
          title: '最多上传9张图片',
          icon: 'none'
        });
        return;
      }
      uni.chooseImage({
        count: remaining,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: async (res) => {
          if (!res.tempFilePaths || res.tempFilePaths.length === 0) return;
          uni.showLoading({
            title: '上传中...'
          });
          for (const tempFilePath of res.tempFilePaths) {
            const file = {
              path: tempFilePath,
              size: 0
            };
            try {
              const url = await this.directUpload(file, this.userId, 3);
              if (url) {
                current.push(url);
              }
            } catch (e) {
              console.error('上传失败:', e);
            }
          }
          this.$set(this.formData, type, current);
          uni.hideLoading();
        }
      });
    },

    removeImage(type, index) {
      const list = [...this.formData[type]];
      list.splice(index, 1);
      this.$set(this.formData, type, list);
    },

    async directUpload(file, userId, type) {
      try {
        let date = new Date().getTime();
        let artisan = type == 1 ? 'yh' : type == 2 ? 'syr' : type == 3 ? 'sj' : '';
        let fileExtension = 'jpg';
        if (file.path.includes('.')) {
          let parts = file.path.split('.');
          let ext = parts[parts.length - 1].toLowerCase();
          if (ext && ext.length <= 4) fileExtension = ext;
        }
        let name = `${userId}_${artisan}_${date}.${fileExtension}`;
        const ossConfig = await request.post('/user/getalioss', {
          type: type,
          kind: 1
        });
        return await new Promise((resolve, reject) => {
          uni.uploadFile({
            url: ossConfig.host,
            filePath: file.path,
            name: 'file',
            formData: {
              key: ossConfig.dir + name,
              policy: ossConfig.policy,
              OSSAccessKeyId: ossConfig.ossAccessKeyId,
              success_action_status: '200',
              signature: ossConfig.signature
            },
            success: (res) => {
              if (res.statusCode === 200) {
                resolve(`${ossConfig.host}/${ossConfig.dir}${name}`);
              } else {
                reject(new Error('上传失败'));
              }
            },
            fail: reject
          });
        });
      } catch (error) {
        console.error('上传失败:', error);
        throw error;
      }
    },

    showRegionPicker() {
      this.showRegionPopupFlag = true;
    },

    hideRegionPopup() {
      this.showRegionPopupFlag = false;
    },

    bindChangeRegion(e) {
      this.regionValue = e.detail.value;
      let index1 = e.detail.value[0] || 0;
      let index2 = e.detail.value[1] || 0;
      this.regionCitys = this.ChinaCitys[index1].citys;
      this.regionAreas = this.regionCitys[index2].areas;
    },

    confirmRegionSelect() {
      let valueArr = this.regionValue;
      let index1 = valueArr[0] || 0;
      let index2 = valueArr[1] || 0;
      let index3 = valueArr[2] || 0;
      let province = this.ChinaCitys[index1].province;
      let city = this.regionCitys[index2].city;
      let area = this.regionAreas[index3].area;
      this.formData.uscc_dependency = province + '-' + city + '-' + area;
      if (this.ChinaCitys[index1] && this.ChinaCitys[index1].code) {
        this.formData.uscc_province = String(this.ChinaCitys[index1].code).substring(0, 6);
      }
      if (this.regionCitys[index2] && this.regionCitys[index2].code) {
        this.formData.uscc_city = String(this.regionCitys[index2].code).substring(0, 6);
      }
      if (this.regionAreas[index3] && this.regionAreas[index3].code) {
        this.formData.uscc_area = String(this.regionAreas[index3].code).substring(0, 6);
      }
      this.formData.uscc_address = '';
      this.formData.longitude = '';
      this.formData.latitude = '';
      this.hideRegionPopup();
    },

    showHouseholdTypePicker() {
      this.showRegionPopupFlag = true;
    },

    hideRegionPopup() {
      this.showRegionPopupFlag = false;
    },

    setIdcardExpiryType(type) {
      this.$set(this.formData, 'legal_idcard_expiry_type', type);
      if (type === '1') {
        this.formData.legal_idcard_expiry_end = '长久有效';
      } else {
        if (this.formData.legal_idcard_expiry_end === '长久有效') {
          this.formData.legal_idcard_expiry_end = '';
        }
      }
    },

    showDatePicker(type) {
      this.currentPickerType = type;
      this.showDatePickerFlag = true;
    },

    hideDatePicker() {
      this.showDatePickerFlag = false;
    },

    bindDateChange(e) {
      this.datePickerValue = e.detail.value;
    },

    confirmDateSelect() {
      const year = this.years[this.datePickerValue[0]];
      const month = this.months[this.datePickerValue[1]];
      const day = this.days[this.datePickerValue[2]];
      const dateStr = `${year}年${month < 10 ? '0' + month : month}月${day < 10 ? '0' + day : day}日`;
      if (this.currentPickerType === 'start') {
        this.formData.legal_idcard_expiry_start = dateStr;
      } else {
        this.formData.legal_idcard_expiry_end = dateStr;
      }
      this.hideDatePicker();
    },

    buildRegionTextForSearch() {
      const dependency = String(this.formData.uscc_dependency || '').trim();
      if (!dependency) return '';
      const parts = dependency.split('-');
      const province = parts[0] || '';
      const city = parts[1] || '';
      const district = parts[2] || '';
      let regionText = '';
      if (province) regionText += province;
      if (city && city !== province) regionText += city;
      if (district) regionText += district;
      return regionText;
    },

    getAddressValueForSearch() {
      const rawAddress = String(this.formData.uscc_address || '').trim();
      if (!rawAddress) return '';
      const dependencyText = String(this.formData.uscc_dependency || '').trim();
      const regionText = this.buildRegionTextForSearch();
      let detail = rawAddress;
      if (regionText && detail.indexOf(regionText) === 0) {
        detail = detail.slice(regionText.length).trim();
      } else if (dependencyText && detail.indexOf(dependencyText) === 0) {
        detail = detail.slice(dependencyText.length).trim();
      }
      detail = detail.replace(/^[\s,-]+/, '').trim();
      return detail || rawAddress;
    },

    getAddressInfo() {
      const dependency = String(this.formData.uscc_dependency || '').trim();
      const dependencyCode = String(this.formData.uscc_area || '').trim();
      const address = this.getAddressValueForSearch();
      const longitude = String(this.formData.longitude || '').trim();
      const latitude = String(this.formData.latitude || '').trim();

      const hasDependency = !!dependency;
      const hasAddress = !!address;
      const hasLocation = !!(longitude && latitude);

      let params = 'source=sj_info';

      if (hasDependency) {
        params += `&dependency=${encodeURIComponent(dependency)}`;
        if (dependencyCode) {
          params += `&dependency_code=${dependencyCode}`;
        }
      }
      if (hasAddress) {
        params += `&address=${encodeURIComponent(address)}`;
      }
      if (hasLocation) {
        params += `&longitude=${longitude}&latitude=${latitude}`;
      }
      if (!hasDependency && !hasAddress && !hasLocation) {
        params += '&init_current_location=1&silent_locate=1';
      }

      uni.navigateTo({
        url: `/pages/address/search?${params}`
      });
    },

    setupAddressListener() {
      this.addressListener = (addressData) => {
        this.handleAddressSelected(addressData);
      };
      this.sjAddressListener = (addressData) => {
        this.handleAddressSelected(addressData);
      };
      uni.$on('address-selected', this.addressListener);
      uni.$on('address-selected-for-sj', this.sjAddressListener);
    },

    removeAddressListener() {
      if (this.addressListener) {
        uni.$off('address-selected', this.addressListener);
        this.addressListener = null;
      }
      if (this.sjAddressListener) {
        uni.$off('address-selected-for-sj', this.sjAddressListener);
        this.sjAddressListener = null;
      }
    },

    checkAddressData() {
      try {
        const storedAddress = uni.getStorageSync('sj_selected_address');
        if (storedAddress) {
          this.handleAddressSelected(storedAddress);
          uni.removeStorageSync('sj_selected_address');
          return;
        }
      } catch (e) { }

      if (getApp().globalData && getApp().globalData.selectedAddress) {
        this.handleAddressSelected(getApp().globalData.selectedAddress);
        delete getApp().globalData.selectedAddress;
      }

      try {
        const selectedAddress = uni.getStorageSync('selectedAddress');
        if (selectedAddress) {
          this.handleAddressSelected(selectedAddress);
          uni.removeStorageSync('selectedAddress');
        }
      } catch (e) { }
    },

    handleAddressSelected(addressData) {
      if (!addressData) return;

      let detailAddress = '';
      if (addressData.address) {
        detailAddress = String(addressData.address).trim();
      } else if (addressData.name) {
        detailAddress = String(addressData.name).trim();
        const regionParts = [];
        if (addressData.pname) regionParts.push(addressData.pname);
        if (addressData.cityname && addressData.cityname !== addressData.pname) regionParts.push(addressData.cityname);
        if (addressData.adname) regionParts.push(addressData.adname);
        const regionText = regionParts.join('');
        if (regionText && detailAddress.indexOf(regionText) === 0) {
          detailAddress = detailAddress.slice(regionText.length).trim();
        }
        detailAddress = detailAddress.replace(/^[\s,-]+/, '').trim();
      }

      this.$set(this.formData, 'uscc_address', detailAddress);

      if (addressData.location) {
        const [longitude, latitude] = String(addressData.location).split(',');
        this.$set(this.formData, 'longitude', longitude || '');
        this.$set(this.formData, 'latitude', latitude || '');
      }

      if (addressData.pname || addressData.cityname || addressData.adname) {
        const locationParts = [];
        if (addressData.pname) locationParts.push(addressData.pname);
        if (addressData.cityname) locationParts.push(addressData.cityname);
        if (addressData.adname) locationParts.push(addressData.adname);
        this.$set(this.formData, 'uscc_dependency', locationParts.join('-'));
      }

      if (addressData.provinceCode) {
        this.$set(this.formData, 'uscc_province', String(addressData.provinceCode).substring(0, 6));
      }
      if (addressData.cityCode) {
        this.$set(this.formData, 'uscc_city', String(addressData.cityCode).substring(0, 6));
      }
      if (addressData.districtCode) {
        this.$set(this.formData, 'uscc_area', String(addressData.districtCode).substring(0, 6));
      }

      this.$forceUpdate();
    },

    async recognizeBusinessLicense(imageUrl) {
      try {
        this.isRecognizing = true;
        this.recognizeType = 'uscc_photo';
        uni.showLoading({ title: '正在识别营业执照...', mask: true });
        const result = await recognizeBusinessLicense(imageUrl);
        console.log('营业执照识别结果:', result);
        const hasRecognizedData = this.checkBusinessLicenseRecognition(result);
        if (!hasRecognizedData) {
          uni.hideLoading();
          uni.showToast({ title: '未识别到营业执照信息，请手动填写或重新拍摄', icon: 'none', duration: 3000 });
          this.isRecognizing = false;
          return;
        }
        let recognizedFields = 0;
        if (result.uscc_name && result.uscc_name.trim() && result.uscc_name !== '无') {
          this.$set(this.formData, 'uscc_name', result.uscc_name);
          recognizedFields++;
        }
        if (result.uscc_num && result.uscc_num.trim()) {
          this.$set(this.formData, 'uscc_num', result.uscc_num);
          recognizedFields++;
        }
        if (result.uscc_type && result.uscc_type.trim()) {
          this.$set(this.formData, 'uscc_type', result.uscc_type);
          recognizedFields++;
        }
        uni.hideLoading();
        if (recognizedFields > 0) {
          uni.showToast({ title: '营业执照识别成功', icon: 'none', duration: 2000 });
        } else {
          uni.showToast({ title: '识别完成，但未获取到有效信息', icon: 'none', duration: 3000 });
        }
      } catch (error) {
        console.error('营业执照识别失败:', error);
        uni.hideLoading();
        uni.showToast({ title: error.message || '识别失败，请手动填写', icon: 'none', duration: 3000 });
      } finally {
        this.isRecognizing = false;
      }
    },

    checkBusinessLicenseRecognition(result) {
      const requiredFields = ['uscc_num', 'uscc_name', 'uscc_type'];
      for (const field of requiredFields) {
        if (result[field] && result[field].trim()) return true;
      }
      return false;
    },

    async recognizeIdCardFront(imageUrl) {
      try {
        this.isRecognizing = true;
        this.recognizeType = 'legal_idcard_positive';
        uni.showLoading({ title: '正在识别身份证正面...', mask: true });
        const result = await recognizeIdCard(imageUrl, 1);
        const hasRecognizedData = (result.name && result.name.trim()) || (result.id_number && result.id_number.trim());
        if (!hasRecognizedData) {
          uni.hideLoading();
          uni.showToast({ title: '未识别到身份证信息，请手动填写或重新拍摄', icon: 'none', duration: 3000 });
          this.isRecognizing = false;
          return;
        }
        if (result.name) {
          this.$set(this.formData, 'legal_name', result.name);
        }
        if (result.id_number) {
          this.$set(this.formData, 'legal_idcard_num', result.id_number);
        }
        uni.hideLoading();
        uni.showToast({ title: '身份证正面识别成功', icon: 'none' });
      } catch (error) {
        console.error('身份证正面识别失败:', error);
        uni.hideLoading();
        uni.showToast({ title: error.message || '识别失败，请手动填写', icon: 'none', duration: 3000 });
      } finally {
        this.isRecognizing = false;
      }
    },

    async recognizeIdCardBack(imageUrl) {
      try {
        this.isRecognizing = true;
        this.recognizeType = 'legal_idcard_negative';
        uni.showLoading({ title: '正在识别身份证反面...', mask: true });
        const result = await recognizeIdCard(imageUrl, 2);
        const hasRecognizedData = (result.start_date && result.start_date.trim()) || (result.end_date && result.end_date.trim());
        if (!hasRecognizedData) {
          uni.hideLoading();
          uni.showToast({ title: '未识别到身份证有效期信息，请手动填写或重新拍摄', icon: 'none', duration: 3000 });
          this.isRecognizing = false;
          return;
        }
        const validPeriod = parseValidPeriod(result.start_date, result.end_date);
        if (validPeriod.startDate) {
          this.$set(this.formData, 'legal_idcard_expiry_start', validPeriod.startDate);
        }
        if (validPeriod.isPermanent) {
          this.$set(this.formData, 'legal_idcard_expiry_type', '1');
          this.$set(this.formData, 'legal_idcard_expiry_end', '长久有效');
        } else if (validPeriod.endDate) {
          this.$set(this.formData, 'legal_idcard_expiry_type', '2');
          this.$set(this.formData, 'legal_idcard_expiry_end', validPeriod.endDate);
        }
        uni.hideLoading();
        uni.showToast({ title: '身份证反面识别成功', icon: 'none' });
      } catch (error) {
        console.error('身份证反面识别失败:', error);
        uni.hideLoading();
        uni.showToast({ title: error.message || '识别失败，请手动填写', icon: 'none', duration: 3000 });
      } finally {
        this.isRecognizing = false;
      }
    },

    showTipPopup(field) { },

    getFormData() {
      return this.formData;
    },

    setData(data) {
      if (!data) return;
      const keys = Object.keys(this.formData);
      keys.forEach(key => {
        if (data[key] !== undefined && data[key] !== null) {
          this.$set(this.formData, key, data[key]);
        }
      });
    },

    saveFormData() {
      if (!this.formData.uscc_photo) {
        uni.showToast({
          title: '请上传营业执照',
          icon: 'none'
        });
        return false;
      }
      if (!this.formData.uscc_type) {
        uni.showToast({
          title: '请选择户主类型',
          icon: 'none'
        });
        return false;
      }
      if (!this.formData.uscc_num) {
        uni.showToast({
          title: '请输入证件号码',
          icon: 'none'
        });
        return false;
      }
      if (!this.formData.uscc_name) {
        uni.showToast({
          title: '请输入营业名称',
          icon: 'none'
        });
        return false;
      }
      if (!this.formData.uscc_dependency) {
        uni.showToast({
          title: '请选择注册地区',
          icon: 'none'
        });
        return false;
      }
      if (!this.formData.uscc_address) {
        uni.showToast({
          title: '请输入注册详细地址',
          icon: 'none'
        });
        return false;
      }
      if (!this.formData.legal_idcard_positive) {
        uni.showToast({
          title: '请上传法人身份证正面',
          icon: 'none'
        });
        return false;
      }
      if (!this.formData.legal_idcard_negative) {
        uni.showToast({
          title: '请上传法人身份证反面',
          icon: 'none'
        });
        return false;
      }
      if (!this.formData.legal_name) {
        uni.showToast({
          title: '请输入法人代表',
          icon: 'none'
        });
        return false;
      }
      if (!this.formData.legal_phone) {
        uni.showToast({
          title: '请输入法人联系方式',
          icon: 'none'
        });
        return false;
      }
      if (!/^1[3-9]\d{9}$/.test(this.formData.legal_phone)) {
        uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        });
        return false;
      }
      if (!this.formData.legal_idcard_num) {
        uni.showToast({
          title: '请输入法人身份证号',
          icon: 'none'
        });
        return false;
      }
      if (!this.formData.legal_idcard_expiry_start) {
        uni.showToast({
          title: '请选择开始日期',
          icon: 'none'
        });
        return false;
      }
      if (!this.formData.legal_idcard_expiry_end) {
        uni.showToast({
          title: '请选择结束日期',
          icon: 'none'
        });
        return false;
      }
      if (!this.formData.qualifications_sector || this.formData.qualifications_sector.length === 0) {
        uni.showToast({
          title: '请上传行业资质',
          icon: 'none'
        });
        return false;
      }
      return true;
    }
  }
}
</script>

<style scoped>
.sj-info-page {}

.section {
  margin-bottom: 30rpx;
}

.section-title {
  display: flex;
  align-items: center;
  padding-bottom: 20rpx;
  padding-top: 16rpx;
}

.title-bar {
  width: 8rpx;
  height: 32rpx;
  background-color: #E8101E;
  border-radius: 4rpx;
  margin-right: 12rpx;
}

.title-text {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #1D2129;
}

.box-cont {
  background: #FFFFFF;
  border-radius: 20rpx;
  margin-bottom: 24rpx;
  margin-left: 8rpx;
  margin-right: 8rpx;
  box-shadow: none;
}

.form-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
}

.form-item-one {
  display: flex;
  flex-direction: column;
  padding: 24rpx;
}

.form-item-two {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
}

.form-item-column {
  display: flex;
  flex-direction: column;
  padding: 24rpx;
}

.form-item-column .label {
  margin-bottom: 24rpx;
}

.date-row {
  display: flex;
  padding: 24rpx;
}

.date-col {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.date-col:first-child {
  margin-right: 24rpx;
}

.date-label {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
  margin-bottom: 16rpx;
}

.date-input-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2rpx solid #E8E8E8;
  border-radius: 12rpx;
  padding: 0 20rpx;
  height: 76rpx;
}

.date-value {
  font-size: 28rpx;
  color: #333333;
}

.date-placeholder {
  font-size: 28rpx;
  color: #CCCCCC;
}

.date-icon {
  width: 36rpx;
  height: 36rpx;
  flex-shrink: 0;
}

.label-wrapper {
  display: inline-flex;
  align-items: center;
}

.label {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
  line-height: 1;
}

.label-icon {
  width: 26rpx;
  height: 26rpx;
  margin-left: 8rpx;
}

.label.required::before {
  content: '*';
  color: #E8101E;
  margin-right: 4rpx;
}

.input {
  font-size: 28rpx;
  color: #333333;
  text-align: right;
  flex: 1;
}

.placeholder {
  font-size: 28rpx;
  color: #CCCCCC;
  margin-left: -20rpx;
}

.placeholder1 {
  text-align: center;
  font-size: 28rpx;
  color: #333333;
}

.placeholder1.required::before {
  content: '*';
  color: #E8101E;
  margin-right: 4rpx;
}

.picker-content {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.picker-value {
  font-size: 28rpx;
  color: #333333;
  margin-right: 8rpx;
}

.arrow-right {
  width: 24rpx;
  height: 24rpx;
  flex-shrink: 0;
}

.radio-group {
  display: flex;
  align-items: center;
}

.radio-item {
  display: flex;
  align-items: center;
  margin-right: 130rpx;
}

.radio {
  width: 30rpx;
  height: 30rpx;
  border: 2rpx solid #DDDDDD;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}

.radio.checked {
  background-color: #E8101E;
  border-color: #E8101E;
}

.radio-icon-image {
  width: 32rpx;
  height: 32rpx;
}

.radio-label {
  font-size: 28rpx;
  color: #333333;
}

.upload-area {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.upload-preview {
  width: 100%;
  height: 300rpx;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
}

.upload-placeholder {
  width: 100%;
  height: 300rpx;
  background: #F7F8FA;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16rpx;
  border: 2rpx dashed #DDDDDD;
}

.upload-icon {
  width: 80rpx;
  height: 80rpx;
}

.upload-hint {
  font-size: 24rpx;
  /* color: #E8101E; */
  text-align: center;
}

.upload-desc {
  font-size: 24rpx;
  color: #999999;
  margin-bottom: 20rpx;
  margin-top: 12rpx;
}

.upload-dashed {
  width: 100%;
  border: 2rpx dashed #DDDDDD;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx;
  margin-bottom: 16rpx;
  background: #FAFBFC;
}

.upload-camera-img {
  width: 446rpx;
  height: 298rpx;
  margin-left: 100rpx;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
  margin-top: 16rpx;
}

.image-item {
  position: relative;
  width: 200rpx;
  height: 200rpx;
}

.qualification-image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
}

.image-delete {
  position: absolute;
  top: -10rpx;
  right: -10rpx;
  width: 36rpx;
  height: 36rpx;
  background: #E8101E;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 28rpx;
}

.image-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2rpx dashed #DDDDDD;
  width: 214rpx;
  height: 214rpx;
  background: #F5F5F5;
  border-radius: 20rpx;
}

.upload-icon-small {
  width: 48rpx;
  height: 48rpx;
  margin-bottom: 8rpx;
}

.add-text {
  font-size: 22rpx;
  color: #999999;
}

.popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  visibility: hidden;
  transition: visibility 0.3s;
}

.popup.show {
  visibility: visible;
}

.popup-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.popup-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #FFFFFF;
  border-radius: 24rpx 24rpx 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #F0F0F0;
}

.popup-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
}

.popup-close {
  font-size: 40rpx;
  color: #999999;
}

.region-body {
  height: 500rpx;
}

.picker-scroll {
  width: 100%;
  height: 100%;
}

.picker-item {
  line-height: 68rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333333;
}

.popup-footer {
  display: flex;
  padding: 20rpx 30rpx;
  gap: 20rpx;
}

.popup-btn {
  flex: 1;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12rpx;
}

.popup-btn.cancel {
  background: #F5F5F5;
}

.popup-btn.confirm {
  background: #E8101E;
}

.popup-btn .btn-text {
  font-size: 28rpx;
}

.popup-btn.cancel .btn-text {
  color: #666666;
}

.popup-btn.confirm .btn-text {
  color: #FFFFFF;
}

.picker-list {
  padding: 20rpx 0;
}

.picker-item-row {
  padding: 24rpx 30rpx;
  font-size: 28rpx;
  color: #333333;
  text-align: center;
}

.picker-item-row text.active {
  color: #E8101E;
}
</style>