前端：增加注册登陆

前端：个人信息修改

mobile-web/src/page/user/index.vue

@@ -3,12 +3,12 @@
     <div class="user-profile">
       <div class="user-profile-avatar">
         <a href="/#/user/info">
-          <img :src="data.Avatar" alt="用户头像">
+          <img :src="user && user.avatar ? user.avatar : 'http://static.iocoder.cn/1553652151601.jpg?imageView2/2/w/308/h/210/interlace/1/q/100'">
         </a>
       </div>
       <div class="user-profile-username">
         <a href="/#/user/info">
-          <span class="m-nick">{{data.UserName}}</span>
+          <span class="m-nick">{{user ? user.nickname : '未登陆'}}</span>
         </a>  
       </div>
     </div>
@@ -75,7 +75,8 @@
     </van-cell-group>
 
     <van-cell-group>
-      <van-cell title="切换账号" is-link to="/login" />
+        <van-cell v-if="user" title="退出登录" @click="logout" />
+        <van-cell v-else title="登陆" is-link to="/login" />
     </van-cell-group>
     <navigate />
   </div>
@@ -83,18 +84,27 @@
 
 <script>
 // import { GetUserIndex } from "../../api/user.js";
-import { getAccessToken } from '../../utils/cache.js';
+import { getAccessToken, clearLoginToken } from '../../utils/cache.js';
 import { getUserInfo } from '../../api/user.js';
 
 export default {
   data(){
     return{
       data: {},
-      user: {},
+      user: undefined,
     }
   },
   components: {
   },
+  methods: {
+    logout: function () {
+      // 清空本地 token
+      clearLoginToken();
+      // TODO 芋艿，后面最好处理下 token
+      // 跳转到登陆
+      this.$router.push('/login');
+    }
+  },
   created:function(){
       // GetUserIndex().then(response=>{
       //     this.data=response;

mobile-web/src/page/user/info/detail.vue

@@ -1,19 +1,83 @@
 <template>
     <div>
-        <headerNav title="账号管理"/>
+        <headerNav title="个人信息"/>
         <van-cell-group>
-            <van-cell title="修改个人信息"  is-link />
+            <!--<van-cell title="修改个人信息"  is-link />-->
             <!--<van-cell title="修改登录密码"  is-link />-->
             <!--<van-cell title="修改绑定手机"  is-link />-->
             <!--<van-cell title="关联账号"  is-link />-->
             <!--<van-cell title="切换账号"  is-link to="/login" />-->
+            <van-cell title="昵称" :value="user.nickname" @click="onShowNicknameDialog" />
+            <van-cell title="头像" @click="onShowAvatarDialog" >
+                <img width="24px" :src="user.avatar" >
+            </van-cell>
+
         </van-cell-group>
+
+        <!-- 昵称修改弹出 -->
+        <van-dialog
+                v-model="showNicknameDialog"
+                :before-close="onShowNicknameDialogClose"
+                show-cancel-button
+
+        >
+            <van-field
+                    :value="user.nickname"
+                    label="昵称"
+                    placeholder="请输入昵称"
+                    @input="inputNickname"
+            />
+        </van-dialog>
+        <!---->
     </div>
 </template>
 
 <script>
-export default {
+import { getUserInfo, doUserUpdateNickname } from '../../../api/user.js';
+import { Dialog } from 'vant';
 
+export default {
+  data() {
+    return {
+      user: {},
+      showNicknameDialog: false,
+      updateNickname: undefined,
+    };
+  },
+  methods: {
+    onShowNicknameDialog: function () {
+      this.showNicknameDialog = true;
+      this.updateNickname = this.user.nickname;
+    },
+    inputNickname: function (value) {
+      this.updateNickname = value;
+    },
+    onShowNicknameDialogClose: function (action, done) {
+      if (action === 'confirm') {
+        let that = this;
+        let response = doUserUpdateNickname(this.updateNickname);
+        response.then(data => {
+          // 修改
+          that.user.nickname = that.updateNickname;
+          // 关闭弹窗
+          done();
+        });
+      } else {
+        done();
+      }
+    },
+
+    onShowAvatarDialog: function () {
+      // TODO 芋艿，头像上传
+      alert('头像上传暂未开发');
+    }
+  },
+  mounted() {
+    let response = getUserInfo();
+    response.then(data => {
+      this.user = data;
+    });
+  }
 }
 </script>