添加用户相关页面和消息页面

src/router/index.js

@@ -16,11 +16,13 @@ const FollowingIndex = () => import('views/user/Following')
 const FollowerIndex = () => import('views/user/Follower')
 const ProfileIndex = () => import('views/user/Profile')
 const AvatarIndex = () => import('views/user/Avatar')
+const VipIndex = () => import('views/user/Vip')
 const CollectionIndex = () => import('views/user/Collection')
 const HistoryIndex = () => import('views/user/History')
 const PostList = () => import('views/post/PostList')
 const PostPublish = () => import('views/post/PostPublish')
 const PostAnalysis = () => import('views/post/PostAnalysis')
+const MessageIndex = () => import('views/message/Message')
 
 // 使用安装路由插件
 Vue.use(VueRouter)
@@ -95,6 +97,11 @@ const routes = [
     name: 'AvatarIndex',
     component: AvatarIndex
   },
+  {
+    path: '/u/vip',
+    name: 'VipIndex',
+    component: VipIndex
+  },
   {
     path: '/u/collection',
     name: 'CollectionIndex',
@@ -120,6 +127,11 @@ const routes = [
     name: 'PostAnalysis',
     component: PostAnalysis
   },
+  {
+    path: '/message',
+    name: 'MessageIndex',
+    component: MessageIndex
+  },
   {
     path: '*',
     name: '404',

src/views/message/Message.vue

@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :md="4">
+        <el-menu
+          :default-active="this.$route.path"
+          router
+          class="el-menu-vertical-demo"
+        >
+          <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.path">
+            <i :class="item.icon" />
+            <span slot="title">{{ item.name }}</span>
+          </el-menu-item>
+        </el-menu>
+      </el-col>
+      <el-col :md="20">
+        <el-row>
+          <h2>我的消息</h2>
+        </el-row>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getUserInfo } from '@/utils/auth'
+
+export default {
+  name: 'Profile',
+  data() {
+    return {
+      userId: -1,
+      navList: [
+        { path: '/message', name: '我的消息', icon: 'el-icon-user' },
+        { path: '/message/comment/receive', name: '收到的评论', icon: 'el-icon-user' },
+        { path: '/message/commend/send', name: '发出的评论', icon: 'el-icon-user' }
+      ],
+      form: {
+        videoObjectName: null,
+        coverFileId: null,
+        title: null,
+        description: null,
+        categoryId: 0,
+        tags: null,
+        scope: null,
+        width: 0,
+        height: 0,
+        duration: 0
+      }
+    }
+  },
+  created() {
+    const userInfo = getUserInfo()
+    if (userInfo != null) {
+      document.title = userInfo.username + '的个人资料'
+    }
+  },
+  methods: {
+    onSubmit() {
+      if (!this.form.videoObjectName) {
+        this.$notify(
+          {
+            title: '提示',
+            message: '你还没有上传视频',
+            type: 'warning',
+            duration: 3000
+          }
+        )
+        return
+      }
+
+      if (!this.form.coverFileId) {
+        this.$notify(
+          {
+            title: '提示',
+            message: '你还没有上传视频封面',
+            type: 'warning',
+            duration: 3000
+          }
+        )
+        return
+      }
+
+      if (this.form.title === '' || this.form.categoryId === -1) {
+        this.$notify(
+          {
+            title: '提示',
+            message: '分区和稿件标题不能为空',
+            type: 'warning',
+            duration: 3000
+          }
+        )
+        return
+      }
+
+      if (this.form.scope === null) {
+        this.$notify(
+          {
+            title: '提示',
+            message: '稿件可见范围不能为空',
+            type: 'warning',
+            duration: 3000
+          }
+        )
+        return
+      }
+
+      /*if (this.form.tags.length === 0 || this.videoPost.tags.length > 10) {
+        this.$notify(
+          {
+            title: '提示',
+            message: '标签最少 1 个, 最多 10 个',
+            type: 'warning',
+            duration: 3000
+          }
+        )
+        return
+      }*/
+      submitVideo(this.form)
+        .then(res => {
+          if (res.code === 0) {
+            this.$notify(
+              {
+                title: '提示',
+                message: '投稿成功,等待审核通过后其他人就可以看到你的视频了',
+                type: 'warning',
+                duration: 3000
+              }
+            )
+            this.$router.push('/user/post/list')
+          } else {
+            this.$notify(
+              {
+                title: '提示',
+                message: res.msg,
+                type: 'warning',
+                duration: 3000
+              }
+            )
+          }
+        }).catch(error => {
+        this.$notify(
+          {
+            title: '提示',
+            message: error.message,
+            type: 'warning',
+            duration: 3000
+          }
+        )
+      })
+    }
+  }
+}
+</script>

src/views/user/Avatar.vue

@@ -14,7 +14,32 @@
         </el-menu>
       </el-col>
       <el-col :md="20">
-        <span>头像管理</span>
+        <el-row style="position: center">
+          <el-row>
+            <h2>当前头像</h2>
+            <el-avatar>
+              <el-image :src="userInfo.avatarUrl" />
+            </el-avatar>
+          </el-row>
+          <el-row>
+            <h2>修改头像</h2>
+            <el-upload
+              class="avatar-uploader"
+              action="https://oss.reghao.cn/"
+              name="file"
+              :data="{
+                channelId: 4,
+                sha256sum: sha256sum
+              }"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+              :before-upload="beforeAvatarUpload">
+              <img v-if="imageUrl" :src="imageUrl" class="avatar">
+              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+            </el-upload>
+            <el-button type="primary" @click="onSubmit">更新</el-button>
+          </el-row>
+        </el-row>
       </el-col>
     </el-row>
   </div>
