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

<template>
	<view class="content">
		<view class="uni-container">
			<uni-table ref="table" border stripe type="selection">
				<uni-tr>
					<uni-th align="center" width="40">序号</uni-th>
					<uni-th align="center" width="60">渠道名称</uni-th>
					<uni-th align="center" width="50">填写人</uni-th>
					<uni-th align="center" width="70">推送日期</uni-th>
					<uni-th align="center" width="100">通行费推送总额</uni-th>
					<uni-th align="center" width="90">小额推送总额</uni-th>
					<uni-th align="center" width="100">通行费回盘总额</uni-th>
					<uni-th align="center" width="90">小额回盘总额</uni-th>
					<uni-th align="center" width="100">通行费回款总额</uni-th>
					<uni-th align="center" width="90">小额回款总额</uni-th>
					<uni-th align="center" width="120">通行费推送回盘剩余</uni-th>
					<uni-th align="center" width="110">小额推送回盘剩余</uni-th>
					<uni-th align="center" width="120">通行费推送回教剩余</uni-th>
					<uni-th align="center" width="100">小额送回款剩余</uni-th>
					<uni-th align="center" width="130">剩余说明(结算组填写)</uni-th>
					<uni-th align="center" width="130">应付金额</uni-th>
					<uni-th align="center" width="120">操作</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 },
			{ "name": "应付金额", "value": 0 },
		],
		// list: {
		// 	"总条数": "0",
		// 	"通行费推送总额:": "0元",
		// 	"小额推送总额": "0元",
		// 	"通行费回盘总额": "0元",
		// 	"小额回盘总额": "0元",
		// 	"通行费回款总额": "0元",
		// 	"小额回款总额": "0元",
		// 	"通行费推送回盘剩余": "0元",
		// 	"小额推送回盘剩余": "0元",
		// 	"通行费推送回教剩余": "0元",
		// 	"小额送回款剩余": "0元",
		// },
		// 每页数据量
		pageSize: 10,
		// 当前页
		pageCurrent: 1,
		// 数据总量
		total: 0,
	})
	const change = (e) => {
		console.log("e")
	}
</script>

<style scoped>
	.content {
		font-size: 32rpx;
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.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;
	}

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

	.uni-container {
		/* margin: 50rpx 30rpx; */
		transform: rotate(90deg);
	}

	/deep/.uni-table-scroll {
		width: 186%;
		overflow-x: auto;
		margin-top: 270rpx;
	}

	/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;
		width: 153%;

	}

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