Feature/zjx

.eslintrc.js

@@ -15,7 +15,8 @@ module.exports = {
     'gdp': true,
     'uni': true,
     'wx': true,
-    'qq':true
+    'qq': true,
+    '$':true
   },
   // add your custom rules here
   //it is base on https://github.com/vuejs/eslint-config-vue

package.json

@@ -37,6 +37,7 @@
     "vue-fragment": "^1.5.1",
     "vue-router": "^3.3.1",
     "vuescroll": "^4.15.1",
+    "jsencrypt": "^3.2.0",
     "vuex": "^3.1.1"
   },
   "devDependencies": {
@@ -55,6 +56,7 @@
     "babel-eslint": "^10.1.0",
     "babel-plugin-import": "^1.13.0",
     "colors-console": "^1.0.3",
+    "crypto-js": "^4.1.1",
     "dotenv": "^8.2.0",
     "draw-page-structure": "^1.0.8",
     "eslint": "^6.7.2",
@@ -76,7 +78,7 @@
     "webpack-bundle-analyzer": "^4.4.2",
     "pdfjs-dist": "2.4.456",
     "storejs": "2.0.1",
-    "js-cookie":"3.0.1"
+    "js-cookie": "3.0.1"
   },
   "eslintConfig": {
     "root": true,

public/index.html

@@ -19,6 +19,8 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <script src="<%= VUE_APP_OSS_URL %>static/js/jquery-2.1.1.min.js"></script>
+
     <script src="<%= VUE_APP_OSS_URL %>static/js/vue-2.6.11.js"></script>
     <script src="<%= VUE_APP_OSS_URL %>static/js/vuex-3.4.0.js"></script>
     <script src="<%= VUE_APP_OSS_URL %>static/js/vue-router-3.3.2.js"></script>

src/api/login.js

+
+import request from 'mn-template/plugins/http';
+// 判断是否需要触发拼图风控
+export const checkNeedImgCode = (data) => {
+  return request({
+    url: '/account/jigsawCode',
+    method: 'post',
+    data: data,
+    headers: {
+      sourcetype: 4,
+    },
+  });
+};
+
+// 获取短信验证码
+export const getMessageCode = (data) => {
+  return request({
+    url: '/account/H5/authCode',
+    method: 'post',
+    data: data,
+    headers: {
+      sourcetype: 4,
+    },
+  });
+};
+
+// 获取RSA public key
+export const getPubKey = (param) => {
+  return request({
+    url: '/account/cipher/key',
+    method: 'get',
+    params: param,
+    headers: {
+      sourcetype: 4,
+    },
+  });
+};
+
+// /tis/insurance / login
+export const insuranceLogin = (data) => {
+  return request({
+    method: 'post',
+    url: '/tis/insurance/login',
+    data: data,
+    withCredentials: true,
+  });
+};
+// / 获取type=的协议名称
+export const getProtocolContentByType = (type) => {
+  return request({
+    method: 'get',
+    url: `/smartcontract/protocol/content?type=${type}`,
+    withCredentials: true,
+  });
+};
+ // 获取type=的协议内容
+export const getProtocolNameByType = (type) => {
+  return request({
+    method: 'get',
+    url: `/smartcontract/protocol/name?type=${type}`,
+    withCredentials: true,
+  });
+};
+
+//
+export const getPrototypes = (projectEquityNo) => {
+  return request({
+    method: 'get',
+    url: `tis/insurance/prototypes?projectEquityNo=${projectEquityNo}`,
+    withCredentials: true,
+  });
+};

src/components/slide-check/index.vue

+<template>
+  <div class="slide-check-wrap">
+    <!-- <p class="slide-text">向右滑动完成验证</p>
+    <SlideToCheck @slideCallback="slideCallback"/>-->
+    <div id="imgScode" />
+  </div>
+</template>
+
+<script>
+import { checkNeedImgCode, getMessageCode } from '@/api/login';
+import { mapState, mapActions } from 'vuex';
+import { sendEncryptRequest } from '@/utils/encrypt';
+export default {
+  name: 'SlideCheck',
+  props: {
+    mobile: {
+      type: String,
+      default: ''
+    },
+
+  },
+  computed: {
+    ...mapState('home', {
+      imgCodeData: state => state.imgCodeData
+    })
+  },
+  mounted() {
+    console.log(this.imgCodeData);
+    // const {slidingImage, backImage, yHeight} = this.imgCodeData;
+    this.initImgCode(this.imgCodeData);
+  },
+
+  methods: {
+    ...mapActions('home', ['setNeedTimer']),
+    getImg(type) {
+      const data = {
+        mobile: this.mobile,
+        jigsawVersion: 'v1'
+      };
+      sendEncryptRequest(data, params => {
+        checkNeedImgCode(params).then(res => {
+          this.initImgCode(res.data, type);
+        });
+      });
+    },
+    initImgCode(data, type) {
+      const _this = this;
+      $('#imgScode').imgcode({
+            frontimg: 'data:image/png;base64,' + data.slidingImage,
+            backimg: 'data:image/png;base64,' + data.backImage,
+            yHeight:data.yHeight,
+            refreshcallback: function () {
+              // 刷新验证码
+              _this.getImg(type);
+            },
+            closecallback: function () {
+              // 关闭弹框
+              _this.$emit('closeSlideCheckpageDialog');
+            },
+            callback: function (msg) {
+
+              _this.getMsgCode(_this, msg, data, type);
+            }
+          });
+    },
+    refreshImg(type) {
+      // const _this = this;
+      const data = {
+        mobile: this.mobile,
+        jigsawVersion: 'v1'
+      };
+      sendEncryptRequest(data, params => {
+        checkNeedImgCode(params).then(res => {
+           // eslint-disable-next-line
+           this.initImgCode(res.data, type);
+          // $('#imgScode').imgcode({
+          //   frontimg: 'data:image/png;base64,' + res.data.slidingImage,
+          //   backimg: 'data:image/png;base64,' + res.data.backImage,
+          //   yHeight: res.data.yHeight,
+          //   refreshcallback: function () {
+          //     // 刷新验证码
+          //     _this.getImg(type);
+          //   },
+          //   closecallback: function () {
+          //     // 关闭弹框
+          //     _this.$emit('closeSlideCheckpageDialog');
+          //   },
+          //   callback: function (msg) {
+          //     const $this = this;
+          //     _this.getMsgCode($this, msg, res.data, type);
+          //   }
+          // });
+        });
+      });
+    },
+     // eslint-disable-next-line
+    getMsgCode($this, msg, data, type) {
+      const data1 = {
+        mobile: this.mobile,
+        flag: this.fromType, // 0登录（默认）1注册 2微信登录绑定手机 3修改手机 4重置密码
+        capCode: data.capCode,
+        xpos: msg.xpos,
+        imageW: msg.imageW
+      };
+      sendEncryptRequest(data1, params => {
+        getMessageCode(params).then(res => {
+          if (res.code == '000000') {
+            this.$emit('closeSlideCheckpageDialog');
+            // 如果是从验证码页面进来,直接关闭页面,开始倒计时
+            this.$emit('refreshGetMsg');
+            this.setNeedTimer();
+          } else {
+            $this.getfail(res.message);
+          }
+        });
+      });
+      this.$sendBuriedData({
+        component_tag: '905#905001'
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.slide-check-wrap {
+  width: auto;
+  height: auto;
+  margin: 0 auto;
+  .slide-text {
+    width: 100%;
+    color: #373839;
+    font-size: 20px;
+    font-weight: 700;
+    padding: 30px 0 20px;
+  }
+}
+.code-k-div {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(55, 56, 57, 0.6);
+  z-index: 999;
+  display: flex;
+  display: -webkit-flex;
+  justify-content: center;
+  -webkit-justify-content: center;
+  align-items: center;
+}
+.icon-login-bg {
+  background-image: url('~@/assets/images/loginicon.png');
+  background-repeat: no-repeat;
+}
+.code-con {
+  width: 330px;
+  background-color: #fff;
+  z-index: 1000;
+  -moz-user-select: none;
+  /* -webkit-user-select: none;
+    align-self: flex-start;
+    -webkit-align-self: flex-start; */
+  /* margin-top: 30px; */
+  border-radius: 6px;
+}
+.close-dialog {
+  text-align: right;
+}
+.close-dialog-img {
+  width: 25px;
+  height: 25px;
+  margin-right: 15px;
+}
+.code-img {
+  margin: 5px auto;
+  padding: 5px 0;
+  width: 300px;
+  background-color: #f5f6f7;
+}
+.code-back-img {
+  width: 100%;
+}
+.code-img img {
+  display: block;
+}
+.icon-w-25 {
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  text-indent: -9999px;
+}
+.icon-push {
+  background-position: 81% 75%;
+}
+.code-push {
+  height: 25px;
+  display: flex;
+  display: -webkit-flex;
+  align-items: center;
+  -webkit-align-items: center;
+}
+.code-btn {
+  position: relative;
+  height: 30px;
+  text-align: center;
+  color: #999;
+  margin: 16px 10px 24px 10px;
+  box-sizing: border-box;
+  background-color: #f5f6f7;
+  border-radius: 15px;
+  border: 1px solid #e1e1e1;
+}
+.code-btn-m {
+  position: absolute;
+  width: 35px;
+  height: 35px;
+  border-radius: 50%;
+  background-color: #f5f6f7;
+  border: 1px solid #e1e1e1;
+  z-index: 5;
+  top: -4px;
+  left: 5px;
+  box-shadow: 0 0 3px #ccc;
+  cursor: pointer;
+  background-position: 39.5% 50%;
+}
+.code-btn-img {
+  background-image: url('~@/assets/images/arrow.png');
+  background-repeat: no-repeat;
+}
+.code-btn-img.active {
+  background-position: 82% 50%;
+}
+.code-span {
+  display: block;
+  height: 100%;
+  font-size: 14px;
+  line-height: 30px;
+}
+.code-btn-img.error {
+  background-position: 6px 50%;
+}
+.code-img-con {
+  position: relative;
+}
+
+.code-mask {
+  width: 60px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+}
+.code-front-img {
+  width: 100%;
+}
+.code-tip {
+  padding-left: 10px;
+  font-size: 12px;
+  color: #999;
+  margin-top: 4px;
+}
+.code-tip-red {
+  color: red;
+}
+.code-tip-green {
+  color: green;
+}
+</style>

src/components/slide-check/slide-to-check.vue

+<template>
+  <div
+    ref="dragDiv"
+    class="slide-to-check-wrap"
+    :class="{ 'slide-ok': confirmSuccess }"
+  >
+    <div class="drag_bg" />
+    <div
+      ref="moveDiv"
+      class="handler handler_bg"
+      :class="{ handler_ok_bg: confirmSuccess }"
+      @touchstart="mousedownFn($event)"
+    >
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SlideToCheck',
+  data() {
+    return {
+      beginClientX: 0, // 距离屏幕左端距离
+      mouseMoveStata: false, // 触发拖动状态  判断
+      maxwidth: '', // 拖动最大宽度，依据滑块宽度算出来的
+      confirmSuccess: false // 验证成功判断
+    };
+  },
+  mounted() {
+    const htmlEle = document.getElementsByTagName('html')[0];
+    this.maxwidth =
+      this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth - 4;
+    htmlEle.addEventListener('touchmove', this.mouseMoveFn);
+    htmlEle.addEventListener('touchend', this.moseUpFn);
+  },
+  methods: {
+    mousedownFn: function (evt) {
+      if (!this.confirmSuccess) {
+        evt.preventDefault && evt.preventDefault(); // 阻止文字选中等默认事件
+        this.mouseMoveStata = true;
+        this.beginClientX = evt.changedTouches[0].clientX;
+      }
+    },
+
+    mouseMoveFn(evt) {
+      if (this.mouseMoveStata) {
+        const width = evt.changedTouches[0].clientX - this.beginClientX;
+        if (width > 0 && width <= this.maxwidth) {
+          document.getElementsByClassName('handler')[0].style.left =
+            width + 'px';
+          document.getElementsByClassName('drag_bg')[0].style.width =
+            width + 'px';
+        } else if (width > this.maxwidth) {
+          this.successHandle();
+        }
+      }
+    },
+    successHandle() {
+      this.confirmSuccess = true;
+      const htmlEle = document.getElementsByTagName('html')[0];
+      if (window.addEventListener) {
+        htmlEle.removeEventListener('touchmove', this.mouseMoveFn);
+        htmlEle.removeEventListener('touchend', this.moseUpFn);
+      } else {
+        htmlEle.removeEventListener('touchend', () => {});
+      }
+      document.getElementsByClassName('handler')[0].style.left =
+        this.maxwidth + 'px';
+      document.getElementsByClassName('drag_bg')[0].style.width =
+        this.maxwidth + 'px';
+
+      this.$emit('slideCallback');
+    },
+    moseUpFn(evt) {
+      this.mouseMoveStata = false;
+      const width = evt.changedTouches[0].clientX - this.beginClientX;
+      if (width < this.maxwidth) {
+        document.getElementsByClassName('handler')[0].style.left = 0 + 'px';
+        document.getElementsByClassName('drag_bg')[0].style.width = 0 + 'px';
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.slide-to-check-wrap {
+  position: relative;
+  background-color: #e7e8e9;
+  margin: 0 auto;
+  width: 325px;
+  height: 40px;
+  border-radius: 4px;
+  line-height: 40px;
+  text-align: center;
+  &.slide-ok {
+    background: #449284;
+  }
+  .handler {
+    width: 36px;
+    height: 36px;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    cursor: move;
+    margin: 2px;
+  }
+  .handler_bg {
+    background: url('~@/assets/images/slide-icon.png') no-repeat center;
+    background-size: 100% 100%;
+  }
+  .handler_ok_bg {
+    background: url('~@/assets/images/slide-ok.png') no-repeat center;
+    background-size: 100% 100%;
+  }
+  .drag_bg {
+    background-color: #449284;
+    border-radius: 4px 0 0 4px;
+    height: 40px;
+    width: 0px;
+  }
+}
+</style>

src/main.js

@@ -5,8 +5,12 @@ console.log('router, store, vueApp: ', router, store, vueApp);
 import '@/assets/js/flexible';
 import {isWeixin } from './utils/index';
 import Loading from '@/components/loading/loading.js';
+import CryptoJS from 'crypto-js/crypto-js';
+import JsEncrypt from 'jsencrypt/bin/jsencrypt';
 
 // 禁用双指放大
+window.JSEncrypt = JsEncrypt;
+window.CryptoJS = CryptoJS;
 var lastTouchEnd = 0;
 document.addEventListener('touchstart', function (event) {
   if (event.touches.length > 1) {

src/plugins/slide.js

+/**
+ * 图片验证码
+ */
+(function ($) {
+  $.fn.imgcode = function (options) {
+    // 初始化参数
+    var defaults = {
+      frontimg: '',
+      backimg: '',
+      refreshImg: '',
+      getsuccess: '',
+      getfail: '',
+      maskclose: true,
+      callback: '',
+      // 回调函数
+      refreshcallback: '',
+      yHeight: 1,
+      closecallback: ''
+    };
+    var opts = $.extend(defaults, options);
+    return this.each(function () {
+      var $this = $(this); // 获取当前对象
+      var html =
+        '<div class="code-k-div">' +
+        '<div class="code-con">' +
+        '<div class="close-dialog"><img class="close-dialog-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAABx0lEQVRoQ+2YMU7EMBBFZ4iAIqEGiY5my0hxBVwAagrgAHAoOABQUMMFgMqRUqahQ4KapAAUjII2UhQt8Ti747CWt7U9nve/Z7wxgiM/dIQDPMh/c9I74h1hUsAfLSZhB4f1jgyWjmmhd4Qo7IoQ4kgptY6IN1LKL+K63mlCiFWl1DEifkgpbwHgm9URIcQFAJxNs3ooiuIwz/P3eWAmk8lGFEV3ALA/jXMppTznBnkFgM0mcaXUY1mWB0NhaogwDO8Rca8lxpuUcosVJEmSK0Q8aTswFOYPCFBKXadpesoK0rO5kTOUOKwgtROUJPpqhrqeHWQeGCpEvYcVkCEwJhBWQUxgTCGsg1Bg6jkzWmzdnXobhLWj1S7oHsWfftVF3DVt2aOA9DnT7WA6J5r5o4FQYKgQo9RIV/E4jreDIHhGxLXOcfqsqmony7IXyn8z7whFpSE39lLViBNdS3fZLcU9ooNovlOo89rH0FqxmyZnOt8KiGlSjdIm69hBTJKZ1eWo61lBqEnoWjklDiuIM9/sQgg3XlGcedcCADdeGnVFvMhx1mJfZKK6WB5Ep5Dtce+IbcV1+3lHdArZHveO2FZct58zjvwAy/P8Qikq2y8AAAAASUVORK5CYII="></div>' +
+        '<div class="code-img">' +
+        '<div class="code-img-con">' +
+        '<div class="code-mask"><img class="code-front-img" src="' +
+        opts.frontimg +
+        '"></div>' +
+        '<img id="BigImg" class="code-back-img" src="' +
+        opts.backimg +
+        '"></div>' +
+        '<div class="code-push"><i class="icon-login-bg icon-w-25 icon-push">刷新</i><span class="code-tip"></span></div>' +
+        '</div>' +
+        '<div class="code-btn">' +
+        '<div class="code-btn-img code-btn-m"></div>' +
+        '<span class="code-span">按住滑块，拖动完成上方拼图</span>' +
+        '</div></div></div>';
+      $this.html(html);
+      // $('.code-mask').css('margin-top', `${(opts.yHeight * 2) / 75}rem`);
+      $('.code-mask').css('margin-top', `${opts.yHeight}px`);
+      // 定义拖动参数
+      var $divMove = $(this).find('.code-btn-img'); // 拖动按钮
+      var $divWrap = $(this).find('.code-btn'); // 鼠标可拖拽区域
+      var mX = 0;
+       mY = 0; // 定义鼠标X轴Y轴
+      var dX = 0,
+        dY = 0; // 定义滑动区域左、上位置
+      var isDown = false; // touchmove标记
+      if (document.attachEvent) {
+        // ie的事件监听，拖拽div时禁止选中内容，firefox与chrome已在css中设置过-moz-user-select:
+        // none; -webkit-user-select:
+        // none;
+        $divMove[0].attachEvent('onselectstart', function () {
+          return false;
+        });
+      }
+      // 按钮拖动事件
+      $divMove.on('touchstart', function (e) {
+        // 清除提示信息
+        $this.find('.code-tip').html('');
+        var event = e || window.event;
+
+        mX = event.originalEvent.touches[0].pageX;
+        dX = $divWrap.offset().left;
+        dY = $divWrap.offset().top;
+
+        console.log('event', mX, dX, dY);
+        isDown = true; // 鼠标拖拽启
+        $(this).addClass('active');
+        // 修改按钮阴影
+        $divMove.css({
+          'box-shadow': '0 0 8px #666'
+        });
+      });
+      /* // 点击背景关闭
+      if (opts.maskclose) {
+        $this.find(".code-k-div").unbind('click').click(function() {
+          $this.html("");
+        })
+      }*/
+      // 关闭按钮事件
+      $this
+        .find('.close-dialog')
+        .unbind('click')
+        .click(function () {
+          opts.closecallback();
+        });
+      // 刷新code码
+      $this
+        .find('.icon-push')
+        .unbind('click')
+        .click(function () {
+          opts.refreshcallback();
+        });
+      // 鼠标点击松手事件
+      $divMove.on('touchend', function (e) {
+        var lastX = $this.find('.code-mask').offset().left - dX - 1;
+        isDown = false; // 鼠标拖拽启
+        $divMove.removeClass('active');
+        // 还原按钮阴影
+        $divMove.css({
+          'box-shadow': '0 0 3px #ccc'
+        });
+        var imgW = $('#BigImg').width();
+        returncode(lastX, imgW);
+      });
+      // 滑动事件
+      $divWrap.on('touchmove', function (event) {
+        var event = event || window.event;
+        var x = event.originalEvent.touches[0].pageX; // 鼠标滑动时的X轴
+        if (isDown) {
+          if (x > dX + 30 && x < dX + $(this).width() - 20) {
+            $divMove.css({
+              left: x - dX - 20 + 'px'
+            }); // div动态位置赋值
+            $this.find('.code-mask').css({
+              left: x - dX - 30 + 'px'
+            });
+          }
+        }
+        event.preventDefault();
+      });
+
+      // 返回坐标系
+      function returncode(xpos, imageW) {
+        opts.callback({
+          xpos: xpos,
+          imageW: imageW
+        });
+      }
+      // 验证数据
+      function checkcode(code) {
+        var iscur = true;
+        // 模拟ajax
+        setTimeout(function () {
+          if (iscur) {
+            checkcoderesult(1, '验证通过');
+            $this.find('.code-k-div').remove();
+            opts.callback({
+              code: 1000,
+              msg: '验证通过',
+              msgcode: '23dfdf123'
+            });
+          } else {
+            $divMove.addClass('error');
+            checkcoderesult(0, '验证不通过');
+            opts.callback({
+              code: 1001,
+              msg: '验证不通过'
+            });
+            setTimeout(function () {
+              $divMove.removeClass('error');
+              $this.find('.code-mask').animate(
+                {
+                  left: '0px'
+                },
+                200
+              );
+              $divMove.animate(
+                {
+                  left: '10px'
+                },
+                200
+              );
+            }, 300);
+          }
+        }, 500);
+      }
+      // 刷新图标
+      opts.refreshImg = function (data) {
+        console.log(data);
+        // $this.find(".code-img-con .code-front-img").attr("src", data.frontImg);
+        // $this.find(".code-img-con .code-back-img").attr("src", data.backGoundImg);
+      };
+      // 验证成功
+      opts.getsuccess = function () {
+        checkcoderesult(1, '验证通过');
+        setTimeout(function () {
+          $this.find('.code-k-div').remove();
+        }, 800);
+      };
+      // 验证失败
+      opts.getfail = function (txt) {
+        $divMove.addClass('error');
+        checkcoderesult(0, txt);
+        setTimeout(function () {
+          $divMove.removeClass('error');
+          $this.find('.code-mask').animate(
+            {
+              left: '0px'
+            },
+            200
+          );
+          $divMove.animate(
+            {
+              left: '10px'
+            },
+            200
+          );
+        }, 400);
+      };
+      // 验证结果
+      function checkcoderesult(i, txt) {
+        if (i == 0) {
+          $this.find('.code-tip').addClass('code-tip-red');
+        } else {
+          $this.find('.code-tip').addClass('code-tip-green');
+        }
+        $this.find('.code-tip').html(txt);
+      }
+    });
+  };
+})(jQuery);

src/router/index.js

@@ -121,17 +121,20 @@ const routerConfig = [
     name: 'sz-home',
     component: () => import('@/views/sz-home/index.vue'),
   },
+  {
+    path: '/login',
+    name: 'login',
+    component: () => import('@/views/login/index.vue'),
+    meta: {
+      keepAlive: true,
+    },
+  },
+  {
+    path: '/protocol',
+    name: 'protocol',
+    component: () => import('@/views/login/protocol.vue'),
+  },
 ];
-// // 无问卷-0001 有问卷未填写-0101 已填写问卷未出结果-0102 已出结果无需领用-0401 已出结果未预约-0201 已预约未采样-0301 已预约已采样-0302
-// const routerMap = {
-//   '0001': null,
-//   '0101': null,
-//   '0102': null,
-//   '0401': null,
-//   '0201': '/appoint',
-//   '0301': null,
-//   '0302': null,
-// };
 router.beforeEach(async (to, from, next) => {
   headerConfigByMeta(to);
   next();

src/store/modules/home.js

@@ -4,7 +4,9 @@ export default {
   namespaced: true,
   state: {
     insuranceInfo: {},
-    orderInfo:{}
+    orderInfo: {},
+    imgCodeData: '',
+    needTimer:null
   },
   mutations: {
     // 存值
@@ -13,7 +15,13 @@ export default {
     },
     SET_ORDER_INFO(state, val = {}) {
       state.orderInfo = val;
-    }
+    },
+    SET_IMGDATA: (state, imgCodeData) => {
+      state.imgCodeData = imgCodeData;
+    },
+    SET_NEEDTIMER: (state, needTimer) => {
+      state.needTimer = needTimer;
+    },
   },
   actions: {
     // 暂存保险订单信息
@@ -26,6 +34,13 @@ export default {
       console.log('SET_ORDER_INFO', data);
       store.set('orderInfo', data);
     },
+    setNeedTimer({ commit }) {
+      commit('SET_NEEDTIMER', true);
+    },
+    setImgCodeData({ commit }, imgCodeData) {
+      console.log(22334);
+      commit('SET_IMGDATA', imgCodeData);
+    },
   },
   getters: {
     // 获取 insuranceInfo 的值

src/utils/encrypt/index.js

+import { Toast } from 'vant';
+// import { CryptoJS } from './aes';
+// import { JSEncrypt } from 'jsencrypt';
+// if (process.client) {
+//   require('jsencrypt');
+// }
+
+import { getPubKey } from '@/api/login';
+
+let pubKey = '';
+
+// generate key
+function getAesKey(len) {
+  len = len || 16;
+  var aesKey = '';
+  var strList =
+    '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+  var strLen = strList.length;
+  for (var i = 0; i < len; i++) {
+    aesKey += strList.charAt(Math.floor(Math.random() * strLen));
+  }
+  return aesKey;
+}
+
+// 加密传参,发送请求
+async function sendEncryptRequest(content, cb) {
+  console.log('content', content);
+  content = JSON.stringify(content); // 后端要求转 string
+  const params = null;
+  if (pubKey) {
+    // pubKey获取过就不用再获取了
+    const params = formatContent(content, pubKey);
+    cb && cb(params);
+  } else {
+    handleGetPubKey(content, cb);
+  }
+  return params;
+}
+
+// get public key
+function handleGetPubKey(content, cb) {
+  // debugger;
+  getPubKey().then((res) => {
+    // console.log('>>>>>>>>>>>>>>>>>>>> publicKey: ', res);
+    /* if(res.status && res.status === 200) {
+        res = res.data;
+      }*/
+    console.log('res------', res);
+    // debugger;
+    if (res.code == '000000') {
+      pubKey = res.data;
+      if (cb) {
+        const params = formatContent(content, pubKey);
+        cb && cb(params);
+      }
+    } else {
+      Toast({
+        message: (res && res.message) || '接口出错',
+        duration: 1500,
+      });
+    }
+  });
+}
+
+// format account params
+function formatContent(content, pubKey) {
+  // obj为具体的json传参
+  const aesKey = getAesKey(16);
+  const params = {
+    key: '',
+    content: '',
+  };
+
+  params.content = AesEncrypt(content, aesKey);
+  params.key = RsaEncrypt(aesKey, pubKey);
+  return params;
+}
+
+// AES encrypt
+function AesEncrypt(content, aesKey) {
+  const sKey = CryptoJS.enc.Utf8.parse(aesKey);
+  const sContent = CryptoJS.enc.Utf8.parse(content);
+  const encrypted = CryptoJS.AES.encrypt(sContent, sKey, {
+    mode: CryptoJS.mode.ECB,
+    padding: CryptoJS.pad.Pkcs7,
+  });
+  return encrypted.toString();
+}
+
+// RSA encrypt
+function RsaEncrypt(aesKey, pubKey) {
+  const _encrypt = new JSEncrypt();
+  const boss_public_key = pubKey;
+  _encrypt.setPublicKey(boss_public_key);
+  const encrypted = _encrypt.encrypt(aesKey);
+  return encrypted;
+}
+
+export {
+  getAesKey,
+  sendEncryptRequest,
+  handleGetPubKey,
+  formatContent,
+  AesEncrypt,
+  RsaEncrypt,
+};

src/views/login/protocol.vue

+<template>
+  <div class="protocol">
+    <div class="protocol-name">
+      《{{ name }}》
+    </div>
+    <div
+      class="protocol-content"
+      v-html="content"
+    />
+  </div>
+</template>
+
+<script>
+import { getProtocolContentByType, getProtocolNameByType} from '@/api/login';
+export default {
+  data() {
+    return {
+      name: '',
+      content: '',
+      title:''
+    };
+  },
+  mounted() {
+    const { type } = this.$route.query;
+    this.title = type == 5 ? '云鹊隐私声明' : '云鹊健康用户协议';
+    document.querySelector('title').innerHTML = this.title;
+    this.getProtocolNameByType(type);
+    this.getProtocolContentByType(type);
+  },
+  methods: {
+    getProtocolContentByType(type) {
+      getProtocolContentByType(type).then(res => {
+        console.log(res);
+        this.content = res.data;
+        console.log('1  ', this.content);
+      });
+    },
+    getProtocolNameByType(type) {
+      getProtocolNameByType(type).then(res => {
+        console.log(res);
+        this.name = res.data;
+      });
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+  .protocol{
+    height: 100vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    background: #fff;
+  }
+  .protocol-name{
+    height: 20px;
+    font-size: 20px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 600;
+    color: #02120F;
+    line-height: 20px;
+    text-align: center;
+    margin: 15px 0;
+  }
+  .protocol-content{
+    font-size: 15px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #02120F;
+    line-height: 23px;
+    width: 345px;
+    margin: 0 auto 50px auto;
+  }
+</style>

vue.config.js

@@ -23,6 +23,7 @@ module.exports = {
             vuex: 'Vuex',
             'vue-router': 'VueRouter',
             'vconsole': 'VConsole',
+            jqery: 'jQuery',
             axios: 'axios',
             vant: 'vant',
             'crypto-js/crypto-js': 'CryptoJS',