init

.eslintrc.js

@@ -0,0 +1,31 @@
+/*
+ * Eslint config file
+ * Documentation: https://eslint.org/docs/user-guide/configuring/
+ * Install the Eslint extension before using this feature.
+ */
+module.exports = {
+  env: {
+    es6: true,
+    browser: true,
+    node: true
+  },
+  ecmaFeatures: {
+    modules: true
+  },
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module'
+  },
+  globals: {
+    wx: true,
+    App: true,
+    Page: true,
+    getCurrentPages: true,
+    getApp: true,
+    Component: true,
+    requirePlugin: true,
+    requireMiniProgram: true
+  },
+  extends: 'eslint:recommended',
+  rules: {}
+};

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+miniprogram_npm

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit "$1"

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+# 触发 lint-staged 钩子
+npx lint-staged

.npmrc

@@ -0,0 +1 @@
+registry = http://10.91.137.86:8002/repository/npm-group

README.md

@@ -0,0 +1,78 @@
+## gci小程序原生开发框架
+
+该框架用于原生小程序开发，集成了 ts + less + @vant/weapp。
+
+### quick start
+
+1. pnpm i
+2. 在微信开发者工具中构建npm：
+   > 工具 -> 构建npm  
+   > 该步骤会产生 /miniprogram/miniprogram_npm
+3. 开始开发。推荐使用vscode作为代码编辑器。
+
+### npm库引用
+
+#### npm install 的方式
+
+1. pnpm i xxx
+2. 在微信开发这工具中构建npm
+3. 代码中引用库
+   > 当引用组件时，要先在页面的json文件或者 app.json 中引入：
+
+```
+// app.json
+{
+  "usingComponents": {
+    "vant-btn": "@vant/weapp/button/index"
+  }
+}
+```
+
+#### dist 引入的方式
+
+1. 复制目标库的 dist 到 /miniprogram/lib
+2. 引用的时候需要具体到 /miniprogram/lib/dist，如：
+
+```
+// app.json
+{
+  "usingComponents": {
+    "vant-btn": "/lib/@vant/weapp/button/index"
+  }
+}
+```
+
+### http 请求
+
+小程序与web不同在于小程序需要指定域，所以需要在 `/miniprogram/config.ts` 中指定访问的域。  
+针对小程序的 `wx.request` 做了简单封装，使用风格沿用 gci-boot:
+
+```js
+// 详情请见 /miniprogram/api/base.ts
+getAction(url, data);
+deleteAction(url, data);
+postAction(url, data);
+putAction(url, data);
+upload(url, { filePath });
+```
+
+建议在 /api 路径下建立各个模块的接口文件。例如：
+
+```ts
+// /api/auth.ts
+/**
+ * 获取加密字符串
+ * @returns
+ */
+export const getEncryptedString = () => getAction('/sys/getEncryptedString');
+
+// /pages/index.ts
+const foo = async () => {
+  try {
+    const res = await getEncryptedString();
+    // do sth
+  } catch (err) {
+    // do sth to handle err
+  }
+};
+```

commitlint.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ['@commitlint/config-conventional']
+};

lint-staged.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  '*.{js,ts,jsx,tsx,md,vue}': [
+    // 'eslint --fix',
+    'prettier --write'
+  ]
+};

miniprogram/api/auth.ts

@@ -0,0 +1,7 @@
+import { getAction } from './base';
+
+/**
+ * 获取加密字符串
+ * @returns
+ */
+export const getEncryptedString = () => getAction('/sys/getEncryptedString');

miniprogram/api/base.ts

