！

pages/seller/club/club-remind.vue

@@ -0,0 +1,858 @@
+<template>
+	<view class="container club clearfix">
+		<view class="club-search clearfix" :style="{ paddingTop: StatusBar + 'px' }">
+			<view class="search-top" :style="{ height: CustomBar - StatusBar + 'px' }">
+				<view
+					class="search-icon"
+					:style="{
+						width: CustomBar - StatusBar + 'px',
+						height: CustomBar - StatusBar + 'px',
+						lineHeight: CustomBar - StatusBar + 'px;'
+					}"
+				>
+					<text v-if="isShowIndex" @click="handleNavigateIndex" class="iconfont icon-shouye"></text>
+					<text v-else @click="handleNavigateBack" class="iconfont icon-fanhui"></text>
+				</view>
+				<view class="title">机构列表</view>
+			</view>
+			<view class="search-main">
+				<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="getList"
+						placeholder="机构名称/联系人/手机号"
+						maxlength="16"
+						:style="{ lineHeight: capsule.height + 'px' }"
+					/>
+					<text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></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-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.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">
+									<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">
+									<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-tianxie"></text> 填写咨询记录
+							</view>
+							<view class="btn" @click.stop="handleClickOper(3, club)">
+								<text class="iconfont icon-shangcheng"></text> 商城访问记录
+							</view>
+							<view
+								class="btn"
+								@click.stop="handleShowBubble(club, index)"
+							>
+								<text class="iconfont icon-gengduo2"></text>
+								<view
+									class="btn-bubble"
+									:style="{
+										height: isManage ? '180rpx' : '120rpx',
+										top: isManage ? '-180rpx' : '-120rpx'
+									}"
+									v-if="currentIndex === index && club.bubble"
+								>
+									<view class="btn-view border" @click.stop="handleClickOper(6, club)">
+										<text class="iconfont icon-tianxie"></text> 全部咨询记录
+									</view>
+								</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'
+import authorize from '@/common/config/authorize.js'
+import wxLogin from '@/common/config/wxLogin.js'
+
+const defaultListQuery = {
+	userIdentity: '',
+	name: '',
+	pageNum: 1,
+	pageSize: 10,
+	spId: 0,
+	status: '',
+	type: 1,
+	groupServiceId: 0
+}
+export default {
+	components: {
+	},
+	data() {
+		return {
+			listTab: [{ name: '个人机构' }, { name: '资质机构' }],
+			listQuery: Object.assign({}, defaultListQuery),
+			isShowClose: false,
+			isEmpty: false,
+			nomoreText: '上拉显示更多',
+			pageNum: 1,
+			pageSize: 10,
+			hasNextPage: false,
+			loadding: false,
+			pullUpOn: true,
+			pullFlag: true,
+			tabCurrentNum: 0,
+			tabCurrentIndex: 0,
+			clubList: [],
+			isIphoneX: this.$store.state.isIphoneX,
+			CustomBar: this.CustomBar,
+			StatusBar: this.StatusBar,
+			capsule: this.capsule,
+			show_index: 0, //控制显示那个组件
+			rightDrawer: false,
+			salesParams: {
+				choseServiceId: 0,
+				clubId: 0,
+				spId: 0
+			},
+			isShowIndex: false,
+			currentIndex: 0
+		}
+	},
+	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) {
+		if (option.type === 'wechat') {
+			this.isShowIndex = true
+		}
+	},
+	computed: {
+		...mapState(['isManage'])
+	},
+	methods: {
+		async initGetStotage() {
+			// 初始化
+			const userInfo = await this.$api.getStorage()
+			this.listQuery.spId = userInfo.serviceProviderId ? userInfo.serviceProviderId : 0
+			this.salesParams.choseServiceId = userInfo.serviceProviderId ? userInfo.serviceProviderId : 0
+			this.getList()
+		},
+		async getList() {
+			try{
+				this.listQuery.pageNum = 1
+				const res = await this.SellerService.GetSellerClubList(this.listQuery)
+				const data = res.data
+				if (data.list && data.list.length > 0) {
+					this.isEmpty = false
+					this.hasNextPage = 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){
+				//TODO handle the exception
+				this.$util.msg(error.msg, 2000)
+			}
+		},
+		async getOnReachBottomData() {
+			try{
+				this.listQuery.pageNum++
+				const res = await this.SellerService.GetSellerClubList(this.listQuery)
+				const data = res.data
+				if (data.list && data.list.length > 0) {
+					this.hasNextPage = 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){
+				//TODO handle the exception
+				this.$util.msg(error.msg, 2000)
+			}
+		},
+		// 按钮操作
+		handleClickOper(type, club) {
+			/**
+			 * 1：机构画像 2：填写咨询记录 3：商城访问记录 4：修改资料 5：更换协销
+			 * */
+			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/remarks/add?userId=${club.userId}`)
+					break
+				case 3:
+					this.$api.navigateTo(`/pages/seller/club/club-visit?clubId=${club.clubId}`)
+					break
+				case 4:
+					this.handleReturnPath(club)
+					break
+				case 5:
+					this.handleReplaceClub(club)
+					break
+				case 6:
+					this.$api.navigateTo(`/pages/seller/remarks/record-club-list?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 //拨打电话
+			})
+		},
+		onShowClose() {
+			//输入框失去焦点时触发
+			if (this.listQuery.name != '') {
+				this.isShowClose = true
+			} else {
+				this.isShowClose = false
+			}
+		},
+		delInputText() {
+			//清除输入框内容
+			this.listQuery.name = ''
+			this.isShowClose = false
+		},
+		showBadge(n) {
+			let num = ''
+			if (n > 100) {
+				num = 99
+			} else {
+				num = n
+			}
+			return num
+		},
+		handleNavigateBack() {
+			this.$api.navigateBack(1)
+		},
+		handleNavigateIndex() {
+			this.$api.navigateTo('/pages/seller/index/index')
+		},
+		handleShowBubble(club, index) {
+			this.currentIndex = index
+			club.bubble = !club.bubble
+		}
+	},
+	onReachBottom() {
+		if (this.hasNextPage) {
+			this.loadding = true
+			this.pullUpOn = true
+			this.getOnReachBottomData()
+		}
+	},
+	onShow() {
+		wxLogin.wxLoginAuthorize()
+		this.initGetStotage()
+	}
+}
+</script>
+
+<style lang="scss">
+page {
+	height: auto;
+}
+page,
+.container {
+	/* padding-bottom: 120upx; */
+	background: #FFFFFF;
+}
+.container {
+	position: relative;
+}
+.club-search {
+	height: auto;
+	width: 100%;
+	background: #ffffff;
+	display: flex;
+	flex-direction: column;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 99;
+	.search-top {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		box-sizing: border-box;
+		position: relative;
+		.title {
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%);
+		}
+		.search-icon {
+			text-align: center;
+			float: left;
+			.icon-fanhui {
+				font-size: 44rpx;
+				color: #333333;
+			}
+			.icon-shouye {
+				font-size: 44rpx;
+				color: #333333;
+			}
+		}
+	}
+	.search-main {
+		width: 100%;
+		height: 80rpx;
+		box-sizing: border-box;
+		padding: 10rpx 24rpx;
+		.search-from {
+			background: #f7f7f7;
+			position: relative;
+			width: 642rpx;
+			height: 100%;
+			padding-right: 60rpx;
+			box-sizing: border-box;
+			padding: 0 10rpx;
+			float: left;
+			border-radius: 30rpx;
+			.icon-iconfonticonfontsousuo1 {
+				width: 60rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				text-align: center;
+				display: block;
+				font-size: $font-size-38;
+				float: left;
+				color: #999999;
+			}
+			.input {
+				width: 520rpx;
+				height: 100%;
+				float: left;
+				color: $text-color;
+				font-size: $font-size-24;
+				box-sizing: border-box;
+				padding-left: 10rpx;
+			}
+			.icon-shanchu1 {
+				font-size: $font-size-32;
+				color: #999999;
+				position: absolute;
+				width: 60rpx;
+				height: 60rpx;
+				line-height: 60rpx;
+				text-align: center;
+				top: 0;
+				right: 0;
+				z-index: 10;
+			}
+		}
+		.search-btn {
+			width: 60rpx;
+			height: 60rpx;
+			line-height: 60rpx;
+			text-align: center;
+			font-size: $font-size-28;
+			color: $color-system;
+			float: left;
+			background: #ffffff;
+			.icon-shaixuan {
+				font-size: 44rpx;
+				color: #333333;
+			}
+		}
+	}
+
+	.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;
+				}
+			}
+		}
+	}
+	.search-smalltab {
+		width: 100%;
+		height: 104rpx;
+		background: #ffffff;
+		box-sizing: border-box;
+		padding: 20rpx 24rpx;
+		.tab-item {
+			width: 168rpx;
+			height: 64rpx;
+			line-height: 64rpx;
+			text-align: center;
+			color: $text-color;
+			font-size: $font-size-28;
+			float: left;
+			border-radius: 32rpx;
+			border: 1px solid #b2b2b2;
+			margin-right: 32rpx;
+			&.current {
+				color: #ff5b00;
+				border: 1px solid #ff5b00;
+			}
+		}
+	}
+}
+.club-main {
+	width: 100%;
+	padding-top: 248rpx;
+	.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-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: 180rpx;
+				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;
+			margin-top: 20rpx;
+			.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: 120rpx;
+						background: rgba(51, 51, 51, 0.8);
+						position: absolute;
+						top: -120rpx;
+						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: 60rpx;
+							box-sizing: border-box;
+							line-height: 60rpx;
+							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;
+				}
+			}
+		}
+	}
+}
+.tabBar {
+	width: 100%;
+	height: 98rpx;
+	background: #fff;
+	border-top: 1px solid #e5e5e5;
+	position: fixed;
+	bottom: 0px;
+	left: 0px;
+	right: 0px;
+	z-index: 99;
+	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>