dvcp_v2_wxcp_app/library/project/pidu/AppRedemptionPoints/successOrder.vue

<template>
  <div class="successOrder">
    <img src="./img/success.png" alt="">
    <div v-if="isOrder">
      <h3>提交成功</h3>
      <p>提交「免费兑」订单成功，扣减 <span>50积分</span></p>
      <div class="btn-flex">
        <div>返回</div>
        <div>查看订单</div>
      </div>
    </div>
    <div v-else>
      <h3>兑换成功</h3>
      <p>提交「京东低价商品」订单成功，扣减 <span>50积分</span>
        可点击下方按钮前往京东商城进行低价购买
      </p>
      <div class="btn">去购买</div>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: 'successOrder',
  appName: '提交订单',
  data() {
    return {
      isOrder: false
    }
  },
  computed: {
    ...mapState(['user']),
  },
  onLoad() {

  },
  onShow() {
    document.title = '提交订单'
  },
  methods: {
    
  },
  onReachBottom() {
    // this.current = this.current + 1
    // this.getList()
  },
}
</script>

<style lang="scss" scoped>
uni-page-body{
  background-color: #fff;
}
.successOrder {
  padding: 0 60px;
  text-align: center;
  img {
    width: 240px;
    height: 232px;
    margin: 168px auto 32px auto;
  }
  h3 {
    font-family: PingFangSC-SNaNpxibold;
    font-weight: 600;
    font-size: 40px;
    color: #333;
    line-height: 56px;
    margin-bottom: 16px;
  }
  p {
    color: #333;
    font-size: 30px;
    font-family: PingFangSC;
    line-height: 50px;
    text-align: center;
    margin-bottom: 80px;
    span {
      color: #FF6900;
    }
  }
  .btn {
    width: 410px;
    height: 88px;
    line-height: 88px;
    background: #2D7DFF;
    border-radius: 44px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 34px;
    color: #FFF;
    text-align: center;
    margin: 0 auto;
  }
  .btn-flex {
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 34px;
    margin: 0 auto;
    div {
      display: inline-block;
      width: 272px;
      text-align: center;
      height: 88px;
      line-height: 88px;
      border-radius: 44px;
      color: #FFF;
      background-color: #2D7DFF;
    }
    div:nth-of-type(1) {
      background-color: #E5EFFF;
      color: #2D7DFF;
      margin-right: 26px;
    }
  }
  
}
</style>