[fixed] poster page style

src/assets/css/style.css

@@ -505,8 +505,8 @@ border-radius:2rem;top:-0.1rem;right:0;height:0.3rem;line-height:0.3rem;padding:
 .product-con .bnt>div{width:1.5rem;text-align:center;line-height:0.76rem;}
 .product-con .bnt_no>div{width:2.22rem;text-align:center;line-height:0.76rem;}
 .product-con .bnt .joinCart{border-radius:0.5rem 0 0 0.5rem;background-color:#ff3366;}
-.product-con .bnt .buy{background-color:#2c2c2c;}
-.product-con .bnt .share{border-radius:0 0.5rem 0.5rem 0;background-color:#ff3366; }
+.product-con .bnt .buy{background-color:#2c2c2c;border-radius:0 0.5rem 0.5rem 0}
+.product-con .bnt .share{border-radius:0.5rem;background-color:#ff3366;}
 .product-con .bnt .share .top{height: 0.2rem; font-size: 0.3rem; line-height:0.5rem;}
 .product-con .bnt .share .down{height: 0.1rem; font-size: 0.1rem; line-height:0.3rem; padding-top: 0.2rem;}
 
@@ -719,7 +719,7 @@ border-radius:2rem;top:-0.1rem;right:0;height:0.3rem;line-height:0.3rem;padding:
 .poster-poster .poster{width:6.9rem;height:100%;margin:0 auto;}
 .poster-poster .poster img{width:100%;height:100%;display:block;}
 /*分销海报*/
-.distribution-posters .slider-banner{width:100%;height:10rem;position:relative;margin-top:1rem;}
+.distribution-posters .slider-banner{width:100%;position:relative;margin-top:1rem;}
 .distribution-posters .slider-banner .swiper-slide{width:6rem!important;height:100%;}
 .distribution-posters .slide-image{width:100%;height:100%;border-radius:0.15rem;}
 .distribution-posters .keep{font-size:0.3rem;color:#fff;width:6rem;height:0.8rem;border-radius:0.5rem;text-align:center;

src/views/user/promotion/Poster.vue

@@ -2,7 +2,13 @@
   <div class="distribution-posters">
     <NavBar title="推广名片"></NavBar>
     <div class="slider-banner banner">
-      <swiper class="swiper-wrapper" :options="swiperPosters" ref="mySwiper">
+      <swiper
+        class="swiper-wrapper"
+        id="poster"
+        :options="swiperPosters"
+        @click="saveImg"
+        ref="mySwiper"
+      >
         <swiperSlide
           class="swiper-slide"
           v-for="(item, index) in info"
@@ -15,7 +21,7 @@
     <!--<div class="keep bg-color-red" @click="saveImg">保存海报</div>-->
     <div class="preserve acea-row row-center-wrapper">
       <div class="line"></div>
-      <div class="tip">长按保存图片</div>
+      <div class="tip">手机截屏保存图片</div>
       <div class="line"></div>
     </div>
   </div>
@@ -40,6 +46,7 @@ import { swiper, swiperSlide } from "vue-awesome-swiper";
 import "@assets/css/swiper.min.css";
 import { getSpreadImg } from "../../../api/user";
 import NavBar from "@components/NavBar";
+// import Dom from "@libs/dom";
 export default {
   name: "Poster",
   components: {
@@ -92,32 +99,32 @@ export default {
           that.$dialog.message(err.msg);
         }
       );
+    },
+    downloadIamge: function(imgsrc, name) {
+      let image = new Image();
+      image.setAttribute("crossOrigin", "anonymous");
+      image.onload = function() {
+        let canvas = document.createElement("canvas");
+        canvas.width = image.width;
+        canvas.height = image.height;
+        let context = canvas.getContext("2d");
+        context.drawImage(image, 0, 0, image.width, image.height);
+        let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
+        let a = document.createElement("a"); // 生成一个a元素
+        let event = new MouseEvent("click"); // 创建一个单击事件
+        a.download = name || "photo"; // 设置图片名称
+        a.href = url; // 将生成的URL设置为a.href属性
+        a.dispatchEvent(event); // 触发a的单击事件
+      };
+      image.src = imgsrc;
+    },
+    saveImg: function() {
+      console.log(this.info[this.activeIndex].wap_poster);
+      this.downloadIamge(
+        this.info[this.activeIndex].wap_poster,
+        "poster" + this.activeIndex
+      );
     }
-    // downloadIamge: function(imgsrc, name) {
-    //   let image = new Image();
-    //   image.setAttribute("crossOrigin", "anonymous");
-    //   image.onload = function() {
-    //     let canvas = document.createElement("canvas");
-    //     canvas.width = image.width;
-    //     canvas.height = image.height;
-    //     let context = canvas.getContext("2d");
-    //     context.drawImage(image, 0, 0, image.width, image.height);
-    //     let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
-    //     let a = document.createElement("a"); // 生成一个a元素
-    //     let event = new MouseEvent("click"); // 创建一个单击事件
-    //     a.download = name || "photo"; // 设置图片名称
-    //     a.href = url; // 将生成的URL设置为a.href属性
-    //     a.dispatchEvent(event); // 触发a的单击事件
-    //   };
-    //   image.src = imgsrc;
-    // },
-    // saveImg: function() {
-    //   console.log(this.info[this.activeIndex].wap_poster);
-    //   this.downloadIamge(
-    //     this.info[this.activeIndex].wap_poster,
-    //     "poster" + this.activeIndex
-    //   );
-    // }
   }
 };
 </script>