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

<template>
  <view class="store-info-page">
    <!-- 门店信息标题 -->
    <view class="section-title">
      <view class="title-bar"></view>
      <text>门店信息</text>
    </view>

    <!-- 店铺logo -->
    <view class="form-item box-cont">
        <view class="label-wrapper">
            <text class="label required">店铺logo</text>
            <image class="label-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/25bd7f38-1a3e-4282-84ea-190d7f820108" mode="aspectFit" @click="showTipPopup('head_photo')"></image>
        </view>
      <view class="upload-box" @click="chooseImage('head_photo')">
        <image v-if="formData.head_photo" :src="formData.head_photo" mode="aspectFill" class="logo-image"></image>
        <view class="upload-placeholder" v-else>
          <image src="/static/images/upload-img.png" mode="aspectFit" class="upload-icon"></image>
        </view>
      </view>
    </view>

    <!-- 店铺名称 -->
    <view class="form-item-one box-cont">
        <view class="label-wrapper">
            <text class="label required">店铺名称</text>
            <image class="label-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/25bd7f38-1a3e-4282-84ea-190d7f820108" mode="aspectFit" @click="showTipPopup('name')"></image>
        </view>
      <input type="text" v-model="formData.name" placeholder="请输入营业执照的店铺名称" 
             placeholder-class="placeholder" class="input" 
             @input="saveFormDataToLocalDebounce" />
    </view>

    <!-- 营业时间 -->
    <view class="form-item-two box-cont" @click="openTimePicker">
      <text class="label required">营业时间</text>
      <view class="picker-content">
        <text :class="formData.business_time ? 'picker-value' : 'placeholder'">
          {{formData.business_time || '请输入营业时间'}}
        </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="showServicePopup">
      <text class="label required">服务技能（多选）</text>
      <view class="picker-content">
        <text :class="formData.servers_kill.length > 0 ? 'picker-value' : 'placeholder'" v-if="formData.servers_kill">
          {{selectedServicesText || '请选择'}}
        </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="showLocationPopup">
      <text class="label required">门店所在地：</text>
      <view class="picker-content">
        <text :class="formData.dependency ? 'picker-value' : 'placeholder'">
          {{formData.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.address ? 'picker-value' : 'placeholder'">
          {{formData.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 class="section-title">
      <view class="title-bar"></view>
      <text>其他信息</text>
    </view>

    <!-- 获取消息方式 -->
    <!-- <view class="form-item-two box-cont" @click="openMessageMethodPicker">
      <text class="label required">获取消息方式：</text>
      <view class="picker-content">
        <text :class="formData.apply_state ? 'picker-value' : 'placeholder'">
          {{messageMethodText || '请选择'}}
        </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-one-yqr box-cont invite-code-container">
        <view class="invite-code-top">
            <view class="label-wrapper">
              <text class="label required">邀请码</text>
            </view>
            <input type="text" v-model="formData.invite_code_other" placeholder="请输入邀请码" 
                  placeholder-class="placeholder" class="input" 
                  @input="handleInviteCodeInput" />
        </view>
        
        <!-- 分割线 -->
        <view class="divider"></view>
        
        <!-- 邀请人信息 -->
        <view class="invite-info-container">
          <!-- 默认提示 -->
          <text v-if="!formData.invite_code_other" class="invite-tip">
            请填写邀请人的邀请码，若没有邀请人请填写13131313
          </text>
          
          <!-- 验证中 -->
          <view v-else-if="inviteCodeValidating" class="invite-validating">
            <text>验证中...</text>
          </view>
          
          <!-- 验证失败 -->
          <view v-else-if="inviteCodeError" class="invite-error" :class="{ 'shake-animation': shakeInviteError }">
            <text>邀请码无效</text>
          </view>
          
          <!-- 特殊邀请码13131313 -->
          <view v-else-if="formData.invite_code_other === '13131313' && !inviterInfo" class="invite-tip">
            请填写邀请人的邀请码，若没有邀请人请填写13131313
          </view>
          
          <!-- 显示邀请人信息 -->
          <view v-else-if="inviterInfo" class="inviter-info">
            <text class="inviter-label">邀请人：</text>
            <text class="inviter-name">{{ inviterInfo.name || inviterInfo.nick_name }}</text>
            <text class="inviter-divider">/</text>
            <text class="inviter-phone">{{ inviterInfo.account }}</text>
          </view>
          
          <!-- 其他情况（接口返回成功但没有认证铁军的邀请码） -->
          <view v-else class="invite-error" :class="{ 'shake-animation': shakeInviteError }">
              <text>邀请码无效</text>
          </view>
        </view>
    </view>

    <!-- 专业经验 -->
    <view class="form-item-two box-cont" @click="openExperiencePicker">
      <text class="label required">专业经验：</text>
      <view class="picker-content">
        <text :class="formData.major ? 'picker-value' : 'placeholder'">
          {{experienceText || '请选择'}}
        </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="popup" :class="{ show: showServicePopupFlag }">
      <view class="popup-mask" @click="hideServicePopup"></view>
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">选择服务技能</text>
          <text class="popup-close" @click="hideServicePopup">×</text>
        </view>
        <view class="popup-body">
          <view class="checkbox-list">
            <view class="checkbox-item" v-for="(item, index) in serviceList" :key="index"
                  @click="toggleServiceSelect(index)">
              <view class="checkbox" :class="{ checked: item.checked }">
                <image v-if="item.checked" class="check-icon" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/66325904-4603-48fd-b03b-90c684af96e9" mode="aspectFit"></image>
              </view>
              <text class="checkbox-label">{{item.title}}</text>
            </view>
          </view>
        </view>
        <view class="popup-footer">
          <view class="popup-btn cancel" @click="hideServicePopup">
            <text class="btn-text">取消</text>
          </view>
          <view class="popup-btn confirm" @click="confirmServiceSelect">
            <text class="btn-text">确定</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 所在地选择弹出框 -->
    <view class="popup" :class="{ show: showLocationPopupFlag }">
      <view class="popup-mask" @click="hideLocationPopup"></view>
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">选择所在地</text>
          <text class="popup-close" @click="hideLocationPopup">×</text>
        </view>
        <view class="region-body">
          <picker-view @change="bindChangeLocation" class="picker-scroll"
                      :indicator-style="indicatorStyle" :value="locationValue">
            <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 locatinCitys" :key="index">
                {{item.city}}
              </view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="(item,index) in locationAreas" :key="index">
                {{item.area}}
              </view>
            </picker-view-column>
          </picker-view>
        </view>
        <view class="popup-footer">
          <view class="popup-btn cancel" @click="hideLocationPopup">
            <text class="btn-text">取消</text>
          </view>
          <view class="popup-btn confirm" @click="confirmLocationSelect">
            <text class="btn-text">确定</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 营业时间选择器 -->
    <view class="popup" :class="{ show: showTimePicker }">
      <view class="popup-mask" @click="hideTimePopup"></view>
      <view class="popup-content">
        <view class="popup-header">
          <text class="cancel-text" @click="hideTimePopup">取消</text>
          <text class="title">选择营业时间</text>
          <text class="confirm-text" @click="confirmTime">确定</text>
        </view>
        <view class="time-range">
          <view class="time-block" :class="{ active: timeType === 'start' }"
                @click="switchTimeType('start')">
            <text class="time-value">{{formatTime(startTime)}}</text>
            <text class="time-label">开始时间</text>
          </view>
          <text class="time-separator">至</text>
          <view class="time-block" :class="{ active: timeType === 'end' }"
                @click="switchTimeType('end')">
            <text class="time-value">{{formatTime(endTime)}}</text>
            <text class="time-label">结束时间</text>
          </view>
        </view>
        <view class="region-body">
          <picker-view :value="pickerValue" @change="handleTimeChange" class="picker-scroll"
                      :indicator-style="indicatorStyle">
            <picker-view-column>
              <view class="picker-item" v-for="(hour, index) in hours" :key="index">
                {{hour}}
              </view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="(minute, index) in minutes" :key="index">
                {{minute}}
              </view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item">-</view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="(hour, index) in hours" :key="index">
                {{hour}}
              </view>
            </picker-view-column>
            <picker-view-column>
              <view class="picker-item" v-for="(minute, index) in minutes" :key="index">
                {{minute}}
              </view>
            </picker-view-column>
          </picker-view>
        </view>
      </view>
    </view>

    <!-- 提示信息弹窗 -->
    <view class="tip-popup" :class="{ show: showTipPopupFlag }">
      <view class="tip-popup-mask" @click="hideTipPopup"></view>
      <view class="tip-popup-content">
        <!-- 弹窗背景图片 -->
        <image class="tip-popup-bg" src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ab410a5d-5819-47f2-a0fc-3fd6b90d6770" mode="aspectFit"></image>
        
        <!-- 弹窗内容 -->
        <view class="tip-popup-body">
          <view class="tip-title">{{ tipTitle }}</view>
          <view class="tip-image-container">
            <image class="tip-image" :class="currentTipType" :src="tipImage" mode="widthFix"></image>
          </view>
          <view class="tip-buttons">
            <view class="tip-btn cancel" @click="hideTipPopup">
              <text class="btn-text">取消</text>
            </view>
            <view class="tip-btn confirm" @click="hideTipPopup">
              <text class="btn-text">我已了解</text>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import request from '../../utils/request';
import ChinaCitys from '../../static/data/ChinaCitys.json';
import { debounce } from '@/utils/debounce.js';

export default {
  data() {
    const loadedData = this.loadFormDataFromLocal();
    
    return {
      formData: loadedData || {
        head_photo: '',
        name: '',
        business_time: '',
        servers_kill: [],
        dependency: '',
        address: '',
        apply_state: '',
        invite_code_other: '',
        major: '',
        dependency_code: '',        // 区code
        dependency_province: '',    // 省code  
        dependency_city: '',        // 市code
        longitude: '',              // 经度
        latitude: '',               // 纬度
      },
      ChinaCitys: ChinaCitys,
      locatinCitys: [],
      locationAreas: [],
      locationValue: [0, 0, 0],
      showServicePopupFlag: false,
      serviceList: [],
      selectedServicesText: '',
      showLocationPopupFlag: false,
      showTimePicker: false,
      pickerValue: [8, 0, 0, 18, 0],
      hours: Array.from({ length: 24 }, (_, i) => i < 10 ? `0${i}` : `${i}`),
      minutes: Array.from({ length: 60 }, (_, i) => i < 10 ? `0${i}` : `${i}`),
      timeType: 'start',
      indicatorStyle: 'height: 68rpx;',
      messageMethodText: '',
      experienceText: '',
      showTipPopupFlag: false,
      tipTitle: '',
      tipImage: '',
      currentTipType: '',
      userId: null,
      identity: 2,
      tipImagesPreloaded: false,
      tipPopupBg: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ab410a5d-5819-47f2-a0fc-3fd6b90d6770',
      
      // 邀请码相关字段
      inviteCodeValidating: false,
      inviteCodeError: false,
      inviterInfo: null,
      currentValidatingCode: '',
      
      fromAddressPage: false,
      addressListener: null,

      // 抖动效果控制
      shakeInviteError: false,

      inviteValidationTimer: null, // 邀请码验证定时器
    }
  },
  
  computed: {
    startTime() {
      return {
        hour: this.hours[this.pickerValue[0]],
        minute: this.minutes[this.pickerValue[1]]
      }
    },
    endTime() {
      return {
        hour: this.hours[this.pickerValue[3]],
        minute: this.minutes[this.pickerValue[4]]
      }
    }
  },
  
  watch: {
    'name'(newVal) {
      this.saveFormDataToLocalDebounce();
    },
    'formData.head_photo'(newVal) {
      this.saveFormDataToLocalDebounce();
    },
    'formData.invite_code_other'(newVal) {
      this.saveFormDataToLocalDebounce();
    },
    'formData.address'(newVal) {
      this.saveFormDataToLocalDebounce();
    }
  },
  
  onLoad() {
    uni.$on('address-selected-for-sj', (addressData) => {
      this.handleAddressSelected(addressData);
    });
  },

  onUnload() {
    uni.$off('address-selected-for-sj');
  },
  
  mounted() {
    this.getUserInfo();
    this.preloadTipImages();

    this.locatinCitys = this.ChinaCitys[0].citys;
    this.locationAreas = this.locatinCitys[0].areas;
    this.loadServiceSkills();
    this.updateSelectedServicesText();

    // 初始化消息方式和专业经验显示文本
    if (this.formData.apply_state) {
      const methods = ['朋友圈', '抖音', '地推', '朋友介绍', '微博'];
      this.messageMethodText = methods[this.formData.apply_state - 1] || '';
    }
    
    if (this.formData.major) {
      const experiences = ['实习', '1-3年', '3-5年', '5-10年', '10年以上'];
      this.experienceText = experiences[this.formData.major - 1] || '';
    }
    
    this.setupAddressListener();
    
    if (this.formData.invite_code_other) {
      this.validateInviteCode(this.formData.invite_code_other);
    }
  },

  beforeDestroy() {
    if (this.addressListener) {
      uni.$off('address-selected', this.addressListener);
    }
  },

  onShow() {
    this.checkAddressData();
    
    const localData = this.loadFormDataFromLocal();
    if (localData) {
      Object.assign(this.formData, localData);

      // 立即更新显示文本（即使在 serviceList 加载完成前）
      this.updateSelectedServicesTextImmediately();

      // 恢复服务技能的选中状态
      if (this.serviceList.length > 0) {
        this.restoreServiceSkillsSelection();
      }
      
      // 恢复获取消息方式的显示文本
      if (this.formData.apply_state) {
        const methods = ['朋友圈', '抖音', '地推', '朋友介绍', '微博'];
        this.messageMethodText = methods[this.formData.apply_state - 1] || '';
      }
      
      // 恢复专业经验的显示文本
      if (this.formData.major) {
        const experiences = ['实习', '1-3年', '3-5年', '5-10年', '10年以上'];
        this.experienceText = experiences[this.formData.major - 1] || '';
      }

    }

    // 重新从本地存储加载邀请码验证状态
    this.loadInviteStateFromLocal();
    
    this.checkGlobalData();

    // 邀请码验证
    if (this.formData.invite_code_other) {
      this.validateInviteCode(this.formData.invite_code_other);
    }
  },

  onHide() {
    this.saveFormDataToLocal();
  },
  
  onUnload() {
    this.saveFormDataToLocal();
  },
  
  methods: {
    // 邀请码相关方法
    // 从本地存储加载邀请码验证状态
    loadInviteStateFromLocal() {
      try {
        const inviteState = uni.getStorageSync('store_invite_state');
        if (inviteState) {
          console.log('加载邀请码验证状态:', inviteState);
          
          // 恢复邀请码验证状态
          this.inviterInfo = inviteState.inviterInfo || null;
          this.inviteCodeError = inviteState.inviteCodeError || false;
          this.currentValidatingCode = inviteState.currentValidatingCode || '';
          
          // 特殊处理：如果当前邀请码是13131313，确保状态正确
          if (this.formData.invite_code_other === '13131313') {
            console.log('检测到特殊邀请码13131313，重置验证状态');
            this.inviteCodeError = false;
            this.inviterInfo = null;
            this.currentValidatingCode = '13131313';
          }
          
          // 如果正在验证的邀请码与当前表单中的一致，保持验证状态
          if (this.currentValidatingCode === this.formData.invite_code_other) {
            // 状态已恢复，无需额外操作
          } else {
            // 如果不一致，重新验证
            if (this.formData.invite_code_other && this.formData.invite_code_other.trim() !== '') {
              console.log('邀请码不一致，重新验证:', this.formData.invite_code_other);
              this.handleInviteCodeInput({ detail: { value: this.formData.invite_code_other } });
            }
          }
        } else {
          // 如果没有保存的状态，重置为初始状态
          this.resetInviteCodeState();
        }
      } catch (e) {
        console.log('加载邀请码验证状态失败:', e);
        this.resetInviteCodeState();
      }
    },

    // 新增方法：重置邀请码状态
    resetInviteCodeState() {
      this.inviteCodeValidating = false;
      this.inviteCodeError = false;
      this.inviterInfo = null;
      this.currentValidatingCode = '';
      this.shakeInviteError = false;
    },

    // 新增方法：专门保存邀请码验证状态
    saveInviteStateToLocal() {
      try {
        const inviteState = {
          inviterInfo: this.inviterInfo,
          inviteCodeError: this.inviteCodeError,
          currentValidatingCode: this.currentValidatingCode || this.formData.invite_code_other || ''
        };
        uni.setStorageSync('store_invite_state', inviteState);
        
        console.log('邀请码验证状态已保存:', {
          hasInviterInfo: !!this.inviterInfo,
          inviteCodeError: this.inviteCodeError,
          currentValidatingCode: this.currentValidatingCode
        });
      } catch (e) {
        console.log('保存邀请码验证状态失败:', e);
      }
    },
    // 触发邀请码错误抖动效果
    triggerInviteErrorShake() {
      // 触发抖动效果
      this.shakeInviteError = true;
      
      // 滚动到邀请码容器位置
      this.$nextTick(() => {
        // 使用uni.createSelectorQuery获取邀请码容器的位置
        const query = uni.createSelectorQuery().in(this);
        query.select('.invite-code-container').boundingClientRect((rect) => {
          if (rect) {
            // 获取当前窗口高度
            const windowHeight = uni.getSystemInfoSync().windowHeight;
            
            // 判断邀请码容器是否已经在可视区域内
            // 计算容器在屏幕中的位置比例（0-1之间）
            const containerTopRatio = rect.top / windowHeight;
            const containerBottomRatio = (rect.top + rect.height) / windowHeight;
            
            // 如果容器已经在屏幕中上部（顶部在屏幕中间以上），就不需要滚动
            // 或者容器整体都在屏幕内，也不需要滚动
            if (containerTopRatio >= 0 && containerTopRatio < 0.7 && 
                containerBottomRatio <= 1) {
              console.log('邀请码容器已在可视区域内，不需要滚动');
              return;
            }
            
            // 滚动到邀请码容器位置，减去一些偏移量让用户体验更好
            uni.pageScrollTo({
              scrollTop: rect.top - 50,
              duration: 300
            });
          }
        }).exec();
      });

      // 0.5秒后重置抖动状态
      setTimeout(() => {
        this.shakeInviteError = false;
      }, 500);
    },
    
    // 处理邀请码输入
    handleInviteCodeInput(e) {
      const code = e.detail ? e.detail.value : this.formData.invite_code_other;
      
      console.log('邀请码输入:', code);
      
      // 立即重置状态
      this.inviteCodeValidating = false;
      this.inviteCodeError = false;
      this.inviterInfo = null;
      
      // 如果邀请码为空，不进行验证
      if (!code || code.trim() === '') {
        this.formData.invite_code_other = '';
        this.saveFormDataToLocalDebounce();
        // 保存空状态
        this.saveInviteStateToLocal();
        return;
      }
      
      this.formData.invite_code_other = code;
      this.saveFormDataToLocalDebounce();
      
      // 【关键修复】如果是13131313，立即通过验证并取消任何正在进行的验证
      if (code === '13131313') {
        console.log('检测到特殊邀请码13131313，立即通过');
        
        // 清除任何可能的定时器
        if (this.inviteValidationTimer) {
          clearTimeout(this.inviteValidationTimer);
          this.inviteValidationTimer = null;
        }
        
        // 立即更新状态
        this.inviteCodeValidating = false;
        this.inviteCodeError = false;
        this.inviterInfo = null;
        this.currentValidatingCode = code;
        
        // 特殊邀请码也需要保存状态
        const inviteState = {
          inviterInfo: null,
          inviteCodeError: false,
          currentValidatingCode: code
        };
        uni.setStorageSync('store_invite_state', inviteState);
        
        // 强制更新视图
        this.$forceUpdate();
        return;
      }
      
      // 记录当前正在验证的邀请码
      this.currentValidatingCode = code;
      
      // 立即保存状态（验证中）
      this.saveInviteStateToLocal();
      
      // 清除之前的定时器
      if (this.inviteValidationTimer) {
        clearTimeout(this.inviteValidationTimer);
        this.inviteValidationTimer = null;
      }
      
      // 设置新的定时器
      this.inviteValidationTimer = setTimeout(() => {
        // 检查邀请码是否变化
        if (this.formData.invite_code_other !== this.currentValidatingCode) {
          console.log('邀请码已变化，取消验证');
          return;
        }
        
        // 再次检查是否是13131313（双重检查）
        if (this.formData.invite_code_other === '13131313') {
          console.log('双重检查：检测到特殊邀请码13131313');
          this.inviteCodeValidating = false;
          this.inviteCodeError = false;
          this.inviterInfo = null;
          this.currentValidatingCode = '13131313';
          
          const inviteState = {
            inviterInfo: null,
            inviteCodeError: false,
            currentValidatingCode: '13131313'
          };
          uni.setStorageSync('store_invite_state', inviteState);
          return;
        }
        
        console.log('开始验证邀请码:', this.formData.invite_code_other);
        this.validateInviteCode(this.formData.invite_code_other);
        
        // 清理定时器
        this.inviteValidationTimer = null;
      }, 600); // 适当增加延迟时间
    },
    
    // 验证邀请码
     async validateInviteCode(code) {
      console.log('开始验证邀请码:', code);

      // 特殊邀请码13131313直接通过
      if (code === '13131313') {
        console.log('特殊邀请码13131313，直接通过');
        this.inviteCodeValidating = false;
        this.inviteCodeError = false;
        this.inviterInfo = null;
        this.currentValidatingCode = code;
        // 特殊邀请码也需要保存状态
        const inviteState = {
          inviterInfo: null,
          inviteCodeError: false,
          currentValidatingCode: code
        };
        uni.setStorageSync('store_invite_state', inviteState);

        // 强制更新视图
        this.$forceUpdate();
        return;
      }
      
      // 如果邀请码为空
      if (!code || code.trim() === '') {
        this.inviteCodeValidating = false;
        this.inviteCodeError = false;
        this.inviterInfo = null;
        this.currentValidatingCode = '';
        const inviteState = {
          inviterInfo: null,
          inviteCodeError: false,
          currentValidatingCode: ''
        };
        uni.setStorageSync('store_invite_state', inviteState);
        return;
      }
      
      // 设置验证中状态
      this.inviteCodeValidating = true;
      this.inviteCodeError = false;
      this.inviterInfo = null;
      this.currentValidatingCode = code;
      
      try {
        // 调用接口验证邀请码
        const response = await request.post('/user/user/getInvite', {
          invite_code: code
        });
        
        console.log('邀请码验证响应:', response);
        
        // 验证完成
        this.inviteCodeValidating = false;
        
        if (response && response.code === 200 && response.data) {
          const userData = response.data;

          //检查返回的数据是否有效
          if (userData.account) {
              // 邀请码有效，保存邀请人信息
              this.inviterInfo = userData;
              this.inviteCodeError = false;
              console.log('邀请码验证通过，邀请人:', userData);
          } else {
              // 接口返回数据但没有account字段，说明不是有效邀请人
              console.log('接口返回数据无效，没有account字段:', userData);
              this.inviterInfo = null;
              this.inviteCodeError = true;
          }
        } else {
          // 接口返回错误或数据为空
          console.log('接口返回错误:', response?.msg || '未知错误');
          this.inviterInfo = null;
          this.inviteCodeError = true;
        }
      } catch (error) {
        console.error('验证邀请码失败:', error);
        this.inviteCodeValidating = false;
        this.inviteCodeError = true;
        this.inviterInfo = null;
      } finally {
        // 无论成功失败都保存状态
        const inviteState = {
          inviterInfo: this.inviterInfo,
          inviteCodeError: this.inviteCodeError,
          currentValidatingCode: this.currentValidatingCode
        };
        uni.setStorageSync('store_invite_state', inviteState);
      }
    },
    
    
    // 从本地存储加载数据
    loadFormDataFromLocal() {
      try {
        const stored = uni.getStorageSync('store_info_form_data');
        if (stored) {
          console.log('从本地存储加载门店数据:', stored);
          
          // 同时加载邀请码验证状态
          const inviteState = uni.getStorageSync('store_invite_state');
          if (inviteState) {
            this.inviterInfo = inviteState.inviterInfo;
            this.inviteCodeError = inviteState.inviteCodeError || false;
            this.currentValidatingCode = inviteState.currentValidatingCode || '';
            console.log('加载邀请码验证状态:', inviteState);
          }
          
          return stored;
        }
      } catch (e) {
        console.log('读取门店数据失败:', e);
      }
      return null;
    },
    
    // 保存数据到本地存储
    saveFormDataToLocal() {
      try {
        uni.setStorageSync('store_info_form_data', this.formData);

        // 同时保存邀请码验证状态
        const inviteState = {
          inviterInfo: this.inviterInfo,
          inviteCodeError: this.inviteCodeError,
          currentValidatingCode: this.currentValidatingCode
        };
        uni.setStorageSync('store_invite_state', inviteState);
        console.log('门店数据已保存到本地存储');
      } catch (e) {
        console.log('保存门店数据失败:', e);
      }
    },
    
    // 防抖保存
    saveFormDataToLocalDebounce() {
      // 使用debounce函数
      if (!this._saveDebounce) {
        this._saveDebounce = debounce(() => {
          this.saveFormDataToLocal();
        }, 500);
      }
      this._saveDebounce();
    },
    
    // 清空本地存储
    clearFormDataLocal() {
      try {
        uni.removeStorageSync('store_info_form_data');
        console.log('已清空门店数据');
      } catch (e) {
        console.log('清空门店数据失败:', e);
      }
    },

    // 立即更新已选择服务技能的显示文本（不依赖 serviceList）
    updateSelectedServicesText() {
      if (this.formData.servers_kill && this.formData.servers_kill.length > 0) {
        if (this.serviceList.length > 0) {
          const selectedServices = this.serviceList
            .filter(item => this.formData.servers_kill.includes(item.id))
            .map(item => {
              item.checked = true;
              return item.title;
            });
          this.selectedServicesText = selectedServices.join('、');
        } else {
          // serviceList 还未加载，显示数量
          this.selectedServicesText = `已选择${this.formData.servers_kill.length}项`;
        }
      } else {
        this.selectedServicesText = '';
      }
    },
    

    // 地址相关方法 

    setupAddressListener() {
      this.addressListener = (addressData) => {
        this.handleAddressSelected(addressData);
      };
      uni.$on('address-selected', this.addressListener);
    },
    
    // 检查地址数据
    checkAddressData() {
      try {
        const sjAddress = uni.getStorageSync('sj_selected_address');
        if (sjAddress) {
          this.handleAddressSelected(sjAddress);
          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 storedAddress = uni.getStorageSync('selectedAddress');
        if (storedAddress) {
          this.handleAddressSelected(storedAddress);
          uni.removeStorageSync('selectedAddress');
        }
      } catch (e) {}
    },
    
    // 处理地址选择结果
    handleAddressSelected(addressData) {
      if (!addressData) return;
      
      let address = '';
      if (addressData.name) {
        address = addressData.name;
      } else if (addressData.address) {
        address = addressData.address;
      }
      
      if (!address) return;
      
      this.formData.address = address;
      
      if (addressData.location) {
        const [longitude, latitude] = addressData.location.split(',');
        this.formData.longitude = longitude || '';
        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.formData.dependency = locationParts.join('-');
      }
      
      this.saveFormDataToLocal();
      this.$forceUpdate();
      
      // uni.showToast({
      //   title: '地址已选择',
      //   icon: 'none'
      // });
    },
    
    
    // 检查全局数据
    checkGlobalData() {
      if (getApp().globalData.storeInfoData) {
        Object.assign(this.formData, getApp().globalData.storeInfoData);
        this.saveFormDataToLocal();
        // delete getApp().globalData.storeInfoData;
        getApp().globalData.qualificationData = null;
      }
    },
    
    // 更新已选择服务技能的显示文本
    updateSelectedServicesText() {
      if (this.formData.servers_kill && this.formData.servers_kill.length > 0 && this.serviceList.length > 0) {
        const selectedServices = this.serviceList
          .filter(item => this.formData.servers_kill.includes(item.id))
          .map(item => {
            item.checked = true;
            return item.title;
          });
        this.selectedServicesText = selectedServices.join('、');
      }
    },
    
    // 获取用户信息
    getUserInfo() {
      request.post('/sj/User/getUser').then(result => {
        this.userId = result.data.id;
      })
    },
    
    getFormData() {
      return this.formData;
    },
    
    // 预加载提示弹窗图片
    preloadTipImages() {
      const images = [
        this.tipPopupBg, // 弹窗背景图片
        'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/98ad5649-db6d-4453-a308-c592fe155ed9', // 店铺logo提示图片
        'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/4a2dc8c2-98d4-4465-ae31-b2ea2d13aa23'  // 店铺名称提示图片
      ];
      
      console.log('开始预加载提示弹窗图片...');
      
      // 使用 Promise.all 确保所有图片都加载完成
      const loadPromises = images.map(src => this.loadImage(src));
      
      Promise.all(loadPromises)
        .then(() => {
          console.log('所有提示弹窗图片预加载完成');
          this.tipImagesPreloaded = true;
        })
        .catch(error => {
          console.warn('部分图片预加载失败:', error);
          // 即使部分图片加载失败，也设置为预加载完成，避免影响用户操作
          this.tipImagesPreloaded = true;
        });
    },
    
    // 加载单个图片
    loadImage(src) {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => {
          console.log('图片加载成功:', src);
          resolve();
        };
        img.onerror = () => {
          console.warn('图片加载失败:', src);
          reject(new Error(`图片加载失败: ${src}`));
        };
        img.src = src;
      });
    },
    
    // 显示提示弹窗
    showTipPopup(field) {
      const tipConfig = {
        'head_photo': {
          title: '如何查看店铺logo',
          image: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/98ad5649-db6d-4453-a308-c592fe155ed9'
        },
        'name': {
          title: '如何查看店铺名称',
          image: 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/4a2dc8c2-98d4-4465-ae31-b2ea2d13aa23'
        }
      };
      
      if (tipConfig[field]) {
        this.currentTipType = field; // 设置当前类型
        this.tipTitle = tipConfig[field].title;
        this.tipImage = tipConfig[field].image;
        // 等待图片预加载完成后再显示弹窗
      if (this.tipImagesPreloaded) {
        this.showTipPopupFlag = true;
      } else {
        // 如果图片还没预加载完成，立即加载当前图片
        console.log('图片还未预加载完成，立即加载当前图片');
        this.loadImage(this.tipImage).then(() => {
          this.showTipPopupFlag = true;
        }).catch(() => {
          // 即使加载失败也显示弹窗，避免用户无法操作
          this.showTipPopupFlag = true;
        });
      }
    }
  }, 
    
    // 隐藏提示弹窗
    hideTipPopup() {
      this.showTipPopupFlag = false;
    },
    
    // 加载服务技能列表
    async loadServiceSkills() {
      try {
        const res = await request.post('/sj/firstclass');
        this.serviceList = res.data.map(item => ({
          ...item,
          checked: false
        }));
        // 加载完成后立即恢复选中状态
        this.restoreServiceSkillsSelection();
        // 再次更新显示文本，确保显示具体的技能名称
        this.updateSelectedServicesText();
      } catch (error) {
        console.error('加载服务技能失败:', error);
      }
    },
    
    // 恢复服务技能选择状态
    restoreServiceSkillsSelection() {
      if (this.formData.servers_kill && this.formData.servers_kill.length > 0) {
        this.serviceList.forEach(item => {
          item.checked = this.formData.servers_kill.includes(item.id);
        });
        this.updateSelectedServicesText();
      }
    },
    
    // 选择图片
    chooseImage(type) {
      this.openCamera(type);
    },
    
    async openCamera(type) {
      try {
        const chooseResult = await new Promise((resolve, reject) => {
          uni.chooseImage({
            count: 1,
            sizeType: ['compressed'],
            sourceType: ['album', 'camera'],
            success: resolve,
            fail: reject
          });
        });
        
        if (!chooseResult.tempFilePaths || chooseResult.tempFilePaths.length === 0) {
          return;
        }
        
        const tempFilePath = chooseResult.tempFilePaths[0];
        const file = { path: tempFilePath, size: 0 };
        const result = await this.directUpload(file, this.userId, this.identity + 1);
        
        if (result) {
          this.formData[type] = result;
          this.saveFormDataToLocal();
        }
      } catch (err) {
        console.log('上传图片错误:', err);
      }
    },
    
    // 直接上传方法
    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) {
                const fileUrl = `${ossConfig.host}/${ossConfig.dir}${name}`;
                resolve(fileUrl);
              } else {
                reject(new Error('上传失败'));
              }
            },
            fail: reject
          });
        });
      } catch (error) {
        console.error('直接上传失败:', error);
        throw error;
      }
    },
    
    // 打开时间选择器
    openTimePicker() {
      this.showTimePicker = true;
    },
    
    // 隐藏时间选择器
    hideTimePopup() {
      this.showTimePicker = false;
    },
    
    // 切换时间类型
    switchTimeType(type) {
      this.timeType = type;
    },
    
    // 处理时间变化
    handleTimeChange(e) {
      const values = e.detail.value;
      this.pickerValue = values;
    },
    
    // 格式化时间显示
    formatTime(time) {
      return `${time.hour}:${time.minute}`;
    },
    
    // 确认时间选择
    confirmTime() {
      this.formData.business_time = `${this.formatTime(this.startTime)}-${this.formatTime(this.endTime)}`;
      this.saveFormDataToLocal();
      this.hideTimePopup();
    },
    
    // 显示服务技能弹出框
    showServicePopup() {
      this.showServicePopupFlag = true;
    },
    
    // 隐藏服务技能弹出框
    hideServicePopup() {
      this.showServicePopupFlag = false;
    },
    
    // 切换服务技能选择状态
    toggleServiceSelect(index) {
      this.$set(this.serviceList[index], 'checked', !this.serviceList[index].checked);
    },
    
    // 确认服务技能选择
    confirmServiceSelect() {
      const selectedServices = this.serviceList
        .filter(item => item.checked)
        .map(item => item.title);
      const selectedServicesId = this.serviceList
        .filter(item => item.checked)
        .map(item => item.id);
        
      if (selectedServices.length === 0) {
        uni.showToast({ title: '请至少选择一个服务技能', icon: 'none' });
        return;
      }
      
      this.formData.servers_kill = selectedServicesId;
      this.selectedServicesText = selectedServices.join('、');
      this.saveFormDataToLocal();
      this.hideServicePopup();
    },
    
    // 显示所在地选择弹出框
    showLocationPopup() {
      this.showLocationPopupFlag = true;
    },
    
    // 隐藏所在地选择弹出框
    hideLocationPopup() {
      this.showLocationPopupFlag = false;
    },
    
    // 所在地选择变化
    bindChangeLocation(e) {
      this.locationValue = e.detail.value;
      let index1 = e.detail.value[0] || 0;
      let index2 = e.detail.value[1] || 0;
      this.locatinCitys = this.ChinaCitys[index1].citys;
      this.locationAreas = this.locatinCitys[index2].areas;
    },
    
    // 确认所在地选择
    confirmLocationSelect() {
      let valueArr = this.locationValue;
      let index1 = valueArr[0] || 0;
      let index2 = valueArr[1] || 0;
      let index3 = valueArr[2] || 0;
      let province = this.ChinaCitys[index1].province;
      let city = this.locatinCitys[index2].city;
      let area = this.locationAreas[index3].area;
      this.formData.dependency = province + '-' + city + '-' + area;

      // 清空详细地址，因为所在地已经改变
      this.formData.address = '';
      this.formData.longitude = '';
      this.formData.latitude = '';
      
      if (this.ChinaCitys[index1] && this.ChinaCitys[index1].code) {
        let provinceCode = this.ChinaCitys[index1].code.toString();
        this.formData.dependency_province = provinceCode.substring(0, 6);
      }
      if (this.locatinCitys[index2] && this.locatinCitys[index2].code) {
        let cityCode = this.locatinCitys[index2].code.toString();
        this.formData.dependency_city = cityCode.substring(0, 6);
      }
      if (this.locationAreas[index3] && this.locationAreas[index3].code) {
        let areaCode = this.locationAreas[index3].code.toString();
        this.formData.dependency_code = areaCode.substring(0, 6);
      }
      
      this.saveFormDataToLocal();
      this.hideLocationPopup();
    },
    
    // 获取详细地址
    getAddressInfo() {
      this.saveFormDataToLocal();
      
      // 构建URL参数
      let params = 'source=sj_info'; // 用于地址返回
      
      // 如果有门店所在地，添加dependency参数
      if (this.formData.dependency) {

        const locationStr = encodeURIComponent(this.formData.dependency);
        params += `&dependency=${locationStr}`;
        
        if (this.formData.dependency_code) {
          params += `&dependency_code=${this.formData.dependency_code}`;
        }

        console.log('传递的地区信息:', this.formData.dependency);
        console.log('编码后的地区信息:', locationStr);
      }

      // 如果有已选择的地址坐标，也传递过去作为初始位置
      if (this.formData.longitude && this.formData.latitude) {
        params += `&longitude=${this.formData.longitude}&latitude=${this.formData.latitude}`;
      }
      
      console.log('跳转URL参数:', params);
      
      uni.navigateTo({
        url: `/pages/address/search?${params}`
      });
    },
    
    // 打开获取消息方式选择器
    openMessageMethodPicker() {
      uni.showActionSheet({
        itemList: ['朋友圈', '抖音', '地推', '朋友介绍', '微博'],
        success: (res) => {
          const methods = ['朋友圈', '抖音', '地推', '朋友介绍', '微博'];
          this.formData.apply_state = res.tapIndex + 1;
          this.messageMethodText = methods[res.tapIndex];
          this.saveFormDataToLocal();
        }
      });
    },
    
    // 打开专业经验选择器
    openExperiencePicker() {
      uni.showActionSheet({
        itemList: ['实习', '1-3年', '3-5年', '5-10年', '10年以上'],
        success: (res) => {
          const experiences = ['实习', '1-3年', '3-5年', '5-10年', '10年以上'];
          this.formData.major = res.tapIndex + 1;
          this.experienceText = experiences[res.tapIndex];
          this.saveFormDataToLocal();
        }
      });
    },
    
    // 保存表单数据（用于提交前验证）
    saveFormData() {
      // 验证必填字段
      if (!this.formData.head_photo) {
        uni.showToast({
          title: '请上传店铺logo',
          icon: 'none'
        });
        return false;
      }
      if (!this.formData.name) {
        uni.showToast({
          title: '请输入店铺名称',
          icon: 'none'
        });
        return false;
      }
      if (!this.formData.business_time) {
        uni.showToast({
          title: '请选择营业时间',
          icon: 'none'
        });
        return false;
      }
      if (this.formData.servers_kill.length === 0) {
        uni.showToast({
          title: '请选择服务技能',
          icon: 'none'
        });
        return false;
      }
      if (!this.formData.dependency) {
        uni.showToast({
          title: '请选择门店所在地',
          icon: 'none'
        });
        return false;
      }
      if (!this.formData.address) {
        uni.showToast({
          title: '请选择门店详细地址',
          icon: 'none'
        });
        return false;
      }
      // if (!this.formData.apply_state) {
      //   uni.showToast({
      //     title: '请选择获取消息方式',
      //     icon: 'none'
      //   });
      //   return false;
      // }
      if (!this.formData.invite_code_other) {
        uni.showToast({
          title: '请输入邀请码',
          icon: 'none'
        });
        return false;
      }
      
      // 邀请码有效性验证
      if (this.inviteCodeValidating) {
        uni.showToast({ title: '邀请码验证中，请稍候', icon: 'none' });
        return false;
      }
      
      // 特殊邀请码13131313直接通过
      if (this.formData.invite_code_other === '13131313') {
        // 直接通过
      } else if (this.inviteCodeError || !this.inviterInfo) {
        // 邀请码无效，触发抖动效果
        this.triggerInviteErrorShake();
        return false;
      }
      
      if (!this.formData.major) {
        uni.showToast({
          title: '请选择专业经验',
          icon: 'none'
        });
        return false;
      }

      // 将数据保存到全局，以便在下一步使用
      getApp().globalData.storeInfoData = this.formData;
      return true;
    }
  }
}
</script>

