证书生成并长按保存

package-lock.json

@@ -2340,6 +2340,11 @@
         }
       }
     },
+    "base64-arraybuffer": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npm.taobao.org/base64-arraybuffer/download/base64-arraybuffer-0.2.0.tgz",
+      "integrity": "sha1-S5RPrAGRqlkHr+LYyZnMxXzoD0U="
+    },
     "base64-js": {
       "version": "1.3.1",
       "resolved": "https://registry.npm.taobao.org/base64-js/download/base64-js-1.3.1.tgz",
@@ -3637,6 +3642,14 @@
         "timsort": "^0.3.0"
       }
     },
+    "css-line-break": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npm.taobao.org/css-line-break/download/css-line-break-1.1.1.tgz",
+      "integrity": "sha1-1em90peEAJnrBQPHMQ/TSSegJu8=",
+      "requires": {
+        "base64-arraybuffer": "^0.2.0"
+      }
+    },
     "css-loader": {
       "version": "3.5.3",
       "resolved": "https://registry.npm.taobao.org/css-loader/download/css-loader-3.5.3.tgz",
@@ -5604,6 +5617,14 @@
         }
       }
     },
+    "html2canvas": {
+      "version": "1.0.0-rc.7",
+      "resolved": "https://registry.npm.taobao.org/html2canvas/download/html2canvas-1.0.0-rc.7.tgz",
+      "integrity": "sha1-cMFZzg5jlUqRFpUxiU0IrVYnrJg=",
+      "requires": {
+        "css-line-break": "1.1.1"
+      }
+    },
     "htmlparser2": {
       "version": "3.10.1",
       "resolved": "https://registry.npm.taobao.org/htmlparser2/download/htmlparser2-3.10.1.tgz?cache=0&sync_timestamp=1582422905208&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhtmlparser2%2Fdownload%2Fhtmlparser2-3.10.1.tgz",

package.json

@@ -17,6 +17,7 @@
     "axios": "^0.19.2",
     "blueimp-md5": "^2.17.0",
     "core-js": "^3.6.4",
+    "html2canvas": "^1.0.0-rc.7",
     "pako": "^1.0.11",
     "vant": "^2.8.0",
     "vue": "^2.6.11",

src/router/index.ts

@@ -37,6 +37,14 @@ const routes: RouteConfig[] = [
     ],
   },
   {
+    path: '/proofImg',
+    name: 'ProofImg',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    component: () => import(/* webpackChunkName: "proof-img" */ '@/views/proof/Credentials.vue'),
+    meta: { requiresAuth: true },
+  },
+  {
     path: '/proofDetail',
     name: 'ProofDetail',
     // route level code-splitting

src/views/index/Index-cs.vue

@@ -65,9 +65,6 @@ export default class IndexCs extends Vue {
     const { results = []}  = await this.$api.template.systemList();
     this.charityType = results[0].detail;
   }
-  private goTemplList(templList: [] = []) {
-    this.$router.push({ name: 'TemplList', query: { templList: JSON.stringify(templList) } });
-  }
   private goProofDetail(templateId: string) {
     this.$router.push({ name: 'ProofDetail', query: {templateId} });
   }
@@ -89,6 +86,7 @@ export default class IndexCs extends Vue {
       font-weight: 600;
       color: #ffffff;
       line-height: 33px;
+      letter-spacing: 2px;
     }
   }
 }

src/views/index/Index-sy.vue

@@ -25,7 +25,6 @@
         </ul>
       </div>
       <div
-        v-if="isSy"
         style="display:flex;flex-direction:row;justify-content:space-between;font-size:16px;color:#353535;margin-top:10px;"
       >
         <p style="font-weight:500;color:#353535;">我的模版</p>
@@ -44,8 +43,8 @@
             description="您还未添加模板"
             image="@/assets/notemplate.png">
           </van-empty> -->
