419 lines
8.9 KiB
Vue
419 lines
8.9 KiB
Vue
|
<template>
|
|||
|
|
<view class="unavailable-time-page">
|
|||
|
|
<!-- 顶部导航栏 -->
|
|||
|
|
<custom-navbar
|
|||
|
|
title="不可服务时间"
|
|||
|
|
:show-back="true"
|
|||
|
|
></custom-navbar>
|
|||
|
|
|
|||
|
|
<!-- 内容区域 -->
|
|||
|
|
<view class="content">
|
|||
|
|
<!-- 已添加的时间段列表 -->
|
|||
|
|
<view class="time-list">
|
|||
|
|
<view
|
|||
|
|
v-for="(item, index) in timeSlots"
|
|||
|
|
:key="item.id"
|
|||
|
|
class="time-item"
|
|||
|
|
>
|
|||
|
|
<view class="time-info">
|
|||
|
|
<text class="date">{{item.date}}</text>
|
|||
|
|
<text class="time">{{item.time_start}}-{{item.time_end}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="action-btns">
|
|||
|
|
<text class="delete-btn" @click="deleteTimeSlot(item.id)">删除</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 添加新时间段按钮 -->
|
|||
|
|
<view class="add-btn"
|
|||
|
|
@click="showTimePicker">
|
|||
|
|
<text class="add-icon">+</text>
|
|||
|
|
<text class="add-text">添加不可服务时间</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 时间选择弹窗 -->
|
|||
|
|
<view class="popup"
|
|||
|
|
v-if="showTimePickerFlag"
|
|||
|
|
:class="{ show: showTimePickerFlag }">
|
|||
|
|
<view class="popup-mask" @click="closeTimePicker"></view>
|
|||
|
|
<view class="time-picker">
|
|||
|
|
<view class="picker-header">
|
|||
|
|
<text class="cancel-btn" @click="closeTimePicker">取消</text>
|
|||
|
|
<text class="title">选择时间</text>
|
|||
|
|
<text class="confirm-btn" @click="confirmTime">确定</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="picker-content">
|
|||
|
|
<!-- 日期选择 -->
|
|||
|
|
<view class="date-picker">
|
|||
|
|
<text class="label">日期</text>
|
|||
|
|
<picker
|
|||
|
|
mode="date"
|
|||
|
|
:value="currentDate"
|
|||
|
|
:start="minDate"
|
|||
|
|
@change="handleDateChange"
|
|||
|
|
>
|
|||
|
|
<view class="picker-value">{{currentDate}}</view>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 开始时间选择 -->
|
|||
|
|
<view class="time-picker-item">
|
|||
|
|
<text class="label">开始时间</text>
|
|||
|
|
<picker
|
|||
|
|
mode="time"
|
|||
|
|
:value="startTime"
|
|||
|
|
@change="handleStartTimeChange"
|
|||
|
|
>
|
|||
|
|
<view class="picker-value">{{startTime}}</view>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 结束时间选择 -->
|
|||
|
|
<view class="time-picker-item">
|
|||
|
|
<text class="label">结束时间</text>
|
|||
|
|
<picker
|
|||
|
|
mode="time"
|
|||
|
|
:value="endTime"
|
|||
|
|
:start="minTime"
|
|||
|
|
@change="handleEndTimeChange"
|
|||
|
|
>
|
|||
|
|
<view class="picker-value">{{endTime}}</view>
|
|||
|
|
</picker>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import request from '../../utils/request'
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
timeSlots: [], // 已添加的时间段列表
|
|||
|
|
currentDate: '', // 当前选择的日期
|
|||
|
|
startTime: '08:00', // 开始时间
|
|||
|
|
endTime: '18:00', // 结束时间
|
|||
|
|
minDate: '09:00', // 最小可选日期（今天）
|
|||
|
|
// maxDate: '', // 最大可选日期（3个月后）
|
|||
|
|
minTime: '', // 最小可选时间
|
|||
|
|
editingIndex: -1 ,// 正在编辑的时间段索引
|
|||
|
|
showTimePickerFlag: false,
|
|||
|
|
id: null,
|
|||
|
|
account: ''
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
created() {
|
|||
|
|
// 初始化日期范围
|
|||
|
|
const today = new Date()
|
|||
|
|
this.currentDate = this.formatDate(today)
|
|||
|
|
this.minDate = this.formatDate(today)
|
|||
|
|
// const threeMonthsLater = new Date()
|
|||
|
|
// threeMonthsLater.setMonth(today.getMonth() + 3)
|
|||
|
|
// this.maxDate = this.formatDate(threeMonthsLater)
|
|||
|
|
this.getUserInfo();
|
|||
|
|
this.getOffserverlist();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
methods: {
|
|||
|
|
getUserInfo() {
|
|||
|
|
request.post('/user/getuser',{type: 2}).then(result=>{
|
|||
|
|
this.account = result.data.account;
|
|||
|
|
this.id = result.data.id;
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getOffserverlist() {
|
|||
|
|
request.post('/user/offserverlist').then(res=>{
|
|||
|
|
if(res.state == 1) {
|
|||
|
|
this.timeSlots = res.data;
|
|||
|
|
}else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// 显示时间选择器
|
|||
|
|
showTimePicker() {
|
|||
|
|
// console.log(1111)
|
|||
|
|
//this.editingIndex = -1;
|
|||
|
|
this.showTimePickerFlag = true;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 关闭时间选择器
|
|||
|
|
closeTimePicker() {
|
|||
|
|
this.showTimePickerFlag = false;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 确认选择的时间
|
|||
|
|
confirmTime() {
|
|||
|
|
if (this.validateTime()) {
|
|||
|
|
const data = {
|
|||
|
|
date: this.currentDate,
|
|||
|
|
time_start: `${this.currentDate} ${this.startTime}:00`,
|
|||
|
|
time_end: `${this.currentDate} ${this.endTime}:00`,
|
|||
|
|
user_syr_id: this.id,
|
|||
|
|
phone: this.account
|
|||
|
|
}
|
|||
|
|
// 添加新时间段
|
|||
|
|
request.post('/user/addrelaxtime',data).then(res=>{
|
|||
|
|
if(res.state == 1) {
|
|||
|
|
this.getOffserverlist()
|
|||
|
|
this.closeTimePicker()
|
|||
|
|
}
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 删除时间段
|
|||
|
|
deleteTimeSlot(id) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '提示',
|
|||
|
|
content: '确定要删除这个时间段吗？',
|
|||
|
|
success: (res) => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
request.post('/user/delrelaxtime',{id}).then(res=>{
|
|||
|
|
if(res.state == 1) {
|
|||
|
|
this.getOffserverlist()
|
|||
|
|
}
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg,
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 处理日期变化
|
|||
|
|
handleDateChange(e) {
|
|||
|
|
this.currentDate = e.detail.value
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 处理开始时间变化
|
|||
|
|
handleStartTimeChange(e) {
|
|||
|
|
this.startTime = e.detail.value;
|
|||
|
|
var timeStrs = this.startTime.split(":");
|
|||
|
|
var hour = parseInt(timeStrs[0]) + 1;
|
|||
|
|
this.minTime = hour + ':00';
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 处理结束时间变化
|
|||
|
|
handleEndTimeChange(e) {
|
|||
|
|
this.endTime = e.detail.value
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 验证时间选择是否有效
|
|||
|
|
validateTime() {
|
|||
|
|
const start = new Date(`${this.currentDate} ${this.startTime}`)
|
|||
|
|
const end = new Date(`${this.currentDate} ${this.endTime}`)
|
|||
|
|
|
|||
|
|
if (end <= start) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '结束时间必须晚于开始时间',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return true
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 格式化日期为 YYYY-MM-DD
|
|||
|
|
formatDate(date) {
|
|||
|
|
const year = date.getFullYear()
|
|||
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|||
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|||
|
|
return `${year}-${month}-${day}`
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.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);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content {
|
|||
|
|
padding: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-list {
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-info {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.date {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
margin-bottom: 8rpx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.action-btns {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.delete-btn {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
padding: 8rpx 16rpx;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.delete-btn {
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-btn {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
height: 88rpx;
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
border-radius: 12rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-icon {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #E8101E;
|
|||
|
|
margin-right: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.add-text {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.time-picker {
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
border-radius: 24rpx 24rpx 0 0;
|
|||
|
|
transform: translateY(100%);
|
|||
|
|
transition: transform 0.3s ease;
|
|||
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.popup.show .time-picker {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.picker-header {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 24rpx;
|
|||
|
|
border-bottom: 1rpx solid #F0F0F0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cancel-btn,
|
|||
|
|
.confirm-btn {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
padding: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cancel-btn {
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.confirm-btn {
|
|||
|
|
color: #E8101E;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.title {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.picker-content {
|
|||
|
|
padding: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.date-picker,
|
|||
|
|
.time-picker-item {
|
|||
|
|
margin-bottom: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.picker-value {
|
|||
|
|
height: 80rpx;
|
|||
|
|
line-height: 80rpx;
|
|||
|
|
background-color: #F5F5F5;
|
|||
|
|
border-radius: 8rpx;
|
|||
|
|
padding: 0 24rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* APP适配 */
|
|||
|
|
/* #ifdef APP-PLUS */
|
|||
|
|
.time-picker {
|
|||
|
|
padding-bottom: 0;
|
|||
|
|
}
|
|||
|
|
/* #endif */
|
|||
|
|
|
|||
|
|
/* 小程序适配 */
|
|||
|
|
/* #ifdef MP-WEIXIN */
|
|||
|
|
.time-picker {
|
|||
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|||
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|||
|
|
}
|
|||
|
|
/* #endif */
|
|||
|
|
</style>
|