继续完善页面
This commit is contained in:
123
components/analytics/AnalyticsMultiLineChart.uvue
Normal file
123
components/analytics/AnalyticsMultiLineChart.uvue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<view class="chart-wrap" :style="{ height: heightPx }">
|
||||
<EChartsView :option="chartOption" class="chart" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="uts">
|
||||
import EChartsView from '@/uni_modules/charts/EChartsView.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EChartsView
|
||||
},
|
||||
props: {
|
||||
xLabels: { type: Array, default: () => [] },
|
||||
series: { type: Array, default: () => [] },
|
||||
height: { type: Number, default: 400 }
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
heightPx: '400px',
|
||||
chartOption: {} as any
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
xLabels: { handler() { this.updateOption() }, deep: true },
|
||||
series: { handler() { this.updateOption() }, deep: true },
|
||||
height: {
|
||||
handler() {
|
||||
this.heightPx = `${this.height}px`
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.heightPx = `${this.height}px`
|
||||
setTimeout(() => {
|
||||
this.updateOption()
|
||||
}, 200)
|
||||
},
|
||||
methods: {
|
||||
toPlainObject(obj: any): any {
|
||||
if (obj == null) return null
|
||||
if (typeof obj !== 'object') return obj
|
||||
if (Array.isArray(obj)) {
|
||||
return obj.map((item) => this.toPlainObject(item))
|
||||
}
|
||||
const plain: any = {}
|
||||
for (const key in obj) {
|
||||
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
||||
const value = obj[key]
|
||||
if (typeof value === 'function' || key.startsWith('_') || key === 'toJSON') {
|
||||
continue
|
||||
}
|
||||
if (value != null && typeof value === 'object' && !Array.isArray(value)) {
|
||||
let isSimple = true
|
||||
for (const k in value) {
|
||||
if (typeof value[k] === 'object' && value[k] !== null) {
|
||||
isSimple = false
|
||||
break
|
||||
}
|
||||
}
|
||||
plain[key] = isSimple ? { ...value } : this.toPlainObject(value)
|
||||
} else {
|
||||
plain[key] = value
|
||||
}
|
||||
}
|
||||
}
|
||||
return plain
|
||||
},
|
||||
updateOption() {
|
||||
if (!this.xLabels || this.xLabels.length === 0) return
|
||||
|
||||
const seriesData = (this.series as Array<any>).map(s => {
|
||||
return {
|
||||
name: s.name,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbolSize: 6,
|
||||
itemStyle: { color: s.color },
|
||||
lineStyle: { width: 2 },
|
||||
data: s.data
|
||||
}
|
||||
})
|
||||
|
||||
const option = {
|
||||
grid: { left: 50, right: 30, top: 20, bottom: 40 },
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: {
|
||||
top: 0,
|
||||
left: 'center',
|
||||
itemWidth: 12,
|
||||
itemHeight: 2,
|
||||
textStyle: { fontSize: 12, color: '#333' }
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: this.xLabels,
|
||||
axisLine: { lineStyle: { color: 'rgba(0,0,0,0.1)' } },
|
||||
axisLabel: {
|
||||
color: 'rgba(0,0,0,0.45)',
|
||||
fontSize: 10,
|
||||
rotate: 45
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLine: { show: false },
|
||||
splitLine: { lineStyle: { color: 'rgba(0,0,0,0.05)' } },
|
||||
axisLabel: { color: 'rgba(0,0,0,0.45)', fontSize: 10 }
|
||||
},
|
||||
series: seriesData
|
||||
}
|
||||
this.chartOption = this.toPlainObject(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-wrap { width: 100%; position: relative; overflow: hidden; }
|
||||
.chart { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
|
||||
</style>
|
||||
176
components/analytics/AnalyticsUserGenderSection.uvue
Normal file
176
components/analytics/AnalyticsUserGenderSection.uvue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<view class="gender-card">
|
||||
<view class="card-header">
|
||||
<text class="title">用户性别比例</text>
|
||||
</view>
|
||||
|
||||
<view class="card-content">
|
||||
<view class="chart-container">
|
||||
<EChartsView :option="chartOption" class="donut-chart" />
|
||||
<view class="center-text">
|
||||
<text class="total-label">总用户数</text>
|
||||
<text class="total-value">{{ totalUsers }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="uts">
|
||||
import EChartsView from '@/uni_modules/charts/EChartsView.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EChartsView
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
totalUsers: 525,
|
||||
chartOption: {} as any
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.initChart()
|
||||
}, 200)
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
top: '0%',
|
||||
left: 'center',
|
||||
icon: 'rect',
|
||||
itemWidth: 15,
|
||||
itemHeight: 15,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '性别比例',
|
||||
type: 'pie',
|
||||
radius: ['50%', '75%'],
|
||||
center: ['50%', '60%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center'
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 450, name: '未知', itemStyle: { color: '#999999' } },
|
||||
{ value: 50, name: '男', itemStyle: { color: '#3b82f6' } },
|
||||
{ value: 25, name: '女', itemStyle: { color: '#f97316' } }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
this.chartOption = this.toPlainObject(option)
|
||||
},
|
||||
toPlainObject(obj: any): any {
|
||||
if (obj == null) return null
|
||||
if (typeof obj !== 'object') return obj
|
||||
if (Array.isArray(obj)) {
|
||||
return obj.map((item) => this.toPlainObject(item))
|
||||
}
|
||||
const plain: any = {}
|
||||
for (const key in obj) {
|
||||
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
||||
const value = obj[key]
|
||||
if (typeof value === 'function' || key.startsWith('_') || key === 'toJSON') {
|
||||
continue
|
||||
}
|
||||
if (value != null && typeof value === 'object' && !Array.isArray(value)) {
|
||||
let isSimple = true
|
||||
for (const k in value) {
|
||||
if (typeof value[k] === 'object' && value[k] !== null) {
|
||||
isSimple = false
|
||||
break
|
||||
}
|
||||
}
|
||||
plain[key] = isSimple ? { ...value } : this.toPlainObject(value)
|
||||
} else {
|
||||
plain[key] = value
|
||||
}
|
||||
}
|
||||
}
|
||||
return plain
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.gender-card {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
height: 521px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.donut-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.center-text {
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.total-label {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.total-value {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
242
components/analytics/AnalyticsUserMapTable.uvue
Normal file
242
components/analytics/AnalyticsUserMapTable.uvue
Normal file
@@ -0,0 +1,242 @@
|
||||
<template>
|
||||
<view class="user-map-card">
|
||||
<view class="card-header">
|
||||
<text class="title">用户地域分布</text>
|
||||
</view>
|
||||
|
||||
<view class="card-content">
|
||||
<!-- 左侧地图 -->
|
||||
<view class="map-section">
|
||||
<EChartsView :option="mapOption" class="map-chart" />
|
||||
</view>
|
||||
|
||||
<!-- 右侧表格 -->
|
||||
<view class="table-section">
|
||||
<view class="table-header">
|
||||
<text class="th province">TOP省份</text>
|
||||
<text class="th count">累积用户数</text>
|
||||
<text class="th count">新增用户数</text>
|
||||
<text class="th count">访客数</text>
|
||||
<text class="th amount">支付金额</text>
|
||||
</view>
|
||||
<scroll-view class="table-body" scroll-y="true">
|
||||
<view v-for="(item, index) in tableData" :key="index" class="table-row">
|
||||
<text class="td province">{{ item.name }}</text>
|
||||
<text class="td count">{{ item.total }}</text>
|
||||
<text class="td count">{{ item.newUsers }}</text>
|
||||
<text class="td count">{{ item.visitors }}</text>
|
||||
<text class="td amount">{{ item.amount }}</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="uts">
|
||||
import EChartsView from '@/uni_modules/charts/EChartsView.vue'
|
||||
|
||||
type RegionData = {
|
||||
name: string
|
||||
total: number
|
||||
newUsers: number
|
||||
visitors: number
|
||||
amount: number
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
EChartsView
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
mapOption: {} as any,
|
||||
tableData: [
|
||||
{ name: '未知', total: 55398, newUsers: 463, visitors: 1112, amount: 287460.5 },
|
||||
{ name: '广东', total: 2697, newUsers: 0, visitors: 9, amount: 0 },
|
||||
{ name: '北京', total: 1058, newUsers: 0, visitors: 4, amount: 0 },
|
||||
{ name: '河南', total: 823, newUsers: 0, visitors: 3, amount: 0 },
|
||||
{ name: '福建', total: 799, newUsers: 0, visitors: 4, amount: 0 },
|
||||
{ name: '山东', total: 792, newUsers: 0, visitors: 0, amount: 0 },
|
||||
{ name: '浙江', total: 780, newUsers: 0, visitors: 1, amount: 0 },
|
||||
{ name: '江苏', total: 779, newUsers: 0, visitors: 4, amount: 0 },
|
||||
{ name: '四川', total: 768, newUsers: 0, visitors: 3, amount: 0 },
|
||||
{ name: '湖南', total: 520, newUsers: 0, visitors: 2, amount: 0 },
|
||||
{ name: '湖北', total: 480, newUsers: 0, visitors: 1, amount: 0 }
|
||||
] as Array<RegionData>
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(() => {
|
||||
this.initMap()
|
||||
}, 200)
|
||||
},
|
||||
methods: {
|
||||
initMap() {
|
||||
// 提取地图数据
|
||||
const data = this.tableData.filter(it => it.name !== '未知').map(it => ({
|
||||
name: it.name,
|
||||
value: it.total
|
||||
}))
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}<br/>累积用户: {c}'
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 3000,
|
||||
left: 'left',
|
||||
top: 'bottom',
|
||||
text: ['高', '低'],
|
||||
inRange: {
|
||||
color: ['#fff7ed', '#fbbf24', '#f59e0b', '#d97706']
|
||||
},
|
||||
calculable: true
|
||||
},
|
||||
geo: {
|
||||
map: 'china',
|
||||
roam: false,
|
||||
zoom: 1.2,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
areaColor: '#f97316'
|
||||
},
|
||||
label: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
areaColor: '#f8fafc',
|
||||
borderColor: '#e2e8f0'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '用户数',
|
||||
type: 'map',
|
||||
geoIndex: 0,
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
this.mapOption = this.toPlainObject(option)
|
||||
},
|
||||
toPlainObject(obj: any): any {
|
||||
if (obj == null) return null
|
||||
if (typeof obj !== 'object') return obj
|
||||
if (Array.isArray(obj)) {
|
||||
return obj.map((item) => this.toPlainObject(item))
|
||||
}
|
||||
const plain: any = {}
|
||||
for (const key in obj) {
|
||||
if (Object.prototype.hasOwnProperty.call(obj, key)) {
|
||||
const value = obj[key]
|
||||
if (typeof value === 'function' || key.startsWith('_') || key === 'toJSON') {
|
||||
continue
|
||||
}
|
||||
if (value != null && typeof value === 'object' && !Array.isArray(value)) {
|
||||
let isSimple = true
|
||||
for (const k in value) {
|
||||
if (typeof value[k] === 'object' && value[k] !== null) {
|
||||
isSimple = false
|
||||
break
|
||||
}
|
||||
}
|
||||
plain[key] = isSimple ? { ...value } : this.toPlainObject(value)
|
||||
} else {
|
||||
plain[key] = value
|
||||
}
|
||||
}
|
||||
}
|
||||
return plain
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.user-map-card {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 450px;
|
||||
}
|
||||
|
||||
.map-section {
|
||||
flex: 4;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.map-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.table-section {
|
||||
flex: 6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: #f8faff;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #eef2f7;
|
||||
}
|
||||
|
||||
.table-body {
|
||||
flex: 1;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
|
||||
&:hover {
|
||||
background: #f9fbff;
|
||||
}
|
||||
}
|
||||
|
||||
.th, .td {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.province { flex: 1.5; text-align: left; padding-left: 15px; }
|
||||
.count { flex: 1.5; }
|
||||
.amount { flex: 2; }
|
||||
|
||||
.th {
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.td {
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@@ -47,12 +47,12 @@
|
||||
/>
|
||||
|
||||
<!-- 内容展示区 (内部路由渲染) -->
|
||||
<scroll-view class="content" scroll-y="true">
|
||||
<view class="content-scroll">
|
||||
<view class="content-inner">
|
||||
<component :is="currentComponent" />
|
||||
</view>
|
||||
<AdminFooter />
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -215,8 +215,9 @@ onMounted(() => {
|
||||
background: #f0f2f5;
|
||||
}
|
||||
|
||||
.content {
|
||||
.content-scroll {
|
||||
flex: 1;
|
||||
overflow-y: scroll;
|
||||
background: #f0f2f5;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<text class="logo-text">{{ collapsed ? 'M' : 'MALL' }}</text>
|
||||
</view>
|
||||
|
||||
<scroll-view class="aside-menu" scroll-y="true">
|
||||
<view class="aside-menu">
|
||||
<view
|
||||
v-for="menu in topMenus"
|
||||
:key="menu.id"
|
||||
@@ -19,7 +19,7 @@
|
||||
<text>{{ menu.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="aside-footer" @click="onToggle">
|
||||
<view class="toggle-btn">
|
||||
@@ -46,15 +46,16 @@ const emit = defineEmits<{
|
||||
|
||||
function getIconText(icon: string): string {
|
||||
const iconMap: Record<string, string> = {
|
||||
'home': 'H',
|
||||
'user': 'U',
|
||||
'product': 'P',
|
||||
'order': 'O',
|
||||
'marketing': 'M',
|
||||
'content': 'C',
|
||||
'finance': 'F',
|
||||
'statistic': 'S',
|
||||
'setting': 'T'
|
||||
'home': '🏠',
|
||||
'user': '👥',
|
||||
'product': '📦',
|
||||
'order': '📜',
|
||||
'marketing': '📉',
|
||||
'content': '📝',
|
||||
'finance': '💰',
|
||||
'statistic': '📊',
|
||||
'setting': '⚙️',
|
||||
'maintenance': '🛠️'
|
||||
}
|
||||
return iconMap[icon] || icon.charAt(0).toUpperCase()
|
||||
}
|
||||
@@ -107,6 +108,7 @@ function onLogoClick(): void {
|
||||
.aside-menu {
|
||||
flex: 1;
|
||||
padding: 8px 0;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
|
||||
@@ -1,89 +0,0 @@
|
||||
<template>
|
||||
<view
|
||||
class="aside"
|
||||
:style="{ width: asideWidth + 'px' }"
|
||||
>
|
||||
<view class="aside-header">
|
||||
<view class="logo">
|
||||
<text class="logo-text"> 商城后台</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="aside-menu">
|
||||
<view
|
||||
v-for="m in menuList"
|
||||
:key="m.id"
|
||||
class="aside-item"
|
||||
:class="{ active: activeMenuId === m.id }"
|
||||
@click="$emit('menu-click', m.id)"
|
||||
>
|
||||
<image class="aside-icon" :src="m.icon" mode="aspectFit" />
|
||||
<text class="aside-title" v-if="!collapsed">{{ m.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import type { MenuItem } from '../types.uts'
|
||||
|
||||
defineProps<{
|
||||
collapsed: boolean
|
||||
menuList: MenuItem[]
|
||||
activeMenuId: string
|
||||
asideWidth:number
|
||||
}>()
|
||||
|
||||
defineEmits<{
|
||||
(e:'menu-click', menuId: string): void
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.aside{
|
||||
background: #1f2a37;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
z-index: 1000;
|
||||
}
|
||||
.aside-header{
|
||||
height: 56px;
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
align-items:center;
|
||||
justify-content: space-between;
|
||||
padding: 0 12px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
.logo-text{
|
||||
color:#fff;
|
||||
font-size:20px;
|
||||
font-weight:600;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
text-align:center;
|
||||
}
|
||||
.collapse-btn{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
|
||||
.collapse-text{ color:rgba(255,255,255,0.7); }
|
||||
|
||||
.aside-menu{ padding: 8px 0; }
|
||||
.aside-item{
|
||||
height: 54px;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
gap: 6px;
|
||||
margin: 6px 10px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.aside-item.active{ background:#1677ff; }
|
||||
.aside-icon{ width:22px; height:22px; }
|
||||
.aside-title{ color:#fff; font-size:12px; }
|
||||
</style>
|
||||
@@ -4,7 +4,7 @@
|
||||
<text class="header-title">{{ topMenuTitle }}</text>
|
||||
</view>
|
||||
|
||||
<scroll-view class="subsider-menu" scroll-y="true">
|
||||
<view class="subsider-menu">
|
||||
<view v-for="group in groups" :key="group.id" class="menu-group">
|
||||
<view class="group-title">
|
||||
<text>{{ group.title }}</text>
|
||||
@@ -20,7 +20,7 @@
|
||||
<text class="item-title">{{ route.title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@@ -79,6 +79,7 @@ function onRouteClick(routeId: string): void {
|
||||
.subsider-menu {
|
||||
flex: 1;
|
||||
padding: 8px 0;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.menu-group {
|
||||
|
||||
@@ -1,396 +0,0 @@
|
||||
<template>
|
||||
<view
|
||||
class="sub-sider"
|
||||
:style="{ left: props.asideWidth + 'px', width: props.siderWidth + 'px' }"
|
||||
>
|
||||
<view class="sub-header">
|
||||
<text class="sub-title">{{ activeMenuTitle }}</text>
|
||||
</view>
|
||||
|
||||
<scroll-view class="sub-body" scroll-y="true">
|
||||
<view
|
||||
v-for="g in groups"
|
||||
:key="groupKey(g)"
|
||||
class="group"
|
||||
>
|
||||
<!-- ✅ 改：点击标题时，如果该组没有 children 但有 path，则当成“叶子菜单”直接跳 -->
|
||||
<view class="group-title" @click="handleGroupTitleClick(g)">
|
||||
<text class="group-title-text">{{ g.title }}</text>
|
||||
|
||||
<!-- ✅ 改：只有有 children 才显示箭头 -->
|
||||
<text
|
||||
v-if="groupChildren(g).length > 0"
|
||||
class="group-arrow"
|
||||
:class="{ open: isGroupOpen(groupKey(g)) }"
|
||||
>v</text>
|
||||
</view>
|
||||
|
||||
<!-- ✅ 改：v-show 的条件不变，但 children 的遍历必须兜底 -->
|
||||
<view v-show="isGroupOpen(groupKey(g))" class="group-children">
|
||||
<view
|
||||
v-for="c in groupChildren(g)"
|
||||
:key="c.id"
|
||||
class="sub-item"
|
||||
:class="{ active: resolvedActiveId === c.id }"
|
||||
@click.stop="handleClick(c)"
|
||||
>
|
||||
<text class="sub-item-text" :class="{ activeText: resolvedActiveId === c.id }">
|
||||
{{ c.title }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref, computed, watch, withDefaults, onMounted } from 'vue'
|
||||
import type { MenuGroup, MenuChild } from '../types.uts'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
activeMenuTitle: string
|
||||
groups: MenuGroup[]
|
||||
activeSubId: string
|
||||
activeMenuId?: string | null
|
||||
asideWidth: number
|
||||
siderWidth: number
|
||||
}>(), {
|
||||
activeMenuId: 'home',
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'sub-click', child: MenuChild): void
|
||||
}>()
|
||||
|
||||
/** 只展开一个分组（更像 CRMEB） */
|
||||
const openGroupKey = ref<string>('')
|
||||
|
||||
/** 给 group 一个稳定 key：优先用 id（如果你 types 里没有 id，就用 title） */
|
||||
const groupKey = (g: MenuGroup): string => {
|
||||
// @ts-ignore
|
||||
const anyG: any = g as any
|
||||
return (anyG.id && (anyG.id as string)) ? (anyG.id as string) : g.title
|
||||
}
|
||||
|
||||
/** ✅ 核心：group.children 兜底成 []（因为 children 现在可选/可空） */
|
||||
const groupChildren = (g: MenuGroup): MenuChild[] => {
|
||||
// @ts-ignore
|
||||
const anyG: any = g as any
|
||||
// @ts-ignore
|
||||
const list = anyG.children as (MenuChild[] | null | undefined)
|
||||
return list && list.length > 0 ? list : []
|
||||
}
|
||||
|
||||
/** ✅ 兼容四级：child.children 兜底成 [] */
|
||||
const childChildren = (c: MenuChild): MenuChild[] => {
|
||||
// @ts-ignore
|
||||
const anyC: any = c as any
|
||||
// @ts-ignore
|
||||
const list = anyC.children as (MenuChild[] | null | undefined)
|
||||
return list && list.length > 0 ? list : []
|
||||
}
|
||||
|
||||
/** ✅ 叶子 group（无 children）如果有 path，则构造一个“伪 MenuChild”用于 emit 跳转 */
|
||||
const groupAsChild = (g: MenuGroup): MenuChild | null => {
|
||||
// @ts-ignore
|
||||
const anyG: any = g as any
|
||||
// @ts-ignore
|
||||
const p = anyG.path as (string | null | undefined)
|
||||
if (!p) return null
|
||||
return { id: groupKey(g), title: g.title, path: p } as MenuChild
|
||||
}
|
||||
|
||||
const normalizePath = (p: string): string => {
|
||||
if (!p) return ''
|
||||
const s = p.startsWith('/') ? p.slice(1) : p
|
||||
const q = s.indexOf('?')
|
||||
return q >= 0 ? s.slice(0, q) : s
|
||||
}
|
||||
|
||||
/** 扁平查找：id -> child（✅ 改：遍历时用 groupChildren/childChildren） */
|
||||
const findChildById = (id: string): MenuChild | null => {
|
||||
if (!id) return null
|
||||
|
||||
for (const g of props.groups) {
|
||||
// ✅ 叶子 group 也能命中
|
||||
const gLeaf = groupAsChild(g)
|
||||
if (gLeaf && gLeaf.id === id) return gLeaf
|
||||
|
||||
for (const c of groupChildren(g)) {
|
||||
if (c.id === id) return c
|
||||
const deep = childChildren(c)
|
||||
if (deep.length > 0) {
|
||||
const hit = findFirstMatchInChildren(id, deep)
|
||||
if (hit) return hit
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const findFirstMatchInChildren = (id: string, list: MenuChild[]): MenuChild | null => {
|
||||
for (const n of list) {
|
||||
if (n.id === id) return n
|
||||
const deep = childChildren(n)
|
||||
if (deep.length > 0) {
|
||||
const hit = findFirstMatchInChildren(id, deep)
|
||||
if (hit) return hit
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const findChildByPath = (path: string): MenuChild | null => {
|
||||
const target = normalizePath(path)
|
||||
if (!target) return null
|
||||
|
||||
for (const g of props.groups) {
|
||||
// ✅ 叶子 group 也能按 path 命中
|
||||
const gLeaf = groupAsChild(g)
|
||||
if (gLeaf && normalizePath(gLeaf.path) === target) return gLeaf
|
||||
|
||||
for (const c of groupChildren(g)) {
|
||||
if (normalizePath(c.path) === target) return c
|
||||
const deep = childChildren(c)
|
||||
if (deep.length > 0) {
|
||||
const hit = findFirstMatchByPath(target, deep)
|
||||
if (hit) return hit
|
||||
}
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const findFirstMatchByPath = (targetNorm: string, list: MenuChild[]): MenuChild | null => {
|
||||
for (const n of list) {
|
||||
if (normalizePath(n.path) === targetNorm) return n
|
||||
const deep = childChildren(n)
|
||||
if (deep.length > 0) {
|
||||
const hit = findFirstMatchByPath(targetNorm, deep)
|
||||
if (hit) return hit
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
/** 找到某个 child 属于哪个 group，用于自动展开该组（✅ 改：遍历兜底） */
|
||||
const findGroupKeyByChildId = (id: string): string => {
|
||||
for (const g of props.groups) {
|
||||
const gLeaf = groupAsChild(g)
|
||||
if (gLeaf && gLeaf.id === id) return groupKey(g)
|
||||
|
||||
for (const c of groupChildren(g)) {
|
||||
if (c.id === id) return groupKey(g)
|
||||
const deep = childChildren(c)
|
||||
if (deep.length > 0) {
|
||||
const hit = findFirstMatchInChildren(id, deep)
|
||||
if (hit) return groupKey(g)
|
||||
}
|
||||
}
|
||||
}
|
||||
return props.groups.length > 0 ? groupKey(props.groups[0]) : ''
|
||||
}
|
||||
|
||||
/** 递归取第一个 leaf 菜单（✅ 改：children 兜底） */
|
||||
const firstLeaf = (): MenuChild | null => {
|
||||
if (!props.groups || props.groups.length === 0) return null
|
||||
const g0 = props.groups[0]
|
||||
const g0Children = groupChildren(g0)
|
||||
|
||||
// ✅ 如果第一个 group 是叶子（无 children 但有 path），也能返回
|
||||
if (g0Children.length === 0) {
|
||||
return groupAsChild(g0)
|
||||
}
|
||||
|
||||
const c0 = g0Children[0]
|
||||
const deep = childChildren(c0)
|
||||
if (deep.length > 0) return findFirstLeafInChildren(deep)
|
||||
return c0
|
||||
}
|
||||
|
||||
const findFirstLeafInChildren = (list: MenuChild[]): MenuChild | null => {
|
||||
if (!list || list.length === 0) return null
|
||||
const n = list[0]
|
||||
const deep = childChildren(n)
|
||||
if (deep.length > 0) return findFirstLeafInChildren(deep)
|
||||
return n
|
||||
}
|
||||
|
||||
/** 高亮兜底：按 activeSubId -> route/path 再匹配一次 */
|
||||
const resolvedActiveId = computed((): string => {
|
||||
const byId = findChildById(props.activeSubId)
|
||||
if (byId) return byId.id
|
||||
|
||||
try {
|
||||
const pages = getCurrentPages()
|
||||
if (pages && pages.length > 0) {
|
||||
// @ts-ignore
|
||||
const cur: any = pages[pages.length - 1]
|
||||
// @ts-ignore
|
||||
const route: string = cur.route ? (cur.route as string) : ''
|
||||
const hit = findChildByPath(route)
|
||||
if (hit) return hit.id
|
||||
}
|
||||
} catch (e) {}
|
||||
|
||||
return props.activeSubId || ''
|
||||
})
|
||||
|
||||
const isGroupOpen = (key: string): boolean => {
|
||||
if (!openGroupKey.value) {
|
||||
return props.groups && props.groups.length > 0 ? groupKey(props.groups[0]) === key : false
|
||||
}
|
||||
return openGroupKey.value === key
|
||||
}
|
||||
|
||||
const toggleGroup = (key: string) => {
|
||||
openGroupKey.value = (openGroupKey.value === key) ? '' : key
|
||||
}
|
||||
|
||||
/** ✅ 新增：点 group 标题时的行为 */
|
||||
const handleGroupTitleClick = (g: MenuGroup) => {
|
||||
const list = groupChildren(g)
|
||||
// 有 children：正常展开/收起
|
||||
if (list.length > 0) {
|
||||
toggleGroup(groupKey(g))
|
||||
return
|
||||
}
|
||||
// 无 children：如果有 path，当成叶子菜单直接跳
|
||||
const leaf = groupAsChild(g)
|
||||
if (leaf) {
|
||||
openGroupKey.value = groupKey(g)
|
||||
emit('sub-click', leaf)
|
||||
}
|
||||
}
|
||||
|
||||
const handleClick = (c: MenuChild) => {
|
||||
openGroupKey.value = findGroupKeyByChildId(c.id)
|
||||
emit('sub-click', c)
|
||||
}
|
||||
|
||||
/** 自动：groups 变更/activeSubId 无效时，只做状态同步（展开对应 group），不触发导航 */
|
||||
const ensureDefault = () => {
|
||||
if (!props.groups || props.groups.length === 0) return
|
||||
|
||||
const hit = findChildById(props.activeSubId)
|
||||
if (hit) { openGroupKey.value = findGroupKeyByChildId(hit.id); return }
|
||||
|
||||
// ✅ 再按当前 route 找一次
|
||||
try {
|
||||
const pages = getCurrentPages()
|
||||
// @ts-ignore
|
||||
const cur: any = pages[pages.length - 1]
|
||||
const route: string = cur?.route ?? ''
|
||||
const byRoute = findChildByPath(route)
|
||||
if (byRoute) { openGroupKey.value = findGroupKeyByChildId(byRoute.id); return }
|
||||
} catch(e) {}
|
||||
|
||||
const first = firstLeaf()
|
||||
if (first) openGroupKey.value = findGroupKeyByChildId(first.id)
|
||||
}
|
||||
|
||||
// ✅ 移除 watch(immediate: true) 中的自动 emit，仅在 groups/activeSubId 变更时同步状态
|
||||
watch(
|
||||
() => props.groups,
|
||||
() => { ensureDefault() },
|
||||
{ immediate: false, deep: true }
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.activeSubId,
|
||||
() => { ensureDefault() },
|
||||
{ immediate: false }
|
||||
)
|
||||
|
||||
// ✅ 初始化时只做一次状态同步（不通过 watch immediate）
|
||||
onMounted(() => {
|
||||
ensureDefault()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* 原样保留你的样式 */
|
||||
.sub-sider{
|
||||
background:#ffffff;
|
||||
border-right: 1px solid #e5e7eb;
|
||||
height: 100vh;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 900;
|
||||
}
|
||||
|
||||
.sub-header{
|
||||
height: 56px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
border-bottom: 1px solid #eef2f7;
|
||||
}
|
||||
.sub-title{
|
||||
font-size:16px;
|
||||
font-weight:700;
|
||||
color:#111827;
|
||||
display:flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
}
|
||||
|
||||
.sub-body{
|
||||
height: calc(100vh - 56px);
|
||||
}
|
||||
|
||||
.group{ padding: 8px 0; }
|
||||
|
||||
.group-title{
|
||||
height: 42px;
|
||||
margin: 8px 12px 6px 12px;
|
||||
padding: 0 14px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
justify-content: space-between;
|
||||
background: #f6f7fb;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.group-title-text{
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color:#111827;
|
||||
}
|
||||
|
||||
.group-arrow{
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
.group-arrow.open{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.group-children{
|
||||
padding: 0 12px 6px 12px;
|
||||
}
|
||||
|
||||
.sub-item{
|
||||
height: 34px;
|
||||
margin: 4px 0;
|
||||
padding: 0 14px 0 28px;
|
||||
display:flex;
|
||||
align-items:center;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.sub-item.active{
|
||||
background: #eaf2ff;
|
||||
}
|
||||
|
||||
.sub-item-text{
|
||||
font-size: 13px;
|
||||
color:#374151;
|
||||
}
|
||||
.sub-item-text.activeText{
|
||||
color:#1677ff;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
@@ -18,15 +18,18 @@ import PlaceholderPage from '@/layouts/admin/components/PlaceholderPage.uvue'
|
||||
import HomeIndex from '@/layouts/admin/pages/HomeIndex.uvue'
|
||||
|
||||
// 导入用户模块（纯组件，不包含 AdminLayout）
|
||||
import UserStatistic from '@/pages/mall/admin/user/Statistic.uvue'
|
||||
import UserList from '@/pages/mall/admin/user/list.uvue'
|
||||
import UserLevel from '@/pages/mall/admin/user/level.uvue'
|
||||
import UserGroup from '@/pages/mall/admin/user/group.uvue'
|
||||
import UserLabel from '@/pages/mall/admin/user/label.uvue'
|
||||
import MemberConfig from '@/pages/mall/admin/user/MemberConfig.uvue'
|
||||
// 其他用户模块组件暂时使用 PlaceholderPage
|
||||
// import UserGradeType from '@/pages/mall/admin/user/grade/type.uvue'
|
||||
// import UserGradeCard from '@/pages/mall/admin/user/grade/card.uvue'
|
||||
// import UserGradeRecord from '@/pages/mall/admin/user/grade/record.uvue'
|
||||
// import UserGradeRight from '@/pages/mall/admin/user/grade/right.uvue'
|
||||
// import UserMemberConfig from '@/pages/mall/admin/user/MemberConfig.uvue'
|
||||
|
||||
// 导入商品模块（纯组件，不包含 AdminLayout）
|
||||
import ProductList from '@/pages/mall/admin/product/list.uvue'
|
||||
@@ -39,6 +42,11 @@ import ProductProtection from '@/pages/mall/admin/product/protection.uvue'
|
||||
|
||||
// 导入订单模块（纯组件，不包含 AdminLayout）
|
||||
import OrderList from '@/pages/mall/admin/order/list.uvue'
|
||||
import OrderStatistic from '@/pages/mall/admin/order/order-statistics/index.uvue'
|
||||
import OrderRefund from '@/pages/mall/admin/order/aftersales-order/index.uvue'
|
||||
import OrderCashier from '@/pages/mall/admin/order/cashier-order/index.uvue'
|
||||
import OrderVerify from '@/pages/mall/admin/order/write-off-records/index.uvue'
|
||||
import OrderConfig from '@/pages/mall/admin/order/order-configuration/index.uvue'
|
||||
|
||||
// 营销、内容、财务、数据、设置模块暂时使用 PlaceholderPage
|
||||
// 避免循环依赖问题
|
||||
@@ -63,10 +71,12 @@ export const componentMap: Map<string, any> = new Map([
|
||||
['HomeIndex', HomeIndex],
|
||||
|
||||
// 用户模块
|
||||
['UserStatistic', UserStatistic],
|
||||
['UserList', UserList],
|
||||
['UserLevel', UserLevel],
|
||||
['UserGroup', UserGroup],
|
||||
['UserLabel', UserLabel],
|
||||
['UserMemberConfig', MemberConfig],
|
||||
['UserGradeType', PlaceholderPage], // 暂时使用占位组件
|
||||
['UserGradeCard', PlaceholderPage],
|
||||
['UserGradeRecord', PlaceholderPage],
|
||||
@@ -83,6 +93,11 @@ export const componentMap: Map<string, any> = new Map([
|
||||
|
||||
// 订单模块
|
||||
['OrderList', OrderList],
|
||||
['OrderStatistic', OrderStatistic],
|
||||
['OrderRefund', OrderRefund],
|
||||
['OrderCashier', OrderCashier],
|
||||
['OrderVerify', OrderVerify],
|
||||
['OrderConfig', OrderConfig],
|
||||
|
||||
// 营销模块 - 暂时使用占位组件
|
||||
['MarketingCoupon', PlaceholderPage],
|
||||
|
||||
@@ -72,8 +72,8 @@ export const topMenus: TopMenu[] = [
|
||||
path: '/pages/mall/admin/user/list',
|
||||
order: 2,
|
||||
groups: [
|
||||
{ id: 'user-manage', title: '用户管理', order: 1 },
|
||||
{ id: 'user-grade', title: '会员管理', order: 2 }
|
||||
{ id: 'user-manage', title: '', order: 1 },
|
||||
{ id: 'member-manage', title: '会员管理', order: 2 }
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -93,7 +93,7 @@ export const topMenus: TopMenu[] = [
|
||||
path: '/pages/mall/admin/order/list',
|
||||
order: 4,
|
||||
groups: [
|
||||
{ id: 'order-manage', title: '订单管理', order: 1 }
|
||||
{ id: 'order-manage', title: '', order: 1 }
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -168,6 +168,16 @@ export const routes: RouteRecord[] = [
|
||||
},
|
||||
|
||||
// ========== 用户模块 ==========
|
||||
{
|
||||
id: 'user_statistic',
|
||||
title: '用户统计',
|
||||
path: '/pages/mall/admin/user/Statistic',
|
||||
componentKey: 'UserStatistic',
|
||||
parentId: 'user',
|
||||
groupId: 'user-manage',
|
||||
auth: ['admin-user-statistic-index'],
|
||||
order: 1
|
||||
},
|
||||
{
|
||||
id: 'user_list',
|
||||
title: '用户管理',
|
||||
@@ -176,16 +186,6 @@ export const routes: RouteRecord[] = [
|
||||
parentId: 'user',
|
||||
groupId: 'user-manage',
|
||||
auth: ['admin-user-user-index'],
|
||||
order: 1
|
||||
},
|
||||
{
|
||||
id: 'user_level',
|
||||
title: '用户等级',
|
||||
path: '/pages/mall/admin/user/level',
|
||||
componentKey: 'UserLevel',
|
||||
parentId: 'user',
|
||||
groupId: 'user-manage',
|
||||
auth: ['user-user-level'],
|
||||
order: 2
|
||||
},
|
||||
{
|
||||
@@ -208,15 +208,35 @@ export const routes: RouteRecord[] = [
|
||||
auth: ['user-user-label'],
|
||||
order: 4
|
||||
},
|
||||
{
|
||||
id: 'user_level',
|
||||
title: '用户等级',
|
||||
path: '/pages/mall/admin/user/level',
|
||||
componentKey: 'UserLevel',
|
||||
parentId: 'user',
|
||||
groupId: 'user-manage',
|
||||
auth: ['user-user-level'],
|
||||
order: 5
|
||||
},
|
||||
{
|
||||
id: 'user_member_config',
|
||||
title: '用户配置',
|
||||
path: '/pages/mall/admin/user/MemberConfig',
|
||||
componentKey: 'UserMemberConfig',
|
||||
parentId: 'user',
|
||||
groupId: 'user-manage',
|
||||
auth: ['admin-user-member-config'],
|
||||
order: 6
|
||||
},
|
||||
{
|
||||
id: 'user_type',
|
||||
title: '会员类型',
|
||||
path: '/pages/mall/admin/user/grade/type',
|
||||
componentKey: 'UserGradeType',
|
||||
parentId: 'user',
|
||||
groupId: 'user-grade',
|
||||
groupId: 'member-manage',
|
||||
auth: ['admin-user-member-type'],
|
||||
order: 5
|
||||
order: 1
|
||||
},
|
||||
{
|
||||
id: 'user_card',
|
||||
@@ -224,9 +244,9 @@ export const routes: RouteRecord[] = [
|
||||
path: '/pages/mall/admin/user/grade/card',
|
||||
componentKey: 'UserGradeCard',
|
||||
parentId: 'user',
|
||||
groupId: 'user-grade',
|
||||
groupId: 'member-manage',
|
||||
auth: ['admin-user-grade-card'],
|
||||
order: 6
|
||||
order: 2
|
||||
},
|
||||
{
|
||||
id: 'user_record',
|
||||
@@ -234,9 +254,9 @@ export const routes: RouteRecord[] = [
|
||||
path: '/pages/mall/admin/user/grade/record',
|
||||
componentKey: 'UserGradeRecord',
|
||||
parentId: 'user',
|
||||
groupId: 'user-grade',
|
||||
groupId: 'member-manage',
|
||||
auth: ['admin-user-grade-record'],
|
||||
order: 7
|
||||
order: 3
|
||||
},
|
||||
{
|
||||
id: 'user_right',
|
||||
@@ -244,9 +264,9 @@ export const routes: RouteRecord[] = [
|
||||
path: '/pages/mall/admin/user/grade/right',
|
||||
componentKey: 'UserGradeRight',
|
||||
parentId: 'user',
|
||||
groupId: 'user-grade',
|
||||
groupId: 'member-manage',
|
||||
auth: ['admin-user-grade-right'],
|
||||
order: 8
|
||||
order: 4
|
||||
},
|
||||
|
||||
// ========== 商品模块 ==========
|
||||
@@ -323,6 +343,16 @@ export const routes: RouteRecord[] = [
|
||||
},
|
||||
|
||||
// ========== 订单模块 ==========
|
||||
{
|
||||
id: 'order_statistic',
|
||||
title: '订单统计',
|
||||
path: '/pages/mall/admin/order/statistic',
|
||||
componentKey: 'OrderStatistic',
|
||||
parentId: 'order',
|
||||
groupId: 'order-manage',
|
||||
auth: ['admin-order-statistic-index'],
|
||||
order: 1
|
||||
},
|
||||
{
|
||||
id: 'order_list',
|
||||
title: '订单管理',
|
||||
@@ -332,7 +362,47 @@ export const routes: RouteRecord[] = [
|
||||
groupId: 'order-manage',
|
||||
auth: ['admin-order-storeOrder-index'],
|
||||
keepAlive: true,
|
||||
order: 1
|
||||
order: 2
|
||||
},
|
||||
{
|
||||
id: 'order_refund',
|
||||
title: '售后订单',
|
||||
path: '/pages/mall/admin/order/refund',
|
||||
componentKey: 'OrderRefund',
|
||||
parentId: 'order',
|
||||
groupId: 'order-manage',
|
||||
auth: ['admin-order-refund-index'],
|
||||
order: 3
|
||||
},
|
||||
{
|
||||
id: 'order_cashier',
|
||||
title: '收银订单',
|
||||
path: '/pages/mall/admin/order/cashier',
|
||||
componentKey: 'OrderCashier',
|
||||
parentId: 'order',
|
||||
groupId: 'order-manage',
|
||||
auth: ['admin-order-cashier-index'],
|
||||
order: 4
|
||||
},
|
||||
{
|
||||
id: 'order_verify',
|
||||
title: '核销记录',
|
||||
path: '/pages/mall/admin/order/verify',
|
||||
componentKey: 'OrderVerify',
|
||||
parentId: 'order',
|
||||
groupId: 'order-manage',
|
||||
auth: ['admin-order-verify-index'],
|
||||
order: 5
|
||||
},
|
||||
{
|
||||
id: 'order_config',
|
||||
title: '订单配置',
|
||||
path: '/pages/mall/admin/order/config',
|
||||
componentKey: 'OrderConfig',
|
||||
parentId: 'order',
|
||||
groupId: 'order-manage',
|
||||
auth: ['admin-order-config-index'],
|
||||
order: 6
|
||||
},
|
||||
|
||||
// ========== 营销模块 ==========
|
||||
|
||||
@@ -1,18 +1,15 @@
|
||||
<template>
|
||||
<AdminLayout :currentPage="currentPage">
|
||||
<view class="page">
|
||||
<view class="header">
|
||||
<text class="title">{{ title }}</text>
|
||||
<text class="sub-title">售后订单管理与申请处理</text>
|
||||
</view>
|
||||
<view class="page">
|
||||
<view class="header">
|
||||
<text class="title">{{ title }}</text>
|
||||
<text class="sub-title">售后订单管理与申请处理</text>
|
||||
</view>
|
||||
</AdminLayout>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
|
||||
const currentPage = ref<string>('order-aftersale')
|
||||
|
||||
const title = ref<string>('售后订单')
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,18 +1,15 @@
|
||||
<template>
|
||||
<AdminLayout :currentPage="currentPage">
|
||||
<view class="page">
|
||||
<view class="header">
|
||||
<text class="title">{{ title }}</text>
|
||||
<text class="sub-title">收银台订单，管理线下收银记录</text>
|
||||
</view>
|
||||
<view class="page">
|
||||
<view class="header">
|
||||
<text class="title">{{ title }}</text>
|
||||
<text class="sub-title">收银台订单，管理线下收银记录</text>
|
||||
</view>
|
||||
</AdminLayout>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
|
||||
const currentPage = ref<string>('order-cashier')
|
||||
|
||||
const title = ref<string>('收银订单')
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,15 +1,136 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<view class="page-header">
|
||||
<text class="page-title">订单管理</text>
|
||||
<text class="page-subtitle">Component: OrderList</text>
|
||||
<view class="order-list-page">
|
||||
<!-- 筛选区域 -->
|
||||
<view class="filter-card">
|
||||
<view class="filter-row">
|
||||
<view class="filter-item">
|
||||
<text class="label">订单类型：</text>
|
||||
<view class="mock-select">
|
||||
<text>全部订单</text>
|
||||
<view class="arrow-down"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-item">
|
||||
<text class="label">支付方式：</text>
|
||||
<view class="mock-select">
|
||||
<text>全部</text>
|
||||
<view class="arrow-down"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-item long">
|
||||
<text class="label">创建时间：</text>
|
||||
<view class="mock-date-range">
|
||||
<image class="cal-icon" src="/static/icons/calendar.png" mode="aspectFit" />
|
||||
<text class="placeholder">开始日期 - 结束日期</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="filter-item search">
|
||||
<text class="label">订单搜索：</text>
|
||||
<view class="search-group">
|
||||
<view class="search-select">
|
||||
<text>全部</text>
|
||||
<view class="arrow-down"></view>
|
||||
</view>
|
||||
<input class="search-input" placeholder="请输入" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="btn-row">
|
||||
<button class="btn btn-primary">查询</button>
|
||||
<button class="btn btn-default">重置</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="page-content">
|
||||
<view class="placeholder-card">
|
||||
<text class="placeholder-title">页面占位</text>
|
||||
<text class="placeholder-desc">该功能模块正在开发中</text>
|
||||
<text class="placeholder-info">当前采用 CRMEB 路由体系 1:1 映射</text>
|
||||
|
||||
<!-- 列表数据区域 -->
|
||||
<view class="content-card">
|
||||
<!-- 状态 Tabs -->
|
||||
<view class="status-tabs">
|
||||
<view
|
||||
v-for="(tab, index) in statusTabs"
|
||||
:key="index"
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === index }"
|
||||
@click="activeTab = index"
|
||||
>
|
||||
<text class="tab-text">{{ tab.name }}</text>
|
||||
<text v-if="tab.count" class="tab-count">({{ tab.count }})</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<view class="action-bar">
|
||||
<button class="action-btn btn-blue">订单核销</button>
|
||||
<button class="action-btn btn-outline">批量发货</button>
|
||||
<button class="action-btn btn-outline">批量删除</button>
|
||||
<button class="action-btn btn-outline">订单导出</button>
|
||||
</view>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<view class="order-table">
|
||||
<view class="thead">
|
||||
<view class="th col-check">
|
||||
<checkbox :checked="false" color="#1890ff" />
|
||||
</view>
|
||||
<view class="th col-order">订单号 | 类型</view>
|
||||
<view class="th col-product">商品信息</view>
|
||||
<view class="th col-user">用户信息</view>
|
||||
<view class="th col-price">实际支付</view>
|
||||
<view class="th col-pay">支付方式</view>
|
||||
<view class="th col-time">支付时间</view>
|
||||
<view class="th col-status">订单状态</view>
|
||||
<view class="th col-op">操作</view>
|
||||
</view>
|
||||
|
||||
<view class="tbody">
|
||||
<view v-for="(item, index) in orderData" :key="index" class="tr">
|
||||
<view class="td col-check">
|
||||
<checkbox :checked="false" color="#1890ff" />
|
||||
</view>
|
||||
<!-- 订单号|类型 -->
|
||||
<view class="td col-order">
|
||||
<text class="order-sn">{{ item.sn }}</text>
|
||||
<text class="order-type" :class="item.typeColor">[{{ item.typeName }}]</text>
|
||||
<text v-if="item.cancelStatus" class="cancel-text">{{ item.cancelStatus }}</text>
|
||||
</view>
|
||||
<!-- 商品信息 -->
|
||||
<view class="td col-product">
|
||||
<view class="product-info-wrap">
|
||||
<image class="p-img" :src="item.product.img" mode="aspectFill" />
|
||||
<text class="p-name">{{ item.product.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 用户信息 -->
|
||||
<view class="td col-user">
|
||||
<text class="u-info">{{ item.user.phone }} | {{ item.user.id }}</text>
|
||||
</view>
|
||||
<!-- 实际支付 -->
|
||||
<view class="td col-price">
|
||||
<text class="price-val">{{ item.actualPrice }}</text>
|
||||
</view>
|
||||
<!-- 支付方式 -->
|
||||
<view class="td col-pay">
|
||||
<text class="pay-text">{{ item.payMethod }}</text>
|
||||
</view>
|
||||
<!-- 支付时间 -->
|
||||
<view class="td col-time">
|
||||
<text class="time-text">{{ item.payTime }}</text>
|
||||
</view>
|
||||
<!-- 订单状态 -->
|
||||
<view class="td col-status">
|
||||
<text class="status-text">{{ item.statusName }}</text>
|
||||
</view>
|
||||
<!-- 操作 -->
|
||||
<view class="td col-op">
|
||||
<view class="op-links">
|
||||
<text class="op-link primary" v-if="item.primaryAction">{{ item.primaryAction }}</text>
|
||||
<view class="op-link-more">
|
||||
<text class="more-text">更多</text>
|
||||
<view class="arrow-down-blue"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -18,64 +139,344 @@
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
// TODO: 实现 订单管理 的具体功能
|
||||
const loading = ref<boolean>(false)
|
||||
const activeTab = ref(2) // 默认选中待发货或待核销（手动对齐截图）
|
||||
|
||||
const statusTabs = [
|
||||
{ name: '全部', count: null },
|
||||
{ name: '待支付', count: 793 },
|
||||
{ name: '待发货', count: 3695 },
|
||||
{ name: '待核销', count: null },
|
||||
{ name: '待收货', count: null },
|
||||
{ name: '待评价', count: null },
|
||||
{ name: '已完成', count: null },
|
||||
{ name: '已退款', count: null },
|
||||
{ name: '已删除', count: null }
|
||||
]
|
||||
|
||||
const orderData = ref([
|
||||
{
|
||||
sn: 'cp541336970228400128',
|
||||
typeName: '秒杀订单',
|
||||
typeColor: 'blue',
|
||||
cancelStatus: '用户已取消',
|
||||
product: {
|
||||
img: 'https://img.crmeb.com/crmeb_demo/75211.png',
|
||||
name: '爱奇艺智能 奇遇LT01 投影仪 家用卧室 超高清手机便携投影机 (4K超清 支持...'
|
||||
},
|
||||
user: { phone: '188****4074', id: '82694' },
|
||||
actualPrice: '未支付',
|
||||
payMethod: '--',
|
||||
payTime: '--',
|
||||
statusName: '未支付',
|
||||
primaryAction: ''
|
||||
},
|
||||
{
|
||||
sn: 'cp541289248708362240',
|
||||
typeName: '核销订单',
|
||||
typeColor: 'purple',
|
||||
cancelStatus: '',
|
||||
product: {
|
||||
img: 'https://img.crmeb.com/crmeb_demo/75211.png',
|
||||
name: '阿迪达斯官网 adidas BBALL CAP COT 男女训练运动帽子FQ5270 传奇墨水...'
|
||||
},
|
||||
user: { phone: '你就给', id: '82703' },
|
||||
actualPrice: '90.1',
|
||||
payMethod: '余额支付',
|
||||
payTime: '2026-02-02 16:10:17',
|
||||
statusName: '未核销',
|
||||
primaryAction: '立即核销'
|
||||
},
|
||||
{
|
||||
sn: 'cp541268226856714240',
|
||||
typeName: '普通订单',
|
||||
typeColor: 'green',
|
||||
cancelStatus: '',
|
||||
product: {
|
||||
img: 'https://img.crmeb.com/crmeb_demo/75211.png',
|
||||
name: 'UR2024夏季新款女装复古纯欲氛围感一字肩短款T恤衫UWG440060'
|
||||
},
|
||||
user: { phone: '王毅不睡了', id: '82689' },
|
||||
actualPrice: '未支付',
|
||||
payMethod: '--',
|
||||
payTime: '--',
|
||||
statusName: '未支付',
|
||||
primaryAction: '编辑'
|
||||
},
|
||||
{
|
||||
sn: 'cp541262080745930752',
|
||||
typeName: '秒杀订单',
|
||||
typeColor: 'blue',
|
||||
cancelStatus: '',
|
||||
product: {
|
||||
img: 'https://img.crmeb.com/crmeb_demo/75211.png',
|
||||
name: '爱奇艺智能 奇遇LT01 投影仪 家用卧室 超高清手机便携投影机 (4K超清 支持...'
|
||||
},
|
||||
user: { phone: '177****8361', id: '82697' },
|
||||
actualPrice: '未支付',
|
||||
payMethod: '--',
|
||||
payTime: '--',
|
||||
statusName: '未支付',
|
||||
primaryAction: '编辑'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
padding: 20px;
|
||||
.order-list-page {
|
||||
padding: 16px;
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
.filter-card {
|
||||
background-color: #fff;
|
||||
padding: 24px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.placeholder-card {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
.filter-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
.filter-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder-desc {
|
||||
display: block;
|
||||
.mock-select {
|
||||
width: 160px;
|
||||
height: 32px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
text { font-size: 14px; color: #595959; }
|
||||
}
|
||||
|
||||
.mock-date-range {
|
||||
width: 240px;
|
||||
height: 32px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.cal-icon { width: 14px; height: 14px; margin-right: 8px; opacity: 0.4; }
|
||||
.placeholder { font-size: 14px; color: #bfbfbf; }
|
||||
}
|
||||
|
||||
.search-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.search-select {
|
||||
width: 80px;
|
||||
border-right: 1px solid #d9d9d9;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
background-color: #fafafa;
|
||||
text { font-size: 14px; color: #595959; }
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.placeholder-info {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #1890ff;
|
||||
.arrow-down {
|
||||
width: 0; height: 0;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 5px solid #bfbfbf;
|
||||
}
|
||||
|
||||
.btn-row {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.btn-primary { background-color: #1890ff; color: #fff; border: none; }
|
||||
.btn-default { background-color: #fff; color: #595959; border: 1px solid #d9d9d9; }
|
||||
|
||||
.content-card {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.status-tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
padding: 16px 20px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 2px;
|
||||
|
||||
.tab-text { font-size: 14px; color: #595959; }
|
||||
.tab-count { font-size: 14px; color: #595959; }
|
||||
|
||||
&.active {
|
||||
.tab-text, .tab-count { color: #1890ff; font-weight: 500; }
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-bar {
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-blue { background-color: #1890ff; color: #fff; border: none; }
|
||||
.btn-outline { background-color: #fff; color: #595959; border: 1px solid #d9d9d9; }
|
||||
|
||||
/* 表格样式 */
|
||||
.order-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.thead {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #f0f7ff;
|
||||
}
|
||||
|
||||
.th {
|
||||
padding: 12px 8px;
|
||||
font-size: 14px;
|
||||
color: #595959;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tr {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
&:hover { background-color: #fafafa; }
|
||||
}
|
||||
|
||||
.td {
|
||||
padding: 16px 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 列宽控制 */
|
||||
.col-check { width: 50px; justify-content: center; align-items: center; }
|
||||
.col-order { width: 220px; }
|
||||
.col-product { flex: 1; }
|
||||
.col-user { width: 160px; }
|
||||
.col-price { width: 100px; }
|
||||
.col-pay { width: 100px; }
|
||||
.col-time { width: 160px; }
|
||||
.col-status { width: 100px; }
|
||||
.col-op { width: 120px; }
|
||||
|
||||
/* 单元格具体内容样式 */
|
||||
.order-sn { font-size: 13px; color: #262626; margin-bottom: 4px; }
|
||||
.order-type { font-size: 12px; }
|
||||
.blue { color: #1890ff; }
|
||||
.purple { color: #722ed1; }
|
||||
.green { color: #52c41a; }
|
||||
.cancel-text { font-size: 12px; color: #ff4d4f; margin-top: 4px; }
|
||||
|
||||
.product-info-wrap {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.p-img { width: 44px; height: 44px; border-radius: 4px; background-color: #f5f5f5; flex-shrink: 0; }
|
||||
.p-name { font-size: 13px; color: #595959; line-height: 1.5; }
|
||||
|
||||
.u-info { font-size: 13px; color: #595959; }
|
||||
.price-val { font-size: 14px; color: #262626; }
|
||||
.pay-text, .time-text, .status-text { font-size: 13px; color: #595959; }
|
||||
|
||||
.op-links {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.op-link { font-size: 13px; cursor: pointer; }
|
||||
.primary { color: #1890ff; }
|
||||
|
||||
.op-link-more {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
.more-text { font-size: 13px; color: #1890ff; }
|
||||
.arrow-down-blue {
|
||||
width: 0; height: 0;
|
||||
border-left: 3px solid transparent;
|
||||
border-right: 3px solid transparent;
|
||||
border-top: 4px solid #1890ff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,18 +1,15 @@
|
||||
<template>
|
||||
<AdminLayout :currentPage="currentPage">
|
||||
<view class="page">
|
||||
<view class="header">
|
||||
<text class="title">{{ title }}</text>
|
||||
<text class="sub-title">订单配置，设置订单相关参数</text>
|
||||
</view>
|
||||
<view class="page">
|
||||
<view class="header">
|
||||
<text class="title">{{ title }}</text>
|
||||
<text class="sub-title">订单配置，设置订单相关参数</text>
|
||||
</view>
|
||||
</AdminLayout>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
|
||||
const currentPage = ref<string>('order-config')
|
||||
|
||||
const title = ref<string>('订单配置')
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,21 +1,599 @@
|
||||
<template>
|
||||
<AdminLayout :currentPage="currentPage">
|
||||
<view class="page">
|
||||
<view class="header">
|
||||
<text class="title">{{ title }}</text>
|
||||
<text class="sub-title">订单交易统计数据</text>
|
||||
<view class="order-statistic-page">
|
||||
<!-- 时间选择卡片 -->
|
||||
<view class="filter-card">
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">时间选择：</text>
|
||||
<view class="date-picker-mock">
|
||||
<image class="calendar-icon" src="/static/icons/calendar.png" mode="aspectFit" />
|
||||
<text class="date-range">2026/01/04 - 2026/02/02</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</AdminLayout>
|
||||
|
||||
<!-- 数据汇总卡片 -->
|
||||
<view class="stat-cards-row">
|
||||
<!-- 订单量 -->
|
||||
<view class="stat-card">
|
||||
<view class="icon-wrap blue-bg">
|
||||
<view class="custom-icon icon-order"></view>
|
||||
</view>
|
||||
<view class="stat-info">
|
||||
<text class="stat-value">209</text>
|
||||
<text class="stat-desc">订单量</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单销售额 -->
|
||||
<view class="stat-card">
|
||||
<view class="icon-wrap orange-bg">
|
||||
<view class="custom-icon icon-money"></view>
|
||||
</view>
|
||||
<view class="stat-info">
|
||||
<text class="stat-value">443254.62</text>
|
||||
<text class="stat-desc">订单销售额</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 退款订单数 -->
|
||||
<view class="stat-card">
|
||||
<view class="icon-wrap green-bg">
|
||||
<view class="custom-icon icon-refund"></view>
|
||||
</view>
|
||||
<view class="stat-info">
|
||||
<text class="stat-value">0</text>
|
||||
<text class="stat-desc">退款订单数</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 退款金额 -->
|
||||
<view class="stat-card last-card">
|
||||
<view class="icon-wrap pink-bg">
|
||||
<view class="custom-icon icon-refund-money"></view>
|
||||
</view>
|
||||
<view class="stat-info">
|
||||
<text class="stat-value">0</text>
|
||||
<text class="stat-desc">退款金额</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 营业趋势图表 -->
|
||||
<view class="chart-card">
|
||||
<view class="card-header">
|
||||
<text class="card-title">营业趋势</text>
|
||||
</view>
|
||||
<view class="chart-container">
|
||||
<EChartsView :option="trendOption" class="trend-chart" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部双图表区域 -->
|
||||
<view class="bottom-charts-row">
|
||||
<!-- 订单来源分析 -->
|
||||
<view class="bottom-chart-card">
|
||||
<view class="card-header-row">
|
||||
<text class="card-title">订单来源分析</text>
|
||||
<view class="style-toggle">
|
||||
<text class="toggle-text">切换样式</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pie-chart-container">
|
||||
<EChartsView :option="sourceOption" class="source-chart" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单类型分析 -->
|
||||
<view class="bottom-chart-card">
|
||||
<view class="card-header-row">
|
||||
<text class="card-title">订单类型分析</text>
|
||||
<view class="style-toggle">
|
||||
<text class="toggle-text">切换样式</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="type-table-container">
|
||||
<view class="table-header">
|
||||
<text class="th-text col-id">序号</text>
|
||||
<text class="th-text col-name">来源</text>
|
||||
<text class="th-text col-money">金额</text>
|
||||
<text class="th-text col-rate">占比率</text>
|
||||
</view>
|
||||
<view class="table-body">
|
||||
<view v-for="(item, index) in orderTypeData" :key="index" class="table-row">
|
||||
<text class="td-text col-id">{{ index + 1 }}</text>
|
||||
<text class="td-text col-name">{{ item.name }}</text>
|
||||
<text class="td-text col-money">{{ item.amount }}</text>
|
||||
<view class="col-rate rate-box">
|
||||
<view class="progress-wrap">
|
||||
<view class="progress-bar" :style="{ width: item.rate + '%', backgroundColor: '#1890ff' }"></view>
|
||||
</view>
|
||||
<text class="rate-val">{{ item.rate }}%</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
|
||||
const currentPage = ref<string>('order-statistics')
|
||||
import { ref, onMounted } from 'vue'
|
||||
import EChartsView from '@/uni_modules/charts/EChartsView.vue'
|
||||
|
||||
const title = ref<string>('订单统计')
|
||||
const trendOption = ref<any>({})
|
||||
const sourceOption = ref<any>({})
|
||||
|
||||
const orderTypeData = ref([
|
||||
{ name: '普通订单', amount: '430986.62', rate: '97.23' },
|
||||
{ name: '拼团订单', amount: '7127', rate: '1.60' },
|
||||
{ name: '预售订单', amount: '4835', rate: '1.09' },
|
||||
{ name: '秒杀订单', amount: '306', rate: '0.06' },
|
||||
{ name: '砍价订单', amount: '0', rate: '0.00' }
|
||||
])
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
initCharts()
|
||||
}, 300)
|
||||
})
|
||||
|
||||
/**
|
||||
* 转换 UTS 对象为纯 JS 对象，确保 ECharts 能正确解析
|
||||
*/
|
||||
function toPlainObject(obj: any): any {
|
||||
if (obj == null) return null
|
||||
if (typeof obj !== 'object') return obj
|
||||
if (Array.isArray(obj)) {
|
||||
return obj.map((item: any) : any => toPlainObject(item))
|
||||
}
|
||||
const plain: any = {}
|
||||
const keys = Object.keys(obj)
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
const key = keys[i]
|
||||
const value = obj[key]
|
||||
if (typeof value === 'function' || key.startsWith('_') || key === 'toJSON') {
|
||||
continue
|
||||
}
|
||||
if (value != null && typeof value === 'object') {
|
||||
plain[key] = toPlainObject(value)
|
||||
} else {
|
||||
plain[key] = value
|
||||
}
|
||||
}
|
||||
return plain
|
||||
}
|
||||
|
||||
function initCharts() {
|
||||
initTrendChart()
|
||||
initSourceChart()
|
||||
}
|
||||
|
||||
function initSourceChart() {
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{b}: {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
right: '10%',
|
||||
top: 'center',
|
||||
itemWidth: 10,
|
||||
itemHeight: 10,
|
||||
icon: 'circle',
|
||||
textStyle: { color: '#8c8c8c' }
|
||||
},
|
||||
color: ['#1890ff', '#52c41a', '#597ef7', '#ffc53d', '#ff7875'],
|
||||
series: [
|
||||
{
|
||||
name: '订单来源',
|
||||
type: 'pie',
|
||||
radius: ['45%', '70%'],
|
||||
center: ['40%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
formatter: '{b}'
|
||||
},
|
||||
labelLine: {
|
||||
show: true
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '公众号' },
|
||||
{ value: 735, name: '小程序' },
|
||||
{ value: 580, name: 'H5' },
|
||||
{ value: 484, name: 'PC' },
|
||||
{ value: 300, name: 'APP' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
sourceOption.value = toPlainObject(option)
|
||||
}
|
||||
|
||||
function initTrendChart() {
|
||||
const dates = [
|
||||
'01-04', '01-05', '01-06', '01-07', '01-08', '01-09', '01-10', '01-11', '01-12', '01-13',
|
||||
'01-14', '01-15', '01-16', '01-17', '01-18', '01-19', '01-20', '01-21', '01-22', '01-23',
|
||||
'01-24', '01-25', '01-26', '01-27', '01-28', '01-29', '01-30', '01-31', '02-01', '02-02'
|
||||
]
|
||||
|
||||
const orderAmount = [
|
||||
8000, 2000, 9000, 1000, 138000, 6000, 1000, 500, 800, 200,
|
||||
5000, 35000, 7000, 1000, 12000, 1000, 100000, 16000, 18000, 1000,
|
||||
1200, 1500, 68000, 1000, 10000, 2000, 4000, 8000, 2000, 1000
|
||||
]
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
lineStyle: { color: '#ccc', width: 1 }
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['订单金额', '订单量', '退款金额', '退款订单量'],
|
||||
top: 10,
|
||||
right: 'center',
|
||||
icon: 'circle',
|
||||
textStyle: { color: '#8c8c8c' }
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '10%',
|
||||
top: '60px',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: dates,
|
||||
axisLine: { lineStyle: { color: '#e8e8e8' } },
|
||||
axisLabel: { color: '#8c8c8c', rotate: 45 }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: { lineStyle: { type: 'dashed', color: '#f0f0f0' } },
|
||||
axisLabel: { color: '#8c8c8c' }
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '订单金额',
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
itemStyle: { color: '#5b8ff9' },
|
||||
lineStyle: { width: 2 },
|
||||
data: orderAmount
|
||||
},
|
||||
{
|
||||
name: '订单量',
|
||||
type: 'line',
|
||||
itemStyle: { color: '#5ad8a6' },
|
||||
data: dates.map((_ : string) : number => Math.floor(Math.random() * 20))
|
||||
},
|
||||
{
|
||||
name: '退款金额',
|
||||
type: 'line',
|
||||
itemStyle: { color: '#ff9d4d' },
|
||||
data: dates.map((_ : string) : number => 0)
|
||||
},
|
||||
{
|
||||
name: '退款订单量',
|
||||
type: 'line',
|
||||
itemStyle: { color: '#9270ca' },
|
||||
data: dates.map((_ : string) : number => 0)
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
trendOption.value = toPlainObject(option)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.order-statistic-page {
|
||||
padding: 16px;
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.filter-card {
|
||||
background-color: #fff;
|
||||
padding: 24px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.date-picker-mock {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
padding: 4px 12px;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.calendar-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.date-range {
|
||||
font-size: 14px;
|
||||
color: #595959;
|
||||
}
|
||||
|
||||
.stat-cards-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.trend-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.bottom-charts-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.bottom-chart-card {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.card-header-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.style-toggle {
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
.toggle-text {
|
||||
font-size: 12px;
|
||||
color: #595959;
|
||||
}
|
||||
|
||||
.pie-chart-container {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
.source-chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.type-table-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #e6f7ff;
|
||||
padding: 12px 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
.th-text {
|
||||
font-size: 14px;
|
||||
color: #595959;
|
||||
}
|
||||
|
||||
/* 统一列宽与对齐方式 */
|
||||
.col-id { width: 80px; text-align: center; }
|
||||
.col-name { flex: 1; text-align: left; padding-left: 40px; }
|
||||
.col-money { width: 180px; text-align: left; }
|
||||
.col-rate { width: 240px; text-align: left; }
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.td-text {
|
||||
font-size: 14px;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.rate-box {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start; /* 改为左对齐，与表头对齐样式一致 */
|
||||
}
|
||||
|
||||
.progress-wrap {
|
||||
width: 120px;
|
||||
height: 6px;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 3px;
|
||||
margin-right: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.rate-val {
|
||||
font-size: 13px;
|
||||
color: #595959;
|
||||
width: 50px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.icon-wrap {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
border-radius: 27px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
/* 颜色背景 - 1:1 匹配截图 */
|
||||
.blue-bg {
|
||||
background-color: #e6f7ff;
|
||||
border: 2px solid #bae7ff;
|
||||
}
|
||||
.orange-bg {
|
||||
background-color: #fff7e6;
|
||||
border: 2px solid #ffe58f;
|
||||
}
|
||||
.green-bg {
|
||||
background-color: #f6ffed;
|
||||
border: 2px solid #b7eb8f;
|
||||
}
|
||||
.pink-bg {
|
||||
background-color: #fff0f6;
|
||||
border: 2px solid #ffadd2;
|
||||
}
|
||||
|
||||
.stat-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stat-desc {
|
||||
font-size: 13px;
|
||||
color: #8c8c8c;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
/* 自定义图标 1:1 形状模拟 - 内部使用伪元素或形状模拟截图形状 */
|
||||
.custom-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-order {
|
||||
background-color: #1890ff;
|
||||
border-radius: 4px;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 6px; left: 4px; right: 4px; height: 2px;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-money {
|
||||
background-color: #faad14;
|
||||
border-radius: 50%;
|
||||
&::after {
|
||||
content: '￥';
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
display: flex; justify-content: center; align-items: center; height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-refund {
|
||||
background-color: #52c41a;
|
||||
border-radius: 4px;
|
||||
&::before {
|
||||
content: '↺';
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
display: flex; justify-content: center; align-items: center; height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-refund-money {
|
||||
background-color: #eb2f96;
|
||||
border-radius: 50%;
|
||||
&::after {
|
||||
content: '−';
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
display: flex; justify-content: center; align-items: center; height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/uni.scss';
|
||||
.page { padding: $space-lg; }
|
||||
|
||||
@@ -1,18 +1,15 @@
|
||||
<template>
|
||||
<AdminLayout :currentPage="currentPage">
|
||||
<view class="page">
|
||||
<view class="header">
|
||||
<text class="title">{{ title }}</text>
|
||||
<text class="sub-title">核销记录，查看优惠券和卡券核销情况</text>
|
||||
</view>
|
||||
<view class="page">
|
||||
<view class="header">
|
||||
<text class="title">{{ title }}</text>
|
||||
<text class="sub-title">核销记录，查看优惠券和卡券核销情况</text>
|
||||
</view>
|
||||
</AdminLayout>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
|
||||
const currentPage = ref<string>('order-verify')
|
||||
|
||||
const title = ref<string>('核销记录')
|
||||
</script>
|
||||
|
||||
|
||||
341
pages/mall/admin/user/MemberConfig.uvue
Normal file
341
pages/mall/admin/user/MemberConfig.uvue
Normal file
@@ -0,0 +1,341 @@
|
||||
<template>
|
||||
<view class="user-config-page">
|
||||
<view class="config-card">
|
||||
<!-- 顶部 Tab 切换 -->
|
||||
<view class="config-tabs">
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === 0 }"
|
||||
@click="activeTab = 0"
|
||||
>
|
||||
<text>用户等级配置</text>
|
||||
</view>
|
||||
<view
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === 1 }"
|
||||
@click="activeTab = 1"
|
||||
>
|
||||
<text>新用户设置</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="config-content">
|
||||
<!-- 用户等级配置表单 -->
|
||||
<view v-if="activeTab === 0" class="config-form">
|
||||
<view class="form-item">
|
||||
<view class="item-label">
|
||||
<text class="label-text">用户等级启用：</text>
|
||||
</view>
|
||||
<view class="item-content">
|
||||
<radio-group class="radio-group" @change="onLevelEnabledChange">
|
||||
<label class="radio-label">
|
||||
<radio value="1" :checked="levelConfig.enabled === '1'" color="#2f54eb" />
|
||||
<text class="radio-text">开启</text>
|
||||
</label>
|
||||
<label class="radio-label">
|
||||
<radio value="0" :checked="levelConfig.enabled === '0'" color="#2f54eb" />
|
||||
<text class="radio-text">关闭</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
<text class="item-desc">商城用户等级功能开启关闭</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="item-label">
|
||||
<text class="label-text">订单赠送经验：</text>
|
||||
</view>
|
||||
<view class="item-content">
|
||||
<input class="config-input" v-model="levelConfig.orderExp" type="number" />
|
||||
<text class="item-desc">下单赠送用户经验比例 (实际支付1元赠送多少经验)</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="item-label">
|
||||
<text class="label-text">邀新赠送经验：</text>
|
||||
</view>
|
||||
<view class="item-content">
|
||||
<input class="config-input" v-model="levelConfig.inviteExp" type="number" />
|
||||
<text class="item-desc">邀请一个新用户赠送用户经验值</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-actions">
|
||||
<button class="submit-btn" type="primary" @click="onSubmit">提交</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 新用户设置表单 -->
|
||||
<view v-else class="config-form">
|
||||
<view class="form-item">
|
||||
<view class="item-label">
|
||||
<text class="label-text">用户默认头像：</text>
|
||||
</view>
|
||||
<view class="item-content">
|
||||
<view class="avatar-upload">
|
||||
<image class="avatar-preview" src="https://img.crmeb.com/crmeb_demo/75211.png" mode="aspectFill" />
|
||||
<view class="upload-mask">
|
||||
<text class="upload-icon">+</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="item-desc">内用户默认头像，后台添加用户以及用户登录的默认头像显示，尺寸(80*80)</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="item-label">
|
||||
<text class="label-text">强制手机号登录：</text>
|
||||
</view>
|
||||
<view class="item-content">
|
||||
<radio-group class="radio-group" @change="onForcePhoneChange">
|
||||
<label class="radio-label">
|
||||
<radio value="1" :checked="newUserConfig.forcePhone === '1'" color="#2f54eb" />
|
||||
<text class="radio-text">强制</text>
|
||||
</label>
|
||||
<label class="radio-label">
|
||||
<radio value="0" :checked="newUserConfig.forcePhone === '0'" color="#2f54eb" />
|
||||
<text class="radio-text">不强制</text>
|
||||
</label>
|
||||
</radio-group>
|
||||
<text class="item-desc">用户在授权之后强制绑定手机号，可以实现用户多端统一</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="item-label">
|
||||
<text class="label-text">赠送余额(元)：</text>
|
||||
</view>
|
||||
<view class="item-content">
|
||||
<input class="config-input" v-model="newUserConfig.giftBalance" type="number" />
|
||||
<text class="item-desc">新用户奖励金额，必须大于等于0，0为不赠送</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<view class="item-label">
|
||||
<text class="label-text">赠送积分：</text>
|
||||
</view>
|
||||
<view class="item-content">
|
||||
<input class="config-input" v-model="newUserConfig.giftIntegral" type="number" />
|
||||
<text class="item-desc">新用户奖励积分，必须大于等于0，0为不赠送</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="form-actions">
|
||||
<button class="submit-btn" type="primary" @click="onSubmit">提交</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const activeTab = ref(0)
|
||||
|
||||
const levelConfig = ref({
|
||||
enabled: '1',
|
||||
orderExp: '1',
|
||||
inviteExp: '100'
|
||||
})
|
||||
|
||||
const newUserConfig = ref({
|
||||
forcePhone: '1',
|
||||
giftBalance: '88888',
|
||||
giftIntegral: '88888'
|
||||
})
|
||||
|
||||
function onLevelEnabledChange(e: any) {
|
||||
levelConfig.value.enabled = e.detail.value
|
||||
}
|
||||
|
||||
function onForcePhoneChange(e: any) {
|
||||
newUserConfig.value.forcePhone = e.detail.value
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
uni.showLoading({ title: '提交中...' })
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '修改成功',
|
||||
icon: 'success'
|
||||
})
|
||||
}, 800)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.user-config-page {
|
||||
padding: 16px;
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.config-card {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.config-tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
padding: 16px 20px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
text {
|
||||
font-size: 15px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
&.active {
|
||||
text {
|
||||
color: #1890ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.config-content {
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.config-form {
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 30px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.item-label {
|
||||
width: 160px;
|
||||
padding-top: 6px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 32px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.radio-label {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.radio-text {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.config-input {
|
||||
width: 400px;
|
||||
height: 36px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.item-desc {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
.avatar-upload {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
margin-bottom: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.avatar-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.upload-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.2);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
color: #fff;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
margin-top: 48px;
|
||||
padding-left: 184px;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 72px;
|
||||
height: 32px;
|
||||
background-color: #2f54eb;
|
||||
border-color: #2f54eb;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
306
pages/mall/admin/user/Statistic.uvue
Normal file
306
pages/mall/admin/user/Statistic.uvue
Normal file
@@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<view class="statistic-page">
|
||||
<!-- 筛选栏 -->
|
||||
<view class="filter-card">
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">用户渠道：</text>
|
||||
<view class="select-box">
|
||||
<text class="select-text">全部</text>
|
||||
<text class="select-arrow">▼</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="filter-item">
|
||||
<text class="filter-label">选择时间：</text>
|
||||
<view class="date-picker-box">
|
||||
<text class="date-icon">📅</text>
|
||||
<text class="date-text">2026/01/04 - 2026/02/02</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="filter-btns">
|
||||
<button class="btn primary" @click="onSearch">查询</button>
|
||||
<button class="btn" @click="onExport">导出</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 用户概况卡片区 -->
|
||||
<view class="section-card">
|
||||
<view class="section-header">
|
||||
<text class="section-title">用户概况</text>
|
||||
<text class="info-icon">ⓘ</text>
|
||||
</view>
|
||||
|
||||
<view class="kpi-row">
|
||||
<view class="kpi-card" v-for="item in kpiData" :key="item.title">
|
||||
<view class="kpi-icon-box" :style="{ backgroundColor: item.bg }">
|
||||
<text class="kpi-icon">{{ item.icon }}</text>
|
||||
</view>
|
||||
<view class="kpi-content">
|
||||
<text class="kpi-label">{{ item.title }}</text>
|
||||
<text class="kpi-value">{{ item.value }}</text>
|
||||
<view class="kpi-meta">
|
||||
<text class="meta-label">环比增长：</text>
|
||||
<text class="meta-value" :class="item.trend">{{ item.percent }} {{ item.trend === 'up' ? '▲' : '▼' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 图表区 -->
|
||||
<view class="chart-container">
|
||||
<view class="chart-header">
|
||||
<view class="header-left"></view>
|
||||
<view class="header-right">
|
||||
<text class="download-icon">📥</text>
|
||||
</view>
|
||||
</view>
|
||||
<AnalyticsMultiLineChart
|
||||
:xLabels="chartData.x"
|
||||
:series="chartData.series"
|
||||
:height="450"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 地域分布与性别比例 -->
|
||||
<view class="analysis-row">
|
||||
<view class="map-col">
|
||||
<AnalyticsUserMapTable />
|
||||
</view>
|
||||
<view class="gender-col">
|
||||
<AnalyticsUserGenderSection />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import AnalyticsMultiLineChart from '@/components/analytics/AnalyticsMultiLineChart.uvue'
|
||||
import AnalyticsUserMapTable from '@/components/analytics/AnalyticsUserMapTable.uvue'
|
||||
import AnalyticsUserGenderSection from '@/components/analytics/AnalyticsUserGenderSection.uvue'
|
||||
|
||||
const kpiData = [
|
||||
{ title: '累计用户', value: '80834', percent: '0.84%', trend: 'up', icon: '👤', bg: '#f3e8ff' },
|
||||
{ title: '访客数', value: '1138', percent: '1.04%', trend: 'down', icon: '👤', bg: '#e0f2fe' },
|
||||
{ title: '浏览量', value: '9519', percent: '2.34%', trend: 'down', icon: '👁️', bg: '#dcfce7' },
|
||||
{ title: '新增用户数', value: '680', percent: '4.36%', trend: 'down', icon: '👤', bg: '#ffedd5' },
|
||||
{ title: '成交用户数', value: '132', percent: '11.86%', trend: 'up', icon: '👤', bg: '#f3e8ff' },
|
||||
{ title: '付费会员数', value: '79', percent: '7.05%', trend: 'down', icon: '💎', bg: '#f3e8ff' }
|
||||
]
|
||||
|
||||
const chartData = {
|
||||
x: ['01-04', '01-05', '01-06', '01-07', '01-08', '01-09', '01-10', '01-11', '01-12', '01-13', '01-14', '01-15', '01-16', '01-17', '01-18', '01-19', '01-20', '01-21', '01-22', '01-23', '01-24', '01-25', '01-26', '01-27', '01-28', '01-29', '01-30', '01-31', '02-01', '02-02'],
|
||||
series: [
|
||||
{ name: '新增用户数', color: '#1890ff', data: [40, 30, 25, 30, 22, 10, 20, 32, 28, 15, 8, 12, 18, 22, 15, 12, 25, 30, 28, 25, 35, 20, 18, 22, 20, 15, 10, 8, 15, 38] },
|
||||
{ name: '访客数', color: '#52c41a', data: [70, 75, 65, 55, 65, 50, 45, 35, 50, 68, 72, 65, 50, 48, 55, 65, 75, 62, 58, 85, 70, 55, 48, 58, 65, 72, 68, 60, 45, 50] },
|
||||
{ name: '浏览量', color: '#fa8c16', data: [520, 500, 420, 280, 580, 180, 220, 100, 180, 450, 500, 400, 320, 340, 150, 280, 450, 320, 440, 460, 320, 260, 320, 280, 380, 400, 320, 330, 250, 300] },
|
||||
{ name: '成交用户数', color: '#722ed1', data: [15, 12, 10, 8, 18, 5, 8, 4, 6, 12, 15, 10, 8, 9, 4, 10, 12, 8, 10, 12, 8, 6, 10, 8, 12, 14, 10, 8, 5, 8] },
|
||||
{ name: '新增付费用户数', color: '#f5222d', data: [5, 4, 3, 2, 6, 1, 2, 1, 2, 4, 5, 3, 2, 3, 1, 3, 4, 2, 3, 4, 2, 2, 3, 2, 4, 5, 3, 2, 1, 3] }
|
||||
]
|
||||
}
|
||||
|
||||
function onSearch() {
|
||||
uni.showToast({ title: '搜索中...' })
|
||||
}
|
||||
|
||||
function onExport() {
|
||||
uni.showToast({ title: '导出中...' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.statistic-page {
|
||||
padding: 16px;
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.filter-card {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 32px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.filter-label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.select-box {
|
||||
width: 180px;
|
||||
height: 32px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.select-text { font-size: 14px; color: #333; }
|
||||
.select-arrow { font-size: 10px; color: #bfbfbf; }
|
||||
|
||||
.date-picker-box {
|
||||
min-width: 240px;
|
||||
height: 32px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.date-icon { font-size: 14px; }
|
||||
.date-text { font-size: 14px; color: #333; }
|
||||
|
||||
.filter-btns {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #d9d9d9;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background-color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.section-card {
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
font-size: 14px;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
.kpi-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.kpi-card {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.kpi-icon-box {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.kpi-icon { font-size: 20px; }
|
||||
|
||||
.kpi-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.kpi-label { font-size: 14px; color: #8c8c8c; }
|
||||
.kpi-value { font-size: 24px; font-weight: 500; color: #262626; }
|
||||
|
||||
.kpi-meta {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.meta-label { color: #8c8c8c; }
|
||||
.meta-value.up { color: #ff4d4f; }
|
||||
.meta-value.down { color: #52c41a; }
|
||||
|
||||
.chart-container {
|
||||
border-top: 1px solid #f0f0f0;
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.download-icon {
|
||||
font-size: 18px;
|
||||
color: #8c8c8c;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.analysis-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 16px;
|
||||
margin-top: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.map-col {
|
||||
flex: 7;
|
||||
}
|
||||
|
||||
.gender-col {
|
||||
flex: 3;
|
||||
}
|
||||
</style>
|
||||
@@ -1,15 +1,123 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<view class="page-header">
|
||||
<text class="page-title">用户管理</text>
|
||||
<text class="page-subtitle">Component: UserList</text>
|
||||
<view class="user-list-page">
|
||||
<!-- 筛选面板 -->
|
||||
<view class="filter-card">
|
||||
<view class="filter-row">
|
||||
<view class="filter-item">
|
||||
<text class="label">用户搜索：</text>
|
||||
<view class="input-group">
|
||||
<view class="compact-select">
|
||||
<text>请选择</text>
|
||||
<text class="arrow">▼</text>
|
||||
</view>
|
||||
<input class="filter-input" placeholder="请输入用户" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="filter-item">
|
||||
<text class="label">用户等级：</text>
|
||||
<view class="filter-select">
|
||||
<text class="select-placeholder">请选择用户等级</text>
|
||||
<text class="arrow">▼</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="filter-item">
|
||||
<text class="label">用户分组：</text>
|
||||
<view class="filter-select">
|
||||
<text class="select-placeholder">请选择用户分组</text>
|
||||
<text class="arrow">▼</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="filter-btns">
|
||||
<button class="btn primary" @click="onSearch">搜索</button>
|
||||
<button class="btn" @click="onReset">重置</button>
|
||||
<text class="expand-btn">展开 ∨</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="page-content">
|
||||
<view class="placeholder-card">
|
||||
<text class="placeholder-title">页面占位</text>
|
||||
<text class="placeholder-desc">该功能模块正在开发中</text>
|
||||
<text class="placeholder-info">当前采用 CRMEB 路由体系 1:1 映射</text>
|
||||
|
||||
<!-- 内容卡片 -->
|
||||
<view class="content-card">
|
||||
<!-- 平台切换 Tabs -->
|
||||
<view class="tabs-row">
|
||||
<view
|
||||
v-for="(tab, index) in tabs"
|
||||
:key="index"
|
||||
class="tab-item"
|
||||
:class="{ active: activeTab === index }"
|
||||
@click="activeTab = index"
|
||||
>
|
||||
<text>{{ tab }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 操作按钮行 -->
|
||||
<view class="action-bar">
|
||||
<button class="btn primary small" @click="onAddUser">添加用户</button>
|
||||
<button class="btn ghost small">发送优惠券</button>
|
||||
<button class="btn ghost small">发送图文消息</button>
|
||||
<button class="btn ghost small">批量设置分组</button>
|
||||
<button class="btn ghost small">批量设置标签</button>
|
||||
<button class="btn ghost small">导出</button>
|
||||
</view>
|
||||
|
||||
<!-- 用户列表表格 -->
|
||||
<view class="table-container">
|
||||
<!-- 表头 -->
|
||||
<view class="table-header">
|
||||
<view class="col col-check"><checkbox :checked="isAllChecked" /></view>
|
||||
<view class="col col-expand"></view>
|
||||
<view class="col col-id"><text>用户ID</text></view>
|
||||
<view class="col col-avatar"><text>头像</text></view>
|
||||
<view class="col col-name"><text>姓名</text></view>
|
||||
<view class="col col-member"><text>付费会员</text></view>
|
||||
<view class="col col-level"><text>用户等级</text></view>
|
||||
<view class="col col-group"><text>分组</text></view>
|
||||
<view class="col col-spread"><text>分销等级</text></view>
|
||||
<view class="col col-phone"><text>手机号</text></view>
|
||||
<view class="col col-type"><text>用户类型</text></view>
|
||||
<view class="col col-balance sortable">
|
||||
<text>余额</text>
|
||||
<text class="sort-icon">↕</text>
|
||||
</view>
|
||||
<view class="col col-ops"><text>操作</text></view>
|
||||
</view>
|
||||
|
||||
<!-- 表格内容 -->
|
||||
<view class="table-body">
|
||||
<view v-for="user in userList" :key="user.id" class="table-row">
|
||||
<view class="col col-check"><checkbox :checked="user.checked" /></view>
|
||||
<view class="col col-expand"><text class="expand-arrow">›</text></view>
|
||||
<view class="col col-id"><text>{{ user.id }}</text></view>
|
||||
<view class="col col-avatar">
|
||||
<image class="avatar-img" :src="user.avatar" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="col col-name">
|
||||
<text class="name-text">{{ user.nickname }}</text>
|
||||
</view>
|
||||
<view class="col col-member">
|
||||
<text :class="user.isMember === '是' ? 'status-yes' : 'status-no'">{{ user.isMember }}</text>
|
||||
</view>
|
||||
<view class="col col-level"><text>{{ user.level }}</text></view>
|
||||
<view class="col col-group"><text>{{ user.group }}</text></view>
|
||||
<view class="col col-spread"><text>{{ user.spreadLevel }}</text></view>
|
||||
<view class="col col-phone"><text>{{ user.phone }}</text></view>
|
||||
<view class="col col-type"><text>{{ user.userType }}</text></view>
|
||||
<view class="col col-balance"><text>{{ user.balance }}</text></view>
|
||||
<view class="col col-ops">
|
||||
<text class="op-link" @click="onDetail(user)">详情</text>
|
||||
<view class="op-divider"></view>
|
||||
<text class="op-link more">更多 ⌵</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分页区域 (模拟) -->
|
||||
<view class="pagination">
|
||||
<text class="page-info">共 80834 条数据</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -18,64 +126,310 @@
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
// TODO: 实现 用户管理 的具体功能
|
||||
const loading = ref<boolean>(false)
|
||||
const activeTab = ref(0)
|
||||
const tabs = ['全部', '微信公众号', '微信小程序', 'H5', 'PC', 'APP']
|
||||
const isAllChecked = ref(false)
|
||||
|
||||
const userList = ref([
|
||||
{ id: '77414', avatar: 'https://img.crmeb.com/crmeb_demo/77414.png', nickname: '199****0268', isMember: '否', level: '无', group: '无', spreadLevel: '', phone: '199****0268', userType: '公众号', balance: '88888.00', checked: false },
|
||||
{ id: '75311', avatar: 'https://img.crmeb.com/crmeb_demo/75311.png', nickname: 'wljbhg', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100002.00', checked: false },
|
||||
{ id: '75305', avatar: 'https://img.crmeb.com/crmeb_demo/75305.png', nickname: '相见欢', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
|
||||
{ id: '75296', avatar: 'https://img.crmeb.com/crmeb_demo/75296.png', nickname: '..', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
|
||||
{ id: '75293', avatar: 'https://img.crmeb.com/crmeb_demo/75293.png', nickname: '钟(钏)华', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
|
||||
{ id: '75289', avatar: 'https://img.crmeb.com/crmeb_demo/75289.png', nickname: '小二上酒', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
|
||||
{ id: '75257', avatar: 'https://img.crmeb.com/crmeb_demo/75257.png', nickname: '5+7', isMember: '是', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
|
||||
{ id: '75226', avatar: 'https://img.crmeb.com/crmeb_demo/75226.png', nickname: '慢步前行', isMember: '是', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
|
||||
{ id: '75211', avatar: 'https://img.crmeb.com/crmeb_demo/75211.png', nickname: '难得糊涂', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false }
|
||||
])
|
||||
|
||||
function onSearch() {
|
||||
uni.showToast({ title: '搜索中...', icon: 'none' })
|
||||
}
|
||||
|
||||
function onReset() {
|
||||
uni.showToast({ title: '已重置', icon: 'none' })
|
||||
}
|
||||
|
||||
function onAddUser() {
|
||||
uni.showToast({ title: '添加用户', icon: 'none' })
|
||||
}
|
||||
|
||||
function onDetail(user: any) {
|
||||
uni.showToast({ title: '查看用户: ' + user.id, icon: 'none' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
padding: 20px;
|
||||
.user-list-page {
|
||||
padding: 16px;
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
/* 筛选卡片 */
|
||||
.filter-card {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.placeholder-card {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
.filter-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
display: block;
|
||||
.filter-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
width: 70px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
height: 32px;
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.compact-select {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
border-right: 1px solid #d9d9d9;
|
||||
background: #fafafa;
|
||||
text { font-size: 14px; color: #666; }
|
||||
.arrow { font-size: 10px; margin-left: 4px; color: #bfbfbf; }
|
||||
}
|
||||
|
||||
.filter-input {
|
||||
flex: 1;
|
||||
height: 30px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 2px;
|
||||
height: 32px;
|
||||
width: 220px;
|
||||
padding: 0 12px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.select-placeholder { font-size: 14px; color: #bfbfbf; }
|
||||
.arrow { font-size: 10px; color: #bfbfbf; }
|
||||
|
||||
.filter-btns {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #d9d9d9;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: #2f54eb;
|
||||
border-color: #2f54eb;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn.ghost {
|
||||
color: #2f54eb;
|
||||
border-color: #2f54eb;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.btn.small {
|
||||
height: 28px;
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
font-size: 14px;
|
||||
color: #2f54eb;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 内容卡片 */
|
||||
.content-card {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.tabs-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0 24px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
padding: 16px 20px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
text { font-size: 15px; color: #666; }
|
||||
|
||||
&.active {
|
||||
text { color: #2f54eb; font-weight: 500; }
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: #2f54eb;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 操作栏 */
|
||||
.action-bar {
|
||||
padding: 16px 24px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 表格 */
|
||||
.table-container {
|
||||
padding: 0 24px 24px;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background: #f8faff;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding: 16px 0;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
background: #fafafa;
|
||||
}
|
||||
}
|
||||
|
||||
.col {
|
||||
padding: 0 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.col-check { width: 40px; justify-content: center; }
|
||||
.col-expand { width: 30px; justify-content: center; }
|
||||
.col-id { width: 80px; }
|
||||
.col-avatar { width: 80px; justify-content: center; }
|
||||
.col-name { width: 140px; }
|
||||
.col-member { width: 90px; justify-content: center; }
|
||||
.col-level { width: 90px; justify-content: center; }
|
||||
.col-group { width: 110px; justify-content: center; }
|
||||
.col-spread { width: 110px; justify-content: center; }
|
||||
.col-phone { width: 130px; }
|
||||
.col-type { width: 90px; }
|
||||
.col-balance { width: 110px; }
|
||||
.col-ops { flex: 1; min-width: 120px; justify-content: flex-end; padding-right: 16px; }
|
||||
|
||||
.table-header .col {
|
||||
color: #5c5c5c;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.sort-icon {
|
||||
font-size: 12px;
|
||||
margin-left: 4px;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
.expand-arrow {
|
||||
color: #bfbfbf;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.placeholder-desc {
|
||||
display: block;
|
||||
.avatar-img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.name-text {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.status-yes { color: #52c41a; }
|
||||
.status-no { color: #ff4d4f; }
|
||||
|
||||
.op-link {
|
||||
color: #2f54eb;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
|
||||
&.more {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.op-divider {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background: #e8e8e8;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.page-info {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.placeholder-info {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #1890ff;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user