renshou/card/cardList/cardList.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>
			<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="fflex">
					<pickerAddress @change="regionChange">
						<view :class="'filter-item fflex ddflex '+(areaIndex!=-1?'f-active':'')" @click="changeFilterType(3)">
							<text style="max-width: 150rpx;" class="tover">{{regionText?regionText:'地区'}}</text>
							<image class="filter-item-icon" :style="filterType==1&&isShowPop?'transform: rotate(180deg);':''" src="../static/images/down.png"></image>
						</view>
					</pickerAddress>
					<!-- <picker mode="region" v-model="regionIndex" @change="regionChange">
						<view :class="'filter-item fflex ddflex '+(areaIndex!=-1?'f-active':'')" @click="changeFilterType(3)">
							<text style="max-width: 150rpx;" class="tover">{{regionText?regionText:'地区'}}</text>
							<image class="filter-item-icon" :style="filterType==1&&isShowPop?'transform: rotate(180deg);':''" src="../static/images/down.png"></image>
						</view>
					</picker> -->
				</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('/card/cardDetail/cardDetail?id='+item.id)">
				<view class="register-title ddflex fflex">
					<image class="register-title-icon" :src="item.avatar?item.avatar:'/static/images/userimg.png'" mode="aspectFill"></image>
					<view class="flex" style="min-width: 0;">
						<view class="ddflex">
							<view class="card-name fflex tover">{{item.realName?item.realName:''}}</view>
							<image style="width: 64rpx;height: 64rpx;margin-left: 10rpx;" src="/card/static/images/wxChat.png"></image>
						</view>
						<view class="ddflex" style="margin-top: 4rpx;">
							<view class="card-tag">{{ item.jobName }}</view>
							<view class="card-tag">入司{{item.inDate?monthDayDiff(item.inDate):'1年'}}</view>
						</view>
						<view class="card-area ddflex">
							<image src="/card/static/images/area.png"></image>
							<view class="flex tover">{{item.address}}</view>
							<view style="color: #A1A1A1;margin-left: 10rpx;">距离{{item.distance>1000?((item.distance/1000).toFixed(2)+'km'):(item.distance+'m')}}</view>
						</view>
					</view>
				</view>
				<view class="ddflex" style="margin-top: 41rpx;">
					<view class="flex">
						<view class="card-data">{{item.cntCust?item.cntCust:0}}</view>
						<view class="card-label">服务客户</view>
					</view>
					<view class="card-line"></view>
					<view class="flex">
						<view class="card-data">{{item.cntCntr?item.cntCntr:0}}</view>
						<view class="card-label">保单件数</view>
					</view>
					<view class="card-line"></view>
					<view class="flex">
						<view class="card-data">{{item.thumbs?item.thumbs:0}}</view>
						<view class="card-label">用户点赞</view>
					</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');
	const QQMapWX = require("../../utils/qqmap.js");
	import pickerAddress from '../components/wangding-pickerAddress/wangding-pickerAddressSingle.vue';

	export default {
		components: {
			pickerAddress
		},
		props: {},
		data() {
			return {
				statusBarHeight:0,
				
				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:'inDate',
						option:[
							{
								label: '1~2年',
								value: 1
							},{
								label: '2~3年',
								value: 2
							},{
								label: '3~4年',
								value: 3
							},{
								label: '4年以上',
								value: 4
							}
						]
					},{
						title:'职务',
						key:'job',
						option:[
							{
								label: '经理',
								value: 1
							},{
								label: '负责人',
								value: 2
							},{
								label: '业务员',
								value: 3
							}
						]
					}
					
				],
				startTime: '',
				endTime: '',
				
				regionText:'',
				regionCode:'',
				areaIndex:-1,
				
				stateIndex: 0,
				stateList:[{
						label: '智能推荐',
						value: null
					},{
						label: '评价分从高到低',
						value: 'avage'
					},
					{
						label: '浏览量从高到低',
						value: 'bCount',
						behavior:4
					},
					{
						label: '点赞量从高到低',
						value: 'bCount',
						behavior:3
					}],
				page: 1,
				limit: 10,
				isLoad: true,
				searchVal: '',
				dataList: [],
				isReference:false,
				latitude: '23.027923',
				longitude: '113.753815',
			}
		},
		onLoad(options) {
			QQMapWX.initMap();
			req.getLocation(async res => {
				const to = {
					latitude: res.latitude,
					longitude: res.longitude
				};
				this.latitude = res.latitude;
				this.longitude = res.longitude;
				await this.getDict()
				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
				})
			},
			getDict(){
				return new Promise((r,j)=>{
					req.getRequest('/api/other/dict/info',{dictType:'job'},res=>{
						this.dateList.map(item=>{
							if(item.key=='job'){
								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].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))
			},
			regionChange(e){
				console.log(e)
				this.regionText = e.data.filter(item=>item&&item !="请选择").join('')
				this.regionCode = e.ids.length>0?e.ids.filter(item=>item&&item!='0')[e.ids.filter(item=>item&&item!='0').length-1]:''
				this.confirm()
			},
			confirm() {
				this.hidePop();
				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))
				this.regionText=''
				this.regionCode=''
			},
			// 分页查询
			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.realName = this.searchVal
				}
				// 时间筛选
				if (this.dateIndex != -1) {
					queryParams.dateType = this.dateList[this.dateIndex].value;
				}else if (this.dateIndex == -1) {
				} else {
					queryParams.dateType = 8
					queryParams.end = this.endTime?this.endTime:null;
					queryParams.start = this.startTime?this.startTime:null;
				}
				
				// 状态筛选
				if (this.stateIndex != -1) {
					queryParams.orderFiled = this.stateList[this.stateIndex].value;
					if(this.stateList[this.stateIndex].behavior){
						queryParams.behavior = this.stateList[this.stateIndex].behavior;
					}
				}
				if(this.regionCode){
					queryParams.areaCode = this.regionCode
				}
				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=="job"){
						let jl = item.option.filter(it=>{return it.isActive})
						if(jl.length>0){
							queryParams.job = jl[0].value
						}
					}
					if(item.key=="inDate"){
						console.log('indate')
						let il = item.option.filter(it=>{return it.isActive})
						console.log(il)
						if(il.length>0){
							let d = il[0].value
							if(d==4){
								queryParams.endTime = this.getYear(d+1)
							}else{
								queryParams.startTime = this.getYear(d)
								queryParams.endTime = this.getYear(d+1)
							}
						}
					}
					if(item.key=="job"){
						// queryParams.gender = item.option.filter(it=>{return it.isActive})[0].value
					}
				})
				req.getRequest('/api/visiting/card/cardInfoList', 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);
				})
			},
			getYear(index){
				let dateTime = new Date().getFullYear(); /* 获取现在的年份 */
			    dateTime = new Date(new Date().setFullYear(dateTime-index))
				let y = dateTime.getFullYear()
				let m = dateTime.getMonth()+1<10?('0'+(dateTime.getMonth()+1)):dateTime.getMonth()+1
				let d = dateTime.getDate()<10?('0'+(dateTime.getDate())):dateTime.getDate()
			    return y+'-'+m+'-'+d
			},
			// 搜索
			searchFn() {
				this.page = 1;
				this.isLoad = true;
				this.getDataList();
			},
			formatTimeFn(data) {
				if (data) {
					return utils.formatTimeCommStr(data, 'Y-M-D')
				} else {
					return '';
				}
			
			},
			monthDayDiff(date) {
				return util.monthDayDiff(date)
			},
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			// px转换到rpx的比例
			let pxToRpxScale = 750 / systemInfo.windowWidth;
			this.statusBarHeight = uni.getSystemInfoSync().windowTop*pxToRpxScale
		}
	}
</script>

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