page_datareport/src/views/pay/PaySuccess.vue

<template>
  <div class="j-pay-success">
    <div class="j-main">
      <div class="pay-success">
        <span class="j-icon icon-checkbox-choose"></span>
        <span class="pay-text">支付成功</span>
        <span class="pay-count">
          <span class="pc-l">&yen;</span>
          <span class="pc-r">{{ orderInfo.price }}</span>
        </span>
        <p class="pay-text-desc">我们会尽快将数据报告发送至</p>
        <p class="pay-text-desc">123@qq.com</p>
      </div>
      <van-cell-group class="order-info">
        <van-cell center title="支付方式" value="内容" />
        <van-cell center title="支付时间" value="内容" />
        <van-cell center title="订单编号" value="内容" />
      </van-cell-group>
    </div>
    <div class="j-button-group j-footer">
      <button class="j-button-confirm" @click="onConfirm">查看订单</button>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Cell, CellGroup } from 'vant'
import { mapActions } from 'vuex'

@Component({
  name: 'pay',
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup
  },
  methods: {
    // ...mapState({
    //   getEnv: 'env'
    // })
  }
})

export default class PaySuccess extends Vue {
  orderInfo = {
    price: '2020'
  }

  // 将原型的全局变量提出来
  env = this.$env

  mounted () {
    // console.log(this.env)
  }

  onConfirm () {
    console.log('confirm')
    console.log(this.env)
  }
}
</script>

<style lang="scss">
  .j-pay-success {
    .van-cell {
      height: 54px;
    }
    .icon-checkbox-choose {
      width: 80px;
      height: 80px;
    }
    .pay-success {
      display: flex;
      align-items: center;
      flex-direction: column;
      background-color: #fff;
      height: 316px;
      border-top: 1px solid transparent;
      .j-icon {
        margin-top: 50px;
        margin-bottom: 18px;
      }
      .pay-text {
        font-size: 18px;
        line-height: 26px;
        color: #2ABED1;
      }
      .pay-count {
        margin-top: 4px;
        margin-bottom: 24px;
        color: #171826;
        font-size: 17px;
        line-height: 30px;
        .pc-r {
          margin-left: 4px;
          font-size: 24px;
        }
      }
      .pay-text-desc {
        font-size: 13px;
        line-height: 20px;
        color: #5F5E64;
      }
    }

    .order-info {
      margin-top: 8px;
    }
  }
</style>