H5_module/topic/card/index.vue

<template>
	<view v-if="isShowPage">
		<view class="top-fixed" :style="'height: ' + systems.barHeight + 'rpx;'">
			<view :class="'bgcolor' + (isTop == 1 ? ' opacity' : '')" :style="'height:' + systems.barHeight + 'rpx'"></view>
			<view class="top-fixed-c ddflex" :style="'height: ' + systems.navigationHeight + 'rpx;margin-top:' + systems.ktxStatusHeight + 'rpx;'">
				<navigator open-type="navigateBack" class="back"><image src="../static/images/back.png"></image></navigator>
				<view class="top-title ddflex fflex">领取会员卡</view>
			</view>
		</view>
		<image src="../static/images/vip_top.png" class="vip-top"></image>
		<view class="top">
			<view class="vip">
				<image src="../static/images/vip_bg.png" class="vip-bg"></image>
				<view class="vipc">
					<view class="userinfo ddflex">
						<image :src="userInfo.avatar ? userInfo.avatar : '/static/pages/images/userimg.png'" mode="aspectFill"></image>
						<view class="fflex">
							<view>{{ userInfo.nickName }}</view>
							<text>{{ userInfo.mobile ? userInfo.mobile : '' }}</text>
						</view>
					</view>
					<view class="vip-info">
						<view class="ddflex">
							<text v-if="vip.money > 0">￥</text>
							<view>{{ vip.money > 0 ? vip.money : '免费领取' }}</view>
						</view>
						<text>有效期 {{ vip.day }}天</text>
					</view>
				</view>
			</view>
			<view class="quanyi">
				<view class="tits ddflex"><text>会员权益</text></view>
				<view class="qy-con">
					<block v-if="vip.editorContent"><mp-html :content="vip.editorContent" @imgtap="choose" /></block>
					<block v-else>无</block>
				</view>
			</view>
		</view>
		<view style="height: 160rpx;"></view>
		<view class="bot">
			<view v-if="userVipInfo.levelGrade == vip.level && userVipInfo.levelGrade != 0 && !userVipInfo.end" class="btn">会员卡已领取</view>
			<!-- v-else -->
			<view v-else class="btn" @click="getVipRe()">{{ vip.money > 0 ? '支付' + vip.money + '元领取会员' : '免费领取会员卡' }}</view>
		</view>

		<update-userinfo
			:update-info="isUpdateInfo"
			:update-mobile="isUpdateMobile"
			v-if="isShowUpdate"
			@closeUpdate="closeUpdate"
			@updateInfo="updateInfo"
			@updateMobile="updateMobile"
		></update-userinfo>
	</view>
</template>

<script>
//index.js
//获取应用实例
const app = getApp();
const req = require('../../utils/request.js');
const route = require('../../utils/route');
import mpHtml from '../../components/mp-html/components/mp-html/mp-html';
export default {
	components: {
		mpHtml
	},
	data() {
		return {
			isShowPage: false,
			picUrlss: req.public.picUrls,
			about: {},
			isTop: 0,
			userinfo: '',
			systems: {},
			// vipList: [],
			vip: {},
			userInfo: {},
			userVipInfo: {}, //用户会员等级对象

			isShowUpdate: false, //是否显示更新信息弹窗
			isUpdateInfo: false, //更新用户信息
			isUpdateMobile: false //绑定手机号
		};
	},

	onLoad: async function(options) {
		this.getVip();
	},

	async onShow() {
		this.about = req.getStorage('about');
		this.userInfo = req.getStorage('userInfo');
		this.getuserVip();
	},

	methods: {
		getVip() {
			req.getRequest('/api/levelStrategy/userLevelList', {}, data => {
				this.vip = data[0];
				this.getVipMoneyT(this.vip.level);
			});
		},
		getVipMoneyT(index) {
			let from = {
				level: index
			};

			req.getRequest('/api/levelStrategy/list', from, data => {
				if (data && data.length > 0) {
					this.vip.money = data[0].price;
					this.vip.day = data[0].day;
					this.vip.levelId = data[0].id;
					this.isShowPage = true;
					this.$forceUpdate();
					console.log('this.vip数据>>>>', this.vip);
				}
			});
		},

		getVipRe() {
			if (this.vip.money > 0) {
				this.buy();
			} else {
				this.userInfo = req.getStorage('userInfo');
				if (!this.userInfo.mobile) {
					this.isShowUpdate = true;
					this.isUpdateMobile = true;
					return;
				}
				this.freeOpenVip();
			}
		},

		freeOpenVip() {
			req.postRequest('/api/levelStrategy/freeOfCharge', { strategyId: this.vip.levelId }, data => {
				this.getuserVip();
				uni.showModal({
					title: '提示',
					content: '会员卡领取成功',
					confirmText: '确定',
					showCancel: false,
					success(res) {
					}
				});
			});
		},

		//购买
		buy() {
			let that = this;
			if (this.userVipInfo.levelGrade > this.vip.level && !this.userVipInfo.end) {
				return req.msg('您不能开通低于现在等级会员');
			}
			route.vip(
				{
					strategyId: this.vip.levelId,
					scene: req.getStorage('scene')
				},
				data => {
					route.vipPay(data.id, data.status, this.price, res => {
						if (res) {
							app.globalData.navigateTo('product/pay/pay?isSuccess=true&vip=true');
						}
					});
				}
			);
		},

		getuserVip() {
			req.getRequest('/api/user/levelDetails', {}, data => {
				let expireTime = Array;
				if (data.expireTime) {
					expireTime = data.expireTime.split(' ');
					data.expireTime = data.expireTime.replace(/-/g, '/');
				}
				let nowTime = new Date().getTime();
				let endTime = new Date(data.expireTime).getTime();
				let times = parseInt((endTime - nowTime) / 1000);
				this.setData({
					userVipInfo: data,
					['userVipInfo.expireTime']: expireTime[0]
				});
				if (times <= 0) {
					this.setData({
						['userVipInfo.end']: true
					});
				} else {
					this.setData({
						['userVipInfo.end']: false
					});
				}
				console.log('userVipInfo>>>>', this.userVipInfo);
			});
		},

		choose() {}
	},
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		// px转换到rpx的比例
		let pxToRpxScale = 750 / systemInfo.windowWidth;
		let systems = {
			ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
			navigationHeight: 44 * pxToRpxScale // 导航栏的高度
		};
		systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
		this.systems = systems;
	},
	onPageScroll: function(e) {
		const systemInfo = uni.getSystemInfoSync();
		let height = systemInfo.statusBarHeight + 44;
		if (e.scrollTop > height) {
			this.isTop = 1;
		} else {
			this.isTop = 0;
		}
	}
};
</script>
<style>
@import './index.css';
</style>