511 lines
12 KiB
Vue
511 lines
12 KiB
Vue
<template>
|
||
<view class="time-popup">
|
||
<view class="popup-header">
|
||
<text class="popup-title">选择服务</text>
|
||
</view>
|
||
<view class="time-picker-content">
|
||
<!-- 日期选择 -->
|
||
<view class="time-picker-content__datas">
|
||
<view class="time-picker-content__datas__date__item" v-for="(date, index) in dateList" :key="index"
|
||
@click="selectDate(index)">
|
||
<text class="time-picker-content__datas__date__item__text"
|
||
:class="{ active: selectedDateIndex === index }">{{ date }}</text>
|
||
<image v-if="selectedDateIndex === index" src="/static/images/dataBox.png"
|
||
class="time-picker-content__datas__date__item__box" mode="aspectFit"></image>
|
||
</view>
|
||
</view>
|
||
<!-- 时间选择 -->
|
||
<scroll-view class="time-picker-content__time__list" scroll-y>
|
||
<view class="time-picker-content__time__list__item"
|
||
v-for="(time, index) in timeOptions[selectedDateIndex]" :key="index" :class="[
|
||
getItemClass(time.state),
|
||
{
|
||
isActive:
|
||
activeList.includes(index) &&
|
||
sureTimeDataIndex == selectedDateIndex,
|
||
},
|
||
]" @click="selectTime(time, index)">
|
||
<view class="time-picker-content__time__list__item__text">{{
|
||
time.show_time
|
||
}}</view>
|
||
<view class="time-picker-content__time__list__item__state">{{
|
||
time.stateName
|
||
}}</view>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- <view class="time-picker-content__time__sure">
|
||
<view class="time-picker-content__time__sure__box" @click="sureTime"
|
||
>确认</view
|
||
>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* sureTime 确认时间触发事件
|
||
* openTime 打开时间选择弹框
|
||
* closeTime 关闭时间选择弹框
|
||
* selectDate 选择日期
|
||
* selectTime 选择时间
|
||
* getItemClass 获取列表项的class
|
||
* handelGetTimeArr 获取时间段,
|
||
*/
|
||
import request from "@/utils/request";
|
||
export default {
|
||
data() {
|
||
return {
|
||
isFirstOPen: true,
|
||
sureTimeObj: {}, // 确认时间对象
|
||
dateList: ["今天", "明天", "后天"],
|
||
startTimeIndex: null, // 开始时间索引
|
||
endTimeIndex: null, //结束时间
|
||
activeList: [],
|
||
sureTimeDataIndex: 0, // 确认的时间索引
|
||
selectedDateIndex: 0, // 选中的日期索引
|
||
// 状态映射配置
|
||
stateConfig: {
|
||
1: {
|
||
class: "state-available",
|
||
text: "可约",
|
||
},
|
||
2: {
|
||
class: "state-full",
|
||
text: "约满",
|
||
},
|
||
3: {
|
||
class: "state-rest",
|
||
text: "休息",
|
||
},
|
||
4: {
|
||
class: "state-locked",
|
||
text: "锁定",
|
||
},
|
||
5: {
|
||
class: "state-unavailable",
|
||
text: "不可用",
|
||
},
|
||
},
|
||
};
|
||
},
|
||
props: {
|
||
// 时间选项数组
|
||
timeOptions: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
// 服务信息
|
||
service: {
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
url: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
identity: {
|
||
type: Number,
|
||
default: 0, //0为商家，1为手艺人
|
||
},
|
||
},
|
||
created() {
|
||
console.log("选择时间", this.service);
|
||
},
|
||
mounted() {},
|
||
methods: {
|
||
// 列表项的class获取方法
|
||
getItemClass(state) {
|
||
return this.stateConfig[state]?.class || "state-unknown";
|
||
},
|
||
// 选择日期
|
||
selectDate(index) {
|
||
this.selectedDateIndex = index;
|
||
},
|
||
// 生成两个数字之间的数组（包含边界值）
|
||
createRangeArray(start, end) {
|
||
// 确定步长，正数表示递增，负数表示递减
|
||
let step = start <= end ? 1 : -1;
|
||
let length = Math.abs(end - start) + 1;
|
||
|
||
// 创建数组并填充值
|
||
return Array.from({
|
||
length
|
||
}, (_, i) => start + i * step);
|
||
},
|
||
selectTime(time, index) {
|
||
let that = this;
|
||
//如果和记录日期不同重新记录
|
||
if (this.sureTimeDataIndex != this.selectedDateIndex) {
|
||
that.startTimeIndex = null;
|
||
that.endTimeIndex = null;
|
||
}
|
||
//
|
||
let startTimeIndex = this.startTimeIndex;
|
||
let endTimeIndex = this.endTimeIndex;
|
||
if (time.state === 1) {
|
||
// 可约状态
|
||
if(startTimeIndex == endTimeIndex && endTimeIndex == index){
|
||
this.startTimeIndex = null;
|
||
this.endTimeIndex = null;
|
||
this.storageStatus();
|
||
return;
|
||
}
|
||
if (startTimeIndex == null || startTimeIndex != endTimeIndex) {
|
||
this.startTimeIndex = index;
|
||
this.endTimeIndex = index;
|
||
this.storageStatus();
|
||
that.handelGetTimeArr();
|
||
uni.showToast({
|
||
title: `您已选择${this.timeOptions[this.selectedDateIndex][this.startTimeIndex].show_time}，烦请再选一个时间，完成「开始 / 结束」的时间段设置`,
|
||
icon: "none",
|
||
duration: 1000,
|
||
});
|
||
return;
|
||
} else {
|
||
// if (endTimeIndex == index) {
|
||
// this.endTimeIndex = startTimeIndex;
|
||
// this.storageStatus();
|
||
// that.handelGetTimeArr();
|
||
// return;
|
||
// } else if (startTimeIndex == index) {
|
||
// this.startTimeIndex = endTimeIndex;
|
||
// this.storageStatus();
|
||
// that.handelGetTimeArr();
|
||
// return;
|
||
// } else if (startTimeIndex > index) {
|
||
// startTimeIndex = index;
|
||
// } else if (endTimeIndex < index) {
|
||
// endTimeIndex = index;
|
||
// } else {
|
||
// let leftNum = index - startTimeIndex;
|
||
// let rightNum = endTimeIndex - index;
|
||
// //如果靠近开始时间
|
||
// if (leftNum < rightNum) {
|
||
// startTimeIndex = index;
|
||
// } else {
|
||
// endTimeIndex = index;
|
||
// }
|
||
// }
|
||
if (startTimeIndex > index) {
|
||
startTimeIndex = index;
|
||
} else{
|
||
endTimeIndex = index;
|
||
}
|
||
// let len = this.timeOptions[this.sureTimeDataIndex].length
|
||
if (endTimeIndex - startTimeIndex < 3) {
|
||
uni.showToast({
|
||
title: "预约时间最少需要30分钟，请调整您的结束时间选择～",
|
||
icon: "none",
|
||
duration: 1000,
|
||
});
|
||
return;
|
||
}
|
||
let found = this.timeOptions[this.selectedDateIndex].slice(startTimeIndex,endTimeIndex).findIndex(item=>item.state !=1)
|
||
console.log(22222,found,this.timeOptions[this.selectedDateIndex].slice(startTimeIndex,endTimeIndex))
|
||
if(found!=-1){
|
||
uni.showToast({
|
||
title: "您选择的时间段内部分时间不可用，请调整后重新选择～",
|
||
icon: "none",
|
||
duration: 1000,
|
||
});
|
||
return;
|
||
}
|
||
|
||
}
|
||
|
||
let parms;
|
||
if (this.identity == 0) {
|
||
parms = {
|
||
user_syr_id: this.service.user_syr.id,
|
||
reserve_time: this.timeOptions[this.selectedDateIndex][startTimeIndex]
|
||
.time,
|
||
end_time: this.timeOptions[this.selectedDateIndex][endTimeIndex].time,
|
||
};
|
||
} else if (this.identity == 1) {
|
||
parms = {
|
||
work_seat_id: this.service.work_seat.id,
|
||
user_sj_id: this.service.user_sj.id,
|
||
reserve_time: this.timeOptions[this.selectedDateIndex][startTimeIndex]
|
||
.time,
|
||
end_time: this.timeOptions[this.selectedDateIndex][endTimeIndex].time,
|
||
};
|
||
}
|
||
|
||
if (this.url) {
|
||
request
|
||
.post(this.url, parms)
|
||
.then(async (res) => {
|
||
if (res.code == 200) {
|
||
that.startTimeIndex = startTimeIndex;
|
||
that.endTimeIndex = endTimeIndex;
|
||
this.storageStatus();
|
||
that.handelGetTimeArr();
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: "none",
|
||
duration: 1000,
|
||
});
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
uni.showToast({
|
||
title: '网络繁忙，稍后再试',
|
||
icon: "none",
|
||
duration: 1000,
|
||
});
|
||
console.log("报错", err);
|
||
});
|
||
} else {
|
||
that.startTimeIndex = startTimeIndex;
|
||
that.endTimeIndex = endTimeIndex;
|
||
this.storageStatus();
|
||
that.handelGetTimeArr();
|
||
}
|
||
}
|
||
},
|
||
//存储状态
|
||
storageStatus() {
|
||
this.sureTimeDataIndex = this.selectedDateIndex;
|
||
if(this.startTimeIndex==null){
|
||
this.activeList = []
|
||
return
|
||
}
|
||
this.activeList = this.createRangeArray(
|
||
this.startTimeIndex,
|
||
this.endTimeIndex
|
||
);
|
||
},
|
||
handelGetTimeArr() {
|
||
//获取时间段
|
||
let startTime =
|
||
this.timeOptions[this.selectedDateIndex][
|
||
this.startTimeIndex
|
||
].time.split(" ");
|
||
let data = {
|
||
reserve_start_time: this.timeOptions[this.selectedDateIndex][this.startTimeIndex].time,
|
||
reserve_end_time: this.timeOptions[this.selectedDateIndex][this.endTimeIndex].time,
|
||
startTime: this.timeOptions[this.selectedDateIndex][this.startTimeIndex]
|
||
.show_time,
|
||
endTime: this.timeOptions[this.selectedDateIndex][this.endTimeIndex].show_time,
|
||
date: startTime[0],
|
||
num: this.activeList.length - 1,
|
||
};
|
||
this.$emit("changeTime", data);
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
/* 时间选择弹框 */
|
||
.time-popup {
|
||
background-color: #ffffff;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
overflow: hidden;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
transform: translateY(0);
|
||
transition: transform 0.3s;
|
||
z-index: 999;
|
||
}
|
||
|
||
.popup-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 30rpx 30rpx 36rpx 30rpx;
|
||
|
||
.popup-close {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #999999;
|
||
line-height: 37rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
|
||
.popup-title {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
line-height: 42rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
|
||
.time-picker-content {
|
||
padding: 0rpx 30rpx 30rpx 30rpx;
|
||
|
||
&__datas {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
&__date__item {
|
||
width: 214rpx;
|
||
height: 67rpx;
|
||
background: #f7f8fa;
|
||
border-radius: 10rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
&__text {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #333333;
|
||
line-height: 37rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
position: relative;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
&__text.active {
|
||
color: #ffffff;
|
||
background: transparent;
|
||
background-position: bottom;
|
||
}
|
||
|
||
&__box {
|
||
width: 214rpx;
|
||
height: 74rpx;
|
||
position: absolute;
|
||
z-index: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
&__time__list {
|
||
flex: 1;
|
||
height: 400rpx;
|
||
margin-top: 30rpx;
|
||
|
||
::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
::v-deep .uni-scroll-view-content {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
-webkit-column-gap: 21rpx;
|
||
column-gap: 21rpx;
|
||
row-gap: 30rpx;
|
||
max-height: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
&__item {
|
||
box-sizing: border-box;
|
||
width: 156rpx;
|
||
height: 90rpx;
|
||
background: #f7f8fa;
|
||
border-radius: 10rpx;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 26rpx;
|
||
color: #3c3638;
|
||
line-height: 37rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.__text {}
|
||
|
||
.__state {}
|
||
}
|
||
|
||
.state-available {
|
||
color: #3c3638;
|
||
background: #f7f8fa;
|
||
/* 可约 */
|
||
}
|
||
|
||
.state-full {
|
||
color: #3c3638;
|
||
background: #e4e9f0;
|
||
/* 约满 */
|
||
}
|
||
|
||
.state-rest {
|
||
color: #cdcdcd;
|
||
background: #f7f8f9;
|
||
/* 休息 */
|
||
}
|
||
|
||
.state-locked {
|
||
color: #3c3638;
|
||
background: #e4e9f0;
|
||
/* 锁定 */
|
||
}
|
||
|
||
.state-unavailable {
|
||
color: #ffffff;
|
||
background: #e4e9f0;
|
||
/* 不可用 */
|
||
}
|
||
|
||
.state-unknown {
|
||
/* 未知状态 */
|
||
}
|
||
|
||
.isActive {
|
||
background: rgba(252, 67, 124, 0.08);
|
||
border-radius: 10rpx;
|
||
border: 1rpx solid #E8101E;
|
||
color: #E8101E;
|
||
/* 选中状态 */
|
||
}
|
||
|
||
&__item.active {
|
||
background-color: #fff0f0;
|
||
color: #ff3e3e;
|
||
font-weight: 500;
|
||
}
|
||
|
||
&__item.noselected {
|
||
/* background-color: #FFF0F0; */
|
||
color: #999999;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
|
||
&__time__sure {
|
||
padding: 39rpx 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
&__box {
|
||
width: 648rpx;
|
||
height: 94rpx;
|
||
background: linear-gradient(140deg, #fa4e9a 0%, #E8101E 100%);
|
||
border-radius: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 30rpx;
|
||
color: #ffffff;
|
||
line-height: 42rpx;
|
||
text-align: left;
|
||
font-style: normal;
|
||
}
|
||
}
|
||
}
|
||
</style> |