caimei-applets-caimei/pages/seller/remarks/customer-list.vue

<template>
	<view class="container product clearfix">
		<view class="club-search clearfix">
			<view class="club-search-form">
				<view class="search-from name">
					<text class="iconfont icon-iconfonticonfontsousuo1"></text>
					<input
						class="input"
						type="text"
						confirm-type="search"
						v-model="listQuery.keyWord"
						@input="onShowClose"
						@confirm="GetProductListInfo"
						placeholder="搜索关键词"
						maxlength="16"
					/>
					<text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
				</view>
			</view>
			<view class="search-from-title"> 请选择一个咨询人，将他所有的咨询记录同步到一个机构中去 </view>
		</view>
		<view class="remarks-content" :style="{ paddingBottom: isIphoneX ? '216rpx' : '168rpx' }">
			<view :class="{ 'tui-order-list': scrollTop >= 0 }" class="clearfix">
				<!-- 空白页 -->
				<view class="empty-container" v-if="isEmpty">
					<image class="empty-container-image" :src="StaticUrl + '/icon/icon-remarks-empty@2x.png'"></image>
					<text class="error-text">暂无任何数据~</text>
				</view>
				<template v-else>
					<!-- 列表 -->
					<view class="tui-remarks-cell  tui-mtop" v-for="(list, index) in remarksList" :key="index">
						<view class="tui-remarks-name" @click.stop="checkedCoustomer(index)">
							<view class="tui-remarks-name-le">{{ list.questionMan }}</view>
							<view class="tui-remarks-name-ri">
								<view
									class="checkbox iconfont"
									:class="[list.ischecked ? 'icon-yixuanze' : 'icon-weixuanze']"
								>
								</view>
							</view>
						</view>
					</view>
					<!--加载loadding-->
					<tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
					<tui-nomore :visible="!pullUpOn" :backgroundColor="'#F7F7F7'" :text="nomoreText"></tui-nomore>
					<!--加载loadding-->
				</template>
			</view>
		</view>
		<!-- 下一步 -->
		<tui-bottom-popup :radius="false" :mask="false" :show="popupShow">
			<view class="tui-popup-box clearfix">
				<view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
					<view class="tui-flex-1">
						<view class="tui-button" @click="handleShowClubpopup">下一步</view>
					</view>
				</view>
			</view>
		</tui-bottom-popup>
		<!-- 添加记录 -->
		<cm-clubpopup
			ref="clubpopup"
			v-if="isClubpopupShow"
			:show="isClubpopupShow"
			@handleChoiceaClub="handleChoiceaClubData"
		>
		</cm-clubpopup>
	</view>
</template>
<script>
import cmClubpopup from '@/components/cm-module/cm-seller/cm-clubpopup'

