321

package.json

@@ -14,7 +14,9 @@
     "axios": "^0.21.1",
     "clipboard": "^2.0.8",
     "core-js": "^3.6.5",
+    "downloadjs": "^1.4.7",
     "epic-spinners": "^1.1.0",
+    "html-to-image": "^1.6.2",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
     "register-service-worker": "^1.7.1",
@@ -30,6 +32,7 @@
   },
   "devDependencies": {
     "@types/async": "^3.2.7",
+    "@types/downloadjs": "^1.4.2",
     "@types/lodash": "^4.14.170",
     "@types/md5": "^2.3.1",
     "@types/validator": "^13.6.3",

src/components/common/Cell.vue

@@ -38,7 +38,6 @@
           @input="cellOnChange"
         />
       </div>
-
       <input v-else-if="type === 'input-num'"
         :value="inputValue"
         type="number"

src/download.d.ts

+declare module 'downloadjs';
\ No newline at end of file

src/layout/NavHeader.vue

@@ -7,9 +7,9 @@
         </div>
         <div class='center'>{{title}}</div>
         <div class='right'>
-            <div v-if="saveBtn.show" @click="clickSaveBtn" class="text-sm" :class="saveBtn.enable?' text-font-blue':' text-font-dark-blue'">
+            <!-- <div v-if="saveBtn.show" @click="clickSaveBtn" class="text-sm" :class="saveBtn.enable?' text-font-blue':' text-font-dark-blue'">
                 保存
-            </div>
+            </div> -->
         </div>
     </div>
 </template>

src/main.ts

@@ -8,8 +8,8 @@ import './style.less'
 import Util from './util'
 import service from './service'
 import { Plugin } from 'vue-fragment'
-import { Dialog } from 'vant';
-import { Toast } from 'vant'
+
+import { Toast,Empty,Dialog } from 'vant'
 import VConsole from 'vconsole';
 
 const vconsole = process.env.VUE_APP_ENV === 'TEST'?new VConsole():''
@@ -18,6 +18,7 @@ console.log(vconsole,'移动console');
 
 
 Vue.use(Dialog);
+Vue.use(Empty)
 Vue.use(Toast)
 Vue.use(Util)
 Vue.use(Plugin)

src/shimes-app.d.ts

@@ -21,3 +21,4 @@ declare module 'vue/types/vue' {
     }
   }
 
+

src/style.less

 * {
+  max-width: 460px;
   margin: 0;
   padding: 0;
 }
@@ -125,3 +126,7 @@ body {
   padding:25px 0;
   border-bottom: 1px solid rgba(255,255,255,.15);
 }
+
+.full-height{
+  height:100vh;
+}
\ No newline at end of file

src/view/NFT/Create/components/certificate/index.vue

 <template>
-  <div>
+  <div >
     <div class="py-3 text-xs">恭喜您获得NFT证书</div>
-    <div class="w-8/12 object-cover mx-auto">
+    <div class="w-6/12 object-cover mx-auto">
       <img src="./stars.png" class="mx-auto" />
     </div>
-    <div class="box mt-6">
-      <div class="top h-60 relative bg-red-200">
+    <div class="box xs:mt-6 mt-3" ref="certifyCard">
+      <div class="top xs:h-60 h-48 relative bg-certifyBG  bg-no-repeat bg-cover">
         <div class="blur-img h-full w-full absolute top-0 left-0"></div>
-        <div class="pt-6">
+        <div class="pt-6 xs:text-sm text-xs">
           <div>影视区块链版权电子数据确权书</div>
         </div>
         <div>
-          <img src="/img/cover.png" class="w-4/12 mx-auto mt-4" />
+          <img src="/img/cover.png" class=" w-20 xs:w-24 mx-auto mt-4" />
         </div>
