cyy-vue-material 7.0.19 → 7.0.21

package/src/package/cyy-new-product/cyy-new-product.vue

@@ -1,834 +1,834 @@
-//新品专区
-<template>
-  <div>
-    <div v-if="!listArr.length && !isLc"></div>
-    <div
-      v-else
-      :style="{
-        margin: `${props.marginTop}px 0 ${props.marginBottom}px 0`,
-        backgroundColor: `${props.backgroundColor}`,
-        borderRadius: `${props.borderRadius}px`,
-      }"
-    >
-      <div v-if="props.title || props.subTitle" class="new-product-header">
-        <div class="header-title">{{ props.title }}</div>
-        <div class="header-subtitle" @click="goMoreGoods()">{{ props.subTitle }}</div>
-      </div>
-
-      <template v-if="listArr.length">
-        <template v-if="props.arrange === 3">
-          <!--低代码端的左右滑动-->
-          <div v-if="isLc" ref="lcSwiper" class="new-product-swiper lc-swiper" @scroll="handleLcScroll">
-            <div class="lc-swiper-track">
-              <div
-                v-for="page in groupedList"
-                :key="page.pageKey"
-                class="new-product-page"
-                style="gap:10px"
-              >
-                <div
-                  v-for="item in page.items"
-                  :key="item.renderKey"
-                  :class="['cube-item', { 'is-placeholder': item.isPlaceholder }]"
-                  @click="!item.isPlaceholder && goGoodsDetail(item)"
-                  :style="{ borderRadius: `${props.borderRadius}px`,marginBottom:`${props.marginBottom}px`,marginTop:`${props.marginTop}px`}"
-                >
-                  <template v-if="!item.isPlaceholder">
-                    <div class="imgWrapper">
-                      <div
-                        v-if="isLc === false && (item.goodsSupplynum <= 0 || item.goodsProperty5 === '1')"
-                        class="imgMarked"
-                      >
-                        <div class="maskState">
-                          {{ getMaskState(item.goodsProperty5) }}
-                        </div>
-                      </div>
-                      <img
-                        class="goodsImg"
-                        :src="getGoodsImg(item)"
-                        alt=""
-                        :style="{ borderRadius: `${props.borderRadius}px` }"
-                      />
-                    </div>
-
-                    <div class="goodsDescription">
-                      <div class="goodsName">{{ item.goodsName }}</div>
-                        <section class="footerContent">
-                          <div class="goodsPrice">
-                            ￥{{ item.pricesetNprice }}
-                            <div class="scribing" v-if="props.markedPrice === 1">￥{{ item.pricesetMakeprice }}</div>
-                          </div>
-                          <div class="goodsBuy" @click.stop="goGoodsDetail(item)">立即购买</div>
-                        </section>
-                    </div>
-                  </template>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <!--小程序的左右滑动-->
-          <swiper
-            v-else
-            class="new-product-swiper mp-swiper"
-            :current="currentPage"
-            :autoplay="autoPlayResult"
-            :interval="props.autoplayInterval || 1500"
-            :circular="groupedList.length > 1"
-            :indicator-dots="false"
-            @change="handleSwiperChange"
-          >
-            <swiper-item v-for="page in groupedList" :key="page.pageKey">
-              <div class="new-product-page" style="gap:10px">
-                <div
-                  v-for="item in page.items"
-                  :key="item.renderKey"
-                  :class="['cube-item', { 'is-placeholder': item.isPlaceholder }]"
-                  @click="!item.isPlaceholder && goGoodsDetail(item)"
-                  :style="{ borderRadius: `${props.borderRadius}px`,marginBottom:`${props.marginBottom}px`,marginTop:`${props.marginTop}px`}"
-                >
-                  <template v-if="!item.isPlaceholder">
-                    <div class="imgWrapper">
-                      <div
-                        v-if="isLc === false && (item.goodsSupplynum <= 0 || item.goodsProperty5 === '1')"
-                        class="imgMarked"
-                      >
-                        <div class="maskState">
-                          {{ getMaskState(item.goodsProperty5) }}
-                        </div>
-                      </div>
-                      <img
-                        class="goodsImg"
-                        :src="getGoodsImg(item)"
-                        alt=""
-                        :style="{ borderRadius: `${props.borderRadius}px` }"
-                      />
-                    </div>
-
-                    <div class="goodsDescription">
-                      <div class="goodsName">{{ item.goodsName }}</div>
-                      <section class="footerContent">
-                        <div class="goodsPrice">
-                          ￥{{ item.pricesetNprice }}
-                          <div class="scribing" v-if="props.markedPrice === 1">￥{{ item.pricesetMakeprice }}</div>
-                        </div>
-                        <div class="goodsBuy" @click.stop="goGoodsDetail(item)">立即购买</div>
-                      </section>
-                    </div>
-                  </template>
-                </div>
-              </div>
-            </swiper-item>
-          </swiper>
-
-          <div v-if="groupedList.length > 1" class="swiper-dots">
-            <div
-              v-for="(page, index) in groupedList"
-              :key="page.pageKey"
-              :class="['swiper-dot', { active: currentPage === index }]"
-              @click="goToPage(index)"
-            ></div>
-          </div>
-        </template>
-
-        <div
-          v-else
-          :class="['cube-container', `arrange-${props.arrange}`]"
-        >
-          <div
-            v-for="item in normalizedList"
-            :key="item.renderKey"
-            class="cube-item"
-            @click="goGoodsDetail(item)"
-            :style="{ borderRadius: `${props.borderRadius}px`,marginBottom:`${props.marginBottom}px`,marginTop:`${props.marginTop}px` }"
-          >
-            <div class="imgWrapper">
-              <div
-                v-if="isLc === false && (item.goodsSupplynum <= 0 || item.goodsProperty5 === '1')"
-                class="imgMarked"
-              >
-                <div class="maskState">
-                  {{ getMaskState(item.goodsProperty5) }}
-                </div>
-              </div>
-              <img
-                class="goodsImg"
-                :src="getGoodsImg(item)"
-                alt=""
-                :style="{ borderRadius: `${props.borderRadius}px` }"
-              />
-            </div>
-
-            <div class="goodsDescription">
-              <div v-if="isLc === true && props.arrange === 2" class="specialGoodsName">{{ item.goodsName }}</div>
-              <div v-else class="goodsName">{{ item.goodsName }}</div>
-              <section class="footerContent">
-                <div class="goodsPrice">
-                  ￥{{ item.pricesetNprice }}
-                  <div class="scribing" v-if="props.markedPrice === 1">￥{{ item.pricesetMakeprice }}</div>
-                </div>
-                <div class="goodsBuy" @click.stop="goGoodsDetail(item)">立即购买</div>
-              </section>
-            </div>
-          </div>
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
-
-<script>
-import { querySkuFromJm, find } from "../../api/index.js";
-import { isLc, getUrl } from "../../utils/index.js";
-import { get, orderBy } from "lodash-es";
-
-export default {
-  name: "cyy-new-product",
-  props: {
-    props: {
-      goods: Array,
-      SelectGoods: Object,
-      arrange: Number,
-      borderRadius: Number,
-      margin: Number,
-      markedPrice: Number,
-      marginTop: Number,
-      marginBottom: Number,
-      creatDate: String,
-      priceRange: String,
-      goodsType: String,
-      title: String,
-      subTitle: String,
-      backgroundColor: String,
-      channelCode: String,
-      autoPlay: Number,
-      autoplayInterval: Number,
-      channelCode:Number
-    },
-  },
-  data() {
-    return {
-      listArr: [],
-      currentPage: 0,
-      noDataStyle: {
-        width: "100%",
-        height: "180px",
-        lineHeight: "180px",
-        fontSize: "30px",
-        backgroundColor: "#ccc",
-        color: "#aaa",
-        textAlign: "center",
-      },
-      domainNameUrl: "",
-      isLc: isLc,
-    };
-  },
-  computed: {
-    wrapperStyle() {
-      return {
-        margin: `${this.props.marginTop}px 0 ${this.props.marginBottom}px 0`,
-        backgroundColor: this.props.backgroundColor,
-        borderRadius: `${this.props.borderRadius}px`,
-      };
-    },
-    filterKey() {
-      return (this.props.creatDate || "") + "|" + (this.props.priceRange || "") + "|" + (this.props.goodsType || "");
-    },
-    normalizedList() {
-      return this.listArr.map((item, index) => ({
-        ...item,
-        renderKey: this.getGoodsUniqueKey(item) || `goods-${index}`,
-        isPlaceholder: false,
-      }));
-    },
-    groupedList() {
-      if (this.props.arrange !== 3) {
-        return [];
-      }
-      const result = [];
-      const pageSize = 3;
-      for (let i = 0; i < this.normalizedList.length; i += pageSize) {
-        const pageIndex = Math.floor(i / pageSize);
-        const items = this.normalizedList.slice(i, i + pageSize);
-        while (items.length < pageSize) {
-          items.push({
-            renderKey: `placeholder-${pageIndex}-${items.length}`,
-            isPlaceholder: true,
-          });
-        }
-        result.push({
-          pageKey: `page-${pageIndex}`,
-          items,
-        });
-      }
-      return result;
-    },
-    autoPlayResult() {
-      return !this.isLc && this.props.arrange === 3 && this.props.autoPlay === 0 && this.groupedList.length > 1;
-    },
-  },
-  mounted() {
-    this.init();
-  },
-  watch: {
-    filterKey() {
-      this.init();
-    },
-    listArr() {
-      this.resetCurrentPage();
-    },
-    "props.arrange"() {
-      this.resetCurrentPage();
-    },
-  },
-  methods: {
-    resetCurrentPage() {
-      this.currentPage = 0;
-      this.$nextTick(() => {
-        const el = this.$refs.lcSwiper;
-        if (el && typeof el.scrollTo === "function") {
-          el.scrollTo({
-            left: 0,
-            behavior: "auto",
-          });
-        }
-      });
-    },
-    handleLcScroll(e) {
-      const el = e.target;
-      const width = el.clientWidth || 1;
-      this.currentPage = Math.round(el.scrollLeft / width);
-    },
-    handleSwiperChange(e) {
-      this.currentPage = e.detail.current || 0;
-    },
-    goToPage(index) {
-      if (index < 0 || index >= this.groupedList.length) {
-        return;
-      }
-      if (this.isLc) {
-        const el = this.$refs.lcSwiper;
-        if (!el) {
-          return;
-        }
-        const width = el.clientWidth || 0;
-        el.scrollTo({
-          left: width * index,
-          behavior: "smooth",
-        });
-      }
-      this.currentPage = index;
-    },
-    getGoodsUniqueKey(item) {
-      return item?.goodsCode || item?.skuCode || item?.goodsNo || "";
-    },
-    deduplicateGoodsList(list = []) {
-      const result = [];
-      const seen = new Set();
-      list.forEach((item) => {
-        if (!item) {
-          return;
-        }
-        const key = this.getGoodsUniqueKey(item);
-        if (!key || seen.has(key)) {
-          return;
-        }
-        seen.add(key);
-        result.push(item);
-      });
-      return result;
-    },
-    getGoodsImg(item) {
-      if (!item.dataPic) {
-        return "";
-      }
-      return item.dataPic.indexOf("http") === -1 ? this.domainNameUrl + item.dataPic : item.dataPic;
-    },
-    goMoreGoods() {
-      if (isLc) {
-        return;
-      }
-      const goodsCodes = this.listArr.map((item) => item.goodsCode).join(",");
-      this.$routers.push("/pages/goodsList/main", {
-        goodsCode: goodsCodes,
-        page: "1",
-        rows: "200",
-        order:"asc",
-        sortField:"pricesetNprice"
-      });
-    },
-    formatDate(date) {
-      const y = date.getFullYear();
-      const m = String(date.getMonth() + 1).padStart(2, "0");
-      const d = String(date.getDate()).padStart(2, "0");
-      return `${y}-${m}-${d}`;
-    },
-    parseCreatDate(creatDate) {
-      if (!creatDate) return {};
-      try {
-        const cfg = JSON.parse(creatDate);
-        if (cfg.type === "days") {
-          const now = new Date();
-          const start = new Date(now.getTime() - Number(cfg.value) * 24 * 60 * 60 * 1000);
-          return {
-            gmtCreateQstart: this.formatDate(start),
-            gmtCreateQend: this.formatDate(now),
-          };
-        }
-        if (cfg.type === "range") {
-          //如果没用设置截止时间，就将今天的时间=截止时间
-          if(!cfg.start){
-            return{};
-          }
-          const today=this.formatDate(new Date());
-          return {
-            gmtCreateQstart: cfg.start,
-            gmtCreateQend: cfg.end || today,
-          };
-        }
-      } catch (e) {
-        console.error("时间解析错误", e);
-        return {};
-      }
-      return {};
-    },
-    parsePriceRange(priceRange) {
-      if (!priceRange) return {};
-      try {
-        const range = JSON.parse(priceRange);
-        return {
-          pricesetNpriceQmin: range.min || "",
-          pricesetNpriceQmax: range.max || "",
-          // pricesetNpriceQmin: range.min !== "" && range.min != null ? range.min : "",
-          // pricesetNpriceQmax: range.max !== "" && range.max != null ? range.max : "",
-        };
-      } catch (e) {
-        console.error("价格解析错误", e);
-        return {};
-      }
-    },
-    async init() {
-      this.domainNameUrl = getUrl(this);
-      const { creatDate, priceRange, goodsType, channelCode } = this.props;
-      if (!creatDate || !goodsType) {
-        this.listArr = [];
-        return;
-      }
-
-      const dateParams = this.parseCreatDate(creatDate);
-      const priceParams = this.parsePriceRange(priceRange);
-      const baseParams = {
-        rows: "200",
-        page: "1",
-        ...dateParams,
-        ...priceParams,
-         goodsDataState:"2",
-         isNewArrival: 1,
-         channelCode,
-      };
-
-      if (goodsType) {
-        baseParams.goodsType = goodsType;
-      }
-      if (channelCode) {
-        baseParams.channelCode = channelCode;
-      }
-
-      let res;
-      if (isLc) {
-        const urlParams = new URLSearchParams(window.location.hash.split("?")[1] || window.location.search);
-        const hashChannelCode = urlParams.get("channelCode") || "";
-        if (hashChannelCode) {
-          baseParams.channelCode = hashChannelCode;
-        }
-        const queryStr = new URLSearchParams(baseParams).toString();
-        const headers = {
-          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
-          "saas-token": localStorage.getItem("saas-token"),
-        };
-        res = await fetch(process.env.REACT_APP_BASE_URL + querySkuFromJm + "&" + queryStr, {
-          method: "GET",
-          headers,
-          credentials: "include",
-        })
-          .then((r) => r.json())
-          .catch((e) => {
-            console.log("接口请求错误", e);
-            return {};
-          });
-      } else {
-        const firstRes = await this.http.get(querySkuFromJm, baseParams);
-        const firstList = this.deduplicateGoodsList(get(firstRes, "list", []));
-        if (!firstList.length) {
-          this.listArr = [];
-          return;
-        }
-        const goodsCodeList = firstList.map((item) => item.goodsCode).filter(Boolean);
-        const goodsCode = goodsCodeList.join(",");
-        if (!goodsCode) {
-          this.listArr = [];
-          return;
-        }
-        res = await this.http.get(find + "?rows=200&page=1", 
-        { goodsCode,
-           dataState: "2",
-           order:"asc",
-           sortField:"pricesetNprice"
-          });
-        const findList = this.deduplicateGoodsList(get(res, "list", []));
-        const sortedArrays = [];
-        goodsCodeList.forEach((code) => {
-          const matchedItem = findList.find((item) => item.goodsCode === code);
-          if (matchedItem) {
-            sortedArrays.push(matchedItem);
-          }
-        });
-        res = { list: sortedArrays };
-      }
-      this.listArr = this.deduplicateGoodsList(get(res, "list", []));
-    },
-    goGoodsDetail(item) {
-      if (isLc) {
-        return;
-      }
-      const { skuCode } = item;
-      this.$routers.push("detail", {
-        skuNo: skuCode,
-      });
-    },
-    getMaskState(state) {
-      if (state === "1") {
-        return "预售中";
-      }
-      return "补货中";
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.new-product-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 12px 16px;
-
-  .header-title {
-    font-size: 18px;
-    font-weight: 600;
-    color: #333;
-  }
-
-  .header-subtitle {
-    font-size: 14px;
-    color: #999;
-  }
-}
-
-.new-product-swiper {
-  width: 100%;
-}
-
-.mp-swiper {
-  height: 220px;
-}
-
-.lc-swiper {
-  overflow-x: auto;
-  overflow-y: hidden;
-  scroll-snap-type: x mandatory;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-}
-
-.lc-swiper::-webkit-scrollbar {
-  display: none;
-}
-
-.lc-swiper-track {
-  display: flex;
-}
-
-.new-product-page {
-  width: 100%;
-  min-width: 100%;
-  box-sizing: border-box;
-  display: grid;
-  gap:10px;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  align-items: start;
-  margin: 0 5px;
-
-  .cube-item {
-    background: #fff;
-    padding-bottom: 10px;
-    min-width: 0;
-    &.is-placeholder {
-      background: transparent;
-      pointer-events: none;
-    }
-  }
-
-  .goodsImg {
-    width: 100%;
-    height: 100px;
-    aspect-ratio: 1;
-    display: block;
-  }
-
-  .goodsDescription {
-    position: relative;
-
-    .goodsName {
-      font-size: 13px;
-      height: 36px;
-    }
-
-        .footerContent {
-          flex-direction: column;
-          align-items: stretch;
-
-          .goodsPrice {
-            font-size: 13px;
-            text-align: left;
-            margin-bottom: 4px;
-
-            .scribing {
-              font-size: 11px;
-            }
-          }
-
-          .goodsBuy {
-            align-self: center;
-            width: 5em;
-            font-size: 12px;
-            line-height: 22px;
-            border-radius: 15px;
-            background-color: red;
-            color: white;
-            text-align: center;
-          }
-        }
-  }
-}
-
-.swiper-dots {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 8px 0 4px;
-}
-
-.swiper-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #d9d9d9;
-  margin: 0 4px;
-}
-
-.swiper-dot.active {
-  background: #333;
-}
-
-.cube-container {
-  display: grid;
-
-  &.arrange-1 {
-    grid-template-columns: repeat(1, 1fr);
-
-    .cube-item {
-      background: #fff;
-
-      .goodsImg {
-        width: 100%;
-        height: 100%;
-        aspect-ratio: 1;
-        margin-left: auto;
-        margin-right: auto;
-      }
-
-      .goodsDescription {
-        .goodsName {
-          font-size: 20px;
-        }
-
-        .footerContent {
-          .goodsPrice {
-            font-size: 18px;
-
-            .scribing {
-              font-size: 14px;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &.arrange-2 {
-    grid-template-columns: repeat(2, 1fr);
-
-    .cube-item {
-      background: #fff;
-      margin: 0 5px;
-
-      .goodsImg {
-        width: 100%;
-        height: 100%;
-        aspect-ratio: 1;
-      }
-
-      .goodsDescription {
-        position: relative;
-
-        .goodsName {
-          font-size: 16px;
-          height: 42px;
-          width: 41vw;
-        }
-
-        .specialGoodsName {
-          font-size: 12px;
-          height: 42px;
-        }
-
-        .footerContent {
-          .goodsPrice {
-            font-size: 14px;
-
-            .scribing {
-              font-size: 12px;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  &.arrange-5 {
-      box-sizing: border-box;
-      display: grid;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-
-    .cube-item {
-      background: #fff;
-      padding-bottom: 10px;
-      margin: 0 5px;
-      width: 107px;
-      height: 189px;
-
-
-      .goodsImg {
-        width: 100%;
-        height: 100px;
-        aspect-ratio: 1;
-      }
-
-      .goodsDescription {
-        position: relative;
-
-        .goodsName {
-          font-size: 13px;
-          height: 36px;
-        }
-
-        .footerContent {
-          flex-direction: column;
-          align-items: stretch;
-
-          .goodsPrice {
-            font-size: 13px;
-            text-align: left;
-            margin-bottom: 4px;
-
-            .scribing {
-              font-size: 11px;
-            }
-          }
-
-          .goodsBuy {
-            align-self: center;
-            width: 5em;
-            font-size: 12px;
-            line-height: 22px;
-            border-radius: 15px;
-            background-color: red;
-            color: white;
-            text-align: center;
-          }
-        }
-      }
-    }
-  }
-}
-
-.cube-item {
-  .imgWrapper {
-    position: relative;
-    text-align: center;
-  }
-
-  .imgMarked {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 100;
-
-    .maskState {
-      font-size: 23px;
-      color: white;
-    }
-  }
-
-  .goodsDescription {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-
-    .goodsName,
-    .specialGoodsName {
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    .footerContent {
-      display: flex;
-      justify-content: space-between;
-      align-items: flex-start;
-
-      .goodsPrice {
-        color: #f53a50;
-        font-weight: 600;
-
-        .scribing {
-          display: inline-block;
-          color: #ccc;
-          text-decoration: line-through;
-          font-weight: normal;
-        }
-      }
-    }
-
-    .goodsBuy {
-      text-align: center;
-      border-radius: 5px;
-      background-color: red;
-      color: white;
-      align-self: flex-end;
-      font-size: 12px;
-      line-height: 22px;
-      width: 5em;
-    }
-  }
-}
-</style>
+//新品专区
+<template>
+  <div>
+    <div v-if="!listArr.length && !isLc"></div>
+    <div
+      v-else
+      :style="{
+        margin: `${props.marginTop}px 0 ${props.marginBottom}px 0`,
+        backgroundColor: `${props.backgroundColor}`,
+        borderRadius: `${props.borderRadius}px`,
+      }"
+    >
+      <div v-if="props.title || props.subTitle" class="new-product-header">
+        <div class="header-title">{{ props.title }}</div>
+        <div class="header-subtitle" @click="goMoreGoods()">{{ props.subTitle }}</div>
+      </div>
+
+      <template v-if="listArr.length">
+        <template v-if="props.arrange === 3">
+          <!--低代码端的左右滑动-->
+          <div v-if="isLc" ref="lcSwiper" class="new-product-swiper lc-swiper" @scroll="handleLcScroll">
+            <div class="lc-swiper-track">
+              <div
+                v-for="page in groupedList"
+                :key="page.pageKey"
+                class="new-product-page"
+                style="gap:10px"
+              >
+                <div
+                  v-for="item in page.items"
+                  :key="item.renderKey"
+                  :class="['cube-item', { 'is-placeholder': item.isPlaceholder }]"
+                  @click="!item.isPlaceholder && goGoodsDetail(item)"
+                  :style="{ borderRadius: `${props.borderRadius}px`,marginBottom:`${props.marginBottom}px`,marginTop:`${props.marginTop}px`}"
+                >
+                  <template v-if="!item.isPlaceholder">
+                    <div class="imgWrapper">
+                      <div
+                        v-if="isLc === false && (item.goodsSupplynum <= 0 || item.goodsProperty5 === '1')"
+                        class="imgMarked"
+                      >
+                        <div class="maskState">
+                          {{ getMaskState(item.goodsProperty5) }}
+                        </div>
+                      </div>
+                      <img
+                        class="goodsImg"
+                        :src="getGoodsImg(item)"
+                        alt=""
+                        :style="{ borderRadius: `${props.borderRadius}px` }"
+                      />
+                    </div>
+
+                    <div class="goodsDescription">
+                      <div class="goodsName">{{ item.goodsName }}</div>
+                        <section class="footerContent">
+                          <div class="goodsPrice">
+                            ￥{{ item.pricesetNprice }}
+                            <div class="scribing" v-if="props.markedPrice === 1">￥{{ item.pricesetMakeprice }}</div>
+                          </div>
+                          <div class="goodsBuy" @click.stop="goGoodsDetail(item)">立即购买</div>
+                        </section>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!--小程序的左右滑动-->
+          <swiper
+            v-else
+            class="new-product-swiper mp-swiper"
+            :current="currentPage"
+            :autoplay="autoPlayResult"
+            :interval="props.autoplayInterval || 1500"
+            :circular="groupedList.length > 1"
+            :indicator-dots="false"
+            @change="handleSwiperChange"
+          >
+            <swiper-item v-for="page in groupedList" :key="page.pageKey">
+              <div class="new-product-page" style="gap:10px">
+                <div
+                  v-for="item in page.items"
+                  :key="item.renderKey"
+                  :class="['cube-item', { 'is-placeholder': item.isPlaceholder }]"
+                  @click="!item.isPlaceholder && goGoodsDetail(item)"
+                  :style="{ borderRadius: `${props.borderRadius}px`,marginBottom:`${props.marginBottom}px`,marginTop:`${props.marginTop}px`}"
+                >
+                  <template v-if="!item.isPlaceholder">
+                    <div class="imgWrapper">
+                      <div
+                        v-if="isLc === false && (item.goodsSupplynum <= 0 || item.goodsProperty5 === '1')"
+                        class="imgMarked"
+                      >
+                        <div class="maskState">
+                          {{ getMaskState(item.goodsProperty5) }}
+                        </div>
+                      </div>
+                      <img
+                        class="goodsImg"
+                        :src="getGoodsImg(item)"
+                        alt=""
+                        :style="{ borderRadius: `${props.borderRadius}px` }"
+                      />
+                    </div>
+
+                    <div class="goodsDescription">
+                      <div class="goodsName">{{ item.goodsName }}</div>
+                      <section class="footerContent">
+                        <div class="goodsPrice">
+                          ￥{{ item.pricesetNprice }}
+                          <div class="scribing" v-if="props.markedPrice === 1">￥{{ item.pricesetMakeprice }}</div>
+                        </div>
+                        <div class="goodsBuy" @click.stop="goGoodsDetail(item)">立即购买</div>
+                      </section>
+                    </div>
+                  </template>
+                </div>
+              </div>
+            </swiper-item>
+          </swiper>
+
+          <div v-if="groupedList.length > 1" class="swiper-dots">
+            <div
+              v-for="(page, index) in groupedList"
+              :key="page.pageKey"
+              :class="['swiper-dot', { active: currentPage === index }]"
+              @click="goToPage(index)"
+            ></div>
+          </div>
+        </template>
+
+        <div
+          v-else
+          :class="['cube-container', `arrange-${props.arrange}`]"
+        >
+          <div
+            v-for="item in normalizedList"
+            :key="item.renderKey"
+            class="cube-item"
+            @click="goGoodsDetail(item)"
+            :style="{ borderRadius: `${props.borderRadius}px`,marginBottom:`${props.marginBottom}px`,marginTop:`${props.marginTop}px` }"
+          >
+            <div class="imgWrapper">
+              <div
+                v-if="isLc === false && (item.goodsSupplynum <= 0 || item.goodsProperty5 === '1')"
+                class="imgMarked"
+              >
+                <div class="maskState">
+                  {{ getMaskState(item.goodsProperty5) }}
+                </div>
+              </div>
+              <img
+                class="goodsImg"
+                :src="getGoodsImg(item)"
+                alt=""
+                :style="{ borderRadius: `${props.borderRadius}px` }"
+              />
+            </div>
+
+            <div class="goodsDescription">
+              <div v-if="isLc === true && props.arrange === 2" class="specialGoodsName">{{ item.goodsName }}</div>
+              <div v-else class="goodsName">{{ item.goodsName }}</div>
+              <section class="footerContent">
+                <div class="goodsPrice">
+                  ￥{{ item.pricesetNprice }}
+                  <div class="scribing" v-if="props.markedPrice === 1">￥{{ item.pricesetMakeprice }}</div>
+                </div>
+                <div class="goodsBuy" @click.stop="goGoodsDetail(item)">立即购买</div>
+              </section>
+            </div>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+import { querySkuFromJm, find } from "../../api/index.js";
+import { isLc, getUrl } from "../../utils/index.js";
+import { get, orderBy } from "lodash-es";
+
+export default {
+  name: "cyy-new-product",
+  props: {
+    props: {
+      goods: Array,
+      SelectGoods: Object,
+      arrange: Number,
+      borderRadius: Number,
+      margin: Number,
+      markedPrice: Number,
+      marginTop: Number,
+      marginBottom: Number,
+      creatDate: String,
+      priceRange: String,
+      goodsType: String,
+      title: String,
+      subTitle: String,
+      backgroundColor: String,
+      channelCode: String,
+      autoPlay: Number,
+      autoplayInterval: Number,
+      channelCode:Number
+    },
+  },
+  data() {
+    return {
+      listArr: [],
+      currentPage: 0,
+      noDataStyle: {
+        width: "100%",
+        height: "180px",
+        lineHeight: "180px",
+        fontSize: "30px",
+        backgroundColor: "#ccc",
+        color: "#aaa",
+        textAlign: "center",
+      },
+      domainNameUrl: "",
+      isLc: isLc,
+    };
+  },
+  computed: {
+    wrapperStyle() {
+      return {
+        margin: `${this.props.marginTop}px 0 ${this.props.marginBottom}px 0`,
+        backgroundColor: this.props.backgroundColor,
+        borderRadius: `${this.props.borderRadius}px`,
+      };
+    },
+    filterKey() {
+      return (this.props.creatDate || "") + "|" + (this.props.priceRange || "") + "|" + (this.props.goodsType || "");
+    },
+    normalizedList() {
+      return this.listArr.map((item, index) => ({
+        ...item,
+        renderKey: this.getGoodsUniqueKey(item) || `goods-${index}`,
+        isPlaceholder: false,
+      }));
+    },
+    groupedList() {
+      if (this.props.arrange !== 3) {
+        return [];
+      }
+      const result = [];
+      const pageSize = 3;
+      for (let i = 0; i < this.normalizedList.length; i += pageSize) {
+        const pageIndex = Math.floor(i / pageSize);
+        const items = this.normalizedList.slice(i, i + pageSize);
+        while (items.length < pageSize) {
+          items.push({
+            renderKey: `placeholder-${pageIndex}-${items.length}`,
+            isPlaceholder: true,
+          });
+        }
+        result.push({
+          pageKey: `page-${pageIndex}`,
+          items,
+        });
+      }
+      return result;
+    },
+    autoPlayResult() {
+      return !this.isLc && this.props.arrange === 3 && this.props.autoPlay === 0 && this.groupedList.length > 1;
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  watch: {
+    filterKey() {
+      this.init();
+    },
+    listArr() {
+      this.resetCurrentPage();
+    },
+    "props.arrange"() {
+      this.resetCurrentPage();
+    },
+  },
+  methods: {
+    resetCurrentPage() {
+      this.currentPage = 0;
+      this.$nextTick(() => {
+        const el = this.$refs.lcSwiper;
+        if (el && typeof el.scrollTo === "function") {
+          el.scrollTo({
+            left: 0,
+            behavior: "auto",
+          });
+        }
+      });
+    },
+    handleLcScroll(e) {
+      const el = e.target;
+      const width = el.clientWidth || 1;
+      this.currentPage = Math.round(el.scrollLeft / width);
+    },
+    handleSwiperChange(e) {
+      this.currentPage = e.detail.current || 0;
+    },
+    goToPage(index) {
+      if (index < 0 || index >= this.groupedList.length) {
+        return;
+      }
+      if (this.isLc) {
+        const el = this.$refs.lcSwiper;
+        if (!el) {
+          return;
+        }
+        const width = el.clientWidth || 0;
+        el.scrollTo({
+          left: width * index,
+          behavior: "smooth",
+        });
+      }
+      this.currentPage = index;
+    },
+    getGoodsUniqueKey(item) {
+      return item?.goodsCode || item?.skuCode || item?.goodsNo || "";
+    },
+    deduplicateGoodsList(list = []) {
+      const result = [];
+      const seen = new Set();
+      list.forEach((item) => {
+        if (!item) {
+          return;
+        }
+        const key = this.getGoodsUniqueKey(item);
+        if (!key || seen.has(key)) {
+          return;
+        }
+        seen.add(key);
+        result.push(item);
+      });
+      return result;
+    },
+    getGoodsImg(item) {
+      if (!item.dataPic) {
+        return "";
+      }
+      return item.dataPic.indexOf("http") === -1 ? this.domainNameUrl + item.dataPic : item.dataPic;
+    },
+    goMoreGoods() {
+      if (isLc) {
+        return;
+      }
+      const goodsCodes = this.listArr.map((item) => item.goodsCode).join(",");
+      this.$routers.push("/pages/goodsList/main", {
+        goodsCode: goodsCodes,
+        page: "1",
+        rows: "200",
+        order:"asc",
+        sortField:"pricesetNprice"
+      });
+    },
+    formatDate(date) {
+      const y = date.getFullYear();
+      const m = String(date.getMonth() + 1).padStart(2, "0");
+      const d = String(date.getDate()).padStart(2, "0");
+      return `${y}-${m}-${d}`;
+    },
+    parseCreatDate(creatDate) {
+      if (!creatDate) return {};
+      try {
+        const cfg = JSON.parse(creatDate);
+        if (cfg.type === "days") {
+          const now = new Date();
+          const start = new Date(now.getTime() - Number(cfg.value) * 24 * 60 * 60 * 1000);
+          return {
+            gmtCreateQstart: this.formatDate(start),
+            gmtCreateQend: this.formatDate(now),
+          };
+        }
+        if (cfg.type === "range") {
+          //如果没用设置截止时间，就将今天的时间=截止时间
+          if(!cfg.start){
+            return{};
+          }
+          const today=this.formatDate(new Date());
+          return {
+            gmtCreateQstart: cfg.start,
+            gmtCreateQend: cfg.end || today,
+          };
+        }
+      } catch (e) {
+        console.error("时间解析错误", e);
+        return {};
+      }
+      return {};
+    },
+    parsePriceRange(priceRange) {
+      if (!priceRange) return {};
+      try {
+        const range = JSON.parse(priceRange);
+        return {
+          pricesetNpriceQmin: range.min || "",
+          pricesetNpriceQmax: range.max || "",
+          // pricesetNpriceQmin: range.min !== "" && range.min != null ? range.min : "",
+          // pricesetNpriceQmax: range.max !== "" && range.max != null ? range.max : "",
+        };
+      } catch (e) {
+        console.error("价格解析错误", e);
+        return {};
+      }
+    },
+    async init() {
+      this.domainNameUrl = getUrl(this);
+      const { creatDate, priceRange, goodsType, channelCode } = this.props;
+      if (!creatDate || !goodsType) {
+        this.listArr = [];
+        return;
+      }
+
+      const dateParams = this.parseCreatDate(creatDate);
+      const priceParams = this.parsePriceRange(priceRange);
+      const baseParams = {
+        rows: "200",
+        page: "1",
+        ...dateParams,
+        ...priceParams,
+         goodsDataState:"2",
+         isNewArrival: 1,
+         channelCode,
+      };
+
+      if (goodsType) {
+        baseParams.goodsType = goodsType;
+      }
+      if (channelCode) {
+        baseParams.channelCode = channelCode;
+      }
+
+      let res;
+      if (isLc) {
+        const urlParams = new URLSearchParams(window.location.hash.split("?")[1] || window.location.search);
+        const hashChannelCode = urlParams.get("channelCode") || "";
+        if (hashChannelCode) {
+          baseParams.channelCode = hashChannelCode;
+        }
+        const queryStr = new URLSearchParams(baseParams).toString();
+        const headers = {
+          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+          "saas-token": localStorage.getItem("saas-token"),
+        };
+        res = await fetch(process.env.REACT_APP_BASE_URL + querySkuFromJm + "&" + queryStr, {
+          method: "GET",
+          headers,
+          credentials: "include",
+        })
+          .then((r) => r.json())
+          .catch((e) => {
+            console.log("接口请求错误", e);
+            return {};
+          });
+      } else {
+        const firstRes = await this.http.get(querySkuFromJm, baseParams);
+        const firstList = this.deduplicateGoodsList(get(firstRes, "list", []));
+        if (!firstList.length) {
+          this.listArr = [];
+          return;
+        }
+        const goodsCodeList = firstList.map((item) => item.goodsCode).filter(Boolean);
+        const goodsCode = goodsCodeList.join(",");
+        if (!goodsCode) {
+          this.listArr = [];
+          return;
+        }
+        res = await this.http.get(find + "?rows=200&page=1", 
+        { goodsCode,
+           dataState: "2",
+           order:"asc",
+           sortField:"pricesetNprice"
+          });
+        const findList = this.deduplicateGoodsList(get(res, "list", []));
+        const sortedArrays = [];
+        goodsCodeList.forEach((code) => {
+          const matchedItem = findList.find((item) => item.goodsCode === code);
+          if (matchedItem) {
+            sortedArrays.push(matchedItem);
+          }
+        });
+        res = { list: sortedArrays };
+      }
+      this.listArr = this.deduplicateGoodsList(get(res, "list", []));
+    },
+    goGoodsDetail(item) {
+      if (isLc) {
+        return;
+      }
+      const { skuCode } = item;
+      this.$routers.push("detail", {
+        skuNo: skuCode,
+      });
+    },
+    getMaskState(state) {
+      if (state === "1") {
+        return "预售中";
+      }
+      return "补货中";
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.new-product-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+
+  .header-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+  }
+
+  .header-subtitle {
+    font-size: 14px;
+    color: #999;
+  }
+}
+
+.new-product-swiper {
+  width: 100%;
+}
+
+.mp-swiper {
+  height: 220px;
+}
+
+.lc-swiper {
+  overflow-x: auto;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.lc-swiper::-webkit-scrollbar {
+  display: none;
+}
+
+.lc-swiper-track {
+  display: flex;
+}
+
+.new-product-page {
+  width: 100%;
+  min-width: 100%;
+  box-sizing: border-box;
+  display: grid;
+  gap:10px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  align-items: start;
+  margin: 0 5px;
+
+  .cube-item {
+    background: #fff;
+    padding-bottom: 10px;
+    min-width: 0;
+    &.is-placeholder {
+      background: transparent;
+      pointer-events: none;
+    }
+  }
+
+  .goodsImg {
+    width: 100%;
+    height: 100px;
+    aspect-ratio: 1;
+    display: block;
+  }
+
+  .goodsDescription {
+    position: relative;
+
+    .goodsName {
+      font-size: 13px;
+      height: 36px;
+    }
+
+        .footerContent {
+          flex-direction: column;
+          align-items: stretch;
+
+          .goodsPrice {
+            font-size: 13px;
+            text-align: left;
+            margin-bottom: 4px;
+
+            .scribing {
+              font-size: 11px;
+            }
+          }
+
+          .goodsBuy {
+            align-self: center;
+            width: 5em;
+            font-size: 12px;
+            line-height: 22px;
+            border-radius: 15px;
+            background-color: red;
+            color: white;
+            text-align: center;
+          }
+        }
+  }
+}
+
+.swiper-dots {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 8px 0 4px;
+}
+
+.swiper-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #d9d9d9;
+  margin: 0 4px;
+}
+
+.swiper-dot.active {
+  background: #333;
+}
+
+.cube-container {
+  display: grid;
+
+  &.arrange-1 {
+    grid-template-columns: repeat(1, 1fr);
+
+    .cube-item {
+      background: #fff;
+
+      .goodsImg {
+        width: 100%;
+        height: 100%;
+        aspect-ratio: 1;
+        margin-left: auto;
+        margin-right: auto;
+      }
+
+      .goodsDescription {
+        .goodsName {
+          font-size: 20px;
+        }
+
+        .footerContent {
+          .goodsPrice {
+            font-size: 18px;
+
+            .scribing {
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.arrange-2 {
+    grid-template-columns: repeat(2, 1fr);
+
+    .cube-item {
+      background: #fff;
+      margin: 0 5px;
+
+      .goodsImg {
+        width: 100%;
+        height: 100%;
+        aspect-ratio: 1;
+      }
+
+      .goodsDescription {
+        position: relative;
+
+        .goodsName {
+          font-size: 16px;
+          height: 42px;
+          width: 41vw;
+        }
+
+        .specialGoodsName {
+          font-size: 12px;
+          height: 42px;
+        }
+
+        .footerContent {
+          .goodsPrice {
+            font-size: 14px;
+
+            .scribing {
+              font-size: 12px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &.arrange-5 {
+      box-sizing: border-box;
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+
+    .cube-item {
+      background: #fff;
+      padding-bottom: 10px;
+      margin: 0 5px;
+      width: 107px;
+      height: 189px;
+
+
+      .goodsImg {
+        width: 100%;
+        height: 100px;
+        aspect-ratio: 1;
+      }
+
+      .goodsDescription {
+        position: relative;
+
+        .goodsName {
+          font-size: 13px;
+          height: 36px;
+        }
+
+        .footerContent {
+          flex-direction: column;
+          align-items: stretch;
+
+          .goodsPrice {
+            font-size: 13px;
+            text-align: left;
+            margin-bottom: 4px;
+
+            .scribing {
+              font-size: 11px;
+            }
+          }
+
+          .goodsBuy {
+            align-self: center;
+            width: 5em;
+            font-size: 12px;
+            line-height: 22px;
+            border-radius: 15px;
+            background-color: red;
+            color: white;
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}
+
+.cube-item {
+  .imgWrapper {
+    position: relative;
+    text-align: center;
+  }
+
+  .imgMarked {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 100;
+
+    .maskState {
+      font-size: 23px;
+      color: white;
+    }
+  }
+
+  .goodsDescription {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    .goodsName,
+    .specialGoodsName {
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .footerContent {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+
+      .goodsPrice {
+        color: #f53a50;
+        font-weight: 600;
+
+        .scribing {
+          display: inline-block;
+          color: #ccc;
+          text-decoration: line-through;
+          font-weight: normal;
+        }
+      }
+    }
+
+    .goodsBuy {
+      text-align: center;
+      border-radius: 5px;
+      background-color: red;
+      color: white;
+      align-self: flex-end;
+      font-size: 12px;
+      line-height: 22px;
+      width: 5em;
+    }
+  }
+}
+</style>