mailbox-uniapp/pages/my/fav.vue

<template>
	<view class="wrapper">
		<view class="header text-center">
			<fui-icon name="arrowleft" color="#fff" :size="50" @tap="goBack"></fui-icon>
			<text>我的收藏</text>
		</view>
		<view class="main">
			<fui-row class="tools text-center">
				<fui-col :span="12">
					<span class="mr-20">全部</span>
				</fui-col>
				<fui-col :span="12" @click="queryShow = true">
					<span class="mr-6">筛选</span>
					<fui-icon name="screen" :size="30" />
				</fui-col>
			</fui-row>
			<view class="body">
				<view class="card" v-for="item in favs" @tap="goAction(item)">
					<view class="card-header flex between">
						<view class="flex gap-6 v-center">
							<view class="flex v-center" v-if="item.mailLevel">
								<view class="dot mr-4"></view>
								<text>{{ item.mailLevel }}</text>
							</view>
							<view class="tag" v-if="item.mailState">
								<text>{{ getDictLable(mailStates, item.mailState) }}</text>
							</view>
							<view style="width: 120px;" class="text-nowrap">{{ item.mailCategory }}</view>
						</view>
						<text>{{ item.mailTime }}</text>
					</view>
					<view class="card-body">
						<view class="flex gap v-center mb-10"></view>
						<view class="card-content">
							<view class="flex between info">
								<view>
									<text class="mr-8">{{ item.contactName }}</text>
									<text>{{ item.contactPhone }}</text>
								</view>
								<text>{{ item.contactIdCard }}</text>
							</view>
							<view class="content mt-6 mb-8">{{ item.content }}</view>
						</view>
					</view>
				</view>
				
				<view class="mt-40" v-if="!favs.length">
					<fui-empty src="/static/images/component/empty/img_data_3x.png" title="暂无数据" class="mt-20"></fui-empty>
				</view>
			</view>
		</view>
	</view>
	
	<query v-model="queryShow" v-model:data="queryParam" @submit="getList" />
</template>

<script setup>
	import { ref, reactive } from "vue"
	import { listFav } from '@/api/fav'
	import { getDictLable, formatTimeText, getFlowTagType } from '@/common/util'
	import { getDictOptions } from '@/common/dict'
	const mailStates = getDictOptions('mail_state')
	
	function goBack() {
		uni.switchTab({
			url: '/pages/my/my'
		});
	}
	
	const favs = ref([])
	const queryShow = ref(false)
	const queryParam = ref({})
	
	getList()
	
	function getList() {
		uni.showLoading({
			title: '加载中'
		});
		listFav(queryParam.value).then(data => {
			favs.value = data.records
			uni.hideLoading();
		}).catch((e) => {
			console.error(e)
			uni.hideLoading();
		})
	}
	
	function goAction(item) {
		uni.navigateTo({
			url: `/pages/work/action?mailId=${item.mailId}`
		});
	}
	
</script>

<style lang="scss" scoped>
	.wrapper {
		.header {
			padding-top: 40px;
			background-color: var(--primary-color);
			color: #fff;
			height: 46px;
			line-height: 46px;
			position: relative;
			.fui-icon {
				position: absolute;
				left: 10px;
			}
		}
		.main {
			.tools {
				box-shadow: inset 0px 0 0px 1px #E5E5E5;
				background-color: #fff;
				font-size: 12px;
				.fui-col {
					height: 42px;
					line-height: 42px;
				}
			}
			.body {
				height: calc(100vh - 126px);
				overflow: auto;
			}
		}
		.card {
			margin: 12px;
			.card-header {
				height: 25px;
				line-height: 25px;
				background-color: var(--primary-color);
				color: #fff;
				padding: 0 12px;
				font-size: 9px;
				.tag {
					background-color: #ACB5EB;
					color: var(--primary-color);
					height: 13px;
					line-height: 13px;
					padding: 0 4px;
					border-radius: 2px;
				}
			}
			.card-body {
				background-color: #fff;
				padding: 10px 12px;
				font-size: 10px;
				color: #999;
				.card-content {
					border-top: 1px solid #E6EAFC;
					.info {
						padding: 6px 0;
					}
					
					.content {
						color: #666;
					}
				}
			}
		}
		.dot {
			width: 9px;
			height: 9px;
			border-radius: 50%;
			background-color: #6CFF5E;
		}
	}
</style>