<!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 { this.getWxCode() } }, methods: { 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() }, 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) */ } } }) </script> </html>