提交

boman-h5/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "移动端",
+  "name": "h5",
   "version": "0.1.0",
   "private": true,
   "scripts": {

boman-h5/src/router/index.js

@@ -8,6 +8,10 @@ const edit = ()=>import('@/views/Edit.vue')
 const article = ()=>import('@/views/Article.vue')
 const editcategory = ()=>import('@/views/EditCategory.vue')
 const workbench = ()=>import('@/views/workbench.vue')
+const user = ()=>import('@/views/user.vue')
+const leave = ()=>import('@/views/leave.vue')
+const approval = ()=>import('@/views/approval.vue')
+
 Vue.use(VueRouter)
   const routes = [
      {
@@ -32,6 +36,11 @@ Vue.use(VueRouter)
          istoken:true
        }
      },
+     {
+      path:'/user',
+      component:user
+      
+    },
      {
        path:'/edit',
        component:edit,
@@ -50,6 +59,14 @@ Vue.use(VueRouter)
     {
       path:'/workbench',
       component:workbench
+    },
+    {
+      path:'/leave',
+      component:leave
+    },
+    {
+      path:'/approval',
+      component:approval
     }
   ]
 

boman-h5/src/views/approval.vue

@@ -0,0 +1,196 @@
+<template>
+    <div>
+        <div class="detailItem">
+            <div class="imgparent">
+                <van-nav-bar
+                    title="待审批"
+                    left-text="返回"
+                    left-arrow
+                    @click-left="onClickLeft"
+                />
+            </div>
+            <div class="approva_header">
+                <van-notice-bar
+                    color="#1989fa"
+                    background="#fff"
+                    left-icon="volume-o"
+                >
+                    技术是开发它的人的共同灵魂。
+                </van-notice-bar>
+            </div>
+            <div>
+                <van-list
+                    v-model="loading"
+                    :finished="finished"
+                    finished-text="没有更多了"
+                    @load="onLoad"
+                >
+                    <div class="approba_nave" v-for="(item,index) in list" :key="index">
+                        <p>
+                            <span class="soei"><i>王明</i>的请假申请</span>
+                            <span>2021-04-24</span>
+                        </p>
+                        <p>请假类型:事假</p>
+                        <p>开始时间：2021-04-25 13:00</p>
+                        <p>结束时间：2021-04-25 18:00</p>
+                    </div>
+                </van-list>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: "",
+      valuetao: "",
+      valuestartime: "",
+      valueendtime: "",
+      columns: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
+      columnstwo: ["杭州1", "宁波1", "温州1", "嘉兴1", "湖州1"],
+      showPicker: false,
+      showPickertwo: false,
+      showPickerstr: false, //开始时间
+      showPickerend: false, //结束时间
+      minDate: new Date(2020, 0, 1),
+      maxDate: new Date(2025, 10, 1),
+      currentDate: new Date(),
+      message: "",
+      uploader: [{ url: "https://img01.yzcdn.cn/vant/leaf.jpg" }],
+      list: [],
+      loading: false,
+      finished: false,
+    };
+  },
+  props: ["detailitem"],
+
+  methods: {
+    onClickLeft() {},
+    onConfirm(value) {
+      this.value = value;
+      this.showPicker = false;
+    },
+    // 请假类型
+    onConfirmtwo(value) {
+      this.valuetao = value;
+      this.showPickertwo = false;
+    },
+    // 开始时间
+    onConfirmstatime(value) {
+      this.valuestartime = value;
+      this.showPickerstr = false;
+    },
+    // 结束时间
+    onConfirmsendtime(value) {
+      this.valueendtime = value;
+      this.showPickerend = false;
+    },
+    // 提交
+    onSubmit(values) {
+      console.log("submit", values);
+    },
+    onLoad() {
+      // 异步更新数据
+      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+      setTimeout(() => {
+        for (let i = 0; i < 10; i++) {
+          this.list.push(this.list.length + 1);
+        }
+
+        // 加载状态结束
+        this.loading = false;
+
+        // 数据全部加载完成
+        if (this.list.length >= 40) {
+          this.finished = true;
+        }
+      }, 1000);
+    },
+  }
+};
+</script>
+
+<style lang="less">
+.formtr {
+  .stru {
+    .van-field__control {
+      text-align: right;
+    }
+  }
+
+  .van-cell:not(:last-child)::after {
+    border-bottom: 0;
+  }
+  .van-field__control--custom {
+    justify-content: flex-end;
+  }
+  .van-cell {
+    font-weight: 500;
+    color: #343434;
+    padding: 5.6vw 4.267vw;
+  }
+}
+</style>
+
+
+<style scoped lang="less">
+.detailItem {
+  background-color: #fff;
+//   height: 100vh;
+  p {
+    font-size: 3.333vw;
+    padding: 0.833vw 0;
+  }
+  .imgparent {
+    position: relative;
+    .bottom {
+      padding: 0 2.778vw;
+      margin-bottom: 1.389vw;
+      position: absolute;
+      bottom: 0.556vw;
+      background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent);
+      justify-content: space-between;
+      color: white;
+      display: flex;
+      left: 0;
+      right: 0;
+    }
+  }
+  .approba_nave {
+    border-bottom: 0.267vw solid #dadada;
+    margin: 16px 16px;
+    padding: 16px 0;
+    p {
+      font-size: 2.667vw;
+      font-family: PingFang SC;
+      font-weight: 400;
+      color: #666666;
+    }
+    p:nth-child(1) {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 2.133vw;
+      i {
+        font-style: normal;
+        font-weight: 700;
+      }
+      .soei {
+        font-size: 3.733vw;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #343434;
+      }
+      span:nth-child(2) {
+        color: #aaa;
+        font-weight: 500;
+      }
+    }
+  }
+}
+.approva_header {
+  box-shadow: 0vw 0.8vw 0.533vw 0vw rgba(218, 218, 218, 0.35);
+}
+</style>

