‘’

liukangdong

2024-05-10 81d1a0c814eea78551cc08ee56516f25e504d6ec

‘’

 h5/App.vue

@@ -177,9 +177,12 @@
            align-items: center;
        }
        .main_app{
            padding: 30rpx;
            padding:0 30rpx 30rpx;
            font-size: 28rpx;
            color: #222222;
            color: #333333;
        }
        .placeholder9{
            color: #999999;
        }
        .mr24{
            margin-right: 24rpx;

 h5/main.js

@@ -23,6 +23,7 @@
        url
    })
}
Vue.prototype.$goBack = () => { uni.navigateBack() }
Vue.prototype.$onWait = new Promise((resolve) => {
  Vue.prototype.$reslove = resolve
})

 h5/pages.json

@@ -224,6 +224,60 @@
            }
            

        }

        ,{

            "path" : "pages/staff/vehicle/index",

            "style" :                                                                                    
            {
                "navigationBarTitleText": "用车申请",
                "enablePullDownRefresh": false
            }
            
        }

        ,{

            "path" : "pages/staff/vehicle/shinei",

            "style" :                                                                                    
            {
                "navigationBarTitleText": "用车申请",
                "enablePullDownRefresh": false
            }
            
        }

        ,{

            "path" : "pages/staff/vehicle/apply",

            "style" :                                                                                    
            {
                "navigationBarTitleText": "用车申请",
                "enablePullDownRefresh": false
            }
            
        }

        ,{

            "path" : "pages/staff/vehicle/shiwai",

            "style" :                                                                                    
            {
                "navigationBarTitleText": "用车申请",
                "enablePullDownRefresh": false
            }
            
        }

        ,{

            "path" : "pages/staff/task/index",

            "style" :                                                                                    
            {
                "navigationBarTitleText": "任务中心",
                "enablePullDownRefresh": false
            }
            
        }

        ,{

            "path" : "pages/staff/task/visitorApprove",

            "style" :                                                                                    
            {
                "navigationBarTitleText": "访客审批",
                "enablePullDownRefresh": false
            }
            
        }

    ],

    "subPackages": [{

            "root": "n_pages",


 h5/pages/staff/index.vue

@@ -29,12 +29,12 @@
                    <view class="h1">隐患随手拍</view>
                    <view class="h2">HIDDEN DANGER</view>
                </view>
                <view class="img_wrap img2" @click="jump('/pages/staff/snapshot')">
                <view class="img_wrap img2" @click="jump('/pages/staff/vehicle/index')">
                    <image src="@/static/staff/ic_yongcheshenqing.png" class="img"></image>
                    <view class="h1">用车申请</view>
                    <view class="h2">VEHICLE APPLICATION</view>
                </view>
                <view class="img_wrap img2" @click="jump('/pages/staff/snapshot')">
                <view class="img_wrap img2" @click="jump('/pages/changePassword/changePassword')">
                    <image src="@/static/staff/ic_xiugaimima.png" class="img"></image>
                    <view class="h1">修改密码</view>
                    <view class="h2">CHANGE PASSWORD</view>
@@ -44,23 +44,23 @@
        <!--  -->
        <view class="title_wrap"><view class="name">业务查询</view></view>
        <view class="container2">
            <view class="img_wrap">
            <view class="img_wrap" @click="jump('/pages/staff/task/index')">
                <image class="img" src="@/static/staff/ic_renwuzhongxin.png"></image>
                <view class="h1">任务中心</view>
                <view class="h2">TASK CENTER</view>
                <view class="task_num">99+</view>
            </view>
            <view class="img_wrap">
            <view class="img_wrap" @click="jump('/pages/staff/task/index')">
                <image class="img" src="@/static/staff/ic_wodehuiyi.png"></image>
                <view class="h1">我的会议日历</view>
                <view class="h2">MY MEETING CALENDAR</view>
            </view>
            <view class="img_wrap">
            <view class="img_wrap" @click="jump('/pages/staff/task/index')">
                <image class="img" src="@/static/staff/ic_paichejilu.png"></image>
                <view class="h1">派车记录</view>
                <view class="h2">VEHICLE DISPATCH</view>
            </view>
            <view class="img_wrap">
            <view class="img_wrap" @click="jump('/pages/staff/task/index')">
                <image class="img" src="@/static/staff/ic_huiyishiguanli.png"></image>
                <view class="h1">会议室管理</view>
                <view class="h2">MANAGE MEETING ROOMS</view>

 h5/pages/staff/meetingSubOrder.vue

@@ -35,8 +35,41 @@
                    <text>会议内容</text>
                </view>
                <view class="line">
                    <textarea v-model="param.aaa" :maxlength="300" placeholder="请输入会议内容" placeholder-class="placeholder9" class="label" />
                    <u-textarea border="none" v-model="param.aaa" count :maxlength="300" placeholder="请输入会议内容" placeholder-class="placeholder9" class="label" />
                </view>
            </view>
            <view class="empty"></view>
            <view class="item">
                <view class="name">参会人员</view>
                <view class="line">
                    <view class="label">
                        <text v-if="false">moumoumou</text>
                        <text v-else class="placeholder9" @click="$jump('/pages/staff/memberSel')">请选择</text>
                    </view>
                    <u-icon name="arrow-right" color="#999999" size="14" @click="$jump('/pages/staff/memberSel')" />
                </view>
            </view>
            <view class="item">
                <view class="name">选择服务项</view>
                <view class="line">
                    <view class="label">
                        <view class="service_item" v-for="(item,index) in serviceOps" :key="index">
                            {{ item.value }}
                        </view>
                    </view>
                </view>
            </view>
            <view class="item">
                <view class="name">
                    <text>备注</text>
                </view>
                <view class="line">
                    <textarea v-model="param.as" :maxlength="-1" placeholder="请输入" placeholder-class="placeholder9" class="label" />
                </view>
            </view>
			
            <view class="sub_btn">
                ç¡®è®¤é¢„约
            </view>
            
        </view>
@@ -47,7 +80,12 @@
    export default {
        data() {
            return {
                param: {}
                param: {},
                serviceOps: [
                    { key: '0', value: '席卡' },
                    { key: '1', value: '投影仪' },
                    { key: '2', value: '笔记本电脑' },
                ]
            };
        }
    }
@@ -66,10 +104,21 @@
            display: flex;
            .label{
                flex: 1;
                display: flex;
                align-items: center;
                .service_item{
                    height: 64rpx;
                    line-height: 64rpx;
                    background: #F7F7F7;
                    border-radius: 4rpx;
                    padding: 0 24rpx;
                    margin-right: 20rpx;
                }
            }
            
        }
    }
    padding-bottom: 100rpx;
}
.empty {
    width: 750rpx;
@@ -77,6 +126,18 @@
    background-color: #f7f7f7;
    margin: 0 -30rpx;
}
.sub_btn{
                width: 690rpx;
                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;
                margin-top: 20rpx;
            }
