crmeb-mp/pages/annex/vip_paid_active/index.vue

<template>
	<view>
		<image src="../static/vip-paid-active.png" class="w-full h-710"></image>
		<!-- #ifndef MP -->
		<view class="page-back flex-center" @click="jumpBack">
			<text class="iconfont icon-ic_left"></text>
		</view>
		<!-- #endif -->
		<form class="form" @submit="checkForm">
			<input v-model="account" class="input" name="account" type="text" placeholder="请输入卡号" placeholder-style="color:#CCCCCC" />
			<input v-model="password" :cursor-spacing="85" class="input" name="password" type="text" placeholder="请输入卡密" placeholder-style="color:#CCCCCC" password />
			<button class="button" form-type="submit">确认激活</button>
			<view class="look"><text class="link" @click="goPaidRights">查看会员权益</text></view>
		</form>
		<view class="activate" v-if="showActive">
			<view class="zs-bg"></view>
			<view class="active-card flex-center relative">
				<view class="yuan flex-center">
					<text class="iconfont icon-ic_complete fs-60 text--w111-fff"></text>
				</view>
				<view class="w-430 fs-34 flex-x-center">亲爱的 {{ userInfo.nickname }}</view>
			</view>
			<view class="w-full active-success text-center fs-44 fw-500">激活成功</view>
			<view class="active-btn h-88 rd-44rpx flex-center fs-28 fw-500" @tap="activeConfirm">开始使用</view>
		</view>
		<home></home>
	</view>
</template>

<script>
import { memberCardDraw } from '@/api/user.js';
import { USER_INFO } from '@/config/cache';
import Cache from '@/utils/cache';
export default {
	data() {
		return {
			account: '',
			password: '',
			showActive: false,
			userInfo: JSON.parse(Cache.get(USER_INFO))
		};
	},
	methods: {
		checkForm(e) {
			let formData = e.detail.value,
				data = {
					member_card_code: '',
					member_card_pwd: '',
					from: 'H5 '
				};
			if (!formData.account) {
				return this.$util.Tips({
					title: '请输入卡号'
				});
			}
			if (!formData.password) {
				return this.$util.Tips({
					title: '请输入卡密'
				});
			}
			data.member_card_code = formData.account;
			data.member_card_pwd = formData.password;
			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				data.from = 'weixin';
			}
			// #endif
			// #ifdef MP
			data.from = 'routine';
			// #endif
			uni.showLoading({
				title: '激活中'
			});
			memberCardDraw(data)
				.then((res) => {
					let that = this;
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					this.showActive = true;
				})
				.catch((err) => {
					return this.$util.Tips({
						title: err
					});
				});
		},
		goPaidRights() {
			uni.navigateTo({
				url: '/pages/annex/vip_paid_rights/index'
			});
		},
		activeConfirm() {
			uni.navigateBack();
		},
		jumpBack() {
			uni.navigateBack();
		}
	},
	onPageScroll(object) {
		uni.$emit('scroll');
	}
};
</script>

<style lang="scss" scoped>
page {
	background: #f3ece4;
}

.form {
	.input {
		height: 88rpx;
		padding: 0 24rpx;
		border: 1rpx solid rgba(126, 75, 6, 0.5);
		border-radius: 16rpx;
		margin: 32rpx 40rpx;
		background: rgba(255, 255, 255, 0.6);
		font-size: 30rpx;
		color: #333333;

		&:first-child {
			margin-top: 8rpx;
		}
	}

	.button {
		height: 88rpx;
		border-radius: 44rpx;
		margin: 56rpx 40rpx 40rpx;
		background: #333333;
		font-weight: 500;
		font-size: 28rpx;
		line-height: 88rpx;
		color: #facc7d;
	}

	.look {
		text-align: center;
		line-height: 42rpx;
	}

	.link {
		font-size: 26rpx;
		color: #999999;
	}
}
.activate {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, #312b23 0%, #19140e 100%);
	z-index: 5;
}
.zs-bg {
	position: absolute;
	top: 276rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 443rpx;
	height: 392rpx;
	background-image: url('../static/active-zs.png');
	background-size: cover;
}
.active-card {
	width: 516rpx;
	height: 298rpx;
	background: linear-gradient(270deg, #ecd8c8 0%, #dbbea2 100%);
	border-radius: 24rpx;
	margin: 314rpx auto 0;
}
.yuan {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	border: 6rpx solid #fff;
	background-color: #f0ca86;
	position: absolute;
	top: -60rpx;
	left: 50%;
	transform: translateX(-50%);
}
.active-success {
	margin: 140rpx auto 48rpx;
	color: #facc7d;
}
.active-btn {
	width: 516rpx;
	background-color: #facc7d;
	margin: auto;
}
</style>