LocalLivingServicesUniapp/pages/store/addHours.vue

<template>
    <view>
        <cu-custom bgColor="bg-fff" :isBack="true">
            <block slot="content">添加营业时间</block>
        </cu-custom>
        <view class="tab-top bg-fff">
            <view class="title ">营业日</view>
            <view style="padding-bottom:20upx;border-bottom: 1px solid #EEEEEE;overflow: hidden;">
                <view v-for="(tag, index) in tags" :key="index" class="tag-type" :class="{
                    'disable-background': isDisable(tag),
                    'selected-background': isSelected(tag)
                }" :style="tag == '周四' || tag == '整周' ? 'margin-right:0' : ''" @click="toggleSelection(tag)">
                    {{ tag }}
                </view>
            </view>
						<view class="" style="display: flex;justify-content: space-between;align-items: center;">
							 <view style="padding-top:18upx">营业时段</view>
							 <view @click="add()" class="add-style">添加</view>
						</view>
           
						
            <view class="cu-form-group" style="border-bottom: 1upx solid #eee;margin:0" v-if="timeType.length > 0">
                <input v-model="time" name="input"></input>
            </view>
            <view style="border-bottom: 1upx solid #eee;margin:0" v-for="(tim, timInd) in timeArr" :key="timInd" v-else>
                <view class="cu-form-group" style="margin:0" v-if="timInd == 0 && timeArr.length < 3">
                    <input placeholder="添加营业时段（1/3）" v-model="tim.value" name="input" @click="open(timInd)" disabled="true"></input>
                    <text class='cuIcon-right' style="color: #C7C6CA ;" @click="open(timInd)"></text>
                </view>
                <view v-else>
                    <uni-swipe-action>
                        <uni-swipe-action-item :right-options="options2" :show="timInd.show" :auto-close="false">
                            <view class="cu-form-group" style="margin:0">
                                <input :placeholder='"添加营业时段（" + (timInd + 1) + "/3）"' v-model="tim.value" name="input" disabled="true"
                                    @click="open(timInd)"></input>
                                <text class='cuIcon-right' style="color: #C7C6CA ;" @click="open(timInd)"></text>
                            </view>
                            <template v-slot:right>
                                <view>
                                    <view @click="bindClick" class="add-style" style="background: #FF6067;">删除</view>
                                </view>
                            </template>
                        </uni-swipe-action-item>
                    </uni-swipe-action>
                </view>
            </view>
            <view class="flex align-center justify-between date24">
                <view>24小时营业</view>
                <uni-data-checkbox multiple :localdata="sex" v-model="timeType"
                    active-color="#FF852D "></uni-data-checkbox>
            </view>
        </view>
        <rangTime ref="rangTime" :mode="mode" @onSubmit="onEndTimeChange" />
        <view class="padding flex flex-direction sub-bottom">
            <button class="cu-btn bg-blue round " @click="sumbit">提交</button>
        </view>
    </view>
