已购买去学习

src/components/cme/card-banner.vue

@@ -9,6 +9,7 @@
 </template>
 <script>
 import { getHactiveUrl } from "@/utils/index";
+import { mapGetters } from "vuex";
 export default {
   data() {
     return {
@@ -21,10 +22,20 @@ export default {
       default: ''
     }
   },
+  computed: {
+    ...mapGetters(["userInfo"])
+  },
   methods: {
     // 跳转到学习卡列表页面
     jumpToCardList() {
       // 如果没有登录，则要去登录页面
+      let appVersion = this.userInfo.appVersion;
+      let appVersionNum = appVersion.split('.').join('');
+      console.log('appVersionNum', appVersionNum);
+      if(appVersionNum < 341) {
+        Toast('请您下载新版本App');
+        return;
+      }
       if (!this.userMobile) {
         rocNative.gotoLogin();
         return;

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

+<template>
+  <section class="card-popup-wrapper">
+    <van-popup
+      v-model="isShow"
+      position="center"
+      @click-overlay="clickOverlay"
+    >
+      <article class="content">
+        <p class="title">学分项目必须使用学习卡</p>
+        <p class="title">请先购买学习卡</p>
+        <section class="card-info">
+          <img v-if="cardInfo.cardType == 1" class="icon" src="../../images/cme/phrase2/I-card-icon.png" alt />
+          <img v-else class="icon" src="../../images/cme/phrase2/II-card-icon.png" alt />
+          <!-- <div class="info">
+            <span class="name">{{cardInfo.goodsName}}</span>
+            <p>
+              <span class="price">￥{{(cardInfo.preferentialPrice || cardInfo.costPrice) | formatMoney}}</span><span v-show="cardInfo.preferentialPrice" class="discount"><del> 原价￥{{cardInfo.costPrice | formatMoney}}</del></span>
+            </p>
+          </div> -->
+          <div class="info">
+            <span class="name">已购买去学习已购买去学习买去学习</span>
+            <p>
+              <span class="price">￥100</span><span  class="discount"><del> 原价￥120</del></span>
+            </p>
+          </div>
+        </section>
+        <div class="line"></div>
+        <div class="btn">
+          <span class="left" @click="cancle">已购买去学习</span>
+          <span class="vert-line"></span>
+          <span class="right" @click="confirm">去购买</span>
+        </div>
+      </article>
+    </van-popup>
+  </section>
+</template>
+<script>
+import { Popup } from "vant";
+export default {
+  data() {
+    return {
+      
+    }
+  },
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false,
+    },
+    cardInfo: {
+      id: 10031,
+      goodsVersion: 1,
+      cardType: 1,
+      costPrice: 0,
+      preferentialPrice: 0,
+      goodsDesc: "",
+      goodsName: "学习卡",
+      goodsType: 2,
+      isSale: 1,
+    }
+  },
+  methods: {
+    clickOverlay() {
+      this.$emit('clickOverlay');
+    },
+    cancle() {
+      this.$emit('cancle');
+    },
+    confirm() {
+      this.$emit('confirm');
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+@import "../../style/mixin";
+.card-popup-wrapper {
+  .content {
+    font-size: px2rem(14px);
+    width: px2rem(300px);
+    // height: px2rem(245px);
+    padding-top: px2rem(30px);
+    .title {
+      text-align: center;
+      font-size: px2rem(18px);
+      font-weight: 700;
+    }
+    .card-info {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      height: px2rem(76px);
+      margin: px2rem(15px);
+      padding: 0 px2rem(8px);
+      background: #F8F9FA;
+      border-radius: px2rem(6px);
+      font-size: px2rem(14px);
+      .icon {
+        width: px2rem(60px);
+        height: px2rem(60px);
+        margin-right: px2rem(8px);
+      }
+      .info {
+        width: 100%;
+        position: relative;
+        top: 0;
+        left: 0;
+        .name {
+          position: absolute;
+          top: px2rem(-30px);
+          left: px2rem(4px);
+        }
+        p {
+          position: absolute;
+          bottom: px2rem(-34px);
+          left: 0px;
+          display: flex;
+          align-items: center;          
+          .price {
+            color: #FB5B52;
+            font-size: px2rem(18px);
+            font-weight: 700;
+            margin-right: px2rem(8px);
+          }
+          .discount {
+            color: #979899;
+          }        
+        }
+      }
+    }
+    .line {
+      margin-top: px2rem(30px);
+      height: px2rem(1px);
+      background: #F0F1F2;
+    }
+    .btn {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      // justify-content: space-between;
+      align-items: center;
+      height: px2rem(50px);
+      // margin-top: px2rem(15px);
+      font-size: px2rem(17px);
+      .left {
+        flex: 1;
+        text-align: center;
+        color: #979899;
+        // border-right: 1px solid #F0F1F2;
+      }
+      .vert-line {
+        border-right: 1px solid #F0F1F2;
+        // width: px2rem(1px);
+        height: 100%;
+      }
+      .right {
+        flex: 1;
+        text-align: center;
+        color: #449284;
+      }
+    }
+  }
+  .van-popup.van-popup--center {
+    border-radius: px2rem(4px);
+  }
+}
+
+</style>

src/components/cme/card-popup.vue

@@ -9,14 +9,20 @@
         <p class="title">学分项目必须使用学习卡</p>
         <p class="title">请先购买学习卡</p>
         <section class="card-info">
-          <img v-if="cardInfo.cardType == 1" class="icon" src="../../images/cme/phrase2/I-card-icon.png" alt />
-          <img v-else class="icon" src="../../images/cme/phrase2/II-card-icon.png" alt />
+          <img v-if="!cardInfo.cardType == 1" class="icon" src="../../images/cme/phrase2/I-card-icon.png" alt />
+          <img v-else class="info2" src="../../images/cme/phrase2/II-card-icon.png" alt />
           <div class="info">
             <span class="name">{{cardInfo.goodsName}}</span>
             <p>
               <span class="price">￥{{(cardInfo.preferentialPrice || cardInfo.costPrice) | formatMoney}}</span><span v-show="cardInfo.preferentialPrice" class="discount"><del> 原价￥{{cardInfo.costPrice | formatMoney}}</del></span>
             </p>
           </div>
+          <!-- <div class="info2">
+            <span class="name">已购买去学习已购买去学购买去学习买</span>
+            <p>
+              <span class="price">￥100</span><span  class="discount"><del> 原价￥120</del></span>
+            </p>
+          </div> -->
         </section>
         <div class="line"></div>
         <div class="btn">
@@ -121,6 +127,30 @@ export default {
           }        
         }
       }
+      .info2 {
+       display: flex;
+       flex-direction: column;
+        .name {
+          // position: absolute;
+          // top: px2rem(-30px);
+          // left: px2rem(4px);
+        }
+        p {
+          display: flex;
+          align-items: center;
+          height: px2rem(24px);
+          line-height: px2rem(24px);
+          .price {
+            color: #FB5B52;
+            font-size: px2rem(18px);
+            font-weight: 700;
+            margin-right: px2rem(8px);
+          }
+          .discount {
+            color: #979899;
+          }        
+        }
+      }
     }
     .line {
       margin-top: px2rem(30px);

src/views/I-credit-detail.vue

@@ -30,7 +30,7 @@ export default {
       bgColor: "#fff",
       bgColor: 'none',
       showNavBar: true,
-      isShowPopup: false,
+      isShowPopup: true,
       isFixNavbar: true,
       oneLevelUrl: '',
       provinceId: 0,