yizhizan-h5/my/vip/zhouka.vue

<template>
	<view>
		<view class="title">
			<image src="https://zhaopin.xianmaxiong.com/file/uploadPath/2022/09/16/72cec755962491d930f833f4bb5dfedd.png"
				mode="widthFix"></image>
			<image src="https://zhaopin.xianmaxiong.com/file/uploadPath/2022/09/16/ee0fee52f1e4e8eea4716e2bbe79ce9c.png"
				mode=""></image>
			<view v-if="weekMember !=1" class="title-text">
				人才库周卡
			</view>
			<view v-if="weekMember ==1" class="title-text">
				已开通人才库周卡
			</view>
			<view class="title-texts">
				<!-- <text>开通只需{{price}}元</text> -->
				<text v-if="weekMember !=1">开通只需{{price}}元</text>
				<!-- <text v-if="weekMember ==1">已开通周卡</text> -->
				<text v-if="weekMember ==1">到期:{{endWeekMemberTime.substring(0,10)}}</text>
			</view>
			<view v-if="weekMember !=1" class="payBtn flex align-center justify-center" @click="payPrice">
				立即开通
			</view>
		</view>
		
		<view class="flex align-center" v-if="weekMember !=1" style="padding-left: 40rpx;margin-top: 20rpx;width: 100%;">
			<u-checkbox style="margin-top: 10rpx;" size="28rpx" v-model="checked" shape="circle"></u-checkbox>
			<view style="margin-left: 10rpx;" class="flex align-center">开通即同意<navigator url="/my/setting/weekXiYi" open-type="navigate">《周卡开通协议》</navigator></view> 
		</view>
		<view class="flex align-center" v-else style="padding-left: 40rpx;margin-top: 20rpx;width: 100%;">
			<view style="margin-left: 10rpx;" class="flex align-center">点击查看<navigator url="/my/setting/weekXiYi" open-type="navigate">《周卡开通协议》</navigator></view> 
		</view>
		<view class="info flex justify-center">
			<view class="info-box">
				<image
					src="https://zhaopin.xianmaxiong.com/file/uploadPath/2022/09/16/81502b2d381c52aab7845b3b4cce4f26.png"
					mode="scaleToFill"></image>
				<view class="info-box-txt">
					每天{{number}}次
				</view>
				<view class="info-box-txts">
					全周可使用
				</view>
			</view>
		</view>
		<view class="info flex justify-center" style="margin-top: 20rpx;">
			<view class="info-box">
				<image
					src="https://zhaopin.xianmaxiong.com/file/uploadPath/2022/09/22/bb0c83f38e83afa74f749aa160b07c62.png"
					mode="scaleToFill"></image>
				<view class="info-box-txt1">
					当前剩余<text style="color: rgb(59, 105, 255);">{{viewResumes}}</text>次
				</view>
				<!-- <view class="info-box-txts1">
					到期:{{endWeekMemberTime.substring(0,10)}}
				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked:false,
				number: 0,
				price: '',
				members:'',//是否会员
				weekMember:'',//是否开通周卡   1：开通   null/0 未开通
				endWeekMemberTime:'',//到期时间
				viewResumes:0,//今日剩余获取次数
			};
		},
		onLoad() {
			this.getNumber();
			if (this.members==2) {
				this.getPriceVip();
			} else {
				this.getPriceNo();
			}
			this.getUserInfo();
		},
		methods: {
			//获取用户数据
			getUserInfo() {
				this.$Request.get("/app/user/selectUserById").then(res => {
					if (res.code == 0) {
						this.members = res.data.member
						this.weekMember = res.data.weekMember
						this.endWeekMemberTime = res.data.endWeekMemberTime
						this.viewResumes = res.data.viewResumes
					}
				});
			},
			//支付开通
			payPrice() {
				let _this = this
				if(this.checked==false){
					uni.showToast({
						title:'请同意《周卡开通协议》',
						icon:'none'
					})
				}else{
					this.$Request.post('/app/wxPay/openWeekMember', {
						classify: 3
					}).then(res => {
						if (res.code == 0) {
							// 调起微信支付
							uni.requestPayment({
								provider: 'wxpay', // 服务提提供商
								timeStamp: res.data.timestamp, // 时间戳
								nonceStr: res.data.noncestr, // 随机字符串
								package: res.data.package,
								signType: res.data.signType, // 签名算法
								paySign: res.data.sign, // 签名
								success: function(res) {
									uni.showToast({
										title:'开通成功'
									})
									setTimeout(()=>{
										_this.getUserInfo();
									},1000)
								},
								fail: function(err) {
									console.log('支付失败', err);
									uni.showToast({
										title:'支付失败',
										icon:'none'
									})
								}
							});
						}
					});
				}
			},
			//获取免费刷新简历次数
			getNumber() {
				this.$Request.get('/app/common/type/313').then(res => {
					if (res.code == 0) {
						this.number = res.data.value
					}
				});
			},
			//获取价格（会员）
			getPriceVip() {
				this.$Request.get('/app/common/type/314').then(res => {
					if (res.code == 0) {
						this.price = res.data.value
					}
				});
			},
			//获取价格（普通）
			getPriceNo() {
				this.$Request.get('/app/common/type/312').then(res => {
					if (res.code == 0) {
						this.price = res.data.value
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FDFDFD;
		width: 750rpx;
		overflow: hidden;
	}

	.title {
		width: 103%;
		height: 293rpx;
		margin-left: -15rpx;
		position: relative;

		image:nth-of-type(1) {
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		image:nth-of-type(2) {
			width: 170rpx;
			height: 3rpx;
			position: absolute;
			top: 170rpx;
			left: 76rpx;
			z-index: 1;
		}

		.title-text {
			position: absolute;
			top: 90rpx;
			left: 76rpx;
			font-size: 40rpx;
			font-weight: 800;
			// color: #E5AD8C;
			background-image: -webkit-linear-gradient(left, #F3D5BB, #E5AD8C);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.title-texts {
			position: absolute;
			top: 195rpx;
			left: 76rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #D0A183;
		}

		.payBtn {
			position: absolute;
			top: 120rpx;
			right: 63rpx;
			width: 177rpx;
			height: 73rpx;
			border-radius: 37rpx;
			background: linear-gradient(90deg, #EADEC8 0%, #D6B197 100%);
			color: #634338;
			font-size: 28rpx;
			font-weight: bold;
		}
	}

	.info {
		width: 100%;
		height: 333rpx;
		margin-top: 20rpx;

		.info-box {
			width: 714rpx;
			height: 100%;
			position: relative;

			image {
				position: absolute;
				top: 0%;
				left: 0%;
				width: 100%;
				height: 100%;
				z-index: -1;
			}

			.info-box-txt {
				position: absolute;
				z-index: 1;
				top: 120rpx;
				left: 110rpx;
				font-size: 32rpx;
				color: #333333;
			}
			.info-box-txt1 {
				position: absolute;
				z-index: 1;
				top: 120rpx;
				left: 42rpx;
				font-size: 32rpx;
				color: #333333;
			}
			.info-box-txts1 {
				position: absolute;
				z-index: 1;
				top: 208rpx;
				left: 42rpx;
				font-size: 32rpx;
				color: #333333;
			}
			.info-box-txts {
				position: absolute;
				z-index: 1;
				top: 208rpx;
				left: 110rpx;
				font-size: 32rpx;
				color: #333333;
			}
		}
	}
</style>