caimei-applets-mcare/pages/seller/club/club-list.vue

<template>
	<view class="container club clearfix">
		<view class="club-search clearfix">
			<view class="search-from name">
				<text class="iconfont icon-iconfonticonfontsousuo1"></text>
				<input
					class="input"
					type="text"
					confirm-type="search"
					v-model="listQuery.name"
					@input="onShowClose"
					@confirm="GetSellerClubList()"
					placeholder="机构名称/联系人"
					maxlength="12"
				/>
				<text class="iconfont icon-shanchu2" v-if="isShowClose" @click="delInputText()"></text>
			</view>
			<view class="search-btn">
				<button class="search-btn" type="default" @click.stop="searchClubList">搜索</button>
			</view>
		</view>
		<view class="club-main">
			<view v-if="isEmpty" class="empty-container">
				<image
					class="club-empty-image"
					src="https://img.caimei365.com/group1/M00/03/71/Cmis2F3wna6AY2ZjAABpmnBICH4247.png"
					mode="aspectFit"
				></image>
				<view class="txt">暂无机构数据</view>
			</view>
			<view v-else class="club-list">
				<view class="list" v-for="(club, index) in clubList" :key="index">
					<view class="club-list-top">
						<view class="list-left">
							<view class="list-head">
								<image :src="staticUrl + 'icon_default_club@3x.png'" mode=""></image>
							</view>
						</view>
						<view class="list-item">
							<view class="list-title">
								<text class="list-name"> {{ club.name }} </text>
							</view>
							<view class="list-ntel">
								<text class="list-link">{{ club.linkMan ? club.linkMan : '' }}</text>
								<text class="list-texl">{{ club.contractMobile ? club.contractMobile : '' }}</text>
							</view>
						</view>
					</view>
					<view class="club-list-bot">
						<view class="btn btn1" @click.stop="handleClickOper(2, club)">查看历史订单</view>
						<view class="btn btn2" @click.stop="handleClickOper(1, club)">立即下单</view>
					</view>
				</view>
				<!--加载loadding-->
				<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
				<tui-nomore :visible="!pullUpOn" :backgroundColor="'#ffffff'" :text="nomoreText"></tui-nomore>
				<!--加载loadding-->
			</view>
		</view>
	</view>
</template>

<script>
const defaultListQuery = {
	userIdentity: '',
	name: '',
	pageNum: 1,
	pageSize: 10,
	spId: 0,
	status: 66,
	type: 1,
	groupServiceId: 0
}
export default {
	data() {
		return {
			staticUrl: this.global.staticUrl,
			isShowClose: false,
			isEmpty: false,
			nomoreText: '上拉显示更多',
			hasNextPage: false,
			loadding: false,
			pullUpOn: true,
			pullFlag: true,
			scrollHeight: '',
			currPage: '', //当前页面
			prevPage: '', //上一个页面
			clubList: [],
			listQuery: Object.assign({}, defaultListQuery),
		}
	},
	onLoad() {},
	methods: {
		async initGetStotage() {
			// 初始化
			const user = await this.$api.getStorage()
			this.listQuery.spId = user.serviceProviderId
			this.GetSellerClubList()
		},
		searchClubList() {
			// 搜索
			this.GetSellerClubList()
		},
		async GetSellerClubList() {
			try{
				this.listQuery.pageNum = 1
				const res  = await this.SellerService.sellerClubList(this.listQuery)
				const data = res.data
				if (data.list && data.list.length > 0) {
					this.isEmpty = false
					this.hasNextPage = data.hasNextPage
					this.clubList = data.list
					this.pullFlag = false
					setTimeout(() => {
						this.pullFlag = true
					}, 500)
					if (this.hasNextPage) {
						this.pullUpOn = false
						this.nomoreText = '上拉显示更多'
					} else {
						this.pullUpOn = true
						this.loadding = false
						this.nomoreText = '已至底部'
					}
				} else {
					this.isEmpty = true
				}
			}catch(error){
				this.$util.msg(error.msg, 2000)
			}
				
		},
		async getOnReachBottomData() {
			try{
				this.listQuery.pageNum += 1
				const res = await this.SellerService.sellerClubList(this.listQuery)
				const data = res.data
				if (data.list && data.list.length > 0) {
					this.hasNextPage = data.hasNextPage
					this.clubList = this.clubList.concat(data.list)
					this.pullFlag = false // 防上拉暴滑
					setTimeout(() => {
						this.pullFlag = true
					}, 500)
					if (this.hasNextPage) {
						this.pullUpOn = false
						this.nomoreText = '上拉显示更多'
					} else {
						this.pullUpOn = false
						this.loadding = false
						this.nomoreText = '已至底部'
					}
				}
			}catch(error){
				console.log(error)
			}
		},
		onShowClose() {
			//输入框失去焦点时触发
			if (this.listQuery.name != '') {
				this.isShowClose = true
			} else {
				this.isShowClose = false
			}
		},
		delInputText() {
			//清除输入框内容
			this.listQuery.name = ''
			this.isShowClose = false
		},
		handleClickOper(type, club) {
			const pathMap = {
				1: '/pages/seller/goods/list',
				2: '/pages/seller/order/order-club-list?listType=0',
				3: '/pages/seller/cart/buyagain',
				4: '/pages/seller/order/create-recharge-order',
				5: '/pages/seller/order/order-club-list?listType=0',
				6: '/pages/seller/cart/coupon'
			}
			this.$api.setStorage('orderUserInfo', club)
			this.$api.navigateTo(pathMap[type])
		},
	},
	onReachBottom() {
		if (this.hasNextPage) {
			this.loadding = true
			this.pullUpOn = true
			this.getOnReachBottomData()
		}
	},
	onShow() {
		this.initGetStotage()
	}
}
</script>

