Fix：2630 【商城小程序】地标好物增加分享按钮，点击后弹出分享图片

api/product.js

@@ -156,3 +156,7 @@ export function hadLike(data) {
 export function hadView(data) {
     return request.post('/landmarkGoods/news/view', data, {login: false})
 }
+
+export function getShareImg(id) {
+    return request.get('/landmarkGoods/poster/' + id, {}, {login: false})
+}

pages/home/components/shareImg.vue

@@ -0,0 +1,149 @@
+<template>
+  <view v-if="posterImageStatus" class="poster-first">
+    <div class="posterCanvasWarp">
+      <canvas class="posterCanvas" canvas-id="myCanvas"></canvas>
+    </div>
+    <view class="poster-pop" v-show="canvasStatus">
+      <img
+        src="@/static/images/poster-close.png"
+        class="close"
+        @click="posterImageClose"
+        mode="widthFix"
+      />
+      <image
+        :src="posterImage"
+        alt="tp"
+        class="poster-image"
+        show-menu-by-longpress
+        mode="widthFix"
+      />
+      <view class="keep">长按图片可以保存到手机</view>
+    </view>
+    <view class="mask"></view>
+  </view>
+</template>
+
+<script>
+import { getShareImg } from "@/api/product";
+
+export default {
+  name: "StorePoster",
+  data: function() {
+    return {
+      canvasStatus: false,
+      posterImage: "",
+      posterImageStatus: false
+    };
+  },
+  mounted: function() {},
+  methods: {
+    posterImageClose() {
+      this.posterImageStatus = false;
+      this.canvasStatus = false;
+      this.$emit("setPosterImageStatus");
+    },
+    savePosterPath(id) {
+      uni.showLoading({ title: "海报生成中", mask: true });
+      
+      getShareImg(id)
+        .then(res => {
+          this.canvasStatus = true;
+          this.posterImage = res.data;
+          this.posterImageStatus = true;
+        })
+        .finally(() => {
+          uni.hideLoading();
+        });
+    }
+  }
+};
+</script>
+
+<style scoped lang="less" lang="less">
+.poster-first {
+  overscroll-behavior: contain;
+}
+.poster-pop {
+  width: 4.5 * 100rpx;
+  height: 8 * 100rpx;
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 99;
+  top: 50%;
+  margin-top: -4.6 * 100rpx;
+}
+.poster-pop .canvas {
+  background-color: #ffffff;
+  height: 8 * 100rpx;
+}
+.poster-pop .poster-image {
+  width: 100%;
+  height: auto;
+}
+.poster-pop .canvas .image {
+  width: 4.5 * 100rpx;
+  height: 4.5 * 100rpx;
+  display: block;
+}
+.poster-pop .canvas .text {
+  text-align: center;
+  color: #000000;
+  margin-top: 0.32 * 100rpx;
+}
+.poster-pop .canvas .text.black {
+  height: 0.68 * 100rpx;
+}
+.poster-pop .canvas .text.rad {
+  color: #ff0000;
+}
+.poster-pop .canvas .code {
+  height: 1.4 * 100rpx;
+  display: flex;
+}
+.poster-pop .canvas .code .code-img {
+  width: 33%;
+  padding: 0.06 * 100rpx;
+}
+.poster-pop .canvas .code .code-img image {
+  width: 100%;
+}
+.poster-pop .canvas .code .code-text {
+  width: 60%;
+  font-size: 0.12 * 100rpx;
+  line-height: 1.64 * 100rpx;
+}
+.poster-pop .close {
+  width: 0.46 * 100rpx;
+  height: 0.75 * 100rpx;
+  position: fixed;
+  right: 0;
+  top: -0.73 * 100rpx;
+  display: block;
+}
+.poster-pop .save-poster {
+  background-color: #df2d0a;
+  font-size: 0.22 * 100rpx;
+  color: #fff;
+  text-align: center;
+  height: 0.76 * 100rpx;
+  line-height: 0.76 * 100rpx;
+  width: 100%;
+  margin-top: -0.04 * 100rpx;
+}
+.poster-pop .keep {
+  color: #fff;
+  text-align: center;
+  font-size: 0.25 * 100rpx;
+  margin-top: 0.1 * 100rpx;
+}
+.mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 9;
+}
+</style>

pages/home/landMark.vue

@@ -28,6 +28,7 @@
                 class="img-map"
               />
             </view>
+            <view class="share-btn" @click="toShare"><u-icon name="share-square" color="#C52733"></u-icon>分享给好友</view>
           </view>
         </view>
       </view>
@@ -71,6 +72,7 @@
       v-else
       :show-avatar="false"
     />
+    <shareImg ref="shareImg"></shareImg>
   </view>
 </template>
 
@@ -85,13 +87,15 @@ import { pageListenMixins } from '@/mixins/pageListenMixins'
 import projects from './components/projects.vue'
 import culture from "./components/culture.vue"
 import information from "./components/information.vue"
+import shareImg from "./components/shareImg.vue"
 export default {
   name: 'LandMarkPage',
   components: {
     goods,
     projects,
     culture,
-    information
+    information,
+    shareImg
   },
   mixins: [pageListenMixins],
   data() {
@@ -112,7 +116,8 @@ export default {
       mapData: null,
       goods: [],
       isCompleteLoadGood: false,
-      pageKeyId: Object.freeze('landmarkGoodsIndex')
+      pageKeyId: Object.freeze('landmarkGoodsIndex'),
+      posterImageStatus: false
     }
   },
   computed: {
@@ -134,6 +139,9 @@ export default {
     this.fetchGoods()
   },
   methods: {
+    toShare() {
+      this.$refs.shareImg.savePosterPath(this.landmarkDataId)
+    },
     handleTab(value) {
       this.actived = value
     },
@@ -181,6 +189,19 @@ export default {
 </script>
 
 <style scoped lang="less">
+.share-btn{
+  color: #C52733;
+  background: rgba(211,92,101,0.5);
+  font-size: 24rpx;
+  width: fit-content;
+  padding: 5rpx 10rpx;
+  border-radius: 20rpx 0 0 20rpx;
+  position: absolute;
+  right: 0;
+  top: 80%;
+  display: flex;
+  align-items: center;
+}
 .tabs-wrap{
   display: flex;
   justify-content: space-around;