education_mp/pages/orders/completion.vue

<template>
  <view class="order_completion_box">
    <view class="order_completion_title">
      <view class="completion_icon">
        <uni-icons class="icon" type="checkmarkempty" size="40" color="#eeeeee"></uni-icons>
      </view>
      <view class="product_title">
        支付成功 ￥{{this.price}}
      </view>
    </view>
    <view class="nav_button">
      <view class="nav_order" @click="navOrder()">
        <text>查看订单</text>
      </view>
      <view class="nav_home" @click="navHome()">
        <text>返回首页</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      //报单成功的商品信息
      productTitleInfo:[],
      price:''
    }
  },
  onLoad(option) {
    console.log(option);
    //接受参数
    this.price =  option.price;

  },
  onShow() {

  },
  methods: {
    navOrder(){
      uni.redirectTo({
        url:"/pagesA/orders/userorder"
      })
    },
    navHome(){
      uni.switchTab({
        url:"/pages/index/index"
      })
    },
  }
}
</script>

<style lang="less">
.order_completion_box{
  display:block;
  padding-bottom: 60rpx;
  .order_completion_title{
    display: block;
    width: 630rpx;
    // height: 300rpx;
    margin: 30rpx auto;
    line-height: 2.0;
    .completion_icon{
      width:150rpx;
      height: 150rpx;
      margin: 30rpx auto;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #00bba5;
    }
    .product_title{
      text-align: center;
      font-size: 24rpx;
    }
  }
  .nav_button{
    width: 630rpx;
    height: 300rpx;
    margin: 80rpx auto;
    display: block;
    line-height: 100rpx;
    .nav_order{
      text-align: center;
      margin: 30rpx 0rpx;
      border-radius: 60rpx;
      background-color: #00bba5;
      text{
        color: #eeeeee;
      }
    }
    .nav_home{
      text-align: center;
      border: 2rpx solid #00bba5;
      margin: 30rpx 0rpx;
      border-radius: 60rpx;
    }
  }
}
</style>