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 '+(dateIndex!=-1?'f-active':'')" @click="changeFilterType(1)">
					{{dateIndex!=-1?dateList[dateIndex].label:'智能筛选'}}
					<image class="filter-item-icon" :style="filterType==1&&isShowPop?'transform: rotate(180deg);':''" src="../static/images/down.png"></image>
				</view>
				<view :class="'filter-item fflex ddflex '+(areaIndex!=-1?'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 :class="'filter-item fflex ddflex '+(stateIndex!=-1?'f-active':'')" @click="changeFilterType(2)">
					{{stateIndex!=-1?stateList[stateIndex].label:'筛选'}}
					<image class="filter-item-icon" :style="filterType==2&&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 ddflex">
					<view :class="'li' + (dateIndex == index ? ' active' : '')" v-for="(item, index) in dateList" :key="index" @click="switchType(index)">{{ item.label }}</view>
				</view>
				<view class="pop-time ddflex">
					<picker mode="date" class="date-ipt" @change="changeStartTime">
						<view :class="startTime ? '' : 'placeholder'">{{ startTime ? startTime : '选择日期' }}</view>
					</picker>
					<text>至</text>
					<picker mode="date" class="date-ipt" @change="changeEndTime">
						<view :class="endTime ? '' : 'placeholder'">{{ endTime ? endTime : '选择日期' }}</view>
					</picker>
				</view>
			</view>
			<view class="pop-con" v-if="filterType==2">
				<view class="pop-list ddflex">
					<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">
				<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'"></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?getAge(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");

	export default {
		components: {},
		props: {},
		data() {
			return {
				statusBarHeight:0,
				
				filterType:null,
				
				popBottom: '-100%',
				isShowPop: false,
				
				dateIndex: -1,
				// 时间类型 1、今日 2、昨日 3、近7日 4、近30天 5、本月 6、本季度 7、本年度
				dateList: [
					{
						label: '今日',
						value: 1
					},
					{
						label: '昨日',
						value: 2
					},
					{
						label: '近7日',
						value: 3
					},
					{
						label: '近30天',
						value: 4
					},
					
					{
						label: '本月',
						value: 5
					},
					{
						label: '本季度',
						value: 6
					},
					{
						label: '本年度',
						value: 7
					}
				],
				startTime: '',
				endTime: '',
				
				stateIndex: -1,
				stateList:[{
						label: '开通成功',
						value: 7
					},
					{
						label: '待支付',
						value: 1
					},
					{
						label: '取消支付',
						value: 8
					}],
				page: 1,
				limit: 10,
				isLoad: true,
				searchVal: '',
				dataList: [],
				isReference:false,
				latitude: '23.027923',
				longitude: '113.753815',
			}
		},
		onLoad(options) {
			QQMapWX.initMap();
			req.getLocation(res => {
				const to = {
					latitude: res.latitude,
					longitude: res.longitude
				};
				this.latitude = res.latitude;
				this.longitude = res.longitude;
				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
				})
			},
			// 切换筛选类型
			changeFilterType(type){
				this.openPop()
				if(this.filterType==type) return false
				this.filterType = type
			},
			// 打开弹窗
			openPop(){
				this.isShowPop = true
				this.popBottom = '0%'
			},
			// 关闭弹窗
			hidePop() {
				this.isShowPop = false;
				this.popBottom = '-100%';
			},
			
			// 筛选
			switchType(index) {
				if(this.filterType==1){
					if (this.dateIndex == index) return false;
					this.dateIndex = index;
					this.startTime = '';
					this.endTime = '';
				}else{
					if (this.stateIndex == index) return false;
					this.stateIndex = index;
				}
			},
			changeStartTime(e) {
				const endTime = new Date(this.endTime);
				const startTime = new Date(e.detail.value);
				if (endTime.getTime() < startTime.getTime()) {
					req.msg('开始时间不能小于结束时间');
					return false;
				}
				this.startTime = e.detail.value;
				this.dateIndex = -1;
				if(!this.endTime){
					this.endTime = this.startTime
				}
			},
			changeEndTime(e) {
				const endTime = new Date(e.detail.value);
				const startTime = new Date(this.startTime);
				if (endTime.getTime() < startTime.getTime()) {
					req.msg('结束时间不能小于开始时间');
					return false;
				}
				this.endTime = e.detail.value;
				this.dateIndex = -1;
				if(!this.startTime){
					this.startTime = this.endTime
				}
			},
			confirm() {
				this.hidePop();
				this.isLoad = true;
				this.getDataList();
			},
			reset() {
				this.dateIndex = -1;
				this.stateIndex = -1;
				this.startTime = '';
				this.endTime = '';
			},
			// 分页查询
			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.search = 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.state = this.stateList[this.stateIndex].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);
				})
			},
			// 搜索
			searchFn() {
				this.page = 1;
				this.isLoad = true;
				this.getDataList();
			},
			formatTimeFn(data) {
				if (data) {
					return utils.formatTimeCommStr(data, 'Y-M-D')
				} else {
					return '';
				}
			
			},
			getAge(date) {
				return util.getAge(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>