商品品牌列表组件

src/components/brandList/ItemModule.vue

+<template>
+  <div class="product-item" @click="clickHandle" :class="{'item-row':layoutType=='row'}">
+    <div class="product-img">
+      <!-- <img v-lazy="img" alt="" width="" /> -->
+      <image :src="img" mode="widthFix" alt="" width="" ></image>
+    </div>
+    <div class="product-info">
+      <span class="name">{{ name }}</span>
+      <div class="des">{{ des }}</div>
+      <slot name="info"></slot>
+      <!-- {{ productText }} -->
+    </div>
+    <div class="product-footer">
+      <!-- <slot name="footer"></slot> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    img: {
+      type: String,
+    },
+    name: {
+      type: String,
+      default: "",
+    },
+    des: {
+      type: String,
+      default: "",
+    },
+    layoutType: {
+      type: String,
+      default: 'column',
+    },
+  },
+  methods: {
+    clickHandle() {
+      // debugger
+      this.$emit("click");
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.product-item {
+  font-size: 16px;
+  background-color: #fff;
+  border-radius: 0.4em;
+  overflow: hidden;
+  .product-img {
+    position: relative;
+  }
+  .product-info {
+    font-size: 13px;
+    margin: 5px;
+    color: #888888;
+    .name {
+      display: flex;
+      font-size: 13px;
+      justify-content: space-between;
+      width: 80%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: #262626;
+      margin-bottom: 2px;
+    }
+    .des {
+      line-height: 18px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+  }
+}
+.item-row{
+  display: flex;
+}
+</style>
\ No newline at end of file

src/components/brandList/SkeletonBlock.vue

+<template>
+  <!-- 通用骨架块 -->
+  <div v-if="loading" class="SkeletonBlock" :style="{ '--blockWidth': 100 / 2 - 2 + '%' }" :class="{ 'SkeletonRow': type == 'row', 'SkeletonCol': type == 'col', 'SkeletonFlow': type == 'flow' }">
+    <div :style="{ 'width': SkeletonItemWidth, 'padding-top': height + '%' }" class="skeleton-animate SkeletonItem"
+      v-for="(item, index) in blockNumber" :key="index"></div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+export default {
+  name: "SkeletonBlock",
+  props: {
+    // 类型 支持单行 row  多列 col 瀑布流 flow
+    type: {
+      type: String,
+      default: "row",
+    },
+    // 加载状态
+    loading: {
+      type: Boolean,
+      default: true,
+    },
+    // 渲染块行数
+    row: {
+      type: Number,
+      default: 4,
+    },
+    // 列数
+    col: {
+      type: Number,
+      default: 1,
+    },
+    // 模块高度
+    height: {
+      type: Number,
+      default: 30,
+    },
+  },
+  data() {
+    return {};
+  },
+  components: {},
+  computed: {
+    blockNumber() {
+      if (this.type == 'flow') {
+        return 4;
+      }
+      return this.row * this.col;
+    },
+    SkeletonItemWidth() {
+      return this.type == 'row' ? '100%' : '48%'
+    }
+  },
+  created() { },
+  mounted() { },
+  methods: {},
+};
+</script>
+
+<style lang="scss" scoped>
+.SkeletonBlock {
+  position: relative;
+
+  .SkeletonItem {
+    width: 100%;
+    margin-bottom: 16px;
+    padding-top: 30%;
+    background-color: #f2f3f5;
+    border-radius: 4px;
+  }
+}
+
+.SkeletonRow {
+  .SkeletonItem {
+    width: 100%;
+  }
+}
+
+.SkeletonCol {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.SkeletonFlow {
+  padding: 0;
+  height: 310px;
+
+  .SkeletonItem {
+    position: absolute;
+    top: 0;
+    margin-top: 0;
+  }
+
+  .SkeletonItem:nth-child(2n) {
+    position: absolute;
+    left: 52%;
+  }
+
+  .SkeletonItem:nth-child(1) {
+    height: 180px;
+  }
+
+  .SkeletonItem:nth-child(2) {
+    height: 140px;
+  }
+
+  .SkeletonItem:nth-child(3) {
+    top: 196px;
+    height: 120px;
+  }
+
+  .SkeletonItem:nth-child(4) {
+    top: 156px;
+    height: 160px;
+  }
+}
+</style>

src/components/brandList/index.vue

+<template>
+  <div class="brand-list" v-if="showList || !render" :style="{'padding-top': (levelMargin / 16 + 'em'),'padding-bottom': (levelMargin / 16 + 'em'),'padding-left': (verticalMargin / 16 + 'em'),'padding-right': (verticalMargin / 16 + 'em'),'--lineHeight': lineHeight / 16 + 'em','--columnHeight': columnHeight / 16 + 'em','--columnDistance': columnHeight / 16 / 2 + 'em','--pictureBackgroundColor': pictureBackgroundColor}">
+    <div v-if="skeletonLoading">
+      <SkeletonBlock :loading="skeletonLoading" :type="'flow'" />
+    </div>
+    <div class="list flex" :style="{'border-radius': moduleRadius / 16 + 'em','background': modelBackgroundColor}">
+      <div class="item" v-for="(item, index) in list" :key="index" :style="{'margin-bottom':index == list.length-1?lineHeight / 16 + 'em':''}">
+        <div class="ItemModule ItemModule1" :style="{'margin-top':lineHeight / 16 + 'em', 'margin-left':index%2==0?columnHeight / 16 + 'em':columnHeight / 16 / 2 + 'em', 'margin-right':index%2==1?columnHeight / 16 + 'em':columnHeight / 16 / 2 + 'em'}">
+          <ItemModule :img="item.brandLogo" :name="item.brandName" :des="item.remark" @click="itemClick(item)">
+          </ItemModule>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ItemModule from "./ItemModule.vue";
+import SkeletonBlock from "./SkeletonBlock.vue";
+const app = getApp();
+export default {
+  name: "brand-list",
+  props: {
+    render: {
+      type: Boolean,
+      default: true,
+    },
+    datas: {
+      type: Object,
+      default: () => { return {} },
+    },
+  },
+  data() {
+    return {
+      skeletonLoading: true,
+      loading: false,
+      finished: false,
+      showList: true,
+      list: [],
+    }
+  },
+  components: {
+    ItemModule,
+    SkeletonBlock
+  },
+  computed: {
+    moduleRadius() {
+      return this.datas.componentData.moduleRadius;
+    },
+    levelMargin() {
+      return this.datas.componentData.levelMargin;
+    },
+    verticalMargin() {
+      return this.datas.componentData.verticalMargin;
+    },
+    lineHeight() {
+      return this.datas.componentData.lineHeight;
+    },
+    columnHeight() {
+      return this.datas.componentData.columnHeight;
+    },
+    modelBackgroundColor() {
+      return this.datas.componentData.modelBackgroundColor;
+    },
+    pictureBackgroundColor() {
+      return this.datas.componentData.pictureBackgroundColor;
+    }
+  },
+  created() { },
+  mounted() {
+    this.skeletonLoading = true;
+    if (!this.render) {
+      this.skeletonLoading = false;
+    }
+    this.init();
+  },
+  methods: {
+    init() {
+      console.log("--------------91")
+      let query = { page: 1, rows: 100000 };
+      app.goodsApi.queryProductBrand(query).then(res => {
+        if (res.data.code == 200) {
+          res.data.data.list.forEach(item => {
+            item.brandLogo = app.DFSImg(item.brandLogo, 400, 400, null, 1);
+            item.firstLetter = item.brandName.slice(0, 1);
+          })
+          console.log(res.data, '----------------100')
+          this.list = res.data.data.list.sort((a, b) => a.firstLetter.localeCompare(b.firstLetter, 'zh'));
+          console.log(this.list, '----------------list')
+        }
+        this.skeletonLoading = false;
+      })
+    },
+    itemClick(item) {
+      if (!this.render) {
+        return;
+      }
+      let productInfoReq = {
+        brandIdList: [item.id]
+      }
+      app.$themeToLink({
+        type: 1,
+        link: `/goodsSearch/goodsSearch?productInfoReq=${JSON.stringify(productInfoReq)}`,
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.brand-list {
+  .list {
+    flex-wrap: wrap;
+
+    .item {
+      width: 50%;
+
+      .ItemModule1 {
+        // margin-top: var(--lineHeight);
+
+        .product-img {
+          background: var(--pictureBackgroundColor);
+        }
+      }
+    }
+
+    .item:nth-child(2n - 1) {
+      .ItemModule1 {
+        // margin-left: var(--columnHeight);
+        // margin-right: var(--columnDistance);
+
+      }
+    }
+
+    .item:nth-child(2n) {
+      .ItemModule1 {
+        // margin-left: var(--columnDistance);
+        // margin-right: var(--columnHeight);
+      }
+    }
+
+    .item:last-child {
+      // margin-bottom: var(--lineHeight);
+    }
+
+  }
+}
+</style>

src/pages/home/index.vue

@@ -105,6 +105,9 @@
           <div v-if="item.componentCode == 'member-info' && item.componentInfo.visible == 1">
             <member-info :datas="item"></member-info>
           </div>
+          <div v-if="item.componentCode == 'brand-list' && item.componentInfo.visible == 1">
+            <brandList :datas="item"></brandList>
+          </div>
 
         </div>
         <bottomCont v-if="showbottomCont"></bottomCont>
@@ -161,6 +164,7 @@ import spellGroup from '@/components/activity/spellGroup'
 import birthPopup from '@/components/birthPopup/birthPopup.vue'
 import birth from '@/api/popup'
 import couponPopup from '@/components/couponPopup.vue'
+import brandList from '@/components/brandList/index.vue'
 import NewUser from "../../components/newCustomer/newUser";
 import NewPolite from "../../components/newCustomer/newPolite";
 import customList from "../../components/custom-list";
@@ -233,7 +237,8 @@ export default {
     'member-info':memberInfo,
     GoodsFliters,
     SelectGoods,
-    TwoBAddCart
+    TwoBAddCart,
+    brandList
   },
   computed: {
     applySucessEntryFlag() {