You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

274 lines
4.7 KiB

<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>