<template>
	<view class="detail">
		<view >
			<u-navbar title="订单详情" back-icon-color="#fff" :border-bottom="false" title-color="#333" :background="background"></u-navbar>
		</view>
		<view class="send">
			<image src="/static/order/car.png" mode="" class="car"></image>
			<view class="sendInfo">
				<view class="shopInfo">
					<text v-if="sendType">商家已接单，正在安排出库</text>
					<text v-if="!sendType">商家已发货，正在通知快递取件</text>
				</view>
				<view class="sendTime">
					2023-12-19 16:10:58
				</view>
			</view>
			<image src="/static/order/left.png" mode="" class="sendIcon"></image>
		</view>
		<view class="consignee">
			<view class="conLeft">
				<view class="thr">
					<view class="peo">提货人</view>
					<view class="name">AGGI</view>
				</view>
				<view class="thr">
					<view class="peo">手机号</view>
					<view class="name">1868888888</view>
				</view>
				<view class="thr">
					<view class="peo">预计到店时间</view>
					<view class="name">2023-12-20 09:15</view>
				</view>
			</view>
			<view class="conRight" @click="openCode">
				<view class="code">
					核销码
				</view>
				<view class="codeNum">
					<image src="/static/user/code.png" mode=""></image>
				</view>
				<view class="openCode">
					点击放大核销码
				</view>
			</view>
		</view>
		<view class="sendHome">
			<view class="fline">
				<view class="leftInfo">
					<image src="/static/order/am.png" mode="" class="am"></image>
					<view class="gp">
						<text>张三</text>
						18655555555
					</view>
				</view>
				
				<view class="up">
					修改
				</view>
			</view>
			<view class="sl">
				浙江省金华市金东区人民西路31号新苑小区25幢
			</view>
			<view class="fline">
				<view class="leftInfo">
					<image src="/static/order/cd.png" mode="" class="am"></image>
					<view class="gp">
						<text>收货方式：</text>
						送货上门
					</view>
				</view>
				
				<view class="up">
					我要催单
				</view>
			</view>
		</view>
		<view class="goodsDetail">
			<view class="goodsType">
				<image src="/static/order/bag.png" mode="" class="bag"></image>
				<text>大白兔家电</text>
				<image src="/static/order/left.png" mode="" class="leftIcon"></image>
			</view>
			<view class="goods">
				<view class="goodsImg">
					<image src="/static/home/goodsDemo.png" mode=""></image>
				</view>
				<view class="goodsInfo">
					<view class="goodsName">
						iphone13 绿色 128GB
					</view>
					<view class="goodsPrice">
						￥ <text>7599</text>
					</view>
				</view>
				<view class="goodsNum">
					x1
				</view>
			</view>
			<view class="serve">
				<view class="serveTitle">
					服务
				</view>
				<view class="chose">
					选择增值服务
					<image src="../../static/order/left.png" mode=""></image>
				</view>
			</view>
			<view class="line">

			</view>
			<view class="cancel">
				取消订单
			</view>
		</view>

		<view class="orderTips">
			<view class="orderTitle">
				<view class="total">
					订单编号:
				</view>
				<view class="price">
					2393990490490
				</view>
				<view class="copy">
					复制
				</view>
			</view>
			<view class="orderTitle">
				<view class="total">
					支付方式：
				</view>
				<view class="price">
					微信支付
				</view>
			</view>
			<view class="orderTitle">
				<view class="total">
					商品快照：
				</view>
				<view class="price">
					核对交易细节时，可作为判断依据
				</view>
				<view class="copy">
					查看
				</view>
			</view>
			<view class="orderTitle">
				<view class="total">
					物流公司：
				</view>
				<view class="price">
					到店自提
				</view>
			</view>
			<view class="orderTitle">
				<view class="total">
					下单时间：
				</view>
				<view class="price">
					2023-12-20 13:09:20
				</view>
			</view>
			<view class="orderTitle">
				<view class="total">
					支付时间：
				</view>
				<view class="price">
					2023-12-20 13:09:20
				</view>
			</view>
			<view class="orderTitle">
				<view class="total">
					期待配送时间：
				</view>
				<view class="price">
					2023-12-20 13:09:20
				</view>
			</view>
			<view class="line">

			</view>
			<view class="amount">
				<view class="share">
					<image src="/static/order/share.png" mode=""></image>
					分享
				</view>
				<view class="sp">
					
				</view>
				<view class="callShop">
					<image src="/static/order/share.png" mode=""></image>
					联系商家
				</view>
			</view>
		</view>
		<view class="pickedUp">
			<view class="orderTitle">
				<view class="total">
					提货状态:
				</view>
				<view class="price">
					已提货
				</view>
			</view>
			<view class="orderTitle">
				<view class="total">
					提货日期：
				</view>
				<view class="price">
					2023-12-21
				</view>
			</view>
			<view class="orderTitle">
				<view class="total">
					提货照片：
				</view>
				<view class="price">
					<image src="/static/home/goodsDemo.png" mode="" class="goodsImag"></image>
					<image src="/static/home/goodsDemo.png" mode="" class="goodsImag"></image>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="meetPrice">
				更多
			</view>
			<view class="fooRight">
				<view class="buyAgain">
					再次购买
				</view>
				<view class="btn">
					提交订单
				</view>
			</view>
			
		</view>
		<!-- 催单弹框 -->
		<view class="dia" v-if="cdDia">
			<view class="diaMain">
				<image src="/static/order/ld.png" mode="" class="ld"></image>
				<view class="cdTitle">
					催单成功
				</view>
				<view class="cdInfo">
					商家已收到您的催单提醒，您精心挑选的商品正在配送中，属于正常配送时效内，请您耐心等待，谢谢！
				</view>
				<view class="iKnow">
					我知道了
				</view>
			</view>
		</view>
		<view class="bigCode">
			<view class="cm">
				<view class="cm_text">
					核销码
				</view>
				<view class="txm">
					<image src="" mode="" class="codeImg"></image>
				</view>
				<view class="cline">
					<u-line  border-style="dashed" color="#D0D0D0" />
				</view>
				<view class="sm">
					可前往门店扫码完成操作
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import img from "@/static/home/top.png"
	export default {
		data() {
			return {
				background: {
					background: 'url('+	img+') center top no-repeat',
					backgroundSize: '100% auto',
				},
				buyType: false,
				sendType:false,
				cdDia:false,
			}
		},
		methods:{
			openCode(){
				// 打开核销码
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		width: 750rpx;
		padding-bottom: 120rpx;
		background-image: url('../../static/home/homeback.png');
		background-size: 100% 100%;
	}


	.leftText {
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #F21A1C;
		line-height: 28rpx;
	}

	.address {
		margin-left: 26rpx;
		background-image: url('../../static/order/map.png');
		width: 694rpx;
		height: 154rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 52rpx 0 32rpx;

		.addAddress {
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #F32E2E;
		}

		.leftImg {
			width: 18rpx;
			height: 18rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.send {
		width: 694rpx;
		height: 154rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		margin: 12rpx 0 0 26rpx;
		display: flex;
		padding: 32rpx 46rpx 32rpx 38rpx;

		.car {
			width: 42rpx;
			height: 35rpx;
			margin-right: 40rpx;
			margin-top: 20rpx;
		}

		.sendInfo {

			.shopInfo {
				height: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 40rpx;
			}

			.sendTime {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #606060;
				line-height: 34rpx;
				margin-top: 16rpx;
			}
		}

		.sendIcon {
			width: 18rpx;
			height: 18rpx;
			margin: 40rpx 0 0 150rpx;
		}
	}
	.sendHome{
		width: 694rpx;
		height: 218rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		margin: 14rpx 0 0 26rpx;
		padding: 18rpx 16rpx 16rpx 34rpx;
		.fline{
			width: 100%;
			display: flex;
			justify-content: space-between;
			.leftInfo{
				display: flex;
			}
			.am{
				width:40rpx;
				height: 40rpx;
				margin-right: 24rpx;
			}
			.gp{
				height: 28rpx;
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #838383;
				line-height: 28rpx;
				text{
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height: 40rpx;
					margin-right: 8rpx;
				}
			}
			.up{
				width: 114rpx;
				height: 50rpx;
				background: #FFFFFF;
				border-radius: 88rpx 88rpx 88rpx 88rpx;
				opacity: 1;
				border: 1rpx solid #D9D9D9;
				text-align: center;
				line-height: 50rpx;
				font-size: 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #676767;
			}
		}
		.sl{
			width: 474rpx;
			height: 68rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #838383;
			line-height: 28rpx;
			margin-top: 6rpx;
			margin-left: 60rpx;
		}
	}
	.consignee {
		width: 694rpx;
		height: 200rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		margin: 12rpx 0 0 26rpx;
		display: flex;
		justify-content: space-between;
		padding: 24rpx 36rpx 6rpx 32rpx;

		.conLeft {
			.thr {
				display: flex;
				width: 474rpx;
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #838383;
				line-height: 34rpx;
				margin-bottom: 20rpx;

				.peo {
					width: 160rpx;
				}

				.name {
					color: #333333;

				}
			}

		}

		.conRight {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			color: #F21A1C;
			display: flex;
			flex-direction: column;
			align-items: center;
			.code {
				height: 34rpx;
				font-size: 24rpx;
				line-height: 34rpx;
				margin-bottom: 8rpx;
			}

			.codeNum {
				width: 80rpx;
				height:78rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.openCode{
				height: 28rpx;
				font-size: 20rpx;
				font-weight: 400;
				color: #848484;
				line-height: 23rpx;
				margin-top: 4rpx;
			}
		}
	}

	.goodsDetail {
		width: 694rpx;
		height: 400rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		margin: 12rpx 0 0 26rpx;
		padding: 32rpx 24rpx 24rpx 38rpx;

		.goodsType {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #333333;

			.bag {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
			}

			.leftIcon {
				width: 18rpx;
				height: 18rpx;
				margin-left: 20rpx;
			}
		}

		.goods {
			display: flex;
			align-items: center;
			margin-top: 28rpx;

			.goodsImg {
				width: 162rpx;
				height: 148rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 1;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.goodsInfo {
				margin-left: 20rpx;

				.goodsName {
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #1E1E1E;
					line-height: 40rpx;
					margin-bottom: 4rpx;
				}

				.goodsPrice {
					height: 50rpx;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					color: #F21A1C;
					line-height: 50rpx;

					text {
						font-size: 36rpx;
					}
				}
			}

			.goodsNum {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #1E1E1E;
				margin-left: 100rpx;
			}
		}

		.serve {
			display: flex;
			justify-content: space-between;

			.serveTitle {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #1E1E1E;
				line-height: 34rpx;
			}

			.chose {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #9E9E9E;
				line-height: 34rpx;

				image {
					width: 18rpx;
					height: 18rpx;
				}
			}
		}

		.line {
			width: 100%;
			height: 0rpx;
			opacity: 1;
			border: 2rpx solid #F4F4F4;
			margin: 32rpx 0 20rpx 0;
		}

		.cancel {
			height: 34rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #1E1E1E;
			line-height: 34rpx;
			text-align: center;
		}
	}

	.orderTips {
		width: 694rpx;
		height: 522rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		margin: 12rpx 0 0 26rpx;
		padding: 22rpx 36rpx 50rpx 24rpx;

		.orderTitle {
			position: relative;
			margin-bottom: 24rpx;
			display: flex;
			height: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #2D2D2D;
			line-height: 34rpx;

			.total {
				font-size: 24rpx;
				color: #7E7E7E;
			}

			.price {
				.couponNum {
					font-size: 28rpx;
					color: #F42B17;
				}

				font-size: 28rpx;

				image {
					width: 18rpx;
					height: 18rpx;
					margin-left: 18rpx;
				}
			}

			.copy {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #F63016;
				line-height: 34rpx;
				position: absolute;
				right: 0;
			}
		}

		.amount {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 20rpx;
			margin-bottom: 30rpx;
			.share{
				image{
					width: 26rpx;
					height: 26rpx;
					margin-right: 14rpx;
				}
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #1E1E1E;
				line-height: 34rpx;
			}
			.sp{
				width: 0rpx;
				height: 38rpx;
				opacity: 1;
				border: 2rpx solid #ECECEC;
			}
			.callShop{
				image{
					width: 26rpx;
					height: 26rpx;
					margin-right: 14rpx;
				}
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #1E1E1E;
				line-height: 34rpx;
			}
		}
	}

	.line {
		width: 100%;
		height: 0rpx;
		opacity: 1;
		border: 2rpx solid #F1F1F1;
	}
	.pickedUp{
		width: 694rpx;
		height: 310rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		margin: 14rpx 0 0 26rpx;
		padding: 32rpx 50rpx 0 42rpx;
		.orderTitle {
			position: relative;
			margin-bottom: 24rpx;
			display: flex;
			height: 34rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #2D2D2D;
			line-height: 34rpx;
		
			.total {
				font-size: 24rpx;
				color: #7E7E7E;
				margin-right: 10rpx;
			}
		
			.price {
				.couponNum {
					font-size: 28rpx;
					color: #F42B17;
				}
		
				font-size: 28rpx;
		
				image {
					width: 18rpx;
					height: 18rpx;
					margin-left: 18rpx;
				}
				.goodsImag{
					width: 144rpx;
					height: 132rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					opacity: 1;
					margin-right: 26rpx;
				}
			}
		
			.copy {
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #F63016;
				line-height: 34rpx;
				position: absolute;
				right: 0;
			}
		}
	}
	.footer {
		width: 100%;
		height: 120rpx;
		position: fixed;
		background-color: #FFF;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.meetPrice {
			margin-left: 26rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #000000;

			.type {
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #F42B17;
				margin-left: 12rpx;
			}

			.price {
				font-size: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				color: #F42B17;
			}
		}
		.fooRight{
			display: flex;
			align-items: center;
		}
		.buyAgain{
			width: 146rpx;
			height: 68rpx;
			background: #FFFFFF;
			border-radius: 76rpx 76rpx 76rpx 76rpx;
			opacity: 1;
			border: 2rpx solid #D9D9D9;
			text-align: center;
			line-height: 68rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #828282;
			margin-right: 14rpx;
		}
		.btn {
			width: 214rpx;
			height: 74rpx;
			background: linear-gradient(180deg, #FD5D06 0%, #F3211A 100%);
			border-radius: 100rpx 100rpx 100rpx 100rpx;
			opacity: 1;
			text-align: center;
			font-size: 28rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 74rpx;
			margin-right: 20rpx;
		}
	}
	.dia{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;
		.diaMain{
			width: 560rpx;
			height: 432rpx;
			background: linear-gradient(180deg, #FFE4E4 0%, #FFFFFF 100%);
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			opacity: 1;
			position: relative;
			.ld{
				width: 100rpx;
				height: 100rpx;
				position: absolute;
				top: -50rpx;
				left: 230rpx;
			}
			.cdTitle{
				width: 128rpx;
				height: 44rpx;
				font-size: 32rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #000000;
				line-height: 44rpx;
				margin: 80rpx 0  0 216rpx;
			}
			.cdInfo{
				width: 498rpx;
				height: 120rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #727272;
				line-height: 33rpx;
				margin-left: 48rpx;
				margin-top: 28rpx;
			}
			.iKnow{
				width: 412rpx;
				height: 72rpx;
				background: #F55349;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				opacity: 1;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 72rpx;
				margin: 36rpx 0 0 74rpx;
				text-align: center;
			}
		}
	}
	.bigCode{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(65,65,65,0.46);
		display: flex;
		align-items: center;
		justify-content: center;
		.cm{
			width: 560rpx;
			height: 714rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			padding-top: 44rpx;
			.cm_text{
				width: 100%;
				height: 42rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #424242;
				line-height: 42rpx;
				text-align: center;
			}
			.txm{
				.codeImg{
					width: 394rpx;
					height: 458rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					opacity: 1;
				}
				
			}
			.cline{
				padding: 0 34rpx;
				margin: 46rpx 0 30rpx 0;
			}
			.sm{
				width: 100%;
				height: 34rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				color: #979797;
				line-height: 28rpx;
				text-align: center;
			}
			
		}
	}
</style>