XinLingKeJi/jdt-mer
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
YuanHuakk
2023-10-28 15:11:07 +08:00
parent 6ae8acb8df
commit 1ea4b218af
8 changed files with 416 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.development
View File

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

2
.env.production
View File

@@ -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

16
.env.test
View File

@@ -1,7 +1,9 @@
VITE_PUBLIC_PATH = '/static/mer'
# 是否启用MOCK
VITE_USE_MOCK = true
# base api
VITE_BASE_API = 'https://test.wanzhuanyongcheng.cn/store'
VITE_PUBLIC_PATH = '/static/mer'
# 是否启用MOCK
VITE_USE_MOCK = true
# base api
VITE_BASE_API = 'https://test.wanzhuanyongcheng.cn/store'
VITE_ADMIN_API = '//test.wanzhuanyongcheng.cn'

5
build/constant.js
View File

@@ -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

7
src/utils/http/interceptors.js
View File

@@ -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

10
src/views/user/index1/api.js
View File

@@ -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),
}

392
src/views/user/index1/index.vue
View File

@@ -3,16 +3,21 @@
<n-row gutter="12">
<n-col :span="24">
<div flex>
<n-card ml-10 w-200 rounded-5>
<n-statistic label="总积分" tabular-nums>
<!-- <n-card ml-10 w-200 rounded-5>
<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>

4
vite.config.js
View File

@@ -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,
},