yunshengtai-uniapp/pages/activity/signIn/confirm/index.vue

<template>
<!--pages/activity/signIn/confirm/index.wxml-->
<view class="confirm-page">
  <view class="userInfo-box">
    <view class="title-box acea-row row-between">
      <view>参加活动人员信息</view>
      <view class="edit-box acea-row row-middle" @tap="backUpPage">
        <image src="/static/images/edit.png"></image>
        <text>修改</text>
      </view>
    </view>
    <view class="info-box acea-row">
      <view class="name">
        <view>昵称</view>
        <view>{{payInfo.order.name}}</view>
      </view>
      <view class="name phone">
        <view>手机号</view>
        <view>{{payInfo.order.phone}}</view>
      </view>
    </view>
  </view>
  <view class="activity-info-box">
    <view class="title">{{payInfo.activity.name}}</view>
    <view class="activity-info">
      <view class="label">人数</view>
      <view>{{payInfo.order.num}}</view>
    </view>
    <view class="activity-info">
      <view class="label">活动时间</view>
      <view>{{payInfo.activity.activityStartTime}}~{{payInfo.activity.activityEndTime}}</view>
    </view>
    <view class="activity-info">
      <view class="label">活动地址</view>
      <view class="address">{{payInfo.activity.address}}</view>
    </view>
    <view class="settle-box acea-row row-between">
      <view class="label">结算金额</view>
      <view class="money">￥{{payInfo.activity.price}}</view>
    </view>
  </view>
  <view class="pay-btn" @tap="toPay">支付</view>
</view>
</template>

<script>
// pages/activity/signIn/confirm/index.js
const app = getApp();
import util from '../../../../utils/util';

export default {
  data() {
    return {
      payInfo: {},
      canClick: true
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let info = JSON.parse(decodeURIComponent(options.payInfo));
    info.activity.activityStartTime = util.setTime(info.activity.activityStartTime);
    info.activity.activityEndTime = util.setTime(info.activity.activityEndTime);
    this.setData({
      payInfo: info
    });
    console.log(this.payInfo);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    backUpPage() {
      uni.navigateBack({
        delta: 1
      });
    },

    toPay() {
      if (this.canClick) {
        this.setData({
          canClick: false
        });
        app.http('POST', 'activity/orderPay', {
          id: this.payInfo.order.id
        }).then(res => {
          console.log(res);

          if (res.data.success) {
            //微信支付
            uni.requestPayment({
              timeStamp: res.data.data.timeStamp,
              nonceStr: res.data.data.nonceStr,
              package: res.data.data.packageValue,
              signType: 'MD5',
              paySign: res.data.data.paySign,
              success: response => {
                this.setData({
                  canClick: true
                });
                uni.showToast({
                  title: '支付成功！',
                  duration: 1500
                });
                setTimeout(() => {
                  uni.navigateTo({
                    url: '../paymentSuccess/index'
                  });
                }, 1500);
              },
              fail: response => {
                this.setData({
                  canClick: true
                });
                console.log(response);
              }
            });
          }
        });
      }
    }

  }
};
</script>
<style>
/* pages/activity/signIn/confirm/index.wxss */
.confirm-page{
  width: 100%;
  min-height: 100%;
  background: #f2f2f2;
}
.userInfo-box{
  box-sizing: border-box;
  padding: 56rpx 32rpx;
  background: #fff;
  margin-bottom: 32rpx;

}
.title-box{
  font-size: 32rpx;
  color: #333;
  margin-bottom: 38rpx;
}
.edit-box{
  font-size:24rpx;
}
.edit-box image{
  width: 24rpx; 
  height: 24rpx;
  margin-right: 4rpx;
}
.info-box{
  font-size: 28rpx;
}
.phone{
  margin-left: 300rpx;
}
.name view:nth-child(1){
  color: #868686;
  margin-bottom: 16rpx;
}

.activity-info-box{
  width: 100%;
  background: #fff;
  padding: 32rpx;
  box-sizing: border-box;
}
.title{
  font-size: 32rpx;
  color: #333;
  line-height: 48rpx;
  font-weight: bold;
  margin-bottom: 40rpx;
}
.activity-info{
  display: flex;
  justify-content: space-between;
  font-size: 28rpx;
  margin-bottom: 24rpx;
}
.address{
  overflow:hidden;
  white-space: pre-wrap;
  width: 80%;
  text-align: right;
}
.settle-box{
  font-size: 32rpx;
  font-weight: 600;
  margin-top: 60rpx;
}
.money{
  color: #EBB672;
}
.pay-btn{
  position: fixed;
  bottom: 60rpx;
  left: 0;
  width: 100%;
  height: 76rpx;
  background: #EBB672;
  color: #FFF;
  font-size: 32rpx;
  line-height: 76rpx;
  text-align: center;
}
</style>