个人信息昵称的修改

pages/personal-center/account/info.vue

@@ -2,12 +2,16 @@
   <div>
     <card-container style="margin-top: 16px;padding-bottom: 32px" title="个人信息" :label="isEdit?'返回':'修改'" @listenCardConLabel="changeEditor1">
       <div class="info-account-item__wrap">
-        <yun-avatar size="90px" :src="this.$store.state.userProfile.avatar" :name="this.$store.state.userProfile.nickName"> </yun-avatar>
+        <yun-avatar size="90px" :src="$store.state.userProfile.avatar" :name="$store.state.userProfile.nickName"> </yun-avatar>
         <div class="change-button"><span>修改头像</span>
           <input type="file" @change="(e)=>openCropper(e)" />
         </div>
-        <input type="text" v-if="isEdit" v-model="nickName" :placeholder="nickName" class="input1" />
-        <p class="input1" v-if="!isEdit">{{nickName}}</p>
+        <input type="text" :disabled="!nickCanModify" v-if="isEdit" v-model="nickName" :placeholder="nickName" class="input1" />
+        <span v-if="isEdit" class="spanAfterInput1">
+          <span v-if="nickCanModify">*每月最多修改三次</span>
+          <span v-if="!nickCanModify">*您本月已经达到最大修改次数</span>
+        </span>
+        <p class="input1" v-if="!isEdit">{{nickName}} </p>
       </div>
 
       <div class="info-account-item__wrap">
@@ -150,6 +154,7 @@
             this.mobile = data.mobile;
             this.qqNumber = data.qqNumber;
             this.wxNumber = data.wxNumber;
+            this.nickCanModify = data.nickCanModify;
           }
         })
       },
@@ -160,6 +165,14 @@
             signature:this.signature,
             userAvatar:this.userAvatar};
            let userInfo2 = {};
+
+           if(this.nickName.toString().length>20){
+             this.$message({
+               type:'warning',
+               message:'昵称长度不能超过20个字符！'
+             })
+             return false
+           }
           if (this.mobile) userInfo2.mobile =this.mobile;
           if (this.qqNumber) userInfo2.qqNumber =this.qqNumber;
           if (this.wxNumber) userInfo2.wxNumber =this.wxNumber;
@@ -238,6 +251,22 @@
       @include fontStyle(14,48,500,#999,left);
       line-height: 20px;
       background-color: #F4F8FA;
+      span{
+        margin-left: 10*$length;
+        @include fontStyle(12,48,500,#ff000073,left);
+        line-height: 1;
+
+      }
+    }
+    .spanAfterInput1{
+      position: relative;
+      span{
+        position: absolute;
+        width:300*$length;
+        top:20*$length;
+        @include fontStyle(12,48,500,#ff000073,left);
+        right:-2*$length;
+      }
     }
 
     .input2{