<style lang="scss">
page {
	height: auto;
}
page,
.container {
	/* padding-bottom: 120upx; */
	background: #f7f7f7;
}
.container {
	position: relative;
}
.club-search {
	height: 64rpx;
	width: 702rpx;
	padding: 24rpx;
	background: #ffffff;
	display: flex;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	.search-from {
		width: 582rpx;
		height: 64rpx;
		background: #f7f7f7;
		border-radius: 32rpx;
		float: left;
		position: relative;
		.icon-iconfonticonfontsousuo1 {
			width: 64rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			display: block;
			font-size: $font-size-38;
			float: left;
			color: #999999;
		}
		.icon-shanchu2 {
			font-size: $font-size-32;
			color: #999999;
			position: absolute;
			width: 64rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			top: 0;
			right: 0;
			z-index: 10;
		}
		.input {
			width: 500rpx;
			height: 64rpx;
			float: left;
			line-height: 64rpx;
			color: $text-color;
			font-size: $font-size-24;
		}
	}
	.search-btn {
		width: 120rpx;
		line-height: 64rpx;
		text-align: center;
		font-size: $font-size-28;
		color: $color-system;
		float: left;
		background: #ffffff;
	}
}
.club-main {
	padding-top: 122rpx;
	.club-list{
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 0 24rpx;
	}
	.list {
		align-items: center;
		width: 100%;
		height: auto;
		padding: 24rpx;
		background: #ffffff;
		position: relative;
		box-sizing: border-box;
		margin: 12rpx 0;
		float: left;
		border-radius: 16rpx;
		.club-list-top {
			width: 100%;
			height: 140rpx;
			float: left;
			display: flex;
			align-items: center;
			margin-bottom: 24rpx;
			.list-left {
				height: 140rpx;
				flex: 2;
				margin-right: 10rpx;
				.list-head {
					width: 140rpx;
					height: 140rpx;
					border-radius: 8rpx;
					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 8rpx;
					}
				}
			}
			.list-item {
				height: 140rpx;
				flex: 8;
				display: flex;
				flex-direction: column;
				box-sizing: border-box;
				padding-left: 24rpx;
				.list-title {
					flex: 2;
					line-height: 80rpx;
					width: 100%;
					font-size: $font-size-30;
					color: $text-color;
					flex-direction: row;
					justify-content: flex-start;
					.list-name {
						min-width: 100rpx;
						display: block;
						float: left;
						text-align: left;
						-o-text-overflow: ellipsis;
						text-overflow: ellipsis;
						display: -webkit-box;
						word-break: break-all;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 1;
						overflow: hidden;
						font-weight: bold;
					}
				}
				.list-ntel {
					width: 100%;
					height: 50rpx;
					float: left;
					line-height: 50rpx;
					text-align: left;
					font-size: $font-size-26;
					color: #666666;
					.list-link {
						display: inline-block;
						float: left;
						margin-right: 40rpx;
					}
					.list-texl {
						display: inline-block;
						float: left;
					}
				}
			}
		}
		.club-list-bot {
			width: 100%;
			height: auto;
			border-top: 1px solid #e1e1e1;
			padding-top: 24rpx;
			float: left;
			.btn {
				width: 50%;
				line-height: 48rpx;
				box-sizing: border-box;
				text-align: center;
				font-size: $font-size-28;
				float: left;
				font-weight: bold;
				&.btn1 {
					color: #666666;
					border-right: 1px solid #e1e1e1;
				}
				&.btn2 {
					color: #F3B574;
				}
			}
		}
	}
}
</style>