chanyishenghuo-uniapp/pages/knowledge/unlock.vue

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