zyronon
4 years ago
6 changed files with 226 additions and 25 deletions
@ -0,0 +1,179 @@
@@ -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> |
||||
Loading…
Reference in new issue