.star{
    margin-left: 4rpx;
    color: #e42d2d;

 h5/pages/staff/task/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,427 @@
<template>
    <view class="box">
        <scroll-view scroll-x class="box_head">
            <view class="box_head_search">
                <view class="box_head_search_ipt">
                    <image src="@/static/n/ic_search@2x.png" mode="widthFix"></image>
                    <input type="text" placeholder="搜索任务名称" />
                </view>
                <view class="box_head_search_sha" @click="show = true">
                    <image src="@/static/n/ic_shaixuan@2x.png" mode="widthFix"></image>
                    <text>筛选</text>
                </view>
            </view>
            <view class="box_head_list">
                <view class="box_head_item active">待处理 12</view>
                <view class="box_head_item">已处理</view>
                <view class="box_head_item">我发起的</view>
            </view>
        </scroll-view>
        <view class="box_list">
            <view class="box_list_item" v-for="(item, index) in 3" :key="index">
                <view class="box_list_item_head">
                    <text>丁恩凯的劳务入厂申请</text>
                    <text class="loading">待审核</text>
                </view>
                <view class="box_list_item_nr">
                    <view class="box_list_item_nr_item">
                        <text>被访问人：</text>
                        <text>人事部-王亚蓝</text>
                    </view>
                    <view class="box_list_item_nr_item">
                        <text>进厂时间：</text>
                        <text>12-12 09:00</text>
                    </view>
                    <view class="box_list_item_nr_item">
                        <text>离厂时间：</text>
                        <text>12-12 12:00</text>
                    </view>
                    <view class="box_list_item_nr_item">
                        <text>来访事由：</text>
                        <text>业务来往</text>
                    </view>
                    <view class="box_list_item_nr_item">
                        <text>随行车辆：</text>
                        <text>皖A88888</text>
                    </view>
                    <view class="box_list_item_nr_x"></view>
                    <view class="box_list_item_nr_text">
                        <text class="time">2023-12-12 09:00提交</text>
                        <text class="btn">去处理</text>
                    </view>
                </view>
            </view>
        </view>
        <!-- ç­›é€‰ -->
        <u-popup :show="show" mode="bottom" :round="10" :closeable="true" @close="show = false">
            <view class="search">
                <view class="search_head">任务筛选</view>
                <view class="search_list">
                    <view class="search_list_item">
                        <view class="search_list_item_label">创建日期</view>
                        <view class="search_list_item_val">
                            <view class="search_list_item_val_row" @click="tiemShow = true" :style="{ color: search.startTime ? '#000' : '' }">{{search.startTime ? search.startTime : '开始日期'}}</view>
                            <view class="search_list_item_val_z">-</view>
                            <view class="search_list_item_val_row" @click="tiemShow1 = true" :style="{ color: search.endTime ? '#000' : '' }">{{search.endTime ? search.endTime : '结束日期'}}</view>
                        </view>
                    </view>
                    <view class="search_list_item">
                        <view class="search_list_item_label">订单来源</view>
                        <view class="search_list_item_cates">
                            <view :class="index === i ? 'search_list_item_cates_row active' : 'search_list_item_cates_row'"
                            v-for="(item, index) in cate"
                            :key="index"
                            @click="clickItem(index)">
                                {{item.name}}
                            </view>
                        </view>
                    </view>
                </view>
                <view class="search_footer">
                    <view class="search_footer_item" @click="show = false">取消</view>
                    <view class="search_footer_item t">提交</view>
                </view>
            </view>
        </u-popup>
        <u-datetime-picker
            :show="tiemShow"
            v-model="time"
            mode="datetime"
            @confirm="confirmLeft"
            @cancel="tiemShow = false"
        ></u-datetime-picker>
        <u-datetime-picker
            :show="tiemShow1"
            v-model="time1"
            mode="datetime"
            @confirm="confirmRight"
            @cancel="tiemShow1 = false"
        ></u-datetime-picker>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false,
                tiemShow: false,
                tiemShow1: false,
                time: '',
                i: null,
                time: '',
                time1: '',
                search: {
                    startTime: '',
                    endTime: ''
                },
                cate: [
                    { name: '访客申请', id: 1 },
                    { name: '劳务申请', id: 2 },
                    { name: '用车申请', id: 3 }
                ]
            };
        },
        methods: {
            clickItem(index) {
                this.i = index
            },
            confirmLeft(e) {
                console.log(uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss'))
                this.search.startTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
                this.tiemShow = false
            },
            confirmRight(e) {
                this.search.endTime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
                this.tiemShow1 = false
            }
        }
    }
