yunshengtai-uniapp/pages/user/completeData/index.vue

<template>
	<!--pages/user/completeData/index.wxml-->
	<view class="page-box">
		<view class="back-btn" :style="'top:' + navTopHeight + 'rpx'" @tap="backPage">
			<image src="/static/images/back.png" mode></image>
		</view>
		<view class="bg-img-box">
			<image src="https://download.cyjyyjy.com/personalPage-bg.png"></image>
		</view>
		<view class="mail-box">
			<view :class="showMove ? 'mail-img-box mail-top top-move' : 'mail-img-box mail-top'">
				<image src="https://download.cyjyyjy.com/mail-t.png"></image>
			</view>
			<view class="mail-img-box mail-center">
				<image src="https://download.cyjyyjy.com/mail-c.png"></image>
			</view>
			<view :class="showMove ? 'mail-img-box mail-bottom btm-move' : 'mail-img-box mail-top'">
				<image src="https://download.cyjyyjy.com/mail-b.png"></image>
			</view>
			<view :class="(showMove ? 'word-move' : '') + ' tips'">信息已为您保存</view>
			<view class="pay-btn" @tap="toPay">成为体验官</view>
			<view class="tip">前1000名体验官可享限时专属价 ￥199/年</view>
		</view>

	</view>
</template>

<script>
	// pages/user/completeData/index.js
	const app = getApp();

	export default {
		data() {
			return {
				showMove: false,
				navTopHeight: app.globalData.menuTop + app.globalData.navTopHeight + 10
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.setData({
				showMove: true
			});
		},
		methods: {
			backPage() {
				uni.navigateBack({
					delta: 1
				});
			},

			toPay() {
				app.http('post', 'vip/subscribeVip', {
					num: 1
				}).then(res => {
					if (res.data.success) {
						let orderInfo = res.data.data;
						this.payment(orderInfo);
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				});
			},

			payment(orderInfo) {
				// 调用支付接口
				uni.requestPayment({
					provider: 'wxpay',
					...orderInfo,
					signType: 'MD5',
					success: success => {
						uni.showToast({
							title: '支付成功',
							icon: 'success',
							duration: 3000
						});
						uni.removeStorageSync('form');
						let time = setTimeout(() => {
							clearTimeout(time);
							uni.navigateTo({
								url: '../mine/index'
							});
						}, 2000);
					},
					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>
	/* pages/user/completeData/index.wxss */
	page {
		width: 100%;
		height: 100vh;
	}

	.page-box {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.bg-img-box {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.bg-img-box image {
		width: 100%;
		height: 100%;
	}

	.mail-box {
		width: 687rpx;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.mail-box .mail-img-box {
		position: absolute;
	}

	.mail-top,
	.mail-bottom {
		z-index: 3;
	}

	.mail-top {
		z-index: 4;
		top: 10rpx;
		/* top: 314rpx; */
	}

	.top-move {
		animation: topMove 2s ease;
		animation-fill-mode: forwards;
	}

	.mail-top image {
		width: 687rpx;
		height: 445rpx;
	}

	.mail-center image {
		width: 684rpx;
		height: 648rpx;
		transform: scale(0.99);
	}

	.mail-center {
		top: 316rpx;
	}

	.mail-bottom image {
		width: 687rpx;
		height: 432rpx;

	}

	.mail-bottom {
		top: 616rpx;
	}

	.btm-move {
		animation: btmMove 1.5s ease;
		animation-fill-mode: forwards;
	}

	@keyframes topMove {
		0% {
			top: 10rpx;
			opacity: 0.8;
		}

		100% {
			top: 314rpx;
			opacity: 1;
		}
	}

	@keyframes btmMove {
		0% {
			top: 616rpx;
			opacity: 0.2;
		}

		100% {
			top: 532rpx;
			opacity: 1;
		}
	}

	.tips {
		width: 100%;
		color: #EFDACA;
		font-size: 40rpx;
		line-height: 56rpx;
		position: absolute;
		top: 1000rpx;
		text-align: center;
	}

	.word-move {
		animation: wordMove 1s ease;
		animation-fill-mode: forwards;
	}

	@keyframes wordMove {
		0% {
			left: -100%;
		}

		100% {
			left: 0;
		}
	}

	.pay-btn {
		width: 686rpx;
		height: 82rpx;
		position: absolute;
		top: 1100rpx;
		left: 50%;
		transform: translateX(-50%);
		background: linear-gradient(322deg, #DEB99F 0%, #E9D1C0 51%, #E3C9B5 100%);
		border-radius: 62rpx;
		text-align: center;
		line-height: 82rpx;
		color: #946F46;
	}

	.tip {
		width: 100%;
		text-align: center;
		color: #EFDACA;
		font-size: 32rpx;
		line-height: 44rpx;
		position: absolute;
		top: 1200rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>