cyy-vue-material 7.0.19 → 7.0.21

package/src/package/cyy-ArsenalTop/cyy-ArsenalTop.vue

@@ -1,328 +1,328 @@
-<template>
-  <div>
-    <div v-if="lowCode">
-      <div class="title-l" slot="left" :style="{ 'background-color': color }">
-        <div class="title-t">{{ props.siteName || "人才优选 品质优选" }}</div>
-      </div>
-      <div class="Box" :style="{ 'background-color': color }">
-        <div class="boxBgL">
-          <div class="one" :style="{ 'background-color': color }"></div>
-          <div class="two" :style="{ 'background-color': color }"></div>
-        </div>
-        <!-- 搜索栏 -->
-        <div class="search" style="display: flex; justify-content: center; position: relative; z-index: 1">
-          <div class="search--input" style="padding: 2px 112px; border: 1px solid white; border-radius: 20px">
-            <div class="search--input--box" style="color: #fff">
-              <span>搜索您喜欢的商品</span>
-              <img
-                src="https://static-rs.s3.cn-east-2.jdcloud-oss.com/decorate/search.png"
-                style="width: 20px; height: 20px; margin-top: 7px; margin-right: 10px; position: absolute; top: -4px; right: 18px"
-              />
-            </div>
-          </div>
-        </div>
-        <!-- 标签 -->
-        <div class="tag" style="justify-content: center">
-          <div class="tag--item">
-            <div class="" style="color: #fff; font-size: 24rpx; position: relative; z-index: 1">
-              <img v-if="props.iconImg" :lazy-load="true" :src="props.iconImg" mode="" style="width: 16px; height: 16px; margin-right: 8rpx" />
-              <img v-else :lazy-load="true" :src="props.iconImg" mode="" style="width: 16px; height: 16px; margin-right: 8rpx" />{{ props.mallSlogan }}
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="lowCode-warp" :style="{ marginTop: props.marginTop + 'px', marginBottom: props.marginBottom + 'px' }">
-        <img :src="resultArrImg(resultArr)" alt="" style="width: 100%" />
-        <ul>
-          <li v-for="(item, index) in resultArr" :key="index"></li>
-        </ul>
-      </div>
-      <!-- <div class="coupon" v-if="props.coupon === 0">
-        <img :src="props.couponImg" mode="" />
-      </div> -->
-    </div>
-    <template v-else>
-      <div class="Box">
-        <div class="boxBg">
-          <div class="one" :style="{ 'background-color': color }"></div>
-          <div class="two" :style="{ 'background-color': color }"></div>
-        </div>
-        <!-- 搜索栏 -->
-        <div class="search">
-          <div class="search--input" @click="ToSearch">
-            <div class="search--input--box">搜索您喜欢的商品</div>
-            <div class="search--input--icon" :style="{ 'background-color': color }"><text class="iconfont icon-sousuo"></text></div>
-          </div>
-        </div>
-        <!-- 标签 -->
-        <div class="tag">
-          <div class="tag--item">
-            <div class="header-box" style="width: 32rpx; height: 32rpx; margin-right: 8rpx">
-              <img :lazy-load="true" :src="props.iconImg" mode="" style="width: 100%; height: 100%" />
-            </div>
-            <div class="" style="color: #fff; font-size: 24rpx">{{ props.mallSlogan }}</div>
-          </div>
-        </div>
-        <canvas id="canvasID" canvas-id="mycanvas" style="position: fixed; left: -500px"></canvas>
-      </div>
-
-      <div class="swiperBox" :style="{ marginTop: props.marginTop + 'px', marginBottom: props.marginBottom + 'px' }">
-        <div class="swiper">
-          <swiper
-            interval="4000"
-            class="swiper-content"
-            circular="true"
-            :vertical="directionResult"
-            :autoplay="autoplayResult"
-            :duration="props.autoplayInterval"
-            @change="setimg"
-          >
-            <block v-for="(item, index) in resultArr" :key="index">
-              <swiper-item class="img-item">
-                <img :style="{ bordeRadius: classifyPhotoCorner(props.photoCorner) + 'px' }" :lazy-load="true" :src="item['imgUrl']" @click="linkClick(item)" />
-              </swiper-item>
-            </block>
-          </swiper>
-        </div>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import { isLc } from "../../utils/index.js";
-import { isEmpty, isUndefined } from "lodash-es";
-export default {
-  name: "cyy-ArsenalTop",
-  data() {
-    return {
-      lowCode: isLc,
-      color: "#FD1738",
-    };
-  },
-  props: {
-    props: {
-      autoPlay: Number, //自动播放
-      autoplayInterval: Number, //轮播间隔
-      direction: Number, //方向
-      siteName: String, //站点名称
-      mallSlogan: String, //商城标语
-      iconImg: String, //ICON
-      couponImg: String, //优惠券图片
-      coupon: Number, //优惠券
-      marginTop: Number, //上边距
-      marginBottom: Number, //下边距
-      selectImg: Array, //添加图片
-    },
-  },
-  mounted() {
-    this.changeColor();
-  },
-  computed: {
-    resultArrImg() {
-      return (arr) => {
-        return arr[0]?.imgUrl || "https://static-rs.s3.cn-east-2.jdcloud-oss.com/decorate/66341675912421_.pic.jpg";
-      };
-    },
-    autoplayResult() {
-      if (this.props.autoPlay === 0) {
-        return true;
-      }
-      return false;
-    },
-    directionResult() {
-      if (this.props.direction === 0) {
-        return false;
-      }
-      return true;
-    },
-    resultArr() {
-      const { selectImg, defaultValue } = this.props;
-      const computedArr = selectImg.filter((item) => !isUndefined(item)).filter((item) => !Object.values(item).every((citem) => isUndefined(citem)));
-      let arr = defaultValue;
-      if (!isEmpty(computedArr)) {
-        arr = computedArr;
-      }
-      console.log(52, arr);
-      return arr;
-    },
-  },
-  methods: {
-    changeColor() {
-      if (this.props.selectImg.length) {
-        this.color = this.props.selectImg[0]?.color || "#FD1738";
-      }
-    },
-    classifyPhotoCorner(item) {
-      if (item === 20) {
-        return 10;
-      }
-      if (item === 50) {
-        return 20;
-      }
-      return item;
-    },
-    setimg(e) {
-      const index = e.detail.current;
-      this.color = this.props.selectImg[index]?.color || "#FD1738";
-      this.$emit("setimg", this.color);
-    },
-    ToSearch() {
-      this.$emit("ToSearch");
-    },
-    linkClick(item) {
-      this.$emit("linkClick", item);
-    },
-  },
-};
-</script>
-<style lang="less" scoped>
-.holder {
-  width: 100%;
-  padding: 10px 0;
-  height: 60px;
-  background-color: rgb(888, 431, 73);
-}
-.swiperBox {
-  width: 100%;
-  height: 150px;
-  border-radius: 10px;
-
-  .swiper {
-    width: 100%;
-    height: 150px;
-
-    .swiper-content {
-      height: 150px;
-      width: 100%;
-
-      .img-item {
-        padding: 0 12.5px;
-        box-sizing: border-box;
-      }
-    }
-
-    img {
-      width: 100%;
-      height: 100%;
-      border-radius: 10px;
-    }
-  }
-}
-.Box {
-  width: 100%;
-  position: relative;
-}
-
-.boxBg {
-  width: 100%;
-  height: 201px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: -1;
-
-  .one {
-    width: 100%;
-    height: 150px;
-  }
-
-  .two {
-    width: 100%;
-    height: 102px;
-    border-radius: 50%;
-    position: relative;
-    top: -51px;
-  }
-}
-.boxBgL {
-  width: 100%;
-  height: 201px;
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  .one {
-    width: 100%;
-    height: 150px;
-  }
-
-  .two {
-    width: 100%;
-    height: 102px;
-    border-radius: 50%;
-    position: relative;
-    top: -51px;
-  }
-}
-
-.search {
-  &--input {
-    margin: 0 auto;
-    width: 90%;
-    height: 32px;
-    background: rgba(255, 255, 255, 0.3);
-    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
-    border-radius: 17.5px;
-    text-align: center;
-    position: relative;
-
-    &--box {
-      font-size: 12px;
-      color: #fff;
-      line-height: 32px;
-    }
-
-    &--icon {
-      position: absolute;
-      top: 5px;
-      right: 5px;
-      width: 27.5px;
-      height: 22px;
-      border-radius: 17.5px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .icon-sousuo {
-        color: #fff;
-      }
-    }
-  }
-}
-
-.tag {
-  display: flex;
-  padding: 7px 0;
-
-  &--item {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}
-.title-l {
-  height: 40px;
-  .title-t {
-    color: #fff;
-    font-size: 18px;
-    padding-left: 22px;
-  }
-}
-.lowCode-warp {
-  padding: 0 20px;
-}
-.coupon {
-  width: 60px;
-  height: 60px;
-  position: fixed;
-  right: 450px;
-  z-index: 101;
-
-  img {
-    width: 55px;
-    height: 55px;
-  }
-}
-</style>
+<template>
+  <div>
+    <div v-if="lowCode">
+      <div class="title-l" slot="left" :style="{ 'background-color': color }">
+        <div class="title-t">{{ props.siteName || "人才优选 品质优选" }}</div>
+      </div>
+      <div class="Box" :style="{ 'background-color': color }">
+        <div class="boxBgL">
+          <div class="one" :style="{ 'background-color': color }"></div>
+          <div class="two" :style="{ 'background-color': color }"></div>
+        </div>
+        <!-- 搜索栏 -->
+        <div class="search" style="display: flex; justify-content: center; position: relative; z-index: 1">
+          <div class="search--input" style="padding: 2px 112px; border: 1px solid white; border-radius: 20px">
+            <div class="search--input--box" style="color: #fff">
+              <span>搜索您喜欢的商品</span>
+              <img
+                src="https://static-rs.s3.cn-east-2.jdcloud-oss.com/decorate/search.png"
+                style="width: 20px; height: 20px; margin-top: 7px; margin-right: 10px; position: absolute; top: -4px; right: 18px"
+              />
+            </div>
+          </div>
+        </div>
+        <!-- 标签 -->
+        <div class="tag" style="justify-content: center">
+          <div class="tag--item">
+            <div class="" style="color: #fff; font-size: 24rpx; position: relative; z-index: 1">
+              <img v-if="props.iconImg" :lazy-load="true" :src="props.iconImg" mode="" style="width: 16px; height: 16px; margin-right: 8rpx" />
+              <img v-else :lazy-load="true" :src="props.iconImg" mode="" style="width: 16px; height: 16px; margin-right: 8rpx" />{{ props.mallSlogan }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="lowCode-warp" :style="{ marginTop: props.marginTop + 'px', marginBottom: props.marginBottom + 'px' }">
+        <img :src="resultArrImg(resultArr)" alt="" style="width: 100%" />
+        <ul>
+          <li v-for="(item, index) in resultArr" :key="index"></li>
+        </ul>
+      </div>
+      <!-- <div class="coupon" v-if="props.coupon === 0">
+        <img :src="props.couponImg" mode="" />
+      </div> -->
+    </div>
+    <template v-else>
+      <div class="Box">
+        <div class="boxBg">
+          <div class="one" :style="{ 'background-color': color }"></div>
+          <div class="two" :style="{ 'background-color': color }"></div>
+        </div>
+        <!-- 搜索栏 -->
+        <div class="search">
+          <div class="search--input" @click="ToSearch">
+            <div class="search--input--box">搜索您喜欢的商品</div>
+            <div class="search--input--icon" :style="{ 'background-color': color }"><text class="iconfont icon-sousuo"></text></div>
+          </div>
+        </div>
+        <!-- 标签 -->
+        <div class="tag">
+          <div class="tag--item">
+            <div class="header-box" style="width: 32rpx; height: 32rpx; margin-right: 8rpx">
+              <img :lazy-load="true" :src="props.iconImg" mode="" style="width: 100%; height: 100%" />
+            </div>
+            <div class="" style="color: #fff; font-size: 24rpx">{{ props.mallSlogan }}</div>
+          </div>
+        </div>
+        <canvas id="canvasID" canvas-id="mycanvas" style="position: fixed; left: -500px"></canvas>
+      </div>
+
+      <div class="swiperBox" :style="{ marginTop: props.marginTop + 'px', marginBottom: props.marginBottom + 'px' }">
+        <div class="swiper">
+          <swiper
+            interval="4000"
+            class="swiper-content"
+            circular="true"
+            :vertical="directionResult"
+            :autoplay="autoplayResult"
+            :duration="props.autoplayInterval"
+            @change="setimg"
+          >
+            <block v-for="(item, index) in resultArr" :key="index">
+              <swiper-item class="img-item">
+                <img :style="{ bordeRadius: classifyPhotoCorner(props.photoCorner) + 'px' }" :lazy-load="true" :src="item['imgUrl']" @click="linkClick(item)" />
+              </swiper-item>
+            </block>
+          </swiper>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { isLc } from "../../utils/index.js";
+import { isEmpty, isUndefined } from "lodash-es";
+export default {
+  name: "cyy-ArsenalTop",
+  data() {
+    return {
+      lowCode: isLc,
+      color: "#FD1738",
+    };
+  },
+  props: {
+    props: {
+      autoPlay: Number, //自动播放
+      autoplayInterval: Number, //轮播间隔
+      direction: Number, //方向
+      siteName: String, //站点名称
+      mallSlogan: String, //商城标语
+      iconImg: String, //ICON
+      couponImg: String, //优惠券图片
+      coupon: Number, //优惠券
+      marginTop: Number, //上边距
+      marginBottom: Number, //下边距
+      selectImg: Array, //添加图片
+    },
+  },
+  mounted() {
+    this.changeColor();
+  },
+  computed: {
+    resultArrImg() {
+      return (arr) => {
+        return arr[0]?.imgUrl || "https://static-rs.s3.cn-east-2.jdcloud-oss.com/decorate/66341675912421_.pic.jpg";
+      };
+    },
+    autoplayResult() {
+      if (this.props.autoPlay === 0) {
+        return true;
+      }
+      return false;
+    },
+    directionResult() {
+      if (this.props.direction === 0) {
+        return false;
+      }
+      return true;
+    },
+    resultArr() {
+      const { selectImg, defaultValue } = this.props;
+      const computedArr = selectImg.filter((item) => !isUndefined(item)).filter((item) => !Object.values(item).every((citem) => isUndefined(citem)));
+      let arr = defaultValue;
+      if (!isEmpty(computedArr)) {
+        arr = computedArr;
+      }
+      console.log(52, arr);
+      return arr;
+    },
+  },
+  methods: {
+    changeColor() {
+      if (this.props.selectImg.length) {
+        this.color = this.props.selectImg[0]?.color || "#FD1738";
+      }
+    },
+    classifyPhotoCorner(item) {
+      if (item === 20) {
+        return 10;
+      }
+      if (item === 50) {
+        return 20;
+      }
+      return item;
+    },
+    setimg(e) {
+      const index = e.detail.current;
+      this.color = this.props.selectImg[index]?.color || "#FD1738";
+      this.$emit("setimg", this.color);
+    },
+    ToSearch() {
+      this.$emit("ToSearch");
+    },
+    linkClick(item) {
+      this.$emit("linkClick", item);
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+.holder {
+  width: 100%;
+  padding: 10px 0;
+  height: 60px;
+  background-color: rgb(888, 431, 73);
+}
+.swiperBox {
+  width: 100%;
+  height: 150px;
+  border-radius: 10px;
+
+  .swiper {
+    width: 100%;
+    height: 150px;
+
+    .swiper-content {
+      height: 150px;
+      width: 100%;
+
+      .img-item {
+        padding: 0 12.5px;
+        box-sizing: border-box;
+      }
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 10px;
+    }
+  }
+}
+.Box {
+  width: 100%;
+  position: relative;
+}
+
+.boxBg {
+  width: 100%;
+  height: 201px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+
+  .one {
+    width: 100%;
+    height: 150px;
+  }
+
+  .two {
+    width: 100%;
+    height: 102px;
+    border-radius: 50%;
+    position: relative;
+    top: -51px;
+  }
+}
+.boxBgL {
+  width: 100%;
+  height: 201px;
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  .one {
+    width: 100%;
+    height: 150px;
+  }
+
+  .two {
+    width: 100%;
+    height: 102px;
+    border-radius: 50%;
+    position: relative;
+    top: -51px;
+  }
+}
+
+.search {
+  &--input {
+    margin: 0 auto;
+    width: 90%;
+    height: 32px;
+    background: rgba(255, 255, 255, 0.3);
+    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
+    border-radius: 17.5px;
+    text-align: center;
+    position: relative;
+
+    &--box {
+      font-size: 12px;
+      color: #fff;
+      line-height: 32px;
+    }
+
+    &--icon {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      width: 27.5px;
+      height: 22px;
+      border-radius: 17.5px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .icon-sousuo {
+        color: #fff;
+      }
+    }
+  }
+}
+
+.tag {
+  display: flex;
+  padding: 7px 0;
+
+  &--item {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+.title-l {
+  height: 40px;
+  .title-t {
+    color: #fff;
+    font-size: 18px;
+    padding-left: 22px;
+  }
+}
+.lowCode-warp {
+  padding: 0 20px;
+}
+.coupon {
+  width: 60px;
+  height: 60px;
+  position: fixed;
+  right: 450px;
+  z-index: 101;
+
+  img {
+    width: 55px;
+    height: 55px;
+  }
+}
+</style>