‘’

liukangdong

2024-05-30 051a8b3305ca2f01c750cb46e1f1b2e071bda802

‘’

 h5/api/index.js

@@ -25,4 +25,12 @@
    method: 'get',
    data
  })
}
//  å‘送短信验证码
export const sendSms = (data) => {
  return http({
    url: 'visitsAdmin/cloudService/business/smsEmail/sendSms',
    method: 'post',
    data
  })
}

 h5/api/staff.js

@@ -3,7 +3,135 @@
// login
export const loginPost = (data) => {
  return http({
    url: 'visitsAdmin/cloudService/web/member/accountLogin',
    url: '/loginH5',
    method: 'post',
    data
  })
}
export const loginCaptcha = () => {
  return http({
    url: '/captcha',
    method: 'get'
  })
}
export const getUserInfo = () => {
  return http({
    url: '/getUserInfo',
    method: 'get'
  })
}
// æŸ¥è¯¢äººå‘˜ç›¸å…³ä¿¡æ¯0劳务访客 1普通访客 2内部人员,示例值(1)
export const findTypeMemberInfo = (data) => {
  return http({
    url: 'visitsAdmin/cloudService/business/member/findTypeMemberInfo',
    method: 'post',
    data
  })
}
//  é‡ç½®å¯†ç 
export const resetPassword = (data) => {
  return http({
    url: 'visitsAdmin/cloudService/business/visits/resetPassword',
    method: 'post',
    data
  })
}
//  ä¿®æ”¹å¯†ç 
export const uploadPassword = (data) => {
  return http({
    url: 'visitsAdmin/cloudService/business/member/updatePwd',
    method: 'post',
    data
  })
}
// loginout
export const logoutPost = (data) => {
  return http({
    url: '/logout',
    method: 'post',
    data
  })
}

//  éšæ‚£éšæ‰‹æ‹ åˆ›å»º
export const DangerCreate = (data) => {
  return http({
    url: 'visitsAdmin/cloudService/business/hiddenDanger/create',
    method: 'post',
    data
  })
}
// éšæ‚£åŒºåŸŸ
export const DangerArea = (data) => {
  return http({
    url: 'visitsAdmin/cloudService/business/hiddenDanger/create',
    method: 'post',
    data
  })
}
// éšæ‚£ ç±»åž‹
export const DangerConfigType = (data) => {
  return http({
    url: 'visitsAdmin/cloudService/business/hiddenDangerParam/list',
    method: 'post',
    data
  })
}
// éšæ‚£ æŸ¥è¯¢åŒºåŸŸå†…安全员
export const findHiddenAreaMemberList = (data) => {
  return http({
    url: 'visitsAdmin/cloudService/business/hiddenDangerParam/findHiddenAreaMemberList',
    method: 'post',
    data
  })
}

// è½¦è¾† åˆ—表
export const getCarsList = (data) => {
  return http({
    url: 'visitsAdmin/cloudService/business/cars/list',
    method: 'post',
    data
  })
}
// æŸ¥è¯¢è½¦è¾†å¯é¢„约时段
export const carCanReservationDate = (data) => {
  return http({
    url: 'visitsAdmin/cloudService/business/carUseBook/carCanReservationDate',
    method: 'get',
    data
  })
}
// æŸ¥è¯¢è½¦è¾† é¢„约记录
export const carUseBookList = (data) => {
  return http({
    url: 'visitsAdmin/cloudService/business/carUseBook/carUseBookList',
    method: 'post',
    data
  })
}

// ç”¨è½¦ç”³è¯·æäº¤
export const carUseBookCraete = (data) => {
  return http({
    url: 'visitsAdmin/cloudService/business/carUseBook/create',
    method: 'post',
    data
  })
}

