pad-app/pages/shipWork/documentList.vue

<template>
	<view class="documentList">
		<view class="container">
			<p class="title">作业单证</p>
			<ul>
				<li v-for="(item,index) in infoList" :key="index" @click="toGo(item.url)">
					<view class="round"></view>
					<p>{{item.name}}</p]>
				</li>
			</ul>
			<p class="title">其他作业</p>
			<ul>
				<li v-for="(item,index) in otherListh" :key="index" @click="toGo(item.url)">
					<view class="round"></view>
					<p>{{item.name}}</p>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 当前船的信息
				shipInfo: {},
				infoList: [{
						name: "杂项作业单",
						url: "mixWork"
					},
					{
						name: "系解缆",
						url: "untieCord"
					},
					{
						name: "供给",
						url: "supply"
					},
					{
						name: "指导员作业布置",
						url: "workAssign"
					},
					{
						name: "船舶装卸通知单",
						url: "notice"
					},
					{
						name: "质量意见征询",
						url: "opinion"
					},
					{
						name: "异常情况",
						url: "abnormal"
					},
					{
						name: "MAFI清单",
						url: "mafi"
					}
				],
				otherListh: [{
						name: "安全巡检",
						url: "patrol"
					},
					// {
					// 	name: "船舶载货量",
					// 	url: "mixWork"
					// },
					{
						name: "船舶资料",
						url: "shipInfo"
					},
					{
						name: "船舶计划",
						url: "shipPlan"
					},
					{
						name: "作业查询",
						url: "brandDetails"
					}
				],
			}
		},
		onLoad(options) {
			if ('params' in options) {
				// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
				this.shipInfo = JSON.parse(decodeURIComponent(options.params))
			}
			console.log(this.shipInfo)
		},
		methods: {
			toGo(url) {
				const params = encodeURIComponent(JSON.stringify(this.shipInfo));
				uni.navigateTo({
					url: `/pages/shipWork/${url}?params=${params}`
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.documentList {
		.container {
			padding: 30px 20px;

			.title {
				font-size: 20px;
				font-weight: bold;
			}

			ul {
				display: flex;
				flex-wrap: wrap;
				padding: 20px;
				margin-bottom: 20px;

				li {
					margin: 10px 20px;

					.round {
						width: 80px;
						height: 80px;
						background: #ccc;
						border-radius: 50%;
						margin: 10px auto;
					}

					p {
						text-align: center;
						font-size: 16px;
						margin-top: 10px;
					}
				}
			}
		}
	}
</style>