pad-app/pages/shipWork/carDetails.vue

<template>
	<view class="carDetails">
		<head-view :title="title" url="/pages/shipWork/brandDetails"></head-view>
		<view class="container contentFixed">
			<view class="ul">
				<view class="li">船名：
					<text v-if="workDetails.vslCnname == 'null'">-</text>
					<text v-else>{{workDetails.vslCnname}}</text>
				</view>
				<view class="li">航次：
					<text v-if="workDetails.vvyName == 'null'">-</text>
					<text v-else>{{workDetails.vvyName}}</text>
				</view>
				<view class="li">贸易类型：
					<text v-if="workDetails.tradeTypeNm == 'null'">-</text>
					<text v-else>{{workDetails.tradeTypeNm}}</text>
				</view>
				<view class="li">进出口：
					<text v-if="workDetails.ieFgNm == 'null'">-</text>
					<text v-else>{{workDetails.ieFgNm}}</text>
				</view>
				<view class="li">港口：
					<text v-if="workDetails.potName == 'null'">-</text>
					<text v-else>{{workDetails.potName}}</text>
				</view>
				<view class="li">提单号：
					<text v-if="workDetails.mnfBl == 'null'">-</text>
					<text v-else>{{workDetails.mnfBl}}</text>
				</view>
				<view class="li">报关状态：
					<text v-if="workDetails.customsDeclareStatus == 'null'">-</text>
					<text v-else>{{workDetails.customsDeclareStatus}}</text>
				</view>
				<view class="li">报关单号：
					<text v-if="workDetails.customsDeclareNo == 'null'">-</text>
					<text v-else>{{workDetails.customsDeclareNo}}</text>
				</view>
				<view class="li">货代：
					<text v-if="workDetails.agentName == 'null'">-</text>
					<text v-else>{{workDetails.agentName}}</text>
				</view>
				<view class="li">联系人：
					<text v-if="workDetails.consignee == 'null'">-</text>
					<text v-else>{{workDetails.consignee}}</text>
				</view>
				<view class="li">联系方式：
					<text v-if="workDetails.telephone == 'null'">-</text>
					<text v-else>{{workDetails.telephone}}</text>
				</view>
				<view class="li">品牌：
					<text v-if="workDetails.brdName == 'null'">-</text>
					<text v-else>{{workDetails.brdName}}</text>
				</view>
				<view class="li">车型：
					<text v-if="workDetails.bvmName == 'null'">-</text>
					<text v-else>{{workDetails.bvmName}}</text>
				</view>
				<view class="li">车型明细：
					<text v-if="workDetails.bvdName == 'null'">-</text>
					<text v-else>{{workDetails.bvdName}}</text>
				</view>
				<view class="li">型号：
					<text v-if="workDetails.model == 'null'">-</text>
					<text v-else>{{workDetails.model}}</text>
				</view>
				<view class="li">源类型：
					<text v-if="workDetails.sourceType == 'null'">-</text>
					<text v-else>{{workDetails.sourceType}}</text>
				</view>
				<view class="li">数量：
					<text v-if="workDetails.amount == 'null'">-</text>
					<text v-else>{{workDetails.amount}}</text>
				</view>
				<view class="li">车长：
					<text v-if="workDetails.carLength == 'null'">-</text>
					<text v-else>{{workDetails.carLength}}</text>
				</view>
				<view class="li">车宽：
					<text v-if="workDetails.carWidth == 'null'">-</text>
					<text v-else>{{workDetails.carWidth}}</text>
				</view>
				<view class="li">车高：
					<text v-if="workDetails.carHeight == 'null'">-</text>
					<text v-else>{{workDetails.carHeight}}</text>
				</view>
				<view class="li">重量：
					<text v-if="workDetails.weight == 'null'">-</text>
					<text v-else>{{workDetails.weight}}</text>
				</view>
				<view class="li">体积：
					<text v-if="workDetails.volume == 'null'">-</text>
					<text v-else>{{workDetails.volume}}</text>
				</view>
				<view class="li">单票数量：
					<text v-if="workDetails.ticketGtpks == 'null'">-</text>
					<text v-else>{{workDetails.ticketGtpks}}</text>
				</view>
				<view class="li">单票重量：
					<text v-if="workDetails.ticketWeight == 'null'">-</text>
					<text v-else>{{workDetails.ticketWeight}}</text>
				</view>
				<view class="li">单票体积：
					<text v-if="workDetails.ticketVolume == 'null'">-</text>
					<text v-else>{{workDetails.ticketVolume}}</text>
				</view>
			</view>
			<view class="tableInfo">
				<view class="title">车架号明细</view>
				<uni-table ref="table" :loading="loading" border emptyText="暂无更多数据">
					<uni-tr>
						<uni-th width="150" align="center">序号</uni-th>
						<uni-th align="center">车架号/条形码</uni-th>
						<uni-th align="center">场位</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in vinCodeDetails" :key="index">
						<uni-td align="center">{{ index + 1 }}</uni-td>
						<uni-td align="center">{{item.vinCode}}</uni-td>
						<uni-td align="center">{{ item.yardPos }}</uni-td>
					</uni-tr>
				</uni-table>
				<!-- <view class="pagination">
					<uni-pagination :total="total" :pageSize="pageSize" :current="pageCurrent" @change="pageChange" />
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	import sqlite from "../../common/sqlite.js"
	export default {
		data() {
			return {
				title: "船名 - 车型明细",
				workDetails: {},
				vinCodeDetails: [],
				loading: false,
				// 每页数据量
				pageSize: 3,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				id: "",
				vtpId: "",
			}
		},
		onLoad(options) {
			this.id = JSON.parse(decodeURIComponent(options.params)).id
		},
		mounted() {
			let title = uni.getStorageSync('shipWorkTitle')
			this.title = `${title} / 车型明细 `
			this.vtpId = uni.getStorageSync('vtpId')
			this.executeSql1('shipInfoTable')
			this.executeSql2('workQueryDetails')
			this.executeSql2('vinCodeDetails')
		},
		methods: {
			// 查
			executeSql1(tableName) {
				let sql = `select * from ${tableName}  WHERE vtpId = '${this.vtpId}'`
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					this.shipInfo = value[0]
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			// 查
			executeSql2(tableName) {
				let sql = `select * from ${tableName} WHERE contactId = '${this.id}'`
				sqlite.executeSqlCeshi(sql).then((value) => {
					// 在resolve时执行的回调函数
					if (tableName == 'workQueryDetails') {
						this.workDetails = value[0]
					} else {
						this.total = value.length
						this.vinCodeDetails = value
						this.initData()
					}
				}).catch((error) => {
					// 在reject时执行的回调函数
					console.error(error);
				});
			},
			// initData() {
			// 	let newArr = this.getMapping(this.vinCodeDetails, this.pageSize)
			// 	this.vinCodeDetails = newArr[this.pageCurrent - 1];
			// },
			// // 点击分页
			// pageChange(e) {
			// 	this.pageCurrent = e.current
			// 	this.initData()
			// },
			// // 分页切割数组(数组，分割个数)
			// getMapping(list, num) {
			// 	let len = list.length
			// 	let newList = []
			// 	if (len) {
			// 		var chunk = num
			// 		for (var i = 0, j = len; i < j; i += chunk) {
			// 			newList.push(list.slice(i, i + chunk))
			// 		}
			// 	}
			// 	return newList
			// },
		},
	}
</script>

<style lang="less" scoped>
	.carDetails {
		.container {
			padding: 30px 20px;
			background-color: #fff;

			.ul {
				display: flex;
				flex-wrap: wrap;
				padding: 20px;
				border-bottom: 1px solid #ccc;

				.li {
					width: 32%;
					font-weight: bold;
					margin-bottom: 10px;
				}
			}

			.tableInfo {
				padding: 20px;

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

				/deep/.uni-table-th {
					background-color: #fafafa;
				}

				.pagination {
					margin-top: 10px;
				}
			}
		}
	}
</style>