修改手机号

src/mods/extra/AppMine/userInfo.vue

@@ -6,26 +6,28 @@
           <p class="mar-t22">头像</p>
           <button class="user-img-div" open-type="chooseAvatar" @chooseavatar="handleWeixinSync">
             <img v-if="user.avatarUrl" :src="user.avatarUrl" class="user-img">
-            <!-- <img src="https://cdn.cunwuyun.cn/dvcp/myFamily/tx.png" alt="" class="user-img" > -->
           </button>
         </div>
         <div class="item">
           <p>用户昵称</p>
-          <div v-if="!editNickName" @click="editNickName=true">
+          <div class="item-right" v-if="!editNickName" @click="editNickName=true">
             <p class="name" v-text="nickName"/>
           </div>
-          <input v-else type="nickname" class="editNickName" v-model="nickName" @blur="handleWeixinSync">
+          <input class="item-right" v-else type="nickname" v-model="nickName" @blur="handleWeixinSync">
         </div>
       </div>
       <div class="item-content mar-b8">
         <div class="item">
           <p>手机号</p>
-          <div>{{ user.phone || '' }}</div>
+          <div class="item-right" v-if="!!!editPhone" @click="editPhone=true">
+            <p class="name">{{ user.phone }}</p>
+          </div>
+          <input class="item-right" v-else type="number" v-model="phone" @blur="handleWeixin" maxlength="11">
         </div>
       </div>
       <div class="item-content" @click="onLogout">
         <div class="item">
-          <p class="login-out">退出登录</p>
+          <b class="login-out">退出登录</b>
         </div>
       </div>
     </div>
@@ -47,6 +49,15 @@ export default {
         return nickName
       }
     },
+    phone: {
+      set(v) {
+
+      },
+      get() {
+        const { phone } = this.user
+        return phone
+      }
+    }
   },
   onLoad() {
     this.getUserInfo()
@@ -55,6 +66,7 @@ export default {
   data() {
     return {
       editNickName: false,
+      editPhone: false,
       avatar: '',
     }
   },
@@ -66,6 +78,7 @@ export default {
           id: this.user.id,
           nickName: this.nickName,
           avatarUrl: this.avatar? this.avatar : this.user.avatarUrl,
+          phone: this.phone? this.phone : this.user.phone,
         }
       }).then(res=> {
         if(res?.code==0) {
@@ -111,6 +124,11 @@ export default {
         }
       })
     },
+    handleWeixin({ detail }) {
+      if(detail.value) {
+        this.updateInfo()
+      }
+    },
     handleWeixinSync({detail}) {
       const { value: nickName, avatarUrl } = detail
       this.autoLogin({ nickName, avatarUrl })
@@ -134,11 +152,14 @@ export default {
   background-color: #F5F5F5;
 
   .info-list {
-    margin: 0 0 16px 0;
+    padding: 50px 32px 0 32px;
+    box-sizing: border-box;
 
     .item-content {
       padding: 0 32px;
+      box-sizing: border-box;
       background-color: #fff;
+      border-radius: 32px;
     }
 
     .item {
@@ -152,6 +173,7 @@ export default {
       p {
         color: #333;
         font-weight: 400;
+        width: 200px;
       }
 
       div {
@@ -159,11 +181,19 @@ export default {
         font-size: 28px;
       }
 
+      .item-right {
+        width: calc(100% - 200px);
+        text-align: right;
+        font-size: 28px;
+        p {
+          width: 100%;
+        }
+      }
+
       .user-img-div {
-        width: 104px;
-        height: 104px;
-        border-radius: 50%;
-        overflow: hidden;
+        width: calc(100% - 200px);
+        text-align: right;
+        display: inline-block;
       }
 
       .user-img {
@@ -240,9 +270,9 @@ export default {
     color: #197DF0;
   }
 
-  .editNickName {
-    text-align: right;
-    font-size: 28px;
-  }
+  // .editNickName {
+  //   text-align: right;
+  //   font-size: 28px;
+  // }
 }
 </style>