样式优化等

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/components/cme/change-card.vue

@@ -17,14 +17,8 @@
       </article>
       <section class="input-wrapper">
         <article class="code">
-          <van-field
-            maxlength="26"
-            v-model="activationCode"
-            label="激活码"
-            placeholder="请输入激活码"
-          />
-          <!-- <span>激活码</span>
-          <input type="text" maxlength="26" v-model="activationCode" 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" />
@@ -154,9 +148,12 @@ export default {
     position: relative;
     .code {
       display: flex;
-      flex-direction: column;
-      padding: px2rem(20px) 0;
-      padding-top: 0;
+      flex-direction: row;
+      height: px2rem(60px);
+      line-height: px2rem(60px);
+      font-size: px2rem(14px);
+      // padding: px2rem(20px) 0;
+      // padding-top: 0;
     }
     .error {
       position: absolute;

src/views/merge-detail.vue

@@ -137,7 +137,7 @@
     <!--去激活-->
     <ChangeCard
       :changeErrorMsg="changeCardErrorMsg"
-      :isShow="showChangeCard"
+      :isShow="!showChangeCard"
       @cancle="cancleChangeCard"
       @confirm="changeCardAction">
     </ChangeCard>