@@ -0,0 +1,130 @@
+import config from '../config';
+
+// 定义token
+let token = '';
+// 在登录之后设置token
+export function setToken(t: string) {
+  token = t;
+  // 可以选择将token保存到缓存中
+  // wx.setStorageSync('token', token)
+}
+export function clearToken() {
+  token = '';
+  // wx.setStorageSync('token', '')
+}
+
+interface Header {
+  'X-Access-Token': string;
+}
+export function request(method: any = 'GET', url: string, data?: any) {
+  return new Promise((resolve, reject) => {
+    const header: Header = { 'X-Access-Token': '' };
+    if (token) {
+      header['X-Access-Token'] = token;
+    } else {
+      header['X-Access-Token'] = wx.getStorageSync('token');
+    }
+    wx.request({
+      method,
+      url: config.baseUrl + url,
+      data,
+      header,
+      success: (res: any) => {
+        console.log(res);
+        if (res.data.code === 200 || res.data.code === 0) {
+          resolve(res.data);
+        } else if (res.data.message.includes('token失效')) {
+          //重新登录
+          wx.removeStorageSync('userInfo');
+          wx.removeStorageSync('token');
+          wx.removeStorageSync('organName');
+          wx.reLaunch({
+            url: '/pages/login/login'
+          });
+        } else {
+          resolve(res.data);
+          wx.showToast({
+            title: res.data.message,
+            icon: 'none'
+          });
+        }
+      },
+      fail: err => {
+        wx.showToast({
+          title: '访问失败，请检查当前的网络',
+          icon: 'none'
+        });
+        console.error('请求错误', err);
+        reject(err);
+      }
+    });
+  });
+}
+
+export const getAction = (url: string, params?: Object) =>
+  request('GET', generateUrl(url, params));
+
+export const deleteAction = (url: string, params?: Object) =>
+  request('DELETE', generateUrl(url, params));
+
+export const postAction = (url: string, data?: Object) =>
+  request('POST', url, data);
+
+export const putAction = (url: string, data?: Object) =>
+  request('PUT', url, data);
+
+interface UploadOption {
+  name: string;
+  filePath: string;
+  params?: Object;
+}
+export function upload(url: string, option: UploadOption) {
+  const { name = 'file', filePath, params } = option;
+  if (!filePath) throw new Error('filepath-not-found');
+  if (!wx.getStorageSync('token')) throw new Error('请先登录！');
+
+  return new Promise((resolve, reject) => {
+    const header: any = {
+      'Content-Type': 'multipart/form-data',
+      'X-Access-Token': ''
+    };
+    if (token) {
+      header['X-Access-Token'] = token;
+    } else {
+      header['X-Access-Token'] = wx.getStorageSync('token');
+    }
+    wx.uploadFile({
+      url: config.baseUrl + url,
+      filePath,
+      name,
+      formData: params,
+      header,
+      success: resolve,
+      fail: err => {
+        wx.showToast({
+          title: '上传失败',
+          icon: 'none'
+        });
+        console.error('请求错误', err.errMsg);
+        reject(err);
+      }
+    });
+  });
+}
+
+const generateUrl = (url: string, params?: any) => {
+  if (!params) return url;
+
+  const keys = Object.keys(params);
+  if (keys.length < 1) return url;
+
+  return (
+    url +
+    keys.reduce((res, it, idx) => {
+      if (typeof params[it] !== 'undefined') {
+        return `${res}${idx > 0 ? '&' : ''}${it}=${params[it]}`;
+      }
+      return res;
+    }, '?')
+  );
+};

miniprogram/app.json

