<template>
|
<view class="main_app">
|
<view class="main_wrap">
|
<!-- -->
|
<view class="line">
|
<view class="label">
|
<text>*</text>
|
<text>选择车辆</text>
|
</view>
|
<view class="value" @click="isShowCar = true">
|
<text class="mr6" :style="{ color: param.area ? '#000000' : '#999999' }">{{ param.area ? param.area : '请选择' }}</text>
|
<u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
|
</view>
|
</view>
|
<view class="line">
|
<view class="label">
|
<text>*</text>
|
<text>预计用车时段</text>
|
</view>
|
<view class="value" @click="isShowDate = true">
|
<text class="mr6" :style="{ color: param.area ? '#000000' : '#999999' }">{{ param.area ? param.area : '请选择' }}</text>
|
<u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
|
</view>
|
</view>
|
</view>
|
<view class="have_info">
|
<view class="tit">您申请的用车时段已有车辆预约</view>
|
<view class="content">
|
<view class="card">皖A1212</view>
|
<view class="line"><text>用车时段</text><text>111111</text></view>
|
<view class="line"><text>目的地</text><text>111111</text></view>
|
<view class="line"><text>乘车人数</text><text>111111</text></view>
|
<view class="line"><text>用车事由</text><text>111111</text></view>
|
<view class="line"><text>申请人</text><text>111111</text></view>
|
</view>
|
</view>
|
<view class="main_footer">
|
<text>已选择：</text>
|
<text class="sel">132123</text>
|
<text class="btn" @click="$jump('/pages/staff/vehicle/apply')">确认预约</text>
|
</view>
|
<!-- -->
|
<!-- 选择车辆 -->
|
<u-picker keyName="name" :show="isShowCar" @close="isShowCar = false" :closeOnClickOverlay="true" :columns="carList" @confirm="seletedCar" @cancel="isShowCar = false"></u-picker>
|
<u-picker keyName="name" :show="isShowDate" @close="isShowDate = false" :closeOnClickOverlay="true" :columns="datetimeOp" @confirm="seletedDate" @cancel="isShowDate = false"></u-picker>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
param: {},
|
isShowCar: false,
|
isShowDate: false,
|
carList: [],
|
datetimeOp: [],
|
};
|
},
|
methods: {
|
seletedCar() {},
|
seletedDate() {},
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.have_info{
|
.tit{
|
color: #ED4545;
|
margin: 40rpx 0 24rpx;
|
}
|
.content{
|
background: #F7F7F7;
|
border-radius: 16rpx;
|
padding: 30rpx 30rpx 10rpx;
|
.card{
|
margin-bottom: 30rpx;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #222222;
|
background: #F7F7F7;
|
padding: 0;
|
}
|
.line{
|
display: flex;
|
margin-bottom: 20rpx;
|
text{
|
&:nth-of-type(1){
|
width: 150rpx;
|
color: #888888;
|
}
|
&:nth-of-type(2){
|
flex: 1;
|
}
|
}
|
}
|
}
|
}
|
.main_wrap {
|
.line {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
border-bottom: 1rpx solid #e5e5e5;
|
padding: 30rpx 0;
|
.label {
|
font-size: 30rpx;
|
font-weight: 400;
|
text {
|
&:nth-child(1) {
|
color: #e42d2d;
|
margin-right: 4rpx;
|
}
|
}
|
}
|
.value {
|
flex: 1;
|
height: 100%;
|
margin-left: 30rpx;
|
display: flex;
|
align-items: center;
|
justify-content: flex-end;
|
input {
|
width: 100%;
|
height: 100%;
|
text-align: right;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #222222;
|
}
|
}
|
}
|
.upload_line {
|
padding: 30rpx 0;
|
textarea {
|
margin-top: 12rpx;
|
width: 100%;
|
height: 180rpx;
|
font-size: 28rpx;
|
font-weight: 400;
|
color: #222222;
|
}
|
.adduser_list_item_ipt1_upload {
|
margin-top: 24rpx;
|
width: 120rpx;
|
height: 120rpx;
|
border: 2rpx solid #E5E5E5;
|
background: #f7f7f7;
|
color: #666666;
|
font-size: 22rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
overflow: hidden;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
.main_footer{
|
position: absolute;
|
width: 100%;
|
left: 0;
|
bottom: 0;
|
padding: 20rpx 30rpx 84rpx;
|
box-shadow: 0rpx -3rpx 6rpx 0rpx #EEEEEE;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.btn{
|
width: 184rpx;
|
height: 72rpx;
|
line-height: 72rpx;
|
text-align: center;
|
background: #279BAA;
|
box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
|
border-radius: 36rpx;
|
font-size: 30rpx;
|
color: #FFFFFF;
|
}
|
.sel{
|
color: #279BAA;
|
flex: 1;
|
}
|
|
|
}
|
</style>
|
