<template>
	<view style="" style="margin: 20rpx;">
		<text v-if="demo==$TEST">123</text>
		<!-- 配送方式tab-->
		<view class="express-type .page_box">
			<view class="express-type__head head-box u-flex u-col-center">
				<view class="express-type__head-nav u-flex u-col-center u-row-center"
					v-for="(nav, index) in expressType" :key="nav.id" @tap="changeExpressType(nav.value)">
					<text class="head-nav__title"
						:class="{ 'head-nav__title--active': expressTypeCur === nav.value }">{{ nav.title }}</text>
					<view :class="expressClass" v-show="expressTypeCur === nav.value"></view>
				</view>
			</view>
			<view class="express-type__content content_box">
				<!-- 地址 -->
				<view class="express-address" v-if="expressTypeCur == 'express'">
					<text>cur1</text>
				</view>
				<!-- 自提  -->
				<view class="express-address" v-if="expressTypeCur == 'selfetch'">
					<text>自提</text>
				</view>
			</view>
			<view class="express-type__bottom u-flex u-row-between u-p-b-20">
				<button class="u-reset-button cancel-btn">取消</button>
				<button class="u-reset-button save-btn">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				demo:'测试',
				expressTypeCur: 'express',
				expressType: [
					//配送方式
					{
						id: 'e1',
						title: '物流快递',
						value: 'express'
					},
					{
						id: 'e2',
						title: '到店/自提',
						value: 'selfetch'
					}
				],
			}
		},
		computed: {
			expressClass() {
				let cl = 'head-nav--active';
				const {
					expressType,
					expressTypeCur
				} = this;
				if (expressTypeCur === 0) {
					cl = 'head-nav__left--active';
				}
				if (expressTypeCur === expressType.length - 1) {
					cl = 'head-nav__right--active';
				}
				return cl;
			},
		},
		onLoad() {
			console.log(this.$TEST);
		},
		methods: {
			// 选择快递方式
			changeExpressType(cur) {
				this.expressTypeCur = cur;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page_box {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow-x: hidden;
		background: #FF9447;
	}

	// 弹窗之配送方式
	// 配送方式
	.express-type {
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		height: 700rpx;
		overflow: hidden;

		.express-type__head {
			width: 100%;
			height: 80rpx;
			background: #f8e3bd;
			border-radius: 20rpx 20rpx 0 0;

			&-nav {
				width: (750rpx/4);
				position: relative;
				height: 100%;
			}

			.head-nav--active {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 0;
				background: #fff;
				width: 100%;
				height: 80rpx;
				background-color: #fff;
				border-radius: 20rpx 20rpx 0px 0px;

				&::after {
					content: '';
					display: block;
					width: 40rpx;
					height: 80rpx;
					position: absolute;
					transform: skewX(20deg);
					background: #fff;
					border-top-right-radius: 20rpx;
					top: 0;
					right: -15rpx;
				}

				&::before {
					content: '';
					display: block;
					width: 40rpx;
					height: 80rpx;
					position: absolute;
					transform: skewX(-20deg);
					background: #fff;
					border-top-left-radius: 20rpx;
					top: 0;
					left: -15rpx;
				}
			}

			.head-nav__left--active {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 0;
				background: #fff;
				width: 100%;
				height: 74rpx;
				background-color: #fff;
				border-radius: 20rpx 20rpx 0px 0px;

				&::after {
					content: '';
					display: block;
					width: 40rpx;
					height: 74rpx;
					position: absolute;
					transform: skewX(20deg);
					background: #fff;
					border-top-right-radius: 20rpx;
					top: 0;
					right: -15rpx;
				}
			}

			.head-nav__right--active {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 0;
				background: #fff;
				width: 100%;
				height: 74rpx;
				background-color: #fff;
				border-radius: 20rpx 20rpx 0px 0px;

				&::before {
					content: '';
					display: block;
					width: 40rpx;
					height: 74rpx;
					position: absolute;
					transform: skewX(-20deg);
					background: #fff;
					border-top-left-radius: 20rpx;
					top: 0;
					left: -15rpx;
				}
			}

			.head-nav__title {
				font-size: 24rpx;
				font-weight: 500;
				color: #666;
				position: relative;
				z-index: 6;
			}

			.head-nav__title--active {
				color: #a8700d;
				font-size: 26rpx;
			}
		}

		.express-type__content {
			.empty-address {
				height: 120rpx;
				padding: 0 25rpx;
				font-size: 28rpx;

				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}

			// 无定位
			.location-box {
				height: 500rpx;
				justify-content: center;

				.nolocation-img {
					width: 74rpx;
					height: 90rpx;
					margin-bottom: 40rpx;
				}

				.location-title {
					font-size: 35rpx;

					font-weight: bold;
					color: rgba(70, 53, 27, 1);
					margin-bottom: 20rpx;
				}

				.location-tip {
					font-size: 28rpx;

					font-weight: 400;
					color: rgba(153, 153, 153, 1);
					margin-bottom: 40rpx;
				}

				.open-location {
					width: 492rpx;
					line-height: 70rpx;
					background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
					box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
					border-radius: 35rpx;
					font-size: 28rpx;

					font-weight: 500;
					color: rgba(255, 255, 255, 1);
				}
			}

			// 快递
			.express-address {
				position: relative;
				padding: 30rpx 25rpx;
				background: url('http://file.shopro.top/imgs/order/address_bg.png') no-repeat;
				background-size: 430rpx 300rpx;
				background-position: top right;

				.express-top {
					margin-bottom: 20rpx;
					width: 550rpx;
					text-align: left;

					.address {
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(51, 51, 51, 1);
						line-height: 40rpx;
						text-align: left;
					}

					.dispatch-notice {
						font-size: 28rpx;

						font-weight: 500;
						color: rgba(51, 51, 51, 1);
						line-height: 40rpx;
						text-align: left;
					}

					.address-location {
						position: absolute;
						right: 60rpx;
						top: 30rpx;

						.location-img {
							width: 80rpx;
							height: 90rpx;
						}

						.location-text {
							font-size: 18rpx;

							font-weight: 500;
							color: rgba(51, 51, 51, 1);
						}
					}

					.tag {
						background: rgba(233, 191, 113, 0.2);
						border-radius: 6rpx;
						padding: 0 16rpx;
						line-height: 38rpx;
						color: #a8700d;
						font-size: 22rpx;
						margin-right: 20rpx;
					}

					.tag1 {
						background: rgba(53, 190, 105, 0.2);
						border-radius: 6rpx;
						padding: 0 16rpx;
						line-height: 38rpx;
						color: #1bbc50;
						font-size: 22rpx;
						margin-right: 20rpx;
					}

					.address-guide {
						position: absolute;
						right: 25rpx;
						top: 40rpx;
						color: #999999;
					}
				}

				.express-content {
					margin-bottom: 20rpx;

					.box-line {
						width: 1rpx;
						height: 61rpx;
						border-left: 1rpx solid rgba(238, 238, 238, 1);
						margin: 0 40rpx;
					}

					.phone-box1 {

						.name,
						.phone {
							font-size: 26rpx;

							font-weight: 400;
							color: rgba(102, 102, 102, 1);
						}

						.phone {
							margin-left: 20rpx;
						}
					}

					.time-box,
					.phone-box {
						text-align: left;
						min-height: 120rpx;

						.box-title {
							font-size: 24rpx;

							font-weight: 400;
							color: #666;
							padding-bottom: 10rpx;
						}

						.box-text {
							font-size: 24rpx;

							font-weight: 500;
							color: #333;
						}

						.edit-phone {
							width: 160rpx;
							font-size: 24rpx;

							font-weight: 500;
							color: #333;
						}

						.box-icon {
							font-size: 28rpx;
							color: #999;
							display: inline-block;
							width: 40rpx;
							text-align: center;
							line-height: 40rpx;
						}
					}
				}

				.express-bottom {
					.protocol {
						font-size: 24rpx;

						font-weight: 400;
						color: rgba(102, 102, 102, 1);

						.protocol-text {
							color: #6487a4;
						}
					}
				}
			}
		}

		.express-type__bottom {
			height: 90rpx;
			padding: 0 30rpx;

			.cancel-btn {
				width: 335rpx;
				line-height: 74rpx;
				background: rgba(238, 238, 238, 1);
				border-radius: 37rpx;
				font-size: 28rpx;

				font-weight: 400;
				color: rgba(51, 51, 51, 1);
			}

			.save-btn {
				width: 335rpx;
				line-height: 74rpx;
				background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
				border-radius: 37rpx;
				font-size: 28rpx;

				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
		}
	}
</style>
