cyy-vue-material 7.0.19 → 7.0.21

package/src/package/cyy-ArsenalClass/cyy-ArsenalClass.vue

@@ -1,564 +1,564 @@
-<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>
-            </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>
-          </div>
-        </div>
-      </scroll-view>
-      <!--  -->
-    </div>
-  </div>
-</template>
-
-<script>
-import { isLc, getUrl, fetchGoodImpl } from "../../utils/index.js";
-import { find, querySkuFromJm } from "../../api/index.js";
-import { fetchPost } from "../../api/http.js";
-import { query } from "../../api/urlQuery.js";
-export default {
-  name: "cyy-ArsenalClass",
-  // 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: {
-      headImg: String, //头部展示图
-      classList: Array, //选择分类
-      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,
-    };
-  },
-  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) {
-        //分类
-        if (item.changeGoodsType == 1) {
-          if (isLc) {
-            const url = `${querySkuFromJm}&rows=20&page=1&classtreeCode=${item.classtreeCode}&channelCode=${query.channelCode}`;
-            const res = await fetchPost(url);
-            // 将返回的res.list设置给当前元素的goodsList属性
-            item.goodsList = res.list;
-          } else {
-            const url = `${find}?vendibilityFlag=true&childFlag=true&bizType=goods&hjFlag=true&area=北京朝阳区八里庄街道&page=1&rows=20&searchType=match_phrase&goodsType=00,40,41,60,61,62,32&classtreeCode=${item.classtreeCode}&channelCode=${query.channelCode}`;
-            const res = await fetchPost(url);
-            item.goodsList = res.list;
-          }
-        } 
-        //商品        
-        if (item.changeGoodsType == 2) {
-          // 从 URL 中获取 channelCode
-          const urlParams = new URLSearchParams(window.location.hash.split('?')[1] || window.location.search);
-          const channelCode = urlParams.get('channelCode') || '';
-          const url = `${querySkuFromJm}&rows=200&page=1&goodsCode=${item.changeGoodsStr.replace('arsenalGoodsClass,','')}&channelCode=${channelCode}`;
-          const res = await fetchPost(url);
-          // 将返回的res.list设置给当前元素的goodsList属性
-          item.goodsList = res.list;
-        } 
-
-      }
-      that.classDomainList = tempList;
-    },
-    async getGoodsList(that) {
-      // 遍历classDomainList
-      for (let item of that.classDomainList) {
-        // 调用getNotice方法，传入classtreeCode
-        let params = {
-          vendibilityFlag: true,
-          childFlag: true,
-          bizType: "goods",
-          hjFlag: true,
-          area: that.$storage.get("addressValue") ? that.$storage.get("addressValue") : "北京朝阳区八里庄街道",
-          page: 1,
-          rows: 20,
-          searchType: "match_phrase",
-          goodsType: "00,40,41,60,61,62,32",
-          classtreeCode: item.classtreeCode
-        };
-        //分类
-        if (item.changeGoodsType == 1) {
-          const res = await that.http.get(`${find}`, params);   
-          // 将返回的res.list设置给当前元素的goodsList属性
-          that.$set(item, "goodsList", res.list);
-        } 
-        let paramObj = {
-          goodsCode: item.changeGoodsStr.replace('arsenalGoodsClass,','')
-        }
-        //商品
-        if (item.changeGoodsType == 2) {
-          const res = await fetchGoodImpl(that, paramObj);
-          // 将返回的res.list设置给当前元素的goodsList属性
-          that.$set(item, "goodsList", res.list);
-        } 
-      }
-    },
-    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;
-       }
-    }
-
-  }
-}
-.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
+            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>
+            </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>
+          </div>
+        </div>
+      </scroll-view>
+      <!--  -->
+    </div>
+  </div>
+</template>
+
+<script>
+import { isLc, getUrl, fetchGoodImpl } from "../../utils/index.js";
+import { find, querySkuFromJm } from "../../api/index.js";
+import { fetchPost } from "../../api/http.js";
+import { query } from "../../api/urlQuery.js";
+export default {
+  name: "cyy-ArsenalClass",
+  // 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: {
+      headImg: String, //头部展示图
+      classList: Array, //选择分类
+      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,
+    };
+  },
+  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) {
+        //分类
+        if (item.changeGoodsType == 1) {
+          if (isLc) {
+            const url = `${querySkuFromJm}&rows=20&page=1&classtreeCode=${item.classtreeCode}&channelCode=${query.channelCode}`;
+            const res = await fetchPost(url);
+            // 将返回的res.list设置给当前元素的goodsList属性
+            item.goodsList = res.list;
+          } else {
+            const url = `${find}?vendibilityFlag=true&childFlag=true&bizType=goods&hjFlag=true&area=北京朝阳区八里庄街道&page=1&rows=20&searchType=match_phrase&goodsType=00,40,41,60,61,62,32&classtreeCode=${item.classtreeCode}&channelCode=${query.channelCode}`;
+            const res = await fetchPost(url);
+            item.goodsList = res.list;
+          }
+        } 
+        //商品        
+        if (item.changeGoodsType == 2) {
+          // 从 URL 中获取 channelCode
+          const urlParams = new URLSearchParams(window.location.hash.split('?')[1] || window.location.search);
+          const channelCode = urlParams.get('channelCode') || '';
+          const url = `${querySkuFromJm}&rows=200&page=1&goodsCode=${item.changeGoodsStr.replace('arsenalGoodsClass,','')}&channelCode=${channelCode}`;
+          const res = await fetchPost(url);
+          // 将返回的res.list设置给当前元素的goodsList属性
+          item.goodsList = res.list;
+        } 
+
+      }
+      that.classDomainList = tempList;
+    },
+    async getGoodsList(that) {
+      // 遍历classDomainList
+      for (let item of that.classDomainList) {
+        // 调用getNotice方法，传入classtreeCode
+        let params = {
+          vendibilityFlag: true,
+          childFlag: true,
+          bizType: "goods",
+          hjFlag: true,
+          area: that.$storage.get("addressValue") ? that.$storage.get("addressValue") : "北京朝阳区八里庄街道",
+          page: 1,
+          rows: 20,
+          searchType: "match_phrase",
+          goodsType: "00,40,41,60,61,62,32",
+          classtreeCode: item.classtreeCode
+        };
+        //分类
+        if (item.changeGoodsType == 1) {
+          const res = await that.http.get(`${find}`, params);   
+          // 将返回的res.list设置给当前元素的goodsList属性
+          that.$set(item, "goodsList", res.list);
+        } 
+        let paramObj = {
+          goodsCode: item.changeGoodsStr.replace('arsenalGoodsClass,','')
+        }
+        //商品
+        if (item.changeGoodsType == 2) {
+          const res = await fetchGoodImpl(that, paramObj);
+          // 将返回的res.list设置给当前元素的goodsList属性
+          that.$set(item, "goodsList", res.list);
+        } 
+      }
+    },
+    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;
+       }
+    }
+
+  }
+}
+.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>