|
|
@@ -0,0 +1,331 @@
|
|
|
+<!-- pages/setOrderTime/setOrderTime.uvue -->
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <!-- 顶部占位 (模拟安全区或导航栏高度,可根据实际调整) -->
|
|
|
+ <view class="top-safe-area">
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 头部:全部可接单 -->
|
|
|
+ <view class="header-box">
|
|
|
+ <text class="header-text">
|
|
|
+ {{ allIndex == 2 ? '取消全选' : '全部可接单' }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 滚动列表区域 -->
|
|
|
+ <!-- uni-app x 中 scroll-view 需要明确高度或使用 flex 填充 -->
|
|
|
+ <!-- <scroll-view scroll-y="true" class="time-list">
|
|
|
+ <view class="time-grid">
|
|
|
+ <view v-for="item in timeArr" :key="item.start_time"
|
|
|
+ :class="item.isSelect ? 'time-card selected' : 'time-card normal'" @click.stop="chooseTime(item)">
|
|
|
+ <text
|
|
|
+ :class="item.isSelect ? 'time-text selected' : 'time-text normal'">{{ item.start_time }}</text>
|
|
|
+ <text :class="item.isSelect ? 'time-sub selected' : 'time-sub normal'">
|
|
|
+ {{ item.isSelect ? '可接单' : '休息' }}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view> -->
|
|
|
+
|
|
|
+ <!-- 底部保存按钮 -->
|
|
|
+ <view class="footer-box">
|
|
|
+ <text class="footer-text">
|
|
|
+ 保存设置
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import { ref } from 'vue';
|
|
|
+ // uni-app x 中 API 调用方式不变
|
|
|
+ import workbenchesInfoApi from '@/src/utils/api/workbenches.uts'
|
|
|
+
|
|
|
+ // import workbenchesInfoApi from '../../utils/api/workbenches'
|
|
|
+
|
|
|
+ // 状态定义
|
|
|
+ const allIndex = ref<1 | 2>(1); // 1: 普通模式, 2: 全选模式
|
|
|
+ // // 状态定义
|
|
|
+ // const allIndex = ref(1); // 1: 普通模式, 2: 全选模式
|
|
|
+ // const bottomHeight = ref('0px');
|
|
|
+
|
|
|
+ // // 初始化时间数组 (00:00 - 23:30, 每30分钟一个片段)
|
|
|
+ // const timeArr = ref(
|
|
|
+ // Array.from({ length: 48 }, (_, i) => {
|
|
|
+ // const startHour = Math.floor(i / 2);
|
|
|
+ // const startMin = i % 2 === 0 ? '00' : '30';
|
|
|
+
|
|
|
+ // let endHour = Math.floor((i + 1) / 2);
|
|
|
+ // let endMin = (i + 1) % 2 === 0 ? '00' : '30';
|
|
|
+
|
|
|
+ // // 处理跨天情况 (23:30 -> 24:00)
|
|
|
+ // if (endHour >= 24) {
|
|
|
+ // endHour = 24;
|
|
|
+ // endMin = '00';
|
|
|
+ // }
|
|
|
+
|
|
|
+ // return {
|
|
|
+ // start_time: `${startHour < 10 ? '0' : ''}${startHour}:${startMin}`,
|
|
|
+ // end_time: `${endHour < 10 ? '0' : ''}${endHour}:${endMin}`,
|
|
|
+ // isSelect: false
|
|
|
+ // };
|
|
|
+ // })
|
|
|
+ // );
|
|
|
+
|
|
|
+ // onShow(() => {
|
|
|
+ // allIndex.value = 1;
|
|
|
+ // // getCoachTime();
|
|
|
+ // // adjustSafeArea();
|
|
|
+ // });
|
|
|
+
|
|
|
+ // // 获取底部安全区域 (适配全面屏)
|
|
|
+ // const adjustSafeArea = () => {
|
|
|
+ // try {
|
|
|
+ // const systemInfo = uni.getSystemInfoSync();
|
|
|
+ // // uni-app x 中通常直接获取 safeArea 或 statusBarHeight
|
|
|
+ // // 这里简单估算底部留白,实际项目中建议用 CSS env(safe-area-inset-bottom)
|
|
|
+ // const safeBottom = systemInfo.safeArea != null ? systemInfo.safeArea.bottom : systemInfo.screenHeight;
|
|
|
+ // const navHeight = systemInfo.statusBarHeight != null ? systemInfo.statusBarHeight : 0;
|
|
|
+
|
|
|
+ // // 简单处理:给底部按钮留出空间,具体数值根据设计稿调整
|
|
|
+ // // 在 CSS 中使用 padding-bottom 更灵活,这里仅做逻辑参考
|
|
|
+ // } catch (e) {
|
|
|
+ // console.log('获取系统信息失败', e);
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+ // // 获取技师时间设置
|
|
|
+ // const getCoachTime = async () => {
|
|
|
+ // // 重置状态
|
|
|
+ // timeArr.value.forEach(item => item.isSelect = false);
|
|
|
+ // allIndex.value = 1;
|
|
|
+
|
|
|
+ // try {
|
|
|
+ // const res = await workbenchesInfoApi.getWorkTimeSetting();
|
|
|
+ // const timeRanges = res.data?.time_ranges || [];
|
|
|
+
|
|
|
+ // // 判断是否全部可接单
|
|
|
+ // if (timeRanges.length === 1 && timeRanges[0].start_time === '00:00' && timeRanges[0].end_time === '24:00') {
|
|
|
+ // allTime();
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // // 匹配时间段
|
|
|
+ // timeArr.value.forEach(item => {
|
|
|
+ // const itemTime = item.start_time;
|
|
|
+ // for (const range of timeRanges) {
|
|
|
+ // // 比较逻辑:start <= item < end
|
|
|
+ // if (compareTime(itemTime, range.start_time) >= 0 &&
|
|
|
+ // compareTime(itemTime, range.end_time) < 0
|
|
|
+ // ) {
|
|
|
+ // item.isSelect = true;
|
|
|
+ // break;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // } catch (error) {
|
|
|
+ // console.error('获取时间设置失败', error);
|
|
|
+ // uni.showToast({ title: '加载失败', icon: 'none' });
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+ // 时间比较工具函数
|
|
|
+ // function compareTime(t1, t2) {
|
|
|
+ // if (!t1 || !t2) return 0;
|
|
|
+ // const [h1, m1] = t1.split(':').map(Number);
|
|
|
+ // const [h2, m2] = t2.split(':').map(Number);
|
|
|
+
|
|
|
+ // if (h1 !== h2) return h1 > h2 ? 1 : -1;
|
|
|
+ // if (m1 !== m2) return m1 > m2 ? 1 : -1;
|
|
|
+ // return 0;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // 点击单个时间
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // // 全部可接单/取消全选
|
|
|
+ // const allTime = () => {
|
|
|
+ // if (allIndex.value === 2) {
|
|
|
+ // // 当前是全选状态,点击则取消全选
|
|
|
+ // timeArr.value.forEach(item => item.isSelect = false);
|
|
|
+ // allIndex.value = 1;
|
|
|
+ // } else {
|
|
|
+ // // 当前是普通状态,点击则全选
|
|
|
+ // timeArr.value.forEach(item => item.isSelect = true);
|
|
|
+ // allIndex.value = 2;
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+
|
|
|
+ // // 保存设置
|
|
|
+ // const handleSave = async () => {
|
|
|
+ // const selectedTimes = timeArr.value.filter(item => item.isSelect);
|
|
|
+
|
|
|
+ // if (selectedTimes.length === 0) {
|
|
|
+ // uni.showToast({ title: '请至少选择一个可接单时间段', icon: 'none' });
|
|
|
+ // return;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // const scheduleData = {
|
|
|
+ // time_ranges: selectedTimes.map(range => ({
|
|
|
+ // start_time: range.start_time,
|
|
|
+ // end_time: range.end_time
|
|
|
+ // }))
|
|
|
+ // };
|
|
|
+
|
|
|
+ // try {
|
|
|
+ // await workbenchesInfoApi.editWorkTimeSetting(scheduleData);
|
|
|
+ // uni.showToast({ title: '保存成功', icon: 'success' });
|
|
|
+
|
|
|
+ // setTimeout(() => {
|
|
|
+ // // 确保路径正确,建议使用绝对路径
|
|
|
+ // uni.reLaunch({
|
|
|
+ // url: '/pages/masterProject/homePage/index'
|
|
|
+ // });
|
|
|
+ // }, 1500);
|
|
|
+ // } catch (error) {
|
|
|
+ // console.error('保存失败', error);
|
|
|
+ // uni.showToast({ title: '保存失败,请重试', icon: 'none' });
|
|
|
+ // }
|
|
|
+ // };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ /* 根容器:使用 Flex 布局填满屏幕 */
|
|
|
+ .container {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ /* 或 100% */
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
+ /* 适配全面屏底部 */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 顶部占位 */
|
|
|
+ .top-safe-area {
|
|
|
+ width: 100%;
|
|
|
+ height: 20rpx;
|
|
|
+ /* 根据需要调整 */
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 头部盒子 */
|
|
|
+ .header-box {
|
|
|
+ width: 184rpx;
|
|
|
+ height: 66rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ background-color: #FFDA59;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 20rpx 0 20rpx 32rpx;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ .header-text {
|
|
|
+ color: #3D444E;
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: 3rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 滚动列表区域:flex: 1 占据剩余空间 */
|
|
|
+ .time-list {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ /* overflow-y: auto; scroll-view 组件自带滚动 */
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 网格布局容器 */
|
|
|
+ .time-grid {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 3% 140rpx 3%;
|
|
|
+ /* 底部 padding 防止被按钮遮挡 */
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: flex-start;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 时间卡片通用样式 */
|
|
|
+ .time-card {
|
|
|
+ width: 158rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin-right: 22rpx;
|
|
|
+ margin-bottom: 22rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-width: 2rpx;
|
|
|
+ border-style: solid;
|
|
|
+
|
|
|
+ /* 选中状态 */
|
|
|
+ &.selected {
|
|
|
+ background-color: #FFFBEF;
|
|
|
+ border-color: #FFDB5F;
|
|
|
+
|
|
|
+ .time-text,
|
|
|
+ .time-sub {
|
|
|
+ color: #3A3330;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 未选中状态 */
|
|
|
+ &.normal {
|
|
|
+ background-color: #F3F3F3;
|
|
|
+ border-color: transparent;
|
|
|
+
|
|
|
+ .time-text,
|
|
|
+ .time-sub {
|
|
|
+ color: #9B9B9B;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 时间文字 */
|
|
|
+ .time-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-bottom: 4rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 状态文字 */
|
|
|
+ .time-sub {
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 400;
|
|
|
+ letter-spacing: 2rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 底部保存按钮 */
|
|
|
+ .footer-box {
|
|
|
+ position: absolute;
|
|
|
+ /* 或者使用 fixed,但在 flex 容器中 absolute + bottom 更可控 */
|
|
|
+ bottom: 40rpx;
|
|
|
+ /* 距离底部距离 */
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 78%;
|
|
|
+ height: 100rpx;
|
|
|
+ background-color: #FFDA59;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
|
|
+
|
|
|
+ .footer-text {
|
|
|
+ color: #3A3330;
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ letter-spacing: 3rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|