BRS1.0/pages/detail/index.vue

<template>
	<view class="app-content">
		<view class="header">
			<view class="log" @tap="fall"></view>
		</view>
		<!--    <view class="nav">
      <view :class="action === index ? 'nav_lists': 'nav_list'" v-for="(item, index) in list" :key="index" @tap="lop(index)">{{item.name}}</view>
    </view> -->
		<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
			<swiper class="swiper-box"  @change="change"  style="height:11rem">
				<swiper-item v-for="(item ,index) in info" :key="index" >
					<view class="swiper-item">
						<image style="width:100%" src="../../static/bg.png" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="content" :style="{top:dataheight}">
			<uni-section title="行李详情" type="line"></uni-section>
			<view class="choice" @touchmove="movetran">
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="list">
						<view class="lable">航班号</view>
						<uni-easyinput :inputBorder="false"  :styles="style" :disabled="true" v-model="dataheight"
							type="text" placeholder="航班号" />
						</uni-forms>
						<view class="listup"></view>
					</view>
					<view class="list" @click="show('simple')">
						<view class="lable">航班日期</view>
						<uni-easyinput :inputBorder="false" :clearable="true" :styles="style" :disabled="false" v-model="datatime"
							type="text" placeholder="航班日期" />
						</uni-forms>
						<view class="listup"></view>
					</view>
					<view class="list">
						<view class="lable">行李牌号</view>
						<uni-easyinput :inputBorder="false" :clearable="false" :styles="style" :disabled="false" v-model="dataheight"
							type="text" placeholder="行李牌号" />
						</uni-forms>
						<view class="listup"></view>
					</view>
					<view class="list">
						<view class="lable">操作节点</view>
						<uni-easyinput :inputBorder="false" :clearable="false" :styles="style" :disabled="false" v-model="dataheight"
							type="text" placeholder="操作节点" />
						</uni-forms>
						<view class="listup"></view>
					</view>
					<view class="list">
						<view class="lable">操作位置</view>
						<uni-easyinput :inputBorder="false" :clearable="false" :styles="style" :disabled="false" v-model="dataheight"
							type="text" placeholder="操作位置" />
						</uni-forms>
						<view class="listup"></view>
					</view>
					<view class="list">
						<view class="lable">操作时间</view>
						<uni-easyinput :inputBorder="false" :clearable="false" :styles="style" :disabled="false" v-model="dataheight"
							type="text" placeholder="操作时间" />
						</uni-forms>
						<view class="listup"></view>
					</view>
					<view class="list">
						<view class="lable">操作人</view>
						<uni-easyinput :inputBorder="false" :clearable="false" :styles="style" :disabled="false" v-model="dataheight"
							type="text" placeholder="操作人" />
						</uni-forms>
						<view class="listup"></view>
					</view>
					<view class="list">
						<view class="lable">发往节点</view>
						<uni-easyinput :inputBorder="false" :clearable="false" :styles="style" :disabled="false" v-model="dataheight"
							type="text" placeholder="发往节点" />
						</uni-forms>
						<view class="listup"></view>
					</view>
					<view class="list">
						<view class="lable">发往位置</view>
						<uni-easyinput :inputBorder="false" :clearable="false" :styles="style" :disabled="false" v-model="dataheight"
							type="text" placeholder="发往位置" />
						</uni-forms>
						<view class="listup"></view>
					</view>
					<view class="list">
						<view class="lable">特殊行李类型</view>
						<uni-easyinput :inputBorder="false" :clearable="false" :styles="style" :disabled="false" v-model="dataheight"
							type="text" placeholder="特殊行李类型" />
						</uni-forms>
						<view class="listup"></view>
					</view>
					<view class="list">
						<view class="lable">异常类型</view>
						<uni-easyinput :inputBorder="false" :clearable="false" :styles="style" :disabled="false" v-model="dataheight"
							type="text" placeholder="异常类型" />
						</uni-forms>
						<view class="listup"></view>
					</view>
					<view class="list">
						<view class="lable">装车状态</view>
						<uni-easyinput :inputBorder="false" :clearable="false" :styles="style" :disabled="false" v-model="dataheight"
							type="text" placeholder="装车状态" />
						</uni-forms>
						<view class="listup"></view>
					</view>
					<view class="list">
						<view class="lable">装车序号</view>
						<uni-easyinput :inputBorder="false" :clearable="false" :styles="style" :disabled="false" v-model="dataheight"
							type="text" placeholder="装车序号" />
						</uni-forms>
						<view class="listup"></view>
					</view>
					<view class="list">
						<view class="lable">容器</view>
						<uni-easyinput :inputBorder="false" :clearable="false" :styles="style" :disabled="false" v-model="dataheight"
							type="text" placeholder="容器" />
						</uni-forms>
						<view class="listup"></view>
					</view>
					<view class="list">
						<view class="lable">备注</view>
						<uni-easyinput :inputBorder="false" :clearable="false" :styles="style" :disabled="false" v-model="dataheight"
							type="text" placeholder="备注" />
						</uni-forms>
						<view class="listup"></view>
					</view>
				</scroll-view>
			</view>
		</view>
		<luanqing-date-picker 
            ref="datePickerObj" 
            :isSimple="mode === 'simple'" 
            :isMultiple="mode === 'multiple'" 
            @finishSelectDate="finishSelectDate" 
            :defaultCheckedList="['2023-03-28','2023-03-25']">
        </luanqing-date-picker>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				style: {
					disableColor: "#fff",
					color: "#000"
				},
				detailedTable: [{
						name: '离港：HU7410   CKG-CSX (113/171)'
					},
					{
						name: '离港：HU7410   CKG-CSX (113/171)'
					},
					{
						name: '离港：HU7410   CKG-CSX (113/171)'
					},
					{
						name: '离港：HU7410   CKG-CSX (113/171)'
					},
					{
						name: '离港：HU7410   CKG-CSX (113/171)'
					}
				],
				dataheight: '10.75rem',
				datatime: '',
				info: [{
					content: '内容 A'
				}, {
					content: '内容 B'
				}, {
					content: '内容 C'
				}],
				current: 0,
				mode: 'round',
				mode: 'simple',
			}
		},
		created(option) {},
		onLoad() {},
		onUnload() {},
		onShow() {},
		mounted() {},
		components: {},
		methods: {
			show(showType){
				this.mode = showType;
				this.$refs.datePickerObj.open();
			},
			finishSelectDate(e){
				this.datatime = e[0]
				console.error("选择了日期：",e);
			},
			movetran(e) {
				let arr = uni.getSystemInfoSync().windowHeight;
				this.dataheight = (e.changedTouches[0].clientY / 16) + 'rem'
				if (e.changedTouches[0].clientY / 16 > 10.75) {
					this.dataheight = 10.75 + 'rem'
				} else if (e.changedTouches[0].clientY / 16 < 3.75) {
					this.dataheight = 3.75 + 'rem'
				}
			},

			uplist() {
				uni.redirectTo({
					url: "/pages/loadingdetails/index"
				})
			},
			lop(index) {
				this.action = index
			},
			seach() {
				uni.redirectTo({
					url: "/pages/search/index"
				})
			},
			fall() {
				uni.switchTab({
					url: "/pages/mypage/index"
				})
			},
			change(e) {
				this.current = e.detail.current;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.app-content {
		>.header {
			width: 100%;
			height: 4.375rem;
			display: flex;
			justify-content: center;
			align-items: center;
			// background: rgba(49,85,99,1);
			color: rgb(16, 17, 22);
			font-family: Noto Sans SC;
			font-size: 1rem;
			position: fixed;
			left:0;
			top:0;
			z-index: 1;
			>.log {
				width: .375rem;
				height: .75rem;
				font-size: .75rem;
				position: absolute;
				left: 1.5rem;
				background: url('../../static/ico@1x.png') no-repeat;
				background-size: 100% 100%;
			}

			>.up {
				width: .8456rem;
				height: .8456rem;
				position: absolute;
				right: 1.5rem;
				background: url('../../static/search.png') no-repeat;
				background-size: 100% 100%;
				// color: rgb(37, 121, 160);
				// font-family: Noto Sans SC;
				// font-size: .875rem;
				// font-weight: 500;
			}
		}

		>.content {
			width: 100%;
			// height: calc(100vh - 20.9375rem - 4.375rem);
			padding-bottom: 0;
			position: absolute;
			bottom: 0;
			top: 10.75rem;
			border-radius: 6px 6px 0px 0px;
			overflow: hidden;
			background: rgb(255, 255, 255);

			>.choice {
				width: 100%;
				// height: 3.75rem;
				display: flex;
				align-items: center;
				padding: 0 0 0 0.8rem;
				box-sizing: border-box;

				>.scroll-Y {
					// height: calc(100% - 2.5rem - 2.75rem - 2.25rem - 2.25rem);
					width: 100%;
					height: 27.75rem;

					.list {
						height: 3.375rem;
						display: flex;
						align-items: center;
						border-bottom: 1px solid rgb(238, 238, 238);
						position: relative;
						color: rgb(0, 0, 0);
						font-family: Noto Sans SC;
						font-size: 13px;
						font-weight: 400;

						>.lable {
							color: rgb(0, 0, 0);
							font-family: Noto Sans SC;
							font-size: 13px;
							font-weight: 500;
							line-height: 19px;
							letter-spacing: 0px;
							text-align: left;
							width: 6rem;
						}

						>.listup {
							width: .25rem;
							height: .5rem;
							background: url('../../static/icos.png') no-repeat;
							background-size: 100% 100%;
							position: absolute;
							right: 1.5rem;
						}
					}
				}
			}



			.but {
				width: 20.5625rem;
				height: 2.5rem;
				background: linear-gradient(179.10deg, rgba(51, 161, 165, 1.00) 11.326%, rgba(59, 111, 142, 1.00) 119.032%, rgba(59, 111, 142, 1.00) 119.032%, rgba(59, 111, 142, 1.00) 119.032%);
				border-radius: .25rem;
				color: rgb(255, 255, 255);
				font-family: Noto Sans SC;
				font-size: 1rem;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 0.25rem;
				margin-bottom: 2.25rem;
			}
		}
	}
</style>