1、使用postcss-pxtorem，改用less

2、升级babel

src/components/cme/change-card copy.vue

-<template>
-  <van-popup
-    v-model="isShow"
-    @click-overlay="cancle"  
-    position="bottom"
-  >
-    <section class="bind-cart-wrapper">
-      <article class="title">
-        <span>激活详情</span>
-        <img @click="cancle" src="../../images/cme/close.png" />
-      </article>
-      <article class="tip">
-        <div class="left">
-          <img src="../../images/cme/phrase2/info.png" />
-          <span>激活码用于学习课程，您可以从订单详情或您的实体卡查看激活码。激活码一旦使用，不可退回。</span>
-        </div>
-      </article>
-      <section class="input-wrapper">
-        <article class="code-new">
-          <!-- <van-field
-            maxlength="26"
-            v-model="activationCode"
-            label="激活码"
-            placeholder="请输入激活码"
-          /> -->
-          <!-- <span>激活码</span>
-          <input type="text" maxlength="26" v-model="activationCode" placeholder="请输入激活码"> -->
-        </article>
-        <span class="error">{{errorMsg}}</span>
-        <img v-show="!!activationCode" @click="clear" src="../../images/cme/phrase2/close.png" />
-      </section>
-
-      <article class="bottom">
-        <van-button @click="confirm" size="large" round color="#449284">确认激活</van-button>
-      </article>
-    </section>
-  </van-popup>
-</template>
-<script>
-export default {
-  props: {
-    isShow: {
-      type: Boolean,
-      default: true
-    },
-    changeErrorMsg: {
-      type: String,
-      default: ''
-    }
-  },
-  
-  data() {
-    return {
-      activationCode: '',
-      errorMsg: ''
-    };
-  },
-
-  // 
-  watch: {
-    activationCode(val) {
-      if(!val) {
-        this.errorMsg = '请输入激活码';
-      } else {
-        this.errorMsg = '';
-      }
-      this.$nextTick(() => {
-        this.activationCode = val.replace(/\s/g,'').replace(/.....(?!$)/g,'$& ');
-      });
-    },
-    changeErrorMsg(val) {
-      if(val) {
-        this.errorMsg = val;
-      }
-    },
-    isShow(val) {
-      this.activationCode = '';
-      this.errorMsg = '';
-    }
-  },
-
-  methods: {
-    cancle() {
-      this.$emit("cancle");
-    },
-    confirm() {
-      if(!this.activationCode) {
-        this.errorMsg = '请输入激活码';
-        return;
-      };
-      if(this.activationCode.length != 23) {
-        this.errorMsg = '请输入正确的激活码';
-        return;
-      }
-      let aCode = JSON.parse(JSON.stringify(this.activationCode));
-      aCode = aCode.replace(/\s/g,'');
-      this.$emit("confirm", aCode);
-    },
-    clear() {
-      this.activationCode = ''
-    }
-  }
-};
-</script>
-<style  lang="scss" scoped>
-@import "../../style/mixin";
-.bind-cart-wrapper {
-  width: 100%;
-  display: flex;
-  line-height: 1;
-  padding: px2rem(10px) px2rem(15px);
-  display: flex;
-  flex-direction: column;
-  background: rgba(255, 255, 255, 1);
-  // box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.1);
-  .title {
-    display: flex;
-    flex-direction: row;
-    font-size: 18px;
-    font-weight: 700;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    margin-top: px2rem(20px);
-    img {
-      position: relative;
-      top: 0;
-      right: px2rem(-120px);
-      width: px2rem(12px);
-      height: px2rem(12px);
-    }
-  }
-  .tip {
-    display: flex;
-    margin-top: px2rem(40px);
-    .left {
-      display: flex;
-      line-height: 1.2;
-      font-size: px2rem(12px);
-      img {
-        position: relative;
-        top: px2rem(1px);
-        width: px2rem(12px);
-        height: px2rem(12px);
-        // margin: px2rem(2px) px2rem(4px) 0 px2rem(1px);
-      }
-      span {
-        margin-left: px2rem(4px);
-      }
-      color: #979899;
-    }
-  }
-  .input-wrapper {
-    position: relative;
-    .code {
-      display: flex;
-      flex-direction: column;
-      padding: px2rem(20px) 0;
-      padding-top: 0;
-    }
-    .error {
-      position: absolute;
-      top: px2rem(66px);
-      left: px2rem(56px);
-      display: inline-block;
-      color: red;
-      font-size: px2rem(12px);
-    }
-    img {
-      position: absolute;
-      top: px2rem(33px);
-      right: px2rem(12px);
-      width: px2rem(15px);
-      height: px2rem(15px);
-    }
-  }
-
-  .bottom {
-    display: flex;
-    margin-bottom: px2rem(40px);
-  }
-}
-</style>
\ No newline at end of file

