cyy-vue-material 7.0.19 → 7.0.21

package/src/package/cyy-goods/cyy-goods.vue

@@ -1,317 +1,317 @@
-<template>
-  <div>
-    <div v-if="!listArr.length" :style="noDataStyle">请选择商品</div>
-    <div v-else>
-      <div
-        :class="['cube-container', `arrange-${props.arrange}`, { isLc: isLc }]"
-        :style="{
-          marginTop: `${props.marginTop}px`,
-          marginBottom: `${props.marginBottom}px`,
-          gap: `${props.margin}px`,
-        }"
-      >
-        <div v-for="(item, index) in listArr" class="cube-item" :key="item.skuCode" @click="goGoodsDetail(item)">
-          <div class="imgWrapper">
-            <div
-              v-if="isLc === false && (item.goodsSupplynum <= 0 || item.goodsProperty5 === '1')"
-              class="imgMarked"
-              :style="{
-                borderRadius: `${props.borderRadius}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: `${props.borderRadius}px`,
-              }"
-            />
-          </div>
-
-          <div class="goodsDescription">
-            <div v-if="isLc === true && props.arrange === 2" class="specialGoodsName">{{ item.goodsName }}</div>
-            <div v-else class="goodsName">{{ item.goodsName }}</div>
-            <section class="footerContent">
-              <div class="goodsPrice">
-                ￥{{ item.pricesetNprice }}
-                <div class="scribing" v-if="props.markedPrice === 1">￥{{ item.pricesetMakeprice }}</div>
-              </div>
-              <div class="goodsBuy">立即购买</div>
-            </section>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { fetchGoodImpl, isLc, getUrl } from "../../utils/index.js";
-import { get } from "lodash-es";
-export default {
-  name: "cyy-goods",
-  props: {
-    props: {
-      goods: Array,
-      SelectGoods: Object,
-      arrange: Number,
-      borderRadius: Number,
-      margin: Number,
-      markedPrice: Number,
-      marginTop: Number,
-      marginBottom: Number,
-    },
-  },
-  data() {
-    return {
-      listArr: [],
-      noDataStyle: {
-        width: "100%",
-        height: "180px",
-        lineHeight: "180px",
-        fontSize: "30px",
-        backgroundColor: "#ccc",
-        color: "#aaa",
-        textAlign: "center",
-      },
-      domainNameUrl: "",
-      isLc: isLc,
-    };
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    async init() {
-      this.domainNameUrl = getUrl(this);
-      const { goods = [] } = this.props;
-      const goodsCode = goods.toString();
-      const paramObj = { goodsCode };
-      const res = await fetchGoodImpl(this, paramObj);
-      this.listArr = get(res, "list", []);
-      console.log("🐽🐽🐽🐽🐽🐽🐽🐽w", this.listArr);
-    },
-
-    goGoodsDetail(item) {
-      if (isLc) {
-        return;
-      }
-      const { skuCode } = item;
-      let params = {
-        skuNo: skuCode,
-      };
-      this.$routers.push("detail", params);
-    },
-
-    getMaskState(state) {
-      if (state === "1") {
-        return "预售中";
-      } else {
-        return "补货中";
-      }
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.cube-container {
-  display: grid;
-  &.arrange-1 {
-    grid-template-columns: repeat(1, 1fr);
-    .cube-item {
-      .goodsImg {
-        width: 100%;
-        height: 100%;
-        aspect-ratio: 1;
-        margin-left: auto;
-        margin-right: auto;
-      }
-      .goodsDescription {
-        .goodsName {
-          font-size: 20px;
-        }
-        .footerContent {
-          .goodsPrice {
-            font-size: 18px;
-            .scribing {
-              font-size: 14px;
-            }
-          }
-        }
-      }
-    }
-  }
-  &.arrange-2 {
-    grid-template-columns: repeat(2, 1fr);
-    .cube-item {
-      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-3 {
-    display: flex;
-    overflow-x: scroll;
-    .cube-item {
-      flex: 0 0 auto;
-      width: 100%;
-      max-width: 100%;
-      .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-4 {
-    .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;
-            border-radius: 5px;
-            background-color: red;
-            color: white;
-            align-self: flex-end;
-            font-size: 12px;
-          }
-        }
-      }
-    }
-  }
-
-  .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 {
-        text-align: center;
-        border-radius: 5px;
-        background-color: red;
-        color: white;
-        align-self: flex-end;
-        font-size: 12px;
-        line-height: 22px;
-        width: 5em;
-        text-align: center;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div>
+    <div v-if="!listArr.length" :style="noDataStyle">请选择商品</div>
+    <div v-else>
+      <div
+        :class="['cube-container', `arrange-${props.arrange}`, { isLc: isLc }]"
+        :style="{
+          marginTop: `${props.marginTop}px`,
+          marginBottom: `${props.marginBottom}px`,
+          gap: `${props.margin}px`,
+        }"
+      >
+        <div v-for="(item, index) in listArr" class="cube-item" :key="item.skuCode" @click="goGoodsDetail(item)">
+          <div class="imgWrapper">
+            <div
+              v-if="isLc === false && (item.goodsSupplynum <= 0 || item.goodsProperty5 === '1')"
+              class="imgMarked"
+              :style="{
+                borderRadius: `${props.borderRadius}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: `${props.borderRadius}px`,
+              }"
+            />
+          </div>
+
+          <div class="goodsDescription">
+            <div v-if="isLc === true && props.arrange === 2" class="specialGoodsName">{{ item.goodsName }}</div>
+            <div v-else class="goodsName">{{ item.goodsName }}</div>
+            <section class="footerContent">
+              <div class="goodsPrice">
+                ￥{{ item.pricesetNprice }}
+                <div class="scribing" v-if="props.markedPrice === 1">￥{{ item.pricesetMakeprice }}</div>
+              </div>
+              <div class="goodsBuy">立即购买</div>
+            </section>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { fetchGoodImpl, isLc, getUrl } from "../../utils/index.js";
+import { get } from "lodash-es";
+export default {
+  name: "cyy-goods",
+  props: {
+    props: {
+      goods: Array,
+      SelectGoods: Object,
+      arrange: Number,
+      borderRadius: Number,
+      margin: Number,
+      markedPrice: Number,
+      marginTop: Number,
+      marginBottom: Number,
+    },
+  },
+  data() {
+    return {
+      listArr: [],
+      noDataStyle: {
+        width: "100%",
+        height: "180px",
+        lineHeight: "180px",
+        fontSize: "30px",
+        backgroundColor: "#ccc",
+        color: "#aaa",
+        textAlign: "center",
+      },
+      domainNameUrl: "",
+      isLc: isLc,
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    async init() {
+      this.domainNameUrl = getUrl(this);
+      const { goods = [] } = this.props;
+      const goodsCode = goods.toString();
+      const paramObj = { goodsCode };
+      const res = await fetchGoodImpl(this, paramObj);
+      this.listArr = get(res, "list", []);
+      console.log("🐽🐽🐽🐽🐽🐽🐽🐽w", this.listArr);
+    },
+
+    goGoodsDetail(item) {
+      if (isLc) {
+        return;
+      }
+      const { skuCode } = item;
+      let params = {
+        skuNo: skuCode,
+      };
+      this.$routers.push("detail", params);
+    },
+
+    getMaskState(state) {
+      if (state === "1") {
+        return "预售中";
+      } else {
+        return "补货中";
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.cube-container {
+  display: grid;
+  &.arrange-1 {
+    grid-template-columns: repeat(1, 1fr);
+    .cube-item {
+      .goodsImg {
+        width: 100%;
+        height: 100%;
+        aspect-ratio: 1;
+        margin-left: auto;
+        margin-right: auto;
+      }
+      .goodsDescription {
+        .goodsName {
+          font-size: 20px;
+        }
+        .footerContent {
+          .goodsPrice {
+            font-size: 18px;
+            .scribing {
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+  }
+  &.arrange-2 {
+    grid-template-columns: repeat(2, 1fr);
+    .cube-item {
+      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-3 {
+    display: flex;
+    overflow-x: scroll;
+    .cube-item {
+      flex: 0 0 auto;
+      width: 100%;
+      max-width: 100%;
+      .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-4 {
+    .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;
+            border-radius: 5px;
+            background-color: red;
+            color: white;
+            align-self: flex-end;
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+
+  .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 {
+        text-align: center;
+        border-radius: 5px;
+        background-color: red;
+        color: white;
+        align-self: flex-end;
+        font-size: 12px;
+        line-height: 22px;
+        width: 5em;
+        text-align: center;
+      }
+    }
+  }
+}
+</style>