兑换弹框修改等

src/components/cme/bind-card-button.vue

@@ -31,7 +31,7 @@ export default {
   },
   methods: {
     changeClick(){
-      this.$emit("changeClick","去兑换")
+      this.$emit("changeClick")
     },
     gotoBuy() {
       this.$emit("gotoBuy");

src/components/cme/change-card.vue

@@ -15,15 +15,19 @@
           <span>激活码用于兑换课程，您可以从订单详情或已购买到实体卡查看激活码密码。激活码一旦兑换，不可退回。</span>
         </div>
       </article>
-      <article class="code">
-        <van-field
-          v-model="activationCode"
-          border
-          clearable
-          label="激活码"
-          placeholder="请输入激活码"
-        />
-      </article>
+      <section class="input-wrapper">
+        <article class="code">
+          <van-field
+            maxlength="23"
+            v-model="activationCode"
+            clearable
+            label="激活码"
+            placeholder="请输入激活码"
+          />
+        </article>
+        <span class="error">{{errorMsg}}</span>
+      </section>
+
       <article class="bottom">
         <van-button @click="confirm" size="large" round color="#449284">确认兑换</van-button>
       </article>
@@ -45,19 +49,37 @@ export default {
   // },
   data() {
     return {
-      activationCode: ""
+      activationCode: "",
+      errorMsg: '请输入激活码'
     };
   },
+  watch: {
+    activationCode(val) {
+      if(!val) {
+        this.errorMsg = '请输入激活码';
+      } else {
+        this.errorMsg = '';
+      }
+      this.$nextTick(() => {
+        this.activationCode = val.replace(/\s/g,'').replace(/.....(?!$)/g,'$& ');
+      });
+    }
+  },
   methods: {
     cancle() {
       console.log('cancle');
       this.$emit("cancle");
     },
     confirm() {
-      // 时行校验
       console.log('confirm');
-      this.$emit("confirm", this.activationCode);
-    }
+      if(!this.activationCode || this.activationCode.length != 23) return;
+      let aCode = JSON.stringify(this.activationCode);
+      this.$emit("confirm", aCode.replace(/\s/g,''));
+    },
+    // bankCardKeyup() {
+    //         this.id_card = val.replace(/\s/g,'').replace(/....(?!$)/g,'$& ');
+    //   this.activationCode = this.activationCode.replace(/\s/g,'').replace(/(\.{4})(?=\.)/g, '$1 ');
+    // }
   }
 };
 </script>
@@ -104,11 +126,24 @@ export default {
       color: #979899;
     }
   }
