1072 lines
28 KiB
Vue
1072 lines
28 KiB
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;
|
|
if (!this.userInfo.business_time && res.data.business_time) {
|
|
this.currentTime = res.data.business_time;
|
|
this.originalTime = res.data.business_time;
|
|
this.parseTimeString(res.data.business_time);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
// 弹窗路由：关闭弹窗
|
|
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.canOpenStore) {
|
|
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) {
|
|
const savedTime = this.currentTime;
|
|
this.showBottomActions = false
|
|
this.tempTime = ''
|
|
this.originalTime = savedTime // 更新原始时间
|
|
this.userInfo = {
|
|
...(this.userInfo || {}),
|
|
business_time: savedTime
|
|
}
|
|
if (this.authDetails) {
|
|
this.authDetails = {
|
|
...this.authDetails,
|
|
business_time: savedTime
|
|
}
|
|
}
|
|
this.parseTimeString(savedTime)
|
|
|
|
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>
|