aprove detail prt code

package-lock.json

@@ -12,6 +12,7 @@
         "axios": "^1.6.0",
         "core-js": "^3.6.5",
         "dingtalk-jsapi": "^2.13.71",
+        "dingtalk-mock-sdk": "^0.0.2",
         "lodash": "^4.17.21",
         "normalize.css": "^8.0.1",
         "vant": "^2.12.38",
@@ -3189,6 +3190,89 @@
         "node": ">= 8"
       }
     },
+    "node_modules/anymock-ajax": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/anymock-ajax/-/anymock-ajax-1.2.0.tgz",
+      "integrity": "sha512-RiHM/vRn1mEan7vujIAQisOy0Z8I7WkhJEXSrmxXMtByuOl+IHx3u+rPOlMhoQVzKh9p6jrVuTPabqg6TLq6fA==",
+      "dependencies": {
+        "anymock-include": "^0.2.0",
+        "anymock-openapi": "^0.3.0",
+        "tslib": "^1.10.0",
+        "url-parse": "^1.4.7"
+      }
+    },
+    "node_modules/anymock-ajax/node_modules/@types/node": {
+      "version": "13.13.52",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.52.tgz",
+      "integrity": "sha512-s3nugnZumCC//n4moGGe6tkNMyYEdaDBitVjwPxXmR5lnMG5dHePinH2EdxkG3Rh1ghFHHixAG4NJhpJW1rthQ=="
+    },
+    "node_modules/anymock-ajax/node_modules/anymock-openapi": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/anymock-openapi/-/anymock-openapi-0.3.0.tgz",
+      "integrity": "sha512-EhtQAVUMZbLu+Nz/gmdfJhAlGgjtFB5PGQipV7U6TunftfSNhnQ13OSO+8dOKQ/1PBaVeHEIxwreWApAQQKiwQ==",
+      "dependencies": {
+        "@types/node": "^13.7.4",
+        "anymock-client-token": "^1.2.0",
+        "anymock-include": "^0.2.0",
+        "tslib": "^1.10.0"
+      }
+    },
+    "node_modules/anymock-client-token": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/anymock-client-token/-/anymock-client-token-1.2.0.tgz",
+      "integrity": "sha512-uCe9/fqHlibKtO/NwSLgrh8zEXXaF3TaSa2/5MA1/xrh/fbbnWhmbV8q4IbeZpuYLPgiMhuYrSc9LAw7ikm9QQ==",
+      "dependencies": {
+        "hmacsha1": "^1.0.0",
+        "is-buffer": "^2.0.3",
+        "utf8": "^3.0.0"
+      }
+    },
+    "node_modules/anymock-client-token/node_modules/is-buffer": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz",
+      "integrity": "sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/anymock-include": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/anymock-include/-/anymock-include-0.2.4.tgz",
+      "integrity": "sha512-2z/hPtEb3eqZgediVHiNn3nnsaWCIneQVsgZMJBLzzGyyyZnBkCFB6KL91/8mwtOlifGyGGppPWkpMrTIw3Q2g==",
+      "dependencies": {
+        "tslib": "^1.10.0"
+      }
+    },
+    "node_modules/anymock-openapi": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/anymock-openapi/-/anymock-openapi-1.2.0.tgz",
+      "integrity": "sha512-d2OEbYnTRTHBsIdutUFwA3BeVY1juFvgvzljZTmIUnjJBWepU26h90GWoNlOM4+7JBZ5C42sF3ZmpDD9yR+agg==",
+      "dependencies": {
+        "@types/node": "^13.7.4",
+        "anymock-client-token": "^1.2.0",
+        "anymock-include": "^0.2.1",
+        "tslib": "^1.10.0"
+      }
+    },
+    "node_modules/anymock-openapi/node_modules/@types/node": {
+      "version": "13.13.52",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.52.tgz",
+      "integrity": "sha512-s3nugnZumCC//n4moGGe6tkNMyYEdaDBitVjwPxXmR5lnMG5dHePinH2EdxkG3Rh1ghFHHixAG4NJhpJW1rthQ=="
+    },
     "node_modules/aproba": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
@@ -6077,6 +6161,19 @@
         "promise-polyfill": "^7.1.0"
       }
     },
+    "node_modules/dingtalk-mock-sdk": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/dingtalk-mock-sdk/-/dingtalk-mock-sdk-0.0.2.tgz",
+      "integrity": "sha512-VcttlJREG8WE0uzxyyYQ3qmxLPDz4I7fssJsdbV4okjCm8SmH356UaL5XpTEocvXxm8v21GH2HxfxmwYdebu4w==",
+      "dependencies": {
+        "anymock-ajax": "^1.2.0",
+        "anymock-client-token": "^1.2.0",
+        "anymock-openapi": "^1.0.3"
+      },
+      "peerDependencies": {
+        "dingtalk-jsapi": "^2.13.70"
+      }
+    },
     "node_modules/dir-glob": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-2.2.2.tgz",
