初始化代码

src/minxin/sign.js

+import * as rnr from '@/api/rnr'
+import * as markup from '@/api/markup'
+import Sign from '@/components/Sign'
+import { queryPotocolManage, queryPotocolCustomerManage } from '@/api/rnr'
+
+// 绘图的宽度
+const CANVAS_WIDTH = 600
+
+export default {
+  data() {
+    return {
+      showSign: false,
+      paper: {
+        origin: '',
+        src: '',
+        width: CANVAS_WIDTH,
+        height: 0
+      },
+      signUrl: '',
+      contractPic: []
+    }
+  },
+  components: { Sign },
+  computed: {
+    /**
+     * 按钮是否禁用
+     */
+    btnDisable() {
+      // 如果
+      return !this.signUrl
+    }
+  },
+  methods: {
+    /**
+     * 展示签名弹框
+     */
+    async openSign() {
+      // 展示签名弹框
+      this.showSign = true
+    },
+
+    /**
+     * 初始化协议的图片路径
+     * @param rnrType 实名类型 rnr: 实名 markup: 补录
+     * @param protocalType 协议类型
+     */
+    async initPaperSrc(rnrType, protocalType) {
+      // 记录当前输入的
+      this.rnrType = rnrType
+      this.protocalType = protocalType
+      // 登录用户
+      const { organId } = this.$store.getters.loginUser
+      // 请求方法
+      let request = queryPotocolManage
+      // 请求参数
+      let params = { orgId: organId }
+      // 如果当前是补录
+      if (rnrType === 'markup') {
+        request = queryPotocolCustomerManage
+        params = {}
+      }
+      // 查询当前登录人的组织下的协议
+      const protocal = await request(params) || {}
+      // 设置src的值
+      try {
+        // 协议对象
+        const paperObj = protocal[`${protocalType}${window.os.isTablet ? 'Vertical' : 'Horizontal'}`]
+        // 如果协议对象存在，则直接复制
+        if (paperObj) {
+          this.paper.origin = paperObj.fileUrl
+          this.paper.src = paperObj.fileUrl
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+
+    /**
+     * 上传协议
+     */
+    async handleUploadAgreement(customer = false) {
+      // 呈现loading框
+      this.loading = true
+      try {
+        const { blob } = this.paper
+        // 文件可访问路径和文件的uuid
+        const { uuid } = await (customer ? markup : rnr).fileUpload({ file: new File([blob], `${this.$route.meta ? this.$route.meta.title : '协议'}.png`) })
+        // 保存数据
+        this.contractPic = [uuid]
+        // 展示发送短信验证码的弹框
+        if (this.$route.name === 'MarkupPersonAgreement') {
+          this.handleToNext()
+          return
+        }
+        if (this.$route.name === 'MarkupEnterpriseAgreement') {
+          this.handleToNext()
+          return
+        }
+        this.showSms = true
+      } catch (error) {
+        console.error(error)
+      }
+      // 关闭loading框
+      this.loading = false
+    },
+
+    /**
+     * 接收签名
+     * @param signUrl 当前签名
+     */
+    handleSignChange(signUrl) {
+      // 记录当前签名
+      this.signUrl = signUrl
+    },
+
+    /**
+     * 创建一个图片
+     * @param src 图片的url
+     */
+    createImage(src) {
+      return new Promise((resolve, reject) => {
+        const image = new Image()
+        image.setAttribute('crossOrigin', 'anonymous')
+        image.onload = () => {
+          resolve(image)
+        }
+        image.src = src
+      })
+    },
+
+    /**
+     * 图片加载成功方法
+     */
+    async handleImageLoaded() {
+      // 如果已经加载过图片了
+      if (this.paper.image) {
+        return
+      }
+      // 协议图片
+      const image = document.querySelector('#page-rnr-main-canvas')
+      // 解决跨域问题
+      image.crossOrigin = ''
+      // 当前协议宽度
+      const paperWidth = image.naturalWidth || image.width * 2
+      // 当前协议的真实高度
+      const paperHeight = image.naturalHeight || image.height * 2
+      // 设置当前绘制的canvas的高度
+      this.paper.height = this.paper.width / paperWidth * paperHeight
+      // 记录当前image对象
+      this.paper.image = await this.createImage(this.paper.origin)
+    }
+  }
+}

src/permission.js

+import router from './router'
+import store from './store'
+import { SET_LOGIN_USER_INFO } from '@/store/modules/user'
+import { setToken, getToken } from '@/utils/auth'
+
+router.beforeEach(async(to, from, next) => {
+  // 获取当前token
+  const hasToken = getToken()
+  // 跳转到登录页
+  if (to.name === 'Login') {
+    // 请求logo
+    await store.dispatch('dict/getLogo', to.params.name.toLowerCase() === 'user')
+    next()
+    return
+  }
+  if (to.name === 'Download') {
+    console.log('======>正在跳转至下载页面')
+    return next()
+  }
+  // 如果需要跳转到C端首页
+  if (to.name === 'UserHome') {
+    // 如果当前有token
+    to.query.token && setToken(to.query.token)
+    // 开始派发时间
+    store.commit(`user/${SET_LOGIN_USER_INFO}`, {
+      vin: to.query.vin || '',
+      token: to.query.token,
+      type: 'C',
+      phone: to.query.phone
+    })
+    // 请求logo
+    await store.dispatch('dict/getLogo', true)
+    next()
+    return
+  }
+  if (from.path === '/') {
+    // 如果当前没有token，则直接跳转登录页
+    if (!hasToken) {
+      const metaType = to.meta.type || 'business'
+      // 请求logo
+      await store.dispatch('dict/getLogo', {
+        isCustomer: metaType.toLowerCase() === 'user'
+      })
+      return next({
+        name: 'Login',
+        params: { name: metaType },
+        query: {
+          ...(to.query || {})
+        }
+      })
+    } else {
+      // 请求logo和字典项
+      await Promise.all([
+        store.dispatch('dict/getLogo', {
+          isCustomer: store.getters.loginUser.type === 'C'
+        }),
+        store.dispatch('dict/initDict')
+      ])
+    }
+  }
+  next()
+})
+

src/router/asyncRouter.js

+import personRnr from './person-rnr'
+import enterpriseRnr from './enterprise-rnr'
+import personMarkup from './person-markup'
+import enterpriseMarkup from './enterprise-markup'
+import login from './login'
+import bind from './bind'
+import search from './search'
+
+export default [
+  personRnr,
+  enterpriseRnr,
+  personMarkup,
+  enterpriseMarkup,
+  login,
+  bind,
+  search
+]

src/router/bind.js

+const router = {
+  path: '/bind',
+  name: 'Bind',
+  meta: { title: '绑定', type: 'user' },
+  component: () => import('@/components/Layout'),
+  children: [
+    {
+      path: '/bind/unbound/:iccid/:rnrId/:vin',
+      name: 'Unbound',
+      component: () => import('@/views/bind/unbound'),
+      meta: { title: '解绑', type: 'user' }
+    },
+    {
+      path: '/bind/rebind/:iccid/:rnrId/:vin',
+      name: 'Rebind',
+      component: () => import('@/views/bind/rebind'),
+      meta: { title: '重新绑定', type: 'user' }
+    }
+  ]
+}
+export default router

src/router/enterprise-markup.js

+const router = {
+  path: '/markup/enterprise',
+  name: 'MarkupEnterprise',
+  meta: { title: '企业实名认证', type: 'user' },
+  component: () => import('@/components/Layout'),
+  children: [
+    {
+      path: '/markup/enterprise/card',
+      name: 'MarkupEnterpriseCard',
+      meta: { title: '填写车卡信息', type: 'user' },
+      component: () => import('@/views/markup/enterprise/card')
+    },
+    {
+      path: '/markup/enterprise/cert',
+      name: 'MarkupEnterpriseCert',
+      meta: { title: '填写企业信息', type: 'user' },
+      component: () => import('@/views/markup/enterprise/cert')
+    },
+    {
+      path: '/markup/enterprise/cert-image',
+      name: 'MarkupEnterpriseCertImage',
+      meta: { title: '上传企业证件照片', type: 'user' },
+      component: () => import('@/views/markup/enterprise/cert-image')
+    },
+    {
+      path: '/markup/enterprise/user',
+      name: 'MarkupEnterpriseUser',
+      meta: { title: '责任人身份信息', type: 'user' },
+      component: () => import('@/views/markup/enterprise/user')
+    },
+    {
+      path: '/markup/enterprise/paper',
+      name: 'MarkupEnterprisePaper',
+      meta: { title: '责任人身份信息', type: 'user' },
+      component: () => import('@/views/markup/enterprise/paper')
+    },
+    {
+      path: '/markup/enterprise/idcard',
+      name: 'MarkupEnterpriseIdcard',
+      meta: { title: '责任人身份信息', type: 'user' },
+      component: () => import('@/views/markup/enterprise/idcard')
+    },
+    {
+      path: '/markup/enterprise/file',
+      name: 'MarkupEnterpriseFile',
+      meta: { title: '责任人身份信息', type: 'user' },
+      component: () => import('@/views/markup/enterprise/file')
+    },
+    {
+      path: '/markup/enterprise/notification',
+      name: 'MarkupEnterpriseNotification',
+      meta: { title: '责任告知书', type: 'user' },
+      component: () => import('@/views/markup/enterprise/notification')
+    },
+    {
+      path: '/markup/enterprise/agreement',
+      name: 'MarkupEnterpriseAgreement',
+      meta: { title: '入网协议', type: 'user' },
+      component: () => import('@/views/markup/enterprise/agreement')
+    },
+    {
+      path: '/markup/enterprise/result',
+      name: 'MarkupEnterpriseResult',
+      meta: { title: '校验结果', type: 'user' },
+      component: () => import('@/views/markup/enterprise/result')
+    }
+  ]
+}
+
+export default router

src/router/enterprise-rnr.js

+const router = {
+  path: '/rnr/enterprise',
+  name: 'RnrEnterprise',
+  meta: { title: '企业实名认证', type: 'business' },
+  component: () => import('@/components/Layout'),
+  children: [
+    {
+      path: '/rnr/enterprise/card',
+      name: 'RnrEnterpriseCard',
+      meta: { title: '填写车卡信息', type: 'business' },
+      component: () => import('@/views/rnr/enterprise/card')
+    },
+    {
+      path: '/rnr/enterprise/cert',
+      name: 'RnrEnterpriseCert',
+      meta: { title: '填写企业信息', type: 'business' },
+      component: () => import('@/views/rnr/enterprise/cert')
+    },
+    {
+      path: '/rnr/enterprise/cert-image',
+      name: 'RnrEnterpriseCertImage',
+      meta: { title: '上传企业证件照片', type: 'business' },
+      component: () => import('@/views/rnr/enterprise/cert-image')
+    },
+    {
+      path: '/rnr/enterprise/user',
+      name: 'RnrEnterpriseUser',
+      meta: { title: '责任人身份信息', type: 'business' },
+      component: () => import('@/views/rnr/enterprise/user')
+    },
+    {
+      path: '/rnr/enterprise/paper',
+      name: 'RnrEnterprisePaper',
+      meta: { title: '责任人身份信息', type: 'business' },
+      component: () => import('@/views/rnr/enterprise/paper')
+    },
+    {
+      path: '/rnr/enterprise/idcard',
+      name: 'RnrEnterpriseIdcard',
+      meta: { title: '责任人身份信息', type: 'business' },
+      component: () => import('@/views/rnr/enterprise/idcard')
+    },
+    {
+      path: '/rnr/enterprise/file',
+      name: 'RnrEnterpriseFile',
+      meta: { title: '责任人身份信息', type: 'business' },
+      component: () => import('@/views/rnr/enterprise/file')
+    },
+    {
+      path: '/rnr/enterprise/notification',
+      name: 'RnrEnterpriseNotification',
+      meta: { title: '责任告知书', type: 'business' },
+      component: () => import('@/views/rnr/enterprise/notification')
+    },
+    {
+      path: '/rnr/enterprise/agreement',
+      name: 'RnrEnterpriseAgreement',
+      meta: { title: '入网协议', type: 'business' },
+      component: () => import('@/views/rnr/enterprise/agreement')
+    },
+    {
+      path: '/rnr/enterprise/result',
+      name: 'RnrEnterpriseResult',
+      meta: { title: '校验结果', type: 'business' },
+      component: () => import('@/views/rnr/enterprise/result')
+    }
+  ]
+}
+
+export default router

src/router/index.js

+import Vue from 'vue'
+import Router from 'vue-router'
+import asyncRouter from './asyncRouter'
+
+Vue.use(Router)
+
+export default new Router({
+  base: process.env.VUE_APP_ROUTER,
+  mode: 'history',
+  routes: [
+    {
+      path: '/',
+      name: 'Home',
+      component: () => import('@/views/home')
+    },
+    {
+      path: '/user',
+      name: 'User',
+      meta: {
+        name: '用户首页',
+        type: 'user'
+      },
+      redirect: '/user/home'
+    },
+    {
+      path: '/user/home',
+      name: 'UserHome',
+      meta: {
+        name: '用户首页',
+        type: 'user'
+      },
+      component: () => import('@/views/home/user')
+    },
+    {
+      path: '/404',
+      name: '404',
+      component: () => import('@/views/404')
+    },
+    {
+      path: '*',
+      redirect: '/404'
+    },
+    ...asyncRouter
+  ]
+})

src/router/login.js

+const router = {
+  path: '/login',
+  name: 'Login',
+  meta: { title: '登录' },
+  redirect: '/login/business',
+  component: () => import('@/components/Layout'),
+  children: [
+    {
+      path: '/login/agreement',
+      name: 'LoginAgreement',
+      component: () => import('@/views/login/agreement'),
+      meta: { title: '实名制登记用户协议、隐私政策' }
+    },
+    {
+      path: '/login/:name',
+      name: 'Login',
+      component: () => import('@/views/login/login'),
+      meta: { title: '登录' }
+    },
+    {
+      path: '/user/help',
+      name: 'Help',
+      meta: { title: '帮助' },
+      component: () => import('@/views/user/help')
+    }
+  ]
+}
+export default router

src/router/person-markup.js

+const router = {
+  path: '/markup/person',
+  name: 'MarkupPerson',
+  meta: { title: '自然人补录', type: 'user' },
+  component: () => import('@/components/Layout'),
+  children: [
+    {
+      path: '/markup/person/card',
+      name: 'MarkupPersonCard',
+      meta: { title: '车卡信息', type: 'user' },
+      component: () => import('@/views/markup/person/card')
+    },
+    {
+      path: '/markup/person/base',
+      name: 'MarkupPersonBase',
+      meta: { title: '身份信息', type: 'user' },
+      component: () => import('@/views/markup/person/base')
+    },
+    {
+      path: '/markup/person/idcard',
+      name: 'MarkupPersonIdcard',
+      meta: { title: '证件信息', type: 'user' },
+      component: () => import('@/views/markup/person/idcard')
+    },
+    {
+      path: '/markup/person/paper',
+      name: 'MarkupPersonPaper',
+      meta: { title: '证件信息', type: 'user' },
+      component: () => import('@/views/markup/person/paper')
+    },
+    {
+      path: '/markup/person/file',
+      name: 'MarkupPersonFile',
+      meta: { title: '文件信息', type: 'user' },
+      component: () => import('@/views/markup/person/file')
+    },
+    {
+      path: '/markup/person/notification',
+      name: 'MarkupPersonNotification',
+      meta: { title: '责任告知书', type: 'user' },
+      component: () => import('@/views/markup/person/notification')
+    },
+    {
+      path: '/markup/person/agreement',
+      name: 'MarkupPersonAgreement',
+      meta: { title: '入网协议', type: 'user' },
+      component: () => import('@/views/markup/person/agreement')
+    },
+    {
+      path: '/markup/person/result',
+      name: 'MarkupPersonResult',
+      meta: { title: '校验结果', type: 'user' },
+      component: () => import('@/views/markup/person/result')
+    }
+  ]
+}
+
+export default router

src/router/person-rnr.js

+const router = {
+  path: '/rnr/person',
+  name: 'RnrPerson',
+  meta: { title: '自然人实名认证', type: 'business' },
+  component: () => import('@/components/Layout'),
+  children: [
+    {
+      path: '/rnr/person/card',
+      name: 'RnrPersonCard',
+      meta: { title: '填写车卡信息', type: 'business' },
+      component: () => import('@/views/rnr/person/card')
+    },
+    {
+      path: '/rnr/person/base',
+      name: 'RnrPersonBase',
+      meta: { title: '身份信息', type: 'business' },
+      component: () => import('@/views/rnr/person/base')
+    },
+    {
+      path: '/rnr/person/idcard',
+      name: 'RnrPersonIdcard',
+      meta: { title: '证件信息', type: 'business' },
+      component: () => import('@/views/rnr/person/idcard')
+    },
+    {
+      path: '/rnr/person/paper',
+      name: 'RnrPersonPaper',
+      meta: { title: '证件信息', type: 'business' },
+      component: () => import('@/views/rnr/person/paper')
+    },
+    {
+      path: '/rnr/person/consigner-base',
+      name: 'RnrPersonConsignerBase',
+      meta: { title: '代办人身份信息', type: 'business' },
+      component: () => import('@/views/rnr/person/consigner-base')
+    },
+    {
+      path: '/rnr/person/consigner-idcard',
+      name: 'RnrPersonConsignerIdcard',
+      meta: { title: '代办人证件信息', type: 'business' },
+      component: () => import('@/views/rnr/person/consigner-idcard')
+    },
+    {
+      path: '/rnr/person/consigner-paper',
+      name: 'RnrPersonConsignerPaper',
+      meta: { title: '代办人证件信息', type: 'business' },
+      component: () => import('@/views/rnr/person/consigner-paper')
+    },
+    {
+      path: '/rnr/person/file',
+      name: 'RnrPersonFile',
+      meta: { title: '文件信息', type: 'business' },
+      component: () => import('@/views/rnr/person/file')
+    },
+    {
+      path: '/rnr/person/notification',
+      name: 'RnrPersonNotification',
+      meta: { title: '责任告知书', type: 'business' },
+      component: () => import('@/views/rnr/person/notification')
+    },
+    {
+      path: '/rnr/person/agreement',
+      name: 'RnrPersonAgreement',
+      meta: { title: '入网协议', type: 'business' },
+      component: () => import('@/views/rnr/person/agreement')
+    },
+    {
+      path: '/rnr/person/result',
+      name: 'RnrPersonResult',
+      meta: { title: '校验结果', type: 'business' },
+      component: () => import('@/views/rnr/person/result')
+    },
+    {
+      path: '/rnr/person/user-info-agreement',
+      name: 'RnrPersonUserInfoAgreement',
+      component: () => import('@/views/rnr/person/user-info-agreement'),
+      meta: { title: '个人信息保护政策共享条款' }
+    }
+  ]
+}
+
+export default router

src/router/search.js

+const router = {
+  path: '/search',
+  name: 'Search',
+  meta: { title: '认证查询', type: 'user' },
+  component: () => import('@/components/Layout'),
+  children: [
+    {
+      path: '/search/car',
+      name: 'RnrCarSearch',
+      meta: { title: '认证查询', type: 'business' },
+      component: () => import('@/views/search/car')
+    },
+    {
+      path: '/search/user',
+      name: 'UserSearch',
+      component: () => import('@/views/user'),
+      meta: { title: '车主实名查询', type: 'user' }
+    },
+    {
+      path: '/download',
+      name: 'Download',
+      component: () => import('@/views/user/download'),
+      meta: { title: '下载', type: 'user' }
+    }
+  ]
+}
+
+export default router

src/store/getters.js

+const getters = {
+  personRnr: state => state.rnr.person,
+  protocal: state => state.rnr.protocal,
+  protocalMarkup: state => state.markup.protocal,
+  enterpriseRnr: state => state.rnr.enterprise,
+  personMarkup: state => state.markup.person,
+  enterpriseMarkup: state => state.markup.enterprise,
+  ocrMakrup: state => state.markup.ocrPic,
+  loginUser: state => state.user.loginUser,
+  isNFCDevice: state => state.device.isNFCDevice,
+  dict: state => state.dict.dict,
+  logo: state => state.dict.logo,
+  agreement: state => state.dict.agreement
+}
+export default getters

src/store/index.js

+import Vue from 'vue'
+import Vuex from 'vuex'
+import logger from 'vuex/dist/logger'
+import getters from './getters'
+import rnr from './modules/rnr'
+import markup from './modules/markup'
+import user from './modules/user'
+import device from './modules/device'
+import dict from './modules/dict'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  modules: {
+    rnr,
+    markup,
+    user,
+    device,
+    dict
+  },
+  getters,
+  plugins: process.env.NODE_ENV !== 'production' ? [logger()] : []
+})
+
+export default store

src/store/modules/device.js

+import bridge from '@/utils/bridge'
+
+// 设置当前是否是NFC设备
+const SET_IS_NFC_DEVICE = 'SET_IS_NFC_DEVICE'
+
+export default {
+  namespaced: true,
+  state: {
+    NFCCode: ['X960_6762_66_P'],
+    isNFCDevice: false
+  },
+  mutations: {
+    /**
+     * 设置当前是否是nfc设备
+     */
+    [SET_IS_NFC_DEVICE](state, payload) {
+      state.isNFCDevice = payload
+    }
+  },
+  actions: {
+    /**
+     * 初始化nfc设备
+     */
+    initNFCDevice({ commit, state }) {
+      bridge.geOtgReadType((code = '') => {
+        commit(SET_IS_NFC_DEVICE, state.NFCCode.includes(code.toUpperCase()))
+      })
+    },
+
+    /**
+     * 获取nfc设备中的数据
+     */
+    getNFCData({ commit, state }) {
+      bridge.readIDCardByOTG(data => {
+        console.log(data)
+      })
+    }
+  }
+}

src/store/modules/dict.js

+import { queryDictData, queryCustomerDictData, queryLogo, queryH5Logo } from '@/api/dict'
+import cache from '@/utils/cache'
+import store from '../index'
+
+const STORE_DICT_NAME = 'store-dict'
+
+const SET_DICT = 'SET_DICT'
+
+export default {
+  namespaced: true,
+  state: {
+    isInited: false,
+    dict: {
+      SEX_OPTIONS: [
+        { name: '男', value: 1 },
+        { name: '女', value: 2 }
+      ],
+      CARD_TYPE: [
+        { name: '居民身份证', value: 'IDCARD' },
+        { name: '户口簿', value: 'HOUSEHOLD' },
+        { name: '中国人民解放军军人身份证件', value: 'PLAIDCARD' },
+        { name: '中国人民武装警察身份证件', value: 'CAPFIDCARD' },
+        { name: '港澳居民来往内地通行证', value: 'HKIDCARD' },
+        { name: '台湾居民来往大陆通行证', value: 'TAIBAOZHENG' },
+        { name: '外国公民护照', value: 'PASSPORT' },
+        { name: '港澳居民居住证', value: 'HKRESIDENCECARD' },
+        { name: '台湾居民居住证', value: 'TWRESIDENCECARD' }
+      ],
+      COMPANY_TYPE: [
+        { name: '国有企业', value: '0' },
+        { name: '集体所有制', value: '1' },
+        { name: '私营企业', value: '2' },
+        { name: '有限责任公司', value: '3' },
+        { name: '股份有限公司', value: '4' },
+        { name: '有限合伙企业', value: '5' },
+        { name: '联营企业', value: '6' },
+        { name: '外商投资企业', value: '7' },
+        { name: '个人独资企业', value: '8' },
+        { name: '其他', value: '9' }
+      ],
+      INDUSTRY_TYPE: [
+        { name: '农、林、牧、渔业', value: '0' },
+        { name: '采矿业', value: '1' },
+        { name: '制造业', value: '2' },
+        { name: '电力、热力、燃气及水生产和供应业', value: '3' },
+        { name: '建筑业', value: '4' },
+        { name: '批发和零售业', value: '5' },
+        { name: '交通运输、仓储和邮政业', value: '6' },
+        { name: '住宿和餐饮业', value: '7' },
+        { name: '信息传输、软件和信息技术服务业', value: '8' },
+        { name: '金融业', value: '9' },
+        { name: '房地产业', value: '10' },
+        { name: '租赁和商务服务业', value: '11' },
+        { name: '科学研究和技术服务业', value: '12' },
+        { name: '水利、环境和公共设施管理业', value: '13' },
+        { name: '居民服务、修理和其他服务业', value: '14' },
+        { name: '教育', value: '15' },
+        { name: '卫生和社会工作', value: '16' },
+        { name: '文化、体育和娱乐业', value: '17' },
+        { name: '公共管理、社会保障和社会组织', value: '18' },
+        { name: '国际组织', value: '19' },
+        { name: '其他', value: '20' }
+      ],
+      COMPANY_CERT_TYPE: [
+        { name: '统一社会信用代码', value: '0' },
+        { name: '组织机构代码证', value: '1' },
+        { name: '营业执照', value: '2' },
+        { name: '事业单位法人证书或者社会团体法人登记证书', value: '3' }
+      ],
+      // 业务类型
+      businessType: [
+        { name: '自然人新车实名认证', value: '1' }, // 自然人
+        { name: '自然人二手车实名认证', value: '2' }, // 自然人
+        { name: '企业新车实名认证', value: '3' }, // 企业实名
+        { name: '车企新车实名认证', value: '4' }, // 企业实名
+        { name: '企业责任人变更', value: '5' }, // 企业负责人变更
+        { name: '车主解绑', value: '6' }, // 自然人
+        { name: '二手车主解绑', value: '7' }, // 自然人
+        { name: '车企实名解绑', value: '8' },
+        { name: '设备更换', value: '9' },
+        { name: '一车多卡绑定', value: '10' },
+        { name: '重新绑定', value: '11' },
+        { name: '企业解绑', value: '12' }
+      ],
+      ...cache.get(STORE_DICT_NAME, {})
+    },
+    logo: '',
+    agreement: {},
+    isInitLogo: false
+  },
+  mutations: {
+    /**
+     * 设置当前是否是nfc设备
+     */
+    [SET_DICT](state, payload) {
+      state.dict = {
+        ...state.dict,
+        ...payload
+      }
+      // 标记当前已经初始化过了
+      state.isInited = true
+      cache.set(STORE_DICT_NAME, state.dict)
+    },
+
+    SET_LOGO(state, payload) {
+      state.logo = payload
+    },
+
+    SET_AGREEMENT(state, payload) {
+      state.agreement = payload
+    }
+  },
+  actions: {
+    /**
+     * 初始化字典项
+     */
+    async initDict({ commit, state }) {
+      // 如果当前已经加载过字典项
+      if (state.isInited) {
+        return
+      }
+      try {
+        // 获取字典项的值
+        const respData = await (store.getters.loginUser.type === 'C' ? queryCustomerDictData : queryDictData)()
+        // 等待上传的字典项
+        const dict = {}
+        // 将所有字段取出
+        Object.keys(respData).forEach(key => {
+          switch (key) {
+            case 'certType':
+              dict['CARD_TYPE'] = respData[key].map(item => ({ name: item.label, value: item.value }))
+              break
+            case 'companyCertType':
+              dict['COMPANY_CERT_TYPE'] = respData[key].map(item => ({ name: item.label, value: item.value }))
+              break
+            case 'companyType':
+              dict['COMPANY_TYPE'] = respData[key].map(item => ({ name: item.label, value: item.value }))
+              break
+            case 'industryType':
+              dict['INDUSTRY_TYPE'] = respData[key].map(item => ({ name: item.label, value: item.value }))
+              break
+            default:
+              dict[key] = respData[key].map(item => ({ name: item.label, value: item.value }))
+              break
+          }
+        })
+        // 开始设置
+        commit(SET_DICT, dict)
+      } catch (error) {
+        console.error(error)
+      }
+    },
+
+    /**
+     * 获取logo
+     */
+    async getLogo({ commit, state }, payload) {
+      // 如果当前查询过
+      if (state.isInitLogo && !payload.force) {
+        return
+      }
+      try {
+        const respData = await (payload.isCustomer ? queryH5Logo : queryLogo)()
+        commit('SET_LOGO', respData.logoH5 ? respData.logoH5.fileUrl : '')
+        commit('SET_AGREEMENT', respData)
+        state.isInitLogo = true
+      } catch (error) {
+        console.error(error)
+      }
+    }
+  }
+}

src/store/modules/markup.js

+import { queryPotocolCustomerManage } from '@/api/rnr'
+import cache from '@/utils/cache'
+
+// 个人实名
+export const SET_PERSON_CONSIGNER = 'SET_PERSON_CONSIGNER'
+export const SET_PERSON_BASE = 'SET_PERSON_BASE'
+export const SET_PERSON_CARD = 'SET_PERSON_CARD'
+export const SET_PERSON_FILE = 'SET_PERSON_FILE'
+export const SET_PERSON_IDCARD = 'SET_PERSON_IDCARD'
+export const SET_PERSON_PAPER = 'SET_PERSON_PAPER'
+export const SET_PERSON_AGREEMENT = 'SET_PERSON_AGREEMENT'
+export const RESET_PERSON = 'RESET_PERSON'
+export const SET_PERSON_CONSIGNER_CARD = 'SET_PERSON_CONSIGNER_CARD'
+export const SET_PERSON_DUTY_PIC = 'SET_PERSON_DUTY_PIC'
+export const SET_OCR_PIC = 'SET_OCR_PIC'
+export const RESET_OCR_PIC = 'RESET_OCR_PIC'
+
+// 初始化远程配置的协议
+export const DISPATCH_INIT_PROTOCAL = 'DISPATCH_INIT_PROTOCAL'
+
+// 企业实名
+export const SET_ENTERPRISE_CARD = 'SET_ENTERPRISE_CARD'
+export const SET_ENTERPRISE_CERT = 'SET_ENTERPRISE_CERT'
+export const SET_ENTERPRISE_PAPER = 'SET_ENTERPRISE_PAPER'
+export const SET_ENTERPRISE_FILE = 'SET_ENTERPRISE_FILE'
+export const SET_ENTERPRISE_CERT_IMAGE = 'SET_ENTERPRISE_CERT_IMAGE'
+export const SET_ENTERPRISE_OWNER = 'SET_ENTERPRISE_OWNER'
+export const SET_ENTERPRISE_IDCARD = 'SET_ENTERPRISE_IDCARD'
+export const SET_ENTERPRISE_AGREEMENT = 'SET_ENTERPRISE_AGREEMENT'
+export const SET_ENTERPRISE_DUTY_PIC = 'SET_ENTERPRISE_DUTY_PIC'
+export const RESET_ENTERPRISE = 'RESET_ENTERPRISE'
+
+// 从远程拉取告知书等内容
+export const INIT_PAPER_FILE = 'INIT_PAPER_FILE'
+export const RESET_PAPER_FILE = 'RESET_PAPER_FILE'
+
+// 个人实名信息保存到storage中的数据
+const STORE_PERSON_MARKUP_NAME = 'store-person-markup'
+const STORE_ENTERPRISE_MARKUP_NAME = 'store-enterprise-markup'
+
+export default {
+  namespaced: true,
+  state: {
+    person: cache.get(STORE_PERSON_MARKUP_NAME, {}),
+    protocal: {},
+    ocrPic: {},
+    enterprise: cache.get(STORE_ENTERPRISE_MARKUP_NAME, {})
+  },
+  mutations: {
+    /**
+     * 个人实名：初始化类型
+     */
+    [SET_PERSON_CONSIGNER](state, payload = {}) {
+      // 开始赋值，但是不将其保存到缓存中
+      state.person = {
+        ...payload
+      }
+    },
+
+    /**
+     * 个人实名：设置基本信息
+     */
+    [SET_PERSON_BASE](state, payload = {}) {
+      // 开始赋值
+      state.person = {
+        ...payload
+      }
+      // 将数据保存到缓存中
+      cache.set(STORE_PERSON_MARKUP_NAME, state.person)
+    },
+
+    /**
+     * 个人实名：设置车卡信息
+     */
+    [SET_PERSON_CARD](state, payload = {}) {
+      state.person = {
+        ...state.person,
+        ...payload
+      }
+      // 将数据保存到缓存中
+      cache.set(STORE_PERSON_MARKUP_NAME, state.person)
+    },
+
+    /**
+     * 个人实名：设置文件信息
+     */
+    [SET_PERSON_FILE](state, payload) {
+      state.person = {
+        ...state.person,
+        ...payload
+      }
+      // 将数据保存到缓存中
+      cache.set(STORE_PERSON_MARKUP_NAME, state.person)
+    },
+
+    /**
+     * 个人实名：设置身份证信息
+     */
+    [SET_PERSON_IDCARD](state, payload) {
+      state.person = {
+        ...state.person,
+        ...payload
+      }
+      // 将数据保存到缓存中
+      cache.set(STORE_PERSON_MARKUP_NAME, state.person)
+    },
+
+    /**
+     * 个人实名：设置证件信息
+     */
+    [SET_PERSON_PAPER](state, payload) {
+      state.person = {
+        ...state.person,
+        ...payload
+      }
+      // 将数据保存到缓存中
+      cache.set(STORE_PERSON_MARKUP_NAME, state.person)
+    },
+
+    /**
+     * 个人实名：签署协议告知书
+     */
+    [SET_PERSON_DUTY_PIC](state, payload) {
+      state.person = {
+        ...state.person,
+        ...payload
+      }
+      // 将数据保存到缓存中
+      cache.set(STORE_PERSON_MARKUP_NAME, state.person)
+    },
+
+    /**
+     * 个人实名：签署协议信息
+     */
+    [SET_PERSON_AGREEMENT](state, payload) {
+      state.person = {
+        ...state.person,
+        ...payload
+      }
+      // 将数据保存到缓存中
+      cache.set(STORE_PERSON_MARKUP_NAME, state.person)
+    },
+
+    /**
+     * 个人实名：清空实名信息
+     */
+    [RESET_PERSON](state) {
+      // 清空数据
+      state.person = {}
+      // 先把数据移除
+      cache.remove(STORE_PERSON_MARKUP_NAME)
+    },
+
+    /**
+     * 个人实名：委托人信息
+     */
+    [SET_PERSON_CONSIGNER_CARD](state, payload) {
+      // 记录当前填写的委托人信息
+      state.person.consignerInfo = {
+        ...(state.person.consignerInfo || {}),
+        ...payload
+      }
+      // 将数据保存到缓存中
+      cache.set(STORE_PERSON_MARKUP_NAME, state.person)
+    },
+
+    /**
+     * 个人实名：初始化告知书等内容
+     */
+    [INIT_PAPER_FILE](state, payload) {
+      // 将协议保存到本地
+      state.protocal = {
+        ...state.protocal,
+        ...payload
+      }
+    },
+
+    /**
+     * 协议：清空协议
+     */
+    [RESET_PAPER_FILE](state, payload) {
+      state.protocal = {}
+    },
+
+    /**
+     * 企业实名：车卡信息
+     */
+    [SET_ENTERPRISE_CARD](state, payload) {
+      state.enterprise = {
+        ...state.enterprise,
+        ...payload
+      }
+      // 将数据保存到缓存中
+      cache.set(STORE_ENTERPRISE_MARKUP_NAME, state.enterprise)
+    },
+
+    /**
+     * 企业实名：企业信息
+     */
+    [SET_ENTERPRISE_CERT](state, payload) {
+      state.enterprise = {
+        ...state.enterprise,
+        ...payload
+      }
+      cache.set(STORE_ENTERPRISE_MARKUP_NAME, state.enterprise)
+    },
+
+    /**
+     * 企业实名：企业证件信息
+     */
+    [SET_ENTERPRISE_CERT_IMAGE](state, payload) {
+      state.enterprise = {
+        ...state.enterprise,
+        ...payload
+      }
+      cache.set(STORE_ENTERPRISE_MARKUP_NAME, state.enterprise)
+    },
+
+    /**
+     * 企业实名：责任人身份信息
+     */
+    [SET_ENTERPRISE_OWNER](state, payload) {
+      state.enterprise = {
+        ...state.enterprise,
+        ...payload
+      }
+      cache.set(STORE_ENTERPRISE_MARKUP_NAME, state.enterprise)
+    },
+
+    /**
+     * 企业实名：责任人证件信息
+     */
+    [SET_ENTERPRISE_PAPER](state, payload) {
+      state.enterprise = {
+        ...state.enterprise,
+        ...payload
+      }
+      cache.set(STORE_ENTERPRISE_MARKUP_NAME, state.enterprise)
+    },
+
+    /**
+     * 企业实名;责任人证件信息
+     */
+    [SET_ENTERPRISE_IDCARD](state, payload) {
+      state.enterprise = {
+        ...state.enterprise,
+        ...payload
+      }
+      cache.set(STORE_ENTERPRISE_MARKUP_NAME, state.enterprise)
+    },
+
+    /**
+     * 企业实名：文件信息
+     */
+    [SET_ENTERPRISE_FILE](state, payload) {
+      state.enterprise = {
+        ...state.enterprise,
+        ...payload
+      }
+      cache.set(STORE_ENTERPRISE_MARKUP_NAME, state.enterprise)
+    },
+
+    /**
+     * 企业实名：入网协议
+     */
+    [SET_ENTERPRISE_AGREEMENT](state, payload) {
+      state.enterprise = {
+        ...state.enterprise,
+        ...payload
+      }
+      cache.set(STORE_ENTERPRISE_MARKUP_NAME, state.enterprise)
+    },
+
+    /**
+     * 企业实名：责任告知书
+     */
+    [SET_ENTERPRISE_DUTY_PIC](state, payload) {
+      state.enterprise = {
+        ...state.enterprise,
+        ...payload
+      }
+      cache.set(STORE_ENTERPRISE_MARKUP_NAME, state.enterprise)
+    },
+
+    /**
+     * 设置ocr的图片
+     */
+    [SET_OCR_PIC](state, payload) {
+      state.ocrPic = payload || {}
+    },
+
+    /**
+     * 重置ocr的图片
+     */
+    [RESET_OCR_PIC](state, payload) {
+      state.ocrPic = {}
+    },
+
+    /**
+     * 重置企业信息
+     */
+    [RESET_ENTERPRISE](state, payload) {
+      state.enterprise = {}
+      cache.remove(STORE_ENTERPRISE_MARKUP_NAME)
+    }
+  },
+  actions: {
+    /**
+     * 初始化告知书
+     */
+    async [DISPATCH_INIT_PROTOCAL]({ commit }) {
+      try {
+        // 查询当前登录人的组织下的协议
+        const protocal = await queryPotocolCustomerManage()
+        // 提交协议
+        commit(INIT_PAPER_FILE, protocal)
+      } catch (error) {
+        commit(RESET_PAPER_FILE)
+      }
+    }
+  }
+}

src/store/modules/rnr.js

+import store from '../index'
+import { queryPotocolManage } from '@/api/rnr'
+import cache from '@/utils/cache'
+
+// 个人实名
+export const SET_PERSON_CONSIGNER = 'SET_PERSON_CONSIGNER'
+export const SET_PERSON_BASE = 'SET_PERSON_BASE'
+export const SET_PERSON_CARD = 'SET_PERSON_CARD'
+export const SET_PERSON_FILE = 'SET_PERSON_FILE'
+export const SET_PERSON_IDCARD = 'SET_PERSON_IDCARD'
+export const SET_PERSON_PAPER = 'SET_PERSON_PAPER'
+export const SET_PERSON_AGREEMENT = 'SET_PERSON_AGREEMENT'
+export const RESET_PERSON = 'RESET_PERSON'
+export const SET_PERSON_CONSIGNER_CARD = 'SET_PERSON_CONSIGNER_CARD'
+export const SET_PERSON_DUTY_PIC = 'SET_PERSON_DUTY_PIC'
+
+// 初始化远程配置的协议
+export const DISPATCH_INIT_PROTOCAL = 'DISPATCH_INIT_PROTOCAL'
+
+// 企业实名
+export const SET_ENTERPRISE_CARD = 'SET_ENTERPRISE_CARD'
+export const SET_ENTERPRISE_CERT = 'SET_ENTERPRISE_CERT'
+export const SET_ENTERPRISE_PAPER = 'SET_ENTERPRISE_PAPER'
+export const SET_ENTERPRISE_FILE = 'SET_ENTERPRISE_FILE'
+export const SET_ENTERPRISE_CERT_IMAGE = 'SET_ENTERPRISE_CERT_IMAGE'
+export const SET_ENTERPRISE_OWNER = 'SET_ENTERPRISE_OWNER'
+export const SET_ENTERPRISE_IDCARD = 'SET_ENTERPRISE_IDCARD'
+export const SET_ENTERPRISE_AGREEMENT = 'SET_ENTERPRISE_AGREEMENT'
+export const SET_ENTERPRISE_DUTY_PIC = 'SET_ENTERPRISE_DUTY_PIC'
+export const RESET_ENTERPRISE = 'RESET_ENTERPRISE'
+
+// 从远程拉取告知书等内容
+export const INIT_PAPER_FILE = 'INIT_PAPER_FILE'
+export const RESET_PAPER_FILE = 'RESET_PAPER_FILE'
+
+// 个人实名信息保存到storage中的数据
+const STORE_PERSON_RNR_NAME = 'store-person-rnr'
+const STORE_ENTERPRISE_RNR_NAME = 'store-enterprise-rnr'
+
+export default {
+  namespaced: true,
+  state: {
+    person: cache.get(STORE_PERSON_RNR_NAME, {}),
+    protocal: {},
+    enterprise: cache.get(STORE_ENTERPRISE_RNR_NAME, {})
+  },
+  mutations: {
+    /**
+     * 个人实名：初始化类型
+     */
+    [SET_PERSON_CONSIGNER](state, payload = {}) {
+      // 开始赋值，但是不将其保存到缓存中
+      state.person = {
+        ...payload
+      }
+    },
+
+    /**
+     * 个人实名：设置基本信息
+     */
+    [SET_PERSON_BASE](state, payload = {}) {
+      // 开始赋值
+      state.person = {
+        ...payload
+      }
+      // 将数据保存到缓存中
+      cache.set(STORE_PERSON_RNR_NAME, state.person)
+    },
+
+    /**
+     * 个人实名：设置车卡信息
+     */
+    [SET_PERSON_CARD](state, payload = {}) {
+      state.person = {
+        ...state.person,
+        ...payload
+      }
+      // 将数据保存到缓存中
+      cache.set(STORE_PERSON_RNR_NAME, state.person)
+    },
+
+    /**
+     * 个人实名：设置文件信息
+     */
+    [SET_PERSON_FILE](state, payload) {
+      state.person = {
+        ...state.person,
+        ...payload
+      }
+      // 将数据保存到缓存中
+      cache.set(STORE_PERSON_RNR_NAME, state.person)
+    },
+
+    /**
+     * 个人实名：设置身份证信息
+     */
+    [SET_PERSON_IDCARD](state, payload) {
+      state.person = {
+        ...state.person,
+        ...payload
+      }
+      // 将数据保存到缓存中
+      cache.set(STORE_PERSON_RNR_NAME, state.person)
+    },
+
+    /**
+     * 个人实名：设置证件信息
+     */
+    [SET_PERSON_PAPER](state, payload) {
+      state.person = {
+        ...state.person,
+        ...payload
+      }
+      // 将数据保存到缓存中
+      cache.set(STORE_PERSON_RNR_NAME, state.person)
+    },
+
+    /**
+     * 个人实名：签署协议告知书
+     */
+    [SET_PERSON_DUTY_PIC](state, payload) {
+      state.person = {
+        ...state.person,
+        ...payload
+      }
+      // 将数据保存到缓存中
+      cache.set(STORE_PERSON_RNR_NAME, state.person)
+    },
+
+    /**
+     * 个人实名：签署协议信息
+     */
+    [SET_PERSON_AGREEMENT](state, payload) {
+      state.person = {
+        ...state.person,
+        ...payload
+      }
+      // 将数据保存到缓存中
+      cache.set(STORE_PERSON_RNR_NAME, state.person)
+    },
+
+    /**
+     * 个人实名：清空实名信息
+     */
+    [RESET_PERSON](state) {
+      // 清空数据
+      state.person = {}
+      // 先把数据移除
+      cache.remove(STORE_PERSON_RNR_NAME)
+    },
+
+    /**
+     * 个人实名：委托人信息
+     */
+    [SET_PERSON_CONSIGNER_CARD](state, payload) {
+      // 记录当前填写的委托人信息
+      state.person.consignerInfo = {
+        ...(state.person.consignerInfo || {}),
+        ...payload
+      }
+      // 将数据保存到缓存中
+      cache.set(STORE_PERSON_RNR_NAME, state.person)
+    },
+
+    /**
+     * 个人实名：初始化告知书等内容
+     */
+    [INIT_PAPER_FILE](state, payload) {
+      // 将协议保存到本地
+      state.protocal = {
+        ...state.protocal,
+        ...payload
+      }
+    },
+
+    /**
+     * 协议：清空协议
+     */
+    [RESET_PAPER_FILE](state, payload) {
+      state.protocal = {}
+    },
+
+    /**
+     * 企业实名：车卡信息
+     */
+    [SET_ENTERPRISE_CARD](state, payload) {
+      state.enterprise = {
+        ...state.enterprise,
+        ...payload
+      }
+      // 将数据保存到缓存中
+      cache.set(STORE_ENTERPRISE_RNR_NAME, state.enterprise)
+    },
+
+    /**
+     * 企业实名：企业信息
+     */
+    [SET_ENTERPRISE_CERT](state, payload) {
+      state.enterprise = {
+        ...state.enterprise,
+        ...payload
+      }
+      cache.set(STORE_ENTERPRISE_RNR_NAME, state.enterprise)
+    },
+
+    /**
+     * 企业实名：企业证件信息
+     */
+    [SET_ENTERPRISE_CERT_IMAGE](state, payload) {
+      state.enterprise = {
+        ...state.enterprise,
+        ...payload
+      }
+      cache.set(STORE_ENTERPRISE_RNR_NAME, state.enterprise)
+    },
+
+    /**
+     * 企业实名：责任人身份信息
+     */
+    [SET_ENTERPRISE_OWNER](state, payload) {
+      state.enterprise = {
+        ...state.enterprise,
+        ...payload
+      }
+      cache.set(STORE_ENTERPRISE_RNR_NAME, state.enterprise)
+    },
+
+    /**
+     * 企业实名：责任人证件信息
+     */
+    [SET_ENTERPRISE_PAPER](state, payload) {
+      state.enterprise = {
+        ...state.enterprise,
+        ...payload
+      }
+      cache.set(STORE_ENTERPRISE_RNR_NAME, state.enterprise)
+    },
+
+    /**
+     * 企业实名;责任人证件信息
+     */
+    [SET_ENTERPRISE_IDCARD](state, payload) {
+      state.enterprise = {
+        ...state.enterprise,
+        ...payload
+      }
+      cache.set(STORE_ENTERPRISE_RNR_NAME, state.enterprise)
+    },
+
+    /**
+     * 企业实名：文件信息
+     */
+    [SET_ENTERPRISE_FILE](state, payload) {
+      state.enterprise = {
+        ...state.enterprise,
+        ...payload
+      }
+      cache.set(STORE_ENTERPRISE_RNR_NAME, state.enterprise)
+    },
+
+    /**
+     * 企业实名：入网协议
+     */
+    [SET_ENTERPRISE_AGREEMENT](state, payload) {
+      state.enterprise = {
+        ...state.enterprise,
+        ...payload
+      }
+      cache.set(STORE_ENTERPRISE_RNR_NAME, state.enterprise)
+    },
+
+    /**
+     * 企业实名：责任告知书
+     */
+    [SET_ENTERPRISE_DUTY_PIC](state, payload) {
+      state.enterprise = {
+        ...state.enterprise,
+        ...payload
+      }
+      cache.set(STORE_ENTERPRISE_RNR_NAME, state.enterprise)
+    },
+
+    /**
+     * 重置企业信息
+     */
+    [RESET_ENTERPRISE](state, payload) {
+      state.enterprise = {}
+      cache.remove(STORE_ENTERPRISE_RNR_NAME)
+    }
+  },
+  actions: {
+    /**
+     * 初始化告知书
+     */
+    async [DISPATCH_INIT_PROTOCAL]({ commit }) {
+      try {
+        // 当前登录人的组织id
+        const { organId } = store.getters.loginUser
+        // 如果当前登录信息中不包括组织id
+        if (!organId) {
+          return
+        }
+        // 查询当前登录人的组织下的协议
+        const protocal = await queryPotocolManage({ orgId: organId })
+        // 提交协议
+        commit(INIT_PAPER_FILE, protocal)
+      } catch (error) {
+        commit(RESET_PAPER_FILE)
+      }
+    }
+  }
+}

src/store/modules/user.js

+import cache from '@/utils/cache'
+
+// 设置当前登录的用户信息
+export const SET_LOGIN_USER_INFO = 'SET_LOGIN_USER_INFO'
+
+// 当前登录信息保存到缓存的字段
+const STORE__RNR_LOGIN_USER = 'STORE__RNR_LOGIN_USER'
+
+export default {
+  namespaced: true,
+  state: {
+    loginUser: cache.get(STORE__RNR_LOGIN_USER, {})
+  },
+  mutations: {
+    /**
+     * 保存当前登录的用户信息
+     */
+    [SET_LOGIN_USER_INFO](state, payload) {
+      state.loginUser = payload
+      cache.set(STORE__RNR_LOGIN_USER, state.loginUser)
+    }
+  }
+}

src/style/index.scss

+html, body {
+  height: 100%;
+}
+
+#app {
+  background-color: #f7f8fa;
+  min-height: 100%;
+}
+
+.imageicon {
+  display: inline-block;
+  background-size: 100% 100%;
+  width: 30px;
+  height: 30px;
+
+  &.imageicon-scan {
+    background-image: url(../assets/rnr/icon_scan.svg);
+  }
+  &.imageicon-add {
+    background-image: url(../assets/rnr/icon_add.png);
+  }
+  &.imageicon-del {
+    background-image: url(../assets/rnr/ico_del_grey.png);
+  }
+}
+
+.page-rnr-main-fixed-btn-group {
+  display: flex;
+  justify-content: space-between;
+  .page-rnr-main-btn-before {
+    color: #242424 !important;
+    flex: 1;
+    height: 96px;
+  }
+  .page-rnr-main-btn-next {
+    flex: 2;
+    height: 96px;
+    margin-left: 20px;
+  }
+}
\ No newline at end of file

