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

<template>
	<view class="container product clearfix">
		<view class="container-fiexd-top">
			<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="getUserClubVisitorRecordlist"
							placeholder="搜索关键词"
							maxlength="16"
						/>
						<text class="iconfont icon-shanchu1" v-if="isShowClose" @click="delInputText()"></text>
					</view>
					<view class="search-screen" @click="showScreenDrawer">
						<text class="iconfont icon-gengduo1"></text> 筛选
					</view>
				</view>
			</view>
			<view class="fiexd-top-title">
				<view class="top-left">
					共 <text>{{ totalRecord }}</text> 条咨询记录
				</view>
				<view class="top-right">
					<view class="top-right-btn" @click="handlerGoReportList">查看报备记录</view>
				</view>
			</view>
		</view>
		<view class="remarks-content" :style="{ paddingBottom: isIphoneX ? '220rpx' : '148rpx' }">
			<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 clearfix"
						v-for="(remark, index) in remarksList"
						:key="index"
						:class="{
							orange: remark.followup == 1,
							blue: remark.followup == 2,
							grey: remark.followup == 3
						}"
						@click.stop="details(remark.remarksId)"
					>
						<view class="tui-remarks-title">
							<view class="tui-remarks-title-bot">
								<view class="tui-remarks-text-view">
									<view class="tui-remarks-text h"
										><text class="iconfont icon-bianji"></text>记录人：{{ remark.recordName }}</view
									>
									<view class="tui-remarks-text y" v-if="remark.followup">
										<text
											:class="{
												orange: remark.followup == 1,
												blue: remark.followup == 2,
												grey: remark.followup == 3
											}"
										>
											{{ remark.followup | followupFilters }}
										</text>
									</view>
								</view>
								<view class="tui-remarks-text-view">
									<view class="tui-remarks-text h" v-if="listQuery.manager >= 0">
										<text class="iconfont icon-guanliyuan"></text>管理员：{{
											remark.leaderName ? remark.leaderName : ''
										}}
									</view>
									<view class="tui-remarks-text y"> {{ remark.addDate }} </view>
								</view>
							</view>
						</view>
						<view class="tui-remarks-name">
							<view class="tui-remarks-name-text h">
								咨询人：{{ remark.questionMan ? remark.questionMan : '' }}
							</view>
							<view class="tui-remarks-name-text y">
								咨询类别：{{ remark.consultBack ? remark.consultBack : '无' }}
							</view>
						</view>
						<view class="tui-remarks-name none" v-if="remark.satisfied">
							<view class="tui-remarks-name-text h">
								意向程度：<text class="red">{{ remark.satisfied | intenActionsFilters }}</text>
							</view>
							<view class="tui-remarks-name-text y" v-if="remark.status">
								报备状态：<text
									:class="{
										reviewed: remark.status == 1,
										approved: remark.status == 2,
										failed: remark.status == 3
									}"
									>{{ remark.status | statusFilters }}</text
								>
							</view>
						</view>
						<view class="tui-remarks-content">
							<text
								class="tui-remarks-span"
								v-for="(label, labelIndex) in remark.remarks"
								:key="labelIndex"
							>
								{{ label.label }}
							</text>
						</view>
						<view
							class="tui-remarks-button"
							v-if="remark.createServiceProviderId === listQuery.serviceProviderId"
						>
							<view class="btn edit" @click.stop="handEditRemark(remark.remarksId)">修改</view>
							<view class="btn del" @click.stop="deleteRemark(remark.remarksId)">删除</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 cancel" @click="handleShowFereepopup">添加记录</view>
						<view class="tui-button confirm" @click="handleAddRecord">新增咨询人</view>
					</view>
					<view class="tui-flex-1">
						<view class="tui-button-text" @click="handleShowClubpopup">同步记录至机构 ></view>
					</view>
				</view>
			</view>
		</tui-bottom-popup>
		<!-- 筛选抽屉 -->
		<cm-screenDrawer
			ref="screendrawer"
			:popupType="2"
			:rightDrawer="isScreenDrawer"
			@handSearchConfirm="handSearchConfirmData"
		/>
		<!-- 咨询人列表弹窗 -->
		<cm-refereepopup
			ref="cmrefereepopup"
			v-if="isClubConsultShow"
			:show="isClubConsultShow"
			@handleChoiceaConsult="handleChoiceaConsultData"
		/>
		<!-- 弹窗提示 -->
		<tui-modal
			:show="modal"
			@click="handleClick"
			@cancel="hideMobel"
			:content="contentModalText"
			:button="modalButton"
			color="#333"
			:size="32"
			shape="circle"
			:maskClosable="false"
		/>

		<!-- 操作弹窗 -->
		<cm-clubmodal
			ref="clubModal"
			v-if="isClubModalShow"
			:show="isClubModalShow"
			:modalType="2"
			@handleChoiceaText="handleChoiceaTextData"
		/>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import cmRefereepopup from '../components/cm-refereepopup'