// ä»»åŠ¡ä¸­å¿ƒ
export const taskCenter = (data) => {
  return http({
    url: 'visitsAdmin/cloudService/web/member/taskCenter',
    method: 'post',
    data
  })
}
// æŸ¥è¯¢è½¦è¾† æ´¾è½¦è®°å½•
export const carUseBookPaiche = (data) => {
  return http({
    url: 'visitsAdmin/cloudService/business/carUseBook/page',
    method: 'post',
    data
  })

 h5/api/visitor.js

@@ -16,6 +16,14 @@
    data
  })
}
// è®¿å®¢æŠ¥å¤‡
export const createVisit = (data) => {
  return http({
    url: 'visitsAdmin/cloudService/business/visits/createVisit',
    method: 'post',
    data
  })
}
// æŸ¥è¯¢è¢«è®¿äººåˆ—表
export const getVisitedMember = (data) => {
  return http({

 h5/main.js

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

 h5/pages.json

@@ -2,14 +2,14 @@
    "easycom": {

        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"

    },

    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "访客中心",
                "enablePullDownRefresh": false
            }
        },
    "pages": [

        {

            "path": "pages/index/index",

            "style": {

                "navigationBarTitleText": "访客中心",

                "enablePullDownRefresh": false

            }

        },

        {

            "path": "pages/notice/notice",

            "style": {

@@ -256,7 +256,7 @@
            }



        }, {

            "path": "pages/staff/sendACar",

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

            "style": {

                "navigationBarTitleText": "派车记录",

                "enablePullDownRefresh": false

@@ -364,6 +364,33 @@
            }

            

        }

        ,{

            "path" : "pages/staffLogin/forgetPsd",

            "style" :                                                                                    
            {

                "navigationBarTitleText": "找回密码",

                "enablePullDownRefresh": false

            }

            
        }

        ,{

            "path" : "pages/staff/snapshotResult",

            "style" :                                                                                    
            {

                "navigationBarTitleText": "隐患随手拍",

                "enablePullDownRefresh": false

            }

            
        }

        ,{

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

            "style" :                                                                                    
            {

                "navigationBarTitleText": "选择人员",

                "enablePullDownRefresh": false

            }

            
        }

    ],

    "subPackages": [{

            "root": "n_pages",


 h5/pages/answer/answer.vue

@@ -29,7 +29,9 @@
                  (item.selAnswer &&
                    item.answer === item.selAnswer &&
                    item.selAnswer == line.code) ||
                  item.selAnswer == line.code
                  (item.selAnswer == line.code && status != '2') ||
                  (item.answer === item.selAnswer &&
                    item.selAnswer == line.code)
                "
              />
              <image
@@ -50,7 +52,9 @@
                  (item.selAnswer &&
                    item.answer === item.selAnswer &&
                    item.selAnswer == line.code) ||
                  item.selAnswer == line.code
                  (item.selAnswer == line.code && status != '2') ||
                  (item.answer === item.selAnswer &&
                    item.selAnswer == line.code)
                "
                style="color: rgba(2, 94, 239, 1)"
                ><text class="mr24" style="color: rgba(2, 94, 239, 1)">{{
@@ -61,6 +65,7 @@
              <text
                v-if="
                  item.selAnswer &&
                  item.selAnswer == line.code &&
                  item.answer !== item.selAnswer &&
                  status == '2'
                "
@@ -91,7 +96,7 @@
              "
            >
              <image src="@/static/meeting/icon/ic_choose_sel@2x.png" />
              <text>回答正确</text>
              <text class="success">回答正确</text>
            </view>
          </template>
          <template v-if="item.type == 2">
@@ -104,7 +109,12 @@
              <image src="@/static/checkbox@2x.png" v-if="!line.checked" />
              <image
                src="@/static/checkbo1x_sel@2x.png"
                v-if="line.checked || (item.selAnswer === item.answer && line.checked)"
                v-if="
                  (line.checked && status != '2') ||
                  (item.selAnswer === item.answer &&
                    line.checked &&
                    status != '2')
                "
              />
              <image
                src="@/static/checkbox_wrong@2x.png"
@@ -114,16 +124,16 @@
                  status == '2'
                "
              />
              <text v-if="!item.selAnswer || item.selAnswer !== line.code"
              <text v-if="!line.checked"
                ><text class="mr24">{{ line.code }}</text>
                {{ line.value }}</text
              >
              <text
                v-if="
                  (item.selAnswer &&
                    item.answer === item.selAnswer &&
                    item.selAnswer == line.code) ||
                  item.selAnswer == line.code
                  (line.checked && status != '2') ||
                  (item.selAnswer === item.answer &&
                    line.checked &&
                    status != '2')
                "
                style="color: rgba(2, 94, 239, 1)"
                ><text class="mr24" style="color: rgba(2, 94, 239, 1)">{{
@@ -133,8 +143,8 @@
              >
              <text
                v-if="
                  item.selAnswer &&
                  item.answer !== item.selAnswer &&
                  line.checked &&
                  item.selAnswer !== item.answer &&
                  status == '2'
                "
                style="color: rgba(237, 69, 69, 1)"
@@ -164,7 +174,7 @@
              "
            >
              <image src="@/static/meeting/icon/ic_choose_sel@2x.png" />
              <text>回答正确</text>
              <text class="success">回答正确</text>
            </view>
          </template>
        </view>
@@ -182,7 +192,7 @@
          v-if="status == '2'"
          style="background-color: #db534c"
          class="box_list_answer_btn"
          @click="status = '0'"
          @click="handleAgain"
          >答题失败，再来一次</view
        >
        <!--    å¤šé€‰    -->
@@ -293,7 +303,7 @@
      this.list.forEach((item, i) => {
        if (index === i) {
          item.options.forEach((item2, j) => {
            if(j === jeck){
            if (j === jeck) {
              item2.checked = !item2.checked
            }
          })
@@ -359,6 +369,10 @@
      } else {
        this.status = '1'
      }
    },
    handleAgain() {
      this.status = '0'
      this.getProblems()
    },
    next() {
      uni.navigateTo({
@@ -438,6 +452,9 @@
          color: #e42d2d;
          margin-left: 16rpx;
        }
        .success {
          color: #275de6;
        }
      }
    }
    .list_item {

 h5/pages/applicationRecord/applicationRecord.vue

@@ -99,7 +99,6 @@
    if (this.total > 10) {
      this.getList()
    }

  },
  methods: {
    handleDetail(id) {

 h5/pages/changePassword/changePassword.vue

@@ -7,7 +7,7 @@
                    <text>*</text>
                </view>
                <view class="list_item_content">
                    <input type="number" maxlength="11" placeholder="请输入旧密码" placeholder-style="color: #999999;" />
                    <input type="password" v-model="param.oldPwd" :maxlength="32" placeholder="请输入旧密码" placeholder-style="color: #999999;" />
                </view>
            </view>
            <view class="list_item">
@@ -16,7 +16,7 @@
                    <text>*</text>
                </view>
                <view class="list_item_content">
                    <input type="number" maxlength="11" placeholder="请输入6-18位数字、字母组合" placeholder-style="color: #999999;" />
                    <input type="password" v-model="param.newPwd" :maxlength="32" placeholder="请输入6-18位数字、字母组合" placeholder-style="color: #999999;" />
                </view>
            </view>
            <view class="list_item">
@@ -25,7 +25,7 @@
                    <text>*</text>
                </view>
                <view class="list_item_content">
                    <input type="number" maxlength="11" placeholder="请再输一次新密码" placeholder-style="color: #999999;" />
                    <input type="password" v-model="param.newPwdTemp" :maxlength="32" placeholder="请再输一次新密码" placeholder-style="color: #999999;" />
                </view>
            </view>
        </view>
@@ -34,17 +34,55 @@
            <text>如密码遗忘，请联系园区系统管理员重置</text>
        </view>
        <view class="footer-box">
            <view class="submit-button">提交</view>
            <view class="submit-button" @click="onSubmit">提交</view>
        </view>
    </view>
</template>

<script>
import { uploadPassword } from '@/api'
    export default {
        data() {
            return {
				
                param: {}
            };
        },
        methods: {
            onSubmit() {
      const { param } = this
      if (!param.oldPwd) return uni.showToast({
        title: '旧密码不能为空',
        icon: 'none'
      })
      if (!param.newPwd) return uni.showToast({
        title: '新密码不能为空',
        icon: 'none'
      })
      if (!param.newPwdTemp) return uni.showToast({
        title: '确认密码不能为空',
        icon: 'none'
      })
      if (param.newPwdTemp != param.newPwd) return uni.showToast({
        title: '两次输入密码不一致',
        icon: 'none'
      })
      uploadPassword({
        ...param
      }).then(res => {
        if (res && res.code == 200) {
          setTimeout(() => {
            uni.showToast({
              title: '密码修改成功,请重新登录',
              icon: 'success',
              duration: 2000
            })
          })
          uni.redirectTo({
            url: "/pages/staffLogin/login"
          })
        }
      })
    }
        }
    }
</script>

 h5/pages/staff/index.vue

@@ -1,7 +1,7 @@
<template>
    <view class="main_app">
        <view class="title_wrap">
            <view class="name">某某某，欢迎登录～</view>
            <view class="name">{{ userInfo.realname || '' }}，欢迎登录～</view>
            <view class="btn" @click="loginOut">退出登录</view>
        </view>
        <view class="banner_wrap">
@@ -55,7 +55,7 @@
                <view class="h1">我的会议日历</view>
                <view class="h2">MY MEETING CALENDAR</view>
            </view>
            <view class="img_wrap" @click="jump('/pages/staff/sendACar')">
            <view class="img_wrap" @click="jump('/pages/staff/vehicle/sendACar')">
                <image class="img" src="@/static/staff/ic_paichejilu.png"></image>
                <view class="h1">派车记录</view>
                <view class="h2">VEHICLE DISPATCH</view>
@@ -74,9 +74,15 @@
</template>

<script>
import { logoutPost } from '@/api'
export default {
    data() {
        return {};
        return {
            userInfo: uni.getStorageSync('userInfo')
        };
    },
    onLoad(){
        console.log('userInfo', this.userInfo);
    },
    methods: {
        jump(path){
@@ -85,7 +91,8 @@
            });
        },
        loginOut() {
            uni.clearStorageSync()
            this.$store.commit('empty')
            logoutPost()
            uni.redirectTo({
                url: '/pages/staffLogin/login'
            })

 h5/pages/staff/memberSel copy.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,232 @@
<template>
    <view class="main_app">
        <view class="search_inp df_ac">
            <image class="mr12 search" src="../../static/ic_search@2x.png" mode="widthFix"></image>
            <input v-model="param.name" @blur="initData()" type="text" placeholder="搜索" placeholder-style="color: #999999;" />
        </view>
        <view class="member_list">
            <view v-for="item in memberList" :key="item.id" class="line">
                <image :src="item.faceImgFull ? item.faceImgFull : require('@/static/logo@2x.png')" class="avatar" mode=""></image>
                <view class="content">
                    <view class="info">
                        <text class="name">{{ item.name }}</text>
                        <!-- <text class="tag">tag</text> -->
                    </view>
                    <view class="depart">{{ item.companyName }}</view>
                </view>
                <checkbox class="checkbox" />
                <text></text>
            </view>
            <view class="empty"></view>
        </view>
        <!--  -->
        <view class="sub_wrap">
            <view class="sel_mem">
                <text>已选择：</text>
                <view class="members">
                    <text v-for="(item, i) in 100" :key="i">{{ item }}</text>
                </view>
                <image @click="isShowSelMem = true" class="open_icon" src="../../static/staff/renyuan_ic_open.png" mode=""></image>
            </view>
            <view class="btn" @click="onSubmit">确认(00/20)</view>
        </view>
        <!--  -->
        <u-popup :show="isShowSelMem" :round="12" mode="bottom" @close="isShowSelMem = false">
            <view class="modal">
                <view class="modal_header">
                    <text class="status">已选择：xx人</text>
                    <text class="btn" @click="isShowSelMem = false">确认</text>
                </view>
                <view class="modal_mem_list">
                    <view class="line">
                        <image src="../../static/logo@2x.png" class="avatar" mode=""></image>
                        <view class="content">
                            <view class="info">
                                <text class="name">name</text>
                            </view>
                            <view class="depart">xx科室</view>
                        </view>
                        <view class="btn">移除</view>
                    </view>
                </view>
            </view>
        </u-popup>
		
    </view>
</template>

<script>
import { findHiddenAreaMemberList } from '@/api'
export default {
    data() {
        return {
            memberList: [],
            selList: [],
            param: {},

            isShowSelMem: false
        }
    },
    onLoad() {
        this.initData()
    },
    methods: {
        onSubmit() {
            uni.navigateBack()
        },
        initData() {
            const { param } = this
            findHiddenAreaMemberList({
                name: param.name
            }).then(res => {
        this.memberList = res.data || []
      })
        }
    }
};
</script>

<style lang="scss">
.modal {
    padding: 40rpx 30rpx;
    .modal_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .status {
            font-weight: 600;
        }
        .btn {
            color: #279baa;
        }
    }
    .modal_mem_list {
        .line {
            display: flex;
            align-items: center;
            border-bottom: 1rpx solid #e5e5e5;
            padding: 30rpx 0;
            .avatar {
                width: 64rpx;
                height: 64rpx;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 20rpx;
            }
            .content {
                flex: 1;
                .depart {
                    font-size: 24rpx;
                    color: #666666;
                }
                .info {
                    display: flex;
                    margin-bottom: 16rpx;
                    .name {
                        font-size: 30rpx;
                    }
                }
            }
            .btn{
                width: 80rpx;
                height: 48rpx;
                line-height: 48rpx;
                text-align: center;
                font-size: 24rpx;
                color: #333333;
                border-radius: 4rpx;
                border: 1rpx solid #999999;
            }
        }
    }
}
.sub_wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-shadow: 0rpx 0rpx 6rpx 0rpx #b2b2b2;
    padding: 30rpx 30rpx 64rpx;
    .sel_mem {
        display: flex;
        align-items: center;
        .members {
            width: 500rpx;
            color: #4d98a7;
            white-space: nowrap;
            overflow: hidden; //文本超出隐藏
            text-overflow: ellipsis;
            margin-right: 20rpx;
        }
        .open_icon {
            width: 44rpx;
            height: 44rpx;
        }
    }
    .btn {
        width: 690rpx;
        height: 88rpx;
        line-height: 88rpx;
        background: #279baa;
        border-radius: 44rpx;
        color: #fff;
        text-align: center;
        margin-top: 22rpx;
    }
}
.member_list {
    .line {
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #e5e5e5;
        padding: 30rpx 0;
        .avatar {
            width: 64rpx;
            height: 64rpx;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 20rpx;
        }
        .content {
            flex: 1;
            .depart {
                font-size: 24rpx;
                color: #666666;
            }
            .info {
                display: flex;
                margin-bottom: 16rpx;
                .name {
                    font-size: 30rpx;
                }
                .tag {
                    font-size: 24rpx;
                    border-radius: 4rpx;
                    border: 1rpx solid #f62710;
                    color: #f62710;
                    padding: 0rpx 6rpx;
                    margin-left: 8rpx;
                }
            }
        }
    }
    .empty {
        width: 100%;
        height: 280rpx;
    }
}
.search_inp {
    height: 72rpx;
    background: #f7f7f7;
    border-radius: 4rpx;
    padding-left: 16rpx;
    .search{
        width: 28rpx;
    }
    input {
        flex: 1;
        font-size: 28rpx;
        color: #333333;
    }
}
</style>

 h5/pages/staff/memberSel.vue

@@ -1,219 +1,279 @@
<template>
    <view class="main_app">
        <view class="search_inp df_ac">
            <image class="mr12 search" src="../../static/ic_search@2x.png" mode="widthFix"></image>
            <input type="text" placeholder="搜索" placeholder-style="color: #999999;" />
        </view>
        <view class="member_list">
            <view class="line">
                <image src="../../static/logo@2x.png" class="avatar" mode=""></image>
                <view class="content">
                    <view class="info">
                        <text class="name">name</text>
                        <text class="tag">tag</text>
                    </view>
                    <view class="depart">xx科室</view>
                </view>
                <checkbox class="checkbox" />
                <text></text>
            </view>
            <view class="empty"></view>
        </view>
        <!--  -->
        <view class="sub_wrap">
            <view class="sel_mem">
                <text>已选择：</text>
                <view class="members">
                    <text v-for="(item, i) in 100" :key="i">{{ item }}</text>
                </view>
                <image @click="isShowSelMem = true" class="open_icon" src="../../static/staff/renyuan_ic_open.png" mode=""></image>
            </view>
            <view class="btn" @click="onSubmit">确认(00/20)</view>
        </view>
        <!--  -->
        <u-popup :show="isShowSelMem" :round="12" mode="bottom" @close="isShowSelMem = false">
            <view class="modal">
                <view class="modal_header">
                    <text class="status">已选择：xx人</text>
                    <text class="btn" @click="isShowSelMem = false">确认</text>
                </view>
                <view class="modal_mem_list">
                    <view class="line">
                        <image src="../../static/logo@2x.png" class="avatar" mode=""></image>
                        <view class="content">
                            <view class="info">
                                <text class="name">name</text>
                            </view>
                            <view class="depart">xx科室</view>
                        </view>
                        <view class="btn">移除</view>
                    </view>
                </view>
            </view>
        </u-popup>
		
    </view>
  <view class="main_app">
    <view class="search_inp df_ac">
      <image
        class="mr12 search"
        src="../../static/ic_search@2x.png"
        mode="widthFix"
      ></image>
      <input
        v-model="param.name"
        @blur="initData()"
        type="text"
        placeholder="搜索"
        placeholder-style="color: #999999;"
      />
    </view>
    <view class="member_list">
      <checkbox-group @change="changeMem">
        <view v-for="item in memberList" :key="item.id" class="line">
          <image
            :src="
              item.faceImgFull
                ? item.faceImgFull
                : require('@/static/logo@2x.png')
            "
            class="avatar"
            mode=""
          ></image>
          <view class="content">
            <view class="info">
              <text class="name">{{ item.name }}</text>
              <!-- <text class="tag">tag</text> -->
            </view>
            <view class="depart">{{ item.companyName }}</view>
          </view>
          <label>
            <checkbox
              :value="String(item.id)"
              class="checkbox"
            />
          </label>
          <text></text>
        </view>
      </checkbox-group>
      <view class="empty"></view>
    </view>
    <!--  -->
    <!-- <view class="sub_wrap">
      <view class="sel_mem">
        <text>已选择：</text>
        <view class="members">
          <text v-for="(item, i) in 100" :key="i">{{ item }}</text>
        </view>
        <image
          @click="isShowSelMem = true"
          class="open_icon"
          src="../../static/staff/renyuan_ic_open.png"
          mode=""
        ></image>
      </view>
      <view class="btn" @click="onSubmit">确认(00/20)</view>
    </view> -->
    <!--  -->
    <u-popup
      :show="isShowSelMem"
      :round="12"
      mode="bottom"
      @close="isShowSelMem = false"
    >
      <view class="modal">
        <view class="modal_header">
          <text class="status">已选择：xx人</text>
          <text class="btn" @click="isShowSelMem = false">确认</text>
        </view>
        <view class="modal_mem_list">
          <view class="line">
            <image
              src="../../static/logo@2x.png"
              class="avatar"
              mode=""
            ></image>
            <view class="content">
              <view class="info">
                <text class="name">name</text>
              </view>
              <view class="depart">xx科室</view>
            </view>
            <view class="btn">移除</view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { findHiddenAreaMemberList } from '@/api'
export default {
    data() {
        return {
            memberList: [],
            selList: [],
  data() {
    return {
      memberList: [],
      selList: [],
      param: {},

            isShowSelMem: false
        }
    },
    methods: {
        onSubmit() {
            uni.navigateBack()
        }
    }
      isShowSelMem: false
    }
  },
  onLoad() {
    this.initData()
  },
  methods: {
    onSubmit() {
      uni.navigateBack()
    },
    changeMem(e) {
            console.log( e.detail.value[0]);
            const id = Number(e.detail.value[0])
            const item = this.memberList.find(i => i.id === id)
            console.log('item', item);
            uni.navigateTo({
                url: `/pages/staff/snapshot?id=${item.id}&name=${item.name}`
            })
    },
    initData() {
      const { param } = this
      findHiddenAreaMemberList({
        name: param.name
      }).then(res => {
        this.memberList = res.data || []
      })
    }
  }
};
</script>

<style lang="scss">
.modal {
    padding: 40rpx 30rpx;
    .modal_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .status {
            font-weight: 600;
        }
        .btn {
            color: #279baa;
        }
    }
    .modal_mem_list {
        .line {
            display: flex;
            align-items: center;
            border-bottom: 1rpx solid #e5e5e5;
            padding: 30rpx 0;
            .avatar {
                width: 64rpx;
                height: 64rpx;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 20rpx;
            }
            .content {
                flex: 1;
                .depart {
                    font-size: 24rpx;
                    color: #666666;
                }
                .info {
                    display: flex;
                    margin-bottom: 16rpx;
                    .name {
                        font-size: 30rpx;
                    }
                }
            }
            .btn{
                width: 80rpx;
                height: 48rpx;
                line-height: 48rpx;
                text-align: center;
                font-size: 24rpx;
                color: #333333;
                border-radius: 4rpx;
                border: 1rpx solid #999999;
            }
        }
    }
  padding: 40rpx 30rpx;
  .modal_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .status {
      font-weight: 600;
    }
    .btn {
      color: #279baa;
    }
  }
  .modal_mem_list {
    .line {
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #e5e5e5;
      padding: 30rpx 0;
      .avatar {
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20rpx;
      }
      .content {
        flex: 1;
        .depart {
          font-size: 24rpx;
          color: #666666;
        }
        .info {
          display: flex;
          margin-bottom: 16rpx;
          .name {
            font-size: 30rpx;
          }
        }
      }
      .btn {
        width: 80rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        font-size: 24rpx;
        color: #333333;
        border-radius: 4rpx;
        border: 1rpx solid #999999;
      }
    }
  }
}
.sub_wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    box-shadow: 0rpx 0rpx 6rpx 0rpx #b2b2b2;
    padding: 30rpx 30rpx 64rpx;
    .sel_mem {
        display: flex;
        align-items: center;
        .members {
            width: 500rpx;
            color: #4d98a7;
            white-space: nowrap;
            overflow: hidden; //文本超出隐藏
            text-overflow: ellipsis;
            margin-right: 20rpx;
        }
        .open_icon {
            width: 44rpx;
            height: 44rpx;
        }
    }
    .btn {
        width: 690rpx;
        height: 88rpx;
        line-height: 88rpx;
        background: #279baa;
        border-radius: 44rpx;
        color: #fff;
        text-align: center;
        margin-top: 22rpx;
    }
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-shadow: 0rpx 0rpx 6rpx 0rpx #b2b2b2;
  padding: 30rpx 30rpx 64rpx;
  .sel_mem {
    display: flex;
    align-items: center;
    .members {
      width: 500rpx;
      color: #4d98a7;
      white-space: nowrap;
      overflow: hidden; //文本超出隐藏
      text-overflow: ellipsis;
      margin-right: 20rpx;
    }
    .open_icon {
      width: 44rpx;
      height: 44rpx;
    }
  }
  .btn {
    width: 690rpx;
    height: 88rpx;
    line-height: 88rpx;
    background: #279baa;
    border-radius: 44rpx;
    color: #fff;
    text-align: center;
    margin-top: 22rpx;
  }
}
.member_list {
    .line {
        display: flex;
        align-items: center;
        border-bottom: 1rpx solid #e5e5e5;
        padding: 30rpx 0;
        .avatar {
            width: 64rpx;
            height: 64rpx;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 20rpx;
        }
        .content {
            flex: 1;
            .depart {
                font-size: 24rpx;
                color: #666666;
            }
            .info {
                display: flex;
                margin-bottom: 16rpx;
                .name {
                    font-size: 30rpx;
                }
                .tag {
                    font-size: 24rpx;
                    border-radius: 4rpx;
                    border: 1rpx solid #f62710;
                    color: #f62710;
                    padding: 0rpx 6rpx;
                    margin-left: 8rpx;
                }
            }
        }
    }
    .empty {
        width: 100%;
        height: 280rpx;
    }
  .line {
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #e5e5e5;
    padding: 30rpx 0;
    .avatar {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20rpx;
    }
    .content {
      flex: 1;
      .depart {
        font-size: 24rpx;
        color: #666666;
      }
      .info {
        display: flex;
        margin-bottom: 16rpx;
        .name {
          font-size: 30rpx;
        }
        .tag {
          font-size: 24rpx;
          border-radius: 4rpx;
          border: 1rpx solid #f62710;
          color: #f62710;
          padding: 0rpx 6rpx;
          margin-left: 8rpx;
        }
      }
    }
  }
  .empty {
    width: 100%;
    height: 280rpx;
  }
}
.search_inp {
    height: 72rpx;
    background: #f7f7f7;
    border-radius: 4rpx;
    padding-left: 16rpx;
    .search{
        width: 28rpx;
    }
    input {
        flex: 1;
        font-size: 28rpx;
        color: #333333;
    }
  height: 72rpx;
  background: #f7f7f7;
  border-radius: 4rpx;
  padding-left: 16rpx;
  .search {
    width: 28rpx;
  }
  input {
    flex: 1;
    font-size: 28rpx;
    color: #333333;
  }
}
</style>

 h5/pages/staff/sendACar.vue

ÎļþÒÑɾ³ý

 h5/pages/staff/snapshot.vue

@@ -1,198 +1,427 @@
<template>
    <view class="main_app">
        <view class="main_wrap">
            <!--  -->
            <view class="line">
                <view class="label">
                    <text>*</text>
                    <text>隐患区域</text>
                </view>
                <view class="value" @click="isShowArea = 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="selMember">
                    <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 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="upload_line">
                <view class="name">现场情况</view>
                <view class="adduser_list_item_ipt1_upload" @click="upload('imgurl')" v-if="!param.imgurlUrl"><u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon></view>
                <view class="adduser_list_item_ipt1_upload" @click="upload('imgurl')" v-else><image :src="param.imgurlUrl" mode="widthFix"></image></view>
            </view>
  <view class="main_app">
    <view class="main_wrap">
      <!--  -->
      <view class="line">
        <view class="label">
          <text>*</text>
          <text>隐患区域</text>
        </view>
        <view class="value" @click="isShowArea = true">
          <text
            class="mr6"
            :style="{ color: param.areaName ? '#000000' : '#999999' }"
            >{{ param.areaName ? param.areaName : "请选择" }}</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="selMember">
          <text
            class="mr6"
            :style="{ color: param.checkorName ? '#000000' : '#999999' }"
            >{{ param.checkorName ? param.checkorName : "请选择" }}</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" @click="isShowType = true">
          <text
            class="mr6"
            :style="{ color: param.categoryName ? '#000000' : '#999999' }"
            >{{ param.categoryName ? param.categoryName : "请选择" }}</text
          >
          <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
        </view>
      </view>
      <view class="upload_line">
        <view class="name">现场情况</view>
        <view class="wrap">
          <view class="adduser_list_item_ipt1_upload" @click="showUpload = true"
            ><u-icon name="plus" color="rgb(153, 153, 153)" size="28"></u-icon
          ></view>
          <view
            class="adduser_list_item_ipt1_upload"
            v-for="(item, i) in submitFileList"
            :key="i"
            ><image :src="item.fileurlFull" mode="widthFix"></image
          ></view>
        </view>
      </view>
      <view class="empty"></view>
       <view class="upload_line" style="padding: 15px 0 0;">
        <view class="name" style="margin-bottom: 10rpx;">
          <text style="color: #e42d2d;">*</text>
          <text>情况说明</text>
        </view>
        <view class="value"
          ><textarea
            placeholder="请详细描述现场情况，不少于10个字"
            minlength="10"
            v-model="param.content"
            placeholder-style="color: #999999;"
        /></view>
      </view>
      <view class="empty"></view>
      <view class="line">
        <view class="label">
          <text></text>
          <text>提报人</text>
        </view>
        <view class="value"
          ><input
            type="text"
            disabled
            placeholder="请输入提报人"
            v-model="param.memberName"
            placeholder-style="color: #999999;"
        /></view>
      </view>
      <view class="line">
        <view class="label">
          <text></text>
          <text>联系电话</text>
        </view>
        <view class="value"
          ><input
            type="text"
            disabled
            placeholder="请输入联系电话"
            v-model="param.memberPhone"
            placeholder-style="color: #999999;"
        /></view>
      </view>
      <view class="line">
        <view class="label">
          <text></text>
          <text>提报时间</text>
        </view>
        <view class="value" @click="isShowTime = true">
          <text
            class="mr6"
            :style="{ color: param.submitTime ? '#000000' : '#999999' }"
            >{{ param.submitTime ? param.submitTime : "请选择" }}</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" @blur="getUser" placeholder-style="color: #999999;" /></view>
            </view>
            <view class="line">
                <view class="label">
                    <text></text>
                    <text>联系电话</text>
                </view>
                <view class="value"><input type="text" placeholder="请输入联系电话" v-model="param.receptMemberName" @blur="getUser" placeholder-style="color: #999999;" /></view>
            </view>
            <view class="line">
                <view class="label">
                    <text></text>
                    <text>提报时间</text>
                </view>
                <view class="value">
                    <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>
        <!--  -->
        <!-- åŒºåŸŸ -->
        <u-picker keyName="name" :show="isShowArea" :columns="areaOptions" @confirm="seletedArea" @cancel="isShowArea = false"></u-picker>
    </view>
      <view class="footer"
        ><view class="footer_btn" @click="onSubmit">提交</view></view
      >
    </view>
    <!--  -->
    <!-- åŒºåŸŸ -->
    <u-picker
      keyName="name"
      :show="isShowArea"
      closeOnClickOverlay
      :columns="areaOptions"
      @confirm="seletedArea"
      @close="isShowArea = false"
      @cancel="isShowArea = false"
    ></u-picker>
    <u-picker
      keyName="name"
      :show="isShowType"
      closeOnClickOverlay
      :columns="areaType"
      @confirm="seletedType"
      @close="isShowType = false"
      @cancel="isShowType = false"
    ></u-picker>
    <!--  -->
    <u-datetime-picker
      :show="isShowTime"
      :minDate="new Date().getTime()"
      mode="datetime"
      closeOnClickOverlay
      @cancel="isShowTime = false"
      @close="isShowTime = false"
      @confirm="seletedDate"
    ></u-datetime-picker>
    <!--  -->
    <u-popup :show="showUpload" @close="showUpload = false" closeOnClickOverlay>
      <view class="upload_wrap">
        <view class="btn" @click="uploadImage">选择图片</view>
        <view class="btn" @click="uploadVideo">选择视频</view>
      </view>
    </u-popup>
  </view>
</template>

<script>
    import { uploadUrl } from '@/api'
import {
  uploadUrl,
  DangerCreate,
  DangerConfigType
} from '@/api'
import dayjs from 'dayjs'
export default {
    data() {
        return {
            param: {},
            isShowArea: false,
            areaOptions: [[{ name: '111', id: 11 }, { name: '111', id: 11 }]]
        };
    },
    methods: {
        seletedArea(e) {
            const item = e.value[0];
            console.log(item);
            this.isShowArea = false;
        },
        selMember() {
            uni.navigateTo({
                url: '/pages/staff/memberSel'
            });
        },
        upload() {
            uni.chooseImage({
                success: (chooseImageRes) => {
                    uni.showLoading({ title: '上传中', mask: true });
                    for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
                        uni.uploadFile({
                            url: `${uploadUrl}visitsAdmin/cloudService/web/public/uploadFtp.do`,
                            filePath: chooseImageRes.tempFilePaths[i],
                            name: 'file',
                            formData: {
                                folderCode: 'MEMBER_IMG'
                            },
                            success: (uploadFileRes) => {
                                console.log('uploadFileRes', uploadFileRes);
                                let res = JSON.parse(uploadFileRes.data)
                                if (type === 'faceImg') {
                                    this.param.faceImg = res.data.halfPath
                                    this.param.faceImgUrl = res.data.prefixPath + res.data.folder + res.data.halfPath
                                } else {
                                    this.param.imgurl = res.data.halfPath
                                    this.param.imgurlUrl = res.data.prefixPath + res.data.folder + res.data.halfPath
                                }
                            },
                            complete() {
                                if (i === chooseImageRes.tempFilePaths.length - 1) {
                                    uni.hideLoading();
                                }
                            }
                        });
                    }
                }
            });
        },
        getUser() {}
    }
  data() {
    return {
      param: {},
      submitFileList: [],

      isShowArea: false,
      isShowType: false,
      isShowTime: false,
      showUpload: false,

      areaOptions: [],
      areaType: [],
    }
  },
  onLoad(option) {
    if (option && option.id) {
      this.$set(this.param, 'checkUserId', option.id)
      this.$set(this.param, 'applyCheckUserId', option.id)
      this.$set(this.param, 'checkorName', option.name)
    }
    this.initConfig()
    const userInfo = uni.getStorageSync('userInfo') || {}
    this.$set(this.param, 'memberName', userInfo.realname)
    this.$set(this.param, 'memberPhone', userInfo.mobile)
    this.$set(this.param, 'memberId', userInfo.id)
    this.$set(this.param, 'submitTime', dayjs().format('YYYY-MM-DD HH:mm:ss'))
  },
  methods: {
    onSubmit() {
      const { param, submitFileList } = this
      if (!param.areaName) return uni.showToast({
        title: '请选择隐患区域',
        icon: 'none'
      })
      if (!param.applyCheckUserId) return uni.showToast({
        title: '请选择接受人',
        icon: 'none'
      })
      if (!param.categoryName) return uni.showToast({
        title: '请选择隐患类型',
        icon: 'none'
      })

      DangerCreate({
        ...param,
        submitFileList
      }).then(res => {
        if (res.code === 200) {
          this.$jump('/pages/staff/snapshotResult')
        }
      })
    },
    seletedArea(e) {
      const item = e.value[0]
      this.$set(this.param, 'areaId', item.id)
      this.$set(this.param, 'areaName', item.name)
      console.log(item)
      this.isShowArea = false
    },
    seletedType(e) {
      const item = e.value[0]
      this.$set(this.param, 'cateId', item.id)
      this.$set(this.param, 'categoryName', item.name)
      console.log(item)
      this.isShowType = false
    },
    seletedSafety(e) {

    },
    seletedDate(e) {
      this.$set(this.param, 'submitTime', dayjs(e.value).format('YYYY-MM-DD HH:mm:ss'))
      this.isShowTime = false
    },
    initConfig() {
      DangerConfigType({ type: '1' }).then(res => {
        this.areaType = [res.data]
      })
      DangerConfigType({ type: '0' }).then(res => {
        this.areaOptions = [res.data]
      })
    },
    selMember() {
      uni.navigateTo({
        url: '/pages/staff/memberSel'
      })
    },
    uploadImage() {
      this.showUpload = false
      uni.chooseImage({
        count: 6,
        success: (chooseImageRes) => {
          console.log('chooseImageRes.tempFilePaths', chooseImageRes.tempFilePaths)
          uni.showLoading({ title: '上传中', mask: true })
          for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
            uni.uploadFile({
              url: `${uploadUrl}`,
              filePath: chooseImageRes.tempFilePaths[i],
              name: 'file',
              formData: {
                folderCode: 'HIDDEN_DANGER_FILE'
              },
              success: (uploadFileRes) => {
                let res = JSON.parse(uploadFileRes.data)
                console.log('res', res)
                let obj = {
                  type: '0'
                }
                obj.fileurl = res.data.halfPath
                obj.fileurlFull = res.data.addr
                this.submitFileList.push(obj)
              },
              complete() {
                if (i === chooseImageRes.tempFilePaths.length - 1) {
                  uni.hideLoading()
                }
              }
            })
          }
        }
      })
    },
    uploadVideo() {
      this.showUpload = false
      let that = this
      uni.chooseVideo({
        success: (chooseImageRes) => {
          uni.showLoading({ title: '上传中', mask: true })
          for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
            uni.uploadFile({
              url: `${uploadUrl}`,
              filePath: chooseImageRes.tempFilePaths[i],
              name: 'file',
              formData: {
                folderCode: 'HIDDEN_DANGER_FILE'
              },
              success: (uploadFileRes) => {
                let res = JSON.parse(uploadFileRes.data)
                console.log('uploadFileRes', res)
                let obj = { type: '1' }
                obj.fileurl = res.data.halfPath
                obj.fileurlFull = res.data.addr
                that.submitFileList.push(obj)
                console.log(that.submitFileList)
              },
              complete() {
                if (i === chooseImageRes.tempFilePaths.length - 1) {
                  uni.hideLoading()
                }
              }
            })
          }
        }
      })
    },

    getUser() { }
  }
};
</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;
        .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%;
            }
        }
    }
  .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;
    .wrap{
      display: flex;
      flex-wrap: wrap;
    }
    .adduser_list_item_ipt1_upload {
      margin-top: 24rpx;
      width: 120rpx;
      height: 120rpx;
      margin-right: 24rpx;
      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_app {
    // padding-top: 10rpx;
.upload_wrap {
  width: 100%;
  .btn {
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
  }
}
.footer {
  width: 100%;
  padding: 0 30rpx;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
  position: fixed;
  left: 0;
  bottom: 68rpx;

  .footer_btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background: #4e99a9;
    border-radius: 44rpx;
    font-size: 32rpx;
    color: #ffffff;
  }
}
.empty {
    width: 750rpx;
    height: 20rpx;
    background-color: #f7f7f7;
    margin: 0 -30rpx;
  width: 750rpx;
  height: 20rpx;
  background-color: #f7f7f7;
  margin: 0 -30rpx;
}
</style>

 h5/pages/staff/snapshotResult.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,65 @@
<template>
    <view class="main_app">
        <view class="ima_wrap">
            <image src="@/static/driver/btn_qiandao@2x.png" mode="widthFix"></image>
            <u-icon class="txt" color="#fff" size="72" name="checkbox-mark"></u-icon>
        </view>
        <view class="h1">提交成功</view>
        <view class="placeholder9">感谢你的反馈，我们将尽快核实处理</view>
        <view class="btn"  @click="$jump('/pages/staff/index')">返回首页</view>
    </view>
</template>

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

<style lang="scss">
.main_app{
    text-align: center;
    .btn{
        margin-top: 60rpx;
        padding-bottom: env(safe-area-inset-bottom);
        box-sizing: border-box;
        width: 300rpx;
        margin: 60rpx auto;
          height: 88rpx;
          line-height: 88rpx;
          text-align: center;
          background: #fff;
          border-radius: 44rpx;
          font-size: 32rpx;
            border: 1rpx solid #4e99a9;
            border-radius: 50rpx;
          color: #4e99a9;
    }
    .h1{
        font-size: 44rpx;
        font-weight: 600;
        margin-bottom: 30rpx;
    }
    .ima_wrap{
        width: 300rpx;
        height: 300rpx;
        margin: 300rpx auto 40rpx;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        image{
            width: 100%;
            position: absolute;
        }
        .txt{
            font-size: 50rpx;
            color: #fff;
        }
    }
}
</style>

 h5/pages/staff/task/index.vue

@@ -1,432 +1,474 @@
<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" @click="handleAppr()">去处理</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>
  <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 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" @click="handleAppr()">去处理</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: {
            handleAppr(item) {
                uni.navigateTo({
                    url: '/pages/staff/task/visitorApprove'
                })
            },
            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
            }
        }
    }
