hlt_app/pages/index/pages/Deploy/index.vue

<!-- 调配计划页面 -->
<template>
	<view class="deploy-plan">
		<view class="plan-list-box" v-for="(plan, index) in deployList" :key="index">
			<custom-collapse>
				<template #collapseTitle>
					<view class="title-box">
						{{plan.plan}}
					</view>
				</template>
				<template #collapseContent>
					<view class="plan-list">
						<view class="plan-list-item" v-for="(item,index) in plan.fileList" :key="index"
							@tap="handleOpenFile(item)">
							<view class="left">
								<view class="icon">
									<image style="width: 100%; height: 100%;"
										:src="`/static/images/index/deploy/${item.type}.svg`" mode="scaleToFill">
									</image>
								</view>
								<view class="title">
									{{item.title}}
								</view>
							</view>
							<view class="right">
								<image style="width: 100%; height: 100%;"
									src="/static/images/index/deploy/right-arrow.svg" mode="scaleToFill"></image>
							</view>
						</view>
					</view>
				</template>
			</custom-collapse>
		</view>
	</view>
</template>

<script lang="ts">
	export default {
		options:{
			styleIsolation: 'shared'
		}
	}
</script>

<script setup lang="ts">
	import {
		reactive
	} from 'vue';
	import CustomCollapse from '@/components/Collapse/CustomCollapse.vue';
	const deployList = reactive([{
			id: 1,
			plan: "年度配水计划",
			number: 3,
			fileList: [{
					title: "2024年度配水计划",
					type: "pdf",
					url: "/static/files/hlt_file.pdf"
				},
				{
					title: "2024年度配水计划",
					type: "pdf",
					url: "/static/files/hlt_file.pdf"
				},
				{
					title: "2024年度配水计划",
					type: "docx",
					url: "/static/files/hlt_file.docx"
				}
			]
		},
		{
			id: 2,
			plan: "春灌配水计划",
			number: 1,
			fileList: [{
				title: "黑龙滩灌区2024年育秧用水",
				type: "xlsx",
				url: "/static/files/hlt_file.xlsx"
			}]
		},
		{
			id: 3,
			plan: "其他计划",
			number: 2,
			fileList: [{
					title: "其他配水计划",
					type: "docx",
					url: "/static/files/hlt_file.docx"
				},
				{
					title: "其他配水计划",
					type: "xlsx",
					url: "/static/files/hlt_file.xlsx"
				}
			]
		}
	])
	const handleOpenFile = (file) => {
		console.log(file)
		uni.openDocument({
			filePath: file.url,
			showMenu: true,
			success: function(res) {
				console.log('打开文档成功');
			}
		});
	}
</script>

<style lang="scss" scoped>
	.deploy-plan {
		min-height: calc(100vh - var(--window-top) - 40rpx);
		background-color: $uni-user-page-bgc;
		padding: 20rpx;

		.plan-list-box {
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 40rpx;

			.custom-collapse {

				.title-box {
					padding-bottom: 20rpx;
					font-family: Source Han Sans;
					font-size: 40rpx;
					font-weight: 500;
					font-feature-settings: "kern" on;
					color: $uni-text-color;
				}

				.plan-list {

					&-item {
						padding: 0 30rpx;
						margin-bottom: 20rpx;
						height: 100rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						background: #F7F9FD;
						border-radius: 12rpx;

						&:last-child {
							margin-bottom: 0;
						}

						.left {
							display: flex;
							align-items: center;

							.icon {
								width: 40rpx;
								height: 52rpx;
							}

							.title {
								margin-left: 30rpx;
								font-family: 思源黑体;
								font-size: 36rpx;
								font-feature-settings: "kern" on;
								color: $uni-text-color;
							}
						}

						.right {
							width: 20rpx;
							height: 36rpx;
						}

						// &:last-child{
						// 	margin-bottom: 0;
						// }
					}
				}
			}
		}


	}
</style>