zhywpt-sp/subpackage/after-sale/ETC-product-status-list-query/ETC-product-status-list-query.vue

<template>
	<view class="allContent">
		<view class="search-content">
			<view class="item">
				<text>产品名称：</text><input placeholder="请输入产品名称" v-model="state.promoteName" />
			</view>
			<view class="item">
				<text>产品状态：</text>
				<view>
					<picker @change="bindPickerChange" :value="state.index" :range="state.array">
						<view v-if="state.index>=0" class="uni-input">{{state.array[state.index]}}</view>
						<view v-else class="uni-input">请选择</view>
					</picker>
				</view>
			</view>
			<view class="item">
				<text>产品编号：</text><input placeholder="请输入产品编号" v-model="state.promoteId" /><text class="time-btn"
					@click="query(1)">查询</text>
			</view>
		</view>
		<view class="content">
			<view class="list-item" v-for="(item,index) in state.tableData" @click="goDeatls(item)">
				<view><text>产品编号：</text><text>{{item.promoteId}}</text></view>
				<view><text>产品名称：</text><text>{{item.promoteName}}</text></view>
				<view><text>产品状态：</text><text>{{item.status}}</text></view>
				<view><text>产品生效时间：</text><text>{{item.start}}</text></view>
				<view><text>产品过期时间：</text><text>{{item.end}}</text></view>
				<view><text>产品发行渠道名称：</text><text>{{item.agencyName[0]}}</text></view>
			</view>
		</view>

		<view class="noRecord" v-if="state.noRecord">暂无ETC状态名单查询记录</view>
	</view>

</template>

<script setup lang="ts">
	import { reactive } from "vue";
	import { onLoad, onReachBottom } from "@dcloudio/uni-app";
	import { ETCProductStatusListQueryApi } from "@/utils/network/api.js";
	import { request } from "@/utils/network/request.js";
	import { stringToJson } from "@/utils/network/encryption.js";
	import { agentId } from "@/utils/network/difference";
	const state = reactive({
		promoteName: "",  //产品名称
		promoteId: "",//产品编号
		index: 0,
		array: ['可使用', '禁用'],
		carData: [], //所有车的数据
		tableData: [],
		noRecord: false,
		pageNo: 1,
		pageSize: 10,
		flags: false,
	});
	const bindPickerChange = (e) => {
		state.index = e.detail.value
	}
	const query = (params) => {
		// 点搜索的时候每次都从1开始
		if (params == 1) {
			state.pageNo = 1
		}
		if (state.pageNo == 1 && state.tableData.length > 0) {
			state.tableData = []
		}
		const options = {
			type: 2,
			data: {
				"agencyId": agentId,
				"pageNo": state.pageNo,
				"pageSize": state.pageSize,
				"status": state.index == 1 ? 'DISABLE' : "ENABLE",
				"promoteName": state.promoteName,
				"promoteId": state.promoteId,
			},
			method: "POST",
			showLoading: true,
		};
		console.log("options111111", options)
		//调用方式
		request(ETCProductStatusListQueryApi, options).then((res) => {
			// state.pageNo = 1

			const data = (stringToJson(res.bizContent)).data
			state.tableData = [...stringToJson(res.bizContent).data, ...state.tableData]
			if (state.tableData.length != 0) {

				state.noRecord = false
			} else {
				state.noRecord = true
				state.tableData = []
			}
			console.log("res", data, state.noRecord)
		})
	}
	// 触底加载
	onReachBottom(() => {
		if (state.tableData.length < state.pageNo * 10) return state.flags = true
		console.log("触底了")
		state.pageNo++
		query(2)
	})
	const goDeatls = (item) => {
		const params = encodeURIComponent(JSON.stringify(item))
		uni.navigateTo({
			url: `/subpackage/after-sale/ETC-product-status-list-query/ETC-product-status-list-query-details?params=${params}`
		})
	}
</script>

<style scoped>
	.allContent {
		background-color: #EEF7F7;
		height: calc(100vh - 200rpx);
	}

	.item {
		display: flex;
		font-size: 30rpx;
		margin: 20rpx 0 0 20rpx;
	}

	input,
	.uni-input {
		border: 1rpx solid #ccc;
		padding: 0 10rpx;
	}

	.time-btn {
		width: 120rpx;
		height: 60rpx;
		background: #00B38B;
		border-radius: 40rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		line-height: 60rpx;
		text-align: center;
		margin-left: 60rpx;
	}

	.noRecord {
		text-align: center;
		margin: 100rpx auto;
		font-size: 32rpx;
		/* background-color: white; */
	}

	.list-item {
		width: 95%;
		border-radius: 10rpx;
		margin: 30rpx auto;
		font-size: 28rpx;
		border: 1rpx solid #ccc;
		padding: 12rpx;
		box-sizing: border-box;
		background-color: white;
	}

	.list-item>view {
		margin-bottom: 10rpx;
	}

	.search-content {
		padding: 10rpx;
		position: fixed;
		top: 0;
		left: 0;
		background: white;
		box-sizing: border-box;
	}

	.content {
		margin-top: 30%;
		padding-bottom: 20rpx;
		background-color: #EEF7F7;
		padding-top: 20rpx;
	}
</style>