@@ -0,0 +1,135 @@
+{
+  "pages": [
+    "pages/index/index",
+    "pages/manufacturerIndex/manufacturerIndex",
+    "pages/projectIndex/projectIndex",
+    "pages/maintenanceIndex/maintenanceIndex",
+    "pages/accidentReporting/accidentReporting",
+    "pages/violationReporting/violationReporting",
+    "pages/logs/logs",
+    "pages/login/login",
+    "pages/addressBook/addressBook",
+
+    "pages/driverIndex/index",
+    "pages/driverIndex/page/signInReocrd/signInReocrd",
+    "pages/driverIndex/page/signInFeedback/signInFeedback",
+
+    "pages/vehicleMonitoring/global/global",
+    "pages/vehicleMonitoring/realtime/realtime",
+    "pages/vehicleMonitoring/failureAlert/failureAlert",
+    "pages/vehicleMonitoring/component/vehicleSearch/vehicleSearch",
+    "pages/vehicleMaintenance/maintainRecord/maintainRecord",
+    "pages/vehicleMaintenance/maintainSend/maintainSend",
+    "pages/vehicleMaintenance/maintainCheck/maintainCheck",
+    "pages/vehicleMaintenance/maintainProcedure/maintainProcedure",
+    "pages/vehicleMaintenance/maintainResult/maintainResult",
+    "pages/vehicleMaintenance/operation/maintainApply/maintainApply",
+    "pages/vehicleMaintenance/operation/message/message",
+    "pages/vehicleMaintenance/operation/offer/offer",
+    "pages/vehicleMaintenance/operation/check/check",
+    "pages/vehicleMaintenance/operation/repair/repair",
+    "pages/vehicleMaintenance/operation/complete/complete",
+    "pages/vehicleMaintenance/operation/cancel/cancel",
+    "pages/vehicleMaintenance/operation/dataEntryOne/dataEntryOne",
+    "pages/vehicleMaintenance/operation/dataEntryTwo/dataEntryTwo",
+    
+    "pages/UpkeepPlan/UpkeepPlanApply/UpkeepPlanApply",
+    "pages/UpkeepPlan/message/message",
+    "pages/UpkeepPlan/check/check",
+    "pages/UpkeepPlan/cancel/cancel",
+    "pages/UpkeepPlan/UpkeepPlanRecord/UpkeepPlanRecord",
+    "pages/UpkeepPlan/UpkeepPlanInfo/UpkeepPlanInfo",
+
+    "pages/UpkeepBill/UpkeepBillRecord/UpkeepBillRecord",
+    "pages/UpkeepBill/UpkeepBillSend/UpkeepBillSend",
+    "pages/UpkeepBill/UpkeepBillCheck/UpkeepBillCheck",
+    "pages/UpkeepBill/UpkeepBillProcedure/UpkeepBillProcedure",
+    "pages/UpkeepBill/UpkeepBillResult/UpkeepBillResult",
+    "pages/UpkeepBill/operation/message/message",
+    "pages/UpkeepBill/operation/cancel/cancel",
+    "pages/UpkeepBill/operation/offer/offer",
+    "pages/UpkeepBill/operation/check/check",
+    "pages/UpkeepBill/operation/upkeep/upkeep",
+    "pages/UpkeepBill/operation/complete/complete",
+    "pages/UpkeepBill/operation/dataEntryOne/dataEntryOne",
+    "pages/UpkeepBill/operation/dataEntryTwo/dataEntryTwo",
+
+    "pages/backlog/backlogList/backlogList",
+    "pages/backlog/backlogFeedback/backlogFeedback",
+    "pages/backlog/insurance/insurance",
+    "pages/backlog/insuranceFeedback/insuranceFeedback",
+    "pages/backlog/violation/violation",
+    "pages/backlog/violationFeedback/violationFeedback",
+    "pages/backlog/accident/accident",
+    "pages/backlog/accidentFeedback/accidentFeedback",
+    "pages/backlog/annualInspection/annualInspection",
+    "pages/backlog/annualInspectionFeedback/annualInspectionFeedback",
+
+    "pages/handoverVehicle/handoverVehicleRecord/handoverVehicleRecord",
+    "pages/handoverVehicle/procurementDelivery/procurementDelivery",
+    "pages/handoverVehicle/procurementDeliveryEdit/procurementDeliveryEdit",
+    "pages/handoverVehicle/rentalDelivery/rentalDelivery",
+    "pages/handoverVehicle/rentalDeliveryEdit/rentalDeliveryEdit",
+
+    "pages/eventReport/eventReportRecord/eventReportRecord",
+    "pages/eventReport/eventReportDetail/eventReportDetail",
+    "pages/eventReport/eventReportAdd/eventReportAdd",
+    "pages/eventReport/eventReportFeedback/eventReportFeedback",
+
+    "pages/insurancePolicyReport/insurancePolicyReport",
+
+    "pages/statement/reportStatement/reportStatement",
+    "pages/costEstimation/costEstimationRecord/costEstimationRecord",
+    "pages/costEstimation/costEstimationDetail/costEstimationDetail",
+    "pages/costEstimation/costEstimationAdd/costEstimationAdd"
+  ],
+  "subPackages": [
+    {
+      "root": "packageA",
+      "pages": [
+        "pages/customerFollow/customerFollow",
+        "pages/customerFollowDetail/customerFollowDetail",
+
+        "pages/refuelingCharging/RefuelingChargingRecord/RefuelingChargingRecord",
+        "pages/refuelingCharging/RefuelingChargingDetail/RefuelingChargingDetail",
+        "pages/refuelingCharging/RefuelingChargingReporting/RefuelingChargingReporting"
+      ]
+    }
+  ], 
+  "window": {
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#3679FC",
+    "navigationBarTitleText": "Weixin",
+    "navigationBarTextStyle": "white"
+  },
+  "tabBar": {
+    "custom": true,
+    "color": "#000000",
+    "selectedColor": "#000000",
+    "backgroundColor": "#000000",
+    "list": [
+      {
+        "pagePath": "pages/maintenanceIndex/maintenanceIndex",
+        "text": "工作台"
+      },
+      {
+        "pagePath": "pages/backlog/backlogList/backlogList",
+        "text": "代办"
+      },
+      {
+        "pagePath": "pages/addressBook/addressBook",
+        "text": "通讯录"
+      }
+    ]
+  },
+  "requiredPrivateInfos": [
+    "chooseLocation",
+    "getLocation"
+  ],
+  "permission": {
+    "scope.userLocation": {
+      "desc": "获取当前位置"
+    }
+  },
+  "sitemapLocation": "sitemap.json"
+}

