<template>
	<view class="pb100">
		<!-- 废弃 -->
		<view class="form-title redtitle">会员复购信息</view>
		<view class="form-group mb20">
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					复购编号
				</view>
				<input class="form-input" type="text" value="" placeholder="请输入收货人姓名" />
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					复购姓名
				</view>
				<view class="disabled-input">张三</view>
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					发货方式
				</view>
				<input class="form-input" disabled type="text" value="快递发货" placeholder="" />
				<text class="icon iconfont icon-jiantou"></text>
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					运输方式
				</view>
				<input class="form-input" disabled type="text" value="快递发货" placeholder="" />
				<text class="icon iconfont icon-jiantou"></text>
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					发货仓库
				</view>
				<input class="form-input" disabled type="text" value="快递发货" placeholder="" />
				<text class="icon iconfont icon-jiantou"></text>
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					所属店铺
				</view>
				<input class="form-input" disabled type="text" value="快递发货" placeholder="" />
				<text class="icon iconfont icon-jiantou"></text>
			</view>
		</view>
		<view class="form-title d-b-c">
			<text>收货人信息</text>
			<view class="d-c-c">
				<u-icon name="plus-circle-fill" size="38rpx" color="#FB3024"></u-icon>
				<text class="ml10">添加</text>
			</view>
		</view>
		<view class="form-group mb20">
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					复购编号
				</view>
				<input class="form-input" type="text" value="" placeholder="" />
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					联系方式
				</view>
				<input class="form-input" type="text" value="" placeholder="" />
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					收货地址
				</view>
				<input class="form-input" disabled type="text" value="" placeholder="" />
				<text class="icon iconfont icon-jiantou"></text>
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					详细地址
				</view>
				<textarea auto-height class="form-textarea" value="" placeholder="" />
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					邮费
				</view>
				<input class="form-input" disabled type="text" value="" placeholder="" />
			</view>
			<view class="form-item">
				<view class="form-label">
					<text class="domation mr10">*</text>
					备注
				</view>
				<textarea auto-height class="form-textarea" value="" placeholder="" />
			</view>
		</view>
		<view class="form-title">历史地址</view>
		<view class="form-group mb20">
			<view class="d-b-s address-item">
				<view class="">
					<view class="f28 gray3 fb mb10 d-s-s">
						张涛
						<text class="small-text-btn">默认</text>
					</view>
					<view class="f26 gray3 mb10">134**2132123</view>
					<view class="f24 gray9">湖南长沙</view>
				</view>
				<view class="d-c-c">
					<view class="icon-box plus d-c-c ml30" @click="editAddress(item)">
						<image class="add_icon_img edit" src="/static/icon/add-edit.png" mode="aspectFill"></image>
					</view>
					<view class="icon-box plus d-c-c ml30" @click="delAddress(item)">
						<image class="add_icon_img delete" src="/static/icon/add-delete.png" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="product-box">
			<view class="product-title">商品信息</view>
			<view class="product-list order-product">
				<view v-for="(item, index) in 4" :key="index" class="product-item">
					<view class="d-b-s mb20">
						<image class="product-img" src="/static/default.png" mode=""></image>
						<view class="product-info d-c d-b-s flex-1">
							<view class="text-ellipsis-2 f28 gray3">海之圣超饱和富氢水杯（粉色）</view>
							<view class="price-color f24">
								{{currencyIcon()}}
								<text class="f32 fb">3960.00</text>
							</view>
						</view>
						<view class="f24 gray9 ml20">X2</view>
					</view>
					<view class="secend-product">
						<view class="d-b-s mb20">
							<view class="d-s-c">
								<image src="/static/default.png" mode="" class="s-product-img"></image>
								<view class="f28">
									苹果14Pro 暗夜紫
									<text class="ml20">规格名</text>
								</view>
							</view>
							<view class="f24 gray9 ml20">X1</view>
						</view>
						<view class="d-b-s mb20">
							<view class="f28 gray3 text-ellipsis-2">
								<text class="domation">赠品：</text>
								海之圣超饱和富氢水杯
								<text>（绿色</text>
							</view>
							<view class="f24 gray9 ml20">X1</view>
						</view>
						<view class="d-b-c mb10">
							<view class="flex-1 f26 gray9">商品业绩</view>
							<view class="f26 gray3">1400</view>
						</view>
						<view class="d-b-c">
							<view class="flex-1 f26 gray9">金额小计</view>
							<view class="f26 gray3">1400</view>
						</view>
					</view>
				</view>
				<view class="ww100 pt30">
					<view class="d-b-c mb10">
						<view class="flex-1 f26 gray9">商品金额总计</view>
						<view class="f26 gray3">{{currencyIcon()}}1400</view>
					</view>
					<view class="d-b-c mb10">
						<view class="flex-1 f26 gray9">邮费</view>
						<view class="f26 gray3">{{currencyIcon()}}1400</view>
					</view>
					<view class="d-b-c mb10">
						<view class="flex-1 f26 gray9">复购券抵扣</view>
						<view class="f26 gray3">{{currencyIcon()}}1400</view>
					</view>
					<view class="d-b-c mb10">
						<view class="flex-1 f26 gray9">总价</view>
						<view class="f26 gray3">{{currencyIcon()}}1400</view>
					</view>
					<view class="d-b-c">
						<view class="flex-1 f26 gray9">业绩</view>
						<view class="f26 gray3">{{currencyIcon()}}1400</view>
					</view>
				</view>
			</view>
		</view>

		<view class="f26 gray9 d-c-c radiogroup">
			<radio color="#FB3024" style="transform:scale(0.7)" @click="isRead = !isRead" :checked="isRead" value="" />
			请阅读并同意
			<text class="" style="color: #FB3024;">《购买协议》</text>
		</view>
		<button class="normal-sub-btn" style="margin-top: 37rpx;">购买</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isRead: false
		};
	},
	methods: {
		delAddress(e) {},
		editAddress() {}
	}
};
</script>