boman-h5/src/views/leave.vue

@@ -0,0 +1,240 @@
+<template>
+    <div>
+        <div class="detailItem">
+            <div class="imgparent">
+                <van-nav-bar
+                    title="填写请假信息"
+                    left-text="返回"
+                    left-arrow
+                    @click-left="onClickLeft"
+                />
+            </div>
+            <div class="formtr">
+                <van-form @submit="onSubmit">
+                    <van-field
+                        readonly
+                        clickable
+                        name="picker"
+                        :value="value"
+                        label="部门"
+                        placeholder="点击选择部门"
+                        @click="showPicker = true"
+                        class="stru"
+                    />
+                    <van-popup
+                        v-model="showPicker"
+                        position="bottom"
+                    >
+                        <van-picker
+                            show-toolbar
+                            :columns="columns"
+                            @confirm="onConfirm"
+                            @cancel="showPicker = false"
+                        />
+                    </van-popup>
+                    <van-field
+                        readonly
+                        clickable
+                        name="picker"
+                        :value="valuetao"
+                        label="请假类型"
+                        placeholder="点击选择请假类型"
+                        @click="showPickertwo = true"
+                        class="stru"
+                    />
+                    <van-popup
+                        v-model="showPickertwo"
+                        position="bottom"
+                    >
+                        <van-picker
+                            show-toolbar
+                            :columns="columnstwo"
+                            @confirm="onConfirmtwo"
+                            @cancel="showPickertwo = false"
+                        />
+                    </van-popup>
+                    <van-field
+                        readonly
+                        clickable
+                        name="datetimePicker"
+                        :value="valuestartime"
+                        label="开始时间"
+                        placeholder="点击选择开始时间"
+                        @click="showPickerstr = true"
+                        class="stru"
+                    />
+                    <van-popup
+                        v-model="showPickerstr"
+                        position="bottom"
+                    >
+                        <van-datetime-picker
+                            type="datetime"
+                            v-model="currentDate"
+                            @confirm="onConfirmstatime"
+                            @cancel="showPickerstr = false"
+                            :min-date="minDate"
+                            :max-date="maxDate"
+                        />
+                    </van-popup>
+                    <van-field
+                        readonly
+                        clickable
+                        name="datetimePicker"
+                        :value="valueendtime"
+                        label="结束时间"
+                        placeholder="点击选择结束时间"
+                        @click="showPickerend = true"
+                        class="stru"
+                    />
+                    <van-popup
+                        v-model="showPickerend"
+                        position="bottom"
+                    >
+                        <van-datetime-picker
+                            type="time"
+                            @confirm="onConfirmsendtime"
+                            @cancel="showPickerend = false"
+                        />
+                    </van-popup>
+                    <van-field
+                        v-model="message"
+                        rows="2"
+                        autosize
+                        label="请假事由"
+                        type="textarea"
+                        maxlength="50"
+                        placeholder="请输入请假事由"
+                        show-word-limit
+                        class="stru"
+                    />
+                    <van-field
+                        name="uploader"
+                        label="文件上传"
+                        class="stru"
+                    >
+                        <template #input>
+                            <van-uploader v-model="uploader" />
+                        </template>
+                    </van-field>
+                    <div style="margin: 16px;">
+                        <van-button
+                            round
+                            block
+                            type="info"
+                            native-type="submit"
+                        >提交</van-button>
+                    </div>
+                </van-form>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      value: "",
+      valuetao: "",
+      valuestartime: "",
+      valueendtime: "",
+      columns: ["杭州", "宁波", "温州", "嘉兴", "湖州"],
+      columnstwo: ["杭州1", "宁波1", "温州1", "嘉兴1", "湖州1"],
+      showPicker: false,
+      showPickertwo: false,
+      showPickerstr: false, //开始时间
+      showPickerend: false, //结束时间
+      minDate: new Date(2020, 0, 1),
+      maxDate: new Date(2025, 10, 1),
+      currentDate: new Date(),
+      message: "",
+      uploader: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
+    };
+  },
+  props: ["detailitem"],
+
+  methods: {
+    onClickLeft() {},
+    onConfirm(value) {
+      this.value = value;
+      this.showPicker = false;
+    },
+    // 请假类型
+    onConfirmtwo(value) {
+      this.valuetao = value;
+      this.showPickertwo = false;
+    },
+    // 开始时间
+    onConfirmstatime(value) {
+      this.valuestartime = value;
+      this.showPickerstr = false;
+    },
+    // 结束时间
+    onConfirmsendtime(value) {
+      this.valueendtime = value;
+      this.showPickerend = false;
+    },
+    // 提交
+    onSubmit(values) {
+      console.log("submit", values);
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.formtr {
+  .stru {
+    .van-field__control {
+      text-align: right;
+    }
+  }
+
+  .van-cell:not(:last-child)::after {
+    border-bottom: 0;
+  }
+  .van-field__control--custom{
+      justify-content: flex-end;
+  }
+  .van-cell{
+      font-weight: 500;
+      color: #343434;
+      padding: 5.6vw 4.267vw;
+  }
+}
+</style>
+
+
+<style scoped lang="less">
+.detailItem {
+ background-color:#fff;
+ height: 100vh;
+  p {
+    font-size: 3.333vw;
+    padding: 0.833vw 0;
+  }
+  .imgparent {
+    position: relative;
+    .bottom {
+      padding: 0 2.778vw;
+      margin-bottom: 1.389vw;
+      position: absolute;
+      bottom: 0.556vw;
+      background: linear-gradient(0deg, rgba(0, 0, 0, 0.85), transparent);
+      justify-content: space-between;
+      color: white;
+      display: flex;
+      left: 0;
+      right: 0;
+    }
+  }
+}
+.formtr {
+  .stru {
+    .van-field__control {
+      text-align: right;
+    }
+  }
+}
+</style>

boman-h5/src/views/register.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-      <login-top Text="注册移动端">
+      <login-top Text="注册用户">
           <div slot="right" style="font-size:3.611vw" @click="$router.push('/login')">用户登录</div>
       </login-top>
         <login-text label="姓名" 

boman-h5/src/views/user.vue

@@ -0,0 +1,273 @@
+<template>
+    <div
+        class="home"
+        v-if="category"
+    >
+        <div class="categorytab">
+            <!-- <div class="category-ico" @click="$router.push('/editcategory')"><van-icon name="setting-o" /></div> -->
+            <div class="user_header">
+                <div><img
+                        src="../assets/img/icon_hp_kqdk.png"
+                        alt=""
+                    ></div>
+                <div class="userheader_one">
+                    <p>李鑫</p>
+                    <p>所在部门：市监局</p>
+                </div>
+            </div>
+            <div class="user_nicti">
+
+                <van-swipe
+                    vertical
+                    class="notice-swipe"
+                    :autoplay="3000"
+                    :show-indicators="false"
+                >
+                    <van-swipe-item>
+                        <div class="nsernictiv_nav">
+                            <img
+                                src="../assets/img/icon_tsxx.png"
+                                alt=""
+                            >
+                            <p>你有四条待审批申请，请前往首页待审批进行……</p>
+                            <span>2021-04-24</span>
+                        </div>
+                    </van-swipe-item>
+                    <van-swipe-item>
+                        <div class="nsernictiv_nav">
+                            <img
+                                src="../assets/img/icon_tsxx.png"
+                                alt=""
+                            >
+                            <p>你有四条待审批申请，请前往首页待审批进行……</p>
+                            <span>2021-04-24</span>
+                        </div>
+                    </van-swipe-item>
+                    <van-swipe-item>
+                        <div class="nsernictiv_nav">
+                            <img
+                                src="../assets/img/icon_tsxx.png"
+                                alt=""
+                            >
+                            <p>你有四条待审批申请，请前往首页待审批进行……</p>
+                            <span>2021-04-24</span>
+                        </div>
+                    </van-swipe-item>
+                </van-swipe>
+            </div>
+
+        </div>
+        <div class="index_nav">
+            <p>
+
+                <img
+                    src="../assets/img/icon_mine_kqjl.png"
+                    alt=""
+                >
+                <span>考勤打卡</span>
+                <img
+                    src="../assets/img/icon_b;ack_enter.png"
+                    alt=""
+                >
+            </p>
+
+        </div>
+        <nav-bar></nav-bar>
+    </div>
+</template>
+
+<script>
+import NavBar from "@/components/common/Navbar.vue";
+import cover from "./cover";
+export default {
+  data() {
+    return {
+      category: [],
+      active: 1
+    };
+  },
+  components: {
+    NavBar,
+    cover
+  },
+  activated() {
+    if (localStorage.getItem("newCat")) {
+      let newCat = JSON.parse(localStorage.getItem("newCat"));
+      this.category = this.changeCategory(newCat);
+      this.selectArticle();
+    }
+  },
+  methods: {
+    async selectCategory() {
+      if (localStorage.getItem("newCat")) {
+        return;
+      }
+      const res = await this.$http.get("/category");
+      this.category = this.changeCategory(res.data);
+      this.selectArticle();
+    },
+    changeCategory(data) {
+      const category1 = data.map((item, index) => {
+        item.list = [];
+        item.page = 0;
+        item.finished = false;
+        item.loading = true;
+        item.pagesize = 10;
+        return item;
+      });
+      return category1;
+    },
+    async selectArticle() {
+      const categoryitem = this.categoryItem();
+      const res = await this.$http.get("/detail/" + categoryitem._id, {
+        params: {
+          page: categoryitem.page,
+          pagesize: categoryitem.pagesize
+        }
+      });
+      categoryitem.list.push(...res.data);
+      categoryitem.loading = false;
+      if (res.data.length < categoryitem.pagesize) {
+        categoryitem.finished = true;
+      }
+    },
+    onLoad() {
+      const categoryitem = this.categoryItem();
+      setTimeout(() => {
+        categoryitem.page += 1;
+        this.selectArticle();
+      }, 1000);
+    },
+    categoryItem() {
+      const categoryitem = this.category[this.active];
+      return categoryitem;
+    }
+  },
+  watch: {
+    active() {
+      const categoryitem = this.categoryItem();
+      if (!categoryitem.list.length) {
+        this.selectArticle();
+      }
+    }
+  },
+  created() {
+    this.selectCategory();
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.home {
+  //   background-color: #fff;
+  .categorytab {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    .user_header {
+      height: 40.533vw;
+      background: url("../assets/img/pic_mine_tbbg.png") no-repeat;
+      background-size: 100% 100%;
+      display: flex;
+      justify-content: space-between;
+      padding: 4.533vw;
+      align-items: center;
+      div:nth-child(2) {
+        flex: 1;
+        p:nth-child(1) {
+          margin-bottom: 1.333vw;
+          font-size: 17px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          color: #ffffff;
+        }
+        p:nth-child(2) {
+          font-size: 2.933vw;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+      div:nth-child(1) {
+        display: flex;
+        width: 16.8vw;
+        height: 16.8vw;
+        border-radius: 16.8vw;
+        overflow: hidden;
+        margin-right: 6.133vw;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
+    //   第二部分样式
+    .user_nicti {
+      height: 10.667vw;
+      padding: 0 16px;
+      margin-bottom: 5.333vw;
+      .notice-swipe {
+        height: 10.667vw;
+        line-height: 10.667vw;
+        .nsernictiv_nav {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          p {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-size: 2.933vw;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #ff6108;
+          }
+          span {
+            width: 18.667vw;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            font-size: 2.667vw;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #aaaaaa;
+          }
+          img {
+            width: 2.667vw;
+            height: 3.467vw;
+            margin-right: 1.333vw;
+          }
+        }
+      }
+    }
+  }
+  //  第三部分样式
+  .index_nav {
+    background-color: #fff;
+    p {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 6.667vw;
+      height: 14.933vw;
+      span {
+        font-size: 3.733vw;
+        font-family: PingFang SC;
+        font-weight: 400;
+        color: #343434;
+        flex: 1;
+        margin-left: 2.667vw;
+      }
+      img:nth-child(1){
+        width: 7.467vw;
+        height: 7.467vw;
+      }
+      img:nth-child(3){
+        width: 1.333vw;
+        height: 2.4vw;
+      }
+    }
+  }
+}
+</style>

boman-h5/src/views/workbench.vue

@@ -2,35 +2,11 @@
   <div class="home" v-if="category">
     <div class="categorytab">
       <!-- <div class="category-ico" @click="$router.push('/editcategory')"><van-icon name="setting-o" /></div> -->
-     <div class="index_header">
-		   <div class="inhe_one">
-          <p>
-            <span><i>1346</i>项</span>
-            <span>总流程审批</span>
-          </p>
-          <p>
-             <span><i>1346</i>项</span>
-            <span>总流程审批</span>
-          </p>
-       </div>
-       <div class="inhe_two">
-         <img src="../assets/img/icon_hp_spjl.png" alt="">
-       </div>
-	 </div>
-   <div class="index_header index_headertr">
-		   <div class="inhe_one">
-          <p>
-            <span><i>1346</i>项</span>
-            <span>总流程审批</span>
-          </p>
-          <p>
-             <span><i>1346</i>项</span>
-            <span>总流程审批</span>
-          </p>
-       </div>
-       <div class="inhe_two">
-         <img src="../assets/img/icon_hp_spjl.png" alt="">
-       </div>
+     <div class="workben_header">
+		   <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
+             <van-swipe-item><img src="../assets/img/pic_gzt_banner.png" alt=""></van-swipe-item>
+             <van-swipe-item><img src="../assets/img/pic_gzt_banner.png" alt=""></van-swipe-item>
+       </van-swipe>
 	 </div>
    <div class="index_nav">
      <p>
@@ -58,7 +34,7 @@ export default {
   data() {
     return {
       category: [],
-      active: 0
+      active: 1
     };
   },
   components: {
@@ -132,63 +108,26 @@ export default {
 };
 </script>
 
-<style lang="less" scoped="">
+<style lang="less" scoped>
 .home {
   background-color: #fff;
   padding: 7.999px; 
   .categorytab{
 	  width: 100%;
     height: 100%;
-    .index_header{
-      position: relative;
-      height: 29.333vw;
-      background: url('../assets/img/pic_bg_spjl.png') no-repeat ;
-      background-size: 100% 100%;
-      display: flex;
-      margin-bottom: 2.933vw;
-      .inhe_one{
-        width: 70%;
-         display: flex;
-         justify-content: space-between;
-         align-items: center;
-        p{
-          flex: 1;
-          display: flex;
-          flex-direction: column;
-          text-align: center;
-          line-height: 9.333vw;
-          span{
-             font-size: 2.667vw;
-             font-family: PingFang SC ;
-             font-weight: 500;
-             color: #666666;
-              line-height: 6.933vw;
-             i{
-               font-style: normal;
-               font-size: 6.4vw;
-               font-family: PingFang SC;
-               font-weight: 800;
-               color: #2D6B89;
-               line-height: 1.6vw;
-             }
-          }
-         
-        }
-        p:nth-child(1){
-           border-right: 1px solid #80B1C8;
-        }
-      }
-      .inhe_two{
-        width: 30%;
-        display: flex;
-        justify-content: center;
-        // align-items: center;
-        margin-top: 8vw;
-        img{
-          width: 12.267vw;
-          height: 12.267vw;
-        }
-      }
+    .workben_header{
+      margin-bottom: 7.467vw;
+       .my-swipe .van-swipe-item {
+    color: #fff;
+    font-size: 5.333vw;
+    // line-height: 150px;
+    text-align: center;
+    // background-color: #39a9ed;
+    img{
+      width: 100%;
+      height: 100%;
+    }
+  }
       
     }
     .index_headertr{