yanzong_qianduan/pages/news/recycling/order.vue

<template>
	<view class="order">
		<view class="order-navbar">
			<u-navbar title="订单详情" :border-bottom="false" :background="isScroll?background:background1"></u-navbar>
		</view>
		<view class="order-hd">
			<view class="l">
				<view class="a">
					<view class="name">
						<image class="user" src="@/static/news/icon-recycling-order-01.png"></image>王小二
						<text>19800998899</text>
					</view>
					<image class="copy" src="@/static/news/icon-recycling-order-02.png"></image>
				</view>
				<view class="b">
					<image class="pic" src="@/static/home/phone.jpg"></image>
					<view class="info">
						<view class="name">手机回收</view>
						<view class="price">￥<text>7599</text></view>
					</view>
					<view class="num">x1</view>
				</view>
			</view>
		</view>
		<view class="order-bd">
			<view class="a">
				<image src="@/static/news/icon-recycling-order-03.png"></image>
				回收方式：<text>门店回收</text>
			</view>
			<view class="b">
				<view class="item">
					<view class="l">回收时间：</view>
					<view class="r">2023-12-20 15:20:20</view>
				</view>
				<view class="item">
					<view class="l">期待价格：</view>
					<view class="r">¥2399</view>
				</view>
				<view class="items">
					<view class="l">商品图片：</view>
					<view class="r">
						<view class="pic">
							<image src="@/static/home/phone.jpg" v-for="i in 9" :key="i"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-bd">
			<view class="b">
				<view class="item">
					<view class="l">店铺名称：</view>
					<view class="r">京选家电武隆路店</view>
				</view>
				<view class="item">
					<view class="l">店铺电话：</view>
					<view class="r">17705773556</view>
				</view>
				<view class="item">
					<view class="l">店铺地址：</view>
					<view class="r">杭州市萧山区宏达路237号丽景国际中心1F-33</view>
					<view class="m">
						<view class="li">
							<image src="@/static/news/tel.png"></image>电话
						</view>
						<view class="li">
							<image src="@/static/news/address.png"></image>导航
						</view>
					</view>
				</view>
				<view class="item">
					<view class="l">营业时间：</view>
					<view class="r">10:00-18:00</view>
				</view>
			</view>
		</view>
		<view class="order-bd">
			<view class="b">
				<view class="item">
					<view class="l">订单编号：</view>
					<view class="r">2393990490490</view>
					<view class="m red">复制</view>
				</view>
				<view class="item">
					<view class="l">下单时间：</view>
					<view class="r">2023-12-20 15:20:20</view>
				</view>
				<view class="item">
					<view class="l">商品快照：</view>
					<view class="r">核对交易细节时，可作为判断依据</view>
					<view class="m red">查看</view>
				</view>
				<view class="item">
					<view class="l">营业时间：</view>
					<view class="r">10:00-18:00</view>
				</view>
			</view>
		</view>
		<!-- 邮寄展示 -->
		<view class="order-bd" hidden>
			<view class="b">
				<view class="item">
					<view class="l">物流公司：</view>
					<view class="r">
						<input type="text" placeholder="请输入或选择物流公司" />
					</view>
					<view class="m red">
						<u-icon style="color:#999" name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="item">
					<view class="l">快递单号：</view>
					<view class="r">
						<input type="text" placeholder="请输入物流单号" />
					</view>
					<view class="m red">
						<view class="btn">确认发货</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-bd">
			<view class="b" style="margin-top: 0;">
				<view class="item">
					<view class="l">留言：</view>
					<view class="r">可提前来</view>
				</view>
			</view>
		</view>
		<view class="order-fd">
			<view class="a">
				联系商家
			</view>
			<view class="b">
				确认收款
			</view>
		</view>
		<u-mask :show="isShow" @click="show = false">
			<view class="order-dialog">
				<image class="pic" src="@/static/news/icon-recycling-order-04.png"></image>
				<view class="a">回收订单提交成功</view>
				<view class="b">感谢您对低碳环保做出的努力！</view>
				<view class="c">查看订单</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import img from "@/static/news/refund-bg.png"
	import img1 from "@/static/news/login-bg.png"
	export default {
		data() {
			return {
				isScroll: true,
				isShow: false,
				currentIndex: 0,
				background: {
					background: 'url('+	img+') center -44px no-repeat',
					backgroundSize: '100%',
				},
				background1: {
					background: 'url('+	img1+') center -44px no-repeat',
					backgroundSize: '100%',
				}
			}
		},
		onPageScroll(e){
			if(e.scrollTop <= 44){
				this.isScroll = true;
			}else{
				this.isScroll = false;
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.order{
	width: 100%;
	padding: 0 0 150rpx;
	box-sizing: border-box;
	overflow: hidden;
	&-hd{
		background: linear-gradient(180deg, #FCE2E7 0%, #FFFFFF 100%);
		overflow: hidden;
		.l{
			width: 694rpx;
			height: 276rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin: 0 auto;
			margin-top: 30rpx;
			.a{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.name{
					display: flex;
					align-items: center;
					image{
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
					text{
						margin-left: 10rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #838383;
					}
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
				}
				.copy{
					width: 40rpx;
					height: 40rpx;
				}
			}
			.b{
				display: flex;
				align-items: center;
				margin-top: 20rpx;
				.pic{
					width: 182rpx;
					height: 146rpx;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}
				.info{
					overflow: hidden;
					.name{
						width: 360rpx;
						font-size: 28rpx;
						font-weight: 400;
						white-space: nowrap;
					}
					.price{
						font-size: 24rpx;
						font-weight: 600;
						color: #F21A1C;
						text{
							font-size: 36rpx;
						}
						margin-top: 20rpx;
					}
				}
				.num{
					flex: 1;
					font-size: 28rpx;
					font-weight: 500;
					color: #1E1E1E;
					text-align: right;
				}
			}
		}
	}
	&-bd{
		width: 694rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		.a{ 
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #7E7E7E;
			text{
				color: #1E1E1E;
				margin-left: 10rpx;
			}
			image{
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}
		}
		.b{
			margin-top: 20rpx;
			.item{
				display: flex;
				align-items: flex-start;
				padding: 10rpx 0;
				.l{
					width: 140rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #7E7E7E;
				}
				.r{
					flex: 1;
					font-size: 24rpx;
					font-weight: 400;
					color: #1E1E1E;
					max-width: 380rpx;
					input{
						font-size: 24rpx;
						color: #1E1E1E;
					}
				}
				.m{
					width: 120rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					color: #F63016;
					font-size: 24rpx;
					.btn{
						width: 118rpx;
						height: 48rpx;
						border-radius: 8rpx;
						border: 1px solid #F83A13;
						text-align: center;
						line-height: 48rpx;
					}
					.li{
						flex: 1;
						font-size: 20rpx;
						font-weight: 400;
						color: #989898;
						text-align: center;
						image{
							width: 30rpx;
							height: 30rpx;
							display: block;
							margin: 0 auto;
							margin-bottom: 20rpx;
						}
					}
				}
			}
			.items{
				padding: 10rpx 0;
				.l{
					width: 140rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #7E7E7E;
				}
				.r{
					width: 100%;
					overflow: hidden;
					margin-top: 20rpx;
					.pic{
						width: 110%;
						image{
							width: 150rpx;
							height: 150rpx;
							border-radius: 10rpx;
							margin-right: 10rpx;
							margin-top: 20rpx;
							float: left;
						}
					}
				}
			}
		}
	}
	&-fd{
		width: 100%;
		background: #FFFFFF;
		box-shadow: 18rpx -4rpx 23rpx 0px rgba(0,0,0,0.03);
		box-sizing: border-box;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 200;
		padding: 20rpx 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.a{
			text-align: center;
			width: 146rpx;
			line-height: 68rpx;
			background: #FFFFFF;
			border-radius: 76rpx;
			opacity: 1;
			border: 1px solid #D9D9D9;
			font-size: 24rpx;
			font-weight: 500;
			color: #828282;
			margin-right: 24rpx;
		}
		.b{
			width: 528rpx;
			line-height: 78rpx;
			background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%);
			border-radius: 78px;
			text-align: center;
			font-size: 24rpx;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	&-dialog{
		width: 537rpx;
		height: 414rpx;
		background: linear-gradient(180deg, #FFE4E4 0%, #FFFFFF 100%);
		border-radius: 12rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -268rpx;
		margin-top: -207rpx;
		z-index: 2;
		text-align: center;
		padding-top: 100rpx;
		box-sizing: border-box;
		.pic{
			width: 112rpx;
			height: 128rpx;
			position: absolute;
			left: 50%;
			margin-left: -56rpx;
			top: -60rpx;
			z-index: 2;
		}
		.a{
			font-size: 32rpx;
			font-weight: 500;
			color: #000000;
		}
		.b{
			font-size: 28rpx;
			font-weight: 400;
			color: #727272;
			margin-top: 30rpx;
		}
		.c{
			width: 412rpx;
			line-height: 72rpx;
			background: #F55349;
			border-radius: 8rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			margin: 0 auto;
			margin-top: 60rpx;
		}
	}
}
</style>