online-order-vue/src/views/mall/member/user/UserDetail.vue

<template>
 <el-drawer v-model="drawer" :title="dialogTitle" size="50%">
    <div>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane :label="t('mall.userInfo')" name="first">
           <el-descriptions :title="t('mall.basicInfo')" :column="2">
            <el-descriptions-item :label="t('mall.userAvatar')"><el-image style="width: 50px; height: 50px" :src="DetailData.avatar" /></el-descriptions-item>
            <el-descriptions-item :label="t('mall.userNickname')">{{ DetailData.nickname }}</el-descriptions-item>
            <el-descriptions-item :label="t('mall.balance')">{{ DetailData.nowMoney }}</el-descriptions-item>
            <el-descriptions-item :label="t('mall.birthday')">{{ DetailData.birthday }}</el-descriptions-item>
            <el-descriptions-item :label="t('mall.phoneNumber')">{{ DetailData.mobile }}</el-descriptions-item>
            <el-descriptions-item :label="t('mall.idCardNumber')">{{ DetailData.cardId }}</el-descriptions-item>
          </el-descriptions>
          <el-descriptions :title="t('mall.userOverview')" :column="2">
            <el-descriptions-item :label="t('mall.boundMembershipCard')">{{ DetailData.cardName ? DetailData.cardName : t('public.none') }}</el-descriptions-item>
            <el-descriptions-item :label="t('mall.points')">{{ DetailData.integral }}</el-descriptions-item>
            <el-descriptions-item :label="t('mall.commissionAmount')">{{ DetailData.brokeragePrice }}</el-descriptions-item>
            <el-descriptions-item :label="t('mall.consecutiveSignInDays')">{{ DetailData.signNum }}</el-descriptions-item>
            <el-descriptions-item :label="t('mall.loginIp')">{{ DetailData.loginIp }}</el-descriptions-item>
            <el-descriptions-item :label="t('mall.userLevel')">{{ DetailData.level }}</el-descriptions-item>
            <el-descriptions-item :label="t('mall.promotionId')">{{ DetailData.spreadUid }}</el-descriptions-item>
            <el-descriptions-item :label="t('mall.purchaseCount')">{{ DetailData.payCount }}</el-descriptions-item>
            <el-descriptions-item :label="t('mall.subordinateCount')">{{ DetailData.spreadCount }}</el-descriptions-item>
            <el-descriptions-item :label="t('mall.loginType')">{{ DetailData.loginType }}</el-descriptions-item>
            <el-descriptions-item :label="t('mall.registrationTime')">{{ formatDate(DetailData.createTime) }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane :label="t('mall.consumptionRecord')" name="second">
             <el-table  :data="list">
              <el-table-column :label="t('mall.expenseOrGain')" align="center" prop="pm">
                  <template #default="scope">
                    <span v-if="scope.row.pm == 0">{{t('mall.expense')}}</span>
                    <span v-else-if="scope.row.category == 1">{{t('mall.gain')}}</span>
                    <span v-else>{{t('mall.unknown')}}</span>
                  </template>
              </el-table-column>
              <el-table-column :label="t('mall.billTitle')" align="center" prop="title" />
              <el-table-column :label="t('mall.detailCategory')" align="center" prop="category">
                 <template #default="scope">
                    <span v-if="scope.row.category == 'now_money'">{{t('mall.balance')}}</span>
                    <span v-else-if="scope.row.category == 'integral'">{{t('mall.points')}}</span>
                    <span v-else>{{t('mall.unknown')}}</span>
                  </template>
              </el-table-column>
              <el-table-column :label="t('mall.detailType')" align="center" prop="type">
                <template #default="scope">
                    <span v-if="scope.row.type == 'recharge'">{{t('mall.recharge')}}</span>
                    <span v-else-if="scope.row.type == 'brokerage'">{{t('mall.rebate')}}</span>
                    <span v-else-if="scope.row.type == 'pay_product'">{{t('mall.consumption')}}</span>
                    <span v-else-if="scope.row.type == 'extract'">{{t('mall.withdrawal')}}</span>
                    <span v-else-if="scope.row.type == 'pay_product_refund'">{{t('mall.refund')}}</span>
                    <span v-else-if="scope.row.type == 'system_add'">{{t('mall.systemAdd')}}</span>
                    <span v-else-if="scope.row.type == 'system_sub'">{{t('mall.systemReduce')}}</span>
                    <span v-else-if="scope.row.type == 'deduction'">{{t('mall.subtract')}}</span>
                    <span v-else-if="scope.row.type == 'gain'">{{t('mall.reward')}}</span>
                    <span v-else-if="scope.row.type == 'sign'">{{t('mall.signIn')}}</span>
                    <span v-else-if="scope.row.type == 'vip_card'">{{t('mall.membershipCard')}}</span>
                    <span v-else>未知</span>
                  </template>
              </el-table-column>
              <el-table-column :label="t('mall.detailAmountYuan')" align="center" prop="number">
                    <template #default="scope">
                      <span v-if="scope.row.pm == 1">+</span>
                      <span v-else>-</span>
                      <span>{{ scope.row.number }}</span>
                    </template>
              </el-table-column>
              <el-table-column :label="t('mall.remainingYuan')" align="center" prop="balance" />
              <el-table-column :label="t('public.remark')" align="center" prop="mark" width="200" />
              <el-table-column
                :label="t('public.addTime')"
                align="center"
                prop="createTime"
                :formatter="dateFormatter"
                width="100"
              />
            </el-table>
            <!-- 分页 -->
            <Pagination
              :total="total"
              v-model:page="queryParams.pageNo"
              v-model:limit="queryParams.pageSize"
              @pagination="getList"
            />
        </el-tab-pane>
      </el-tabs>
     
    </div>
  </el-drawer>
</template>
<script setup lang="ts">
import * as UserApi from '@/api/member/user'
import { formatDate } from '@/utils/formatTime'
import type { TabsPaneContext } from 'element-plus'
import * as UserBillApi from '@/api/member/userBill'
import { dateFormatter } from '@/utils/formatTime'

const { t } = useI18n() // 国际化
// const message = useMessage() // 消息弹窗
const dialogTitle = ref('') // 弹窗的标题
const drawer = ref(false)
const DetailData = ref({})
const activeName = ref('first')
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  uid: null,
  linkId: null,
  pm: null,
  title: null,
  category: null,
  type: null,
  number: null,
  balance: null,
  mark: null,
  createTime: [],
  status: null
})
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  drawer.value = true
  dialogTitle.value = t('action.' + type)
  DetailData.value = await UserApi.getUser(id)
  queryParams.uid = id
  getList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab.paneName, event)
  // queryParams.pageNo = 1
  // queryParams.type = tab.paneName
  //getList()
}
/** 查询列表 */
const getList = async () => {
  try {
    const data = await UserBillApi.getUserBillPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}
</script>
<style scoped>
</style>