</script>
<style>
    page {
        background-color: #F7F7F7 !important;
    }
</style>
<style lang="scss" scoped>
    .box {
        width: 100%;
        .box_head {
            width: 100%;
            height: 190rpx;
            padding: 12rpx 30rpx;
            box-sizing: border-box;
            background: #FFFFFF;
            position: sticky;
            top: 0;
            left: 0;
            .box_head_search {
                width: 100%;
                height: 76rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 24rpx;
                .box_head_search_ipt {
                    flex: 1;
                    height: 100%;
                    padding: 0 30rpx;
                    box-sizing: border-box;
                    display: flex;
                    align-items: center;
                    background: #F7F7F7;
                    border-radius: 50rpx;
                    margin-right: 30rpx;
                    image {
                        flex-shrink: 0;
                        width: 28rpx;
                        height: 28rpx;
                        margin-right: 16rpx;
                    }
                    input {
                        flex: 1;
                        height: 100%;
                        font-size: 26rpx;
                        font-weight: 400;
                        color: #B2B2B2;
                    }
                }
                .box_head_search_sha {
                    flex-shrink: 0;
                    display: flex;
                    align-items: center;
                    image {
                        width: 28rpx;
                        height: 28rpx;
                        margin-right: 8rpx;
                    }
                    text {
                        font-size: 26rpx;
                        font-weight: 400;
                        color: #333333;
                    }
                }
            }
            .box_head_list {
                width: 100%;
                display: flex;
                align-items: center;
                .active {
                    border: 1rpx solid #4c99a8 !important;
                    color: #4c99a8 !important;
                }
                .box_head_item {
                    padding: 0 30rpx;
                    height: 60rpx;
                    line-height: 60rpx;
                    box-sizing: border-box;
                    border-radius: 30rpx;
                    border: 1rpx solid #999999;
                    font-size: 26rpx;
                    font-weight: 400;
                    color: #333333;
                    margin-right: 20rpx;
                }
            }
        }
        .box_list {
            width: 100%;
            padding: 30rpx;
            box-sizing: border-box;
            .box_list_item {
                width: 100%;
                margin-bottom: 20rpx;
                &:last-child {
                    margin: 0 !important;
                }
                .box_list_item_head {
                    width: 100%;
                    height: 100rpx;
                    padding: 0 30rpx;
                    box-sizing: border-box;
                    background: linear-gradient(270deg, #FEFEFF 0%, #E1F7FE 100%);
                    border-radius: 8rpx 8rpx 0rpx 0rpx;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .loading {
                        color: #4c99a8;
                    }
                    .success {
                        color: #03C68F;
                    }
                    .error {
                        color: #E0312A;
                    }
                    text {
                        &:nth-child(1) {
                            font-size: 32rpx;
                            font-weight: 500;
                            color: #222222;
                        }
                        &:nth-child(2) {
                            font-size: 26rpx;
                            font-weight: 400;
                        }
                    }
                }
                .box_list_item_nr {
                    padding: 30rpx;
                    width: 100%;
                    box-sizing: border-box;
                    background-color: #FFFFFF;
                    .box_list_item_nr_x {
                        width: 100%;
                        height: 1rpx;
                        background-color: #E5E5E5;
                    }
                    .box_list_item_nr_text {
                        .time{
                            font-size: 26rpx;
                            font-weight: 400;
                            color: #999999;
                        }
                        .btn{
                            padding: 0 32rpx;
                            height: 60rpx;
                            line-height: 60rpx;
                            background: #279BAA;
                            color: #fff;
                            font-size: 26rpx;
                            font-weight: 300;
                            text-align: center;
                            border-radius: 30rpx;
                        }
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        width: 100%;
                        margin-top: 20rpx;
                    }
                    .box_list_item_nr_item {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        margin-bottom: 20rpx;
                        text {
                            &:nth-child(1) {
                                font-size: 26rpx;
                                font-weight: 400;
                                color: #666666;
                            }
                            &:nth-child(2) {
                                font-size: 26rpx;
                                font-weight: 400;
                                color: #333333;
                            }
                        }
                    }
                }
            }
        }
        .search {
            width: 100%;
            padding: 30rpx;
            box-sizing: border-box;
            .search_head {
                width: 100%;
                text-align: center;
                font-size: 32rpx;
                font-weight: 500;
                color: #222222;
            }
            .search_list {
                width: 100%;
                margin-top: 34rpx;
                .search_list_item {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    margin-bottom: 48rpx;
                    .search_list_item_label {
                        font-size: 30rpx;
                        font-weight: 400;
                        color: #222222;
                        margin-bottom: 24rpx;
                    }
                    .search_list_item_cates {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        .active {
                            background: #4c99a8 !important;
                            color: #ffffff !important;
                        }
                        .search_list_item_cates_row {
                            padding: 0 26rpx;
                            height: 64rpx;
                            line-height: 64rpx;
                            background: #F7F7F7;
                            border-radius: 36rpx;
                            margin-right: 20rpx;
                            font-size: 26rpx;
                            font-weight: 400;
                            color: #333333;
                            &:last-child {
                                margin: 0;
                            }
                        }
                    }
                    .search_list_item_val {
                        width: 100%;
                        height: 64rpx;
                        background: #F7F7F7;
                        border-radius: 36rpx;
                        border: 1rpx solid #E5E5E5;
                        display: flex;
                        align-items: center;
                        .search_list_item_val_row {
                            flex: 1;
                            height: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            font-size: 26rpx;
                            font-weight: 400;
                            color: #999999;
                        }
                        .search_list_item_val_z {
                            flex-shrink: 0;
                            font-size: 26rpx;
                            font-weight: 400;
                            color: #999999;
                            margin: 0 30rpx;
                        }
                    }
                }
            }
            .search_footer {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .t {
                    background: #4c99a8 !important;
                    color: #ffffff !important;
                }
                .search_footer_item {
                    flex: 1;
                    height: 88rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 32rpx;
                    font-weight: 400;
                    color: #4c99a8;
                    margin-right: 18rpx;
                    border: 1rpx solid #4c99a8;
                    border-radius: 44rpx;
                    &:last-child {
                        margin: 0 !important;
                    }
                }
            }
        }
    }
</style>

 h5/pages/staff/task/visitorApprove.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,351 @@
<template>
    <view class="main_app">
        <view class="status_wrap">
            <view class="name">丁恩凯的访客申请</view>
            <view class="desc">等待我处理</view>
            <view class="box_list_status">审批中</view>
        </view>
        <!--  -->
        <view class="emyty"></view>
        <view class="module_list">
            <view class="item">
                <text class="label">拜访人</text>
                <text class="value">廖成瑶</text>
            </view>
            <view class="item">
                <text class="label">预计入/离厂时间</text>
                <text class="value">05/01 8:00 - 05/01 18:00</text>
            </view>
            <view class="emyty"></view>
            <view class="item">
                <text class="label">访客信息</text>
                <text class="value">
                    <image class="avatar" src="@/static/logo@2x.png" mode="widthFix"></image>
                    <view class="info">
                        <text class="name">孙志 18177665678</text>
                        <text>身份证号：3309****2910</text>
                        <text>入园车辆：皖A88789</text>
                    </view>
                </text>
            </view>
            <view class="item">
                <text class="label">公司名称</text>
                <text class="value">中国移动</text>
            </view>
            <view class="item">
                <text class="label">施工人员</text>
                <text class="value">否</text>
            </view>
            <view class="item">
                <text class="label">来访事由</text>
                <text class="value">业务洽谈</text>
            </view>
        </view>
		
        <view class="box_list">
            <view class="box_list_title">流程</view>
            <view class="box_list_list">
                <view class="box_list_list_item">
                    <view class="left">
                        <view class="left_d"></view>
                        <view class="left_x"></view>
                    </view>
                    <view class="right">
                        <view class="right_top">
                            <text>栓子哥提交的申请</text>
                            <text>2023-05-01 08:00</text>
                        </view>
                        <view class="right_bottom">
                            <text>安徽豆米科技有限公司</text>
                        </view>
                    </view>
                </view>
                <view class="box_list_list_item">
                    <view class="left">
                        <view class="left_d"></view>
                        <view class="left_x"></view>
                    </view>
                    <view class="right">
                        <view class="right_top">
                            <text>拜访员工</text>
                            <text>2023-05-01 08:00</text>
                        </view>
                        <view class="right_bottom">
                            <text>王亚蓝(<text class="blue">审核通过</text>)</text>
                        </view>
                    </view>
                </view>
                <view class="box_list_list_item">
                    <view class="left">
                        <view class="left_d"></view>
                        <view class="left_x"></view>
                    </view>
                    <view class="right">
                        <view class="right_top">
                            <text>审批人</text>
                            <text>2023-05-01 08:00</text>
                        </view>
                        <view class="right_bottom">
                            <text>马总(<text class="blue">待审核</text>)</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				
            };
        }
    }
