cyy-vue-material 7.0.19 → 7.0.21

package/src/package/cyy-ArsenalPromotion/cyy-ArsenalPromotion.vue

@@ -1,899 +1,913 @@
-<template>
-  <div>
-    <div>
-      <div
-        class="classTitle"
-        :style="{ backgroundColor: props.bgColor }"
-        v-if="scrollTop > 20 || isLc"
-      >
-        <span
-          class="classTitleItem"
-          v-for="(ele, index) in classDomainList"
-          :key="ele.goodsClassId"
-          :style="{
-            height: props.navigationHeight + 'px',
-            lineHeight: props.navigationHeight + 'px',
-            fontSize: props.navigationFontSize + 'px',
-          }"
-        >
-          <span
-            class="classSpan"
-            @click="checkClass(index)"
-            :style="{
-              background:
-                checkClassIndex === index ? props.getBgColor : props.bgColor,
-              color:
-                checkClassIndex === index
-                  ? props.getfontColor
-                  : props.fontColor,
-            }"
-            >{{ ele.goodsChangeClassName }}</span
-          >
-        </span>
-      </div>
-      <scroll-view
-        scroll-y="true"
-        scroll-with-animation="true"
-        @scroll="handleScroll"
-        :scroll-into-view="targetId"
-        style="height: 100vh"
-      >
-        <template v-if="props.headImg">
-          <img v-if="isLc" class="headerImg" :src="props.headImg" />
-          <image
-            v-else
-            class="headerImg"
-            :src="props.headImg"
-            mode="widthFix"
-          ></image>
-        </template>
-        <div class="classContent">
-          <div
-            class="classContentItem"
-            v-for="(ele, index) in classDomainList"
-            :key="ele.goodsClassId"
-            :id="'item-' + index"
-          >
-            <div
-              v-if="!ele.classfooterImg"
-              class="classContentSpan"
-              :style="{
-                paddingTop: ele.titleMt + 'px',
-                paddingBottom: ele.titleBt + 'px',
-                backgroundColor: ele.bgColor,
-              }"
-            >
-              <img
-                style="
-                  display: inline-block;
-                  width: 15px;
-                  height: 15px;
-                  margin-right: 2px;
-                  margin-top: 3px;
-                "
-                v-if="ele.iconFlag"
-                :src="
-                  ele.goodsClassLogo
-                    ? ele.goodsClassLogo.indexOf('http') === -1
-                      ? domainNameUrl + ele.goodsClassLogo
-                      : ele.goodsClassLogo
-                    : ''
-                "
-              />
-              <span
-                v-if="ele.goodsClassNameFlag"
-                :style="{
-                  color: ele.titleColor,
-                  fontSize: ele.titleFontSize + 'px',
-                }"
-              >
-                {{ ele.goodsChangeClassName }}
-              </span>
-            </div>
-            <div
-              v-else
-              class="classContentImgBox"
-              :style="{
-                paddingTop: ele.titleMt + 'px',
-                paddingBottom: ele.titleBt + 'px',
-                backgroundColor: ele.bgColor,
-              }"
-            >
-              <img
-                v-if="isLc"
-                class="classContentImg"
-                :src="ele.classfooterImg"
-              />
-              <image
-                v-else
-                class="classContentImg"
-                :src="ele.classfooterImg"
-                mode="widthFix"
-              ></image>
-              <div class="text-overlay">
-                <img
-                  style="
-                    display: inline-block;
-                    width: 15px;
-                    height: 15px;
-                    margin-right: 2px;
-                    margin-top: 3px;
-                  "
-                  v-if="ele.iconFlag"
-                  :src="
-                    ele.goodsClassLogo
-                      ? ele.goodsClassLogo.indexOf('http') === -1
-                        ? domainNameUrl + ele.goodsClassLogo
-                        : ele.goodsClassLogo
-                      : ''
-                  "
-                />
-                <span
-                  v-if="ele.goodsClassNameFlag"
-                  :style="{
-                    color: ele.titleColor,
-                    fontSize: ele.titleFontSize + 'px',
-                  }"
-                >
-                  {{ ele.goodsChangeClassName }}
-                </span>
-                <!-- 类型为代金券的时候显示 -->
-                <div class="coupon" v-if="ele.promotionType == '4' && ele.couponData">
-                  <div class="left">
-                    <div class="card">代金券</div>
-                    <div class="price">面额 {{ele.couponData.condOnceNums}} 元</div>
-                  </div>
-                  <div class="right">
-                    <div class="right-container">
-                      <span class="discount">满{{ele.couponData.condAmount}}减 {{ ele.couponData.condOnceNums }}</span>
-                      <span class="date">{{getTime(ele.couponData.receiveStart)}}至{{ getTime(ele.couponData.receiveEnd) }}</span>
-                    </div>
-                    <!-- <span class="not_btn">已领取</span>
-                    <span class="not_btn">已超期</span> -->
-                    <span class="get_btn" @click="getWelfare(ele.goodsClassId)">点击领取</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <!-- 商品 -->
-            <div
-              :class="[
-                'cube-container',
-                `arrange-${ele.showTitle}`,
-                { isLc: isLc },
-              ]"
-              :style="{
-                backgroundColor: ele.goodsBgColor,
-              }"
-            >
-              <div
-                v-for="(item, index) in ele.goodsList"
-                class="cube-item"
-                :style="{
-                  marginTop: `${ele.goodsMt}px`,
-                  marginBottom: `${ele.goodsBt}px`,
-                }"
-                :key="item.skuCode"
-                @click="goGoodsDetail(item)"
-              >
-                <div class="imgWrapper">
-                  <div
-                    v-if="
-                      isLc === false &&
-                      (item.goodsSupplynum <= 0 || item.goodsProperty5 === '1')
-                    "
-                    class="imgMarked"
-                    :style="{
-                      borderRadius: `${ele.borderRaduils}px`,
-                    }"
-                  >
-                    <div class="maskState">
-                      {{ getMaskState(item.goodsProperty5) }}
-                    </div>
-                  </div>
-                  <img
-                    class="goodsImg"
-                    :src="
-                      item.dataPic
-                        ? item.dataPic.indexOf('http') === -1
-                          ? domainNameUrl + item.dataPic
-                          : item.dataPic
-                        : ''
-                    "
-                    alt=""
-                    :style="{
-                      borderRadius: `${ele.borderRaduils}px`,
-                    }"
-                  />
-                </div>
-                <div class="goodsDescription">
-                  <div
-                    v-if="isLc === true && ele.showTitle === 2"
-                    class="specialGoodsName"
-                    :style="{
-                      marginTop: ele.goodsSpacingFlag ? '5px' : '0',
-                      marginBottom: ele.goodsSpacingFlag ? '5px' : '0',
-                    }"
-                  >
-                    {{ item.goodsName }}
-                  </div>
-                  <div
-                    v-else
-                    class="goodsName"
-                    :style="{
-                      marginTop: ele.goodsSpacingFlag ? '5px' : '0',
-                      marginBottom: ele.goodsSpacingFlag ? '5px' : '0',
-                    }"
-                  >
-                    {{ item.goodsName }}
-                  </div>
-                  <section
-                    class="footerContent"
-                    :style="{
-                      marginTop: ele.goodsSpacingFlag ? '5px' : '0',
-                      marginBottom: ele.goodsSpacingFlag ? '5px' : '0',
-                    }"
-                  >
-                    <div class="goodsPrice">
-                      ￥{{ item.pricesetNprice }}
-                      <div class="scribing" v-if="ele.underLineFlag === 1">
-                        ￥{{ item.pricesetMakeprice }}
-                      </div>
-                    </div>
-                    <div class="goodsBuy">
-                      <img
-                        src="https://rcyx-platform-test.yoxuan.vip/paas/shop/2021011200000001/2025-05-14/car.png"
-                        @click.stop="addShoppingShow(item)"
-                        style="height: 25px; width: 25px"
-                      />
-                    </div>
-                  </section>
-                </div>
-              </div>
-            </div>
-            <button class="moreBtn" v-if="!isLc" @click="loadMore(ele, index)">
-                查看更多
-              </button>
-          </div>
-        </div>
-      </scroll-view>
-      <!--  -->
-    </div>
-  </div>
-</template>
-
-<script>
-import { isLc, getUrl, fetchGoodImpl } from "../../utils/index.js";
-import {
-  find,
-  querySkuFromJm,
-  queryPromotionByCodeAndCheckUser,
-} from "../../api/index.js";
-import { fetchPost } from "../../api/http.js";
-import { query } from "../../api/urlQuery.js";
-import { isEmpty, isUndefined } from "lodash-es";
-export default {
-  name: "cyy-ArsenalPromotion",
-  // bgColor: "#08fc29", //标题背景颜色
-  // goodsBgColor // 商品背景颜色
-  // goodsClassNameFlag: 0, //分类名称显示隐藏
-  // titleColor: "#08fc29", //分类标题颜色
-  // titleFontSize: 20, //分类标题字号
-  // titleMt: 20, //分类标题上边距
-  // titleBt: 20, //分类标题下边距
-  // iconFlag: 1, //分类Icon显示隐藏
-  // iconSize: 20, //分类标题大小
-  // classfooterImg: "", //分类底图
-  // showTitle: 1, //展示风格
-  // underLineFlag: 1, //划线价显示隐藏
-  // borderRaduils: 1, //边角样式
-  // goodsSpacingFlag: 1, //商品间距(有/无)
-  // goodsMt: 20, //商品上边距
-  // goodsBt: 20, //商品下边距
-  // synchronousOther: false, //同步其他
-  // changeGoodsType: 1, // 选择商品或分类商品 1分类2商品
-  // changeGoodsStr: '', // 选择的商品数据
-  props: {
-    props: {
-      compName: String, //组件名称
-      headImg: String, //头部展示图
-      classList: Array, //选择分类
-      promotionType: Number, //促销类型
-      carIcon: Number, //购物车图标
-      bgColor: String, //导航栏背景颜色
-      getBgColor: String, //已选导航背景颜色
-      fontColor: String, //导航字体颜色
-      getfontColor: String, //已选导航字体颜色
-      navigationHeight: Number, //导航栏高度
-      navigationFontSize: Number, //导航栏字号
-      classDomainList: Array, //分类项配置集合
-    },
-  },
-  data() {
-    return {
-      classTitleStyle: {
-        height: this.props.navigationHeight + "px",
-        lineHeight: this.props.navigationHeight + "px",
-        fontSize: this.props.navigationFontSize + "px",
-      },
-      classDomainList: [],
-      domainNameUrl: "",
-      isLc: isLc,
-      checkClassIndex: -1,
-      targetId: "",
-      scrollTop: 0,
-      page: 1,
-      rows: 12,
-    };
-  },
-  mounted() {
-    this.domainNameUrl = getUrl(this);
-    this.classDomainList = JSON.parse(
-      JSON.stringify(this.props.classDomainList)
-    );
-    this.initgoods();
-  },
-  computed: {},
-  methods: {
-    initgoods() {
-      let that = this;
-      if (isLc) {
-        return this.LcGetGoodsList(that);
-      }
-      return this.getGoodsList(that);
-    },
-    async LcGetGoodsList(that) {
-      // 遍历classDomainList
-      let tempList = that.classDomainList;
-      for (let item of tempList) {
-        const url = `${queryPromotionByCodeAndCheckUser}?promotionCode=${item.goodsClassId}`;
-        let result = await fetchPost(url)
-        console.log(result,'result')
-        // 从 URL 中获取 channelCode
-        const urlParams = new URLSearchParams(
-          window.location.hash.split("?")[1] || window.location.search
-        );
-        const channelCode = urlParams.get("channelCode") || "";
-        if (result && result.length > 0 && result[0].pbCode == '0003' && result[0].activationMode == '1') {
-          console.log("代金券")
-          item.promotionType = 4
-          const couponData = {
-            promotionBegintime: result[0].promotionBegintime, // 代金券开始时间
-            promotionEndtime: result[0].promotionEndtime, // 代金券结束时间
-            receiveStart: result[0].receiveStart, // 代金券领取开始时间
-            receiveEnd: result[0].receiveEnd, // 代金券领取结束时间
-            promotionFrequency: result[0].promotionFrequency, // 领取次数 0为不限制
-            condAmount: result[0].pmPromotionConditionList[0].condAmount, // 领取条件
-            condOnceNums: result[0].pmPromotionConditionList[0].condOnceNums // 优惠面额
-          }
-          item.couponData = couponData
-        }
-        if (result && result.length > 0 && result[0].rangeType == 5) {
-            let skuNoList = []
-            const firstItem = result[0];
-            console.log(firstItem,'firstItem')
-              firstItem.pmPromotionRangeList.forEach(item => {
-                skuNoList.push(item.rangeCode);
-              })
-              console.log(skuNoList,'skuNoList')
-              const url = `${find}?skuNo=${skuNoList.join()}&rows=12&page=1`;
-              const res = await fetchPost(url);
-              item.goodsList = res.list
-              console.log(item,'商品')
-            
-         } else if (result && result.length > 0 && result[0].rangeType == 0) {
-          // 全部商品
-            const url = `${find}?rows=12&page=1`;
-              const res = await fetchPost(url);
-              item.goodsList = res.list
-            console.log(item,'商品')
-         }
-        
-        
-      }
-      that.classDomainList = tempList;
-    },
-    async getGoodsList(that) {
-      console.log(that.classDomainList,'活动')
-      // 遍历classDomainList
-      for (let item of that.classDomainList) {
-        // 调用getNotice方法，传入classtreeCode
-        let params = {
-          promotionCode: item.goodsClassId,
-        };
-        let result = await that.http.get(`${queryPromotionByCodeAndCheckUser}`, params);
-        // 如果是代金券并且用户领取
-        if (result && result.length > 0 && result[0].pbCode == '0003' && result[0].activationMode == '1') {
-          console.log("代金券")
-          that.$set(item, "promotionType", 4);
-          const couponData = {
-            promotionBegintime: result[0].promotionBegintime, // 代金券开始时间
-            promotionEndtime: result[0].promotionEndtime, // 代金券结束时间
-            receiveStart: result[0].receiveStart, // 代金券领取开始时间
-            receiveEnd: result[0].receiveEnd, // 代金券领取结束时间
-            promotionFrequency: result[0].promotionFrequency, // 领取次数 0为不限制
-            condAmount: result[0].pmPromotionConditionList[0].condAmount, // 领取条件
-            condOnceNums: result[0].pmPromotionConditionList[0].condOnceNums // 优惠面额
-          }
-          that.$set(item, "couponData", couponData);
-        }
-        //  部分商品
-         if (result && result.length > 0 && result[0].rangeType == 5) {
-            let skuNoList = []
-            const firstItem = result[0];
-            console.log(firstItem,'firstItem')
-              firstItem.pmPromotionRangeList.forEach(item => {
-                skuNoList.push(item.rangeCode);
-              })
-              console.log(skuNoList,'skuNoList')
-              let paramObj = {
-                skuNo: skuNoList.join()
-              }
-              const res = await that.getGoodsImpl()(this, paramObj, this.page);
-              that.$set(item, "goodsList", res.list);
-              that.$set(item, "skuNoList", skuNoList.join());
-              that.$set(item, "page", 1);
-              console.log(item,'商品')
-            
-         } else if (result && result.length > 0 && result[0].rangeType == 0) {
-          // 全部商品
-            const res = await that.getGoodsImpl()(this, {}, this.page);
-            that.$set(item, "goodsList", res.list);
-            that.$set(item, "page", 1);
-            that.$set(item, "total", res.total);
-            console.log(item,'商品')
-         }
-      }
-    },
-    async loadMore(ele, idx) {
-      console.log(ele, idx, "加载当前活动商品");
-      if (ele.skuNoList) {
-          let paramObj = {
-            skuNo: ele.skuNoList
-          };
-          let totalNum = ele.skuNoList.split(',').length;
-          if (Math.ceil(totalNum / this.rows) > ele.page) {
-            console.log("分页加载")
-            ele.page++;
-            const res = await this.getGoodsImpl()(this, paramObj, ele.page);
-            this.$set(ele, "goodsList", [...ele.goodsList,...res.list]);
-            this.$set(ele, "page",ele.page);
-          } else {
-            if (!isLc) {
-              uni.$u.toast("没有更多了~");
-            }
-            
-          }
-      } else {
-        console.log("全部商品")
-        if (Math.ceil(ele.total / this.rows) > ele.page) {
-            console.log("分页加载----全部商品")
-            ele.page++;
-            const res = await this.getGoodsImpl()(this, {}, ele.page);
-            this.$set(ele, "goodsList", [...ele.goodsList,...res.list]);
-            this.$set(ele, "page", ele.page);
-          } else {
-            if (!isLc) {
-              uni.$u.toast("没有更多了~");
-            }
-          }
-      }
-      
-    },
-    getGoodsImpl() {
-      console.log(99999);
-      const uniIo = async (that, paramObj, page) => {
-        const { list, total } = await that.http.get(
-          `web/es/searchengine/find.json?rows=12&page=${page}`,
-          paramObj
-        );
-        if (paramObj.hasOwnProperty('skuNo')) {
-          const skuCodeList = paramObj.skuNo.split(",");
-          let sortedArrays = [];
-
-          skuCodeList.forEach((skuNo) => {
-            list.forEach((item) => {
-              if (item.skuNo === skuNo) {
-                sortedArrays.push(item);
-              }
-            });
-          });
-          console.log("findList", sortedArrays);
-          return { list: sortedArrays, total };
-        } else {
-           return { list, total };
-        }
-
-        
-      };
-      const fetchIO = async (that, paramObj) => {
-        const { id, goods } = that.props;
-        if (isEmpty(goods)) return Promise.resolve({ list: [] });
-
-        const isEqualFlag = handleCache(that);
-
-        if (isEqualFlag) {
-          return Promise.resolve(fetchGoodsInfo(id));
-        }
-        // 从 URL 中获取 channelCode
-        const urlParams = new URLSearchParams(
-          window.location.hash.split("?")[1] || window.location.search
-        );
-        const channelCode = urlParams.get("channelCode") || "";
-        const saasToken = localStorage.getItem("saas-token");
-        return await fetch(
-          getUrl() +
-            find +
-            "?rows=12&page=1&skuNo=" +
-            paramObj.skuNo +
-            "&channelCode=" +
-            channelCode,
-          {
-            method: "GET",
-            headers: {
-              "saas-token": saasToken,
-              "user-agent":
-                "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36",
-              "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
-            },
-            credentials: "include",
-          }
-        )
-          .then((response) => response.json())
-          .then((res = {}) => {
-            setGoodsInfo(id, goods, res);
-            console.log("Pc数据----res")
-            return res;
-          });
-      };
-
-      if (isLc) {
-        return fetchIO;
-      }
-      return uniIo;
-    },
-    //点击领取优惠券
-    async getWelfare(promotionCode) {
-      if (!isLc) {
-        this.$emit("getWelfare", promotionCode)
-      }
-    },
-    getTime(timestamp) {
-      let date = new Date(timestamp);
-      // 格式化为年月日的格式
-      let year = date.getFullYear();
-      let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并且确保月份是两位数
-      let day = String(date.getDate()).padStart(2, '0'); // 确保日期是两位数
-      return `${year}-${month}-${day}`;
-    },
-    checkClass(index) {
-      this.checkClassIndex = index;
-      this.targetId = `item-${index}`;
-    },
-    addShoppingShow(el) {
-      if (isLc) {
-        return;
-      }
-      this.$emit("addShoppingShow", el);
-    },
-    getMaskState(state) {
-      if (state === "1") {
-        return "预售中";
-      } else {
-        return "补货中";
-      }
-    },
-    getTextStyle(item) {
-      return {
-        color: item.titleColor || "#000000",
-        fontSize: item.titleFontSize || "16px",
-      };
-    },
-    goGoodsDetail(item) {
-      if (isLc) {
-        return;
-      }
-      const { skuCode } = item;
-      let params = {
-        skuNo: skuCode,
-      };
-      this.$routers.push("detail", params);
-    },
-    handleScroll(e) {
-      this.scrollTop = e.detail.scrollTop;
-    },
-  },
-};
-</script>
-<style lang="less" scoped>
-.headerImg {
-  width: 100%;
-}
-.classTitle {
-  overflow-x: scroll;
-  white-space: nowrap;
-  padding: 0 12px;
-  .classTitleItem {
-    margin-right: 10px;
-    .classSpan {
-      border-radius: 20px;
-      padding: 4px 12px;
-    }
-  }
-}
-.classContent {
-  .classContentItem {
-    .classContentSpan {
-      display: flex;
-      justify-content: center;
-      padding: 30px 0;
-    }
-    .classContentImg {
-      width: 100%;
-    }
-    .classContentImgBox {
-      position: relative;
-      width: 100%;
-      .classContentImg {
-        width: 100%;
-        height: auto;
-        display: block;
-      }
-      .text-overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
-        .coupon {
-          display: flex;
-          position: relative;
-          height: 90px;
-          margin-top: 20px;
-          width: 100%;
-          padding: 3px 0;
-          background: url('https://qjstatic.oss-cn-shanghai.aliyuncs.com/SZRC/image/youhuibg.png') no-repeat;
-          background-size: 352px 98px;
-          .left {
-            width: 34%;
-            height: 90px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            .card {
-              font-size: 20px;
-              color: #eb5555;
-            }
-            .price {
-              font-size: 12px;
-              color: #888;
-            }
-          }
-          .right {
-            height: 90px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            margin-left: 0;
-            .right-container {
-              display: flex;
-              flex-direction: column;
-              justify-content: space-around;
-            }
-
-            .date {
-              margin-top: 15px;
-              font-size: 12px;
-              color: #888;
-            }
-            .get_btn,.not_btn {
-              width: 68px;
-              height: 20px;
-              line-height: 20px;
-              text-align: center;
-              color: #f1f1f1;
-              border-radius: 20px;
-            }
-            .get_btn {
-              background-color: #eb5555;
-            }
-            .not_btn {
-              background-color: #ccc;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-.cube-container {
-  display: grid;
-  &.arrange-4 {
-    display: flex;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    .cube-item {
-      flex: 0 0 auto;
-      width: 30%;
-      max-width: 30%;
-      .goodsImg {
-        width: 100%;
-        height: 100%;
-        aspect-ratio: 1;
-      }
-      .goodsDescription {
-        .goodsPrice {
-          font-size: 18px;
-          .scribing {
-            font-size: 14px;
-          }
-        }
-        .goodsName {
-          font-size: 20px;
-        }
-      }
-    }
-    .cube-item:not(:last-child) {
-      margin-right: 10px;
-    }
-  }
-  &.arrange-3 {
-    display: flex;
-    overflow-x: scroll;
-    .cube-item {
-      flex: 0 0 auto;
-      width: 32%;
-      max-width: 32%;
-      .goodsImg {
-        width: 100%;
-        height: 100%;
-        aspect-ratio: 1;
-      }
-      .goodsDescription {
-        .goodsPrice {
-          font-size: 18px;
-          .scribing {
-            font-size: 14px;
-          }
-        }
-        .goodsName {
-          font-size: 20px;
-        }
-      }
-    }
-    .cube-item:not(:last-child) {
-      margin-right: 10px;
-    }
-  }
-  &.arrange-2 {
-    grid-template-columns: repeat(2, 1fr);
-    .cube-item {
-      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-1 {
-    .cube-item {
-      display: flex;
-      justify-content: space-around;
-      height: 100px;
-
-      .imgWrapper {
-        .goodsImg {
-          width: 100px;
-          height: 100px;
-        }
-      }
-
-      .goodsDescription {
-        position: relative;
-        width: 100%;
-        margin-left: 20px;
-        .goodsName {
-          height: auto;
-          font-size: 16px;
-        }
-        .footerContent {
-          .goodsPrice {
-            font-size: 16px;
-            .scribing {
-              font-size: 12px;
-            }
-          }
-        }
-        .goodsBuyWrapper {
-          position: relative;
-          .goodsBuy {
-            position: absolute;
-            top: 0;
-            right: 0;
-          }
-        }
-      }
-    }
-  }
-
-  .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 {
-        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-end;
-        .goodsPrice {
-          color: #f53a50;
-          font-weight: 600;
-          .scribing {
-            display: inline-block;
-            color: #ccc;
-            text-decoration: line-through;
-            font-weight: normal;
-          }
-        }
-      }
-
-      .goodsBuy {
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div>
+    <div>
+      <div
+        class="classTitle"
+        :style="{ backgroundColor: props.bgColor }"
+        v-if="scrollTop > 20 || isLc"
+      >
+        <span
+          class="classTitleItem"
+          v-for="(ele, index) in classDomainList"
+          :key="ele.goodsClassId"
+          :style="{
+            height: props.navigationHeight + 'px',
+            lineHeight: props.navigationHeight + 'px',
+            fontSize: props.navigationFontSize + 'px',
+          }"
+        >
+          <span
+          v-if="ele.goodsList && ele.goodsList.length > 0"
+            class="classSpan"
+            @click="checkClass(index)"
+            :style="{
+              background:
+                checkClassIndex === index ? props.getBgColor : props.bgColor,
+              color:
+                checkClassIndex === index
+                  ? props.getfontColor
+                  : props.fontColor,
+            }"
+            >{{ ele.goodsChangeClassName }}</span
+          >
+        </span>
+      </div>
+      <scroll-view
+        scroll-y="true"
+        scroll-with-animation="true"
+        @scroll="handleScroll"
+        :scroll-into-view="targetId"
+        style="height: 100vh"
+      >
+        <template v-if="props.headImg">
+          <img v-if="isLc" class="headerImg" :src="props.headImg" />
+          <image
+            v-else
+            class="headerImg"
+            :src="props.headImg"
+            mode="widthFix"
+          ></image>
+        </template>
+        <div class="classContent">
+          <div
+            class="classContentItem"
+            v-for="(ele, index) in classDomainList"
+            :key="ele.goodsClassId"
+            :id="'item-' + index"
+          >
+          <div v-if="ele.goodsList && ele.goodsList.length > 0">
+            <div
+              v-if="!ele.classfooterImg"
+              class="classContentSpan"
+              :style="{
+                paddingTop: ele.titleMt + 'px',
+                paddingBottom: ele.titleBt + 'px',
+                backgroundColor: ele.bgColor,
+              }"
+            >
+              <img
+                style="
+                  display: inline-block;
+                  width: 15px;
+                  height: 15px;
+                  margin-right: 2px;
+                  margin-top: 3px;
+                "
+                v-if="ele.iconFlag"
+                :src="
+                  ele.goodsClassLogo
+                    ? ele.goodsClassLogo.indexOf('http') === -1
+                      ? domainNameUrl + ele.goodsClassLogo
+                      : ele.goodsClassLogo
+                    : ''
+                "
+              />
+              <span
+                v-if="ele.goodsClassNameFlag"
+                :style="{
+                  color: ele.titleColor,
+                  fontSize: ele.titleFontSize + 'px',
+                }"
+              >
+                {{ ele.goodsChangeClassName }}
+              </span>
+            </div>
+            <div
+              v-else
+              class="classContentImgBox"
+              :style="{
+                paddingTop: ele.titleMt + 'px',
+                paddingBottom: ele.titleBt + 'px',
+                backgroundColor: ele.bgColor,
+              }"
+            >
+              <img
+                v-if="isLc"
+                class="classContentImg"
+                :src="ele.classfooterImg"
+              />
+              <image
+                v-else
+                class="classContentImg"
+                :src="ele.classfooterImg"
+                mode="widthFix"
+              ></image>
+              <div class="text-overlay">
+                <img
+                  style="
+                    display: inline-block;
+                    width: 15px;
+                    height: 15px;
+                    margin-right: 2px;
+                    margin-top: 3px;
+                  "
+                  v-if="ele.iconFlag"
+                  :src="
+                    ele.goodsClassLogo
+                      ? ele.goodsClassLogo.indexOf('http') === -1
+                        ? domainNameUrl + ele.goodsClassLogo
+                        : ele.goodsClassLogo
+                      : ''
+                  "
+                />
+                <span
+                  v-if="ele.goodsClassNameFlag"
+                  :style="{
+                    color: ele.titleColor,
+                    fontSize: ele.titleFontSize + 'px',
+                  }"
+                >
+                  {{ ele.goodsChangeClassName }}
+                </span>
+                <!-- 类型为代金券的时候显示 -->
+                <div class="coupon" v-if="ele.promotionType == '4' && ele.couponData">
+                  <div class="left">
+                    <div class="card">代金券</div>
+                    <div class="price">面额 {{ele.couponData.condOnceNums}} 元</div>
+                  </div>
+                  <div class="right">
+                    <div class="right-container">
+                      <span class="discount">满{{ele.couponData.condAmount}}减 {{ ele.couponData.condOnceNums }}</span>
+                      <span class="date">{{getTime(ele.couponData.receiveStart)}}至{{ getTime(ele.couponData.receiveEnd) }}</span>
+                    </div>
+                    <!-- <span class="not_btn">已领取</span>
+                    <span class="not_btn">已超期</span> -->
+                    <span class="get_btn" @click="getWelfare(ele.goodsClassId)">点击领取</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- 商品 -->
+            <div
+              :class="[
+                'cube-container',
+                `arrange-${ele.showTitle}`,
+                { isLc: isLc },
+              ]"
+              :style="{
+                backgroundColor: ele.goodsBgColor,
+              }"
+            >
+              <div
+                v-for="(item, index) in ele.goodsList"
+                class="cube-item"
+                :style="{
+                  marginTop: `${ele.goodsMt}px`,
+                  marginBottom: `${ele.goodsBt}px`,
+                }"
+                :key="item.skuCode"
+                @click="goGoodsDetail(item)"
+              >
+                <div class="imgWrapper">
+                  <div
+                    v-if="
+                      isLc === false &&
+                      (item.goodsSupplynum <= 0 || item.goodsProperty5 === '1')
+                    "
+                    class="imgMarked"
+                    :style="{
+                      borderRadius: `${ele.borderRaduils}px`,
+                    }"
+                  >
+                    <div class="maskState">
+                      {{ getMaskState(item.goodsProperty5) }}
+                    </div>
+                  </div>
+                  <img
+                    class="goodsImg"
+                    :src="
+                      item.dataPic
+                        ? item.dataPic.indexOf('http') === -1
+                          ? domainNameUrl + item.dataPic
+                          : item.dataPic
+                        : ''
+                    "
+                    alt=""
+                    :style="{
+                      borderRadius: `${ele.borderRaduils}px`,
+                    }"
+                  />
+                </div>
+                <div class="goodsDescription">
+                  <div
+                    v-if="isLc === true && ele.showTitle === 2"
+                    class="specialGoodsName"
+                    :style="{
+                      marginTop: ele.goodsSpacingFlag ? '5px' : '0',
+                      marginBottom: ele.goodsSpacingFlag ? '5px' : '0',
+                    }"
+                  >
+                    {{ item.goodsName }}
+                  </div>
+                  <div
+                    v-else
+                    class="goodsName"
+                    :style="{
+                      marginTop: ele.goodsSpacingFlag ? '5px' : '0',
+                      marginBottom: ele.goodsSpacingFlag ? '5px' : '0',
+                    }"
+                  >
+                    {{ item.goodsName }}
+                  </div>
+                  <section
+                    class="footerContent"
+                    :style="{
+                      marginTop: ele.goodsSpacingFlag ? '5px' : '0',
+                      marginBottom: ele.goodsSpacingFlag ? '5px' : '0',
+                    }"
+                  >
+                    <div class="goodsPrice">
+                      ￥{{ item.pricesetNprice }}
+                      <div class="scribing" v-if="ele.underLineFlag === 1">
+                        ￥{{ item.pricesetMakeprice }}
+                      </div>
+                    </div>
+                    <div class="goodsBuy">
+                      <img
+                        src="https://rcyx-platform-test.yoxuan.vip/paas/shop/2021011200000001/2025-05-14/car.png"
+                        @click.stop="addShoppingShow(item)"
+                        style="height: 25px; width: 25px"
+                      />
+                    </div>
+                  </section>
+                </div>
+              </div>
+            </div>
+            <button class="moreBtn" v-if="!isLc" @click="loadMore(ele, index)">
+                查看更多
+              </button>
+          </div>
+            
+          </div>
+        </div>
+      </scroll-view>
+      <!--  -->
+    </div>
+  </div>
+</template>
+
+<script>
+import { isLc, getUrl, fetchGoodImpl } from "../../utils/index.js";
+import {
+  find,
+  querySkuFromJm,
+  queryPromotionByCodeAndCheckUser,
+} from "../../api/index.js";
+import { fetchPost } from "../../api/http.js";
+import { query } from "../../api/urlQuery.js";
+import { isEmpty, isUndefined } from "lodash-es";
+export default {
+  name: "cyy-ArsenalPromotion",
+  // bgColor: "#08fc29", //标题背景颜色
+  // goodsBgColor // 商品背景颜色
+  // goodsClassNameFlag: 0, //分类名称显示隐藏
+  // titleColor: "#08fc29", //分类标题颜色
+  // titleFontSize: 20, //分类标题字号
+  // titleMt: 20, //分类标题上边距
+  // titleBt: 20, //分类标题下边距
+  // iconFlag: 1, //分类Icon显示隐藏
+  // iconSize: 20, //分类标题大小
+  // classfooterImg: "", //分类底图
+  // showTitle: 1, //展示风格
+  // underLineFlag: 1, //划线价显示隐藏
+  // borderRaduils: 1, //边角样式
+  // goodsSpacingFlag: 1, //商品间距(有/无)
+  // goodsMt: 20, //商品上边距
+  // goodsBt: 20, //商品下边距
+  // synchronousOther: false, //同步其他
+  // changeGoodsType: 1, // 选择商品或分类商品 1分类2商品
+  // changeGoodsStr: '', // 选择的商品数据
+  props: {
+    props: {
+      compName: String, //组件名称
+      headImg: String, //头部展示图
+      classList: Array, //选择分类
+      promotionType: Number, //促销类型
+      carIcon: Number, //购物车图标
+      bgColor: String, //导航栏背景颜色
+      getBgColor: String, //已选导航背景颜色
+      fontColor: String, //导航字体颜色
+      getfontColor: String, //已选导航字体颜色
+      navigationHeight: Number, //导航栏高度
+      navigationFontSize: Number, //导航栏字号
+      classDomainList: Array, //分类项配置集合
+    },
+  },
+  data() {
+    return {
+      classTitleStyle: {
+        height: this.props.navigationHeight + "px",
+        lineHeight: this.props.navigationHeight + "px",
+        fontSize: this.props.navigationFontSize + "px",
+      },
+      classDomainList: [],
+      domainNameUrl: "",
+      isLc: isLc,
+      checkClassIndex: -1,
+      targetId: "",
+      scrollTop: 0,
+      page: 1,
+      rows: 12,
+    };
+  },
+  mounted() {
+    this.domainNameUrl = getUrl(this);
+    this.classDomainList = JSON.parse(
+      JSON.stringify(this.props.classDomainList)
+    );
+    this.initgoods();
+  },
+  computed: {},
+  methods: {
+    initgoods() {
+      let that = this;
+      if (isLc) {
+        return this.LcGetGoodsList(that);
+      }
+      return this.getGoodsList(that);
+    },
+    async LcGetGoodsList(that) {
+      // 遍历classDomainList
+      let tempList = that.classDomainList;
+      for (let item of tempList) {
+        const url = `${queryPromotionByCodeAndCheckUser}?promotionCode=${item.goodsClassId}`;
+        let result = await fetchPost(url)
+        console.log(result,'result')
+        // 从 URL 中获取 channelCode
+        const urlParams = new URLSearchParams(
+          window.location.hash.split("?")[1] || window.location.search
+        );
+        const channelCode = urlParams.get("channelCode") || "";
+        if (result && result.length > 0 && result[0].pbCode == '0003' && result[0].activationMode == '1') {
+          console.log("代金券")
+          item.promotionType = 4
+          let condAmount = result[0].pmPromotionConditionList ? result[0].pmPromotionConditionList[0].condAmount : ''
+          let condOnceNums = result[0].pmPromotionConditionList ? result[0].pmPromotionConditionList[0].condOnceNums : ''
+          const couponData = {
+            promotionBegintime: result[0].promotionBegintime, // 代金券开始时间
+            promotionEndtime: result[0].promotionEndtime, // 代金券结束时间
+            receiveStart: result[0].receiveStart, // 代金券领取开始时间
+            receiveEnd: result[0].receiveEnd, // 代金券领取结束时间
+            promotionFrequency: result[0].promotionFrequency, // 领取次数 0为不限制
+            condAmount, // 领取条件
+            condOnceNums // 优惠面额
+          }
+          item.couponData = couponData
+        }
+        if (result && result.length > 0 && result[0].rangeType == 5) {
+            let skuNoList = []
+            const firstItem = result[0];
+            console.log(firstItem,'firstItem')
+            if (firstItem.pmPromotionRangeList && firstItem.pmPromotionRangeList.length > 0) {
+              firstItem.pmPromotionRangeList.forEach(item => {
+                skuNoList.push(item.rangeCode);
+              })
+              console.log(skuNoList,'skuNoList')
+              const url = `${find}?skuNo=${skuNoList.join()}&rows=12&page=1`;
+              const res = await fetchPost(url);
+              item.goodsList = res.list
+              console.log(item,'商品')
+            }
+            
+         } else if (result && result.length > 0 && result[0].rangeType == 0) {
+          // 全部商品
+            const url = `${find}?rows=12&page=1`;
+              const res = await fetchPost(url);
+              item.goodsList = res.list
+            console.log(item,'商品')
+         }
+        
+        
+      }
+      that.classDomainList = tempList;
+    },
+    async getGoodsList(that) {
+      console.log(that.classDomainList,'活动')
+      // 遍历classDomainList
+      for (let item of that.classDomainList) {
+        // 调用getNotice方法，传入classtreeCode
+        let params = {
+          promotionCode: item.goodsClassId,
+        };
+        let result = await that.http.get(`${queryPromotionByCodeAndCheckUser}`, params);
+        // 如果是代金券并且用户领取
+        if (result && result.length > 0 && result[0].pbCode == '0003' && result[0].activationMode == '1') {
+          console.log("代金券")
+          that.$set(item, "promotionType", 4);
+          let condAmount = result[0].pmPromotionConditionList ? result[0].pmPromotionConditionList[0].condAmount : ''
+          let condOnceNums = result[0].pmPromotionConditionList ? result[0].pmPromotionConditionList[0].condOnceNums : ''
+          const couponData = {
+            promotionBegintime: result[0].promotionBegintime, // 代金券开始时间
+            promotionEndtime: result[0].promotionEndtime, // 代金券结束时间
+            receiveStart: result[0].receiveStart, // 代金券领取开始时间
+            receiveEnd: result[0].receiveEnd, // 代金券领取结束时间
+            promotionFrequency: result[0].promotionFrequency, // 领取次数 0为不限制
+            condAmount, // 领取条件
+            condOnceNums // 优惠面额
+          }
+          that.$set(item, "couponData", couponData);
+        }
+        //  部分商品
+         if (result && result.length > 0 && result[0].rangeType == 5) {
+            let skuNoList = []
+            const firstItem = result[0];
+            console.log(firstItem,'firstItem')
+            if (firstItem.pmPromotionRangeList && firstItem.pmPromotionRangeList.length > 0) {
+              firstItem.pmPromotionRangeList.forEach(item => {
+                skuNoList.push(item.rangeCode);
+              })
+              console.log(skuNoList,'skuNoList')
+              let paramObj = {
+                skuNo: skuNoList.join()
+              }
+              const res = await that.getGoodsImpl()(this, paramObj, this.page);
+              that.$set(item, "goodsList", res.list);
+              that.$set(item, "skuNoList", skuNoList.join());
+              that.$set(item, "page", 1);
+              console.log(item,'商品111')
+            } else {
+              that.$set(item, "goodsList", []);
+            }
+            
+         } else if (result && result.length > 0 && result[0].rangeType == 0) {
+          // 全部商品
+            const res = await that.getGoodsImpl()(this, {}, this.page);
+            that.$set(item, "goodsList", res.list);
+            that.$set(item, "page", 1);
+            that.$set(item, "total", res.total);
+            console.log(item,'商品')
+         }
+      }
+    },
+    async loadMore(ele, idx) {
+      console.log(ele, idx, "加载当前活动商品");
+      if (ele.skuNoList) {
+          let paramObj = {
+            skuNo: ele.skuNoList
+          };
+          let totalNum = ele.skuNoList.split(',').length;
+          if (Math.ceil(totalNum / this.rows) > ele.page) {
+            console.log("分页加载")
+            ele.page++;
+            const res = await this.getGoodsImpl()(this, paramObj, ele.page);
+            this.$set(ele, "goodsList", [...ele.goodsList,...res.list]);
+            this.$set(ele, "page",ele.page);
+          } else {
+            if (!isLc) {
+              uni.$u.toast("没有更多了~");
+            }
+            
+          }
+      } else {
+        console.log("全部商品")
+        if (Math.ceil(ele.total / this.rows) > ele.page) {
+            console.log("分页加载----全部商品")
+            ele.page++;
+            const res = await this.getGoodsImpl()(this, {}, ele.page);
+            this.$set(ele, "goodsList", [...ele.goodsList,...res.list]);
+            this.$set(ele, "page", ele.page);
+          } else {
+            if (!isLc) {
+              uni.$u.toast("没有更多了~");
+            }
+          }
+      }
+      
+    },
+    getGoodsImpl() {
+      console.log(99999);
+      const uniIo = async (that, paramObj, page) => {
+        const { list, total } = await that.http.get(
+          `web/es/searchengine/find.json?rows=12&page=${page}`,
+          paramObj
+        );
+        if (paramObj.hasOwnProperty('skuNo')) {
+          const skuCodeList = paramObj.skuNo.split(",");
+          let sortedArrays = [];
+
+          skuCodeList.forEach((skuNo) => {
+            list.forEach((item) => {
+              if (item.skuNo === skuNo) {
+                sortedArrays.push(item);
+              }
+            });
+          });
+          console.log("findList", sortedArrays);
+          return { list: sortedArrays, total };
+        } else {
+           return { list, total };
+        }
+
+        
+      };
+      const fetchIO = async (that, paramObj) => {
+        const { id, goods } = that.props;
+        if (isEmpty(goods)) return Promise.resolve({ list: [] });
+
+        const isEqualFlag = handleCache(that);
+
+        if (isEqualFlag) {
+          return Promise.resolve(fetchGoodsInfo(id));
+        }
+        // 从 URL 中获取 channelCode
+        const urlParams = new URLSearchParams(
+          window.location.hash.split("?")[1] || window.location.search
+        );
+        const channelCode = urlParams.get("channelCode") || "";
+        const saasToken = localStorage.getItem("saas-token");
+        return await fetch(
+          getUrl() +
+            find +
+            "?rows=12&page=1&skuNo=" +
+            paramObj.skuNo +
+            "&channelCode=" +
+            channelCode,
+          {
+            method: "GET",
+            headers: {
+              "saas-token": saasToken,
+              "user-agent":
+                "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36",
+              "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+            },
+            credentials: "include",
+          }
+        )
+          .then((response) => response.json())
+          .then((res = {}) => {
+            setGoodsInfo(id, goods, res);
+            console.log("Pc数据----res")
+            return res;
+          });
+      };
+
+      if (isLc) {
+        return fetchIO;
+      }
+      return uniIo;
+    },
+    //点击领取优惠券
+    async getWelfare(promotionCode) {
+      if (!isLc) {
+        this.$emit("getWelfare", promotionCode)
+      }
+    },
+    getTime(timestamp) {
+      let date = new Date(timestamp);
+      // 格式化为年月日的格式
+      let year = date.getFullYear();
+      let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并且确保月份是两位数
+      let day = String(date.getDate()).padStart(2, '0'); // 确保日期是两位数
+      return `${year}-${month}-${day}`;
+    },
+    checkClass(index) {
+      this.checkClassIndex = index;
+      this.targetId = `item-${index}`;
+    },
+    addShoppingShow(el) {
+      if (isLc) {
+        return;
+      }
+      this.$emit("addShoppingShow", el);
+    },
+    getMaskState(state) {
+      if (state === "1") {
+        return "预售中";
+      } else {
+        return "补货中";
+      }
+    },
+    getTextStyle(item) {
+      return {
+        color: item.titleColor || "#000000",
+        fontSize: item.titleFontSize || "16px",
+      };
+    },
+    goGoodsDetail(item) {
+      if (isLc) {
+        return;
+      }
+      const { skuCode } = item;
+      let params = {
+        skuNo: skuCode,
+      };
+      this.$routers.push("detail", params);
+    },
+    handleScroll(e) {
+      this.scrollTop = e.detail.scrollTop;
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.headerImg {
+  width: 100%;
+}
+.classTitle {
+  overflow-x: scroll;
+  white-space: nowrap;
+  padding: 0 12px;
+  .classTitleItem {
+    margin-right: 10px;
+    .classSpan {
+      border-radius: 20px;
+      padding: 4px 12px;
+    }
+  }
+}
+.classContent {
+  .classContentItem {
+    .classContentSpan {
+      display: flex;
+      justify-content: center;
+      padding: 30px 0;
+    }
+    .classContentImg {
+      width: 100%;
+    }
+    .classContentImgBox {
+      position: relative;
+      width: 100%;
+      .classContentImg {
+        width: 100%;
+        height: auto;
+        display: block;
+      }
+      .text-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        .coupon {
+          display: flex;
+          position: relative;
+          height: 90px;
+          margin-top: 20px;
+          width: 100%;
+          padding: 3px 0;
+          background: url('https://qjstatic.oss-cn-shanghai.aliyuncs.com/SZRC/image/youhuibg.png') no-repeat;
+          background-size: 352px 98px;
+          .left {
+            width: 34%;
+            height: 90px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            .card {
+              font-size: 20px;
+              color: #eb5555;
+            }
+            .price {
+              font-size: 12px;
+              color: #888;
+            }
+          }
+          .right {
+            height: 90px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-left: 0;
+            .right-container {
+              display: flex;
+              flex-direction: column;
+              justify-content: space-around;
+            }
+
+            .date {
+              margin-top: 15px;
+              font-size: 12px;
+              color: #888;
+            }
+            .get_btn,.not_btn {
+              width: 68px;
+              height: 20px;
+              line-height: 20px;
+              text-align: center;
+              color: #f1f1f1;
+              border-radius: 20px;
+            }
+            .get_btn {
+              background-color: #eb5555;
+            }
+            .not_btn {
+              background-color: #ccc;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.cube-container {
+  display: grid;
+  &.arrange-4 {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    .cube-item {
+      flex: 0 0 auto;
+      width: 30%;
+      max-width: 30%;
+      .goodsImg {
+        width: 100%;
+        height: 100%;
+        aspect-ratio: 1;
+      }
+      .goodsDescription {
+        .goodsPrice {
+          font-size: 18px;
+          .scribing {
+            font-size: 14px;
+          }
+        }
+        .goodsName {
+          font-size: 20px;
+        }
+      }
+    }
+    .cube-item:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+  &.arrange-3 {
+    display: flex;
+    overflow-x: scroll;
+    .cube-item {
+      flex: 0 0 auto;
+      width: 32%;
+      max-width: 32%;
+      .goodsImg {
+        width: 100%;
+        height: 100%;
+        aspect-ratio: 1;
+      }
+      .goodsDescription {
+        .goodsPrice {
+          font-size: 18px;
+          .scribing {
+            font-size: 14px;
+          }
+        }
+        .goodsName {
+          font-size: 20px;
+        }
+      }
+    }
+    .cube-item:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+  &.arrange-2 {
+    grid-template-columns: repeat(2, 1fr);
+    .cube-item {
+      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-1 {
+    .cube-item {
+      display: flex;
+      justify-content: space-around;
+      height: 100px;
+
+      .imgWrapper {
+        .goodsImg {
+          width: 100px;
+          height: 100px;
+        }
+      }
+
+      .goodsDescription {
+        position: relative;
+        width: 100%;
+        margin-left: 20px;
+        .goodsName {
+          height: auto;
+          font-size: 16px;
+        }
+        .footerContent {
+          .goodsPrice {
+            font-size: 16px;
+            .scribing {
+              font-size: 12px;
+            }
+          }
+        }
+        .goodsBuyWrapper {
+          position: relative;
+          .goodsBuy {
+            position: absolute;
+            top: 0;
+            right: 0;
+          }
+        }
+      }
+    }
+  }
+
+  .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 {
+        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-end;
+        .goodsPrice {
+          color: #f53a50;
+          font-weight: 600;
+          .scribing {
+            display: inline-block;
+            color: #ccc;
+            text-decoration: line-through;
+            font-weight: normal;
+          }
+        }
+      }
+
+      .goodsBuy {
+      }
+    }
+  }
+}
+</style>