feat: 增加移动端项目

.editorconfig

+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false
\ No newline at end of file

.gitignore

+.DS_Store
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+package-lock.json*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

README.md

+<!--
+ * @Descripttion: 当前组件信息
+ * @version: 1.0.0
+ * @Author: 无尘
+ * @Date: 2020-07-23 17:15:08
+ * @LastEditors: 无尘
+ * @LastEditTime: 2020-07-24 14:36:17
+--> 
+# 好办 4.0 移动端项目
+
+> 商户绑定
+
+## Build Setup
+
+```bash
+# clone the project
+git clone
+
+# enter the project directory
+cd haoban-mobile-4
+
+# install dependency
+npm install
+
+# develop
+npm run serve
+```
+
+This will automatically open http://localhost:8080
+
+## Build
+
+```bash
+
+# build for production environment
+npm run build
+```
+
+

babel.config.js

+module.exports = {
+  presets: ['@vue/app'],
+  plugins: [
+    [
+      'import',
+      { libraryName: 'vant', libraryDirectory: 'es', style: true },
+      'vant'
+    ]
+  ]
+};

dist/css/chunk-0a3408f4.076dba65.css

+.van-button{position:relative;display:inline-block;box-sizing:border-box;height:1.17333rem;margin:0;padding:0;font-size:.42667rem;line-height:1.2;text-align:center;border-radius:.05333rem;cursor:pointer;-webkit-transition:opacity .2s;transition:opacity .2s;-webkit-appearance:none}.van-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:#000;border:inherit;border-color:#000;border-radius:inherit;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity:0;content:" "}.van-button:active:before{opacity:.1}.van-button--disabled:before,.van-button--loading:before{display:none}.van-button--default{color:#323233;background-color:#fff;border:.02667rem solid #ebedf0}.van-button--primary{color:#fff;background-color:#07c160;border:.02667rem solid #07c160}.van-button--info{color:#fff;background-color:#1989fa;border:.02667rem solid #1989fa}.van-button--danger{color:#fff;background-color:#ee0a24;border:.02667rem solid #ee0a24}.van-button--warning{color:#fff;background-color:#ff976a;border:.02667rem solid #ff976a}.van-button--plain{background-color:#fff}.van-button--plain.van-button--primary{color:#07c160}.van-button--plain.van-button--info{color:#1989fa}.van-button--plain.van-button--danger{color:#ee0a24}.van-button--plain.van-button--warning{color:#ff976a}.van-button--large{width:100%;height:1.33333rem}.van-button--normal{padding:0 .4rem;font-size:.37333rem}.van-button--small{height:.85333rem;padding:0 .21333rem;font-size:.32rem}.van-button__loading{color:inherit;font-size:inherit}.van-button--mini{height:.64rem;padding:0 .10667rem;font-size:.26667rem}.van-button--mini+.van-button--mini{margin-left:.10667rem}.van-button--block{display:block;width:100%}.van-button--disabled{cursor:not-allowed;opacity:.5}.van-button--loading{cursor:default}.van-button--round{border-radius:26.64rem}.van-button--square{border-radius:0}.van-button__content{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;height:100%}.van-button__icon{min-width:1em;font-size:1.2em;line-height:inherit}.van-button__icon+.van-button__text,.van-button__loading+.van-button__text{margin-left:.13333rem}.van-button--hairline{border-width:0}.van-button--hairline:after{border-color:inherit;border-radius:.10667rem}.van-button--hairline.van-button--round:after{border-radius:26.64rem}.van-button--hairline.van-button--square:after{border-radius:0}.van-dialog{position:fixed;top:45%;left:50%;width:8.53333rem;overflow:hidden;font-size:.42667rem;background-color:#fff;border-radius:.42667rem;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:.3s;transition:.3s;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform}@media (max-width:321px){.van-dialog{width:90%}}.van-dialog__header{padding-top:.64rem;font-weight:500;line-height:.64rem;text-align:center}.van-dialog__header--isolated{padding:.64rem 0}.van-dialog__message{max-height:60vh;padding:.64rem;overflow-y:auto;font-size:.37333rem;line-height:.53333rem;white-space:pre-wrap;text-align:center;word-wrap:break-word;-webkit-overflow-scrolling:touch}.van-dialog__message--has-title{padding-top:.32rem;color:#646566}.van-dialog__message--left{text-align:left}.van-dialog__message--right{text-align:right}.van-dialog__footer{overflow:hidden;-webkit-user-select:none;user-select:none}.van-dialog__footer--buttons{display:-webkit-box;display:-webkit-flex;display:flex}.van-dialog__footer--buttons .van-button{-webkit-box-flex:1;-webkit-flex:1;flex:1}.van-dialog .van-button{border:0}.van-dialog__confirm,.van-dialog__confirm:active{color:#1989fa}.van-dialog-bounce-enter{-webkit-transform:translate3d(-50%,-50%,0) scale(.7);transform:translate3d(-50%,-50%,0) scale(.7);opacity:0}.van-dialog-bounce-leave-active{-webkit-transform:translate3d(-50%,-50%,0) scale(.9);transform:translate3d(-50%,-50%,0) scale(.9);opacity:0}.van-field__label{-webkit-box-flex:0;-webkit-flex:none;flex:none;box-sizing:border-box;width:6.2em;margin-right:.32rem;color:#646566;text-align:left;word-wrap:break-word}.van-field__label--center{text-align:center}.van-field__label--right{padding-right:.42667rem;text-align:right}.van-field--disabled .van-field__label{color:#c8c9cc}.van-field__value{overflow:visible}.van-field__body{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}.van-field__control{display:block;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;color:#323233;line-height:inherit;text-align:left;background-color:initial;border:0;resize:none}.van-field__control::-webkit-input-placeholder{color:#c8c9cc}.van-field__control::placeholder{color:#c8c9cc}.van-field__control:disabled{color:#c8c9cc;background-color:initial;cursor:not-allowed;opacity:1;-webkit-text-fill-color:currentColor}.van-field__control:read-only{cursor:default}.van-field__control--center{-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;text-align:center}.van-field__control--right{-webkit-box-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;text-align:right}.van-field__control--custom{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;min-height:.64rem}.van-field__control[type=date],.van-field__control[type=datetime-local],.van-field__control[type=time]{min-height:.64rem}.van-field__control[type=search]{-webkit-appearance:none}.van-field__button,.van-field__clear,.van-field__icon,.van-field__right-icon{-webkit-flex-shrink:0;flex-shrink:0}.van-field__clear,.van-field__right-icon{margin-right:-.21333rem;padding:0 .21333rem;line-height:inherit}.van-field__clear{color:#c8c9cc;font-size:.42667rem;cursor:pointer}.van-field__left-icon .van-icon,.van-field__right-icon .van-icon{display:block;min-width:1em;font-size:.42667rem;line-height:inherit}.van-field__left-icon{margin-right:.13333rem}.van-field__right-icon{color:#969799}.van-field__button{padding-left:.21333rem}.van-field__error-message{color:#ee0a24;font-size:.32rem;text-align:left}.van-field__error-message--center{text-align:center}.van-field__error-message--right{text-align:right}.van-field__word-limit{margin-top:.10667rem;color:#646566;font-size:.32rem;line-height:.42667rem;text-align:right}.van-field--error .van-field__control::-webkit-input-placeholder{color:#ee0a24;-webkit-text-fill-color:currentColor}.van-field--error .van-field__control,.van-field--error .van-field__control::-webkit-input-placeholder{color:#ee0a24;-webkit-text-fill-color:currentColor}.van-field--error .van-field__control,.van-field--error .van-field__control::placeholder{color:#ee0a24;-webkit-text-fill-color:currentColor}.van-field--min-height .van-field__control{min-height:1.6rem}.index-contain .bind-btn-body[data-v-527b3f49]{margin-top:1.06667rem;padding:.26667rem}.index-contain .bind-btn-body .flex[data-v-527b3f49]{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between}.index-contain .bind-btn-body .flex .van-button+.van-button[data-v-527b3f49]{margin-left:.26667rem}.refuse-toolbar[data-v-527b3f49]{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;align-items:center;height:1.33333rem;line-height:1.33333rem;border-bottom:.02667rem solid #e6e7ed}.refuse-toolbar .refuse-cancel[data-v-527b3f49],.refuse-toolbar .refuse-confirm[data-v-527b3f49]{height:100%;padding:0 .42667rem;font-size:.37333rem;background-color:initial;border:none;cursor:pointer}.refuse-toolbar .refuse-cancel[data-v-527b3f49]{color:#242835}.refuse-toolbar .refuse-confirm[data-v-527b3f49]{color:#c5cbd3}
\ No newline at end of file

dist/css/chunk-0a49f4e0.2902a5ba.css

+.store-wrap[data-v-0df7996f]{width:100%}.store-wrap .store-breadcrumb .store-breadcrumb__item .is-link[data-v-0df7996f]{color:#4b69e5;cursor:pointer}.store-wrap .store-breadcrumb .store-breadcrumb__item .van-icon[data-v-0df7996f]{color:#afb1b8;vertical-align:middle}.store-wrap .van-cell-group__title[data-v-0df7996f]{background:#f0f0f0}.store-wrap .look-show[data-v-0df7996f]{height:100%;padding:0 .42667rem;font-size:.37333rem;color:#4b69e5;background-color:initial;border:none;cursor:pointer}
\ No newline at end of file

dist/css/chunk-2e92e9e6.58617765.css

+.store-wrap[data-v-518c4f50]{width:100%}.store-wrap .van-cell-group__title[data-v-518c4f50]{background:#f0f0f0}.store-wrap .look-show[data-v-518c4f50]{height:100%;padding:0 .42667rem;font-size:.37333rem;color:#4b69e5;background-color:initial;border:none;cursor:pointer}
\ No newline at end of file

dist/index.html

+<!DOCTYPE html><html><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><link rel=icon href=favicon.ico><title>达摩</title><link href=css/chunk-0a3408f4.076dba65.css rel=prefetch><link href=css/chunk-0a49f4e0.2902a5ba.css rel=prefetch><link href=css/chunk-144000a6.bf249446.css rel=prefetch><link href=css/chunk-2e92e9e6.58617765.css rel=prefetch><link href=js/chunk-0a3408f4.01f9b529.js rel=prefetch><link href=js/chunk-0a49f4e0.149eef08.js rel=prefetch><link href=js/chunk-144000a6.dc3e780c.js rel=prefetch><link href=js/chunk-2e92e9e6.053e4226.js rel=prefetch><link href=css/app.86a889cf.css rel=preload as=style><link href=js/app.b5012c00.js rel=preload as=script><link href=js/chunk-vendors.4af1e6db.js rel=preload as=script><link href=css/app.86a889cf.css rel=stylesheet></head><body><div id=app></div><script src=js/chunk-vendors.4af1e6db.js></script><script src=js/app.b5012c00.js></script></body></html>
\ No newline at end of file

dist/js/app.b5012c00.js

+(function(e){function t(t){for(var r,o,u=t[0],i=t[1],f=t[2],l=0,s=[];l<u.length;l++)o=u[l],a[o]&&s.push(a[o][0]),a[o]=0;for(r in i)Object.prototype.hasOwnProperty.call(i,r)&&(e[r]=i[r]);g&&g(t);while(s.length)s.shift()();return c.push.apply(c,f||[]),n()}function n(){for(var e,t=0;t<c.length;t++){for(var n=c[t],r=!0,o=1;o<n.length;o++){var u=n[o];0!==a[u]&&(r=!1)}r&&(c.splice(t--,1),e=i(i.s=n[0]))}return e}var r={},o={app:0},a={app:0},c=[];function u(e){return i.p+"js/"+({}[e]||e)+"."+{"chunk-144000a6":"dc3e780c","chunk-0a3408f4":"01f9b529","chunk-0a49f4e0":"149eef08","chunk-2e92e9e6":"053e4226"}[e]+".js"}function i(t){if(r[t])return r[t].exports;var n=r[t]={i:t,l:!1,exports:{}};return e[t].call(n.exports,n,n.exports,i),n.l=!0,n.exports}i.e=function(e){var t=[],n={"chunk-144000a6":1,"chunk-0a3408f4":1,"chunk-0a49f4e0":1,"chunk-2e92e9e6":1};o[e]?t.push(o[e]):0!==o[e]&&n[e]&&t.push(o[e]=new Promise(function(t,n){for(var r="css/"+({}[e]||e)+"."+{"chunk-144000a6":"bf249446","chunk-0a3408f4":"076dba65","chunk-0a49f4e0":"2902a5ba","chunk-2e92e9e6":"58617765"}[e]+".css",a=i.p+r,c=document.getElementsByTagName("link"),u=0;u<c.length;u++){var f=c[u],l=f.getAttribute("data-href")||f.getAttribute("href");if("stylesheet"===f.rel&&(l===r||l===a))return t()}var s=document.getElementsByTagName("style");for(u=0;u<s.length;u++){f=s[u],l=f.getAttribute("data-href");if(l===r||l===a)return t()}var g=document.createElement("link");g.rel="stylesheet",g.type="text/css",g.onload=t,g.onerror=function(t){var r=t&&t.target&&t.target.src||a,c=new Error("Loading CSS chunk "+e+" failed.\n("+r+")");c.request=r,delete o[e],g.parentNode.removeChild(g),n(c)},g.href=a;var d=document.getElementsByTagName("head")[0];d.appendChild(g)}).then(function(){o[e]=0}));var r=a[e];if(0!==r)if(r)t.push(r[2]);else{var c=new Promise(function(t,n){r=a[e]=[t,n]});t.push(r[2]=c);var f,l=document.createElement("script");l.charset="utf-8",l.timeout=120,i.nc&&l.setAttribute("nonce",i.nc),l.src=u(e),f=function(t){l.onerror=l.onload=null,clearTimeout(s);var n=a[e];if(0!==n){if(n){var r=t&&("load"===t.type?"missing":t.type),o=t&&t.target&&t.target.src,c=new Error("Loading chunk "+e+" failed.\n("+r+": "+o+")");c.type=r,c.request=o,n[1](c)}a[e]=void 0}};var s=setTimeout(function(){f({type:"timeout",target:l})},12e4);l.onerror=l.onload=f,document.head.appendChild(l)}return Promise.all(t)},i.m=e,i.c=r,i.d=function(e,t,n){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},i.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)i.d(n,r,function(t){return e[t]}.bind(null,r));return n},i.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="",i.oe=function(e){throw console.error(e),e};var f=window["webpackJsonp"]=window["webpackJsonp"]||[],l=f.push.bind(f);f.push=t,f=f.slice();for(var s=0;s<f.length;s++)t(f[s]);var g=l;c.push([0,"chunk-vendors"]),n()})({0:function(e,t,n){e.exports=n("56d7")},"034f":function(e,t,n){"use strict";var r=n("64a9"),o=n.n(r);o.a},4360:function(e,t,n){"use strict";n("cadf"),n("551c"),n("097d");var r=n("2b0e"),o=n("2f62");r["a"].use(o["a"]),t["a"]=new o["a"].Store({state:{bodyH:document.documentElement.clientHeight,reqLoading:!1,memberId:"ff80808163a6ab7a0163a6abd0710000"},mutations:{setReqLoading:function(e,t){e.reqLoading=t},setMemberId:function(e,t){e.memberId=t}},actions:{SetLoading:function(e,t){var n=e.commit;n("setReqLoading",t)},modifyMemberId:function(e,t){var n=e.commit;n("setMemberId",t)}}})},"4dcb":function(e,t,n){},"56d7":function(e,t,n){"use strict";n.r(t);var r=n("a4bb"),o=n.n(r),a=(n("ac6a"),n("cadf"),n("551c"),n("097d"),n("db4d"),n("5cfb"),n("2b0e")),c=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{attrs:{id:"app"}},[n("router-view")],1)},u=[],i=(n("034f"),n("2877")),f={},l=Object(i["a"])(f,c,u,!1,null,null,null);l.options.__file="App.vue";var s=l.exports,g=n("4360"),d=n("8c4f");a["a"].use(d["a"]);var h=[{path:"*",redirect:"/index"},{name:"index",path:"/index",component:function(){return Promise.all([n.e("chunk-144000a6"),n.e("chunk-0a3408f4")]).then(n.bind(null,"37f9"))},meta:{title:"首页"}},{name:"storeBind",path:"/storeBind",component:function(){return Promise.all([n.e("chunk-144000a6"),n.e("chunk-2e92e9e6")]).then(n.bind(null,"1cab"))},meta:{title:"门店绑定"}},{name:"child-level",path:"/childLevel",component:function(){return Promise.all([n.e("chunk-144000a6"),n.e("chunk-0a49f4e0")]).then(n.bind(null,"3f58"))},meta:{title:"门店绑定"}}];h.forEach(function(e){e.path=e.path||"/"+(e.name||"")});var m=new d["a"]({mode:"history",base:"/haoban-mobile-4",routes:h});m.beforeEach(function(e,t,n){var r=e.meta&&e.meta.title;r&&(document.title=r),n()});n("a342"),n("4dcb"),n("c5f6"),n("3b2b"),n("a481"),n("6b54");var p=function(e,t){if(e){e=10===e.toString().length?1e3*e:e;var n=new Date(e),r={"M+":n.getMonth()+1,"D+":n.getDate(),W:"日一二三四五六".charAt(n.getDay()),"h+":n.getHours(),"m+":n.getMinutes(),"s+":n.getSeconds(),"q+":Math.floor((n.getMonth()+3)/3),S:n.getMilliseconds()};for(var o in/(Y+)/.test(t)&&(t=t.replace(RegExp.$1,(n.getFullYear()+"").substr(4-RegExp.$1.length))),r)new RegExp("("+o+")").test(t)&&(t=t.replace(RegExp.$1,1===RegExp.$1.length?r[o]:("00"+r[o]).substr((""+r[o]).length)));return t}},b=function(e){if(e){var t=new Date(e),n=t.getMonth()+1,r=t.getDate()<10?"0"+t.getDate():t.getDate(),o=n<10?"0"+n:n,a=t.getHours()<10?"0"+t.getHours():t.getHours(),c=t.getMinutes()<10?"0"+t.getMinutes():t.getMinutes(),u=t.getSeconds()<10?"0"+t.getSeconds():t.getSeconds();return"".concat(t.getFullYear(),"-").concat(o,"-").concat(r," ").concat(a,":").concat(c,":").concat(u)}},v=function(e){if(e){var t=new Date(e),n=t.getMonth()+1,r=t.getDate()<10?"0"+t.getDate():t.getDate(),o=n<10?"0"+n:n,a=t.getHours()<10?"0"+t.getHours():t.getHours(),c=t.getMinutes()<10?"0"+t.getMinutes():t.getMinutes(),u=t.getSeconds()<10?"0"+t.getSeconds():t.getSeconds();return"".concat(t.getFullYear(),".").concat(o,".").concat(r," ").concat(a,":").concat(c,":").concat(u)}},M=function(e){if(e){var t=new Date(e),n=t.getMonth()+1,r=n<10?"0"+n:n;return"".concat(t.getFullYear(),"-").concat(r)}},y=function(e){if(e){var t=new Date(e),n=t.getMonth()+1,r=t.getDate()<10?"0"+t.getDate():t.getDate(),o=n<10?"0"+n:n;return"".concat(t.getFullYear(),"-").concat(o,"-").concat(r)}},S=function(e){if(e){var t=new Date(e),n=t.getHours()<10?"0"+t.getHours():t.getHours(),r=t.getMinutes()<10?"0"+t.getMinutes():t.getMinutes(),o=t.getSeconds()<10?"0"+t.getSeconds():t.getSeconds();return"".concat(n,":").concat(r,":").concat(o)}},w=function(e){if(e){var t=new Date,n=new Date(Number(e)).getTime()-t.getTime();if(n<0)return"";var r=Math.floor(n/864e5),o=n%864e5,a=Math.floor(o/36e5),c=o%36e5,u=Math.floor(c/6e4);return"".concat(r,"天").concat(a,"小时").concat(u,"分")}},k=function(e){return e?(e=e.toString(),e.substr(0,3)+"****"+e.substr(7,11)):""},D=function(e){return e?(e=e.toString(),"**"+e.substr(e.length-1,e.length)):""},E=function(e){if(!e)return"00:00:00";var t=e/1e3,n=Math.floor(t/60/60/24),r=24*n+Math.floor(t/60/60)%24<10?"0"+(24*n+Math.floor(t/60/60)%24):24*n+Math.floor(t/60/60)%24,o=Math.floor(t/60)%60<10?"0"+Math.floor(t/60)%60:Math.floor(t/60)%60,a=Math.floor(t)%60<10?"0"+Math.floor(t)%60:Math.floor(t)%60;return"".concat(r,":").concat(o,":").concat(a)},x={dateFormat:p,formatTimeStamp:b,timeStampToYm:M,timeStampToYmd:y,timeStampToHms:S,formatTimeYmdHms:v,formatPhoneNum:k,formatName:D,timeStampSpace:w,formatTime:E},T=n("1368"),H=n.n(T),P=n("3a34"),j=n.n(P);n("1368").polyfill(),H.a.polyfill();new j.a;o()(x).forEach(function(e){a["a"].filter(e,x[e])}),new a["a"]({router:m,store:g["a"],el:"#app",render:function(e){return e(s)}})},"64a9":function(e,t,n){},a342:function(e,t,n){}});
+//# sourceMappingURL=app.b5012c00.js.map
\ No newline at end of file

