store-new/pagesA/pages/introduce-list/introduce-list.vue

<template>
	<view class="user_list">
		<view class="search flexB">
			<view class="inp flexB">
				<text class="iconfont iconsearch"></text>
				<input type="text" v-model="searchName" placeholder="介绍人昵称/手机号" maxlength="11" @input="getVal" />
				<text class="iconfont iconguanbi1" @click="(searchName = ''), getList()"></text>
			</view>
			<view class="search_btn" @click="search">查询</view>
		</view>
		<view class="scroll">
			<scroll-view scroll-y="true">
				<view class="list">
					<view class="list_con flexB" v-for="(item,idx) in userList" :key="item.id"
						@click="checked(item,idx)">
						<view>
							<text style="font-size:32rpx;font-weight: 600;">{{ item.nickname|getName(18) }}</text>
							<view style="font-size:28rpx;margin-top:10rpx;">{{ item.phone }}</view>
						</view>
						<view class="check_box">
							<image src="../../../static/imgs/shop/checked.png" v-if="item.isChecked"></image>
							<image src="../../../static/imgs/shop/uncheck.png" v-else></image>
						</view>
					</view>
				</view>
				<view class="noData" v-if="userList.length == 0">
					<image src="/static/imgs/default/no_record.png"></image>
					<view>暂无用户信息~</view>
				</view>
			</scroll-view>
		</view>
		<view class="pop flexCC" v-if="showPop">
			<view class="pop_con">
				<view class="hint">
					<image src="../../../static/imgs/shop/hint_icon.png" class="hint_icon"></image>
					<view class="title">确认信息</view>
				</view>

				<view class="con">
					<view>昵称：{{userInfo.nickname}}</view>
					<view style="margin-top:14rpx">手机号：{{userInfo.phone}}</view>
				</view>
				<view class="btn_box flexB">
					<view class="flexC" @click="showPop=false">取消</view>
					<view class="flexC" @click="toBind">确认绑定</view>
				</view>
			</view>
		</view>
		<view class="add_new flexC" @click="skipAdd">+新增介绍人</view>
	</view>
</template>

<script>
	import {
		getAllRecomer,
		bindRecomer,
		editBindRecomer
	} from '@/apis/shop.js';
	export default {
		data() {
			return {
				userList: [], //下级经销商列表
				searchName: '', //查找内容
				curId: '', //当前选择的用户id
				user: '', //用户的相关信息
				isShare: '',
				order_id: '',
				order_no: '',
				showPop: false,
				userInfo: '',
				remark: ''
			};
		},
		onLoad(ops) {
			this.order_id = ops.order_id
			this.order_no = ops.order_no
			if (ops.remark) {
				this.remark = ops.remark
			}


		},
		onShow() {
			this.getList();
		},
		methods: {
			//跳转到添加用户
			skipAdd() {
				uni.navigateTo({
					url: '../introduce/introduce?order_id=' + this.order_id + '&&order_no=' + this.order_no +
						'&remark=' + this.remark
				});
			},
			// 绑定介绍人
			toBind() {
				let http = this.remark ? editBindRecomer : bindRecomer
				let data = this.remark ? {
					id: this.userInfo.id,
					order_id: this.order_id,
					remark: this.remark
				} : {
					id: this.userInfo.id,
					order_id: this.order_id,

				};
				http(data).then(res => {
					if (res.code === 200) {
						this.showPop = false
						uni.showModal({
							content: this.remark ? '更换介绍人成功' : '绑定介绍人成功',
							showCancel: false,
							success: suc => {
								uni.reLaunch({
									url: '../../../pages/order-info/order-info?order_no=' +
										this.order_no
								})
							}
						})
					} else {
						uni.showModal({
							content: res.data,
							showCancel: false
						})
					}
				})
			},
			/*输入框清空时重新加载列表*/
			getVal(e) {
				if (e.detail.value == '') {
					this.getList();
				}
			},
			/*选择某个介绍人*/
			checked(item, idx) {
				let list = this.userList
				for (let i = 0; i < list.length; i++) {
					if (i === idx) {
						list[i].isChecked = true
					} else {
						list[i].isChecked = false
					}
				}
				this.userInfo = item
				this.showPop = true
			},
			/*获取介绍人列表*/
			getList() {
				uni.showLoading({
					title: '加载中...'
				})
				getAllRecomer({
					search_name: this.searchName
				}).then(res => {
					if (res.code == 200) {
						let data = res.data
						data.map(i => {
							this.$set(i, 'isChecked', false)
						})
						this.userList = data
					} else {
						uni.showModal({
							content: res.data,
							showCancel: false
						});
					}
					uni.hideLoading()
				}).catch(() => {
					uni.hideLoading()
				})
			},
			/*点击查询按钮*/
			search() {
				if (!this.searchName) {
					uni.showModal({
						content: '请输入搜索内容',
						showCancel: false
					});
					return false;
				}
				this.getList();
			},
		}
	};
