<!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>