dist/js/chunk-0a49f4e0.149eef08.js

+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-0a49f4e0"],{"3f58":function(t,e,a){"use strict";a.r(e);var n,r=function(){var t=this,e=t.$createElement,a=t._self._c||e;return a("div",{staticClass:"store-wrap border-box"},[a("van-cell",[[a("div",{staticClass:"store-breadcrumb"},[t._l(t.navData,function(e,n){return[n!=t.navData.length-1?[a("span",{key:n+"nav",staticClass:"store-breadcrumb__item"},[a("span",{staticClass:"store-breadcrumb__inner is-link",on:{click:function(a){t.changeDepart(e,n)}}},[a("span",{staticClass:"store-breadcrumb__inner is-link font-13  color-606266"},[t._v("\n                  "+t._s(e.storeGroupName)+"\n                ")])]),n!=t.navData.length-1?a("van-icon",{attrs:{name:"arrow"}}):t._e()],1)]:[a("span",{key:n+"nav2",staticClass:"store-breadcrumb__item"},[a("span",{staticClass:"store-breadcrumb__inner",on:{click:function(a){t.changeDepart(e,n)}}},[a("span",{staticClass:"store-breadcrumb__inner font-13  color-606266"},[t._v("\n                  "+t._s(e.storeGroupName)+"\n                ")])])])]]})],2)]],2),a("van-cell-group",{attrs:{title:"门店共享"}},[a("van-cell",{attrs:{title:"浙江代理"}},[[a("button",{staticClass:"look-show",attrs:{type:"button"},on:{click:t.toChild}},[t._v("查看")])]],2)],1)],1)},s=[],c=(a("96cf"),a("3b8d")),o=a("bd86"),i=(a("68ef"),a("9d70"),a("3743"),a("ad06")),u=(a("0653"),a("34e9")),l=(a("c194"),a("7744")),p=(a("cadf"),a("551c"),a("097d"),a("365c")),b={components:(n={},Object(o["a"])(n,l["a"].name,l["a"]),Object(o["a"])(n,u["a"].name,u["a"]),Object(o["a"])(n,i["a"].name,i["a"]),n),data:function(){return{navData:[{storeGroupName:"达摩测试达摩"},{storeGroupName:"达摩测试达摩"},{storeGroupName:"达摩测试达摩"},{storeGroupName:"达摩测试达摩"},{storeGroupName:"达摩测试达摩"},{storeGroupName:"达摩测试达摩"}],bindData:{},bindType:""}},methods:{toChild:function(){var t=this;t.$router.push("/")},getNavData:function(){var t=Object(c["a"])(regeneratorRuntime.mark(function t(){var e,a,n;return regeneratorRuntime.wrap(function(t){while(1)switch(t.prev=t.next){case 0:return e=this,a={},t.next=4,Object(p["c"])(a);case 4:n=t.sent,"0000"==n.code&&(e.navData=n.result);case 6:case"end":return t.stop()}},t,this)}));function e(){return t.apply(this,arguments)}return e}(),getGroupData:function(){var t=Object(c["a"])(regeneratorRuntime.mark(function t(){var e,a,n;return regeneratorRuntime.wrap(function(t){while(1)switch(t.prev=t.next){case 0:return e=this,a={},t.next=4,Object(p["b"])(a);case 4:n=t.sent,"0000"==n.code&&(e.bindData=n.result);case 6:case"end":return t.stop()}},t,this)}));function e(){return t.apply(this,arguments)}return e}(),getStoreData:function(){var t=Object(c["a"])(regeneratorRuntime.mark(function t(){var e,a,n;return regeneratorRuntime.wrap(function(t){while(1)switch(t.prev=t.next){case 0:return e=this,a={},t.next=4,Object(p["d"])(a);case 4:n=t.sent,"0000"==n.code&&(e.bindData=n.result);case 6:case"end":return t.stop()}},t,this)}));function e(){return t.apply(this,arguments)}return e}()}},d=b,f=(a("8eb6"),a("2877")),m=Object(f["a"])(d,r,s,!1,null,"0df7996f",null);m.options.__file="child-level.vue";e["default"]=m.exports},"8eb6":function(t,e,a){"use strict";var n=a("f017"),r=a.n(n);r.a},f017:function(t,e,a){}}]);
+//# sourceMappingURL=chunk-0a49f4e0.149eef08.js.map
\ No newline at end of file

dist/js/chunk-2e92e9e6.053e4226.js

+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2e92e9e6"],{"1cab":function(t,e,n){"use strict";n.r(e);var r,a=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"store-wrap border-box"},[n("van-cell",{attrs:{title:"单元格","is-link":""}}),n("van-cell-group",{attrs:{title:"门店共享"}},[n("van-cell",{attrs:{title:"浙江代理"}},[[n("button",{staticClass:"look-show",attrs:{type:"button"},on:{click:t.toChild}},[t._v("查看")])]],2)],1)],1)},c=[],i=(n("96cf"),n("3b8d")),s=n("bd86"),o=(n("0653"),n("34e9")),u=(n("c194"),n("7744")),l=(n("cadf"),n("551c"),n("097d"),n("365c")),d={components:(r={},Object(s["a"])(r,u["a"].name,u["a"]),Object(s["a"])(r,o["a"].name,o["a"]),r),data:function(){return{bindData:[],bindType:""}},methods:{toChild:function(){var t=this;t.$router.push("/childLevel")},getGroupData:function(){var t=Object(i["a"])(regeneratorRuntime.mark(function t(){var e,n,r;return regeneratorRuntime.wrap(function(t){while(1)switch(t.prev=t.next){case 0:return e=this,n={},t.next=4,Object(l["b"])(n);case 4:r=t.sent,"0000"==r.code&&(e.bindData=r.result);case 6:case"end":return t.stop()}},t,this)}));function e(){return t.apply(this,arguments)}return e}(),getStoreData:function(){var t=Object(i["a"])(regeneratorRuntime.mark(function t(){var e,n,r;return regeneratorRuntime.wrap(function(t){while(1)switch(t.prev=t.next){case 0:return e=this,n={},t.next=4,Object(l["d"])(n);case 4:r=t.sent,"0000"==r.code&&(e.bindData=r.result);case 6:case"end":return t.stop()}},t,this)}));function e(){return t.apply(this,arguments)}return e}()}},f=d,p=(n("fb53"),n("2877")),b=Object(p["a"])(f,a,c,!1,null,"518c4f50",null);b.options.__file="index.vue";e["default"]=b.exports},"446f":function(t,e,n){},fb53:function(t,e,n){"use strict";var r=n("446f"),a=n.n(r);a.a}}]);
+//# sourceMappingURL=chunk-2e92e9e6.053e4226.js.map
\ No newline at end of file

dist/js/chunk-2e92e9e6.053e4226.js.map

+{"version":3,"sources":["webpack:///./src/views/storeBind/index.vue?3eea","webpack:///src/views/storeBind/index.vue","webpack:///./src/views/storeBind/index.vue?fd5f","webpack:///./src/views/storeBind/index.vue","webpack:///./src/views/storeBind/index.vue?22c9"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","title","is-link","type","on","click","toChild","_v","staticRenderFns","storeBindvue_type_script_lang_js_","components","_components","Object","defineProperty","cell","name","cell_group","data","bindData","bindType","methods","that","$router","push","getGroupData","_getGroupData","asyncToGenerator","regeneratorRuntime","mark","_callee","param","resData","wrap","_context","prev","next","api","sent","code","result","stop","apply","arguments","getStoreData","_getStoreData","_callee2","_context2","views_storeBindvue_type_script_lang_js_","component","componentNormalizer","options","__file","__webpack_exports__","_node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_index_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_518c4f50_lang_less_scoped_true___WEBPACK_IMPORTED_MODULE_0__","__webpack_require__","_node_modules_mini_css_extract_plugin_dist_loader_js_ref_10_oneOf_1_0_node_modules_css_loader_index_js_ref_10_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_10_oneOf_1_2_node_modules_less_loader_dist_cjs_js_ref_10_oneOf_1_3_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_id_518c4f50_lang_less_scoped_true___WEBPACK_IMPORTED_MODULE_0___default","n"],"mappings":"yHAAA,MAAAA,EAAA,WAA0B,IAAAC,EAAAC,KAAaC,EAAAF,EAAAG,eAA0BC,EAAAJ,EAAAK,MAAAD,IAAAF,EAAwB,OAAAE,EAAA,OAAiBE,YAAA,yBAAoC,CAAAF,EAAA,YAAiBG,MAAA,CAAOC,MAAA,MAAAC,UAAA,MAA4BL,EAAA,kBAAuBG,MAAA,CAAOC,MAAA,SAAgB,CAAAJ,EAAA,YAAiBG,MAAA,CAAOC,MAAA,SAAgB,EAAAJ,EAAA,UAAgBE,YAAA,YAAAC,MAAA,CAA+BG,KAAA,UAAgBC,GAAA,CAAKC,MAAAZ,EAAAa,UAAqB,CAAAb,EAAAc,GAAA,sBACjXC,EAAA,mICsBAC,EAAA,CACAC,YAAAC,EAAA,GAAAC,OAAAC,EAAA,KAAAD,CAAAD,EACAG,EAAA,KAAAC,KADAD,EAAA,MAAAF,OAAAC,EAAA,KAAAD,CAAAD,EAEAK,EAAA,KAAAD,KAFAC,EAAA,MAAAL,GAIAM,KALA,WAMA,OACAC,SAAA,GACAC,SAAA,KAGAC,QAAA,CACAd,QADA,WAEA,IAAAe,EAAA3B,KACA2B,EAAAC,QAAAC,KAAA,gBAEAC,aALA,eAAAC,EAAAb,OAAAc,EAAA,KAAAd,CAAAe,mBAAAC,KAAA,SAAAC,IAAA,IAAAR,EAAAS,EAAAC,EAAA,OAAAJ,mBAAAK,KAAA,SAAAC,GAAA,eAAAA,EAAAC,KAAAD,EAAAE,MAAA,cAMAd,EAAA3B,KACAoC,EAAA,GAPAG,EAAAE,KAAA,EAWAvB,OAAAwB,EAAA,KAAAxB,CAAAkB,GAXA,OAWAC,EAXAE,EAAAI,KAYA,QAAAN,EAAAO,OACAjB,EAAAH,SAAAa,EAAAQ,QAbA,wBAAAN,EAAAO,SAAAX,EAAAnC,SAAA,SAAA8B,IAAA,OAAAC,EAAAgB,MAAA/C,KAAAgD,WAAA,OAAAlB,EAAA,GAgBAmB,aAhBA,eAAAC,EAAAhC,OAAAc,EAAA,KAAAd,CAAAe,mBAAAC,KAAA,SAAAiB,IAAA,IAAAxB,EAAAS,EAAAC,EAAA,OAAAJ,mBAAAK,KAAA,SAAAc,GAAA,eAAAA,EAAAZ,KAAAY,EAAAX,MAAA,cAiBAd,EAAA3B,KACAoC,EAAA,GAlBAgB,EAAAX,KAAA,EAsBAvB,OAAAwB,EAAA,KAAAxB,CAAAkB,GAtBA,OAsBAC,EAtBAe,EAAAT,KAuBA,QAAAN,EAAAO,OACAjB,EAAAH,SAAAa,EAAAQ,QAxBA,wBAAAO,EAAAN,SAAAK,EAAAnD,SAAA,SAAAiD,IAAA,OAAAC,EAAAH,MAAA/C,KAAAgD,WAAA,OAAAC,EAAA,KClC8VI,EAAA,0BCQ9VC,EAAgBpC,OAAAqC,EAAA,KAAArC,CACdmC,EACAvD,EACAgB,GACF,EACA,KACA,WACA,MAIAwC,EAAAE,QAAAC,OAAA,YACeC,EAAA,WAAAJ,sECpBf,IAAAK,EAAAC,EAAA,QAAAC,EAAAD,EAAAE,EAAAH,GAAwjBE,EAAG","file":"js/chunk-2e92e9e6.053e4226.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"store-wrap border-box\"},[_c('van-cell',{attrs:{\"title\":\"单元格\",\"is-link\":\"\"}}),_c('van-cell-group',{attrs:{\"title\":\"门店共享\"}},[_c('van-cell',{attrs:{\"title\":\"浙江代理\"}},[[_c('button',{staticClass:\"look-show\",attrs:{\"type\":\"button\"},on:{\"click\":_vm.toChild}},[_vm._v(\"查看\")])]],2)],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!--\n * @Descripttion: 当前组件信息\n * @version: 1.0.0\n * @Author: 无尘\n * @Date: 2020-07-23 17:18:25\n * @LastEditors: 无尘\n * @LastEditTime: 2020-07-29 11:10:08\n-->\n<template>\n  <div class=\"store-wrap border-box\">\n    <van-cell title=\"单元格\" is-link />\n    <van-cell-group title=\"门店共享\">\n      <van-cell title=\"浙江代理\"  >\n        <template #extra>\n           <button type=\"button\" class=\"look-show\" @click=\"toChild\">查看</button>\n        </template>\n      </van-cell>\n    </van-cell-group>\n  </div>\n</template>\n<script>\nimport { Cell, CellGroup } from 'vant';\nimport { getDepartment, getStore } from '@/api/index.js';\nexport default {\n  components: {\n    [Cell.name]: Cell,\n    [CellGroup.name]: CellGroup,\n  },\n  data() {\n    return {\n      bindData: [],\n      bindType: ''\n    }\n  },\n  methods: {\n    toChild() {\n      const that = this;\n       that.$router.push('/childLevel')\n    },\n    async getGroupData() {\n      const that = this;\n      let param = {\n        // memberId: 'ff80808163a6ab7a0163a6abd0710000',\n        // enterpriseId: 'ff808081593917d90159398ec6340012'\n      }\n      let resData = await getDepartment(param);\n      if (resData.code == '0000') {\n        that.bindData = resData.result;\n      }\n    },\n    async getStoreData() {\n      const that = this;\n      let param = {\n        // memberId: 'ff80808163a6ab7a0163a6abd0710000',\n        // enterpriseId: 'ff808081593917d90159398ec6340012'\n      }\n      let resData = await getStore(param);\n      if (resData.code == '0000') {\n        that.bindData = resData.result;\n      }\n    }\n  },\n};\n</script>\n\n<style type=\"text/less\" lang=\"less\" scoped>\n.store-wrap {\n  width: 100%;\n  .van-cell-group__title {\n    background: #f0f0f0;\n  }\n  .look-show {\n    height: 100%;\n    padding: 0 16px;\n    font-size: 14px;\n    color: #4b69e5;\n    background-color: transparent;\n    border: none;\n    cursor: pointer;\n  }\n}\n</style>\n","import mod from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../node_modules/thread-loader/dist/cjs.js!../../../node_modules/babel-loader/lib/index.js!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./index.vue?vue&type=template&id=518c4f50&scoped=true&\"\nimport script from \"./index.vue?vue&type=script&lang=js&\"\nexport * from \"./index.vue?vue&type=script&lang=js&\"\nimport style0 from \"./index.vue?vue&type=style&index=0&id=518c4f50&lang=less&scoped=true&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  \"518c4f50\",\n  null\n  \n)\n\ncomponent.options.__file = \"index.vue\"\nexport default component.exports","import mod from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../../node_modules/css-loader/index.js??ref--10-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=style&index=0&id=518c4f50&lang=less&scoped=true&\"; export default mod; export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--10-oneOf-1-0!../../../node_modules/css-loader/index.js??ref--10-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--10-oneOf-1-2!../../../node_modules/less-loader/dist/cjs.js??ref--10-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=style&index=0&id=518c4f50&lang=less&scoped=true&\""],"sourceRoot":""}
\ No newline at end of file

