zhywpt-sp/subpackage/after-sale/blacklist-query/list.vue

<template>
	<navBar title="黑名单查询" :scrollTop="scrollTop" navbgClass="nav-bgXin" fontColor='#fff'></navBar>
	<view class="guding">
		<view class="bg-img">
			<image :src="`${$imgUrl}order/bg-order.png`" mode="scaleToFill" class="icon"></image>
		</view>
		<view class="content">
			<view class="title">填写查询条件</view>
			<uni-datetime-picker ref="filterDate" v-model="state.range" type="daterange" />
			<u-form label-width="230" ref="uForm" :label-style='labelStyle'>
				
				<u-form-item label="黑名单">
					<u-input v-model="state.blackTypeStr" type="select" @click="showType = true" input-align='right' />
				</u-form-item>
				
				<u-form-item label="黑名单类型">
					<u-input v-model="state.typeStr" type="select" @click="show1 = true" input-align='right' />
				</u-form-item>
			
			</u-form>
			<view class="search-btns">
				<button type="default" class="ui-btn search-btn" @click="list(1)" style="width: auto;">
					查询
				</button>
				<view class="clear-form search-btn" @click="clearFilter">清空</view>
			</view>
		</view>
	</view>
	
	<view class="list-title">查询结果列表</view>
	<view style="margin-top: 674rpx;">
		   <view class="list" v-for="(item,index) in state.tableData" :key="index">
		   	  <view class="title" :style="{'--bgimg':`url(${$imgUrl}etcbg.png)`}">
				  <view class="title_left"  v-if="item.status==1">
					  <image :src="`${$imgUrl}type.png`" mode=""></image>
					  <text class="question">类型：{{getBlackType(item)}}</text>
				  </view>
				  <view class="title_left" v-else>
					  <image :src="`${$imgUrl}typefb.png`" mode=""></image>
					  <text class="questionfb">类型：{{getBlackType(item)}}</text>
				  </view>
				  <text class="statuszh" v-if="item.status==1">{{ getStatus(item) }}</text>
				  <text class="statusdbc" v-else>{{ getStatus(item) }}</text>
			  </view>
			  <view class="bot">
				  <view class="details">
					  <view><text>卡号：</text><view :class="item.status==1?'hei':'fb'">{{item.cardId}}</view></view>
					  <view><text>下黑时间：</text><view :class="item.status==1?'hei':'fb'">{{item.createTime}}</view></view>
					  <view><text>下黑原因：</text><view :class="item.status==1?'hei':'fb'">{{item.reasonIn}}</view></view>
					  <view v-if="item.releaseTime"><text>反白时间：</text><view :class="item.status==1?'hei':'fb'">{{item.releaseTime}}</view></view>
					  <view v-if="item.reasonOut"><text>反白原因：</text><view :class="item.status==1?'hei':'fb'">{{item.reasonOut}}</view></view>
					  <view><text>解决方案：</text><view :class="item.status==1?'hei':'fb'">{{item.solution}}</view></view>
				  </view>
				  <view style="display: flex;justify-content: flex-end;align-items: flex-end;">
					  <!-- <text class="button" @click="goInfo(item)">车辆信息变更</text> -->
				  </view>
			  </view>
	
		   </view>
		   <view style="text-align: center;margin: 20rpx;font-size: 30rpx;" v-if="state.flags">我是有底线的~</view>
		   <NoDataView text="暂无黑名单" v-if="state.tableData.length==0"/>
	</view>
	
	<!-- 选择车牌状态 -->
	<u-select v-model="show1" :list="state.blackStatus" @confirm="changeBlackStatus"></u-select>
		
	<u-select v-model="showType" :list="state.blackTypeMap" @confirm="changeBlackTypeStatus"></u-select>
</template>

