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

<template>
	<view class="content">
		<view class="time_wrap">
			<text>推送日期:</text>
			<view class="time">
				<uni-datetime-picker type="date" :clear-icon="false" v-model="state.dateTime" @change="change" />
			</view>
			<view class="button_wrap">
				<button size="mini" style="color: #ffffff;
				backgroundColor: rgb(118, 200, 77);
				borderColor: rgb(118, 200, 77);
				font-size: 26rpx;
				flex-shrink: 1;">搜索</button>
				<button size="mini" style="color: #ffffff;
				backgroundColor: rgb(232, 171, 79);
				borderColor: rgb(232, 171, 79);
				font-size: 26rpx;
				flex-shrink: 1;margin: 6rpx 0;">重置</button>
				<button size="mini" style="color: #ffffff;
				backgroundColor: rgb(232, 171, 79);
				borderColor: rgb(232, 171, 79);
				font-size: 26rpx;
				flex-shrink: 1;">导出</button>
			</view>

		</view>

		<view>
			<view class="uni-container">
				<uni-table ref="table" border stripe>
					<uni-tr v-for="(item,index) in state.list" :key="index">
						<uni-td align="center" width="300">{{item.name}}</uni-td>
						<uni-td align="center" width="300">{{item.value}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>

		</view>

		<view class="uni-container" @click="goDetails()">
			<uni-table ref="table" border stripe type="selection" emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center">序号</uni-th>
					<uni-th align="center">渠道名称</uni-th>
					<uni-th align="center">填写人</uni-th>
					<uni-th align="center">推送日期</uni-th>
					<uni-th align="center">通行费推送总额</uni-th>
					<uni-th align="center">小额推送总额</uni-th>
					<uni-th align="center">通行费回盘总额</uni-th>
					<uni-th align="center">小额回盘总额</uni-th>
					<uni-th align="center">通行费回款总额</uni-th>
					<uni-th align="center">小额回款总额</uni-th>
					<uni-th align="center">通行费推送回盘剩余</uni-th>
					<uni-th align="center">小额推送回盘剩余</uni-th>
					<uni-th align="center">通行费推送回教剩余</uni-th>
					<uni-th align="center">小额送回款剩余</uni-th>
					<uni-th align="center">剩余说明（结算组填写）</uni-th>
					<uni-th align="center">应付金额</uni-th>
					<uni-th align="center">操作</uni-th>
				</uni-tr>
				<uni-tr>
					<uni-td align="center">1</uni-td>
					<uni-td align="center">1</uni-td>
					<uni-td align="center">1</uni-td>
					<uni-td align="center">1</uni-td>
					<uni-td align="center">1</uni-td>
					<uni-td align="center">1</uni-td>
					<uni-td align="center">1</uni-td>
					<uni-td align="center">1</uni-td>
					<uni-td align="center">1</uni-td>
					<uni-td align="center">1</uni-td>
					<uni-td align="center">1</uni-td>
					<uni-td align="center">1</uni-td>
					<uni-td align="center">1</uni-td>
					<uni-td align="center">1</uni-td>
					<uni-td align="center">1</uni-td>
					<uni-td align="center">1</uni-td>
					<uni-td>
						<!-- <view class="uni-group">
							<button class="uni-button" size="mini" type="primary">修改</button>
							<button class="uni-button" size="mini" type="warn">删除</button>
						</view> -->
					</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="state.pageSize"
					:current="state.pageCurrent" :total="state.total" @change="change" /></view>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { reactive } from "vue";
	const state = reactive({
		dateTime: Date.now(), //日期
		list: [
			{ "name": "清分通知书-应付金额", "value": 0 },
			{ "name": "总条数", "value": 0 },
			{ "name": "通行费推送总额", "value": 0 },
			{ "name": "小额推送总额", "value": 0 },
			{ "name": "通行费回盘总额", "value": 0 },
			{ "name": "小额回盘总额", "value": 0 },
			{ "name": "通行费回款总额", "value": 0 },
			{ "name": "小额回款总额", "value": 0 },
			{ "name": "通行费推送回盘剩余", "value": 0 },
			{ "name": "小额推送回盘剩余", "value": 0 },
			{ "name": "通行费推送回教剩余", "value": 0 },
			{ "name": "小额送回款剩余", "value": 0 },
		],
		// 每页数据量
		pageSize: 10,
		// 当前页
		pageCurrent: 1,
		// 数据总量
		total: 0,
	})
	const change = (e) => {
		console.log("e")
	}
	const goDetails = () => {
		uni.navigateTo({
			url: "/subpackage/after-sale/report/report-details"
		})
	}
</script>

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

	.time_wrap {
		display: flex;
		align-items: center;
		margin: 20rpx 30rpx;
	}

	.time {
		width: 40%;
		margin-left: 30rpx;
	}

	/deep/.uni-date__x-input {
		font-size: 13px !important;
		height: 30px !important;
		line-height: 30px !important;
	}

	.mini-btn {
		color: #ffffff;
		backgroundColor: rgb(118, 200, 77);
		borderColor: rgb(118, 200, 77);
		font-size: 26rpx;
		flex-shrink: 1;
	}

	.mini-btn1 {
		color: #ffffff;
		backgroundColor: rgb(232, 171, 79);
		borderColor: rgb(232, 171, 79);
		font-size: 26rpx;
		flex-shrink: 1;
	}

	.table_wrap {
		font-size: 14rpx;
		margin: 40rpx auto;
		width: 700rpx;
		height: auto
	}

	/* table {
		border-collapse: collapse;
		border: 1rpx solid red;
	}

	tr {
		display: flex;
	}

	td {
		border: 1rpx solid red;
	} */
	.uni-container {
		margin: 50rpx 30rpx;
	}

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

	/deep/.uni-pagination-box {
		font-size: 30rpx;
		display: flex;
		justify-content: flex-end;

	}

	/deep/.uni-pagination__num-current-text.data-v-88b7506d {
		font-size: 30rpx;
	}

	.button_wrap {
		display: flex;
		flex-direction: column;
		margin-left: 50rpx;
	}
</style>