src/store/modules/user.js

+import { Toast } from 'vant';
+import fetch from '@/utils/fetch';
+import { getBaseUrl } from '@/utils/index'
+import { preLoadImg } from '@/utils/index';
+import { envConfig } from '@/utils/env-config'
+
+const user = {
+  state: {
+    token: localStorage.getItem('token') || '',
+    info: {}, // 用户信息
+  },
+  mutations: {
+    SET_TOKEN: (state, payload) => {
+      state.token = payload;
+    },
+    SET_USER_INFO: (state, payload) => {
+      state.info = payload;
+    },
+  },
+  actions: {
+    // 外部登陆返回设置token
+    setToken({ commit, dispatch }, params) {
+      commit('SET_TOKEN', params);
+      localStorage.setItem('token', params);
+      dispatch('getUserInfo');
+    },
+    // 获取用户信息
+    async getUserInfo({ state, commit, dispatch }) {
+      try {
+        const errCallBack = () => {
+          dispatch('logout');
+          Toast('登录失效，请重新登录~')
+        }
+        const res = await fetch({
+          url: getBaseUrl('/account/login/web'),
+          method: 'get',
+          headers: { token: state.token }
+        }).catch(() => {
+          errCallBack()
+        });
+        if (res && res.code === '000000') {
+          const { certifyDoc, isExist } = res.data;
+          const picapDoctor = res.data.picapDoctor || {};
+          if (picapDoctor.id) {
+            let avatar = picapDoctor.avatar_image_url || '';
+            let avatarUrl = '';
+            const img1 = await preLoadImg(`https://test-file.yunqueyi.com${avatar}`).catch(err => console.log(err));
+            const img2 = await preLoadImg(`https://file.yunqueyi.com${avatar}`).catch(err => console.log(err));
+            if (img1) {
+              avatarUrl = img1.src;
+            }
+            if (img2) {
+              avatarUrl = img2.src;
+            }
+            picapDoctor.avatar = avatarUrl || 'https://file.yunqueyi.com/File/doctor_default.png';
+            commit('SET_USER_INFO', { ...picapDoctor, isExist, certifyDoc });
+          }
+        } else {
+          errCallBack()
+        }
+      } catch (err) {
+        console.log(err);
+      }
+    },
+
+    // 通过登陆
+    goLogin() {
+      window.location.href = envConfig[process.env.BUILD_ENV]['phomeDemain'] + "/pica_login?target_url=" + encodeURIComponent(location.href);
+    },
+
+    // 登出
+    logout({ state, commit }) {
+      commit('SET_TOKEN', '');
+      commit('SET_USER_INFO', {});
+      localStorage.removeItem('token');
+    },
+  },
+}
+
+export default user;

src/style/common.scss → src/style/common.less

@@ -12,7 +12,7 @@ body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, l
     font-style: normal;
     text-decoration: none;
     border: none;
-    // font-size: px2rem(14px);
+    // font-size: 14;
     // color: #333;
     font-weight: normal;
     // font-family: "PingFangSC-Medium", "PingFangSC", "Microsoft Yahei";

src/style/global.scss → src/style/global.less

