fix
This commit is contained in:
X1627315083
156
src/component/Account/followFans/fans.vue
Normal file
156
src/component/Account/followFans/fans.vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="account_fans">
|
||||
<div class="account_generalMessage_title modal_title_text">
|
||||
<span class="account_generalMessage_title_seach">
|
||||
<input type="text" @keydown.enter="searchFollowFansList" class="search_input" v-model="getListData.seachContent">
|
||||
<div class="search_icon_block" @click="searchFollowFansList">
|
||||
<i class="icon iconfont icon-sousuo"></i>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="account_generalMessage_center modal_title_text">
|
||||
<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id">
|
||||
<div class="account_generalMessage_item_right">
|
||||
<div class="account_generalMessage_item_right_img">
|
||||
<img :src="item.avatar" alt="">
|
||||
</div>
|
||||
<div class="account_generalMessage_item_right_title">
|
||||
<div class="">{{ item.senderUserName }}</div>
|
||||
<div class="modal_title_text_intro">{{ item.createTime }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account_generalMessage_item_left">
|
||||
<div v-if="item?.isFollow == 0" @click.stop="setFollow(item)" >{{$t('newScaleImage.Follow')}}</div>
|
||||
<div v-else @click.stop="setFollow(item)" >{{$t('newScaleImage.Unfollow')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && getListData.isNoData">
|
||||
没有任何信息~
|
||||
</div>
|
||||
<div class="page_loading_box" v-show="!getListData.isNoData">
|
||||
<span class="page_loading" ref="loadingDom" v-show="!getListData.isShowMark"></span>
|
||||
<span v-show="getListData.isShowMark">
|
||||
<a-spin size="large" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useRouter,useRoute } from 'vue-router'
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { useStore } from "vuex";
|
||||
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
// emits:['setReadStatus','setAllmessage'],
|
||||
props:[''],
|
||||
setup(prop,{emit}) {
|
||||
const router = useRouter()
|
||||
const store = useStore();
|
||||
let accountFollofFans:any = reactive({
|
||||
getListData: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
seachContent:'',
|
||||
isNoData: false,
|
||||
isShowMark: false,
|
||||
},
|
||||
dataList:ref([
|
||||
|
||||
])
|
||||
})
|
||||
let loadingDom:any = ref(null)
|
||||
let searchFollowFansList = ()=>{
|
||||
accountFollofFans.getListData.page = 1
|
||||
getFollowFansList()
|
||||
}
|
||||
let getFollowFansList = ()=>{
|
||||
accountFollofFans.getListData.isShowMark = true
|
||||
let data = accountFollofFans.getListData
|
||||
Https.axiosPost(Https.httpUrls.porfolioGetFollowerList,data).then((rv)=>{
|
||||
if(rv){
|
||||
accountFollofFans.getListData.isShowMark = false
|
||||
if(rv.length == 0) {
|
||||
accountFollofFans.getListData.isNoData = true
|
||||
return
|
||||
}
|
||||
accountFollofFans.dataList = rv
|
||||
}
|
||||
}).catch(() => {
|
||||
accountFollofFans.getListData.isShowMark = false
|
||||
accountFollofFans.getListData.isNoData = true
|
||||
})
|
||||
}
|
||||
|
||||
onMounted (()=>{
|
||||
accountFollofFans.getListData.isNoData = false
|
||||
accountFollofFans.getListData.page = 0
|
||||
new IntersectionObserver(
|
||||
(entries, observer) => {
|
||||
// 如果不是相交，则直接返回
|
||||
// console.log(entries[0]);
|
||||
if (!entries[0].intersectionRatio) return;
|
||||
accountFollofFans.getListData.page+=1
|
||||
getFollowFansList()
|
||||
},
|
||||
// { root:worksPage }
|
||||
).observe(loadingDom.value);
|
||||
})
|
||||
return{
|
||||
...toRefs(accountFollofFans),
|
||||
searchFollowFansList,
|
||||
getFollowFansList,
|
||||
loadingDom,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.account_fans{
|
||||
width: 100%;
|
||||
.account_generalMessage_center{
|
||||
.account_generalMessage_item{
|
||||
.account_generalMessage_item_right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.account_generalMessage_item_right_img{
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
margin-right: 2rem;
|
||||
cursor: pointer;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.account_generalMessage_item_left{
|
||||
div{
|
||||
padding: .5rem 2rem;
|
||||
border-radius: 4rem;
|
||||
border: 2px solid #e9eaec;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.account_generalMessage_item:hover{
|
||||
background: #ffffff;
|
||||
}
|
||||
.account_generalMessage_item:last-child{
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
157
src/component/Account/followFans/follow.vue
Normal file
157
src/component/Account/followFans/follow.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<template>
|
||||
<div class="account_follow">
|
||||
<div class="account_generalMessage_title modal_title_text">
|
||||
<span class="account_generalMessage_title_seach">
|
||||
<input type="text" @keydown.enter="searchFollowFansList" class="search_input" v-model="getListData.seachContent">
|
||||
<div class="search_icon_block" @click="searchFollowFansList">
|
||||
<i class="icon iconfont icon-sousuo"></i>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div class="account_generalMessage_center modal_title_text">
|
||||
<div class="account_generalMessage_item" v-for="item in dataList" :key="item.id">
|
||||
<a-badge :dot="item.isRead == 0"></a-badge>
|
||||
<div class="account_generalMessage_item_right">
|
||||
<div class="account_generalMessage_item_right_img">
|
||||
<img :src="item.senderUserAvatar" alt="">
|
||||
</div>
|
||||
<div class="account_generalMessage_item_right_title">
|
||||
<div class="">{{ item.senderUserName }}</div>
|
||||
<div class="modal_title_text_intro">{{ item.createTime }} 关注了你</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account_generalMessage_item_left">
|
||||
<div v-if="item?.isFollow == 0" @click.stop="setFollow(item)" >{{$t('newScaleImage.Follow')}}</div>
|
||||
<div v-else @click.stop="setFollow(item)" >{{$t('newScaleImage.Unfollow')}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="account_generalMessage_item" style="justify-content: center;" v-if="dataList.length == 0 && getListData.isNoData">
|
||||
没有任何信息~
|
||||
</div>
|
||||
<div class="page_loading_box" v-show="!getListData.isNoData">
|
||||
<span class="page_loading" ref="loadingDom" v-show="!getListData.isShowMark"></span>
|
||||
<span v-show="getListData.isShowMark">
|
||||
<a-spin size="large" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,computed,ref,reactive,nextTick,toRefs,createVNode, onMounted} from 'vue'
|
||||
import { Https } from "@/tool/https";
|
||||
import { useRouter,useRoute } from 'vue-router'
|
||||
import { Modal,message } from 'ant-design-vue';
|
||||
import { useStore } from "vuex";
|
||||
import { setCookie, getCookie, WriteCookie } from "@/tool/cookie";
|
||||
import { useI18n } from 'vue-i18n'
|
||||
export default defineComponent({
|
||||
components:{
|
||||
},
|
||||
// emits:['setReadStatus','setAllmessage'],
|
||||
props:[''],
|
||||
setup(prop,{emit}) {
|
||||
const router = useRouter()
|
||||
const store = useStore();
|
||||
let accountFollofFans = reactive({
|
||||
getListData: {
|
||||
page: 1,
|
||||
size: 10,
|
||||
seachContent:'',
|
||||
isNoData: false,
|
||||
isShowMark: false,
|
||||
},
|
||||
dataList:ref([
|
||||
|
||||
])
|
||||
})
|
||||
let loadingDom:any = ref(null)
|
||||
let searchFollowFansList = ()=>{
|
||||
accountFollofFans.getListData.page = 1
|
||||
getFollowFansList()
|
||||
}
|
||||
let getFollowFansList = ()=>{
|
||||
accountFollofFans.getListData.isShowMark = true
|
||||
let data = accountFollofFans.getListData
|
||||
Https.axiosPost(Https.httpUrls.porfolioGetFolloweeList,data).then((rv)=>{
|
||||
if(rv){
|
||||
accountFollofFans.getListData.isShowMark = false
|
||||
if(rv.length == 0) {
|
||||
accountFollofFans.getListData.isNoData = true
|
||||
return
|
||||
}
|
||||
accountFollofFans.dataList = rv
|
||||
}
|
||||
}).catch(() => {
|
||||
accountFollofFans.getListData.isShowMark = false
|
||||
accountFollofFans.getListData.isNoData = true
|
||||
})
|
||||
}
|
||||
|
||||
onMounted (()=>{
|
||||
accountFollofFans.getListData.isNoData = false
|
||||
accountFollofFans.getListData.page = 0
|
||||
new IntersectionObserver(
|
||||
(entries, observer) => {
|
||||
// 如果不是相交，则直接返回
|
||||
// console.log(entries[0]);
|
||||
if (!entries[0].intersectionRatio) return;
|
||||
accountFollofFans.getListData.page+=1
|
||||
getFollowFansList()
|
||||
},
|
||||
// { root:worksPage }
|
||||
).observe(loadingDom.value);
|
||||
})
|
||||
return{
|
||||
...toRefs(accountFollofFans),
|
||||
searchFollowFansList,
|
||||
getFollowFansList,
|
||||
loadingDom,
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.account_follow{
|
||||
width: 100%;
|
||||
.account_generalMessage_center{
|
||||
.account_generalMessage_item{
|
||||
.account_generalMessage_item_right{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.account_generalMessage_item_right_img{
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
margin-right: 2rem;
|
||||
cursor: pointer;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.account_generalMessage_item_left{
|
||||
div{
|
||||
padding: .5rem 2rem;
|
||||
border-radius: 4rem;
|
||||
border: 2px solid #e9eaec;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
.account_generalMessage_item:hover{
|
||||
background: #ffffff;
|
||||
}
|
||||
.account_generalMessage_item:last-child{
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user