增加h5支付

src/components/CourseChapter.vue

@@ -83,7 +83,9 @@ li {
     overflow: hidden;
   }
   .progress {
+    margin-left: 20px;
     font-size: 12px;
+    color: #999;
   }
 }
 </style>

src/pages/buy/api.js

+import BaseAPI from '@/api/base_api'
+
+const httpRequest = new BaseAPI(webConf)
+
+/**
+ * 获取openid
+ */
+export function getOpenId(params) {
+  return httpRequest.get('/usercenter/user/get-user-openid', params)
+}
+
+/**
+ * 获取商品
+ */
+export function getProduct(productId) {
+  return httpRequest.get(`/zy/v2/mall/product/${productId}`)
+}
+
+/**
+ * 生成订单
+ */
+export function genOrder(data) {
+  return httpRequest.post('/zy/v2/mall/order/pre', data, {
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
+  })
+}
+
+/**
+ * 获取订单
+ */
+export function getOrder(orderId) {
+  return httpRequest.get(`/zy/v2/mall/order/${orderId}`)
+}
+
+/**
+ * 获取订单状态
+ */
+export function getOrderStatus() {
+  return httpRequest.get('/zy/v2/mall/order/status')
+}

src/pages/buy/components/androidBuy.vue

+<template>
+  <div class="pay-bg2">
+    <div class="top-view">
+      <img src="../../../assets/images/pay/top-bj.png" class="bj" />
+      <img src="../../../assets/images/pay/top-btn.png" class="btn" @click="goPay" />
+      <img src="../../../assets/images/pay/c1.png" class="content" />
+    </div>
+    <div class="main-cen">
+      <img src="../../../assets/images/pay/c2.png" class="c2" />
+      <img src="../../../assets/images/pay/c3.png" class="c3" />
+      <img src="../../../assets/images/pay/c4.png" class="c4" />
+      <img src="../../../assets/images/pay/c5.png" class="c5" />
+    </div>
+    <div class="btn-box">
+      <div class="text">
+        <div class="fle">
+          <div class="l">特惠价</div>
+          <div class="c">199.00</div>
+          <div class="r">原价999.00</div>
+        </div>
+        <div class="new-b" v-if="orderStatus === 0">课程有效期剩余{{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>
+    <pay-we-chart :requestParam="requestParam"></pay-we-chart>
+    <!-- isPopShow -->
+    <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 src="../../../assets/images/pay/pay-izq.png" alt />
+        <div class="btns">添加客服微信</div>
+        <!-- <img @click="imagePreview" src="https://zws-imgs-pub.ezijing.com/static/public/dcef7bc62237a077b10d7e49c44a1e51.jpg" alt=""> -->
+      </div>
+    </div>
+    <h5-pay :productId="productId"></h5-pay>
+  </div>
+</template>
+<script>
+import { mapState } from 'vuex'
+import { ImagePreview } from 'vant'
+import * as api from '../api'
+import h5Pay from './h5Pay.vue'
+
+export default {
+  components: { h5Pay },
+  props: {
+    productId: { type: String, required: true }
+  },
+  data() {
+    return {
+      isPopShow: false,
+      expireDay: 0,
+      orderStatusTime: null,
+      orderStatus: 100
+    }
+  },
+  computed: {
+    ...mapState(['isWeapp', 'isAndroid', 'isIos', 'isVip', 'isLogin']),
+    isWeappPay() {
+      return this.isWeapp && !this.isIos
+    }
+  },
+  mounted() {
+    this.getOrder()
+  },
+  methods: {
+    // 获取订单状态
+    getOrder() {
+      api.getOrderStatus().then(response => {
+        this.orderStatus = response.status
+        this.expireDay = response.expire_day
+      })
+    },
+    imagePreview() {
+      ImagePreview(['https://zws-imgs-pub.ezijing.com/static/public/dcef7bc62237a077b10d7e49c44a1e51.jpg'])
+    },
+    tikeOrderStatus() {
+      if (this.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.productId}`
+      })
+    },
+    // 去我的订单页面
+    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)
+        }
+      })
+    }
+  },
+  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: 0.7rem;
+      width: 3.42rem;
+      height: 0.85rem;
+    }
+    .content {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      -webkit-transform: translate(-50%, 50%);
+      width: 6.58rem;
+      height: 2.82rem;
+    }
+  }
+  .main-cen {
+    padding: 1.9rem 0.52rem 1.5rem 0.52rem;
+    .c2 {
+      width: 100%;
+    }
+    .c3 {
+      margin-top: 0.5rem;
+      width: 100%;
+    }
+    .c4 {
+      margin-top: 0.5rem;
+      width: 100%;
+    }
+    .c5 {
+      margin-top: 0.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: 3.3rem;
+      height: 1rem;
+      background: linear-gradient(-90deg, rgba(204, 157, 93, 1), rgba(247, 213, 161, 1));
+      font-size: 0.37rem;
+      color: rgba(80, 41, 3, 1);
+      line-height: 1rem;
+      text-align: center;
+      font-weight: bold;
+    }
+    .text {
+      .fle {
+        display: flex;
+        div {
+          line-height: 100%;
+        }
+      }
+      .l {
+        font-size: 0.22rem;
+        color: rgba(255, 255, 255, 1);
+        line-height: 100%;
+        margin: 0.43rem 0 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-top: 0.3rem;
+        margin-left: 0.15rem;
+        font-size: 0.44rem;
+        color: rgba(255, 255, 255, 1);
+        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: 0.22rem;
+        color: rgba(204, 158, 94, 1);
+        line-height: 100%;
+        opacity: 0.9;
+        margin: 0.43rem 0 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;
+        text-decoration: line-through;
+      }
+      .new-b {
+        font-size: 0.22rem;
+        color: rgba(255, 255, 255, 1);
+        line-height: 100%;
+        opacity: 0.8;
+        margin: 0 0 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;
+      }
+    }
+  }
+}
+.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: 0.12rem;
+    .tit {
+      line-height: 1.1rem;
+      text-align: center;
+      font-size: 0.3rem;
+      color: #222;
+      font-weight: bold;
+    }
+    .txt {
+      width: 5.1rem;
+      font-size: 0.3rem;
+      color: rgba(34, 34, 34, 1);
+      margin: 0 auto;
+    }
+    // img{
+    //   width: 4.3rem;
+    //   height: 4.3rem;
+    //   margin: 0.4rem auto;
+    //   display: block;
+    // }
+    img {
+      width: 3.16rem;
+      height: 3rem;
+      margin: 0.6rem auto 0.45rem auto;
+      display: block;
+    }
+    .btns {
+      width: 4.5rem;
+      height: 0.7rem;
+      background: #c62245;
+      border-radius: 0.12rem;
+      margin: 0 auto;
+      text-align: center;
+      line-height: 0.7rem;
+      font-size: 0.3rem;
+      color: #fff;
+    }
+    .close {
+      position: absolute;
+      top: -0.8rem;
+      right: 0;
+      font-size: 0.6rem;
+      color: #fff;
+    }
+  }
+}
+.b-b-i {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+</style>

src/pages/buy/components/h5Pay.vue

+<template>
+  <div></div>
+</template>
+
+<script>
+import * as api from '../api.js'
+
+export default {
+  name: 'wxPay',
+  props: {
+    productId: { type: String, required: true }
+  },
+  data() {
+    return {
+      openId: '',
+      order: { options: {} }
+    }
+  },
+  computed: {
+    // 用户信息
+    user() {
+      return this.$store.state.user
+    },
+    // 是否登录
+    isLogin() {
+      return this.$store.state.isLogin
+    }
+  },
+  methods: {
+    // 获取openid
+    getOpenId() {
+      api.getOpenId({ id: this.user.id, identity: 'transport' }).then(response => {
+        this.openId = response.data.openid
+        // 生成订单
+        this.genOrder()
+      })
+    },
+    // 生成订单
+    genOrder() {
+      const params = {
+        product_id: this.productId,
+        open_id: this.openId,
+        type: 'certs-h5'
+      }
+      api.genOrder(params).then(response => {
+        this.order = response.data
+        // 调起微信支付
+        this.wxPay()
+      })
+    },
+    // 微信支付
+    wxPay() {
+      const options = this.order.options
+      wx.chooseWXPay({
+        timestamp: options.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
+        nonceStr: options.nonceStr, // 支付签名随机串，不长于 32 位
+        package: `prepay_id=${this.order.prepay_id}`, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
+        signType: options.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
+        paySign: options.paySign, // 支付签名
+        success: res => {
+          this.$toast('支付成功')
+          // 支付成功后的回调函数
+          this.$emit('success', res)
+        },
+        fail: error => {
+          this.$toast('支付失败')
+          this.$emti('fail', error)
+        }
+      })
+    },
+    pay() {
+      this.getOpenId()
+    }
+  }
+}
+</script>

src/pages/buy/components/iosBuy.vue

+<template>
+  <div class="pay-bg2">
+    <div class="top-view">
+      <img src="../../../assets/images/pay/top-bj-ios.png" class="bj" />
+      <img src="../../../assets/images/pay/top-btn-ios.png" class="btn" @click="handlePay" />
+      <img src="../../../assets/images/pay/c1.png" class="content" />
+    </div>
+    <div class="main-cen">
+      <img src="../../../assets/images/pay/c2.png" class="c2" />
+      <img src="../../../assets/images/pay/c3.png" class="c3" />
+      <img src="../../../assets/images/pay/c4.png" class="c4" />
+      <img src="../../../assets/images/pay/c5.png" class="c5" />
+    </div>
+    <div class="btn-box" v-if="isVip">
+      <div class="text">
+        <div class="fle">
+          <div class="l">特惠价</div>
+          <div class="c">199.00</div>
+          <div class="r">原价999.00</div>
+        </div>
+        <div class="new-b" v-if="orderStatus === 0">课程有效期剩余{{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 @click="goPayIos" src="../../../assets/images/pay/bottom-btn-ios.png" class="b-b-i" v-else />
+    <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 src="../../../assets/images/pay/pay-izq.png" alt />
+        <div class="btns">添加客服微信</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from 'vuex'
+import { ImagePreview } from 'vant'
+import * as api from '@/api/pay.js'
+import { getUser } from '@/api/account'
+
+export default {
+  metaInfo: {
+    title: '课程详情'
+  },
+  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
+    }
+  },
+  computed: {
+    ...mapState(['isWeapp', 'isAndroid', 'isIos', 'isVip', 'isLogin']),
+    isWeappPay() {
+      return this.isWeapp && !this.isIos
+    }
+  },
+  methods: {
+    getOrder() {
+      this.isLogin &&
+        api.getOrderStatus().then(res => {
+          this.expireDay = res.expire_day
+          this.orderStatus = res.status
+        })
+    },
+    imagePreview() {
+      ImagePreview(['https://zws-imgs-pub.ezijing.com/static/public/dcef7bc62237a077b10d7e49c44a1e51.jpg'])
+    },
+    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
+          }
+        })
+      })
+    },
+    handlePay() {
+      this.$emit('pay')
+    }
+  },
+  mounted() {
+    this.getOrder()
+  },
+  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: 0.7rem;
+      width: 3.42rem;
+      height: 0.85rem;
+    }
+    .content {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      -webkit-transform: translate(-50%, 50%);
+      width: 6.58rem;
+      height: 2.82rem;
+    }
+  }
+  .main-cen {
+    padding: 1.9rem 0.52rem 1.5rem 0.52rem;
+    .c2 {
+      width: 100%;
+    }
+    .c3 {
+      margin-top: 0.5rem;
+      width: 100%;
+    }
+    .c4 {
+      margin-top: 0.5rem;
+      width: 100%;
+    }
+    .c5 {
+      margin-top: 0.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: 3.3rem;
+      height: 1rem;
+      background: linear-gradient(-90deg, rgba(204, 157, 93, 1), rgba(247, 213, 161, 1));
+      font-size: 0.37rem;
+      color: rgba(80, 41, 3, 1);
+      line-height: 1rem;
+      text-align: center;
+      font-weight: bold;
+    }
+    .text {
+      .fle {
+        display: flex;
+        div {
+          line-height: 100%;
+        }
+      }
+      .l {
+        font-size: 0.22rem;
+        color: rgba(255, 255, 255, 1);
+        line-height: 100%;
+        margin: 0.43rem 0 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-top: 0.3rem;
+        margin-left: 0.15rem;
+        font-size: 0.44rem;
+        color: rgba(255, 255, 255, 1);
+        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: 0.22rem;
+        color: rgba(204, 158, 94, 1);
+        line-height: 100%;
+        opacity: 0.9;
+        margin: 0.43rem 0 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;
+        text-decoration: line-through;
+      }
+      .new-b {
+        font-size: 0.22rem;
+        color: rgba(255, 255, 255, 1);
+        line-height: 100%;
+        opacity: 0.8;
+        margin: 0 0 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;
+      }
+    }
+  }
+}
+.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: 0.12rem;
+    .tit {
+      line-height: 1.1rem;
+      text-align: center;
+      font-size: 0.3rem;
+      color: #222;
+      font-weight: bold;
+    }
+    .txt {
+      width: 5.1rem;
+      font-size: 0.3rem;
+      color: rgba(34, 34, 34, 1);
+      margin: 0 auto;
+    }
+    // img{
+    //   width: 4.3rem;
+    //   height: 4.3rem;
+    //   margin: 0.4rem auto;
+    //   display: block;
+    // }
+    img {
+      width: 3.16rem;
+      height: 3rem;
+      margin: 0.6rem auto 0.45rem auto;
+      display: block;
+    }
+    .btns {
+      width: 4.5rem;
+      height: 0.7rem;
+      background: #c62245;
+      border-radius: 0.12rem;
+      margin: 0 auto;
+      text-align: center;
+      line-height: 0.7rem;
+      font-size: 0.3rem;
+      color: #fff;
+    }
+    .close {
+      position: absolute;
+      top: -0.8rem;
+      right: 0;
+      font-size: 0.6rem;
+      color: #fff;
+    }
+  }
+}
+.b-b-i {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+</style>

src/pages/buy/index.vue

+<template>
+  <div class="pay-bg2">
+    <div class="top-view">
+      <img src="../../assets/images/pay/top-bj.png" class="bj" />
+      <img src="../../assets/images/pay/top-btn.png" class="btn" @click="goPay" />
+      <img src="../../assets/images/pay/c1.png" class="content" />
+    </div>
+    <div class="main-cen">
+      <img src="../../assets/images/pay/c2.png" class="c2" />
+      <img src="../../assets/images/pay/c3.png" class="c3" />
+      <img src="../../assets/images/pay/c4.png" class="c4" />
+      <img src="../../assets/images/pay/c5.png" class="c5" />
+    </div>
+    <div class="btn-box">
+      <div class="text">
+        <div class="fle">
+          <div class="l">特惠价</div>
+          <div class="c">199.00</div>
+          <div class="r">原价999.00</div>
+        </div>
+        <div class="new-b" v-if="orderStatus === 0">课程有效期剩余{{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="goPay">待支付</div>
+      <div class="btn" @click="goPay" v-if="orderStatus === 0">续费</div>
+    </div>
+    <!-- popVisible -->
+    <div class="succ-pop" v-if="popVisible">
+      <div class="pop">
+        <div class="close" @click="popVisible = false">×</div>
+        <div class="tit">恭喜您，课程已购买成功！</div>
+        <div class="txt">请添加助教微信，有任何问题可随时沟通老师。</div>
+        <img
+          @click="imagePreview"
+          src="https://zws-imgs-pub.ezijing.com/static/public/dcef7bc62237a077b10d7e49c44a1e51.jpg"
+        />
+      </div>
+    </div>
+    <h5-pay :productId="productId" ref="h5pay"></h5-pay>
+  </div>
+</template>
+<script>
+import { mapState } from 'vuex'
+import { ImagePreview } from 'vant'
+import * as api from './api'
+import h5Pay from './components/h5Pay.vue'
+
+export default {
+  components: { h5Pay },
+  data() {
+    const productId = webConf.isDev === 'production' ? '6684359515615264768' : '6682927830365372416'
+    return {
+      productId,
+      popVisible: false,
+      expireDay: 0,
+      orderStatusTimer: null,
+      orderStatus: 100
+    }
+  },
+  computed: {
+    ...mapState(['isWeapp', 'isAndroid', 'isIos', 'isVip', 'isLogin']),
+    isWeappPay() {
+      return this.isWeapp && !this.isIos
+    }
+  },
+  methods: {
+    // 获取订单状态
+    getOrderStatus() {
+      return api.getOrderStatus().then(response => {
+        this.orderStatus = response.status
+        this.expireDay = response.expire_day
+        return response
+      })
+    },
+    // 自动获取订单状态
+    autoGetOrderStatus() {
+      this.orderStatusTimer = setInterval(() => {
+        this.getOrderStatus().then(response => {
+          if (this.orderStatus === 1) {
+            this.popVisible = true
+            this.clearOrderStatusTimer()
+          }
+        })
+      }, 1000)
+    },
+    // 清除订单定时
+    clearOrderStatusTimer() {
+      this.orderStatusTimer && clearInterval(this.orderStatusTimer)
+    },
+    // 预览图片
+    imagePreview() {
+      ImagePreview(['https://zws-imgs-pub.ezijing.com/static/public/dcef7bc62237a077b10d7e49c44a1e51.jpg'])
+    },
+    // 已购买
+    goHome() {
+      this.$toast('您已购买全部服务，可直接使用')
+    },
+    // 支付
+    goPay() {
+      if (this.orderStatus === 1) {
+        this.$toast('您已购买全部服务，可直接使用')
+        return false
+      }
+      // 自动获取订单状态
+      this.autoGetOrderStatus()
+      // 调起微信支付
+      this.$refs.h5pay.pay()
+    }
+  },
+  mounted() {
+    this.isLogin && this.getOrderStatus()
+  },
+  destroyed() {
+    this.clearOrderStatusTimer()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.pay-bg2 {
+  .top-view {
+    position: relative;
+    .bj {
+      width: 100%;
+    }
+    .btn {
+      position: absolute;
+      top: 3.25rem;
+      right: 0.7rem;
+      width: 3.42rem;
+      height: 0.85rem;
+    }
+    .content {
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translate(-50%, 50%);
+      width: 6.58rem;
+      height: 2.82rem;
+    }
+  }
+  .main-cen {
+    padding: 1.9rem 0.52rem 1.5rem 0.52rem;
+    .c2 {
+      width: 100%;
+    }
+    .c3 {
+      margin-top: 0.5rem;
+      width: 100%;
+    }
+    .c4 {
+      margin-top: 0.5rem;
+      width: 100%;
+    }
+    .c5 {
+      margin-top: 0.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: 3.3rem;
+      height: 1rem;
+      background: linear-gradient(-90deg, rgba(204, 157, 93, 1), rgba(247, 213, 161, 1));
+      font-size: 0.37rem;
+      color: rgba(80, 41, 3, 1);
+      line-height: 1rem;
+      text-align: center;
+      font-weight: bold;
+    }
+    .text {
+      .fle {
+        display: flex;
+        div {
+          line-height: 100%;
+        }
+      }
+      .l {
+        font-size: 0.22rem;
+        color: rgba(255, 255, 255, 1);
+        line-height: 100%;
+        margin: 0.43rem 0 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-top: 0.3rem;
+        margin-left: 0.15rem;
+        font-size: 0.44rem;
+        color: rgba(255, 255, 255, 1);
+        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: 0.22rem;
+        color: rgba(204, 158, 94, 1);
+        line-height: 100%;
+        opacity: 0.9;
+        margin: 0.43rem 0 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;
+        text-decoration: line-through;
+      }
+      .new-b {
+        font-size: 0.22rem;
+        color: rgba(255, 255, 255, 1);
+        line-height: 100%;
+        opacity: 0.8;
+        margin: 0 0 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;
+      }
+    }
+  }
+}
+.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: 0.12rem;
+    .tit {
+      line-height: 1.1rem;
+      text-align: center;
+      font-size: 0.3rem;
+      color: #222;
+      font-weight: bold;
+    }
+    .txt {
+      width: 5.1rem;
+      font-size: 0.3rem;
+      color: rgba(34, 34, 34, 1);
+      margin: 0 auto;
+    }
+    // img{
+    //   width: 4.3rem;
+    //   height: 4.3rem;
+    //   margin: 0.4rem auto;
+    //   display: block;
+    // }
+    img {
+      width: 3.16rem;
+      height: 3rem;
+      margin: 0.6rem auto 0.45rem auto;
+      display: block;
+    }
+    .btns {
+      width: 4.5rem;
+      height: 0.7rem;
+      background: #c62245;
+      border-radius: 0.12rem;
+      margin: 0 auto;
+      text-align: center;
+      line-height: 0.7rem;
+      font-size: 0.3rem;
+      color: #fff;
+    }
+    .close {
+      position: absolute;
+      top: -0.8rem;
+      right: 0;
+      font-size: 0.6rem;
+      color: #fff;
+    }
+  }
+}
+.b-b-i {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+</style>

src/pages/login/login.vue

@@ -205,7 +205,11 @@ export default {
               wx.miniProgram.postMessage({ data: { token: '' } })
               wx.miniProgram.navigateBack()
             } else {
-              this.$router.replace('/')
+              if (this.redirectURI) {
+                window.location.href = this.redirectURI
+              } else {
+                this.$router.replace('/')
+              }
             }
             done(true)
           }

src/router/routes.js

@@ -182,6 +182,12 @@ export default [
     component: () => import('../pages/pay/index.vue')
     // meta: { requiredLogin: true }
   },
+  {
+    path: '/buy',
+    name: 'buy',
+    component: () => import('../pages/buy/index.vue')
+    // meta: { requiredLogin: true }
+  },
   {
     path: '/payPage',
     name: 'payPage',