src/utils/CompressImg/blobutil/index.js

+/* eslint-disable */
+// Blob 工具类
+
+/**
+ * Create a blob builder even when vendor prefixes exist
+ */
+var BlobBuilder = global.BlobBuilder
+  || global.WebKitBlobBuilder
+  || global.MSBlobBuilder
+  || global.MozBlobBuilder;
+
+/**
+ * Check if Blob constructor is supported
+ */
+var blobSupported = (function() {
+  try {
+    var a = new Blob(['hi']);
+    return a.size === 2;
+  } catch(e) {
+    return false;
+  }
+})();
+
+/**
+ * Check if Blob constructor supports ArrayBufferViews
+ * Fails in Safari 6, so we need to map to ArrayBuffers there.
+ */
+var blobSupportsArrayBufferView = blobSupported && (function() {
+  try {
+    var b = new Blob([new Uint8Array([1,2])]);
+    return b.size === 2;
+  } catch(e) {
+    return false;
+  }
+})();
+
+/**
+ * Check if BlobBuilder is supported
+ */
+var blobBuilderSupported = BlobBuilder
+  && BlobBuilder.prototype.append
+  && BlobBuilder.prototype.getBlob;
+
+
+/**
+ * Helper function that maps ArrayBufferViews to ArrayBuffers
+ * Used by BlobBuilder constructor and old browsers that didn't
+ * support it in the Blob constructor.
+ */
+function mapArrayBufferViews(ary) {
+  for (var i = 0; i < ary.length; i++) {
+    var chunk = ary[i];
+    if (chunk.buffer instanceof ArrayBuffer) {
+      var buf = chunk.buffer;
+
+      // if this is a subarray, make a copy so we only
+      // include the subarray region from the underlying buffer
+      if (chunk.byteLength !== buf.byteLength) {
+        var copy = new Uint8Array(chunk.byteLength);
+        copy.set(new Uint8Array(buf, chunk.byteOffset, chunk.byteLength));
+        buf = copy.buffer;
+      }
+
+      ary[i] = buf;
+    }
+  }
+}
+
+function BlobBuilderConstructor(ary, options) {
+  options = options || {};
+
+  var bb = new BlobBuilder();
+  mapArrayBufferViews(ary);
+
+  for (var i = 0; i < ary.length; i++) {
+    bb.append(ary[i]);
+  }
+
+  return (options.type) ? bb.getBlob(options.type) : bb.getBlob();
+};
+
+function BlobConstructor(ary, options) {
+  !blobSupportsArrayBufferView && mapArrayBufferViews(ary);
+  return new Blob(ary, options || {});
+};
+
+var BlobHook = (function() {
+  if (blobSupported) {
+    return BlobConstructor;
+  } else if (blobBuilderSupported) {
+    return BlobBuilderConstructor;
+  } else {
+    return null;
+  }
+})();
+
+
+
+
+
+
+// 转换 base64 字符串到二进制字符串
+function base64ToBinaryString(b64s) {
+  return window.atob(b64s.split(',')[1]);
+}
+
+// 转换 base64 字符串到字节数组
+function base64ToArrayBuffer(b64s) {
+  var binaryString = base64ToBinaryString(b64s);
+  var len = binaryString.length;
+  var buf = new ArrayBuffer(len);
+  var view = new Uint8Array(buf);
+  for (var i = 0; i < len; i++) {
+    view[i] = binaryString.charCodeAt(i);
+  }
+  return view;
+}
+
+
+
+
+
+export default {
+  Blob: BlobHook,
+  // 转换 base64 字符串到二进制字符串
+  base64ToBinaryString: base64ToBinaryString,
+  // 转换 base64 字符串到字节数组
+  base64ToArrayBuffer: base64ToArrayBuffer
+};