Merge branch 'main' of gitlab.33.cn:HF_web/NFT

package.json

@@ -27,7 +27,7 @@
     "vue-content-loading": "^1.6.0",
     "vue-fragment": "^1.5.2",
     "vue-router": "^3.2.0",
-    "vue-step-progress": "^0.3.6",
+    "vue-step-progress": "^0.3.5",
     "vuex": "^3.4.0"
   },
   "devDependencies": {

src/App.vue

@@ -52,7 +52,7 @@
 <script lang="ts">
 import Vue from "vue";
 import { Overlay } from "vant";
-
+import { token } from '@/util/userInfoUtils'
 Vue.use(Overlay);
 export default Vue.extend({
   components: {
@@ -73,6 +73,11 @@ export default Vue.extend({
       this.$store.commit('app/TOGGLE_OVERLAY')
     },
     goNTF(obj:{url:string,id:string} ){
+      if(!token.getToken()){
+        this.$router.push('/auth/login')
+        this.closeNFT()
+        return 
+      }
       this.$router.push({
         name:obj.url,
         query:{

src/components/CollectionCard.vue

@@ -27,7 +27,7 @@
 
         <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">
+          <div class="flex-1 pl-3 flex gap-x-2" v-for='(i,index) in getThemeList' :key="index">
             <span>{{i}}</span>
           </div>
         </div>

src/components/common/Steps.vue

 <template>
     <div class="steps flex text-font-white  justify-center relative">
-      <div class="step-item flex flex-col  content-center relative mr-5 items-center" v-for="(i,index) in data" :key="index"
+      <div class="step-item flex flex-col  content-center relative mr-10 items-center" v-for="(i,index) in data" :key="index"
       :class="currentStep < index+1?'step-item':' step-item-actived'"
       >
          <div class="cycle relative items-center  rounded-full z-10" :class="currentStep < index+1?'bg-font-gray bg-opacity-20':' bg-font-blue bg-opacity-80'">
@@ -69,6 +69,9 @@ export default Vue.extend({
     transform: translate(-50%, -50%);
   }
   .steps{
+    .step-item:last-of-type {
+      margin-right: 0;
+    }
     .step-item:after{
       content:'';
       width: 24px;
@@ -77,10 +80,35 @@ export default Vue.extend({
       background-color:#8899B3;
       position: absolute;
       top: 34%;
-      left: 120%;
+      left: 116%;
+      z-index: 1;
+      transform: translate(-50%, -50%);
+    }
+    .step-item:before{
+      content:'';
+      width: 22px;
+      height:2px;
+      border-radius: 3px;
+      background-color:#8899B3;
+      position: absolute;
+      top: 34%;
+      right: 75%;
       z-index: 1;
       transform: translate(-50%, -50%);
     }
+    .step-item-actived::before{
+      content:'';
+      width: 22px;
+      height:2px;
+      border-radius: 3px;
+      background-color:#0078FF;
+      position: absolute;
+      top: 34%;
+      right: 75%;
+      z-index: 1;
+      transform: translate(-50%, -50%);
+    }
+
     .step-item-actived::after{
       content:'';
       width: 24px;
@@ -89,7 +117,7 @@ export default Vue.extend({
       background-color:#0078FF;
       position: absolute;
       top: 34%;
-      left: 120%;
+      left: 116%;
       z-index: 1;
       transform: translate(-50%, -50%);
     }
@@ -106,6 +134,18 @@ export default Vue.extend({
       z-index: 1;
       transform: translate(-50%, -50%);
    }
+  .step-item:first-of-type::before{
+      content:'';
+      width: 0px;
+      height:0px;
+      border-radius: 3px;
+      background-color:#8899B3;
+      position: absolute;
+      top: 38%;
+      left: 110%;
+      z-index: 1;
+      transform: translate(-50%, -50%);
+   }
   // .steps:last-child{
   //   .step-item:after{
   //     content:'';

src/main.ts

@@ -14,7 +14,7 @@ import VConsole from 'vconsole';
 
 const vconsole = process.env.VUE_APP_ENV === 'TEST'?new VConsole():''
 
-console.log(vconsole,'移动console');
+// window.console.log(vconsole,'移动console');
 
 
 Vue.use(Dialog);

src/router/index.ts

@@ -153,6 +153,7 @@ router.beforeEach((to, from, next) => {
   } else {
     next()
   }
+
 })
 
 export default router

src/view/Mine/index.vue

@@ -55,6 +55,7 @@
 <script lang="ts">
 import Vue from 'vue';
 import { Badge } from 'vant';
+import { token } from '@/util/userInfoUtils'
 
 Vue.use(Badge)
 
@@ -85,6 +86,7 @@ export default Vue.extend({
         }
     },
     async mounted() {
+       if(!token.getToken()) return 
        this.userData = await this.$service.nftService.getMyList()
        
     },
@@ -111,6 +113,10 @@ export default Vue.extend({
        this.$router.push(item)
     },
     goUserSet(){
+        if(!token.getToken()) {
+            this.$router.push('/auth/Login')
+            return 
+        }
         this.$router.push('/User')
     }
   },

src/view/NFT/Create/form.vue

 <template>
   <Layout-Child class="page-scroll">
-    <div class="w-7/12 mx-auto my-6">
+    <div class=" mx-auto my-6">
       <app-steps
         v-if="currentStep !== 4"
         :data="mySteps"
@@ -391,7 +391,7 @@ export default Vue.extend({
             themeText:`${text}题材`,
             themePlaceholder:`请选择${text}题材`,
             desText:`${text}简介`,
-            desPlaceholder:`请输入${text}简介`,
+            desPlaceholder:`请输入${text}简介，限500字`,
             fileUploadText:`请填写${text}名称`,
             filePlaceholder:`${text}上传`,
             fileHashText:`${text}HASH` 

src/view/NFT/Detail/index.vue

@@ -95,12 +95,12 @@
 
         <div class="py-3">
             <div class="text-font-dark-blue">剧本简介</div>
-            <div class=" py-2  tracking-wide leading-6  text-sm">{{nftData.synopsis?nftData.synopsis:'无'}}</div>
+            <div class=" py-2  tracking-wide leading-6  text-sm break-all">{{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，链上确权、高效流转、不可替代、独一无二。能够保护编剧及电影人的知识产权，挖掘版权交易价值，提高创作收益，丰富影视行业良好生态，创造影视版权数字化经济。</div>
+            <div class=' py-2  tracking-wide leading-6  text-sm break-all'>NFT全称为Non-Fungible Token，也称为非同质化通证。可以通俗化理解为在区块链上的唯一凭证。电影产业中，能够为剧本、电影、花絮、剧照、音乐等作品发行NFT，链上确权、高效流转、不可替代、独一无二。能够保护编剧及电影人的知识产权，挖掘版权交易价值，提高创作收益，丰富影视行业良好生态，创造影视版权数字化经济。</div>
         </div>
 
         <div class="py-3">
@@ -129,6 +129,7 @@
 <script lang="ts">
 import Vue from "vue";
 import SkeletonNftDetail from "@/components/common/Skeleton/SkeletonNftDetail.vue"
+import { token } from '@/util/userInfoUtils'
 const apps = [
   {
     text: "版权认证",
@@ -164,6 +165,9 @@ export default Vue.extend({
   async created() {
     this.nftData =await this.$service.nftService.getNFTdetail(parseInt(this.id))
     this.nftData.wallet == this.user.wallet? this.isOwner=true:this.isOwner=false
+    if(!token.getToken()) {
+        return 
+    }
     await this.setMyCollection()
   },
   
@@ -179,6 +183,9 @@ export default Vue.extend({
   },
   methods:{
     async setMyCollection():Promise<void>{
+      if(!token.getToken()) {
+        this.$router.push('/auth/login')
+      }
       let list = await this.$service.nftService.getCollection()
       if(list.find(i=> i.id == this.id)){
         this.inMyCollection = true
@@ -187,6 +194,9 @@ export default Vue.extend({
       }
     },
     async editCollection(){
+      if(!token.getToken()) {
+        this.$router.push('/auth/login')
+      }
       await this.$service.nftService.editCollection(parseInt(this.id)).then(async (res)=>{
         if(res){
           await this.setMyCollection()

src/view/User/Edit.vue

@@ -3,6 +3,7 @@
     <div class='mt-6 w-11/12 mx-auto text-font-white'>
         <div v-if="$route.params.type == 'signature' ">
             <textarea v-model="inputSet.value" name="description" id="description" cols="30" rows="10" class="bg-font-light-black w-full py-4 px-4 mt-3  rounded-md text-sm" :placeholder="inputSet.placeholder"></textarea>
+            <div class=" tips py-3 px-2 text-font-red text-xs">{{inputSet.value.length}}/300</div>
         </div>
         <div class="input flex flex-col " v-else>
             <!-- <div class="input-label text-font-dark-blue pl-3">
@@ -14,9 +15,10 @@
                 :maxlength="inputSet.maxlength" 
                 :placeholder="inputSet.placeholder"
                 :disabled='inputSet.disabled'
+                @keyup="checkInput"
                 class=" w-full py-4 px-4 mt-3 bg-font-light-black rounded-md text-sm"> 
             </div>
-            <div class=" tips py-3 px-2 text-font-red text-xs">昵称可以是6-20个字符</div>
+            <div class=" tips py-3 px-2 text-font-red text-xs">{{inputSet.value.length}}/20</div>
         </div>
     </div>
         <div class="fixed bottom-0 w-full left-0 z-30">
@@ -70,12 +72,28 @@ export default Vue.extend({
         let data = {} as any
         const value = this.inputSet.value;
         data[this.$route.params.type] = value;
+
         const reqEdit = await this.$service.userService.editUserInfo(data)
         if(reqEdit){
             this.$util.userMsg.updateUserMsg(reqEdit)
             this.$toast.success('用户信息更新成功')
             this.$router.go(-1)
         }
+     },
+     checkInput(e:any){
+         if(this.$route.path.indexOf('telephone') != -1 && e.key != 'Backspace'){
+            const isNumber = (value:any)=> {
+               var patrn = /^\d$/;
+               if (patrn.exec(value) == null || value == "") {
+                  return false
+               } else {
+                  return true
+               }
+            }
+            if(!isNumber(e.key) || this.inputSet.value.length > 11){
+                this.inputSet.value = this.inputSet.value.slice(0,this.inputSet.value.length-1)
+            }
+         }
      }
   }
 });

src/view/User/index.vue

@@ -3,7 +3,7 @@
     <div class=" w-11/12 mx-auto py-6 text-font-white">
         <input type="file" accept="image/*" capture="camera" class=" hidden" ref='fileElem' @change="fileUpload"/>
         <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' type='image'  :value='avatarImgUrl?avatarImgUrl:this.userInfo.avatar?this.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='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>
@@ -31,7 +31,8 @@ export default Vue.extend({
                 { name: '拍摄头像',router:'/photo' },
                 { name: '从图片夹上传',router:'/photoEdit' },
             ],
-            file:{}
+            file:{},
+            avatarImgUrl:''
         }
     },
  
@@ -62,6 +63,7 @@ export default Vue.extend({
         //   this.$store.commit('app/SET_FILEDATA',event.target.files)
           const upload =  await this.$service.userService.avatarUpload(event.target.files[0])
             if(upload){
+                this.avatarImgUrl = (upload as any).avatar
                 this.$util.userMsg.updateUserMsg(upload)
                 this.$toast.success('头像更新成功')
             }