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

<template>
  <div>
    <el-dialog
      v-loading="loading"
      :title="$t('pages.inappPurchaseApple.dialog.title')"
      :visible="true"
      :modal-append-to-body="true"
      :append-to-body="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.inappPurchaseApple.section.purchaseRecord') }}</h3>
            <el-card>
              <div class="typesetting">
                <div class="line">
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.environment') }}：{{ purchaseHistory.evn }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.originalTransactionId') }}：{{ purchaseHistory.originalOrderId }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.expireTime') }}：{{ purchaseHistory.expiresDateMs }}</div>
                </div>

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

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

                <div class="line">
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.internalProductId') }}：{{ purchaseHistory.purchaseProductId }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.orderStatus') }}：{{ purchaseHistory.status }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.updatedAt') }}：{{ purchaseHistory.updateTime }}</div>
                </div>
                <div class="line">
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.appleProductId') }}：{{ purchaseHistory.productId }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.productType') }}：{{ purchaseHistory.productType }}</div>
                  <div class="label" />
                </div>
              </div>
            </el-card>
          </el-timeline-item>
          <el-timeline-item>
            <h3>{{ $t('pages.inappPurchaseApple.section.pendingRenewal') }}</h3>
            <el-card>
              <div class="typesetting">
                <div class="line">
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.originalTransactionId') }}：{{ pendingRenewalInfo.originalTransactionId }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.productId') }}：{{ pendingRenewalInfo.productId }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.autoRenewProductId') }}：{{ pendingRenewalInfo.autoRenewProductId }}</div>
                </div>

                <div class="line">
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.autoRenewStatus') }}：{{ autoRenewStatusName }}</div>
                  <div class="label">
                    {{ $t('pages.inappPurchaseApple.label.inBillingRetryPeriod') }}：{{ inBillingRetryPeriodName }}
                    <el-tooltip class="item" effect="dark" :content="$t('pages.inappPurchaseApple.tooltip.retryPeriod')">
                      <i class="el-icon-question" />
                    </el-tooltip>
                  </div>
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.gracePeriodExpiresAt') }}：{{ pendingRenewalInfo.gracePeriodExpiresDateMs }}</div>
                </div>

                <div class="line">
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.expirationReason') }}：{{ pendingRenewalInfo.expirationIntent }}
                    <el-tooltip class="item" effect="dark">
                      <div slot="content">
                        <p>{{ $t('pages.inappPurchaseApple.tooltip.expirationReason1') }}</p>
                        <p>{{ $t('pages.inappPurchaseApple.tooltip.expirationReason2') }}</p>
                        <p>{{ $t('pages.inappPurchaseApple.tooltip.expirationReason3') }}</p>
                        <p>{{ $t('pages.inappPurchaseApple.tooltip.expirationReason4') }}</p>
                        <p>{{ $t('pages.inappPurchaseApple.tooltip.expirationReason5') }}</p>
                      </div>
                      <i class="el-icon-question" />
                    </el-tooltip>
                  </div>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
          <el-timeline-item>
            <h3>{{ $t('pages.inappPurchaseApple.section.receiptInfo') }}</h3>
            <el-card>
              <div class="typesetting">
                <div class="line">
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.cancellationTime') }}：{{ latestReceipt.cancellationDateMs }}
                    <el-tooltip class="item" effect="dark" :content="$t('pages.inappPurchaseApple.tooltip.cancellationTime')">
                      <i class="el-icon-question" />
                    </el-tooltip>
                  </div>
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.productId') }}：{{ latestReceipt.productId }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.expireTime') }}：{{ latestReceipt.expiresDateMs }}</div>
                </div>

                <div class="line">
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.cancellationReason') }}：{{ latestReceipt.cancellationReason }}
                    <el-tooltip class="item" effect="dark">
                      <div slot="content">
                        <p>{{ $t('pages.inappPurchaseApple.tooltip.cancellationReason0') }}</p>
                        <p>{{ $t('pages.inappPurchaseApple.tooltip.cancellationReason1') }}</p>
                      </div>
                      <i class="el-icon-question" />
                    </el-tooltip>
                  </div>

                  <div class="label">{{ $t('pages.inappPurchaseApple.label.originalTransactionId') }}：{{ latestReceipt.transactionId }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.originalPurchaseTime') }}：{{ dateFormat(latestReceipt.originalPurchaseDateMs) }}</div>
                </div>

                <div class="line">
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.subscriptionGroup') }}：{{ latestReceipt.subscriptionGroupIdentifier }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.transactionId') }}：{{ latestReceipt.transactionId }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.purchaseTime') }}：{{ latestReceipt.purchaseDateMs }}</div>
                </div>

                <div class="line">
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.webOrderLineItemId') }}：{{ latestReceipt.webOrderLineItemId }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.createdAt') }}：{{ latestReceipt.createTime }}</div>
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.updatedAt') }}：{{ latestReceipt.updateTime }}</div>
                </div>
                <div class="line">
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.trialPeriod') }}：{{ latestReceipt.trialPeriod === true ? $t('pages.inappPurchaseApple.word.yes') : $t('pages.inappPurchaseApple.word.no') }}</div>
                  <div class="label"><el-button type="text" @click="openUrl('status')">{{ $t('pages.inappPurchaseApple.action.receiptStatus') }}</el-button>：{{ latestReceipt.status }}
                    <el-tooltip class="item" effect="dark">
                      <div slot="content">
                        <p>{{ $t('pages.inappPurchaseApple.tooltip.receiptStatus1') }}</p>
                        <p>{{ $t('pages.inappPurchaseApple.tooltip.receiptStatus2') }}</p>
                        <p>{{ $t('pages.inappPurchaseApple.tooltip.receiptStatus3') }}</p>
                      </div>
                      <i class="el-icon-question" />
                    </el-tooltip>
                  </div>
                  <div class="label">{{ $t('pages.inappPurchaseApple.label.base64Receipt') }}：<el-button type="text" @click="copyReceipt($event)">{{ $t('pages.inappPurchaseApple.action.copy') }}</el-button></div>
                </div>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getAppleReceiptDetails } from '@/api/purchase'