import { mapState, mapMutations } from 'vuex'
const defaultListQuery = {
	serviceProviderId: 0,
	pageNum: 1,
	pageSize: 10
}
export default {
	components: {
		cmClubpopup
	},
	data() {
		return {
			StaticUrl: this.$Static,
			isIphoneX: this.$store.state.isIphoneX,
			modalButton: [
				{
					text: '取消',
					type: 'gray',
					plain: true //是否空心
				},
				{
					text: '确认',
					customStyle: {
						color: '#fff',
						bgColor: 'linear-gradient(90deg, #F28F31 0%, #E15616 100%)'
					},
					plain: false
				}
			],
			totalRecord: 0,
			popupShow: true,
			popupShow1: false,
			listQuery: Object.assign({}, defaultListQuery),
			remarksList: [],
			scrollTop: 0,
			isEmpty: false,
			loadding: false,
			pullUpOn: true,
			pullFlag: true,
			hasNextPage: false,
			navbarHeight: '',
			nomoreText: '上拉显示更多',
			handleUpdataVisitorId: 0,
			modalType: 1,
			checkedIndex: 0,
			isClubModalShow: false,
			isClubpopupShow: false
		}
	},
	onLoad() {},
	filters: {
		NumFormat: function(value) {
			//处理金额
			if (!value) return '0.00'
			let number = Number(value).toFixed(2)
			return number
		}
	},
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	methods: {
		...mapMutations(['login', 'logout']),
		async initGetStotage() {
			const userInfo = await this.$api.getStorage()
			this.listQuery.serviceProviderId = userInfo.serviceProviderId ? userInfo.serviceProviderId : 0
			this.GetProductListInfo()
		},
		GetProductListInfo() {
			this.remarksList = []
			this.listQuery.pageNum = 1
			this.UserService.getUserClubVisitorList(this.listQuery)
				.then(response => {
					let data = response.data
					if (data.results && data.results.length > 0) {
						this.isEmpty = false
						this.hasNextPage = data.hasNextPage
						this.totalRecord = data.totalRecord
						this.remarksList = data.results.map((el,index)=>{
							el.ischecked = false
							return el
						})
						this.pullFlag = false
						setTimeout(() => {
							this.pullFlag = true
						}, 500)
						if (this.hasNextPage) {
							this.pullUpOn = false
							this.nomoreText = '上拉显示更多'
						} else {
							if (this.remarksList.length < 8) {
								this.pullUpOn = true
							} else {
								this.pullUpOn = false
								this.loadding = false
								this.nomoreText = '已至底部'
							}
						}
					} else {
						this.isEmpty = true
					}
					this.isRequest = true
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		GetOnReachBottomData(index) {
			//上拉加载
			this.listQuery.pageNum += 1
			this.UserService.getUserClubVisitorList(this.listQuery)
				.then(response => {
					let data = response.data
					if (data.results && data.results.length > 0) {
						this.hasNextPage = data.hasNextPage
						this.remarksList = this.remarksList.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 => {
					this.$util.msg(error.msg, 2000)
				})
		},
		handleShowClubpopup() {
			// 点击操作
			this.isClubpopupShow = true
		},
		handleChoiceaTextData(data) {
			// 监听获取
			console.log(data)
			if (this.modalType == 1) {
				this.handleUpdateVisitor(data)
			} else {
				this.handleSaveVisitor(data)
			}
		},
		handleChoiceaClubData(data){
			// 同步机构
			console.log('data',data)
		},
		handleUpdateVisitor(data) {
			// 修改咨询人姓名
			this.UserService.getUserClubVisitorUpdate({
				questionMan: data,
				questionManId: this.handleUpdataVisitorId,
				serviceProviderId: this.listQuery.serviceProviderId
			})
				.then(response => {
					this.$util.msg('修改成功', 2000, true, 'success')
					setTimeout(() => {
						this.GetProductListInfo()
					}, 2000)
				})
				.catch(error => {
					console.log('=======>修改咨询姓名失败~')
				})
		},
		handleSaveVisitor(data) {
			// 添加咨询人
			this.UserService.getUserClubVisitorSave({
				name: data,
				serviceProviderId: this.listQuery.serviceProviderId
			})
				.then(response => {
					let VisitorInfo = {
						questionManId: response.data.questionManId,
						questionMan: response.data.questionMan
					}
					this.$api.setStorage('VisitorInfo', VisitorInfo)
					setTimeout(() => {
						this.$api.navigateTo('/pages/seller/remarks/record-list')
					}, 1000)
				})
				.catch(error => {
					console.log('=======>添加咨询人失败~')
				})
		},
		onShowClose() {
			//输入框失去焦点时触发
			if (this.listQuery.keyWord != '') {
				this.isShowClose = true
			} else {
				this.isShowClose = false
				this.listQuery.pageNum = 1
				this.GetProductListInfo()
			}
		},
		delInputText() {
			//清除输入框内容
			this.listQuery.keyWord = ''
			this.isShowClose = false
			this.listQuery.pageNum = 1
			this.GetProductListInfo()
		},
		checkedCoustomer(idx) {
			// 选择机构
			this.checkedIndex = idx
			this.remarksList.forEach((el, index) => {
				if (this.checkedIndex == index) {
					el.ischecked = !el.ischecked
				} else {
					el.ischecked = false
				}
			})
		},
	},
	onPageScroll(e) {
		//实时获取到滚动的值
	},
	onReachBottom() {
		if (this.hasNextPage) {
			this.loadding = true
			this.pullUpOn = true
			this.GetOnReachBottomData()
		}
	},
	onPullDownRefresh() {
		setTimeout(() => {
			this.listQuery.pageNum = 1
			uni.stopPullDownRefresh()
		}, 200)
	},
	onShow() {
		this.initGetStotage()
	}
}
</script>

<style lang="scss">
@import '@/uni.scss';
page {
	background: #FFFFFF;
}
.empty-container {
	z-index: 99;
}
.club-search {
	width: 100%;
	height: 192rpx;
	background: #ffffff;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	.search-from-title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
		font-size: $font-size-26;
		float: left;
		color: #1890f9;
		background-color: #f2f9ff;
		font-weight: normal;
	}
	.club-search-form {
		width: 100%;
		height: 112rpx;
		background: #ffffff;
		box-sizing: border-box;
		padding: 24rpx;
		float: left;
		.search-from {
			width: 100%;
			height: 100%;
			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;
			}
		}
	}
}
.remarks-content {
	width: 100%;
	height: auto;
	position: relative;
	padding: 0;
	box-sizing: border-box;
	padding: 24rpx;
	padding-top: 212rpx;
	.empty-container-image {
		width: 260rpx;
		height: 260rpx;
		margin-top: -300rpx;
	}
	.tui-remarks-cell {
		width: 100%;
		border-radius: 16rpx;
		background: #ffffff;
		box-sizing: border-box;
		.tui-remarks-name {
			width: 100%;
			height: 100rpx;
			border-bottom: 1px solid #e1e1e1;
			.tui-remarks-name-le {
				float: left;
				line-height: 100rpx;
				font-size: $font-size-28;
				color: #333333;
				text-align: left;
				font-weight: bold;
			}
			.tui-remarks-name-ri {
				width: 40rpx;
				height: 100%;
				float: right;
				.checkbox {
					width: 40rpx;
					line-height: 128rpx;
					float: right;
					box-sizing: border-box;
					text-align: center;
					text-decoration: none;
					-webkit-tap-highlight-color: transparent;
					overflow: hidden;
					font-size: $font-size-34;
					&.icon-weixuanze {
						color: #b2b2b2;
					}
					&.icon-yixuanze {
						color: #e15616;
					}
				}
			}
		}
		.tui-remarks-button {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			box-sizing: border-box;
			text-align: center;
			font-size: $font-size-30;
			float: left;
			font-weight: bold;
			color: #1890f9;
		}
	}
}
.tui-popup-box {
	position: relative;
	box-sizing: border-box;
	min-height: 100rpx;
	padding: 6rpx 24rpx;
	.tui-popup-content {
		padding-top: 30rpx;
	}
}
.tui-popup-btn {
	width: 100%;
	height: auto;
	float: left;
	box-sizing: border-box;
	margin-top: 30rpx;
	.tui-button {
		width: 600rpx;
		height: 88rpx;
		background: $btn-confirm;
		line-height: 88rpx;
		text-align: center;
		color: #ffffff;
		font-size: $font-size-28;
		border-radius: 44rpx;
		margin: 0 auto;
	}
	.tui-button-text {
		width: 600rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		color: #e15616;
		font-size: $font-size-26;
		margin: 0 auto;
	}
}
</style>