InspectionCleaning/components/daySelect/index.vue

<template>
  <view>
    <view class="box">
      <view class="title"
        >{{ currentYear }}年&nbsp;&nbsp;{{ currentMonth }}月</view
      >
      <scroll-view scroll-x="true">
        <block v-for="(item, index) in dayList" :key="index">
          <view
            class="dayTitle"
            :class="current == index ? 'select' : ''"
            @click="timeSelectd(index)"
          >
            <view
              style="
                display: flex;
                flex-direction: column;
                justify-content: center;
                width: 100%;
                height: 100%;
              "
            >
              <view class="day">{{ item.day }}</view>
              <view v-if="index == 0" style="font-size: 25rpx">今天</view>
              <view v-else style="font-size: 25rpx">周{{ item.week }}</view>
            </view>
          </view>
        </block>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import Vue from "vue";
import common from "@/utils/common.js";
export default {
  data() {
    return {
      currentYear: new Date().getFullYear(), // 当前年份
      currentMonth: new Date().getMonth() + 1, // 当前月份（0-11需+1）
      isShow: false,
      current: 0,
      dayList: [],
      xzTime: common.GetNowTime(new Date()),
    };
  },
  created() {
    this.dayList = common.weekDate().dayList;
    const firstDay = this.dayList[0];
    this.currentYear = firstDay.year;
    this.currentMonth = firstDay.month; // 假设 dayList 中的月份已处理补零
  },
  methods: {
    // 日期选择
    timeSelectd(index) {
      this.current = index;
      let date =
        this.dayList[index].year +
        "-" +
        this.dayList[index].month +
        "-" +
        this.dayList[index].day;
      date = common.GetNowTime(new Date(date));
      this.xzTime = date;
    },
  },
};
</script>

<style scoped lang="scss">
.box {
  padding: 30rpx;
}

scroll-view {
  padding: 20rpx 0;
  width: 100%;
  white-space: nowrap;
}
.title {
  font-weight: 800;
  font-size: 70rpx;
  color: #282828;
}

.dayTitle {
  margin-left: 20rpx;
  text-align: center;
  display: inline-block;
  width: 124rpx;
  height: 124rpx;
  background: #ffffff;
  border-radius: 25rpx;
  border: 1rpx solid #4689fe;
  position: relative;

  .day {
    font-weight: normal;
    font-size: 34rpx;
    color: #4473fe;
  }
}

.dayTitle:first-child {
  margin-left: 0;
}

.select {
  font-weight: bold;
  font-size: 34rpx;
  color: #ffffff;
  background: #4473fe;
  border-radius: 25rpx;
  // border: 1rpx solid #4473fe;
  border: none;
  .day {
    color: #ffffff;
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20rpx;
    height: 10rpx;
    background: orange;
    border-radius: 20rpx 20rpx 0 0;
  }
}
</style>