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

<template>
	<view class="container club clearfix" :style="{ paddingBottom: isIphoneX ? '140rpx' : '98rpx' }">
		<view class="club-search clearfix">
			<view class="search-top">
				<view class="search-from name">
					<text class="iconfont icon-iconfonticonfontsousuo1"></text>
					<input
						class="input"
						type="text"
						confirm-type="search"
						v-model="searchInputVal"
						@input="onShowClose"
						@confirm="initclubList()"
						placeholder="机构名称/联系人"
						maxlength="16"
					/>
					<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="search-tab">
				<view
					class="tab-item"
					v-for="(item, index) in listTab"
					:key="index"
					:class="{ current: tabCurrentNum === index }"
					@click="tabCurrentClick(index)"
				>
					<text class="item-text">{{ item.name }}<text class="line"></text></text>
				</view>
			</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="list-logo">
							<image
								:src="
									club.headpic
										? club.headpic
										: 'https://static.caimei365.com/app/img/icon/icon-club@3x.png'
								"
								mode=""
							></image>
						</view>
						<view class="list-content">
							<view class="list-name">
								{{ club.userIdentity === 2 ? club.name : club.linkMan }}
								<text class="tags" v-if="tabCurrentNum == 0">VIP</text>
								<text class="tags sv" v-if="tabCurrentNum == 1">SVIP</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 class="list-opera">
								<button class="btn org" @click.stop="checkData(club)">修改资料</button>
								<view class="btn gre" @click.stop="orderHistory(club)">
									历史订单
									<text
										v-if="club.orderNum > 0"
										class="opea-badge uni-badge uni-badge-error uni-small uni-badge--small icon-num"
									>
										{{ showBadge(club.orderNum) }}
									</text>
								</view>
								<view class="btn doc" @click.stop="clubRemaks(club)"> 资料备注 </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>
				</scroll-view>
			</view>
		</view>
		<view class="tabBar" :style="{ height: isIphoneX ? '140rpx' : '98rpx' }" v-if="tabCurrentNum === 0">
			<view class="tabBar_list" :style="{ paddingBottom: isIphoneX ? '40rpx' : '' }">
				<view class="tabBar_item" :class="{ current: tabCurrentIndex === 0 }" @click="tabClick(0)">
					<text class="iconfont icon-shenhetongguo"></text> <view class="tabBar_name">待升级</view>
				</view>
				<view class="tabBar_item" :class="{ current1: tabCurrentIndex === 1 }" @click="tabClick(1)">
					<text class="iconfont icon-lishidingdan"></text> <view class="tabBar_name">升级中</view>
				</view>
				<view class="tabBar_item" :class="{ current2: tabCurrentIndex === 2 }" @click="tabClick(2)">
					<text class="iconfont icon-shenhebutongguo"></text> <view class="tabBar_name">升级失败</view>
				</view>
			</view>
		</view>
		<!-- 分享弹窗 -->
		<shareModel v-if="isShareModal" :orderID="shareClubUseId" @shareConfirm="onShareAppMessage"></shareModel>
	</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 shareModel from '@/components/cm-module/modelAlert/shareModel.vue' //分享弹窗

