新插件

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

@@ -0,0 +1,284 @@
+<!-- 弹窗组件小龙开发所有 -->
+<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>