package.json

+{
+  "name": "wechat-web",
+  "version": "1.2.0",
+  "description": "wechat-web",
+  "author": "<fairyilys@gmail.com.com>",
+  "license": "MIT",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "version": "conventional-changelog -p angular -i changelog.md -s -r 0 && git add changelog.md"
+  },
+  "dependencies": {
+    "amfe-flexible": "^2.2.1",
+    "axios": "^0.18.0",
+    "babel-polyfill": "^6.26.0",
+    "es6-promise": "^4.2.6",
+    "jsbarcode": "^3.6.0",
+    "vant": "^2.9.3",
+    "vconsole": "^3.2.2",
+    "vue": "^2.5.17",
+    "vue-router": "^3.0.1",
+    "vuex": "^3.1.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.0.1",
+    "@vue/cli-plugin-eslint": "^3.0.1",
+    "@vue/cli-service": "^3.0.1",
+    "babel-plugin-import": "^1.8.0",
+    "postcss-pxtorem": "^4.0.1",
+    "less": "^3.8.1",
+    "less-loader": "^4.1.0",
+    "vue-template-compiler": "^2.5.17"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "Android >= 4.0",
+    "iOS >= 7"
+  ]
+}

public/index.html

+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <title>达摩</title>
+</head>
+
+<body>
+  <div id="app"></div>
+</body>
+
+</html>
\ No newline at end of file

src/App.vue

+<!--
+ * @Descripttion: 当前组件信息
+ * @version: 1.0.0
+ * @Author: 无尘
+ * @Date: 2020-07-23 17:18:24
+ * @LastEditors: 无尘
+ * @LastEditTime: 2020-07-29 11:01:09
+-->
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<style>
+body {
+  background: #f0f0f0;
+  font-size: 16px;
+  background-color: #fff;
+  -webkit-font-smoothing: antialiased;
+}
+</style>

src/api/device.js

+"use strict";
+let device = {};
+let classNames = [];
+let ua = navigator.userAgent;
+/* eslint-disable */
+let android = ua.match(/(Android);?[\s\/]+([\d.]+)?/);
+let ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
+let ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/);
+let iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/);
+
+device.userAgent = ua;
+device.ios = device.android = device.iphone = device.ipad = device.androidChrome = false;
+
+// Android
+if (android) {
+  device.os = 'android';
+  device.osVersion = android[2];
+  device.android = true;
+  device.androidChrome = ua.toLowerCase().indexOf('chrome') >= 0;
+}
+if (ipad || iphone || ipod) {
+  device.os = 'ios';
+  device.ios = true;
+}
+// iOS
+if (iphone && !ipod) {
+  device.osVersion = iphone[2].replace(/_/g, '.');
+  device.iphone = true;
+}
+if (ipad) {
+  device.osVersion = ipad[2].replace(/_/g, '.');
+  device.ipad = true;
+}
+if (ipod) {
+  device.osVersion = ipod[3] ? ipod[3].replace(/_/g, '.') : null;
+  device.iphone = true;
+}
+// iOS 8+ changed UA
+if (device.ios && device.osVersion && ua.indexOf('Version/') >= 0) {
+  if (device.osVersion.split('.')[0] === '10') {
+    device.osVersion = ua.toLowerCase().split('version/')[1].split(' ')[0];
+  }
+}
+
+// Webview
+device.webView = (iphone || ipad || ipod) && ua.match(/.*AppleWebKit(?!.*Safari)/i);
+
+
+// OS classes
+if (device.os) {
+  classNames.push(device.os, device.os + '-' + device.osVersion.split('.')[0], device.os + '-' + device.osVersion.replace(/\./g, '-'));
+  if (device.os === 'ios') {
+    var major = parseInt(device.osVersion.split('.')[0], 10);
+    for (var i = major - 1; i >= 6; i--) {
+      classNames.push('ios-gt-' + i);
+    }
+  }
+
+}
+
+// keng..
+device.isWeixin = /MicroMessenger/i.test(ua);
+
+export default device;

src/api/index.js

+/*
+ * @Descripttion: 当前组件信息
+ * @version: 1.0.0
+ * @Author: 无尘
+ * @Date: 2020-07-24 15:07:58
+ * @LastEditors: 无尘
+ * @LastEditTime: 2020-07-29 10:37:35
+ */
+/**
+ * 商户绑定 api
+ */
+import {
+  postRequest
+} from './request';
+
+/* Common */
+export const getBindData = data => postRequest('/hb-manage-web/audit-detail', data);
+export const postAudit = data => postRequest('/hb-manage-web/enterprise-auth-audit', data); // 审核 0 申请中 1通过 2拒绝 3取消审核
+export const getStore = data => postRequest('/hb-manage-web/bind-store-list', data);
+export const getDepartment = data => postRequest('/hb-manage-web/auth-department-list', data);
+export const getDepartmentNav = data => postRequest('/hb-manage-web/department-list-level', data);

src/api/jsBridge.js

+import device from './device';
+/* eslint-disable */
+function setupWebViewJavascriptBridge(callback) {
+  if (window.WebViewJavascriptBridge) {
+    return callback(window.WebViewJavascriptBridge);
+  }
+  if (!!device.android) {
+    document.addEventListener(
+      'WebViewJavascriptBridgeReady',
+      function() {
+        callback(WebViewJavascriptBridge)
+      },
+      false
+    );
+    return;
+  }
+  if (window.WVJBCallbacks) {
+    return window.WVJBCallbacks.push(callback);
+  }
+
+  window.WVJBCallbacks = [callback];
+  let WVJBIframe = document.createElement('iframe');
+  WVJBIframe.style.display = 'none';
+  WVJBIframe.src = 'https://__bridge_loaded__';
+  document.documentElement.appendChild(WVJBIframe);
+  setTimeout(() => {
+    document.documentElement.removeChild(WVJBIframe);
+  }, 0);
+}
+
+export default {
+  callhandler(name, data, callback) {
+    setupWebViewJavascriptBridge(function(bridge) {
+      bridge.callHandler(name, data, callback);
+    })
+  },
+  registerhandler(name, callback) {
+    setupWebViewJavascriptBridge(function(bridge) {
+      bridge.registerHandler(name, function(data, responseCallback) {
+        callback(data, responseCallback);
+      })
+    })
+  }
+}

src/api/request.js

