BRS1.0/pages/sorting/index.vue

<template>
	<view class="app-content">
		<!-- <img src="../../static/beijing.png" alt="" class="tuku"> -->
		<Navs :navname.sync="navname" @fall="fall"></Navs>
		<view class="content">
			<view class="content_top">
				<view class="craid">
					<view class="craid_data">
						<p>HU7412</p>
						<span>2023-02-17</span>
					</view>
					<view class="craid_data">
						<p>CTU</p>
						<span>12:00:00</span>
					</view>
					<view class="aircraft"></view>
					<view class="craid_data">
						<p>CSX</p>
						<span>14:23:00</span>
					</view>
				</view>
				<view class="scanning">
					<view :class="getFooterClass">
						<input class="input" v-model.trim="stratvalue" disabled="true" @tap="locationEntry" type="text"
							value=""
							placeholder-style="font-size:.8125rem;color:rgb(189, 214, 231);display:flex;justify-content: start;"
							placeholder="请输入操作位置" />
						<view class="log_l"></view>
						<view class="log"></view>
					</view>
					<view :class="getlooterClass">
						<input class="input" v-model.trim="endvalue" disabled="true" @tap="baggageEntry" type="text"
							value=""
							placeholder-style="font-size:.8125rem;color:rgb(189, 214, 231);display:flex;justify-content: start;"
							placeholder="请输入行李号" />
						<view class="log_l"></view>
						<view class="log"></view>
					</view>
				</view>
			</view>
			<view class="content_bootom" :style="{top:dataheight}">
				<view class="choice" @touchmove="movetran">
					<view :class="action === true ?'handle':'handles'" @tap="clicker">已处理</view>
					<view :class="action !== true ?'handle':'handles'" @tap="clicker">未处理</view>
				</view>
				<scroll-view scroll-y="true" class="scroll-Y">
					<view :class="item.types ? 'ups':'up'" v-for="(item, index) in listdate" :key="index"
						@touchstart="start" @touchend="(e)=>end(e,item)">
						<view class="list"  @tap="toDetail">行李编号：{{ item.name }}</view>
						<view class="down_up" @tap="up"></view>
						<view class="delete">
							<view class="log" @click="()=>up(item)"></view>
						</view>
					</view>
				</scroll-view>
				<view class="but" v-if="!action" @tap="clickOrder">一键处理</view>
			</view>
		</view>
		<!-- 提示信息和下拉弹窗 -->
		<mask-model :headername="headername" :typeShow="typeShow" :tabname="tabname" ref="showMask" btnType="1"
			@confirm="confirm" @cancel="cancel" titleColoe="#666666" cancelColor="#666666" confirmColor="#007AFF"
			:maskTitle="maskTitle"></mask-model>
	</view>
</template>