<style scoped>
.store-info-page {
  /* padding: 28rpx 0; */
}

.section-title {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.title-bar {
  width: 6rpx;
  height: 30rpx;
  background-color: #E8101E;
  margin-right: 7rpx;
  border-radius: 5rpx;
}

.section-title text {
  font-size: 32rpx;
  color: #1D2129;
  font-weight: 500;
}

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

.form-item {
  padding: 24rpx;
}

.label {
  display: block;
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
}

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

.upload-box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 160rpx;
  border-radius: 20rpx;
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

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

.upload-text {
  font-size: 24rpx;
  color: #999999;
}

.logo-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 20rpx;
}

.form-item-one {
  display: flex;
  align-items: center;
  padding: 24rpx;
}

.form-item-one-yqr {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
}

/* 创建内部的上半部分 */
.invite-code-top {
  display: flex;
  align-items: center;
  padding: 24rpx;
  width: 100%;
  box-sizing: border-box;
}

/* 分割线 */
.divider {
  height: 1rpx;
  background-color: #00000013;
  width: 100%;
}

/* 邀请信息容器 */
.invite-info-container {
  padding: 20rpx 24rpx;
  width: 100%;
  box-sizing: border-box;
  min-height: 60rpx;
}

.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;
  align-items: center;
}

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

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