-        <div class="float-box  w-full absolute -bottom-16  text-2xs">
-            <div class="w-11/12 p-2 flex-wrap mx-auto bg-certifyBG flex break-all ">
-                <div class="w-9/12 text-left ">
+        <div class="float-box  w-full absolute -bottom-10  text-3xs xs:text-2xs">
+            <div class="w-11/12 p-2 flex-wrap mx-auto flex break-all bg-font-white shadow-md rounded  text-font-black">
+                <div class="w-full text-left ">
                     <div>NFT哈希</div>
                     <div>{{NFTHASH}}</div>
                     <div class="pt-1">剧本哈希</div>
                     <div>{{fileHash}}</div>
                 </div>
-                <div></div>
             </div>
         </div>
       </div>
-      <div class="bot bg-font-white text-font-black px-3 py-10 pt-16">
-        <div class="ceritfy-item text-xs flex py-1">
+      <div class="bot bg-font-white text-font-black px-3 py-10 pt-12 text-3xs xs:text-2xs">
+        <div class="ceritfy-item  flex py-1">
           <div class="w-4/12 text-left">剧本名称</div>
           <div>{{ name }}</div>
         </div>
-        <div class="ceritfy-item text-xs flex py-1">
+        <div class="ceritfy-item  flex py-1">
           <div class="w-4/12 text-left">发行人地址</div>
           <div>{{ addr }}</div>
         </div>
-        <div class="ceritfy-item text-xs flex py-1">
+        <div class="ceritfy-item  flex py-1">
           <div class="w-4/12 text-left">发行人</div>
           <div>{{ publisher }}</div>
         </div>
-        <div class="ceritfy-item text-xs flex py-1">
+        <div class="ceritfy-item  flex py-1">
           <div class="w-4/12 text-left">存证时间</div>
           <div>{{ timeStamp }}</div>
         </div>
-        <div class="ceritfy-item text-xs flex py-1">
+        <div class="ceritfy-item  flex py-1">
           <div class="w-4/12 text-left">剧本审核</div>
           <div v-if="auditing === 0">剧本未审核</div>
         </div>
-        <div class="ceritfy-item text-xs flex py-1">
+        <div class="ceritfy-item  flex py-1">
           <div class="w-4/12 text-left">版权证明</div>
           <div v-if="copyRight === 0">版权未审核</div>
         </div>
       </div>
     </div>
+    <div class="py-3 text-xs" @click="downloadImg">点击下载保存图片</div>
+
   </div>
 </template>
 
 <script lang="ts">
 import Vue from "vue";