import { taskCenter } from '@/api'
export default {
  data() {
    return {
      show: false,
      tiemShow: false,
      tiemShow1: false,
      time: '',
      i: null,
      time: '',
      time1: '',
      search: {
        startTime: '',
        endTime: ''
      },
      pagination: {},
      dataList: [],
      cate: [
        { name: '访客申请', id: 1 },
        { name: '劳务申请', id: 2 },
        { name: '用车申请', id: 3 }
      ]
    }
  },
  onLoad() {
    this.getList()
  },
  methods: {
    getList() {
      const { pagination } = this
      taskCenter({
        model: {}
      }).then(res => {
        this.dataList = res.data.records
      })
    },
    handleAppr(item) {
      uni.navigateTo({
        url: '/pages/staff/task/visitorApprove'
      })
    },
    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;
    }
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;
                    }
                }
            }
        }
    }
.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;
      justify-content: space-between;
      align-items: center;
      .active {
        border: 1rpx solid #4c99a8 !important;
        color: #4c99a8 !important;
      }
      .box_head_item {
        text-align: center;
        flex: 1;
        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: 10rpx;
        &:nth-last-child(1) {
          margin-right: 0;
        }
      }
    }
  }
  .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/vehicle/applePeo.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,305 @@
<template>
  <view class="main_app">
    <view class="search_inp df_ac">
      <image
        class="mr12 search"
        src="@/static/ic_search@2x.png"
        mode="widthFix"
      ></image>
      <input
        v-model="param.name"
        @blur="initData()"
        type="text"
        placeholder="搜索"
        placeholder-style="color: #999999;"
      />
    </view>
    <view class="member_list">
      <checkbox-group v-model="selList" @change="changeMem">
        <view v-for="item in memberList" :key="item.id" class="line">
          <image
            :src="
              item.faceImgFull
                ? item.faceImgFull
                : require('@/static/logo@2x.png')
            "
            class="avatar"
            mode=""
          ></image>
          <view class="content">
            <view class="info">
              <text class="name">{{ item.name }}</text>
              <!-- <text class="tag">tag</text> -->
            </view>
            <view class="depart">{{ item.companyName }}</view>
          </view>
          <label>
            <checkbox :checked="item.checked" :value="String(item.id)" class="checkbox" />
          </label>
          <text></text>
        </view>
      </checkbox-group>
      <view class="empty"></view>
    </view>
    <!--  -->
    <view class="sub_wrap">
      <view class="sel_mem">
        <text>已选择：</text>
        <view class="members">
          <text v-for="(item, i) in selList" :key="i">{{ item.name }}；</text>
        </view>
        <image
          @click="isShowSelMem = true"
          class="open_icon"
          src="@/static/staff/renyuan_ic_open.png"
          mode=""
        ></image>
      </view>
      <view class="btn" @click="onSubmit">确认({{selList.length}}/20)</view>
    </view>
    <!--  -->
    <u-popup
      :show="isShowSelMem"
      :round="12"
      mode="bottom"
      @close="isShowSelMem = false"
    >
      <view class="modal">
        <view class="modal_header">
          <text class="status">已选择：{{ selList.length }}人</text>
          <text class="btn" @click="isShowSelMem = false">确认</text>
        </view>
        <view class="modal_mem_list">
          <view class="line" v-for="(item, i) in selList" :key="i">
            <image
              :src="
                item.faceImgFull
                  ? item.faceImgFull
                  : require('@/static/logo@2x.png')
              "
              class="avatar"
              mode=""
            ></image>
            <view class="content">
              <view class="info">
                <text class="name">{{ item.name }}</text>
              </view>
              <view class="depart">{{ item.componey }}</view>
            </view>
            <view class="btn" @click="handleRemove(item)">移除</view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { findTypeMemberInfo } from '@/api'
