<template>
	<view class="wash-order">
		<view class="order-info">
			<view class="order-name">
				<view class="title">送洗人：</view>
				<input type="text" v-model="name" />
			</view>
			<view class="order-phone">
				<view class="title">手机号：</view>
				<input type="text" v-model="phone" />
			</view>
			<view class="order-area">
				<view class="title">省市区：</view>
				<input type="text" v-model="area" />
				<view class="location">
					<image src="../static/mine/28.png"></image>
					<view>定位</view>
				</view>
			</view>
			<view class="order-address">
				<view class="title">详细地址：</view>
				<input type="text" v-model="address" />
			</view>
		</view>
		<view class="upload-image">
			<view class="title">上传商品图片</view>
			<u-upload 
				ref="uUpload" 
				@on-uploaded="onUploaded" 
				:custom-btn="true" 
				:max-count="count" 
				:auto-upload="false"
			>
				<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
					<img src="../static/mine/27.png" />
				</view>
			</u-upload>
		</view>
		<view class="wash-btn">确认送洗</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			count: 4, // 最大图片数量
			name: '',
			phone: '',
			area: '',
			address: ''
		}
	},
	methods: {
		submit() {
			this.$refs.uUpload.upload();
		},
		onUploaded(list) {
			console.log(list)
		}
	},
};
</script>
<style lang="scss" scoped>
.wash-order {
	border-top: 1rpx solid #ECECEC;
	.order-info {
		> view {
			width: 750rpx;
			height: 98rpx;
			background: rgba(255,255,255,1);
			padding: 35rpx 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 2rpx;
				background-color: #ECECEC;
			}
			.title {
				font-size: 30rpx;
				color: rgba(51,51,51,1);
				margin-right: 10rpx;
			}
			> input {
				flex: 1;
				text-align: right;
			}
			
		}
		.order-area {
			.location {
				margin-left: 20rpx;
				text-align: center;
				font-size: 22rpx;
				color: rgba(255,120,15,1);
				> image {
					width: 26rpx;
					height: 32rpx;
					margin-bottom: 10rpx;
				}
			}		
		}
	}
	.upload-image {
		padding: 35rpx 30rpx;
		.title {
			font-size: 30rpx;
			color: rgba(51,51,51,1);
			margin-bottom: 34rpx;
		}
		.slot-btn {
			width: 140rpx;
			height: 140rpx;
			background: rgba(236,236,236,1);
			border-radius: 10rpx;
			text-align: center;
			> img {
				width: 54rpx;
				height: 49rpx;
				margin-top: 48rpx;
			}
		}
	}
	.wash-btn {
		width: 690rpx;
		height: 98rpx;
		background: rgba(255,120,15,1);
		border-radius: 49rpx;
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translate(-50%, 0);
		font-size: 36rpx;
		color:rgba(255,255,255,1);
		text-align: center;
		line-height: 98rpx;
	}
}
</style>