+import axios from 'axios';
+import store from '../store/index';
+import qs from 'qs';
+import { Toast } from 'vant';
+
+let local = '';
+if (process.env.NODE_ENV === 'development') {
+  local = '//four.gicdev.com';
+}else {
+  local = window.location.origin;
+}
+let loading = '';
+
+// 创建axios 实例
+const service = axios.create({
+  baseURL: local, // api的base_url
+  timeout: 20000, // 请求超时时间
+  withCredentials: true,
+})
+
+// request 拦截器
+service.interceptors.request.use(
+  config => {
+    loading = Toast.loading({
+      duration: 0, // 持续展示 toast
+      mask: true,
+      forbidClick: true, // 禁用背景点击
+      loadingType: 'spinner',
+      message: ' '
+    });
+    // loading true
+    store.dispatch('SetLoading', true);
+    return config;
+  },
+  error => {
+    loading.clear();
+    // loading false
+    setTimeout(function() {
+      store.dispatch('SetLoading', false);
+    }, 300)
+    Promise.reject(error);
+  }
+)
+
+// response 拦截器
+service.interceptors.response.use(
+  response => {
+    const res = response.data;
+    loading.clear();
+    // loading false
+    store.dispatch('SetLoading', false);
+    return res;
+  },
+  error => {
+    loading.clear();
+    // loading false
+    store.dispatch('SetLoading', false);
+    return Promise.reject(error);
+  }
+)
+
+// export default service
+/*
+ *
+ * 统一响应处理
+ * @url:
+ *
+ */
+function handleResponse(code, msg) {
+  switch (code) {
+    case 1:
+      Toast(msg);
+      break;
+  }
+}
+
+/*
+ *
+ * 统一 get 请求方法
+ * @url: 请求的 url
+ * @params: 请求带的参数
+ * @header: 带 token
+ *
+ */
+
+export const getRequest = (url, params) => {
+  params.requestProject = "web";
+  return new Promise((resolve, reject) => {
+    service({
+      method: 'get',
+      url: `${local}${url}`,
+      data: {},
+      params: params,
+      headers: { 'content-type': 'application/x-www-form-urlencoded' },// "token": token
+    }).then(res => {
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/*
+ *
+ * 统一 post 请求方法
+ * url: 请求的 url
+ * @params: 请求带的参数
+ * @header:
+ *
+ */
+
+export const postRequest = (url, params) => {
+  params.requestProject = "web";
+  return new Promise((resolve, reject) => {
+    service({
+      method: 'post',
+      url: `${local}${url}`,
+      data: qs.stringify(params),
+      headers: { 'content-type': 'application/x-www-form-urlencoded' }
+    }).then(res => {
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+export const postJsonRequest = (url, params) => {
+  params.requestProject = "web";
+  return new Promise((resolve, reject) => {
+    service({
+      method: 'post',
+      url: `${local}${url}`,
+      data: "{}",
+      params: params,
+      headers: { 'Content-Type': 'application/json;charset=UTF-8' }
+    }).then(res => {
+      resolve(res);
+    }).catch(error => {
+      reject(error);
+    })
+  })
+}
+
+/*
+ * method: 'post'
+ * 'Content-Type': 'application/json;charset=UTF-8'
+ * @data: params
+ * @requestProject: 'web'
+ *
+ */
+
+export const postJson = (url, params) => {
+  return new Promise((resolve, reject) => {
+    service({
+      method: 'post',
+      url: `${local}${url}`,
+      data: params,
+      params: { requestProject: 'web' },
+      headers: { 'Content-Type': 'application/json;charset=UTF-8' }
+    }).then(res => {
+      if (res.errorCode != 0) {
+        handleResponse(res.errorCode, res.message);
+        reject(res);
+      } else {
+        resolve(res);
+      }
+    }).catch(error => {
+      reject(error);
+    })
+  })
+}
+
+/*
+ * method: 'post'
+ * @data: params
+ *
+ */
+export const postForm = (url, params) => {
+  params.requestProject = "web";
+  return new Promise((resolve, reject) => {
+    service({
+      method: 'post',
+      url: `${local}${url}`,
+      data: params,
+      headers: {}
+    }).then(res => {
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}

src/assets/403_images/error_403.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 400 335" style="enable-background:new 0 0 400 335;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FAFCFF;}
+	.st1{fill:#DBE5F1;}
+	.st2{fill:#DEE7F4;}
+	.st3{fill:#B9C7DB;}
+	.st4{fill:#FFFFFF;}
+	.st5{fill:none;stroke:#B9C7DB;stroke-width:4;stroke-miterlimit:10;}
+	.st6{fill:none;stroke:#B6C7D8;stroke-miterlimit:10;}
+</style>
+<path class="st5" d="M274.5,241.3c-5.3-5.3-4.4,4.4-6.7,6.7c-3.1,3.1-6.3,6-9.7,8.6H125.2c-3.4-2.7-6.6-5.6-9.7-8.7
+	c-28.4-28.5-38.6-70.5-26.6-109l-10.5-10.6c-5.3-5.3-5.3-13.8,0-19.2c5.2-5.3,13.7-5.3,19-0.1c0,0,0,0,0.1,0.1l6.6,6.8
+	c3.1,3.2,8.2,3.2,11.4,0l0,0c3.2-3.2,3.2-8.3,0-11.5L103.1,92c-3.2-3.2-3.2-8.3,0-11.5c3.1-3.2,8.2-3.2,11.4,0l0,0l17.2,17.2
+	c-0.9,3.7,0.9,7.6,4.4,9.3c3.5,1.7,7.7,0.6,9.9-2.5c2.3-3.1,2.1-7.4-0.5-10.3c-3.3-3.8-6.5-7.2-6.5-7.2l-7.3-7.4
+	c34.8-21.3,82.6-21.7,117.2,0c34.5,21.7,53.9,61.2,50,101.9l15.4,15.6c3.2,3.2,3.2,8.3,0,11.5c-3.1,3.2-8.2,3.2-11.4,0l0,0
+	l-15.1-15.3c-3.1-3.2-8.2-3.2-11.4,0l0,0c-3.2,3.2-3.2,8.3,0,11.5l17.1,17.2c5.2,5.3,5.2,13.8,0,19.1
+	C288.4,246.6,279.9,246.6,274.5,241.3C274.6,241.3,274.6,241.3,274.5,241.3L274.5,241.3z"/>
+<path class="st3" d="M86.6,71.4c0,4.7,3.8,8.5,8.5,8.5c1.5,0,3-0.4,4.3-1.1c4.1-2.3,5.5-7.5,3.1-11.6c-1.5-2.6-4.3-4.3-7.4-4.3
+	C90.4,62.9,86.6,66.7,86.6,71.4"/>
+<path class="st3" d="M216.4,145.4h24.3l-7.4,17.9c2.6,1.8,4.5,3.8,5.8,6c1.2,2.2,1.9,4.8,1.9,7.8c0,4.6-1.6,8.4-4.8,11.2
+	c-3.2,2.9-7.3,4.3-12.3,4.3c-2.5,0-5.1-0.4-7.5-1.1v-13.1c2,0.9,3.9,1.4,5.5,1.4s2.9-0.5,3.7-1.4c0.9-1,1.3-2.3,1.3-4.1
+	c0-1.9-0.8-3.4-2.4-4.6c-1.6-1.2-3.7-1.7-6.4-1.7l3.4-9.1h-5.1V145.4L216.4,145.4z M207.5,181.6c0,1.5-0.3,3-0.8,4.3
+	s-1.3,2.5-2.3,3.5s-2.2,1.8-3.4,2.3c-1.3,0.6-2.8,0.9-4.3,0.9h-9.6c-1.5,0-2.9-0.3-4.3-0.9c-1.3-0.6-2.5-1.3-3.4-2.3
+	c-0.4-0.4-0.8-0.9-1.2-1.4l11.7-17.3v6c0,0.6,0.2,1.1,0.6,1.4c0.4,0.4,0.8,0.6,1.4,0.6c1.1,0,2-0.8,2-1.9v-0.1v-11.9l10.9-16.1
+	c1.8,2,2.8,4.6,2.7,7.3L207.5,181.6L207.5,181.6L207.5,181.6z M177.1,185.9c-0.6-1.4-0.9-2.8-0.8-4.3V156c0-1.5,0.3-3,0.8-4.3
+	s1.3-2.5,2.3-3.5s2.2-1.8,3.4-2.3c1.3-0.6,2.8-0.9,4.3-0.9h9.6c1.5,0,2.9,0.3,4.3,0.9c1.3,0.5,2.4,1.3,3.4,2.3l-10.5,15.4v-2.7
+	c0-0.5-0.2-1.1-0.6-1.4c-0.4-0.4-0.9-0.6-1.4-0.6c-1.1,0-2,0.8-2,1.9v0.1v8.6l-12.1,17.9C177.5,186.9,177.3,186.4,177.1,185.9
+	L177.1,185.9z M243.8,192.7c3.5-7.4,5.3-15.5,5.3-23.7c0-30.5-24.4-55.2-54.6-55.2s-54.6,24.7-54.6,55.2c0,0.4,0,0.8,0,1.1
+	l19.6-24.6h11.4L154,171.3h5.5v-6.5l11.7-18.5v46.8h-11.7v-9.8h-17.8c5.1,19.2,20.1,34.3,39.2,39.2c-1.2,3.1-4.8,10.7-10.7,12
+	c-7.3,1.7,19.9,0.4,39.4-12.5c14.9-4.4,27.2-15,33.9-28.9L243.8,192.7L243.8,192.7z"/>
+<path class="st4" d="M238.9,154.3l-24.4,35.4l0.5,0.3l24.4-35.4L238.9,154.3z"/>
+<path class="st3" d="M266.2,66.6h8c0.7,0,1.3,0.6,1.3,1.3l0,0c0,0.4-0.1,0.7-0.4,1c-0.2,0.3-0.6,0.4-0.9,0.4h-8
+	c-0.4,0-0.7-0.1-0.9-0.4c-0.5-0.5-0.5-1.4,0-1.9C265.5,66.7,265.8,66.6,266.2,66.6 M116.5,201.9c-4.4,0-8,3.6-8,8.1s3.6,8.1,8,8.1
+	s8-3.6,8-8.1S120.9,201.9,116.5,201.9L116.5,201.9z M121.4,212.1c-0.8,2-2.8,3.3-4.9,3.3c-3,0-5.3-2.4-5.3-5.4c0-2.2,1.3-4.1,3.3-5
+	c2-0.8,4.3-0.4,5.8,1.2C121.8,207.7,122.2,210,121.4,212.1L121.4,212.1z M191.3,78.7c-4.4,0-8,3.6-8,8.1s3.6,8.1,8,8.1
+	c2.1,0,4.2-0.9,5.7-2.4s2.3-3.6,2.3-5.7C199.3,82.4,195.7,78.7,191.3,78.7z M196.3,88.9c-0.8,2-2.8,3.3-4.9,3.3
+	c-3,0-5.3-2.4-5.3-5.4c0-2.2,1.3-4.2,3.3-5s4.3-0.4,5.8,1.2C196.6,84.6,197.1,86.9,196.3,88.9L196.3,88.9z M270.2,162.6
+	c-4.4,0-8,3.6-8,8.1s3.6,8.1,8,8.1s8-3.6,8-8.1C278.2,166.3,274.6,162.6,270.2,162.6z M275.1,172.8c-0.8,2-2.8,3.3-4.9,3.3
+	c-3,0-5.3-2.4-5.3-5.4c0-2.2,1.3-4.2,3.3-5s4.3-0.4,5.8,1.2S275.9,170.8,275.1,172.8z M230.1,31.4c-4.4,0-8,3.6-8,8.1s3.6,8.1,8,8.1
+	c2.1,0,4.2-0.9,5.7-2.4s2.3-3.6,2.3-5.7C238.1,35,234.5,31.4,230.1,31.4z M235,41.6c-0.8,2-2.8,3.3-4.9,3.3c-3,0-5.3-2.4-5.3-5.4
+	c0-2.2,1.3-4.2,3.3-5s4.3-0.4,5.8,1.2C235.4,37.2,235.8,39.5,235,41.6z"/>
+<path class="st3" d="M163.2,45.9h8.2c0.4,0,0.7,0.1,1,0.4c0.5,0.5,0.5,1.3,0,1.9l0,0c-0.3,0.3-0.6,0.4-1,0.4h-8.2
+	c-0.4,0-0.7-0.1-1-0.4c-0.5-0.5-0.5-1.3,0-1.9l0,0C162.4,46.1,162.8,45.9,163.2,45.9 M271.7,63.5v8c0,0.4-0.1,0.7-0.4,0.9
+	c-0.3,0.3-0.6,0.4-1,0.4c-0.7,0-1.4-0.6-1.4-1.3l0,0v-8c0-0.4,0.1-0.7,0.4-0.9c0.5-0.5,1.4-0.5,1.9,0
+	C271.6,62.8,271.7,63.2,271.7,63.5"/>
+<path class="st3" d="M107.4,154.8h8.2c0.4,0,0.7,0.1,1,0.4c0.3,0.2,0.4,0.6,0.4,0.9c0,0.7-0.6,1.3-1.4,1.3h-8.2
+	c-0.5,0-0.9-0.3-1.2-0.7c-0.2-0.4-0.2-0.9,0-1.3C106.4,155.1,106.9,154.8,107.4,154.8 M169,42.7v8c0,0.4-0.1,0.7-0.4,0.9
+	c-0.5,0.5-1.4,0.5-2,0c-0.2-0.2-0.4-0.6-0.4-0.9v-8c0-0.4,0.1-0.7,0.4-0.9c0.5-0.5,1.4-0.5,1.9,0C168.8,42,169,42.3,169,42.7"/>
+<path class="st3" d="M230.9,110.3h8.1c0.7,0,1.3,0.6,1.3,1.4c0,0.7-0.6,1.3-1.3,1.4h-8.1c-0.8,0-1.4-0.6-1.4-1.4
+	c0-0.4,0.1-0.7,0.4-1C230.2,110.4,230.6,110.3,230.9,110.3"/>
+<path class="st3" d="M114.6,163.8v8.2c0,0.4-0.1,0.7-0.4,1c-0.5,0.5-1.4,0.5-1.9,0c-0.3-0.3-0.4-0.6-0.4-1v-8.2c0-0.4,0.1-0.7,0.4-1
+	c0.5-0.5,1.4-0.5,1.9,0l0,0C114.4,163.1,114.6,163.4,114.6,163.8"/>
+<path class="st1" d="M126,272.7h60.4c0.7,0,1.3,0.6,1.3,1.3l0,0c0,0.7-0.6,1.3-1.3,1.4H126c-0.7,0-1.3-0.6-1.3-1.3
+	C124.7,273.3,125.3,272.7,126,272.7"/>
+<path class="st1" d="M218.6,272.7h34.9c0.7,0,1.3,0.6,1.3,1.3c0,0.7-0.6,1.3-1.3,1.3h-34.9c-0.7,0-1.3-0.6-1.4-1.3
+	c0-0.4,0.1-0.7,0.4-1C217.9,272.9,218.2,272.7,218.6,272.7"/>
+<path class="st1" d="M158.2,282.2h131.5c0.7,0,1.3,0.6,1.4,1.3c0,0.4-0.1,0.7-0.4,1c-0.3,0.3-0.6,0.4-1,0.4H158.2
+	c-0.7,0-1.3-0.6-1.3-1.3l0,0C156.9,282.8,157.5,282.2,158.2,282.2"/>
+<path class="st1" d="M93.8,282.2h34.9c0.7,0,1.3,0.6,1.3,1.3l0,0c0,0.7-0.6,1.3-1.3,1.4l0,0H93.8c-0.7,0-1.3-0.6-1.4-1.3
+	c0-0.4,0.1-0.7,0.4-1C93.1,282.3,93.5,282.2,93.8,282.2"/>
+<path class="st1" d="M197.1,272.7h8.1c0.7,0,1.3,0.6,1.3,1.3c0,0.7-0.6,1.3-1.3,1.3h-8.1c-0.7,0.1-1.4-0.5-1.4-1.3
+	c-0.1-0.7,0.5-1.4,1.3-1.4C197,272.7,197.1,272.7,197.1,272.7"/>
+<path class="st1" d="M284.4,264.6h8.1c0.7,0,1.3,0.6,1.3,1.3l0,0c0,0.7-0.6,1.3-1.3,1.3h-8.1c-0.7,0-1.3-0.6-1.3-1.3
+	C283,265.3,283.6,264.6,284.4,264.6"/>
+<path class="st1" d="M99.2,264.6h171.7c0.4,0,0.7,0.1,0.9,0.4c0.4,0.4,0.5,1,0.3,1.5c-0.2,0.5-0.7,0.8-1.2,0.8H99.1
+	c-0.7,0-1.3-0.6-1.3-1.3C97.8,265.3,98.4,264.6,99.2,264.6"/>
+<path class="st3" d="M235,95.8v8.1c0,0.7-0.6,1.3-1.3,1.3s-1.3-0.6-1.3-1.3v-8.1c0-0.7,0.6-1.3,1.3-1.4C234.4,94.4,235,95,235,95.8"
+	/>
+</svg>

src/assets/css/common.css

+* {
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  font-family: -apple-system-font, "Helvetica Neue", sans-serif;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+menu,
+nav,
+section {
+  display: block;
+}
+
+li {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+/* 浮动 */
+
+.fl {
+  float: left;
+}
+
+.fr {
+  float: right;
+}
+
+.clearfix:before,
+.clearfix:after {
+  display: block;
+  visibility: hidden;
+  height: 0;
+  content: "";
+  clear: both;
+}
+
+.clearfix {
+  zoom: 1;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-ellipsis {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.over-hide {
+  overflow: hidden;
+}
+
+.border-box {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* display */
+
+.inline-block {
+  display: inline-block;
+}
+
+.block {
+  display: block;
+}
+
+.top {
+  vertical-align: top;
+}
+
+.middle {
+  vertical-align: middle;
+}
+
+/* flex */
+
+.flex {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.flex-1 {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+}
+
+.flex-2 {
+  -webkit-box-flex: 2;
+  -webkit-flex: 2;
+  -ms-flex: 2;
+  flex: 2;
+}
+
+.flex-row {
+  -webkit-flex-direction: row;
+  -moz-flex-direction: row;
+  -ms-flex-direction: row;
+  -o-flex-direction: row;
+  flex-direction: row;
+}
+
+.flex-column {
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  -o-flex-direction: column;
+  flex-direction: column;
+}
+
+.flex-align-center {
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.flex-pack-center {
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+}
+
+.max-80 {
+  max-width: 80px;
+}
+
+.w-0 {
+  width: 0;
+}
+
+/* 字体大小 */
+
+.font-12 {
+  font-size: 12px;
+}
+
+.font-13 {
+  font-size: 13px;
+}
+
+.font-14 {
+  font-size: 14px;
+}
+
+.font-15 {
+  font-size: 15px;
+}
+
+.font-16 {
+  font-size: 16px;
+}
+
+.font-18 {
+  font-size: 18px;
+}
+
+.font-20 {
+  font-size: 20px;
+}
+
+.font-30 {
+  font-size: 30px;
+}
+
+.font-50 {
+  font-size: 50px;
+}
+
+.font-w-500 {
+  font-weight: 500;
+}
+
+.color-232326 {
+  color: #232326;
+}
+
+.color-848689 {
+  color: #848689;
+}
+
+.color-cfa972 {
+  color: #CFA972;
+}
+
+.color-606266 {
+  color: #606266;
+}
+
+.color-666 {
+  color: #666;
+}
+
+.color-000 {
+  color: #000;
+}
+
+.bg-f4f5f6 {
+  background: #f4f5f6;
+}
+
+.bg-fff {
+  background: #fff;
+}
+
+.m-r-4 {
+  margin-right: 4px;
+}
+
+.m-t-6 {
+  margin-top: 6px;
+}
+
+.m-t-8 {
+  margin-top: 8px;
+}
+
+.m-t-10 {
+  margin-top: 10px;
+}
+
+.m-b-15 {
+  margin-bottom: 15px;
+}
+
+.padding-lr-12 {
+  padding: 0 12px;
+}
+
+.p-l-8 {
+  padding-left: 8px;
+}
+
+.p-t-10 {
+  padding-top: 10px;
+}
+
+.border-right-1 {
+  position: relative;
+}
+
+.border-right-1::after {
+  content: " ";
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 1px;
+  height: 100%;
+  border-right: 1px solid #D9D9D9;
+  color: #D9D9D9;
+  -webkit-transform-origin: 0 100%;
+  transform-origin: 0 100%;
+  -webkit-transform: scaleX(0.5);
+  transform: scaleX(0.5);
+}
+
+.border-left-1 {
+  position: relative;
+}
+
+.border-left-1::after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 1px;
+  height: 100%;
+  border-left: 1px solid #D9D9D9;
+  color: #D9D9D9;
+  -webkit-transform-origin: 0 100%;
+  transform-origin: 0 100%;
+  -webkit-transform: scaleX(0.5);
+  transform: scaleX(0.5);
+}
+
+.border-top-1 {
+  position: relative;
+}
+
+.border-top-1:after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 1px;
+  border-top: 1px solid #D5D5D6;
+  color: #D5D5D6;
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+}
+
+.border-bottom-1 {
+  position: relative;
+}
+
+.border-bottom-1:after {
+  content: " ";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  border-top: 1px solid #D5D5D6;
+  color: #D5D5D6;
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+  -webkit-transform: scaleY(0.5);
+  transform: scaleY(0.5);
+}
+
+/* 弹窗 */
+
+.qrcode-mask {
+  position: fixed;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.qrcode-dialog {
+  position: fixed;
+  z-index: 13;
+  width: 70%;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  background-color: #FAFAFC;
+  text-align: center;
+  border-radius: 8px;
+}
+
+/* 三角 */
+
+.triangle-up {
+  position: absolute;
+  left: 50%;
+  margin-left: -5px;
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 9px solid #666;
+}
+
+/* 无数据 */
+
+.no-data-contain {
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -moz-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  text-align: center;
+  font-size: 16px;
+  color: #848689;
+}
+
+.no-data-contain img {
+  width: 80px;
+  padding-bottom: 10px;
+}

src/assets/css/fonts.css

+@font-face {
+  font-family: 'DINPro';
+  /* src: url('BebasNeueBold.ttf') format('truetype'); */
+  src: url('DINPro-Bold.otf');
+  font-weight: bold;
+  font-style: normal;
+}

src/assets/css/index.css

+body {
+  width: 100%;
+  height: 100%;
+}
+
+.fixed {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+/* logo */
+
+.clique-logo {
+  width: 100%;
+  padding-top: 20px;
+  text-align: center;
+}
+
+.clique-logo img {
+  width: 50%;
+}
+
+/* 条形码 */
+
+.clique-qrcode {
+  padding: 0 22px;
+}
+
+#barcode {
+  width: 100%;
+  min-height: 60px;
+}
+
+.clique-qrcode p {
+  text-align: center;
+  margin-top: -6px;
+}
+
+
+/* 菜单 */
+
+.clique-menu {
+  width: 100%;
+  padding: 25px 0;
+}
+
+.clique-menu-cell:after {
+  top: 9px;
+  height: 63%;
+}
+
+.clique-menu p {
+  text-align: center;
+  margin-top: 10px;
+}
+
+.van-swipe__indicator {
+  background: rgba(35,35,38,0.3);
+}
+
+.goods-swipe {
+  font-size: 0;
+  line-height: 1;
+}
+
+
+/* 品牌 logo */
+
+.clique-brand {
+  width: 100%;
+  overflow: hidden;
+}
+
+.clique-brand-logo {
+  float: left;
+  width: 33.333333%;
+  min-width: 33.333333%;
+  max-width: 33.333333%;
+  border-left: 1px solid #fff;
+  border-bottom: 1px solid #fff;
+  overflow: hidden;
+  font-size: 0;
+}
+
+.clique-brand-logo.half {
+  width: 50%;
+  min-width: 50%;
+  max-width: 50%;
+}
+
+.b-l-1 {
+  border-left: 1px solid #f0f0f0;
+}
+
+.clique-brand-logo_a {
+  display: block;
+}
+
+.clique-brand-logo img {
+  display: inline-block;
+  vertical-align: top;
+  width: 100%;
+}
+
+.logo-more {
+  color: #232326;
+}
+
+.p-tips {
+  width: 100%;
+  height: 54px;
+  line-height: 54px;
+  padding: 0 16px;
+}

src/assets/font/demo.css

+*{margin: 0;padding: 0;list-style: none;}
+/*
+KISSY CSS Reset
+理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
+2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
+3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
+特色：1. 适应中文；2. 基于最新主流浏览器。
+维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
+ */
+
+/** 清除内外边距 **/
+body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
+dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
+pre, /* text formatting elements 文本格式元素 */
+form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
+th, td /* table elements 表格元素 */ {
+  margin: 0;
+  padding: 0;
+}
+
+/** 设置默认字体 **/
+body,
+button, input, select, textarea /* for ie */ {
+  font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
+}
+h1, h2, h3, h4, h5, h6 { font-size: 100%; }
+address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
+code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
+small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
+
+/** 重置列表元素 **/
+ul, ol { list-style: none; }
+
+/** 重置文本格式元素 **/
+a { text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+
+/** 重置表单元素 **/
+legend { color: #000; } /* for ie6 */
+fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
+button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
+/* 注：optgroup 无法扶正 */
+
+/** 重置表格元素 **/
+table { border-collapse: collapse; border-spacing: 0; }
+
+/* 清除浮动 */
+.ks-clear:after, .clear:after {
+  content: '\20';
+  display: block;
+  height: 0;
+  clear: both;
+}
+.ks-clear, .clear {
+  *zoom: 1;
+}
+
+.main {
+  padding: 30px 100px;
+width: 960px;
+margin: 0 auto;
+}
+.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
+
+.helps{margin-top:40px;}
+.helps pre{
+  padding:20px;
+  margin:10px 0;
+  border:solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists{
+  width: 100% !important;
+
+}
+
+.icon_lists li{
+  float:left;
+  width: 100px;
+  height:180px;
+  text-align: center;
+  list-style: none !important;
+}
+.icon_lists .icon{
+  font-size: 42px;
+  line-height: 100px;
+  margin: 10px 0;
+  color:#333;
+  -webkit-transition: font-size 0.25s ease-out 0s;
+  -moz-transition: font-size 0.25s ease-out 0s;
+  transition: font-size 0.25s ease-out 0s;
+
+}
+.icon_lists .icon:hover{
+  font-size: 100px;
+}
+
+
+
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p,
+.markdown pre {
+  margin: 1em 0;
+}
+
+.markdown > p,
+.markdown > blockquote,
+.markdown > .highlight,
+.markdown > ol,
+.markdown > ul {
+  width: 80%;
+}
+
+.markdown ul > li {
+  list-style: circle;
+}
+
+.markdown > ul li,
+.markdown blockquote ul > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown > ul li p,
+.markdown > ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol > li {
+  list-style: decimal;
+}
+
+.markdown > ol li,
+.markdown blockquote ol > li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown pre {
+  border-radius: 6px;
+  background: #f7f7f7;
+  padding: 20px;
+}
+
+.markdown pre code {
+  border: none;
+  background: #f7f7f7;
+  margin: 0;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown > table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown > table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+
+}
+
+.markdown > table th,
+.markdown > table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown > table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+  font-style: italic;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown > br,
+.markdown > p > br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+pre{
+  background: #fff;
+}
+
+
+
+
+

src/assets/js/public.js

+/**
+ * 手机号格式化
+ * import formatPhone from '@/assets/js/public.js';
+ * formatPhone.formatPhone(12345678900)
+ * @param {String} phone
+ */
+const formatPhone = (phone) => {
+  phone = phone.toString();
+  return phone.substr(0, 3) + '****' + phone.substr(7, 11);
+};
+
+/**
+ * 千分位格式化
+ * @param {数字} val
+ */
+const toThousands = (val) => {
+  let num = (val || 0).toString(),
+    result = '';
+  while (num.length > 3) {
+    result = ',' + num.slice(-3) + result;
+    num = num.slice(0, num.length - 3);
+  }
+  if (num) {
+    result = num + result;
+  }
+  return result;
+};
+
+/**
+ * 时间戳转换年-月 日
+ * @param timestamp,
+ */
+function timeToDateTime(timestamp, sym) {
+  // 格式化 timestamp 返回年月日
+  function formatNumber(n) {
+    //对于小于 10 的数字返回 0[1-9]
+    n = n.toString();
+    return n[1] ? n : '0' + n;
+  }
+  if (timestamp != null) {
+    let date = new Date(timestamp);
+    let year = date.getFullYear();
+    let month = date.getMonth() + 1;
+    let day = date.getDate();
+    return [year, month, day].map(formatNumber).join(sym || '-');
+  }
+  return '--';
+}
+
+export default {
+  formatPhone,
+  toThousands,
+  timeToDateTime
+}

src/common/js/error.js

+
+/* 后台返回消息提示 */
+import { Message } from 'element-ui';
+
+// 后台返回异常提示
+
+
+export default {
+  errorMsg: function(response) {
+    var local = window.location.origin;
+    if (local.indexOf('localhost')) {
+      local = 'http://gicdev.demogic.com';
+    }
+    console.log(response)
+    if (response.errorCode != 0) {
+      if (response.errorCode == 401) {
+        // window.location.href = local + "/gic-web/#/";
+        return false;
+      }
+      Message.error({
+        duration: 1000,
+        message: response.message
+      })
+    }
+  }
+}

src/common/js/public.js

+// 防抖
+export function _debounce(fn, delay) {
+
+    var delay = delay || 200;
+    var timer;
+    // console.log(fn)
+    return function () {
+        var that = this;
+        var args = arguments;
+        if (timer) {
+            clearTimeout(timer);
+        }
+        timer = setTimeout(function () {
+            timer = null;
+            fn.apply(that, args);
+        }, delay);
+    };
+}
+// 节流
+export function _throttle(fn, interval) {
+    var last;
+    var timer;
+    var interval = interval || 200;
+    return function () {
+        var that = this;
+        var args = arguments;
+        var now = +new Date();
+        if (last && now - last < interval) {
+            clearTimeout(timer);
+            timer = setTimeout(function () {
+                last = now;
+                fn.apply(that, args);
+            }, interval);
+        } else {
+            last = now;
+            fn.apply(that, args);
+        }
+    }
+}

src/common/js/showmsg.js

+/* 消息提示 */
+import { Message } from 'element-ui';
+
+export default {
+  showmsg: function(msg,type) {
+    Message({
+      duration: 1000,
+      message: msg,
+      type: type
+    })
+  }
+};
+
+

src/common/js/strlen.js

+
+
+/**
+ * 判断字符长度
+ * @param: str
+ */
+
+export default {
+  /**
+   * 一个汉字算两个字符,一个英文字母或数字算一个字符
+   */
+ getByteLen: function(val) {
+      var len = 0;
+      for (var i = 0; i < val.length; i++) {
+        var a = val.charAt(i);
+        if (a.match(/[^\x00-\xff]/ig) != null) {
+          len += 2;
+        }
+        else {
+          len += 1;
+        }
+      }
+      return len;
+  },
+  /**
+   * 一个汉字算一个字,一个英文字母或数字算半个字
+   */
+  getZhLen: function (val) {
+      var len = 0;
+      for (var i = 0; i < val.length; i++) {
+        var a = val.charAt(i);
+        if (a.match(/[^\x00-\xff]/ig) != null) {
+          len += 1;
+        }
+        else {
+          len += 0.5;
+        }
+      }
+      return Math.ceil(len);
+  },
+
+  /*暂无用*/
+  cutStr: function(str, len,type){
+    var char_length = 0;
+    for (var i = 0; i < str.length; i++){
+        var son_str = str.charAt(i);
+        if(type==1) {
+          encodeURI(son_str).length > 2 ? char_length += 1 : char_length += 0.5;
+        }
+        if(type==2) {
+           char_length += 1 ;
+        }
+        if (char_length >= len){
+            var sub_len = char_length == len ? i+1 : i;
+            return str.substr(0, sub_len);
+
+        }
+    }
+  },
+
+  /**
+   * 限制字数用, 一个汉字算一个字,两个英文/字母算一个字
+   */
+  getByteVal: function(val, max) {
+    var returnValue = '';
+    var byteValLen = 0;
+    for (var i = 0; i < val.length; i++) {
+        if (val[i].match(/[^\x00-\xff]/ig) != null)
+        byteValLen += 1;
+        else
+        byteValLen += 0.5;
+        if (byteValLen > max)
+        break;
+        returnValue += val[i];
+    }
+    return returnValue;
+  },
+
+  /**
+   * 限制字符数用, 一个汉字算两个字符,一个英文/字母算一个字符
+   */
+  getCharVal: function (val, max) {
+    var returnValue = '';
+    var byteValLen = 0;
+    for (var i = 0; i < val.length; i++) {
+        if (val[i].match(/[^\x00-\xff]/ig) != null)
+        byteValLen += 2;
+        else
+        byteValLen += 1;
+        if (byteValLen > max)
+        break;
+        returnValue += val[i];
+    }
+    return returnValue;
+  },
+
+  /**
+   * 正则校验,校验非负数字
+   */
+  regPos: function(v) {
+    var regTest = /^\d+(\.\d+)?$/;
+    return regTest.test(v);
+  }
+}

src/common/js/timeFormat.js

+
+/*
+ * 时间日期转换
+ * @param: "10:00-22:00"/ new Date()
+ */
+
+export default {
+  /*
+  * var storeBusinessTime="10:00-22:00"  to
+  */
+  timeToDate: function(val) {
+    var date = new Date()
+    var y = date.getFullYear();
+    var m = date.getMonth() +1;
+    var day = date.getDate();
+
+    var d = [],newArr = [];
+    var dArr = val.split('-');
+    dArr.forEach(function(ele,index){
+      newArr.push(ele.split(':'))
+    })
+    d = [new Date(y,m,day,newArr[0][0],newArr[0][1]),new Date(y,m,day,newArr[1][0],newArr[1][1])]
+    return d;
+  },
+
+
+
+  dateToTime(val) {
+    console.log(val)
+    //  (0-9)年月数字的显示
+    function formatDig(num) {
+      return num > 9 ? '' + num : '0' + num;
+    }
+    var t;
+    var t1 = formatDig(new Date(val[0]).getHours())+':'+formatDig(new Date(val[0]).getMinutes())
+    var t2 = formatDig(new Date(val[1]).getHours())+':'+formatDig(new Date(val[1]).getMinutes())
+    t= t1+'-'+t2
+    return t;
+  }
+}

src/common/js/util.js

+var SIGN_REGEXP = /([yMdhsm])(\1*)/g;
+var DEFAULT_PATTERN = 'yyyy-MM-dd';
+function padding(s, len) {
+    var len = len - (s + '').length;
+    for (var i = 0; i < len; i++) { s = '0' + s; }
+    return s;
+};
+
+export default {
+    getQueryStringByName: function (name) {
+        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
+        var r = window.location.search.substr(1).match(reg);
+        var context = "";
+        if (r != null)
+            context = r[2];
+        reg = null;
+        r = null;
+        return context == null || context == "" || context == "undefined" ? "" : context;
+    },
+    formatDate: {
+
+        format: function (date, pattern) {
+            pattern = pattern || DEFAULT_PATTERN;
+            return pattern.replace(SIGN_REGEXP, function ($0) {
+                switch ($0.charAt(0)) {
+                    case 'y': return padding(date.getFullYear(), $0.length);
+                    case 'M': return padding(date.getMonth() + 1, $0.length);
+                    case 'd': return padding(date.getDate(), $0.length);
+                    case 'w': return date.getDay() + 1;
+                    case 'h': return padding(date.getHours(), $0.length);
+                    case 'm': return padding(date.getMinutes(), $0.length);
+                    case 's': return padding(date.getSeconds(), $0.length);
+                }
+            });
+        },
+        parse: function (dateString, pattern) {
+            var matchs1 = pattern.match(SIGN_REGEXP);
+            var matchs2 = dateString.match(/(\d)+/g);
+            if (matchs1.length == matchs2.length) {
+                var _date = new Date(1970, 0, 1);
+                for (var i = 0; i < matchs1.length; i++) {
+                    var _int = parseInt(matchs2[i]);
+                    var sign = matchs1[i];
+                    switch (sign.charAt(0)) {
+                        case 'y': _date.setFullYear(_int); break;
+                        case 'M': _date.setMonth(_int - 1); break;
+                        case 'd': _date.setDate(_int); break;
+                        case 'h': _date.setHours(_int); break;
+                        case 'm': _date.setMinutes(_int); break;
+                        case 's': _date.setSeconds(_int); break;
+                    }
+                }
+                return _date;
+            }
+            return null;
+        }
+
+    }
+
+};

src/components/app/cloudDaily/birthday-membership-data.vue

+<!--
+<birthday-membership-data
+:fieldName="fieldName">
+</birthday-membership-data>
+ -->
+<template>
+  <div class="birth-number-contain">
+    <h3 class="build-title title-flag">
+      <span>{{ fieldName }}</span>
+    </h3>
+    <div class="data-list">
+      <div class="data-item">
+        <div class="data-progress">
+          <span class="data-item-title">订单数占比</span>
+          <div class="data-bottom">
+            <div class="data-num">80.00%</div>
+            <div class="data-percent"><span class="data-percent-first">8000</span>/<span class="data-percent-second">10000</span></div>
+            <div class="data-top"></div>
+          </div>
+        </div>
+        <div class="data-title">
+          <p class="gic-pull-right">环比<span class="data-ratio">50.55%</span></p>
+        </div>
+      </div>
+      <div class="data-item">
+        <div class="data-progress">
+          <span class="data-item-title">消费人数占比</span>
+          <div class="data-bottom">
+            <div class="data-num">80.00%</div>
+            <div class="data-percent"><span class="data-percent-first">8000</span>/<span class="data-percent-second">10000</span></div>
+            <div class="data-top"></div>
+          </div>
+        </div>
+        <div class="data-title">
+          <p class="gic-pull-right">环比<span class="data-ratio">50.55%</span></p>
+        </div>
+      </div>
+      <div class="data-item">
+        <div class="data-progress">
+          <span class="data-item-title">消费金额占比</span>
+          <div class="data-bottom">
+            <div class="data-num">80.00%</div>
+            <div class="data-percent"><span class="data-percent-first">8000</span>/<span class="data-percent-second">10000</span></div>
+            <div class="data-top"></div>
+          </div>
+        </div>
+        <div class="data-title">
+          <p class="gic-pull-right">环比<span class="data-ratio">50.55%</span></p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'birthday-membership-data',
+  props: {
+    fieldName: {
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  },
+  data() {
+    return {};
+  }
+};
+</script>
+<style type="text/less" lang="less" scoped>
+.birth-number-contain {
+  background: #fff;
+  padding: 0 12px;
+  position: relative;
+
+  .build-title {
+    height: 56px;
+    line-height: 56px;
+    // padding-left: 10px;
+    text-align: left;
+    background: #fff;
+    span {
+      display: inline-block;
+      height: 14px;
+      line-height: 14px;
+      border-left: 2px solid #2b3953;
+      padding-left: 12px;
+      font-size: 17px;
+      font-weight: 600;
+    }
+  }
+
+  .data-item {
+    margin-top: 10px;
+
+    .data-item-title {
+      width: 90px;
+      display: inline-block;
+    }
+
+    .data-bottom {
+      width: calc(100% - 90px);
+      height: 10px;
+      background: #f3f3f9;
+      display: inline-block;
+      position: relative;
+      margin-top: 20px;
+      border-radius: 2px;
+    }
+
+    .data-num {
+      position: absolute;
+      color: #508cee;
+      top: -21px;
+      left: 0;
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    .data-percent {
+      position: absolute;
+      top: -20px;
+      right: 0;
+    }
+
+    .data-top {
+      background: #508cee;
+      height: 10px;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 80%;
+      border-radius: 2px;
+    }
+
+    .data-ratio {
+      font-size: 14px;
+      font-weight: 600;
+      margin-left: 5px;
+    }
+
+    .data-percent-first {
+      margin-right: 5px;
+    }
+
+    .data-percent-second {
+      margin-left: 5px;
+    }
+
+    .data-title {
+      height: 30px;
+    }
+
+    .gic-pull-right {
+      float: right;
+    }
+  }
+}
+</style>

src/components/app/cloudDaily/error-mointor.vue

+<!--
+<error-mointor
+:fieldName="fieldName">
+</error-mointor>
+ -->
+<template>
+  <div class="anomal-monitor-contain">
+    <h3 class="build-title title-flag">
+      <span>{{ fieldName }}</span>
+    </h3>
+    <div class="progress-contain">
+      <div class="progress-center">
+        <div id="container_progress1" class="container-progress" style="position: relative;">
+          <svg viewBox="0 0 100 100" style="display: block; width: 100%;">
+            <path d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92" stroke="#eee" stroke-width="8" fill-opacity="0"></path>
+            <path d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92" stroke="#1890ff" stroke-width="8" fill-opacity="0" style="stroke-dasharray: 289.067, 289.067; stroke-dashoffset: 72.2668; transition: stroke-dashoffset 1.5s ease-in;"></path>
+          </svg>
+          <div class="progressbar-text progressbar-text-left" style="position: absolute; left: 50%; top: 50%; padding: 0px; margin: 0px; transform: translate(-50%, -50%); color: #1890ff; font-size: 16px; font-weight: 600;">75.00%</div>
+        </div>
+        <p class="progress-text">无导购率</p>
+      </div>
+      <div class="progress-center">
+        <div id="container_progress2" class="container-progress" style="position: relative;">
+          <svg viewBox="0 0 100 100" style="display: block; width: 100%;">
+            <path d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92" stroke="#eee" stroke-width="8" fill-opacity="0"></path>
+            <path d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92" stroke="#1890ff" stroke-width="8" fill-opacity="0" style="stroke-dasharray: 289.067, 289.067; stroke-dashoffset: 216.8; transition: stroke-dashoffset 1.5s ease-in;"></path>
+          </svg>
+          <div class="progressbar-text progressbar-text-mid" style="position: absolute; left: 50%; top: 50%; padding: 0px; margin: 0px; transform: translate(-50%, -50%); color: #1890ff; font-size: 16px; font-weight: 600;">25.00%</div>
+        </div>
+        <p class="progress-text">退单率</p>
+      </div>
+      <div class="progress-center">
+        <div id="container_progress3" class="container-progress" style="position: relative;">
+          <svg viewBox="0 0 100 100" style="display: block; width: 100%;">
+            <path d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92" stroke="#eee" stroke-width="8" fill-opacity="0"></path>
+            <path d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92" stroke="#1890ff" stroke-width="8" fill-opacity="0" style="stroke-dasharray: 289.067, 289.067; stroke-dashoffset: 14.4534; transition: stroke-dashoffset 1.5s ease-in;"></path>
+          </svg>
+          <div class="progressbar-text progressbar-text-right" style="position: absolute; left: 50%; top: 50%; padding: 0px; margin: 0px; transform: translate(-50%, -50%); color: #1890ff; font-size: 16px; font-weight: 600;">95.00%</div>
+        </div>
+        <p class="progress-text">凭空退单率</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'error-mointor',
+  props: {
+    fieldName: {
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  },
+  data() {
+    return {};
+  }
+};
+</script>
+<style type="text/less" lang="less" scoped>
+.build-title {
+  height: 56px;
+  line-height: 56px;
+  padding-left: 10px;
+  text-align: left;
+  background: #fff;
+  span {
+    display: inline-block;
+    height: 14px;
+    line-height: 14px;
+    border-left: 2px solid #2b3953;
+    padding-left: 12px;
+    font-size: 17px;
+    font-weight: 600;
+  }
+}
+.progress-contain {
+  display: flex;
+  background: #fff;
+  padding: 15px 0 30px 0;
+
+  .progress-center {
+    display: flex;
+    align-items: center;
+    flex-flow: column;
+    flex: 1;
+    .progress-text {
+      margin-top: 10px;
+      font-size: 12px;
+    }
+    .container-progress {
+      position: relative;
+      width: 80px;
+      height: 80px;
+      svg {
+        display: block;
+        width: 100%;
+      }
+      svg:not(:root) {
+        overflow: hidden;
+      }
+
+      .progressbar-text-left {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        padding: 0px;
+        margin: 0px;
+        transform: translate(-50%, -50%);
+        color: #1890ff;
+        font-size: 16px;
+        font-weight: 600;
+      }
+    }
+  }
+}
+</style>

src/components/app/cloudDaily/membership-data.vue

+<!--
+<membership-data
+:fieldName="fieldName">
+</membership-data>
+ -->
+<template>
+  <div class="data-number-contain">
+    <h3 class="build-title title-flag">
+      <span>{{ fieldName }}</span>
+    </h3>
+    <table class="data-number-table">
+      <thead>
+        <tr>
+          <th class="w_22"></th>
+          <th class="w_26">日</th>
+          <th class="w_26">月</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td colspan="1">会员总数</td>
+          <td colspan="2">9,000,000</td>
+        </tr>
+        <tr>
+          <td>新增会员</td>
+          <td>473,960</td>
+          <td>473,960</td>
+        </tr>
+        <tr>
+          <td>同比</td>
+          <td>100%</td>
+          <td>100%</td>
+        </tr>
+        <tr>
+          <td>环比</td>
+          <td>100%</td>
+          <td>100%</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script>
+export default {
+  name: 'membership-data',
+  props: {
+    fieldName: {
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  },
+  data() {
+    return {};
+  }
+};
+</script>
+<style type="text/less" lang="less" scoped>
+.data-number-contain {
+  position: relative;
+
+  .build-title {
+    height: 56px;
+    line-height: 56px;
+    padding-left: 10px;
+    text-align: left;
+    background: #fff;
+
+    span {
+      display: inline-block;
+      height: 14px;
+      line-height: 14px;
+      border-left: 2px solid #2b3953;
+      padding-left: 12px;
+      font-size: 17px;
+      font-weight: 600;
+    }
+  }
+
+  .data-number-table {
+    width: 100%;
+    text-align: center;
+
+    thead {
+      font-weight: 700;
+      tr {
+        height: 50px;
+        line-height: 50px;
+        background: #f3f4f8;
+        font-size: 12px;
+        text-align: left;
+      }
+      th {
+        text-align: center;
+      }
+      .w_22 {
+        width: 22%;
+      }
+      .w_26 {
+        width: 26%;
+      }
+    }
+
+    tbody {
+      tr {
+        height: 50px;
+        line-height: 50px;
+        font-size: 12px;
+        td:first-child {
+          font-size: 13px;
+          font-weight: 600;
+        }
+      }
+      tr:first-child {
+        font-weight: 600;
+        color: #7ca5f1;
+      }
+      tr:nth-child(odd) {
+        background: #fff;
+      }
+    }
+  }
+}
+</style>

src/components/app/cloudDaily/old-customer-data.vue

+<!--
+<old-customer-data
+:fieldName="fieldName">
+</old-customer-data>
+ -->
+<template>
+  <div class="birth-number-contain">
+    <h3 class="build-title title-flag">
+      <span>{{ fieldName }}</span>
+    </h3>
+    <div class="data-list">
+      <div class="data-item">
+        <div class="data-progress">
+          <span class="data-item-title">订单数占比</span>
+          <div class="data-bottom">
+            <div class="data-num">80.00%</div>
+            <div class="data-percent"><span class="data-percent-first">8000</span>/<span class="data-percent-second">10000</span></div>
+            <div class="data-top"></div>
+          </div>
+        </div>
+        <div class="data-title">
+          <p class="gic-pull-right">环比<span class="data-ratio">50.55%</span></p>
+        </div>
+      </div>
+      <div class="data-item">
+        <div class="data-progress">
+          <span class="data-item-title">消费人数占比</span>
+          <div class="data-bottom">
+            <div class="data-num">80.00%</div>
+            <div class="data-percent"><span class="data-percent-first">8000</span>/<span class="data-percent-second">10000</span></div>
+            <div class="data-top"></div>
+          </div>
+        </div>
+        <div class="data-title">
+          <p class="gic-pull-right">环比<span class="data-ratio">50.55%</span></p>
+        </div>
+      </div>
+      <div class="data-item">
+        <div class="data-progress">
+          <span class="data-item-title">消费金额占比</span>
+          <div class="data-bottom">
+            <div class="data-num">80.00%</div>
+            <div class="data-percent"><span class="data-percent-first">8000</span>/<span class="data-percent-second">10000</span></div>
+            <div class="data-top"></div>
+          </div>
+        </div>
+        <div class="data-title">
+          <p class="gic-pull-right">环比<span class="data-ratio">50.55%</span></p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'old-customer-data',
+  props: {
+    fieldName: {
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  },
+  data() {
+    return {};
+  }
+};
+</script>
+<style type="text/less" lang="less" scoped>
+.birth-number-contain {
+  background: #fff;
+  padding: 0 12px;
+  position: relative;
+
+  .build-title {
+    height: 56px;
+    line-height: 56px;
+    // padding-left: 10px;
+    text-align: left;
+    background: #fff;
+    span {
+      display: inline-block;
+      height: 14px;
+      line-height: 14px;
+      border-left: 2px solid #2b3953;
+      padding-left: 14px;
+      font-size: 17px;
+      font-weight: 600;
+    }
+  }
+
+  .data-item {
+    margin-top: 10px;
+
+    .data-item-title {
+      width: 90px;
+      display: inline-block;
+    }
+
+    .data-bottom {
+      width: calc(100% - 90px);
+      height: 10px;
+      background: #f3f3f9;
+      display: inline-block;
+      position: relative;
+      margin-top: 20px;
+      border-radius: 2px;
+    }
+
+    .data-num {
+      position: absolute;
+      color: #508cee;
+      top: -21px;
+      left: 0;
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    .data-percent {
+      position: absolute;
+      top: -20px;
+      right: 0;
+    }
+
+    .data-top {
+      background: #508cee;
+      height: 10px;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 80%;
+      border-radius: 2px;
+    }
+
+    .data-ratio {
+      font-size: 14px;
+      font-weight: 600;
+      margin-left: 5px;
+    }
+
+    .data-percent-first {
+      margin-right: 5px;
+    }
+
+    .data-percent-second {
+      margin-left: 5px;
+    }
+
+    .data-title {
+      height: 30px;
+    }
+
+    .gic-pull-right {
+      float: right;
+    }
+  }
+}
+</style>

src/components/app/cloudDaily/store-performance.vue

+<!--
+<store-performance
+:fieldName="fieldName">
+</store-performance>
+ -->
+<template>
+  <div class="data-number-contain">
+    <h3 class="build-title title-flag">
+      <span>{{ fieldName }}</span>
+    </h3>
+    <table class="data-number-table">
+      <thead>
+        <tr>
+          <th class="w_22"></th>
+          <th class="w_26">日</th>
+          <th class="w_26">月</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>指标</td>
+          <td>473,960</td>
+          <td>473,960</td>
+        </tr>
+        <tr>
+          <td>累计销售额</td>
+          <td>473,960</td>
+          <td>999,476,960</td>
+        </tr>
+        <tr>
+          <td>达成率</td>
+          <td>100%</td>
+          <td>100%</td>
+        </tr>
+        <tr>
+          <td>同比</td>
+          <td>100%</td>
+          <td>100%</td>
+        </tr>
+        <tr>
+          <td>环比</td>
+          <td>100%</td>
+          <td>100%</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+<script>
+export default {
+  name: 'store-performance',
+  props: {
+    fieldName: {
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  },
+  data() {
+    return {};
+  }
+};
+</script>
+<style type="text/less" lang="less" scoped>
+.data-number-contain {
+  position: relative;
+
+  .build-title {
+    height: 56px;
+    line-height: 56px;
+    padding-left: 10px;
+    text-align: left;
+    background: #fff;
+
+    span {
+      border-left: 2px solid #2b3953;
+      padding-left: 12px;
+      font-size: 17px;
+      font-weight: 600;
+      display: inline-block;
+      height: 14px;
+      line-height: 14px;
+    }
+  }
+
+  .data-number-table {
+    width: 100%;
+    text-align: center;
+
+    thead {
+      font-weight: 700;
+      tr {
+        height: 50px;
+        line-height: 50px;
+        background: #f3f4f8;
+        font-size: 12px;
+        text-align: left;
+      }
+      th {
+        text-align: center;
+      }
+      .w_22 {
+        width: 22%;
+      }
+      .w_26 {
+        width: 26%;
+      }
+    }
+
+    tbody {
+      tr {
+        height: 50px;
+        line-height: 50px;
+        font-size: 12px;
+        td:first-child {
+          font-size: 13px;
+          font-weight: 600;
+        }
+      }
+      tr:first-child {
+        font-weight: 600;
+        color: #7ca5f1;
+      }
+      tr:nth-child(odd) {
+        background: #fff;
+      }
+    }
+  }
+}
+</style>

src/components/app/cloudDaily/time-progress.vue

+<!--
+<time-progress
+:fieldName="fieldName">
+</time-progress>
+ -->
+<template>
+  <div class="time-progress-contain">
+    <div>
+      <p class="build-title title-flag">
+        <span>{{ fieldName }}</span>
+      </p>
+    </div>
+    <div class="time-progress-item">
+      <div class="time-progress-title">
+        <p class="gic-pull-left">50.00%</p>
+        <p class="gic-pull-right"><span>15</span>/<span>30</span></p>
+      </div>
+      <div class="time-progress-bottom">
+        <div class="time-progress-top"></div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'time-progress',
+  props: {
+    fieldName: {
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  },
+  data() {
+    return {};
+  }
+};
+</script>
+<style type="text/less" lang="less" scoped>
+.gic-pull-left {
+  float: left;
+}
+.gic-pull-right {
+  float: right;
+}
+.time-progress-contain {
+  background: #fff;
+  position: relative;
+  .time-progress-item {
+    padding: 0 15px 30px 15px;
+    .time-progress-title {
+      height: 30px;
+    }
+    .time-progress-bottom {
+      position: relative;
+      width: 100%;
+      height: 10px;
+      background: #f3f3f9;
+      border-radius: 2px;
+    }
+    .time-progress-top {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 50%;
+      height: 10px;
+      background: #508cee;
+      border-radius: 2px;
+    }
+  }
+}
+
+.build-title {
+  padding-left: 10px;
+  height: 56px;
+  line-height: 56px;
+  text-align: left;
+  background: #fff;
+  span {
+    display: inline-block;
+    height: 14px;
+    line-height: 14px;
+    border-left: 2px solid #2b3953;
+    padding-left: 12px;
+    font-size: 17px;
+    font-weight: 600;
+  }
+}
+</style>

src/filters/index.js

+/*
+ * @Descripttion: 当前组件信息
+ * @version: 1.0.0
+ * @Author: 无尘
+ * @Date: 2019-09-11 18:18:32
+ * @LastEditors: 无尘
+ * @LastEditTime: 2020-07-08 14:46:27
+ */
+/* 全局过滤器 */
+
+const dateFormat = function(timeSpan, format) {
+  if (!timeSpan) return;
+  timeSpan = timeSpan.toString().length === 10 ? timeSpan * 1000 : timeSpan;
+  let date = new Date(timeSpan);
+  let o = {
+    'M+': date.getMonth() + 1,
+    'D+': date.getDate(),
+    W: '日一二三四五六'.charAt(date.getDay()),
+    'h+': date.getHours(),
+    'm+': date.getMinutes(),
+    's+': date.getSeconds(),
+    'q+': Math.floor((date.getMonth() + 3) / 3),
+    S: date.getMilliseconds()
+  };
+  if (/(Y+)/.test(format)) {
+    format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
+  }
+  for (let k in o) {
+    if (new RegExp('(' + k + ')').test(format)) {
+      format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));
+    }
+  }
+  return format;
+};
+
+/**
+ * 时间戳---> 年-月-日 时:分:秒
+ * @param timestamp
+ */
+const formatTimeStamp = function(data) {
+  if (!data) {
+    return;
+  }
+  let date = new Date(data);
+  let month = date.getMonth() + 1;
+  let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+  let newMonth = month < 10 ? '0' + month : month;
+  let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+  let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+  let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+  return `${date.getFullYear()}-${newMonth}-${day} ${hours}:${minutes}:${seconds}`;
+};
+
+/**
+ * 时间戳---> 年.月.日 时:分:秒
+ * @param timestamp
+ */
+const formatTimeYmdHms = function(data) {
+  if (!data) {
+    return;
+  }
+  let date = new Date(data);
+  let month = date.getMonth() + 1;
+  let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+  let newMonth = month < 10 ? '0' + month : month;
+  let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+  let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+  let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+  return `${date.getFullYear()}.${newMonth}.${day} ${hours}:${minutes}:${seconds}`;
+};
+
+/**
+ * 时间戳---> 年-月
+ * @param timestamp
+ */
+const timeStampToYm = function(data) {
+  if (!data) {
+    return;
+  }
+  let date = new Date(data);
+  let month = date.getMonth() + 1;
+  let newMonth = month < 10 ? '0' + month : month;
+  return `${date.getFullYear()}-${newMonth}`;
+};
+
+/**
+ * 时间戳---> 年-月-日
+ * @param timestamp
+ */
+const timeStampToYmd = function(data) {
+  if (!data) {
+    return;
+  }
+  let date = new Date(data);
+  let month = date.getMonth() + 1;
+  let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+  let newMonth = month < 10 ? '0' + month : month;
+  return `${date.getFullYear()}-${newMonth}-${day}`;
+};
+
+/**
+ * 时间戳---> 时:分:秒
+ * @param timestamp
+ */
+const timeStampToHms = function(data) {
+  if (!data) {
+    return;
+  }
+  let date = new Date(data);
+  let hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+  let minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+  let seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+  return `${hours}:${minutes}:${seconds}`;
+};
+
+/**
+ * 时间戳---> *天*小时*分
+ * @param timestamp
+ */
+const timeStampSpace = function(date) {
+  if (!date) {
+    return;
+  }
+  let date2 = new Date();
+  let date3 = new Date(Number(date)).getTime() - date2.getTime(); //时间差的毫秒数
+  if (date3 < 0) {
+    return '';
+  }
+  //计算出相差天数
+  let days = Math.floor(date3 / (24 * 3600 * 1000));
+  //计算出小时数
+  let leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
+  let hours = Math.floor(leave1 / (3600 * 1000));
+  //计算相差分钟数
+  let leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
+  let minutes = Math.floor(leave2 / (60 * 1000));
+  //计算相差秒数
+  // let leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
+  // let seconds = Math.round(leave3 / 1000);
+  return `${days}天${hours}小时${minutes}分`;
+};
+
+/**
+ * 手机号格式化
+ * @param {String} phone
+ */
+const formatPhoneNum = function(phone) {
+  if (!phone) {
+    return '';
+  }
+  phone = phone.toString();
+  return phone.substr(0, 3) + '****' + phone.substr(7, 11);
+};
+
+/**
+ * 姓名格式化
+ * @param {String} phone
+ */
+const formatName = function(name) {
+  if (!name) {
+    return '';
+  }
+  name = name.toString();
+  return '**' + name.substr(name.length - 1, name.length);
+};
+
+/**
+ * 毫秒---> *时*分*秒
+ * @param timestamp
+ */
+const formatTime = function(msTime) {
+  if (!msTime) {
+    return '00:00:00';
+  }
+  let time = msTime / 1000;
+
+  let day = Math.floor(time / 60 / 60 / 24);
+
+  let hour = day * 24 + (Math.floor(time / 60 / 60) % 24) < 10 ? '0' + (day * 24 + (Math.floor(time / 60 / 60) % 24)) : day * 24 + (Math.floor(time / 60 / 60) % 24);
+
+  let minute = Math.floor(time / 60) % 60 < 10 ? '0' + (Math.floor(time / 60) % 60) : Math.floor(time / 60) % 60;
+
+  let second = Math.floor(time) % 60 < 10 ? '0' + (Math.floor(time) % 60) : Math.floor(time) % 60;
+
+  return `${hour}:${minute}:${second}`;
+};
+
+export default {
+  dateFormat,
+  formatTimeStamp,
+  timeStampToYm,
+  timeStampToYmd,
+  timeStampToHms,
+  formatTimeYmdHms,
+  formatPhoneNum,
+  formatName,
+  timeStampSpace,
+  formatTime
+};

src/main.js

+/*
+ * @Descripttion: 当前组件信息
+ * @version: 1.0.0
+ * @Author: 无尘
+ * @Date: 2020-07-23 17:18:24
+ * @LastEditors: 无尘
+ * @LastEditTime: 2020-07-24 14:58:09
+ */
+import 'babel-polyfill';
+import 'amfe-flexible';
+import Vue from 'vue';
+import App from './App';
+import store from './store/index'
+import {  router } from './router';
+import './assets/font/iconfont.css';
+import './assets/css/common.css';
+import filters from '@/filters/index.js';
+import Es6Promise from 'es6-promise';
+/* import Bridge from './api/jsBridge.js'
+Vue.prototype.$bridge = Bridge */
+
+require('es6-promise').polyfill();
+Es6Promise.polyfill();
+/* eslint-disable */
+import VConsole from 'vconsole';
+let vConsole = new VConsole();
+
+// 全局注册过滤器
+Object.keys(filters).forEach(key => {
+  Vue.filter(key, filters[key]);
+});
+
+new Vue({
+  router,
+  store,
+  el: '#app',
+  render: h => h(App)
+});

src/router.js

+/*
+ * @Descripttion: 当前组件信息
+ * @version: 1.0.0
+ * @Author: 无尘
+ * @Date: 2020-07-23 17:18:24
+ * @LastEditors: 无尘
+ * @LastEditTime: 2020-07-29 16:29:03
+ */
+import Vue from 'vue';
+import Router from 'vue-router';
+
+Vue.use(Router);
+
+const routes = [{
+    path: '*',
+    redirect: '/index'
+  },
+  {
+    name: 'index',
+    path: '/index',
+    component: () =>
+      import ('./views/index'),
+    meta: {
+      title: '首页'
+    }
+  },
+  {
+    name: 'storeBind',
+    path: '/storeBind',
+    component: () =>
+      import('./views/storeBind/index.vue'),
+    meta: {
+      title: '门店绑定'
+    }
+  },
+  {
+    name: 'child-level',
+    path: '/childLevel',
+    component: () =>
+      import('./views/storeBind/child-level.vue'),
+    meta: {
+      title: '门店绑定'
+    }
+  }
+];
+
+// add route path
+routes.forEach(route => {
+  route.path = route.path || '/' + (route.name || '');
+});
+
+const router = new Router({
+  mode: 'history',
+  base: '/haoban-mobile-4',
+  routes
+});
+
+router.beforeEach((to, from, next) => {
+  const title = to.meta && to.meta.title;
+  if (title) {
+    document.title = title;
+  }
+  next();
+});
+
+export {
+  router
+};

src/store/index.js

+import Vue from 'vue';
+import Vuex from 'vuex';
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+  state: {
+    bodyH: document.documentElement.clientHeight,
+    reqLoading: false,
+    memberId: 'ff80808163a6ab7a0163a6abd0710000'
+  },
+  mutations: {
+    setReqLoading(state, data) {
+      state.reqLoading = data;
+    },
+    setMemberId(state, data) {
+      state.memberId = data;
+    }
+  },
+  actions: {
+    SetLoading({ commit }, flag) {
+      commit('setReqLoading', flag);
+    },
+    modifyMemberId({ commit }, val) {
+      commit('setMemberId', val);
+    }
+  }
+})

src/views/errorPage/403.vue

+<template>
+  <div style="background:#f0f2f5;margin-top: -20px;height:100%;">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" :src="img_403" alt="403">
+      </div>
+      <div class="bullshit">
+        <!-- <div class="bullshit__oops">403</div> -->
+        <div class="bullshit__headline">{{ message }}</div>
+        <a href="#/companyGroup" class="bullshit__return-home">返回首页</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import img_403 from '@/assets/403_images/error_403.svg'
+
+export default {
+  name: 'page403',
+  data() {
+    return {
+      img_403
+    }
+  },
+  computed: {
+    message() {
+      return '抱歉，你无权访问该页面'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  margin: 20px auto 60px;
+  padding: 0 100px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    padding: 150px 152px 150px 0;
+    text-align: right;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+      max-width: 430px;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 150px 0;
+    overflow: hidden;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
+    height: 360px;
+    &__oops {
+      color: #434e59;
+      font-size: 72px;
+      font-weight: 600;
+      line-height: 72px;
+      margin-bottom: 24px;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;*/
+    }
+    &__headline {
+      color: rgba(0,0,0,.45);
+      font-size: 20px;
+      line-height: 28px;
+      margin-bottom: 16px;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;*/
+    }
+
+    &__return-home {
+      display: inline-block;
+      height: 32px;
+      line-height: 32px;
+      font-weight: 400;
+      text-align: center;
+      -ms-touch-action: manipulation;
+      touch-action: manipulation;
+      background-image: none;
+      white-space: nowrap;
+      padding: 0 15px;
+      font-size: 14px;
+      border-radius: 4px;
+      border: 1px solid #1890ff;
+      color: #fff;
+      background-color: #1890ff;
+      text-shadow: 0 -1px 0 rgba(0,0,0,.12);
+      -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.035);
+      box-shadow: 0 2px 0 rgba(0,0,0,.035);
+      cursor: pointer;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;*/
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

src/views/errorPage/404.vue

+<template>
+  <div style="background:#f0f2f5;margin-top: -20px;height:100%;">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" :src="img_404" alt="404">
+      </div>
+      <div class="bullshit">
+        <!-- <div class="bullshit__oops">404</div> -->
+        <div class="bullshit__headline">{{ message }}</div>
+        <a href="#/companyGroup" class="bullshit__return-home">返回首页</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import img_404 from '@/assets/404_images/error_404.svg'
+
+export default {
+  name: 'page404',
+  data() {
+    return {
+      img_404
+    }
+  },
+  computed: {
+    message() {
+      return '抱歉，你访问的页面不存在'
+    }
+  },
+  mounted(){
+    console.log(this.$route.path)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  margin: 20px auto 60px;
+  padding: 0 100px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    padding: 150px 152px 150px 0;
+    text-align: right;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+      max-width: 430px;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 150px 0;
+    overflow: hidden;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
+    height: 360px;
+    &__oops {
+      color: #434e59;
+      font-size: 72px;
+      font-weight: 600;
+      line-height: 72px;
+      margin-bottom: 24px;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;*/
+    }
+    &__headline {
+      color: rgba(0,0,0,.45);
+      font-size: 20px;
+      line-height: 28px;
+      margin-bottom: 16px;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;*/
+    }
+
+    &__return-home {
+      display: inline-block;
+      height: 32px;
+      line-height: 32px;
+      font-weight: 400;
+      text-align: center;
+      -ms-touch-action: manipulation;
+      touch-action: manipulation;
+      background-image: none;
+      white-space: nowrap;
+      padding: 0 15px;
+      font-size: 14px;
+      border-radius: 4px;
+      border: 1px solid #1890ff;
+      color: #fff;
+      background-color: #1890ff;
+      text-shadow: 0 -1px 0 rgba(0,0,0,.12);
+      -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.035);
+      box-shadow: 0 2px 0 rgba(0,0,0,.035);
+      cursor: pointer;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;*/
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

src/views/errorPage/500.vue

+<template>
+  <div style="background:#f0f2f5;margin-top: -20px;height:100%;">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" :src="img_500" alt="500">
+      </div>
+      <div class="bullshit">
+        <!-- <div class="bullshit__oops">500</div> -->
+        <div class="bullshit__headline">{{ message }}</div>
+        <a href="#/companyGroup" class="bullshit__return-home">返回首页</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import img_500 from '@/assets/500_images/error_500.svg'
+
+export default {
+  name: 'page500',
+  data() {
+    return {
+      img_500
+    }
+  },
+  computed: {
+    message() {
+      return '抱歉，服务器出错了'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  margin: 20px auto 60px;
+  padding: 0 100px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    padding: 150px 152px 150px 0;
+    text-align: right;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+      max-width: 430px;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 150px 0;
+    overflow: hidden;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
+    height: 360px;
+    &__oops {
+      color: #434e59;
+      font-size: 72px;
+      font-weight: 600;
+      line-height: 72px;
+      margin-bottom: 24px;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;*/
+    }
+    &__headline {
+      color: rgba(0,0,0,.45);
+      font-size: 20px;
+      line-height: 28px;
+      margin-bottom: 16px;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;*/
+    }
+
+    &__return-home {
+      display: inline-block;
+      height: 32px;
+      line-height: 32px;
+      font-weight: 400;
+      text-align: center;
+      -ms-touch-action: manipulation;
+      touch-action: manipulation;
+      background-image: none;
+      white-space: nowrap;
+      padding: 0 15px;
+      font-size: 14px;
+      border-radius: 4px;
+      border: 1px solid #1890ff;
+      color: #fff;
+      background-color: #1890ff;
+      text-shadow: 0 -1px 0 rgba(0,0,0,.12);
+      -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.035);
+      box-shadow: 0 2px 0 rgba(0,0,0,.035);
+      cursor: pointer;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;*/
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

src/views/errorPage/index.vue

+<template>
+  <div style="background:#f0f2f5;margin-top: -20px;height:100%;">
+    <div class="wscn-http404">
+      <div class="pic-404">
+        <img class="pic-404__parent" :src="imgSrc" alt="404">
+      </div>
+      <div class="bullshit">
+        <!-- <div class="bullshit__oops">404</div> -->
+        <div class="bullshit__headline">{{ message }}</div>
+        <a href="#/index" class="bullshit__return-home">返回首页</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import img_403 from '@/assets/403_images/error_403.svg';
+import img_404 from '@/assets/404_images/error_404.svg';
+import img_500 from '@/assets/500_images/error_500.svg'
+
+export default {
+  name: 'errpage',
+  data() {
+    return {
+      imgSrc: '',
+      message: '',
+      srcList: {
+        403: img_403,
+        404: img_404,
+        500: img_500
+      },
+      msgList: {
+        403: '抱歉，你无权访问该页面',
+        404: '抱歉，你访问的页面不存在',
+        500: '抱歉，服务器出错了'
+      }
+    }
+  },
+  mounted(){
+    var that = this;
+    var path = that.$route.path.split('/')[1];
+    that.imgSrc = that.srcList[path];
+    that.message = that.msgList[path];
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wscn-http404 {
+  position: relative;
+  width: 1200px;
+  margin: 20px auto 60px;
+  padding: 0 100px;
+  overflow: hidden;
+  .pic-404 {
+    position: relative;
+    float: left;
+    width: 600px;
+    padding: 150px 152px 150px 0;
+    text-align: right;
+    overflow: hidden;
+    &__parent {
+      width: 100%;
+      max-width: 430px;
+    }
+    &__child {
+      position: absolute;
+      &.left {
+        width: 80px;
+        top: 17px;
+        left: 220px;
+        opacity: 0;
+        animation-name: cloudLeft;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      &.mid {
+        width: 46px;
+        top: 10px;
+        left: 420px;
+        opacity: 0;
+        animation-name: cloudMid;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1.2s;
+      }
+      &.right {
+        width: 62px;
+        top: 100px;
+        left: 500px;
+        opacity: 0;
+        animation-name: cloudRight;
+        animation-duration: 2s;
+        animation-timing-function: linear;
+        animation-fill-mode: forwards;
+        animation-delay: 1s;
+      }
+      @keyframes cloudLeft {
+        0% {
+          top: 17px;
+          left: 220px;
+          opacity: 0;
+        }
+        20% {
+          top: 33px;
+          left: 188px;
+          opacity: 1;
+        }
+        80% {
+          top: 81px;
+          left: 92px;
+          opacity: 1;
+        }
+        100% {
+          top: 97px;
+          left: 60px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudMid {
+        0% {
+          top: 10px;
+          left: 420px;
+          opacity: 0;
+        }
+        20% {
+          top: 40px;
+          left: 360px;
+          opacity: 1;
+        }
+        70% {
+          top: 130px;
+          left: 180px;
+          opacity: 1;
+        }
+        100% {
+          top: 160px;
+          left: 120px;
+          opacity: 0;
+        }
+      }
+      @keyframes cloudRight {
+        0% {
+          top: 100px;
+          left: 500px;
+          opacity: 0;
+        }
+        20% {
+          top: 120px;
+          left: 460px;
+          opacity: 1;
+        }
+        80% {
+          top: 180px;
+          left: 340px;
+          opacity: 1;
+        }
+        100% {
+          top: 200px;
+          left: 300px;
+          opacity: 0;
+        }
+      }
+    }
+  }
+  .bullshit {
+    position: relative;
+    float: left;
+    width: 300px;
+    padding: 150px 0;
+    overflow: hidden;
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: center;
+    height: 360px;
+    &__oops {
+      color: #434e59;
+      font-size: 72px;
+      font-weight: 600;
+      line-height: 72px;
+      margin-bottom: 24px;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-fill-mode: forwards;*/
+    }
+    &__headline {
+      color: rgba(0,0,0,.45);
+      font-size: 20px;
+      line-height: 28px;
+      margin-bottom: 16px;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.1s;
+      animation-fill-mode: forwards;*/
+    }
+
+    &__return-home {
+      display: inline-block;
+      height: 32px;
+      line-height: 32px;
+      font-weight: 400;
+      text-align: center;
+      -ms-touch-action: manipulation;
+      touch-action: manipulation;
+      background-image: none;
+      white-space: nowrap;
+      padding: 0 15px;
+      font-size: 14px;
+      border-radius: 4px;
+      border: 1px solid #1890ff;
+      color: #fff;
+      background-color: #1890ff;
+      text-shadow: 0 -1px 0 rgba(0,0,0,.12);
+      -webkit-box-shadow: 0 2px 0 rgba(0,0,0,.035);
+      box-shadow: 0 2px 0 rgba(0,0,0,.035);
+      cursor: pointer;
+      /*animation-name: slideUp;
+      animation-duration: 0.5s;
+      animation-delay: 0.3s;
+      animation-fill-mode: forwards;*/
+      &:hover {
+        color: #fff;
+        background-color: #40a9ff;
+        border-color: #40a9ff;
+      }
+      &:active {
+        background: #096dd9;
+        border-color: #096dd9;
+        color: #fff;
+      }
+    }
+    @keyframes slideUp {
+      0% {
+        transform: translateY(60px);
+        opacity: 0;
+      }
+      100% {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+}
+</style>

src/views/help/index.vue

+<template>
+  <div class="help-contain border-box">
+    <div class="help-body">
+      <div class="help-body-top border-box">
+        <div class="common-title">
+          <div class="common-title-wrap">
+            <span class="common-title-num">1</span><span>手机开启桌面权限</span>
+          </div>
+        </div>
+        <div class="help-body-img">
+          <img src="../../assets/images/help.gif" alt=""/>
+        </div>
+        <div class="help-device-title">主要机型及打开方式</div>
+        <div class="help-device">
+          <ul class="help-device-ul">
+            <li :class="['help-device-li', activeDevice == name ? 'active-li': '']" v-for="(value, name, index) in deviceList" :key="index" @click="changeDevice(name)">
+              {{value.name}}
+              <div v-if="activeDevice == name" class="active-wrap border-box"><div class="active-wrap-check"></div></div>
+            </li>
+          </ul>
+        </div>
+        <div class="help-device-content">
+          <div class="help-device-one">方式一</div>
+          <div class="help-device-one_txt">
+            {{deviceList[activeDevice].modeOne}}
+          </div>
+          <div class="help-device-one help-device-two">方式二</div>
+          <div class="help-device-one_txt">
+            {{deviceList[activeDevice].modeTwo}}
+          </div>
+        </div>
+      </div>
+      <div class="help-body-bottom border-box">
+        <div class="common-title">
+          <div class="common-title-wrap">
+            <span class="common-title-num">2</span><span>将二维码添加到桌面</span>
+          </div>
+        </div>
+        <div class="help-qrcode  border-box">
+          <img src="../../assets/images/custom_desktop.png" alt=""/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      activeDevice: 'huawei',
+      deviceList: {
+        "huawei": {
+          "name": "华为",
+          "modeOne": "设置——应用和通知——权限管理——权限——创建桌面快捷方式——好办",
+          "modeTwo": "手机管家——权限管理——权限——创建桌面快捷方式——好办"
+        },
+        "xiaomi": {
+          "name": "小米",
+          "modeOne": "设置——授权管理——应用权限管理——权限管理——创建桌面快捷方式——好办",
+          "modeTwo": "安全中心——应用管理——权限——应用权限管理——权限管理——桌面快捷方式——好办"
+        },
+        "oppo": {
+          "name": "OPPO",
+          "modeOne": "设置——安全——应用权限——权限——创建桌面快捷方式——好办",
+          "modeTwo": "手机管家——权限隐私——应用权限管理——创建——创建桌面快捷方式——好办"
+        },
+        "vivo": {
+          "name": "VIVO",
+          "modeOne": "设置——更多设置——权限管理——权限——桌面快捷方式——好办",
+          "modeTwo": "I管家——权限管理——创建桌面快捷方式——好办"
+        },
+      }
+    }
+  },
+  methods: {
+    changeDevice(name) {
+      this.activeDevice = name;
+    }
+  },
+};
+</script>
+
+<style type="text/less" lang="less" scoped>
+.help-contain {
+  width: 100%;
+  height: 100%;
+  padding: 20px 15px;
+  background: #F0F2F5;
+  .help-body {
+    width: 100%;
+    .common-title {
+      width: 100%;
+      padding-bottom: 15px;
+      border-bottom: 1px solid #D6DADE ;
+      .common-title-wrap {
+        width: 100%;
+        height:28px;
+        line-height: 28px;
+        span {
+          display: inline-block;
+          vertical-align: top;
+          font-size: 17px;
+          color: #222;
+          &.common-title-num {
+            width: 28px;
+            height: 28px;
+            margin-right: 10px;
+            background:rgba(68,140,250,0.2);
+            border-radius: 50%;
+            border-radius: 14px;
+            font-size: 20px;
+            text-align: center;
+            color: #448CFA;
+          }
+        }
+      }
+    }
+    .help-body-top {
+      width: 100%;
+      // height: 540px;
+      padding: 20px 15px;
+      border-radius: 5px;
+      background: #fff;
+      box-shadow:0px 4px 10px 0px rgba(136,148,156,0.2);
+      .help-body-img {
+        width: 100%;
+        padding: 20px 0 30px 0;
+        text-align: center;
+        img {
+          width: 160px;
+        }
+      }
+      .help-device-title {
+        height: 40px;
+        line-height: 40px;
+        font-size: 14px;
+        font-weight: 400;
+        color:#222;
+      }
+      .help-device {
+        width: 100%;
+        overflow: hidden;
+        .help-device-ul {
+          width: 100%;
+          overflow-x: auto;
+          font-size: 0;
+          li {
+            position: relative;
+            display: inline-block;
+            vertical-align: top;
+            width: 68px;
+            height: 36px;
+            margin-right: 10px;
+            line-height: 36px;
+            background: #F6F7FB;
+            font-size: 14px;
+            color: #222;
+            text-align: center;
+            border-radius: 3px;
+            overflow: hidden;
+            &:active {
+              background: #F6F7FB;
+            }
+            &.active-li {
+              background: rgba(68,140,250,0.15);
+              color: #448CFA;
+            }
+            .active-wrap {
+              position: absolute;
+              width: 30px;
+              height: 20px;
+              bottom: -7px;
+              right: -13px;
+              padding: 2px;
+              -webkit-transform: rotate(-45deg);
+              -moz-transform: rotate(-45deg);
+              -ms-transform: rotate(-45deg);
+              transform: rotate(-45deg);
+              background: #448CFA;
+              z-index: 2;
+              .active-wrap-check {
+                width: 8px;
+                margin: 0 auto;
+                height: 3px;
+                border: 1px solid #fff;
+                border-right-color: #448CFA;
+                border-top-color: #448CFA
+              }
+            }
+          }
+        }
+      }
+      .help-device-content {
+        .help-device-one {
+          margin-top: 10px;
+          font-size: 12px;
+          color: #A5AFB8;
+          font-weight:400;
+          &.help-device-two {
+            margin-top: 12px;
+          }
+        }
+        .help-device-one_txt {
+          width: 100%;
+          margin-top: 10px;
+          text-align: left;
+          // white-space: pre-wrap;
+          word-break: break-all;
+          font-size: 14px;
+          font-weight: 400;
+          color: rgba(90,90,90,1);
+        }
+      }
+    }
+    .help-body-bottom {
+      width: 100%;
+      // height: 540px;
+      margin-top: 28px;
+      padding: 20px 15px;
+      border-radius: 5px;
+      background: #fff;
+      box-shadow:0px 4px 10px 0px rgba(136,148,156,0.2);
+      .help-qrcode {
+        width: 100%;
+        padding: 10px 7.5px;
+        img {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/index/index.vue

+<!--
+ * @Descripttion: 当前组件信息
+ * @version: 1.0.0
+ * @Author: 无尘
+ * @Date: 2020-07-23 17:18:25
+ * @LastEditors: 无尘
+ * @LastEditTime: 2020-07-29 11:05:52
+-->
+<template>
+  <div class="index-contain">
+    <van-cell-group>
+      <van-cell title="申请人" :value="enterpriseBind.referStaffName" />
+      <van-cell title="申请企业" :value="enterpriseBind.wxEnterpriseName"/>
+      <van-cell title="申请事项" :value="enterpriseBind.applyItem"/>
+      <van-cell title="申请理由" :label="enterpriseBind.applyCondition"/>
+      <van-cell title="申请时间" :value="enterpriseBind.createTime"/>
+      <van-cell title="授权商户" :value="enterpriseBind.wxEnterpriseName"/>
+      <van-cell title="门店绑定" is-link to="storeBind" value="内容" />
+      <van-cell title="门店共享" is-link to="storeBind" value="内容" />
+    </van-cell-group>
+    <div class="bind-btn-body">
+      <div v-if="enterpriseBind.statusFlag== 0" class="flex">
+        <van-button size="large" color="#e6685d" round  plain @click="showPopup">拒绝</van-button><van-button size="large" color="#4b69e5" round  @click="toApprove">同意</van-button>
+      </div>
+      <div v-else>
+        <span v-if="enterpriseBind.statusFlag== 1">已同意</span>
+        <span v-if="enterpriseBind.statusFlag== 2">已拒绝</span>
+        <span v-if="enterpriseBind.statusFlag== 3">已失效</span>
+      </div>
+    </div>
+    <van-popup v-model="show" round  position="bottom" :style="{ height: '90%' }" >
+      <div class="refuse-toolbar">
+        <button type="button" class="refuse-cancel" @click="hidePopup">取消</button><button type="button" class="refuse-confirm" @click="toConfirmRefuse">确认</button>
+      </div>
+      <van-field
+        v-model="refuseReason"
+        rows="1"
+        autosize
+        label=""
+        type="textarea"
+        placeholder="请输入拒绝理由"
+      />
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import { Cell, CellGroup, Popup, Button, Field, Dialog } from 'vant';
+import { getBindData, postAudit } from '@/api/index.js';
+export default {
+  components: {
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup,
+    [Popup.name]: Popup,
+    [Button.name]: Button,
+    [Field.name]: Field,
+    [Dialog.name]: Dialog,
+  },
+  data() {
+    return {
+      enterpriseBind: {
+        storeRangeAuditId: '',
+        referStaffName: '',
+        wxEnterpriseName: '',
+        applyItem: '',
+        applyCondition: '申请理由',
+        createTime: '',
+        bindRange: '',
+        shareRange: '',
+        bindStoreMode: '',
+        shareStoreMode: '',
+        statusFlag: ''
+      },
+      show: false,
+      refuseReason: '', // 拒绝原因
+    }
+  },
+  methods: {
+    /**
+     * 显示拒绝弹层
+     */
+    showPopup() {
+      this.show = true;
+    },
+    hidePopup() {
+      this.show = false;
+    },
+    /**
+     * 确定拒绝
+     */
+    async toConfirmRefuse() {
+      const that = this;
+      let param = {
+        storeRangeAuditId: that.enterpriseBind.storeRangeAuditId,
+        statusFlag: 2,
+        refuseReason: that.refuseReason
+      }
+      let resData = await postAudit(param);
+      if (resData.code == '0000') {
+        that.show = false;
+        that.getData();
+      }
+    },
+    /**
+     * 确定同意
+     */
+    toApprove() {
+      const that = this;
+      Dialog.confirm({
+        title: '',
+        message: '确认同意？',
+      })
+        .then(() => {
+          that.postApprove();
+        })
+        .catch(() => {
+          that.show = false;
+        });
+    },
+    async postApprove() {
+      const that = this;
+      let param = {
+        storeRangeAuditId: that.enterpriseBind.storeRangeAuditId,
+        statusFlag: 1,
+      }
+      let resData = await postAudit(param);
+      if (resData.code == '0000') {
+        that.show = false;
+        that.getData();
+      }
+    },
+    /**
+     * 获取数据
+     */
+    async getData() {
+      const that = this;
+      let param = {
+        // memberId: 'ff80808163a6ab7a0163a6abd0710000',
+        // enterpriseId: 'ff808081593917d90159398ec6340012'
+      }
+      let resData = await getBindData(param);
+      if (resData.code == '0000') {
+        that.enterpriseBind = resData.result;
+      }
+    },
+  },
+
+};
+</script>
+
+<style lang="less" scoped>
+.index-contain {
+  .bind-btn-body {
+    margin-top: 40px;
+    padding: 10px;
+    .flex {
+      display: flex;
+      justify-content: space-between;
+      .van-button {
+        &+.van-button {
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+}
+.refuse-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 50px;
+  line-height: 50px;
+  border-bottom: 1px solid #e6e7ed;
+  .refuse-cancel, .refuse-confirm {
+    height: 100%;
+    padding: 0 16px;
+    font-size: 14px;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+  }
+  .refuse-cancel {
+    color: #242835;
+  }
+  .refuse-confirm {
+    color: #c5cbd3;
+  }
+}
+</style>

src/views/storeBind/child-level.vue

+<!--
+ * @Descripttion: 当前组件信息
+ * @version: 1.0.0
+ * @Author: 无尘
+ * @Date: 2020-07-23 17:18:25
+ * @LastEditors: 无尘
+ * @LastEditTime: 2020-07-29 16:26:00
+-->
+<template>
+  <div class="store-wrap border-box">
+    <van-cell >
+      <template #title>
+        <div class="store-breadcrumb">
+          <template v-for="(item, index) in navData" >
+            <template v-if="index != navData.length - 1">
+              <span class="store-breadcrumb__item" :key="index + 'nav'"
+                ><span class="store-breadcrumb__inner is-link" @click="changeDepart(item, index)"
+                  ><span class="store-breadcrumb__inner is-link font-13  color-606266">
+                    {{ item.storeGroupName }}
+                  </span></span
+                ><van-icon v-if="index != navData.length - 1" name="arrow" />
+              </span>
+            </template>
+            <template v-else>
+              <span class="store-breadcrumb__item" :key="index + 'nav2'"
+                ><span class="store-breadcrumb__inner" @click="changeDepart(item, index)"
+                  ><span class="store-breadcrumb__inner font-13  color-606266">
+                    {{ item.storeGroupName }}
+                  </span></span>
+              </span>
+            </template>
+          </template>
+        </div>
+      </template>
+    </van-cell>
+    <van-cell-group title="门店共享">
+      <van-cell title="浙江代理"  >
+        <template #extra>
+           <button type="button" class="look-show" @click="toChild">查看</button>
+        </template>
+      </van-cell>
+    </van-cell-group>
+  </div>
+</template>
+<script>
+import { Cell, CellGroup, Icon } from 'vant';
+import { getDepartmentNav, getDepartment, getStore } from '@/api/index.js';
+export default {
+  components: {
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup,
+    [Icon.name]: Icon,
+  },
+  data() {
+    return {
+      navData: [
+        {
+          storeGroupName: '达摩测试达摩'
+        },
+        {
+          storeGroupName: '达摩测试达摩'
+        },
+        {
+          storeGroupName: '达摩测试达摩'
+        },
+        {
+          storeGroupName: '达摩测试达摩'
+        },
+        {
+          storeGroupName: '达摩测试达摩'
+        },
+        {
+          storeGroupName: '达摩测试达摩'
+        }
+      ],
+      bindData: {},
+      bindType: ''
+    }
+  },
+  methods: {
+    toChild() {
+      const that = this;
+      that.$router.push('/')
+    },
+    /**
+     * 获取数据
+     */
+    async getNavData() {
+      const that = this;
+      let param = {
+        // memberId: 'ff80808163a6ab7a0163a6abd0710000',
+        // enterpriseId: 'ff808081593917d90159398ec6340012'
+      }
+      let resData = await getDepartmentNav(param);
+      if (resData.code == '0000') {
+        that.navData = resData.result;
+      }
+    },
+    async getGroupData() {
+      const that = this;
+      let param = {
+        // memberId: 'ff80808163a6ab7a0163a6abd0710000',
+        // enterpriseId: 'ff808081593917d90159398ec6340012'
+      }
+      let resData = await getDepartment(param);
+      if (resData.code == '0000') {
+        that.bindData = resData.result;
+      }
+    },
+    async getStoreData() {
+      const that = this;
+      let param = {
+        // memberId: 'ff80808163a6ab7a0163a6abd0710000',
+        // enterpriseId: 'ff808081593917d90159398ec6340012'
+      }
+      let resData = await getStore(param);
+      if (resData.code == '0000') {
+        that.bindData = resData.result;
+      }
+    }
+  },
+};
+</script>
+
+<style type="text/less" lang="less" scoped>
+.store-wrap {
+  width: 100%;
+  .store-breadcrumb {
+    .store-breadcrumb__item {
+      .is-link {
+        color: #4b69e5;
+        cursor: pointer;
+      }
+      .van-icon {
+        color: #afb1b8;
+        vertical-align: middle;
+      }
+    }
+  }
+  .van-cell-group__title {
+    background: #f0f0f0;
+  }
+  .look-show {
+    height: 100%;
+    padding: 0 16px;
+    font-size: 14px;
+    color: #4b69e5;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+  }
+}
+</style>

src/views/storeBind/index.vue

+<!--
+ * @Descripttion: 当前组件信息
+ * @version: 1.0.0
+ * @Author: 无尘
+ * @Date: 2020-07-23 17:18:25
+ * @LastEditors: 无尘
+ * @LastEditTime: 2020-07-29 11:10:08
+-->
+<template>
+  <div class="store-wrap border-box">
+    <van-cell title="单元格" is-link />
+    <van-cell-group title="门店共享">
+      <van-cell title="浙江代理"  >
+        <template #extra>
+           <button type="button" class="look-show" @click="toChild">查看</button>
+        </template>
+      </van-cell>
+    </van-cell-group>
+  </div>
+</template>
+<script>
+import { Cell, CellGroup } from 'vant';
+import { getDepartment, getStore } from '@/api/index.js';
+export default {
+  components: {
+    [Cell.name]: Cell,
+    [CellGroup.name]: CellGroup,
+  },
+  data() {
+    return {
+      bindData: [],
+      bindType: ''
+    }
+  },
+  methods: {
+    toChild() {
+      const that = this;
+       that.$router.push('/childLevel')
+    },
+    async getGroupData() {
+      const that = this;
+      let param = {
+        // memberId: 'ff80808163a6ab7a0163a6abd0710000',
+        // enterpriseId: 'ff808081593917d90159398ec6340012'
+      }
+      let resData = await getDepartment(param);
+      if (resData.code == '0000') {
+        that.bindData = resData.result;
+      }
+    },
+    async getStoreData() {
+      const that = this;
+      let param = {
+        // memberId: 'ff80808163a6ab7a0163a6abd0710000',
+        // enterpriseId: 'ff808081593917d90159398ec6340012'
+      }
+      let resData = await getStore(param);
+      if (resData.code == '0000') {
+        that.bindData = resData.result;
+      }
+    }
+  },
+};
+</script>
+
+<style type="text/less" lang="less" scoped>
+.store-wrap {
+  width: 100%;
+  .van-cell-group__title {
+    background: #f0f0f0;
+  }
+  .look-show {
+    height: 100%;
+    padding: 0 16px;
+    font-size: 14px;
+    color: #4b69e5;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+  }
+}
+</style>

vue.config.js

+const autoprefixer = require('autoprefixer');
+const pxtorem = require('postcss-pxtorem');
+const path = require('path');
+
+module.exports = {
+  outputDir: 'dist',
+  publicPath: process.env.NODE_ENV === 'production' ? './' : './',
+  /* devServer: {
+      host: "localhost",
+      port: 8006, // 端口号
+  }, */
+  css: {
+    loaderOptions: {
+      postcss: {
+        plugins: [
+          autoprefixer(),
+          pxtorem({
+            rootValue: 37.5,
+            propList: ['*']
+          })
+        ]
+      }
+    }
+  },
+  configureWebpack: {
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, 'src')
+      }
+    }
+  }
+};