notarization_applet/pagesHome/path/index.vue

<template>
	<view class="content">
		<view class="one">
			<view class="list" v-for="(item, index) in list" :key="index">
				<view class="list_1">
					<view class="number">第 {{index+1}} 步</view>
					<image class="image" :src="item.icon&&item.icon.length>0?item.icon[0].url:''">
					</image>
					<view class="name textOver">{{item.name||'暂无'}}</view>
				</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 = ref({ logo: [] });
	// 列表
	const list = ref([]);
	const total = ref(0);
	onShow(async () => {
		await searchConfig();
		await search();
	})
	onPullDownRefresh(async () => {
		await search();
		uni.stopPullDownRefresh();
	})
	// config信息
	const searchConfig = async () => {
		config.value = uni.getStorageSync('config');
	};
	// 查询
	const search = async () => {
		const res = await $api('path', 'GET', {
			is_use: '0'
		});
		if (res.errcode === 0) {
			list.value = list.value.concat(res.data)
			total.value = res.total
		} else {
			uni.showToast({
				title: res.errmsg || '',
				icon: 'error',
			});
		}
	};
</script>
<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;

		.one {
			margin: 2vw;

			.list {
				margin: 0 0 2vw 0;
				padding: 2vw;
				border-radius: 5px;
				background: var(--fFFColor);
				border: 1px solid var(--f5Color);

				.list_1 {
					position: relative;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.number {
						position: absolute;
						top: -2px;
						left: 2px;
						font-size: var(--font14Size);
						color: var(--mainColor);
					}

					.image {
						width: 15vw;
						height: 15vw;
					}

					.name {
						color: var(--mainColor);
						margin: 2vw 0;
						font-size: var(--font16Size);
					}
				}
			}
		}
	}
</style>