aishangjia-uniapp/sub_pages/dealer/offline/offline.vue

<template>
	<view class="container">
		<view class="search-wrapper">
			<u-cell :title="userTypeText" isLink :border="false" arrowDirection="down" @click="showUserType = true"></u-cell>
			<u-cell :title="userSexText" isLink :border="false" arrowDirection="down" @click="showUserSex = true"></u-cell>
		</view>
		<view class="user-list">
			<u-list @scrolltolower="scrolltolower">
				<view class="list">
					<u-list-item v-for="(item, index) in list" :key="index">
						<u-cell :title="`${item.nickname}`" :label="`ID：${item.userId}  粉丝：${item.id}`" isLink>
							<u-avatar slot="icon" size="50" :src="item.avatar"
								customStyle="margin: -3px 5px -3px 0"></u-avatar>
							<!-- <view solt="label">
								<text class="desc-text">{{ `ID：${item.userId}` }}</text>
								<text class="desc-text">{{ `粉丝：${item.id}` }}</text>
							</view> -->
							<view slot="right-icon" class="follow-btn" @click.stop="onFollow">
								<text v-if="item.gradeId == 3">线下普通会员</text>
								<text v-if="item.gradeId == 4">线下尊享会员</text>
							</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>
		<u-action-sheet :actions="userType" @select="onUserType"
			:show="showUserType"></u-action-sheet>
		<u-action-sheet :actions="userSex" @select="onUserSex"
			:show="showUserSex"></u-action-sheet>
	</view>
</template>

<script>
	import * as UserRefereeApi from '@/api/user-referee.js'

	const userId = uni.getStorageSync('userId')

	export default {
		data() {
			return {
				// 会员类型
				userType: [{
						name: '不限'
					},{
						name: '线下普通会员'
					},
					{
						name: '线下尊享会员'
					}
				],
				showUserType: false,
				// 会员性别
				userSex: [{
						name: '不限'
					},{
						name: '男'
					},
					{
						name: '女'
					}
				],
				showUserSex: false,
				// 会员列表
				list: [],
				where: {},
				page: 0,
				userTypeText: '全部单身会员',
				userSexText: '性别',
				// 控制onShow事件是否刷新订单列表
				canReset: false,
				disabled: false
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.where = options
			this.onRefreshList()
		},

		methods: {
			// 刷新会员列表
			onRefreshList() {
				const app = this
				app.where.page = app.page
				app.where.dealerId = userId
				app.where.offline = 1
				return new Promise((resolve, reject) => {
					UserRefereeApi.pageUserReferee(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(e) {
				console.log("e11: ", e);
			},
			onSearch() {
				this.list = []
				this.where.page = 1
				this.onRefreshList()
			},
			onUserType(e){
				console.log("e: ",e);
				this.userTypeText = e.name
				this.showUserType = false
				if(e.name == '线下普通会员'){
					this.where.gradeId = 3
				}
				if(e.name == '线下尊享会员'){
					this.where.gradeId = 4
				}
				this.onSearch()
			},
			onUserSex(e){
				console.log("e: ",e);
				this.userSexText = e.name
				this.showUserSex = false
				if(e.name == '男'){
					this.where.sex = 1
				}
				if(e.name == '女'){
					this.where.sex = 2
				}
				this.onSearch()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0rpx;
		background-color: #ffffff;
	}

	.search-wrapper {
		padding: 30rpx;
		display: flex;
		height: 64rpx;
	}

	.user-list {
		margin: 20rpx auto;
		.desc-text{
			margin-right:50rpx;
		}
	}

	.follow-btn {
		padding: 4rpx 20rpx;
		color: #ffffff;
		font-size: 26rpx;
		border-radius: 50rpx;
		margin-right: 10rpx;
		background: linear-gradient(#47076b, #8d1a50);

		image {
			width: 24rpx;
			height: 66rpx;
			margin-right: 6rpx;
		}
	}
</style>