JianjianStreet-H5/pages/my/list-renzhen.vue

<template>
	<view>
		
		<view v-if="userInfo.isPay === 0">
			<view class="from">
				<view class="call-title">
					会员权益:
				</view>
				<view class="call-title">
					1.每天不限制查看兼职联系方式次数。
				</view>
				<view class="call-title">
					2.一经开通永久有效.
				</view>
			</view>
			<view v-if="userInfo.isPay === 0" class="pay-btn" @click="wxPay()">
				支付6.66元开通永久会员
			</view>
			<view v-if="userInfo.isPay === 1" class="pay-btn disabled">
				您已成为会员
			</view>
		</view>
		
		<view v-if="userInfo.isPay === 1" class="scuescc"></view>
		
		
	</view>
</template>

<script>
	import userCard from '@/components/user-card/index.vue'
	export default{
		components:{
			userCard
		},
		data(){
			return{
				userInfo:{
					name:"开通会员",
					cardId:"成为VIP",
					isPay: 0
				},
				current:1,
				activiteList:[],
				informationList:[],
				params:{
					pageNo:1,
					pageSize:10,
					total: null,
					isLock: true
				},
			}
		},
		onShow() {
			this.getmyInfo()
		},
		onLoad() {
			
		},
		onReady() {
			this.$com.displayNav()
		},
		methods:{
			getmyInfo(){
				this.$api('myInfo')
				.then(res=>{
					if(res.code == 200){
						this.role = res.result.role;
						this.userInfo = res.result;
						this.$store.commit('set_userInfo',res.result)
					}else{
						this.userInfo = null
					}
				})
			},
			wxPay(){
				let that = this;
				that.$api('create',{name:"成为会员",card:"开通会员"})
				.then(res=>{
					that.$jweixin.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: 'wx6fb4a17b28186d58', // 必填，公众号的唯一标识
						timestamp: res.result.timestamp, // 必填，生成签名的时间戳
						nonceStr: res.result.noncestr, // 必填，生成签名的随机串
						signature: res.result.sgture, // 必填，签名
						jsApiList: ['updateAppMessageShareData','updateTimelineShareData','onMenuShareTimeline','onMenuShareAppMessage','chooseWXPay']
					});
					
					that.$jweixin.chooseWXPay({
					  appId: 'wx6fb4a17b28186d58',
					  timestamp: res.result.timeStamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
					  nonceStr: res.result.nonceStr, // 支付签名随机串，不长于 32 位
					  package: res.result.packageValue, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
					  signType: res.result.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
					  paySign: res.result.paySign, // 支付签名
					  success: function (res) {
					    // 支付成功后的回调函数
						uni.switchTab({
							url:'/pages/my/index'
						})
					  }
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.from {
		margin-top: 120rpx;
		margin-right: 20rpx;
		margin-left: 100rpx;
	}
	.call-title {
		font-size: 30rpx;
		color: #000000;
		position: relative;
		line-height: 40rpx;
		padding: 15rpx 0 32rpx;
		&::after{
			content: '';
			position: absolute;
			display: block;
			width: 148rpx;
			height: 15rpx;
			border-radius: 8px;
			top: 46rpx;
		}
	}
	.from-line {
		height: 128rpx;
		display: flex;
		.label-class{
			text-align: justify;
			text-align-last: justify;
			line-height: 128rpx;
			width: 108rpx;
			padding: 0 24rpx;
		}
		input{
			padding-left: 20rpx;
			height: 128rpx;
			line-height: 128rpx;
		}	
	}
	.pay-btn{
		margin:160rpx auto;
		width: 487rpx;
		border-radius: 8rpx;
		text-align: center;
		height: 88rpx;
		line-height: 88rpx;
		background-color:  #00CCCC;
		font-size: 36rpx;
		color: #FFFFFF;
	}
    .disabled {
		background-color:  #999;
    }
	.scuescc {
		background: url("@/static/3.png");
		background-size: 100% 100%;
		width: 100vw;
		height: calc(100vh - 88rpx);
	}
	
</style>