base x

TODO.md

@@ -0,0 +1,4 @@
+# 钉钉办公系统 - 待办事项
+
+* [ ] 制作一个底部弹窗选择选项和取消的组件 (components) 
+

src/App.vue

@@ -1,46 +1,53 @@
 <template>
   <div id="app">
-    <van-tabbar v-model="active" route>
-      <van-tabbar-item icon="home-o" replace to="/">首页</van-tabbar-item>
-      <van-tabbar-item icon="search" replace to="/about">审批</van-tabbar-item>
-      <van-tabbar-item icon="search" replace to="/about">我的</van-tabbar-item>
-    </van-tabbar>
-    <router-view/>
+    <router-view />
+    <!-- <nav-bar v-show="!isShowtabbar"></nav-bar> -->
+    <tab-bar v-show="isShowtabbar"></tab-bar>
   </div>
 </template>
 
 <script>
+import TabBar from '@/components/TabBar'
+// import NavBar from '@/components/NavBar'
 export default {
+  components: {
+    TabBar,
+    // NavBar
+  },
   data() {
     return {
-      active: 0,
+      allowPath: ['/', '/approve', '/my'],
+      tabbarList: [
+        {
+          title: '首页',
+          to: '/',
+          icon: require("@/assets/icons-index.png"),
+          iconSel: require("@/assets/icons-index-sel.png"),
+        },
+        {
+          title: '审批',
+          to: '/about',
+          icon: require("@/assets/icons-approve.png"),
+          iconSel: require("@/assets/icons-approve-sel.png"),
+        },
+        {
+          title: '我的',
+          to: '/my',
+          icon: require("@/assets/icons-my.png"),
+          iconSel: require("@/assets/icons-my-sel.png"),
+        },
+      ],
+      tabbarActive: 0,
     };
   },
+  computed: {
+    isShowtabbar () {
+      const { path } = this.$route
+      return this.allowPath.includes(path)
+    }
+  },
+  created() {
+  }
 
 }
 </script>
-
-
-<style>
-
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-#nav {
-  padding: 30px;
-}
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
-</style>

