Rorschach
/
reader


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>朗读小咖秀</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
    <script src="https://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    #container {
      overflow: hidden;
      width: 100%;
      height: 51.1733rem;
      margin-bottom: 1.8667rem;
      background: url('http://reader-wx.ai160.com/images/reader/v3/bg.jpg') no-repeat;
      background-size: 100% 100%;
    }
    .commoditys {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 5.2267rem auto;
      width: 9.0133rem;
      height: 3.4667rem;
      padding: 0.3733rem 0.2667rem;
      box-sizing: border-box;
      border-radius: 20px;
    }
    .commodity {
      position: relative;
      width: 2.5867rem;
      height: 2.5867rem;
      border-radius: 6px;
      padding: 0.0533rem;
      background-clip: content-box !important;
      border: 2px solid white;
    }
    .active {
      position: absolute;
      width: 0.72rem;
      height: 0.48rem;
      right: 0;
      bottom: 0;
    }
    .aborder {
      border-color: #ff935e;
    }
    .c-1 {
      background: url('http://reader-wx.ai160.com/images/reader/v3/299.png') no-repeat;
      background-size: contain;
    }
    .c-2 {
      background: url('http://reader-wx.ai160.com/images/reader/v3/99.png') no-repeat;
      background-size: contain;
    }
    .c-3 {
      background: url('http://reader-wx.ai160.com/images/reader/v3/15.png') no-repeat;
      background-size: contain;
    }
    .payBox {
      position: fixed;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 0.4rem 0.48rem;
      background: white;
    }
    .payBox .left {
      font-size: 0.48rem;
    }
    .price {
      color: #ff9108;
      font-size: 0.64rem;
      font-weight: bold;
    }
    .pay {
      padding: 0.1867rem 0.6933rem;
      background: #ff9108;
      color: white;
      font-weight: 500;
      border-radius: 0.6133rem;
      font-size: 0.48rem;
    }
    .mask {
      position: fixed;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100vw;
      height: 100vh;
      left: 0;
      top: 0;
      background-color: rgba(0, 0, 0, 0.568);
    }
    .payTips {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 6.4533rem;
      height: 6.96rem;
      padding: 1.0133rem;
      box-sizing: border-box;
      border-radius: 11px;
      background: white;
    }
    .simg {
      width: 1.6rem;
      height: 1.7867rem;
    }
    .t1 {
      margin: 0.8rem 0;
      font-size: 0.48rem;
    }
    .goXkx {
      padding: 0.1rem 1.3333rem;
      font-size: 0.4267rem;
      color: white;
      background: linear-gradient(180deg, #66d751 0%, #65d952 100%);
      border-radius: 0.4rem;
    }
  </style>
  <body>
    <div id="container">
      <div class="commoditys" v-if="products.length>0">
        <div v-for="item in products" ::key="item.id" :class="['commodity',item.payType=='LIFELONG'?'c-1':item.payType=='YEAR'?'c-2':'c-3', active==item.id?'aborder':'']" @click="selected(item)">
          <img src="http://reader-wx.ai160.com/images/reader/v3/active.png" class="active" v-show="active==item.id" />
        </div>
      </div>
      <div class="payBox" v-if="active!=''">
        <div class="left">
          {{product.title}}
          <span class="price">{{product.price/100}}</span>
          元
        </div>
        <div class="pay" @click="pay">立即支付</div>
      </div>
      <div class="mask" v-if="mask">
        <div class="payTips">
          <img src="https://reader-wx.ai160.com/images/reader/v3/right.webp" class="simg" />
          <div class="t1">支付成功</div>
          <div class="goXkx" @click="closeMask">确认</div>
        </div>
      </div>
    </div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script>
  <script>
    let app = new Vue({
      el: '#container',
      data: {
        products: [],
        product: {},
        active: '',
        uid: '',
        code: '',
        mask: false
      },
      mounted() {
        // 原始URL
        var url = location.search
        // 创建URLSearchParams对象
        var searchParams = new URLSearchParams(url)
        // 获取code参数的值
        var code = searchParams.get('code')
        var first = searchParams.get('first')
        var uid = searchParams.get('uid')
        if (uid) {
          this.uid = uid
        }
        if (first) {
          axios({
            method: 'post',
            url: 'https://reader-api.ai160.com/wx/userEvent/v2',
            headers: {
              uid: this.uid,
              channelCode: '3001'
            },
            data: {
              action: 'IOS_PAY_ENTER'
            }
          })
        }
        if (code) {
          this.code = code
          axios({
            method: 'get',
            url: 'https://reader-api.ai160.com/wx/v3/product/learn',
            headers: {
              uid: this.uid,
              // uid: 'd83d947655f6455a96f4197d31afa6d4',
              channelCode: '3001'
            }
          }).then(res => {
            this.products = res.data.data.productList
            this.active = res.data.data.productList[0].id
            this.product = res.data.data.productList[0]
          })
        } else {
          // 首次进来参数不含code，需要前端跳转后获取code
          this.getWxCode()
        }
      },
      methods: {
        getWxCode() {
          setTimeout(() => {
            const appId = 'wxf05800eea975a68b'
            const redirect_uri = encodeURIComponent('https://h5-pay.ai160.com/reader-ios?uid=' + this.uid)
            // const redirect_uri = encodeURIComponent('https://h5-pay.ai160.com/reader-ios?uid=d83d947655f6455a96f4197d31afa6d4')
            const url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appId + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_base#wechat_redirect'
            location.href = url
          }, 300)
        },
        
        selected(e) {
          this.active = e.id
          this.product = e
        },
        pay() {
          axios({
            method: 'post',
            url: 'https://reader-api.ai160.com/order/create',
            headers: {
              uid: this.uid,
              // uid: 'd83d947655f6455a96f4197d31afa6d4',
              channelCode: '3001'
            },
            data: {
              productId: this.active
            }
          }).then(res => {
            axios({
              method: 'post',
              url: 'https://reader-api.ai160.com/wx/pay/efun',
              headers: {
                uid: this.uid,
                channelCode: '3001'
              },
              data: {
                payType: 'WXPAY',
                code: this.code,
                orderId: res.data.data
              }
            }).then(res => {
              let options = res.data.data
              WeixinJSBridge.invoke(
                'getBrandWCPayRequest',
                {
                  appId: options.appId, //公众号ID，由商户传入2
                  timeStamp: options.timeStamp, //时间戳，自1970年以来的秒数
                  nonceStr: options.nonceStr, //随机串
                  package: options.package,
                  signType: options.signType, //微信签名方式：
                  paySign: options.sign //微信签名
                },
                async res => {
                  if (res.err_msg == 'get_brand_wcpay_request:ok') {
                    this.mask = true
                    axios({
                      method: 'post',
                      url: 'https://reader-api.ai160.com/wx/userEvent/v2',
                      headers: {
                        uid: this.uid,
                        channelCode: '3001'
                      },
                      data: {
                        action: 'IOS_PAY_SUCCESS',
                        targetContent: this.product.title
                      }
                    })
                  } else {
                    this.getWxCode()
                  }
                }
              )
            })
          })
          axios({
            method: 'post',
            url: 'https://reader-api.ai160.com/wx/userEvent/v2',
            headers: {
              uid: this.uid,
              channelCode: '3001'
            },
            data: {
              action: 'IOS_PAY_ACTIVITY'
            }
          })
        },
        closeMask() {
          this.mask = false
          this.getWxCode()
        }
      }
    })
  </script>
</html>