export default {
  data() {
    return {
      memberList: [],
      selList: [],
      param: {},

      isShowSelMem: false
    }
  },
  onLoad() {
    this.initData()
  },
  methods: {
    onSubmit() {
      this.$eventBus.$emit('applePeo', this.selList)
      uni.navigateBack()
    },
    changeMem(e) {
      const arr = e.detail.value
      let arrTemp = arr.map(item => {
        let obj = {}
        this.memberList.forEach(ite => {
          if (item == ite.id) {
            obj.name = ite.name.split('-')[0]
            obj.componey = ite.name.split('-')[1] || ''
            obj.id = ite.id
          }
        })
        return obj
      })
      this.selList = arrTemp
      // this.$forceUpdate()
    },
    handleRemove(item) {
      const selIndex = this.selList.findIndex(i => i.id === item.id)
      this.selList.splice(selIndex, 1)
      this.memberList.forEach(ite => {
        if(item.id === ite.id){
          ite.checked = false
        }
      })
      // console.log(this.memberList);
      this.$forceUpdate()
    },
    initData() {
      const { param } = this
      findTypeMemberInfo({
        name: param.name,
        type: '2'
      }).then(res => {
        this.memberList = res.data || []
        this.memberList.forEach(i => {
          i.checked = false
        })
      })
    }
  }
};
</script>

<style lang="scss">
.modal {
  padding: 40rpx 30rpx;
  .modal_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .status {
      font-weight: 600;
    }
    .btn {
      color: #279baa;
    }
  }
  .modal_mem_list {
    .line {
      display: flex;
      align-items: center;
      border-bottom: 1rpx solid #e5e5e5;
      padding: 30rpx 0;
      .avatar {
        width: 64rpx;
        height: 64rpx;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20rpx;
      }
      .content {
        flex: 1;
        .depart {
          font-size: 24rpx;
          color: #666666;
        }
        .info {
          display: flex;
          margin-bottom: 16rpx;
          .name {
            font-size: 30rpx;
          }
        }
      }
      .btn {
        width: 80rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        font-size: 24rpx;
        color: #333333;
        border-radius: 4rpx;
        border: 1rpx solid #999999;
      }
    }
  }
}
.sub_wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  background-color: #fff;
  box-shadow: 0rpx 0rpx 6rpx 0rpx #b2b2b2;
  padding: 30rpx 30rpx 64rpx;
  .sel_mem {
    display: flex;
    align-items: center;
    .members {
      width: 500rpx;
      color: #4d98a7;
      white-space: nowrap;
      overflow: hidden; //文本超出隐藏
      text-overflow: ellipsis;
      margin-right: 20rpx;
    }
    .open_icon {
      width: 44rpx;
      height: 44rpx;
    }
  }
  .btn {
    width: 690rpx;
    height: 88rpx;
    line-height: 88rpx;
    background: #279baa;
    border-radius: 44rpx;
    color: #fff;
    text-align: center;
    margin-top: 22rpx;
  }
}
.member_list {
  .line {
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #e5e5e5;
    padding: 30rpx 0;
    .avatar {
      width: 64rpx;
      height: 64rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20rpx;
    }
    .content {
      flex: 1;
      .depart {
        font-size: 24rpx;
        color: #666666;
      }
      .info {
        display: flex;
        margin-bottom: 16rpx;
        .name {
          font-size: 30rpx;
        }
        .tag {
          font-size: 24rpx;
          border-radius: 4rpx;
          border: 1rpx solid #f62710;
          color: #f62710;
          padding: 0rpx 6rpx;
          margin-left: 8rpx;
        }
      }
    }
  }
  .empty {
    width: 100%;
    height: 280rpx;
  }
}
.search_inp {
  height: 72rpx;
  background: #f7f7f7;
  border-radius: 4rpx;
  padding-left: 16rpx;
  .search {
    width: 28rpx;
  }
  input {
    flex: 1;
    font-size: 28rpx;
    color: #333333;
  }
}
</style>

 h5/pages/staff/vehicle/apply.vue

@@ -1,215 +1,315 @@
<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>
  <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.startTime ? '#000000' : '#999999' }"
          >
            <text v-if="param.startTime">
              {{ param.startTime.slice(5, 16) }}至{{
                param.endTime.slice(11, 16)
              }}
            </text>
            <text v-else>请选择</text>
          </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="$goBack()">
          <input
            type="text"
            disabled
            placeholder="请输入申请车辆"
            v-model="param.carCode"
            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.planUseDate ? '#000000' : '#999999' }"
            >{{ param.planUseDate ? param.planUseDate : "请选择" }}</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>{{ param.type == "1" ? "市外" : "市内" }}</text>
        </view>
      </view>
      <view class="line">
        <view class="label">
          <text>*</text>
          <text>目的地</text>
        </view>
        <view class="value">
          <input
            type="text"
            placeholder="请输入"
            v-model="param.addr"
            placeholder-style="color: #999999;"
          />
        </view>
      </view>
      <view class="line">
        <view class="label">
          <text>*</text>
          <text>乘车人员</text>
        </view>
        <view class="value" @click="$jump('/pages/staff/vehicle/applePeo')">
          <text
            class="mr6"
            :style="{
              color:
                param.memberList && param.memberList.length > 0
                  ? '#000000'
                  : '#999999',
            }"
          >
            <text v-if="param.memberNames">
              {{ param.memberNames }}
            </text>
            <text v-else>请选择</text>
          </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.content"
            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="new Date(param.startTime).getTime()"
      :maxDate="new Date(param.endTime).getTime()"
      @confirm="confirmDate"
      @cancel="isShowDatetime = false"
      mode="datetime"
    ></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
            }
        }
    }
import dayjs from 'dayjs'
import { carUseBookCraete } from '@/api'
export default {
  data() {
    return {
      param: {},
      minDate: '',
      isShowDatetime: false,
    }
  },
  mounted() {
    this.$eventBus.$on('applePeo', (res) => {
      this.$set(this.param, 'memberList', res)
      this.$set(this.param, 'memberIds', res.map(i => i.id).join(','))
      this.$set(this.param, 'memberNames', res.map(i => i.name).join(','))
    })
  },
  onLoad(option) {
    console.log(option)
    this.param = { ...option }
    this.minDate = new Date().getTime()

  },
  methods: {
    handleSub() {
      const { param } = this
      console.log('---', param)
      if (!param.planUseDate) return uni.showToast({
        title: '请选择预计用车时间',
        icon: 'none'
      })
      if (!param.addr) return uni.showToast({
        title: '请输入目的地',
        icon: 'none'
      })
      if (!param.memberList || param.memberList.length === 0) return uni.showToast({
        title: '请选择乘车人员',
        icon: 'none'
      })
      if (!param.content) return uni.showToast({
        title: '请输入用车事由',
        icon: 'none'
      })
      carUseBookCraete({
        ...param,
      }).then(res => {
        if (res.code === 200) {
          setTimeout(() => {
            uni.showToast({
              title: '提交成功',
              icon: 'success'
            })
          })
          uni.redirectTo({
            url: '/pages/staff/index'
          })
        }
      })
    },
    confirmDate(e) {

      this.param.planUseDate = dayjs(e.value).format('YYYY-MM-DD HH:mm')
      this.isShowDatetime = 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%;
            }
        }
    }
  .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: 0rpx;
      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;
.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;
        }
    }
.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;
  padding-bottom: 0;
  // padding-top: 10rpx;
}

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

 h5/pages/staff/vehicle/sendACar.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,252 @@
<template>
  <view class="main_app">
    <view class="app_header">
      <view class="item" @click="isShowDate = true">
        <text v-if="param.queryDate">{{ param.queryDate }}</text>
        <text v-else class="placeholder9">选择日期</text>
        <u-icon class="ml12" name="arrow-down" color="#999999" />
      </view>
      <view class="item" @click="isShowCar = true">
        <text v-if="param.carCode">{{ param.carCode }}</text>
        <text v-else class="placeholder9">选择车辆</text>
        <u-icon class="ml12" name="arrow-down" color="#999999" />
      </view>
    </view>
    <!--  -->
    <view class="box_list">
      <view
        class="box_list_item"
        v-for="(item, index) in dataList"
        :key="index"
      >
        <view class="box_list_item_head">
          <text>{{ item.carCode }}</text>
          <text class="loading" v-if="item.status == '0'">申请中</text>
          <text class="grr" v-if="item.status == '1'">审批中</text>
          <text class="grr" v-if="item.status == '2'">审批通过</text>
          <text class="error" v-if="item.status == '3'">审批不通过</text>
          <text class="grr" v-if="item.status == '4'">已取消</text>
        </view>
        <view class="box_list_item_nr">
          <view class="box_list_item_nr_item">
            <text>开始时间：</text>
            <text>{{ item.startTime.slice(5, 16) }}</text>
          </view>
          <view class="box_list_item_nr_item">
            <text>结束时间：</text>
            <text>{{ item.endTime.slice(5, 16) }}</text>
          </view>
          <view class="box_list_item_nr_item">
            <text>预约人：</text>
            <text>{{ item.memberName }}</text>
          </view>
          <view class="box_list_item_nr_item">
            <text>目的地：</text>
            <text>{{ item.addr }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- é€‰æ‹©è½¦è¾† -->
    <u-picker
      keyName="code"
      :show="isShowCar"
      @close="isShowCar = false"
      :closeOnClickOverlay="true"
      :columns="carsList"
      @confirm="seletedCar"
      @cancel="isShowCar = false"
    ></u-picker>
    <!-- æ—¥æœŸ -->
    <u-datetime-picker
      mode="date"
      :show="isShowDate"
      :minDate="minDate"
      @close="isShowDate = false"
      :closeOnClickOverlay="true"
      @confirm="seletedDate"
      @cancel="isShowDate = false"
    />
  </view>
</template>

<script>
import { carUseBookPaiche, getCarsList } from '@/api'
import dayjs from 'dayjs'
export default {
  data() {
    return {
      isShowCar: false,
      isShowDate: false,
      carsList: [],
      param: {
        memberId: uni.getStorageSync('userInfo').memberId
      },
      minDate: '',
      pagination: {
        page: 0,
        capacity: 10
      },
      total: 0,
      dataList: []
    }
  },
  onLoad() {
    this.minDate = new Date(dayjs().format('YYYY') + '-01-01').getTime()
    // this.param.queryDate = dayjs().format('YYYY-MM-DD')
    this.getList()
    this.initData()
  },
  onReachBottom() {
    if (this.total > 10) {
      this.getList()
    }
  },
  methods: {
    getList() {
      const { param, pagination } = this
      pagination.page = pagination.page + 1
      carUseBookPaiche({
        ...pagination,
        model: { ...param }
      }).then(res => {
        if (pagination.page === 1) {
          this.dataList = res.data.records
        } else {
          this.dataList = [...list, ...res.data.records]
        }
        this.total = res.data.total
      })
    },
    seletedCar(e) {
      const item = e.value[0]
      this.$set(this.param, 'carCode', item.code)
      this.$set(this.param, 'carId', item.id)
      this.isShowCar = false
      if (this.param.carId && this.param.queryDate) {
        this.pagination.page = 0
        this.getList()
      }
    },
    seletedDate(e) {
      this.param.queryDate = dayjs(e.value).format('YYYY-MM-DD')
      this.isShowDate = false
      if (this.param.carId && this.param.queryDate) {
        this.pagination.page = 0
        this.getList()
      }
    },
    endtimeClose() {
      this.param.endTime = ''
      this.param.startTime = ''
      this.isShowEndDate = false
    },
    timeFilter(mode, options) {
      if (mode === 'minute') {
        return options.filter(option => option === '00' || option === '30' || option === '60')
      }
      return options
    },
    initData() {
      getCarsList({
        type: 1
      }).then(res => {
        this.carsList = [res.data]
      })
    },
  }
};
</script>

<style lang="scss">
.main_app {
  background: #f7f7f7;
  padding: 0;
}
.app_header {
  display: flex;
  align-items: center;
  margin: 0 -15rpx;
  background-color: #fff;
  .item {
    width: 360rpx;
    height: 72rpx;
    margin: 15rpx;
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
  }
}
.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;
      }
            .grr{
                color: #999999;
            }
      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_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;
          }
        }
      }
    }
  }
}
</style>

 h5/pages/staff/vehicle/shinei.vue

