| | |
| | | <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 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"> |
| | |
| | | </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> |
| | | <u-picker |
| | | keyName="name" |
| | | :show="isShowCar" |
| | | @close="isShowCar = false" |
| | | :closeOnClickOverlay="true" |
| | | :columns="carList" |
| | | @confirm="seletedCar" |
| | | @cancel="isShowCar = false" |
| | | ></u-picker> |
| | | <u-datetime-picker |
| | | mode="datetime" |
| | | keyName="name" |
| | | :show="isShowDate" |
| | | :filter="timeFilter" |
| | | @close="isShowDate = false" |
| | | :closeOnClickOverlay="true" |
| | | @confirm="seletedDate" |
| | | @cancel="isShowDate = false" |
| | | /> |
| | | <uni-datetime-picker |
| | | v-model="datetimerange" |
| | | type="datetimerange" |
| | | start="2021-3-20 12:00:00" |
| | | end="2021-6-20 20:00:00" |
| | | rangeSeparator="至" |
| | | /> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | data() { |
| | | return { |
| | | param: {}, |
| | | isShowCar: false, |
| | | isShowDate: false, |
| | | carList: [], |
| | | datetimeOp: [], |
| | | }; |
| | | export default { |
| | | data() { |
| | | return { |
| | | param: {}, |
| | | isShowCar: false, |
| | | isShowDate: false, |
| | | carList: [], |
| | | datetimeOp: [] |
| | | }; |
| | | }, |
| | | methods: { |
| | | seletedCar() {}, |
| | | seletedDate() { |
| | | this.isShowDate = false; |
| | | }, |
| | | methods: { |
| | | seletedCar() {}, |
| | | seletedDate() {}, |
| | | timeFilter(mode, options) { |
| | | if (mode === 'minute') { |
| | | return options.filter(option => option === '00' || option === '30'); |
| | | } |
| | | return options; |
| | | } |
| | | } |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | .have_info{ |
| | | .tit{ |
| | | color: #ED4545; |
| | | .have_info { |
| | | .tit { |
| | | color: #ed4545; |
| | | margin: 40rpx 0 24rpx; |
| | | } |
| | | .content{ |
| | | background: #F7F7F7; |
| | | .content { |
| | | background: #f7f7f7; |
| | | border-radius: 16rpx; |
| | | padding: 30rpx 30rpx 10rpx; |
| | | .card{ |
| | | .card { |
| | | margin-bottom: 30rpx; |
| | | font-weight: 500; |
| | | font-size: 32rpx; |
| | | color: #222222; |
| | | background: #F7F7F7; |
| | | background: #f7f7f7; |
| | | padding: 0; |
| | | } |
| | | .line{ |
| | | .line { |
| | | display: flex; |
| | | margin-bottom: 20rpx; |
| | | text{ |
| | | &:nth-of-type(1){ |
| | | text { |
| | | &:nth-of-type(1) { |
| | | width: 150rpx; |
| | | color: #888888; |
| | | } |
| | | &:nth-of-type(2){ |
| | | &:nth-of-type(2) { |
| | | flex: 1; |
| | | } |
| | | } |
| | |
| | | margin-top: 24rpx; |
| | | width: 120rpx; |
| | | height: 120rpx; |
| | | border: 2rpx solid #E5E5E5; |
| | | border: 2rpx solid #e5e5e5; |
| | | background: #f7f7f7; |
| | | color: #666666; |
| | | font-size: 22rpx; |
| | |
| | | } |
| | | } |
| | | } |
| | | .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; |
| | | } |
| | | |
| | | |
| | | .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> |