新增购买页面

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

@@ -286,7 +286,7 @@ export default {
     collectQuestion() {
       this.setCurrentCollect()
       const queIds = this.collect.currentId
-      console.log(queIds)
+      // console.log(queIds)
       this.collect.currentPages ? this.removeColl(queIds, () => {
         Toast('取消收藏成功')
         this.collect.currentPages = false

src/pages/pay/index.vue

@@ -78,7 +78,7 @@ export default {
     },
     // 已购买
     goHome() {
-      this.$toast('您已购买！')
+      this.$toast('您已购买全部服务，可直接使用')
     },
     // 支付
     goPay() {

src/pages/pay/payPage.vue

+<template>
+  <div class="pay-bg2">
+    <div class="top-view">
+      <img src="../../assets/images/pay/top-bj.png" alt="" class="bj">
+      <img src="../../assets/images/pay/top-btn.png" alt="" class="btn" @click="goPay">
+      <img src="../../assets/images/pay/c1.png" alt="" class="content">
+    </div>
+    <div class="main-cen">
+      <img src="../../assets/images/pay/c2.png" alt="" class="c2">
+      <img src="../../assets/images/pay/c3.png" alt="" class="c3">
+    </div>
+    <div class="btn-box">
+      <div class="text">
+        <div class="l">特惠价</div>
+        <div class="c">199.00</div>
+        <div class="r" v-if="orderStatus != 0">原价999.00</div>
+        <div class="r" v-else>课程有效期剩余{{expireDay}}天</div>
+      </div>
+      <div class="btn" @click="goPay" v-if="orderStatus === 100">立即购买</div>
+      <div class="btn" v-if="orderStatus === 1" @click="goHome">已购买</div>
+      <div class="btn" v-if="orderStatus === -1" @click="goMyOrder">待支付</div>
+      <div class="btn" @click="goPay" v-if="orderStatus === 0">续费</div>
+    </div>
+    <!-- <img src="../../assets/images/pay1.png" alt />
+    <img src="../../assets/images/pay2.png" alt />
+    <div class="img-con">
+      <img src="../../assets/images/pay3.png" alt />
+      <img src="../../assets/images/pay4.png" class="img4" alt />
+    </div>
+    <div class="pay-btn">
+      <div class="num">
+        ¥
+        <span>199</span>.00
+        <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>
+      <div class="btn" v-if="orderStatus === -1" @click="goMyOrder">待支付</div>
+      <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'
+
+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, // 提前设定
+        open_id: '', // 通过微信授权获取
+        prepay_id: '', // 通过调用接口获取
+        app_id: '', // 提前设定
+        app_secret: '' // 提前设定
+      },
+      orderStatusTime: null,
+      orderStatus: 100
+    }
+  },
+  mounted() {
+    api.getOrderStatus().then(res => {
+      this.expireDay = res.expire_day
+      this.orderStatus = res.status
+    })
+  },
+  methods: {
+    imagePreview() {
+      ImagePreview(['https://zws-imgs-pub.ezijing.com/static/public/9d7a53493ff3c68ef33b7d9395edf718.png'])
+    },
+    async tikeOrderStatus() {
+      const isLogin = await this.$store.dispatch('checkLogin')
+      if (isLogin) {
+        this.orderStatusTime = setInterval(this.getOrderStatus, 1000)
+      }
+    },
+    // 已购买
+    goHome() {
+      this.$toast('您已购买全部服务，可直接使用')
+    },
+    // 支付
+    goPay() {
+      if (this.orderStatus === 1) {
+        this.$toast('您已购买全部服务，可直接使用')
+        return false
+      }
+      this.tikeOrderStatus()
+      wx.miniProgram.navigateTo({
+        url: `/pages/pay/index?data=${this.requestParam.product_id}`
+      })
+    },
+    // 去我的订单页面
+    goMyOrder() {
+      wx.miniProgram.navigateTo({
+        url: `/pages/web/index?src=${window.location.origin}/my/buyCourses`
+      })
+    },
+    // 获取订单状态
+    getOrderStatus() {
+      api.getOrderStatus().then(res => {
+        this.orderStatus = res.status
+        if (this.orderStatus === 1) {
+          this.isPopShow = true
+          this.orderStatusTime && clearInterval(this.orderStatusTime)
+        }
+      })
+    },
+    // 获取openID
+    getOpenid() {
+      getUser().then(res => {
+        api.getOpenid({ id: res.id, identity: 'transport' }).then(res => {
+          if (res.code === 0) {
+            this.requestParam.open_id = res.data.openid
+          }
+        })
+      })
+    }
+  },
+  destroyed() {
+    this.orderStatusTime && clearInterval(this.orderStatusTime)
+  }
+}
+</script>
+<style lang="scss" scoped>
+.pay-bg2{
+  .top-view{
+    position: relative;
+    .bj{
+      width: 100%;
+    }
+    .btn{
+      position: absolute;
+      top: 3.25rem;
+      right: .7rem;
+      width: 3.42rem;
+      height: .85rem;
+    }
+    .content{
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      -webkit-transform: translate(-50%, 50%);
+      width: 6.58rem;
+      height: 2.82rem;
+    }
+  }
+  .main-cen{
+    padding: 1.9rem .52rem 1.5rem .52rem;
+    .c2{
+      width: 100%;
+    }
+    .c3{
+      margin-top: .5rem;
+      width: 100%;
+    }
+  }
+  .btn-box{
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height:1rem;
+    background:rgba(171,27,48,1);
+    .btn{
+      position: absolute;
+      top: 0;
+      right: 0;
+      width:2.38rem;
+      height:1rem;
+      background:linear-gradient(-90deg,rgba(204,158,94,1),rgba(247,214,161,1));
+      font-size:.37rem;
+      color:rgba(81,42,4,1);
+      line-height:1rem;
+      text-align: center;
+    }
+    .text{
+      display: flex;
+      .l{
+        font-size:.22rem;
+        text-decoration:line-through;
+        color:rgba(255,255,255,1);
+        line-height:100%;
+        margin: .46rem 0 0 .34rem;
+        background:linear-gradient(-90deg,rgba(204,158,94,1) 0%, rgba(247,214,161,1) 100%);
+        -webkit-background-clip:text;
+        -webkit-text-fill-color:transparent;
+        opacity:0.8;
+      }
+      .c{
+        margin-left: .15rem;
+        font-size:.44rem;
+        color:rgba(255,255,255,1);
+        line-height:1rem;
+        background:linear-gradient(-90deg,rgba(204,158,94,1) 0%, rgba(247,214,161,1) 100%);
+        -webkit-background-clip:text;
+        -webkit-text-fill-color:transparent;
+      }
+      .r{
+        font-size:.22rem;
+        text-decoration:line-through;
+        color:rgba(255,255,255,1);
+        line-height:100%;
+        opacity:0.8;
+        margin: .44rem 0 0 .17rem;
+        background:linear-gradient(-90deg,rgba(204,158,94,1) 0%, rgba(247,214,161,1) 100%);
+        -webkit-background-clip:text;
+        -webkit-text-fill-color:transparent;
+      }
+    }
+  }
+}
+</style>

src/router/routes.js

@@ -189,6 +189,12 @@ export default [
     component: () => import('../pages/pay/index.vue'),
     meta: { requiredLogin: true }
   },
+  {
+    path: '/payPage',
+    name: 'payPage',
+    component: () => import('../pages/pay/payPage.vue')
+    // meta: { requiredLogin: true }
+  },
   // 下载资料
   {
     path: '/download',