CBB3/pages/gz/bindIndex.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="uid" placeholder="请输入用户UID" placeholder-style="color: #B3B3B3;" />
				<view class="fx-g1"></view>
				<view class="search-btn" @tap="tapSerach">搜索</view>
			</view>
		</view>
		<!-- #ifdef APP-PLUS -->
		<scroll-view scroll-y class="scroll" style="height: calc(100vh - 150px)"
			@scrolltolower="loadMoreData">
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<scroll-view scroll-y class="scroll" style="height: calc(100vh - 190px)"
			@scrolltolower="loadMoreData">
		<!-- #endif -->
			<view class="sc-body">
				<view class="item flex" v-for="(item,index) in listAr" :key="index">
					<view class="itemTpl">
						<view class="tpl"><text>归属馆:</text>{{item.gz_name}}</view>
						<view class="tpl"><text>ID号1:</text>{{item.u1_uid}}<text style="padding-left: 25rpx;">手机号1:</text>{{item.u1_mobile}}</view>
						<view class="tpl"><text>ID号2:</text>{{item.u2_uid}}<text style="padding-left: 25rpx;">手机号3:</text>{{item.u2_mobile}}</view>
					</view>
					<view class="imageBox">
						<image src="../../static/image/img18.png" style="width: 42rpx;height: 42rpx;"></image>
						<view class="delBtn" @tap="delBind(item.id)">解绑</view>
					</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 class="addBtn" @tap="addBind()">+添加互助</view>
	</view>
</template>
<script>
	export default {
		data() {
			return{
            listAr:[],
				isFirst: false,
				page: {
					isFirst: false,
					isLoad: false,
					isFoot: false,
					page: 1
				},
				uid:'',//
			};
		},
		onShow() {
			this.getList(true)
		},
		methods: {
			tapSerach: function() {
				this.getList(true);
			},
			addBind(){
				uni.navigateTo({
					url:'/pages/gz/addBind'
				})
			},
			delBind(id){
				let obj = this
				uni.showModal({
					title: '提示',
					content: '你确定要解绑吗？',
					success: function (res) {
						if (res.confirm) {
							uni.showLoading({
								title: '解绑中..'
							});
							obj.request.post("unbind",{
								id:id,
							}).then(res => {
								uni.hideLoading();
								uni.showModal({
									title: '系统提示',
									content: res.msg,
									showCancel: false
								});
								obj.getList(true)
							}).catch(res=>{
								console.log(res,'99999')
								uni.hideLoading();
								uni.showModal({
									title: '系统提示',
									content: res,
									showCancel: false
								});
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			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("bindList",{
					uid:this.uid,//手机号
					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>
	.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;
	}
	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.flex_item {
		display: flex;
		align-items: center;
	}
	.app-body {
		padding: 20px 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;
			}
		}
	}
	.sc-body{
		padding: 25rpx 25rpx;
		.item{
			padding: 34rpx 30rpx 14rpx 30rpx;
			background: #fff;
			border-radius: 25rpx;
			margin-bottom: 25rpx;
			box-shadow: 0rpx 3rpx 3rpx 0rpx rgba(39,39,39,0.09);
			align-items: center;
			.itemTpl{
				.tpl{
					padding-bottom: 20rpx;
					font-size: 30rpx;
					text{
						font-weight: 500;
						color: #666666;
					}
				}
			}
			.imageBox{
				text-align: center;
				border-radius: 10rpx;
				border: 2rpx solid #FF332C;
				padding: 10rpx 15rpx;
				.delBtn{
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
					background: linear-gradient(89deg, #FF332C 31.34765625%, #FF6030 86.865234375%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
			}
		}
	}
	
</style>