169 lines
3.8 KiB
Vue
169 lines
3.8 KiB
Vue
<template>
|
|
<view class="container">
|
|
<u-sticky>
|
|
<view class="search-wrapper">
|
|
<u-search :showAction="true" border-color="#E8E8E8" actionText="搜索" :animation="false" v-model="where.keywords" @search="onSearch" :actionStyle="actionStyle"></u-search>
|
|
</view>
|
|
</u-sticky>
|
|
<view class="user-list">
|
|
<u-list :height="680" @scrolltolower="scrolltolower">
|
|
<view class="list">
|
|
<u-list-item v-for="(item, index) in list" :key="index">
|
|
<u-cell :title="`${item.userInfo.nickname}`" :label="`粉丝：${ item.userInfo.fans }`" isLink
|
|
@click="navTo('/sub_pages/member/detail/detail',{userId: item.userId})">
|
|
<u-avatar slot="icon" size="50" :src="item.userInfo.avatar"
|
|
customStyle="margin: -3px 5px -3px 0"></u-avatar>
|
|
<view slot="right-icon" @click.stop="onFollow(item.userId,index)">
|
|
<view v-if="item.follow" class="unfollow-btn">
|
|
<!-- <u-icon name="heart" color="#ffffff" :size="15"></u-icon> -->
|
|
<text>已关注</text>
|
|
</view>
|
|
<view v-else class="follow-btn">
|
|
<u-icon name="heart" color="#ffffff" :size="15"></u-icon>
|
|
<text>关注</text>
|
|
</view>
|
|
</view>
|
|
</u-cell>
|
|
</u-list-item>
|
|
<u-empty
|
|
v-if="list.length == 0"
|
|
mode="search"
|
|
icon="http://cdn.uviewui.com/uview/empty/search.png"
|
|
>
|
|
</u-empty>
|
|
</view>
|
|
</u-list>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import * as UserProfileApi from '@/api/love-user-profile.js'
|
|
import * as UserFollowApi from '@/api/user-follow.js'
|
|
|
|
const userId = uni.getStorageSync('userId')
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
list: [],
|
|
page: 1,
|
|
where: {
|
|
showProfile: true
|
|
},
|
|
// 控制onShow事件是否刷新订单列表
|
|
canReset: false,
|
|
disabled: false,
|
|
actionStyle: {
|
|
background: '#8b004c',
|
|
color: '#ffffff',
|
|
padding: '12rpx 16rpx',
|
|
borderRadius: '50rpx'
|
|
},
|
|
}
|
|
},
|
|
|
|
/**
|
|
* 生命周期函数--监听页面加载
|
|
*/
|
|
onLoad(options) {
|
|
this.where = options
|
|
this.onRefreshList()
|
|
},
|
|
|
|
methods: {
|
|
// 刷新会员列表
|
|
onRefreshList() {
|
|
const app = this
|
|
app.where.page = app.page
|
|
app.where.showFollow = true
|
|
app.where.showProfile = true
|
|
return new Promise((resolve, reject) => {
|
|
UserProfileApi.pageUserProfile(app.where)
|
|
.then(result => {
|
|
const list = result.data.list
|
|
// 合并新数据
|
|
app.list = app.list.concat(list)
|
|
if(result.data.count > app.list.length){
|
|
app.canReset = true
|
|
}else{
|
|
app.canReset = false
|
|
}
|
|
resolve(list)
|
|
})
|
|
})
|
|
},
|
|
scrolltolower(e){
|
|
console.log("e: ",e);
|
|
},
|
|
navTo(url,userId){
|
|
this.$push(url,userId)
|
|
},
|
|
onFollow(shopId,index){
|
|
if(userId == null || userId == 1101){
|
|
this.$push('pages/login/index')
|
|
return false
|
|
}
|
|
this.list[index].follow = !this.list[index].follow
|
|
UserFollowApi.addFollow({shopId}).then(res => {
|
|
this.$success(res.message)
|
|
})
|
|
},
|
|
onSearch(){
|
|
this.list = []
|
|
this.where.page = 1
|
|
this.onRefreshList()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.search-wrapper {
|
|
display: flex;
|
|
height: 64rpx;
|
|
margin-bottom: 30rpx;
|
|
background-color: #ffffff;
|
|
|
|
padding: 20rpx;
|
|
}
|
|
.user-list{
|
|
padding: 0 20rpx;
|
|
}
|
|
|
|
.follow-btn {
|
|
padding: 4rpx 20rpx;
|
|
color: #ffffff;
|
|
font-size: 26rpx;
|
|
border-radius: 50rpx;
|
|
margin-right: 10rpx;
|
|
display: flex;
|
|
background: linear-gradient(#47076b, #8d1a50);
|
|
image {
|
|
width: 24rpx;
|
|
height: 66rpx;
|
|
margin-right: 6rpx;
|
|
}
|
|
}
|
|
|
|
.unfollow-btn {
|
|
padding: 4rpx 20rpx;
|
|
color: #ffffff;
|
|
font-size: 26rpx;
|
|
border-radius: 50rpx;
|
|
margin-right: 10rpx;
|
|
display: flex;
|
|
background: linear-gradient(#b3b3b3, #cccccc);
|
|
image {
|
|
width: 24rpx;
|
|
height: 66rpx;
|
|
margin-right: 6rpx;
|
|
}
|
|
}
|
|
|
|
</style>
|