</script>
<style>
    page {
        background-color: #F7F7F7;
    }
</style>
<style lang="scss" scoped>
    .box {
        width: 100%;
        .p {
            padding: 0 30rpx !important;
        }
        .box_list {
            width: 100%;
            padding: 30rpx;
            box-sizing: border-box;
            background-color: #ffffff;
            display: flex;
            flex-direction: column;
            margin-bottom: 20rpx;
            position: relative;
            .box_list_title {
                font-size: 32rpx;
                font-weight: 500;
                color: #222222;
                margin-bottom: 24rpx;
            }
            .box_list_list {
                width: 100%;
                display: flex;
                flex-direction: column;
                .box_list_list_item {
                    width: 100%;
                    display: flex;
                    align-items: flex-start;
                    margin-bottom: 36rpx;
                    &:last-child {
                        margin: 0;
                    }
                    .left {
                        flex-shrink: 0;
                        height: 100%;
                        position: relative;
                        .left_d {
                            width: 16rpx;
                            height: 16rpx;
                            background: #81AFF7;
                            border-radius: 50%;
                            position: relative;
                            z-index: 2;
                        }
                        .left_x {
                            position: absolute;
                            top: 0;
                            left: 8rpx;
                            width: 1rpx;
                            height: 130rpx;
                            background-color: #EEEEEE;
                        }
                    }
                    .right {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        margin-left: 30rpx;
                        .right_top {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            text {
                                &:first-child {
                                    font-size: 30rpx;
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 400;
                                    color: #333333;
                                }
                                &:last-child {
                                    font-size: 24rpx;
                                    font-family: PingFangSC, PingFang SC;
                                    font-weight: 400;
                                    color: #999999;
                                }
                            }
                        }
                        .right_bottom {
                            width: 100%;
                            margin-top: 10rpx;
                            text {
                                font-size: 26rpx;
                                font-weight: 400;
                                color: #777777;
                            }
                            .blue {
                                color: #025EEF !important;
                            }
                        }
                    }
                }
            }
            .box_list_item1 {
                width: 100%;
                padding: 30rpx 0;
                box-sizing: border-box;
                display: flex;
                align-items: flex-start;
                flex-wrap: wrap;
                justify-content: space-between;
                border-bottom: 1rpx solid #E5E5E5;
                .box_list_item1_head {
                    width: 100%;
                    font-size: 26rpx;
                    font-weight: 400;
                    color: #777777;
                    margin-bottom: 24rpx;
                }
                .box_list_item_img {
                    width: 100rpx;
                    height: 100rpx;
                    flex-shrink: 0;
                    border-radius: 8rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    border: 1rpx solid #EEEEEE;
                    margin-right: 20rpx;
                    image {
                        width: 100%;
                        height: 100%;
                    } 
                }
                .box_list_item_info {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    text {
                        &:nth-child(1) {
                            font-size: 28rpx;
                            font-weight: 400;
                            color: #222222;
                        }
                        &:nth-child(2) {
                            font-size: 28rpx;
                            font-weight: 400;
                            color: #222222;
                            margin-top: 20rpx;
                        }
                        &:nth-child(3) {
                            font-size: 28rpx;
                            font-weight: 400;
                            color: #222222;
                            margin-top: 20rpx;
                        }
                    }
                }
            }
            .box_list_item {
                width: 100%;
                padding: 30rpx 0;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                border-bottom: 1rpx solid #E5E5E5;
                .box_list_item_img {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 8rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    border: 1rpx solid #EEEEEE;
                    margin-top: 24rpx;
                    image {
                        width: 100%;
                        height: 100%;
                    } 
                }
                text {
                    &:nth-child(1) {
                        font-size: 26rpx;
                        font-weight: 400;
                        color: #777777;
                    }
                    &:nth-child(2) {
                        font-size: 28rpx;
                        font-weight: 400;
                        color: #222222;
                        margin-top: 20rpx;
                    }
                    &:nth-child(3) {
                        font-size: 28rpx;
                        font-weight: 400;
                        color: #222222;
                        margin-top: 20rpx;
                    }
                    &:nth-child(4) {
                        font-size: 28rpx;
                        font-weight: 400;
                        color: #222222;
                        margin-top: 20rpx;
                    }
                }
            }
            .box_list_name {
                font-size: 32rpx;
                font-weight: 500;
                color: #222222;
            }
            .box_list_job {
                font-size: 26rpx;
                font-weight: 400;
                color: #666666;
                margin-top: 20rpx;
            }
            .box_list_status1 {
                position: absolute;
                right: 30rpx;
                top: 50%;
                transform: translate(0, -50%);
                width: 120rpx;
                height: 120rpx;
                image {
                    width: 100%;
                    height: 100%;
                }
            }
            .box_list_status {
                position: absolute;
                right: 0;
                top: 0;
                width: 140rpx;
                height: 60rpx;
                line-height: 60rpx;
                text-align: center;
                font-size: 26rpx;
                font-weight: 400;
                color: #025EEF;
                background: rgba(66,117,252,0.12);
                border-radius: 0rpx 0rpx 0rpx 30rpx;
            }
        }
    }
