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

<template>
	<view class="container club clearfix">
		<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-cell-top">
							<view class="list-logo">
								<image
									:src="
										club.headpic
											? club.headpic
											: 'https://static.caimei365.com/app/img/icon/icon-club@3x.png'
									"
									mode=""
								></image>
								<text class="list-id">编号:{{ club.newClubId }}</text>
							</view>
							<view class="list-content">
								<view class="list-name">
									{{ club.userIdentity === 2 ? club.name : club.linkMan }}
									<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>
									<text class="tags-or" @click.stop="handleOrderHistory(club)">
										<text class="iconfont icon-dingdan"></text> 订单列表
										<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>
									</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 class="club-list-bot">
							<view class="btn" @click.stop="handleClickOper(1, club)">
								<text class="iconfont icon-jigouhuaxiang"></text> 机构画像
							</view>
							<view class="btn" @click.stop="handleClickOper(2, club)">
								<text class="iconfont icon-shangcheng"></text> 商城访问记录
							</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'
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/common/config/wxLogin.js'

const defaultListQuery = {
	pageNum: 1,
	pageSize: 10,
	serviceProviderId: 0
}
export default {
	data() {
		return {
			listQuery: Object.assign({}, defaultListQuery),
			isEmpty: false,
			nomoreText: '上拉显示更多',
			pageNum: 1,
			pageSize: 10,
			hasNextPage: false,
			loadding: false,
			pullUpOn: true,
			pullFlag: true,
			clubList: [],
			isIphoneX: this.$store.state.isIphoneX,
			CustomBar: this.CustomBar,
			StatusBar: this.StatusBar,
			capsule: this.capsule,
		}
	},
	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) {
		this.listQuery.serviceProviderId = option.serviceProviderId
		this.getUnActiveClubList()
	},
	computed: {
		...mapState(['isManage'])
	},
	methods: {
		getUnActiveClubList() {
			this.SellerService.getUnActiveClubList(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.getUnActiveClubList(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.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)
				})
		},
		// 按钮操作
		handleClickOper(type, club) {
			/**
			 * 1：机构画像 2：商城访问记录 
			 * */
			console.log('type', type)
			switch (type) {
				case 1:
					this.$api.navigateTo(`/pages/seller/club/club-portrait?userId=${club.userId}`)
					break
				case 2:
					this.$api.navigateTo(`/pages/seller/club/club-visit?clubId=${club.clubId}`)
					break
			}
		},
		handleOrderHistory(club) {
			//跳转机构历史订单
			this.$api.setStorage('orderUserInfo', club)
			this.$api.navigateTo(`/pages/seller/order/order-historylist?clubId=${club.clubId}&listType=0`)
		},
		// 拨打电话
		handlePhone(phoneNumber) {
			uni.makePhoneCall({
				phoneNumber: phoneNumber //拨打电话
			})
		},
		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() {
		wxLogin.wxLoginAuthorize()
	}
}
</script>

<style lang="scss">
page {
	height: auto;
}
page,
.container {
	/* padding-bottom: 120upx; */
	background: #ffffff;
}
.container {
	position: relative;
}
.club-main {
	.list {
		width: 100%;
		height: 320rpx;
		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-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;
				}
			}
			.list-content {
				width: 560rpx;
				height: 190rpx;
				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;
						}
					}
					.tags-or {
						display: inline-block;
						height: 36rpx;
						box-sizing: border-box;
						font-size: $font-size-22;
						color: #1890f9;
						text-align: center;
						line-height: 36rpx;
						position: relative;
						.opea-badge {
							position: absolute;
							right: -30rpx;
							top: -15rpx;
						}
						.icon-xiayibu {
							font-size: 22rpx;
							color: #1890f9;
						}
					}
				}
				.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;
					}
				}
			}
		}
		.club-list-bot {
			width: 100%;
			height: 80rpx;
			float: left;
			background-color: #f7f7f7;
			border-radius: 8rpx;
			.btn {
				height: 80rpx;
				box-sizing: border-box;
				line-height: 80rpx;
				padding: 0 20rpx;
				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 28rpx;
					.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: -26rpx;
							right: 35rpx;
						}
						.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);
							}
						}
					}
				}
				&.none {
					&::before {
						background-color: #f7f7f7 !important;
					}
				}
				.iconfont {
					font-size: 30rpx;
					color: #333333;
					margin-right: 5rpx;
				}
			}
		}
	}
}
.nav_active {
	color: $color-system;
}
</style>