mrr.sj.front/pages/shop/business-time.vue

<template>
  <view class="service-time-page">
    <custom-navbar title="营业设置" :showBack="true"></custom-navbar>

    <view class="content">

      <view class="setting-row">
        <text class="setting-label">当前接单状态</text>
        <view class="custom-switch" :class="{ 'is-on': isOpenStore }" @click="toggleStatus">
          <text class="switch-text text-on">接单中</text>
          <text class="switch-text text-off">不接单</text>
          <view class="switch-dot"></view>
        </view>
      </view>

      <view class="service-time-card" v-if="hasBusinessTime">
        <view class="time-content">
          <view class="time-blocks-container">
            <view class="t-block">
              <text class="t-time">{{ formatTime(startTime) }}</text>
              <text class="t-label">开始时间</text>
            </view>
            <text class="t-separator">至</text>
            <view class="t-block">
              <text class="t-time">{{ formatTime(endTime) }}</text>
              <text class="t-label">结束时间</text>
            </view>
          </view>

          <view class="modify-btn-outline" @click="showTimePicker" v-if="!showBottomActions && !showTimePickerFlag">
            <image class="edit-icon"
              src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/d67adcda-d334-440f-87d4-d709983b0101.png">
            </image>
            <text>修改服务时间</text>
          </view>
        </view>
      </view>

      <view class="service-time-card1" v-if="!hasBusinessTime">

        <view class="modify-btn-outline1" @click="showTimePicker">
          <image class="edit-icon"
            src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/176a8b35-14bd-4cd1-a187-4165d07c0dcb.png">
          </image>
          <text>设置服务时间</text>
        </view>
      </view>

      <view class="setup-modal-mask" v-if="showSetupModal" catchtouchmove="true">
        <view class="setup-modal-content">
          <image class="modal-bg"
            src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/ac2cb4aa-a7c5-4776-98f4-b77e9c0cfa85.png">
          </image>

          <view class="modal-header">
            <text>温馨提示</text>
          </view>

          <view class="modal-body">
            <text class="modal-subtitle">发布服务请完善以下资料：</text>

            <view class="missing-list">
              <view class="missing-item" v-if="!hasBusinessTime">
                <view class="item-left">
                  <image class="item-icon"
                    src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/21b26b44-5e36-4291-8900-705a3d5bfa90.png">
                  </image>
                  <view class="item-texts">
                    <text class="item-title">营业时间未配置</text>
                    <text class="item-desc">请完善店铺的营业时间</text>
                  </view>
                </view>
                <view class="item-right orange" @tap="goToBusinessTime">去配置</view>
              </view>

              <view class="missing-item" v-if="!hasServiceSkill">
                <view class="item-left">
                  <image class="item-icon"
                    src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/21b26b44-5e36-4291-8900-705a3d5bfa90.png">
                  </image>
                  <view class="item-texts">
                    <text class="item-title">服务技能未配置</text>
                    <text class="item-desc">请完善服务技能</text>
                  </view>
                </view>
                <view class="item-right orange" @tap="goToServiceSkill">去配置</view>
              </view>

              <view class="missing-item" v-if="!isCertified">
                <view class="item-left">
                  <image class="item-icon"
                    :src="isUnderReview ? 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/25c444be-a66e-45d6-b50d-922149ff059f.png' : 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/21b26b44-5e36-4291-8900-705a3d5bfa90.png'">
                  </image>
                  <view class="item-texts">
                    <text class="item-title" :class="{ 'blue-text': isUnderReview }">{{ isUnderReview ? '资质认证中' :
                      '资质未认证'
                    }}</text>
                    <text class="item-desc">请完成资质认证</text>
                  </view>
                </view>
                <view class="item-right" :class="isUnderReview ? 'grey' : 'light-green'" @tap="goToAuth">
                  {{ isUnderReview ? '查看进度' : '去认证' }}
                </view>
              </view>
            </view>
          </view>

          <view class="modal-footer">
            <view class="btn-know" @tap="closeSetupModal">知道了</view>
          </view>
        </view>
      </view>

      <view class="popup" :class="{ show: showTimePickerFlag }">
        <view class="popup-mask" @click="hideTimePicker"></view>
        <view class="popup-content">
          <view class="popup-header">
            <text class="cancel-text" @click="hideTimePicker">取消</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-picker">{{ 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-picker">{{ 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="bottom-actions" v-if="showBottomActions">
        <view class="action-buttons">
          <button class="btn-cancel-large" @click="cancelChange">取消</button>
          <button class="btn-confirm-large" @click="submitChange">提交</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request.js';

export default {
  data() {
    return {
      currentTime: '09:00-21:00', // 当前营业时间
      originalTime: '09:00-21:00', // 保存原始时间，用于取消时恢复
      tempTime: '', // 临时存储选择的时间
      showTimePickerFlag: false,
      showBottomActions: 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;',

      startTime: {
        hour: '09',
        minute: '00'
      },
      endTime: {
        hour: '21',
        minute: '00'
      },

      // 以下为首页同步过来的弹窗与状态判定数据
      userInfo: {},
      authDetails: null,
      sjId: null,
      showSetupModal: false,
      isExpandTime: true, // 默认展开服务时间
      isLogin: true // 默认已登录
    }
  },
  computed: {
    // 依据后端详情判断是否真实处于审核中
    isUnderReview() {
      if (!this.isLogin) return false;
      if (this.authDetails && Object.keys(this.authDetails).length > 0) {
        return true;
      }
      return false;
    },
    // 判断是否具备接单的大前提条件
    canOpenStore() {
      return this.hasBusinessTime && this.hasServiceSkill && this.isCertified;
    },
    // 判定服务技能
    hasServiceSkill() {
      const fromUser = this.userInfo && Array.isArray(this.userInfo.servers_kill) && this.userInfo.servers_kill.length > 0;
      const fromAuth = this.authDetails && Array.isArray(this.authDetails.servers_kill) && this.authDetails.servers_kill.length > 0;
      return this.isLogin && (fromUser || fromAuth);
    },
    // 当前开关状态显示
    isOpenStore() {
      if (!this.canOpenStore) {
        return false;
      }
      return this.userInfo.order_taking == 1;
    },
    isSettled() {
      if (!this.isLogin || typeof this.userInfo.id_type === 'undefined') return false;
      return this.userInfo.id_type !== 0;
    },
    isCertified() {
      if (!this.isLogin || typeof this.userInfo.id_type === 'undefined') return false;
      return this.userInfo.id_type > 0;
    },
    hasBusinessTime() {
      const timeFromUser = this.userInfo && this.userInfo.business_time;
      const timeFromAuth = this.authDetails && this.authDetails.business_time;
      return this.isLogin && !!(timeFromUser || timeFromAuth);
    }
  },
  onLoad() {
    this.loadCurrentTime();
  },
  methods: {
    // 加载当前营业时间 (合并了首页获取用户信息的逻辑)
    async loadCurrentTime() {
      try {
        const res = await request.post('/sj/user/getuser', {
          type: 3 // 商家类型
        })
        console.log('获取用户信息响应:', res)

        if (res.state === 1 && res.data) {
          // 同步给页面 userInfo 对象，以驱动计算属性与弹窗开关
          this.userInfo = res.data;
          this.sjId = res.data.id;

          // 检查营业时间字段
          if (res.data.business_time) {
            this.currentTime = res.data.business_time
            this.originalTime = res.data.business_time
            this.parseTimeString(res.data.business_time)
            console.log('成功获取营业时间:', res.data.business_time)
          } else {
            // 如果没有营业时间字段，使用默认值
            console.log('未找到营业时间字段，使用默认值')
            this.currentTime = '09:00-21:00'
            this.originalTime = '09:00-21:00'
            this.parseTimeString('09:00-21:00')
          }

          // 如果已经开启入驻，顺便拉取一下详情用于判定服务技能等
          if (this.isSettled) {
            this.fetchAuthDetails();
          }
        } else {
          throw new Error(res.msg || '获取用户信息失败')
        }
      } catch (error) {
        console.error('加载营业时间失败:', error)
        // 设置默认值，确保页面能正常操作
        this.currentTime = '09:00-21:00'
        this.originalTime = '09:00-21:00'
        this.parseTimeString('09:00-21:00')

        // uni.showToast({
        //   title: '加载营业时间失败，使用默认时间',
        //   icon: 'none'
        // })
      }
    },

    // 弹窗路由：获取入驻详情
    fetchAuthDetails() {
      request.post("/sj/userSjAuth/details", {
        type: 1,
        id_type: '1'
      }).then(res => {
        if (res.code == 200 && res.data) {
          this.authDetails = res.data;
        }
      });
    },

    // 弹窗路由：关闭弹窗
    closeSetupModal() {
      this.showSetupModal = false;
    },
    // 弹窗路由：去配置营业时间
    goToBusinessTime() {
      this.showSetupModal = false;
      uni.showToast({ title: '您当前正在营业时间页面', icon: 'none' });
    },
    // 弹窗路由：去配置服务技能
    goToServiceSkill() {
      this.showSetupModal = false;
      uni.navigateTo({ url: '/pages/shop/service-skills' });
    },
    // 弹窗路由：去认证
    goToAuth() {
      this.showSetupModal = false;
      if (this.isUnderReview) {
        uni.navigateTo({ url: '/pages/ruzhu/submitres' });
      } else {
        this.navigateToForm();
      }
    },
    // 提取公共的【去填表】路由
    navigateToForm() {
      if (this.isSettled) {
        uni.navigateTo({ url: '/pages/ruzhu/ruzhu?step=3' });
      } else {
        uni.navigateTo({ url: '/pages/ruzhu/ruzhu' });
      }
    },

    // 核心切换逻辑：营业中 / 休息中
    toggleStatus() {
      const currentStatus = this.userInfo.order_taking;
      const isCurrentlyResting = currentStatus != 1; // 当前不是营业中即为休息中

      // 准备切换的新状态
      let newStatus = currentStatus == 1 ? 2 : 1;

      // 想要开始接单时，检查是否配置了营业时间
      if (newStatus === 1 && !this.hasBusinessTime) {
        uni.showToast({ title: '请配置营业时间', icon: 'none' });
        return;
      }

      uni.showLoading({ title: '切换中...', mask: true });

      request.post("/sj/sjordertaking", {
        order_taking: newStatus,
        sjid: this.sjId
      }).then((res) => {
        uni.hideLoading();
        this.userInfo.order_taking = newStatus; // 本地状态切换
        this.loadCurrentTime(); // 重新拉取确认最新数据
        uni.showToast({ title: newStatus == 1 ? '已开启接单' : '已停止接单', icon: 'none' });
      }).catch(() => {
        uni.hideLoading();
        uni.showToast({ title: '网络异常，切换失败', icon: 'none' });
      });
    },

    // 解析时间字符串到开始和结束时间
    parseTimeString(timeStr) {
      const times = timeStr.split('-')
      if (times.length === 2) {
        const startParts = times[0].split(':')
        const endParts = times[1].split(':')

        if (startParts.length === 2) {
          this.startTime.hour = startParts[0]
          this.startTime.minute = startParts[1]
        }
        if (endParts.length === 2) {
          this.endTime.hour = endParts[0]
          this.endTime.minute = endParts[1]
        }

        this.updatePickerValue()
      }
    },

    // 更新picker值
    updatePickerValue() {
      const startHourIndex = this.hours.indexOf(this.startTime.hour)
      const startMinuteIndex = this.minutes.indexOf(this.startTime.minute)
      const endHourIndex = this.hours.indexOf(this.endTime.hour)
      const endMinuteIndex = this.minutes.indexOf(this.endTime.minute)

      this.pickerValue = [
        startHourIndex >= 0 ? startHourIndex : 8,
        startMinuteIndex >= 0 ? startMinuteIndex : 0,
        0, // 分隔符固定位置
        endHourIndex >= 0 ? endHourIndex : 18,
        endMinuteIndex >= 0 ? endMinuteIndex : 0
      ]
    },

    // 显示时间选择器
    showTimePicker() {
      // 保存原始时间，用于取消时恢复
      this.originalTime = this.currentTime
      this.showTimePickerFlag = true;
    },

    // 隐藏时间选择器
    hideTimePicker() {
      this.showTimePickerFlag = false;
    },

    // 切换时间类型（开始/结束）
    switchTimeType(type) {
      this.timeType = type;
    },

    // 处理时间变化
    handleTimeChange(e) {
      const values = e.detail.value;
      this.pickerValue = values;

      // 更新开始时间
      this.startTime.hour = this.hours[values[0]]
      this.startTime.minute = this.minutes[values[1]]

      // 更新结束时间
      this.endTime.hour = this.hours[values[3]]
      this.endTime.minute = this.minutes[values[4]]
    },

    // 格式化时间显示
    formatTime(time) {
      return `${time.hour}:${time.minute}`
    },

    // 确认时间选择 - 直接提交
    confirmTime() {
      const newTime = `${this.formatTime(this.startTime)}-${this.formatTime(this.endTime)}`

      // 验证时间合理性
      if (!this.validateTime(this.startTime, this.endTime)) {
        uni.showToast({
          title: '结束时间必须晚于开始时间',
          icon: 'none'
        })
        return
      }

      this.tempTime = newTime
      this.currentTime = newTime
      this.hideTimePicker()
      this.submitChange()
    },

    // 取消变更
    cancelChange() {
      // 恢复原来的时间
      this.currentTime = this.originalTime
      this.parseTimeString(this.originalTime) // 同步将方块内的时间退回
      this.showBottomActions = false
      this.tempTime = ''
    },

    // 提交变更
    async submitChange() {
      if (!this.tempTime) {
        uni.showToast({
          title: '请先选择营业时间',
          icon: 'none'
        })
        return
      }

      try {
        // uni.showLoading({
        //   title: '提交中...'
        // })

        const params = {
          apply_type: 1,
          business_time: this.tempTime
        }
        console.log('提交参数:', params) // 调试日志
        console.log('请求URL:', '/sj/userSjAuth/apply')

        const res = await request.post('/sj/userSjAuth/apply', params)

        uni.hideLoading()
        console.log('提交接口响应:', res)

        // 根据接口文档，使用 code 判断成功
        if (res.code === 200) {
          this.showBottomActions = false
          this.tempTime = ''
          this.originalTime = this.currentTime // 更新原始时间

          uni.showToast({
            title: '营业时间更新成功',
            icon: 'none'
          })
        } else {
          uni.showToast({
            title: res.msg || '提交失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.hideLoading()
        console.error('提交营业时间变更失败:', error)
        uni.showToast({
          title: '提交失败，请重试',
          icon: 'none'
        })
      }
    },

    // 验证时间合理性
    validateTime(startTime, endTime) {
      const start = new Date(`2000/01/01 ${startTime.hour}:${startTime.minute}`)
      const end = new Date(`2000/01/01 ${endTime.hour}:${endTime.minute}`)
      return end > start
    }
  }
}
</script>

<style lang="scss" scoped>
.service-time-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 40rpx 24rpx 24rpx 24rpx;
}

/* 接单状态开关行样式 (依据设计图定制) */
.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 20rpx;
  padding: 18rpx 24rpx;
  margin-bottom: 34rpx;
}

.setting-label {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
}

.custom-switch {
  width: 140rpx;
  height: 56rpx;
  border-radius: 28rpx;
  background-color: #D3D3D3;
  position: relative;
  display: flex;
  align-items: center;
  transition: background-color 0.3s;
  box-sizing: border-box;

  &.is-on {
    background-color: #FF4767;
  }

  .switch-text {
    font-size: 24rpx;
    color: #FFFFFF;
    position: absolute;
    transition: opacity 0.3s;
    font-weight: 500;
  }

  .text-on {
    left: 12rpx;
    opacity: 0;
  }

  .text-off {
    right: 12rpx;
    opacity: 1;
  }

  &.is-on .text-on {
    opacity: 1;
  }

  &.is-on .text-off {
    opacity: 0;
  }

  .switch-dot {
    width: 48rpx;
    height: 48rpx;
    background-color: #FFFFFF;
    border-radius: 50%;
    position: absolute;
    left: 4rpx;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
  }

  &.is-on .switch-dot {
    transform: translateX(84rpx);
  }
}

/* 展开折叠服务时间卡片样式 */
.service-time-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx 24rpx;
}

.service-time-card1 {
  width: 710rpx;
  height: 80rpx;
  background: #FFFFFF;
  border-radius: 20rpx;
}

.card-header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  transition: all 0.3s ease-in-out;
}

.arrow-icon {
  width: 16rpx;
  height: 9rpx;
  transition: transform 0.3s;
  transform: rotate(-360deg);
  /* 默认朝下 */
}

.arrow-icon.rotated {
  transform: rotate(180deg);
  /* 展开朝上 */
}

.time-blocks-container {
  margin-top: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.t-block {
  width: 280rpx;
  height: 150rpx;
  background: #F5F5F5;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.t-time {
  font-size: 42rpx;
  color: #333;
  font-weight: 500;
}

.t-label {
  font-size: 24rpx;
  color: #999;
  margin-top: 12rpx;
}

.t-separator {
  font-weight: 400;
  font-size: 28rpx;
  color: #999999;
  line-height: 40rpx;
}

.modify-btn-outline {
  margin-top: 50rpx;
  height: 78rpx;
  border-radius: 50rpx;
  border: 1rpx solid #FF4767;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FF4767;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.modify-btn-outline1 {
  margin-top: 50rpx;
  height: 78rpx;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}

.edit-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 12rpx;
}

/* ============ 提示弹窗样式 (完全一致) ============ */
.setup-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;

  .setup-modal-content {
    width: 630rpx;
    height: 775rpx;
    background: #FFFFFF;
    border-radius: 32rpx;
    position: relative;
    display: flex;
    flex-direction: column;

    .modal-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 630rpx;
      height: 265rpx;
      z-index: 0;
    }

    .modal-header {
      position: relative;
      z-index: 1;
      height: 150rpx;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 20rpx;

      text {
        font-size: 36rpx;
        font-weight: bold;
        color: #333333;
        letter-spacing: 2rpx;
      }
    }

    .modal-body {
      position: relative;
      z-index: 1;
      flex: 1;
      padding: 24rpx 40rpx;

      .modal-subtitle {
        font-size: 28rpx;
        color: #333333;
        margin-bottom: 40rpx;
        display: block;
      }

      .missing-list {
        display: flex;
        flex-direction: column;
        gap: 46rpx;

        .missing-item {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .item-left {
            display: flex;
            align-items: flex-start;

            .item-icon {
              width: 32rpx;
              height: 32rpx;
              margin-right: 16rpx;
              flex-shrink: 0;
              margin-top: 6rpx;
            }

            .item-texts {
              display: flex;
              flex-direction: column;

              .item-title {
                font-size: 30rpx;
                color: #333333;
                font-weight: 500;
                margin-bottom: 8rpx;

                &.blue-text {
                  color: #2b85e4;
                }
              }

              .item-desc {
                font-size: 24rpx;
                color: #999999;
              }
            }
          }

          .item-right {
            font-size: 26rpx;
            font-weight: 400;
            margin-top: -45rpx;

            &.orange {
              color: #FF7B00;
            }

            &.grey {
              color: #999999;
            }

            &.light-green {
              color: #18b566;
            }
          }
        }
      }
    }

    .modal-footer {
      position: relative;
      z-index: 1;
      padding: 0 50rpx 50rpx;

      .btn-know {
        width: 100%;
        height: 88rpx;
        background: #FF4767;
        border-radius: 44rpx;
        color: #FFFFFF;
        font-size: 32rpx;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

/* 五列选择器样式 */
.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;
  max-height: 70vh;
}

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

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

.cancel-text {
  font-size: 32rpx;
  color: #666666;
}

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

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

/* 营业时间选择器样式 */
.time-range {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32rpx;
  background: #F8F9FC;
  border-radius: 12rpx;
  margin-bottom: 20rpx;
}

.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-weight: 400;
  font-size: 26rpx;
  color: #999999;
  line-height: 37rpx;
  margin-top: 8rpx;
}

/* 修复样式冲突 - 使用不同的类名 */
.time-value-picker {
  font-size: 40rpx;
  color: #333333;
  font-weight: 500;
}

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

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

.region-body {
  height: 400rpx;
}

.picker-scroll {
  height: 400rpx;
}

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

/* 底部操作按钮样式 */
.bottom-actions {
  margin-top: 80rpx;
  background: transparent;
  padding: 0 45rpx;
}

.action-buttons {
  display: flex;
  gap: 50rpx;
}

.btn-cancel-large,
.btn-confirm-large {
  font-size: 34rpx;
  flex: 1;
  font-weight: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  width: 290rpx;
  height: 86rpx;
  background: linear-gradient(135deg, #FF4767, #FF6B8A);
  border-radius: 43rpx;
}

.btn-cancel-large {
  font-size: 34rpx;
  border: none !important;
  border-width: 0;
  background: #E5E5E5;
  border-radius: 43rpx;
  color: #333;

  // 彻底移除边框
  &::after {
    border: none;
    border-width: 0;
  }
}

.btn-confirm-large {
  background: linear-gradient(135deg, #FF4767, #FF6B8A);
  color: white;
}
</style>