jy-docs/jydocs-mobile/src/views/purchase/purchasesuccess.vue

<template>
  <div class="purchasesuccess">
    <div class="j-main logout_main">
      <div class="logout_tips">
        <div class="success">
          <img src="@/assets/image/icon-checkbox-choose.png" class="success-icon" alt />
        </div>
        <p class="success_text">兑换成功</p>
        <div class="success_money">
          <span class="icon_num"></span>
          <span class="money_num">{{query}}</span>
        </div>
        <p class="success_days">{{count}}s后自动跳转到文档页面</p>
      </div>
      <div class="logout_infor">
        <div class="infor_group">
          <div class="infor_cell">
            <div class="infor_title">支付方式</div>
            <div class="infor_value">{{payinfor.payWay}}支付</div>
          </div>
          <div class="infor_cell">
            <div class="infor_title">兑换时间</div>
            <div class="infor_value">{{payinfor.payTime}}</div>
          </div>
          <div class="infor_cell">
            <div class="infor_title">流水编号</div>
            <div class="infor_value">{{payinfor.code}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="j-footer apply_footer">
      <button class="apply_button" @click="complete()">查看文档</button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { dateFormatter } from '../../utils/globalFunctions'
import { mapMutations } from 'vuex'

@Component({
  name: 'test',
  ...mapMutations({
    clearLibState: 'main/clearMyLibState'
  })
})
export default class extends Vue {
  clearLibState: any
  count = 3
  timer: any
  $router: any
  query: any
  payinfor = {
    docId: '', // id
    payTime: '',
    payWay: '',
    code: '',
    currency: 0
  }

  created () {
    this.query = location.href.split('/')[location.href.split('/').length - 1] // 获取num
    this.setCountDown()
    this.setSession()
    this.clearLibState('clearLib') // 清除我的文库列表缓存数据
  }

  setSession () {
    let paydata: any = sessionStorage.getItem('paydata')
    console.log(paydata)
    if (paydata) {
      paydata = JSON.parse(paydata)
      this.payinfor.payTime = dateFormatter(paydata.payTime * 1000, 'yyyy/MM/dd')
      this.payinfor.payWay = paydata.payWay
      this.payinfor.code = paydata.code
      this.payinfor.docId = paydata.query
    }
  }

  // 倒计时
  setCountDown () {
    if (!this.timer) {
      this.timer = setInterval(() => {
        if (this.count > 0 && this.count <= 10) {
          this.count--
        } else {
          clearInterval(this.timer)
          this.timer = null
          this.$router.replace({
            name: 'details',
            params: {
              id: this.payinfor.docId
            }
          })
        }
      }, 1000)
    }
  }

  // 查看文档按钮
  complete () {
    this.$router.replace({
      name: 'details',
      params: {
        id: this.payinfor.docId
      }
    })
  }
}
</script>
<style lang="scss">
.purchasesuccess {
  .logout_tips {
    width: 100%;
    height: 245px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    .success {
      margin-top: 40px;
      width: 80px;
      height: 80px;
      .success_icon {
        width: 100%;
        height: 100%;
      }
    }
    .success_text {
      margin-top: 8px;
      font-size: 18px;
      line-height: 26px;
      color: #2abed1;
    }
    .success_money{
      display: flex;
      align-items: center;
      height: 30px;
      .icon_num{
        display: flex;
        width: 24px;
        height: 24px;
        background: url(data:image/png;base64,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) no-repeat;
        background-size: contain;
      }
      .money_num{
        margin-left: 4px;
        color: #171826;
        font-weight: medium;
        font-size: 24px;
        line-height: 30px;
      }
    }
    .success_days {
      margin-top: 24px;
      font-size: 13px;
      line-height: 20px;
      color: #5f5e64;
    }
  }
  .logout_infor{
    flex: 1;
    margin-top: 8px;
    padding-left: 16px;
    background: #fff;
    .infor_group{
      display: flex;
      flex-direction: column;
      width: 100%;
      height: auto;
      .infor_cell{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 16px;
        height: 53px;
        border-bottom: 0.5px solid rgba(0, 0, 0, 0.05);
        .infor_title{
          font-size: 16px;
          line-height: 24px;
          color: #171826;
        }
        .infor_value{
          font-size: 14px;
          line-height: 20px;
          color: #9B9CA3;
        }
      }
    }
  }
  .apply_footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px 12px;
    background: rgba(255, 255, 255, 0.96);
    filter: drop-shadow(0px -2px 8px rgba(54, 147, 179, 0.051));
  }
  .apply_button {
    width: 100%;
    height: 46px;
    border-radius: 8px;
    background: #2abed1;
    font-size: 18px;
    color: #f7f9fa;
  }
}
</style>