-  .code {
-    display: flex;
-    padding: px2rem(20px) 0;
-    padding-top: 0;
+  .input-wrapper {
+    position: relative;
+    .code {
+      display: flex;
+      flex-direction: column;
+      padding: px2rem(20px) 0;
+      padding-top: 0;
+    }
+    .error {
+      position: absolute;
+      top: px2rem(64px);
+      left: px2rem(70px);
+      display: inline-block;
+      color: red;
+      font-size: px2rem(12px);
+    }
   }
+
   .bottom {
     display: flex;
     margin-bottom: px2rem(40px);

src/style/global.scss

@@ -112,7 +112,6 @@
 }
 
 .bind-cart-wrapper .van-field__control {
-
     border-radius: px2rem(4px);
     border: 1px solid #C7C8C9;
     padding: px2rem(7px);

src/views/I-credit-detail.vue

@@ -3,18 +3,27 @@
     <CommonNavbar
       :bgColor="bgColor"
       v-show="showNavBar"
-      title=""
+      title
       :isFixNavbar="isFixNavbar"
       borderStyle="0px solid #fff"
     ></CommonNavbar>
-    <img class="img" src="https://file.yunqueyi.com/h5/images/tinified/I-detail-1.png"><img class="img" src="https://file.yunqueyi.com/h5/images/tinified/I-detail-2.png"><img class="img" src="https://file.yunqueyi.com/h5/images/tinified/I-detail-3.png"><img class="img" src="https://file.yunqueyi.com/h5/images/tinified/I-detail-4.png"><img class="img" src="https://file.yunqueyi.com/h5/images/tinified/I-detail-5.png"><img class="img" src="https://file.yunqueyi.com/h5/images/tinified/I-detail-6.png"><img class="img" src="https://file.yunqueyi.com/h5/images/tinified/I-detail-7.png">
-    <ExjumperButton
-      @btnClick="isBuy(1)"
-      btnText="立即学习" 
-      type="primary"></ExjumperButton>
+    <img class="img" src="https://file.yunqueyi.com/h5/images/tinified/I-detail-1.png" />
+    <img class="img" src="https://file.yunqueyi.com/h5/images/tinified/I-detail-2.png" />
+    <img class="img" src="https://file.yunqueyi.com/h5/images/tinified/I-detail-3.png" />
+    <img class="img" src="https://file.yunqueyi.com/h5/images/tinified/I-detail-4.png" />
+    <img class="img" src="https://file.yunqueyi.com/h5/images/tinified/I-detail-5.png" />
+    <img class="img" src="https://file.yunqueyi.com/h5/images/tinified/I-detail-6.png" />
+    <img class="img" src="https://file.yunqueyi.com/h5/images/tinified/I-detail-7.png" />
+    <ExjumperButton @btnClick="isBuy(1)" btnText="立即学习" type="primary"></ExjumperButton>
 
     <!-- <img @click="isBuy(1)" class="img" src="https://file.yunqueyi.com/h5/images/tinified/i-detail-8.png"> -->
-    <CardPopup :cardInfo="cardInfo" :isShow="isShowPopup" @clickOverlay="clickOverlay" @cancle="jumpToCardList" @confirm="confirm"></CardPopup>
+    <CardPopup
+      :cardInfo="cardInfo"
+      :isShow="isShowPopup"
+      @clickOverlay="clickOverlay"
+      @cancle="jumpToCardList"
+      @confirm="confirm"
+    ></CardPopup>
     <Loading v-if="showLoading" />
   </section>
 </template>
@@ -23,24 +32,24 @@ import ExjumperButton from "@/components/cme/exjumper-button";
 import CommonNavbar from "@/components/common/common-navbar";
 import CardPopup from "@/components/cme/card-popup";
 import Loading from "@/components/common/common-loading";
-import { Toast } from 'vant';
+import { Toast } from "vant";
 export default {
   data() {
     return {
       bgColor: "#fff",
-      bgColor: 'none',
+      bgColor: "none",
       showNavBar: true,
       isShowPopup: false,
       isFixNavbar: true,
-      oneLevelUrl: '',
+      oneLevelUrl: "",
       provinceId: 0,
       organizationId: 0,
       cardInfo: {
         id: 0
       },
-      cmeToken: '',
-      showLoading: false,
-    }
+      cmeToken: "",
+      showLoading: false
+    };
   },
   components: {
     CommonNavbar,
@@ -55,18 +64,21 @@ export default {
       // _this.showLoading = false;
       param.setEntry = true;
       _this.getProvinceIdByPosition(param);
-    }
-    this.oneLevelUrl = decodeURIComponent(this.$route.query && this.$route.query.oneLevelUrl || '');
-    this.provinceId = this.$route.query && this.$route.query.provinceId || 0;
-    this.organizationId = this.$route.query && this.$route.query.organizationId || 0;
-    this.cmeToken = this.$route.query && this.$route.query.cmeToken || '';
+    };
+    this.oneLevelUrl = decodeURIComponent(
+      (this.$route.query && this.$route.query.oneLevelUrl) || ""
+    );
+    this.provinceId = (this.$route.query && this.$route.query.provinceId) || 0;
+    this.organizationId =
+      (this.$route.query && this.$route.query.organizationId) || 0;
+    this.cmeToken = (this.$route.query && this.$route.query.cmeToken) || "";
 
     // this.getProvinceIdByPosition();
   },
   methods: {
     // 点击弹层
     clickOverlay() {
-      console.log('clickOverlay');
+      console.log("clickOverlay");
       this.isShowPopup = false;
     },
 
@@ -79,13 +91,13 @@ export default {
       let param = {
         cardType: cardType,
         token: this.cmeToken,
-        setEntry: true,
-      }
+        setEntry: true
+      };
       this.GET("trade/storage/card/isBuy", param).then(res => {
         if (res.code == "000000") {
           // 如果购买过，则直接跳转到中华医学会页面
-          if(res.data) {
-            this.jumpToCardList();          
+          if (res.data) {
+            this.jumpToCardList();
           } else {
             this.preJumper();
           }
@@ -93,12 +105,12 @@ export default {
         //  else {
         //   Toast(res.message);
         // }
-      });  
+      });
     },
 
     // 跳转前判断是否有机构，否则使用定位信息
     preJumper() {
-      if(this.organizationId != 0 && this.provinceId != 0) {
+      if (this.organizationId != 0 && this.provinceId != 0) {
         this.getCardInfoByProvinceId(this.provinceId);
       } else {
         this.getPositionData();
@@ -107,7 +119,7 @@ export default {
 
     // 获取地理位置信息
     getPositionData() {
-      console.log('getPositionData');
+      console.log("getPositionData");
       rocNative.getPositionData({
         __funcName: "__getPositionData"
       });
@@ -116,30 +128,32 @@ export default {
     // 根据省ID，获取学习卡信息
     getCardInfoByProvinceId(provinceId) {
       let param = {
-        "area": provinceId + '',
-        "cardType": 1,
-        "pageNum": 1,
-        "pageSize": 1
-      }
+        area: provinceId + "",
+        cardType: 1,
+        pageNum: 1,
+        pageSize: 1
+      };
       this.POST("trade/goods/cardList", param).then(res => {
         if (res.code == "000000") {
           this.showLoading = false;
           this.isShowPopup = true;
-          this.cardInfo = res.data && res.data[0] || {id: 0} ;
+          this.cardInfo = (res.data && res.data[0]) || { id: 0 };
         }
-      });  
+      });
     },
 
     // 根据位置信息获取省ID
     getProvinceIdByPosition(param) {
       param.setEntry = true;
-      this.POST("aggregate/cme/convertLocationToProvinceId", param).then(res => {
-        if (res.code == "000000") {
-          this.getCardInfoByProvinceId(res.data || 0);
-        } else {
-          this.getCardInfoByProvinceId(0);
+      this.POST("aggregate/cme/convertLocationToProvinceId", param).then(
+        res => {
+          if (res.code == "000000") {
+            this.getCardInfoByProvinceId(res.data || 0);
+          } else {
+            this.getCardInfoByProvinceId(0);
+          }
         }
-      });
+      );
     },
 
     // 跳转到原生的购买页面
@@ -148,7 +162,8 @@ export default {
       let paramList = [
         {
           key: "className",
-          value: "com.picahealth.yunque.activitys.studycard.StudyCardDetailActivity###PicaDo.LearningCardVC",
+          value:
+            "com.picahealth.yunque.activitys.studycard.StudyCardDetailActivity###PicaDo.LearningCardVC",
           type: 4,
           seqNo: 1
         },
@@ -189,24 +204,24 @@ export default {
           // 此字段不配置，则用原来的逻辑
           {
             key: "needCache",
-            value: '1', // 0不缓存，其它值都做缓存
+            value: "1", // 0不缓存，其它值都做缓存
             type: 4,
             seqNo: 1
-          },
-        ]
+          }
+        ];
         rocNative.dispatchEventByModuleCode({
           modeCode: "M300",
           jsonString: paramList
         });
       }
-    }    
-  },
-}
+    }
+  }
+};
 </script>
 <style lang="scss" scoped>
 @import "../style/mixin";
 .cd-wrapper {
-  background: #F8F9FA;
+  background: #f8f9fa;
   padding-bottom: 80px;
   .img {
     margin-top: -15px;