school_uni/components/delivery-time-op/delivery-time-op.vue

<!-- 弹窗组件小龙开发所有 -->
<template>
  <view>
    <!-- 模态框 -->
    <view @tap="Modal" :class="{ mask: model }"></view>
    <!-- 弹窗主体 -->
    <view
      :style="{ height: barHidth + 'rpx' }"
      class="active"
      :class="{ add: model }"
    >
      <view class="title-model">{{ title }} <text @tap="close">x</text></view>
      <view class="cont" :style="{ height: barHidth - 80 + 'rpx' }">
        <!-- 天 -->
        <scroll-view class="day" :scroll-y="true">
          <view
            :class="index === isIndex ? 'active_copy' : ''"
            v-for="(item, index) in content"
            :key="item.id"
            @tap="dataCallback(index, item)"
            >{{ item.timezh }}</view
          >
        </scroll-view>

        <!-- 时 -->
        <scroll-view class="content-model" :scroll-y="true" :scroll-top="scrollTop">
          <view
            class="appoint"
            :class="index === Indexes ? 'longActive' : ''"
            @tap="timeCallback(index, item)"
            v-for="(item, index) in Days"
            :key="index"
            >{{ item.timestr
            }}<text :class="index === Indexes ? 'cuIcon-check' : ''"></text
          ></view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    //弹窗组件标题
    title: {
      type: String,
      default: "请传入title",
    },
    //弹窗组件数据
    content: {
      type: Array,
      // 默认测试数据
      default: () => [
        {
          timezh: "今天 (周三)",
          timeformatter: "8-10",
          id: 108,
          timelist: [
            {
              timestr: "立即送达",
            },
            {
              timestr: "15:35",
            },
            {
              timestr: "16:05",
            },
          ],
        },
      ],
    },
    //弹窗 窗口高度
    barHidth: {
      type: Number,
      default: 400,
    },
    //点击模态框是否能关闭弹窗
    dodge: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      scrollTop: 0,
      isIndex: 0,
      Indexes: 0,
      Days: [],
      model: false,
    };
  },

  //初始化数据
  watch: {
    content: {
      immediate: true,
      handler(newValue, oldValue) {
        this.Days = this.content[0].timelist;
      },
    },
  },

  methods: {
    // 关闭窗口
    close() {
      this.model = false;
    },

    // 打开窗口
    open() {
      this.model = true;
    },

    // 点击模态框关闭窗口
    Modal() {
      if (this.dodge) {
        this.close();
      }
    },

    //时间切换回顶
    gotop() {
      this.scrollTop = 1;
      this.$nextTick(function () {
        this.scrollTop = 0;
      });
    },

    //切换日期
    dataCallback(inedx, item) {
      this.isIndex = inedx;
      this.Days = this.content[inedx].timelist;
      this.Indexes = null;
      this.gotop();
      this.$emit("dataCallback", item);
    },

    //选择时间
    timeCallback(inedx, item) {
      this.Indexes = inedx;
      this.modalName = null;
      this.$emit("timeCallback", item);
    },
  },
};
</script>

<style scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  animation: getInto 0.5s 1;
  opacity: 0.5;
  z-index: 999;
}

@keyframes getInto {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.5;
  }
}

.active {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 400rpx;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
  overflow: hidden;
  transform: translateY(100%);
  transition: 0.4s;
}

.add {
  transform: translateY(0);
}

.title-model {
  position: relative;
  text-align: center;
  background-color: #fff;
  padding: 20rpx 0;
  border-bottom: 2rpx solid #eee;
}

.title-model > text {
  position: absolute;
  right: 14rpx;
  width: 46rpx;
  height: 46rpx;
  line-height: 38rpx;
  background-color: #ccc;
  color: #fff;
  border-radius: 50%;
}

.cont {
  display: flex;
  background-color: #fff;
  overflow-y: scroll;
}

.day {
  flex: 2;
  background-color: #fff;
  border-right: 2rpx solid #f8f8f8;
  text-align: center;
  border-bottom: 20px solid #fff;
}

.day view {
  padding: 30rpx 12rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.content-model {
  flex: 4;
  font-size: 28rpx;
  border-bottom: 40rpx solid #fff;
  background-color: #fff;
}

.appoint {
  text-align: left;
  padding: 30rpx;
  border-bottom: 2rpx solid #f8f8f8;
}

.appoint text {
  margin-left: 30rpx;
}

.active_copy {
  position: relative;
  background-color: #d7f7e3;
  color: #27c866;
  box-sizing: border-box;
}

.active_copy::after {
  content: "";
  width: 5rpx;
  height: 94rpx;
  background: #27c866;
  position: absolute;
  top: 0;
  right: 0;
}

.longActive {
  position: relative;
  color: #27c866;
}

.cuIcon-check {
  position: absolute;
  width: 30rpx;
  left: 210rpx;
  height: 16rpx;
  border-bottom: 4rpx solid #27c866;
  border-left: 4rpx solid #27c866;
  transform: rotate(-45deg);
}

scroll-view ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
</style>