增加基本项目配置

pages/user/promotion/Poster/index.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="distribution-posters">
+    <div class="slider-banner banner">
+      <swiper indicatorDots="true">
+        <block v-for="(item, infoIndex) in info" :key="infoIndex">
+          <swiper-item>
+            <img class="slide-image" :src="item.wap_poster" mode="widthFix" show-menu-by-longpress />
+          </swiper-item>
+        </block>
+      </swiper>
+    </div>
+    <div class="keep bg-color-red" @click="saveImg">保存海报</div>
+  </div>
+</template>
+<script>
+// import { swiper, swiperSlide } from "vue-awesome-swiper";
+import { getSpreadImg } from "@/api/user";
+
+export default {
+  name: "Poster",
+  components: {
+    // swiper,
+    // swiperSlide
+  },
+  props: {},
+  data: function() {
+    return {
+      swiperPosters: {
+        speed: 1000,
+        effect: "coverflow",
+        slidesPerView: "auto",
+        centeredSlides: true,
+        coverflowEffect: {
+          rotate: 0, // 旋转的角度
+          stretch: -20, // 拉伸   图片间左右的间距和密集度
+          depth: 100, // 深度   切换图片间上下的间距和密集度
+          modifier: 3, // 修正值 该值越大前面的效果越明显
+          slideShadows: false // 页面阴影效果
+        },
+        observer: true,
+        observeParents: true
+      },
+      info: [],
+      activeIndex: 0
+    };
+  },
+  mounted: function() {
+    this.getIndex();
+    let that = this;
+    // this.swiper.on("slideChange", function() {
+    //   that.activeIndex = that.swiper.activeIndex;
+    // });
+  },
+  computed: {
+    swiper() {
+      // return this.$refs.mySwiper.swiper;
+    }
+  },
+  methods: {
+    getIndex: function() {
+      let that = this;
+      getSpreadImg().then(
+        res => {
+          that.info = res.data;
+        },
+        err => {
+          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;
+
+      var that = this;
+      this.isDown = true;
+      var downloadUrl = imgsrc;
+
+      if (!wx.saveImageToPhotosAlbum) {
+        wx.showModal({
+          title: "提示",
+          content:
+            "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。"
+        });
+        that.openDialogVisible = true;
+
+        return;
+      }
+
+      // 可以通过 wx.getSetting 先查询一下用户是否授权了 "scope.writePhotosAlbum" 这个 scope
+      wx.getSetting({
+        success(res) {
+          if (!res.authSetting["scope.writePhotosAlbum"]) {
+            that.openDialogVisible = true;
+
+            // 接口调用询问
+            wx.authorize({
+              scope: "scope.writePhotosAlbum",
+              success() {
+                that.downloadImage(downloadUrl);
+              },
+              fail() {
+                // 用户拒绝了授权
+                // 打开设置页面
+                wx.openSetting({
+                  success: function(data) {},
+                  fail: function(data) {}
+                });
+              }
+            });
+          } else {
+            that.downloadImage(downloadUrl);
+          }
+        },
+        fail(res) {
+          that.openDialogVisible = true;
+        }
+      });
+    },
+    saveImg: function() {
+      this.downloadIamge(
+        this.info[this.activeIndex].wap_poster,
+        "poster" + this.activeIndex
+      );
+    }
+  }
+};
+</script>
+
+<style scoped>
+.distribution-posters {
+  height: 100%;
+}
+.banenr {
+  height: 100%;
+}
+.banner swiper {
+  height: 100%;
+}
+.banner .slide-image {
+  width: 100%;
+  height: auto;
+}
+</style>

pages/user/promotion/Poster/main.js

@@ -0,0 +1,5 @@
+import Vue from 'vue'
+import App from './index'
+
+const app = new Vue(App)
+app.$mount()