caimei-applets-caimei/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-shanchu1" 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">
				<scroll-view scroll-y="true">
					<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="
											club.headpic
												? club.headpic
												: 'https://static.caimei365.com/app/img/icon/icon-club@3x.png'
										"
										mode=""
									></image
								></view>
							</view>
							<view class="list-item">
								<view class="list-title">
									<text class="list-name">
										{{ club.name }}
									</text>
									<text class="tags" v-if="club.vipFlag == 0 && club.userIdentity === 2">VIP</text>
									<text class="tags sv" v-if="club.vipFlag == 1">SVIP</text>
									<text class="list-hist" @click.stop="handleClickOper(5, club)"
										><text class="iconfont icon-dingdanliebiao"></text>订单列表</text
									>
								</view>
								<view class="list-opea">
									<text
										class="tags sm"
										@click.stop="
											this.$api.navigateTo('/pages/service/service?id=1041&title=标签说明')
										"
										>{{ club.activeState }} <text class="iconfont icon-xiayibu"></text
									></text>
									<text
										class="tags sm"
										@click.stop="
											this.$api.navigateTo('/pages/service/service?id=1041&title=标签说明')
										"
										>{{ club.customerValue }} <text class="iconfont icon-xiayibu"></text
									></text>
								</view>
							</view>
						</view>
						<view class="club-list-bot">
							<view class="btn" @click.stop="handleClickOper(1, club)"> <text class="iconfont icon-lijixiadan"></text> 立即下单</view>
							<view class="btn" @click.stop="handleClickOper(2, club)"> <text class="iconfont icon-ershouxiadan"></text> 二手下单</view>
							<view class="btn" @click.stop="handleClickOper(4, club)"> <text class="iconfont icon-chongzhixiadingjin"></text> 充值/下订金</view>
							<view class="btn" @click.stop="handleShowBubble(club,index)"> 
								<text class="iconfont icon-gengduo2"></text> 
								<view class="btn-bubble" v-if="currentIndex === index && club.bubble">
									<view class="btn-view border" @click.stop="handleClickOper(3, club)">
										<text class="iconfont icon-zaicigoumai1"></text> 再次购买
									</view>
									<view class="btn-view" @click.stop="handleClickOper(6, club)">
										<text class="iconfont icon-youhuiquan"></text> 购买优惠券
									</view>
								</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>
