BRS1.0/pages/sorting/index.vue

<template>
  <view class="app-content">
		<!-- <img src="../../static/beijing.png" alt="" class="tuku"> -->
		<Nav :navname.sync="navname" @fall="fall"></Nav>
		<view class="content">
			<view class="content_top">
				<view class="craid">
					<view class="name">
						<p>航班号</p>
						<span>HU7412</span>
					</view>
					<view  class="name">
						<p>目的站</p>
						<span>CSX</span>
					</view>
					<view  class="name">
						<p>航班日期</p>
						<span>2023-2-17</span>
					</view>
					<view  class="name">
						<p>预计起飞时间</p>
						<span>12:00:00</span>
					</view>
				</view>
				<view class="scanning">
					<view class="scanning_cd">
						<view class="log"></view>
						<view class="name">初始位置{{startcode}}</view>
					</view>
					<view class="scanning_cd">
						<view class="log"></view>
						<view class="name">结束位置{{stopcode}}</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">行李编号：{{ item.name }}</view>
						<view class="delete"><view class="log"  @click="()=>checkMore(item)"></view></view>
					</view>
				</scroll-view>
				<view class="but">手动登记</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Nav from '../../components/header/nav.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
				},
			}
		},
		created(option) {
		},
		onLoad(){
		},
		onUnload() {
		},
		onShow() {
		},
		mounted() {
		},
		components: {
			Nav
		},
		methods: {
			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 = 7.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 - 4.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: 40%;
				display: flex;
				justify-content: space-around;
				flex-wrap: wrap;
				>.name{
					width: 50%;
					display: flex;
					align-items: flex-start;
					flex-direction: column;
					justify-content: center;
					>p{
						margin-left: 3.125rem;
						color: rgb(255, 255, 255);
						font-family: Noto Sans SC;
						font-size: .875rem;
						margin-bottom: 10px;
					}
					>span{
						margin-left: 3.125rem;
						color: rgb(255, 255, 255);
						font-family: Noto Sans SC;
						font-size: 1.125rem;
					}
				}
			}
			>.scanning{
				height: 12rem;
				padding: 0 1.5rem 0 1.5rem;
				opacity: 1;
				transition: all 3s;
				>.scanning_cd{
					width: 100%;
					height: 5.5rem;
					opacity: 1;
					transition: all 3s;
					background: rgb(37, 121, 160);
					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-right: .75rem;
					}
				}
			}
		}
		>.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;
				margin-left: 1rem;
				border-bottom: 1px solid rgb(238, 238, 238);
				// transform: all 3s;
				>.list{
					width: 100%;
					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;
				margin-left: 1rem;
				border-bottom: 1px solid rgb(238, 238, 238);
				// transform: all 3s;
				>.list{
					width: 100%;
					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);
			}
			.but{
				width: 20.5625rem;
        height: 2.75rem;
				background: linear-gradient(177.56deg, rgba(54.04,157.79,205.96,1) -33.78%,rgba(59.83,102.58,194.93,1) 173%);
        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: 2.25rem;
				margin-bottom: 2.25rem;
			}
		}
	}
}
</style>