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;">
                <text v-for="(tag, index) in tags" :key="index" class="tag-type"
                    :class="{ 'selected-background': isSelected(index) }"
                    :style="tag == '周四' || tag == '整周' ? 'margin-right:0' : ''" @click="toggleSelection(index)">
                    {{ tag }}
                </text>
            </view>
            <view style="padding-top:18upx">营业时段</view>
            <view class="cu-form-group" style="margin:0">
                <input placeholder="添加营业时段（2/3）" v-model="corporateName" name="input"></input>
            <button class="cu-btn bg-blue  " @click="add">添加</button>

            </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'

export default {
    components: {
        rangTime
		},
    data() {
        return {
            mode: 6,
            corporateName:'',
            tags: ['周一', '周二', '周三', '周四', '周五', '周六', '周日', '整周'], // 你的标签数组
            selectedIndices: [], // 用于存储被选中的标签索引
            isSelectDate: false,
			selectedTime: [],
        }
    },
    methods: {
        customDataChange(e) {
				//通过e.detail.value获取值，获取的是自定义数据的下标
				const val = e.detail.value
				console.log(val);
			},
			cancelSelect(e){
				console.log("您已取消选择");
			},
        // 检查一个标签是否被选中
        isSelected(index) {
            return this.selectedIndices.includes(index);
        },
        // 切换标签的选中状态
        toggleSelection(index) {
            const indexIndex = this.selectedIndices.indexOf(index);
            if (indexIndex > -1) {
                // 如果标签已经被选中，则移除它
                this.selectedIndices.splice(indexIndex, 1);
            } else {
                // 如果标签没有被选中，则添加它
                this.selectedIndices.push(index);
            }
        },
        add(){
            this.$refs.rangTime.open()
        },
        onEndTimeChange(val){
            console.log(val,99999 );
            
        }
          
    }
}
</script>
<style scoped lang="scss">
page {
    background: #F8F8FA;
}

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

.tag-type {
    display: inline-block;
    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;
}

.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;
}

</style>