-        <empty v-if="!list.length && !loading && isSy" name="moban" tip="您还未添加模板"></empty>
-        <div v-if="isSy">
+        <empty v-if="!list.length && !loading" name="moban" tip="您还未添加模板"></empty>
+        <div>
           <div class="folder-item" v-for="{id, folder_simg_url, folder_name, detail} of list" :key="id" @click="goTemplList(detail)">
            <van-image
             class="thumb"
@@ -73,7 +72,6 @@ import { State, Action } from 'vuex-class';
   },
 })
 export default class IndexSy extends Vue {
-  @Inject('isSy') private isSy!: boolean;
   @Inject('APP-NAME') private APP_NAME!: string;
   @State('isLogin') private isLogin!: boolean;
   @State('proofCount') private proofCount!: number;

src/views/proof/Credentials.vue

+<template>
+  <div class="Credentials">
+    <div class="content" ref="container">
+      <div class="hash">
+        <div>公益哈希： 0x8e9c93b62d423de639276287a889abdd</div>
+        <div>区块高度： 6188888</div>
+        <div>上链时间： 2020年10约11日 18：28：27</div>
+      </div>
+      <div class="desc">
+        <div>尊敬的董军</div>
+        <div>您与2020年2月8日，</div>
+        <div>向武汉医院参加志愿者</div>
+        <div>感谢您雪中送炭和无私奉献的精神！</div>
+      </div>
+      <div class="code-wrap">
+        <div>扫描二维码查看更多信息</div>
+      </div>
+    </div>
+    <div class="bottom">
+      <van-button
+        @click="back()"
+        class="left"
+        block
+        color="#3C4067"
+      >返回</van-button>
+      <van-button
+        @click="save()"
+        class="right"
+        block
+        color="#3F79FE"
+        type="primary"
+      >保存证书
+        <div ref="aaaa" class="aaa"></div>
+      </van-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import html2canvas from 'html2canvas';
+import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
+import { Button, Image } from 'vant';
+@Component({
+  components: {
+    [Button.name]: Button,
+    [Image.name]: Image,
+  },
+})
+export default class Detail extends Vue {
+  private back() {
+    this.$router.back();
+  }
+  private async save() {
+    const dom = this.$refs['container'];
+    let {width, height} = (dom as any).getBoundingClientRect();
+    // 获取像素比
+    const dpr = window.devicePixelRatio || 1;
+    // 创建自定义 canvas 元素
+    const canvas = document.createElement('canvas');
+    // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    // 设定 canvas css宽高为 DOM 节点宽高
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    // 获取画笔
+    const context = (canvas as any).getContext('2d');
+    // 将所有绘制内容放大像素比倍,解决dpr不同图片模糊问题
+    (context as any).scale(dpr, dpr);
+    await html2canvas((dom as any), {
+      width,
+      height: height*1.5,
+      scrollY: 0, 
+      scrollX: 0,
+    }).then((canvas) => {
+        let dataUrl = canvas.toDataURL("image/png", 1.0);
+        let parent = this.$refs['aaaa'];
+        (parent as any).innerHTML = `<img src="${dataUrl}" style="width:100%;">`;
+    });
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.Credentials {
+  .content {
+    margin: auto;
+    width: 345px;
+    height: 509px;
+    background-image: url("../../assets/proofImg.png");
+    background-size: 345px 509px;
+
+  }
+  .bottom {
+    margin-top: 38px;
+    display: flex;
+    justify-content: center;
+    .left,.right {
+      height: 40px;
+      width: 120px;
+      border-radius: 4px;
+      font-size: 16px;
+    }
+    .left {
+      margin-right: 25px;
+    }
+    .right {
+      position: relative;
+    }
+    .aaa {
+      position: absolute;
+      top: 0;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/proof/Index.vue

@@ -12,7 +12,7 @@
       v-model="loading"
       :finished="finished"
       @load="getList"
-    > 
+    >
       <van-image v-if="!list.length && !loading && isSy" src="@/assets/emptyProof.png" fit="contain"></van-image>
       <van-empty 
         v-if="!list.length && !loading"