</template>
<script>
import rangTime from '../../components/dengrq-datetime-picker/dateSelector/index.vue'
import { USER_INFO } from "@/common/util/constants"
export default {
    components: {
        rangTime
    },
    data() {
        return {
            time: '00:00-24:00',
            options2: [{
                text: '删除',
                style: {
                    backgroundColor: '#FF6067',
                    fontSize: '28upx',
                }
            },
            ],
            timeArr: [{
                value: '',
                show: false,
            }],
            timeType: [],
            sex: [{
                text: '',
                value: 1
            }],
            mode: 6,
            corporateName: '',
            tags: ['周一', '周二', '周三', '周四', '周五', '周六', '周日', '整周'], // 标签数组
            selectedIndices: [], // 用于存储被选中的标签索引
            disableIndices: [], // 用于存储被禁用的标签索引
            timeIndex: '',
            merchantId: '',
            arrData:[],//传参进来的数组
        }
    },
    async onLoad(data) {
        this.merchantId = uni.getStorageSync(USER_INFO).merchantId;
        if (data.params) {
            let obj = JSON.parse(decodeURIComponent(data.params));
            this.arrData=obj
            if ( obj.arr.length>0) {
                this.otherProhibitions(obj.arr,obj.index)
                obj.arr.forEach((val, index1) => {
                    if (index1 == obj.index) {
                        this.selectedIndices = val.period ? val.period.split('、').filter(id => id !== '') : []
                    }
                    this.timeType = val.timeType == '1' ? [1] : []
                    if (val.middleTime) {
                        this.timeArr = [
                            {
                                value: val.middleTime,
                                show: false,
                            }
                        ]
                    }
                    if (val.beginTime) {
                        this.timeArr = [
                            {
                                value: val.middleTime,
                                show: false,
                            },
                            {
                                value: val.beginTime,
                                show: false,
                            }
                        ]
                    }
                    if (val.endTime) {
                        this.timeArr = [
                            {
                                value: val.middleTime,
                                show: false,
                            },
                            {
                                value: val.beginTime,
                                show: false,
                            },
                            {
                                value: val.endTime,
                                show: false,
                            }
                        ]
                    }
                })
            }
           
        }

    },
    methods: {
        open(index) {
            this.timeIndex = index
            this.$refs.rangTime.open()
        },
        // 选择整周其他所有禁用
        otherProhibitions(arr,index){
            if(arr.length==2){
                let adjacentObj=arr.find((_, i) => i !== index)
                this.disableIndices = adjacentObj.period? adjacentObj.period.split('、').filter(id => id !== ''):
                adjacentObj.period==['整周']?this.tags: []
            }
            else if(arr.length==1){

                this.disableIndices =  arr[0].period=='整周'? 
                this.tags:arr[0].period?
                arr[0].period.split('、').filter(id => id !== '')
                : []
            console.log(this.disableIndices,22222222);

            }
            else{
                this.disableIndices=[]
            }
            
        },
        bindClick(e) {
            this.timeArr.splice(this.timeIndex, 1);
        },
        // 检查一个标签是否被选中
        isSelected(index) {
            return this.selectedIndices.includes(index);
        },
        // 检查一个标签是否被禁用
        isDisable(index) {
            return this.disableIndices.includes(index);
        },
        // 切换标签的选中状态
        toggleSelection(index) {
            
            const indexIndex = this.selectedIndices.indexOf(index);
            console.log(indexIndex,89999);

            if (indexIndex > -1) {
                if (index == '整周') {
                    if(this.arrData.arr.length==1 && this.arrData.arr[0].period=='整周'){
                        this.disableIndices=[];
                    }
                    else{
                        this.otherProhibitions(this.arrData.arr,this.arrData.index)
                    }
                }
                // 如果标签已经被选中，则移除它
                this.selectedIndices.splice(indexIndex, 1);
            } else {
                if (!this.disableIndices.includes(index)) {
                    if (index == '整周') {
                        this.selectedIndices = []
                        this.disableIndices.push('周一', '周二', '周三', '周四', '周五', '周六', '周日');
                    }
                    // 如果标签没有被选中，则添加它
                    this.selectedIndices.push(index);
                }

            }
        },
        add() {
					if( this.timeArr.length<3){
						this.timeArr.push({
						    value: '',
						    show: false,
						})
					}
           
        },
        onEndTimeChange(val) {
            const newValue = val.startDate + '-' + val.endDate
            
            // 校验时间段是否重叠
            if (this.checkTimeOverlap(newValue)) {
                this.$tip.toast('时间段不能重叠，请重新选择')
                return
            }
            
            this.timeArr[this.timeIndex].value = newValue
            this.$refs.rangTime.startDate = ''
            this.$refs.rangTime.endDate = ''
        },
        // 校验时间段是否重叠
        checkTimeOverlap(newTime) {
            const [newStart, newEnd] = this.parseTimeRange(newTime)
            
            for (let i = 0; i < this.timeArr.length; i++) {
                // 跳过当前正在编辑的时间段
                if (i === this.timeIndex) continue
                
                const existingTime = this.timeArr[i].value
                if (!existingTime) continue
                
                const [existStart, existEnd] = this.parseTimeRange(existingTime)
                
                // 判断时间段是否重叠：新开始时间 < 已存在结束时间 且 已存在开始时间 < 新结束时间
                if (newStart < existEnd && existStart < newEnd) {
                    return true
                }
            }
            return false
        },
        // 解析时间段字符串为分钟数
        parseTimeRange(timeRange) {
            const [start, end] = timeRange.split('-')
            return [
                this.timeToMinutes(start),
                this.timeToMinutes(end)
            ]
        },
        // 将时间字符串转换为分钟数（如 "08:30" -> 510）
        timeToMinutes(timeStr) {
            const [hours, minutes] = timeStr.split(':').map(Number)
            return hours * 60 + minutes
        },
        sumbit() {
          // 按照周一至周日的顺序排序选中的营业日
          const weekOrder = ['周一', '周二', '周三', '周四', '周五', '周六', '周日' ,'整周'];
          const sortedPeriod = this.selectedIndices.sort((a, b) => weekOrder.indexOf(a) - weekOrder.indexOf(b));
          let data = {
              merchantId: this.merchantId,
              timeType: this.timeType.length > 0 ? 1 : 2,
              period: this.selectedIndices.length > 0 ? sortedPeriod.join('、') : null,
              middleTime: this.timeArr.length >= 1 ? this.timeArr[0].value : null,
              beginTime: this.timeArr.length >= 2 ? this.timeArr[1].value : null,
              endTime: this.timeArr.length >= 3 ? this.timeArr[2].value : null,
              id:this.arrData.index==1 || this.arrData.index==0?this.arrData.arr[this.arrData.index].id:null
          }
            if(this.selectedIndices.length==0){
				this.$tip.toast('请选择营业日');
                return
            }
            if(this.timeArr.length==0 && this.timeType.length==0){
				this.$tip.toast('请选择营业s时段');
                return
            }
            let interfaceData = data.id ? "/merchant/localMerchantTime/edit" : "/merchant/localMerchantTime/add"
            
            this.$http.post(interfaceData, data).then(res => {
				if (res.data.code == 200) {
					uni.showToast({
						icon:'none',
						title:res.data.message || '成功'
					})
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1 // 返回的页面数，默认为1
						})
					},1000)
				} else {
					uni.showToast({
						icon:'none',
						title:res.data.message
					})
					
				}
            })
        },

    }
}
</script>
<style scoped lang="scss">
page {
    background: #F8F8FA;
}