@@ -22,25 +47,88 @@
 
 <script>
 import { getUserInfo } from '@/utils/auth'
+import { hashFile } from '@/utils/hash'
+import { updateAvatar } from '@/api/user'
 
 export default {
   name: 'Profile',
   data() {
     return {
-      userId: -1,
+      userInfo: null,
       navList: [
-        { path: '/u/profile', name: '帐号', icon: 'el-icon-user' },
-        { path: '/u/avatar', name: '头像', icon: 'el-icon-user' }
-      ]
+        { path: '/u/profile', name: '我的信息', icon: 'el-icon-user' },
+        { path: '/u/avatar', name: '我的头像', icon: 'el-icon-user' },
+        { path: '/u/vip', name: '我的会员', icon: 'el-icon-user' }
+      ],
+      imageUrl: '',
+      coverUrl: '',
+      sha256sum: null
     }
   },
   created() {
-    const userInfo = getUserInfo()
-    if (userInfo != null) {
-      document.title = userInfo.username + '的帐号主页'
+    this.userInfo = getUserInfo()
+    if (this.userInfo != null) {
+      document.title =this.userInfo.username + '的头像'
     }
   },
   methods: {
+    beforeAvatarUpload(file) {
+      return hashFile(file).then(res => {
+        this.sha256sum = res.sha256sum
+        const isJPG = file.type === 'image/jpeg';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+
+        if (!isJPG) {
+          this.$message.error('上传头像图片只能是 JPG 格式!');
+        }
+        if (!isLt2M) {
+          this.$message.error('上传头像图片大小不能超过 2MB!');
+        }
+        return isJPG && isLt2M;
+      })
+    },
+    handleAvatarSuccess(res, file) {
+      this.imageUrl = URL.createObjectURL(file.raw);
+      this.coverUrl = res.url;
+    },
+    onSubmit() {
+      const data = {
+        userId: this.userInfo.userId,
+        coverUrl: this.coverUrl
+      }
+      updateAvatar(data).then(res => {
+        if (res.code === 0) {
+          console.log('更新头像')
+          this.userInfo.avatarurl = this.coverUrl
+        }
+      })
+    }
   }
 }
 </script>
+
+<style>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>

src/views/user/Profile.vue

@@ -14,7 +14,29 @@
         </el-menu>
       </el-col>
       <el-col :md="20">