.placeholder {
  color: #999999;
}

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

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

.arrow-right {
  width: 14rpx;
  height: 26rpx;
  margin-left: 16rpx;
}

/* 邀请码相关样式 */
.invite-tip {
  font-size: 24rpx;
  color: #666666;
}

.invite-validating {
  font-size: 20rpx;
  color: #999999;
}

.invite-error {
  font-size: 24rpx;
  color: #E8101E;
}

.inviter-info {
  display: flex;
  align-items: center;
  font-size: 20rpx;
}

.inviter-label {
  color: #666666;
}

.inviter-name {
  color: #333333;
  font-weight: 500;
}

.inviter-divider {
  color: #666666;
  margin: 0 5rpx;
}

.inviter-phone {
  color: #666666;
}

/* 添加抖动动画样式 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-7rpx); }
  20%, 40%, 60%, 80% { transform: translateX(7rpx); }
}

.shake-animation {
  animation: shake 0.5s ease-in-out;
  color: #E8101E; /* 保持红色 */
}

/* 弹窗样式 */
.popup {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}

.popup.show {
  visibility: visible;
  opacity: 1;
}

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

.popup-content {
  position: relative;
  background-color: #FFFFFF;
  border-radius: 24rpx 24rpx 0 0;
  padding: 32rpx;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.popup.show .popup-content {
  transform: translateY(0);
}

.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

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

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

.popup-body {
  max-height: 600rpx;
  overflow-y: auto;
}

.checkbox-list {
  display: flex;
  flex-wrap: wrap;
}

.checkbox-item {
  width: 50%;
  padding: 14rpx;
  display: flex;
  align-items: center;
}

.checkbox {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #DDDDDD;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}

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

.check-icon {
  width: 42rpx;
  height: 42rpx;
}

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

.popup-footer {
  display: flex;
  margin-top: 32rpx;
}

.popup-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 16rpx;
}

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

.popup-btn.confirm {
  background: linear-gradient(180deg, #f52540 0%, #e8101e 100%);
}

.popup-btn .btn-text {
  font-size: 32rpx;
  font-weight: 500;
}

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

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

.region-body {
  height: 400rpx;
}

.picker-scroll {
  height: 400rpx;
}

.picker-item {
  height: 68rpx;
  line-height: 68rpx;
  text-align: center;
}

/* 时间选择器样式 */
.cancel-text {
  font-size: 32rpx;
  color: #666666;
}

.confirm-text {
  font-size: 32rpx;
  color: #E8101E;
  font-weight: 500;
}

.time-range {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32rpx;
  background: #F8F9FC;
}

.time-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #FFFFFF;
  border-radius: 12rpx;
  padding: 24rpx 0;
  transition: all 0.3s ease;
}

.time-block.active {
  background: #ECF2FF;
}

.time-label {
  font-size: 26rpx;
  color: #999999;
  margin-top: 8rpx;
}

.time-value {
  font-size: 40rpx;
  color: #333333;
  font-weight: 500;
}

.time-block.active .time-value {
  color: #E8101E;
}

.time-separator {
  font-size: 28rpx;
  color: #999999;
  margin: 0 24rpx;
}

/* 提示弹窗样式 */
.tip-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s ease;
}

