rongtong_301_app/collection/line.vue

<template>
	<view class="content">
		<view class="topbar" v-show="isIphone">
		</view>
		<view class="status_bar">
			<view class="left" @click="goBack"><u-icon name="arrow-left"></u-icon>返回</view>
			<span style="font-size: 36rpx;">转运线路</span>
			<view class="right">
			</view>
		</view>
		<view class="mainCont">
			<view class="title">转运线路</view>
			<view class="timeLine">
				<u-time-line>
					<u-time-line-item nodeTop="2" v-for="(item, index) in lines" :key="index">
						<template v-slot:node>
							<view class="u-node" style="background: #blue;" v-show="item.passState == 1">
							</view>
							<view class="u-node" style="background: #ff0000" v-show="item.passState == 2">
							</view>
							<view class="u-node" style="background: #BCBCBC;" v-show="item.passState == 3">
							</view>
						</template>
						<!-- 此处自定义了左边内容，用一个图标替代 -->
						<template v-slot:content>
							<view>
								<view class="u-order-title" :style="{color: item.passState == 3 ? '#BCBCBC' : ''}">
									{{ item.positionName }}
									<span style="float: right" v-show="item.passState == 1">{{ item.createTime }}</span>
									<span style="float: right; color:  #ff0000" v-show="item.passState == 2">未扫码</span>
								</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		data() {
			return {
				lines: [],
				isIphone: false,
			}
		},
		onLoad(params) {
			uni.getSystemInfo({
				success: (res) => {
					console.log(res)
					if (res.model == 'iPhone') {
						this.isIphone = true;
					}
				},
				fail: (err) => {
					console.log(err)
				}
			})
			NET.request(API.checkoutBatchPath, {}).then(res => {
				this.lines = res.data
			}).catch(error => {
				this.$refs.uToast.show({
					title: error.msg,
					type: 'warning',
				})
			})
		},
		onReady() {
			if (this.isIphone) {
				document.getElementsByClassName('mainCont')[0].style.height = document.getElementsByClassName('mainCont')[
					0].clientHeight - 25 + 'px'
			}
		},
		onShow() {},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style lang="scss">
	.mainCont {
		height: calc(100% - 80rpx);
		overflow-y: auto;
		background: #fff;

		.timeLine {
			width: calc(100% - 30px);
			margin: 0 auto;
			padding: 10px;
		}
	}

	.title {
		height: 40px;
		line-height: 40px;
		padding: 0 20px;
		font-weight: bold;
		border-bottom: 1px solid #f2f2f2;
	}

	.u-node {
		width: 12px;
		height: 12px;
		border-radius: 22px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #6aa0f7;
	}

	.u-order-title {
		margin-bottom: 20px;
	}
</style>