miniprogram/app.less

@@ -0,0 +1,16 @@
+/**app.wxss**/
+// .container {
+//   height: 100%;
+//   display: flex;
+//   flex-direction: column;
+//   align-items: center;
+//   justify-content: space-between;
+//   padding: 200rpx 0;
+//   box-sizing: border-box;
+// } 
+page {
+  max-height: 100vh;
+  padding-bottom: constant(safe-area-inset-bottom); //constant在iOS<11.2的版本中生效
+  padding-bottom: env(safe-area-inset-bottom); //env在iOS>=11.2的版本中生效
+  box-sizing: border-box;
+}

miniprogram/app.ts

@@ -0,0 +1,62 @@
+// app.ts
+App<IAppOption>({
+  globalData: {},
+  onLaunch() {
+    // 小程序每次打开都会调用一次
+    // 展示本地存储能力
+    const logs = wx.getStorageSync('logs') || [];
+    logs.unshift(Date.now());
+    wx.setStorageSync('logs', logs);
+
+    wx.getSetting({
+      success(res: any) {
+        console.log(res.authSetting);
+        if (!res.authSetting['scope.userLocation']) {
+          wx.showToast({
+            title: '请在小程序设置界面中设置位置消息权限。',
+            icon: 'none'
+          });
+        }
+      }
+    });
+    // 登录
+    wx.login({
+      success: res => {
+        console.log(res.code);
+        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+        wx.setStorageSync('code', res.code);
+      }
+    });
+    // 判断是否登录
+    const token = wx.getStorageSync('token');
+    if (!token) {
+      wx.reLaunch({
+        url: '/pages/login/login'
+      });
+    } else {
+      // 获取token，用户信息 判断账号角色然后跳转到对应的首页
+      let userInfo = wx.getStorageSync('userInfo');
+      if (userInfo.type == '1') {
+        wx.reLaunch({
+          url: '/pages/driverIndex/index'
+        });
+      } else if (userInfo.type == '2') {
+        wx.reLaunch({
+          url: '/pages/manufacturerIndex/manufacturerIndex'
+        });
+      } else if (userInfo.type == '3') {
+        wx.reLaunch({
+          url: '/pages/projectIndex/projectIndex'
+        });
+      } else if (userInfo.type == '4') {
+        wx.reLaunch({
+          url: '/pages/maintenanceIndex/maintenanceIndex'
+        });
+      } else {
+        wx.reLaunch({
+          url: '/pages/login/login'
+        });
+      }
+    }
+  }
+});

miniprogram/components/uploadPic/uploadPic.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-uploader": "@vant/weapp/uploader/index"
+  }
+}

miniprogram/components/uploadPic/uploadPic.less

@@ -0,0 +1,64 @@
+/* components/uploadPic/uploadPic.wxss */
+.upload-container {
+  .upload {
+    // width: 100%;
+    // margin-top: 8px;
+    display: flex;
+    flex-wrap: wrap;
+
+    .upload-btn {
+      width: 64px;
+      height: 64px;
+      margin-right: 8px;
+      margin-bottom: 8px;
+      background: #ECF1FF;
+      border-radius: 4px;
+      border: 1px dashed #4381FC;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      image {
+        width: 20px;
+        height: 20px;
+        margin: 16rpx 0 8rpx;
+      }
+
+      .val {
+        color: #4381FC;
+        font-size: 14px;
+      }
+    }
+
+    .photo-list {
+      width: 64px;
+      height: 64px;
+      margin-right: 8px;
+      margin-bottom: 8px;
+      border-radius: 4px;
+      position: relative;
+
+      image {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+
+      .del {
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        top: -10px;
+        right: -10px;
+
+        image {
+          width: 100%;
+          height: 100%;
+          display: block;
+        }
+      }
+    }
+  }
+}

miniprogram/components/uploadPic/uploadPic.ts