<script setup lang="ts">
	import { reactive,ref } from "vue";
	import { onLoad,onPageScroll,onReachBottom} from "@dcloudio/uni-app";
	import { cardBlackListQueryNew } from "@/utils/network/api.js";
	import {requestNew } from "@/utils/network/request.js";
	import {getItem } from "@/utils/storage";
	import navBar from "@/components/nav-bar/nav-bar2.vue";
	import {msg} from "@/utils/utils";
	import NoDataView from "@/components/no-data-view/no-data-view.vue";
	const state = reactive({
		tableData: [],
		blackStatus: [],
		range: ['', ''],
		type:"",
		typeStr:"",
		blackType: "",
		blackTypeStr: "",
		colorRange:[],
		vehicleId:"",
		pageNo:1,
		pageSize:10,
		totalCount:"",
		flags: false,
		cardblackType: [],
		obuBlackType: [],
		blackTypeMap: [
			{value: 0, label: '卡黑名单'},
			{value: 1, label: '签黑名单'},
		]
	});
	const labelStyle = {
		color: "#004576",
		fontSize: "28rpx",
	}
	const show1 = ref(false)
	const showType = ref(false)
	const scrollTop = ref(0); //滚动距离
	const filterDate = ref()
	//监听页面滚动
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
	onLoad((option : any) => {
		console.log("option", option)
		
		getBlackStatus() // 获取黑名单那类型
		
		state.vehicleId=option.vehicleId
		
		list(2)
		console.log("state.blackStatus",state.blackStatus)
	})
	const changeBlackStatus = (item) => {
		state.type = item[0].value
		state.typeStr = item[0].label
		console.log(item)
	}
		
	const changeBlackTypeStatus = (item) => {
		let blackType = state.blackType = item[0].value
		state.blackTypeStr = item[0].label
		
		state.type = item[0].value
		state.typeStr = ''
		
		if (blackType === 1) {
			state.blackStatus = state.obuBlackType
		} else {
			state.blackStatus = state.cardblackType
		}
	}
	
	const list = (params) => {
		if (params == 1) {
			state.pageNo = 1
			state.flags=false
		}
		if (state.pageNo == 1 && state.tableData.length > 0) {
			state.tableData = []
		}
		let blackType = state.blackType
		const options = {
			type: 2,
			data: {
				"startTime":state.range[0]?state.range[0]+" 00:00:00":"",
				"endTime":state.range[1]?state.range[1]+" 23:59:59":"",
				"vehicleId":state.vehicleId,
			},
			method: 'POST',
			showLoading: true,
		}
		
		if (blackType == '1') {
			options.data['obuBlackType'] = state.type
		} else if (blackType == '0') {
			options.data['cardBlackType'] = state.type
		}
		
		requestNew(cardBlackListQueryNew, options).then((res) => {
			console.log("res==",res)
			let result = res.results
			
			if (blackType || blackType == '0') {
				if (blackType == '1') {
					result = result.filter(item => {
						return item.obuId
					})
				} else if (blackType == '0') {
					result = result.filter(item => {
						return item.cardId
					})
				}
			}
			
			const data =[...state.tableData,...result] ;
			state.totalCount = res.totalCount
			// status 1 下黑   2反白
			for (var i = 0; i < data.length; i++) {
				for (var m = 0; m < state.blackStatus.length; m++) {
					if (data[i]['type'] == state.blackStatus[m]['value']) {
						data[i]['typeC'] = state.blackStatus[m]['label']
						break;
					}
				}
			}
			state.tableData = data
			console.log("圈存金额查询2", state.tableData)
		})
	}
	
	// 解决问题
	const goInfo = (item) => {
		
	}
	
	// 清控筛选
	const clearFilter = () => {
		state.range = ["", ""]
		filterDate.value.clear()
		state.type = ""
		state.typeStr = ""
		state.blackType = ""
		state.blackTypeStr = ""
		list(1)
	}
	
	// 获取卡签的两种黑名单类型
	const getBlackStatus = () => {
		// 卡黑名单类型
		let black = getItem('key')['CARD_BLACK_TYPE'];
		for (var k = 0; k < black.length; k++) {
			let obj = {};
			obj['value'] = black[k]['code']
			obj['label'] = black[k]['name']
			state.cardblackType.push(obj)
		}
		
		// obu黑名单类型
		let obu = getItem('key')['OBU_BLACK_TYPE'];
		for (var k = 0; k < obu.length; k++) {
			let obj = {};
			obj['value'] = obu[k]['code']
			obj['label'] = obu[k]['name']
			state.obuBlackType.push(obj)
		}
	}
	
	// 获取状态
	const getStatus = (item) => {
		if (item.cardId) {
			if (item.status == 1) {
				return '卡下黑'
			} else if (item.status == 2) {
				return '卡反白'
			}
		} else if (item.obuId) {
			if (item.status == 1) {
				return '签下黑'
			} else if (item.status == 2) {
				return '签反白'
			}
		}
	}
	
	// 获取黑名单类型
	const getBlackType = (info) => {
		if (info.cardId) {
			let type = state.cardblackType.find(item => item.value === info.cardBlackType)
			return type ? type.label : ''
		} else if (info.obuId) {
			let type = state.obuBlackType.find(item => item.value === info.obuBlackType)
			return type ? type.label : ''
		}
	}
	
	onReachBottom(() => {
		console.log("触底了",  state.pageNo * 10)
		if (Number(state.totalCount) == state.tableData.length) return state.flags = true
		if (state.tableData.length < state.pageNo * 10) return state.flags = true
		console.log("触底了")
		state.pageNo++
		list(2)
	})