-@import './common.scss';
+@import './common.less';
 //定位
 .relative{
     position: relative;
@@ -25,46 +25,46 @@
     text-align: center;
 }
 .line20{
-    margin-top: px2rem(10px);
+    margin-top: 10;
 }
 .mb42{
-    margin-bottom: px2rem(21px);
+    margin-bottom: 21;
 }
 .marginLR40{
-    margin: 0 px2rem(20px);
+    margin: 0 20;
 }
 .fs10{
-    font-size: px2rem(10px);
+    font-size: 10;
 }
 .fs11{
-    font-size: px2rem(11px);
+    font-size: 11;
 }
 .fs13{
-    font-size: px2rem(13px);
+    font-size: 13;
 }
 .fs14{
-    font-size: px2rem(14px);
+    font-size: 14;
 }
 .fs22{
-    font-size: px2rem(11px);
+    font-size: 11;
 }
 .fs24{
-    font-size: px2rem(12px);
+    font-size: 12;
 }
 .fs26{
-    font-size: px2rem(13px);
+    font-size: 13;
 }
 .fs28{
-    font-size: px2rem(14px);
+    font-size: 14;
 }
 .fs32{
-    font-size: px2rem(16px);
+    font-size: 16;
 }
 .fs30{
-    font-size: px2rem(15px);
+    font-size: 15;
 }
 .fs50{
-    font-size: px2rem(25px);
+    font-size: 25;
 }
 .fw{
     font-weight: 700;
@@ -81,12 +81,12 @@
     color: #fff;
 }
 .fs30{
-    font-size: px2rem(15px);
+    font-size: 15;
 }
 
 .van-cell {
-    padding: px2rem(17px) px2rem(15px) !important;
-    font-size: px2rem(15px) !important;
+    padding: 17px 15px !important;
+    font-size: 15px !important;
     color: #373839 !important;
 }
 .van-cell:not(:last-child)::after {
@@ -96,7 +96,7 @@
     text-align: right !important;
 }
 // .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after {
-//     border-width: px2rem(1px) 0 !important;
+//     border-width: 1px 0 !important;
 // }
 // .van-hairline, .van-hairline--surround, .van-hairline--top, .van-hairline--top-bottom {
 //     position: inherit !important;
@@ -104,29 +104,29 @@
 // .van-hairline--top {
 // }
 // .van-field__label, .van-field__body {
-//     height: px2rem(15px) !important;
-//     line-height: px2rem(15px) !important;
+//     height: 15px !important;
+//     line-height: 15px !important;
 // }
 .van-cell__title span {
     font-weight: 700 !important;
 }
 
 .bind-cart-wrapper .van-field__control {
-    border-radius: px2rem(4px);
+    border-radius: 4;
     border: 1px solid #C7C8C9;
-    padding: px2rem(7px);
+    padding: 7;
     text-align: left !important;
 }
 
 .bind-cart-wrapper .van-cell__title .van-field__label {
     span {
-        font-size: px2rem(15px) !important;
+        font-size: 15px !important;
         color: #373839 !important;
     }
 }
 .bind-cart-wrapper .van-field__label {
-    width: px2rem(56px) !important;
-    padding-top: px2rem(8px);
+    width: 56px !important;
+    padding-top: 8;
 }
 .bind-cart-wrapper .van-cell {
     padding: 0.54rem 0 !important;

src/style/mixin.less

+@blue: #3190e8;
+@bc: #e4e4e4;
+@fc:#fff;

src/style/mixin.scss

-$blue: #3190e8;  
-$bc: #e4e4e4;
-$fc:#fff;
-
-// 背景图片地址和大小
-@mixin bis($url) { 
-	background-image: url($url);
-	background-repeat: no-repeat;
-	background-size: 100% 100%;
-}
-
-@mixin borderRadius($radius) {
-    -webkit-border-radius: $radius;
-    -moz-border-radius: $radius;
-    -ms-border-radius: $radius;
-    -o-border-radius: $radius;
-    border-radius: $radius;
-}
-//定位全屏
-@mixin allcover{
-	position:absolute;
-	top:0;
-	right:0;
-}
-
-//定位上下左右居中
-@mixin center {  
-	position: absolute;
-	top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-//定位上下居中
-@mixin ct {  
-	position: absolute;
-	top: 50%;
-    transform: translateY(-50%);
-}
-
-//定位左右居中
-@mixin cl {  
-	position: absolute;
-	left: 50%;
-    transform: translateX(-50%);
-}
-
-//宽高
-@mixin wh($width, $height){
-	width: $width;
-	height: $height;
-}
-
-//字体大小、行高、字体
-@mixin font($size, $line-height, $family: 'Microsoft YaHei') {  
-	font: #{$size}/#{$line-height} $family;
-}
-
-//字体大小，颜色
-@mixin sc($size, $color){
-	font-size: $size;
-	color: $color;
-}
-
-//flex 布局和 子元素 对其方式
-@mixin fj($type: space-between){
-	display: flex;
-	justify-content: $type;
-
-}
-
-@function px2rem($px){
-	$rem: 37.5px;
-	@return ($px / $rem) + rem;
-}
\ No newline at end of file