CommunityApp/pages/services/delivery/delivery.vue

<template>
	<view>
		<!-- 地址 -->
		<view class="cu-list menu card ">
			<view class="cu-item arrow" >
				<view class="content " style="padding: 36rpx 0;">
					<image style="width: 60rpx;" src="/static/publish.png" class="png" mode="widthFix"></image>
					<text class="text-black text-bold margin-left-10 text-lg" >新增收货地址</text>
				</view>
			</view>
		</view>
		<!-- 时间 -->
		<view class="card">
			<view class="cu-form-group" >
				<view class="title">时间选择</view>
				<picker mode="time" :value="time" start="09:01" end="21:01" @change="TimeChange">
					<view class="picker">
						{{time}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">日期选择</view>
				<picker mode="date" :value="date" start="2015-09-01" end="2020-09-01" @change="DateChange">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view>
		</view>
		<view class="card" >
			<view class="text-center desc">
				<view class="text-df" >
					<text>物品重量</text>
				</view>
				<view class="padding-top-10 text-sm">
					<text>每单仅限1~2件，超重另外收费!超过2公斤,每公斤加1元</text>
				</view>
			</view>
			<view class="form" style="padding: 40rpx 30rpx;">
				<view class="basis-sm">
					<text>选择重量</text>
				</view>
				<view class="basis-lg">
					<input type="digit" placeholder="请选择物体重量" />
				</view>
			</view>
		</view>

		<view class="card padding-10" >
			<view class="form">
				<view class="basis-sm">
					<text>驿站</text>
				</view>
				<view class="basis-lg">
					<input type="text" placeholder="请输入物件所在驿站(必填)" />
				</view>
			</view>
		</view>
		
		<view class="card">
			<view class="cu-form-group margin-top">
				<textarea maxlength="-1"   placeholder="请输入备注信息"></textarea>
			</view>
		</view>
		<!-- 上传短信截图 -->
		<view class="card">
			<view class="text-center padding-20">
				<text>请提供取件短信截图</text>
			</view>
			<view class="margin-bottom-30 margin-top-10">
				<u-upload :action="action" :file-list="fileList" ></u-upload>
			</view>
		</view>
		
		<view class="read">
			<u-checkbox v-model="isCheck" active-color="blue">
				<text>我已阅读并同意</text>
				<text class="text-red-btn">《小区代收免责协议》</text>
			</u-checkbox>
		</view>
		
		<view class="" style="height: 160rpx;">
			
		</view>
		
		<view  class=" footer-fixed" >
			<view class="cu-btn  flex  text-lg bg-red-btn" style="padding: 46rpx 0;">
				确认下单
			</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//日期时间
				time: '12:01',
				date: '2018-12-25',
				//上传
				action: 'http://www.example.com/upload',
				fileList: [],
				//协议
				isCheck:false
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.card{
		width: 700rpx;
		margin:20rpx auto 0rpx auto;
		border-radius: 10rpx;
		border-bottom: 1rpx solid #b6b6b6;
		box-sizing: border-box;
		background-color: #FFFFFF;
	}
	
	.read{
		width: 700rpx;
		margin:30rpx auto 0rpx auto;
	}
	
 	.card:first-child{
		margin-top: 30rpx;
	}
	.card .form{
		padding: 30rpx;
		display: flex;
		.basis-sm{
			flex-basis: 30%;
		}
		.basis-lg{
			flex-basis: 70%;
		}
	}
	.desc{
		background-color: #59a5f0;color: #FFFFFF;margin-top: 20rpx;padding: 20rpx;
	}
</style>