@@ -1,172 +1,289 @@
<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>
  <view class="main_app">
    <view class="app_header">
      <view class="item" @click="isShowCar = true">
        <text v-if="param.carCode">{{ param.carCode }}</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.queryDate">{{ param.queryDate }}</text>
        <text v-else class="placeholder9">选择日期</text>
        <u-icon name="arrow-down" color="#999999" />
      </view>
    </view>
    <!--  -->
    <view class="time_list">
      <view
        class="item"
        :class="{ disable: item.isUse == 1, active: item.checked == '1' }"
        @click="datetimeClick(item, i)"
        v-for="(item, i) in timeList"
        :key="i"
        >{{ item.startHours }}-{{ item.endHours }}</view
      >
    </view>
    <!--  -->
    <view class="main_footer">
      <view class="df_ac">
        <view>已选择：</view>
        <view class="sel_time">{{ selDatetime }}</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="onSubmit">确认预约</view>
      </view>
    </view>
    <!--  -->
    <!-- é€‰æ‹©è½¦è¾† -->
    <u-picker
      keyName="code"
      :show="isShowCar"
      :columns="carsList"
      @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'
import { getCarsList, carCanReservationDate } from '@/api'
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
        }
    }
  data() {
    return {
      isShowCar: false,
      isShowDate: false,
      param: {},

      minDate: '',
      carsList: [[{ name: 'aa', value: '11' }]],
      timeList: [],
      selDatetime: '',

      colorOptions: [
        { color: '#279BAA', name: '已选择' },
        { color: '#F7F7F7', name: '可预约' },
        { color: '#cccccc', name: '不可预约' },
      ]
    }
  },
  onLoad() {
    this.minDate = new Date().getTime()
    this.initData()
  },
  methods: {
    onSubmit() {
            const { param } = this
      const selTimeList = this.timeList.filter(i => i.checked == '1')
      if (selTimeList.length == -1) {
        return uni.showToast({
          title: '请先选择用车时间段',
          icon: 'none'
        })
      }
            const obj = {
                carCode: param.carCode,
                carId: param.carId ,
                startTime: selTimeList[0].startTime,
                endTime: selTimeList[selTimeList.length - 1].endTime,
                dateDay: param.queryDate,
        type: '0'
            }
            uni.navigateTo({
                url: `/pages/staff/vehicle/apply?carCode=${obj.carCode}&carId=${obj.carId}&startTime=${obj.startTime}&endTime=${obj.endTime}&dateDay=${obj.dateDay}&type=${obj.type}`
            })
      // this.$jump('/pages/staff/vehicle/apply')
    },
    datetimeClick(item, index) {
      if(item.isUse == '1') return
      const { timeList } = this
      const selTimeList = timeList.filter(i => i.checked == '1')
      if (selTimeList.length === 0) {
        this.timeList.forEach((ite, i) => {
          if (i === index) {
            ite.checked = '1'
            this.$forceUpdate()
          }
        })
      } else {
        const findIndex = selTimeList.findIndex(i => i.index === index)
        console.log('findIndex', findIndex)
        if (findIndex === -1) {
          const startNum = index - selTimeList[0].index
          const endNum = index - selTimeList[selTimeList.length - 1].index
          if (startNum == 1 || startNum == -1 || endNum == 1 || endNum == -1) {
            console.log('相邻')
            item.checked = true
            this.$forceUpdate()
          } else {
            return uni.showToast({
              title: '请选择相邻的时间段',
              icon: 'none'
            })
          }
        } else {
          if (index === selTimeList[0].index || index === selTimeList[selTimeList.length - 1].index) {
            item.checked = false
            this.$forceUpdate()
          } else {
            return uni.showToast({
              title: '请先取消最外层的时间段',
              icon: 'none'
            })
          }

        }
      }
      const selTimeLists = this.timeList.filter(i => i.checked == '1')
      // console.log('selTimeList', selTimeList);
      if (selTimeLists.length === 0) {
        this.selDatetime = ''
      } else {
        this.selDatetime = this.param.queryDate.slice(5) + ' ' + selTimeLists[0].startHours + '-' + selTimeLists[selTimeLists.length - 1].endHours
      }
      // if(true){
      //     this.selDatetime.push(item)
      // }
    },
    confirmDate(e) {
      this.param.queryDate = dayjs(e.value).format('YYYY-MM-DD')
      this.isShowDate = false
      if(this.param.carId && this.param.queryDate){
                this.gettimes()
            }
    },
    initData() {
      getCarsList({
         type: 1
      }).then(res => {
        this.carsList = [res.data]
      })
    },
    gettimes() {
      const { param } = this
      carCanReservationDate({
        dateDay: param.queryDate,
        carId: param.carId
      }).then(res => {
        if (res.code === 200) {
          this.timeList = res.data || []
          this.timeList.forEach((i, j) => {
            i.checked = '0',
              i.index = j
          })
        }
      })
    },
    seletedCar(e) {
      const item = e.value[0]
      this.$set(this.param, 'carCode', item.code)
      this.$set(this.param, 'carId', item.id)
            if(this.param.carId && this.param.queryDate){
                this.gettimes()
            }
      this.isShowCar = 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;
        }
    }
	
  .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

@@ -1,230 +1,343 @@
<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-datetime-picker
            mode="datetime"
            keyName="name"
            :show="isShowDate"
            :filter="timeFilter"
            @close="isShowDate = false"
            :closeOnClickOverlay="true"
            @confirm="seletedDate"
            @cancel="isShowDate = false"
        />
		
    </view>
  <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.carCode ? '#000000' : '#999999' }"
            >{{ param.carCode ? param.carCode : "请选择" }}</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.startTime ? '#999999' : '#999999' }"
          >
            <template v-if="param.startTime">
              {{ param.startHours }}至{{ param.endHours }}
            </template>
            <template v-else> è¯·é€‰æ‹© </template>
          </text>
          <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
        </view>
      </view>
    </view>
    <view class="have_info" v-if="info && info.length > 0">
      <view class="tit">您申请的用车时段已有车辆预约</view>
      <view class="content" v-for="item,i in info" :key="i">
        <view class="card">{{ item.carCode }}</view>
        <view class="line">
          <text>用车时段</text>
          <text>
            {{ item.startTime.slice(5, 16) }}至{{
              item.endTime.slice(5, 16)
            }}</text
          >
        </view>
        <view class="line">
          <text>目的地</text>
          <text>{{ item.addr }}</text>
        </view>
        <view class="line">
          <text>乘车人数</text>
          <text>{{ item.memberIds.split(",").length }}人</text>
        </view>
        <view class="line">
          <text>用车事由</text>
          <text>{{ item.content }}</text>
        </view>
        <view class="line">
          <text>申请人</text>
          <text>{{ item.memberName }} {{ item.memberMobile}}</text>
        </view>
      </view>
    </view>
    <view class="main_footer">
      <text>已选择：</text>
      <text class="sel" v-if="param.startTime"
        >{{ param.startHours }}至{{ param.endHours }}</text
      >
      <text class="btn" @click="onSubmit">确认预约</text>
    </view>
    <!--  -->
    <!-- é€‰æ‹©è½¦è¾† -->
    <u-picker
      keyName="code"
      :show="isShowCar"
      @close="isShowCar = false"
      :closeOnClickOverlay="true"
      :columns="carsList"
      @confirm="seletedCar"
      @cancel="isShowCar = false"
    ></u-picker>
    <u-datetime-picker
      mode="datetime"
      :show="isShowDate"
      :filter="timeFilter"
      title="开始时间"
      :minDate="minDate"
      @close="isShowDate = false"
      :closeOnClickOverlay="true"
      @confirm="seletedDate"
      @cancel="isShowDate = false"
    />
    <u-datetime-picker
      mode="datetime"
      :show="isShowEndDate"
      :filter="timeFilter"
      title="结束时间"
      :minDate="new Date(param.startTime || null).getTime()"
      @close="endtimeClose"
      :closeOnClickOverlay="true"
      @confirm="seletedEndDate"
      @cancel="endtimeClose"
    />
  </view>
</template>

<script>
import { getCarsList, carUseBookList } from '@/api'
import dayjs from 'dayjs'
export default {
    data() {
        return {
            param: {},
            isShowCar: false,
            isShowDate: false,
            carList: [],
            datetimeOp: []
        };
    },
    methods: {
        seletedCar() {},
        seletedDate() {
            this.isShowDate = false;
        },
        timeFilter(mode, options) {
            if (mode === 'minute') {
                return options.filter(option => option === '00' || option === '30');
            }
            return options;
        }
    }
  data() {
    return {
      param: {},
      isShowCar: false,
      isShowDate: false,
      isShowEndDate: false,
      carsList: [],
      info: [],

      minDate: ''
    }
  },
  onLoad() {
    this.minDate = new Date(dayjs().format('YYYY-MM-DD HH:') + '00:00').getTime()
    this.initData()
  },
  methods: {
    onSubmit() {
      const { param, info } = this
            if (info.length > 0) return uni.showToast({
        title: '请重新选择时间段',
        icon: 'none'
      })
      if (!param.startTime) return uni.showToast({
        title: '请先选择用车时间段',
        icon: 'none'
      })
      if (!param.carId) return uni.showToast({
        title: '请选择车辆',
        icon: 'none'
      })
      const obj = {
        carCode: param.carCode,
        carId: param.carId,
        startTime: param.startTime,
        endTime: param.endTime,
        type: '1'
      }
      uni.navigateTo({
        url: `/pages/staff/vehicle/apply?carCode=${obj.carCode}&carId=${obj.carId}&startTime=${obj.startTime}&endTime=${obj.endTime}&type=${obj.type}`
      })
      // this.$jump('/pages/staff/vehicle/apply')
    },
    getInfo() {
      const { param } = this
      carUseBookList({
        carId: param.carId,
        startTime: param.startTime,
        endTime: param.endTime,
      }).then(res => {
        if (res.code == 200) {
          this.info = res.data
        }
      })
    },
    seletedCar(e) {
      const item = e.value[0]
      this.$set(this.param, 'carCode', item.code)
      this.$set(this.param, 'carId', item.id)
      this.isShowCar = false
      if (this.param.carId && this.param.startTime) {
        this.getInfo()
      }
    },
    seletedDate(e) {
      this.param.startTime = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
      this.param.startHours = dayjs(e.value).format('MM-DD HH:mm')
      console.log(this.param.startTime)
      this.isShowDate = false
      this.isShowEndDate = true
    },
    seletedEndDate(e) {
      this.param.endTime = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
      this.param.endHours = dayjs(e.value).format('MM-DD HH:mm')
      console.log(this.param.endTime)
      this.isShowEndDate = false
      if (this.param.carId && this.param.startTime) {
        this.getInfo()
      }
      this.$forceUpdate()
    },
    endtimeClose() {
      this.param.endTime = ''
      this.param.startTime = ''
      this.isShowEndDate = false
    },
    timeFilter(mode, options) {
      if (mode === 'minute') {
        return options.filter(option => option === '00' || option === '30' || option === '60')
      }
      return options
    },
    initData() {
      getCarsList({
        type: 1
      }).then(res => {
        this.carsList = [res.data]
      })
    },
  }
};
</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;
                }
            }
        }
    }
    padding: 0 0 200rpx;
  .tit {
    color: #ed4545;
    margin: 40rpx 0 24rpx;
  }
  .content {
    background: #f7f7f7;
    border-radius: 16rpx;
    padding: 30rpx 30rpx 10rpx;
        margin-bottom: 20rpx;
    .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%;
            }
        }
    }
  .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;
    }
  position: fixed;
  width: 100%;
  left: 0;
    background-color: #fff;
  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/pages/staff/visitorReport.vue

