166 lines
4.1 KiB
Vue
166 lines
4.1 KiB
Vue
<template>
|
|
<view class="concerns">
|
|
<view class="tabs-top u-border-bottom">
|
|
<u-tabs ref="uTabs" :show-bar="false" :list="list" font-size="32" :current="current" @change="tabsChange" :is-scroll="false"
|
|
swiperWidth="750" active-color="#FF780F"></u-tabs>
|
|
</view>
|
|
<scroll-view v-if="current==0" scroll-y style="height: 100%;width: 100%;" class="store" @scrolltolower="onreachBottom">
|
|
<storeViwe ref="store"></storeViwe>
|
|
</scroll-view>
|
|
<scroll-view v-else scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
|
|
<view class="concerns-container">
|
|
<view v-for="(info, index) in daren" :key="index">
|
|
<view class="daren-item">
|
|
<image class="head" :src="info.friend_tomavatar" @click="toDetailsPage({ id: info.friend_tomid })"></image>
|
|
<text class="name" @click="toDetailsPage({ id: info.friend_tomid })">{{ info.friend_tomname || '' }}</text>
|
|
<view class="guanzhu" @click="changeType(info.friend_tomid)" v-if="info.friend_followstate == 1">取消关注</view>
|
|
</view>
|
|
</view>
|
|
<u-loadmore :status="loadStatus" bg-color="#FFFFFF" v-if="daren.length > 9" @loadmore="loadmore" />
|
|
</view>
|
|
<u-empty mode="list" v-if="!daren.length" color="#000" img-width="200" font-size="30" margin-top="200"></u-empty>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import storeViwe from './storeConcerns'
|
|
export default {
|
|
data() {
|
|
return {
|
|
list: [{ name: "商家" }, { name: "达人" }],
|
|
daren: [],
|
|
shangjia:[],
|
|
height: 0,
|
|
show: false,
|
|
current: 0,
|
|
page: 1,
|
|
loadStatus: 'loadmore',
|
|
timer: true,
|
|
}
|
|
},
|
|
components: {
|
|
storeViwe,
|
|
},
|
|
onShow() {
|
|
this.loadStatus = "loadmore"
|
|
this.page = 1
|
|
this.getPeopleList();
|
|
},
|
|
onLoad(){
|
|
this.setViewHeight();
|
|
},
|
|
methods: {
|
|
setViewHeight() {
|
|
const res = uni.getSystemInfoSync();
|
|
this.height = res.windowHeight - (res.windowWidth / 750 * 80) + 'px';
|
|
},
|
|
// tabs通知swiper切换
|
|
tabsChange(index) {
|
|
this.current = index;
|
|
},
|
|
// scroll-view到底部加载更多
|
|
onreachBottom() {
|
|
if(this.current == 0) this.$refs.loadmore();
|
|
else if(this.current == 1) this.loadmore();
|
|
},
|
|
loadmore() {
|
|
if(!this.timer) return false;
|
|
this.timer = false;
|
|
this.loadStatus = "loading";
|
|
this.page++;
|
|
this.getPeopleList({ load: 'loadmore' }).then(length => {
|
|
this.loadStatus = "nomore";
|
|
if(length == 0) this.page--;
|
|
}).catch(() => {
|
|
this.loadStatus = "nomore";
|
|
this.page--;
|
|
})
|
|
},
|
|
async getPeopleList({ load = 'reload' } = {}) {
|
|
const res = await this.$u.api.attentionMemberList({
|
|
role: 3,
|
|
page: this.page
|
|
})
|
|
this.timer = true;
|
|
if(res.errCode == 0) {
|
|
if(load == 'reload') this.daren = res.data.data;
|
|
else if(load == 'loadmore') this.daren.push(...res.data.data);
|
|
}
|
|
return res.data.data.length;
|
|
},
|
|
// 取消关注
|
|
changeType(id) {
|
|
// console.log(id);
|
|
this.$u.api.attentionMember({
|
|
member_id: id
|
|
}).then(res => {
|
|
this.$u.toast(res.message);
|
|
this.getPeopleList();
|
|
})
|
|
},
|
|
toDetailsPage(id) {
|
|
this.$u.route('pageB/details/index', {
|
|
id: id
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.concerns {
|
|
background-color: #FFFFFF;
|
|
.store {
|
|
background-color: #FFFFFF;
|
|
}
|
|
.concerns-container {
|
|
padding: 30rpx;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-left: -20rpx;
|
|
.daren-item{
|
|
width: 215rpx;
|
|
height: 282rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
overflow: hidden;
|
|
margin-left: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
.head{
|
|
width: 80rpx;
|
|
height: 80rpx;
|
|
border-radius: 50%;
|
|
margin-top: 24rpx;
|
|
background-color: #0f0;
|
|
}
|
|
.name{
|
|
font-size: 26rpx;
|
|
color: #333;
|
|
font-weight: 400;
|
|
margin-top: 23rpx;
|
|
}
|
|
.zhuangtai{
|
|
font-size:22rpx;
|
|
color: #999;
|
|
margin-top: 19rpx;
|
|
}
|
|
.guanzhu{
|
|
width: 130rpx;
|
|
height: 50rpx;
|
|
background-color: #EDEDED;
|
|
font-size: 26rpx;
|
|
line-height: 50rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
margin-top: 19rpx;
|
|
border-radius: 25rpx;
|
|
}
|
|
.action{
|
|
background: #f3f3f3;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |