141 lines
3.9 KiB
Vue
141 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { nextTick, onMounted, ref } from 'vue';
|
|
|
|
definePageMeta({
|
|
layout: 'header',
|
|
})
|
|
const activeTab = ref('')
|
|
|
|
// const route = useRoute();
|
|
// const { id } = route.params as { id: string };
|
|
interface PointsResult {
|
|
points: number
|
|
memberConsumeList: any[]
|
|
}
|
|
const pointsResult = ref<PointsResult>()
|
|
async function getPoints() {
|
|
try {
|
|
const res = await request.get('/member/getPoints')
|
|
if (res.code === 200) {
|
|
pointsResult.value = res.data as PointsResult
|
|
nextTick(() => {
|
|
activeTab.value = 'manage'
|
|
})
|
|
}
|
|
}
|
|
catch (err) {
|
|
console.log(err)
|
|
}
|
|
}
|
|
getPoints()
|
|
|
|
const myMemberList = ref([
|
|
{
|
|
title:'基础版VIP会员',
|
|
type:'单月套餐',
|
|
time:'2021-02-10至2024-19-23',
|
|
payType:'支付宝'
|
|
},
|
|
{
|
|
title:'基础版VIP会员',
|
|
type:'单月套餐',
|
|
time:'2021-02-10至2024-19-23',
|
|
payType:'支付宝'
|
|
},
|
|
|
|
])
|
|
onMounted(() => {
|
|
// nextTick(() => {
|
|
// activeTab.value = 'beatles'
|
|
// })
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex justify-center bg-[#f2f5f8] items-center h-[calc(100vh-48px)]">
|
|
<div class="w-[1200px] bg-white rounded-lg shadow-lg p-10 h-[calc(100%-40px)]">
|
|
<h1 class="text-2xl font-bold mb-4">
|
|
订单管理
|
|
</h1>
|
|
<n-tabs v-model:value="activeTab" type="line" animated>
|
|
<n-tab-pane name="manage" tab="订单管理">
|
|
<div class="h-[500px] overflow-y-auto">
|
|
<div class="p-2 text-base">我的会员</div>
|
|
<div v-for="(item, index) in myMemberList" :key="index" class="p-2 bg-[#f9fbfc] rounded-lg text-gray-500 mb-2">
|
|
<div class="p-2 text-[#ff9e0b]">
|
|
{{ item.title }}
|
|
</div>
|
|
<div class="flex justify-between p-2">
|
|
<div>订单类型</div>
|
|
<div>{{ item.type }}</div>
|
|
</div>
|
|
<div class="flex justify-between p-2">
|
|
<div>生效时间</div>
|
|
<div>{{item.time}}</div>
|
|
</div>
|
|
<div class="flex justify-between p-2">
|
|
<div>支付方式</div>
|
|
<div>{{item.payType}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</n-tab-pane>
|
|
<n-tab-pane name="record" tab="购买记录">
|
|
<div class="h-[500px] overflow-y-auto">
|
|
<div class="mc-table flex w-full">
|
|
<div class="w-[200px]">
|
|
交易时间
|
|
</div>
|
|
<div class="w-[200px]">
|
|
商品名称
|
|
</div>
|
|
<div class="flex-1">
|
|
订单编号
|
|
</div>
|
|
<div class="w-[130px]">
|
|
交易金额
|
|
</div>
|
|
<div class="w-[130px]">
|
|
交易状态
|
|
</div>
|
|
<div class="w-[130px]">
|
|
操作
|
|
</div>
|
|
</div>
|
|
<div v-for="item in pointsResult.memberConsumeList" :key="item" class="mc-table flex w-full">
|
|
<div class="w-[200px]">
|
|
2021.02.12 12:21
|
|
</div>
|
|
<div class="w-[200px]">
|
|
基础班VIP1个月
|
|
</div>
|
|
<div class="flex-1">
|
|
OHF_202454221134433222
|
|
</div>
|
|
<div class="w-[130px]">
|
|
¥ 45.0
|
|
</div>
|
|
<div class="w-[130px]">
|
|
成功
|
|
</div>
|
|
<div class="w-[130px]">
|
|
<div class="border border-solid border-[#ccc] rounded-lg w-20 h-8 flex justify-center items-center cursor-pointer">开票</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</n-tab-pane>
|
|
</n-tabs>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.mc-table {
|
|
display: flex;
|
|
padding: 10px 4px;
|
|
border-bottom: 1px solid #eee;
|
|
align-items: center;
|
|
// justify-content: space-between;
|
|
}
|
|
</style>
|