-
+import download from 'downloadjs'
+import { toPng } from 'html-to-image';
 export default Vue.extend({
   props: {
     name: {
@@ -93,5 +95,19 @@ export default Vue.extend({
         default: "1z9e1beb62e754ff7666hgjggFFHHKJJKKKK5a0ddd7879774757474974"
     }
   },
+  methods:{
+    async downloadImg(){
+      let certifyCard = this.$refs.certifyCard as HTMLElement
+      toPng(certifyCard).then(function (dataUrl) {
+        // var img = new Image();
+        // img.src = dataUrl;
+        // console.log(img.src);
+        download(dataUrl, 'my-node.png');
+      })
+      .catch(function (error) {
+        console.error('oops, something went wrong!', error);
+      });
+    }
+  }
 });
 </script>

src/view/NFT/Create/form.vue

@@ -76,14 +76,14 @@
           :name="fileName"
           @cellOnChange="$router.push({ name: 'NftUpload' })"
         ></app-cell>
-        <app-cell
+        <!-- <app-cell
           text="封面上传(非必填)"
           class="text-font-white my-3"
           type="upload"
           placeholder="请上传相关封面"
           :name="fileName"
           @cellOnChange="$router.push({ name: 'NftUpload' })"
-        ></app-cell>
+        ></app-cell> -->
         <app-cell
           :text="fromText.fileHashText"
           class="text-font-white my-3"
@@ -194,14 +194,14 @@
         </div>
         <div v-else class="text-center">
           <div v-if="success" >
-              <van-overlay :show="showOverlay"  class=" z-50" >
+              <van-overlay :show="showOverlay"  class=" full-height flex items-center z-50" >
                 <div class="w-10/12 mx-auto">
                   <certificate />
-                  <div class="py-3 text-xs">请截屏保存</div>
+               
                   <img
                     @click='showOverlay = !showOverlay;'
                     src="@/assets/icons/close_publish.png"
-                    class="w-5 mx-auto mt-10"
+                    class="w-4 xs:w-6 mx-auto mt-3"
                   />
                 </div>
     

src/view/NFT/Create/upload.vue

@@ -8,7 +8,7 @@
       class="hidden"
       @change="handleFileChange"
       ref="inputFile"
-      accept="application/pdf"
+      accept="application/pdf,application/msword,text/plain"
     />
     <label for="upload" class="inline-block">
       <div
@@ -94,6 +94,7 @@ export default Vue.extend({
       uploading: false,
       uploadStatus,
       status: uploadStatus.NULL,
+      // accept:
     };
   },
   components: {
@@ -110,7 +111,6 @@ export default Vue.extend({
   },
   methods: {
     handleFileChange() {
-      
       const ele = this.$refs.inputFile as HTMLInputElement;
       const files = ele.files;
       if (files && files.length >= 1) {

src/view/NFT/Mynft/index.vue

@@ -2,7 +2,7 @@
   <Layout-Child>
     <div class="nft-cardBox w-11/12 mx-auto mt-6">
       <div
-        class="nft-card w-full bg-font-red text-font-white px-5 py-3 rounded-md"
+        class="nft-card w-full bg-cardBG2 bg-cover bg-no-repeat text-font-white px-5 py-3 rounded-md"
       >
         <div class="w-full flex items-start justify-between mb-12">
           <div>我的NFT(个）</div>

src/view/User/index.vue

@@ -5,7 +5,7 @@
         <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
         <app-cell text='头像' boxType='border' type='image'  :value='userInfo.avatar?userInfo.avatar:"/img/mokeImg/avatar.png"' icon='icon-xiayibu' @click.native='uploadImg'></app-cell>
         <app-cell text='昵称' boxType='border' :value='userInfo.nickname?userInfo.nickname:"无昵称"' icon='icon-xiayibu' @click.native="goEdit({type:'nickname',title:'设置昵称'})"></app-cell>
-        <app-cell text='手机号' boxType='border' type='show' :value='userInfo.telephone?userInfo.telephone:""' ></app-cell>
+        <app-cell text='手机号' boxType='border' type='click' :value='userInfo.telephone?userInfo.telephone:""' ></app-cell>
         <app-cell text='邮箱绑定' boxType='border' :value='userInfo.email?userInfo.email:""' icon='icon-xiayibu' @click.native="goEdit({type:'email',title:'邮箱绑定'})"></app-cell>
         <app-cell text='个性签名' boxType='border' icon='icon-xiayibu'  @click.native="goEdit({type:'signature',title:'个性签名'})"></app-cell>
         <app-cell text='安全中心' boxType='border' icon='icon-xiayibu' ></app-cell>

tailwind.config.js

@@ -11,10 +11,12 @@ module.exports = {
     extend: {
       backgroundImage: theme => ({
         'cardBG': "url('/img/bg-card.png')",
+        'cardBG2': "url('/img/bg-card2.png')",
         'certifyBG':"url('/img/certify-bg.png')"
       })
     },
       screens: {
+      xs:'370px',
       sm: '640px',
       md: '768px',
       lg: '1024px',
@@ -291,6 +293,7 @@ module.exports = {
       ],
     },
     fontSize: {
+      '3xs':['0.45rem', { lineHeight: '0.55rem' }],
       '2xs':['0.65rem', { lineHeight: '0.75rem' }],
       xs: ['0.75rem', { lineHeight: '1rem' }],
       sm: ['0.875rem', { lineHeight: '1.25rem' }],
@@ -805,6 +808,7 @@ module.exports = {
       '1/12': '8.333333%',
       '2/12': '16.666667%',
       '3/12': '25%',
+      '3.5/12':'28.999%',
       '4/12': '33.333333%',
       '5/12': '41.666667%',
       '6/12': '50%',