</style>

 h5/pages/staff/vehicle/apply.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,215 @@
<template>
    <view class="main_app">
        <view class="main_wrap">
            <!--  -->
            <view class="line">
                <view class="label">
                    <text>*</text>
                    <text>预计用车时段</text>
                </view>
                <view class="value" @click="$goBack()">
                    <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">
                        <input type="text" placeholder="请输入申请车辆" v-model="param.receptMemberName" placeholder-style="color: #999999;" />
                    </view>
            </view>
            <view class="line">
                <view class="label">
                    <text>*</text>
                    <text>预计出发时间</text>
                </view>
                <view class="value" @click="isShowDatetime = 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="empty"></view>
            <view class="line">
                    <view class="label">
                        <text>*</text>
                        <text>目的地类别</text>
                    </view>
                    <view class="value">
                        <text>{{ 111 }}</text>
                    </view>
            </view>
            <view class="line">
                    <view class="label">
                        <text>*</text>
                        <text>目的地</text>
                    </view>
                    <view class="value">
                        <input type="text" placeholder="请输入" v-model="param.address" placeholder-style="color: #999999;" />
                    </view>
            </view>
            <view class="line">
                    <view class="label">
                        <text>*</text>
                        <text>乘车人员</text>
                    </view>
                    <view class="value"  @click="$jump('/pages/staff/memberSel')">
                        <text class="mr6" :style="{ color: param.peo ? '#000000' : '#999999' }">{{ param.peo ? param.peo : '请选择' }}</text>
                        <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
                    </view>
            </view>
            <view class="upload_line">
                    <view class="label">
                        <text style="color: #e42d2d;">*</text>
                        <text>用车事由</text>
                    </view>
                    <view class="value">
                        <textarea type="text" placeholder="请输入" :maxlength="-1" v-model="param.reson" placeholder-style="color: #999999;" />
                    </view>
            </view>
        </view>
        <view class="tip">
            <view class="title">注意事项：</view>
            <view class="line">1、公司车辆外出需办理用车申请表，经批准后方可外出（借出）。</view>
            <view class="line">2、市外用车需总经办审批。</view>
            <view class="line">3、借出车辆必须遵守交通规则，安全行驶。对于车辆发生交通意外，对当事人及第三方造成人身伤害及损失，公司可以协助处理保险公司赔偿相关事宜，但不承担任何责任和费用。</view>
            <view class="line">4、公司借给申请人用车，申请借车人为第一责任人，不允许转借给其他人使用，若要借给他人使用。责任人要承担全部责任。</view>
        </view>
        <view class="sub_btn" @click="handleSub">提交</view>
        <!--  -->
        <u-datetime-picker :show="isShowDatetime" :minDate="minDate" @confirm="confirmDate" @cancel="isShowDatetime = false" mode="date"></u-datetime-picker>
    </view>
