MoeJue/douyin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

粉丝关注逻辑

Browse Source
This commit is contained in:
zyronon 2021-10-12 00:12:52 +08:00
parent d8704ccbea
commit 8a05c78ac2
6 changed files with 226 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/message/ChatDetail.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="ChatDetail">
<div id="ChatDetail">
<BaseHeader>
<template v-slot:center>
<span class="f16">聊天详情</span>
@ -91,7 +91,7 @@ export default {
<style scoped lang="less">
@import "../../assets/less/index";
.ChatDetail {
#ChatDetail {
position: fixed;
left: 0;
right: 0;

36
src/pages/message/Fans.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="Fans">
<div id="Fans">
<BaseHeader>
<template v-slot:center>
<span class="f16">粉丝</span>
@ -7,19 +7,16 @@
</BaseHeader>
<div class="content">
<Scroll @pulldown="loadData">
<People v-for="item in friends.all" :people="item" mode="fans"></People>
<div class="line mt1r"></div>
<Peoples v-model:list="fans"
:loading="loading"
mode="fans"/>
<div class="title">
<span>朋友推荐</span>
<img src="../../assets/img/icon/about-gray.png" alt="">
</div>
<transition-group name="list-complete" tag="div" class="people-wrapper">
<People v-for="(item,index) in recommend"
:key="item.id"
:people="item"
@remove="remove(index)"
mode="recommend"/>
</transition-group>
<Peoples v-model:list="recommend"
:loading="loading"
mode="recommend"/>
<Loading :is-full-screen="false" v-if="loading"/>
</Scroll>
</div>
@ -30,18 +27,21 @@ 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";
export default {
name: "Fans",
components: {
Scroll,
People,
Loading
Loading,
Peoples
},
data() {
return {
loading: false,
recommend: []
recommend: [],
fans: [],
}
},
computed: {
@ -49,6 +49,10 @@ export default {
},
created() {
this.recommend = this.$clone(this.friends.all)
this.fans = this.$clone(this.friends.all)
this.recommend.map(v => {
v.type = -1
})
},
methods: {
remove(index) {
@ -60,7 +64,11 @@ export default {
this.loading = true
await this.$sleep(500)
this.loading = false
this.recommend = this.recommend.concat(this.friends.all)
let temp = this.$clone(this.friends.all)
temp.map(v => {
v.type = -1
})
this.recommend = this.recommend.concat(temp)
}
}
}
@ -79,7 +87,7 @@ export default {
position: absolute;
}
.Fans {
#Fans {
position: fixed;
left: 0;
right: 0;

2
src/pages/message/components/BlockDialog.vue
View File

@ -1,6 +1,6 @@
<template>
<from-bottom-dialog
page-id="home-index"
page-id="ChatDetail"
v-model="modelValue"
:show-heng-gang="false"
height="20rem"

21
src/pages/people/components/People.vue
View File

@ -18,20 +18,20 @@
<div class="right">
<!-- 他关注我 -->
<template v-if="people.type === RELATE_ENUM.FOLLOW_ME">
<div class="l-button red">回关</div>
<div class="l-button red" @click="$emit('follow')">回关</div>
</template>
<!-- 我关注他 -->
<template v-if="people.type === RELATE_ENUM.FOLLOW_HE">
<div class="l-button">已关注</div>
<div class="l-button" @click="$emit('unfollow')">已关注</div>
</template>
<!-- 相互关注-->
<template v-if="people.type === RELATE_ENUM.FOLLOW_EACH_OTHER">
<div class="l-button">相互关注</div>
<div class="l-button" @click="$emit('unfollow')">互相关注</div>
</template>
<!-- 关注请求-->
<template v-if="people.type === RELATE_ENUM.REQUEST_FOLLOW">
<div class="l-button ">忽略</div>
<div class="l-button red">通过</div>
<div class="l-button " @click="$emit('ignore')">忽略</div>
<div class="l-button red" @click="$emit('agree')">通过</div>
</template>
</div>
</template>
@ -42,8 +42,14 @@
<div class="detail">可能认识的人</div>
</div>
<div class="right">
<div class="l-button" @click="$emit('remove')">移除</div>
<div class="l-button red">关注</div>
<template v-if="people.type === RELATE_ENUM.RECOMMEND">
<div class="l-button" @click="$emit('remove')">移除</div>
<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>
</div>
</template>
@ -91,6 +97,7 @@ export default {
return {
showPopover: false,
RELATE_ENUM: {
RECOMMEND: -1,//推荐
FOLLOW_ME: 1,//只关注我
FOLLOW_EACH_OTHER: 2,//互相关注
FOLLOW_HE: 3,//我关注他

179
src/pages/people/components/Peoples.vue Normal file
View File

@ -0,0 +1,179 @@
<template>
<div id="Peoples">
<transition-group :name="loading?'':'list-complete'" tag="div" class="people-wrapper">
<People v-for="(item,index) in localList"
:key="item.id"
:people="item"
@remove="remove(index)"
@follow="follow(index)"
@unfollow="unfollow(index)"
@agree="agree(index)"
@ignore="ignore(index)"
:mode="mode"/>
</transition-group>
<from-bottom-dialog
page-id="Fans"
v-model="isShowUnfollow"
mode="white"
mask-mode="dark"
:show-heng-gang="false"
>
<div class="unfollow-dialog">
<div class="notice">确认取消关注?</div>
<div class="row" @click="noLook">不看TA</div>
<div class="row red" @click="confirmUnfollow">取消关注</div>
<div class="space"></div>
<div class="row" @click="cancel">取消</div>
</div>
</from-bottom-dialog>
</div>
</template>
<script>
import People from "./People";
import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
export default {
name: "Peoples",
components: {
FromBottomDialog,
People
},
props: {
list: {
type: Array,
default: []
},
mode: {
type: String,
default: 'fans'
},
loading: {
type: Boolean,
default: false
}
},
data() {
return {
isShowUnfollow: false,
currentIndex: -1
}
},
computed: {
localList: {
get() {
return this.list
},
set(newVal) {
this.$emit('update:list', newVal)
}
}
},
created() {
},
methods: {
remove(index) {
this.$notice('将不会再为你推荐该用户')
this.localList.splice(index, 1)
},
follow(index) {
if (this.mode === 'recommend') {
this.localList[index].type = this.RELATE_ENUM.FOLLOW_HE
}
if (this.mode === 'fans') {
if (this.localList[index].type === this.RELATE_ENUM.FOLLOW_ME) {
this.localList[index].type = this.RELATE_ENUM.FOLLOW_EACH_OTHER
}
}
},
unfollow(index) {
if (this.mode === 'recommend') {
this.localList[index].type = this.RELATE_ENUM.RECOMMEND
}
if (this.mode === 'fans') {
this.isShowUnfollow = true
this.currentIndex = index
}
},
agree(index ) {
this.localList[index].type = this.RELATE_ENUM.FOLLOW_ME
},
ignore(index ) {
this.localList.splice(index, 1)
},
confirmUnfollow() {
this.localList[this.currentIndex].type = this.RELATE_ENUM.FOLLOW_ME
this.cancel()
},
cancel() {
this.isShowUnfollow = false
this.currentIndex = -1
},
noLook() {
this.isShowUnfollow = false
this.$showConfirmDialog(
'确认不看 TA?',
'确认后，将不再为你推荐对方的作品，你可以在对方主页随时恢复。',
'gray',
() => {
this.$notice('设置成功')
},
() => {
},
'不看 TA'
)
}
}
}
</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;
}
.people-wrapper {
position: relative;
}
.unfollow-dialog {
color: black;
.notice {
color: @second-text-color;
font-size: 1.2rem;
height: 4rem;
display: flex;
justify-content: center;
align-items: center;
}
.row {
height: 5rem;
display: flex;
justify-content: center;
align-items: center;
border-top: 1px solid #f1f1f1;
&:nth-last-child(1) {
border-top: none;
}
&.red {
color: @primary-btn-color;
}
}
.space {
height: 1rem;
background: whitesmoke;
}
}
</style>

9
src/utils/mixin.js
View File

@ -33,7 +33,14 @@ export default {
},
data() {
return {
SUCCESS: 200
SUCCESS: 200,
RELATE_ENUM: {
RECOMMEND: -1,//推荐
FOLLOW_ME: 1,//只关注我
FOLLOW_EACH_OTHER: 2,//互相关注
FOLLOW_HE: 3,//我关注他
REQUEST_FOLLOW: 4//关注请求
}
}
},
methods: {