添加消息页面、主页访客页面

src/App.vue

@@ -55,6 +55,8 @@ export default {
         '/message/share-to-friend',
         '/message/joined-group-chat',
         '/message/fans',
+        '/message/all',
+        '/message/visitors',
 
         '/country-choose',
         '/edit-userinfo',

src/assets/less/color.less

@@ -4,11 +4,16 @@
 @second-btn-color: rgb(58, 58, 70);
 @second-btn-color-tran: rgba(58, 58, 70, .4);
 @line-color: rgb(37, 45, 66);
-@line-color2: rgb(56,54,67);
+@line-color2: rgb(56, 54, 67);
 
 @primary-btn-color: rgb(252, 47, 86);
 @disable-primary-btn-color: rgba(252, 47, 86, .5);
 
+@mask-dark: #000000bb;
+@mask-light:transparent;
+@mask-white:transparent;
+@mask-lightgray:rgba(0, 0, 0, 0.25);
+
 .second-text-color {
   color: @second-text-color;
 }

src/components/Mask.vue

@@ -18,6 +18,8 @@ export default {
 </script>
 
 <style lang="less">
+@import "@/assets/less/index";
+
 
 .Mask {
   z-index: 3;
@@ -26,22 +28,22 @@ export default {
   bottom: 0;
   left: 0;
   right: 0;
-  background: #000000bb;
+  background: @mask-dark;
 
   &.dark {
-    background: #000000bb;
+    background: @mask-dark;
   }
 
   &.light {
-    background: transparent;
+    background: @mask-light;
   }
 
   &.lightgray {
-    background: rgba(0, 0, 0, 0.25);
+    background: @mask-lightgray;
   }
 
   &.white {
-    background: transparent;
+    background: @mask-white;
   }
 }
 </style>

src/components/Scroll.vue

@@ -1,26 +1,88 @@
 <template>
-  <div class="scroll-wrapper scroll" ref="wrapper" @scroll="scroll">
+  <div v-if="useRefresh" class="scroll-wrapper scroll"
+       ref="wrapper"
+       @touchmove="move"
+       @touchend="end"
+       @scroll="scroll">
+    <Loading :is-full-screen="false" :style="pullUpStyle"/>
+    <div class="scroll-content" :style="pullUpStyle">
+      <slot></slot>
+    </div>
+  </div>
+  <div v-else class="scroll-wrapper scroll" ref="wrapper" @scroll="scroll">
     <div class="scroll-content">
       <slot></slot>
     </div>
   </div>
 </template>
 <script>
+import Loading from "./Loading";
+
 export default {
   name: "Scroll",
+  components: {
+    Loading
+  },
   props: {
     fixedHeight: {
       type: Number,
       default: -1
+    },
+    useRefresh: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
-    return {}
+    return {
+      wrapper: null,
+      startMoveY: null,
+      distance: null,
+      refresh: false
+    }
+  },
+  computed: {
+    pullUpStyle() {
+      return {
+        'transition-duration': this.refresh ? '300ms' : '0ms',
+        transform: `translate3d(0px, ${this.distance !== null ? this.distance : -40}px,0`
+      }
+    }
   },
-  computed: {},
   created() {
   },
+  mounted() {
+    this.wrapper = this.$refs.wrapper
+  },
   methods: {
+    move(e) {
+      // console.log(this.wrapper)
+      console.log(this.wrapper.scrollTop)
+      if (this.refresh) return
+      if (this.wrapper.scrollTop > 0) return;
+      if (this.wrapper.scrollTop === 0 && this.startMoveY === null) {
+        this.startMoveY = e.touches[0].pageY
+      }
+      let distance = e.touches[0].pageY - this.startMoveY
+      this.distance = distance - 40 < 10 ? distance - 40 : 10
+    },
+    end() {
+      this.startMoveY = null
+      if (this.distance !== null && this.wrapper.scrollTop === 0) {
+        this.refresh = true
+        this.distance = 10
+        this.$emit('refresh')
+      } else {
+        this.distance = null
+      }
+      console.log('end')
+    },
+    refreshEnd() {
+      this.distance = null
+      setTimeout(() => {
+        this.refresh = false
+      }, 300)
+    },
     async scroll() {
       let wrapper = this.$refs.wrapper
       if (this.fixedHeight !== -1) {

src/pages/message/AllMessage.vue

@@ -0,0 +1,381 @@
+<template>
+  <div id="AllMessage">
+    <BaseHeader>
+      <template v-slot:center>
+        <div class="center" @click="isShowType = !isShowType">
+          <span class="f16">{{ showTypeText }}</span>
+          <img :class="{show:isShowType}" src="../../assets/img/icon/arrow-up-white.png" alt="">
+        </div>
+      </template>
+    </BaseHeader>
+    <transition name="fade">
+      <div class="type-dialog" v-if="isShowType">
+        <div class="dialog-content">
+          <div class="row" @click="toggleShowType(1)">
+            <div class="left">
+              <img src="../../assets/img/icon/message/done-gray.png" alt="">
+              <span>全部消息</span>
+            </div>
+          </div>
+          <div class="row" @click="toggleShowType(2)">
+            <div class="left">
+              <img src="../../assets/img/icon/message/like-gray.png" alt="">
+              <span>赞</span>
+            </div>
+          </div>
+          <div class="row" @click="toggleShowType(3)">
+            <div class="left">
+              <img src="../../assets/img/icon/message/call-gray.png" alt="">
+              <span>@我的</span>
+            </div>
+          </div>
+          <div class="row" @click="toggleShowType(4)">
+            <div class="left">
+              <img src="../../assets/img/icon/message/comment-gray.png" alt="">
+              <span>评论</span>
+            </div>
+          </div>
+        </div>
+        <div class="mask" @click="isShowType = false"></div>
+      </div>
+    </transition>
+    <div class="content">
+      <Scroll
+          ref="scroll"
+          :use-refresh="true"
+          @refresh="refresh"
+          @pulldown="loadData">
+        <div class="messages">
+          <div class="message" @click="$nav('/message/visitors')">
+            <div class="left">
+              <img v-lazy="$imgPreview(userinfo.avatar)" alt="" class="avatar">
+            </div>
+            <div class="right">
+              <div class="desc">
+                <div class="top">
+                  <div class="name">主页访客</div>
+                </div>
+                <div class="desc-content">
+                  4人最近访问了你的主页，看看他们是谁
+                </div>
+                <div class="bottom">
+                  <div class="time">01-11</div>
+                </div>
+              </div>
+              <img v-lazy="$imgPreview(userinfo.avatar)" alt="" class="poster">
+            </div>
+          </div>
+          <div class="message" v-for="item in showMessageList" @click="$no">
+            <div class="left">
+              <img v-lazy="$imgPreview(item.author.avatar)" alt="" class="avatar">
+              <img v-if="selectShowType === 2" src="../../assets/img/icon/message/love-message.webp" alt=""
+                   class="type">
+              <img v-if="selectShowType === 3" src="../../assets/img/icon/message/call-message.webp" alt=""
+                   class="type">
+              <img v-if="selectShowType === 4" src="../../assets/img/icon/message/comment-message.webp" alt=""
+                   class="type">
+            </div>
+            <div class="right">
+              <div class="desc">
+                <div class="top">
+                  <div class="name">{{ item.author.nickname }}</div>
+                  <div class="tag">朋友</div>
+                </div>
+                <div class="desc-content">
+                  <span v-if="selectShowType === 1">好好看啊</span>
+                  <span v-if="selectShowType === 2">赞了你的作品</span>
+                  <span v-if="selectShowType === 3">@{{ userinfo.nickname }}</span>
+                  <span v-if="selectShowType === 4">好好看啊</span>
+                </div>
+                <div class="bottom">
+                  <div class="type" v-if="selectShowType === 3">在评论中提到了你</div>
+                  <div class="type" v-if="selectShowType === 4">回复了你的评论</div>
+                  <div class="time">01-11</div>
+                </div>
+              </div>
+              <img v-lazy="$imgPreview(item.video+'?vframe/jpg/offset/0/w/300')" alt="" class="poster">
+            </div>
+          </div>
+          <div class="look-all" v-if="!showAll" @click="showAll = true">
+            <span>查看全部</span>
+            <back/>
+          </div>
+        </div>
+        <div class="title">
+          <span>朋友推荐</span>
+          <img src="../../assets/img/icon/about-gray.png" alt="">
+        </div>
+        <Peoples v-model:list="recommend"
+                 :loading="loading"
+                 mode="recommend"/>
+        <Loading :is-full-screen="false" v-if="loading"/>
+      </Scroll>
+    </div>
+  </div>
+</template>
+<script>
+import {mapState} from "vuex";
+import People from "../people/components/People";
+import Scroll from "../../components/Scroll";
+import Loading from "../../components/Loading";
+import Peoples from "../people/components/Peoples";
+import resource from "../../assets/data/resource.js";
+
+
+export default {
+  name: "Fans",
+  components: {
+    Scroll,
+    People,
+    Loading,
+    Peoples
+  },
+  data() {
+    return {
+      loading: false,
+      isShowType: false,
+      showAll: false,
+      recommend: [],
+      messages: [],
+      selectShowType: 1
+    }
+  },
+  computed: {
+    ...mapState(['userinfo', 'friends']),
+    showTypeText() {
+      switch (this.selectShowType) {
+        case 1:
+          return '全部消息'
+        case 2:
+          return '赞'
+        case 3:
+          return '@我的'
+        case 4:
+          return '评论'
+      }
+    },
+    showMessageList() {
+      if (this.showAll) {
+        return this.messages
+      }
+      return this.messages.slice(0, 2)
+    }
+  },
+  created() {
+    this.recommend = this.$clone(this.friends.all)
+    this.fans = this.$clone(this.friends.all)
+    this.recommend.map(v => {
+      v.type = -1
+    })
+    this.messages = this.$clone(resource.videos)
+  },
+  methods: {
+    toggleShowType(index) {
+      this.selectShowType = index
+      this.isShowType = false
+    },
+    remove(index) {
+      this.$notice('将不会再为你推荐该用户')
+      this.recommend.splice(index, 1)
+    },
+    async refresh() {
+      await this.$sleep(1000)
+      this.$refs.scroll.refreshEnd()
+    },
+    async loadData() {
+      if (this.loading) return
+      this.loading = true
+      await this.$sleep(500)
+      this.loading = false
+      let temp = this.$clone(this.friends.all)
+      temp.map(v => {
+        v.type = -1
+      })
+      this.recommend = this.recommend.concat(temp)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "@/assets/less/index";
+
+
+.list-complete-enter-from,
+.list-complete-leave-to {
+  opacity: 0;
+}
+
+.list-complete-leave-active {
+  position: absolute;
+}
+
+#AllMessage {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+  font-size: 1.4rem;
+
+  .center {
+    display: flex;
+    align-items: center;
+
+    img {
+      width: 1.5rem;
+      transform: rotate(180deg);
+      transition: all .3s;
+    }
+
+    .show {
+      transform: rotate(0deg);
+    }
+  }
+
+  .type-dialog {
+    z-index: 9;
+    position: fixed;
+    height: 100vh;
+    width: 100vw;
+    margin-top: @header-height;
+
+    .dialog-content {
+      background: @main-bg;
+
+      img {
+        width: 1.6rem;
+      }
+    }
+
+    .mask {
+      z-index: 8;
+      position: fixed;
+      height: 100vh;
+      width: 100vw;
+      background: @mask-dark;
+    }
+  }
+
+  .content {
+    padding: @padding-page;
+    padding-top: @header-height;
+
+    .scroll {
+      height: calc(100vh - @header-height);
+    }
+
+    .messages {
+      .message {
+        margin-bottom: 2rem;
+        display: flex;
+
+        &:first-child {
+          margin-top: 2rem;
+        }
+
+        .left {
+          display: flex;
+          align-items: center;
+          position: relative;
+
+          .avatar {
+            width: 4.8rem;
+            border-radius: 50%;
+          }
+
+          .type {
+            position: absolute;
+            right: 0;
+            bottom: 1rem;
+            width: 1.7rem;
+            padding: .25rem;
+            border-radius: 50%;
+            background: black;
+          }
+
+          margin-right: 1rem;
+        }
+
+        .right {
+          flex: 1;
+          display: flex;
+          justify-content: space-between;
+
+          .desc {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+
+            .top {
+              //margin-bottom: 1rem;
+              display: flex;
+              align-items: center;
+
+              .tag {
+                color: @second-text-color;
+                padding: .1rem .4rem;
+                margin-left: 1rem;
+                border-radius: .2rem;
+                background: @second-btn-color-tran;
+                font-size: 1rem;
+              }
+            }
+
+            .bottom {
+              //margin-top: 1rem;
+              display: flex;
+              align-items: center;
+              font-size: 1.2rem;
+              color: @second-text-color;
+
+              .type {
+                margin-right: 1rem;
+              }
+            }
+          }
+
+          .poster {
+            margin-left: 1rem;
+            width: 6.4rem;
+            height: 6.4rem;
+            object-fit: cover;
+            border-radius: .3rem;
+          }
+        }
+      }
+
+      .look-all {
+        font-size: 1.2rem;
+        color: @second-text-color;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        .close {
+          margin-left: 1rem;
+          transform: rotate(270deg) !important;
+          width: 1.2rem;
+          height: 1.2rem;
+        }
+      }
+    }
+
+
+    .title {
+      margin-top: 1.5rem;
+      margin-bottom: 1rem;
+      font-size: 1.2rem;
+      display: flex;
+      align-items: center;
+
+      img {
+        margin-left: .5rem;
+        width: 1.3rem;
+      }
+    }
+  }
+}
+</style>

src/pages/message/Message.vue

@@ -44,7 +44,7 @@
         </div>
       </div>
       <!--      互动消息-->
-      <div class="message">
+      <div class="message" @click="$nav('/message/all')">
         <div class="avatar">
           <img src="../../assets/img/icon/msg-icon2.png" alt="" class="head-image">
         </div>
@@ -714,7 +714,6 @@ export default {
   }
 
   .messages {
-    margin-top: 5px;
 
     .message {
       display: flex;
@@ -725,7 +724,7 @@ export default {
       }
 
       &:active {
-        background: #353a4f;
+        background: @active-main-bg;
       }
 
       .avatar {

src/pages/message/Visitors.vue

@@ -0,0 +1,286 @@
+<template>
+  <div id="Visitors">
+    <BaseHeader>
+      <template v-slot:center>
+        <span class="f16">主页访客</span>
+      </template>
+      <template v-slot:right>
+        <span class="f14" @click="isShowSetting = !isShowSetting">设置</span>
+      </template>
+    </BaseHeader>
+    <div class="content">
+      <template v-if="realDisplay">
+        <Peoples v-model:list="recommend"
+                 :loading="loading"
+                 mode="visitor"/>
+        <NoMore/>
+      </template>
+      <template v-else>
+        <div class="open-display-desc">
+          <div class="header">
+            <div class="wrapper">
+              <img src="../../assets/img/icon/message/display2.webp" alt="" class="icon1">
+              <img :src="$imgPreview(userinfo.avatar)" alt="" class="icon2">
+              <img src="../../assets/img/icon/message/display1.webp" alt="" class="icon3">
+            </div>
+          </div>
+          <div class="title">查看新访客需要你的授权</div>
+          <ul class="list">
+            <li>访客记录中仅展示同样已授权的用户</li>
+            <li>开户后，你访问他人方面也将留下记录</li>
+            <li>你可以随时在访客设置中关闭授权</li>
+          </ul>
+
+          <div class="buttons">
+            <base-button type="dark" @click="keepClose">保持关闭</base-button>
+            <base-button type="primary" @click="display = realDisplay = true">开启访客</base-button>
+          </div>
+        </div>
+      </template>
+    </div>
+
+    <from-bottom-dialog
+        page-id="Visitors"
+        v-model="isShowSetting"
+        mode="white"
+        mask-mode="dark"
+        height="25rem"
+        :show-heng-gang="false"
+    >
+      <div class="setting-dialog">
+        <div class="header">
+          <div class="status">
+            <img class="icon" src="../../assets/img/icon/message/peoples-black2.png" alt="">
+            <transition name="remove">
+              <img v-if="!display" class="remove" src="../../assets/img/icon/message/remove.png" alt="">
+            </transition>
+          </div>
+          <img class="close" @click="isShowSetting = false" src="../../assets/img/icon/components/gray-close-full2.png"
+               alt="">
+        </div>
+        <div class="title">主页访客</div>
+        <div class="sub-title">关闭后，你查看他人主页时不会留下记录；同时，你也无法查看谁访问了你的主页</div>
+        <div class="l-line"></div>
+        <div class="row">
+          <div class="left">展示主页访客</div>
+          <div class="right">
+            <switches v-model="display" theme="bootstrap" color="success"></switches>
+          </div>
+        </div>
+      </div>
+    </from-bottom-dialog>
+  </div>
+</template>
+<script>
+import {mapState} from "vuex";
+import Peoples from "../people/components/Peoples";
+import NoMore from "../../components/NoMore";
+import FromBottomDialog from "../../components/dialog/FromBottomDialog";
+import Switches from "./components/swtich/switches";
+import BaseButton from "../../components/BaseButton";
+
+export default {
+  name: "visitors",
+  components: {
+    BaseButton,
+    FromBottomDialog,
+    Peoples,
+    NoMore,
+    Switches
+  },
+  data() {
+    return {
+      recommend: [],
+      isShowSetting: false,
+      display: false,
+      realDisplay: false,
+    }
+  },
+  watch: {
+    isShowSetting(newVal) {
+      if (!newVal) {
+        this.realDisplay = this.display
+      }
+    }
+  },
+  computed: {
+    ...mapState(['userinfo', 'friends']),
+  },
+  created() {
+    this.recommend = this.$clone(this.friends.all)
+  },
+  methods: {
+    keepClose() {
+      this.$notice('你将不会再收到相关通知')
+      this.$back()
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "@/assets/less/index";
+
+.remove-enter-active,
+.remove-leave-active {
+  transition: transform 0.3s ease;
+}
+
+.remove-enter-from,
+.remove-leave-to {
+  transform: scale(0);
+}
+
+#Visitors {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow: auto;
+  color: white;
+  font-size: 1.4rem;
+
+  .content {
+    padding: @padding-page;
+    padding-top: @header-height;
+  }
+
+  .open-display-desc {
+    text-align: center;
+
+    .header {
+      margin-top: 10rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .wrapper {
+        display: inline-block;
+        position: relative;
+      }
+
+      .icon1 {
+        left: -2rem;
+        bottom: 2rem;
+        position: absolute;
+        width: 3rem;
+      }
+
+      .icon2 {
+        z-index: 2;
+        position: relative;
+        padding: .25rem;
+        background: black;
+        border-radius: 50%;
+        width: 8rem;
+      }
+
+      .icon3 {
+        bottom: .5rem;
+        right: -3rem;
+        z-index: 3;
+        position: absolute;
+        padding: .2rem;
+        background: black;
+        border-radius: 50%;
+        width: 4rem;
+      }
+    }
+
+    .title {
+      margin-top: 3rem;
+      font-size: 1.6rem;
+      font-weight: bold;
+    }
+
+    .list {
+      color: @second-text-color;
+      text-align: left;
+    }
+
+    .buttons {
+      position: fixed;
+      padding: @padding-page;
+      bottom: 0;
+      left: 0;
+      width: 100vw;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+
+      .button {
+        width: 49%;
+
+        &:first-child {
+          color: white;
+        }
+      }
+    }
+  }
+
+  .setting-dialog {
+    color: black;
+    text-align: center;
+
+    .header {
+      padding: @padding-page;
+      padding-top: 3rem;
+      padding-bottom: 2rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .status {
+        position: relative;
+
+        .icon {
+          width: 6.4rem;
+        }
+
+        .remove {
+          bottom: 0;
+          right: 0;
+          position: absolute;
+          padding: .2rem;
+          border-radius: 50%;
+          background: white;
+          width: 2rem;
+        }
+      }
+
+      .close {
+        top: @padding-page;
+        right: @padding-page;
+        position: absolute;
+        width: 2rem;
+      }
+    }
+
+    .title {
+      font-size: 1.6rem;
+    }
+
+    .sub-title {
+      padding: @padding-page;
+      font-size: 1.2rem;
+      color: @second-text-color;
+    }
+
+    .l-line {
+      background: #f2f1f1;
+      margin-left: @padding-page;
+      width: calc(100vw - @padding-page * 2);
+      height: 1px;
+    }
+
+    .row {
+      margin-bottom: 1rem;
+
+      .left {
+        color: black !important;
+      }
+    }
+  }
+}
+</style>

src/pages/people/components/People.vue

@@ -63,6 +63,26 @@
           <img src="../../../assets/img/icon/menu-white.png" alt="" @click="showPopover = !showPopover">
         </div>
       </template>
+
+      <template v-if="mode === 'visitor'">
+        <div class="left">
+          <div class="name">{{ people.name }}</div>
+        </div>
+        <div class="right">
+          <!--   他关注我   -->
+          <template v-if="people.type === RELATE_ENUM.FOLLOW_ME">
+            <div class="l-button red" @click="$emit('follow')">关注</div>
+          </template>
+          <!--   我关注他   -->
+          <template v-if="people.type === RELATE_ENUM.FOLLOW_HE">
+            <div class="l-button" @click="$emit('unfollow')">已关注</div>
+          </template>
+          <!--          相互关注-->
+          <template v-if="people.type === RELATE_ENUM.FOLLOW_EACH_OTHER">
+            <div class="l-button" @click="$emit('unfollow')">互相关注</div>
+          </template>
+        </div>
+      </template>
     </div>
     <!--   TODO 点了不消失，内容也变了 -->
     <transition name="scale">
@@ -163,7 +183,7 @@ export default {
 
     .left {
       .name {
-        font-size: 1.2rem;
+        font-size: 1.4rem;
         margin-bottom: .2rem;
         color: white;
       }

src/pages/people/components/Peoples.vue

@@ -76,6 +76,9 @@ export default {
       this.localList.splice(index, 1)
     },
     follow(index) {
+      if (this.mode === 'visitor') {
+        this.localList[index].type = this.RELATE_ENUM.FOLLOW_HE
+      }
       if (this.mode === 'recommend') {
         this.localList[index].type = this.RELATE_ENUM.FOLLOW_HE
       }
@@ -86,6 +89,9 @@ export default {
       }
     },
     unfollow(index) {
+      if (this.mode === 'visitor') {
+        this.localList[index].type = this.RELATE_ENUM.FOLLOW_ME
+      }
       if (this.mode === 'recommend') {
         this.localList[index].type = this.RELATE_ENUM.RECOMMEND
       }

src/router/index.js

@@ -59,6 +59,8 @@ import MyMusic from "../pages/me/MyMusic";
 import FollowAndFans from "../pages/people/FollowAndFans";
 import MyRequestUpdate from "../pages/me/MyRequestUpdate";
 import Fans from "../pages/message/Fans";
+import AllMessage from "../pages/message/AllMessage";
+import Visitors from "../pages/message/Visitors";
 
 const routes = [
   // {path: '', component: Music},
@@ -88,6 +90,8 @@ const routes = [
   {path: '/message/chat', component: Chat},
   {path: '/message/chat-detail', component: ChatDetail},
   {path: '/message/fans', component: Fans},
+  {path: '/message/all', component: AllMessage},
+  {path: '/message/visitors', component: Visitors},
 
 
   {path: '/edit-userinfo', component: EditUserInfo},