renshouH5/mine/clientManage/clientManage.vue

<template>
	<view>
		<view class="tab ddflex">
			<view class="tab-item fflex" :class="tabIndex==1?'tab-item-active':''" @click="tabChange(1)">我的客户</view>
			<view class="tab-item fflex" :class="tabIndex==2?'tab-item-active':''" @click="tabChange(2)">客户动态</view>
		</view>
		<view class="top-fixed" v-if="tabIndex==1">
			<view class="search-box ddflex">
				<view class="search-input ddflex fflex">
					<image src="/static/images/ssico.png"></image>
					<input @confirm="searchFn" confirm-type="search" @input="searchFn" v-model="searchVal" class="fflex"
						placeholder="请输入客户昵称或真实姓名" />
				</view>
				<!-- <view style="margin: 0rpx 0rpx 0 20rpx;color: #2A82FD;text-align: right;font-size: 26rpx;" @click="jumpUrl('/mine/allDynamic/allDynamic')">客户动态></view> -->
			</view>
			<view class="filter ddflex">
				<view :class="'filter-item fflex ddflex '+(filterType==2&&isShowPop?'f-active':'')" @click="changeFilterType(2)">
					<text style="max-width: 150rpx;" class="tover">{{stateIndex!=-1?stateList[stateIndex].label:'智能筛选'}}</text>
					<image class="filter-item-icon" :style="filterType==2&&isShowPop?'transform: rotate(180deg);':''" src="../static/images/down.png"></image>
				</view>
				<view :class="'filter-item fflex ddflex '+(filterType==1&&isShowPop?'f-active':'')" @click="changeFilterType(1)">
					筛选
					<image class="filter-item-icon" :style="filterType==1&&isShowPop?'transform: rotate(180deg);':''" src="../static/images/down.png"></image>
				</view>
			</view>
		</view>
		
		
		<view class="ceng" :style="'top:calc(' +popBottom+' + '+(isShowPop?270:0)+'rpx' " v-if="isShowPop" @click="hidePop()"></view>
		
		<view class="hx-pop" :style="'top:calc(' +popBottom+' + '+(isShowPop?270:0)+'rpx' ">
			<view class="pop-con" v-if="filterType==1">
				<view class="pop-list">
					<view v-for="(item, index) in dateList" :key="index" style="margin-bottom: 30rpx;">
						<view>{{ item.title }}</view>
						<view class="ddflex">
							<view :class="'opt' + (it.isActive? ' opt-active' : '')" v-for="(it, idx) in item.option" :key="idx" @click="switchFilterType(index,idx)">
								<view>{{ it.label }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="pop-con" v-if="filterType==2">
				<view class="pop-list">
					<view :class="'li' + (stateIndex == index ? ' active' : '')" v-for="(item, index) in stateList" :key="index" @click="switchType(index)">
						{{ item.label }}
					</view>
				</view>
			</view>
			<view class="pop-btn ddflex" v-if="filterType!=2">
				<view @click="reset">重置</view>
				<view class="fflex" @click="confirm">确定</view>
			</view>
		</view>
		
		<view style="height: 290rpx;" v-if="tabIndex==1"></view>
		<view style="height: 120rpx;" v-if="tabIndex==2"></view>
		<!-- 订单列表 -->
		<block v-if="tabIndex==1">
			<view style="position: relative;overflow: hidden;" v-if="dataList.length>0">
				<view class="register-box" v-for="item,index in dataList" :key="index" @click="jumpUrl('/mine/clientDetail/clientDetail?id='+item.id)">
					<view class="register-title dflex fflex">
						<image class="register-title-icon" :src="item.avatar?item.avatar:'/static/images/userimg.png'"></image>
						<view class="flex" style="min-width: 0;">
							<view class="ddflex">
								<view class="card-name fflex tover">{{item.nickName?item.nickName:''}}</view>
								<view v-if="item.mobile">
									<image style="width: 140rpx;height: 64rpx;margin-left: 20rpx;" src="/mine/static/images/lx.png" @click.stop="goPhone(item.mobile)"></image>
								</view>
							</view>
							<view class="card-name" style="line-height: 48rpx;margin-bottom: 10rpx;" v-if="item.realName">({{item.realName}})</view>
							<view class="ddflex" style="margin-top: 4rpx;">
								<block v-if="item.customTypeName&&item.customTypeName.length>0">
									<view class="card-tag" v-for="it,idx in item.customTypeName" :key="idx+'s'">{{it}}</view>
								</block>
								<block v-if="item.labelName&&item.labelName.length>0">
									<view class="card-tag card-tag-t" v-for="it,idx in item.labelName" :key="idx+'l'">{{it}}</view>
								</block>
							</view>
							<view class="ddflex" style="font-size: 24rpx;color: #999;font-weight: 400;margin: 20rpx 0;">
								<text>保单</text><text style="color: #000000;">{{item.warrantyCount?item.warrantyCount:0}}</text>
								<view class="card-line" style="height: 23rpx;margin: 0 10rpx;"></view>
								<text>共计保费</text><text style="color: #FF5700;">{{item.warrantyMoney?item.warrantyMoney:0}}元</text>
							</view>
						</view>
					</view>
					<!-- <view class="ddflex" style="margin-top: 41rpx;font-size: 24rpx;padding: 0 30rpx;">
						<view class="ddflex fflex">
							<view style="color: #999;margin-right: 16rpx;">服务策略</view>
							<view style="color: #333333;">刺激消费频率</view>
						</view>
						<view v-if="item.mobile">
							<image style="width: 140rpx;height: 64rpx;margin-left: 20rpx;" src="/mine/static/images/lx.png" @click.stop="goPhone(item.mobile)"></image>
						</view>
					</view> -->
				</view>
			</view>
			<view v-else class="nodata">
				<image src="../../card/static/images/empty.png" mode="widthFix"></image>
				<view>暂无数据</view>
			</view>
		</block>
		<block v-if="tabIndex==2">
			<view class="log">
				<view v-if="logsList && logsList.length > 0" v-for="(it, index) in logsList" :key="index" @click="jumpUrl('/mine/clientDetail/clientDetail?id='+it.uid)">
					<view class="time-year" v-if="todayYear!=it.year && index==0 || (index!=0 && (it.year!=logsList[index-1].year))">{{ it.year }}年</view>
					<view class="dflex">
						<view class="time-sort">
							<block v-if="index==0 || (index!=0 && (it.day!=logsList[index-1].day||it.month!=logsList[index-1].month||it.year!=logsList[index-1].year))">
								<text v-if="todayYear==it.year&&todayMonth==it.month&&todayDay==it.day">今日</text>
								<block v-else>
									<text>{{it.day}}</text>{{ it.month }}月
								</block>
							</block>
						</view>
						<view class="li fflex">
							<image src="/mine/static/images/jcico.png" class="jcico"></image>
							<view class="ddflex" style="width: 100%;margin-bottom: 20rpx;">
								<image style="width: 80rpx;height: 80rpx;border-radius: 100%;margin-right: 20rpx;" :src="it.avatar?it.avatar:'/static/images/userimg.png'"></image>
								<view class="fflex">
									<view style="font-size: 28rpx;font-weight: bold;" class="ddflex">
										<view class="tover " style="max-width: 250rpx;">{{it.nickName}}</view>
										<view v-if="it.realName">({{it.realName}})</view>
									</view>
									<view class="time">{{ it.time }}</view>
								</view>
							</view>
							<!-- <view class="des" v-if="it.brief">{{ it.brief }}</view> -->
							<rich-text class="des" :nodes="it.content"></rich-text>
						</view>
					</view>
				</view>
				<view v-if="!logsList || logsList.length == 0" class="nodata">
					<image src="/mine/static/images/empty.png" mode="aspectFill"></image>
					<view>暂无记录~</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");
	const util = require('../../utils/util.js');

	export default {
		components: {},
		props: {},
		data() {
			return {
				tabIndex:1,
				filterType:null,
				
				popBottom: '-100%',
				isShowPop: false,
				
				dateIndex: -1,
				// 时间类型 1、今日 2、昨日 3、近7日 4、近30天 5、本月 6、本季度 7、本年度
				dateList: [
					{
						title:'性别',
						key:'sex',
						option:[
							{
								label: '男',
								value: 1
							},{
								label: '女',
								value: 2
							},
						]
					},{
						title:'客户类型',
						key:'custom_type',
						option:[]
					},{
						title:'客户标签',
						key:'custom_label',
						option:[
							{
								label: '经理',
								value: 1
							},{
								label: '负责人',
								value: 2
							},{
								label: '业务员',
								value: 3
							}
						]
					}
					
				],
				
				stateIndex: 0,
				stateList:[{
						label: '智能推荐',
						value: null
					},{
						label: '保费从高到低',
						value: 'warranty_money',
						behavior:'desc'
					},
					{
						label: '保费从低到高',
						value: 'warranty_money',
						behavior:'asc'
					},
					{
						label: '保单从高到低',
						value: 'warranty_count',
						behavior:'desc'
					},{
						label: '保单从低到高',
						value: 'warranty_count',
						behavior:'asc'
					}],
				page: 1,
				limit: 10,
				isLoad: true,
				searchVal: '',
				dataList: [],
				isReference:false,
				
				
				// 动态
				form: {
					page: 1,
					limit: 10
				},
				isLoadDynamic: true,
				logsList:[],
				todayYear:'',
				todayMonth:'',
				todayDay:''
			}
		},
		async onLoad(options) {
			this.todayYear = new Date().getFullYear()
			this.todayMonth = new Date().getMonth() + 1
			this.todayDay = new Date().getDate()
			await this.getDict()
			await this.getDictCustomType()
			this.getDataList()
		},
		onShow() {
			if(this.isReference){
				this.isReference = false
				this.page=1;
				this.isLoad = true
				this.getDataList();
			}
		},
		onReachBottom() {
			if(this.tabIndex==1){
				this.page++;
				this.getDataList();
			}
			if(this.tabIndex==2){
				this.form.page++;
				this.getPageList(false);
			}
		},
		methods: {
			jumpUrl(url) {
				uni.navigateTo({
					url: url
				})
				this.hidePop()
			},
			// 客户标签字典
			getDict(){
				return new Promise((r,j)=>{
					req.getRequest('/api/other/dict/info',{dictType:'custom_label'},res=>{
						this.dateList.map(item=>{
							if(item.key=='custom_label'){
								item.option = []
								res.map(it=>{
									item.option.push({
										label:it.dictName,
										value:it.dictValue
									})
								})
							}
						})
						r(res)
					})
				})
			},
			// 客户类型字典
			getDictCustomType(){
				return new Promise((r,j)=>{
					req.getRequest('/api/other/dict/info',{dictType:'custom_type'},res=>{
						this.dateList.map(item=>{
							if(item.key=='custom_type'){
								item.option = []
								res.map(it=>{
									item.option.push({
										label:it.dictName,
										value:it.dictValue
									})
								})
							}
						})
						r(res)
					})
				})
			},
			// 切换筛选类型
			changeFilterType(type){
				// if(this.filterType==type) return false
				this.filterType = type
				if(type==3) {
					this.hidePop()
					return false
				}
				this.openPop()
			},
			// 打开弹窗
			openPop(){
				this.isShowPop = true
				this.popBottom = '0%'
			},
			// 关闭弹窗
			hidePop() {
				this.isShowPop = false;
				this.popBottom = '-100%';
			},
			
			// 筛选
			switchType(index) {
				if (this.stateIndex == index) return false;
				this.stateIndex = index;
				this.confirm()
			},
			switchFilterType(index,idx) {
				// 可多选
				if(this.dateList[index].key=='custom_label' || this.dateList[index].key=='custom_type'){
					if(!this.dateList[index].option[idx].isActive){
						this.dateList[index].option[idx].isActive = true
					}else{
						this.dateList[index].option[idx].isActive = false
					}
				}else{
					if(!this.dateList[index].option[idx].isActive){
						this.dateList[index].option.map(item=>{
							item.isActive = false
						})
						this.dateList[index].option[idx].isActive = true
					}else{
						this.dateList[index].option[idx].isActive = false
					}
				}
				this.dateList = JSON.parse(JSON.stringify(this.dateList))
			},
			confirm() {
				this.hidePop();
				this.isLoad = true;
				this.page=1;
				this.isLoad = true
				this.getDataList();
			},
			reset() {
				this.dateIndex = -1;
				this.stateIndex = 0;
				this.dateList.map(item=>{
					item.option.map(it=>{
						it.isActive = false
					})
				})
				this.dateList = JSON.parse(JSON.stringify(this.dateList))
			},
			// 分页查询
			getDataList() {
				if (!this.isLoad) return false;
				this.isLoad = false;
				let queryParams = {
					page: this.page,
					limit: this.limit,
					latitude: this.latitude,
					longitude: this.longitude,
				}
				if (this.searchVal) {
					queryParams.nickName = this.searchVal
				}
				
				// 状态筛选
				if (this.stateIndex != -1) {
					queryParams.orderField = this.stateList[this.stateIndex].value;
					if(this.stateList[this.stateIndex].behavior){
						queryParams.order = this.stateList[this.stateIndex].behavior;
					}
				}
				this.dateList.map(item=>{
					if(item.key=="sex"){
						let sl = item.option.filter(it=>{return it.isActive})
						if(sl.length>0){
							queryParams.gender = sl[0].value
						}
					}
					if(item.key=="custom_label"){
						let jl = item.option.filter(it=>{return it.isActive})
						if(jl.length>0){
							// queryParams.label = jl[0].value
							queryParams.label = jl.map(item => {return item.value}).join(',')
						}
					}
					if(item.key=="custom_type"){
						let tl = item.option.filter(it=>{return it.isActive})
						if(tl.length>0){
							queryParams.type = tl.map(item => {return item.value}).join(',')
						}
					}
				})
				req.getRequest('/api/user/getUserBySaleNo', queryParams, data => {
					data = data.list
					if (data != null && data.length == this.limit) {
						this.isLoad = true;
					}
					if (this.page == 1) {
						this.dataList = [];
					}
					if (this.page > 0) {
						data = this.dataList.concat(data);
					}
					this.dataList = data;
					console.log('列表数据>>>', this.dataList);
				})
			},
			// 搜索
			searchFn() {
				this.page = 1;
				this.isLoad = true;
				this.page=1;
				this.getDataList();
			},
			// 拨打电话
			goPhone(phone) {
				if(!phone) return false
				uni.makePhoneCall({
					phoneNumber: phone,
					success(res){
					}
				}); // 传参带入号码即可
			},
			
			
			tabChange(index){
				if(this.tabIndex==index) return false
				this.tabIndex = index
				this.hidePop()
				if(this.tabIndex==2){
					this.form.page = 1
					this.isLoadDynamic = true;
					this.logsList = []
					this.getPageList(true)
				}else{
					this.page = 1;
					this.isLoad = true;
					this.page=1;
					this.dataList = [];
					this.getDataList();
				}
			},
			getPageList(isShow) {
				if (!this.isLoadDynamic) return false;
				this.isLoadDynamic = false;
				let form = this.form;
				uni.showLoading();
				req.getRequest(
					'/api/user/getUsersTrends',
					form,
					res => {
						res  = res?res.list:[]
						if(res&&res.length>0){
							res.map(item=>{
								let t = this.getDate(item.createDate)
								item.year = t.year
								item.month = t.month
								item.day = t.day
								item.time = (t.hour<10?('0'+t.hour):t.hour)+':'+(t.minute<10?('0'+t.minute):t.minute)
							})
						}
						this.isShow = true;
						if (res && res.length == 10) {
							this.isLoadDynamic = true;
						}
						if (this.form.page > 1) {
							res = this.logsList.concat(res);
						}else{
							this.goTop()
						}
						this.logsList = res;
						uni.hideLoading();
					},
					isShow
				);
			},
			getDate(dateStr){
				if(!dateStr) return false
				let date = new Date(dateStr)
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				const hour = date.getHours();
				const minute = date.getMinutes();
				const second = date.getSeconds();
				return {
					year:year,
					month:month,
					day:day,
					hour:hour,
					minute:minute,
					second:second,
				}
			},
			goTop(e) {
				// 一键回到顶部
				if (uni.pageScrollTo) {
					uni.pageScrollTo({
						scrollTop: 0,
						duration:100
					});
				}
			}
		},
		mounted() {
		}
	}
</script>

<style>
	@import "./clientManage.css";
</style>