caimei-applets-weisha/pages/user/club/club-list.vue

<template>
	<view class="container club clearfix tui-skeleton">
		<tui-skeleton v-if="showSkeleton" :isLoading="false"></tui-skeleton>
		<view class="club-search clearfix">
			<view class="search-from name  tui-skeleton-rect">
				<text class="iconfont icon-sousuo"></text>
				<input
					class="input"
					type="text"
					confirm-type="search"
					v-model="searchInputVal"
					@input="onShowClose"
					@confirm="getClubList()"
					placeholder="请输入机构名称/机构联系人"
					maxlength="12"
					@focus="searchInputFoucs"
					@blur="hideSearchModalHandle"
				/>
				<text
					class="iconfont icon-guanbi"
					v-if="isShowClose"
					@click="delInputText()"
				></text>
			</view>
			<view class="search-btn  tui-skeleton-rect">
				<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"
					lazy-load
				></image>
				<view class="txt">暂无机构数据</view>
			</view>
			<view v-else class="club-list">
				<scroll-view
					scroll-y="true"
					:style="{ height: scrollHeight }"
					@scrolltolower="getOnReachBottomData"
				>
					<!-- 机构数据 -->
					<view class="list" v-for="item in clubList" :key="item.userId">
						<view class="list-left">
							<view class="list-head tui-skeleton-rect"
								><image
									src="https://static.caimei365.com/app/img/icon/icon-club@3x.png"
									mode=""
								></image
							></view>
						</view>
						<view class="list-item">
							<view class="list-title tui-skeleton-rect">
								<text class="list-name">{{ item.clubName }}</text>
							</view>
							<view class="list-contact">
								<view class="list-row tui-skeleton-rect">
									<text class="iconfont icon-lianxiren"></text>
									<text>{{ item.userName }}</text>
								</view>
								<view class="list-row tui-skeleton-rect">
									<text class="iconfont icon-dianhua"></text>
									<text>{{ item.bindMobile }}</text>
								</view>
							</view>
							<view class="list-opea">
								<view class="btn border-btn tui-skeleton-rect" @click.stop="goOrderList(item)">
									<text>订单列表</text>
								</view>
								<view class="btn border-btn tui-skeleton-rect" @click.stop="goGoodsList(item)">
									<text>立即下单</text>
								</view>
							</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-->
				</scroll-view>
			</view>
		</view>
		<view class="over-bg" @click="hideSearchModalHandle" v-if="showSearchModal"></view>
	</view>
</template>

<script>
import authorize from '@/common/config/authorize.js'
import tuiLoadmore from '@/components/tui-components/loadmore/loadmore'
import tuiNomore from '@/components/tui-components/nomore/nomore'
import tuiSkeleton from '@/components/tui-skeleton/tui-skeleton.vue'
export default {
	components: {
		tuiLoadmore,
		tuiNomore
	},
	data() {
		return {
			isShowClose: false, //是否显示搜索框关闭按钮
			searchInputVal: '', //搜索框数据
			isEmpty: false, //机构列表是否为空
			nomoreText: '上拉显示更多',
			pageNum: 1, //当前页码
			pageSize: 10, //每页获取条数
			hasNextPage: false, //是否还有下一页
			loadding: false,
			pullUpOn: true,
			pullFlag: true,
			scrollHeight: '', //scoll-view高度
			clubList: [],
			showSearchModal: false, //模糊搜索框是否显示
			organizeId: '',
			showSkeleton:true  //显示骨架
		}
	},
	onLoad(data) {
		this.setScrollHeight()
		// 获取传过来的organizeId
		this.organizeId = data.id
		// 初始化列表
		this.init()
	},
	methods: {
		// 初始化机构列表
		async init() {
			this.showSkeleton = true
			this.pageNum = 1
			this.clubList = await this.getClubList()
			this.showSkeleton = false
		},
		// 设置scroll高度
		setScrollHeight() {
			this.scrollHeight = this.$store.state.windowHeight - 61 + 'px'
		},
		async searchClubList() {
			// 如果搜索框为空
			if (this.searchInputVal.trim().length <= 0) {
				this.searchInputVal = ''
				return
			}
			this.searchKeyWords()
		},
		async searchKeyWords() {
			this.pageNum = 1
			this.clubList = await this.getClubList()
		},
		// 初始化机构列表
		async getClubList() {
			let params = {
				organizeId: this.organizeId,
				name: this.searchInputVal,
				pageNum: this.pageNum,
				pageSize: this.pageSize
			}
			const { data: res } = await this.SellerService.GetSellerClubList(params).catch(
				error => {
					this.$util.msg(error.msg, 1500)
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
				}
			)
			this.pageNum = res.pageNum
			this.hasNextPage = res.hasNextPage
			if (res.list.length < 0) {
				this.isEmpty = true
			}
			return res.list
		},
		// 加载下一页数据
		async getOnReachBottomData() {
			if (!this.hasNextPage && this.pullFlag) {
				this.loadding = false
				this.pullUpOn = false
				this.nomoreText = '已至底部'
				return
			}
			this.nomoreText = '上拉显示更多'
			this.loadding = true
			this.pullUpOn = true
			this.pageNum += 1
			const list = await this.getClubList()
			this.clubList = [...this.clubList, ...list]
			setTimeout(() => {
				this.pullFlag = true
			}, 2000)
		},
		//输入框失去焦点时触发
		onShowClose() {
			if (this.searchInputVal != '') {
				this.isShowClose = true
			} else {
				this.isShowClose = false
			}
		},
		async delInputText() {
			//清除输入框内容
			this.searchInputVal = ''
			this.isShowClose = false
			this.searchKeyWords()
		},
		// 跳转下单产品列表
		goGoodsList(item) {
			uni.setStorageSync('clubInfo', item)
			this.$api.navigateTo(`/pages/goods/list`)
		},
		// 跳转订单列表
		goOrderList(item) {
			this.$api.setStorage('clubInfo', item)
			this.$api.navigateTo(`pages/user/order/order-list`)
		},
		async hideSearchModalHandle() {
			this.showSearchModal = false
			this.searchKeyWords()
		},
		searchInputFoucs() {
			this.showSearchModal = true
		}
	}
}
</script>

