306 lines
13 KiB
Vue
306 lines
13 KiB
Vue
<template>
|
|
<div class="in-app-purchase-details-drawer">
|
|
<el-drawer
|
|
:title="$t('pages.inAppPurchaseDetails.dialog.title')"
|
|
:visible="true"
|
|
:before-close="handleClose"
|
|
:close-on-press-escape="false"
|
|
:wrapper-closable="false"
|
|
:modal-append-to-body="true"
|
|
:append-to-body="true"
|
|
custom-class="drawer-auto-layout"
|
|
>
|
|
<div v-if="order" v-loading="orderLoading" class="in-app-purchase-details-content">
|
|
<div v-if="orderIsNull" style="text-align: center;">
|
|
{{ $t("pages.inAppPurchaseDetails.message.noMoreInfo") }}
|
|
</div>
|
|
<div v-else>
|
|
<div v-if="order.acceptUserProfile" class="order-row">
|
|
<div class="blockquote">{{ $t("pages.inAppPurchaseDetails.section.acceptUser") }}</div>
|
|
<div class="content">
|
|
<user-table-exhibit :user-profile="order.acceptUserProfile" :query-details="true" />
|
|
</div>
|
|
</div>
|
|
<div v-if="order.createUserProfile" class="order-row">
|
|
<div class="blockquote">{{ $t("pages.inAppPurchaseDetails.section.createUser") }}</div>
|
|
<div class="content">
|
|
<user-table-exhibit :user-profile="order.createUserProfile" :query-details="true" />
|
|
</div>
|
|
</div>
|
|
<div v-if="order.createNickname" class="order-row">
|
|
<div class="blockquote">{{ $t("pages.inAppPurchaseDetails.section.createUser") }}</div>
|
|
<div class="content" style="margin-bottom: 10px;">
|
|
{{ order.createNickname }}
|
|
</div>
|
|
</div>
|
|
<div v-if="order.details" class="order-row">
|
|
<div class="blockquote">{{ $t("pages.inAppPurchaseDetails.section.orderInfo") }}</div>
|
|
<div class="content">
|
|
<div class="order-info flex-b flex-wrap">
|
|
<div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.environment') }}:
|
|
<el-tag v-if="order.details.env === 'PROD'" type="success" size="mini">{{ order.details.env }}</el-tag>
|
|
<el-tag v-else-if="order.details.env === 'TEST'" type="warning" size="mini">{{ order.details.env }}</el-tag>
|
|
<el-tag v-else type="danger" size="mini">{{ order.details.env }}</el-tag>
|
|
</div>
|
|
<div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.type') }}: {{ getReceiptTypeLabel(order.details.receiptType) }}</div>
|
|
<div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.status') }}:
|
|
<el-tag :type="getOrderStatus(order.details.status).tagType" size="mini">{{ getOrderStatus(order.details.status).label }}</el-tag>
|
|
</div>
|
|
<div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.id') }}: {{ order.details.id }}</div>
|
|
<div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.trackId') }}: {{ order.details.trackId }}</div>
|
|
<div v-if="order.details.subscribeId" class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.subscribeId') }}: {{ order.details.subscribeId }}</div>
|
|
<div class="order-info-col" :span="24">{{ $t('pages.inAppPurchaseDetails.label.orderId') }}: {{ order.details.orderId }}</div>
|
|
<div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.platformChannel') }}:
|
|
<sys-origin-icon size="20px" :icon="order.details.sysOrigin" :desc="order.details.sysOrigin" />
|
|
<platform-svg-icon size="20px" :icon="getOrderFactory(order.details).platform" />
|
|
<platform-svg-icon size="20px" :icon="getOrderFactory(order.details).factoryCode" />
|
|
</div>
|
|
<div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.countryCode') }}: {{ order.details.countryCode }}</div>
|
|
<div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.currency') }}: {{ order.details.currency }}</div>
|
|
<div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.amount') }}: {{ order.details.amount }} {{ order.details.currency }}</div>
|
|
<div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.usd') }}: {{ order.details.amountUsd }} USD</div>
|
|
<div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.freeTrial') }}: {{ order.details.trialPeriod === true ? $t('pages.inAppPurchaseDetails.word.yes') : $t('pages.inAppPurchaseDetails.word.no') }}</div>
|
|
|
|
<div v-if="order.details.reason" class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.reason') }}: {{ order.details.reason }}</div>
|
|
<div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.purchaseTime') }}: {{ order.details.purchaseDateMs }}</div>
|
|
<div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.createdAt') }}: {{ order.details.createTime }}</div>
|
|
<div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.updatedAt') }}: {{ order.details.updateTime }}</div>
|
|
<div class="order-info-col">{{ $t('pages.inAppPurchaseDetails.label.version') }}: {{ order.details.version }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="order.details && order.details.statusSteps && order.details.statusSteps.length>0" class="order-row">
|
|
<div class="blockquote">{{ $t('pages.inAppPurchaseDetails.section.statusFlow') }}</div>
|
|
<div class="content">
|
|
<el-steps align-center :space="200" :active="order.details.statusSteps.length" finish-status="success" style="margin: 10px 0px;">
|
|
<el-step v-for="(item, index) in order.details.statusSteps" :key="index" :title="getOrderStatus(item.status).label" :description="getElementText(item.createTime)" />
|
|
</el-steps>
|
|
</div>
|
|
</div>
|
|
<div v-if="order.details && order.details.products && order.details.products.length > 0" class="order-row">
|
|
<div class="blockquote">{{ $t('pages.inAppPurchaseDetails.section.productInfo') }}</div>
|
|
<div class="content">
|
|
<div class="product-card">
|
|
<div v-if="order.details.productDescriptor" class="prodcut-desc">
|
|
{{ order.details.productDescriptor }}
|
|
</div>
|
|
<div v-for="(item, index) in order.details.products" :key="index" class="product-item">
|
|
<div class="flex-b">
|
|
<div class="product-cover">
|
|
<img :src="item.cover || $application.defaultImgUrl" alt="">
|
|
</div>
|
|
<div class="product-info">
|
|
<el-row>
|
|
<el-col :span="12">{{ $t('pages.inAppPurchaseDetails.label.id') }}: {{ item.id }}</el-col>
|
|
<el-col :span="12">{{ $t('pages.inAppPurchaseDetails.label.name') }}: {{ item.name }}</el-col>
|
|
<el-col :span="12">{{ $t('pages.inAppPurchaseDetails.label.code') }}: {{ item.code }}</el-col>
|
|
<el-col :span="12">{{ $t('pages.inAppPurchaseDetails.label.content') }}: {{ item.content }}</el-col>
|
|
<el-col :span="12">{{ $t('pages.inAppPurchaseDetails.label.amount') }}: {{ item.amountUsd }} USD</el-col>
|
|
<el-col :span="12">{{ $t('pages.inAppPurchaseDetails.label.quantity') }}: {{ item.quantity }}</el-col>
|
|
<el-col :span="24">{{ $t('pages.inAppPurchaseDetails.label.description') }}: {{ item.describe }}</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="order.details && order.details.metadata && Object.keys(order.details.metadata).length > 0" class="order-row">
|
|
<div class="blockquote">{{ $t('pages.inAppPurchaseDetails.section.metadata') }}</div>
|
|
<div class="content">
|
|
<el-table
|
|
:data="metadataList"
|
|
:element-loading-text="$t('pages.inAppPurchaseDetails.message.loading')"
|
|
fit
|
|
highlight-current-row
|
|
>
|
|
<el-table-column prop="key" :label="$t('pages.inAppPurchaseDetails.label.field')" align="center" />
|
|
<el-table-column prop="value" :label="$t('pages.inAppPurchaseDetails.label.value')" align="center" />
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<div v-if="order.details && order.details.payNotices" class="order-row">
|
|
<div class="blockquote">{{ $t('pages.inAppPurchaseDetails.section.eventNotice') }}</div>
|
|
<div class="content">
|
|
<el-timeline :reverse="true">
|
|
<el-timeline-item
|
|
v-for="(item, index) in order.details.payNotices"
|
|
:key="index"
|
|
placement="top"
|
|
:timestamp="getElementText(item.createTime)"
|
|
>
|
|
<div class="event-info">
|
|
<div class="event-info-item">{{ $t('pages.inAppPurchaseDetails.label.eventId') }}: {{ item.eventId }}</div>
|
|
<div class="event-info-item">{{ $t('pages.inAppPurchaseDetails.label.eventType') }}: {{ item.noticeType }}</div>
|
|
</div>
|
|
<div class="request-data">
|
|
<json-editor v-model="item.noticeData" :read-only="true" />
|
|
</div>
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-drawer>
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getInAppPurchase } from '@/api/purchase'
|
|
import PlatformSvgIcon from '@/components/PlatformSvgIcon'
|
|
import JsonEditor from '@/components/JsonEditor'
|
|
export default {
|
|
name: 'InAppPurchaseDetails',
|
|
components: { PlatformSvgIcon, JsonEditor },
|
|
props: {
|
|
orderId: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
orderLoading: false,
|
|
order: {},
|
|
orderIsNull: false
|
|
}
|
|
},
|
|
computed: {
|
|
orderReceiptTypeMap() {
|
|
const locale = this.$locale
|
|
void locale
|
|
return {
|
|
PAYMENT: this.$t('pages.inAppPurchaseDetails.receiptType.payment'),
|
|
RECEIPT: this.$t('pages.inAppPurchaseDetails.receiptType.receipt')
|
|
}
|
|
},
|
|
orderStatusMap() {
|
|
const locale = this.$locale
|
|
void locale
|
|
return {
|
|
CREATE: {
|
|
label: this.$t('pages.inAppPurchaseDetails.status.create'),
|
|
tagType: ''
|
|
},
|
|
SUCCESS: {
|
|
label: this.$t('pages.inAppPurchaseDetails.status.success'),
|
|
tagType: 'success'
|
|
},
|
|
FAIL: {
|
|
label: this.$t('pages.inAppPurchaseDetails.status.fail'),
|
|
tagType: 'danger'
|
|
},
|
|
CANCEL: {
|
|
label: this.$t('pages.inAppPurchaseDetails.status.cancel'),
|
|
tagType: 'info'
|
|
},
|
|
HANG: {
|
|
label: this.$t('pages.inAppPurchaseDetails.status.hang'),
|
|
tagType: 'warning'
|
|
},
|
|
REFUND: {
|
|
label: this.$t('pages.inAppPurchaseDetails.status.refund'),
|
|
tagType: 'danger'
|
|
}
|
|
}
|
|
},
|
|
metadataList() {
|
|
if (!this.order.details || !this.order.details.metadata) {
|
|
return []
|
|
}
|
|
const resultList = []
|
|
for (const key in this.order.details.metadata) {
|
|
resultList.push({
|
|
key,
|
|
value: this.order.details.metadata[key]
|
|
})
|
|
}
|
|
return resultList
|
|
}
|
|
},
|
|
watch: {
|
|
orderId: {
|
|
handler() {
|
|
this.loadInAppPurchase()
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
methods: {
|
|
handleClose() {
|
|
this.$emit('close')
|
|
},
|
|
getReceiptTypeLabel(receiptType) {
|
|
return this.orderReceiptTypeMap[receiptType] || receiptType || '-'
|
|
},
|
|
getOrderStatus(status) {
|
|
return this.orderStatusMap[status] || {
|
|
label: status || '-',
|
|
tagType: 'info'
|
|
}
|
|
},
|
|
getOrderFactory(details) {
|
|
return (details && details.factory) || {}
|
|
},
|
|
getElementText(value) {
|
|
if (value === undefined || value === null) {
|
|
return ''
|
|
}
|
|
return String(value)
|
|
},
|
|
loadInAppPurchase() {
|
|
const that = this
|
|
that.orderLoading = true
|
|
getInAppPurchase(that.orderId).then(res => {
|
|
that.orderLoading = false
|
|
that.order = res.body || {}
|
|
that.orderIsNull = !(that.order && that.order.details && that.order.details.id)
|
|
}).catch(() => {
|
|
that.orderLoading = false
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.in-app-purchase-details-content {
|
|
padding: 0px 10px;
|
|
.order-info {
|
|
.order-info-col {
|
|
padding: 10px 0px;
|
|
width: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
.event-info {
|
|
.event-info-item {
|
|
padding: 10px 0px;
|
|
}
|
|
}
|
|
.product-card {
|
|
.prodcut-desc {
|
|
padding-bottom: 10px;
|
|
}
|
|
.product-item {
|
|
margin-bottom: 15px;
|
|
.product-cover {
|
|
width: 100px;
|
|
height: 100px;
|
|
flex-shrink: 0;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.product-info {
|
|
width: 100%;
|
|
padding: 0px 10px;
|
|
line-height: 24px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|