-        <span>帐号信息</span>
+        <el-row>
+          <h2>我的信息</h2>
+        </el-row>
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-form-item label="用户名">
+            <span style="width: 30%; padding-right: 2px"> 1rentv_14001 </span>
+          </el-form-item>
+          <el-form-item label="昵称">
+            <el-input v-model="form.screenName" style="width: 30%; padding-right: 2px" placeholder="昵称不能超过 10 个字符" />
+          </el-form-item>
+          <el-form-item label="我的签名">
+            <el-input v-model="form.signature" type="textarea" style="width: 30%; padding-right: 2px" />
+          </el-form-item>
+          <el-form-item label="性别">
+            <el-input v-model="form.gender" style="width: 30%; padding-right: 2px"/>
+          </el-form-item>
+          <el-form-item label="出生日期">
+            <el-input v-model="form.birthday" style="width: 30%; padding-right: 2px"/>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">保存</el-button>
+          </el-form-item>
+        </el-form>
       </el-col>
     </el-row>
   </div>
@@ -22,6 +44,7 @@
 
 <script>
 import { getUserInfo } from '@/utils/auth'
+import { updateProfile } from '@/api/user'
 
 export default {
   name: 'Profile',
@@ -29,18 +52,72 @@ export default {
     return {
       userId: -1,
       navList: [
-        { path: '/u/profile', name: '帐号', icon: 'el-icon-user' },
-        { path: '/u/avatar', name: '头像', icon: 'el-icon-user' }
-      ]
+        { path: '/u/profile', name: '我的信息', icon: 'el-icon-user' },
+        { path: '/u/avatar', name: '我的头像', icon: 'el-icon-user' },
+        { path: '/u/vip', name: '我的会员', icon: 'el-icon-user' }
+      ],
+      form: {
+        userId: null,
+        screenName: null,
+        signature: null,
+        gender: 2,
+        birthday: null
+      }
     }
   },
   created() {
     const userInfo = getUserInfo()
     if (userInfo != null) {
-      document.title = userInfo.username + '的帐号主页'
+      this.form.userId = userInfo.userId
+      document.title = userInfo.username + '的个人资料'
     }
   },
   methods: {
+    onSubmit() {
+      if (this.form.title === '' || this.form.categoryId === -1) {
+        this.$notify(
+          {
+            title: '提示',
+            message: '分区和稿件标题不能为空',
+            type: 'warning',
+            duration: 3000
+          }
+        )
+        return
+      }
+
+      updateProfile(this.form)
+        .then(res => {
+          if (res.code === 0) {
+            this.$notify(
+              {
+                title: '提示',
+                message: '个人资料已更新',
+                type: 'warning',
+                duration: 3000
+              }
+            )
+          } else {
+            this.$notify(
+              {
+                title: '提示',
+                message: res.msg,
+                type: 'warning',
+                duration: 3000
+              }
+            )
+          }
+        }).catch(error => {
+        this.$notify(
+          {
+            title: '提示',
+            message: error.message,
+            type: 'warning',
+            duration: 3000
+          }
+        )
+      })
+    }
   }
 }
 </script>

src/views/user/Vip.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :md="4">
+        <el-menu
+          :default-active="this.$route.path"
+          router
+          class="el-menu-vertical-demo"
+        >
+          <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.path">
+            <i :class="item.icon" />
+            <span slot="title">{{ item.name }}</span>
+          </el-menu-item>
+        </el-menu>
+      </el-col>
+      <el-col :md="20">
+        <span>小会员</span>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getUserInfo } from '@/utils/auth'
+
+export default {
+  name: 'Profile',
+  data() {
+    return {
+      userId: -1,
+      navList: [
+        { path: '/u/profile', name: '我的信息', icon: 'el-icon-user' },
+        { path: '/u/avatar', name: '我的头像', icon: 'el-icon-user' },
+        { path: '/u/vip', name: '我的会员', icon: 'el-icon-user' }
+      ]
+    }
+  },
+  created() {
+    const userInfo = getUserInfo()
+    if (userInfo != null) {
+      document.title = userInfo.username + '的头像'
+    }
+  },
+  methods: {
+  }
+}
+</script>