CBB3/pages/gz/addBind.vue

<template>
	<view class="container">
		<view class="app-body">
			<!--关键词搜索-->
			<view class="sreach fx-r fx-bc fx-ac">
				<image class="icon" src="/static/img/tb-seach.png"></image>
				<input type="text" v-model="keyword" placeholder="请输入用户UID" placeholder-style="color: #B3B3B3;" />
				<view class="fx-g1"></view>
				<view class="search-btn" @tap="tapSerach">搜索</view>
			</view>
			<view class="inputForm">
				<view class="flex inputBox">
					<view class="">会员1</view>
					<input type="text" v-model="uid1" placeholder="请输入用户UID" placeholder-style="color: #B3B3B3;" />
					<image src="/static/img/m_close.png" style="width: 30rpx;height: 30rpx;" @click="uid1 = ''"></image>
				</view>
				<view class="flex inputBox">
					<view class="">会员2</view>
					<input type="text" v-model="uid2" placeholder="请输入用户UID" placeholder-style="color: #B3B3B3;" />
					<image src="/static/img/m_close.png" style="width: 30rpx;height: 30rpx;" @click="uid2 = ''"></image>
				</view>
			</view>
		</view>
		<view class="listBox">
			<view class="listTop flex">
				<view class="tpls" style="width: 25%;">uid</view>
				<view class="tpls" style="width: 25%;">头像</view>
				<view class="tpls" style="width: 25%;">昵称</view>
				<view class="tpls" style="width: 25%;">操作</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view scroll-y class="scroll" style="height: calc(100vh - 260px)"
				@scrolltolower="loadMoreData">
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<scroll-view scroll-y class="scroll" style="height: calc(100vh - 300px)"
				@scrolltolower="loadMoreData">
			<!-- #endif -->
				<view class="sc-body">
					<view class="item flex" v-for="(item,index) in listAr" :key="index">
						<view class="items" style="width: 25%;">{{item.uid}}</view>
						<view class="items" style="width: 25%;">
							<image :src="item.avatar" style="width: 80rpx;height: 80rpx;border-radius: 100%;background: #999;"></image>
						</view>
						<view class="items nickname" style="width:25%;">{{item.nickname}}</view>
						<view class="items" style="width: 25%;" @click="checkTap(item.uid)">
							<image src="/static/img/radio_buttons_btn.png" style="width: 40rpx;height: 40rpx;"></image>
						</view>
					</view>
					<view v-if="listAr.length > 0">
						<view class="loading fx-r fx-ac fx-bc" v-if="page.isFrite && !page.isFoot">
							<image src="/static/img/xloading.png"></image>
							<text>正在载入更多...</text>
						</view>
						<view class="loading complete" :hidden="!page.isFoot">已加载全部</view>
					</view>
					<view v-if="listAr.length == 0 && isFirst">
						<uv-empty mode="data" icon="/static/img/no-empty.png"></uv-empty>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="addBtn" @tap="addBind()">确认绑定</view>
	</view>
</template>
<script>
	export default {
		data() {
			return{
            uid1:'',
				uid2:'',
				keyword:'',
				listAr:[],
				isFirst: false,
				page: {
					isFirst: false,
					isLoad: false,
					isFoot: false,
					page: 1
				},
			};
		},
		onLoad() {
			this.getList(true)
		},
		onShow() {},
		methods: {
			addBind(){
				let obj = this
				uni.showModal({
					title: '提示',
					content: '你确定要绑定吗？',
					success: function (res) {
						if (res.confirm) {
							uni.showLoading({
								title: '绑定中...'
							});
							obj.request.post("bind",{
								uid1:obj.uid1,
								uid2: obj.uid2,
							}).then(res => {
								uni.showModal({
									title: '系统提示',
									content: res.msg,
									showCancel: false
								});
								obj.uid1 = ''
								obj.uid2 = ''
								uni.hideLoading();
							}).catch(res=>{
								console.log(res);
								uni.hideLoading();
								uni.showModal({
									title: '系统提示',
									content: '加载失败，返回在尝试',
									showCancel: false
								});
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			checkTap(uid){
				if(this.uid1 == ''){
					this.uid1 = uid
				}else{
					this.uid2 = uid
				}
				
			},
			tapSerach: function() {
				this.getList(true);
			},
			getList(isPull = false){
				if (this.page.isLoad) return;
				this.page.isLoad = true;
				if (isPull) {
					this.page.page = 1;
					this.page.isLoad = false;
					this.page.isFoot = false;
				}
				uni.showLoading({
					title: '获取数据中..'
				});
				this.request.post("gzUserList",{
					keyword:this.keyword,//手机号
					page: this.page.page,
				}).then(res => {
					uni.hideLoading();
					this.page.isFirst = true;
					this.page.isLoad = false;
					this.isFirst = true;
					if (isPull) {
						this.listAr = res.data.list;
					} else {
						this.listAr = this.listAr.concat(res.data.list);
					}
					//是否到底
					if (res.data.list.length != res.data.pageSize) {
						this.page.isFoot = true;
					}
				}).catch(res=>{
					console.log(res);
					uni.hideLoading();
					uni.showModal({
						title: '系统提示',
						content: '加载失败，返回在尝试',
						showCancel: false
					});
				});
			},
			loadMoreData() {
				if (this.page.isFoot || this.page.isLoad) {
					return;
				}
				this.page.page++;
				this.getList();
			},
		},
	};
</script>
<style lang="scss" scoped>
	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.flex_item {
		display: flex;
		align-items: center;
	}
	.app-body {
		padding: 0px 20rpx 20rpx 20rpx;
		background: #fff;
		.sreach {
			background: #eee;
			border-radius: 32rpx;
			padding: 16rpx 32rpx;
			.icon {
				width: 46rpx;
				height: 46rpx;
			}
			input {
				width: calc(100% - 46rpx - 16rpx - 50px);
				font-size: 16px;
			}
			.search-btn {
				font-size: 14px;
				color: #FF4C4C;
			}
		}
	}
	.inputForm{
		background: #fff;
		font-size: 24rpx;
		.inputBox{
			padding-top: 25rpx;
			.btns{
				color: red;
			}
		}
	}
	.addBtn{
		position: fixed;
		background: linear-gradient(89deg, #FF332C, #FF6030);
		border-radius: 10rpx;
		bottom: 25rpx;
		width: 90%;
		line-height: 80rpx;
		font-weight: bold;
		font-size: 29rpx;
		color: #FFFFFF;
		margin: 0 5%;
		text-align: center;
	}
	.listBox{
		.listTop{
			padding: 25rpx;
			background: #F7C4C4;
			margin-bottom: 25rpx;
			.tpls{
				text-align: center;
			}
		}
	}
	.item{
		.items{
			text-align: center;
		}
		.nickname{
			font-size: 24rpx;
		}
	}
</style>