321

babel.config.js

@@ -8,6 +8,16 @@ module.exports = {
       libraryDirectory: 'es',
       style: true
     }, 'vant'],
+
+
+    [
+      'import',{
+        libraryName: 'lodash',
+        libraryDirectory:'',
+        camel2DashComponentName:false
+      },'lodash'
+    ],
+ 
     ['import', {
       libraryName: 'ant-design-vue',
       libraryDirectory: "es",

package.json

@@ -3,13 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "dev": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@tailwindcss/line-clamp": "^0.2.1",
     "ant-design-vue": "^1.7.5",
+    "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "lodash": "^4.17.21",
     "register-service-worker": "^1.7.1",
     "vant": "^2.12.22",
     "vue": "^2.6.11",
@@ -18,6 +21,7 @@
     "vuex": "^3.4.0"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.170",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
     "@vue/cli-plugin-babel": "~4.5.0",

src/App.vue

@@ -54,8 +54,7 @@ export default Vue.extend({
 
   name: "App",
   mounted() {
-    console.log(window);
-    
+    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='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">
+                  </div>
+                  <div class='mt-3'>
+                    {{k.text}}
+                  </div>
+              </div>
+                <div class='absolute bottom-6 z-0 w-full '>
+                  <img src="@/assets/img/holder.png" class="w-full ">
+                </div>
+            </div>
+  
+          </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import {chunk as _chunk} from 'lodash'
+export default Vue.extend({
+  name: 'AppTag',
+  props: {
+    rowSize: {
+        type:Number,
+        default:3
+    },
+    data:{
+        type:Array,
+        required: true
+    }
+  },
+  computed:{
+      outputData:function(){
+          return _chunk(this.data,this.rowSize)
+      }
+  }
+});
+</script>
+

src/components/common/Cell.vue

 <template>
-           <div class="cell flex justify-between py-3 border-t border-b border-app-dark-3 px-2">
-               <div class="left">hahah</div>
+           <div class="cell flex justify-between py-3 border-t border-b border-gray-500 px-2">
+               <div class="left flex items-center">
+                   <app-icon v-if='icon' :name="icon" size='18px'></app-icon>
+                   <div class="px-2">
+                       {{text}}
+                   </div>
+                   </div>
                <div class="right">
-                    <Switch default-checked /> 
+                   <div v-if="type=='click'" @click="eventEmit(type)">
+                        <app-icon name="icon-xiayibu" size='18px'></app-icon>
+                   </div>
+                
                </div>
            </div>
 </template>
@@ -10,14 +18,16 @@
 <script lang="ts">
 import Vue from 'vue';
 import { Switch } from 'ant-design-vue'
-// Vue.use(Switch)
+Vue.use(Switch)
 export default Vue.extend({
-    components:{ Switch},
+    components:{
+        'app-icon':()=>import('@/components/common/Icon.vue')
+    },
   props: {
     size: String,
     type: {
         type:String,
-        default:'select'
+        default:'click'
     },
     disabled:{
         type:Boolean,
@@ -27,17 +37,18 @@ export default Vue.extend({
         type: String,
         required: true
     },
-    theme:{
-        type: String,
-        default:'default'
-    }
+    icon:String
+
   },
   methods:{
       eventEmit(v:any){
           if(this.disabled){
               return
           }
-          this.$emit('btnClicked',v)
+          if(this.type === 'click'){
+            this.$emit('onClick',v)
+          }    
+    
       }
   },
   computed:{

src/components/common/Tag.vue

+<template>
+    <div class='tag flex text-2xs px-3 py-1 bg-app-red rounded-md'>
+        {{text}}
+    </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+  name: 'AppTag',
+  props: {
+    size: String,
+    disabled: {
+        type:Boolean,
+        default:false
+    },
+    text:{
+        type: String,
+        required: true
+    }
+  },
+
+});
+</script>
+

src/layout/Child.vue

+<template>
+  <div id="Child" class="bg-font-black">
+    <NavHeader></NavHeader>
+    <div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import NavHeader from './NavHeader.vue'
+export default Vue.extend({
+  name: 'layout_child',
+  components:{
+    NavHeader
+  }
+});
+</script>

src/layout/NavFooter.vue

 <template>
-    
         <div class='flex items-center justify-around pb-6 pt-3  rounded-t-2xl bg-font-black shadow-nav text-font-white text-2xs' >
-            <div class='flex flex-col items-center'>
+            <div class='flex flex-col items-center' @click="setNav('Home')">
                 <app-icon name='icon-lianxiwomen' size='24px' color='#fff'></app-icon>
                 <div class='mt-2'>大厅</div>
             </div>
@@ -11,12 +10,11 @@
                 </div>
                 <div class='mt-8'>发行NFT</div>
             </div>
-            <div class='flex flex-col items-center'>
+            <div class='flex flex-col items-center' @click="setNav('Mine')">
                 <app-icon name='icon-lianxiwomen' size='24px' color='#fff'></app-icon>
                 <div class='mt-2'>我的</div>
             </div>
         </div>
-
 </template>
 
 <script lang="ts">
@@ -34,7 +32,8 @@ export default Vue.extend({
   name: 'layout_one',
   data(){
       return{
-          NavRouter
+          NavRouter,
+          actived:'Home'
       }
   },
   components:{
@@ -43,6 +42,12 @@ export default Vue.extend({
   methods:{
       goNFT(){
           this.$store.commit('app/TOGGLE_OVERLAY')
+      },
+      setNav(item:any){
+          if(this.$route.name != item){
+              this.actived = item
+              this.$router.push(`/${item}`)
+          }
       }
   }
 });

src/layout/NavHeader.vue

+<template>
+        <div class='flex items-center justify-around pb-6 pt-3  rounded-t-2xl bg-font-black shadow-nav text-font-white text-2xs' >
+            <div class='flex flex-col items-center' @click="setNav('Home')">
+                <app-icon name='icon-lianxiwomen' size='24px' color='#fff'></app-icon>
+                <div class='mt-2'>大厅</div>
+            </div>
+            <div class='flex flex-col items-center relative' @click="goNFT">
+                <div class=' absolute -top-12 rounded-full p-4 bg-font-black mx-auto  shadow-nav text-center'>
+                    <app-icon name='icon-lianxiwomen' size='34px' color='#fff' ></app-icon>
+                </div>
+                <div class='mt-8'>发行NFT</div>
+            </div>
+            <div class='flex flex-col items-center' @click="setNav('Mine')">
+                <app-icon name='icon-lianxiwomen' size='24px' color='#fff'></app-icon>
+                <div class='mt-2'>我的</div>
+            </div>
+        </div>
+</template>
+
+
+<script lang="ts">
+import Vue from 'vue';
+import NavFooter from './NavFooter.vue'
+export default Vue.extend({
+  name: 'layout_one',
+  components:{
+    NavFooter   
+  }
+});
+</script>
+
+<style lang="less">
+
+</style>

src/main.ts

@@ -5,8 +5,10 @@ import router from './router'
 import store from './store'
 import "tailwindcss/tailwind.css"
 import './style.less'
+import service from './service'
 import { Plugin } from 'vue-fragment'
 Vue.use(Plugin)
+Vue.use(service)
 Vue.config.productionTip = false
 
 new Vue({

src/router/index.ts

@@ -14,9 +14,19 @@ const routes: Array<RouteConfig> = [
         path:'/Home',
         name: 'Home',
         component:()=>import('@/view/Home/index.vue')
+      },
+      {
+        path:'/Mine',
+        name: 'Mine',
+        component:()=>import('@/view/Mine/index.vue')
       }
     ]
   },
+  {
+    path:'/Nft/create',
+    name:'createNft',
+    component:()=>import('@/view/NFT/Create.vue')
+  }
 
 ]
 

src/service/Service.ts

+
+import axios, { AxiosInstance } from "axios"
+
+const url = {
+    development:'http://172.16.101.135:8001',
+    test:'',
+    production:''
+}
+
+export class Service {
+    public service:AxiosInstance ;
+    constructor(){
+        this.service = axios.create({
+            baseURL: process.env.NODE_ENV === 'production'? url.production:url.development,
+            timeout: 15000
+        })
+    }
+}
\ No newline at end of file

src/service/index.ts

+
+import {UserService} from './userService'
+
+
+export default{
+    install(Vue:any)
+    {
+      Vue.prototype.$service = {
+          userService: new UserService()
+      }
+    }
+}
+
+

src/service/userService.ts

+
+import {Service} from './Service'
+import {LoginDto} from '@/types/Dto'
+export class UserService extends Service {
+    router = {
+        sendCode:{ path:'/verificationCode/send/sms', dataType:'application/x-www-form-urlencoded'},
+        login:{ path:'/user/login'},
+        isRegisterd:{ path:'/user/isRegister', dataType:'application/x-www-form-urlencoded'},
+        isPwdSet:{ path:'/user/isSetPassword', dataType:'application/x-www-form-urlencoded'},
+    }
+    constructor(){
+        super()
+    }
+
+    /**
+     * 获取验证码
+     * @param phone 
+     * @param codeType  短信模板, 1:登录短信 2:修改密码 3:修改手机号	
+     */
+    async getVerificationCode(telephone:string,codetype:string){
+        return await this.service.post(this.router.sendCode.path,{},{
+             headers:{"Content-Type": this.router.sendCode.dataType},
+             params:{"telephone":telephone, "codetype":codetype}
+         })
+    }
+
+    /**
+     * 登录，没有账号则注册
+     * @param data 
+     * @returns 
+     */
+    async loginAndSign(data:LoginDto){
+        return await this.service.post(this.router.login.path,data)
+    }
+
+    /**
+     * 查看是否有该用户
+     * @param account 手机号或者邮箱
+     * @returns 
+     */
+    async isRegisterd(account:string){
+        return await this.service.get(this.router.isRegisterd.path+'/'+account)
+    }
+    /**
+     * @description 查看用户是否设置了密码
+     * @param account 手机号或者邮箱
+     * @returns 
+     */
+    async isPwdSet(account:string){
+        return await this.service.get(`${this.router.isPwdSet.path}/${account}`)
+    }
+
+
+}
+
+

src/shimes-app.d.ts

+import Vue from 'vue'
+import {Service} from './service/index'
+import {UserService} from './service/userService'
+
+
+
+interface ServiceType {
+    userService: UserService
+}
+
+
+declare module 'vue/types/vue' {
+    interface Vue {
+        $service:ServiceType
+    }
+  }
\ No newline at end of file

src/types/Dto.ts

 import { PRODUCT_STATUS } from '@/constant/product'
 
 
-interface Product_Item {
-    customer: string,
-    destination: string,
-    event_name: PRODUCT_STATUS,
-    id: string,
-    item: string,
-    price: number,
-    sent_at_second: number
+// interface Product_Item {
+//     customer: ,
+//     destination: string,
+//     event_name: PRODUCT_STATUS,
+//     id: string,
+//     item: string,
+//     price: number,
+//     sent_at_second: number
+// }
+
+
+export interface LoginDto {
+    codetype: string
+    email?:string
+    password:string
+    telephone: string	
+    verificationCode: string
+}
+
+export interface PersonalCertifyDto{
+    cardPictureBack: string
+    cardPictureFront: string
+    createDate: string
 }
\ No newline at end of file

src/util/index.ts

@@ -38,7 +38,7 @@ function showAmount (amount:string|number):string {
  * @returns Array
  */
  function formArray (data:any[],rowNum:number):any[] {
-
+    
     return []
 }
   
\ No newline at end of file

src/view/Home/index.vue

@@ -13,37 +13,8 @@
         </div>
         <div class="container-view w-11/12 mx-auto">
           <app-scrollbar></app-scrollbar>
-          <div class="list-container font-light">
-            <div class="list-row flex justify-between relative text-font-white text-sm">
-              <div class='item flex flex-col w-4/12 items-center z-10'>
-                  <div class='w-full '>
-                    <img src="@/assets/img/cover.png" class=" w-11/12 mx-auto   rounded-xl shadow-md">
-                  </div>
-                  <div class='mt-3'>
-                    飙车大师
-                  </div>
-              </div>
-              <div class='item flex flex-col w-4/12 items-center z-10'>
-                  <div class='w-full '>
-                    <img src="@/assets/img/cover.png" class=" w-11/12 mx-auto  rounded-xl shadow-md">
-                  </div>
-                  <div class='mt-3'>
-                    飙车大师
-                  </div>
-              </div>
-              <div class='item flex flex-col w-4/12 items-center z-10'>
-                  <div class='w-full '>
-                    <img src="@/assets/img/cover.png" class=" w-11/12 mx-auto  rounded-xl shadow-md">
-                  </div>
-                  <div class='mt-3'>
-                    飙车大师
-                  </div>
-              </div>
-                <div class=' absolute bottom-6 z-0 w-full '>
-                  <img src="@/assets/img/holder.png" class="w-full ">
-                </div>
-            </div>
-  
+          <div>
+            <app-cardList :data='mokeData'></app-cardList>
           </div>
         </div>
     </Layout-Main>
@@ -52,12 +23,36 @@
 <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'
+  },
+]
 Vue.use(Badge)
 export default Vue.extend({
+  data() {
+    return{ 
+      mokeData
+    }
+  },
   components:{ 
     'Layout-Main':()=>import('@/layout/Main.vue'),
     'app-icon':()=>import('@/components/common/Icon.vue'),
-    'app-scrollbar':()=>import('@/components/common/ScrollBar.vue')
+    'app-scrollbar':()=>import('@/components/common/ScrollBar.vue'),
+    'app-cardList':()=>import('@/components/CardList.vue')
   }, 
   name: 'Home',
   methods:{

src/view/Mine/index.vue

+<template>
+    <Layout-Main> 
+        <div class='user-info w-11/12 mx-auto flex text-font-white items-center py-5'>
+            <div class='w-3/12 pr-5'>
+                <img src="@/assets/img/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'>
+                    <div class=' text-lg'>名字</div>
+                    <div class=' text-sm flex items-center'>
+                        <div>个人中心</div>
+                        <app-icon name="icon-xiayibu"></app-icon>
+                    </div>
+                </div>
+                <div class='tags flex py-2'>
+                    <app-tag text='编剧'></app-tag>
+                </div>
+                <div class='intro text-2xs line-clamp-1 text-font-gray'>
+                    我是一个热爱编剧事业的帅哥，我的理想,真jb不要脸dsfakjsdhfkljshda;fkljsdklfjlskadjf;lksdajf;lksajdf;lksjdadflkjsd;flkjsd;lkfjs;ldk
+                </div>
+            </div>
+        </div>
+        <div class='app-icons w-11/12 mx-auto grid grid-cols-4 gap-4 my-3'>
+            <div v-for="(i,index) in apps" :key="index" class="flex justify-center">
+                <div class="flex flex-col items-center gap-y-2">
+                    <div class="flex  content-center">
+                        <app-icon :name="i.icon" size='24px' class='p-5 bg-table-light-blue shadow-md rounded-full'></app-icon>
+                    </div>
+                    <div class='text-xs text-font-white'>
+                        {{i.text}}
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class='amount-card w-11/12 mx-auto rounded-t-lg bg-app-red py-3 px-2 text-font-white mt-8'>
+            <div class='flex justify-between'>
+                <div>我的NFT</div>
+                <div>数量（个）</div>
+            </div>
+            <div class='pt-8  pb-4 text-2xl flex items-center content-end justify-end'>
+                30
+                <app-icon name="icon-xiayibu"></app-icon>
+            </div>
+        </div>
+        <div class='cells w-11/12 mx-auto text-font-white'>
+                <app-cell text='收藏' icon='icon-xiaoxi' @onClick='cellClick'></app-cell>
+        </div>
+    </Layout-Main>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { Badge } from 'vant';
+
+Vue.use(Badge)
+
+const apps=[
+    {
+        text:'版权授权',
+        icon:'icon-anquanzhongxin89'
+    },
+    {
+        text:'区块链浏览器',
+        icon:'icon-chakan'
+    },
+        {
+        text:'制片管理',
+        icon:'icon-a-tupian'
+    },
+        {
+        text:'我的投资',
+        icon:'icon-BOSS-yingyeting-chushi'
+    },
+]
+
+export default Vue.extend({
+    data() {
+        return{
+            apps
+        }
+    },
+  components:{ 
+    'Layout-Main':()=>import('@/layout/Main.vue'),
+    'app-icon':()=>import('@/components/common/Icon.vue'),
+    'app-tag':()=>import('@/components/common/Tag.vue'),
+    'app-cell':()=>import('@/components/common/Cell.vue')
+  }, 
+  name: 'Mine',
+  methods:{
+    search(){
+      console.log(11);
+      
+    },
+    info(){
+      console.log(222);
+      
+    },
+    cellClick(){
+        console.log(111);
+    }
+  }
+});
+</script>

src/view/NFT/Create.vue

+<template>
+  <div>
+      123
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+
+export default Vue.extend({
+
+});
+</script>

tailwind.config.js

@@ -980,5 +980,7 @@ module.exports = {
     wordBreak: ['responsive'],
     zIndex: ['responsive', 'focus-within', 'focus'],
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/line-clamp')
+  ],
 }

vue.config.js

 module.exports = {
     // ...other vue-cli plugin options...
-
+    outputDir: 'NFT',
     css: {
       loaderOptions: {
         less: {
@@ -8,6 +8,38 @@ module.exports = {
             }
         }
       },
+      devServer: {
+        proxy: { // 设置代理
+          '/proxyApi': {
+            target: 'http://172.16.101.135:8001',
+            // 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,
+          // },
+        }
+      },
     // pwa: {
     //   name: 'My App',
     //   themeColor: '#4DBA87',