.tip-popup.show {
  visibility: visible;
  opacity: 1;
}

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

.tip-popup-content {
  position: relative;
  width: 620rpx;
  height: 810rpx;
}

.tip-popup-bg {
  width: 620rpx;
  height: 810rpx;
  position: absolute;
  top: 0;
  left: 0;
}

.tip-popup-body {
  position: relative;
  flex-direction: column;
  padding: 80rpx 20rpx 40rpx 20rpx;
  box-sizing: border-box;
}

.tip-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-top: 107rpx;
  margin-bottom: 37rpx;
}

.tip-image-container {
  align-items: center;
  justify-content: center;
  margin-bottom: 50rpx;
}

.tip-image {
  width: 627rpx;
  height: 327rpx;
  margin-left: 13rpx; 
}

/* 店铺logo图片的特殊样式 */
.tip-image.head_photo {
  width: 582rpx;
  height: 327rpx;
  margin-right: 0;
  margin-left: -15rpx;
}

/* 店铺名称图片的特殊样式 */
.tip-image.store_name {
  width: 627rpx;
  height: 327rpx;
  margin-left: 13rpx;
}

.tip-buttons {
  display: flex;
  justify-content: space-between;
  padding: 0 28rpx;
}

.tip-btn {
  width: 250rpx;
  height: 80rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 500;
}

.tip-btn.cancel {
  border: #E8101E 2rpx solid;
  background-color: transparent;
  color: #e8101e;
}

.tip-btn.confirm {
  background: linear-gradient(180deg, #f52540 0%, #e8101e 100%);
  color: #FFFFFF;
}

.tip-btn .btn-text {
  color: inherit;
}
</style>