</script>
<style>
	page {
		position: absolute;
    }
</style>
<style scoped lang="scss">
	.list{
		  background: #FFFFFF;
		  border-radius: 12rpx;
		  border: 1px solid #FFFFFF;
		  width: 90%;
		  margin: 0 auto;
		  font-weight: 400;
		  margin-bottom: 30rpx;
		  .title{
			  padding: 0 20rpx;
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			  height: 80rpx;
			  background-image: var(--bgimg);
			  background-size: 100% 100%;
			  background-repeat: no-repeat;
			  .title_left{
				  display: flex;
				  align-items: center;
			  }
			  image{
				  width: 40rpx;
				  height: 40rpx;
				 
			  }
			  .question{
				  font-size: 30rpx;
				  color: #01243A;
				  margin-left: 16rpx;
			  }
			  .questionfb{
				  font-size: 30rpx;
				  color: #666666;
				  margin-left: 10rpx;
			  }
			  // 在黑
			  .statuszh{
				font-size: 26rpx;
				color: #CCB375;
			  }
			  // 已反白
			  .statusdbc{
				font-size: 26rpx;
				color: #999999;
			  }
			 
		  }
		  .bot{
			  padding: 0 20rpx;
			  .details{
				  font-size: 26rpx;
				  padding: 10rpx 0;
				  border-bottom: 1rpx solid #DCDCDC;
				  view{
					  display: flex;
					  margin-bottom: 8rpx;
					  text{
						  color: #999999;
						  width: 21%;
					  }
					  .hei{
						  color: #002025;
						  width: 79%;
					  }
					  .fb{
						  color: #666666;
						  width: 79%;
					  }
				  }
			  }
			  .time{
			  		  font-size: 24rpx;
			  		  color: #999999;
			  		  padding:20rpx 0;
			  		  border-top: 1rpx solid #DCDCDC;
			  }
		  }
		 
	}
</style>
<style scoped>
	.bg-img {
		width: 100%;
		position: absolute;
		z-index:0;
	}
	.icon {
		width: 100%;
		height: 534rpx;
	}
	.content {
		position: relative;
		color: white;
		padding:30rpx ;
		background-color: white;
		width: 90%;
		margin: 0 auto;
		margin-top: 200rpx;
		border-radius: 12rpx;
		box-sizing: border-box;
	}
	.title {
			font-weight: 400;
			font-size: 30rpx;
			color: #01243A;
			margin-bottom: 20rpx;
		}
	.no {
		text-align: center;
		padding-top: 100rpx;
	}
	/deep/.uni-date-editor--x{
		background: #ECF1F4;
	}
	/deep/.uni-date-x {
		background: #ECF1F4 ;
		height: 68rpx !important;
    }
	/deep/.uni-date__x-input {
		font-size: 12px;
	}
	/deep/.u-form-item--right{
		background: #ECF1F4;
		padding: 4rpx 10rpx;
		border-radius: 10rpx;
    }
	.list-title{
		font-weight: bold;
		margin: 30rpx 40rpx;
	}
	.button{
		background: linear-gradient(90deg, #CCB375 0%, #E7D398 100%);
		border-radius: 40rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #fff !important;
		padding: 15rpx 25rpx;
		margin: 10rpx 0;
	}
	.guding{
		position: fixed;
		width: 100%;
	}
	.search-btns{
		display: flex;
		justify-content: space-between;
	}
	.search-btns .search-btn{
		flex: 1;
		margin: 0 12rpx;
	}
	.clear-form{
		color: #004576;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		border: 1px #004576 solid;
		border-radius: 80rpx;
		padding: 0 28rpx;
	}
</style>