From 080e716420065d13b08e2b6f1e0ae8e53b2ebe39 Mon Sep 17 00:00:00 2001
From: awesomefamine <awesomefamine@qq.com>
Date: Fri, 9 Apr 2021 16:25:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=94=A8=E6=88=B7=E4=B8=BB?=
 =?UTF-8?q?=E9=A1=B5=E3=80=81=E7=94=A8=E6=88=B7=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/tip.js                      |   8 ++
 src/api/user.js                     |  28 ++++++
 src/components/Pagination/index.vue | 101 +++++++++++++++++++++
 src/router/index.js                 |  30 +++++--
 src/util/scroll-to.js               |  58 ++++++++++++
 src/view/Home.vue                   |  17 +++-
 src/view/card/CardBar.vue           |  24 +++++
 src/view/card/LoginWelcome.vue      |  30 +++++++
 src/view/card/Promotion.vue         |  30 +++++++
 src/view/card/Tip.vue               |  41 +++++++++
 src/view/post/Index.vue             |  32 +++++++
 src/view/user/Profile.vue           | 135 ++++++++++++++++++++++++++++
 src/view/user/Setting.vue           | 118 ++++++++++++++++++++++++
 13 files changed, 642 insertions(+), 10 deletions(-)
 create mode 100644 src/api/tip.js
 create mode 100644 src/api/user.js
 create mode 100644 src/components/Pagination/index.vue
 create mode 100644 src/util/scroll-to.js
 create mode 100644 src/view/card/CardBar.vue
 create mode 100644 src/view/card/LoginWelcome.vue
 create mode 100644 src/view/card/Promotion.vue
 create mode 100644 src/view/card/Tip.vue
 create mode 100644 src/view/post/Index.vue
 create mode 100644 src/view/user/Profile.vue
 create mode 100644 src/view/user/Setting.vue

