第一次提交

sub_pages/member/member.vue

@@ -0,0 +1,168 @@
+<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>