zyronon
4 years ago
24 changed files with 780 additions and 13 deletions
|
Before Width: | Height: | Size: 3.8 KiB After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 7.9 KiB |
|
After Width: | Height: | Size: 6.2 KiB |
@ -0,0 +1,381 @@
@@ -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> |
||||
@ -0,0 +1,286 @@
@@ -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> |
||||
Loading…
Reference in new issue