321

.env

+NODE_ENV = DEVELOPMENT
+VUE_APP_ENV = DEVELOPMENT
+VUE_APP_TITLE=开发版本
+VUE_APP_URL = http://172.16.101.135:8001
\ No newline at end of file

.env.test

+NODE_ENV = TEST
+VUE_APP_ENV = TEST
+VUE_APP_TITLE=测试版本
+
+VUE_APP_URL = http://172.16.101.136:8001
\ No newline at end of file

package.json

@@ -4,8 +4,9 @@
   "private": true,
   "scripts": {
     "dev": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "test":"vue-cli-service serve --mode test",
+    "deploy:test":"vue-cli-service build --mode test && bash ./test_deploy.sh",
+    "build": "vue-cli-service build"
   },
   "dependencies": {
     "@tailwindcss/line-clamp": "^0.2.1",
@@ -43,6 +44,8 @@
     "postcss": "^7.0.36",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4",
     "typescript": "~4.1.5",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11",
+    "terser-webpack-plugin": "^4.2.3",
+    "compression-webpack-plugin": "^1.1.11"
   }
 }

src/App.vue

@@ -54,7 +54,6 @@ export default Vue.extend({
 
   name: "App",
   mounted() {
-    // this.$service.userService.isPwdSet('13013370014')
     this.routerController();
   },
   methods: {

src/components/CardList.vue

 <template>
     <div class="list-container font-light">
-            <div class="list-row flex justify-between relative text-font-white text-sm mb-3"  v-for="(i,index) in outputData" :key="index">
+            <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='w-full '>
-                    <img :src='k.cover'  class=" w-11/12 mx-auto   rounded-xl shadow-md">
+                    <img src='/img/cover.png'  class=" w-11/12 mx-auto   rounded-xl shadow-md">
                   </div>
                   <div class='mt-3'>
-                    {{k.text}}
+                    {{k.name}}
                   </div>
               </div>
                 <div class='absolute bottom-6 z-0 w-full '>

src/components/CollectionCard.vue

@@ -16,18 +16,23 @@
     </div>
     <div class="right w-8/12">
       <div class="w-full px-4">
-        <div class=" text-lg">飙车大师</div>
-        <div class="flex flex-wrap w-full mt-1  text-sm">
+        <div class=" text-lg">{{mydata.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}}
+            </p>
+        </div>
+
+        <div class="flex flex-wrap w-full mt-1  text-sm mt-3">
           <div class="text-font-dark-blue">题材</div>
-          <div class="flex px-3 gap-x-2">
-            <span>谍战</span>
-            <span>穿越</span>
-            <span>奇幻</span>
+          <div class="flex px-3 gap-x-2" v-for='(i,index) in getThemeList' :key="index">
+            <span>{{i}}</span>
           </div>
         </div>
-        <p class=" break-words line-clamp-2  mt-8 w-full text-sm text-font-dark-blue">
-            sdfkjsdlkfjsdlkfsadfsdfsdfsdfsdfsdfsdfsdfsdfsdfdsfdsfsdfsddsfasdfsdfsdf
-        </p>
+
+
       </div>
     </div>
   </div>
@@ -35,12 +40,26 @@
 
 <script lang="ts">
 import Vue from "vue";
-
+import {MyNFTItem} from '@/types/Dto'
 export default Vue.extend({
   name: "CollectionCard",
   props: {
       colletionData:{} 
   },
+  data(){
+    return{
+      mydata:this.colletionData  as MyNFTItem
+    }
+  },
+  computed:{
+    getThemeList():any[]{
+      if(this.mydata){
+        let i = this.mydata.theme.split(',')
+        return i
+      }
+      return []
+    }
+  }
 });
 </script>
 

src/service/Service.ts

 
 import axios, { AxiosInstance } from "axios"
 
-const url = {
-    development: 'http://172.16.101.135:8001',
-    test: '',
-    production: ''
-}
+// const url = {
+//     development: 'http://172.16.101.135:8001',
+//     test: 'http://172.16.101.136:8001',
+//     production: ''
+// }
 
 import { Toast } from "vant"
 export class Service {
     public service: AxiosInstance;
     constructor() {
         this.service = axios.create({
-            baseURL: process.env.NODE_ENV === 'production' ? url.production : url.development,
+            baseURL:'/proxyApi',
             timeout: 15000,
         })
         const get = this.service.get

src/service/nftService.ts

@@ -71,7 +71,7 @@ export class NFTService extends Service {
    * @param categoryId
    * @returns
    */
-  async getMyList(categoryId?: number) {
+  async getMyList(categoryId?: number):Promise<any> {
     return await this.service.get(this.router.getMyList.path, {
       headers: {
         Authorization: this.auth,

src/style.less

@@ -67,7 +67,10 @@ body{
     height: calc(100vh - 400px);
     overflow-y: scroll;
   }
-
+  .myNFT-list-scroll{
+    height: calc(100vh - 290px);
+    overflow-y: scroll;
+  }
   .van-dialog{
     background-color: #1D2649;
 

src/types/Dto.ts

@@ -11,6 +11,14 @@ import { PRODUCT_STATUS } from '@/constant/product'
 //     sent_at_second: number
 // }
 
+export interface MyNFTItem{
+    category:string;
+    id:number;
+    name:string;
+    nftId:string;
+    theme:string;
+}
+
 
 export interface LoginDto {
     codetype: string

src/view/Home/index.vue

@@ -14,7 +14,9 @@
         <div class="container-view w-11/12 mx-auto">
           <app-scrollbar :list='categoryTypes' @tabChange='getDataByCategory'></app-scrollbar>
           <div class="list-scroll">
-            <app-cardList :data='mokeData'></app-cardList>
+            <app-cardList :data='listData' v-if="listData.length"></app-cardList>
+            <van-empty image="error" description="没有找到更多内容"  v-else/>
+            <div class="h-12"></div>
           </div>
         </div>
     </Layout-Main>
@@ -23,49 +25,13 @@
 <script lang="ts">
 import Vue from 'vue';
 import { Badge } from 'vant';
-const mokeData= [
-  {
-    cover:'/img/cover.png',
-    text:'dslfjl'
-  },
-    {
-    cover:'/img/cover.png',
-    text:'123213'
-  },
-    {
-    cover:'/img/cover.png',
-    text:'kkk'
-  },
-    {
-    cover:'/img/cover.png',
-    text:'ertfr'
-  },
-      {
-    cover:'/img/cover.png',
-    text:'ertfr'
-  },
-      {
-    cover:'/img/cover.png',
-    text:'ertfr'
-  },
-      {
-    cover:'/img/cover.png',
-    text:'ertfr'
-  },
-      {
-    cover:'/img/cover.png',
-    text:'ertfr'
-  },
-      {
-    cover:'/img/cover.png',
-    text:'ertfr'
-  },
-]
+import { Empty } from 'vant';
+
+Vue.use(Empty);
 Vue.use(Badge)
 export default Vue.extend({
   data() {
     return{ 
-      mokeData,
       categoryTypes:[] as any[],
       currentCategory:1,
       currentPage:1,
@@ -83,8 +49,8 @@ export default Vue.extend({
   async created(){
     this.categoryTypes = await this.$service.nftService.getCategory()
   },
-  mounted() {
-     this.listData = this.$service.nftService.getList(this.currentPage,this.pagesize)
+  async mounted() {
+     this.listData = await this.$service.nftService.getList(this.currentPage,this.pagesize,this.currentCategory)
   },
   methods:{
     search(){
@@ -95,10 +61,9 @@ export default Vue.extend({
       console.log(222);
     },
     async getDataByCategory(item:any){
-      console.log(11);
-      console.log(item.activeIndex);
+      console.log(item);
       
-      this.currentCategory = item.activeIndex
+      this.currentCategory = item.data.id
       this.listData =  await this.$service.nftService.getList(this.currentPage,this.pagesize,this.currentCategory)
     }
   }

src/view/NFT/Create/form.vue

@@ -320,7 +320,7 @@ export default Vue.extend({
               this.createNFT.archives,
               this.createNFT.value_name,
               this.createNFT.value_des,
-              this.pickedList.map((i: any) => i.id as string).toString(),
+              this.pickedList.map((i: any) => i.text as string).toString(),
               this.file,
               this.createNFT.grant
             );

src/view/NFT/Create/upload.vue

+
 <template>
   <Layout-Child class="page-scroll text-center">
     <div class="text-font-white mt-20 text-center mb-20">请上传剧本附件</div>
@@ -73,6 +74,7 @@
 </template>
 
 <script lang="ts">
+/* eslint-disable */
 import Vue from "vue";
 import { Uploader, Loading } from "vant";
 import { mapMutations, mapState } from "vuex";

src/view/NFT/Mynft/index.vue

@@ -8,15 +8,14 @@
                 </div>
                 <div class='flex items-end justify-between flex-wrap'>
                     <div class=' text-3xl'>30</div>
-                    <div>sidfhuoisdufsdjufosdfjosdi</div>
+                    <div class=' text-xs'>{{getUserInfo.wallet}}</div>
                 </div>
             </div>
         </div>
         <div class="container-view w-11/12 mx-auto">
             <app-scrollbar :list='categoryTypes' @tabChange='getDataByCategory'></app-scrollbar>
-          <div>
-            <app-collectionCard></app-collectionCard>
-         
+          <div class="myNFT-list-scroll">
+            <app-collectionCard  v-for="i in listData" :key="i.id" class="mt-3" :colletionData='i'></app-collectionCard>
           </div>
         </div>
 </Layout-Child>
@@ -30,20 +29,32 @@ export default Vue.extend({
         return{
             categoryTypes:[] as any[],
             listData:{},
-            currentCategory:0
+            currentCategory:1
         }
     },
     async created(){
       this.categoryTypes = await this.$service.nftService.getCategory()
     },
-     mounted() {
-      this.listData =  this.$service.nftService.getMyList()
+    async mounted() {
+      await this.$service.nftService.getMyList(this.currentCategory).then(res=>{
+          this.listData = res.list
+      })
+    },
+    computed:{
+    getUserInfo(){
+          return this.$util.userMsg.getUserMsg()
+      }
     },
     methods: {
-      getDataByCategory(item:any){
-        console.log(item);
+      async getDataByCategory(item:any){
+        this.currentCategory = item.data.id
+         await this.$service.nftService.getMyList(this.currentCategory).then(res=>{
+            this.listData = res.list
+            console.log(this.listData);
             
-      }
+         })
+        
+      },
     },
   components:{
       'Layout-Child':()=>import('@/layout/Child.vue'),

tailwind.config.js

 const colors = require('tailwindcss/colors')
 
 module.exports = {
-  purge: [],
+  purge: [
+    './src/**/*.html',
+    './src/**/*.vue',
+  ],
   presets: [],
   darkMode: false, // or 'media' or 'class'
   theme: {

test_deploy.sh

+
+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'
\ No newline at end of file

vue.config.js

+const CompressionWebpackPlugin = require("compression-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+
 module.exports = {
     // ...other vue-cli plugin options...
-    outputDir: 'NFT',
+    outputDir: process.env.VUE_APP_ENV === 'TEST'?'NFT_TEST':'NFT',
     css: {
       loaderOptions: {
         less: {
@@ -11,34 +14,28 @@ module.exports = {
       devServer: {
         proxy: { // 设置代理
           '/proxyApi': {
-            target: 'http://172.16.101.135:8001',
+            target:process.env.VUE_APP_URL,
             // target: 'http://' + "124.71.183.184:8093",
             changeOrigin: true,
             pathRewrite: {
               '^/proxyApi': ''
             }
-          },
-          // '/proxyWs': {
-          //   target: 'ws://' + "172.16.102.150:8091",
-          //   // target: 'ws://' + "124.71.183.184:8093",
-          //   changeOrigin: true,
-          //   ws: true,
-          //   pathRewrite: {
-          //     '^/proxyWs': ''
-          //   }
-          // },
-          // "/gyl_search": {
-          //   target: appConfig.blockChainExplorerAddress,
-          //   changeOrigin: true,
-          //   pathRewrite: {
-          //     "^/gyl_search": '',
-          //   }
-          // },
-          // "/root": {
-          //   target: appConfig.blockChainExplorerAddress,
-          //   changeOrigin: true,
-          // },
           }
+        }
+      },
+      configureWebpack: {
+        optimization: {
+          minimize: process.env.VUE_APP_ENV === 'DEVELOPMENT'?false: true,
+          minimizer: [
+            new TerserPlugin({
+              sourceMap: false,
+              parallel: true,
+            }),
+          ],
+        },
+        plugins: [
+          new CompressionWebpackPlugin(),
+        ],
       },  
     // pwa: {
     //   name: 'My App',