export default {
	components: {
		tuiLoadmore,
		tuiNomore,
		shareModel
	},
	data() {
		return {
			listTab: [{ name: '个人机构' }, { name: '资质机构' }],
			serviceProviderId: '',
			shareClubUseId: 0,
			shareIdentity: 0,
			isShowClose: false,
			searchInputVal: '',
			isEmpty: false,
			isShareModal: false,
			nomoreText: '上拉显示更多',
			userIdentity: 4,
			pageNum: 1,
			pageSize: 10,
			hasNextPage: false,
			loadding: false,
			pullUpOn: true,
			pullFlag: true,
			allowDataStatus: true,
			wrapperHeight: '100%',
			scrollHeight: '',
			deleteAddressId: '',
			currPage: '', //当前页面
			prevPage: '', //上一个页面
			tabCurrentNum: 0,
			tabCurrentIndex: 0,
			listStatus: 90,
			clubList: [],
			isIphoneX: this.$store.state.isIphoneX,
			show_index: 0 //控制显示那个组件
		}
	},
	onLoad() {
		this.setScrollHeight()
	},
	methods: {
		setScrollHeight() {
			// 窗口高度 - 底部距离
			setTimeout(() => {
				const query = wx.createSelectorQuery().in(this)
				query.selectAll('.add-btn').boundingClientRect()
				query.exec(res => {
					if (res[0][0]) {
						let winHeight = this.$api.getWindowHeight(),
							eleTop = res[0][0].top - 1
						this.scrollHeight = eleTop
					}
				})
			}, 500)
		},
		searchClubList() {
			this.pageNum = 1
			this.initclubList()
		},
		initclubList() {
			this.SellerService.GetSellerClubList({
				userIdentity: this.userIdentity,
				name: this.searchInputVal,
				pageNum: 1,
				pageSize: this.pageSize,
				spId: this.serviceProviderId,
				status: this.listStatus
			})
				.then(response => {
					let responseData = response.data
					if (responseData.results && responseData.results.length > 0) {
						this.isEmpty = false
						this.hasNextPage = response.data.hasNextPage
						this.clubList = responseData.results
						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.pageNum += 1
			this.SellerService.GetSellerClubList({
				userIdentity: this.userIdentity,
				name: this.searchInputVal,
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				spId: this.serviceProviderId,
				status: this.listStatus
			})
				.then(response => {
					let responseData = response.data
					if (responseData.results && responseData.results.length > 0) {
						this.hasNextPage = response.data.hasNextPage
						this.clubList = this.clubList.concat(responseData.results)
						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)
				})
		},
		tabClick(index) {
			//tab切换
			this.tabCurrentIndex = index
			switch (index) {
				case 0:
					this.listStatus = 90
					break
				case 1:
					this.listStatus = 1
					break
				case 2:
					this.listStatus = 92
					break
			}
			this.initclubList()
		},
		tabCurrentClick(index) {
			//商品详情&&供应商信息tab切换
			this.tabCurrentNum = index
			switch (index) {
				case 0:
					this.tabCurrentIndex = 0
					this.userIdentity = 4
					this.listStatus = 90
					this.initclubList()
					break
				case 1:
					this.userIdentity = 2
					this.listStatus = 90
					this.initclubList()
					break
			}
		},
		checkData(club) {
			//修改机构资料
			switch (this.tabCurrentNum) {
				case 0:
					this.$api.navigateTo(`/pages/seller/login/apply?userID=${club.userID}`)
					break
				case 1:
					this.$api.navigateTo(`/pages/seller/login/information?userID=${club.userID}`)
					break
			}
		},
		orderHistory(club) {
			//跳转机构历史订单
			this.$api.setStorage('orderUserInfo', club)
			this.$api.navigateTo(`/pages/seller/order/order-historylist?clubId=${club.clubID}&listType=0`)
		},
		clubRemaks(club){
			//跳转机构资料备注
			this.$api.setStorage('orderUserInfo', club)
			this.$api.navigateTo(`/pages/seller/remarks/list?clubId=${club.clubID}`)
		},
		onShowClose() {
			//输入框失去焦点时触发
			if (this.searchInputVal != '') {
				this.isShowClose = true
			} else {
				this.isShowClose = false
			}
		},
		delInputText() {
			//清除输入框内容
			this.searchInputVal = ''
			this.isShowClose = false
		},
		showBadge(n) {
			let num = ''
			if (n > 100) {
				num = 99
			} else {
				num = n
			}
			return num
		}
	},
	onReachBottom() {
		if (this.hasNextPage) {
			this.loadding = true
			this.pullUpOn = true
			this.getOnReachBottomData()
		}
	},
	onShow() {
		this.$api.getStorage().then(response => {
			this.serviceProviderId = response.serviceProviderId
			this.pageNum = 1
			this.initclubList()
		})
	}
}
</script>

<style lang="scss">
page {
	height: auto;
}
page,
.container {
	/* padding-bottom: 120upx; */
	background: #f7f7f7;
}
.container {
	position: relative;
}
.club-search {
	height: auto;
	width: 100%;
	padding: 24rpx 0 0 0;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	.search-top {
		flex: 1;
		display: flex;
		align-items: center;
		padding: 24rpx;
		.search-from {
			width: 582rpx;
			height: 64rpx;
			background: #f7f7f7;
			border-radius: 32rpx;
			float: left;
			position: relative;
			.input {
				width: 500rpx;
				height: 64rpx;
				float: left;
				line-height: 64rpx;
				color: $text-color;
				font-size: $font-size-24;
			}
			.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;
			}
		}
		.search-btn {
			width: 120rpx;
			line-height: 64rpx;
			text-align: center;
			font-size: $font-size-28;
			color: $color-system;
			float: left;
			background: #ffffff;
		}
	}
	.search-tab {
		height: 80rpx;
		display: flex;
		flex: 1;
		background: #ffffff;
		border-bottom: 1px solid #efefef;
		.tab-item {
			flex: 1;
			line-height: 80rpx;
			text-align: center;
			color: $text-color;
			font-size: $font-size-28;
			position: relative;
			.item-text {
				padding: 10rpx 0;
				border-bottom: 2px solid #ffffff;
			}
			&:nth-child(1)::before {
				content: '';
				width: 2px;
				height: 50rpx;
				position: absolute;
				right: 0;
				top: 15rpx;
				background: #ebebeb;
			}
			&.current {
				color: $color-system;
				.item-text {
					border-color: $color-system;
				}
			}
		}
	}
}
.club-main {
	padding-top: 224rpx;
	.list {
		width: 100%;
		height: 228rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background: #ffffff;
		position: relative;
		border-bottom: 1px solid #ebebeb;
		.list-logo {
			width: 180rpx;
			height: 180rpx;
			float: left;
			image {
				width: 180rpx;
				height: 180rpx;
				border-radius: 8rpx;
			}
		}
		.list-content {
			width: 498rpx;
			height: 180rpx;
			float: right;
			.list-name {
				width: 100%;
				height: 50rpx;
				float: left;
				line-height: 50rpx;
				text-align: left;
				font-size: $font-size-26;
				color: #333333;
				.tags {
					display: inline-block;
					width: 60rpx;
					height: 32rpx;
					border-radius: 8rpx;
					background: #f0cb72;
					font-size: $font-size-22;
					color: #4e4539;
					text-align: center;
					line-height: 32rpx;
					margin-left: 20rpx;
					&.sv {
						background: #333333;
						color: #f0cb72;
					}
				}
			}
			.list-ntel {
				width: 100%;
				height: 50rpx;
				float: left;
				line-height: 50rpx;
				text-align: left;
				font-size: $font-size-24;
				color: #666666;
				.list-link {
					display: inline-block;
					float: left;
					margin-right: 40rpx;
				}
				.list-texl {
					display: inline-block;
					float: left;
				}
			}
			.list-opera {
				width: 100%;
				height: 60rpx;
				display: flex;
				color: #166ce1;
				flex-direction: row;
				align-items: center;
				float: left;
				margin-top: 20rpx;
				.btn {
					width: 160rpx;
					height: 60rpx;
					line-height: 60rpx;
					border-radius: 30rpx;
					font-size: $font-size-24;
					color: $text-color;
					text-align: center;
					margin: 0 20rpx 0 0;
					position: relative;
					.opea-badge {
						position: absolute;
						right: -10rpx;
						top: -20rpx;
					}
					&.org {
						border: 1px solid #2769d5;
						color: #2769d5;
					}
					&.gre {
						border: 1px solid #e15616;
						color: #e15616;
					}
					&.doc {
						border: 1px solid #627386;
						color: #627386;
					}
				}
			}
		}
	}
}
.tabBar {
	width: 100%;
	height: 98rpx;
	background: #fff;
	border-top: 1px solid #e5e5e5;
	position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
	.tabBar_list {
		width: 86%;
		display: flex;
		justify-content: space-between;
		.tabBar_item {
			width: 120rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-size: 20rpx;
			color: #999999;
			&.current {
				color: #166ce1;
				.iconfont {
					color: #166ce1;
				}
			}
			&.current1 {
				color: #16e15c;
				.iconfont {
					color: #16e15c;
				}
			}
			&.current2 {
				color: #ff0000;
				.iconfont {
					color: #ff0000;
				}
			}
			.iconfont {
				width: 48rpx;
				height: 48rpx;
				display: block;
				margin-bottom: 2rpx;
				text-align: center;
				font-size: 46rpx;
				color: #999999;
			}
		}
	}
}
.nav_active {
	color: $color-system;
}
</style>