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
4.0 KiB
163 lines
4.0 KiB
<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 => { |
|
console.log(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>
|
|
|