@@ -1,674 +1,665 @@
<template>
    <view class="visit">
        <view class="list">
            <view class="list_item">
                <view class="list_item_label">
                    <text>*</text>
                    <text>被访人姓名</text>
                </view>
                <view class="list_item_content"><input type="text" placeholder="请输入姓名" v-model="form1.receptMemberName" @blur="getUser" placeholder-style="color: #999999;" /></view>
            </view>
            <view class="list_item">
                <view class="list_item_label">
                    <text>*</text>
                    <text>入厂时间</text>
                </view>
                <view class="list_item_content" @click="show4 = true">
                    <text :style="{ color: form1.starttime ? '#000000' : '' }">{{ form1.starttime ? form1.starttime : '请选择' }}</text>
                    <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
                </view>
            </view>
            <view class="list_item">
                <view class="list_item_label">
                    <text>*</text>
                    <text>离厂时间</text>
                </view>
                <view class="list_item_content" @click="openLC">
                    <text :style="{ color: form1.endtime ? '#000000' : '' }">{{ form1.endtime ? form1.endtime : '请选择' }}</text>
                    <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
                </view>
            </view>
            <div class="empty"></div>
            <view class="list_item">
                <view class="list_item_label">
                    <text>*</text>
                    <text>联系人</text>
                </view>
                <view class="list_item_content"><input type="text" v-model="form1.reason" placeholder="请输入联系人姓名" placeholder-style="color: #999999;" /></view>
            </view>
            <view class="list_item">
                <view class="list_item_label">
                    <text>*</text>
                    <text>手机号</text>
                </view>
                <view class="list_item_content">
                    <input
                        type="number"
                        maxlength="11"
                        v-model="form1.phone1"
                        :placeholder="'请输入联系人手机号'"
                        placeholder-style="color: #999999;"
                    />
                </view>
            </view>
            <view class="list_item">
                <view class="list_item_label">
                    <text>*</text>
                    <text>来访单位</text>
                </view>
                <view class="list_item_content"><input type="text" v-model="form1.reason" placeholder="请输入来访单位的全称" placeholder-style="color: #999999;" /></view>
            </view>
            <view class="list_item">
                <view class="list_item_label">
                    <text>*</text>
                    <text>入园车辆</text>
                </view>
                <view class="list_item_content" @click="openInput(1)">
                    <text :style="{ color: form1.carNos ? '#000000' : '' }">{{ form1.carNos ? form1.carNos : '请输入车牌号码' }}</text>
                    <!-- <input type="text" placeholder="请输入车牌号" v-model="form1.carNos" maxlength="8" placeholder-style="color: #999999;" /> -->
                </view>
            </view>
            <view class="list_item">
                <view class="list_item_label">
                    <text>*</text>
                    <text>随车人数</text>
                </view>
                <view class="list_item_content"><input type="text" v-model="form1.reason" placeholder="请输入随车人员总数" placeholder-style="color: #999999;" /></view>
            </view>
            <view class="list_item">
                <view class="list_item_label">
                    <text>*</text>
                    <text>来访事由</text>
                </view>
                <view class="list_item_content"><input type="text" v-model="form1.reason" placeholder="请输入来访事由" placeholder-style="color: #999999;" /></view>
            </view>
        </view>
        <view class="zw"></view>
        <view class="footer"><view class="footer_btn" @click="submit">提交</view></view>
        <!-- å…¥åœºæ—¶é—´ -->
        <u-datetime-picker :show="show4" :minDate="new Date().getTime()" mode="datetime" @cancel="show4 = false" @confirm="setinDate"></u-datetime-picker>
        <!-- ç¦»åœºæ—¶é—´ -->
        <u-datetime-picker
            v-if="form1.starttime"
            :show="show5"
            :minDate="formatTimeStamp(form1.starttime)"
            :maxDate="formatTimeStamp(maxTime)"
            mode="datetime"
            @cancel="show5 = false"
            @confirm="setoutDate"
        ></u-datetime-picker>
        <!-- è½¦è¾† -->
        <u-popup :show="show2" :round="10" :safeAreaInsetBottom="true" :closeable="true" mode="bottom" @close="show2 = false">
            <view class="addcar">
                <view class="addcar_head">添加车辆</view>
                <view class="addcar_ipt"><input type="text" v-model="carName" placeholder="请输入车牌号" /></view>
                <view class="addcar_footer">
                    <view class="addcar_footer_item" @click="show2 = false">取消</view>
                    <view class="addcar_footer_item t" @click="submitCart">提交</view>
                </view>
            </view>
        </u-popup>
        <u-picker keyName="name" :show="show6" :columns="columns1" @confirm="seleIdcard" @cancel="show6 = false"></u-picker>
        <!-- <tly-picture-cut ref="tlyPictureCut" :pictureSrc="photoSrc" @createImg="uploadImg"></tly-picture-cut> -->
        <keyboardInput ref="keyboard" @export="setPlate" @close="closeInput" />
        <qf-image-cropper ref="cropper" :width="280" :height="280" :radius="30" @crop="uploadImg"></qf-image-cropper>
    </view>
  <view class="visit">
    <view class="list">
      <view class="list_item">
        <view class="list_item_label">
          <text>*</text>
          <text>被访人姓名</text>
        </view>
        <view class="list_item_content" @click="showName = true">
          <text :style="{ color: form1.receptMemberName ? '#000000' : '' }">{{
            form1.receptMemberName
              ? form1.receptMemberName + " " + form1.receptCompanyName
              : "请选择"
          }}</text>
          <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
        </view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>*</text>
          <text>入厂时间</text>
        </view>
        <view class="list_item_content" @click="show4 = true">
          <text :style="{ color: form1.starttime ? '#000000' : '' }">{{
            form1.starttime ? form1.starttime : "请选择"
          }}</text>
          <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
        </view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>*</text>
          <text>离厂时间</text>
        </view>
        <view class="list_item_content" @click="openLC">
          <text :style="{ color: form1.endtime ? '#000000' : '' }">{{
            form1.endtime ? form1.endtime : "请选择"
          }}</text>
          <u-icon name="arrow-right" color="#CCCCCC" size="20"></u-icon>
        </view>
      </view>
      <div class="empty"></div>
      <view class="list_item">
        <view class="list_item_label">
          <text>*</text>
          <text>联系人</text>
        </view>
        <view class="list_item_content"
          ><input
            type="text"
            v-model="form1.name"
            placeholder="请输入联系人姓名"
            placeholder-style="color: #999999;"
        /></view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>*</text>
          <text>手机号</text>
        </view>
        <view class="list_item_content">
          <input
            type="number"
            maxlength="13"
            v-model="form1.phone"
            :placeholder="'请输入联系人手机号'"
            placeholder-style="color: #999999;"
          />
        </view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>*</text>
          <text>来访单位</text>
        </view>
        <view class="list_item_content"
          ><input
            type="text"
            v-model="form1.companyName"
            placeholder="请输入来访单位的全称"
            placeholder-style="color: #999999;"
        /></view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>*</text>
          <text>入园车辆</text>
        </view>
        <view class="list_item_content" @click="openInput(1)">
          <text :style="{ color: form1.carNos ? '#000000' : '' }">{{
            form1.carNos ? form1.carNos : "请输入车牌号码"
          }}</text>
          <!-- <input type="text" placeholder="请输入车牌号" v-model="form1.carNos" maxlength="8" placeholder-style="color: #999999;" /> -->
        </view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>*</text>
          <text>随车人数</text>
        </view>
        <view class="list_item_content"
          ><input
            type="number"
            v-model="form1.memberNum"
            placeholder="请输入随车人员总数"
            placeholder-style="color: #999999;"
        /></view>
      </view>
      <view class="list_item">
        <view class="list_item_label">
          <text>*</text>
          <text>来访事由</text>
        </view>
        <view class="list_item_content"
          ><input
            type="text"
            v-model="form1.reason"
            placeholder="请输入来访事由"
            placeholder-style="color: #999999;"
        /></view>
      </view>
    </view>
    <view class="zw"></view>
    <view class="footer"
      ><view class="footer_btn" @click="submit">提交</view></view
    >
    <!-- å…¥åœºæ—¶é—´ -->
    <u-datetime-picker
      :show="show4"
      :minDate="new Date().getTime()"
      mode="datetime"
      @cancel="show4 = false"
      @confirm="setinDate"
    ></u-datetime-picker>
    <!-- ç¦»åœºæ—¶é—´ -->
    <u-datetime-picker
      v-if="form1.starttime"
      :show="show5"
      :minDate="formatTimeStamp(form1.starttime)"
      :maxDate="formatTimeStamp(maxTime)"
      mode="datetime"
      @cancel="show5 = false"
      @confirm="setoutDate"
    ></u-datetime-picker>
    <!-- è½¦è¾† -->
    <u-popup
      :show="show2"
      :round="10"
      :safeAreaInsetBottom="true"
      :closeable="true"
      mode="bottom"
      @close="show2 = false"
    >
      <view class="addcar">
        <view class="addcar_head">添加车辆</view>
        <view class="addcar_ipt"
          ><input type="text" v-model="carName" placeholder="请输入车牌号"
        /></view>
        <view class="addcar_footer">
          <view class="addcar_footer_item" @click="show2 = false">取消</view>
          <view class="addcar_footer_item t" @click="submitCart">提交</view>
        </view>
      </view>
    </u-popup>
    <u-picker
      keyName="name"
      :show="showName"
      closeOnClickOverlay
      :columns="memberList"
      @confirm="seleteName"
      @cancel="showName = false"
      @close="showName = false"
    ></u-picker>
    <!-- <tly-picture-cut ref="tlyPictureCut" :pictureSrc="photoSrc" @createImg="uploadImg"></tly-picture-cut> -->
    <keyboardInput ref="keyboard" @export="setPlate" @close="closeInput" />
    <qf-image-cropper
      ref="cropper"
      :width="280"
      :height="280"
      :radius="30"
      @crop="uploadImg"
    ></qf-image-cropper>
  </view>
</template>

