v3.0.6

source/vue/xzs-admin/src/views/profile/components/Account.vue

@@ -0,0 +1,42 @@
+<template>
+  <el-form>
+    <el-form-item label="真实姓名">
+      <el-input v-model.trim="userInfo.realName" />
+    </el-form-item>
+    <el-form-item label="手机号">
+      <el-input v-model.trim="userInfo.phone" />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="submit">更新</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import userApi from '@/api/user'
+export default {
+  props: {
+    userInfo: {
+      type: Object,
+      default: () => {
+        return {
+          realName: '',
+          phone: ''
+        }
+      }
+    }
+  },
+  methods: {
+    submit () {
+      let _this = this
+      userApi.updateUser(this.userInfo).then(re => {
+        if (re.code === 1) {
+          _this.$message.success(re.message)
+        } else {
+          _this.$message.error(re.message)
+        }
+      })
+    }
+  }
+}
+</script>

source/vue/xzs-admin/src/views/profile/components/Timeline.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="block">
+    <el-timeline>
+      <el-timeline-item  placement="top" :timestamp="userInfo.lastActiveTime">
+        <el-card>
+          <h4>最后活动时间</h4>
+          <p>{{ userInfo.realName+'在校考系统中最后活动了' }}</p>
+        </el-card>
+      </el-timeline-item>
+      <el-timeline-item  placement="top" :timestamp="userInfo.createTime">
+        <el-card>
+          <h4>加入时间</h4>
+          <p>{{ userInfo.realName+'加入了校考系统' }}</p>
+        </el-card>
+      </el-timeline-item>
+    </el-timeline>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    userInfo: {
+      type: Object,
+      default: () => {
+        return {
+          realName: '',
+          lastActiveTime: '',
+          createTime: ''
+        }
+      }
+    }
+  }
+}
+</script>

source/vue/xzs-admin/src/views/profile/components/UserCard.vue

@@ -0,0 +1,117 @@
+<template>
+  <el-card style="margin-bottom:20px;">
+    <div slot="header" class="clearfix">
+      <span>关于我</span>
+    </div>
+
+    <div class="user-profile">
+      <div class="box-center">
+        <img :src="userInfo.imagePath === null ? require('@/assets/avatar.gif') : userInfo.imagePath " height="100px" width="100px" style="border-radius: 50px">
+      </div>
+      <div class="box-center">
+        <div class="user-name text-center">{{ userInfo.userName }}</div>
+        <div class="user-role text-center text-muted">{{ enumFormat(roleEnum,userInfo.role) }}</div>
+      </div>
+    </div>
+
+    <div class="user-bio">
+      <div class="user-education user-bio-section">
+        <div class="user-bio-section-header"><svg-icon icon-class="education" /><span>个人简介</span></div>
+        <div class="user-bio-section-body">
+          <div class="text-muted">
+           无
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { mapGetters, mapState } from 'vuex'
+
+export default {
+  props: {
+    userInfo: {
+      type: Object,
+      default: () => {
+        return {
+          realName: '',
+          userName: '',
+          role: '',
+          imagePath: null
+        }
+      }
+    }
+  },
+  computed: {
+    ...mapGetters('enumItem', [
+      'enumFormat'
+    ]),
+    ...mapState('enumItem', {
+      roleEnum: state => state.user.roleEnum
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .box-center {
+    margin: 0 auto;
+    display: table;
+  }
+
+  .text-muted {
+    color: #777;
+  }
+
+  .user-profile {
+    .user-name {
+      font-weight: bold;
+    }
+
+    .box-center {
+      padding-top: 10px;
+    }
+
+    .user-role {
+      padding-top: 10px;
+      font-weight: 400;
+      font-size: 14px;
+    }
+
+    .box-social {
+      padding-top: 30px;
+
+      .el-table {
+        border-top: 1px solid #dfe6ec;
+      }
+    }
+
+    .user-follow {
+      padding-top: 20px;
+    }
+  }
+
+  .user-bio {
+    margin-top: 20px;
+    color: #606266;
+
+    span {
+      padding-left: 4px;
+    }
+
+    .user-bio-section {
+      font-size: 14px;
+      padding: 15px 0;
+
+      .user-bio-section-header {
+        border-bottom: 1px solid #dfe6ec;
+        padding-bottom: 10px;
+        margin-bottom: 10px;
+        font-weight: bold;
+      }
+    }
+  }
+</style>

source/vue/xzs-admin/src/views/profile/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="app-container">
+    <div>
+      <el-row :gutter="20">
+
+        <el-col :span="6" :xs="24">
+          <user-card  :userInfo="userInfo" />
+        </el-col>
+
+        <el-col :span="18" :xs="24">
+          <el-card>
+            <el-tabs active-name="timeline">
+              <el-tab-pane label="时间线" name="timeline">
+                <timeline :userInfo="userInfo" />
+              </el-tab-pane>
+              <el-tab-pane label="账号" name="account">
+                <account :userInfo="userInfo"  />
+              </el-tab-pane>
+            </el-tabs>
+          </el-card>
+        </el-col>
+
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import UserCard from './components/UserCard'
+import Timeline from './components/Timeline'
+import Account from './components/Account'
+import userApi from '@/api/user'
+
+export default {
+  name: 'Profile',
+  data () {
+    return {
+      userInfo: {
+        realName: '',
+        phone: '',
+        lastActiveTime: '',
+        createTime: '',
+        role: '1',
+        imagePath: null
+      }
+    }
+  },
+  components: { UserCard, Timeline, Account },
+  created () {
+    let _this = this
+    userApi.getCurrentUser().then(re => {
+      _this.userInfo = re.response
+    })
+  }
+}
+</script>