notarization_applet/pages/home/index.vue

<template>
	<view class="content">
		<view class="one">
			<u-swiper :list="config.file" height="240px" indicator indicatorMode="line" circular></u-swiper>
		</view>
		<view class="two">
			<view class="two_1">
				正在申办
			</view>
			<view class="two_2">
				<view class="list_1" v-if="total==0">暂无申办事项，请点击下方赋强公证按钮快速开始</view>
				<view class="list_2" v-else>列表</view>
			</view>
		</view>
		<view class="thr">
			<view class="list" v-for="(item, index) in menuList" :key="index" @click="toCommon(item.route)">
				<image class="image" mode="aspectFill" :src="item.file&&item.file.length>0?item.file[0].url:''"></image>
				<view class="left">
					<view class="name">{{item.title}}</view>
					<view class="other">{{item.brief}}</view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" size="20"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { getCurrentInstance, ref } from 'vue';
	//该依赖已内置不需要单独安装
	import { onShow, onPullDownRefresh } from "@dcloudio/uni-app";
	// 请求接口
	const $api = getCurrentInstance()?.appContext.config.globalProperties.$api;
	const $config = getCurrentInstance()?.appContext.config.globalProperties.$config;
	// 基本信息
	const config = ref({ logo: [], file: [] });
	const list = ref([]);
	const total = ref(0);
	const menuList = ref([]);
	onShow(async () => {
		await searchConfig();
		await searchOther();
		await search();
	})
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 其他查询信息
	const searchOther = async () => {
		const res = await $api('module', 'GET', { is_use: '0' });
		if (res.errcode === 0) {
			menuList.value = res.data
		} else {
			uni.showToast({
				title: res.errmsg || '',
				icon: 'error',
			});
		}
	};
	// 查询
	const search = async () => {
		const info = {
			skip: 0,
			limit: 2,
			status: '0'
		}
		// const res = await $api('car', 'GET', info);
		// if (res.errcode === 0) {
		// 	list.value = list.value.concat(res.data)
		// 	total.value = res.total
		// } else {
		// 	uni.showToast({
		// 		title: res.errmsg || '',
		// 		icon: 'error',
		// 	});
		// }
	};
	const toCommon = (url) => {
		uni.navigateTo({
			url
		})
	};
	// 查看详情
	const toView = (item) => {
		uni.navigateTo({
			url: `/pagesHome/notarization/index?id=${item.id || item._id}`
		})
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		background-color: var(--f1Color);

		.two {
			margin: 2vw;
			padding: 3vw;
			border-radius: 2vw;
			background-color: var(--mainColor);

			.two_1 {
				padding: 2vw 0;
				border-bottom: 1px solid var(--f5Color);
				text-align: center;
			}

			.two_2 {
				.list_1 {
					text-align: center;
					padding: 2vw;
					font-size: var(--font14Size);
					color: var(--f85Color);
				}
			}
		}

		.thr {
			margin: 0 0 2vw 0;

			.list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: var(--mainColor);
				margin: 2vw 2vw 0 2vw;
				padding: 3vw;
				border-radius: 2vw;

				.image {
					width: 18vw;
					height: 18vw;
					border-radius: 18vw;
				}

				.left {
					width: 60vw;

					.name {
						font-weight: bold;
						font-size: var(--font16Size);
					}

					.other {
						margin: 2vw 0 0 0;
						font-size: var(--font12Size);
						color: var(--f85Color);
					}
				}
			}
		}
	}
</style>