feat(custom): 增加用户数据统计

.env.development

@@ -9,3 +9,5 @@ VITE_USE_PROXY = true
 
 # base api
 VITE_BASE_API = '/store'
+
+VITE_ADMIN_API = '/admin'

.env.production

@@ -7,6 +7,8 @@ VITE_USE_MOCK = false
 # base api
 VITE_BASE_API = 'https://www.wanzhuanyongcheng.cn/store'
 
+VITE_ADMIN_API = '//www.wanzhuanyongcheng.cn'
+
 # 是否启用压缩
 VITE_USE_COMPRESS = true
 

.env.test

@@ -5,3 +5,5 @@ VITE_USE_MOCK = true
 
 # base api
 VITE_BASE_API = 'https://test.wanzhuanyongcheng.cn/store'
+
+VITE_ADMIN_API = '//test.wanzhuanyongcheng.cn'

build/constant.js

@@ -11,6 +11,11 @@ export const PROXY_CONFIG = {
     changeOrigin: true,
     // rewrite: (path) => path.replace(new RegExp('^/api'), ''),
   },
+  '/admin': {
+    target: 'https://test.wanzhuanyongcheng.cn',
+    changeOrigin: true,
+    // rewrite: (path) => path.replace(new RegExp('^/admin'), ''),
+  },
   /**
    * @desc    不替换匹配值
    * @请求路径  http://localhost:3100/api/v2/user

src/utils/http/interceptors.js

@@ -2,6 +2,13 @@ import { getToken } from '@/utils'
 import { resolveResError } from './helpers'
 
 export function reqResolve(config) {
+  if (config.url.includes('/admin')) {
+    config.url = config.url.replace(new RegExp('^/admin'), '')
+    console.log(config)
+    config.baseURL = import.meta.env.VITE_ADMIN_API
+  } else {
+    config.baseURL = import.meta.env.VITE_BASE_API
+  }
   // 处理不需要token的请求
   if (config.noNeedToken) {
     return config

src/views/user/index1/api.js

@@ -2,4 +2,14 @@ import { request } from '@/utils'
 
 export default {
   getUser: (data) => request.post('/user', data),
+  // 获取活动订单
+  gethdlist: (data) => request.post('/admin/user/order', data),
+  // 获取积分订单
+  getjflist: (data) => request.post('/admin/user/point/order', data),
+  // 获取豆子记录
+  getdzJllist: (data) => request.post('/admin/user/pluse', data),
+  // 获取积分记录
+  getjfJllist: (data) => request.post('/admin/user/point', data),
+  // 获取推广记录
+  gettgJllist: (data) => request.post('/admin/user/referee/point', data),
 }

src/views/user/index1/index.vue

@@ -3,16 +3,21 @@
     <n-row gutter="12">
       <n-col :span="24">
         <div flex>
-          <n-card ml-10 w-200 rounded-5>
+          <!-- <n-card ml-10 w-200 rounded-5>
-            <n-statistic label="总积分" tabular-nums>
+            <n-statistic label="总积分(含赢)" tabular-nums>
               <n-number-animation :from="0" :to="cardData.integral" />
             </n-statistic>
-          </n-card>
+          </n-card> -->
           <n-card ml-10 w-200 rounded-5>
             <n-statistic label="总豆子" tabular-nums>
               <n-number-animation :from="0" :to="cardData.pulse" />
             </n-statistic>
           </n-card>
+          <n-card ml-10 w-200 rounded-5>
+            <n-statistic label="用户赢(积分)" tabular-nums>
+              <n-number-animation :from="0" :to="cardData.win" />
+            </n-statistic>
+          </n-card>
         </div>
       </n-col>
       <n-col :span="24" mt-10>
@@ -70,17 +75,106 @@
       remote
       @update:sorter="handleSorterChange"
     />
+
+    <!-- 用户详情 -->
+    <n-drawer v-model:show="isDrawer" :width="1000" placement="right" :mask-closable="false">
+      <n-drawer-content title="用户详情" closable>
+        <div flex items-center>
+          <img rounded-full :src="nowRow.avatarUrl" width="70" />
+          <div ml-10>
+            <div>昵称：{{ nowRow.nickName }}</div>
+            <div>电话：{{ nowRow.phone }}</div>
+          </div>
+        </div>
+        <div mt-10 w-200 flex items-center justify-between text-center>
+          <div>
+            <div>用户积分</div>
+            <div text-red>{{ nowRow.integral }}</div>
+          </div>
+          <div>
+            <div>用户豆子</div>
+            <div text-red>{{ nowRow.pulse }}</div>
+          </div>
+        </div>
+        <n-tabs v-model:value="tabVal" type="line" animated @update-value="tabsChange">
+          <n-tab name="1" tab="活动订单"></n-tab>
+          <n-tab name="2" tab="积分订单"></n-tab>
+          <n-tab name="3" tab="豆子记录"></n-tab>
+          <n-tab name="4" tab="积分记录"></n-tab>
+          <n-tab name="5" tab="推广记录"></n-tab>
+        </n-tabs>
+        <n-row gutter="12">
+          <n-col :span="12">
+            <div mt-10 flex items-center>
+              <span w-100>时间筛选：</span>
+              <n-date-picker
+                v-model:formatted-value="queryData.time"
+                value-format="yyyy-MM-dd HH:mm:ss"
+                type="datetimerange"
+                clearable
+              />
+            </div>
+          </n-col>
+          <n-col v-if="tabVal === '4'" :span="10">
+            <div mt-10 flex items-center>
+              <span w-100>条件筛选：</span>
+              <n-select
+                v-model:value="queryData.selectKey"
+                :style="{ width: '30%' }"
+                :options="[
+                  {
+                    label: '取消订单',
+                    value: 1,
+                  },
+                  {
+                    label: '支付订单',
+                    value: 2,
+                  },
+                  {
+                    label: '商品赠送',
+                    value: 3,
+                  },
+                ]"
+                placeholder="请选择类型"
+              />
+            </div>
+          </n-col>
+          <n-col :span="4">
+            <div mt-10>
+              <n-button type="primary" @click="getTabsList">搜索</n-button>
+              <n-button ml-10 @click="tabsClear">重置</n-button>
+            </div>
+          </n-col>
+        </n-row>
+        <n-data-table
+          class="mt-5"
+          :columns="tabsColumns"
+          :loading="tabsLoading"
+          :data="tabsData"
+          :pagination="tabsPagination"
+          :bordered="false"
+          remote
+        />
+      </n-drawer-content>
+    </n-drawer>
   </CommonPage>
 </template>
 
 <script setup>
 import api from './api'
+import {
+  // NDropdown,
+  NButton,
+  NEllipsis,
+} from 'naive-ui'
+// import TheIcon from '@/components/icon/TheIcon.vue'
 
 const loading = ref(false)
 
 const cardData = ref({
   pulse: 0,
   integral: 0,
+  win: 0,
 })
 
 const queryData = ref({
@@ -97,11 +191,11 @@ const songs = ref([
   },
   {
     value: 3,
-    label: '用户输',
+    label: '用户赢',
   },
   {
     value: 4,
-    label: '用户赢',
+    label: '用户输',
   },
   {
     value: 5,
@@ -158,6 +252,13 @@ const columns = ref([
     sorter: true,
     sortOrder: false,
   },
+  {
+    title: '赢积分',
+    align: 'center',
+    key: 'win',
+    sorter: true,
+    sortOrder: false,
+  },
   {
     title: '用户豆子',
     align: 'center',
@@ -170,7 +271,44 @@ const columns = ref([
   //   align: 'center',
   //   slot: 'action',
   //   render(row) {
-  //     console.log(row)
+  //     return [
+  //       h(
+  //         NDropdown,
+  //         {
+  //           trigger: 'click',
+  //           options: [
+  //             {
+  //               label: '用户详情',
+  //               key: 1,
+  //             },
+  //           ],
+  //           onSelect: (key) => {
+  //             switch (key) {
+  //               case 1:
+  //                 openDrawer(row)
+  //                 break
+  //             }
+  //           },
+  //         },
+  //         {
+  //           default: () =>
+  //             h(
+  //               NButton,
+  //               {
+  //                 text: true,
+  //                 iconPlacement: 'right',
+  //               },
+  //               {
+  //                 default: () => '更多',
+  //                 icon: () =>
+  //                   h(TheIcon, {
+  //                     icon: 'ant-design:down-outlined',
+  //                   }),
+  //               }
+  //             ),
+  //         }
+  //       ),
+  //     ]
   //   },
   // },
 ])
@@ -221,6 +359,7 @@ const getList = async () => {
     pagination.value.itemCount = res.data.total
     cardData.value.integral = res.data.total_integral
     cardData.value.pulse = res.data.total_pulse
+    cardData.value.win = res.data.total_win
   } catch (error) {
     $message.error(error.msg)
   }
@@ -241,13 +380,6 @@ const handleSorterChange = (sorter) => {
   if (!loading.value) {
     loading.value = true
     switch (sorter.columnKey) {
-      case 'pulse':
-        columns.value[5].sortOrder = !sorter ? false : sorter.order
-        data.value = data.value.sort((a, b) => {
-          if (sorter.order === 'descend') return b.pulse - a.pulse
-          return a.pulse - b.pulse
-        })
-        break
       case 'integral':
         columns.value[4].sortOrder = !sorter ? false : sorter.order
         data.value = data.value.sort((a, b) => {
@@ -255,10 +387,244 @@ const handleSorterChange = (sorter) => {
           return a.integral - b.integral
         })
         break
+
+      case 'win':
+        columns.value[5].sortOrder = !sorter ? false : sorter.order
+        data.value = data.value.sort((a, b) => {
+          if (sorter.order === 'descend') return b.win - a.win
+          return a.win - b.win
+        })
+        break
+      case 'pulse':
+        columns.value[6].sortOrder = !sorter ? false : sorter.order
+        data.value = data.value.sort((a, b) => {
+          if (sorter.order === 'descend') return b.pulse - a.pulse
+          return a.pulse - b.pulse
+        })
+        break
     }
     loading.value = false
   }
 }
+
+const isDrawer = ref(false)
+
+const nowRow = ref({})
+
+const tabVal = ref('1')
+
+const tabsLoading = ref(false)
+const tabsColumns = ref([])
+const tabsData = ref([])
+const tabsPagination = ref({
+  page: 1,
+  pageSize: 10,
+  itemCount: 0,
+  onChange: (page) => {
+    tabsPagination.value.page = page
+    getTabsList()
+  },
+})
+
+// eslint-disable-next-line no-unused-vars
+const openDrawer = (row) => {
+  nowRow.value = row
+  isDrawer.value = true
+  // getTabsList()
+  tabsChange()
+}
+
+const tabsChange = async (e = '1') => {
+  tabVal.value = e
+  tabsData.value = []
+  tabsColumns.value = []
+  if (tabVal.value === '1' || tabVal.value === '2') {
+    tabsColumns.value = [
+      {
+        title: '订单号',
+        align: 'center',
+        key: 'oid',
+      },
+      {
+        title: '商品封面',
+        align: 'center',
+        slot: 'cover',
+        render: (row) => {
+          return h('img', {
+            src: row.cover,
+            style: {
+              width: '50px',
+              height: '50px',
+            },
+          })
+        },
+      },
+      {
+        title: '商品名称',
+        align: 'center',
+        slot: 'goods_name',
+        render: (row) => {
+          return h(
+            NEllipsis,
+            {
+              style: 'max-width: 240px',
+            },
+            {
+              default: () => row.goods_name,
+            }
+          )
+        },
+      },
+      {
+        title: '商品价格',
+        align: 'center',
+        key: 'number',
+      },
+      {
+        title: '订单状态',
+        align: 'center',
+        slot: 'status',
+        render: (row) => {
+          let nameStr = ''
+          switch (row.status) {
+            case 0:
+              nameStr = '待付款'
+              break
+            case 1:
+              nameStr = '待使用'
+              break
+            case 2:
+              nameStr = '已使用'
+              break
+            case 3:
+              nameStr = '已过期'
+          }
+          return h(
+            'span',
+            {},
+            {
+              default: () => nameStr,
+            }
+          )
+        },
+      },
+      {
+        title: '下单时间',
+        align: 'center',
+        key: 'add_time',
+      },
+    ]
+  } else if (tabVal.value === '3') {
+    tabsColumns.value = [
+      {
+        title: '订单号',
+        align: 'center',
+        key: 'oid',
+      },
+      {
+        title: '商品名称',
+        align: 'center',
+        key: 'goods_name',
+      },
+      {
+        title: '消费金额',
+        align: 'center',
+        key: 'number',
+      },
+      {
+        title: '下单时间',
+        align: 'center',
+        key: 'add_time',
+      },
+    ]
+  } else if (tabVal.value === '4') {
+    tabsColumns.value = [
+      {
+        title: '订单号',
+        align: 'center',
+        key: 'oid',
+      },
+      {
+        title: '商品名称',
+        align: 'center',
+        key: 'goods_name',
+      },
+      {
+        title: '积分',
+        align: 'center',
+        key: 'number',
+      },
+      {
+        title: '时间',
+        align: 'center',
+        key: 'add_time',
+      },
+    ]
+  } else {
+    tabsColumns.value = [
+      {
+        title: '订单号',
+        align: 'center',
+        key: 'oid',
+      },
+      {
+        title: '用户昵称',
+        align: 'center',
+        key: 'nick_name',
+      },
+      {
+        title: '商品名称',
+        align: 'center',
+        key: 'goods_name',
+      },
+      {
+        title: '获得积分',
+        align: 'center',
+        key: 'number',
+      },
+      {
+        title: '时间',
+        align: 'center',
+        key: 'add_time',
+      },
+    ]
+  }
+  tabsPagination.value.page = 1
+  getTabsList()
+}
+
+const getTabsList = async () => {
+  tabsLoading.value = true
+  let res
+  const data = {
+    uid: nowRow.value.uid,
+    pageNum: tabsPagination.value.page,
+    pageSize: tabsPagination.value.pageSize,
+    StartTime: queryData.value.time === null ? '' : queryData.value.time[0] || '',
+    EndTime: queryData.value.time === null ? '' : queryData.value.time[1] || '',
+  }
+  switch (tabVal.value) {
+    case '1':
+      res = await api.gethdlist(data)
+      break
+    case '2':
+      res = await api.getjflist(data)
+      break
+    case '3':
+      res = await api.getdzJllist(data)
+      break
+    case '4':
+      data['Type'] = queryData.value.selectKey
+      res = await api.getjfJllist(data)
+      break
+    case '5':
+      res = await api.gettgJllist(data)
+      break
+  }
+  tabsData.value = res.data.data || []
+  tabsPagination.value.itemCount = res.data.total
+  tabsLoading.value = false
+}
 </script>
 
 <style lang="scss" scoped></style>

vite.config.js

@@ -11,7 +11,7 @@ export default defineConfig(({ command, mode }) => {
 
   const env = loadEnv(mode, process.cwd())
   const viteEnv = convertEnv(env)
-  const { VITE_PORT, VITE_PUBLIC_PATH, VITE_USE_PROXY, VITE_BASE_API } = viteEnv
+  const { VITE_PORT, VITE_PUBLIC_PATH, VITE_USE_PROXY, VITE_BASE_API, VITE_ADMIN_API } = viteEnv
 
   return {
     base: VITE_PUBLIC_PATH || '/',
@@ -30,7 +30,7 @@ export default defineConfig(({ command, mode }) => {
       proxy: VITE_USE_PROXY
         ? {
             [VITE_BASE_API]: PROXY_CONFIG[VITE_BASE_API],
-            '/api/v2': PROXY_CONFIG['/api/v2'],
+            [VITE_ADMIN_API]: PROXY_CONFIG[VITE_ADMIN_API],
           }
         : undefined,
     },