<template>
	<!-- 代跑腿页 -->
	<view class="page1">
		<view class="title">
			<view class="title-sreach">
				<view class="back-btn" @tap="back" :style="{'top': menuButtonInfo.top +'px'}">
					<uni-icons type="left" size="28"></uni-icons>
				</view>
				<view class="title-name" :style="{'padding-top': menuButtonInfo.top +'px'}">
					<!-- 代取快递/跑腿 -->
				</view>
			</view>
		</view>
		<view style="position: absolute;top: 100px;width: 100%;">
			<view class="tab1" v-if="isPaotui">
				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/f1356c4db9b5488bb46140e2cdd2b4ee.png" alt=""
					style="position: absolute;" />
				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/e380fd14442c476bb6d3f5ec471af515.png" alt="" />
				<view style="width: 100%;height: 80px;position: absolute;top:0;left: 0;display: flex;">
					<view style="width: 50%;height: 80px;"></view>
					<view style="width: 50%;height: 80px;" @tap="isPaotui=!isPaotui"></view>
				</view>
			</view>
			<view class="tab1" v-else>
				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/3aea88803cb446139aa80ff5a606645a.png" alt=""
					style="position: absolute;" />
				<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/2cdff43ecdd4409a8bd1f5f46a6ad38d.png" alt=""
					style="position: absolute;" />
				<view style="width: 100%;height: 80px;position: absolute;top:0;left: 0;display: flex;">
					<view style="width: 50%;height: 80px;" @tap="isPaotui=!isPaotui"></view>
					<view style="width: 50%;height: 80px;"></view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="content-box">
				<view class="dizhi">
					<view class="dizhi-tu">
						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1f77398a73454a6595c12a3c18731599.png"
							alt="" />
					</view>
					<view class="dizhi1">
						<view class="dizhi-ming">
							沁园春第三食堂A20窗口
						</view>
						<view class="dizhi-btn">
							地址簿
						</view>
					</view>
				</view>
				<view class="dizhi">
					<view class="dizhi-tu">
						<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/d0764fb4138747769538cf1cafa3b017.png"
							alt="" />
					</view>
					<view class="dizhi1">
						<view class="dizhi-ming">
							沁园春第三食堂A20窗口
						</view>
						<view class="dizhi-btn">
							地址簿
						</view>
					</view>
				</view>
			</view>
			<view class="content-box">
				<view class="content-title">
					取件数量<text>*</text>
				</view>
				<view class="">
					<view>-</view>
					<input type="number" disabled>
					<view>+</view>
				</view>
			</view>
			<view class="content-box">
				<view class="content-title">
					取件凭证<text>*</text>
				</view>
				<view class="">
					<view class="">
						<view class="">
							<radio></radio> 手机号
						</view>
						<view class="">
							<input type="text">
						</view>
					</view>
					<view class="">
						<view class="">
							<radio></radio> 取件码
						</view>
						<view class="">
							<input type="text">
						</view>
						<view class="">
							+ 添加取件码
						</view>
					</view>
					<view class="">
						<view class="">
							<radio></radio> 取件码截图
						</view>
						<view class="">
							<view class="upload-img" @tap="pictureAdd"
								style="background: #eee;text-align: center;line-height: 160rpx;">
								<uni-icons type="camera" size="28" color="#777"></uni-icons>
							</view>
							<view style="overflow-x: scroll;display: flex;width: 350rpx;">
								<view v-if="formData.productPictures !=''"
									v-for="(item,index) in formData.productPictures" :key="index"
									style="width: 160rpx;height: 160rpx;margin-left: 20rpx;">
									<img :src="item.productPicture" alt="" class="upload-img">
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="content-box">
				<view class="content-title">
					取件重量<text>*</text>
				</view>
				<view>
					<view class="">
						5公斤以内
					</view>
					<view class="">
						5-10公斤
					</view>
					<view class="">
						10-15公斤
					</view>
					<view class="">
						15-20公斤
					</view>
					<view class="">
						20公斤以上
					</view>
				</view>
			</view>
			<view class="content-box">
				<view class="content-title">
					物品体积<text>*</text>
				</view>
				<view>
					<view class="">
						0.5立方米以下
					</view>
					<view class="">
						0.5-1立方米
					</view>
					<view class="">
						1.1-1.5立方米
					</view>
					<view class="">
						1.6-2立方米
					</view>
					<view class="">
						2.1立方米以上
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="">
				下单
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPaotui: true,
				menuButtonInfo: {},
			}
		},
		components: {

		},
		onLoad() {

		},
		onShow() {
			this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		},
		methods: {
			toggleReply() {
				this.isExpanded = !this.isExpanded;
			},
			checkTab(index) {
				for (let i = 0; i < this.menuList.length; i++) {
					if (i == index) {
						this.menuList[i].checked = true
					} else {
						this.menuList[i].checked = false
					}
				}
			},
			//查看大图
			largeImg(img) {
				this.bigImg = 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/00b1f011787c4549bbea650d95a4eb39.png'
				this.$refs.imgPopup.open()
			},
			back() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		background: #F5F8F5;
		color: #00231C;
	}

	.page1 {
		width: 100%;
		height: 100%;
		font-size: 24rpx;
		position: relative;
		overflow: hidden;
	}

	.title {
		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
		width: 100%;
		height: 54%;
	}

	.title-sreach {
		width: 100%;
		display: flex;
		height: 200rpx;
		position: relative;
	}

	.back-btn {
		position: absolute;
		bottom: 0;
		left: 0;
	}

	.title-name {
		padding-top: 55px;
		font-size: 36rpx;
		font-weight: 700;
		flex: 1;
		text-align: center;
	}

	.content {
		position: absolute;
		top: 180px;
		width: 100%;
		overflow: scroll;
		height: 80%;
		background: #fff;
		padding: 0 2.5%;
	}

	.tab1 {
		width: 100%;
		height: 80px;
		position: relative;

		img {
			width: 100%;
			height: 100%;
			background-size: 100%;
		}
	}

	.upload-img {
		width: 160rpx;
		height: 160rpx;
	}

	.dizhi {
		display: flex;
		margin-bottom: 10px;
	}

	.dizhi-tu {
		width: 25px;
		height: 25px;
		margin: 13px 10px 0 0;

		img {
			width: 100%;
			height: 100%;
		}
	}
	.dizhi1{
		flex: 1;
		background: #eee;
		border-radius: 10px;
		height: 50px;
		line-height: 50px;
		display: flex;
		padding: 0 10px;
	}
	.dizhi-ming{
		flex: 1;
	}
	.dizhi-btn{
		width: 56px;
		height: 25px;
		background: #fff;
		line-height: 25px;
		text-align: center;
		border: 1px solid #777;
		border-radius: 25px;
		margin-top: 13px;
	}
</style>