You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

163 lines
3.9 KiB

3 years ago
<template>
<view class="unlock-box">
<view class="lock-list acea-row row-between">
<view class="lock-item" :class="active == 0 ? 'lock-item-active' : ''" @click="tabClick(0)" v-if="chargeType == 1">
<view>解锁单篇文章</view>
<view class="price"><text></text>{{articleCharge}}</view>
<view class="sm-word line1">{{articleName}}</view>
<view class="sm-word">永久阅读权</view>
</view>
<view class="lock-item" :class="active == 0 ? 'lock-item-active' : ''" @click="tabClick(0)" v-if="chargeType == 2">
<view>解锁单篇文章</view>
<view class="price">{{articleCharge}}<text>积分</text></view>
<view class="sm-word line1">{{articleName}}</view>
<view class="sm-word">永久阅读权</view>
</view>
<view class="lock-item" :class="active == 1 ? 'lock-item-active' : ''" @click="tabClick(1)">
<view>解锁所有文章</view>
<view class="price"><text></text>{{total}}</view>
<view class="sm-word">海量文章永久畅读</view>
</view>
</view>
<view class="submit-btn" @click="submitClick">确认支付</view>
</view>
</template>
<script>
import { getUnlockAllArticlePrice, unlockArticle } from '@/api/knowledge';
export default{
data(){
return {
id:'',
articleName:'',
active: 0,
total:0,
chargeType:0,
articleCharge:0,
}
},
onLoad(){
this.id = this.$yroute.query.id;
this.articleName = this.$yroute.query.name;
this.chargeType = this.$yroute.query.chargeType;
this.articleCharge = this.$yroute.query.articleCharge;
getUnlockAllArticlePrice().then((res)=>{
if(res.success){
this.total = res.data
}
})
},
methods:{
tabClick(idx){
this.active = idx
},
submitClick(){
let data = {};
let that = this;
if(this.active == 0){
data.articleId = this.id;
data.isLockAll = false
} else{
data.isLockAll = true
}
uni.showModal({
title: '提示',
content: '是否确认支付?',
success: function (res) {
if (res.confirm) {
unlockArticle(data).then((response)=>{
if(response.success){
// console.log(response.data.result.jsConfig)?
// return
let orderInfo = response.data.result.jsConfig;
that.payment(orderInfo)
}
})
} else if (res.cancel) {
console.log('用户点击取消');
}
}
})
},
payment(orderInfo){
// 调用支付接口
uni.requestPayment({
provider: 'wxpay',
...orderInfo,
signType: 'MD5',
success: success => {
uni.showToast({
title: '支付成功',
icon: 'success',
duration: 3000,
})
let time = setTimeout(() => {
clearTimeout(time)
uni.navigateBack({
delta:1
})
}, 3000)
},
fail: error => {
console.log(error)
if (error.errMsg == 'requestPayment:fail cancel') {
uni.showToast({ title: '已取消支付', icon: 'none', duration: 5000 })
} else {
uni.showToast({ title: error || error.msg, icon: 'none', duration: 5000 })
}
},
})
},
}
}
</script>
<style scoped lang="less">
.unlock-box{
width: 100%;
min-height: 100%;
background: #fff;
padding: 30rpx;
.lock-list{
.lock-item{
width: 340rpx;
height: 324rpx;
background: #F4F4F4;
color: #222;
font-size: 32rpx;
padding-top: 60rpx;
padding-left: 40rpx;
.price{
font-size: 60rpx;
color: #EB5744;
line-height: 82rpx;
margin: 10rpx 0;
text{
font-size: 40rpx;
}
}
.sm-word{
font-size: 24rpx;
color: #666666;
}
}
.lock-item-active{
background: #FDFBEB;
border: 3rpx solid #FFC46B;
}
}
.submit-btn{
width: 340rpx;
height: 80rpx;
text-align: center;
line-height: 80rpx;
font-size: 32rpx;
color: #fff;
background: #F99C10;
border-radius: 44rpx;
margin: 72rpx auto;
}
}
</style>