pad-app/pages/shipWork/shipInfo.vue

<template>
	<view class="shipInfo">
		<head-view :title="title" url="/pages/shipWork/documentList"></head-view>
		<view class="container">
			<view class="ul">
				<view class="li">船名：{{shipInfo.vslCnname}}</view>
				<view class="li">总重：{{shipInfo.vslGton}}</view>
				<view class="li">净重：{{shipInfo.vslNetton}}</view>
				<view class="li">长度：{{shipInfo.vslLoa}}</view>
				<view class="li">宽度：{{shipInfo.vslBreadth}}</view>
				<view class="li">空载吃水：{{shipInfo.vslDraftunload}}</view>
				<view class="li">重载吃水：{{shipInfo.vslDraftload}}</view>
				<view class="li">舱口高度：{{shipInfo.spmCabinht}}</view>
				<view class="li">最低作业潮水：{{shipInfo.spmMintide}}</view>
				<view class="li">驾驶台位置：{{shipInfo.spmCab}}</view>
				<view class="li">跳板中左：{{shipInfo.spmBoardCentrele}}</view>
				<view class="li">跳板前左：{{shipInfo.spmBoardFrontle}}</view>
				<view class="li">跳板后左：{{shipInfo.spmBoardLaterle}}</view>
				<view class="li">跳板中右：{{shipInfo.spmBoardCentrerg}}</view>
				<view class="li">跳板前右：{{shipInfo.spmBoardFrontrg}}</view>
				<view class="li">跳板后右 ：{{shipInfo.spmBoardLaterrg}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import sqlite from "../../common/sqlite.js"
	export default {
		data() {
			return {
				title: "船名 - 船舶资料",
				shipInfo: {},
			}
		},
		mounted() {
			// this.shipInfo = uni.getStorageSync('shipInfo')
			this.executeSql1('shipmentShipManage')
		},
		methods: {
			// 查
			executeSql1(tableName) {
				let sql = `select * from ${tableName}`
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					this.shipInfo = value[0]
					this.title = `${this.shipInfo.vslCnname} - 船舶资料`
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
		}
	}
</script>

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

			.ul {
				display: flex;
				flex-wrap: wrap;
				padding: 0 20px;

				.li {
					min-width: 45%;
					margin: 10px 20px;
				}
			}
		}
	}
</style>