分享

src/main/nine-space/src/App.vue

@@ -59,6 +59,7 @@ export default {
       this.bs = new BetterScroll(this.$refs.scroll, {
         scrollY: true,
         click: true,
+        freeScroll: true,
       });
     },
     onLoad() {

src/main/nine-space/src/assets/svgs/icon-share.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_share_weixin</title>
+    <g id="第九空间" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="详情下拉" transform="translate(-323.000000, -638.000000)" fill="#333230">
+            <g id="编组-2" transform="translate(0.000000, 634.000000)">
+                <g id="编组-3" transform="translate(311.000000, 0.000000)">
+                    <g id="icon" transform="translate(12.000000, 4.000000)">
+                        <path d="M6.7047137,15.253711 C4.69572751,16.3586652 4.41333056,18.9303033 4.02559468,19.5425973 C3.63785881,20.1548913 1.96690728,14.9674069 4.53921448,11.7064086 C6.25408596,9.53240973 8.5183606,8.34285978 11.3320384,8.13775874 L11.3320384,5.50543407 C11.3320384,5.06360627 11.6902106,4.70543407 12.1320384,4.70543407 C12.2961761,4.70543407 12.4563415,4.75592176 12.5908083,4.85004854 L20.8178961,10.60901 C21.1798556,10.8623816 21.2678834,11.361206 21.0145118,11.7231655 C20.9609527,11.7996785 20.8944092,11.866222 20.8178961,11.9197811 L12.5908083,17.6787426 C12.2288488,17.9321142 11.7300245,17.8440864 11.4766529,17.482127 C11.3825261,17.3476601 11.3320384,17.1874948 11.3320384,17.0233571 L11.3320384,14.3910324 C9.5864794,14.2295154 8.04403783,14.5170749 6.7047137,15.253711 Z" id="形状结合"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/main/nine-space/src/components/Post.vue

@@ -1,48 +1,116 @@
 <template>
   <van-overlay :show="show" @click="show = false" z-index="99">
-    <div class="wrapper" @click.stop>
-      <div class="content">
-        <van-image src="" width="80vw" height="80vw" fit="cover" />
+    <div class="wrapper">
+      <div class="content" ref="post" @click.stop>
+        <van-image
+          :src="getImg(info.pics)"
+          width="80vw"
+          height="80vw"
+          fit="cover"
+          @load="loadImg"
+        />
         <div class="info">
           <div class="name van-multi-ellipsis--l2">
-            游戏《百分之一》精美皮肤---恶魔的礼物
+            {{ info.name }}
           </div>
           <div class="text">
             <div class="price">
               <img src="../assets/svgs/jiage.svg" alt="" />
-              <span>320</span>
+              <span>{{ info.price }}</span>
             </div>
             <div class="text1">
-              <span>已售 23</span>
-              <span>剩余 50</span>
+              <span>已售 {{ info.sale }}</span>
+              <span>剩余 {{ info.stock }}</span>
             </div>
           </div>
-          <div class="minter">
-            <van-image width="30" height="30" round src="" fit="cover" />
-            <div class="text1">铸造者昵称</div>
+        </div>
+        <div class="minter">
+          <div class="minter-content">
+            <van-image
+              width="30"
+              height="30"
+              round
+              :src="info.minterAvatar"
+              fit="cover"
+            />
+            <div class="text1">{{ info.minter }}</div>
             <div class="text2">铸造者</div>
-
-            <vue-qrcode
-              value="Hello, World!"
-              :options="{ width: 70 }"
-            ></vue-qrcode>
           </div>
+
+          <vue-qrcode
+            :value="url"
+            :options="{ width: 70, margin: 2 }"
+            class="code"
+          ></vue-qrcode>
         </div>
       </div>
+
+      <div class="img" ref="wrap"></div>
+
+      <div class="tips">长按图片保存</div>
     </div>
   </van-overlay>
+  <div class="share" ref="share" @click="init">
+    <img src="../assets/svgs/icon-share.svg" alt="" />
+    <span>分享</span>
+  </div>
 </template>
 <script>
 import vueQrcode from "@chenfengyuan/vue-qrcode";
+import html2canvas from "html2canvas";
+const path = require("path");
 export default {
+  props: {
+    info: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
   data() {
     return {
-      show: true,
+      show: false,
+      share: null,
     };
   },
+  computed: {
+    url() {
+      return path.resolve(this.$baseUrl, "productDetail?id=" + this.info.id);
+    },
+  },
   components: {
     vueQrcode,
   },
+  mounted() {
+    this.$nextTick(() => {
+      this.share = this.$refs.share;
+      document.body.appendChild(this.share);
+    });
+  },
+  beforeUnmount() {
+    if (this.share) {
+      document.body.removeChild(this.share);
+    }
+  },
+  methods: {
+    init() {
+      this.$toast.loading({
+        message: "加载中...",
+        forbidClick: true,
+      });
+      this.show = true;
+    },
+    loadImg() {
+      setTimeout(() => {
+        html2canvas(this.$refs.post).then((canvas) => {
+          console.log(canvas);
+          this.$toast.clear();
+          this.$refs.wrap.appendChild(canvas);
+        });
+      }, 500);
+    },
+  },
 };
 </script>
 <style lang="less" scoped>
@@ -50,6 +118,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
   height: 100%;
 }
 
@@ -91,4 +160,60 @@ export default {
     }
   }
 }
+
+.code {
+  border-radius: 6px;
+}
+
+.minter {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 10px;
+  border-top: 2px solid #202122;
+
+  .minter-content {
+    .text1 {
+      font-size: 14px;
+      color: #ffffff;
+      line-height: 24px;
+      margin-top: 6px;
+    }
+    .text2 {
+      font-size: 12px;
+      color: #939599;
+      line-height: 22px;
+    }
+  }
+}
+
+.tips {
+  font-size: 13px;
+  color: #939599;
+  line-height: 22px;
+  margin-top: 16px;
+}
+
+.share {
+  position: fixed;
+  right: 16px;
+  bottom: 20vh;
+  width: 48px;
+  height: 48px;
+  background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 100px;
+  justify-content: center;
+  span {
+    font-size: 12px;
+    color: #333230;
+    line-height: 17px;
+  }
+  img {
+    display: block;
+  }
+}
 </style>

src/main/nine-space/src/views/Submit.vue

@@ -21,7 +21,7 @@
     <div class="list">
       <div class="info">
         <div class="text1">商品费用</div>
-        <div class="text2">¥320</div>
+        <div class="text2">¥{{ info.price }}</div>
       </div>
       <div class="info">
         <div class="text1">GAS费用</div>

src/main/nine-space/src/views/product/Detail.vue

@@ -100,7 +100,7 @@
 
     <driver />
 
-    <post />
+    <post :info="info" />
   </div>
 </template>