jufubao-base 1.0.118 → 1.0.119-beta3

package/src/components/JfbBaseConFlashList/JfbBaseConFlashList.vue

@@ -0,0 +1,656 @@
+<template>
+  <view
+    class="jfb-base-con-flash-list"
+    @click="handleEditxSelect"
+    :class="{ editx: isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-con-flash-list__edit"
+      :class="{ editx: isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-con-flash-list__edit-icon" @click="delEdit"
+        >删除</view
+      >
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-con-flash-list__body">
+      <image
+        :style="{
+          backgroundImage: `url(${background})`,
+          backgroundSize: '100% 100%',
+          display: 'block',
+        }"
+        class="jfb-base-con-flash-list__body-banner"
+      ></image>
+      <!-- 多场次tab start -->
+      <scroll-view
+        v-if="sessionList.length > 1"
+        :style="{
+          backgroundImage: `url(${sessionBackground})`,
+          backgroundSize: '100% 100%',
+          position: positionType,
+          top: top,
+          zIndex: 2000,
+        }"
+        scroll-x="true"
+      >
+        <!-- 这里放置你需要横向滑动的内容 -->
+        <view class="jfb-base-con-flash-list__body-scroll">
+          <view
+            :style="{
+              backgroundImage:
+                activeIndex === index && index === 0
+                  ? `url(${firstBackground})`
+                  : activeIndex === index && index === sessionList.length - 1
+                  ? `url(${finalBackground})`
+                  : activeIndex === index
+                  ? `url(${middleBackground})`
+                  : 'none',
+              backgroundSize: '100% 100%',
+              width: index === 0 ? '28%' : '25%',
+              textAlign: index === 0 ? 'left' : 'center',
+            }"
+            class="jfb-base-con-flash-list__body-scroll-item"
+            v-for="(item, index) in sessionList"
+            :key="index"
+            @click="handleSelectSession(index, item)"
+          >
+            <view
+              class="jfb-base-con-flash-list__body-scroll-item-ready"
+              v-if="!item.isStart"
+            >
+              <view
+                :style="{ color: activeIndex === index ? '#333' : '#fff' }"
+                >{{ item.start_name }}</view
+              >
+              <view
+                :style="{
+                  color: activeIndex === index ? mainColor : '#fff',
+                  fontWeight: activeIndex === index ? 700 : 400,
+                }"
+                >即将开抢</view
+              >
+            </view>
+            <view
+              class="jfb-base-con-flash-list__body-scroll-item-ready"
+              v-else
+            >
+              <view style="text-align: left; padding-left: 10rpx">
+                <text
+                  :style="{
+                    background: activeIndex === index ? '#1a1a1a' : '#fff',
+                    color: activeIndex === index ? '#fff' : mainColor,
+                  }"
+                  >{{ hours }}</text
+                ><text
+                  :style="{
+                    color: activeIndex === index ? '#1a1a1a' : '#fff',
+                  }"
+                  >:</text
+                >
+                <text
+                  :style="{
+                    background: activeIndex === index ? '#1a1a1a' : '#fff',
+                    color: activeIndex === index ? '#fff' : mainColor,
+                  }"
+                  >{{ minutes }}</text
+                >
+                <text
+                  :style="{
+                    color: activeIndex === index ? '#1a1a1a' : '#fff',
+                  }"
+                  >:</text
+                >
+                <text
+                  :style="{
+                    background: activeIndex === index ? '#1a1a1a' : '#fff',
+                    color: activeIndex === index ? '#fff' : mainColor,
+                  }"
+                  >{{ seconds }}</text
+                >
+              </view>
+              <view
+                :style="{
+                  color: activeIndex === index ? mainColor : '#fff',
+                  fontWeight: activeIndex === index ? 700 : 400,
+                  textAlign: 'left',
+                  paddingLeft: '10rpx',
+                }"
+                >{{ item.start_name }}点场</view
+              >
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+      <!-- 多场次tab end -->
+      <!-- 单场次 start -->
+      <view
+        class="jfb-base-con-flash-list__body-single"
+        :style="{
+          backgroundImage: `url(${singleBackground})`,
+          backgroundSize: '100% 100%',
+          position: positionType,
+          top: top,
+          zIndex: 2000,
+        }"
+        v-else
+      >
+        <view
+          v-if="!sessionList[0].isStart"
+          class="jfb-base-con-flash-list__body-single-date"
+        >
+          <view> 3月8日 14:00 </view>
+          <view> 即将开抢 </view>
+        </view>
+        <view class="jfb-base-con-flash-list__body-single-date" v-else>
+          <view> 00:00:00 </view>
+          <view> 疯抢中... </view>
+        </view>
+        <view class="jfb-base-con-flash-list__body-single-cutdown">
+          距结束
+          <text :style="{ color: mainColor }">3</text>天
+          <text :style="{ color: mainColor }">12</text>:
+          <text :style="{ color: mainColor }">48</text>:
+          <text :style="{ color: mainColor }">56</text>
+        </view>
+      </view>
+      <!-- 单场次 end -->
+
+      <view
+        :style="{ height: fixedHeightTop }"
+        v-if="positionType === 'fixed'"
+      ></view>
+      <view class="jfb-base-con-flash-list__body-product">
+        <view
+          v-for="(item, index) in productList"
+          :key="index"
+          class="jfb-base-con-flash-list__body-product-item"
+        >
+          <view
+            v-if="!item.num"
+            class="jfb-base-con-flash-list__body-product-item-mask"
+          ></view>
+          <image :src="item.img"></image>
+          <view class="jfb-base-con-flash-list__body-product-item-info">
+            <view class="jfb-base-con-flash-list__body-product-item-info-name">
+              {{ item.name }}
+            </view>
+            <view class="prod_price">
+              <xd-unit
+                :price="item.sale_price"
+                :isOld="false"
+                color="#000000"
+                :iconSize="0.28"
+                :fontSize="48"
+              />
+              <!-- todo -->
+              <view
+                v-if="isShowDiscount === 'Y' && checkDiscountPrice(item)"
+                class="prod_oldPrice"
+                >原价：{{ dividePrice(item.market_price) }}</view
+              >
+            </view>
+            <view class="jfb-base-con-flash-list__body-product-item-info-tag">
+              <view :style="{ background: mainColor }">限时秒杀</view>
+              <XdFontIcon
+                v-if="showFlash"
+                :color="mainColor"
+                icon="icontop"
+                size="50"
+              ></XdFontIcon>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbBaseConFlashListMixin from "./JfbBaseConFlashListMixin";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import getServiceUrl from "@/common/getServiceUrl";
+import XdUnit from "@/components/XdUnit/XdUnit";
+
+export default {
+  name: "JfbBaseConFlashList",
+  components: {
+    XdFontIcon,
+    XdUnit,
+  },
+  mixins: [componentsMixins, extsMixins, JfbBaseConFlashListMixin],
+  data() {
+    return {
+      background:
+        "https://img.js.design/assets/img/65eaab794acd2620e01cc8e8.png#24f148138043dd336055d304f1486411",
+      sessionBackground: "",
+      firstBackground: "",
+      middleBackground: "",
+      finalBackground: "",
+      singleBackground: "",
+      activeIndex: 0,
+      sessionList: [
+        {
+          start: 1710153161,
+          end: 1710160361,
+          isStart: true,
+          start_name: "12:00",
+        },
+        {
+          start: 1710153161,
+          end: 1710160361,
+          isStart: false,
+          start_name: "14:00",
+        },
+        {
+          start: 1710153161,
+          end: 1710160361,
+          isStart: false,
+          start_name: "16:00",
+        },
+        {
+          start: 1710153161,
+          end: 1710160361,
+          isStart: false,
+          start_name: "18:00",
+        },
+        {
+          start: 1710153161,
+          end: 1710160361,
+          isStart: false,
+          start_name: "18:00",
+        },
+      ],
+      days: "00",
+      hours: "00",
+      minutes: "00",
+      seconds: "00",
+      isShowDiscount: "",
+      differ: 1,
+      showFlash: true,
+      productList: [
+        {
+          img: "https://img.js.design/assets/img/6487c11d31971ab22c07c220.png#dfe2fe09e053ed42de4af607382569ac",
+          name: "方家铺子中宁四星红枸杞250g烦都烦死大喊大叫开始",
+          market_price: 1200,
+          sale_price: 1000,
+          num: 1,
+        },
+        {
+          img: "https://img.js.design/assets/img/6487c11d31971ab22c07c220.png#dfe2fe09e053ed42de4af607382569ac",
+          name: "方家铺子中宁四星红枸杞250g",
+          market_price: 1200,
+          sale_price: 1000,
+          num: 0,
+        },
+        {
+          img: "https://img.js.design/assets/img/6487c11d31971ab22c07c220.png#dfe2fe09e053ed42de4af607382569ac",
+          name: "方家铺子中宁四星红枸杞250g",
+          market_price: 1200,
+          sale_price: 1000,
+          num: 1,
+        },
+        {
+          img: "https://img.js.design/assets/img/6487c11d31971ab22c07c220.png#dfe2fe09e053ed42de4af607382569ac",
+          name: "方家铺子中宁四星红枸杞250g",
+          market_price: 1200,
+          sale_price: 1000,
+          num: 1,
+        },
+        {
+          img: "https://img.js.design/assets/img/6487c11d31971ab22c07c220.png#dfe2fe09e053ed42de4af607382569ac",
+          name: "方家铺子中宁四星红枸杞250g",
+          market_price: 1200,
+          sale_price: 1000,
+          num: 1,
+        },
+        {
+          img: "https://img.js.design/assets/img/6487c11d31971ab22c07c220.png#dfe2fe09e053ed42de4af607382569ac",
+          name: "方家铺子中宁四星红枸杞250g",
+          market_price: 1200,
+          sale_price: 1000,
+          num: 1,
+        },
+        {
+          img: "https://img.js.design/assets/img/6487c11d31971ab22c07c220.png#dfe2fe09e053ed42de4af607382569ac",
+          name: "方家铺子中宁四星红枸杞250g",
+          market_price: 1200,
+          sale_price: 1000,
+          num: 1,
+        },
+        {
+          img: "https://img.js.design/assets/img/6487c11d31971ab22c07c220.png#dfe2fe09e053ed42de4af607382569ac",
+          name: "方家铺子中宁四星红枸杞250g",
+          market_price: 1200,
+          sale_price: 1000,
+        },
+        {
+          img: "https://img.js.design/assets/img/6487c11d31971ab22c07c220.png#dfe2fe09e053ed42de4af607382569ac",
+          name: "方家铺子中宁四星红枸杞250g",
+          market_price: 1200,
+          sale_price: 1000,
+        },
+        {
+          img: "https://img.js.design/assets/img/6487c11d31971ab22c07c220.png#dfe2fe09e053ed42de4af607382569ac",
+          name: "方家铺子中宁四星红枸杞250g",
+          market_price: 1200,
+          sale_price: 1000,
+          num: 1,
+        },
+        {
+          img: "https://img.js.design/assets/img/6487c11d31971ab22c07c220.png#dfe2fe09e053ed42de4af607382569ac",
+          name: "方家铺子中宁四星红枸杞250g",
+          market_price: 1200,
+          sale_price: 1000,
+          num: 1,
+        },
+      ],
+      hasNext: true,
+      next_page_token: "",
+      page_size: 10,
+      page_token: 1,
+      positionType: "relative",
+      top: "-20rpx",
+      fixedHeightTop: "0rpx",
+    };
+  },
+  watch: {
+    container(value) {
+      this.init(value);
+    },
+  },
+  created() {
+    this.init(this.container);
+
+    //todo
+  },
+  destroyed() {
+    if (this.timeer) {
+      clearTimeout(this.timeer);
+    }
+  },
+  methods: {
+    onJfbLoad(options) {
+      this.fixedHeightTop = "100rpx";
+
+      this.sessionList.map((item) => {
+        if (item.isStart) {
+          this.cutTime(item.end);
+          this.timmer = setInterval(() => {
+            this.cutTime(item.end);
+          }, 1000);
+        }
+      });
+    },
+    /**
+     * @description 监听事件变化
+     * @param container {object} 业务组件对象自己
+     */
+    init(container) {
+      this.sessionBackground = getServiceUrl(
+        getContainerPropsValue(container, "content.sessionBackground", "none")
+          .url
+      );
+      this.firstBackground = getServiceUrl(
+        getContainerPropsValue(container, "content.firstBackground", "none").url
+      );
+      this.middleBackground = getServiceUrl(
+        getContainerPropsValue(container, "content.middleBackground", "none")
+          .url
+      );
+      this.finalBackground = getServiceUrl(
+        getContainerPropsValue(container, "content.finalBackground", "none").url
+      );
+      this.singleBackground = getServiceUrl(
+        getContainerPropsValue(container, "content.singleBackground", "none")
+          .url
+      );
+      this.differ = getContainerPropsValue(container, "content.differ", 1);
+      this.isShowDiscount = getContainerPropsValue(
+        container,
+        "content.isShowDiscount",
+        "Y"
+      );
+    },
+    checkDiscountPrice(item) {
+      if (this.isShowDiscount === "Y") {
+        let price = item.market_price - item.sale_price;
+        console.log(
+          item.market_price,
+          item.sale_price,
+          this.$xdUniHelper.divisionFloatNumber(price, 100),
+          this.differ,
+          this.$xdUniHelper.divisionFloatNumber(price, 100) > this.differ,
+          "hhhhhh"
+        );
+        return this.$xdUniHelper.divisionFloatNumber(price, 100) > this.differ;
+      }
+    },
+    dividePrice(num) {
+      return this.$xdUniHelper.divisionFloatNumber(num, 100);
+    },
+    handleSelectSession(index, item) {
+      this.showFlash = item.isStart;
+      this.activeIndex = index;
+    },
+    cutTime(end) {
+      const now = Math.floor(Date.now() / 1000); // 获取当前时间戳
+      const diff = end - now;
+
+      if (diff <= 0) {
+        //开启下一场
+        this.timer = null;
+        // this.onJfbLoad();
+        return;
+      }
+
+      const days = Math.floor(diff / (3600 * 24));
+      const remainingHours = diff % (3600 * 24);
+
+      this.hours = String(Math.floor(remainingHours / 3600)).padStart(2, "0");
+      this.minutes = String(Math.floor((remainingHours % 3600) / 60)).padStart(
+        2,
+        "0"
+      );
+      this.seconds = String(Math.floor(remainingHours % 60)).padStart(2, "0");
+      this.days = String(days).padStart(2, "0");
+
+      console.log(this.days, this.hours, this.minutes, this.seconds, "倒计时");
+    },
+    getList() {
+      let list = [];
+      if (this.page_token === 1) {
+        this.productList = list;
+      } else {
+        this.productList = this.productList.concat(list);
+      }
+      this.hasNext = res.next_page_token !== "";
+      this.next_page_token = res.next_page_token;
+    },
+    onJfbScroll(options) {
+      //滑动展示背景
+      // console.log(this.isPreview, "this.isPreview");
+      // if (this.isPreview) return;
+      console.log(options.e.scrollTop, "options.e.scrollTop");
+      if (options.e.scrollTop >= "160") {
+        this.positionType = "fixed";
+        this.top = this.layoutInfo.top + "rpx";
+        return;
+      }
+
+      // if (options.e.scrollTop === 0) {
+      this.positionType = "relative";
+      this.top = "-20rpx";
+      //   return;
+      // }
+    },
+    onJfbReachBottom(options) {
+      console.log("1111");
+      if (this.hasNext) {
+        this.page_token = this.next_page_token;
+        this.getList();
+      }
+    },
+    onJfbUnload() {
+      if (this.timeer) {
+        clearTimeout(this.timeer);
+      }
+    },
+    onJfbBack(options) {
+      if (this.timeer) {
+        clearTimeout(this.timeer);
+      }
+      if (this.$configProject.isPreview) return;
+      this.$xdUniHelper.navigateBack();
+    },
+  },
+};
+</script>
+
+<style scoped lang="less">
+@import "./JfbBaseConFlashListLess.less";
+
+.jfb-base-con-flash-list {
+  &__body {
+    position: relative;
+    &-banner {
+      width: 100%;
+      height: 360rpx;
+    }
+    &-scroll {
+      white-space: nowrap;
+      width: 100%;
+      height: 100rpx;
+      &-item {
+        display: inline-block;
+        text-align: center;
+        width: 25%;
+        height: 100%;
+
+        &-ready {
+          color: #fff;
+          & > view:first-child {
+            font-size: 40rpx;
+            font-weight: 500;
+            text-align: center;
+            & > text {
+              width: 28rpx;
+              height: 28rpx;
+              border-radius: 4rpx;
+              font-size: 28rpx;
+              padding: 0rpx 2rpx;
+            }
+          }
+          & > view:nth-child(2) {
+            font-size: 24rpx;
+            text-align: center;
+          }
+        }
+      }
+    }
+    &-product {
+      margin: 34rpx 20rpx;
+      &-item {
+        margin-bottom: 24rpx;
+        display: flex;
+        align-items: center;
+        background: #fff;
+        border-radius: 16rpx;
+        padding: 20rpx 20rpx 20rpx 10rpx;
+        position: relative;
+        &-mask {
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          background: rgba(255, 255, 255, 0.5);
+          border-radius: 16rpx;
+          z-index: 2;
+        }
+        image {
+          width: 220rpx;
+          height: 220rpx;
+          border-radius: 16rpx;
+        }
+        &-info {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          margin-left: 20rpx;
+          &-name {
+            font-weight: 500;
+            font-size: 32rpx;
+          }
+          &-tag {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            & > view:first-child {
+              font-size: 24rpx;
+              text-align: center;
+              border-radius: 8rpx;
+              padding: 8rpx 16rpx 8rpx 16rpx;
+              color: #fff;
+            }
+          }
+        }
+      }
+    }
+    &-single {
+      height: 160rpx;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      color: #fff;
+      width: 100%;
+      &-date {
+        text-align: center;
+        & > view:first-child {
+          font-size: 48rpx;
+          font-weight: 700;
+        }
+        & > view:nth-child(2) {
+          font-size: 28rpx;
+        }
+      }
+      &-cutdown {
+        position: relative;
+        top: 20%;
+        font-size: 24rpx;
+        & > text {
+          display: inline-block;
+          width: 40rpx;
+          height: 40rpx;
+          border-radius: 4rpx;
+          background: rgba(255, 255, 255, 1);
+          text-align: center;
+          vertical-align: middle;
+          margin: 0 10rpx;
+        }
+      }
+    }
+    .prod_price {
+      display: flex;
+      align-items: center;
+      margin-top: 18rpx;
+      width: 100%;
+      justify-content: flex-start;
+
+      .prod_oldPrice {
+        font-size: 22rpx;
+        text-decoration: line-through;
+        color: #888888;
+        margin-left: 10rpx;
+      }
+    }
+  }
+}
+</style>