继续完善页面
This commit is contained in:
@@ -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