update views/my

src/api/account.js

@@ -16,7 +16,9 @@ const accountApi = {
   accountMyVipApi: '/api/user/vip/my',
   accountVipPlanApi: '/api/user/vip/plan',
   accountVipApi: '/api/user/vip/buy',
-  oauthAppApi: '/api/account/oauth/create'
+  oauthAppApi: '/api/account/oauth/create',
+  loginRecordApi: '/api/account/record/list',
+  signOutApi: '/api/account/deactivate'
 }
 
 export function isUsernameExist(username) {
@@ -88,3 +90,11 @@ export function vip(data) {
 export function createApp(data) {
   return post(accountApi.oauthAppApi, data)
 }
+
+export function getLoginRecord() {
+  return get(accountApi.loginRecordApi)
+}
+
+export function signOut(loginId) {
+  return post(accountApi.signOutApi + '/' + loginId)
+}

src/api/user.js

@@ -2,6 +2,7 @@ import { get, post } from '@/utils/request'
 
 const userApi = {
   userInfoApi: '/api/user/info',
+  updateProfileApi: '/api/user/profile/update',
   discoverUserApi: '/api/user/discover',
   followUserApi: '/api/user/relation/follow',
   unfollowUserApi: '/api/user/relation/unfollow',
@@ -10,13 +11,17 @@ const userApi = {
   userFollowingApi: '/api/user/relation/following',
   unreadMessageApi: '/api/user/message/unread',
   unreadMessagesApi: '/api/user/message/unread/list',
-  setReadMessageApi: '/api/user/message/read',
+  setReadMessageApi: '/api/user/message/read'
 }
 
 export function getUserInfo(userId) {
   return get(userApi.userInfoApi + '?userId=' + userId)
 }
 
+export function updateUserProfile(payload) {
+  return post(userApi.updateProfileApi, payload)
+}
+
 export function getUsers() {
   return get(userApi.discoverUserApi)
 }

src/assets/js/mixin.js

@@ -84,21 +84,21 @@ export const userMixin = {
       encryptor.setPublicKey(pubkey)
       return encryptor.encrypt(pubkeyR + password)
     },
-    loginVerifyCode() {
-      if (this.userLogin.principal === null || this.userLogin.principal === '') {
+    registerVerifyCode() {
+      if (this.userRegistry.principal === null || this.userRegistry.principal === '') {
         this.$message.success('请填写邮箱或手机号')
         return
       }
 
-      getVerifyCode(1, this.userRegistry.principal)
+      this.getVerifyCode(1, this.userRegistry.principal)
     },
-    registerVerifyCode() {
-      if (this.userRegistry.principal === null || this.userRegistry.principal === '') {
+    loginVerifyCode() {
+      if (this.userLogin.principal === null || this.userLogin.principal === '') {
         this.$message.success('请填写邮箱或手机号')
         return
       }
 
-      this.getVerifyCode(2, this.userRegistry.principal)
+      getVerifyCode(2, this.userRegistry.principal)
     },
     forgotVerifyCode() {
       if (this.userForgot.principal === null || this.userForgot.principal === '') {
@@ -220,7 +220,10 @@ export const userMixin = {
         if (resp.code === 0) {
           // 关闭弹窗并刷新页面
           this.dialogVisible = false
-          this.$message.info('帐号已注册, 请返回登录页面登录帐号')
+          this.$message.info('帐号已注册, 稍后会转到登录页面')
+          setInterval(() => {
+            this.$router.push('/login')
+          }, 3000)
         } else {
           this.$message.warning(resp.msg)
         }
@@ -228,13 +231,6 @@ export const userMixin = {
         this.$message.error(error.message)
       }).finally(() => {
         this.isLoading = false
-        this.userRegistry = {
-          principal: null,
-          credential: null,
-          captchaCode: null,
-          loginType: 2,
-          plat: 1
-        }
       })
     },
     forgotBtn() {

src/router/my.js

@@ -5,6 +5,7 @@ const MyProfile = () => import('views/my/MyProfile')
 const MyRealname = () => import('views/my/MyRealname')
 const MyOAuth = () => import('views/my/MyOAuth')
 const MyMessage = () => import('views/my/MyMessage')
+const MyRecord = () => import('views/my/MyRecord')
 const MyVip = () => import('views/my/MyVip')
 const MyWallet = () => import('views/my/MyWallet')
 
@@ -38,6 +39,12 @@ export default {
       component: MyWallet,
       meta: { needAuth: true }
     },
+    {
+      path: '/my/record',
+      name: '我的登录历史',
+      component: MyRecord,
+      meta: { needAuth: true }
+    },
     {
       path: '/my/message',
       name: '我的消息',

src/views/my/My.vue

@@ -40,6 +40,10 @@
           class="el-menu-vertical-demo"
           :unique-opened="true"
         >
+          <el-menu-item index="/my/record">
+            <i class="el-icon-message" />
+            <span slot="title">登录历史</span>
+          </el-menu-item>
           <el-menu-item index="/my/message">
             <i class="el-icon-message" />
             <span slot="title">我的消息</span>

src/views/my/MyMessage.vue

@@ -41,7 +41,7 @@
 import {getUnreadMessages, setReadMessages} from "@/api/user";
 
 export default {
-  name: 'Message',
+  name: 'MyMessage',
   data() {
     return {
       dataList: []

src/views/my/MyProfile.vue

@@ -13,6 +13,9 @@
               </el-form-item>
               <el-form-item label="用户名">
                 <el-input v-model="loginUser.username" style="width: 70%; padding-right: 10px" readonly />
+              </el-form-item>
+              <el-form-item label="显示名">
+                <el-input v-model="loginUser.screenName" style="width: 70%; padding-right: 10px" readonly />
                 <el-button size="mini" type="info" @click="showUpdateDialog(1)">更新</el-button>
               </el-form-item>
               <el-form-item label="邮箱">
@@ -23,13 +26,9 @@
                 <el-input v-model="loginUser.mobile" style="width: 70%; padding-right: 10px" readonly />
                 <el-button size="mini" type="info" @click="showUpdateDialog(3)">更新</el-button>
               </el-form-item>
-              <el-form-item label="显示名">
-                <el-input v-model="loginUser.screenName" style="width: 70%; padding-right: 10px" readonly />
-                <el-button size="mini" type="info" @click="showUpdateDialog(4)">更新</el-button>
-              </el-form-item>
               <el-form-item label="签名">
                 <el-input v-model="loginUser.signature" type="textarea" style="width: 70%; padding-right: 10px" readonly />
-                <el-button size="mini" type="info" @click="showUpdateDialog(5)">更新</el-button>
+                <el-button size="mini" type="info" @click="showUpdateDialog(4)">更新</el-button>
               </el-form-item>
             </el-form>
           </div>
@@ -76,10 +75,7 @@
             <el-form :inline="true" :model="updateForm">
               <el-form-item>
                 <el-input
-                  v-model="updateForm.value"
-                  type="textarea"
-                  :rows="3"
-                  placeholder="添加留言..."
+                  v-model="updateForm.content"
                 />
               </el-form-item>
               <el-form-item>
@@ -97,6 +93,7 @@
 import { updateAvatar } from '@/api/account'
 import { getAuthedUser, updateAuthedUser } from '@/utils/auth'
 import { getAvatarChannelInfo } from '@/api/file'
+import { updateUserProfile } from '@/api/user'
 
 export default {
   name: 'MyProfile',
@@ -117,7 +114,7 @@ export default {
       updateTitle: '',
       updateForm: {
         type: 1,
-        value: null
+        content: null
       }
     }
   },
@@ -195,7 +192,7 @@ export default {
     showUpdateDialog(type) {
       if (type === 1) {
         this.updateType = 1
-        this.updateTitle = '更新用户名'
+        this.updateTitle = '更新用户显示名'
       } else if (type === 2) {
         this.updateType = 2
         this.updateTitle = '更新用户邮箱'
@@ -204,15 +201,26 @@ export default {
         this.updateTitle = '更新用户手机号'
       } else if (type === 4) {
         this.updateType = 4
-        this.updateTitle = '更新用户显示名'
-      } else if (type === 5) {
-        this.updateType = 5
         this.updateTitle = '更新用户签名'
       }
       this.updateDialog = true
     },
     onUpdate() {
-      this.$message.info('更新用户资料')
+      updateUserProfile(this.updateForm).then(resp => {
+        if (resp.code === 0) {
+          this.updateForm.content = null
+          this.$notify.info({
+            message: '用户资料已更新',
+            duration: 3000
+          })
+        } else {
+          this.$notify.warning({
+            message: resp.msg,
+            duration: 3000
+          })
+        }
+      })
+
       this.updateDialog = false
     }
   }

src/views/my/MyRecord.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <el-row class="movie-list">
+      <el-col :md="20">
+        <el-row>
+          <h2>我的登录历史</h2>
+        </el-row>
+        <el-card>
+          <el-table
+            :data="dataList"
+            :show-header="true"
+            border
+            style="width: 100%"
+          >
+            <el-table-column
+              prop="title"
+              label="登录时间"
+            />
+            <el-table-column
+              prop="content"
+              label="登录设备"
+            />
+            <el-table-column
+              label="操作"
+            >
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  @click="logout(scope.row)"
+                >登出</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getLoginRecord, signOut } from '@/api/account'
+
+export default {
+  name: 'MyRecord',
+  data() {
+    return {
+      dataList: []
+    }
+  },
+  created() {
+    document.title = '我的登录历史'
+
+    getLoginRecord().then(resp => {
+      if (resp.code === 0) {
+        this.dataList = resp.data
+      }
+    })
+  },
+  methods: {
+    logout(row) {
+      signOut(row.loginId).then(resp => {
+        if (resp.code === 0) {
+          this.$message('已处理')
+          this.dataList.pop()
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px) {
+  .movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
+}
+
+.movie-list {
+  padding-top: 15px;
+  padding-left: 6%;
+  padding-right: 6%;
+}
+</style>