<style lang="scss">
page {
	height: auto;
}
page,
.container {
	/* padding-bottom: 120upx; */
	background: #fff;
	width: 100%;
	height: 100vh;
	overflow: hidden;
}
.container {
	position: relative;
}
.over-bg {
	top: 0;
	position: fixed;
	width: 100vw;
	height: 100vh;
	z-index: 888;
	background: rgba(0, 0, 0, 0.4);
}
.club-search {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 74rpx;
	width: 702rpx;
	padding: 20rpx 24rpx;
	background: #ffffff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	.search-from {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 1;
		height: 64rpx;
		background: #f7f7f7;
		border-radius: 32rpx;
		position: relative;
		.icon-sousuo {
			width: 64rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			display: block;
			font-size: $font-size-28;
			color: #999999;
		}
		.icon-guanbi {
			font-size: $font-size-28;
			color: #999999;
			position: absolute;
			width: 64rpx;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			top: 0;
			right: 0;
			z-index: 10;
		}
		.input {
			width: 570rpx;
			height: 64rpx;
			line-height: 64rpx;
			color: $text-color;
			font-size: $font-size-24;
		}
	}
	.search-btn {
		width: 100rpx;
		line-height: 64rpx;
		text-align: center;
		font-size: $font-size-28;
		color: $color-system;
		background: #ffffff;
	}
}
.club-main {
	position: relative;
	padding-top: 122rpx;
	.list {
		align-items: flex-start;
		width: 702rpx;
		height: auto;
		margin: 0 auto;
		padding: 24rpx 0;
		background: #ffffff;
		position: relative;
		border-bottom: 1px solid #ebebeb;
		display: flex;
		.list-left {
			height: 140rpx;
			flex: 2;
			margin-right: 24rpx;
			.list-head {
				width: 180rpx;
				height: 180rpx;
				image {
					width: 180rpx;
					height: 180rpx;
				}
			}
		}
		.list-item {
			flex: 8;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			.list-title {
				flex: 2;
				width: 100%;
				color: $text-color;
				flex-direction: row;
				justify-content: flex-start;
				.list-name {
					font-size: $font-size-30;
					width: 400rpx;
					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;
				}
			}
			.list-contact {
				padding: 20rpx 0;
				.list-row {
					margin: 10rpx 0;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					color: #666;
					text {
						font-size: $font-size-26;
					}
					.iconfont {
						font-size: $font-size-26;
						margin-right: 10rpx;
					}
				}
			}
			.list-opea {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				flex: 4;
				color: #166ce1;
				flex-direction: row;
				align-items: center;
				.btn {
					width: 160rpx;
					height: 56rpx;
					line-height: 54rpx;
					border-radius: 30rpx;
					font-size: $font-size-24;
					color: $text-color;
					text-align: center;
					margin: 0 17rpx;
					border: 1px solid #333333;
					box-sizing: border-box;
					&.border-btn {
						color: #333;
					}
				}
			}
		}
	}
}
</style>