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 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.typeStr" type="select" @click="show1 = true" input-align='right'/>
				</u-form-item>
			
			</u-form>
			<button type="default" class="ui-btn" @click="list(1)" style="width: auto;">
				查询
			</button>
		</view>
	</view>
	
	<view class="list-title">查询结果列表</view>
	<view style="margin-top: 550rpx;">
		   <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">类型：{{item.typeC}}</text>
				  </view>
				  <view class="title_left" v-else>
					  <image :src="`${$imgUrl}typefb.png`" mode=""></image>
					  <text class="questionfb">类型：{{item.typeC}}</text>
				  </view>
				  <text class="statuszh" v-if="item.status==1">下黑</text>
				  <text class="statusdbc" v-else>反白</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.creationTime}}</view></view>
					  <view><text>下黑原因：</text><view :class="item.status==1?'hei':'fb'">{{item.reason}}</view></view>
					  <view v-if="item.fbCreationTime"><text>反白时间：</text><view :class="item.status==1?'hei':'fb'">{{item.fbCreationTime}}</view></view>
					  <view v-if="item.fbReason"><text>反白原因：</text><view :class="item.status==1?'hei':'fb'">{{item.fbReason}}</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">车辆信息变更</text>
				  </view>
			  </view>
	
		   </view>
		   <view style="text-align: center;margin: 20rpx;font-size: 30rpx;" v-if="state.flags">我是有底线的~</view>
		   <view class="no" v-if="state.tableData.length==0">暂无黑名单</view>
	</view>
	<!-- 选择车牌颜色 -->
	<u-select v-model="show1" :list="state.blackStatus" @confirm="changeBlackStatus"></u-select>
		
	
</template>

<script setup lang="ts">
	import { reactive,ref } from "vue";
	import { onLoad,onPageScroll,onReachBottom} from "@dcloudio/uni-app";
	import {cardBlackListQuery } 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";
	const state = reactive({
		tableData: [],
		blackStatus: [],
		range: ['', ''],
		type:"",
		typeStr:"",
		colorRange:[],
		vehicleId:"",
		pageNo:1,
		pageSize:10,
		totalCount:"",
		flags: false,
	});
	const labelStyle = {
		color: "#004576",
		fontSize: "28rpx",
	}
	const show1 = ref(false)
	const scrollTop = ref(0); //滚动距离
	//监听页面滚动
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});
	onLoad((option : any) => {
		console.log("option", option)
		let black = getItem('key')['BLACKLIST_TYPE'];
		for (var k = 0; k < black.length; k++) {
			let obj = {};
			obj['value'] = black[k]['code']
			obj['label'] = black[k]['name']
			state.blackStatus.push(obj)
		}
		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 list = (params) => {
		if (params == 1) {
			state.pageNo = 1
			state.flags=false
		}
		if (state.pageNo == 1 && state.tableData.length > 0) {
			state.tableData = []
		}
		const options = {
			type: 2,
			data: {
				"startTime":state.range[0]?state.range[0]+" 00:00:00":"",
				"endTime":state.range[1]?state.range[1]+" 00:00:00":"",
				"vehicleId":state.vehicleId,
				"type":state.type,
				"pageNo":state.pageNo,
				"pageSize":state.pageSize
			},
			method: 'POST',
			showLoading: true,
		}
		requestNew(cardBlackListQuery, options).then((res) => {
			console.log("res==",res)
			const data =[...state.tableData,...res.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)
		})
	}
	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: 50rpx;
				  height: 50rpx;
				 
			  }
			  .question{
				  font-size: 30rpx;
				  color: #01243A;
				  margin-left: 10rpx;
			  }
			  .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: 12px;
		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%;
	}
</style>