321

541c94a1 · hanfeng zhang · 6162d76c · 541c94a1 · 541c94a1 · 541c94a1
Commit 541c94a1 authored Jul 14, 2021 by hanfeng zhang
27 changed files
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,5 @@
 .vscode
 package-lock.json
 dist/
+NFT_TEST/
 /NFT/
\ No newline at end of file
--- a/package.json
+++ b/package.json
@@ -4,8 +4,8 @@
  "private": true,
  "scripts": {
    "dev": "vue-cli-service serve",
-    "test":"vue-cli-service serve --mode test",
+    "test": "vue-cli-service serve --mode test",
-    "deploy:test":"vue-cli-service build --mode test && bash ./test_deploy.sh",
+    "deploy:test": "vue-cli-service build --mode test && bash ./test_deploy.sh",
    "build": "vue-cli-service build"
  },
  "dependencies": {
@@ -16,7 +16,9 @@
    "core-js": "^3.6.5",
    "lodash": "^4.17.21",
    "register-service-worker": "^1.7.1",
+    "validator": "^13.6.0",
    "vant": "^2.12.22",
+    "vconsole": "^3.7.0",
    "vue": "^2.6.11",
    "vue-fragment": "^1.5.2",
    "vue-router": "^3.2.0",
@@ -24,7 +26,9 @@
    "vuex": "^3.4.0"
  },
  "devDependencies": {
+    "@types/async": "^3.2.7",
    "@types/lodash": "^4.14.170",
+    "@types/validator": "^13.6.3",
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
@@ -37,15 +41,15 @@
    "@vue/eslint-config-typescript": "^7.0.0",
    "autoprefixer": "^9.8.6",
    "babel-plugin-import": "^1.13.3",
+    "compression-webpack-plugin": "^1.1.11",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "postcss": "^7.0.36",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4",
-    "typescript": "~4.1.5",
-    "vue-template-compiler": "^2.6.11",
    "terser-webpack-plugin": "^4.2.3",
-    "compression-webpack-plugin": "^1.1.11"
+    "typescript": "~4.1.5",
+    "vue-template-compiler": "^2.6.11"
  }
 }
--- a/public/iconfont.js
+++ b/public/iconfont.js
--- a/src/assets/img/avatar.png
+++ b/src/assets/img/avatar.png
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,8 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <script src="//at.alicdn.com/t/font_2629369_3ll93o9x4uh.js"></script>
+    <script src="/iconfont.js"></script>
+    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>

--- a/src/App.vue
+++ b/src/App.vue
@@ -2,32 +2,39 @@
  <div id="app" class="bg-font-black">
    <van-overlay :show="appState.overlay.show">
      <div class="overlay flex flex-col items-start text-font-white w-full px-6 relative">
-        <div class="text-xl py-12 pt-32">
+        <div class="text-xl py-12 pt-28">
          <div>发行NFT</div>
          <div>使版权更具交易价值</div>
        </div>
        <div class="bot w-11/12 mx-auto">
          <div class="grid grid-cols-4 w-full gap-4">
-             <div class="flex items-center content-center" @click="goNTF('create')">
+             <div class="flex flex-col items-center content-center" @click="goNTF('create')">
              <app-icon name="icon-juben" size="26px" class='icon-box bg-app-red rounded-full mx-auto'></app-icon>
+              <div class=" text-xs py-3">剧本</div>
            </div>
-            <div class="flex items-center content-center">
+            <div class="flex flex-col items-center content-center">
              <app-icon name="icon-xiaoshipin" size="26px" class='icon-box bg-icon-bg rounded-full mx-auto'></app-icon>
+                 <div class=" text-xs py-3">视频</div>
            </div>
-             <div class="flex items-center content-center">
+             <div class="flex flex-col items-center content-center">
              <app-icon name="icon-dianying" size="26px" class='icon-box bg-icon-bg rounded-full mx-auto'></app-icon>
+                 <div class=" text-xs py-3">电影</div>
            </div>
