ElectronClient/tax-guidance/pages/table/table.vue

<template>
	<div class="page-container bg-white">
		<div class="top-div">
			<tn-tabs v-model="currentTabIndex" :bottom-shadow="false" :bar="false">
				<TnTabsItem v-for="(item, index) in tabsData" :key="index" :title="item.text" />
			</tn-tabs>
			<tn-button width="80px" height="32px" :plain="true" text-color="#0099ff" @click="backToIndex">
				<uni-icons type="arrow-left" size="18" color="#0099ff" style="margin-right: 5px;"></uni-icons>返回
			</tn-button>
		</div>
		<div class="tools-div">
			<div style="width: 300px;">
				<tn-input placeholder="请输入关键词搜索" height="32px">
					<template #prefix>
						<uni-icons type="search" size="18" color="#ccc"></uni-icons>
					</template>
				</tn-input>
			</div>
			<div class="tools-btn">
				<tn-button width="80px" height="32px" :plain="true" text-color="#0099ff" @click="shareToggle">
					筛选<uni-icons type="down" size="12" color="#0099ff" style="margin-left: 5px;"></uni-icons>
				</tn-button>
				<div style="width: 2vw;"></div>
				<tn-button width="80px" height="32px" text-color="#fff" @click="backToIndex">
					<uni-icons type="search" size="18" color="#fff" style="margin-right: 5px;"></uni-icons>搜索
				</tn-button>
			</div>
		</div>
		<div>
			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th width="150" align="center">时间</uni-th>
					<uni-th width="100" align="center">票号</uni-th>
					<uni-th width="100" align="center">姓名</uni-th>
					<uni-th width="220" align="center">身份证</uni-th>
					<uni-th width="180" align="center">业务类型</uni-th>
					<uni-th width="180" align="center">办理状态</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in tableData" :key="index">
					<uni-td>{{ item.date }}</uni-td>
					<uni-td>
						<view class="name">{{ item.name }}</view>
					</uni-td>
					<uni-td align="center">{{ item.address }}</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>
			<div class="pagination-div">
				<p>共<span class="page-span">{{ total }}</span>条数据，每页显示<span class="page-span">{{ pageSize }}</span>条</p>
				<view class="uni-pagination-box"><uni-pagination show-icon :page-size="pageSize" :current="pageCurrent"
						:total="total" @change="change" /></view>
			</div>
		</div>
		<uni-popup ref="share" type="share" safeArea backgroundColor="#fff">
			<div class="popup-div">
				<div class="fiter-items"></div>
				<div class="filter-btn">
					<tn-button width="80px" height="32px" :plain="true" text-color="#999" border-color="#999" @click="shareToggle">
						重置
					</tn-button>
					<div style="width: 2vw;"></div>
					<tn-button width="80px" height="32px" text-color="#fff" @click="backToIndex">
						确定
					</tn-button>
				</div>
			</div>
		</uni-popup>
	</div>
</template>
<script setup lang="ts">
	import { ref } from 'vue'
	import TnTabs from '@/uni_modules/tuniaoui-vue3/components/tabs/src/tabs.vue'
	import TnTabsItem from '@/uni_modules/tuniaoui-vue3/components/tabs/src/tabs-item.vue'

	/*tabs变量*/
	let currentTabIndex = ref(0)
	let tabsData = [
		{
			text: '全部',
		},
		{
			text: '待办理',
		},
		{
			text: '办理中',
		},
		{
			text: '已办理',
		}
	]

	/*表格变量*/
	let searchVal = ref('')
	let tableData = []
	// 每页数据量
	let pageSize = ref(10)
	// 当前页
	let pageCurrent = ref(1)
	// 数据总量
	let total = ref(0)
	let loading = ref(false)

	const share = ref(null)

	//分页触发
	const change = (e) => {
		// $refs.table.clearSelection()
		getData(e.current)
	}

	const getData = (pageCurrent, value = '') => {

	}

	const shareToggle = () => {
		console.log(share.value?.$el || share.value)
		share.value?.open()
	}

	const backToIndex = () => {
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
</script>

<style lang="scss">
	.bg-white {
		background-color: #fff;
	}

	.top-div {
		display: flex;
		justify-content: space-between;
		padding: 6vh 20px 1vh 20px;
	}

	.tools-div {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 20px;

		.tools-btn {
			display: flex;
		}
	}

	.pagination-div {
		display: flex;
		justify-content: space-between;
		padding: 10px 20px;

		.page-span {
			display: inline;
			color: #0099ff;
			margin: 0 4px;
		}
	}

	.uni-group {
		display: flex;
		align-items: center;
	}
	
	.popup-div{
		.filter-btn{
			height: 6vh;
			padding: 10px 0;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
		}
	}
</style>