zhywpt-sp/subpackage/after-sale/report/qingfen.vue

<template>
	<view class="content">
		<view class="title">请选择查询条件:</view>
		<view class="choice_wrap">
			<uni-datetime-picker type="date" :clear-icon="false" v-model="state.dateTime" @change="changeTime" />
			<view class="card">
				<uni-data-select v-model="state.cardType" :localdata="state.cardRange" @change="changeCard"
					:clear="false"></uni-data-select>
			</view>
			<uni-data-select v-model="state.qingType" :localdata="state.qingRange" @change="changeQing"
				:clear="false"></uni-data-select>
		</view>
		<view class="uni-container">
			<uni-table ref="table" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th v-for="(item,index) in state.listData" :key="index" align="center"
						:width="item.width">{{item.name}}</uni-th>
				</uni-tr>
				<uni-tr>
					<uni-td align="center" v-for="(item,index) in state.listData" :key="index">{{item.value}}</uni-td>
				</uni-tr>
			</uni-table>
		</view>
	</view>

</template>

<script setup lang="ts">
	import { reactive } from "vue";
	const state = reactive({
		isJi: true, //是不是记账卡
		dateTime: Date.now(), //日期
		cardType: 0,
		cardRange: [{
			value: 0,
			text: "记账卡"
		},
		{
			value: 1,
			text: "储值卡"
		}],
		qingType: 0,
		qingRange: [{
			value: 0,
			text: "省内通行"
		},
		{
			value: 1,
			text: "省外通行"
		}, {
			value: 3,
			text: "省内小额"
		},
		{
			value: 4,
			text: "省外小额"
		}],
		// listData: ["2023/09/10", "记账卡", "省内通行", "100", "100", "100", "100", "100", "100"]
		listData: [
			{ "value": "2023/09/10", "name": "清分日期", "width": 70 },
			{ "value": "记账卡", "name": "卡类型", "width": 60 },
			{ "value": "省内通行", "name": "清分类型", "width": 70 },
			{ "value": "100", "name": "清分金额（应推金额)", "width": 120 },
			{ "value": "100", "name": "实际推送时间", "width": 100 },
			{ "value": "100", "name": "实际推送金额", "width": 100 },
			{ "value": "100", "name": "延迟推送原因", "width": 100 },
			{ "value": "100", "name": "回盘时间", "width": 70 },
			{ "value": "100", "name": "回盘金额", "width": 70 }
		]
	})
	const changeTime = (e) => {
		console.log(e)
	}
	const changeCard = (e) => {
		if (e == 1) {
			// 储值卡
			state.isJi = false;
			state.listData = [
				{ "value": "2023/09/10", "name": "清分日期", "width": 70 },
				{ "value": "储值卡", "name": "卡类型", "width": 60 },
				{ "value": "省内通行", "name": "清分类型", "width": 70 },
				{ "value": "100", "name": "清分金额（应推金额)", "width": 120 }
			]
		} else {
			// 记账卡
			state.isJi = true;
			state.listData = [
				{ "value": "2023/09/10", "name": "清分日期", "width": 70 },
				{ "value": "记账卡", "name": "卡类型", "width": 60 },
				{ "value": "省内通行", "name": "清分类型", "width": 70 },
				{ "value": "100", "name": "清分金额（应推金额)", "width": 120 },
				{ "value": "100", "name": "实际推送时间", "width": 100 },
				{ "value": "100", "name": "实际推送金额", "width": 100 },
				{ "value": "100", "name": "延迟推送原因", "width": 100 },
				{ "value": "100", "name": "回盘时间", "width": 70 },
				{ "value": "100", "name": "回盘金额", "width": 70 }
			]
		}
		console.log(e)
	}
	const changeQing = (e) => {
		console.log(e)
	}
</script>

<style scoped>
	.content {
		font-size: 32rpx;
		padding: 20rpx 30rpx;
	}

	.choice_wrap {
		display: flex;
		justify-content: space-between;
	}

	.card {
		margin: 0 20rpx;
	}

	.title {
		margin-bottom: 20rpx;
	}

	.uni-container {
		margin: 50rpx 0;
	}

	/deep/.uni-table-th,
	/deep/.uni-table-td {
		padding: 0 !important;
		font-size: 12px !important;
	}

	/deep/.uni-date__x-input,
	/deep/.uni-select {
		font-size: 13px;
		height: 30px;
		line-height: 30px;
	}
</style>