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>