yanzong_qianduan/pages/news/user/vip.vue

<template>
	<view class="user">
		<view class="search">
			<!-- <view class="box">
			  <image src="/static/news/icon-search.png"></image>
			  <input type="search" placeholder="商品名称/编码" />
		  </view> -->
			<view class="" style="padding: 0 30rpx;">
				<u-search style='margin: 0 30rpx;' placeholder="输入用户昵称/姓名/手机号" @search="searchhandle" shape="round"
					:show-action="false" height="60" bg-color="#fafafa" v-model="keyword"></u-search>
			</view>
			<view class="store-sort" v-if="type == 1">
				<view class="sort-item" :class="{ active: sortType === 'all' }" @click="handleSortType('all','')">
					<text>全部</text>
				</view>
				<view class="sort-item" :class="{ active: sortType === 'no' }" @click="handleSortType('no',0)">
					<text>无身份</text>
				</view>
				<view class="sort-item" :class="{ active: sortType === 'tourist' }"
					@click="handleSortType('tourist',10)">
					<text>游客</text>
				</view>
				<view class="sort-item" :class="{ active: sortType === 'vip' }" @click="handleSortType('vip',20)">
					<text>会员</text>
				</view>
			</view>
		</view>
		<view class="user-bd">
			<view class="li" v-for="i in list" :key="i.user_id" @click="goVipDetails(i)">
				<view class="a">
					<view class="l">
						<image :src="i.avatar_url?i.avatar_url:$picUrl+'/static/news/avater.png'"></image>
					</view>
					<view class="r">
						<view class="m">
							<view class="n">{{i.nick_name}}</view>
							<view class="btn">{{i.user_type_text}}</view>

						</view>
						<view class="n">
							<view>
								<text>{{i.mobile}}</text>
								<image @click.stop="copyText(i.mobile)" :src="$picUrl+'/static/news/icon-copy.png'"
									style="margin:-4rpx 0 0 15rpx;"></image>
							</view>
							<image :src="$picUrl+'/static/news/tel.png'" @click.stop="makeCall(i.mobile)"></image>
						</view>
					</view>
				</view>
				<view class="b">
					<view class="l">余额(元）<text>¥{{i.balance?Number(i.balance):0}}</text></view>
					<view class="l" style="margin-left: 100rpx;">积分(分）<text>{{i.points?i.points:0}}</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as Vip from '@/api/user/vip'
	export default {
		data() {
			return {
				keyword: '',
				page: 1,
				total: 0,
				type: 3,
				list: [],
				title: '会员管理',
				sortType: 'all', // 排序类型
				user_type: '',
			};
		},
		methods: {
			// 切换排序方式
			handleSortType(newSortType, user_type) {
				const app = this
				app.user_type = user_type
				app.sortType = newSortType
				// 刷新列表数据
				this.list = []
				this.page = 1;
				app.getList()
			},
			searchhandle() {
				this.list = []
				this.page = 1;
				this.getList()

			},
			async getList() {
				let res = await Vip.getVipList({
					page: this.page,
					search: this.keyword,
					user_type: this.type == 1?this.user_type: 30,
				})
				console.log(res, "===")
				this.list = this.arrayUnique(this.list.concat(res.data.list.data),'user_id');
				this.total = res.data.list.total;
			},
			
			//数组对象去重
			arrayUnique(arr, name) {
			    var hash = {};
			    return arr.reduce(function (item, next) {
			        hash[next[name]]
			            ? ""
			            : (hash[next[name]] = true && item.push(next));
			        return item;
			    }, []);
			},
			copyText(text) {
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					},
					fail: () => {
						uni.showToast({
							title: '复制失败',
							icon: 'none'
						});
					}
				});
			},
			makeCall(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber, // 电话号码
					success: (res) => {},
					// 失败回调
					fail: (res) => {}
				});
			},
			goVipDetails(item) {
				let details = JSON.stringify(item)
				uni.navigateTo({
					url: "/pages/news/user/index?item=" + details + "&title=" + this.title
				})
			}
		},
		onLoad(option) {
			this.title = option.type==1?'会员管理':'分销管理'
			this.type = option.type
			uni.setNavigationBarTitle({
				title: this.title
			});
			this.list = []
			this.getList()
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getList()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.user {
		padding: 0 0 130rpx;
		overflow: hidden;

		.search {
			width: 750rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;

			// 排序组件
			.store-sort {
				position: sticky;
				top: var(--window-top);
				display: flex;
				padding: 20rpx 0;
				font-size: 28rpx;
				background: #fff;
				color: #000;
				z-index: 99;

				.sort-item {
					flex-basis: 25%;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 50rpx;

					&.active {
						color: #F34A40;
					}
				}

				.sort-item-price .price-arrow {
					margin-left: 20rpx;
					font-size: 24rpx;
					color: #000;

					.icon {
						&.active {
							color: #F34A40;
						}

						&.up {
							margin-bottom: -16rpx;
						}

						&.down {
							margin-top: -16rpx;
						}
					}

				}

			}
		}

		&-bd {
			padding: 0 28rpx;
			overflow: hidden;

			.li {
				padding: 0 28rpx;
				background-color: #FFFFFF;
				overflow: hidden;
				border-radius: 8rpx;
				margin-top: 18rpx;

				// &:first-child{
				// 	margin-top: 0;
				// }
				.a {
					display: flex;
					// align-items: flex-start;
					align-items: center;
					justify-content: space-between;
					padding: 15rpx 0 30rpx;
					border-bottom: 1px solid #F2F2F2;

					.l {
						width: 114rpx;
						height: 114rpx;
						margin-right: 25rpx;

						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.r {
						flex: 1;

						// width: 98rpx;
						// overflow: hidden;
						.m {
							// flex: 1;
							// max-width: 400rpx;
							// margin-right: 20rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.btn {
								// width: 98rpx;
								padding: 0 10rpx;
								height: 56rpx;
								line-height: 56rpx;
								background: #FFFFFF;
								border-radius: 3px 3px 3px 3px;
								border: 1px solid #FFA928;
								text-align: center;

								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #FFA928;

								&-on {
									border-color: #FFA928;
									color: #FFA928;
								}
							}
						}

						.n {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 20rpx;

							text {
								font-size: 28rpx;
								color: #454545;
							}

							image {
								width: 40rpx;
								height: 40rpx;
								margin-left: 10rpx;
								vertical-align: middle;
							}
						}


						// image{
						// 	display: block;
						// 	width: 30rpx;
						// 	height: 30rpx;
						// 	float: right;
						// 	margin-top: 20rpx;
						// 	margin-right: 20rpx;
						// }
					}

					// .m{
					// 	flex: 1;
					// 	max-width: 400rpx;
					// 	margin-right: 20rpx;
					// 	.n{
					// 		font-size: 28rpx;
					// 		font-weight: 400;
					// 		color: #545454;
					// 		height: 50rpx;
					// 		image{
					// 			width: 30rpx;
					// 			height: 30rpx;
					// 			margin-left: 10rpx;
					// 			vertical-align: middle;
					// 			margin-top: -1px;
					// 		}
					// 	}
					// }

				}

				.b {
					padding-top: 20rpx;
					padding-bottom: 20rpx;
					overflow: hidden;
					display: flex;
					align-items: center;

					.l {
						flex: 1;
						// text-align: center;
						font-size: 28rpx;
						font-weight: 400;
						color: #B1B1B1;
						margin-left: 140rpx;

						text {
							font-size: 28rpx;
							font-weight: 400;
							color: #454545;
							display: block;
							margin-top: 12rpx;
						}
					}
				}
			}
		}
	}
</style>