</script>
<style lang="scss">
	.user_list {
		width: 100vw;
		min-height: 100%;
		background-color: #f9f9fb;
		position: relative;

		.search {
			width: 100%;
			height: 10vh;
			background-color: #fff;
			padding: 0 30rpx;
			box-sizing: border-box;

			.inp {
				height: 80rpx;
				border: 2rpx solid #cccccc;
				border-radius: 44rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				input {
					width: 80%;
					height: 100%;
				}

				.iconfont {
					font-size: 50rpx;
					color: #ccc;
				}
			}

			.query {
				margin-right: 30rpx;
				width: 120rpx;
				height: 56rpx;
				text-align: center;
				line-height: 56rpx;
				background: linear-gradient(94deg, #a080ff 0%, #5d6bff 100%);
				font-size: 28rpx;
				color: #fff;
				border-radius: 44rpx;
			}
		}

		.scroll {
			height: 84vh;

			scroll-view {
				height: 100%;
			}

			.list {
				margin-top: 30rpx;
				padding-bottom: 120rpx;

				.list_con {
					width: 690rpx;
					height: 128rpx;
					background: #fff;
					margin: 0 auto 30rpx;
					background-color: #fff;
					padding: 0 30rpx;
					box-sizing: border-box;
					border-radius: 25rpx;

					image {
						height: 36rpx;
						width: 36rpx;
					}

					.check_box {
						image {
							width: 44rpx;
							height: 44rpx;
						}
					}

				}
			}
		}

		.btn_box {
			width: 80%;
			margin: 0 auto;

			view {
				width: 260rpx;
				height: 78rpx;
				line-height: 78rpx;
				font-size: 32rpx;
				border-radius: 44rpx;
			}

			.after_btn {
				border: 2rpx solid $base-color;
			}
		}

		.hint {
			width: 100%;
			text-align: center;
			padding: 20rpx 0 0;
			color: $base-color;
			font-size: 30rpx;
		}
	}

	.add_new {
		width: 100%;
		height: 100rpx;
		background: $base-line-bg;
		color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		font-size: 30rpx;
	}

	.pop {
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.7);
		z-index: 9999999;

		.hint_icon {
			width: 183rpx;
			height: 135rpx;
			position: relative;
			margin-top: -85rpx;
		}

		.pop_con {
			width: 648rpx;
			height: 442rpx;
			background: #fff;
			border-radius: 26rpx;
			display: flex;
			flex-direction: column;
			// align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;

			.hint {
				width: 100%;
				text-align: center;

				.title {
					font-size: 36rpx;
					font-weight: bold;
					margin-top: 22rpx;
				}

			}


			.con {
				min-height: 120rpx;
				margin: 20rpx 0 20rpx;
				font-size: 34rpx;
			}

			.btn_box {
				width: 100%;

				view {
					width: 270rpx;
					height: 88rpx;
					background: #FFF4F3;
					border: 2rpx solid #FB231F;
					border-radius: 44rpx;
					color: $base-color;
					font-size: 32rpx;
				}

				view:last-child {
					background: $base-line-bg;
					color: #fff;
				}

			}

		}

		.iconfont {
			color: #fff;
			font-size: 60rpx;
			margin-top: 30rpx;
		}
	}
</style>