.tab-top {
    margin: 24upx 30upx;
    padding: 14upx 18upx;
}

.tag-type {
    // display: inline-block;
    // display: flex;
    float: left;
    font-size: 26upx;
    width: 146upx;
    height: 54upx;
    color: #333333;
    margin: 18upx 23upx 0 0;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #C2C2C2;
    text-align: center;
    line-height: 54upx;
}

.disable-background {
    background: #F2F3F5;
    border: 1px solid #D2D9DC;
    color: #C0C0C0;
}

.selected-background {
    color: #2983EC;
    position: relative;
    background: rgba(68, 154, 255, 0.1);
    border: 1px solid #449AFF;
}

.selected-background ::after {
    content: '';
    position: absolute;
    top: -1px;
    right: -1px;
    width: 22upx;
    height: 22upx;
    background-image: url('/static/store/xuanzhong.png');
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 0 5px 0 0;
}

.sub-bottom {
    position: fixed;
    width: 100%;
    bottom: 0;
    background: #FFFFFF;
    border-top: 1px solid #EEEEEE;
}

.add-style {
    padding: 0 30upx;
    background: #449AFF;
    color: #fff;
    line-height: 58upx;
    margin-top: 22upx;
    border-radius: 4px 4px 4px 4px;
}

.date24 {
    line-height: 80upx;

    ::v-deep .uni-data-checklist {
        flex: none;

        .checklist-group .checklist-box {
            margin-right: 0;
        }
    }
}
</style>