<template>
	<view class="content">
		<uni-nav-bar left-icon="left" title="订单详情" color="#000000" backgroundColor="transparent" :fixed="true"
			:statusBar="true" :border="false" @clickLeft="back"></uni-nav-bar>

		<!-- 地址 -->
		<view class="address_z">
			<!-- <image :src="$img('/static/img/address.png')" lazy-load></image> -->

			<view class="address_z_r">
				<view>
					<text style="font-size: 28rpx; font-weight: 600">
						{{ list.name }}
					</text>
					<text style="color: #333333; margin-left: 10rpx">
						{{ list.mobile }}
					</text>
				</view>
				<view style="margin-top: 20rpx; color: #676767;">{{ list.address }}</view>
			</view>
		</view>
		<!-- 赏品 -->
		<view class="xuyuan">
			<view class="order-hd">
				<view class="time">申请时间：{{ list.addtime }}</view>
				<view class="status">
					<template v-if="list.status==1">待发货</template>
					<template v-if="list.status==2">待收货</template>
					<template v-if="list.status==3">已完成</template>
				</view>
			</view>
			<scroll-view class="card-goods" scroll-x>
				<view class="goods-item" v-for="(item, i) in goods" :key="i">
					<view class="pic">
						<image :src="item.goodslist_imgurl" lazy-load></image>
						<!-- <view class="type">{{ item.shang_title }}</view> -->
						<view class="num center">{{ item.prize_num }}</view>
						<view class="num"
							style="left:auto;right:0;border-radius:0rpx 0rpx 0rpx 15rpx;background: #FF4D1E;"
							v-if="item.fh_status==1">已发货</view>
					</view>
					<view class="title hang1">
						{{ item.goodslist_title }}
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 时间 -->
		<view class="dingdan">
			<view class="">订单信息</view>
			<view>提交时间：{{ list.addtime }}</view>
			<view>订单编号：{{ list.send_num }}
				<image @click="copy(list.send_num)" :src="$img1('shangdai/copy.png')" mode="widthFix"></image>
			</view>
			<view>支付方式：微信支付</view>
			<view style="border: none">下单时间：{{list.pay_time}}</view>
			<view v-if="list.courier_number">物流单号：{{ list.courier_number }}
				<image @click="copy(list.courier_number)" :src="$img('shangdai/copy.png')" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import { getSendRecordDetail } from '@/common/server/warehouse.js';
	
	export default {
		data() {
			return {
				z_imgPath: this.$z_img2,
				goods: [],
				list: {}
			}
		},
		onLoad(e) {
			this.getData(e.id)
		},
		methods: {
			copy(num) {
				uni.setClipboardData({
					data: num + '',
					showToast: false,
					success: (res) => {
						uni.showToast({
							title: '复制成功',
							icon: "none"
						})
					}
				})
			},
			back() {
				uni.navigateBack()
			},
			async getData(e) {
				// 模拟接口
				const res = await getSendRecordDetail(e);
				if (res.status == 1) {
					this.goods = res.data.goods
					this.list = res.data
				}
			}
		}
	}
</script>

<style lang="scss">
	.list_img .shang_title {
		position: absolute;
		bottom: 0;
		width: 100%;
		background: rgba(0, 0, 0, 0.8);
		left: 0;
		/* width: 100%; */
		color: #333;
		font-size: 24rpx;
		/* font-family: 'zcq'; */
		text-align: left;
		padding: 4rpx 10rpx;
		box-sizing: border-box;
		/* border: 1px solid #000000; */
		width: 100%;
		display: flex;
		justify-content: space-between;

		.type {
			font-size: 22rpx;
			font-family: zihun147hao-xingyuanhei;
			font-weight: 400;
			color: #fff;
		}

		.num {
			font-size: 20rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #ffffff;
		}
	}

	.list_img>image {
		width: 100%;
		height: 100%;
		// margin: 1rpx auto;
	}

	.list_img {
		box-sizing: border-box;
		width: 100%;
		height: 170rpx;
		position: relative;
		border: 1px solid;
		border-image: linear-gradient(90deg, #2dcbff, #ff95fb) 1 1;
	}

	.dingdan {
		width: 690rpx;
		margin: 20rpx auto;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #676767;

		>view {
			padding: 20rpx 0;
			display: flex;
			align-items: center;

			>image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 10rpx;
			}
		}

		>view:nth-child(n+2) {
			border-bottom: 1px solid rgba(255, 255, 255, 0.2);
		}
	}

	.address_z_r {
		width: 584rpx;
		margin-left: 30rpx;
	}

	.address_z>image {
		width: 50rpx;
		height: 50rpx;
	}

	.address_z {
		width: 690rpx;
		margin: 20rpx auto;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #333333;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.xuyuan_item_2 {
		color: #ffffff;
		font-size: 24rpx;
		width: 100%;
		margin-top: 6rpx;
	}

	.xuyuan_item>image {
		width: 180rpx;
		height: 180rpx;
		border-radius: 10rpx 10rpx 0 0;
	}

	.xuyuan_item {
		width: 170rpx !important;
		// height: 240rpx;
		// box-sizing: border-box;
		// padding: 18rpx 20rpx 0;

		margin: 0 10rpx;
	}

	.xuyuan_con {
		display: flex;
		margin: 14rpx auto 0;
		width: 630rpx;
		box-sizing: border-box;
		overflow-x: scroll;
	}

	.xuyuan {
		width: 690rpx;
		font-size: 24rpx;
		color: #ffffff;
		margin: 24rpx auto 0;
		padding: 20rpx 2rpx 20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 20rpx;

		.order-hd {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;

			.time {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #8A8A8A;
			}

			.status {
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
			}
		}

		.card-goods {
			white-space: nowrap;

			.goods-item {
				display: inline-block;
				width: 170rpx;
				margin-right: 20rpx;

				&:first-child {
					margin-left: 20rpx;
				}


				.pic {
					width: 100%;
					height: 170rpx;
					box-sizing: border-box;
					background: #000000;
					border-radius: 20rpx;
					position: relative;

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


					.num {
						position: absolute;
						z-index: 1;
						left: 50%;
						bottom: 10rpx;
						transform: translateX(-50%);
						min-width: 60rpx;
						box-sizing: border-box;
						padding: 0 10rpx;
						background: rgba(0, 0, 0, 0.5);
						font-size: 24rpx;
						font-weight: 400;
						color: #ffffff;
						border-radius: 20rpx;
					}
				}

				.title {
					padding: 16rpx 10rpx 0;

					font-size: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}

	.content {
		width: 100vw;
		min-height: 100vh;
		padding-top: 1rpx;
		box-sizing: border-box;
		background: linear-gradient(180deg, #5FCDFF 0%, #F5F5F5 100%);
	}
</style>