Merge remote-tracking branch 'origin/master'

2024-08-19 17:34:40 +08:00 · 2024-08-19 17:34:40 +08:00 · 35e9e7cfb2
parent fd4d080588 fc5e37dd21
commit 35e9e7cfb2
23 changed files with 526 additions and 85 deletions
--- a/package.json
+++ b/package.json
@ -47,7 +47,7 @@
    "driver.js": "^1.3.1",
    "echarts": "^5.5.0",
    "echarts-wordcloud": "^2.1.0",
-    "element-plus": "2.7.0",
+    "element-plus": "2.8.0",
    "fast-xml-parser": "^4.3.2",
    "highlight.js": "^11.9.0",
    "jsencrypt": "^3.3.2",
--- a/src/api/pay/app/index.ts
+++ b/src/api/pay/app/index.ts
@ -2,6 +2,7 @@ import request from '@/config/axios'

 export interface AppVO {
  id: number
+  appKey: string
  name: string
  status: number
  remark: string
--- a/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue
+++ b/src/components/DiyEditor/components/mobile/PromotionCombination/index.vue
@ -66,9 +66,9 @@
 import { PromotionCombinationProperty } from './config'
 import * as ProductSpuApi from '@/api/mall/product/spu'
 import * as CombinationActivityApi from '@/api/mall/promotion/combination/combinationActivity'
-import {Spu} from "@/api/mall/product/spu";
-import {CombinationProductVO} from "@/api/mall/promotion/combination/combinationActivity";
-import {fenToYuan} from "@/utils";
+import { Spu } from '@/api/mall/product/spu'
+import { CombinationProductVO } from '@/api/mall/promotion/combination/combinationActivity'
+import { fenToYuan } from '@/utils'

 /** 拼团 */
 defineOptions({ name: 'PromotionCombination' })
@ -87,9 +87,9 @@ watch(
    activity.products.forEach((product: CombinationProductVO) => {
      spuList.value.forEach((spu: Spu) => {
        // 商品原售价和拼团价，哪个便宜就赋值哪个
-        spu.combinationPrice = Math.min(spu.combinationPrice || Infinity, product.combinationPrice); // 设置 SPU 的最低价格
+        spu.combinationPrice = Math.min(spu.combinationPrice || Infinity, product.combinationPrice) // 设置 SPU 的最低价格
      })
-    });
+    })
  },
  {
    immediate: true,
--- a/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue
+++ b/src/components/DiyEditor/components/mobile/PromotionSeckill/index.vue
@ -66,9 +66,9 @@
 import { PromotionSeckillProperty } from './config'
 import * as ProductSpuApi from '@/api/mall/product/spu'
 import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
-import {Spu} from "@/api/mall/product/spu";
-import {SeckillProductVO} from "@/api/mall/promotion/seckill/seckillActivity";
-import {fenToYuan} from "@/utils";
+import { Spu } from '@/api/mall/product/spu'
+import { SeckillProductVO } from '@/api/mall/promotion/seckill/seckillActivity'
+import { fenToYuan } from '@/utils'

 /** 秒杀 */
 defineOptions({ name: 'PromotionSeckill' })
@ -87,9 +87,9 @@ watch(
    // 循环活动信息，赋值秒杀最低价格
    activity.products.forEach((product: SeckillProductVO) => {
      spuList.value.forEach((spu: Spu) => {
-        spu.seckillPrice = Math.min(spu.seckillPrice || Infinity, product.seckillPrice);  // 设置 SPU 的最低价格
+        spu.seckillPrice = Math.min(spu.seckillPrice || Infinity, product.seckillPrice) // 设置 SPU 的最低价格
      })
-    });
+    })
  },
  {
    immediate: true,
--- a/src/layout/components/Setting/src/Setting.vue
+++ b/src/layout/components/Setting/src/Setting.vue
@ -126,6 +126,8 @@ const copyConfig = async () => {
      message: ${appStore.getMessage},
      // 标签页
      tagsView: ${appStore.getTagsView},
+      // 标签页
+      tagsViewImmerse: ${appStore.getTagsViewImmerse},
      // 标签页图标
      getTagsViewIcon: ${appStore.getTagsViewIcon},
      // logo
--- a/src/layout/components/Setting/src/components/InterfaceDisplay.vue
+++ b/src/layout/components/Setting/src/components/InterfaceDisplay.vue
@ -73,6 +73,13 @@ const tagsViewChange = (show: boolean) => {
  appStore.setTagsView(show)
 }

+// 标签页沉浸
+const tagsViewImmerse = ref(appStore.getTagsViewImmerse)
+
+const tagsViewImmerseChange = (immerse: boolean) => {
+  appStore.setTagsViewImmerse(immerse)
+}
+
 // 标签页图标
 const tagsViewIcon = ref(appStore.getTagsViewIcon)

@ -181,6 +188,11 @@ watch(
      <ElSwitch v-model="tagsView" @change="tagsViewChange" />
    </div>

+    <div class="flex items-center justify-between">
+      <span class="text-14px">{{ t('setting.tagsViewImmerse') }}</span>
+      <ElSwitch v-model="tagsViewImmerse" @change="tagsViewImmerseChange" />
+    </div>
+
    <div class="flex items-center justify-between">
      <span class="text-14px">{{ t('setting.tagsViewIcon') }}</span>
      <ElSwitch v-model="tagsViewIcon" @change="tagsViewIconChange" />
--- a/src/layout/components/TagsView/src/TagsView.vue
+++ b/src/layout/components/TagsView/src/TagsView.vue
@ -33,6 +33,8 @@ const affixTagArr = ref<RouteLocationNormalizedLoaded[]>([])

 const appStore = useAppStore()

+const tagsViewImmerse = computed(() => appStore.getTagsViewImmerse)
+
 const tagsViewIcon = computed(() => appStore.getTagsViewIcon)

 const isDark = computed(() => appStore.getIsDark)
@ -266,7 +268,7 @@ watch(
    class="relative w-full flex bg-[#fff] dark:bg-[var(--el-bg-color)]"
  >
    <span
-      :class="`${prefixCls}__tool ${prefixCls}__tool--first`"
+      :class="tagsViewImmerse ? '' : `${prefixCls}__tool ${prefixCls}__tool--first`"
      class="h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
      @click="move(-200)"
    >
@ -343,6 +345,9 @@ watch(
            :tag-item="item"
            :class="[
              `${prefixCls}__item`,
+              tagsViewImmerse ? `${prefixCls}__item--immerse` : '',
+              tagsViewIcon ? `${prefixCls}__item--icon` : '',
+              tagsViewImmerse && tagsViewIcon ? `${prefixCls}__item--immerse--icon` : '',
              item?.meta?.affix ? `${prefixCls}__item--affix` : '',
              {
                'is-active': isActive(item)
@ -354,7 +359,7 @@ watch(
              <router-link :ref="tagLinksRefs.set" :to="{ ...item }" custom v-slot="{ navigate }">
                <div
                  @click="navigate"
-                  class="h-full flex items-center justify-center whitespace-nowrap pl-15px"
+                  :class="`h-full flex items-center justify-center whitespace-nowrap pl-15px ${prefixCls}__item--label`"
                >
                  <Icon
                    v-if="
@ -384,7 +389,7 @@ watch(
      </ElScrollbar>
    </div>
    <span
-      :class="`${prefixCls}__tool`"
+      :class="tagsViewImmerse ? '' : `${prefixCls}__tool`"
      class="h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
      @click="move(200)"
    >
@ -395,7 +400,7 @@ watch(
      />
    </span>
    <span
-      :class="`${prefixCls}__tool`"
+      :class="tagsViewImmerse ? '' : `${prefixCls}__tool`"
      class="h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
      @click="refreshSelectedTag(selectedTag)"
    >
@ -460,7 +465,7 @@ watch(
      ]"
    >
      <span
-        :class="`${prefixCls}__tool`"
+        :class="tagsViewImmerse ? '' : `${prefixCls}__tool`"
        class="block h-[var(--tags-view-height)] w-[var(--tags-view-height)] flex cursor-pointer items-center justify-center"
      >
        <Icon
@ -512,7 +517,7 @@ $prefix-cls: #{$namespace}-tags-view;
    position: relative;
    top: 2px;
    height: calc(100% - 6px);
-    padding-right: 25px;
+    padding-right: 15px;
    margin-left: 4px;
    font-size: 12px;
    cursor: pointer;
@ -533,6 +538,10 @@ $prefix-cls: #{$namespace}-tags-view;
    }
  }

+  &__item--icon {
+    padding-right: 20px;
+  }
+
  &__item:not(.is-active) {
    &:hover {
      color: var(--el-color-primary);
@ -549,6 +558,37 @@ $prefix-cls: #{$namespace}-tags-view;
      }
    }
  }
+
+  &__item--immerse {
+    top: 3px;
+    padding-right: 35px;
+    margin: 0 -10px;
+    border: 1px solid transparent;
+    -webkit-mask-box-image: url("data:image/svg+xml,%3Csvg width='68' height='34' viewBox='0 0 68 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m27,0c-7.99582,0 -11.95105,0.00205 -12,12l0,6c0,8.284 -0.48549,16.49691 -8.76949,16.49691l54.37857,-0.11145c-8.284,0 -8.60908,-8.10146 -8.60908,-16.38546l0,-6c0.11145,-12.08445 -4.38441,-12 -12,-12l-13,0z' fill='%23409eff'/%3E%3C/svg%3E")
+      12 27 15;
+    .#{$prefix-cls}__item--label {
+      padding-left: 35px;
+    }
+    .#{$prefix-cls}__item--close {
+      right: 20px;
+    }
+  }
+
+  &__item--immerse--icon {
+    padding-right: 35px;
+  }
+
+  &__item--immerse:not(.is-active) {
+    &:hover {
+      color: var(--el-color-white);
+      background-color: var(--el-color-primary);
+      .#{$prefix-cls}__item--close {
+        :deep(span) {
+          color: var(--el-color-white) !important;
+        }
+      }
+    }
+  }
 }

 .dark {
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@ -92,6 +92,7 @@ export default {
    localeIcon: '多语言图标',
    messageIcon: '消息图标',
    tagsView: '标签页',
+    tagsViewImmerse: '标签页沉浸',
    logo: '标志',
    greyMode: '灰色模式',
    fixedHeader: '固定头部',
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@ -21,6 +21,7 @@ interface AppState {
  locale: boolean
  message: boolean
  tagsView: boolean
+  tagsViewImmerse: boolean
  tagsViewIcon: boolean
  logo: boolean
  fixedHeader: boolean
@ -58,6 +59,7 @@ export const useAppStore = defineStore('app', {
      locale: true, // 多语言图标
      message: true, // 消息图标
      tagsView: true, // 标签页
+      tagsViewImmerse: false, // 标签页沉浸
      tagsViewIcon: true, // 是否显示标签图标
      logo: true, // logo
      fixedHeader: true, // 固定toolheader
@ -131,6 +133,9 @@ export const useAppStore = defineStore('app', {
    getTagsView(): boolean {
      return this.tagsView
    },
+    getTagsViewImmerse(): boolean {
+      return this.tagsViewImmerse
+    },
    getTagsViewIcon(): boolean {
      return this.tagsViewIcon
    },
@ -208,6 +213,9 @@ export const useAppStore = defineStore('app', {
    setTagsView(tagsView: boolean) {
      this.tagsView = tagsView
    },
+    setTagsViewImmerse(tagsViewImmerse: boolean) {
+      this.tagsViewImmerse = tagsViewImmerse
+    },
    setTagsViewIcon(tagsViewIcon: boolean) {
      this.tagsViewIcon = tagsViewIcon
    },
--- a/src/views/Login/SocialLogin.vue
+++ b/src/views/Login/SocialLogin.vue
@ -276,10 +276,11 @@ const handleLogin = async (params) => {
    const code = route?.query?.code as string
    const state = route?.query?.state as string

+    const loginDataLoginForm = { ...loginData.loginForm }
    const res = await LoginApi.login({
      // 账号密码登录
-      username: loginData.loginForm.username,
-      password: loginData.loginForm.password,
+      username: loginDataLoginForm.username,
+      password: loginDataLoginForm.password,
      captchaVerification: params.captchaVerification,
      // 社交登录
      socialCode: code,
@ -294,8 +295,8 @@ const handleLogin = async (params) => {
      text: '正在加载系统中...',
      background: 'rgba(0, 0, 0, 0.7)'
    })
-    if (loginData.loginForm.rememberMe) {
-      authUtil.setLoginForm(loginData.loginForm)
+    if (loginDataLoginForm.rememberMe) {
+      authUtil.setLoginForm(loginDataLoginForm)
    } else {
      authUtil.removeLoginForm()
    }
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@ -249,8 +249,9 @@ const handleLogin = async (params) => {
    if (!data) {
      return
    }
-    loginData.loginForm.captchaVerification = params.captchaVerification
-    const res = await LoginApi.login(loginData.loginForm)
+    const loginDataLoginForm = { ...loginData.loginForm }
+    loginDataLoginForm.captchaVerification = params.captchaVerification
+    const res = await LoginApi.login(loginDataLoginForm)
    if (!res) {
      return
    }
@ -259,8 +260,8 @@ const handleLogin = async (params) => {
      text: '正在加载系统中...',
      background: 'rgba(0, 0, 0, 0.7)'
    })
-    if (loginData.loginForm.rememberMe) {
-      authUtil.setLoginForm(loginData.loginForm)
+    if (loginDataLoginForm.rememberMe) {
+      authUtil.setLoginForm(loginDataLoginForm)
    } else {
      authUtil.removeLoginForm()
    }
--- a/src/views/mall/product/spu/form/ProductAttributes.vue
+++ b/src/views/mall/product/spu/form/ProductAttributes.vue
@ -74,7 +74,7 @@ const inputRef = ref<any[]>([]) //标签输入框Ref
 const setInputRef = (el: any) => {
  if (el === null || typeof el === 'undefined') return
  // 如果不存在 id 相同的元素才添加
-  if (!inputRef.value.some((item) => item.input?.attributes.id === el.input?.attributes.id)) {
+  if (!inputRef.value.some((item) => item.inputRef?.attributes.id === el.inputRef?.attributes.id)) {
    inputRef.value.push(el)
  }
 }
--- a/src/views/mall/trade/afterSale/index.vue
+++ b/src/views/mall/trade/afterSale/index.vue
@ -135,7 +135,7 @@
          </div>
        </template>
      </el-table-column>
-      <el-table-column align="center" label="订单金额" prop="refundPrice">
+      <el-table-column align="center" label="订单金额" prop="refundPrice" min-width="120">
        <template #default="scope">
          <span>{{ fenToYuan(scope.row.refundPrice) }} 元</span>
        </template>
@ -206,6 +206,7 @@ const queryParams = reactive({
  way: null,
  type: null
 })
+
 /** 查询列表 */
 const getList = async () => {
  loading.value = true
@ -216,23 +217,26 @@ const getList = async () => {
      delete data.status
    }
    // 执行查询
-    const res = (await AfterSaleApi.getAfterSalePage(data)) as AfterSaleApi.TradeAfterSaleVO[]
-    list.value = res.list
+    const res = await AfterSaleApi.getAfterSalePage(data)
+    list.value = res.list as AfterSaleApi.TradeAfterSaleVO[]
    total.value = res.total
  } finally {
    loading.value = false
  }
 }
+
 /** 搜索按钮操作 */
 const handleQuery = async () => {
  queryParams.pageNo = 1
  await getList()
 }
+
 /** 重置按钮操作 */
 const resetQuery = () => {
  queryFormRef.value?.resetFields()
  handleQuery()
 }
+
 /** tab 切换 */
 const tabClick = async (tab: TabsPaneContext) => {
  queryParams.status = tab.paneName
--- a/src/views/member/user/detail/UserAccountInfo.vue
+++ b/src/views/member/user/detail/UserAccountInfo.vue
@ -50,31 +50,7 @@ import * as UserApi from '@/api/member/user'
 import * as WalletApi from '@/api/pay/wallet/balance'
 import { UserTypeEnum } from '@/utils/constants'
 import { fenToYuan } from '@/utils'
-
-const props = defineProps<{ user: UserApi.UserVO }>() // 用户信息
-const WALLET_INIT_DATA = {
-  balance: 0,
-  totalExpense: 0,
-  totalRecharge: 0
-} as WalletApi.WalletVO // 钱包初始化数据
-const wallet = ref<WalletApi.WalletVO>(WALLET_INIT_DATA) // 钱包信息
-
-/** 查询用户钱包信息 */
-const getUserWallet = async () => {
-  if (!props.user.id) {
-    wallet.value = WALLET_INIT_DATA
-    return
-  }
-  const params = { userId: props.user.id }
-  wallet.value = (await WalletApi.getWallet(params)) || WALLET_INIT_DATA
-}
-
-/** 监听用户编号变化 */
-watch(
-  () => props.user.id,
-  () => getUserWallet(),
-  { immediate: true }
-)
+const props = defineProps<{ user: UserApi.UserVO; wallet: WalletApi.WalletVO }>() // 用户信息
 </script>
 <style scoped lang="scss">
 .cell-item {
--- a/src/views/member/user/detail/UserAftersaleList.vue
+++ b/src/views/member/user/detail/UserAftersaleList.vue
@ -0,0 +1,275 @@
+<template>
+  <!-- 搜索 -->
+  <ContentWrap>
+    <el-form ref="queryFormRef" :inline="true" :model="queryParams" label-width="68px">
+      <el-form-item label="商品名称" prop="spuName">
+        <el-input
+          v-model="queryParams.spuName"
+          class="!w-280px"
+          clearable
+          placeholder="请输入商品 SPU 名称"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="退款编号" prop="no">
+        <el-input
+          v-model="queryParams.no"
+          class="!w-280px"
+          clearable
+          placeholder="请输入退款编号"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="订单编号" prop="orderNo">
+        <el-input
+          v-model="queryParams.orderNo"
+          class="!w-280px"
+          clearable
+          placeholder="请输入订单编号"
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="售后状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          class="!w-280px"
+          clearable
+          placeholder="请选择售后状态"
+        >
+          <el-option label="全部" value="0" />
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="售后方式" prop="way">
+        <el-select
+          v-model="queryParams.way"
+          class="!w-280px"
+          clearable
+          placeholder="请选择售后方式"
+        >
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_WAY)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="售后类型" prop="type">
+        <el-select
+          v-model="queryParams.type"
+          class="!w-280px"
+          clearable
+          placeholder="请选择售后类型"
+        >
+          <el-option
+            v-for="dict in getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="创建时间" prop="createTime">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+          class="!w-260px"
+          end-placeholder="自定义时间"
+          start-placeholder="自定义时间"
+          type="daterange"
+          value-format="YYYY-MM-DD HH:mm:ss"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery">
+          <Icon class="mr-5px" icon="ep:search" />
+          搜索
+        </el-button>
+        <el-button @click="resetQuery">
+          <Icon class="mr-5px" icon="ep:refresh" />
+          重置
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <ContentWrap>
+    <el-tabs v-model="queryParams.status" @tab-click="tabClick">
+      <el-tab-pane
+        v-for="item in statusTabs"
+        :key="item.label"
+        :label="item.label"
+        :name="item.value"
+      />
+    </el-tabs>
+    <!-- 列表 -->
+    <el-table v-loading="loading" :data="list">
+      <el-table-column align="center" label="退款编号" min-width="200" prop="no" />
+      <el-table-column align="center" label="订单编号" min-width="200" prop="orderNo">
+        <template #default="{ row }">
+          <el-button link type="primary" @click="openOrderDetail(row.orderId)">
+            {{ row.orderNo }}
+          </el-button>
+        </template>
+      </el-table-column>
+      <el-table-column label="商品信息" min-width="600" prop="spuName">
+        <template #default="{ row }">
+          <div class="flex items-center">
+            <el-image
+              :src="row.picUrl"
+              class="mr-10px h-30px w-30px"
+              @click="imagePreview(row.picUrl)"
+            />
+            <span class="mr-10px">{{ row.spuName }}</span>
+            <el-tag v-for="property in row.properties" :key="property.propertyId" class="mr-10px">
+              {{ property.propertyName }}: {{ property.valueName }}
+            </el-tag>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="订单金额" prop="refundPrice" min-width="120">
+        <template #default="scope">
+          <span>{{ fenToYuan(scope.row.refundPrice) }} 元</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="申请时间" prop="createTime" width="180">
+        <template #default="scope">
+          <span>{{ formatDate(scope.row.createTime) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="售后状态" width="100">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_STATUS" :value="scope.row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="售后方式">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.TRADE_AFTER_SALE_WAY" :value="scope.row.way" />
+        </template>
+      </el-table-column>
+      <el-table-column align="center" fixed="right" label="操作" width="160">
+        <template #default="{ row }">
+          <el-button link type="primary" @click="openAfterSaleDetail(row.id)">处理退款</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+  </ContentWrap>
+</template>
+<script lang="ts" setup>
+import * as AfterSaleApi from '@/api/mall/trade/afterSale/index'
+import { DICT_TYPE, getDictOptions } from '@/utils/dict'
+import { formatDate } from '@/utils/formatTime'
+import { createImageViewer } from '@/components/ImageViewer'
+import { TabsPaneContext } from 'element-plus'
+import { cloneDeep } from 'lodash-es'
+import { fenToYuan } from '@/utils'
+
+defineOptions({ name: 'UserAfterSaleList' })
+
+const { push } = useRouter() // 路由跳转
+const { userId } = defineProps<{
+  userId: number
+}>()
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const list = ref<AfterSaleApi.TradeAfterSaleVO[]>([]) // 列表的数据
+const statusTabs = ref([
+  {
+    label: '全部',
+    value: '0'
+  }
+])
+const queryFormRef = ref() // 搜索的表单
+// 查询参数
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+  userId,
+  no: null,
+  status: '0',
+  orderNo: null,
+  spuName: null,
+  createTime: [],
+  way: null,
+  type: null
+})
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = cloneDeep(queryParams.value)
+    // 处理掉全部的状态，不传就是全部
+    if (data.status === '0') {
+      delete data.status
+    }
+    // 执行查询
+    // TODO @芋艿：接口需要通过userId进行筛选返回值
+    const res = await AfterSaleApi.getAfterSalePage(data)
+    list.value = res.list as AfterSaleApi.TradeAfterSaleVO[]
+    total.value = res.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = async () => {
+  queryParams.value.pageNo = 1
+  await getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value?.resetFields()
+  queryParams.value.userId = userId
+  handleQuery()
+}
+
+/** tab 切换 */
+const tabClick = async (tab: TabsPaneContext) => {
+  queryParams.value.status = tab.paneName
+  await getList()
+}
+
+/** 处理退款 */
+const openAfterSaleDetail = (id: number) => {
+  push({ name: 'TradeAfterSaleDetail', params: { id } })
+}
+
+/** 查看订单详情 */
+const openOrderDetail = (id: number) => {
+  push({ name: 'TradeOrderDetail', params: { id } })
+}
+
+/** 商品图预览 */
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    urlList: [imgUrl]
+  })
+}
+
+onMounted(async () => {
+  await getList()
+  // 设置 statuses 过滤
+  for (const dict of getDictOptions(DICT_TYPE.TRADE_AFTER_SALE_STATUS)) {
+    statusTabs.value.push({
+      label: dict.label,
+      value: dict.value
+    })
+  }
+})
+</script>
--- a/src/views/member/user/detail/UserBalanceList.vue
+++ b/src/views/member/user/detail/UserBalanceList.vue
@ -0,0 +1,68 @@
+<template>
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <el-table-column label="编号" align="center" prop="id" />
+      <el-table-column label="钱包编号" align="center" prop="walletId" />
+      <el-table-column label="关联业务标题" align="center" prop="title" />
+      <el-table-column label="交易金额" align="center" prop="price">
+        <template #default="{ row }"> {{ fenToYuan(row.price) }} 元</template>
+      </el-table-column>
+      <el-table-column label="钱包余额" align="center" prop="balance">
+        <template #default="{ row }"> {{ fenToYuan(row.balance) }} 元</template>
+      </el-table-column>
+      <el-table-column
+        label="交易时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+</template>
+
+<script lang="ts" setup>
+import { dateFormatter } from '@/utils/formatTime'
+import * as WalletTransactionApi from '@/api/pay/wallet/transaction'
+import { fenToYuan } from '@/utils'
+defineOptions({ name: 'UserBalanceList' })
+const { walletId }: { walletId: number } = defineProps({
+  walletId: {
+    type: Number,
+    required: false
+  }
+})
+
+const loading = ref(true) // 列表的加载中
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  walletId: null
+})
+const list = ref([]) // 列表的数据
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    queryParams.walletId = walletId
+    const data = await WalletTransactionApi.getWalletTransactionPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
+<style scoped lang="scss"></style>
--- a/src/views/member/user/detail/index.vue
+++ b/src/views/member/user/detail/index.vue
@ -20,7 +20,7 @@
          <template #header>
            <CardTitle title="账户信息" />
          </template>
-          <UserAccountInfo :user="user" />
+          <UserAccountInfo :user="user" :wallet="wallet"/>
        </el-card>
      </el-col>
      <!-- 下边：账户明细 -->
@ -40,14 +40,18 @@
            <UserExperienceRecordList :user-id="id" />
          </el-tab-pane>
          <!-- TODO @jason：增加一个余额变化； -->
-          <el-tab-pane label="余额" lazy>余额(WIP)</el-tab-pane>
+          <el-tab-pane label="余额" lazy>
+            <UserBalanceList :wallet-id="wallet.id" />
+          </el-tab-pane>
          <el-tab-pane label="收货地址" lazy>
            <UserAddressList :user-id="id" />
          </el-tab-pane>
          <el-tab-pane label="订单管理" lazy>
            <UserOrderList :user-id="id" />
          </el-tab-pane>
-          <el-tab-pane label="售后管理" lazy>售后管理(WIP)</el-tab-pane>
+          <el-tab-pane label="售后管理" lazy>
+            <UserAfterSaleList :user-id="id" />
+          </el-tab-pane>
          <el-tab-pane label="收藏记录" lazy>
            <UserFavoriteList :user-id="id" />
          </el-tab-pane>
@ -66,6 +70,7 @@
  <UserForm ref="formRef" @success="getUserData(id)" />
 </template>
 <script setup lang="ts">
+import * as WalletApi from '@/api/pay/wallet/balance'
 import * as UserApi from '@/api/member/user'
 import { useTagsViewStore } from '@/store/modules/tagsView'
 import UserForm from '@/views/member/user/UserForm.vue'
@ -79,6 +84,7 @@ import UserOrderList from './UserOrderList.vue'
 import UserPointList from './UserPointList.vue'
 import UserSignList from './UserSignList.vue'
 import UserFavoriteList from './UserFavoriteList.vue'
+import UserAfterSaleList from './UserAftersaleList.vue'
 import { CardTitle } from '@/components/Card/index'
 import { ElMessage } from 'element-plus'

@ -108,6 +114,24 @@ const { currentRoute } = useRouter() // 路由
 const { delView } = useTagsViewStore() // 视图操作
 const route = useRoute()
 const id = Number(route.params.id)
+/* 用户钱包相关信息 */
+const WALLET_INIT_DATA = {
+  balance: 0,
+  totalExpense: 0,
+  totalRecharge: 0
+} as WalletApi.WalletVO // 钱包初始化数据
+const wallet = ref<WalletApi.WalletVO>(WALLET_INIT_DATA) // 钱包信息
+
+/** 查询用户钱包信息 */
+const getUserWallet = async () => {
+  if (!id) {
+    wallet.value = WALLET_INIT_DATA
+    return
+  }
+  const params = { userId: id }
+  wallet.value = (await WalletApi.getWallet(params)) || WALLET_INIT_DATA
+}
+
 onMounted(() => {
  if (!id) {
    ElMessage.warning('参数错误，会员编号不能为空！')
@ -115,6 +139,7 @@ onMounted(() => {
    return
  }
  getUserData(id)
+  getUserWallet()
 })
 </script>
 <style scoped lang="css">
--- a/src/views/pay/app/components/AppForm.vue
+++ b/src/views/pay/app/components/AppForm.vue
@ -10,6 +10,9 @@
      <el-form-item label="应用名" prop="name">
        <el-input v-model="formData.name" placeholder="请输入应用名" />
      </el-form-item>
+      <el-form-item label="应用标识" prop="name">
+        <el-input v-model="formData.appKey" placeholder="请输入应用标识" />
+      </el-form-item>
      <el-form-item label="开启状态" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio
@ -55,16 +58,15 @@ const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
  id: undefined,
  name: undefined,
-  packageId: undefined,
-  contactName: undefined,
-  contactMobile: undefined,
-  accountCount: undefined,
-  expireTime: undefined,
-  domain: undefined,
-  status: CommonStatusEnum.ENABLE
+  appKey: undefined,
+  status: CommonStatusEnum.ENABLE,
+  remark: undefined,
+  orderNotifyUrl: undefined,
+  refundNotifyUrl: undefined
 })
 const formRules = reactive({
  name: [{ required: true, message: '应用名不能为空', trigger: 'blur' }],
+  appKey: [{ required: true, message: '应用标识不能为空', trigger: 'blur' }],
  status: [{ required: true, message: '开启状态不能为空', trigger: 'blur' }],
  orderNotifyUrl: [{ required: true, message: '支付结果的回调地址不能为空', trigger: 'blur' }],
  refundNotifyUrl: [{ required: true, message: '退款结果的回调地址不能为空', trigger: 'blur' }]
@ -123,7 +125,8 @@ const resetForm = () => {
    status: CommonStatusEnum.ENABLE,
    remark: undefined,
    orderNotifyUrl: undefined,
-    refundNotifyUrl: undefined
+    refundNotifyUrl: undefined,
+    appKey: undefined
  }
  formRef.value?.resetFields()
 }
--- a/src/views/pay/app/components/channel/AlipayChannelForm.vue
+++ b/src/views/pay/app/components/channel/AlipayChannelForm.vue
@ -4,7 +4,7 @@
      <el-form
        ref="formRef"
        :model="formData"
-        :formRules="formRules"
+        :rules="formRules"
        label-width="100px"
        v-loading="formLoading"
      >
@ -156,6 +156,23 @@
            </el-upload>
          </el-form-item>
        </div>
+
+        <el-form-item label-width="180px" label="接口内容加密方式" prop="config.encryptType">
+          <el-radio-group v-model="formData.config.encryptType">
+            <el-radio key="NONE" label="">无加密</el-radio>
+            <el-radio key="AES" label="AES">AES</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <div v-if="formData.config.encryptType === 'AES'">
+          <el-form-item label-width="180px" label="接口内容加密密钥" prop="config.encryptKey">
+            <el-input
+              v-model="formData.config.encryptKey"
+              placeholder="请输入接口内容加密密钥"
+              clearable
+            />
+          </el-form-item>
+        </div>
+
        <el-form-item label-width="180px" label="备注" prop="remark">
          <el-input v-model="formData.remark" :style="{ width: '100%' }" />
        </el-form-item>
@ -195,7 +212,9 @@ const formData = ref<any>({
    alipayPublicKey: '',
    appCertContent: '',
    alipayPublicCertContent: '',
-    rootCertContent: ''
+    rootCertContent: '',
+    encryptType: '',
+    encryptKey: ''
  }
 })
 const formRules = {
@ -213,7 +232,8 @@ const formRules = {
  'config.alipayPublicCertContent': [
    { required: true, message: '请上传支付宝公钥证书', trigger: 'blur' }
  ],
-  'config.rootCertContent': [{ required: true, message: '请上传指定根证书', trigger: 'blur' }]
+  'config.rootCertContent': [{ required: true, message: '请上传指定根证书', trigger: 'blur' }],
+  'config.encryptKey': [{ required: true, message: '请输入接口内容加密密钥', trigger: 'blur' }]
 }
 const fileAccept = '.crt'
 const formRef = ref() // 表单 Ref
@ -281,7 +301,9 @@ const resetForm = (appId, code) => {
      alipayPublicKey: '',
      appCertContent: '',
      alipayPublicCertContent: '',
-      rootCertContent: ''
+      rootCertContent: '',
+      encryptType: '',
+      encryptKey: ''
    }
  }
  formRef.value?.resetFields()
--- a/src/views/pay/app/components/channel/MockChannelForm.vue
+++ b/src/views/pay/app/components/channel/MockChannelForm.vue
@ -1,6 +1,6 @@
 <template>
  <div>
-    <Dialog v-model="dialogVisible" :title="dialogTitle" @closed="close" width="800px">
+    <Dialog v-model="dialogVisible" :title="dialogTitle" width="800px">
      <el-form
        ref="formRef"
        :model="formData"
--- a/src/views/pay/app/components/channel/WalletChannelForm.vue
+++ b/src/views/pay/app/components/channel/WalletChannelForm.vue
@ -1,6 +1,6 @@
 <template>
  <div>
-    <Dialog v-model="dialogVisible" :title="dialogTitle" @closed="close" width="800px">
+    <Dialog v-model="dialogVisible" :title="dialogTitle" width="800px">
      <el-form
        ref="formRef"
        :model="formData"
--- a/src/views/pay/app/components/channel/WeixinChannelForm.vue
+++ b/src/views/pay/app/components/channel/WeixinChannelForm.vue
@ -1,6 +1,6 @@
 <template>
  <div>
-    <Dialog v-model="dialogVisible" :title="dialogTitle" @close="close" width="800px">
+    <Dialog v-model="dialogVisible" :title="dialogTitle" width="800px">
      <el-form
        ref="formRef"
        :model="formData"
@ -48,11 +48,7 @@
        </el-form-item>
        <div v-if="formData.config.apiVersion === 'v2'">
          <el-form-item label-width="180px" label="商户密钥" prop="config.mchKey">
-            <el-input
-              v-model="formData.config.mchKey"
-              placeholder="请输入商户密钥"
-              clearable
-            />
+            <el-input v-model="formData.config.mchKey" placeholder="请输入商户密钥" clearable />
          </el-form-item>
          <el-form-item
            label-width="180px"
@ -182,9 +178,7 @@ const formRules = {
  'config.privateKeyContent': [
    { required: true, message: '请上传 apiclient_key.pem 证书', trigger: 'blur' }
  ],
-  'config.certSerialNo': [
-    { required: true, message: '请输入证书序列号', trigger: 'blur' }
-  ],
+  'config.certSerialNo': [{ required: true, message: '请输入证书序列号', trigger: 'blur' }],
  'config.apiV3Key': [{ required: true, message: '请上传 api V3 密钥值', trigger: 'blur' }]
 }
 const formRef = ref() // 表单 Ref
--- a/src/views/pay/app/index.vue
+++ b/src/views/pay/app/index.vue
@ -64,8 +64,8 @@
  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list">
-      <el-table-column label="应用编号" align="center" prop="id" />
-      <el-table-column label="应用名" align="center" prop="name" />
+      <el-table-column label="应用标识" align="center" prop="appKey" />
+      <el-table-column label="应用名" align="center" prop="name" min-width="90" />
      <el-table-column label="开启状态" align="center" prop="status">
        <template #default="scope">
          <el-switch
@ -78,7 +78,7 @@
      </el-table-column>
      <el-table-column label="支付宝配置" align="center">
        <el-table-column
-          :label="channel.name"
+          :label="channel.name.replace('支付宝', '')"
          align="center"
          v-for="channel in alipayChannels"
          :key="channel.code"
@ -89,6 +89,7 @@
              v-if="isChannelExists(scope.row.channelCodes, channel.code)"
              @click="openChannelForm(scope.row, channel.code)"
              circle
+              size="small"
            >
              <Icon icon="ep:check" />
            </el-button>
@ -96,6 +97,7 @@
              v-else
              type="danger"
              circle
+              size="small"
              @click="openChannelForm(scope.row, channel.code)"
            >
              <Icon icon="ep:close" />
@ -105,7 +107,7 @@
      </el-table-column>
      <el-table-column label="微信配置" align="center">
        <el-table-column
-          :label="channel.name"
+          :label="channel.name.replace('微信', '')"
          align="center"
          v-for="channel in wxChannels"
          :key="channel.code"
@ -116,6 +118,7 @@
              v-if="isChannelExists(scope.row.channelCodes, channel.code)"
              @click="openChannelForm(scope.row, channel.code)"
              circle
+              size="small"
            >
              <Icon icon="ep:check" />
            </el-button>
@ -123,6 +126,7 @@
              v-else
              type="danger"
              circle
+              size="small"
              @click="openChannelForm(scope.row, channel.code)"
            >
              <Icon icon="ep:close" />
@ -136,6 +140,7 @@
            <el-button
              type="success"
              circle
+              size="small"
              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.WALLET.code)"
              @click="openChannelForm(scope.row, PayChannelEnum.WALLET.code)"
            >
@ -145,6 +150,7 @@
              v-else
              type="danger"
              circle
+              size="small"
              @click="openChannelForm(scope.row, PayChannelEnum.WALLET.code)"
            >
              <Icon icon="ep:close" />
@ -158,6 +164,7 @@
            <el-button
              type="success"
              circle
+              size="small"
              v-if="isChannelExists(scope.row.channelCodes, PayChannelEnum.MOCK.code)"
              @click="openChannelForm(scope.row, PayChannelEnum.MOCK.code)"
            >
@ -167,6 +174,7 @@
              v-else
              type="danger"
              circle
+              size="small"
              @click="openChannelForm(scope.row, PayChannelEnum.MOCK.code)"
            >
              <Icon icon="ep:close" />
@ -255,7 +263,7 @@ const wxChannels = [
  PayChannelEnum.WX_APP,
  PayChannelEnum.WX_NATIVE,
  PayChannelEnum.WX_WAP,
-  PayChannelEnum.WX_BAR,
+  PayChannelEnum.WX_BAR
 ]

 /** 查询列表 */