@@ -0,0 +1,164 @@
+// components/uploadPic/uploadPic.ts
+import { postAction, upload } from '../../api/base';
+
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    uploadUrl: {
+      type: String,
+      value: 'api/vehicles/accidentInfo/upload'
+    },
+    maxLength: {
+      type: Number,
+      value: 1
+    },
+    picList: {
+      type: Array,
+      value: []
+    }
+  },
+  observers: {
+    picList: function (val: any, oVal: any) {
+      // console.log(val,oVal)
+      // if(val) {
+      //   this.setDate({
+      //     photoList: val
+      //   })
+      //   this.data.changePhotoList()
+      // }
+    }
+  },
+  attached() {
+    // console.log(this.properties.picList)
+    // this.setData({
+    //   photoList: this.properties.picList.value
+    // })
+  },
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    photoList: []
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  ready: function () {
+    console.log('上传ready', this.properties.picList);
+  },
+  methods: {
+    // initPhotoList(list: any) {
+    //   console.log(list)
+    //   this.setData({
+    //     photoList: list
+    //   })
+    // },
+    choosePhoto() {
+      console.log(this);
+      let _this = this;
+      if (this.data.photoList.length < this.properties.maxLength) {
+        let maxCount;
+        if (this.properties.maxLength - this.data.photoList.length >= 6)
+          maxCount = 6;
+        else maxCount = this.properties.maxLength - this.data.photoList.length;
+        wx.chooseMedia({
+          count: maxCount, // 最多同时选 6张
+          mediaType: ['image'],
+          success(res) {
+            console.log(res);
+            let { tempFiles } = res;
+            tempFiles.forEach((item, index) => {
+              _this.uploadImg(item.tempFilePath); // 循环执行上传放法，实现多张图片，同时上传
+            });
+          },
+          fail(err) {
+            console.log(err);
+          }
+        });
+      } else {
+        wx.showToast({
+          title: `最多上传${this.properties.maxLength}张图片`,
+          icon: 'none'
+        });
+      }
+    },
+
+    // 选择本地图片
+    uploadImg(imgSrcList: any) {
+      console.log(imgSrcList);
+      var that = this;
+      let { photoList } = this.data;
+      wx.showLoading({
+        title: '加载中',
+        mask: true
+      });
+      let parms = {
+        name: 'file',
+        filePath: imgSrcList
+      };
+      upload(this.properties.uploadUrl, parms)
+        .then((res: any) => {
+          let result = JSON.parse(res.data);
+          if (result.code == 200) {
+            // console.log(result);
+            photoList.push(result.result);
+            this.setData({
+              photoList: photoList
+            });
+            this.returnPic();
+            wx.hideLoading();
+          } else {
+            console.log('失败');
+            wx.hideLoading();
+            wx.showToast({
+              title: result.message,
+              icon: 'none'
+            });
+          }
+        })
+        .catch(err => {
+          wx.hideLoading();
+          wx.showToast({
+            title: err.message,
+            icon: 'none'
+          });
+        });
+    },
+    delImg(e: any) {
+      let that = this;
+      let { index } = e.currentTarget.dataset;
+      let { photoList } = this.data;
+      wx.showModal({
+        title: '提示',
+        content: '是否删除当前照片',
+        success(res) {
+          if (res.confirm) {
+            photoList.splice(index, 1);
+            that.setData({
+              photoList
+            });
+            that.returnPic();
+          }
+        }
+      });
+    },
+    returnPic() {
+      this.triggerEvent('returnPic', { photoList: this.data.photoList });
+    },
+    previewImg(e: any) {
+      let { index } = e.currentTarget.dataset;
+      let { photoList } = this.data;
+      let list = [] as any;
+      photoList.forEach((item: any) => {
+        list.push(item.fileUrl);
+      });
+      wx.previewImage({
+        current: list[index | 0], // 当前显示图片的http链接  默认urls[0]
+        urls: list // 需要预览的图片http链接列表
+      });
+    }
+  }
+});

miniprogram/components/uploadPic/uploadPic.wxml

@@ -0,0 +1,22 @@
+<!--components/uploadPic/uploadPic.wxml-->
+<view class="upload-container">
+  <view class="upload">
+    <view class="upload-btn" wx:if="{{photoList.length < maxLength}}" bindtap="choosePhoto">
+      <image src="../../images/icon_upload.png" mode=""/>
+      <view class="val">上传图片</view>
+    </view>
+    <!-- 注意bindtap 和 catchtap的区别，catchtap可以阻止事件冒泡-->
+    <view class="photo-list" wx:for="{{photoList}}" data-index="{{index}}" bindtap="previewImg" wx:key="index">
+      <image src="{{item.fileUrl}}" mode=""/>
+      <view class="del" catchtap="delImg" data-index="{{index}}">
+        <image src="../../images/btn_del.png" mode=""/>
+      </view>
+    </view>
+    <!-- <van-uploader 
+      accept="image"
+      file-list="{{ photoList }}" 
+      max-count="{{ maxLength }}" 
+      deletable="{{ true }}" 
+      bind:after-read="uploadImg" /> -->
+  </view>
+</view>

