清分对账统计

pages.json

 	"subPackages": [{
 			"root": "subpackage/after-sale", //售后相关
 			"pages": [{
+					"path": "report/qingfen",
+					"style": {
+						"navigationBarTitleText": "清分对账统计",
+						"enablePullDownRefresh": false
+					}
+				},
+				{
 					"path": "report/report",
 					"style": {
 						"navigationBarTitleText": "每日渠道推送报表",

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>