<script>
	import Navs from '../../components/header/navs.vue'
	import maskModel from '../../components/mask-model/mask-model.vue'
	export default {
		data() {
			return {
				isShow: true,
				dataheight: '20.75rem',
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				input: '',
				main: null,
				poll: null,
				filter: null,
				pusher: null,
				intentServer: null,
				arr: [],
				navname: '分拣',
				startcode: '扫码',
				stopcode: '扫码',
				action: true,
				listdate: [{
						name: '3880491101',
						types: false
					},
					{
						name: '3880491101',
						types: false
					},
					{
						name: '3880491101',
						types: false
					},
					{
						name: '3880491101',
						types: false
					},
					{
						name: '3880491101',
						types: false
					},
					{
						name: '3880491101',
						types: false
					},
					{
						name: '3880491101',
						types: false
					},
					{
						name: '3880491101',
						types: false
					},
					{
						name: '3880491101',
						types: false
					},
					{
						name: '3880491101',
						types: false
					},
					{
						name: '3880491101',
						types: false
					},
					{
						name: '3880491101',
						types: false
					},
					{
						name: '3880491101',
						types: false
					}
				],
				arr: [], //触发判断
				startData: {
					clientX: 0,
					clientY: 0
				},
				stratvalue: '', //开始位置
				endvalue: '', //结束位置
				maskTitle: '该行李不属于当前航班，请选择处理方式。',
				tabname: '', //按钮名称
				typeShow: true,
				headername: '提示信息',
			}
		},
		created(option) {},
		onLoad(option) {
			this.navname = JSON.parse(decodeURIComponent(option.item))
			if (this.navname == '分拣') {
				this.tabname = '航班'
			}
		},
		onUnload() {
			// this.$refs.showMask.show();
		},
		onShow() {},
		mounted() {
			// this.$refs.showMask.show();
			// console.log(this.stratvalue.length)
		},
		computed: {
			getFooterClass() {
				return this.stratvalue ? 'scanning_cds' : 'scanning_cd'
			},
			getlooterClass() {
				return this.endvalue ? 'scanning_cds' : 'scanning_cd'
			}
		},
		components: {
			Navs,
			maskModel: maskModel,
		},
		methods: {
			//下拉
			up() {
				this.typeShow = false
				this.maskTitle = '是否确定要拉下该件行李？'
				this.headername = '下拉提示'
				this.$refs.showMask.show();
			},
			confirm: function(e) { //确定按钮
				console.log('您点击了确定按钮');
			},
			cancel: function() { //取消按钮
				console.log('您点击了取消按钮');
			},
			toDetail(){
				uni.redirectTo({
					url: "/pages/detail/index"
				})
			},
			clickOrder() {
				uni.redirectTo({
					url: "/pages/baggagecheck/index"
				})
			},
			baggageEntry() {
				uni.redirectTo({
					url: "/pages/baggageEntry/index"
				})
			},
			locationEntry() {
				uni.redirectTo({
					url: "/pages/locationEntry/index"
				})
			},
			fall() {
				uni.switchTab({
					url: "/pages/index/index"
				})
			},
			clicker() {
				this.action = !this.action
			},
			movetran(e) {
				let arr = uni.getSystemInfoSync().windowHeight;
				this.dataheight = (e.changedTouches[0].clientY / 16) + 'rem'
				if (e.changedTouches[0].clientY / 16 > 20.75) {
					this.dataheight = 20.75 + 'rem'
				} else if (e.changedTouches[0].clientY / 16 < 7.3125) {
					this.dataheight = 6.3125 + 'rem'
				}
			},
			start(e) {
				this.startData.clientX = e.changedTouches[0].clientX;
			},
			end(e, item) {
				const subX = e.changedTouches[0].clientX - this.startData.clientX;
				if (subX > 50) {
					// console.log('右滑')
					item.types = false
				} else if (subX < -50) {
					item.types = true
					// console.log('左滑')
				}
			},
			checkMore(item) {
				console.log(item)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.app-content {
		position: relative;
		background: rgb(49, 85, 99);

		>.content {
			width: 100%;
			height: calc(100vh - 5.375rem);
			position: relative;

			// overflow: hidden;
			// background: rgb(49, 85, 99);
			>.content_top {
				width: 100%;
				// background: rgb(49, 85, 99);
				padding-bottom: 1.3125rem;

				>.craid {
					// width: 100%;
					height: 5.625rem;
					padding: 0 2.5625rem 0 2.5625rem;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					align-items: center;

					>.craid_data {
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: start;

						>p {
							color: rgb(255, 255, 255);
							font-family: Noto Sans SC;
							font-size: 18px;
							font-weight: 700;
						}

						>span {
							color: rgb(255, 255, 255);
							font-family: Noto Sans SC;
							font-size: 13px;
							font-weight: 500;
						}
					}

					>.aircraft {
						width: 1.75rem;
						height: 1.75rem;
						background: url('../../static/hang.png') no-repeat;
						background-size: 100% 100%;
					}
				}

				>.scanning {
					height: 12rem;
					padding: 0 1.5rem 0 1.5rem;
					opacity: 1;
					transition: all 3s;

					.scanning_cd {
						width: 100%;
						height: 3rem;
						opacity: 1;
						transition: all 3s;
						background: rgb(59, 103, 123);
						margin-top: 1rem;
						margin-bottom: .5rem;
						border-radius: 4px;
						display: flex;
						justify-content: center;
						align-items: center;
						color: rgb(255, 255, 255);
						font-family: Noto Sans SC;
						font-size: 16px;

						>.log {
							width: .875rem;
							height: .875rem;
							background: url('../../static/saoma.png') no-repeat;
							background-size: 100% 100%;
							margin-left: 1rem;
						}

						>.log_l {
							width: .125rem;
							height: 1.3125rem;
							margin-left: 4rem;
							background: rgb(255, 255, 255);
						}
					}

					.scanning_cds {
						width: 100%;
						height: 3rem;
						opacity: 1;
						transition: all 3s;
						background: rgb(51, 161, 165);
						margin-top: 1rem;
						margin-bottom: .5rem;
						border-radius: 4px;
						display: flex;
						justify-content: center;
						align-items: center;
						color: rgb(255, 255, 255);
						font-family: Noto Sans SC;
						font-size: 16px;

						>.log {
							width: .875rem;
							height: .875rem;
							background: url('../../static/saoma.png') no-repeat;
							background-size: 100% 100%;
							margin-left: 1rem;
						}

						>.log_l {
							width: .125rem;
							height: 1.3125rem;
							margin-left: 4rem;
							background: rgb(255, 255, 255);
						}
					}
				}
			}

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

				>.choice {
					width: 100%;
					height: 2.5rem;
					display: flex;
					background: rgb(240, 241, 243);

					>.handle {
						width: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						color: rgb(0, 0, 0);
						font-family: Noto Sans SC;
						font-size: 15px;
						font-weight: 700;
						border-radius: 6px 6px 0px 0px;
						background: rgb(255, 255, 255);
					}

					>.handles {
						width: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						color: rgb(0, 0, 0);
						font-family: Noto Sans SC;
						font-size: 15px;
						font-weight: 700;
					}
				}

				.up {
					width: 100%;
					display: flex;
					align-items: center;
					margin-left: 1rem;
					border-bottom: 1px solid rgb(238, 238, 238);

					// transform: all 3s;
					>.down_up {
						width: .875rem;
						height: .875rem;
						background: url('../../static/xia.png') no-repeat;
						background-size: 100% 100%;
					}

					>.list {
						width: 97%;
						position: relative;
						height: 3.75rem;
						display: flex;
						align-items: center;
						transform: all 3s;
						right: 0;
						color: rgb(0, 0, 0);
						font-family: Noto Sans SC;
						font-size: 13px;
						font-weight: 500;
					}

					>.delete {
						width: 3.75rem;
						height: 3.75rem;
						background: rgb(237, 101, 101);
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						right: -3.75rem;
						transform: all 3s;

						>.log {
							width: .875rem;
							height: .875rem;
							background: url('../../static/vector@1x.png') no-repeat;
							background-size: 100% 100%;
						}
					}
				}

				.ups {
					width: 100%;
					display: flex;
					align-items: center;
					margin-left: 1rem;
					border-bottom: 1px solid rgb(238, 238, 238);

					// transform: all 3s;
					>.down_up {
						width: .875rem;
						height: .875rem;
						position: relative;
						right: 1.875rem;
						background: url('../../static/xia.png') no-repeat;
						background-size: 100% 100%;
					}

					>.list {
						width: 97%;
						position: relative;
						height: 3.75rem;
						display: flex;
						align-items: center;
						right: 3.75rem;
						// right: 0;
						color: rgb(0, 0, 0);
						font-family: Noto Sans SC;
						font-size: 13px;
						font-weight: 500;
						transform: all 3s;
					}

					>.delete {
						width: 3.75rem;
						height: 3.75rem;
						background: rgb(237, 101, 101);
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						right: 1rem;
						transform: all 3s;

						// right: -3.75rem;
						>.log {
							width: .875rem;
							height: .875rem;
							background: url('../../static/vector@1x.png') no-repeat;
							background-size: 100% 100%;
						}
					}
				}

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

				.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>