wx-qhb/pageD/deliverGoods/deliverGoods.vue

<template>
	<view class="page">
		<view class="goods-detail">
			<view class="order-num">
				<text>订单号：</text>
				<text>Cbz20220809122323456</text>
			</view>

			<view class="detail">
				<image class="order-img"
					src="https://img12.360buyimg.com/jdcms/s460x460_jfs/t1/226637/16/19995/180517/66696f86Fa90c7d49/3bc094e1eb7aeb12.jpg.avif"
					mode=""></image>
				<view class="detail-right">
					<view class="title-price">
						<view class="title">
							OATLY噢麦力 咖啡大师…
						</view>
						<view class="price">
							<text style="font-size: 20rpx;">￥</text>
							<text>133</text>.
							<text style="font-size: 20rpx;">22</text>
						</view>
					</view>
					<view class="specifications">
						<view class="title">
							咖啡大师燕麦奶250ml*6瓶
						</view>
						<text>x1</text>
					</view>
				</view>
			</view>
			<view class="address">
				<view class="name-address">
					张**，***********，河北省保定区莲池区未来石*********
				</view>
				<image class="eye-icon" src="../../static/mine/347.png" mode=""></image>
			</view>
		</view>
		<view class="express">
			<view class="_input-1 _input-2">
				<view class="_label">运单号</view>
				<u--input  placeholder="请输入运单号或扫码获取" border="none" clearable></u--input>
				<image @click="scanningNumber" class="scanning-icon" src="../../static/mine/348.png" mode=""></image>
			</view>
			<view class="_input-1">
				<view class="_label">物流公司</view>
				<u--input placeholder="请输入物流公司" border="none" clearable></u--input>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods:{
			//扫描二维码
			scanningNumber(){
				//获取手机权限
				uni.authorize({
					scope:"scope.camera",
					success() {
						scanQrCode()
					},
					fail() {
						//用户拒绝授权
						uni.showToast({
							title:"您拒绝了授权",
							icon:'none'
						})
					}
				})
			},
			scanQrCode(){
				uni.scanCode({
					success(res) {
						if(res.result){
							console.log(111)
						}else{
							uni.showToast({
								title:"扫描失败",
								icon:"none"
							})
						}
					},
					fail() {
						uni.showToast({
							title:"调用相机失败",
							icon:'none'
						})
					}
				})
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: "立即发货"
			})
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		padding: 20rpx 24rpx;

		.goods-detail {
			background-color: #fff;
			border-radius: 16rpx;
			padding: 26rpx 20rpx;

			.order-num {
				font-size: 26rpx;
				color: #333;
			}

			.detail {
				margin-top: 28rpx;
				display: flex;
				padding-bottom: 20rpx;
				border-bottom: 2rpx solid #F4F4F4;

				.order-img {
					width: 180rpx;
					height: 180rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.detail-right {
					width: 70%;

					.title-price {
						display: flex;
						font-size: 28rpx;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 16rpx;

						.title {
							width: 330rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.specifications {
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 28rpx;
						color: #777;
						margin-top: 10rpx;

						.title {
							width: 330rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}
				}
			}
			.address{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 20rpx;
				.name-address{
					font-size: 26rpx;
					color: #333;
					width: 72%;
				}
				.eye-icon{
						width: 32rpx;
						height: 32rpx;
						
				}
			}
		}
		
		
		.express {
			border-radius: 16rpx;
			background-color: #fff;
			padding: 0 20rpx;
				margin-top: 20rpx;
			._input-1 {
				display: flex;
				align-items: center;
				height: 100rpx;
				._label{
					font-size: 28rpx;
					color: #222;
					margin-right: 32rpx;
					width: 120rpx;
				}
				.scanning-icon{
					width: 32rpx;
					height: 32rpx;
				}
			}
			._input-2{
				border-bottom: 2rpx solid rgba(151, 151, 151, .1);
			}
		}
	}
</style>