243 lines
7.1 KiB
Vue
243 lines
7.1 KiB
Vue
<template>
|
||
<div class="app-container" v-loading="loading">
|
||
<!-- 顶部金额卡片 -->
|
||
<el-row :gutter="12" class="amount-cards">
|
||
<el-col :span="6">
|
||
<el-card shadow="hover" class="amount-card">
|
||
<div class="amount-title">
|
||
<i class="el-icon-money"></i>
|
||
订单金额
|
||
</div>
|
||
<div class="amount-value">¥ {{ detail.amount | fix2 | dv }}</div>
|
||
<div class="amount-extra">支付单号：{{ detail.payNo | dv}}</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-card shadow="hover" class="amount-card">
|
||
<div class="amount-title">
|
||
<i class="el-icon-user"></i>
|
||
会员信息
|
||
</div>
|
||
<div class="amount-value">{{ detail.levelName | dv}}</div>
|
||
<div class="amount-extra">可用店铺：{{ detail.storeName | dv }}</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-card shadow="hover" class="amount-card">
|
||
<div class="amount-title">
|
||
<i class="el-icon-discount"></i>
|
||
折扣信息
|
||
</div>
|
||
<div class="amount-value">{{ detail.levelDiscount | dv }} 折</div>
|
||
<div class="amount-extra">频率限制：{{ limitTypeName | dv }} {{ detail.levelLimitCount | dv }} 次</div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="6">
|
||
<el-card shadow="hover" class="amount-card">
|
||
<div class="amount-title">
|
||
<i class="el-icon-time"></i>
|
||
购买时长
|
||
</div>
|
||
<div class="amount-value">{{ detail.levelTime | dv }} 天</div>
|
||
<div class="amount-extra">续费次数： {{detail.levelLimitTotal | dv}} 次</div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<!-- 主要信息卡片 -->
|
||
<el-card class="main-card">
|
||
<div class="card-header">
|
||
<div class="order-no">
|
||
<i class="el-icon-document"></i>
|
||
订单号：{{ detail.orderNo }}
|
||
</div>
|
||
</div>
|
||
|
||
<el-descriptions :column="4" border class="mt10">
|
||
<el-descriptions-item label="订单状态">
|
||
<dict-tag :options="dict.type.vip_order_status" :value="detail.status" size="small"/>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="用户">
|
||
<user-link :id="detail.userId" :name="detail.userName"/>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="商户">
|
||
<user-link :id="detail.mchId" :name="detail.mchName"/>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="下单时间">
|
||
{{ detail.createTime | dv }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="支付时间">
|
||
{{ detail.payTime | dv }}
|
||
</el-descriptions-item>
|
||
<!-- <el-descriptions-item label="过期时间">
|
||
{{ detail.expireTime | dv }}
|
||
</el-descriptions-item> -->
|
||
<!-- <el-descriptions-item label="VIP等级">
|
||
{{ detail.levelName | dv }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="频率限制">
|
||
<div class="flex-row">
|
||
<dict-tag :options="dict.type.vip_level_limit_type" :value="detail.levelLimitType" size="small"/>
|
||
<template v-if="detail.levelLimitCount">
|
||
<span class="limit-count">({{ detail.levelLimitCount }}次)</span>
|
||
</template>
|
||
</div>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="续费次数">
|
||
{{ detail.levelLimitTotal | dv }} 次
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="续费方案">
|
||
<dict-tag :options="dict.type.vip_level_solution" :value="detail.levelSolution" size="small"/>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="可用店铺">
|
||
<store-link :id="detail.levelStoreId" :name="detail.storeName"/>
|
||
</el-descriptions-item> -->
|
||
<el-descriptions-item label="支付渠道">
|
||
{{ detail.channelName | dv }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<!-- 取消信息 -->
|
||
<template v-if="detail.status === VipOrderStatus.CANCEL">
|
||
<el-descriptions :column="2" border size="small" class="mt10">
|
||
<el-descriptions-item label="取消时间">{{ detail.cancelTime }}</el-descriptions-item>
|
||
<el-descriptions-item label="取消原因" class="cancel-reason">{{ detail.cancelReason }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
</template>
|
||
</el-card>
|
||
|
||
<el-card class="box-card">
|
||
<el-tabs>
|
||
<el-tab-pane label="收益列表" lazy>
|
||
<bonus v-if="detail.id != null" :query="{billId: detail.id}" :view="views.vipOrder"/>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="支付信息" lazy>
|
||
<pay-bill :query="{bstId: detail.id, bstType: PayBillBstType.VIP_ORDER}" :view="views.vipOrder"/>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-card>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { getVipOrder } from "@/api/ss/vipOrder";
|
||
import UserLink from "@/components/Business/SmUser/UserLink.vue";
|
||
import StoreLink from "@/components/Business/Store/StoreLink.vue";
|
||
import { VipOrderStatus, PayBillBstType, views} from "@/utils/constants";
|
||
import Bonus from "@/views/ss/bonus/index.vue";
|
||
import PayBill from "@/views/ss/payBill/index.vue";
|
||
|
||
export default {
|
||
name: "VipOrderView",
|
||
components: { UserLink, Bonus, PayBill, StoreLink },
|
||
dicts: ['vip_level_limit_type', 'vip_order_status', 'vip_level_solution'],
|
||
data() {
|
||
return {
|
||
VipOrderStatus,
|
||
PayBillBstType,
|
||
detail: {},
|
||
loading: false,
|
||
views,
|
||
};
|
||
},
|
||
computed: {
|
||
limitTypeName() {
|
||
return this.dict.type.vip_level_limit_type.find(item => item.value === this.detail.levelLimitType)?.label;
|
||
}
|
||
},
|
||
created() {
|
||
const id = this.$route.params.id;
|
||
if (id) {
|
||
this.getInfo(id);
|
||
}
|
||
},
|
||
methods: {
|
||
getInfo(id) {
|
||
this.loading = true;
|
||
getVipOrder(id).then(response => {
|
||
this.detail = response.data;
|
||
}).finally(() => {
|
||
this.loading = false;
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.app-container {
|
||
padding: 10px;
|
||
}
|
||
|
||
.amount-cards {
|
||
margin-bottom: 12px;
|
||
.amount-card {
|
||
background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
|
||
color: white;
|
||
::v-deep .el-card__body {
|
||
padding: 15px;
|
||
}
|
||
.amount-title {
|
||
font-size: 13px;
|
||
opacity: 0.9;
|
||
i {
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
.amount-value {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
line-height: 28px;
|
||
margin: 8px 0;
|
||
}
|
||
.amount-extra {
|
||
font-size: 12px;
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
}
|
||
|
||
.main-card {
|
||
::v-deep .el-card__body {
|
||
padding: 15px;
|
||
}
|
||
|
||
.card-header {
|
||
margin-bottom: 15px;
|
||
.order-no {
|
||
font-size: 14px;
|
||
i {
|
||
margin-right: 6px;
|
||
color: #1890ff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.mt10 {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.flex-row {
|
||
display: flex;
|
||
align-items: center;
|
||
.limit-count {
|
||
margin-left: 8px;
|
||
color: #909399;
|
||
}
|
||
}
|
||
|
||
::v-deep .el-descriptions {
|
||
.el-descriptions-item__label {
|
||
width: 100px;
|
||
color: #606266;
|
||
}
|
||
.cancel-reason {
|
||
color: #f56c6c;
|
||
}
|
||
}
|
||
|
||
.ml10 {
|
||
margin-left: 10px;
|
||
}
|
||
</style> |