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">船名：{{testInfo.vslCnname}}</view>
				<view class="li">航次：{{testInfo.vvyName}}</view>
				<view class="li">贸易类型：{{testInfo.tradeType}}</view>
				<view class="li">进出口：{{testInfo.importExportFlag}}</view>
				<view class="li">港口：{{testInfo.potName}}</view>
				<view class="li">提单号：{{testInfo.mnfBl}}</view>
				<view class="li">报关状态：{{testInfo.customsDeclareStatus}}</view>
				<view class="li">报关单号：{{testInfo.customsDeclareNo}}</view>
				<view class="li">货代：{{testInfo.agentName}}</view>
				<view class="li">联系人：{{testInfo.consignee}}</view>
				<view class="li">联系方式：{{testInfo.telephone}}</view>
				<view class="li">品牌：{{testInfo.brdName}}</view>
				<view class="li">车型：{{testInfo.bvmName}}</view>
				<view class="li">车型明细：{{testInfo.bvdName}}</view>
				<view class="li">型号：{{testInfo.model}}</view>
				<view class="li">源类型：{{testInfo.sourceType}}</view>
				<view class="li">数量：{{testInfo.amount}}</view>
				<view class="li">车长：{{testInfo.carLength}}</view>
				<view class="li">车宽：{{testInfo.carWidth}}</view>
				<view class="li">车高：{{testInfo.carHeight}}</view>
				<view class="li">重量：{{testInfo.weight}}</view>
				<view class="li">体积：{{testInfo.volume}}</view>
				<view class="li">单票数量：{{testInfo.ticketGtpks}}</view>
				<view class="li">单票重量：{{testInfo.ticketWeight}}</view>
				<view class="li">单票体积：{{testInfo.ticketVolume}}</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 testInfo.vinCodeDetails" :key="index">
						<uni-td align="center">{{ item.godId }}</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: "船名 - 车型明细",
				testInfo: {
					vslCnname: "运程10",
					vvyName: "HC97759809",
					tradeType: "外贸",
					importExportFlag: "进口",
					potName: "巴塞罗那",
					mnfBl: "TD6955975087",
					customsDeclareStatus: "未报关",
					customsDeclareNo: "TD6955975087",
					agentName: "上海海通国际汽车物流有限公司",
					consignee: "张星星",
					telephone: "13266688888",
					brdName: "特斯拉",
					bvmName: "轿车",
					bvdName: "轿车",
					model: "STAY-CONNECTB",
					sourceType: "新能源",
					amount: "199",
					carLength: "199",
					carWidth: "199",
					carHeight: "199",
					weight: "1978",
					volume: "1978",
					ticketGtpks: "100",
					ticketWeight: "979",
					ticketVolume: "979",
					vinCodeDetails: []
				},
				barndRow: {},
				loading: false,
				// 每页数据量
				pageSize: 3,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				
				vtpId: "",
			}
		},
		mounted() {
			let title = uni.getStorageSync('shipWorkTitle')
			this.title = `${title} / 车型明细 `
			this.vtpId = uni.getStorageSync('vtpId')
			this.initData()
			this.executeSql1('shipInfoTable')
		},
		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);
				});
			},
			initData() {
				this.testInfo.vinCodeDetails = [{
					godId: "01",
					spdId: "",
					vinCode: "CJH67892734895917",
					yardPos: "A1-09-03",
				}, {
					godId: "02",
					spdId: "",
					vinCode: "CJH67892734895917",
					yardPos: "A1-09-03",
				}, {
					godId: "03",
					spdId: "",
					vinCode: "CJH67892734895917",
					yardPos: "A1-09-03",
				}, {
					godId: "04",
					spdId: "",
					vinCode: "CJH67892734895917",
					yardPos: "A1-09-03",
				}]
				this.total = this.testInfo.vinCodeDetails.length
				let newArr = this.getMapping(this.testInfo.vinCodeDetails, this.pageSize)
				this.testInfo.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>