修改若干项，全局导入vant组件，可无需手动引入，添加开发服务代理地址，添加履职页面，路由配置添加hideTabBar选项，控制底部导航栏显示

package.json

@@ -18,7 +18,6 @@
     "v-calendar": "^2.4.1",
     "vant": "^2.12.54",
     "vue": "^2.7.14",
-    "vue-quick-calendar": "^1.0.92",
     "vue-router": "^3.6.5",
     "vuex": "^3.6.2"
   },

src/api/public.js

@@ -3,7 +3,7 @@ import request from '@/utils/request'
 // 登录方法
 export function login(data) {
   return request({
-    url: '/auth/login',
+    url: '/auth/loginApp ',
     headers: {
       isToken: false
     },
@@ -43,7 +43,7 @@ export function userInfo() {
 // 退出方法
 export function logout() {
   return request({
-    url: '/auth/logout',
+    url: '/auth/logoutApp',
     method: 'delete'
   })
 }

src/assets/css/variables.scss

@@ -1,3 +1,4 @@
- 
+
 // variables
-$background-color: #f8f8f8;
+$background-color: #ffffff;
+

src/components/DatePicker/index.vue

@@ -5,12 +5,22 @@
         ref="Calendar"
         class="calendar"
         v-model="date"
-        :min-date='new Date()'
+        :disabled-dates='disabledDates'
         @transition-start="queryMoth"
         @dayclick="onDayClick">
       </vc-date-picker>
     </div>
-    <span class="hide-line" @click="foldBox">^</span>
+    <van-divider @click="foldBox">
+      <van-icon v-if="showPicker"  name="arrow-up" color="#ccc" size="20"/>
+      <van-icon v-else name="arrow-down" color="#ccc" size="20"/>
+    </van-divider>
+<!--    <p class="hide-line" @click="foldBox">-->
+<!--      <span>-->
+<!--        <van-icon v-if="showPicker"  name="arrow-up" color="#ccc" size="20"/>-->
+<!--        <van-icon v-else name="arrow-down" color="#ccc" size="20"/>-->
+<!--      </span>-->
+
+<!--    </p>-->
   </div>
 </template>
 
@@ -20,27 +30,32 @@ export default {
     return{
       date:new Date(),
       showPicker:true,
-      num:4,
+      num:0,
       height:null,
+      disabledDates:{
+        end: new Date(),
+      }
     }
   },
   mounted() {
 
   },
   watch:{
-    //
+    // 监听显示状态
     showPicker (){
       let weeksBox = document.getElementsByClassName('vc-day');
       let pickerBox = document.getElementsByClassName('date-picker-box')[0];
       if( this.showPicker){
         for(let i = 0; i < weeksBox.length;i++){
-          weeksBox[i].style.transform = `translate(0, 0px)`;
+          weeksBox[i].style.transitionDuration = `.5s`;
+          weeksBox[i].style.transform = `translate(0, 0)`;
         }
         pickerBox.style.height = `${this.height}px`;
         console.log('show')
       }else {
         this.height = pickerBox.offsetHeight;
         for(let i = 0; i < weeksBox.length;i++){
+          weeksBox[i].style.transitionDuration = `.5s`;
           weeksBox[i].style.transform = `translate(0, -${this.num * 32}px)`;
         }
         pickerBox.style.height =  `100px`;
@@ -50,6 +65,8 @@ export default {
   },
   methods:{
     foldBox(){
+      let date =  this.$refs.Calendar
+      console.log(date,'this.$refs.Calendar')
       this.showPicker = !this.showPicker;
     },
     // 获取年、月份
@@ -62,6 +79,7 @@ export default {
     },
     //点击日期
     onDayClick(day){
+      console.log(day,'day')
       let dayLine = day.classes[7].substring(5);
       this.num = dayLine -1;
       this.$emit('day',day.id)
@@ -91,24 +109,37 @@ export default {
   }
   .vc-weeks{
     overflow: hidden;
+    transition-duration: .8s;
+    background-color: #fff;
+    padding-top: 0;
   }
   .vc-weekday{
     position: relative;
+    padding-top: 10px;
     background-color: #fff;
     z-index:10;
   }
+  .vc-day{
+    transition-duration: .5s;
+  }
   .date-picker-box{
     overflow: hidden;
+    transition-duration: .5s;
   }
   .hide-line{
     box-sizing: border-box;
-    display: inline-block;
+    display: flex;
     height: 1px;
     width: 100%;
-    margin-top: 30px;
-    background-color: red;
-    text-align: center;
+    margin: 30px 0;
+    background-color: #eaeaea;
+    justify-content: center;
     align-items: center;
+    >span{
+      display: inline-block;
+      padding: 6px;
+      background-color: #fff;
+    }
   }
 }
 </style>

src/components/NavBar/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="nav-bar">
     <van-nav-bar
       :title="title"
       left-arrow
@@ -11,11 +11,9 @@
 <script>
 import {NavBar} from "vant";
 export default {
-  components:{
-    [NavBar.name]: NavBar,
-  },
+  components:{NavBar},
   computed:{
-    title:function (){
+    title (){
       return this.$router.history.current .meta.title
     }
   },
@@ -26,3 +24,8 @@ export default {
   }
 }
 </script>
+<style lang="scss" scoped>
+  .nav-bar{
+    -box-shadow: 0 10px 10px #333;
+  }
+</style>

src/components/layouts/index.vue

@@ -6,7 +6,7 @@
       </keep-alive>
       <router-view v-else></router-view>
     </div>
-    <div class="layout-footer">
+    <div v-if="!$route.meta.hideTabBar" class="layout-footer">
       <TabBar :data="tabbars" @change="handleChange" />
     </div>
   </div>
@@ -16,7 +16,6 @@
 import TabBar from '@/components/TabBar'
 import {userInfo} from "@/api/public";
 export default {
-  name: 'AppLayout',
   data() {
     return {
       tabbars: [

src/config/env.development.js

@@ -1,6 +1,6 @@
 /** 本地开发环境*/
 module.exports = {
-  title: 'vue-h5-dev',
+  title: 'soc-app',
   baseUrl: 'http://localhost:9018', // 项目地址
   baseApi: '/luojun', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
   APPID: 'xxx',

src/plugins/vant.js

@@ -1,6 +1,7 @@
 // 按需全局引入 vant组件
 import Vue from 'vue'
-import { Button,Form,Field, List, Cell, Tabbar, TabbarItem ,Checkbox , CheckboxGroup , Radio, RadioGroup,Dialog, CellGroup,Card,Grid ,GridItem  } from 'vant'
+import { Button,Form,Field, List, Cell, Tabbar, TabbarItem ,Checkbox , CheckboxGroup , Radio, RadioGroup,Dialog, CellGroup,Card,Grid ,GridItem ,Sticky} from 'vant'
+
 Vue.use(Button)
 Vue.use(Form)
 Vue.use(Field)
@@ -16,3 +17,4 @@ Vue.use(CellGroup);
 Vue.use(Card);
 Vue.use(Grid);
 Vue.use(GridItem);
+Vue.use(Sticky);

src/router/index.js

@@ -3,12 +3,6 @@ import Router from 'vue-router'
 import  {routers}  from './router.config.js'
 
 Vue.use(Router)
-// hack router push callback
-// const originalPush = Router.prototype.push
-// Router.prototype.push = function push(location, onResolve, onReject) {
-//   if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
-//   return originalPush.call(this, location).catch(err => err)
-// }
 const  router = new Router({
   mode:"hash",
   scrollBehavior: () => ({ y: 0 }),
@@ -19,9 +13,9 @@ const  router = new Router({
 
 router.beforeEach((to, from, next) => {
   console.log('从'+from.path+'跳向'+to.path)
-  if( to.path === '/public') return next();
+  if( to.path === '/login') return next();
   let token = sessionStorage.getItem('access_token');
-  if(!token) return next('/public');
+  if(!token) return next('/login');
   next()
 })
 

src/router/router.config.js

@@ -5,10 +5,10 @@
 export let routers = [
   {
     path: '/',
-    redirect:'/public'
+    redirect:'/login'
   },
   {
-    path: '/public',
+    path: '/login',
     component: () => import('@/views/login'),
     meta: {
       title: '登录',
@@ -71,6 +71,12 @@ export let routers = [
         name: 'protectionDetail',
         component: () => import('@/views/menu/protection/detail'),
         meta: { title: '防区信息', keepAlive: false }
+      },
+      {
+        path: '/lz-edit',
+        name: 'lz-edit',
+        component: () => import('@/views/menu/LZRegister/edit'),
+        meta: { title: '履职', keepAlive: false ,hideTabBar:true}
       }
     ],
   },

src/store/modules/app.js

@@ -0,0 +1,26 @@
+const state = {
+  //用户名
+  userName: null,
+  //机构id
+  orgId:null,
+  //用户id
+  id:null,
+  //机构名称
+  orgName:null,
+}
+const mutations = {
+  SET_USER_NAME(state, name) {
+    state.userName = name;
+  },
+}
+const actions = {
+  // 设置name
+  // setUserName({ commit }, name) {
+  //   commit('SET_USER_INFO', name)
+  // }
+}
+export default {
+  state,
+  mutations,
+  actions
+}

src/utils/request.js

@@ -50,7 +50,7 @@ let success = response => {
   if (res.code === 401) {
     Toast.fail(res.msg);
     sessionStorage.clear();
-    router.push('/public');
+    router.push('/login');
     return  Promise.reject('error');
   }
   if (res.code === 500) {

src/views/login.vue

@@ -23,7 +23,9 @@
         <van-cell value="忘记密码">
           <!-- 使用 title 插槽来自定义标题 -->
           <template #title>
-            <van-checkbox v-model="checked" shape="square">记住密码</van-checkbox>
+            <div style="display: flex;align-items: center;">
+              <van-checkbox class="custom-title" icon-size="15" v-model="checked" shape="square">记住密码</van-checkbox>
+            </div>
           </template>
         </van-cell>
 <!--        <div>-->
@@ -40,7 +42,7 @@
 
 <script>2
 // 请求接口
-import {login,getUserInfo} from '@/api/public.js'
+import {login} from '@/api/public.js'
 import { mapGetters } from 'vuex'
 export default {
   data() {
@@ -81,19 +83,19 @@ export default {
   justify-content: center;
   align-items: center;
   > div {
-    width: 63vw;
-    padding: 4vw 0;
+    width: 450px;
+    padding: 30px 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     background-color: #fff;
-    border-radius: 1vw;
+    border-radius: 10px;
     .avatar-box {
       display: flex;
       justify-content: center;
       align-items: center;
-      width: 19.5vw;
-      height: 19.5vw;
+      width: 150px;
+      height: 150px;
       border-radius: 100%;
       border: 1px solid #ccc;
     }

src/views/menu/LZRegister/edit.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="lz-edit">
+    <nav-bar></nav-bar>
+    <div class="page-container">
+      <div class="card">
+        <van-panel title="安全员每日营业前履职"  status="待履职">
+          <van-cell title="日期时间" value="2023.10.23 12:12:11" />
+          <van-collapse :border="false" v-model="activeNames">
+            <van-collapse-item title="履职内容" :name="1">
+              <van-cell title="检查内容：" value="1" />
+              <van-cell title="NFC："  >
+                <template #extra>
+                  <span >已扫{{1}}</span>
+                  <span >未扫{{2}}</span>
+                </template>
+              </van-cell>
+              <van-cell title="检查区域：">
+                <template #extra>
+                  <span >已查{{1}}</span>
+                  <span >未查{{2}}</span>
+                </template>
+              </van-cell>
+            </van-collapse-item>
+          </van-collapse>
+        </van-panel>
+      </div>
+      <div class="card">
+        <van-panel title="巡检区域">
+          <div style="padding: 10px;">
+            <van-row >
+              <van-col span="12">
+                <div class="child check-item" >
+                  营业网点-设备间
+                  <van-icon name="success" color="primary"/>
+                  <van-icon name="fail" color="red"/>
+                </div>
+              </van-col>
+              <van-col span="12">
+                <div class="check-item">营业网点-钞车间</div>
+              </van-col>
+              <van-col span="12">
+                <div class="check-item">营业网点-消防设施</div>
+              </van-col>
+              <van-col span="12">
+                <div class="check-item">营业网点-客户区</div>
+              </van-col>
+            </van-row>
+            <van-cell title="检查内容：" value="内容" />
+            <van-cell title="NFC："  >
+              <template #right-icon>
+                <van-icon name="search" class="search-icon" />
+              </template>
+            </van-cell>
+          </div>
+        </van-panel>
+      </div>
+
+      <div class="card">
+        <van-collapse v-model="activeNames">
+          <van-collapse-item title="布撤防检查" name="1">
+            <van-cell title="入侵报警撤防时间：">
+              <template #right-icon>
+                <van-switch
+                  v-model="checked"
+                  active-color="#4fc08d"
+                  inactive-color="orange"
+                  size="20" />
+              </template>
+            </van-cell>
+            <van-cell title="现金区" is-link/>
+            <van-cell title="客户区" is-link/>
+            <van-cell title="整改期限" is-link/>
+          </van-collapse-item>
+          <van-collapse-item title="技防设备检查" name="2">
+            <van-cell title="报警及通信设备状态是否良好：">
+              <template #right-icon>`
+                <van-switch
+                  v-model="checked"
+                  active-color="#4fc08d"
+                  inactive-color="orange"
+                  size="20" />
+              </template>
+            </van-cell>
+            <van-field
+              v-model="info"
+              rows="1"
+              autosize
+              label="情况描述："
+              type="textarea"
+              placeholder="请输入"
+            />
+            <div class="upload-box">
+              <van-uploader v-model="fileList" multiple />
+            </div>
+            <van-cell title="整改期限" is-link/>
+          </van-collapse-item>
+          <van-collapse-item title="技防设备检查" name="2">
+            <van-cell title="报警及通信设备状态是否良好：">
+              <template #right-icon>`
+                <van-switch
+                  v-model="checked"
+                  active-color="#4fc08d"
+                  inactive-color="orange"
+                  size="20" />
+              </template>
+            </van-cell>
+            <van-field
+              v-model="info"
+              rows="1"
+              autosize
+              label="情况描述："
+              type="textarea"
+              placeholder="请输入"
+            />
+            <div class="upload-box">
+              <van-uploader v-model="fileList" multiple />
+            </div>
+            <van-cell title="整改期限" is-link/>
+          </van-collapse-item>
+        </van-collapse>
+      </div >
+
+      <p class="warning-msg">需要完成所有区域的履职内容才能提交内容</p>
+      <div class=""></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import NavBar from '@/components/NavBar';
+export default {
+  components:{NavBar},
+  data(){
+    return {
+      checked:false,
+      info:'',
+      activeNames: ['1'],
+      fileList:[]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+  .lz-edit{
+
+  }
+  .page-container{
+    height: calc(100vh - 90px);
+    background-color: #f1f1f1;
+    overflow: auto;
+    padding: 20px;
+  }
+  .card{
+    margin-bottom: 20px;
+    box-shadow: 0 10px 10px #eaeaea;
+  }
+  .check-item{
+    background-color: #f1f1f1;
+    margin: 10px;
+    padding:10px;
+    color:#aaa;
+    border-radius: 6px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .custom-title {
+    margin-right: 4px;
+    vertical-align: middle;
+  }
+
+  .search-icon {
+    font-size: 26px;
+    font-weight: 600;
+    line-height: inherit;
+    color: orange;
+  }
+  .upload-box{
+    margin: 30px;
+  }
+  .warning-msg{
+    color: orange;
+    text-align: center;
+    height: 40px;
+    line-height: 40px;
+  }
+</style>

src/views/menu/LZRegister/index.vue

@@ -1,7 +1,97 @@
 <template>
-  <div class="lvzhi">
+  <div class="lvzhi" ref="container">
     <nav-bar></nav-bar>
-    <DatePicker></DatePicker>
+    <div class="lz-container"  >
+      <van-sticky :container="container" style="padding: 0 20px;">
+        <DatePicker></DatePicker>
+      </van-sticky>
+      <div class="lz-list">
+        <div class="list-item">
+          <p>今日履职</p>
+          <van-tabs >
+            <van-tab title="待完成">
+                <template #title>待完成 {{1}} </template>
+              <van-cell-group>
+                <van-cell title="单元格" is-link to="lz-edit" value="内容" :value-class="`title-orange`"/>
+                <van-cell title="单元格" is-link to="index" value="内容" :value-class="`title-orange`"/>
+                <van-cell title="单元格" is-link to="index" value="内容" :value-class="`title-orange`"/>
+              </van-cell-group>
+            </van-tab>
+            <van-tab title="未完成">
+              <template #title>未完成 {{1}} </template>
+              <van-cell-group>
+                <van-cell title="单元格" value="内容" />
+                <van-cell title="单元格" value="内容" label="描述信息" :value-class="`title-red`" />
+              </van-cell-group>
+            </van-tab>
+            <van-tab title="已完成">
+              <template #title>已完成 {{1}} </template>
+              <van-cell-group>
+                <van-cell title="单元格" value="内容" />
+                <van-cell title="单元格" value="内容" label="描述信息" :value-class="`title-green`"/>
+              </van-cell-group>
+            </van-tab>
+          </van-tabs>
+        </div>
+        <div class="list-item">
+          <p>今日履职</p>
+          <van-tabs >
+            <van-tab title="待完成">
+              <template #title>待完成 {{1}} </template>
+              <van-cell-group>
+                <van-cell title="单元格" is-link to="index" value="内容" :value-class="`title-orange`"/>
+                <van-cell title="单元格" is-link to="index" value="内容" :value-class="`title-orange`"/>
+                <van-cell title="单元格" is-link to="index" value="内容" :value-class="`title-orange`"/>
+                <van-cell title="单元格" is-link to="index" value="内容" :value-class="`title-orange`"/>
+                <van-cell title="单元格" is-link to="index" value="内容" :value-class="`title-orange`"/>
+              </van-cell-group>
+            </van-tab>
+            <van-tab title="未完成">
+              <template #title>未完成 {{1}} </template>
+              <van-cell-group>
+                <van-cell title="单元格" value="内容" />
+                <van-cell title="单元格" value="内容" label="描述信息" :value-class="`title-red`" />
+              </van-cell-group>
+            </van-tab>
+            <van-tab title="已完成">
+              <template #title>已完成 {{1}} </template>
+              <van-cell-group>
+                <van-cell title="单元格" value="内容" />
+                <van-cell title="单元格" value="内容" label="描述信息" :value-class="`title-green`"/>
+              </van-cell-group>
+            </van-tab>
+          </van-tabs>
+        </div>
+        <div class="list-item">
+          <p>今日履职</p>
+          <van-tabs >
+            <van-tab title="待完成">
+              <template #title>待完成 {{1}} </template>
+              <van-cell-group>
+                <van-cell title="单元格" is-link to="index" value="内容" :value-class="`title-orange`"/>
+                <van-cell title="单元格" is-link to="index" value="内容" :value-class="`title-orange`"/>
+                <van-cell title="单元格" is-link to="index" value="内容" :value-class="`title-orange`"/>
+                <van-cell title="单元格" is-link to="index" value="内容" :value-class="`title-orange`"/>
+              </van-cell-group>
+            </van-tab>
+            <van-tab title="未完成">
+              <template #title>未完成 {{1}} </template>
+              <van-cell-group>
+                <van-cell title="单元格" value="内容" />
+                <van-cell title="单元格" value="内容" label="描述信息" :value-class="`title-red`" />
+              </van-cell-group>
+            </van-tab>
+            <van-tab title="已完成">
+              <template #title>已完成 {{1}} </template>
+              <van-cell-group>
+                <van-cell title="单元格" value="内容" />
+                <van-cell title="单元格" value="内容" label="描述信息" :value-class="`title-green`"/>
+              </van-cell-group>
+            </van-tab>
+          </van-tabs>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -14,11 +104,11 @@ export default {
   data(){
     return{
       date:new Date(),
-
+      container: null,
     }
   },
   mounted() {
-
+    this.container = this.$refs.container;
   },
   computed:{
     ...mapGetters(['orgName','orgId']),
@@ -36,6 +126,38 @@ export default {
 
 <style lang="scss" scoped>
   .lvzhi{
-
+    height: 100%;
+    overflow: hidden;
+  }
+  .lz-container{
+    height: calc(100vh - 90px);
+    overflow: auto;
+  }
+  .top-date-box{
+    padding: 0 20px;
+  }
+  .lz-list{
+    box-sizing: border-box;
+    background-color: #f1f1f1;
+    overflow: auto;
+    margin-bottom: 100px;
+  }
+  .list-item{
+    margin: 20px;
+    >p{
+      color:#999;
+      font-size: 30px;
+      height: 60px;
+      line-height: 60px;
+    }
+  }
+  .title-red{
+    color: #f16363;
+  }
+  .title-red{
+    color: #58dc33;
+  }
+  .title-orange{
+    color: #fd8104;
   }
 </style>

vue.config.js

@@ -84,12 +84,12 @@ module.exports = defineConfig({
           '^/jwx':'/'
         }
       },
-      '/test-serve': {
-        target: "http://10.87.10.91:8080",
+      '/dev': {
+        target: "http://10.87.10.55:8080",
         // ws:true,
         changOrigin:true,
         pathRewrite:{
-          '^/test-serve':'/'
+          '^/dev-serve':'/'
         }
       },
     }