购买页面添加购买完成弹窗，答题页面选中样式修改

build/webpack.client.conf.js

@@ -26,7 +26,7 @@ if ($GLOBAL.isDev === 'development') {
       port: $GLOBAL.webConf.serverPort,
       disableHostCheck: false,
       host: $GLOBAL.webConf.domain || 'localhost',
-      http2: false,
+      // http2: false,
       https: $GLOBAL.webConf.isHttps && {
         key: fs.readFileSync(path.join(__dirname, '../static/cert/dev.ezijing.com.key')),
         cert: fs.readFileSync(path.join(__dirname, '../static/cert/dev.ezijing.com.pem'))

src/modules/exam-module/src/ExamTopic.vue

@@ -862,8 +862,8 @@ export default {
         background:#DDF1FF;
       }
       .active2{
-        color: #fff;
-        background:#67C23A;
+        color: #40A38B;
+        background: #E4F9ED;
       }
     }
     .analy{

src/pages/my/buyCourses.vue

@@ -23,6 +23,14 @@
       </li>
     </ul>
     <van-empty description="暂无内容" v-else />
+    <div class="succ-pop" v-if="isPopShow">
+      <div class="pop">
+        <div class="close" @click="isPopShow = false">×</div>
+        <div class="tit">恭喜您，课程已购买成功！</div>
+        <div class="txt">请添加助教微信，有任何问题可随时沟通老师。</div>
+        <img @click="imagePreview" src="https://zws-imgs-pub.ezijing.com/static/public/9d7a53493ff3c68ef33b7d9395edf718.png" alt="">
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -33,6 +41,7 @@ export default {
   },
   data() {
     return {
+      isPopShow: false,
       loaded: false,
       list: [],
       orderTime: null,
@@ -91,6 +100,12 @@ export default {
         clearInterval(this.orderTime)
         this.orderTime = setInterval(() => {
           this.getMyOrder()
+          api.getOrderStatus().then(res => {
+            if (this.orderStatus === 1) {
+              this.isPopShow = true
+              clearInterval(this.orderTime)
+            }
+          })
         }, 1000)
         setTimeout(() => {
           this.goFlag = true
@@ -164,4 +179,48 @@ export default {
     }
   }
 }
+.succ-pop{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.5);
+  .pop{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    width:5.9rem;
+    height:6.98rem;
+    background:rgba(255,255,255,1);
+    border-radius:.12rem;
+    .tit{
+      line-height: 1.1rem;
+      text-align: center;
+      font-size: .3rem;
+      color: #222;
+      font-weight: bold;
+    }
+    .txt{
+      width:5.1rem;
+      font-size: .3rem;
+      color:rgba(34,34,34,1);
+      margin: 0 auto;
+    }
+    img{
+      width: 4.3rem;
+      height: 4.3rem;
+      margin: 0.4rem auto;
+      display: block;
+    }
+    .close{
+      position: absolute;
+      top: -.8rem;
+      right: 0;
+      font-size: .6rem;
+      color: #fff;
+    }
+  }
+}
 </style>

src/pages/my/questionsDetails.vue

@@ -510,8 +510,8 @@ export default {
         background:#DDF1FF;
       }
       .active2{
-        color: #fff;
-        background:#67C23A;
+        color: #40A38B;
+        background: #E4F9ED;
       }
     }
     .analy{

src/pages/pay/index.vue

@@ -10,7 +10,7 @@
       <div class="num">
         ¥
         <span>199</span>.00
-        <i v-if="orderStatus === 0">课程有效期剩余30天</i>
+        <i v-if="orderStatus === 0">课程有效期剩余{{expireDay}}天</i>
       </div>
       <div class="btn" @click="goPay" v-if="orderStatus === 100">立即购买</div>
       <div class="btn active" v-if="orderStatus === 1" @click="goHome">已购买</div>
@@ -18,9 +18,18 @@
       <div class="btn xf" @click="goPay" v-if="orderStatus === 0">续费</div>
     </div>
     <pay-we-chart :requestParam="requestParam"></pay-we-chart>
+    <div class="succ-pop" v-if="isPopShow">
+      <div class="pop">
+        <div class="close" @click="isPopShow = false">×</div>
+        <div class="tit">恭喜您，课程已购买成功！</div>
+        <div class="txt">请添加助教微信，有任何问题可随时沟通老师。</div>
+        <img @click="imagePreview" src="https://zws-imgs-pub.ezijing.com/static/public/9d7a53493ff3c68ef33b7d9395edf718.png" alt="">
+      </div>
+    </div>
   </div>
 </template>
 <script>
+import { ImagePreview } from 'vant'
 import * as api from '@/api/pay.js'
 import { getUser } from '@/api/account'
 
@@ -28,12 +37,17 @@ export default {
   metaInfo: {
     title: '课程详情'
   },
+  components: {
+    [ImagePreview.name]: ImagePreview
+  },
   data() {
     const productId =
       webConf.isDev === 'production'
         ? '6684359515615264768'
         : '6682927830365372416'
     return {
+      isPopShow: false,
+      expireDay: 0,
       userId: '',
       requestParam: {
         product_id: productId, // 提前设定
@@ -46,11 +60,19 @@ export default {
       orderStatus: 100
     }
   },
+  mounted() {
+    api.getOrderStatus().then(res => {
+      this.expireDay = res.expire_day
+      this.orderStatus = res.status
+    })
+  },
   methods: {
-    async init() {
+    imagePreview() {
+      ImagePreview(['https://zws-imgs-pub.ezijing.com/static/public/9d7a53493ff3c68ef33b7d9395edf718.png'])
+    },
+    async tikeOrderStatus() {
       const isLogin = await this.$store.dispatch('checkLogin')
       if (isLogin) {
-        this.getOrderStatus()
         this.orderStatusTime = setInterval(this.getOrderStatus, 1000)
       }
     },
@@ -60,6 +82,7 @@ export default {
     },
     // 支付
     goPay() {
+      this.tikeOrderStatus()
       wx.miniProgram.navigateTo({
         url: `/pages/pay/index?data=${this.requestParam.product_id}`
       })
@@ -74,8 +97,8 @@ export default {
     getOrderStatus() {
       api.getOrderStatus().then(res => {
         this.orderStatus = res.status
-        console.log(this.orderStatus)
         if (this.orderStatus === 1) {
+          this.isPopShow = true
           this.orderStatusTime && clearInterval(this.orderStatusTime)
         }
       })
@@ -91,9 +114,6 @@ export default {
       })
     }
   },
-  beforeMount() {
-    this.init()
-  },
   destroyed() {
     this.orderStatusTime && clearInterval(this.orderStatusTime)
   }
@@ -157,4 +177,48 @@ export default {
     margin-top: .4rem;
   }
 }
+.succ-pop{
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0,0,0,0.5);
+  .pop{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    width:5.9rem;
+    height:6.98rem;
+    background:rgba(255,255,255,1);
+    border-radius:.12rem;
+    .tit{
+      line-height: 1.1rem;
+      text-align: center;
+      font-size: .3rem;
+      color: #222;
+      font-weight: bold;
+    }
+    .txt{
+      width:5.1rem;
+      font-size: .3rem;
+      color:rgba(34,34,34,1);
+      margin: 0 auto;
+    }
+    img{
+      width: 4.3rem;
+      height: 4.3rem;
+      margin: 0.4rem auto;
+      display: block;
+    }
+    .close{
+      position: absolute;
+      top: -.8rem;
+      right: 0;
+      font-size: .6rem;
+      color: #fff;
+    }
+  }
+}
 </style>