miniprogram/config.ts

@@ -0,0 +1,13 @@
+export default {
+  // baseUrl: 'http:10.91.122.6:8051/smartTransportMobile'
+  // baseUrl: 'http://10.91.123.10:8068/cdenv-api/' // 书汉
+  // baseUrl: 'http://10.180.20.111:8068/cdenv-api/' // 文龙
+  // baseUrl: 'http://10.180.12.174:8068/cdenv-api/' // 作恒
+  // baseUrl: 'http://10.180.22.227:8068/cdenv-api/' //玉赞
+  // baseUrl: 'https://gaosudanao.gci-china.com/' //高速公路测试环境
+  // baseUrl: 'http://10.91.123.10:8091/cdenv/'
+  baseUrl: 'http://10.91.123.10:8068/cdenv-api/'
+  // baseUrl: 'http://10.91.137.95:8080/kfb'
+  // baseUrl: 'http://10.180.11.162:8068/cdenv-api/'
+  // baseUrl: 'https://zuche.cdenvironment.com:25000/cdenv-api/' // 产线
+};

miniprogram/custom-tab-bar/index.js

@@ -0,0 +1,38 @@
+Component({
+  data: {
+    selected: 0,
+    color: '#7A7E83',
+    selectedColor: '#3B7CFC',
+    list: [
+      {
+        pagePath: '/pages/maintenanceIndex/maintenanceIndex',
+        iconPath: '/images/icon_tabbar_h.png',
+        selectedIconPath: '/images/icon_tabbar_hs.png',
+        text: '工作台'
+      },
+      {
+        pagePath: '/pages/backlog/backlogList/backlogList',
+        iconPath: '/images/icon_tabbar2.png',
+        selectedIconPath: '/images/icon_tabbar2.png',
+        text: '待办'
+      },
+      {
+        pagePath: '/pages/addressBook/addressBook',
+        iconPath: '/images/icon_tabbar_n.png',
+        selectedIconPath: '/images/icon_tabbar_ns.png',
+        text: '通讯录'
+      }
+    ]
+  },
+  attached() {},
+  methods: {
+    switchTab(e) {
+      const data = e.currentTarget.dataset;
+      const url = data.path;
+      wx.switchTab({ url });
+      this.setData({
+        selected: data.index
+      });
+    }
+  }
+});

miniprogram/custom-tab-bar/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

miniprogram/custom-tab-bar/index.less

@@ -0,0 +1,62 @@
+.tab-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 120px;
+  background: transparent;
+  // padding-bottom: env(safe-area-inset-bottom);
+  .tab-bar-bg {
+    width: 100vw;
+    height: 120px;
+    position: absolute;
+    left: 0;
+    top: 0;
+    image {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+  }
+  .tab-bar-list {
+    width: 100%;
+    // height: 80px;
+    padding-bottom: env(safe-area-inset-bottom);
+    box-sizing: border-box;
+    display: flex;
+    position: absolute;
+    top: 86rpx;
+    // bottom: 0;
+    .tab-bar-item {
+      padding-top: 8px;
+      flex: 1;
+      text-align: center;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      flex-direction: column;
+      image {
+        width: 20px;
+        height: 20px;
+      }
+      view {
+        margin-top: 10px;
+        color: #737373;
+        font-size: 12px;
+        font-weight: bold;
+      }
+    }
+    .tab-bar-item:nth-child(2) {
+      image {
+        width: 56px;
+        height: 56px;
+        position: absolute;
+        top: -24px;
+      }
+      view {
+        margin-top: 20px;
+      }
+    }
+  }
+  
+}

miniprogram/custom-tab-bar/index.wxml

@@ -0,0 +1,12 @@
+<!--miniprogram/custom-tab-bar/index.wxml-->
+<view class="tab-bar">
+  <view class="tab-bar-bg">
+    <image src="../images/bg_tabbar.png" mode=""/>
+  </view>
+  <view class="tab-bar-list">
+    <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
+      <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
+      <view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
+    </view>
+  </view>
+</view>