1/pages/customerCS/orderSearch.vue

<template>
	<view class="order-search">
		<u-navbar title="订单查询" height="108rpx" placeholder='true'></u-navbar>
		<view class="search-box">
			<input class="search-input" placeholder="请输入快递单号" v-model="scanCode"></input>
			<image src="../../static/img/search.png" class="search-img search"></image>
			<image src="../../static/img/scan.png" class="search-img scan" @click="handleScan"></image>
		</view>
		<!-- 正在查询的订单 -->
		<view class="order-item">
			<view class="order-num-box">
				<image src="../../static/img/order-company.png"></image>
				<text class="order-company">顺丰速运：SF3124710053030</text>
			</view>
			<view class="order-state">
				<image src="../../static/img/order-state.png"></image>
				已签收<text> 06-01 15:12</text>
			</view>
			<view class="tips">
				签收时间在48小时内，满足申请理赔时间要求。
			</view>
		</view>
		<!-- 申请查询订单 -->
		<view class="order-apply">
			<view class="title">订单截图</view>
			<view class="tips">请上传您的第三方平台（如淘宝、京东…）购买订单截图。</view>
			<view class="image-box">
				<view class="image-item">
					<image src="https://wx2.sinaimg.cn/large/0073ozWdly1hsb27cnhsxj30u00u0441.jpg"></image>
				</view>
				<view class="image-item">
					<image src="https://wx2.sinaimg.cn/large/0073ozWdly1hsb27cnhsxj30u00u0441.jpg"></image>
				</view>
				<view class="image-item">
					<image src="https://wx2.sinaimg.cn/large/0073ozWdly1hsb27cnhsxj30u00u0441.jpg"></image>
				</view>
				<view class="image-item">
					<image class="image-add" src="../../static/img/image-add.png"></image>
					
				</view>
			</view>
		</view>
		<!-- 下一步按钮 -->
		<view class="next-btn">
			<button>下一步</button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				scanCode:''
			}
		},
		methods:{
			handleScan(){
				// 允许从相机和相册扫码
				// uni.scanCode({
				// 	success: function (res) {
				// 		console.log('条码类型：' + res.scanType);
				// 		console.log('条码内容：' + res.result);
				// 	}
				// });
				// 调起条码扫描
				uni.scanCode({
					scanType: ['barCode'],
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	view,
	text,
	input,
	label,
	span {
	    box-sizing: border-box;
	    padding: 0;
	    margin: 0;
	    font-family: Microsoft YaHei;
	}
	.order-search{
		width: 750rpx;
		min-height: 100vh;
		background: #F5F5F5;
		padding: 36rpx;
		
		.search-box{
			width: 678rpx;
			height: 120rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			display: flex;
			justify-content: center;
			padding: 22rpx 24rpx 22rpx 24rpx;
			box-sizing: border-box;
			position: relative;
			.search-input{
				width: 628rpx;
				height: 76rpx;
				background: #FFFFFF;
				border-radius: 200rpx;
				border: 2rpx solid #000000;
				font-weight: 400;
				font-size: 28rpx;
				color: rgba(0,0,0,0.3);
				line-height: 39rpx;
				padding-left: 88rpx;
				z-index: 5;
			}
			.search-img{
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				&.search{
					left: 48rpx;
					top: 36rpx;
					z-index: 10;
				}
				&.scan{
					right: 50rpx;
					top: 36rpx;
					z-index: 10;
				}
			}
		}
		.order-item{
			width: 678rpx;
			height: 210rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 24rpx;
			padding: 24rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.order-num-box{
				height: 48rpx;
				text-align: center;
				display: flex;
				>image{
					width: 48rpx;
					height: 48rpx;
				}
				.order-company{
					font-weight: 500;
					font-size: 28rpx;
					margin-left: 12rpx;
					line-height: 39rpx;
					text-align: center;
				}
			}
			.order-state{
				display: flex;
				font-weight: 500;
				font-size: 32rpx;
				color: #2388FF;
				line-height: 45rpx;
				>image{
					width: 48rpx;
					height: 48rpx;
					margin-right: 12rpx;
				}
				>text{
					margin-left: 12rpx;
				}
			}
			.tips{
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(34,34,34,0.6);
				line-height: 34rpx;
				margin-left: 60rpx;
			}
		}
		.order-apply{
			width: 678rpx;
			//height: 376rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-top: 24rpx;
			padding: 24rpx;
			box-sizing: border-box;
			.title{
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				line-height: 45rpx;
			}
			.tips{
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 34rpx;
				margin-top: 12rpx;
			}
			.image-box{
				display: flex;
				flex-wrap: wrap;
				justify-content: left;
				.image-item{
					width: 226rpx;
					height: 226rpx;
					background: #F3F4F5;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					margin-right: 10rpx;
					text-align: center;
					overflow: hidden;
					margin-top: 12rpx;
					>image{
						width: 100%;
						height: 100%;
					}
					.image-add{
						margin-top: 90rpx;
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}
		.next-btn{
			position: fixed;
			bottom: 68rpx;
			box-sizing: border-box;
			>button{
				width: 678rpx;
				height: 92rpx;
				background: linear-gradient( 91deg, #43A1FF 0%, #2F80F9 100%), #FFFFFF;
				border-radius: 24rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				line-height: 39rpx;
				text-align: center;
				padding-top: 24rpx;
				box-sizing: border-box;
			}
		}
	}
</style>