</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'
const defaultListQuery = {
	userIdentity: '',
	name: '',
	pageNum: 1,
	pageSize: 10,
	spId: 0,
	status: 66,
	type: 1,
	groupServiceId: 0
}
export default {
	components: {
		tuiLoadmore,
		tuiNomore
	},
	data() {
		return {
			isShowClose: false,
			isEmpty: false,
			nomoreText: '上拉显示更多',
			hasNextPage: false,
			loadding: false,
			pullUpOn: true,
			pullFlag: true,
			scrollHeight: '',
			currPage: '', //当前页面
			prevPage: '', //上一个页面
			clubList: [],
			listQuery: Object.assign({}, defaultListQuery),
			currentIndex:0
		}
	},
	onLoad() {},
	methods: {
		async initGetStotage() {
			// 初始化
			const userInfo = await this.$api.getStorage()
			this.listQuery.spId = userInfo.serviceProviderId ? userInfo.serviceProviderId : 0
			this.GetSellerClubList()
		},
		searchClubList() {
			// 搜索
			this.GetSellerClubList()
		},
		GetSellerClubList() {
			this.listQuery.pageNum = 1
			this.SellerService.GetSellerClubList(this.listQuery)
				.then(response => {
					let data = response.data
					if (data.list && data.list.length > 0) {
						this.isEmpty = false
						this.hasNextPage = response.data.hasNextPage
						this.clubList = data.list.map((el,index)=>{
							el.bubble = false
							return el
						})
						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)
				})
		},
		getOnReachBottomData() {
			this.listQuery.pageNum += 1
			this.SellerService.GetSellerClubList(this.listQuery)
				.then(response => {
					let data = response.data
					if (data.list && data.list.length > 0) {
						this.hasNextPage = response.data.hasNextPage
						this.clubList = this.clubList.concat(data.list)
						this.clubList = this.clubList.map((el,index)=>{
							el.bubble = false
							return el
						})
						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 => {
					this.$util.msg(error.msg, 2000)
				})
		},
		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/cart/immediately',
				2: '/pages/seller/cart/second',
				3: '/pages/seller/cart/buyagain',
				4: '/pages/seller/order/create-recharge-order',
				5: '/pages/seller/order/order-historylist?listType=0',
				6: '/pages/seller/cart/coupon',
			}
			this.$api.setStorage('orderUserInfo', club)
			this.$api.navigateTo(pathMap[type])
		},
		handleShowBubble(club,index){
			this.currentIndex = index
			club.bubble = !club.bubble
		}
	},
	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-shanchu1 {
			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;
	.list {
		align-items: center;
		width: 702rpx;
		height: auto;
		padding: 24rpx;
		background: #ffffff;
		position: relative;
		border-bottom: 1px solid #ebebeb;
		float: left;
		.club-list-top {
			width: 100%;
			height: 140rpx;
			float: left;
			display: flex;
			align-items: center;
			.list-left {
				height: 140rpx;
				flex: 2;
				margin-right: 10rpx;
				.list-head {
					width: 140rpx;
					height: 140rpx;
					border-radius: 14rpx;
					image {
						width: 140rpx;
						height: 140rpx;
						border-radius: 14rpx;
					}
				}
			}
			.list-item {
				height: 140rpx;
				flex: 8;
				display: flex;
				flex-direction: column;
				.list-title {
					flex: 2;
					line-height: 80rpx;
					width: 100%;
					font-size: $font-size-28;
					color: $text-color;
					padding-left: 11rpx;
					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;
					}
					.tags {
						display: inline-block;
						height: 36rpx;
						padding: 0 15rpx;
						border-radius: 8rpx;
						background: #f0cb72;
						font-size: $font-size-22;
						color: #4e4539;
						text-align: center;
						line-height: 36rpx;
						margin-left: 10rpx;
						margin-right: 10rpx;
						&.sv {
							background: #333333;
							color: #f0cb72;
						}
					}	
					.list-hist {
						display: block;
						float: right;
						color: #1890F9;
						font-size: $font-size-24;
						text-align: right;
						padding-right: 30rpx;
						.icon-dingdanxuanzhong {
							font-size: $font-size-34;
							color: #1890F9;
						}
					}
				}
				.list-opea {
					width: 100%;
					display: flex;
					flex: 4;
					color: #166ce1;
					flex-direction: row;
					align-items: center;
					.tags {
						display: inline-block;
						height: 36rpx;
						padding: 0 15rpx;
						border-radius: 8rpx;
						background: #f0cb72;
						font-size: $font-size-22;
						color: #4e4539;
						text-align: center;
						line-height: 36rpx;
						margin-left: 10rpx;
						margin-right: 10rpx;
						&.sv {
							background: #333333;
							color: #f0cb72;
						}
						&.sm {
							display: inline-block;
							height: 36rpx;
							box-sizing: border-box;
							padding: 0 8rpx 0 15rpx;
							border-radius: 8rpx;
							background: #faede5;
							font-size: $font-size-22;
							color: $color-system;
							text-align: center;
							line-height: 36rpx;
							margin-right: 10rpx;
							.icon-xiayibu {
								font-size: 20rpx;
								margin-left: 10rpx;
							}
						}
					}
				}
			}
		}
		.club-list-bot {
			width: 100%;
			height: 80rpx;
			float: left;
			background-color: #F7F7F7;
			border-radius: 8rpx;
			margin-top: 20rpx;
			.btn {
				height: 80rpx;
				box-sizing: border-box;
				line-height: 80rpx;
				padding: 0 28rpx;
				font-size: $font-size-24;
				color: #333333;
				text-align: center;
				float: left;
				position: relative;
				&:nth-child(1){
					&:before{
						content: '';
						width: 1px;
						height: 20rpx;
						background-color: #B2B2B2;
						position: absolute;
						right: 0;
						top: 30rpx;
					}
				}
				&:nth-child(2){
					&:before{
						content: '';
						width: 1px;
						height: 20rpx;
						background-color: #B2B2B2;
						position: absolute;
						right: 0;
						top: 30rpx;
					}
				}
				&:nth-child(3){
					&:before{
						content: '';
						width: 1px;
						height: 20rpx; 
						background-color: #B2B2B2;
						position: absolute;
						right: 0;
						top: 30rpx;
					}
				}
				&:last-child{
					padding: 0 36rpx;
					.iconfont{
						font-weight: bold;
					}
					.btn-bubble{
						width: 200rpx;
						height: 160rpx;
						background: rgba(51, 51, 51, 0.8);
						position: absolute;
						top: -154rpx;
						right: 0;
						border-radius: 8rpx;
						&:before{
							content: '';
							width: 0;
							height: 0;
							border: 15rpx solid transparent;
							border-top: 15rpx solid rgba(51, 51, 51, 0.8);
							position: absolute;
							bottom: -28rpx;
							right: 42rpx;
						}
						.btn-view{
							width: 100%;
							height: 80rpx;
							box-sizing: border-box;
							line-height: 80rpx;
							font-size: $font-size-24;
							color: #FFFFFF;
							text-align: center;
							float: left;
							.iconfont{
								font-size: 28rpx;
								color: #FFFFFF;
								margin-right: 5rpx;
								font-weight: normal;
							}
							&.border{
								border-bottom: 1px solid rgba(255, 255, 255, 0.3);
							}
						}
					}
				}
				.iconfont{
					font-size: 30rpx;
					color: #333333;
					margin-right: 5rpx;
				}
			}
		}
	}
}
</style>