321

src/components/common/Btn.vue

@@ -31,16 +31,7 @@ export default Vue.extend({
           this.$emit('btnClicked',v)
       }
   },
-  computed:{
-      getSize(){
-          switch (this.size) {
-              case 'full':
-                return 'w-full'
-              default:
-                  return 'w-20';
-          }
-      }
-  }
+
 });
 </script>
 

src/components/common/Tag.vue

 <template>
-    <div class='tag flex text-2xs px-3 py-1 bg-app-red rounded-md'>
+    <div class='tag flex justify-center text-2xs px-3 py-1 rounded-md' 
+    :class="tagActive?'bg-opacity-0 border':''"
+    @click="tagOnclick"
+    >
         {{text}}
     </div>
 </template>
@@ -9,14 +12,40 @@ import Vue from 'vue';
 export default Vue.extend({
   name: 'AppTag',
   props: {
-    size: String,
     disabled: {
         type:Boolean,
         default:false
     },
+    id:{ 
+      type:Number,
+      required: true
+    },
     text:{
         type: String,
         required: true
+    },
+    active: {
+        type:Boolean,
+        default:false
+    }
+  },
+  data(){
+    return{
+      tagActive:this.active
+    }
+  },
+  methods:{
+    tagOnclick(){
+      console.log(this.disabled);
+        if(this.disabled===false){
+          this.tagActive = !this.tagActive;
+          this.$emit('onclick', {
+          id:this.id,
+          text:this.text,
+          picked: !this.tagActive
+        })
+      }
+
     }
   },
 

src/service/index.ts

+import { NFTService } from './nftService'
 import {UserService} from './userService'
 
 
@@ -5,7 +6,8 @@ export default{
     install(Vue:any)
     {
       Vue.prototype.$service = {
-          userService: new UserService()
+          userService: new UserService(),
+          nftService: new NFTService()
       }
     }
 }

src/service/nftService.ts

@@ -2,12 +2,14 @@
 import {Service} from './Service'
 import {NFT_CREATE} from '@/types/Dto'
 import { token } from '@/util/userInfoUtils'
-export class UserService extends Service {
+export class NFTService extends Service {
     router = {
         create:{ path:'/nft/publish'},
-        getList:{ path:'/nft/generateNftId',dataType:'application/x-www-form-urlencoded'},
-        isRegisterd:{ path:'/user/isRegister', dataType:'application/x-www-form-urlencoded'},
-        isPwdSet:{ path:'/user/isSetPassword', dataType:'application/x-www-form-urlencoded'},
+        getMyList:{ path:'/nft/list/current',dataType:'application/x-www-form-urlencoded'},
+        getList:{path:'/nft/list',dataType:'application/x-www-form-urlencoded'},
+        genId:{ path:'/nft/generateNftId', dataType:'application/x-www-form-urlencoded'},
+        detail:{ path:'/nft/get/{id}', dataType:'application/x-www-form-urlencoded'},
+        themes:{ path:'/label/list',dataType:'application/x-www-form-urlencoded'}
     }
     auth = 'Bearer ' + token.getToken()
     constructor(){
@@ -27,18 +29,77 @@ export class UserService extends Service {
         })
     }
 
+
+    /**
+     * 
+     * @returns 获取剧目主题表
+     */
+    async getThemeList(){
+        return await this.service.get(this.router.themes.path,{
+            headers:{
+                "Authorization": this.auth,
+                "Content-Type": this.router.themes.dataType}
+        })
+    }
+
+    /**
+     * 获取我的NFT列表
+     * @param categoryId 
+     * @returns 
+     */
+    async getMyList(categoryId?:number){
+        return await this.service.get(this.router.getMyList.path,{
+            headers:{
+                "Authorization": this.auth,
+                "Content-Type": this.router.getMyList.dataType},
+            params:{"categoryId":categoryId?categoryId:null}
+        })
+    }
+
     /**
-     * 获取NFT编号
+     * 获取所有NFT的列表
+     * @param pageNum 
+     * @param pageSize 
      * @param categoryId 
      * @returns 
      */
-    async getList(categoryId:number){
+    async getList(pageNum?:number,pageSize?:number,categoryId?:number){
         return await this.service.get(this.router.getList.path,{
-            headers:{"Content-Type": this.router.getList.dataType},
+            headers:{
+                "Authorization": this.auth,
+                "Content-Type": this.router.getList.dataType},
+            params:{"categoryId":categoryId?categoryId:null,"pageNum":pageNum,'pageSize':pageSize }
+        })
+    }
+
+    /**
+     * 生成id
+     * @param categoryId 
+     * @returns 
+     */
+    async generateNftId(categoryId:number){
+        return await this.service.get(this.router.genId.path,{
+            headers:{
+                "Authorization": this.auth,
+                "Content-Type": this.router.genId.dataType},
             params:{"categoryId":categoryId}
         })
     }
 
+    /**
+     * 按照id查找nft详情
+     * @param id 
+     */
+    async detail(id:number){
+        return await this.service.get(this.router.detail.path,{
+            headers:{
+                "Authorization": this.auth,
+                "Content-Type": this.router.detail.dataType
+            },
+            params:{"id":id}
+        })
+    }
+
 }
 
 

src/shimes-app.d.ts

 import Vue from 'vue'
 import { Service } from './service/index'
+import { NFTService } from './service/nftService'
 import { UserService } from './service/userService'
 import { UTIL_INTERFACE } from '@/util/util.types'
 import VueRouter, { Route } from 'vue-router'
 
 interface ServiceType {
     userService: UserService
+    nftService: NFTService
 }
 
 

src/types/Dto.ts

@@ -40,3 +40,4 @@ export interface NFT_CREATE{
     theme:string
     isGrant?:number
 }
+

src/view/NFT/Create/form.vue

@@ -5,15 +5,15 @@
   </div>
   <div class="w-11/12 mx-auto">
     <div class="step-one" v-if="currentStep==1">
-        <app-cell v-model="value_name" type="input" text='剧本名称' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
-        <app-cell v-model="value_publisher" type="input" text='发行人' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
+        <app-cell v-model="createNFT.value_name" type="input" text='剧本名称' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
+        <app-cell v-model="createNFT.value_publisher" type="input" text='发行人' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
         <app-cell :pickValue="mySteps" type="pick" text='剧本题材' class="text-font-white my-3" @onClick="what"></app-cell>
         <div>
             <div class="text-font-white my-2">剧本简介</div>
-            <textarea name="des" id="nft-des" cols="30" rows="10" class=" w-full bg-font-gray bg-opacity-20 text-font-white p-3 text-sm"></textarea>
+            <textarea v-model="createNFT.value_des" name="des" id="nft-des" cols="30" rows="10" class=" w-full bg-font-gray bg-opacity-20 text-font-white p-3 text-sm"></textarea>
         </div>
         <div class="fixed bottom-0 w-full left-0 z-30">
-            <app-btn text="下一步" class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(1)'></app-btn>
+            <app-btn text="下一步" class="w-11/12 mx-auto text-font-white rounded-2xl bg-font-blue" :disabled="validation" border='none' @btnClicked='currentStepChange(1)'></app-btn>
         </div>
     </div>
     <div class="step-two" v-if="currentStep==2">
@@ -23,7 +23,7 @@
         <app-cell  text='授权阅读' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
         <div class="fixed bottom-0 w-full left-0 flex flex-row z-30">   
             <app-btn text="上一步" class=" w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(-1)'></app-btn>
-            <app-btn text="下一步" class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(1)'></app-btn>
+            <app-btn text="下一步" class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" :disabled="validation" border='none' @btnClicked='currentStepChange(1)'></app-btn>
         </div>
     </div>
     <div class="step-three" v-if="currentStep==3">
@@ -33,7 +33,7 @@
         <app-cell  text='数量' class="text-font-white my-3" @cellOnChange="getValue"></app-cell>
         <div class="fixed bottom-0 w-full left-0 flex flex-row z-30">   
             <app-btn text="上一步" class=" w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(-1)'></app-btn>
-            <app-btn text="发行NFT" class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' @btnClicked='currentStepChange(1)'></app-btn>
+            <app-btn text="发行NFT" class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' :disabled="validation" @btnClicked='currentStepChange(1)'></app-btn>
         </div>
     </div>
   </div>
@@ -46,8 +46,18 @@ import Vue from 'vue';
 export default Vue.extend({
   data(){
     return{
+      createNFT:{
         value_name:'',
         value_publisher:'',
+        value_picker:[],
+        value_des:''
+      },
+      // validation:{
+      //   step_one:true,
+      //   step_two:true,
+      //   step_three:true
+      // },
+
       mySteps:[
           {
             text:'step1'
@@ -68,6 +78,19 @@ export default Vue.extend({
        'app-cell':()=>import('@/components/common/Cell.vue'),
         'app-btn':()=>import('@/components/common/Btn.vue')
   },
+  computed:{
+    validation:function(){
+      let disabled = true
+      const {value_name,value_publisher } = this.createNFT
+      if(this.currentStep === 1){
+        if(value_name&&value_publisher){
+          disabled = false
+        }
+        disabled = true
+      }
+      return disabled
+    }
+  },
   methods:{
     addStep(){
       this.currentStep ++

src/view/NFT/Create/pick.vue

 <template>
 <Layout-Child>
-dfdf
+  <div class="pt-6">
+    <div class="text-font-red text-sm text-center">*最多支持三个选项</div>
+    <div class=" grid grid-cols-3 w-11/12 mx-auto mt-6">
+      <div class="box px-5 py-3" v-for="(i,index) in serviceData" :key="index">
+        <app-tag  :text='i.name' class="text-sm  rounded-xl text-font-white bg-app-red"  :active='isTagActived(i.id)' @onclick='tagOnclick' :id='i.id'></app-tag>
+      </div>
+
+        </div>
+            <div class="fixed bottom-0 w-full left-0 flex flex-row z-30">   
+            <app-btn text="取消" class=" w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' ></app-btn>
+            <app-btn text="确认" class="w-5/12 mx-auto text-font-white rounded-2xl bg-font-blue" border='none' :disabled='pickValid'></app-btn>
+        </div>
+  </div>
 </Layout-Child>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-
+import {remove as _remove} from 'lodash'
 export default Vue.extend({
+  data(){
+    return{
+      picked:[] as Array<{id:number,text:string}>,
+      serviceData:{},
+      pickValid:true
+    }
+  },
+  async mounted(){
+    this.serviceData = await this.$service.nftService.getThemeList()
+  },
   components:{
-       'Layout-Child':()=>import('@/layout/Child.vue')
+       'Layout-Child':()=>import('@/layout/Child.vue'),
+       'app-tag':()=>import('@/components/common/Tag.vue'),
+      'app-btn':()=>import('@/components/common/Btn.vue')
+  },
+  methods: {
+    tagOnclick(item:any){
+      if(this.picked.includes(item.id)){
+        _remove(this.picked,(i)=>{
+          return i === item.id;
+        })
+        console.log(this.picked,'remove');
+        return
+      }
+      this.picked.push(item.id)
+    }
+  },
+  computed:{
+
+    isTagDisabled(){
+      const that  = this;
+      return function(id:any){
+        const exist = that.picked.includes(id)
+        if(that.picked.length>2 || exist){
+          return true
+        }
+        return false
+      }
     },
+    isTagActived(){
+      const that = this
+      return function(id:any){
+        if(that.picked.includes(id)){
+          return false
+        } 
+        return true
+      }
+    }
+  }
 });
 </script>