<script>
import tlyPictureCut from '@/components/tly-picture-cut/tlyPictureCut.vue';
import keyboardInput from '@/components/keyboard-input/keyboard-input.vue';
import QfImageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue';
import { getDaysAfterDate } from '@/utils/utils.js';
import tlyPictureCut from '@/components/tly-picture-cut/tlyPictureCut.vue'
import keyboardInput from '@/components/keyboard-input/keyboard-input.vue'
import QfImageCropper from '@/uni_modules/qf-image-cropper/components/qf-image-cropper/qf-image-cropper.vue'
import { getDaysAfterDate } from '@/utils/utils.js'
import { createVisit, getVisitedMember } from '@/api'
export default {
    data() {
        return {
            photoSrc: '',
            type: '',
            inputType: '',
            show1: false,
            show2: false,
            show4: false,
            show5: false,
            show6: false,
            show7: false,
            fileList: [],
            columns1: [[{ name: '身份证', id: 0 }, { name: '港澳证件', id: 1 }, { name: '护照', id: 2 }]],
            columnsNames: [[{ name: '张三', id: 0 }, { name: '张三', id: 1 }, { name: '张三', id: 2 }]],
            columns: [],
            cars: [],
            day: null,
            maxTime: '',
            carName: '',
            personnel: [],
            userAnswerId: '',
            form1: {
                phone1: '',
                receptMemberId: '',
                receptMemberName: '',
                starttime: '',
                endtime: '',
                doors: '',
                doorSelectName: '',
                reason: '',
                carNos: ''
            },
            withUserList: {
                name: '',
                phone: '',
                idcardType: '',
                idcardTypeName: '',
                companyName: '',
                idcardNo: '',
                faceImg: '',
                faceImgUrl: '',
                imgurl: '',
                imgurlUrl: ''
            },
            visit: '',
            form: {},
            accessControl: '',
            verify: ''
        };
    },
    components: { tlyPictureCut, keyboardInput, QfImageCropper },
    onLoad(options) {
        if (options.data) {
            this.form = JSON.parse(options.data);
        }
        // this.getvisit()
        // this.getVisit1()
        // this.getUserValid()
    },
    methods: {
        openInput(type) {
            this.inputType = type;
            this.$refs.keyboard.open();
        },
        setPlate(e) {
            if (this.inputType === 1) {
                this.form1.carNos = e;
            } else if (this.inputType === 2) {
                this.withUserList.carNos = e;
            }
            this.$forceUpdate();
            this.closeInput();
        },
        closeInput() {
            this.$refs.keyboard.close();
        },
        uploadImg(file) {
            this.$refs.cropper.close();
            uni.showLoading({ title: '上传中', mask: true });
            uni.uploadFile({
                url: `${this.$baseUrl}visitsAdmin/cloudService/web/public/uploadFtp.do`,
                filePath: file.tempFilePath,
                name: 'file',
                formData: {
                    folderCode: 'MEMBER_IMG'
                },
                success: uploadFileRes => {
                    let res = JSON.parse(uploadFileRes.data);
                    this.withUserList.faceImg = res.data.halfPath;
                    this.withUserList.faceImgUrl = res.data.prefixPath + res.data.folder + res.data.halfPath;
                },
                complete() {
                    uni.hideLoading();
                }
            });
        },
        submit() {
            if (!this.form1.receptMemberId)
                return uni.showToast({
                    title: '请填写有效的访问人',
                    icon: 'none'
                });
            if (!this.form1.starttime)
                return uni.showToast({
                    title: '入场时间不能为空',
                    icon: 'none'
                });
            if (!this.form1.endtime)
                return uni.showToast({
                    title: '离场时间不能为空',
                    icon: 'none'
                });
            if (!this.form1.doorSelectName && this.accessControl == 1)
                return uni.showToast({
                    title: '访问门禁不能为空',
                    icon: 'none'
                });
            if (!this.form1.reason)
                return uni.showToast({
                    title: '拜访事由不能为空',
                    icon: 'none'
                });
            // this.form1.starttime = this.form1.starttime + ':00'
            // this.form1.endtime = this.form1.endtime + ':00'
            let data = JSON.parse(JSON.stringify(this.form1));
            data.starttime = data.starttime + ':00';
            data.endtime = data.endtime + ':00';
            this.$u.api
                .createFk({
                    ...this.form,
                    ...data,
                    openid: this.$store.state.openId,
                    withUserList: this.personnel
                })
                .then(res => {
                    if (res.code === 200) {
                        uni.reLaunch({
                            url: `/pages/appointmentDetails/appointmentDetails?id=${res.data}`
                        });
                    }
                });
        },
        deleUser(i) {
            this.personnel.splice(i, 1);
        },
        getVisit1() {
            // æ˜¯å¦éœ€è¦ç­”题
            this.$u.api
                .getSystemDictData({
                    dictCode: 'SYSTEM',
                    label: 'HEALTH_CARD'
                })
                .then(res => {
                    if (res.code === 200) {
                        this.visit = res.data.code;
                    }
                });
            // èµ·å§‹æ—¶é—´æ—¶é•¿
            this.$u.api
                .getSystemDictData({
                    dictCode: 'VISIT_CONFIG',
                    label: 'VALIDATE_VISIT'
                })
                .then(res => {
                    if (res.code === 200) {
                        this.day = Number(res.data.code);
                        // console.log(nextDay('after', true, this.day))
                    }
                });
        },
        upload(type) {
            this.type = type;
            if (type === 'faceImg') {
                this.$refs.cropper.open();
                return;
            }
            uni.chooseImage({
                success: chooseImageRes => {
                    // if (type === 'faceImg') {
                    //     this.photoSrc = chooseImageRes.tempFilePaths[0];
                    //     this.$refs.tlyPictureCut.showPop();
                    //     return
                    // }
                    uni.showLoading({ title: '上传中', mask: true });
                    for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
                        uni.uploadFile({
                            url: `${this.$baseUrl}visitsAdmin/cloudService/web/public/uploadFtp.do`,
                            filePath: chooseImageRes.tempFilePaths[i],
                            name: 'file',
                            formData: {
                                folderCode: 'MEMBER_IMG'
                            },
                            success: uploadFileRes => {
                                let res = JSON.parse(uploadFileRes.data);
                                if (type === 'faceImg') {
                                    this.withUserList.faceImg = res.data.halfPath;
                                    this.withUserList.faceImgUrl = res.data.prefixPath + res.data.folder + res.data.halfPath;
                                } else {
                                    this.withUserList.imgurl = res.data.halfPath;
                                    this.withUserList.imgurlUrl = res.data.prefixPath + res.data.folder + res.data.halfPath;
                                }
                            },
                            complete() {
                                if (i === chooseImageRes.tempFilePaths.length - 1) {
                                    uni.hideLoading();
                                }
                            }
                        });
                    }
                }
            });
        },
        seleIdcard(e) {
            this.withUserList.idcardType = e.value[0].id;
            this.withUserList.idcardTypeName = e.value[0].name;
            this.show6 = false;
        },
        submitCart() {
            if (!this.carName)
                return uni.showToast({
                    title: '请输入车牌号码',
                    icon: 'none'
                });
            this.cars.push(this.carName);
            this.form1.carNos = this.cars.join(',');
            this.carName = '';
            this.show2 = false;
        },
        deleCars(i) {
            this.cars.splice(i, 1);
            this.form1.carNos = this.cars.join(',');
        },
        seleMJ(i) {
            this.columns.forEach((item, index) => {
                if (index === i) {
                    item.active = !item.active;
                }
            });
        },
        openLC() {
            if (!this.form1.starttime)
                return uni.showToast({
                    title: '请先选择入厂时间',
                    icon: 'none'
                });
            this.show5 = true;
        },
        setinDate(e) {
            this.form1.starttime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM');
            // this.maxTime = getDaysAfterDate(uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM'), this.day)
            this.maxTime = this.form1.starttime.slice(0, 11) + '23:59'
            this.form1.endtime = ''
            this.show4 = false;
        },
        setoutDate(e) {
            this.form1.endtime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM');
            this.show5 = false;
        },
        formatTimeStamp(date) {
            return Date.parse(new Date(`${date}`)) || Date.parse(new Date(`${date.replace(/-/g, '/')}`));
        },
        // æŸ¥è¯¢ç”¨æˆ·
        getUser() {
            if (this.verify === '0') {
                if (this.form1.phone1) {
                    this.$u.api
                        .getVisitedMember({
                            mobile: this.form1.phone1
                        })
                        .then(res => {
                            if (res.code === 200) {
                                this.form1.receptMemberId = res.data.id;
                                this.form1.receptMemberName = res.data.name;
                            }
                        });
                }
            } else {
                if (this.form1.phone1 && this.form1.receptMemberName) {
                    this.$u.api
                        .getVisitedMember({
                            mobile: this.form1.phone1,
                            name: this.form1.receptMemberName
                        })
                        .then(res => {
                            if (res.code === 200) {
                                this.form1.receptMemberId = res.data.id;
                                this.form1.receptMemberName = res.data.name;
                            }
                        });
                }
            }
        },
        // è¢«æ‹œè®¿äººä¿¡æ¯æ ¡éªŒæ–¹å¼ï¼ˆ0手机号单独校验 1手机号和姓名组合校验）
        getUserValid() {
            this.$u.api
                .getSystemDictData({
                    dictCode: 'SYSTEM',
                    label: 'BEVISITED_USER_VALID'
                })
                .then(res => {
                    if (res.code === 200) {
                        this.verify = res.data.code;
                    }
                });
        },
        // èŽ·å–是否需要选择门禁/门禁列表
        getvisit() {
            this.$u.api
                .getSystemDictData({
                    dictCode: 'SYSTEM',
                    label: 'SELECT_DOORS_VISIT_REQUIRED'
                })
                .then(res => {
                    if (res.code === 200) {
                        this.accessControl = res.data.code;
                        if (res.data.code === '1') {
                            this.$u.api.deviceRoleList({ type: 1 }).then(device => {
                                if (device.code === 200) {
                                    if (device.data.length > 0) {
                                        device.data.forEach(item => {
                                            item.active = false;
                                        });
                                        this.columns = device.data;
                                    }
                                }
                            });
                        }
                    }
                });
        }
    }
  data() {
    return {
      photoSrc: '',
      type: '',
      inputType: '',
      show1: false,
      show2: false,
      show4: false,
      show5: false,
      show7: false,
      showName: false,
      fileList: [],
      memberList: [[{ name: '身份证', id: 0 }, { name: '港澳证件', id: 1 }, { name: '护照', id: 2 }]],
      columnsNames: [[{ name: '张三', id: 0 }, { name: '张三', id: 1 }, { name: '张三', id: 2 }]],
      columns: [],
      cars: [],
      day: null,
      maxTime: '',
      carName: '',
      personnel: [],
      userAnswerId: '',
      form1: {
        receptMemberId: '',
        receptMemberName: '',
        starttime: '',
        endtime: '',
        reason: '',
        carNos: ''
      },
      visit: '',
      form: {},
      accessControl: '',
      verify: ''
    }
  },
  components: { tlyPictureCut, keyboardInput, QfImageCropper },
  onLoad(options) {
    if (options.data) {
      this.form = JSON.parse(options.data)
    }
    this.getUser()
    const userInfo = uni.getStorageSync('userInfo') || {}
    this.$set(this.form1, 'receptMemberName', userInfo.realname)
    this.$set(this.form1, 'receptMemberId', userInfo.id || '')
    this.$set(this.form1, 'receptCompanyName', userInfo.company.companyName || '')
    // this.getvisit()
    // this.getVisit1()
    // this.getUserValid()
  },
  methods: {
    openInput(type) {
      this.inputType = type
      this.$refs.keyboard.open()
    },
    setPlate(e) {
      if (this.inputType === 1) {
        this.form1.carNos = e
      } else if (this.inputType === 2) {
        this.withUserList.carNos = e
      }
      this.$forceUpdate()
      this.closeInput()
    },
    seleteName(e) {
      this.$set(this.form1, 'receptMemberName', e.value[0].name)
      this.$set(this.form1, 'receptMemberId', e.value[0].id)
      this.$set(this.form1, 'receptCompanyName', e.value[0].companyName)
      this.showName = false
    },
    getUser() {
      getVisitedMember().then(res => {
        this.memberList = [res.data || []]
      })
    },
    closeInput() {
      this.$refs.keyboard.close()
    },
    submit() {
      const { form1 } = this
      if (!this.form1.receptMemberId)
        return uni.showToast({
          title: '请选择有效的被访人',
          icon: 'none'
        })
      if (!this.form1.starttime)
        return uni.showToast({
          title: '入场时间不能为空',
          icon: 'none'
        })
      if (!this.form1.endtime)
        return uni.showToast({
          title: '离场时间不能为空',
          icon: 'none'
        })
      if (!this.form1.name) return uni.showToast({
        title: '联系人不能为空',
        icon: 'none'
      })
      if (!this.form1.phone) return uni.showToast({
        title: '手机号不能为空',
        icon: 'none'
      })
      if (!this.form1.companyName) return uni.showToast({
        title: '来访单位不能为空',
        icon: 'none'
      })
      if (!this.form1.carNos) return uni.showToast({
        title: '入园车辆不能为空',
        icon: 'none'
      })
      if (!this.form1.memberNum) return uni.showToast({
        title: '随车人数不能为空',
        icon: 'none'
      })
      if (!this.form1.reason) return uni.showToast({
        title: '拜访事由不能为空',
        icon: 'none'
      })
      // this.form1.starttime = this.form1.starttime + ':00'
      // this.form1.endtime = this.form1.endtime + ':00'
      let data = JSON.parse(JSON.stringify(this.form1))
      data.starttime = data.starttime + ':00'
      data.endtime = data.endtime + ':00'
      createVisit({
        ...data,
        type: '2',
        openid: this.$store.state.openId
      })
        .then(res => {
          if (res.code === 200) {
            setTimeout(() => {
              uni.showToast({
                title: '提交成功',
                icon: 'success'
              })
            })
            uni.reLaunch({
              url: `/pages/staff/index`
            })
          }
        })
    },
    deleUser(i) {
      this.personnel.splice(i, 1)
    },
    getVisit1() {
      // æ˜¯å¦éœ€è¦ç­”题
      this.$u.api
        .getSystemDictData({
          dictCode: 'SYSTEM',
          label: 'HEALTH_CARD'
        })
        .then(res => {
          if (res.code === 200) {
            this.visit = res.data.code
          }
        })
      // èµ·å§‹æ—¶é—´æ—¶é•¿
      this.$u.api
        .getSystemDictData({
          dictCode: 'VISIT_CONFIG',
          label: 'VALIDATE_VISIT'
        })
        .then(res => {
          if (res.code === 200) {
            this.day = Number(res.data.code)
            // console.log(nextDay('after', true, this.day))
          }
        })
    },
    submitCart() {
      if (!this.carName)
        return uni.showToast({
          title: '请输入车牌号码',
          icon: 'none'
        })
      this.cars.push(this.carName)
      this.form1.carNos = this.cars.join(',')
      this.carName = ''
      this.show2 = false
    },
    deleCars(i) {
      this.cars.splice(i, 1)
      this.form1.carNos = this.cars.join(',')
    },
    seleMJ(i) {
      this.columns.forEach((item, index) => {
        if (index === i) {
          item.active = !item.active
        }
      })
    },
    openLC() {
      if (!this.form1.starttime)
        return uni.showToast({
          title: '请先选择入厂时间',
          icon: 'none'
        })
      this.show5 = true
    },
    setinDate(e) {
      this.form1.starttime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
      // this.maxTime = getDaysAfterDate(uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM'), this.day)
      this.maxTime = this.form1.starttime.slice(0, 11) + '23:59'
      this.form1.endtime = ''
      this.show4 = false
    },
    setoutDate(e) {
      this.form1.endtime = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM')
      this.show5 = false
    },
    formatTimeStamp(date) {
      return Date.parse(new Date(`${date}`)) || Date.parse(new Date(`${date.replace(/-/g, '/')}`))
    },
    // è¢«æ‹œè®¿äººä¿¡æ¯æ ¡éªŒæ–¹å¼ï¼ˆ0手机号单独校验 1手机号和姓名组合校验）
    getUserValid() {
      this.$u.api
        .getSystemDictData({
          dictCode: 'SYSTEM',
          label: 'BEVISITED_USER_VALID'
        })
        .then(res => {
          if (res.code === 200) {
            this.verify = res.data.code
          }
        })
    },
    // èŽ·å–是否需要选择门禁/门禁列表
    getvisit() {
      this.$u.api
        .getSystemDictData({
          dictCode: 'SYSTEM',
          label: 'SELECT_DOORS_VISIT_REQUIRED'
        })
        .then(res => {
          if (res.code === 200) {
            this.accessControl = res.data.code
            if (res.data.code === '1') {
              this.$u.api.deviceRoleList({ type: 1 }).then(device => {
                if (device.code === 200) {
                  if (device.data.length > 0) {
                    device.data.forEach(item => {
                      item.active = false
                    })
                    this.columns = device.data
                  }
                }
              })
            }
          }
        })
    }
  }
};
</script>
<style>
page {
    background-color: #f7f7f7 !important;
  background-color: #f7f7f7 !important;
}
.u-upload__button {
    margin: 0 !important;
  margin: 0 !important;
}
</style>
<style lang="scss" scoped>
.visit {
    width: 100%;
    padding-top: 10rpx 0;
    .menjin {
        width: 100%;
        .respondent-title {
            width: 100%;
            height: 100rpx;
            line-height: 100rpx;
            text-align: center;
            font-size: 32rpx;
            font-weight: 500;
            color: #222222;
        }
        .list {
            width: 100%;
            height: 400rpx;
            display: flex;
            flex-direction: column;
            .list_item {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                text {
                    font-size: 28rpx;
                    color: #000000;
                }
                image {
                    width: 30rpx;
                    height: 30rpx;
                }
            }
        }
        .menjin_footer {
            width: 100%;
            padding: 30rpx;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .menjin_footer_item {
                flex: 1;
                height: 80rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 10rpx;
                background-color: #025eef;
                color: #ffffff;
                font-size: 26rpx;
                margin-left: 30rpx;
                &:first-child {
                    margin-left: 0 !important;
                }
            }
        }
    }
  width: 100%;
  padding-top: 10rpx 0;
  .menjin {
    width: 100%;
    .respondent-title {
      width: 100%;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      font-size: 32rpx;
      font-weight: 500;
      color: #222222;
    }
    .list {
      width: 100%;
      height: 400rpx;
      display: flex;
      flex-direction: column;
      .list_item {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        text {
          font-size: 28rpx;
          color: #000000;
        }
        image {
          width: 30rpx;
          height: 30rpx;
        }
      }
    }
    .menjin_footer {
      width: 100%;
      padding: 30rpx;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .menjin_footer_item {
        flex: 1;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10rpx;
        background-color: #025eef;
        color: #ffffff;
        font-size: 26rpx;
        margin-left: 30rpx;
        &:first-child {
          margin-left: 0 !important;
        }
      }
    }
  }

    .addcar {
        padding: 30rpx;
        width: 100%;
        box-sizing: border-box;
        .addcar_head {
            text-align: center;
            font-size: 32rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            color: #222222;
        }
        .addcar_ipt {
            width: 100%;
            height: 100rpx;
            line-height: 100rpx;
            text-align: center;
            background: #f7f7f7;
            border-radius: 50rpx;
            margin-top: 60rpx;
            input {
                width: 100%;
                height: 100%;
                font-size: 28rpx;
                font-weight: 400;
                color: #000000;
                text-align: center;
            }
        }
        .addcar_footer {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 60rpx;
            .t {
                background: #025eef !important;
                color: #ffffff !important;
            }
            .addcar_footer_item {
                flex: 1;
                height: 88rpx;
                line-height: 88rpx;
                font-size: 32rpx;
                font-weight: 400;
                color: #025eef;
                text-align: center;
                border-radius: 44rpx;
                border: 1rpx solid #025eef;
                margin-right: 18rpx;
                &:last-child {
                    margin-right: 0 !important;
                }
            }
        }
    }
    .list {
        width: 100%;
        padding: 0 30rpx;
        box-sizing: border-box;
        background-color: #ffffff;
        .empty {
            width: 750rpx;
            height: 20rpx;
            background-color: #f7f7f7;
            margin: 0 -30rpx;
        }
        .list_item {
            width: 100%;
            // min-height: 98rpx;
            padding: 30rpx 0;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1rpx solid #e5e5e5;
  .addcar {
    padding: 30rpx;
    width: 100%;
    box-sizing: border-box;
    .addcar_head {
      text-align: center;
      font-size: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #222222;
    }
    .addcar_ipt {
      width: 100%;
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      background: #f7f7f7;
      border-radius: 50rpx;
      margin-top: 60rpx;
      input {
        width: 100%;
        height: 100%;
        font-size: 28rpx;
        font-weight: 400;
        color: #000000;
        text-align: center;
      }
    }
    .addcar_footer {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 60rpx;
      .t {
        background: #025eef !important;
        color: #ffffff !important;
      }
      .addcar_footer_item {
        flex: 1;
        height: 88rpx;
        line-height: 88rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: #025eef;
        text-align: center;
        border-radius: 44rpx;
        border: 1rpx solid #025eef;
        margin-right: 18rpx;
        &:last-child {
          margin-right: 0 !important;
        }
      }
    }
  }
  .list {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    .empty {
      width: 750rpx;
      height: 20rpx;
      background-color: #f7f7f7;
      margin: 0 -30rpx;
    }
    .list_item {
      width: 100%;
      // min-height: 98rpx;
      padding: 30rpx 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid #e5e5e5;

            .list_item_label {
                flex-shrink: 0;
                display: flex;
                align-items: center;
      .list_item_label {
        flex-shrink: 0;
        display: flex;
        align-items: center;

                text {
                    &:nth-child(2) {
                        font-size: 30rpx;
                        font-weight: 400;
                        color: #222222;
                    }
        text {
          &:nth-child(2) {
            font-size: 30rpx;
            font-weight: 400;
            color: #222222;
          }

                    &:nth-child(1) {
                        font-size: 30rpx;
                        font-weight: 400;
                        color: #e42d2d;
                    }
                }
            }
          &:nth-child(1) {
            font-size: 30rpx;
            font-weight: 400;
            color: #e42d2d;
          }
        }
      }

            .list_item_content {
                flex: 1;
                height: 100%;
                margin-left: 30rpx;
                display: flex;
                align-items: center;
                justify-content: flex-end;
      .list_item_content {
        flex: 1;
        height: 100%;
        margin-left: 30rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;

                text {
                    font-size: 28rpx;
                    font-weight: 400;
                    color: #999999;
                    margin-right: 6rpx;
                }
        text {
          font-size: 28rpx;
          font-weight: 400;
          color: #999999;
          margin-right: 6rpx;
        }

                input {
                    width: 100%;
                    height: 100%;
                    text-align: right;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: #222222;
                }
            }
        }
    }
        input {
          width: 100%;
          height: 100%;
          text-align: right;
          font-size: 28rpx;
          font-weight: 400;
          color: #222222;
        }
      }
    }
  }

    .zw {
        width: 100%;
        height: calc(env(safe-area-inset-bottom) + 118rpx);
    }
  .zw {
    width: 100%;
    height: calc(env(safe-area-inset-bottom) + 118rpx);
  }

    .footer {
        width: 100%;
        padding: 0 30rpx;
        padding-bottom: env(safe-area-inset-bottom);
        box-sizing: border-box;
        position: fixed;
        left: 0;
        bottom: 68rpx;
  .footer {
    width: 100%;
    padding: 0 30rpx;
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
    position: fixed;
    left: 0;
    bottom: 68rpx;

        .footer_btn {
            width: 100%;
            height: 88rpx;
            line-height: 88rpx;
            text-align: center;
            background: #4e99a9;
            border-radius: 44rpx;
            font-size: 32rpx;
            color: #ffffff;
        }
    }
    .footer_btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      background: #4e99a9;
      border-radius: 44rpx;
      font-size: 32rpx;
      color: #ffffff;
    }
  }
}
</style>

 h5/pages/staffLogin/forgetPsd.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,235 @@