<style lang="scss">
.agreement-box {
	width: 750rpx;
	background: #ffffff;
	padding: 28rpx 22rpx;
	box-sizing: border-box;
	margin-top: 2rpx;
	margin-bottom: 20rpx;
	.agreement-content {
		font-size: 24rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #999999;
		line-height: 32rpx;
		word-break: break-all;
		margin-bottom: 32rpx;
	}
	.agreement-btn {
		min-width: 320rpx;
		height: 76rpx;
		line-height: 1.5;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		background: #282828;
		border-radius: 38rpx;
		color: #ffffff;
		font-size: 24rpx;
	}
}

.form-title {
	width: 750rpx;
	height: 106rpx;
	background: #fb3024;
	padding-left: 44rpx;
	padding-right: 25rpx;
	position: relative;
	box-sizing: border-box;
	font-size: 28rpx;
	color: #ffffff;
	line-height: 106rpx;
	font-weight: bold;
	z-index: 1;
}
.form-title.redtitle {
	width: 750rpx;
	height: 106rpx;
	background: #fb3024;
	padding-left: 44rpx;
	position: relative;
	box-sizing: border-box;
	font-size: 28rpx;
	color: #fff;
	line-height: 106rpx;
	font-weight: bold;
	z-index: 1;
}
.form-title::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 25rpx;
	width: 6rpx;
	height: 24rpx;
	background-color: #fb3024;
	z-index: 1;
}
.redtitle.form-title::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 25rpx;
	width: 6rpx;
	height: 24rpx;
	background-color: #fff;
	z-index: 1;
}
.form-group {
	padding: 0 22rpx;
	background: #ffffff;
	.form-item {
		min-height: 104rpx;
		box-sizing: border-box;
		padding: 15rpx 0;
		line-height: 1.5;
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1rpx solid #eee;
		.icon-jiantou {
			font-size: 32rpx;
			color: 090000;
		}
		.form-tips {
			font-size: 24rpx;
			color: #999;
		}
		.form-label {
			width: 220rpx;
			flex-shrink: 0;
			word-break: break-all;
			margin-right: 20rpx;
			font-size: 28rpx;
		}
		.disabled-input {
			width: 450rpx;
			height: 78rpx;
			padding: 0 18rpx;
			line-height: 78rpx;
			background: #f5f5f5;
			font-size: 28rpx;
			color: #999;
			flex: 1;
		}
		.form-textarea {
			width: 450rpx;
			padding: 0 18rpx;
			line-height: 1.5;
			font-size: 28rpx;
			color: #333;
			flex: 1;
			background: #fff;
		}
		.form-input {
			width: 450rpx;
			height: 78rpx;
			padding: 0 18rpx;
			line-height: 78rpx;
			background: #fff;
			font-size: 28rpx;
			color: #333;
			flex: 1;
		}
	}
	.form-item:last-child {
		border: none;
	}
}
.form-upload {
	padding: 30rpx 23rpx;
}
.form-upload-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 20rpx;
}
.form-upload-tips {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 20rpx;
}
.form-upload-tips2 {
	font-size: 24rpx;
	color: #fb3024;
	line-height: 1.5;
}
.upload-add {
	width: 142rpx;
	height: 142rpx;
	margin-right: 18rpx;
	margin-bottom: 18rpx;
}
.radiogroup::v-deep uni-radio:not([disabled]) .uni-radio-input:hover {
	border-color: #eee;
}

/* address */
.address-item {
	padding: 20rpx 25rpx;
	background-color: #fff;
	border-bottom: 1rpx solid #eee;
}
.address-item:last-child {
	border: none;
}
.add_icon_img.edit {
	width: 34rpx;
	height: 34rpx;
}
.add_icon_img.delete {
	width: 34rpx;
	height: 34rpx;
}
.small-text-btn {
	// width: 59rpx;
	font-size: 20rpx;
	padding: 0 9rpx;
	box-sizing: border-box;
	height: 31rpx;
	color: #fff;
	background: #181818;
	border-radius: 16rpx;
	margin-left: 20rpx;
}
.product-box {
	padding: 26rpx 18rpx 36rpx 20rpx;
	background: #ffffff;
	margin-bottom: 20rpx;
	.product-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 5rpx;
		font-weight: bold;
		border-bottom: 1rpx solid #eee;
		padding-bottom: 28rpx;
	}
	
}
</style>
