jufubao-base 1.0.119-beta2 → 1.0.119

package/src/components/JfbBaseConFlashList/JfbBaseConFlashList.vue

@@ -1,656 +0,0 @@
-<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>