renshouH5/mine/clientManage/clientManage.vue

<template>
	<view>
		<view class="top-fixed">
			<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" v-if="isShowPop" @click="hidePop()"></view>
		
		<view class="hx-pop" :style="'top:calc(' +popBottom+' + '+(isShowPop?190: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: 190rpx;"></view>
		<!-- 订单列表 -->
		<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>
	</view>
</template>

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

	export default {
		components: {},
		props: {},
		data() {
			return {
				
				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,
			}
		},
		async onLoad(options) {
			await this.getDict()
			await this.getDictCustomType()
			this.getDataList()
		},
		onShow() {
			if(this.isReference){
				this.isReference = false
				this.page=1;
				this.isLoad = true
				this.getDataList();
			}
		},
		onReachBottom() {
			this.page++;
			this.getDataList();
		},
		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){
					}
				}); // 传参带入号码即可
			},
		},
		mounted() {
		}
	}
</script>

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