|
|
@@ -0,0 +1,198 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>朗读小咖秀</title>
|
|
|
+ </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: 14px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 20px;
|
|
|
+ }
|
|
|
+ .commodity {
|
|
|
+ position: relative;
|
|
|
+ width: 97px;
|
|
|
+ height: 97px;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 2px solid white;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ position: absolute;
|
|
|
+ width: 27px;
|
|
|
+ height: 18px;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ .aborder {
|
|
|
+ border-color: #ff935e;
|
|
|
+ }
|
|
|
+ .c-1 {
|
|
|
+ background: url('http://reader-wx.ai160.com/images/reader/v3/299.png');
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+ .c-2 {
|
|
|
+ background: url('http://reader-wx.ai160.com/images/reader/v3/99.png');
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+ .c-3 {
|
|
|
+ background: url('http://reader-wx.ai160.com/images/reader/v3/15.png');
|
|
|
+ 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: 15px 18px;
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <body>
|
|
|
+ <div id="container">
|
|
|
+ <div class="commoditys" v-if="products.length>0">
|
|
|
+ <div :class="['commodity c-1', active==products[0].id?'aborder':'']" @click="selected(products[0])">
|
|
|
+ <img src="http://reader-wx.ai160.com/images/reader/v3/active.png" class="active" v-show="active==products[0].id" />
|
|
|
+ </div>
|
|
|
+ <div :class="['commodity c-2', active==products[2].id?'aborder':'']" @click="selected(products[2])">
|
|
|
+ <img src="http://reader-wx.ai160.com/images/reader/v3/active.png" class="active" v-show="active==products[2].id" />
|
|
|
+ </div>
|
|
|
+ <div :class="['commodity c-3', active==products[1].id?'aborder':'']" @click="selected(products[1])">
|
|
|
+ <img src="http://reader-wx.ai160.com/images/reader/v3/active.png" class="active" v-show="active==products[1].id" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="payBox">
|
|
|
+ <div class="left">
|
|
|
+ 终身会员
|
|
|
+ <span class="price">{{product.price/100}}</span>
|
|
|
+ 元
|
|
|
+ </div>
|
|
|
+ <div class="pay" @click="pay">立即支付</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </body>
|
|
|
+ <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
|
|
|
+ <script src="https://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
|
|
|
+ <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script>
|
|
|
+ <script>
|
|
|
+ let xhr = new XMLHttpRequest()
|
|
|
+
|
|
|
+ let app = new Vue({
|
|
|
+ el: '#container',
|
|
|
+ data: {
|
|
|
+ products: [],
|
|
|
+ product: {},
|
|
|
+ active: ''
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ axios({
|
|
|
+ method: 'get',
|
|
|
+ url: 'https://reader-api.efunbox.cn/wx/v3/product/learn',
|
|
|
+ headers: {
|
|
|
+ uid: 'd83d947655f6455a96f4197d31afa6d4',
|
|
|
+ channelCode: '3001'
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ this.products = res.data.data.productList
|
|
|
+ console.log(this.products)
|
|
|
+ this.active = res.data.data.productList[0].id
|
|
|
+ this.product = res.data.data.productList[0]
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ selected(e) {
|
|
|
+ this.active = e.id
|
|
|
+ this.product = e
|
|
|
+ },
|
|
|
+ pay() {
|
|
|
+ axios({
|
|
|
+ method: 'post',
|
|
|
+ url: 'https://reader-api.efunbox.cn/order/create',
|
|
|
+ headers: {
|
|
|
+ uid: 'd83d947655f6455a96f4197d31afa6d4',
|
|
|
+ channelCode: '3001'
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ productId: this.active
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ axios({
|
|
|
+ method: 'post',
|
|
|
+ url: 'https://reader-api.efunbox.cn/wx/pay/efun',
|
|
|
+ headers: {
|
|
|
+ uid: 'd83d947655f6455a96f4197d31afa6d4',
|
|
|
+ channelCode: '3001'
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ payType: 'WXPAY',
|
|
|
+ orderId: res.data.data
|
|
|
+ }
|
|
|
+ }).then(res => {})
|
|
|
+ /* WeixinJSBridge.invoke(
|
|
|
+ 'getBrandWCPayRequest',
|
|
|
+ {
|
|
|
+ appId: res.appId, //公众号ID，由商户传入2
|
|
|
+ timeStamp: res.timeStamp, //时间戳，自1970年以来的秒数
|
|
|
+ nonceStr: res.nonceStr, //随机串
|
|
|
+ package: res.package,
|
|
|
+ signType: res.signType, //微信签名方式：
|
|
|
+ paySign: res.paySign //微信签名
|
|
|
+ },
|
|
|
+ async res => {
|
|
|
+ if (res.err_msg == 'get_brand_wcpay_request:ok') {
|
|
|
+ payIsSuccess()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ) */
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getWxCode() {
|
|
|
+ const appId = 'wx35303262fa755a18'
|
|
|
+ const redirect_uri = encodeURIComponent('https://zxtx-web.efunbox.cn/login')
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ </script>
|
|
|
+</html>
|
bayi
