renshouH5/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 class="filter ddflex">
					<view class="fflex">
						<picker mode="selector" :range="rangeList" range-key="label" v-model="rangeIndex" @change="rangeChange">
							<view class="filter-item fflex ddflex f-active" style="text-align: right;justify-content: flex-end;">
								<text style="max-width: 150rpx;" class="tover">{{rangeList[rangeIndex].label}}</text>
								<image class="filter-item-icon" src="../static/images/down.png"></image>
							</view>
						</picker>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 130rpx;"></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/index/index?cardId='+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>
							<view style="font-size: 26rpx;color: var(--main);font-weight: 400;" v-if="item.auditState==1">审核成功</view>
							<view class="review-btn" v-else-if="item.auditState==0" @click.stop="review(item,index)">审核</view>
							<view style="font-size: 26rpx;color: red;font-weight: 400;" v-else-if="item.auditState==2">审核失败 {{item.auditFailReason}}</view>
						</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>
					</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 class="ceng" v-show="showPop" @click="showPop=false" @touchmove.stop.prevent="moveHandle">
		</view>
		<view :style="showPop?'bottom:0;':'bottom:-100%;'"
			class="pop">
			<view class="pop-scroll">
				<view class="pop-title">审核{{clickItem.realName}}的名片</view>
				<view class="pop-textarea">
					<textarea v-model="tempData" placeholder="如审核不通过请填写不通过原因"></textarea>
				</view>
				<view style="font-size: 24rpx;color: #999;padding:0 30rpx 30rpx;">注:通过审核可直接点击通过，不通过审核请填写原因</view>
			</view>
			<view class="ddflex">
				<view class="pop-item fflex" style="background-color: red;color: #fff;" @click="unpass">不通过</view>
				<view class="pop-item fflex" style="background-color: var(--main);color: #fff;" @click="pass">通过</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 {
				statusBarHeight:0,
				
				page: 1,
				limit: 10,
				isLoad: true,
				searchVal: '',
				dataList: [],
				isReference:false,
				
				clickItem:{},
				clickIndex:-1,
				showPop:false,
				tempData:'',
				
				rangeIndex:0,
				rangeList:[{
					label:'全部',
					value:''
				},{
					label:'待审核',
					value:0
				},{
					label:'审核成功',
					value:1
				},{
					label:'审核失败',
					value:2
				}]
			}
		},
		onLoad(options) {
			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
				})
			},
			// 分页查询
			getDataList() {
				if (!this.isLoad) return false;
				this.isLoad = false;
				let queryParams = {
					page: this.page,
					limit: this.limit
				}
				if (this.searchVal) {
					queryParams.realName = this.searchVal
				}
				queryParams.auditState = this.rangeList[this.rangeIndex].value
				req.getRequest('/api/visiting/card/interfaceYzl/page', 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();
			},
			monthDayDiff(date) {
				return util.monthDayDiff(date)
			},
			
			review(item,index){
				this.clickItem = item
				this.clickIndex = index
				this.tempData = item.auditFailReason?item.auditFailReason:''
				this.showPop = true
			},
			pass(){
				uni.showModal({
					title:'提示',
					content:"是否确定通过"+this.clickItem.realName+"的名片审核",
					success: (res) => {
						if(res.confirm){
							req.postRequest('/api/visiting/card/audit',{id:this.clickItem.id,status:1},data=>{
								req.msg("名片已通过审核")
								this.dataList[this.clickIndex].auditState = 1
								this.clickIndex = -1
								this.clickItem = {}
								this.tempData = ''
								this.showPop = false
							})
						}
					}
				})
			},
			unpass(){
				if(!this.tempData){
					return req.msg("请填写名片不通过原因")
				}
				uni.showModal({
					title:'提示',
					content:"是否确定不通过"+this.clickItem.realName+"的名片审核",
					success: (res) => {
						if(res.confirm){
							req.postRequest('/api/visiting/card/audit',{id:this.clickItem.id,status:2,cause:this.tempData},data=>{
								req.msg("名片未通过审核")
								this.dataList[this.clickIndex].auditState = 2
								this.dataList[this.clickIndex].auditFailReason = this.tempData
								this.clickIndex = -1
								this.clickItem = {}
								this.tempData = ''
								this.showPop = false
							})
						}
					}
				})
			},
			
			rangeChange(e){
				this.rangeIndex = e.detail.value
				this.page = 1;
				this.isLoad = true;
				this.getDataList();
			}
		}
	}
</script>

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