</template>

<script>
    import dayjs from 'dayjs'
    export default {
        data() {
            return {
                param: {},
                minDate: '',
                isShowDatetime: false,
            };
        },
        created(){
            this.minDate = new Date().getTime()
        },
        methods: {
            handleSub() {
                console.log('---');
            },
            confirmDate(e) {
                console.log(e.value);
                this.param.aa = dayjs(e.value).format('YYYY-MM-DD')
                this.isShowDate = false
            }
        }
    }
</script>

<style lang="scss">
.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%;
            }
        }
    }
}
.sub_btn{
    position: fixed;
    bottom: 84rpx;
    left: 30rpx;
    width: 690rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background: #279BAA;
    box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
    border-radius: 44rpx;
    font-size: 30rpx;
    color: #FFFFFF;
}
.tip{
        background: #F7F7F7;
        padding: 30rpx 30rpx 180rpx;
        margin: 0 -30rpx;
        .title{
            line-height: 40rpx;
            margin-bottom: 22rpx;
        }
        .line{
            font-size: 26rpx;
            color: #666666;
            line-height: 36rpx;
        }
    }
.main_app {
    padding-bottom: 0;
    // padding-top: 10rpx;
}

.empty {
    width: 750rpx;
    height: 20rpx;
    background-color: #f7f7f7;
    margin: 0 -30rpx;
}
</style>

 h5/pages/staff/vehicle/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,92 @@
