feat: 订单管理

src/apis/order-manage.ts

+import { request } from '@/utils/request'
+
+export function fetchGetOrderList<T>(domain: string, payload: object) {
+  return request.post<T>(`/equityOrderRest/getCurrentUserPayOrderList.json?domain=${domain}`, payload)
+}

src/layout/components/sidebar/sidebar.vue

@@ -2,7 +2,7 @@
 import { computed, h, ref, watchEffect } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { Plus, Logout, Me } from '@icon-park/vue-next'
+import { Plus, Logout, Me, TransactionOrder } from '@icon-park/vue-next'
 import type { MenuOption } from 'naive-ui'
 import { useUserStore } from '@/store/modules/user'
 // import LanguageSetting from '@/components/language-setting/language-setting.vue'
@@ -47,6 +47,11 @@ const menuOptions = computed<MenuOption[]>(() => {
 
 const userConfigOptions = computed(() => {
   return [
+    {
+      label: () => h('div', t('router_title_module.order_manage')),
+      key: 'OrderManage',
+      icon: () => h(TransactionOrder, { theme: 'outline', size: 14, strokeWidth: 3 }),
+    },
     {
       label: () => h('div', t('personal_settings_module.personal_settings_title')),
       key: 'PersonalSettings',

src/locales/langs/en.yaml

@@ -106,6 +106,14 @@ common_module:
   agent_exception: 'Agent exception, please try again later!'
   equity: 'Equity'
   file_size_limit: 'The file size cannot exceed {size}'
+  package: 'Package'
+  recharge: 'Recharge'
+  expired: 'Expired'
+  forever_effective: 'Forever Effective'
+  year: ' Year'
+  month: ' Month'
+  alipay: 'Alipay'
+  weChat: 'WeChat'
 
   dialogue_module:
     continue_question_message: 'You can keep asking questions'
@@ -155,6 +163,7 @@ router_title_module:
   explore: 'Explore'
   application_square: 'Application square'
   personal_settings: 'Personal settings'
+  order_manage: 'Order Management'
 
 login_module:
   app_welcome_words: 'Hi, welcome to Model Link'
@@ -489,3 +498,18 @@ personal_settings_module:
 
 equity_Module:
   file_empty_tip: 'The file content cannot be empty'
+
+order_manage_module:
+  package_name: 'PackageName'
+  recharge_name: 'RechargeDetails'
+  points: 'Points '
+  order_amount: 'OrderAmount'
+  pay_time: 'PayTime'
+  pay_method: 'PayMethod'
+  order_number: 'OrderNumber'
+  remaining_validity_period: 'Remaining validity period of'
+  remaining_validity_period_day: 'days'
+  basic_edition: 'Basic Edition '
+  flagship_edition: 'Flagship Edition '
+  professional_edition: 'Professional Edition '
+  gift_pack: 'Gift Pack'

src/locales/langs/zh-cn.yaml

@@ -105,6 +105,14 @@ common_module:
   agent_exception: '应用异常，请稍后重试！'
   equity: '权益'
   file_size_limit: '文件大小不能超过 {size}'
+  package: '套餐'
+  recharge: '充值'
+  expired: '已过期'
+  forever_effective: '永远有效'
+  year: '年'
+  month: '个月'
+  alipay: '支付宝'
+  weChat: '微信'
 
   dialogue_module:
     continue_question_message: '你可以继续提问'
@@ -154,6 +162,7 @@ router_title_module:
   explore: '探索'
   application_square: '应用广场'
   personal_settings: '个人设置'
+  order_manage: '订单管理'
 
 login_module:
   app_welcome_words: 'Hi, 欢迎使用Model Link'
@@ -487,3 +496,18 @@ personal_settings_module:
 
 equity_Module:
   file_empty_tip: '文件内容不能为空'
+
+order_manage_module:
+  package_name: '套餐名称'
+  recharge_name: '订单详情'
+  points: '积分'
+  order_amount: '订单金额'
+  pay_time: '支付时间'
+  pay_method: '支付方式'
+  order_number: '订单编号'
+  remaining_validity_period: '剩余有效期'
+  remaining_validity_period_day: '天'
+  basic_edition: '基础版'
+  flagship_edition: '旗舰版'
+  professional_edition: '专业版'
+  gift_pack: '礼包'

src/locales/langs/zh-hk.yaml

@@ -105,6 +105,14 @@ common_module:
   agent_exception: '應用異常，請稍後重試！'
   equity: '权益'
   file_size_limit: '文件大小不能超過 {size}'
+  package: '套餐'
+  recharge: '充值'
+  expired: '已過期'
+  forever_effective: '永遠有效'
+  year: '年'
+  month: '個月'
+  alipay: '支付寶'
+  weChat: '微信'
 
   dialogue_module:
     continue_question_message: '你可以繼續提問'
@@ -154,6 +162,7 @@ router_title_module:
   explore: '探索'
   application_square: '應用廣場'
   personal_settings: '個人設置'
+  order_manage: '訂單管理'
 
 login_module:
   app_welcome_words: 'Hi, 歡迎使用Model Link'
@@ -487,3 +496,18 @@ personal_settings_module:
 
 equity_Module:
   file_empty_tip: '文件內容不能為空'
+
+order_manage_module:
+  package_name: '套餐名稱'
+  recharge_name: '訂單詳情'
+  points: '積分'
+  order_amount: '訂單金額'
+  pay_time: '支付時間'
+  pay_method: '支付方式'
+  order_number: '訂單編號'
+  remaining_validity_period: '剩餘有效期'
+  remaining_validity_period_day: '天'
+  basic_edition: '基礎版'
+  flagship_edition: '旗艦版'
+  professional_edition: '專業版'
+  gift_pack: '禮包'

src/router/modules/order-manage.ts

+import { type RouteRecordRaw } from 'vue-router'
+import Layout from '@/layout/index.vue'
+
+export default [
+  {
+    path: '/order-manage-layout',
+    name: 'OrderManage-Layout',
+    meta: {
+      rank: 1001,
+      title: 'router_title_module.order_manage',
+    },
+    component: Layout,
+    redirect: '/order-manage',
+    children: [
+      {
+        path: '/order-manage',
+        name: 'OrderManage',
+        meta: {
+          rank: 1001,
+          title: 'router_title_module.order_manage',
+        },
+        component: () => import('@/views/order-manage/order-manage.vue'),
+        redirect: '/order-manage/package',
+        children: [
+          {
+            path: 'package',
+            name: 'OrderManagePackage',
+            meta: {
+              rank: 1001,
+              title: 'router_title_module.order_manage',
+            },
+            component: () => import('@/views/order-manage/components/package-manage.vue'),
+          },
+          {
+            path: 'recharge',
+            name: 'OrderManageRecharge',
+            meta: {
+              rank: 1001,
+              title: 'router_title_module.order_manage',
+            },
+            component: () => import('@/views/order-manage/components/recharge-manage.vue'),
+          },
+        ],
+      },
+    ],
+  },
+] as RouteRecordRaw[]

src/views/order-manage/components/package-manage.vue

+<script setup lang="ts">
+import { usePagination } from '@/composables/usePagination'
+import useTableScrollY from '@/composables/useTableScrollY'
+import { DataTableColumns } from 'naive-ui'
+import { h, ref, watch } from 'vue'
+import type { OrderItem } from '../types'
+import { fetchGetOrderList } from '@/apis/order-manage'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const packageColumns = createPackageColumns()
+// 表头：48  分页：28
+const { pageContentWrapRef, tableContentY } = useTableScrollY(48 + 28)
+const { paginationData, handlePageNoChange, handlePageSizeChange } = usePagination()
+
+const packageList = ref<OrderItem[]>([])
+const packageTableIsLoading = ref(false)
+
+;(function () {
+  handleGetPackageList()
+})()
+
+watch([() => paginationData.pageNo, () => paginationData.pageSize], handleGetPackageList)
+
+function handleGetPackageList() {
+  packageTableIsLoading.value = true
+  const domain = 'equity'
+
+  fetchGetOrderList<OrderItem[]>(domain, paginationData)
+    .then((res) => {
+      if (res.code !== 0) return
+
+      packageList.value = res.data
+      paginationData.totalRows = res.pagingInfo?.totalRows || 0
+      paginationData.totalPages = res.pagingInfo?.totalPages || 0
+    })
+    .finally(() => {
+      packageTableIsLoading.value = false
+    })
+}
+
+function judgeExpirationDate(lifespan: number) {
+  if (lifespan === -1) return t('common_module.expired')
+  else if (lifespan === -2) return t('common_module.forever_effective')
+  else
+    return (
+      t('order_manage_module.remaining_validity_period') +
+      lifespan +
+      t('order_manage_module.remaining_validity_period_day')
+    )
+}
+
+function splicingPackageName(orderItem: OrderItem) {
+  let expiredType = ''
+  let equityType = ''
+
+  if (orderItem.type === 'normal') expiredType = t('order_manage_module.basic_edition')
+  else if (orderItem.type === 'professional') expiredType = t('order_manage_module.professional_edition')
+  else if (orderItem.type === 'ultimate') expiredType = t('order_manage_module.flagship_edition')
+
+  if (orderItem.expiredType === 'year') equityType = t('common_module.year')
+  else if (orderItem.expiredType === 'month') equityType = t('common_module.month')
+
+  return expiredType + orderItem.expiredNum + equityType
+}
+
+function createPackageColumns(): DataTableColumns<OrderItem> {
+  return [
+    {
+      title: t('order_manage_module.package_name'),
+      key: 'packageName',
+      render(row) {
+        return h('div', {}, splicingPackageName(row))
+      },
+    },
+    {
+      title: t('order_manage_module.points'),
+      key: 'pointNum',
+      width: 360,
+      render(row) {
+        return h('div', [
+          h('span', {}, row.pointNum + t('order_manage_module.points')),
+          h(
+            'span',
+            {
+              class: 'ml-[10px]',
+              style: row.remainExpiredDay === -1 ? { color: '#cb5656' } : { color: '#26a50e' },
+            },
+            judgeExpirationDate(row.remainExpiredDay),
+          ),
+        ])
+      },
+    },
+    {
+      title: t('order_manage_module.order_amount'),
+      key: 'amount',
+    },
+    {
+      title: t('order_manage_module.pay_time'),
+      key: 'payTime',
+    },
+    {
+      title: t('order_manage_module.pay_method'),
+      key: 'payChannel',
+      render(row) {
+        return h('div', {}, row.payChannel === 'Wx' ? t('common_module.weChat') : t('common_module.alipay'))
+      },
+    },
+    {
+      title: t('order_manage_module.order_number'),
+      key: 'payOrderSn',
+    },
+  ]
+}
+</script>
+
+<template>
+  <div ref="pageContentWrapRef" class="h-full">
+    <div :style="{ height: tableContentY + 48 + 'px' }">
+      <n-data-table
+        :single-line="true"
+        single-column
+        :columns="packageColumns"
+        :data="packageList"
+        :bordered="false"
+        :bottom-bordered="false"
+        :max-height="tableContentY"
+        :loading="packageTableIsLoading"
+      >
+        <template #empty
+          ><div class="flex flex-col items-center justify-center" :style="{ height: tableContentY + 'px' }">
+            <img src="@/assets/images/empty-list.png" width="68px" height="68px" />
+            <span class="mt-[20px] text-[14px] text-[#999999]">{{ t('common_module.empty_data') }}</span>
+          </div></template
+        >
+      </n-data-table>
+    </div>
+    <footer class="flex justify-end">
+      <CustomPagination
+        :paging-info="paginationData"
+        @update-page-no="handlePageNoChange"
+        @update-page-size="handlePageSizeChange"
+      />
+    </footer>
+  </div>
+</template>

src/views/order-manage/components/recharge-manage.vue

+<script setup lang="ts">
+import { usePagination } from '@/composables/usePagination'
+import useTableScrollY from '@/composables/useTableScrollY'
+import { DataTableColumns } from 'naive-ui'
+import { h, ref, watch } from 'vue'
+import { fetchGetOrderList } from '@/apis/order-manage'
+import { useI18n } from 'vue-i18n'
+import type { OrderItem } from '../types'
+
+const { t } = useI18n()
+const rechargeColumns = createRechargeColumns()
+// 表头：48  分页：28
+const { pageContentWrapRef, tableContentY } = useTableScrollY(48 + 28)
+const { paginationData, handlePageNoChange, handlePageSizeChange } = usePagination()
+
+const rechargeList = ref<OrderItem[]>([])
+const rechargeTableIsLoading = ref(false)
+
+;(function () {
+  handleGetRechargeList()
+})()
+
+watch([() => paginationData.pageNo, () => paginationData.pageSize], handleGetRechargeList)
+
+function handleGetRechargeList() {
+  rechargeTableIsLoading.value = true
+  const domain = 'point'
+  fetchGetOrderList<OrderItem[]>(domain, paginationData)
+    .then((res) => {
+      if (res.code !== 0) return
+
+      rechargeList.value = res.data
+      paginationData.totalRows = res.pagingInfo?.totalRows || 0
+      paginationData.totalPages = res.pagingInfo?.totalPages || 0
+    })
+    .finally(() => {
+      rechargeTableIsLoading.value = false
+    })
+}
+
+function splicingRechargeDetails(orderItem: OrderItem) {
+  let rechargeType = ''
+
+  if (orderItem.type === 'normal') rechargeType = 100 + t('order_manage_module.points')
+  else if (orderItem.type === 'professional') rechargeType = 300 + t('order_manage_module.points')
+  else if (orderItem.type === 'ultimate') rechargeType = 800 + t('order_manage_module.points')
+
+  return rechargeType
+}
+
+function createRechargeColumns(): DataTableColumns<OrderItem> {
+  return [
+    {
+      title: t('order_manage_module.recharge_name'),
+      key: 'rechargeDetails',
+      render(row) {
+        return h('div', {}, splicingRechargeDetails(row) + t('order_manage_module.gift_pack'))
+      },
+    },
+    {
+      title: t('order_manage_module.points'),
+      key: 'pointNum',
+      render(row) {
+        return h('div', [h('span', row.pointNum + t('order_manage_module.points'))])
+      },
+    },
+    {
+      title: t('order_manage_module.order_amount'),
+      key: 'amount',
+    },
+    {
+      title: t('order_manage_module.pay_time'),
+      key: 'payTime',
+    },
+    {
+      title: t('order_manage_module.pay_method'),
+      key: 'payChannel',
+      render(row) {
+        return h('div', {}, row.payChannel === 'Wx' ? t('common_module.weChat') : t('common_module.alipay'))
+      },
+    },
+    {
+      title: t('order_manage_module.order_number'),
+      key: 'payOrderSn',
+    },
+  ]
+}
+</script>
+
+<template>
+  <div ref="pageContentWrapRef" class="h-full">
+    <div :style="{ height: tableContentY + 48 + 'px' }">
+      <n-data-table
+        :single-line="true"
+        single-column
+        :columns="rechargeColumns"
+        :data="rechargeList"
+        :bordered="false"
+        :bottom-bordered="false"
+        :max-height="tableContentY"
+        :loading="rechargeTableIsLoading"
+      >
+        <template #empty
+          ><div class="flex flex-col items-center justify-center" :style="{ height: tableContentY + 'px' }">
+            <img src="@/assets/images/empty-list.png" width="68px" height="68px" />
+            <span class="mt-[20px] text-[14px] text-[#999999]">{{ t('common_module.empty_data') }}</span>
+          </div></template
+        >
+      </n-data-table>
+    </div>
+    <footer class="flex justify-end">
+      <CustomPagination
+        :paging-info="paginationData"
+        @update-page-no="handlePageNoChange"
+        @update-page-size="handlePageSizeChange"
+      />
+    </footer>
+  </div>
+</template>

src/views/order-manage/order-manage.vue

+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+
+const currentRoute = useRoute()
+const router = useRouter()
+
+const routerNameValue = ref(currentRoute.name)
+
+const orderManageModuleList = [
+  {
+    routeName: 'OrderManagePackage',
+    label: 'common_module.package',
+  },
+  {
+    routeName: 'OrderManageRecharge',
+    label: 'common_module.recharge',
+  },
+]
+
+watch(
+  () => currentRoute.fullPath,
+  () => {
+    routerNameValue.value = currentRoute.name
+  },
+)
+
+function handleChangeRoute(routeName: string) {
+  router.replace({ name: routeName })
+}
+</script>
+
+<template>
+  <div class="flex h-full flex-col rounded-[20px] bg-white p-6 shadow-[0_2px_2px_#0000000a]">
+    <div class="flex justify-between">
+      <div class="flex flex-col">
+        <ul class="mb-5 flex bg-[#f8f8f8]">
+          <li
+            v-for="orderManageModuleItem in orderManageModuleList"
+            :key="orderManageModuleItem.routeName"
+            class="rounded-theme hover:bg-active-color hover:text-font-color h-8 cursor-pointer select-none px-[14px] leading-8 text-[#999999] transition-colors duration-300 first:ml-0"
+            :class="[
+              routerNameValue === orderManageModuleItem.routeName
+                ? 'text-theme-color bg-active-color hover:text-theme-color'
+                : 'text-gray-font-color border-transparent',
+            ]"
+            @click="handleChangeRoute(orderManageModuleItem.routeName)"
+          >
+            {{ t(orderManageModuleItem.label) }}
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="h-full overflow-hidden">
+      <RouterView v-slot="{ Component }">
+        <Transition appear name="fade-slide" mode="out-in">
+          <Component :is="Component" />
+        </Transition>
+      </RouterView>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.fade-slide-leave-active,
+.fade-slide-enter-active {
+  transition: all 0.3s;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+</style>

src/views/order-manage/types.d.ts

+export interface OrderItem {
+  type: string
+  domain: 'equity' | 'points' //equity-权益包【套餐】 points-积分包【充值】
+  expiredNum: number //过期数
+  expiredType: 'year' | 'month' //过期单位
+  pointNum: number //积分数
+  remainExpiredDay: number //剩余过期天数
+  amount: number //金额
+  payTime: string
+  payChannel: 'Wx' | 'Ali' //支付渠道 wx-微信 ali-支付宝
+  payOrderSn: string //订单编号
+}

types/locales.d.ts

@@ -106,6 +106,14 @@ declare namespace I18n {
       agent_exception: string
       equity: string
       file_size_limit: string
+      package: string
+      recharge: string
+      expired: string
+      forever_effective: string
+      year: string
+      month: string
+      alipay: string
+      weChat: string
 
       dialogue_module: {
         continue_question_message: string
@@ -162,6 +170,7 @@ declare namespace I18n {
       explore: string
       application_square: string
       personal_settings: string
+      order_manage: string
     }
 
     login_module: {
@@ -505,5 +514,21 @@ declare namespace I18n {
     equity_Module: {
       file_empty_tip: string
     }
+
+    order_manage_module: {
+      package_name: string
+      recharge_name: string
+      points: string
+      order_amount: string
+      pay_time: string
+      pay_method: string
+      order_number: string
+      remaining_validity_period: string
+      remaining_validity_period_day: string
+      basic_edition: string
+      flagship_edition: string
+      professional_edition: string
+      gift_pack: string
+    }
   }
 }