@@ -8107,6 +8204,11 @@
         "minimalistic-crypto-utils": "^1.0.1"
       }
     },
+    "node_modules/hmacsha1": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/hmacsha1/-/hmacsha1-1.0.0.tgz",
+      "integrity": "sha512-4FP6J0oI8jqb6gLLl9tSwVdosWJ/AKSGJ+HwYf6Ixe4MUcEkst4uWzpVQrNOCin0fzTRQbXV8ePheU8WiiDYBw=="
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -12845,8 +12947,7 @@
     "node_modules/querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
-      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
-      "dev": true
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
     },
     "node_modules/randombytes": {
       "version": "2.1.0",
@@ -13187,8 +13288,7 @@
     "node_modules/requires-port": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
-      "dev": true
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
     "node_modules/resolve": {
       "version": "1.22.8",
@@ -15047,8 +15147,7 @@
     "node_modules/tslib": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
     "node_modules/tty-browserify": {
       "version": "0.0.0",
@@ -15522,7 +15621,6 @@
       "version": "1.5.10",
       "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
       "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
-      "dev": true,
       "dependencies": {
         "querystringify": "^2.1.1",
         "requires-port": "^1.0.0"
@@ -15558,6 +15656,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/utf8": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/utf8/-/utf8-3.0.0.tgz",
+      "integrity": "sha512-E8VjFIQ/TyQgp+TZfS6l8yp/xWppSAHzidGiRrqe4bK4XP9pTRyKFgGJpO3SN7zdX4DeomTrwaseCHovfpFcqQ=="
+    },
     "node_modules/util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",

package.json

@@ -12,6 +12,7 @@
     "axios": "^1.6.0",
     "core-js": "^3.6.5",
     "dingtalk-jsapi": "^2.13.71",
+    "dingtalk-mock-sdk": "^0.0.2",
     "lodash": "^4.17.21",
     "normalize.css": "^8.0.1",
     "vant": "^2.12.38",

src/router/index.js

@@ -10,6 +10,7 @@ const routes = [
   //   path: '/',
   //   redirect: 'Approve',
   // },
+
   {
     path: '/',
     name: 'Home',
@@ -18,6 +19,9 @@ const routes = [
     },
     component: Home
   },
+
+
+  // 审核页面
   {
     path: '/approve',
     name: 'Approve',
@@ -35,6 +39,19 @@ const routes = [
     component: () => import(/* webpackChunkName: "approve" */ '../views/approve/search.vue')
   },
   {
+    path: '/approve/examine',
+    name: 'Examine',
+    component: () => import(/* webpackChunkName: "approve" */ '../views/approve/examine.vue')
+  },
+  {
+    path: '/approve/detail',
+    name: 'ExamineDetail',
+    component: () => import(/* webpackChunkName: "approve" */ '../views/approve/detail.vue')
+  },
+
+
+  // 我的页面
+  {
     path: '/my',
     name: 'My',
     meta: { title: '我的', showTabBar: true },

src/styles/index.less

@@ -86,4 +86,12 @@ html,body{
     white-space: initial;
     line-clamp: 2;
     -webkit-box-orient: vertical;
+}
+
+.clearboth {
+    &::after {
+        content: "";
+        display: block;
+        clear: both;
+    }
 }

src/utils/util.js

@@ -0,0 +1,17 @@
+/**
+ * @Descriptions util 工具
+ */
+
+
+/**
+ * @description 判断操作系统是Android/iOS
+ * @returns String [android|iOS|unknow]
+ */
+export function checkPlatform () {
+    let userAgent = navigator.userAgent;
+    let isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1; //android终端
+    let isiOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
+    if (isAndroid) return 'android'
+    else if (isiOS) return 'iOS'
+    else return 'unknow'
+}

src/views/Approve.vue

@@ -18,7 +18,7 @@
         left-icon="search"
         :disabled="true"
         :readonly="true"
-        @click.native="handleClickSearchBox"
+        @click="handleClickSearchBox"
         />
       <div class="filterbox flex flex-row flex-0shrink"
         @click="() => popupVisibility = true"
@@ -42,6 +42,10 @@
         :approved-status="2"
       />
 
+      <div class="btnbox" @click="goexamine">jumptoexamine-pass</div>
+      <div class="btnbox" @click="goexamine2">jumptoexamine-refuse</div>
+      <div class="btnbox" @click="goDetail">goDetail</div>
+
       <!-- <my-empty tip="暂无待处理的" /> -->
     </div>
 
@@ -64,7 +68,9 @@
               <span
                 v-for="(type, idx) in types"
                 :key="idx"
-                class="item">
+                class="item"
+                @click="handleTouchThatType(event, type)"
+                >
                 {{ type.name }}
               </span>
             </div>
@@ -109,7 +115,7 @@ export default {
   },
   data () {
     return {
-      popupVisibility: true,
+      popupVisibility: false,
       example: [
         {
           label: '申请标题',
@@ -154,6 +160,7 @@ export default {
          { name: '入库申请', id: '' },
          { name: '申购申请', id: '' },
       ],
+      typeVal: '',
       timeStart: '',
       timeEnd: ''
     }
@@ -186,6 +193,12 @@ export default {
     __over__ () {},
     __recive__ () {},
 
+    // NOTE: choosed type
+    handleTouchThatType (type) {
+      const { name } = type
+      this.typeVal = name
+    },
+
     // NOTE: 点击跳转搜索页
     handleClickSearchBox () {
       this.$router.push({
@@ -199,7 +212,33 @@ export default {
     },
 
     // NOTE: 提交过滤搜索条件
-    handleSubmitFilter () {},
+    handleSubmitFilter () {
+      // NOTE：收集申请类型和申请时间
+
+    },
+    goexamine () {
+      this.$router.push({
+        name: 'Examine',
+        query: {
+          type: 'pass'
+        }
+      })
+    },
+    
+    goexamine2 () {
+      this.$router.push({
+        name: 'Examine',
+        query: {
+          type: 'refuse'
+        }
+      })
+    },
+    goDetail () {
+      this.$router.push({
+        name: 'ExamineDetail',
+        query: {}
+      })
+    }
   }
 }
 </script>
@@ -238,17 +277,17 @@ export default {
     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;
-    // }
+    position: relative;
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: 1;
+      width: 100%;
+      height: 100%;
+      background-color: transparent;
+    }
   }
   .filterbox {
     padding-left: 10px;

src/views/approve/components/DetailRows.vue

@@ -0,0 +1,160 @@
+<template>
+    <div class="detail-rows-container">
+        <div class="detail-rows-container__title flex flex-row flex-aic">
+            <div>
+                <span>{{ title }}</span>
+                <!-- TODO: 物品明细 - 下载按钮 -->
+            </div>
+
+            <!-- TODO: 采购明细 展开&收起 -->
+        </div>
+        <div v-if="[undefined, ''].includes(type)" class="value value--common">{{ value }}</div>
+        <div class="value value--link" v-else-if="type === 'link'">{{ value }}</div>
+
+        <!-- TODO: 后期添加 filter -->
+        <div class="value value--common" v-else-if="type === 'date'">{{ value }}</div>
+
+        <!-- TODO: 类型枚举 -->
+        <div class="value value--common" v-else-if="type === 'type'">{{ value }}</div>
+
+        <!-- TODO: 明细 后期会有更加细致的划分。 因为有11种模块 -->
+        <template v-else-if="type === 'projects'">
+            <!-- 采购商品明细 -->
+
+            <div class="projects-box-wrapper">
+                <div class="projects-box"
+                    v-for="(item, idx) in value"
+                    :key="idx"
+                >
+                    <div class="projects__header flex flex-row flex-row--aic">
+                        <div class="title">{{ item.projectName }}</div>
+                        <div class="count">x{{ item.count }}</div>
+                    </div>
+                    <div class="projects__footer flex flex-row flex-row-aic">
+                        <div class="tags">
+                            <span
+                                v-for="(tag, tagidx) in item.tags"
+                                :key="tagidx"
+                            >
+                                {{ tag }} {{ item.tags.length - 1 !== tagidx ? '；' : '' }}
+                            </span>
+                        </div>
+                        <div class="money">
+                            ￥{{ item.money }}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        
+        </template>
+
+    </div>
+</template>
+
+<script>
+
+export default {
+    props: {
+        title: {
+            type: String
+        },
+        type: {
+            validatro: (val) => {
+                return [
+                    undefined,
+                    '',
+                    'link',
+                    'date',
+                    'type',
+                    'projects',
+                    'files',
+                    'images'
+                ].includes(val)
+            }
+        },
+        value: {
+            type: [String, Array, Object]
+        }
+    },
+
+}
+</script>
+
+<style lang="less">
+@import url("@/styles/variables.less");
+.detail-rows {
+    &-container {
+        &__title {
+            font-size: @font-size-third;
+            font-weight: 400;
+            color: #727273;
+            line-height: 20px;
+        }
+
+        .value {
+            font-size: @font-size-common;
+            font-weight: 600;
+            font-weight: 400;
+            line-height: 24px;
+            &--common {
+                color: #191A1E;
+            }
+            &--link {
+                color: @link-color;
+            }
+        }
+
+
+        // 商品明细
+        .projects {
+            &-box-wrapper {
+                padding: 16px 12px;
+                background-color: rgba(248, 248, 248, 1);
+                border-radius: 7px;
+            }
+            &-box {
+                .title,
+                .tags {
+                    font-size: @font-size-common;
+                    font-weight: 400;
+                    color: #191A1E;
+                    line-height: 18px;
+                }
+
+                .count {
+                    font-size: @font-size-third;
+                    font-weight: 400;
+                    color: #727273;
+                    line-height: 18px;
+                }
+                &:last-child {
+                    .projects__footer {
+                        border-bottom: initial;
+                        padding-bottom: initial;
+                        margin-bottom: initial;
+                    }
+                }
+            }
+            &__header {
+                justify-content: space-between;
+                padding-bottom: 10px;
+                overflow: hidden;
+            }
+            &__footer {
+                justify-content: space-between;
+                padding-bottom: 10px;
+                border-bottom: 1px solid #D8D8D8;
+                margin-bottom: 10px;
+                overflow: hidden;
+                .money {
+                    font-size: @font-size-common;
+                    font-weight: 500;
+                    color: rgb(244, 86, 66);
+                    line-height: 18px;
+                }
+            }
+        }
+    }
+}
+
+</style>

src/views/approve/detail.vue

@@ -0,0 +1,248 @@
+<template>
+    <div class="examine-detail-container">
+        <div class="examine-detail__header">
+            <div class="title">
+                <span>{{ title }}</span>
+            </div>
+            <div class="location">
+                <van-icon name="chat-o" />
+                <span>{{ schoolName }}</span>
+            </div>
+            <div class="status-bar status-bar--warning">
+                <span>等待我处理</span>
+            </div>
+        </div>
+
+
+        <!-- 各种审批内容盒子 -->
+        <div class="examine-detail__main">
+            <detail-rows
+                class="detail-row"
+                v-for="(row, idx) in datalist"
+                :key="idx"
+                v-bind="row"
+            />
+
+        </div>
+
+        <!-- 流程组件 -->
+        <!-- @Description 流程化 用到的地方很多 -->
+
+
+        <!-- operate. 操作台 -->
+        <!-- 集成 提醒, 修改, 下载, 拒绝，同意  5种 -->
+    </div>
+</template>
+
+<script>
+import * as dd from 'dingtalk-jsapi'
+// dingtalk mock
+import { init } from 'dingtalk-mock-sdk'
+
+init({
+  token: 'GpsyyrAXNibXbqTA4CCtZkHmIuuYqGnS',
+  jsapiMock: true,
+  httpMock: false,
+})
+
+import setLeft from 'dingtalk-jsapi/api/biz/navigation/setLeft'
+import setTitle from 'dingtalk-jsapi/api/biz/navigation/setTitle'
+
+import { checkPlatform } from '@/utils/util'
+
+import DetailRows from './components/DetailRows.vue'
+
+export default {
+    name: 'ExamineDetail',
+    components: {
+        DetailRows
+    },
+    data () {
+        return {
+            isAndroid: checkPlatform() === 'android',
+            isiOS: checkPlatform() === 'iOS',
+            title: '刘辉提交的申请单',
+            schoolName: '深圳市第二特殊教育学校',
+            datalist: [
+                {
+                    title: '审批编号',
+                    value: '20222110741458005442684',
+                },
+                {
+                    title: '合同编号',
+                    value: '20222110741458005442684',
+                    type: 'link' // 代表它是一个链接
+                },
+                {
+                    title: '所在部门',
+                    value: '深圳市第二特殊教育学校-教师部'
+                },
+                {
+                    title: '申请日期',
+                    value: '2022-11-07',
+                    type: 'date' // 代表返回的是unixtime 时间戳需要自己转义`dayjs`
+                },
+                {
+                    title: '申请人',
+                    value: '刘辉'
+                },
+                {
+                    title: '申请事由',
+                    value: '学生生活用品购买'
+                },
+                {
+                    title: '申购类型',
+                    value: '货物申购',
+                    type: 'type' // 类型字段意味着这是枚举需要自己配置 
+                },
+                {
+                    type: 'projects',
+                    title: '申购明细',
+                    value: [
+                        {
+                            projectName: '学生冬季校服',
+                            count: 20,
+                            tags: ['蓝色', '165cm'],
+                            money: 56025
+                        },
+                        {
+                            projectName: '学生冬季校服',
+                            count: 30,
+                            tags: ['蓝色', '175cm'],
+                            money: 65025
+                        }
+                    ]
+                },
+                {
+                    title: '总金额',
+                    value: '100000'
+                },
+                {
+                    title: '预计申购完成日期',
+                    value: '2022-11-08'
+                },
+                {
+                    type: 'files', // 代表当前是 上传的文件
+                    title: '附件材料',
+                    value: [
+                        {
+                            type: 'pdf',
+                            name: '采购说明.pdf',
+                            size: '264.45KB'
+                        }
+                    ]
+                },
+                {
+                    type: 'images', // 代表当前是图片组
+                    title: '图片',
+                    value: [
+                        {
+                            url: 'http://xxxxx'
+                        }
+                    ]
+                },
+                {
+                    title: '支付方式',
+                    value: '银行转账' // NOTE: 转账方式理论上来讲也是一套枚举
+                }
+            ],
+        }
+    },
+    created () {
+        const that = this
+        
+        setTitle({
+            title: '详情'
+        })
+
+        if (this.isiOS) {
+            setLeft({
+                control: true,
+                text: '返回',
+                onSuccess: () => {
+                    that.handleBackEvent()
+                }
+            })
+        } else if (this.isAndroid) {
+            // 安卓平台添加返回回调
+            dd.on('leftBtnClick', this.handleBackEvent)
+        }
+
+        this.__init__()
+    },
+    methods: {
+        // NOTE: 页面初始化的模块
+        __init__ () {
+            // TODO: 请求接口&整合数据给予`datalist`字段
+        },
+
+        handleBackEvent() {
+            console.log('press back btn');
+            // NOTE: 通过路由返回
+            this.$router.push('/approve')
+        }
+    },
+    beforeDestroy () {
+            if (this.isAndroid) {
+                // 安卓移除回调
+            dd.off('leftBtnClick', this.handleBackEvent)
+        }
+    },
+}
+</script>
+
+<style lang="less">
+@import url('@/styles/variables.less');
+
+.examine-detail {
+    &-container {
+        .detail-row {
+            margin-bottom: 10px;
+        }
+    }
+    &__header {
+        padding: 10px 12px;
+        background-color: @white;
+        margin-bottom: 6px;
+        .title {
+            font-size: 16px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #191A1E;
+            line-height: 24px;
+        }
+        .location {
+            span {
+                width: 137px;
+                height: 18px;
+                font-size: 12px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #727273;
+                line-height: 18px;
+            }
+        }
+        .status-bar {
+            span {
+                font-size: @font-size-third;
+                font-weight: 500;
+                line-height: 18px;
+            }
+            &--success {
+                color: @status-success-color;
+            }
+            &--warning {
+                color: @status-warning-color;
+            }
+            &--danger {
+                color: @status-danger-color;
+            }
+
+        }
+    }
+    &__main {
+        padding: 14px 12px;
+        background-color: @white;
+    }
+}
+</style>

src/views/approve/examine.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="examine-container flex flex-col">
+        <div class="examine__input">
+            <van-field
+                v-model="message"
+                rows="26"
+                autosize
+                type="textarea"
+                maxlength="300"
+                placeholder="请输入审批意见"
+                show-word-limit
+            />
+        </div>
+
+        <div class="p-h-12">
+            <div class="btnbox" @click="handleResetSignature">
+                <span>{{ btnTxt }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+import * as dd from 'dingtalk-jsapi'
+
+export default {
+    computed: {
+        btnTxt () {
+            let t = this.type
+            let s = ''
+            switch(t) {
+                case 'pass':
+                    s =  '确认同意'
+                    break;
+                case 'refuse':
+                    s =  '确认拒绝'
+                    break;
+            }
+            return s
+        }
+    },
+    data () {
+        return {
+            message: '',
+           type: undefined, 
+           inputPlaceholder: ''
+        }
+    },
+    created () {
+        // this.$route.query
+        // type: pass通过, refuse拒绝
+        this.type = this.$route.query.type || undefined
+
+        // Set Navigation title and back
+        // dd.xxx
+        dd.biz.navigation.setTitle({
+            title: this.btnTxt
+        })
+    },
+}
+</script>
+<style lang="less">
+.examine {
+    &-container {
+        height: 100vh;
+        justify-content: space-between;
+        padding-bottom: 20px;
+        box-sizing: border-box;
+    }
+}
+
+</style>