<template>
    <view class="main_app">
        <image src="../../../static/staff/yongche_bg.png" class="banner" mode="widthFix"></image>
        <view class="emyty"></view>
        <view class="content">
            <view class="title">选择目的地类别</view>
            <view class="item" @click="$jump('/pages/staff/vehicle/shinei')">
                <image src="../../../static/bg_shineiyongche@2x.png" class="img" mode="widthFix"></image>
                <view class="h1">室内用车</view>
                <view class="h2">URBAN AREA</view>
            </view>
            <view class="item" @click="$jump('/pages/staff/vehicle/shiwai')">
                <image src="../../../static/bg_shiwaiyongche@2x.png" class="img" mode="widthFix"></image>
                <view class="h1">室外用车</view>
                <view class="h2">SUBURB AREA</view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                param: {}
            };
        }
    }
</script>

<style lang="scss">
.main_app{
    .emyty{
        width: 100%;
        height: 218rpx;
    }
    .content{
        width: 690rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(39,155,170,0.16);
        border-radius: 16rpx;
        padding: 60rpx 30rpx;
        .item{
            width: 630rpx;
            height: 200rpx;
            border-radius: 8rpx;
            margin-bottom: 30rpx;
            &:nth-last-child(1){
                margin-bottom: 0;
            }
            position: relative;
            padding: 40rpx;
            overflow: hidden;
            z-index: 1;
            .h1 {
                font-weight: 500;
                font-size: 32rpx;
                color: #222222;
                line-height: 48rpx;
                margin-bottom: 10rpx;
            }
            .h2 {
                font-size: 22rpx;
                color: #7b9da1;
                line-height: 34rpx;
            }
            .img {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
            }
        }
        .title{
            margin-bottom: 40rpx;
            font-weight: 500;
            font-size: 34rpx;
            color: #222222;
            line-height: 48rpx;
        }
    }
    .banner{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: -1;
    }
}
</style>

 h5/pages/staff/vehicle/shinei.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,172 @@
