提交兑换ui

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

@@ -13,7 +13,7 @@
       </div>
     </article>
     <article class="right">
-      <span class="left">去兑换</span>
+      <span class="left" @click="changeClick">去兑换</span>
       <span class="right">去购买</span>
     </article>
   </section>
@@ -30,6 +30,9 @@ export default {
     return {};
   },
   methods: {
+    changeClick(){
+      this.$emit("changeClick","去兑换")
+    },
     btnClick() {
       this.$emit("btnClick");
     }

src/components/cme/change-card.vue

+<template>
+  <van-popup v-model="show"  
+    closeable
+   close-icon-position="top-right"
+   position="bottom"
+   >
+   <section class="bind-cart-wrapper">
+    <article class="title">兑换详情</article>
+    <article class="tip">
+      <div class="left">
+        <img src="../../images/cme/phrase2/info.png" />
+        <span>激活码用于兑换课程，您可以从订单详情或已购买到实体卡查看激活码密码。激活码一旦兑换，不可退回。</span>
+      </div>
+    </article>
+<article class="code">
+  <van-field v-model="value" 
+  clearable
+  label="激活码" 
+  placeholder="请输入激活码"  
+  error-message="请输入正确的激活码"
+   />
+ </article>
+       <article class="bottom">  <van-button size="large" round color="#449284">确认兑换</van-button></article>
+  </section>
+
+</van-popup>
+  
+</template>
+<script>
+export default {
+  props: {
+    cardInfo: {
+      type: Object,
+      default: () => {}
+    },
+    show: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  data() {
+    return {
+      activationCode: '',
+    };
+  },
+  methods: {
+
+  }
+};
+</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;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    margin-top: px2rem(20px);
+  }
+  .tip{
+    display: flex;
+    margin-top: px2rem(40px);
+    .left{
+      display: flex;
+      line-height: 1.2;
+        font-size: px2rem(12px);
+      img {
+        width: px2rem(12px);
+        height: px2rem(12px);
+        margin-left: 1px;
+        margin-right: px2rem(4px);
+      }
+      color: #979899;
+    }
+  }
+  .code{
+    display: flex;
+  }
+  .bottom{
+    display: flex;
+    margin-bottom: px2rem(4px);
+  }
+
+}
+</style>
\ No newline at end of file

src/views/merge-detail.vue

@@ -130,8 +130,10 @@
       :type="project.currentProgress > 1 ? 'primary' : 'disabled'"></ExjumperButton>
     <div v-if="project.cmeType == 2" style="padding-top: 30px"></div>
 
-    <BindCardButton v-if="project.cmeType == 2 && !project.hasBindCard" :cardInfo="cardInfo"></BindCardButton>
-    
+    <BindCardButton v-if="project.cmeType == 2 && !project.hasBindCard" :cardInfo="cardInfo" @changeClick="changeClick"></BindCardButton>
+        <!--去兑换-->
+    <ChangeCard :show="show" :cardInfo="cardInfo" ></ChangeCard>
+
     <!-- <CardPopup :cardInfo="cardInfo" :isShow="isShowPopup" @clickOverlay="clickOverlay" @cancle="jumpToCardList()" @confirm="confirm"></CardPopup> -->
     <Loading v-show="showLoading" />
   </div>
@@ -165,7 +167,7 @@ import vueFilters from "@/utils/filter";
 import { Toast  } from 'vant';
 // import CardPopup from "@/components/cme/card-popup";
 import BindCardButton from "@/components/cme/bind-card-button";
-
+import ChangeCard from "@/components/cme/change-card";
 let cataOffsetTop = 0;
 let intorOffsetTop = 0;
 let titleOffsetHeight = 50;
@@ -262,6 +264,7 @@ export default {
         id: 0
       },
       advertInfoList: [],
+      show: false,//是否展示兑换弹框
     };
   },
   components: {
@@ -283,7 +286,8 @@ export default {
     // CardPopup,
     CommonAdertImg,
     NoMoreContent,
-    BindCardButton
+    BindCardButton,
+    ChangeCard
   },
 
   computed: {
@@ -635,7 +639,11 @@ export default {
         }
       });
     },
-
+//去兑换
+changeClick(msg){
+  console.log(msg)
+  this.show = !this.show;
+},
     // 弹框按钮事件
     handlerAction(data) {
       this.isShowDialog = false;