src/components/Empty/index.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="empty-container flex flex-col flex-col-aic flex-col-jcc">
+        <div class="iconbox">
+            <van-icon :name="iconName" color="rgba(50, 144, 196, 1)" :size="iconSize"/>
+        </div>
+        <div class="tips">{{  tip  }}</div>
+    </div>
+</template>
+
+<script>
+
+// Icon类型枚举
+const TypeIconMap = {
+    'common': 'shrink'
+}
+
+export default {
+    props: {
+        tip: {
+            type: String,
+            default: '数据为空',
+        },
+        iconType: {
+            type: String,
+            default: 'common'
+        },
+        iconSize: {
+            type: Number,
+            default: 140
+        }
+    },
+    computed: {
+        iconName () {
+            return TypeIconMap[this.iconType] || 'smile'
+        }
+    },
+    data () {
+        return {
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.empty {
+    &-container {
+        height: 100%;
+        padding-bottom: 50px;
+        box-sizing: border-box;
+        .iconbox {
+            margin-top: -46%;
+        }
+        .tips {
+            font-size: 14px;
+            font-weight: 400;
+            color: #727273;
+            line-height: 24px;
+        }
+    }
+}
+</style>

src/components/NavBar/index.vue

@@ -0,0 +1,17 @@
+<template>
+    <NavBar
+        :title="title"
+        left-arrow
+    ></NavBar>
+</template>
+
+<script>
+export default {
+    name: 'NavBar',
+    data () {
+        return {
+            title: 'Title'
+        }
+    }
+}
+</script>

src/components/TabBar/index.vue

@@ -0,0 +1,60 @@
+<template>
+    <van-tabbar :value="tabbarActive" @change="handleTabbarChange" route>
+            <van-tabbar-item
+                v-for="(item, idx) in tabbarList"
+                :key="idx"
+                :to="item.to"
+                replace
+            >
+            <span>{{ item.title }}</span>
+            <template #icon="props">
+                <img v-if="props.active" :src="item.iconSel" />
+                <img v-else :src="item.icon" />
+            </template>
+            </van-tabbar-item>
+        </van-tabbar>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+export default {
+    name: 'TabBar',
+    computed: {
+        ...mapGetters(['tabbarIdx'])
+    },
+    data () {
+        return {
+            tabbarActive: this.tabbarIdx,
+            tabbarList: [
+                {
+                title: '首页',
+                to: '/',
+                icon: require("@/assets/icons-index.png"),
+                iconSel: require("@/assets/icons-index-sel.png"),
+                },
+                {
+                title: '审批',
+                to: '/approve',
+                icon: require("@/assets/icons-approve.png"),
+                iconSel: require("@/assets/icons-approve-sel.png"),
+                },
+                {
+                title: '我的',
+                to: '/my',
+                icon: require("@/assets/icons-my.png"),
+                iconSel: require("@/assets/icons-my-sel.png"),
+                },
+            ]
+        }
+    },
+    methods: {
+        handleTabbarChange (index) {
+            this.tabbarActive = index
+            this.$store.commit({
+                type: 'app/SET_TABBAR',
+                tabbarIdx: index
+            })
+        }
+    }
+}
+</script>

src/main.js

@@ -6,6 +6,8 @@ import 'normalize.css'
 import '@/styles/index.less'
 
 import '@/utils/import-vant'
+import '@/utils/import-custom-component' // 自定义组件
+
 import App from './App.vue'
 
 import 'amfe-flexible'

src/router/index.js

@@ -1,27 +1,70 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
+
+import Home from '../views/Index.vue'
 
 Vue.use(VueRouter)
 
 const routes = [
+  // {
+  //   path: '/',
+  //   redirect: 'Approve',
+  // },
   {
     path: '/',
     name: 'Home',
+    mate: {
+      showTabBar: true
+    },
     component: Home
   },
   {
-    path: '/about',
-    name: 'About',
+    path: '/approve',
+    name: 'Approve',
+    mate: {
+      showTabBar: true
+    },
     // route level code-splitting
     // this generates a separate chunk (about.[hash].js) for this route
     // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  }
+    component: () => import(/* webpackChunkName: "approve" */ '../views/Approve.vue')
+  },
+  {
+    path: '/approve/search',
+    name: 'Search',
+    component: () => import(/* webpackChunkName: "approve" */ '../views/approve/search.vue')
+  },
+  {
+    path: '/my',
+    name: 'My',
+    meta: { title: '我的', showTabBar: true },
+    component: () => import(/* webpackChunkName: "personnel" */ '../views/My.vue'),
+  },
+  {
+    path: '/user-info',
+    name: 'Userinfo',
+    component: () => import(/* webpackChunkName: "personnel" */ '../views/Userinfo.vue')
+  },
+  {
+    path: '/user-info/single-info',
+    name: 'Singleinfo',
+    component: () => import(/* webpackChunkName: "personnel" */ '../views/personal/single-info.vue')
+  },
+
+  
 ]
 
 const router = new VueRouter({
-  routes
+  routes,
+  mode: 'hash'
+})
+
+router.beforeEach((to, from, next) => {
+  console.log('>>>>> beforeEach >>>>>');
+  console.log('to', to);
+  console.log('form', from);
+  console.log('<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<');
+  next()
 })
 
 export default router

src/store/getter.js

@@ -1,5 +1,8 @@
 const getter = {
-    name: state => state.user.name
+    name: state => state.user.name,
+    tabbarAction: state => {
+        return state.app.tabbarAction
+    }
 }
 
 export default getter

src/store/modules/app.js

@@ -0,0 +1,17 @@
+const state = {
+    tabbarIdx: 0
+}
+
+
+const mutations = {
+    SET_TABBAR (state, poylad) {
+        state.tabbarIdx = poylad.tabbarIdx
+        // window.localStorage.setItem('tabbarIdx', poylad.tabbarIdx)
+    }
+}
+
+export default {
+    namespaced: true,
+    state,
+    mutations
+}

src/styles/index.less

@@ -1,6 +1,89 @@
 @import url(./variables.less);
+@import url(./mixins.less);
+
+html,body{
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    height: 100%;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    color: @text-common-color;
+    background-color: @bg-gary;
+}
+
+#app {
+    height: 100%;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    position: relative;
+}
+
+
 
 // reset base.
-body {
+.container {
+    padding: 0 6px;
+}
+
+.p-h-12 {
+    padding-left: 12px;
+    padding-right: 12px;
+}
+
+.btnbox {
+    width: 100%;
+    font-size: @text-common-size;
+    line-height: 40px;
+    text-align: center;
+    border-radius: 9px;
+    background-color: @main-color;
+    color: @white;
+}
+
+.fajc () {
+    &-aic {
+        align-items: center;
+    }
+    &-acc {
+        align-content: center;
+    }
+    &-jic {
+        justify-items: center;
+    }
+    &-jcc {
+        justify-content: center;
+    }
+}
+.flex {
+    display: flex;
+    &-row {
+        flex-direction: row;
+        .fajc()
+    }
+    &-col {
+        flex-direction: column;
+        .fajc()
+    }
+    &-0shrink {
+        flex-shrink: 0;
+    }
+}
+
 
+// 单行省略号
+.ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+// 双行省略号
+.ellipsis-2rows {
+    text-overflow: -o-ellipsis-lastline;
+    .ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    white-space: initial;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
 }

src/styles/variables.less

@@ -1,2 +1,37 @@
 
-@maintxt: red;
+@text-h1-size: 38px;
+@text-h2-size: 30px;
+@text-h3-size: 24px;
+@text-common-size: 16px;
+@text-secondery-size: 14px; // 小号文字. 例如选择附件的 "附件"模块
+@text-xsecondery-color: rgba(25, 26, 30, 1); // 小号颜色. 例如选择附件的 "附件"模块
+
+@text-common-color: rgba(0, 0, 0, 0.85);
+@text-secondery-color: rgba(0, 0, 0, 0.50);
+@text-bold-color: rgba(51, 51, 51, 1);
+
+@link-font-size: 16px;
+@link-color: rgba(0, 122, 255, 1);
+
+@status-success-color: rgba(82, 196, 26, 1);
+@status-warning-color: rgba(250, 173, 21, 1);
+@status-danger-color: rgba(255, 77, 79, 1);
+
+
+
+// FontSizeConf
+@font-size-h1: 38px;
+@font-size-h2: 30px;
+@font-size-h3: 24px;
+@font-size-common: 16px;
+@font-size-secondery: 14px;
+@font-size-third: 12px;
+
+@main-color: rgba(50, 144, 196, 1);
+@white: white;
+
+@bg-gary: rgba(242, 241, 246, 1);
+
+
+// vant variable.
+@button-default-color: @main-color;

src/utils/import-custom-component.js

@@ -0,0 +1,6 @@
+import Vue from 'vue'
+
+import Empty from '@/components/Empty'
+
+Vue.component('MyEmpty', Empty)
+

src/utils/import-vant.js

@@ -2,10 +2,20 @@
 'use strict'
 
 import Vue from 'vue'
+
 import {
     Tabbar,
-    TabbarItem
+    TabbarItem,
+    Icon,
+    NavBar,
+    Button,
+    Field,
+    Toast,
+    Popup,
+    Tab,
+    Tabs
 } from 'vant'
 
-Vue.use(Tabbar)
-Vue.use(TabbarItem)
+Vue.use(Tab).use(Tabs).use(Popup).use(Toast).use(Field).use(Button).use(NavBar).use(Icon).use(Tabbar).use(TabbarItem)
+
+Vue.$toast = Toast

src/views/About.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/Approve.vue

@@ -0,0 +1,322 @@
+<template>
+  <div class="approve-container flex flex-col">
+    <van-tabs v-model="activeName">
+      <van-tab
+        v-for="(tab, idx) in tabs"
+        :key="idx"
+        :title="tab.title"
+        :name="tab.name"
+        color="#000"
+        @before-change="handleTabBeforeChangeEvnet"
+        />
+    </van-tabs>
+    <div class="filter-container p-h-12 flex flex-row flex-row-aic">
+      <van-field
+        v-model="searchVal"
+        clearable
+        placeholder="搜索"
+        left-icon="search"
+        :disabled="true"
+        :readonly="true"
+        @click.native="handleClickSearchBox"
+        />
+      <div class="filterbox flex flex-row flex-0shrink"
+        @click="() => popupVisibility = true"
+      >
+        <van-icon
+          name="filter-o"
+          size="20"
+        />
+        <span>筛选</span>
+      </div>
+    </div>
+    <div class="approve-main">
+      <!-- TODO：需要一个滚动框架 是否需要采用 `mescroll.js` -->
+      <approve-item
+        approve-type="xx"
+        title="刘辉提出的申请"
+        time="15:00"
+        :rows="example"
+        wait-personal="刘德华"
+        :wait-status="1"
+        :approved-status="2"
+      />
+
+      <!-- <my-empty tip="暂无待处理的" /> -->
+    </div>
+
+    <!-- 弹窗 全部筛选 -->
+    <van-popup
+      v-model="popupVisibility"
+      position="bottom"
+      :style="{ height: '90%' }"
+      closeable
+      close-icon-position="top-left"
+    >
+      <div>
+        <div class="popup__title">全部筛选</div>
+          <div class="popup__typebox">
+            <div class="popup__typebox__header">
+              <span>全部类型</span>
+            </div>
+            <div class="popup__typebox__list flex">
+              <span
+                v-for="(type, idx) in types"
+                :key="idx"
+                class="item">
+                {{ type.name }}
+              </span>
+            </div>
+          </div>
+          <div class="popup__rangetime">
+            <div class="popup__typebox__header">
+              <span>申请时间</span>
+            </div>
+            <div class="popup__rangetime__main flex flex-row flex-row-aic">
+              <van-field
+                v-model="timeStart"
+                clearable
+                placeholder="开始时间"
+                :center="true"
+              />
+              <span class="horization"></span>
+              <van-field
+                v-model="timeEnd"
+                clearable
+                placeholder="结束时间"
+                :center="true"
+              />
+            </div>
+          </div>
+      </div>
+
+      <div class="btn" @click="handleSubmitFilter">
+        <span>提交</span>
+      </div>
+      
+        
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import ApproveItem from './approve/components/ApproveItem.vue'
+
+export default {
+  components: {
+    ApproveItem
+  },
+  data () {
+    return {
+      popupVisibility: true,
+      example: [
+        {
+          label: '申请标题',
+          val: '采购类呈批-学生生活用品'
+        },
+        {
+          label: '呈批类型',
+          val: '采购类批呈'
+        },
+        {
+          label: '缓急程度',
+          val: '急'
+        }
+      ],
+      activeName: '',
+      tabs: [
+        {
+          title: '待处理',
+          name: 'wait'
+        },
+        {
+          title: '已处理',
+          name: 'over'
+        },
+        {
+          title: '我收到的',
+          name: 'recive'
+        },
+      ],
+      searchVal: '',
+      types: [
+         { name: '领用申请', id: '' },
+         { name: '申请批呈', id: '' },
+         { name: '学校文件', id: '' },
+         { name: '批阅申请', id: '' },
+         { name: '合同批呈', id: '' },
+         { name: '维修申请', id: '' },
+         { name: '用车申请', id: '' },
+         { name: '请假申请', id: '' },
+         { name: '出差申请', id: '' },
+         { name: '领用申请', id: '' },
+         { name: '入库申请', id: '' },
+         { name: '申购申请', id: '' },
+      ],
+      timeStart: '',
+      timeEnd: ''
+    }
+  },
+  methods: {
+    // Tab 切换前验证
+    handleTabBeforeChangeEvnet (name) {
+      console.log(name);
+      // TODO: 切换需要调用接口让数据加载出来。
+      return true
+    },
+
+    // 切换接口中转站
+    handleGetListMiddware () {
+      let type = this.activeName
+      
+      switch(type) {
+        case 'wait':
+          this.__wait__()
+        break;
+        case 'over':
+          this.__over__()
+          break;
+        case 'recive':
+          this.__recive__()
+          break;
+      }
+    },
+    __wait__ () {},
+    __over__ () {},
+    __recive__ () {},
+
+    // NOTE: 点击跳转搜索页
+    handleClickSearchBox () {
+      this.$router.push({
+        name: 'Search'
+      })
+    },
+
+    // NOTE: 点击筛选弹出选择内容
+    handleSwitchFilterBox () {
+
+    },
+
+    // NOTE: 提交过滤搜索条件
+    handleSubmitFilter () {},
+  }
+}
+</script>
+
+<style lang="less">
+@import url("@/styles/variables.less");
+
+.approve {
+  &-container {
+    height: 100%;
+    .van-tabs {
+      padding-bottom: 4px;
+      border-bottom: 1px solid rgba(216, 216, 216, 1);
+      background-color: white;
+    }
+    .van-tabs__line {
+      background-color: #000;
+    }
+    .van-popup.van-popup--bottom {
+      padding: 14px 12px;
+      box-sizing: border-box;
+    }
+  }
+  &-main {
+    flex: 1;
+    padding: 6px;
+  }
+}
+
+.filter-container {
+  padding-top: 7px;
+  padding-bottom: 7px;
+  background-color: @white;
+  .van-cell.van-field {
+    background-color: rgba(238, 238, 239, 1);
+    border-radius: 6px;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    // position: relative;
+    // &::before {
+    //   content: "";
+    //   position: absolute;
+    //   left: 0;
+    //   top: 0;
+    //   z-index: 1;
+    //   width: 100%;
+    //   height: 100%;
+    //   background-color: transparent;
+    // }
+  }
+  .filterbox {
+    padding-left: 10px;
+    span {
+      font-size: @font-size-third;
+      font-weight: 500;
+      color: #727273;
+      line-height: 22px;
+    }
+  }
+}
+
+
+.popup {
+  &__title {
+    text-align: center;
+    font-size: @font-size-common;
+    font-weight: 600;
+    color: #0A1629;
+    line-height: 22px;
+    padding-bottom: 30px;
+  }
+  &__typebox {
+    &__header {
+      font-size: @font-size-secondery;
+      font-weight: 600;
+      color: #0A1629;
+      line-height: 20px;
+      margin-bottom: 12px;
+    }
+    &__list {
+      flex-wrap: wrap;
+      justify-content: space-between;
+      padding-bottom: 14px;
+      span {
+        display: inline-block;
+        width: 111px;
+        height: 34px;
+        line-height: 34px;
+        text-align: center;
+        background: #F6F6F6;
+        border-radius: 8px;
+        font-size: @font-size-third;
+        font-weight: 400;
+        color: #191A1E;
+        margin-bottom: 8px;
+      }
+    }
+  }
+  &__rangetime {
+    &__main {
+      justify-content: space-between;
+    }
+    .van-cell.van-field {
+      width: 40%;
+      background: #F6F6F6;
+      border-radius: 8px;
+      text-align: center;
+      .van-field__control {
+        text-align: center;
+      }
+    }
+    span.horization {
+      display: inline-block;
+      width: 30px;
+      height: 1px;
+      background-color: #000;
+    }
+  }
+}
+
+</style>

src/views/Index.vue

@@ -0,0 +1,135 @@
+<template>
+    <div class="container index-container">
+        <div class="rowbox" v-for="(row, idx) in list" :key="idx">
+            <div class="rowbox__title">{{ row.title }}</div>
+            <div class="rowbox__main">
+                <div class="col" v-for="(col, idx2) in row.list" :key="idx2">
+                    <img :src="col.pic" :alt="col.title">
+                    <span>{{ col.title }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            // 首页的入口列表
+            list: [
+                {
+                    title: '人事管理',
+                    list: [
+                        {
+                            path: '', // 页面路径
+                            title: '出差',
+                            pic: require('@/assets/index/index-personnel-plane.png')
+                        },
+                        {
+                            title: '请假',
+                            pic: require('@/assets/index/index-personnel-ask.png')
+                        },
+                        {
+                            title: '用车申请',
+                            pic: require('@/assets/index/index-personnel-usecar.png')
+                        }
+                    ]
+                },
+                {
+                    title: '业务管理',
+                    list: [
+                        {
+                            title: '申购',
+                            pic: require('@/assets/index/index-business-shoppcar.png')
+                        },
+                        {
+                            title: '入库',
+                            pic: require('@/assets/index/index-business-libs.png')
+                        },
+                        {
+                            title: '领用',
+                            pic: require('@/assets/index/index-business-recive.png')
+                        },
+                        {
+                            title: '维修',
+                            pic: require('@/assets/index/index-business-setting.png')
+                        },
+                    ]
+                },
+                {
+                    title: '文件管理',
+                    list: [
+                        {
+                            title: '申请呈批',
+                            pic: require('@/assets/index/index-file-req.png')
+                        },
+                        {
+                            title: '合同呈批',
+                            pic: require('@/assets/index/index-file-contract.png')
+                        },
+                        {
+                            title: '收文批阅',
+                            pic: require('@/assets/index/index-file-rec-approve.png')
+                        },
+                        {
+                            title: '学校文件',
+                            pic: require('@/assets/index/index-file-school-file.png')
+                        },
+                    ]
+                }
+
+            ]
+        }
+    },
+    methods: {
+        handleClickItem (item) {
+            console.log('click item', item);
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+@import url("@/styles/variables.less");
+// .index-container {}
+
+// .index {}
+
+.rowbox {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    background: #FFFFFF;
+    border-radius: 6px;
+    margin-top: 10px;
+    padding: 10px 0 16px 12px;
+    &__title {
+        font-size: @text-secondery-size;
+        color: rgba(24, 27, 31, 1);
+        font-weight: 600;
+        line-height: 28px;
+    }
+    &__main {
+        display: flex;
+        width: 100%;
+        padding-top: 8px;
+        .col {
+            width: 25%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            img {
+                width: 42px;
+                height: 42px;
+            }
+            span {
+                display: inline-block;
+                font-size: 12px;
+                color: rgba(37, 37, 39, 1);
+                line-height: 24px;
+            }
+        }
+    }
+}
+</style>

src/views/My.vue

@@ -0,0 +1,261 @@
+<template>
+    <div class="personnel-center">
+        <div class="setting">
+            <span @click="handleGoSetting">设置</span>
+        </div>
+        <!-- 个人信息 -->
+        <div class="info" @click="handleGoUserInfo">
+            <div class="p__avatar">
+                <img :src="info.avatar" :alt="info.name">
+            </div>
+            <div class="p__infobox">
+                <div class="p__name">{{ info.name }}</div>
+                <div class="p__row">
+                    <span class="p__row-schoolname">{{ info.schoolName }}</span>
+                    <span class="department">{{ info.department }}</span>
+                </div>
+                <div class="p__tags">
+                    <span class="tag" v-for="(tag, idx) in tags" :key="idx">
+                        <!-- FIXED: 图标不对. 暂时代替 -->
+                        <van-icon name="award" />{{ tag }}
+                    </span>
+                </div>
+            </div>
+        </div>
+
+        <!-- 业务面 -->
+        <div class="pbn-box">
+            <div class="scroll-box">
+                <div
+                    class="pbn__item"
+                    v-for="(item, idx) in list"
+                    :key="idx"
+                    >
+                    <div class="pbn__item__pic">
+                        <img :src="item.pic" :alt="item.tit">
+                    </div>
+                    <div class="pbn__item__tit">{{ item.tit }}</div>
+                    <div class="pbn__item__ignore">
+                        <div class="pbn__item__msg" v-show="item.msgNum >= 1"><span>待处理{{ item.msgNum }}条</span></div>
+                        <div class="pbn__item__icon-arrow-right">
+                            <van-icon name="arrow" size="18" color="#C2C2C2" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'My',
+    data () {
+        return {
+            info: {
+                avatar: require('@/assets/index/index-file-req.png'),
+                name: '刘辉',
+                schoolName: '深圳市第二特殊教育学校',
+                department: '教师部',
+            },
+            tags: [
+                '职业教师',
+                '职业法师'
+            ],
+            list: [
+                {
+                    pic: require('@/assets/index/index-business-shoppcar.png'),
+                    tit: '采购',
+                    msgNum: 3 // 待处理消息
+                },
+                {
+                    pic: require('@/assets/index/index-business-libs.png'),
+                    tit: '入库',
+                    msgNum: 0
+                },
+                {
+                    pic: require('@/assets/index/index-business-recive.png'),
+                    tit: '领用',
+                    msgNum: 0
+                },
+                {
+                    pic: require('@/assets/index/index-business-setting.png'),
+                    tit: '维修',
+                    msgNum: 0
+                },
+                {
+                    pic: require('@/assets/index/index-personnel-plane.png'),
+                    tit: '出差',
+                    msgNum: 0
+                },
+                {
+                    pic: require('@/assets/index/index-personnel-ask.png'),
+                    tit: '请假',
+                    msgNum: 0
+                },
+                {
+                    pic: require('@/assets/index/index-personnel-usecar.png'),
+                    tit: '用车',
+                    msgNum: 0
+                },
+                {
+                    pic: require('@/assets/index/index-file-req.png'),
+                    tit: '申请呈批',
+                    msgNum: 0
+                },
+                {
+                    pic: require('@/assets/index/index-file-contract.png'),
+                    tit: '合同呈批',
+                    msgNum: 0
+                },
+                {
+                    pic: require('@/assets/index/index-file-rec-approve.png'),
+                    tit: '收文批阅',
+                    msgNum: 0
+                },
+                {
+                    pic: require('@/assets/index/index-file-school-file.png'),
+                    tit: '学校文件',
+                    msgNum: 0
+                },
+            ]
+        }
+    },
+    methods: {
+        handleGoSetting() {},
+        handleGoUserInfo () {
+            this.$router.push({
+                name: 'Userinfo'
+            })
+        },
+    }
+}
+</script>
+
+<style lang="less">
+@import url('@/styles/variables.less');
+
+.personnel-center {
+    background-color: @white;
+    padding: 0 12px;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-items: auto;
+    user-select: none;
+    .setting {
+        text-align: right;
+        padding: 4px 0;
+        font-size: @text-secondery-size;
+        color: rgba(10, 22, 41, 1);
+    }
+    .info {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        padding-bottom: 16px;
+        border-bottom: 1px solid rgba(151, 151, 151, 0.2);
+    }
+    .pbn-box {
+        flex: 1;
+        height: 100%;
+        overflow: auto;
+        padding-bottom: 50px;
+    }
+}
+
+.p {
+    &__avatar {
+        width: 56px;
+        height: 57px;
+        width: 56px;
+        border-radius: 8px;
+        overflow: hidden;
+        margin-right: 15px;
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+    &__infobox {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    &__name {
+        font-size: @text-common-size;
+        font-weight: 500;
+        line-height: 22px;
+        color: rgba(10, 22, 41, 1);
+    }
+    &__row {
+        span {
+            display: inline-block;
+            font-size: 12px;
+            line-height: 20px;
+            font-weight: 500;
+            color: rgba(114, 114, 115, 1);
+        }
+        &-schoolname {
+            margin-right: 8px;
+        }
+    }
+    &__tags {
+        font-size: 10px;
+        line-height: 16px;
+        .tag {
+            display: inline-block;
+            border: 1px solid rgba(172, 172, 172, .8);
+            border-radius: 4px;
+            padding: 0 3px;
+            margin-right: 5px;
+            &:last-child {
+                margin-right: initial;
+            }
+        }
+    }
+
+    // business
+    &bn {
+        &__item {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            border-bottom: 1px solid rgba(151, 151, 151, 0.2);
+            padding: 10px 0;
+            &:last-child {
+                border-bottom: initial;
+            }
+            &__pic {
+                margin-right: 16px;
+                img {
+                    width: 24px;
+                    height: 24px;
+                    border-radius: 8px;
+                }
+            }
+            &__tit {
+                flex: 1;
+                text-align: left;
+                font-size: 14px;
+                font-weight: 400;
+                color: #0A1629;
+                line-height: 20px;
+            }
+            &__ignore {
+                display: flex;
+            }
+            &__msg {
+                font-size: 12px;
+                font-weight: 400;
+                color: #999999;
+                line-height: 18px;
+                margin-right: 10px;
+            }
+        }
+    }
+    
+}
+</style>

src/views/Userinfo.vue

@@ -0,0 +1,221 @@
+<template>
+    <div class="user-info-container userinfo">
+        <div class="backbtn p-h-12">
+            <van-icon name="arrow-left" size="24" />
+        </div>
+        <!-- 个人信息 -->
+        <div class="info p-h-12">
+            <div class="p__avatar">
+                <img :src="info.avatar" :alt="info.name">
+            </div>
+            <div class="p__infobox">
+                <div class="p__name">{{ info.name }}</div>
+                <div class="p__row">
+                    <span class="p__row-schoolname">{{ info.schoolName }}</span>
+                    <span class="department">{{ info.department }}</span>
+                </div>
+                <div class="p__tags">
+                    <span class="tag" v-for="(tag, idx) in tags" :key="idx">
+                        <!-- FIXED: 图标不对. 暂时代替 -->
+                        <van-icon name="award" />{{ tag }}
+                    </span>
+                </div>
+            </div>
+            <div class="p__editbox">
+                <span class="btn" @click="handleGoEditPage">编辑</span>
+            </div>
+        </div>
+
+        <!-- 组员信息 -->
+        <div class="group-info p-h-12">
+            <div class="group-title">组员信息</div>
+            <div class="gropu-main">
+                <div class="group__item" v-for="(row, idx) in groupInfo" :key="idx">
+                    <div class="label">{{ row.label }}</div>
+                    <div class="val">{{ row.val }}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import * as dd from 'dingtalk-jsapi'
+export default {
+    name: 'Userinfo',
+    data() {
+        return {
+            info: {
+                avatar: require('@/assets/index/index-file-req.png'),
+                name: '刘辉',
+                schoolName: '深圳市第二特殊教育学校',
+                department: '教师部',
+            },
+            tags: [
+                '职业教师',
+                '职业法师'
+            ],
+            groupInfo: [
+                {
+                    label: '企业/组员',
+                    val: '深圳市第二教育中学'
+                },
+                {
+                    label: '姓名',
+                    val: '刘辉'
+                },
+                {
+                    label: '职务',
+                    val: '职业教师、职业xxx'
+                }
+            ]
+        }
+    },
+    created() {
+        console.log(this.$router.history);
+        console.log(this.$router);
+    },
+    mounted () {
+        dd.ready(() => {
+
+        })
+    },
+    methods: {
+        back() {
+            console.log(123);
+            console.log(dd);
+            this.$router.replace('/my')
+            // this.$router.go(-1)
+            // this.$router.back()
+            // dd.biz.navigation.goBack()
+        },
+        // NOTE: 跳转编辑页面
+        handleGoEditPage () {
+            this.$router.push({
+                name: 'Singleinfo'
+            })
+        }
+    }
+}
+</script>
+
+<style lang="less">
+@import url("@/styles/variables.less");
+
+.userinfo {
+    .backbtn {
+        text-align: left;
+        padding: 4px initial;
+        font-size: @text-secondery-size;
+        color: rgba(10, 22, 41, 1);
+        background-color: @white;
+    }
+
+    .info {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        padding-bottom: 16px;
+        border-bottom: 1px solid rgba(151, 151, 151, 0.2);
+        background-color: @white;
+        padding-top: 10px;
+    }
+}
+
+.p {
+    &__avatar {
+        width: 56px;
+        height: 57px;
+        width: 56px;
+        border-radius: 8px;
+        overflow: hidden;
+        margin-right: 15px;
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+    &__infobox {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+    &__name {
+        font-size: @text-common-size;
+        font-weight: 500;
+        line-height: 22px;
+        color: rgba(10, 22, 41, 1);
+    }
+    &__row {
+        span {
+            display: inline-block;
+            font-size: 12px;
+            line-height: 20px;
+            font-weight: 500;
+            color: rgba(114, 114, 115, 1);
+        }
+        &-schoolname {
+            margin-right: 8px;
+        }
+    }
+    &__tags {
+        font-size: 10px;
+        line-height: 16px;
+        .tag {
+            display: inline-block;
+            border: 1px solid rgba(172, 172, 172, .8);
+            border-radius: 4px;
+            padding: 0 3px;
+            margin-right: 5px;
+            &:last-child {
+                margin-right: initial;
+            }
+        }
+    }
+    &__editbox {
+        margin-top: 20px;
+        span {
+            display: inline-block;
+            font-size: @text-secondery-size;
+            border-radius: 5px;
+            border: 1px solid #D5D5D5;
+            padding: 4px 6px;
+        }
+    }
+}
+.group {
+    &-info {
+        margin-top: 10px;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        background-color: @white;
+    }
+    &-title {
+        font-size: 14px;
+        font-weight: 600;
+        color: #181B1F;
+        margin-bottom: 16px;
+    }
+    &-main {
+
+    }
+
+    &__item {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        font-size: 12px;
+        line-height: 24px;
+        .label {
+            width: 60px;
+            margin-right: 10px;
+            color: rgba(114, 114, 115, 1);
+        }
+        .val {
+            color: rgba(37, 37, 39, 1);
+            font-weight: 500;
+        }
+    }
+}
+</style>

src/views/approve/components/ApproveItem.vue

@@ -0,0 +1,212 @@
+<template>
+    <div class="approve-item-container">
+        <div class="approve-item__header flex flex-row">
+            <div class="title ellipsis flex-0shrink">{{ title }}</div>
+            <div class="time">{{ time }}</div>
+        </div>
+
+        <!-- rows example -->
+        <!-- <li v-for="(row, idx) in rows" :key="idx">
+            <div class="row__title">{{ row.label }}</div>
+            <div class="row__content">{{ row.val }}</div>
+        </li> -->
+        <div class="approve-item__main">
+            <render-dom :vnode="rowsRender" />
+        </div>
+
+        <!-- 三种(状态栏)展示情况
+            1. [待处理]某人审批 + 处理中
+            2. [已处理]通过与否
+            3. [我收到的]不展示
+        -->
+        <!-- stateus-br -->
+        <div class="approve-item__status-bar">
+            <div class="wait flex flex-row flex-row-acc">
+                <div class="personal">{{ waitPersonalComp }}</div>
+                <div class="status">{{ waitStatusComp }}</div>
+            </div>
+            <div v-if="false" class="approved">
+                <div class="status status--pass">{{ approvedStatusComp }}</div>
+            </div>
+            <!-- 我收到的。 没有状态展示 -->
+            <!-- <div class="recived"></div> -->
+        </div>
+    </div>
+</template>
+
+<script>
+
+let h = null
+export default {
+    name: 'ApproveItem',
+    components: {
+        // NOTE： 中间件。渲染VNode
+        RenderDom: {
+            functional: true,
+            render: (h, ctx) => ctx.props.vnode
+
+            // 这种方法也生效
+            // props: ['vNode'],
+            // render () {
+            //     return this.vNode
+            // }
+        }
+    },
+    computed: {
+        // 渲染内容通过(JSX/createElement)
+        rowsRender () {
+            let type = this.approveType
+            let VNODE_DOM = null
+            switch (type) {
+                case 'xx':
+                    return  this.handleRender_xx()
+                    // break;
+                case 'c123':
+                    break;
+            }
+            console.log('?', VNODE_DOM);
+            return VNODE_DOM
+        },
+
+        // waitPersonal 计算
+        waitPersonalComp () {
+            return `${this.waitPersonal}正在处理中`
+        },
+
+        // 通过枚举文件确定状态
+        waitStatusComp () {
+            return `处理中${this.waitStatus}`
+        },
+
+        approvedStatusComp () {
+            return `已通过${this.approvedStatus}`
+        }
+    },
+    props: {
+        // Item 类型
+        approveType: {
+            type: String,
+            required: true
+        },
+        title: {
+            type: String
+        },
+        time: {
+            type: String
+        },
+        rows: {
+            type: Array,
+            default: () => []
+        },
+
+        waitPersonal: {
+            type: String
+        },
+        waitStatus: {
+            type: Number
+        },
+
+        approvedStatus: {
+            type: Number
+        }
+        
+    },
+    created () {
+        h = this.$createElement
+    },
+    methods: {
+        // NOTE: 申请类审批
+        handleRender_xx() {
+            return h('ul', {
+                class: ['flex', 'flex-col']
+            },this.rows.map(row => h('li', {
+                class: ['row', 'flex', 'flex-row']
+            }, [
+                h('div', {
+                    class: ['row__title', 'flex-0shrink']
+                }, `${row.label}：`),
+                h('div', {
+                    class: ['row__content', 'ellipsis-2rows']
+                }, row.val)
+            ])))
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+@import url("@/styles/variables.less");
+
+.approve-item {
+    &-container {
+        padding: 20px 12px 12px;
+        background-color: @white;
+        border-radius: 4px;
+    }
+    &__header {
+        justify-content: space-between;
+        .title {
+            flex: 1;
+            font-size: @font-size-common;
+            font-weight: 600;
+            color: #191A1E;
+            line-height: 24px;
+            padding-right: 16px;
+        }
+        .time {
+            font-size: 11px;
+            font-weight: 400;
+            color: #B0B0B0;
+            line-height: 24px;
+        }
+    }
+
+    // 内容盒子
+    &__main {
+        padding: 4px 0 6px;
+        .row {
+            align-items: flex-start;
+            font-size: @font-size-third;
+            font-weight: 400;
+            color: #727273;
+            line-height: 20px;
+            &__content {
+                flex: 1;
+            }
+        }
+    }
+
+    // 状态栏
+    &__status-bar {
+        .wait {
+            justify-content: space-between;
+            .personal {
+                font-size: @font-size-third;
+                font-weight: 400;
+                color: #191A1E;
+                line-height: 18px;
+            }
+            .status {
+                font-size: @font-size-third;
+                font-weight: 500;
+                color: #DF9C4A;
+                line-height: 18px;
+            }
+        }
+        .approved {
+            .status {
+                font-size: @font-size-third;
+                font-weight: 500;
+                line-height: 18px;
+                &--pass {
+                    color: #57AF61;
+                }
+                &--refuse {
+                    color: #FD5420;
+                }
+            }
+        }
+
+    }
+}
+</style>

src/views/approve/search.vue

@@ -0,0 +1,46 @@
+<template>
+    <!-- 搜索页面 -->
+    <div class="search-container">
+        <div class="filter-container p-h-12 flex flex-row flex-row-aic">
+            <van-field
+                v-model="searchVal"
+                clearable
+                placeholder="搜索日期、姓名、状态、关键词"
+                left-icon="search"
+            />
+            <div class="filterbox flex flex-row flex-0shrink">
+                <span @click="handleStartSearch">筛选</span>
+            </div>
+        </div>
+        <div class="search-main">
+            <!-- list... -->
+            <!-- NOTE: 滚动 + ApproveItem 组件 -->
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'search',
+    data () {
+        return {
+            searchVal: ''
+        }
+    },
+    methods: {
+        handleStartSearch () {
+            let val = this.searchVal
+            console.log('search val:', val);
+        },
+        
+        // 通过dd的返回函数进行回退
+        // back() {
+        //     console.log(this.$router.options);
+        //     this.$router.replace('/approve')
+        // }
+    }
+}
+</script>
+
+<style lang="less">
+</style>

src/views/personal/nickname.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="username-container p-h-12">
+        <van-field
+            v-model="nickname"
+            clearable
+            label="昵称"
+            placeholder="请输入"
+            input-align="right"
+        />
+
+        <div class="btn" @click="handleSaveOperate">submit</div>
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            nickname: ''
+        }
+    },
+
+    methods: {
+        handleSaveOperate () {
+            const nickname = this.nickname
+            if (!nickname) return this.$toast.fail('昵称尚未填写')
+            // await Api
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.username {
+    &-container {
+        margin-top: 10px;
+        background-color: #fff;
+    }
+}
+</style>

src/views/personal/phone-number.vue

@@ -0,0 +1,94 @@
+<template>
+    <div class="phone-number-container flex flex-col flex-col-aic p-h-12">
+        <van-icon
+            name="graphic"
+            size="160"
+            color="RGBA(50, 144, 196, 1)"
+            />
+        <span class="tips">你的手机号</span>
+
+        <div class="phonebox">
+            <van-field
+                class="ninput"
+                v-if="operateState === 0"
+                v-model="phoneNumber"
+                left-icon="edit"
+                size="large"
+                center
+                maxlength="11"
+                clearable
+                :error="Boolean(errMsg.length)"
+                :error-message="errMsg"
+                @input="handleInputEvent"
+            />
+            <span v-else class="phone">{{ phoneNumber }}</span>
+        </div>
+
+        <div class="btnbox" @click="handleBtnSwitch">
+            <span v-if="operateState === 0">保存手机号</span>
+            <span v-else>修改手机号</span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data () {
+        return {
+            operateState: 0, // 0: 保存 1：修改
+            phoneNumber: '1234567',
+
+            errMsg: ""
+        }
+    },
+    methods: {
+        handleInputEvent(value) {
+            console.log('---', value);
+            // TODO：判断手机号格式是否正确
+            let bool = false
+            if (!bool) {
+                this.errMsg = '手机号格式不正确请检查'
+            }
+        },
+        handleBtnSwitch () {
+            this.operateState = this.operateState === 0 ? 1 : 0
+        }
+    }
+}
+</script>
+
+<style lang="less">
+.phone-number-container {
+    .tips {
+        font-size: 12px;
+        font-weight: 500;
+        color: #999999;
+        line-height: 28px;
+        margin-bottom: 10px;
+    }
+    .phonebox {
+        width: 100%;
+        text-align: center;
+        margin-bottom: 70px;
+        .ninput {
+            width: 100%;
+            font-size: 28px;
+            font-weight: 500;
+            color: #0A1629;
+            line-height: 40px;
+            background: rgb(233, 232, 235);
+            border-radius:8px;
+            .van-icon {
+                font-size: 28px;
+                margin-right: 10px;
+            }
+        }
+        .phone {
+            font-size: 32px;
+            font-weight: 500;
+            color: #0A1629;
+            line-height: 40px;
+        }
+    }
+}
+</style>

src/views/personal/signature.vue

@@ -0,0 +1,95 @@
+<template>
+    <div class="signature-container">
+        <div class="imgbox">
+            <div v-if="!img" class="img-framework" @click="handleUpdateSignature">
+                <van-icon name="plus" color="#817f7f" size="34" />
+            </div>
+            <img v-else :src="img" alt="个签">
+            <div class="state">
+                <van-icon :name="examineIconName" size="20" />
+                <span>{{ examineState }}</span>
+            </div>
+        </div>
+        <div class="btnbox" @click="handleResetSignature">
+            <span>重新上传</span>
+            <!-- <van-button type="default">重新上传</van-button> -->
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    computed: {
+        examineState () {
+            return '已通过'
+        },
+        examineIconName () {
+            return 'checked'
+        },
+    },
+    data () {
+        return {
+            img: require('@/assets/index/index-business-libs.png'),
+        }
+    },
+    methods: {
+        // NOTE：点击上传个签
+        handleUpdateSignature() {},
+
+        // NOTE: 重新上传个签
+        handleResetSignature () {},
+    }
+}
+</script>
+
+<style lang="less">
+@import url("@/styles/variables.less");
+.signature {
+    &-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 50px 14px 0;
+    }
+}
+.imgbox {
+    margin-bottom: 80px;
+    .img-framework {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        width: 180px;
+        height: 180px;
+        border-radius: 8px;
+        border: 1px dashed #817f7f;
+    }
+
+    img {
+        width: 180px;
+        height: 180px;
+        border-radius: 5px;
+        overflow: hidden;
+    }
+
+    .state {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 15px 0;
+        text-align: center;
+        .van-icon {
+            color: @main-color;
+        }
+        span {
+            margin-left: 8px;
+            font-size: @text-secondery-size;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: @text-xsecondery-color;
+            line-height: 20px;
+        }
+    }
+
+}
+</style>

src/views/personal/single-info.vue

@@ -0,0 +1,210 @@
+<template>
+    <!-- 个人信息页面 -->
+    <div class="single-info">
+        <div class="infolist">
+            <div class="row"
+                v-for="(row, idx) in infoList"
+                :key="idx"
+                @click="handleClickRow(row, idx)"
+            >
+                <div class="label">{{ row.label }}</div>
+                <div class="val">
+                    <template v-if="row.pic">
+                        <img class="avatar" :src="row.pic" :alt="row.label" />
+                    </template>
+                    <template v-else>
+                        <span>{{ row.val }}</span>
+                    </template>
+                </div>
+                <div :class="['arrow', row.isNOJump && 'hide-arrow']">
+                    <van-icon name="arrow" color="rgba(194, 194, 194, 1)" size="26" />
+                </div>
+            </div>
+        </div>
+        <div class="row single-row singlerrr">
+            <div class="label">{{ signature.label }}</div>
+                <div class="val">
+                    <template>
+                        <!-- computed state -->
+                        <span>{{ signature.state }}</span>
+                    </template>
+                </div>
+                <div class="arrow">
+                    <van-icon name="arrow" color="rgba(194, 194, 194, 1)" size="26" />
+                </div>
+        </div>
+
+        <!-- 弹窗 更新头像 -->
+        <van-popup
+            v-model="show"
+            position="bottom"
+            >
+            <!-- :style="{ height: '30%' }" -->
+            <div class="popup-main">
+                <div class="row-item" @click="handleOpenCamera">拍照/上传头像</div>
+            </div>
+            <div class="gap"></div>
+            <div class="popup-cancel" @click="handleCancelPopup">取消</div>
+        </van-popup>
+    </div>
+</template>
+
+<script>
+
+import * as dd from 'dingtalk-jsapi'
+
+export default {
+    data () {
+        return {
+            infoList: [
+                {
+                    label: '头像',
+                    pic: require('@/assets/index/index-business-libs.png'),
+                    jumpto: ''
+                },
+                {
+                    label: '昵称',
+                    val: '刘辉',
+                    jumpto: ''
+                },
+                {
+                    label: '手机号',
+                    val: '15192833176',
+                    jumpto: ''
+                },
+                {
+                    label: '部门',
+                    val: '教师部',
+                    isNOJump: true,
+                    jumpto: ''
+                },
+                {
+                    label: '职业',
+                    val: '职业教师',
+                    isNOJump: true,
+                    jumpto: ''
+                }
+            ],
+            signature: {
+                label: '个人签名',
+                state: '已上传'
+            },
+            show: false
+        }
+    },
+    methods: {
+        handleClickRow(row, idx) {
+            console.log('???', row, idx);
+
+            // NOTE: idx === 0 调用图片接口。 更新头像
+            if (idx === 0) {
+                this.show = true
+            }
+        },
+
+        handleChooseLocalImg() {
+            // TODO: 选择图片 需要鉴权
+            // biz.util.chooseImage
+            // 钉钉版本≥6.5.35
+            dd.biz.util.chooseImage({
+                count:1,
+                secret:false,
+                sourceType:['camera'],
+                position:'front',
+                onSuccess: (res) => {
+                console.log(JSON.stringify(res))
+                    },
+                onFail:(err) =>{
+                console.log(JSON.stringify(err))
+                    }
+            })
+        },
+        handleOpenCamera () {
+            this.handleChooseLocalImg()
+        },
+        handleCancelPopup () {
+            this.show = false
+        }
+    }
+}
+</script>
+
+<style lang="less">
+@import url("@/styles/variables.less");
+.single-info {
+    .infolist,
+    .single-row {
+        margin-top: 10px;
+        background-color: @white;
+        padding: 0 17px 0 12px;
+    }
+    .row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        // padding: 9px 17px 9px 12px;
+        padding: 9px 0;
+        // margin: 0 17px 0 12px;
+        border-bottom: 1px solid rgba(151, 151, 151, .3);
+        &:last-child {
+            border-bottom: initial;
+        }
+        .lable {
+            font-size: @text-secondery-size;
+            font-weight: 400;
+            color: @text-common-color;
+            line-height: 20px;
+        }
+        .val {
+            flex: 1;
+            text-align: right;
+            font-size: @text-secondery-size;
+            font-weight: 400;
+            color: #999999;
+            line-height: 18px;
+            img.avatar {
+                width: 32px;
+                height: 32px;
+                background: #D8D8D8;
+                border-radius: 5px;
+            }
+        }
+
+        .arrow {
+            &.hide-arrow {
+                visibility: hidden;
+            }
+        }
+
+    }
+    .singlerrr {
+        padding: 9px 17px 9px 12px;
+
+    }
+
+    .popup {
+        &-main {
+            .row-item {
+                text-align: center;
+                font-size: @text-secondery-size;
+                font-weight: 400;
+                color: #191A1E;
+                line-height: 40px;
+                margin: 0 auto;
+            }
+        }
+        &-cancel {
+            text-align: center;
+            padding-bottom: 40px;
+            font-size: @text-common-size;
+            font-weight: 400;
+            color: #0A1629;
+            line-height: 40px;
+        }
+    }
+    .gap {
+        height: 10px;
+        background-color: @bg-gary;
+    }
+}
+</style>