<template>
    <view class="main_app">
        <view class="app_header">
            <view class="item" @click="isShowCar = true">
                <text v-if="false">xx</text>
                <text v-else class="placeholder9">选择车辆</text>
                <u-icon name="arrow-down" color="#999999" />
            </view>
            <view class="item" @click="isShowDate = true">
                <text v-if="param.aa">{{ param.aa }}</text>
                <text v-else class="placeholder9">选择日期</text>
                <u-icon name="arrow-down" color="#999999" />
            </view>
        </view>
        <!--  -->
        <view class="time_list">
            <view class="item" v-for="item,i in timeList" :key="i">{{ item.time }}</view>
        </view>
        <!--  -->
        <view class="main_footer">
            <view class="df_ac">
                <view>已选择：</view>
                <view class="sel_time">xxxxxx</view>
            </view>
            <view class="btns">
                <view class="left">
                    <view class="item" v-for="item in colorOptions" :key="item.name">
                        <view class="box" :style="{ background: item.color }"></view>
                        <view class="">{{ item.name }}</view>
                    </view>
                </view>
                <view class="sub" @click="$jump('/pages/staff/vehicle/apply')">确认预约</view>
            </view>
        </view>
        <!--  -->
        <!-- é€‰æ‹©è½¦è¾† -->
        <u-picker keyName="name" :show="isShowCar" :columns="carList" @confirm="seletedCar" @cancel="isShowCar = false"></u-picker>
        <!-- æ—¥æœŸ -->
        <u-datetime-picker :show="isShowDate" :minDate="minDate" @confirm="confirmDate" @cancel="isShowDate = false" mode="date"></u-datetime-picker>
    </view>
</template>

<script>
import dayjs from 'dayjs'
export default {
    data() {
        return {
            isShowCar: false,
            isShowDate: false,
            param: {},
			
            minDate: '',
            carList: [[{ name: 'aa', value: '11' }]],
            timeList: [
                { time: '08:30-09:00' },
                { time: '08:30-09:00' },
                { time: '08:30-09:00' },
                { time: '08:30-09:00' },
            ],
			
            colorOptions: [
                { color: '#279BAA', name: '已选择' },
                { color: '#F7F7F7', name: '可预约' },
                { color: '#cccccc', name: '不可预约' },
            ]
        };
    },
    created(){
        this.minDate = new Date().getTime()
    },
    methods: {
        confirmDate(e) {
            console.log(e.value);
            this.param.aa = dayjs(e.value).format('YYYY-MM-DD')
            this.isShowDate = false
        },
        seletedCar(e) {
            console.log(e.value);
            this.param.aa = dayjs(e.value).format('YYYY-MM-DD')
            this.isShowDate = false
        }
    }
};
</script>

<style lang="scss">
.main_app {
    .app_header {
        display: flex;
        align-items: center;
        margin: 0 -15rpx;
        .item {
            width: 330rpx;
            height: 72rpx;
            margin: 15rpx;
            padding: 0 30rpx;
            border-radius: 36rpx;
            border: 1rpx solid #e5e5e5;
            display: flex;
            align-items: center;
            justify-content: space-between;
            align-items: center;
        }
    }
    .main_footer{
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        padding: 20rpx 30rpx 84rpx;
        box-shadow: 0rpx -3rpx 6rpx 0rpx #EEEEEE;
        .sel_time{
            color: #279BAA;
        }
        .btns{
            margin-top: 10rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left{
                display: flex;
                .item{
                    display: flex;
                    align-items: center;
                    margin-right: 20rpx;
                    .box{
                        margin-right: 10rpx;
                        width: 32rpx;
                        height: 32rpx;
                    }
                }
            }
            .sub{
                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;
            }
        }
    }
    .time_list{
        display: flex;
        justify-content: space-between;
        padding: 30rpx 0;
        flex-wrap: wrap;
        .item{
            width: 220rpx;
            height: 80rpx;
            line-height: 80rpx;
            text-align: center;
            background: #F7F7F7;
            border-radius: 4rpx;
            margin-bottom: 24rpx;
            font-size: 30rpx;
        }
        .active{
            background-color: #279BAA;
            color: #fff;
        }
        .disable{
            background-color: #cccccc;
            color: #999999;
        }
    }
	
}
</style>

 h5/pages/staff/vehicle/shiwai.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,191 @@
<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>

 h5/static/bg_shineiyongche@2x.png

 h5/static/bg_shiwaiyongche@2x.png

 h5/static/staff/yongche_bg.png