aslan-admin/src/components/data/InappPurchaseGoogle/index.vue

<template>
  <div>
    <el-dialog
      v-loading="loading"
      :title="$t('pages.inappPurchaseGoogle.dialog.title')"
      :visible="true"
      width="60%"
      :before-close="handleClose"
      top="50px"
    >
      <div class="sub-block">
        <el-timeline :hide-timestamp="true">
          <el-timeline-item :type="reimburseDot">
            <h3>{{ $t('pages.inappPurchaseGoogle.section.purchaseRecord') }}</h3>
            <el-card>
              <div class="typesetting">
                <div class="line">
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.environment') }}：{{ purchaseHistory.evn }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.originalTransactionId') }}：{{ purchaseHistory.originalOrderId }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.expireTime') }}：{{ purchaseHistory.expiresDateMs }}</div>
                </div>

                <div class="line">
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.sourcePlatform') }}：{{ purchaseHistory.platform }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.transactionId') }}：{{ purchaseHistory.orderId }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.purchaseTime') }}：{{ purchaseHistory.purchaseDateMs }}</div>
                </div>

                <div class="line">
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.purchaseEvent') }}：{{ purchaseHistory.event }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.unitPrice') }}：{{ purchaseHistory.unitPrice }} ({{ purchaseHistory.unit }})</div>
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.createdAt') }}：{{ purchaseHistory.createTime }}</div>
                </div>

                <div class="line">
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.internalProductId') }}：{{ purchaseHistory.purchaseProductId }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.orderStatus') }}：{{ purchaseHistory.status }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.updatedAt') }}：{{ purchaseHistory.updateTime }}</div>
                </div>
                <div class="line">
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.productId') }}：{{ purchaseHistory.productId }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.productType') }}：{{ purchaseHistory.productType }}</div>
                  <div class="label" />
                </div>
              </div>
            </el-card>
          </el-timeline-item>
          <el-timeline-item v-if="google.latestSubscription">
            <h3>{{ $t('pages.inappPurchaseGoogle.section.subscriptionReceipt') }}</h3>
            <el-card>
              <div class="typesetting">
                <div class="line">
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.subscriptionGrantedAt') }}：{{ dateFormat(latestSubscription.startTimeMillis) }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.autoRenewStatus') }}：{{ autoRenewStatusName }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.orderId') }}：{{ latestSubscription.orderId }}</div>
                </div>

                <div class="line">
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.subscriptionExpireAt') }}：{{ dateFormat(latestSubscription.expiryTimeMillis) }} </div>
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.subscriptionPurchaseType') }}：{{ latestSubscription.purchaseType }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.paymentState') }}：{{ latestSubscriptionPaymentStateName }}</div>
                </div>
                <div class="line">
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.createdAt') }}：{{ latestSubscription.createTime }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.paymentCountryCode') }}：{{ latestSubscription.countryCode }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.token') }}：<el-button type="text" @click="copyReceipt(latestSubscription.linkedPurchaseToken)">{{ $t('pages.inappPurchaseGoogle.action.copy') }}</el-button></div>
                </div>
                <div class="line">
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.updatedAt') }}：{{ latestSubscription.updateTime }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.subscriptionCancelled') }}：{{ latestSubscription.cancelReason }}
                    <el-tooltip class="item" effect="dark">
                      <div slot="content">
                        <p>{{ $t('pages.inappPurchaseGoogle.tooltip.cancelReason0') }}</p>
                        <p>{{ $t('pages.inappPurchaseGoogle.tooltip.cancelReason1') }}</p>
                        <p>{{ $t('pages.inappPurchaseGoogle.tooltip.cancelReason2') }}</p>
                        <p>{{ $t('pages.inappPurchaseGoogle.tooltip.cancelReason3') }}</p>
                      </div>
                      <i class="el-icon-question" />
                    </el-tooltip>
                  </div>

                  <div class="label">{{ $t('pages.inappPurchaseGoogle.label.jsonStructure') }}：<el-button type="text" @click="copyReceipt(latestSubscription.lastJson)">{{ $t('pages.inappPurchaseGoogle.action.copy') }}</el-button></div>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getGoogleReceiptDetails } from '@/api/purchase'
import { copyText, formatDate } from '@/utils'
export default {
  name: 'InappPurchaseGoogle',
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: true,
      google: {}
    }
  },
  computed: {
    purchaseHistory() {
      return this.google.purchaseHistory || {}
    },
    latestPurchase() {
      return this.google.latestPurchase || {}
    },
    latestSubscription() {
      return this.google.latestSubscription || {}
    },
    reimburseDot() {
      return this.latestReceipt && this.google.cancellationDateMs ? 'danger' : ''
    },
    autoRenewStatusName() {
      return this.latestSubscription.autoRenewing === true
        ? this.$t('pages.inappPurchaseGoogle.word.subscribing')
        : this.$t('pages.inappPurchaseGoogle.word.cancelled')
    },
    latestSubscriptionPaymentStateName() {
      if (this.latestSubscription.paymentState === 0) {
        return this.$t('pages.inappPurchaseGoogle.paymentState.pending')
      }
      if (this.latestSubscription.paymentState === 1) {
        return this.$t('pages.inappPurchaseGoogle.paymentState.received')
      }
      if (this.latestSubscription.paymentState === 2) {
        return this.$t('pages.inappPurchaseGoogle.paymentState.freeTrial')
      }
      if (this.latestSubscription.paymentState === 3) {
        return this.$t('pages.inappPurchaseGoogle.paymentState.deferredUpgradeDowngrade')
      }
      return this.$t('pages.inappPurchaseGoogle.paymentState.abnormal')
    }
  },
  created() {
    const that = this
    getGoogleReceiptDetails(that.id).then(res => {
      const { body } = res
      that.google = body || {}
      that.loading = false
    }).catch(er => {
      that.loading = false
    })
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    copyReceipt(content) {
      if (!content) {
        this.$opsMessage.info(this.$t('pages.inappPurchaseGoogle.message.emptyContent'))
        return
      }
      copyText(content).then(() => {
        this.$opsMessage.success()
      }).catch(er => {
        this.$opsMessage.fail()
      })
    },
    dateFormat(date) {
      return formatDate(date)
    }
  }
}
</script>
<style scoped lang="scss">
.sub-block {
    max-height: 600px;
    overflow: auto;
}
.typesetting {
    color: #666;
    line-height: 30px;
    .line {
        display: flex;
        flex-wrap: wrap;
        .label {
            flex: 1 1 260px;
            min-width: 0;
            padding-right: 12px;
            white-space: normal;
            word-break: break-word;
            line-height: 1.5;
        }
    }
}
</style>