caimei-applets-caimei/pages/seller/club/club-active-details.vue

<template>
	<view class="container club clearfix">
		<view class="club-tabs">
			<view class="btn edit" :class="tabCurrentIndex === 4 ? 'active': '' " @click.stop="handleClick(4)">活跃机构</view>
			<view class="btn" :class="tabCurrentIndex === 5 ? 'active': '' " @click.stop="handleClick(5)">不活跃机构</view>
		</view>
		<view class="club-main">
			<view v-if="isEmpty" class="club-main-empty">
				<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-cell-top">
							<view class="list-logo">
								<image
									:src="
										club.headpic
											? club.headpicx
											: 'https://static.caimei365.com/app/img/icon/icon-club@3x.png'
									"
									mode=""
								></image>
								<text class="list-id">编号:{{ club.newClubId }}</text>
								<text class="list-tips">{{ club.userIdentity === 2 ? '资质机构' : '个人机构' }}</text>
							</view>
							<view class="list-content">
								<view class="list-name">
									{{ club.name }}
									<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="tags xf" v-if="club.newDeal === 1">新分配</text>
								</view>
								<view class="list-tags">
									<text
										class="tags"
										@click.stop="
											this.$api.navigateTo('/pages/service/service?id=1041&title=标签说明')
										"
									>
										{{ club.activeState }} <text class="iconfont icon-xiayibu"></text>
									</text>
									<text
										class="tags"
										@click.stop="
											this.$api.navigateTo('/pages/service/service?id=1041&title=标签说明')
										"
									>
										{{ club.customerValue }} <text class="iconfont icon-xiayibu"></text>
									</text>
								</view>
								<view class="list-ntel" v-if="tabSmallCurrentIndex === 1">
									<text class="list-link">销售：{{ club.serviceName ? club.serviceName : '' }}</text>
								</view>
								<view class="list-ntel" v-if="tabSmallCurrentIndex !== 1">
									<text class="list-link">{{ club.linkMan ? club.linkMan : '' }}</text>
									<text class="list-texl" @click="handlePhone(club.contractMobile)">
										{{ club.contractMobile ? club.contractMobile : '' }}
									</text>
								</view>
								<view class="list-ntel" v-if="listQuery.type === 6">
									<text class="list-link">分配时间：{{ club.providerTime | dateConversion }}</text>
								</view>
							</view>
						</view>
					</view>
					<!--加载loadding-->
					<tui-loadmore :visible="loadding" :index="3" type="black" />
					<tui-nomore :visible="!pullUpOn" bgcolor="#f7f7f7" :text="nomoreText" />
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
const defaultListQuery = {
	spId: 0,
	status: 90,
	type: 4,
	pageNum: 1,
	pageSize: 10
}
export default {
	data() {
		return {
			listQuery: Object.assign({}, defaultListQuery),
			isEmpty: false,
			nomoreText: '上拉显示更多',
			hasNextPage: false,
			loadding: false,
			pullUpOn: true,
			pullFlag: true,
			tabCurrentIndex: 4,
			clubList: []
		}
	},
	filters: {
		dateConversion(val) {
			const date = new Date(val)
			const setZero = val => (val < 10 ? '0' + val : val)
			return `${date.getFullYear()}-${setZero(date.getMonth() + 1)}-${setZero(date.getDate())} ${setZero(
				date.getHours()
			)}:${setZero(date.getMinutes())}:${setZero(date.getSeconds())}`
		}
	},
	onLoad(option) {

	},
	computed: {
		...mapState(['isManage'])
	},
	methods: {
		async initGetStotage() {
			// 初始化
			const userInfo = await this.$api.getStorage()
			this.listQuery.spId = userInfo.serviceProviderId ? userInfo.serviceProviderId : 0
			this.getClubList()
		},
		async getClubList() {
			try{
				const res = await this.SellerService.getClubList(this.listQuery)
				const data = res.data
				if (data.results && data.results.length > 0) {
					this.hasNextPage = data.hasNextPage
					this.clubList =data.results
					this.isEmpty = false
					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{
				const res = await this.SellerService.getClubList(this.listQuery)
				const data = res.data
				this.hasNextPage = data.hasNextPage
				this.clubList = this.clubList.concat(data.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){
				//TODO handle the exception
				console.log('加载分页失败')
			}
		},
		handleClick(index){
			this.tabCurrentIndex = this.listQuery.type = index
			this.getClubList()
		},
		// 拨打电话
		handlePhone(phoneNumber) {
			uni.makePhoneCall({
				phoneNumber: phoneNumber //拨打电话
			})
		}
	},
	onReachBottom() {
		if (this.hasNextPage) {
			this.loadding = true
			this.pullUpOn = true
			this.listQuery.pageNum++
			this.getOnReachBottomData()
		}
	},
	onShow() {
		this.initGetStotage()
	}
}
</script>

<style lang="scss">
page {
	height: auto;
}
page,
.container {
	/* padding-bottom: 120upx; */
	width: 100%;
	height: 100%;
	background: #f7f7f7;
}
.club-tabs{
	width: 100%;
	height: 90rpx;
	position: fixed;
	top: 0;
	left: 0;
	box-sizing: border-box;
	padding: 20rpx 0;
	background-color: #ffffff;
	.btn {
		width: 50%;
		line-height: 50rpx;
		box-sizing: border-box;
		text-align: center;
		font-size: $font-size-34;
		float: left;
		color: #333333;
		position: relative;
		&::before{
			content: '';
			width: 100rpx;
			height: 4rpx;
			background-color: #ffffff;
			position: absolute;
			bottom: -20rpx;
			left: 50%;
			margin-left: -50rpx;
		}
		&.edit {
			border-right: 1px solid #e1e1e1;
		}
		&.active{
			color: #FF5B00;
			&::before{
				background-color: #FF5B00;
			}
		}
	}
}
.club-main {
	width: 100%;
	height: 100%;
	padding-top: 114rpx;
	float: left;
	.club-main-empty{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background-color: #ffffff;
		.club-empty-image{
			width: 300rpx;
			height: 180rpx;
			margin-bottom: 20rpx;
		}
		.txt{
			font-size: 24rpx;
			color: #666666;
		}
	}
	.list {
		width: 100%;
		height: 200rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background: #ffffff;
		position: relative;
		border-bottom: 1px solid #ebebeb;
		.list-cell-top {
			width: 100%;
			height: 140rpx;
			box-sizing: border-box;
			.list-logo {
				width: 140rpx;
				height: 140rpx;
				float: left;
				position: relative;
				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 8rpx;
				}
				.list-tips {
					display: inline-block;
					width: 100%;
					height: 32rpx;
					line-height: 32rpx;
					background: rgba(0, 0, 0, 0.1);
					color: #333;
					position: absolute;
					bottom: 0;
					left: 0;
					box-sizing: border-box;
					text-align: left;
					font-size: 20rpx;
					padding-left: 4rpx;
					border-radius: 8rpx 8rpx 0 0;
					text-align: center;
				}
				.list-id {
					display: inline-block;
					width: 100%;
					height: 32rpx;
					line-height: 32rpx;
					background: rgba(0, 0, 0, 0.1);
					color: #333;
					position: absolute;
					top: 0;
					left: 0;
					box-sizing: border-box;
					text-align: left;
					font-size: 20rpx;
					padding-left: 4rpx;
					border-radius: 8rpx 8rpx 0 0;
					text-align: center;
				}
			}
			.list-content {
				width: 560rpx;
				height: 150rpx;
				float: left;
				padding-left: 20rpx;
				box-sizing: border-box;
				.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;
						height: 36rpx;
						box-sizing: border-box;
						padding: 0 15rpx;
						border-radius: 8rpx;
						background: #f0cb72;
						font-size: $font-size-22;
						color: #4e4539;
						text-align: center;
						line-height: 36rpx;
						margin-left: 20rpx;
						margin-top: 7rpx;
						&.sv {
							background: #333333;
							color: #f0cb72;
						}
						&.xf {
							background-color: #f94b4b;
							color: #ffffff;
						}
					}
				}
				.list-tags {
					width: 100%;
					height: 36rpx;
					float: left;
					line-height: 36rpx;
					margin: 7rpx 0;
					.tags {
						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: 16rpx;
						.icon-xiayibu {
							font-size: 20rpx;
							margin-left: 10rpx;
						}
					}
				}
				.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: 12rpx;
					}
					.list-texl {
						display: inline-block;
						float: left;
						text-decoration: underline;
					}
				}
			}
		}
	}
}
</style>