<template>
  <view class="login">
    <image class="login_bg" src="@/static/login_bg@2x.png" />
    <image class="login_logo" src="@/static/logo@2x.png" mode="widthFix" />
    <view class="login_title">安泰物流智慧园区</view>
    <view class="login_list">
      <view class="login_list_item">
        <image src="@/static/login_ic_phone@2x.png" mode="widthFix" />
        <input v-model="form.phone" maxlength="18" placeholder="请输入手机号" />
      </view>
      <view class="login_list_item">
        <image src="@/static/ic_captcha.png" mode="widthFix"></image>
        <input
          v-model="form.validCode"
          placeholder="请输入验证码"
          type="text"
        />
        <text class="captcha" v-if="countDown == 0" @click="initCaptcha"
          >获取验证码</text
        >
        <text class="placeholder9" v-else>{{ countDown }}</text>
      </view>
      <view class="login_list_item">
        <image src="@/static/login_ic_password@2x.png" mode="widthFix" />
        <input
          v-model="form.password"
          type="password"
          placeholder="请输入新密码"
        />
      </view>
      <view class="login_list_item">
        <image src="@/static/login_ic_password@2x.png" mode="widthFix" />
        <input
          v-model="form.newPassword"
          type="password"
          placeholder="请再次输入新密码"
        />
      </view>
    </view>
    <view class="login_btn">
      <view class="login_btn_n" @click="onLogin">确认修改</view>
    </view>
    <!--  -->
    <u-popup
      :show="isShowProtocol"
      @close="isShowProtocol = false"
      mode="center"
    >
      <view class="modal">111</view>
    </u-popup>
  </view>
</template>

<script>
import { resetPassword, sendSms } from '@/api'
export default {
  data() {
    return {
      form: {
      },
      isShowProtocol: false,
      countDown: 0
    }
  },

  onLoad() {
  },

  methods: {
    dealChange(e) {
      console.log(e)
    },
    initCaptcha() {
      if (!this.form.phone) return uni.showToast({
        title: '手机号不能为空',
        icon: 'none'
      })
      sendSms({ phone: this.form.phone }).then(res => {
        this.countDown = 60
        setInterval(() => {
          if (this.countDown == 0) return
          this.countDown--
        }, 1000)
      })
    },

    onLogin() {
      const { form } = this
      if (!form.phone) return uni.showToast({
        title: '手机号不能为空',
        icon: 'none'
      })
      if (!form.validCode) return uni.showToast({
        title: '验证码不能为空',
        icon: 'none'
      })
      if (!form.password) return uni.showToast({
        title: '新密码不能为空',
        icon: 'none'
      })
      if (!form.newPassword) return uni.showToast({
        title: '确认密码不能为空',
        icon: 'none'
      })
      if (form.password != form.newPassword) return uni.showToast({
        title: '两次输入密码不一致',
        icon: 'none'
      })
      resetPassword({
        ...form
      }).then(res => {
        if (res && res.code == 200) {
          setTimeout(() => {
            uni.showToast({
              title: '密码修改成功,请重新登录',
              icon: 'success',
              duration: 2000
            })
          })
          uni.redirectTo({
            url: "/pages/staffLogin/login"
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  display: flex;
  padding-top: 160rpx;
  box-sizing: border-box;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(
    180deg,
    rgba(39, 155, 170, 0.2) 0%,
    rgba(39, 155, 170, 0) 100%
  );
  .login_logo {
    width: 180rpx;
    height: 180rpx;
  }
  .login_bg {
    position: absolute;
    top: 0;
    width: 750rpx;
  }
  .login_title {
    font-size: 44rpx;
    font-weight: 600;
    color: #333333;
    margin-top: 40rpx;
    margin-bottom: 120rpx;
  }
  .login_list {
    width: 100%;
    padding: 0 60rpx;
    box-sizing: border-box;
    .login_list_item {
      width: 100%;
      border-radius: 50rpx;
      height: 98rpx;
      padding: 0 40rpx;
      box-sizing: border-box;
      background: #ffffff;
      margin-bottom: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      &:last-child {
        margin-bottom: 0 !important;
      }
      image {
        flex-shrink: 0;
        width: 40rpx;
        height: 40rpx;
      }
      .captcha {
        color: #279baa;
      }
      input {
        flex: 1;
        height: 100%;
        color: #666666;
        margin-left: 24rpx;
        border: none;
      }
    }
  }
  .login_btn {
    width: 100%;
    padding: 0 60rpx;
    box-sizing: border-box;
    margin-top: 80rpx;
    .for_psd {
      color: #279baa;
      margin-top: 40rpx;
      width: 140rpx;
      text-align: center;
      margin: 40rpx auto;
    }
    .login_btn_n {
      width: 100%;
      height: 98rpx;
      background: #279baa;
      box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(39, 155, 170, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
      border-radius: 50rpx;
    }
  }
  .deal_wrap {
    position: absolute;
    width: 100%;
    left: 0;
    text-align: center;
    bottom: 108rpx;
    .deal {
      color: #279baa;
    }
  }
}
.modal {
  padding: 32rpx;
}
</style>

 h5/pages/staffLogin/login.vue

@@ -6,32 +6,51 @@
    <view class="login_list">
      <view class="login_list_item">
        <image src="@/static/login_ic_phone@2x.png" mode="widthFix" />
        <input
          v-model="form.account"
          maxlength="18"
          placeholder="账号"
        />
        <input v-model="form.username" maxlength="18" placeholder="账号" />
      </view>
      <view class="login_list_item">
        <image src="@/static/login_ic_password@2x.png" mode="widthFix" />
        <input v-model="form.password" type="password" placeholder="密码" />
      </view>
      <view class="login_list_item">
        <image src="@/static/ic_captcha.png" mode="widthFix"></image>
        <input v-model="form.code" placeholder="验证码" type="text" />
        <image
          @click="initCaptcha"
          :src="captcha.image"
          class="captcha"
          mode="widthFix"
        />
      </view>
    </view>
    <view class="login_btn">
      <view class="login_btn_n" @click="onLogin">立即登录</view>
      <view class="for_psd">忘记密码</view>
      <view @click="$jump('/pages/staffLogin/forgetPsd')" class="for_psd"
        >忘记密码</view
      >
    </view>

    <view class="deal_wrap">
      <checkbox @change="dealChange" />
      <text>登录即同意</text>
      <text class="deal">《安泰物流用户协议》</text>
      <text class="deal" @click="isShowProtocol = true"
        >《安泰物流用户协议》</text
      >
    </view>
    <!--  -->
    <u-popup
      :show="isShowProtocol"
      @close="isShowProtocol = false"
      mode="center"
    >
      <view class="modal">111</view>
    </u-popup>
  </view>
</template>

<script>
import { loginPost } from '@/api'
import { loginPost, loginCaptcha, getUserInfo } from '@/api'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'login',

@@ -40,32 +59,55 @@
      form: {
        account: '',
        password: '',
      }
      },
      isShowProtocol: false,
      captcha: {}
    }
  },

  created() {
  onLoad() {
    this.initCaptcha()
  },

  methods: {
    ...mapMutations(["setToken", "setUserInfo"]),
    dealChange(e) {
      console.log(e)
    },
    initCaptcha() {
      loginCaptcha().then(res => {
        this.captcha = res.data
      })
    },

    onLogin() {
      const { form } = this
      if (!form.account) return uni.showToast({
        title: '账号后不能为空',
      if (!form.username) return uni.showToast({
        title: '账号不能为空',
        icon: 'none'
      })
      if (!form.password) return uni.showToast({
        title: '密码不能为空',
        icon: 'none'
      })
      if (!form.code) return uni.showToast({
        title: '验证码不能为空',
        icon: 'none'
      })
      loginPost({
        ...form,
        uuid: this.captcha.uuid,
        openId: this.$store.state.openId
      }).then(res => {
        console.log('res', res);
        if (res.code === 200) {
          this.setToken(res.data)
          getUserInfo().then(ress => {
            this.setUserInfo(ress.data)
            uni.redirectTo({
              url: "/pages/staff/index"
            })
          })
        }
      })
    }
  }
@@ -125,6 +167,9 @@
        width: 40rpx;
        height: 40rpx;
      }
      .captcha {
        width: 200rpx;
      }
      input {
        flex: 1;
        height: 100%;
@@ -171,4 +216,7 @@
    }
  }
}
.modal {
  padding: 32rpx;
}
</style>

 h5/static/ic_captcha.png

 h5/store/index.js

@@ -72,7 +72,7 @@
        // æ¸…空所有缓存
        empty(state) {
            state.token = ''
            state.userInfo = ''
            state.userInfo = {}
            uni.removeStorageSync('userInfo')
            uni.removeStorageSync('token')
        }

 h5/utils/service.js

@@ -2,7 +2,7 @@
export const http = function (options) {
    {
        return new Promise((resolve, reject) => {
            let token = uni.getStorageSync('token')
            let token = uni.getStorageSync('token') || ''
            // åœ¨ç™»å½•çš„时候需要储存 token uni.setStorageSync("authorization","这里是登录获取的token值")

            // uni.showLoading({
@@ -18,7 +18,7 @@
                method: options.method || 'GET',
                header: options.header || {
                    // æ ¹æ®å®žé™…接口设计 key å– token æˆ–者 authorization
                    token: token,
                    dm_user_token: token,
                    "content-type": 'application/json'
                },
                success: (res) => {
@@ -28,8 +28,8 @@
                    // ç™»å½•è¿‡æœŸ
                    if (data.code === 401) {
                        uni.navigateTo({
                            url: '/packageA/loginAgain/loginAgain'
                        })
                            url: '/pages/staffLogin/login'
                        });
                    }
                    if (data.code !== 200) {
                        uni.showToast({
@@ -46,6 +46,7 @@
                    uni.showToast({
                        title: '请求接口失败'
                    })
					
                    // è¿”回错误消息
                    reject(err)
                    uni.hideLoading()