import { copyText, formatDate } from '@/utils'
export default {
  name: 'InappPurchaseApple',
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: true,
      apple: {}
    }
  },
  computed: {
    inBillingRetryPeriodName() {
      return this.apple.pendingRenewalInfo && this.apple.pendingRenewalInfo.inBillingRetryPeriod === true
        ? this.$t('pages.inappPurchaseApple.word.yes')
        : this.$t('pages.inappPurchaseApple.word.no')
    },
    purchaseHistory() {
      return this.apple.purchaseHistory || {}
    },
    latestReceipt() {
      return this.apple.latestReceipt || {}
    },
    pendingRenewalInfo() {
      return this.apple.pendingRenewalInfo || {}
    },
    reimburseDot() {
      return this.latestReceipt && this.apple.cancellationDateMs ? 'danger' : ''
    },
    autoRenewStatusName() {
      return this.pendingRenewalInfo.autoRenewStatus === true
        ? this.$t('pages.inappPurchaseApple.word.subscribing')
        : this.$t('pages.inappPurchaseApple.word.cancelled')
    }
  },
  created() {
    const that = this
    getAppleReceiptDetails(that.id).then(res => {
      const { body } = res
      that.apple = body || {}
      that.loading = false
    }).catch(er => {
      that.loading = false
    })
  },
  methods: {
    handleClose() {
      this.$emit('close')
    },
    copyReceipt() {
      copyText(this.latestReceipt.latestReceipt).then(() => {
        this.$opsMessage.success()
      }).catch(er => {
        this.$opsMessage.fail()
      })
    },
    openUrl(type) {
      if (type === 'status') {
        window.open('https://developer.apple.com/documentation/appstorereceipts/status')
      }
    },
    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;
        .label {
            width: 100%;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
    }
}
</style>