diff --git a/src/api/tip.js b/src/api/tip.js
new file mode 100644
index 0000000..8a83600
--- /dev/null
+++ b/src/api/tip.js
@@ -0,0 +1,8 @@
+import request from '@/util/request'
+
+export function getTodayTip() {
+    return request({
+        url: '/tip/today',
+        method: 'get'
+    })
+}
\ No newline at end of file
diff --git a/src/api/user.js b/src/api/user.js
new file mode 100644
index 0000000..0aec260
--- /dev/null
+++ b/src/api/user.js
@@ -0,0 +1,28 @@
+import request from '@/util/request'
+
+// 用户主页
+export function getInfoByName(username, page, size) {
+  return request({
+    url: '/ums/user/' + username,
+    method: 'get',
+    params: {
+      pageNo: page,
+      size: size
+    }
+  })
+}
+// 用户主页
+export function getInfo() {
+  return request({
+    url: '/ums/user/info',
+    method: 'get'
+  })
+}
+// 更新
+export function update(user) {
+  return request({
+    url: '/ums/user/update',
+    method: 'post',
+    data: user
+  })
+}
\ No newline at end of file
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
new file mode 100644
index 0000000..1b31c9f
--- /dev/null
+++ b/src/components/Pagination/index.vue
@@ -0,0 +1,101 @@
+<template>
+  <div :class="{ hidden: hidden }" class="pagination-container">
+    <el-pagination
+      :background="background"
+      :current-page.sync="currentPage"
+      :page-size.sync="pageSize"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import {scrollTo} from "@/util/scroll-to";
+export default {
+  name: "Pagination",
+  props: {
+    total: {
+      required: true,
+      type: Number,
+    },
+    page: {
+      type: Number,
+      default: 1,
+    },
+    limit: {
+      type: Number,
+      default: 10,
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [5, 10, 20, 30, 50];
+      },
+    },
+    layout: {
+      type: String,
+      default: "total, sizes, prev, pager, next, jumper",
+      // default: 'sizes, prev, pager, next, jumper'
+    },
+    background: {
+      type: Boolean,
+      default: true,
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true,
+    },
+    hidden: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page;
+      },
+      set(val) {
+        this.$emit("update:page", val);
+      },
+    },
+    pageSize: {
+      get() {
+        return this.limit;
+      },
+      set(val) {
+        this.$emit("update:limit", val);
+      },
+    },
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.$emit("pagination", { page: this.currentPage, limit: val });
+      if (this.autoScroll) {
+        scrollTo(0, 800);
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit("pagination", { page: val, limit: this.pageSize });
+      if (this.autoScroll) {
+       scrollTo(0, 800);
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.pagination-container {
+  /* background: #fff; */
+  padding: 5px 0px;
+}
+.pagination-container.hidden {
+  display: none;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 3ee5ac6..2130049 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,13 +3,29 @@ import VueRouter from 'vue-router'
 
 Vue.use(VueRouter)
 
-const routes = [{
-    path: '/',
-    name: 'Home',
-    component: () =>
+const routes = [
+    {
+        name: 'Home',
+        path: '/',
+        component: () =>
         import ('@/view/Home')
-}]
+    },
+    //用户主页
+    {
+        name:'user',
+        path:'/member/home',
+        component: () => import('@/view/user/Profile'),
+        meta: {title: '用户主页'}
+    } ,
+    //用户设置
+    {
+        name: 'user-setting',
+        path: '/member/Setting',
+        component: () => import('@/view/user/Setting'),
+        meta:{ title: '设置'}
+    } 
+];
 
-const router = new VueRouter({ routes })
+const router = new VueRouter({ routes });
 
-export default router
\ No newline at end of file
+export default router;
\ No newline at end of file
diff --git a/src/util/scroll-to.js b/src/util/scroll-to.js
new file mode 100644
index 0000000..331ef47
--- /dev/null
+++ b/src/util/scroll-to.js
@@ -0,0 +1,58 @@
+Math.easeInOutQuad = function(t, b, c, d) {
+    t /= d / 2
+    if (t < 1) {
+      return c / 2 * t * t + b
+    }
+    t--
+    return -c / 2 * (t * (t - 2) - 1) + b
+  }
+  
+  // requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
+  var requestAnimFrame = (function() {
+    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
+  })()
+  
+  /**
+   * Because it's so fucking difficult to detect the scrolling element, just move them all
+   * @param {number} amount
+   */
+  function move(amount) {
+    document.documentElement.scrollTop = amount
+    document.body.parentNode.scrollTop = amount
+    document.body.scrollTop = amount
+  }
+  
+  function position() {
+    return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
+  }
+  
+  /**
+   * @param {number} to
+   * @param {number} duration
+   * @param {Function} callback
+   */
+  export function scrollTo(to, duration, callback) {
+    const start = position()
+    const change = to - start
+    const increment = 20
+    let currentTime = 0
+    duration = (typeof (duration) === 'undefined') ? 500 : duration
+    var animateScroll = function() {
+      // increment the time
+      currentTime += increment
+      // find the value with the quadratic in-out easing function
+      var val = Math.easeInOutQuad(currentTime, start, change, duration)
+      // move the document.body
+      move(val)
+      // do the animation unless its over
+      if (currentTime < duration) {
+        requestAnimFrame(animateScroll)
+      } else {
+        if (callback && typeof (callback) === 'function') {
+          // the animation is done so lets callback
+          callback()
+        }
+      }
+    }
+    animateScroll()
+  }
\ No newline at end of file
diff --git a/src/view/Home.vue b/src/view/Home.vue
index c0f7fa2..4a402eb 100644
--- a/src/view/Home.vue
+++ b/src/view/Home.vue
@@ -1,20 +1,31 @@
 <template>
   <div>
-      <div class="box">
-          {{billboard.content}}
+        <div class="box">
+            {{billboard.content}}
+        </div>
+      <div class="columns">
+        <div class="column is-three-quarters">
+            <TopicList></TopicList>
+        </div>
+        <div class="column">
+            <CardBar></CardBar>
+        </div>
       </div>
   </div>
 </template>
 
 <script>
 import {getBillboard} from '@/api/billboard'
+import CardBar from "@/view/card/CardBar"
+import PostList from "@/view/post/Index"
 
 export default {
   name: 'Home',
+  components: {CardBar, TopicList:PostList},
   data() {
       return {
           billboard: {
-            content: ''
+            content: '已更新至最新版1.01'
           }
       }
   },
diff --git a/src/view/card/CardBar.vue b/src/view/card/CardBar.vue
new file mode 100644
index 0000000..44d6195
--- /dev/null
+++ b/src/view/card/CardBar.vue
@@ -0,0 +1,24 @@
+<template>
+<section>
+    <login-welcome />
+
+    <tip-card />
+
+    <PromotionCard />
+</section>
+</template>
+
+<script>
+import TipCard from '@/view/card/Tip'
+import PromotionCard from '@/view/card/Promotion'
+import LoginWelcome from '@/view/card/LoginWelcome'
+
+export default {
+    name: 'CardBar',
+    components: { LoginWelcome, PromotionCard, TipCard }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/src/view/card/LoginWelcome.vue b/src/view/card/LoginWelcome.vue
new file mode 100644
index 0000000..499ef2d
--- /dev/null
+++ b/src/view/card/LoginWelcome.vue
@@ -0,0 +1,30 @@
+<template>
+    <el-card class="box-card" shadow="never">
+        <div slot="header">
+            <span>🎐 发帖</span>
+        </div>
+        <div>
+          暂不支持发帖功能！
+        </div>
+    </el-card>
+</template>
+
+<script>
+
+export default {
+  name: 'CardBar',
+  data() {
+      return {
+      }
+  },
+  created() {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/view/card/Promotion.vue b/src/view/card/Promotion.vue
new file mode 100644
index 0000000..6313947
--- /dev/null
+++ b/src/view/card/Promotion.vue
@@ -0,0 +1,30 @@
+<template>
+    <el-card class="box-card" shadow="never">
+        <div slot="header">
+            <span>🎁 推广</span>
+        </div>
+        <div>
+          未收到有关推广！
+        </div>
+    </el-card>
+</template>
+
+<script>
+
+export default {
+  name: 'CardBar',
+  data() {
+      return {
+      }
+  },
+  created() {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/view/card/Tip.vue b/src/view/card/Tip.vue
new file mode 100644
index 0000000..ec8c434
--- /dev/null
+++ b/src/view/card/Tip.vue
@@ -0,0 +1,41 @@
+<template>
+    <el-card class="box-card" shadow="never">
+        <div slot="header">
+            <span>✨ 每日一句</span>
+        </div>
+        <div>
+            <div class="has-text-left block">
+                {{tip.content}}
+            </div>
+            <div class="has-text-right mt-5 block">
+                ——{{tip.author}}
+            </div>
+        </div>
+    </el-card>
+</template>
+
+<script>
+import {getTodayTip} from '@/api/tip'
+export default {
+  name: 'Tip',
+  data() {
+      return {
+          tip: {}
+      }
+  },
+  created() {
+      this.fetchTodayTip()
+  },
+  methods: {
+      fetchTodayTip() {
+          getTodayTip(this.type).then(response => {
+              const {data} = response
+              this.tip = data
+          })
+      }
+  }
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/view/post/Index.vue b/src/view/post/Index.vue
new file mode 100644
index 0000000..d5f74a5
--- /dev/null
+++ b/src/view/post/Index.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <el-card>
+        <div slot="header">
+            📝 帖子列表    
+        </div>
+        <div>
+            暂时没有帖子！
+        </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'TopicList',
+  data() {
+      return {
+      }
+  },
+  created() {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/src/view/user/Profile.vue b/src/view/user/Profile.vue
new file mode 100644
index 0000000..f3bc143
--- /dev/null
+++ b/src/view/user/Profile.vue
@@ -0,0 +1,135 @@
+
+<template>
+  <div class="member">
+    <div class="columns">
+      <div class="column is-one-quarter">
+        <el-card shadow="never">
+          <div slot="header" class="has-text-centered">
+            <el-avatar :size="64" :src="`https://cn.gravatar.com/avatar/${topicUser.id}?s=164&d=monsterid`" />
+            <p class="mt-3">{{ topicUser.alias || topicUser.username }}</p>
+          </div>
+          <div>
+            <p class="content">积分：<code>{{ topicUser.score }}</code></p>
+            
+            <p class="content">入驻：{{ dayjs(topicUser.createTime).format("YYYY/MM/DD HH:MM:ss") }}</p>
+            
+            <p class="content">简介：{{ topicUser.bio }}</p>
+            
+          </div>
+        </el-card>
+      </div>
+
+      <div class="column">
+        <!--用户发布的话题-->
+        <el-card class="box-card content" shadow="never">
+          <div slot="header" class="has-text-weight-bold">
+            <span>话题</span>
+          </div>
+
+          <div v-if="topics.length===0">
+            暂无话题
+          </div>
+
+          <div v-else class="topicUser-info">
+            <article v-for="(item, index) in topics" :key="index" class="media">
+              <div class="media-content">
+                <div class="content ellipsis is-ellipsis-1">
+                  <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
+                    <router-link :to="{ name: 'post-detail', params: { id: item.id } }">
+                      {{ item.title }}
+                    </router-link>
+                  </el-tooltip>
+                </div>
+                <nav class="level has-text-grey is-size-7">
+                  <div class="level-left">
+                    <span class="mr-1">
+                      发布于:{{ dayjs(item.createTime).format("YYYY/MM/DD HH:mm:ss") }}
+                    </span>
+                  </div>
+                </nav>
+              </div>
+              <div v-if="token" class="media-right">
+                <div v-if="topicUser.username === user.username" class="level">
+                  <div class="level-item mr-1">
+                    <router-link :to="{name:'topic-edit',params: {id:item.id}}">
+                      <span class="tag is-warning">编辑</span>
+                    </router-link>
+                  </div>
+                  <div class="level-item">
+                    <a @click="handleDelete(item.id)">
+                      <span class="tag is-danger">删除</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </article>
+          </div>
+
+          <!--分页-->
+          <pagination
+            v-show="page.total > 0"
+            class="mt-5"
+            :total="page.total"
+            :page.sync="page.current"
+            :limit.sync="page.size"
+            @pagination="fetchUserById"
+          />
+        </el-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getInfoByName } from '@/api/user'
+import pagination from '@/components/Pagination/index'
+import { mapGetters } from 'vuex'
+import { deleteTopic } from '@/api/post'
+export default {
+  name: 'Profile',
+  components: { pagination },
+  data() {
+    return {
+      topicUser: {},
+      topics: {},
+      page: {
+        current: 1,
+        size: 5,
+        total: 0
+      }
+    }
+  },
+  computed: {
+    ...mapGetters(['token', 'user'])
+  },
+  created() {
+    this.fetchUserById()
+  },
+  methods: {
+    fetchUserById() {
+      getInfoByName(this.$route.params.username, this.page.current, this.page.size).then((res) => {
+        const { data } = res
+        this.topicUser = data.user
+        this.page.current = data.topics.current
+        this.page.size = data.topics.size
+        this.page.total = data.topics.total
+        this.topics = data.topics.records
+      })
+    } ,
+    handleDelete(id) {
+      deleteTopic(id).then(value => {
+        const { code, message } = value
+        alert(message)
+        if (code === 200) {
+          setTimeout(() => {
+            this.$router.push({ path: '/' })
+          }, 500)
+        }
+      })
+    }
+  } 
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/view/user/Setting.vue b/src/view/user/Setting.vue
new file mode 100644
index 0000000..e109e74
--- /dev/null
+++ b/src/view/user/Setting.vue
@@ -0,0 +1,118 @@
+<template>
+  <section>
+    <el-card shadow="never">
+      <div slot="header">
+        个人设置
+      </div>
+      <div class="columns">
+        <div class="column is-full">
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="基础信息" name="first">
+              <el-form :label-position="labelPosition" label-width="100px" :model="user">
+                <el-form-item label="账号">
+                  <el-input v-model="user.username" disabled />   
+                </el-form-item>
+                <el-form-item label="昵称">
+                  <el-input v-model="user.alias" />
+                </el-form-item>
+                <el-form-item label="简介">
+                  <el-input v-model="user.bio" />
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
+                  <el-button @click="resetForm('ruleForm')">重置</el-button>
+                </el-form-item>
+              </el-form>
+            </el-tab-pane>
+            <el-tab-pane label="头像" name="second">
+              <figure class="image is-48x48">
+                <img :src="`https://cn.gravatar.com/avatar/${this.user.id}?s=164&d=monsterid`">
+              </figure>
+            </el-tab-pane>
+            <el-tab-pane label="电子邮箱" name="third">
+              <el-form ref="dynamicValidateForm" :model="user" label-width="100px" class="demo-dynamic">
+                <el-form-item
+                  prop="email"
+                  label="邮箱"
+                  :rules="[
+                    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
+                  ]"
+                >
+                  <el-input v-model="user.email" />
+                </el-form-item>
+
+                <el-form-item>
+                  <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
+                  <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
+                </el-form-item>
+              </el-form>
+            </el-tab-pane>
+            <el-tab-pane label="手机号" name="fourth">
+              <el-form ref="dynamicValidateForm" :model="user" label-width="100px" class="demo-dynamic">
+                <el-form-item>
+                  <el-input v-model="user.mobile" />
+                </el-form-item>
+
+                <el-form-item>
+                  <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
+                  <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
+                </el-form-item>
+              </el-form>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+    </el-card>
+  </section>
+</template>
+
+<script>
+// import {getInfo, update} from '@/api/user'
+export default {
+  name: 'Setting',
+  data() {
+    return {
+      activeName: 'first',
+      labelPosition: 'right',
+      user: {
+        id: '',
+        username: '',
+        alias: '',
+        bio: '',
+        email: '',
+        mobile: '',
+        avatar: ''
+      }
+    }
+  },
+  created() {
+    // this.fetchInfo()
+  },
+  methods: {
+    /* fetchInfo() {
+      getInfo(this.$route.params.username).then(res => {
+        console.log(res)
+        const { data } = res
+        this.user = data
+      })
+    },
+    handleClick(tab, event) {
+      console.log(tab, event)
+    },
+    submitForm(formName) {
+      console.log(this.user)
+      update(this.user).then(res => {
+        this.$message.success('信息修改成功')
+        this.fetchInfo()
+      })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+    }*/
+  } 
+}
+</script>
+
+<style scoped>
+</style>
\ No newline at end of file
-- 
Gitee