-             <div class="flex items-center content-center">
+             <div class="flex flex-col items-center content-center">
              <app-icon name="icon-yinle" size="26px" class='icon-box bg-icon-bg rounded-full mx-auto'></app-icon>
+                 <div class=" text-xs py-3">音频</div>
            </div>
-             <div class="flex items-center content-center">
+             <div class="flex flex-col items-center content-center">
              <app-icon name="icon-a-tupian" size="26px" class='icon-box bg-icon-bg rounded-full mx-auto'></app-icon>
+                 <div class=" text-xs py-3">图片</div>
            </div>
-             <div class="flex items-center content-center">
+             <div class="flex flex-col items-center content-center">
              <app-icon name="icon-zhoubian" size="26px" class='icon-box bg-icon-bg rounded-full mx-auto'></app-icon>
+                 <div class=" text-xs py-3">衍生品</div>
            </div>
-             <div class="flex items-center content-center">
+             <div class="flex flex-col items-center content-center">
              <app-icon name="icon-qita" size="26px" class='icon-box bg-icon-bg rounded-full mx-auto'></app-icon>
+                 <div class=" text-xs py-3">其他</div>
            </div>
          </div>
          <div class='flex justify-center my-12'>
@@ -94,7 +101,7 @@ export default Vue.extend({
  width: 100vw;
  .bot{
    position: absolute;
-    top:60%;
+    top:55%;
    left: 5%;
  }

--- a/src/components/CardList.vue
+++ b/src/components/CardList.vue
 <template>
    <div class="list-container font-light">
            <div class="list-row flex justify-start relative text-font-white text-sm mb-3"  v-for="(i,index) in outputData" :key="index" :id="i.id">
-              <div class='item flex flex-col w-4/12 items-center z-10' v-for="(k,kindex) in i" :key="kindex">
+              <div class='item flex flex-col w-4/12 items-center z-10' v-for="(k,kindex) in i" :key="kindex" @click="itemOnclick(k.id)">
                  <div class='w-full '>
                    <img src='/img/cover.png'  class=" w-11/12 mx-auto   rounded-xl shadow-md">
                  </div>
@@ -36,6 +36,11 @@ export default Vue.extend({
      outputData:function(){
          return _chunk(this.data,this.rowSize)
      }
+  },
+  methods:{
+    itemOnclick(id:any){
+      this.$emit('itemOnclick',id)
+    }
  }
 });
 </script>

--- a/src/components/CollectionCard.vue
+++ b/src/components/CollectionCard.vue
@@ -16,48 +16,41 @@
    </div>
    <div class="right w-8/12">
      <div class="w-full px-4">
-        <div class=" text-lg">{{mydata.name}}</div>
+        <div class=" text-lg">{{colletionData.name}}</div>
        <div class="mt-8">
          <div class="text-font-dark-blue">NFT编号</div>
            <p class=" break-words line-clamp-2   w-full text-2xs ">
-            {{mydata.nftId}}
+            {{colletionData.nftId}}
            </p>
        </div>
-        <div class="flex flex-wrap w-full mt-1  text-sm mt-3">
+        <div class="flex flex-wrap w-full text-sm mt-3">
          <div class="text-font-dark-blue">题材</div>
          <div class="flex px-3 gap-x-2" v-for='(i,index) in getThemeList' :key="index">
            <span>{{i}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script lang="ts">
-import Vue from "vue";
+import Vue, { PropType } from "vue";
 import {MyNFTItem} from '@/types/Dto'
 export default Vue.extend({
  name: "CollectionCard",
  props: {
-      colletionData:{} 
+      colletionData:{} as PropType<MyNFTItem>
-  },
-  data(){
-    return{
-      mydata:this.colletionData  as MyNFTItem
-    }
  },
  computed:{
-    getThemeList():any[]{
+    getThemeList():string | string[]{
-      if(this.mydata){
+        if(this.colletionData.theme){
-        let i = this.mydata.theme.split(',')
+            return  this.colletionData.theme.split(',')
-        return i
+        }
-      }
+        return []
-      return []
    }
  }
 });

--- a/src/components/common/Cell.vue
+++ b/src/components/common/Cell.vue
@@ -7,22 +7,22 @@
        : 'bg-font-gray bg-opacity-20 rounded-md'
    "
  >
-    <div class="left flex items-center">
+    <div class="left flex items-center flex-row-reverse">
-      <div class="px-2">
+      <div class="px-2 text-xs text-font-dark-blue">
        {{ text }}
      </div>
-      <app-icon
+        <app-icon
-        v-if="labelIcon"
+          v-if="labelIcon"
-        :name="labelIcon"
+          :name="labelIcon"
-        color="#ED6F6F"
+          color="#ED6F6F"
-        @click.native="$emit('clickIcon')"
+          @click.native="$emit('clickIcon')"
-        size="18px"
+          size="18px"
-      ></app-icon>
+        ></app-icon>
    </div>
    <div class="right flex items-center overflow-hidden">
      <div v-if="type == 'click'" @click="eventEmit(type)">
-        <div class="flex flex-row items-center">
+        <div class="flex items-center flex-row-reverse">
-          <div>{{ value }}</div>
+          <div class="text-sm">{{ value }}</div>
          <app-icon v-if="icon" :name="icon" class="self-center"></app-icon>
        </div>
      </div>
@@ -30,6 +30,7 @@
        <input
          v-model="inputValue"
          type="text"
+          :maxlength="validate.maxLen"
          class="bg-transparent"
          :placeholder="placeholder"
          @input="cellOnChange"
@@ -150,6 +151,9 @@ export default Vue.extend({
      type: String,
      required: true,
    },
+    validate:{
+      type:Object,
+    },
    icon: String,
    labelIcon: String,
    placeholder: {

--- a/src/layout/Main.vue
+++ b/src/layout/Main.vue
 <template>
-  <div id="Main" class=" bg-font-black ">
+  <div id="Main" class=" bg-font-black">
    <div>
      <slot></slot>
    </div>

--- a/src/layout/dataload/index.ts
+++ b/src/layout/dataload/index.ts
+import Vue from 'vue'
+import Temp_Id from './temp_id.vue'
+// Vue.component()
\ No newline at end of file
--- a/src/layout/dataload/temp_id.vue
+++ b/src/layout/dataload/temp_id.vue
+<template>
+  <div>
+      <van-skeleton title :row="3" />
+  </div>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+import { Skeleton } from 'vant';
+Vue.use(Skeleton);
+export default Vue.extend({
+  name: 'layout_child'
+});
+</script>
--- a/src/main.ts
+++ b/src/main.ts
@@ -9,8 +9,16 @@ import Util from './util'
 import service from './service'
 import { Plugin } from 'vue-fragment'
 import { Dialog } from 'vant';
+import { Toast } from 'vant'
+import VConsole from 'vconsole';
+const vconsole = process.env.VUE_APP_ENV === 'TEST'?new VConsole():''
+console.log(vconsole,'移动console');
 Vue.use(Dialog);
+Vue.use(Toast)
 Vue.use(Util)
 Vue.use(Plugin)
 Vue.use(service)

--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -3,6 +3,7 @@ import Vue from 'vue'
 import VueRouter, { RouteConfig } from 'vue-router'
 import App from '../App.vue'
 Vue.use(VueRouter)
 const routes: Array<RouteConfig> = [
@@ -15,7 +16,7 @@ const routes: Array<RouteConfig> = [
      {
        path: '/Home',
        name: 'Home',
-        component: () => import('@/view/Home/index.vue')
+        component:()=> import('@/view/Home/index.vue')
      },
      {
        path: '/Mine',
@@ -67,7 +68,7 @@ const routes: Array<RouteConfig> = [
    {
      path:'/Nft/:id',
      name:'Nftdetail',
-      component: () => import('@/view/NFT/Detail/index.vue'),
+      component:()=> import('@/view/NFT/Detail/index.vue'),
      meta:{
        title: ''
      }
@@ -135,8 +136,8 @@ const router = new VueRouter({
 })
 router.beforeEach((to, from, next) => {
-  if (to.name !== 'Login' && token.getToken() === null) {
+  if (to.name === 'Login' && token.getToken() !== null) {
-    next({ name: 'Login' })
+    next({ name: 'Home' })
  } else {
    next()
  }

--- a/src/service/Service.ts
+++ b/src/service/Service.ts
 import axios, { AxiosInstance } from "axios"
+import {token,userMsg} from '@/util/userInfoUtils'
+import router from '@/router'
+// import Async from 'async'
+import { Toast } from 'vant'
 // const url = {
 //     development: 'http://172.16.101.135:8001',
 //     test: 'http://172.16.101.136:8001',
 //     production: ''
 // }
-import { Toast } from "vant"
+async function logoutUser(){
+    token.clearToken()
+    userMsg.clearUserMsg()
+}
 export class Service {
    public service: AxiosInstance;
    constructor() {
        this.service = axios.create({
            baseURL:'/proxyApi',
@@ -17,18 +25,26 @@ export class Service {
        })
        const get = this.service.get
        const post = this.service.post
-        const resolveData = (ret: any) => {
+        const resolveData = async (ret: any) => {
            if (ret.code === 200){
                return ret.data;
            }else {
+                if(ret.code === 401){
+                    Toast.fail('请重新登录')
+                    await logoutUser().then(()=>{
+                        router.push('')
+                    })
+                }
                Toast.fail(ret.message)
                throw new Error(ret.message)
            }
        }
+        this.service.get = (...res) => get(...res).then(ret => resolveData(ret.data)).catch(err => {
-        this.service.get = (...res) => get(...res).then(ret => resolveData(ret.data));
-        this.service.post = (...res) => post(...res).then(ret => resolveData(ret.data)).catch(err => {
            resolveData(err.response.data)
+        })
+        this.service.post = (...res) => post(...res).then(ret => resolveData(ret.data)).catch(err => {
+          resolveData(err.response.data)
        });
    }
 }
\ No newline at end of file
--- a/src/service/common.ts
+++ b/src/service/common.ts
+import { Service } from "./Service";
+export class Common extends Service {
+    constructor() {
+        super()
+    }
+}
--- a/src/service/index.ts
+++ b/src/service/index.ts
+import { Common } from './common'
 import { NFTService } from './nftService'
 import {UserService} from './userService'
@@ -7,7 +8,8 @@ export default{
    {
      Vue.prototype.$service = {
          userService: new UserService(),
-          nftService: new NFTService()
+          nftService: new NFTService(),
+          common: new Common()
      }
    }
 }

--- a/src/service/nftService.ts
+++ b/src/service/nftService.ts
 import { Service } from './Service'
-import { NFT_CREATE } from '@/types/Dto'
 import { token } from '@/util/userInfoUtils'
 export class NFTService extends Service {
  router = {
-    create: { path: '/nft/publish' },
    getMyList: {
      path: '/nft/list/current',
      dataType: 'application/x-www-form-urlencoded',
@@ -17,7 +16,7 @@ export class NFTService extends Service {
      dataType: 'application/x-www-form-urlencoded',
    },
    detail: {
-      path: '/nft/get/{id}',
+      path: '/nft/get',
      dataType: 'application/x-www-form-urlencoded',
    },
    themes: {
@@ -32,24 +31,30 @@ export class NFTService extends Service {
      dataType: 'application/x-www-form-urlencoded',
    },
  }
-  auth = 'Bearer ' + token.getToken()
  constructor() {
    super()
  }
-  /**
-   * 获取验证码
+  private getAuth(){
-   * @param phone
+    return 'Bearer '+ token.getToken()
-   * @param codeType  短信模板, 1:登录短信 2:修改密码 3:修改手机号
+  }
-   */
-  async create(data: NFT_CREATE) {
-    return await this.service.post(this.router.create.path, data, {
+  async getNFTdetail(id: number){
-      headers: {
-        Authorization: this.auth,
+      return await this.service.get(this.router.detail.path+'/'+id,{
-      },
+        headers: {
-    })
+          Authorization: this.getAuth(),
+          'Content-Type': this.router.detail.dataType,
+        }
+      })
  }
  /**
   *
   * @returns 获取剧目主题表
@@ -57,11 +62,15 @@ export class NFTService extends Service {
  async getThemeList() {
    return await this.service.get(this.router.themes.path, {
      headers: {
-        Authorization: this.auth,
+        Authorization: this.getAuth(),
        'Content-Type': this.router.themes.dataType,
      },
    })
  }
+  /**
+   * 获取题材类型
+   * @returns 
+   */
  async getCategory(): Promise<any[]> {
    return await this.service.get(this.router.getCategory.path)
  }
@@ -74,7 +83,7 @@ export class NFTService extends Service {
  async getMyList(categoryId?: number):Promise<any> {
    return await this.service.get(this.router.getMyList.path, {
      headers: {
-        Authorization: this.auth,
+        Authorization: this.getAuth(),
        'Content-Type': this.router.getMyList.dataType,
      },
      params: { categoryId: categoryId ? categoryId : null },
@@ -88,10 +97,11 @@ export class NFTService extends Service {
   * @param categoryId
   * @returns
   */
  async getList(pageNum: number, pageSize: number, categoryId?: number) {
    return await this.service.get(this.router.getList.path, {
      headers: {
-        Authorization: this.auth,
+        Authorization: this.getAuth(),
        'Content-Type': this.router.getList.dataType,
      },
      params: {
@@ -110,7 +120,7 @@ export class NFTService extends Service {
  async generateNftId(categoryId: number) {
    return await this.service.get(this.router.genId.path, {
      headers: {
-        Authorization: this.auth,
+        Authorization: this.getAuth(),
        'Content-Type': this.router.genId.dataType,
      },
      params: { categoryId: categoryId },
@@ -124,7 +134,7 @@ export class NFTService extends Service {
  async detail(id: number) {
    return await this.service.get(this.router.detail.path, {
      headers: {
-        Authorization: this.auth,
+        Authorization: this.getAuth(),
        'Content-Type': this.router.detail.dataType,
      },
      params: { id: id },
@@ -140,7 +150,7 @@ export class NFTService extends Service {
    fd.append('file', file)
    return await this.service.post(this.router.getMd5.path, fd, {
      headers: {
-        Authorization: this.auth,
+        Authorization: this.getAuth(),
        'Content-Type': this.router.getMd5.dataType,
      },
    })
@@ -158,7 +168,7 @@ export class NFTService extends Service {
  }) {
    return await this.service.post(this.router.publish.path, obj, {
      headers: {
-        Authorization: this.auth,
+        Authorization: this.getAuth(),
        'Content-Type': this.router.publish.dataType,
      },
    })
@@ -193,7 +203,7 @@ export class NFTService extends Service {
    return (await this.service.post(this.router.save.path, fd, {
      headers: {
-        Authorization: this.auth,
+        Authorization: this.getAuth(),
        'Content-Type': this.router.save.dataType,
      },
    })) as {

--- a/src/shimes-app.d.ts
+++ b/src/shimes-app.d.ts
 import Vue from 'vue'
+import { Common } from './service/common'
 import { Service } from './service/index'
 import { NFTService } from './service/nftService'
 import { UserService } from './service/userService'
@@ -8,6 +9,7 @@ import VueRouter, { Route } from 'vue-router'
 interface ServiceType {
    userService: UserService
    nftService: NFTService
+    common:Common
 }

--- a/src/util/index.ts
+++ b/src/util/index.ts
 import {token,userMsg} from './userInfoUtils'
+import validator from 'validator'
 export default {
  install(Vue: any) {
    Vue.prototype.$util = {
      token: token,
-      userMsg: userMsg
+      userMsg: userMsg,
+      validator:validator,
    }
  }
 }

--- a/src/util/userInfoUtils.ts
+++ b/src/util/userInfoUtils.ts
+import router from '@/router'
 const KEY_TOKEN = 'KEY_TOKEN'
 const KEY_USER = 'KEY_USER'
@@ -10,9 +11,13 @@ function getToken(): string | null {
    return localStorage.getItem(KEY_TOKEN)
 }
+function clearToken(){
+    localStorage.removeItem(KEY_TOKEN)
+}
 export const token = {
    setToken,
-    getToken
+    getToken,
+    clearToken
 }
 function setUserMsg(user: object) {
@@ -20,11 +25,20 @@ function setUserMsg(user: object) {
 }
 function getUserMsg(): object | null {
-    const userStr = localStorage.getItem(KEY_USER)
+    let userStr;
-    return userStr ? JSON.parse(userStr) : null
+    try{
+        userStr = localStorage.getItem(KEY_USER)
+    }catch(err){
+        console.log(err,'123khi12oi3h12io3oi123io2j13oij12io3');  
+    }
+    return userStr ? JSON.parse(userStr) :  router.push({name:'Login'})
 }
+function clearUserMsg(){
+    localStorage.removeItem(KEY_USER)
+}
 export const userMsg = {
    setUserMsg,
-    getUserMsg
+    getUserMsg,
+    clearUserMsg
 }
\ No newline at end of file
--- a/src/util/util.types.ts
+++ b/src/util/util.types.ts
 import {token,userMsg} from './userInfoUtils'
+import validator from 'validator'
 export interface UTIL_INTERFACE{
    token: typeof token,
    userMsg: typeof userMsg
+    validator: typeof validator
 }
\ No newline at end of file
--- a/src/view/Home/index.vue
+++ b/src/view/Home/index.vue
@@ -14,7 +14,7 @@
        <div class="container-view w-11/12 mx-auto">
          <app-scrollbar :list='categoryTypes' @tabChange='getDataByCategory'></app-scrollbar>
          <div class="list-scroll">
-            <app-cardList :data='listData' v-if="listData.length"></app-cardList>
+            <app-cardList :data='listData' v-if="listData.length" @itemOnclick='goDetail'></app-cardList>
            <van-empty image="error" description="没有找到更多内容"  v-else/>
            <div class="h-12"></div>
          </div>
@@ -60,6 +60,10 @@ export default Vue.extend({
    info(){
      console.log(222);
    },
+    goDetail(id:any){
+      console.log(id);
+      this.$router.push({ name: 'Nftdetail', params: { id: id }})
+    },
    async getDataByCategory(item:any){
      console.log(item);

--- a/src/view/Mine/index.vue
+++ b/src/view/Mine/index.vue
@@ -2,7 +2,7 @@
    <Layout-Main class='page-scroll'> 
        <div class='user-info w-11/12 mx-auto flex text-font-white  items-center py-8 overflow-y-scroll'>
            <div class='w-3/12 pr-5'>
-                <img src="@/assets/img/avatar.png" class='rounded-full w-18 object-fill' >
+                <img src="/img/mokeImg/avatar.png" class='rounded-full w-18 object-fill' >
            </div>
            <div class='w-9/12 info flex-grow'>
                <div class='name-box flex justify-between'>
@@ -38,7 +38,7 @@
                <div>数量（个）</div>
            </div>
            <div class='pt-8  pb-4 text-2xl flex items-center content-end justify-end'  @click="navigateTo('/Nft/MyList')">
-                30
+                    {{userData.size}}
                <app-icon name="icon-xiayibu"></app-icon>
            </div>
        </div>
@@ -80,9 +80,15 @@ const apps=[
 export default Vue.extend({
    data() {
        return{
-            apps
+            apps,
+            userData:{},
        }
    },
+    async mounted() {
+       this.userData = await this.$service.nftService.getMyList()
+       console.log(this.userData);
+    },
  components:{ 
    'Layout-Main':()=>import('@/layout/Main.vue'),
    'app-icon':()=>import('@/components/common/Icon.vue'),
@@ -111,7 +117,7 @@ export default Vue.extend({
  },
  computed:{
      getUserInfo(){
-          return this.$util.userMsg.getUserMsg()
+         return this.$util.userMsg.getUserMsg()     
      }
  }
 });

--- a/src/view/NFT/Detail/index.vue
+++ b/src/view/NFT/Detail/index.vue
 <template>
  <Layout-Child class='page-scroll'>
+    <!-- <div  v-if="loading">
+      loading....
+    </div> -->
    <div class="w-11/12 mx-auto mt-6 text-font-white">
-      <app-collectionCard></app-collectionCard>
+      <app-collectionCard :colletionData='nftData'></app-collectionCard>
      <div class="app-icons mx-auto grid grid-cols-4 my-6">
        <div
          v-for="(i, index) in apps"
@@ -32,47 +35,47 @@
        "
      >
        <div class="py-3 pr-4">
-          <img src="@/assets/img/avatar.png" class="h-12 w-12 rounded-full" />
+          <img :src="nftData.avatar?nftData.avatar:'/img/mokeImg/avatar.png'" class="h-12 w-12 rounded-full" />
        </div>
        <div>
          <div class="flex items-center">
-            <div class="pr-3 text-base">张瀚峰</div>
+            <div class="pr-3 text-base">{{nftData.publisher?nftData.publisher:'匿名'}}</div>
            <app-tag text="发行人" :id="1" class="bg-font-dark-blue"></app-tag>
          </div>
-          <div class="mt-1 text-font-dark-blue">sdfsdfsdf</div>
+          <div class="mt-1 text-font-dark-blue">{{nftData.wallet}}</div>
        </div>
      </div>
      <div class="py-3">
        <div class="text-font-dark-blue">NFT信息</div>
        <app-cell
          text="编号"
-          value="JOYING-20210615-HONGJUREN"
+          :value="nftData.nftId"
          boxType="border"
        ></app-cell>
        <app-cell
          text="剧本HASH"
-          value="JOYING-20210615-HONGJUREN"
+          :value="nftData.fileHash"
          boxType="border"
        ></app-cell>
        <app-cell
          text="发行时间"
-          value="JOYING-20210615-HONGJUREN"
+          :value="nftData.publishTime"
          boxType="border"
        ></app-cell>
      </div>
      <div class="py-3">
        <div class="text-font-dark-blue">版权信息</div>
-        <app-cell
+        <!-- <app-cell
          text="版权登记号"
          value="JOYING-20210615-HONGJUREN"
          boxType="border"
-        ></app-cell>
+        ></app-cell> -->
        <app-cell
          text="作者"
-          value="JOYING-20210615-HONGJUREN"
+          :value="nftData.author?nftData.author:'无'"
          boxType="border"
        ></app-cell>
-        <app-cell
+        <!-- <app-cell
          text="著作权人"
          value="JOYING-20210615-HONGJUREN"
          boxType="border"
@@ -86,17 +89,17 @@
          text="版权HASH"
          value="JOYING-20210615-HONGJUREN"
          boxType="border"
-        ></app-cell>
+        ></app-cell> -->
      </div>
        <div class="py-3">
-            <div class="text-font-dark-blue">版权信息</div>
+            <div class="text-font-dark-blue">剧本简介</div>
-            <div class=" py-2  tracking-wide leading-6  text-sm">在人工智能和机械人科技日新月异的进步下，我们已经不能阻止这些科技已经超越了一般只 是用于方便人们日常生活的范畴。特斯拉 CEO 埃隆·马斯克在公开场合说过“无人机等技 术的发展的迅速，在降低了生</div>
+            <div class=" py-2  tracking-wide leading-6  text-sm">{{nftData.synopsis?nftData.synopsis:'无'}}</div>
        </div>
        <div class="py-3">
            <div class="text-font-dark-blue">关于NFT</div>
-            <div class=' py-2  tracking-wide leading-6  text-sm'>NFT全称为Non-Fungible Token，也称为非同质化代币。可以通俗化理解为在区块链上的唯一凭证。为剧本、电影、花絮等电影产业铸造NFT。NFT不可分割、不可替代、独一无二，可以将资产数字化。采用NFT形式，推动剧本知识产权保护、剧本价值挖掘、促进剧本流通交易、保护编剧及电影制片方利益。我平台的NFT基于比特元（BTY）公链，根据ERC20或ERC1155协议发行，链上创建合约、链上确权、链上流转、链上查询。能有效保护剧本知识产权，防止篡改、伪造，并可在链上永久保留剧本原创作者信息，保留原创作者署名权，所有权等权益。保护编剧利益，促进编剧的创作欲望，促进电影行业生态健康发展。</div>
+            <div class=' py-2  tracking-wide leading-6  text-sm'>NFT全称为Non-Fungible Token，也称为非同质化通证。可以通俗化理解为在区块链上的唯一凭证。电影产业中，能够为剧本、电影、花絮、剧照、音乐等作品发行NFT，链上确权、高效流转、不可替代、独一无二。能够保护编剧及电影人的知识产权，挖掘版权交易价值，提高创作收益，丰富影视行业良好生态，创造影视版权数字化经济。</div>
        </div>
        <div class="py-3">
@@ -121,7 +124,6 @@
 <script lang="ts">
 import Vue from "vue";
 const apps = [
  {
    text: "版权认证",
@@ -146,17 +148,26 @@ export default Vue.extend({
    return {
      id: this.$route.params.id,
      apps,
+      nftData:{},
+      // loading:true
    };
  },
-  created() {},
+  async created() {
+    this.nftData =await this.$service.nftService.getNFTdetail(parseInt(this.id))
+    // const str ='safkjdshafosofol123 dfd'
+    // const strVal = this.$util.validator.isByteLength(str,{min:1,max:16})
+    // console.log(strVal);
+  },
  components: {
    "Layout-Child": () => import("@/layout/Child.vue"),
    "app-icon": () => import("@/components/common/Icon.vue"),
    "app-tag": () => import("@/components/common/Tag.vue"),
    "app-cell": () => import("@/components/common/Cell.vue"),
-        'app-btn':()=>import('@/components/common/Btn.vue'),
+    'app-btn':()=>import('@/components/common/Btn.vue'),
    //  'app-scrollbar':()=>import('@/components/common/ScrollBar.vue'),
-    "app-collectionCard": () => import("@/components/CollectionCard.vue"),
+    "app-collectionCard":  () => import("@/components/CollectionCard.vue"),
  },
 });
 </script>
--- a/src/view/NFT/Mynft/index.vue
+++ b/src/view/NFT/Mynft/index.vue
@@ -7,7 +7,7 @@
                    <div></div>
                </div>
                <div class='flex items-end justify-between flex-wrap'>
-                    <div class=' text-3xl'>30</div>
+                    <div class=' text-3xl'>{{balance}}</div>
                    <div class=' text-xs'>{{getUserInfo.wallet}}</div>
                </div>
            </div>
@@ -29,13 +29,15 @@ export default Vue.extend({
        return{
            categoryTypes:[] as any[],
            listData:{},
-            currentCategory:1
+            currentCategory:1,
+            balance:0
        }
    },
    async created(){
      this.categoryTypes = await this.$service.nftService.getCategory()
    },
    async mounted() {
      await this.$service.nftService.getMyList(this.currentCategory).then(res=>{
          this.listData = res.list
      })
@@ -50,8 +52,7 @@ export default Vue.extend({
        this.currentCategory = item.data.id
         await this.$service.nftService.getMyList(this.currentCategory).then(res=>{
            this.listData = res.list
-            console.log(this.listData);
+            this.balance = res.size
         })
      },

--- a/test_deploy.sh
+++ b/test_deploy.sh
@@ -3,4 +3,4 @@ tar -czf NFT_TEST.tar NFT_TEST
 scp NFT_TEST.tar root@47.114.159.142:/usr/share/nginx/html/NFT_TEST.tar
 rm -rf NFT_TEST.tar
 ssh root@47.114.159.142 'cd /usr/share/nginx/html && rm -rf NFT_TEST && tar -xzf NFT_TEST.tar && rm -rf NFT_TEST.tar'
-echo '👉 http://47.114.159.142/8983'
+echo '👉 http://47.114.159.142:8983'
\ No newline at end of file