import cmClubmodal from '../components/cm-clubmodal'
import cmScreenDrawer from '../components/cm-screen-drawer'

const defaultListQuery = {
	startAddTime: '',
	endAddTime: '',
	consult: '',
	pinceSensitve: 0, //价格敏感度
	satisfied: 0, // 意向程度
	followup: 0, // 跟进状态
	leaderId: 0,
	groupId: 0,
	manager: 0,
	serviceProviderId: 0,
	pageNum: 1,
	pageSize: 10
}
export default {
	components: {
		cmRefereepopup,
		cmClubmodal,
		cmScreenDrawer
	},
	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%, #FF5B00 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: '上拉显示更多',
			contentModalText: '', //操作文字提示语句
			modal: false,
			questionMan: '',
			questionManId: '',
			handleRemarksId: 0,
			isClubConsultShow: false,
			isClubModalShow: false,
			isScreenDrawer: false
		}
	},
	onLoad(option) {},
	filters: {
		statusFilters(value) {
			// 订单来源
			const map = {
				1: '待审核',
				2: '审核通过',
				3: '审核未通过'
			}
			return map[value]
		},
		NumFormat: function(value) {
			//处理金额
			if (!value) return '0.00'
			let number = Number(value).toFixed(2)
			return number
		},
		followupFilters(value) {
			// 订单来源
			const map = {
				1: '跟进中',
				2: '跟进完成',
				3: '已放弃'
			}
			return map[value]
		},
		intenActionsFilters(value) {
			// 意向
			// 意向
			if (value) {
				const map = {
					1: '意向强烈',
					2: '意向一般',
					3: '意向平淡',
					4: '随便看看'
				}
				return map[value]
			} else {
				return ''
			}
		}
	},
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	methods: {
		...mapMutations(['login', 'logout']),
		async init() {
			const userInfo = await this.$api.getStorage()
			this.listQuery.serviceProviderId = userInfo.serviceProviderId ? userInfo.serviceProviderId : 0
			// const VisitorInfo = await this.$api.getComStorage('VisitorInfo')
			// this.questionMan = VisitorInfo.questionMan
			// this.listQuery.questionManId = VisitorInfo.questionManId
			this.getUserClubVisitorRecordlist()
		},
		getUserClubVisitorRecordlist() {
			this.remarksList = []
			this.listQuery.pageNum = 1
			this.UserService.getUserClubVisitorRecordlist(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
						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 => {
					console.log('=======>查询列表异常~')
				})
		},
		GetOnReachBottomData(index) {
			//上拉加载
			this.listQuery.pageNum += 1
			this.UserService.getUserClubVisitorRecordlist(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 => {
					console.log('=======>查询列表异常~')
				})
		},
		deleteRemark(remarksId) {
			this.handleRemarksId = remarksId
			this.modal = true
			this.contentModalText = '确定删除这条记录吗？'
		},
		handEditRemark(remarksId) {
			//跳转修改画像
			this.$api.navigateTo(
				`/pages/seller/remarks/add-record?type=edit&remarksId=${remarksId}&questionMan=${this.questionMan}`
			)
		},
		handSearchConfirmData(data) {
			//确定筛选
			this.listQuery.startAddTime = data.startAddTime
			this.listQuery.endAddTime = data.endAddTime
			this.listQuery.consult = data.consult
			this.listQuery.leaderId = data.leaderId
			this.listQuery.groupId = data.groupId
			this.listQuery.pinceSensitve = data.pinceSensitve
			this.listQuery.satisfied = data.satisfied
			this.listQuery.followup = data.followup
			this.listQuery.newDeal = data.newDeal
			this.listQuery.status = data.status
			this.getUserClubVisitorRecordlist()
		},
		handleShowClubpopup() {
			//跳转选择咨询人
			this.$api.navigateTo('/pages/seller/remarks/customer-list')
		},
		handleChoiceaConsultData(data) {
			// 选择咨询人添加记录
			//跳转添加记录
			this.$api.navigateTo(
				`/pages/seller/remarks/add-record?type=add&questionManId=${data.questionManId}&questionMan=${
					data.questionMan
				}`
			)
		},
		handleAddRecord() {
			// 新增咨询人显示弹框
			this.isClubModalShow = true
		},
		handleShowFereepopup() {
			// 显示咨询人弹窗
			this.isClubConsultShow = true
		},
		handleChoiceaTextData(data) {
			// 新增咨询人监听时间
			console.log('data', data)
			this.handleSaveVisitor(data)
		},
		async handleSaveVisitor(name) {
			// 添加咨询人
			try {
				let params = { name: name, serviceProviderId: this.listQuery.serviceProviderId }
				const res = await this.UserService.getUserClubVisitorSave(params)
				const data = res.data
				setTimeout(() => {
					this.$api.navigateTo(
						`/pages/seller/remarks/add-record?questionManId=${data.questionManId}&questionMan=${
							data.questionMan
						}&remarksId=${data.remarksId}`
					)
				}, 1000)
			} catch (error) {
				console.log('=======>添加咨询人失败~')
			}
		},
		handleClick(e) {
			//取消收藏
			if (e.index == 1) {
				this.handleDeleteUserLike()
			}
			this.modal = false
		},
		handleDeleteUserLike() {
			//操作删除资料备注
			this.UserService.getUserRemarksVisitDelete({
				remarksId: this.handleRemarksId
			})
				.then(response => {
					this.$util.msg('已删除', 2000, true, 'success')
					setTimeout(() => {
						this.getUserClubVisitorRecordlist()
					}, 2000)
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		showScreenDrawer() {
			//显示筛选抽屉
			this.isScreenDrawer = true
		},
		onShowClose() {
			//输入框失去焦点时触发
			if (this.listQuery.keyWord != '') {
				this.isShowClose = true
			} else {
				this.isShowClose = false
				this.listQuery.pageNum = 1
				this.getUserClubVisitorRecordlist()
			}
		},
		delInputText() {
			//清除输入框内容
			this.listQuery.keyWord = ''
			this.isShowClose = false
			this.listQuery.pageNum = 1
			this.getUserClubVisitorRecordlist()
		},
		hideMobel() {
			this.modal = false
		},
		details(remarksId) {
			this.$api.navigateTo(`/pages/seller/remarks/record-details?remarksId=${remarksId}`)
		},
		handlerGoReportList() {
			this.$api.navigateTo(`/pages/seller/remarks/report-visitor-list`)
		}
	},
	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.init()
	}
}
</script>

<style lang="scss">
@import '@/uni.scss';
page {
	background: #f7f7f7;
}
.empty-container {
	z-index: 99;
}
.container-fiexd-top {
	width: 100%;
	height: 208rpx;
	background: #f5f5f5;
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 982;
	.club-search {
		width: 100%;
		height: 112rpx;
		padding: 24rpx;
		background: #ffffff;
		box-sizing: border-box;
		.search-screen {
			width: 152rpx;
			height: 64rpx;
			float: right;
			box-sizing: border-box;
			padding: 0 20rpx;
			border: 1px solid #999999;
			line-height: 64rpx;
			border-radius: 32rpx;
			color: #333333;
			text-align: center;
			font-size: 28rpx;
			.icon-gengduo1 {
				font-size: 30rpx;
				margin-right: 10rpx;
			}
		}
		.search-from {
			width: 526rpx;
			height: 100%;
			background: #f7f7f7;
			border-radius: 32rpx;
			float: left;
			position: relative;
			.input {
				width: 420rpx;
				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;
			}
		}
	}
	.fiexd-top-title {
		width: 100%;
		height: 96rpx;
		box-sizing: border-box;
		padding: 24rpx;
		.top-left {
			float: left;
			line-height: 48rpx;
			font-size: 26rpx;
			color: #666666;
			text {
				color: #ff5b00;
			}
		}
		.top-right {
			float: right;
			.top-right-btn {
				height: 48rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				border: 1px solid #ff5b00;
				font-size: 26rpx;
				text-align: center;
				line-height: 48rpx;
				color: #ff5b00;
				border-radius: 24rpx;
			}
		}
	}
}
.remarks-content {
	width: 100%;
	height: auto;
	position: relative;
	padding: 0;
	box-sizing: border-box;
	padding: 24rpx;
	padding-top: 232rpx;
	.empty-container-image {
		width: 260rpx;
		height: 260rpx;
		margin-top: -300rpx;
	}
	.tui-remarks-cell {
		width: 100%;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		background: #ffffff;
		box-sizing: border-box;
		padding: 0 24rpx 24rpx 24rpx;
		&.orange {
			background: #ffffff linear-gradient(180deg, #ffede5 0%, rgba(255, 255, 255, 0) 50%);
		}
		&.blue {
			background: #ffffff linear-gradient(180deg, #deefff 0%, rgba(255, 255, 255, 0) 50%);
		}
		&.grey {
			background: #ffffff linear-gradient(180deg, #ececec 0%, rgba(255, 255, 255, 0) 50%);
			color: #999999;
		}
		.tui-remarks-title {
			width: 100%;
			height: auto;
			box-sizing: border-box;
			padding: 20rpx 0;
			border-bottom: 1px solid #e1e1e1;
			float: left;
			.tui-remarks-title-top {
				width: 100%;
				height: 56rpx;
				line-height: 56rpx;
				.tui-remarks-time {
					float: left;
					&.tt {
						width: 50%;
						font-size: $font-size-32;
						color: #333333;
						text-align: left;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						line-clamp: 1;
						-webkit-box-orient: vertical;
						font-weight: bold;
					}
					&.sm {
						width: 50%;
						font-size: $font-size-26;
						color: #999999;
						text-align: right;
						.orange {
							display: inline-block;
							padding: 0 15rpx;
							border-radius: 24rpx;
							line-height: 48rpx;
							font-size: 24rpx;
							background-color: #ff5b00;
							color: #ffffff;
							text-align: center;
						}
						.blue {
							display: inline-block;
							padding: 0 15rpx;
							border-radius: 24rpx;
							line-height: 48rpx;
							font-size: 24rpx;
							background-color: #1890f9;
							color: #ffffff;
							text-align: center;
						}
						.grey {
							display: inline-block;
							padding: 0 15rpx;
							border-radius: 24rpx;
							line-height: 48rpx;
							font-size: 24rpx;
							background-color: #e1e1e1;
							color: #999999;
							text-align: center;
						}
					}
				}
			}
			.tui-remarks-title-bot {
				width: 100%;
				height: auto;
				.tui-remarks-text-view {
					width: 100%;
					height: 48rpx;
					.tui-remarks-text {
						width: 50%;
						height: 48rpx;
						line-height: 48rpx;
						box-sizing: border-box;
						text-align: left;
						font-size: $font-size-26;
						color: #999999;
						float: left;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						line-clamp: 1;
						-webkit-box-orient: vertical;
						&.a {
							width: 100%;
						}
						&.y {
							text-align: right;
							.orange {
								display: inline-block;
								padding: 0 15rpx;
								border-radius: 24rpx;
								line-height: 48rpx;
								font-size: 24rpx;
								background-color: #ff5b00;
								color: #ffffff;
								text-align: center;
							}
							.blue {
								display: inline-block;
								padding: 0 15rpx;
								border-radius: 24rpx;
								line-height: 48rpx;
								font-size: 24rpx;
								background-color: #1890f9;
								color: #ffffff;
								text-align: center;
							}
							.grey {
								display: inline-block;
								padding: 0 15rpx;
								border-radius: 24rpx;
								line-height: 48rpx;
								font-size: 24rpx;
								background-color: #e1e1e1;
								color: #ffffff;
								text-align: center;
							}
						}
					}
				}
			}
		}
		.tui-remarks-name {
			width: 100%;
			height: 48rpx;
			line-height: 48rpx;
			font-size: $font-size-26;
			color: #666666;
			text-align: left;
			margin-bottom: 10rpx;
			margin-top: 20rpx;
			float: left;
			&.none {
				margin-top: 0;
				margin-bottom: 20rpx;
			}
			.tui-remarks-name-text {
				height: 48rpx;
				box-sizing: border-box;
				text-align: left;
				font-size: $font-size-26;
				color: #333333;
				float: left;
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
				.red {
					color: #f94b4b;
				}
				&.a {
					width: 100%;
				}
				&.h {
					width: 40%;
					padding-right: 24rpx;
				}
				&.y {
					width: 60%;
					padding-left: 24rpx;
					.reviewed {
						color: #ff5b00;
					}
					.approved {
						color: #0db26d;
					}
					.failed {
						color: #f94b4b;
					}
				}
			}
		}
		.tui-remarks-content {
			width: 100%;
			height: auto;
			.tui-remarks-span {
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
				padding: 0 20rpx;
				background-color: #f7f7f7;
				font-size: $font-size-26;
				color: #666666;
				border-radius: 25rpx;
				display: inline-block;
				margin-right: 24rpx;
				margin-bottom: 24rpx;
				&:nth-child(4n) {
					margin-right: none;
				}
			}
		}
		.tui-remarks-button {
			width: 100%;
			height: 68rpx;
			border-top: 1px solid #e1e1e1;
			padding-top: 20rpx;
			.btn {
				width: 50%;
				line-height: 48rpx;
				box-sizing: border-box;
				text-align: center;
				font-size: $font-size-34;
				float: left;
				font-weight: bold;
				&.edit {
					color: #1890f9;
					border-right: 1px solid #e1e1e1;
				}
				&.del {
					color: #f94b4b;
				}
			}
		}
	}
}
.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-flex-1 {
		width: 100%;
		height: 84rpx;
		display: flex;
		.tui-button {
			flex: 1;
			line-height: 84rpx;
			font-size: $font-size-28;
			text-align: center;
			border-radius: 42rpx;
			padding: 0;
			margin: 0 15rpx;
			box-sizing: border-box;
			&.cancel {
				background: #ffe6dc;
				color: #ff5b00;
			}
			&.disabled {
				background: #e1e1e1;
				color: #ffffff;
			}
			&.confirm {
				background: $btn-confirm;
				color: #ffffff;
			}
		}
		.tui-button-text {
			width: 600rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			color: #ff5b00;
			font-size: $font-size-26;
			margin: 0 auto;
			margin-top: 15rpx;
		}
	}
}
</style>