huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页细节调整

Browse Source
This commit is contained in:
huangzhenbao
2026-02-06 16:18:04 +08:00
parent d00f0b7412
commit 57846534bc
86 changed files with 2751 additions and 3074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
pages/mall/admin/user/configuration/index.uvue
View File

@@ -1,76 +1,76 @@
<template>
<template>
<view class="user-config-page">
<view class="config-card">
<!-- 椤堕儴 Tab 鍒囨崲 -->
<!-- 顶部 Tab 切换 -->
<view class="config-tabs">
<view
class="tab-item"
:class="{ active: activeTab === 0 }"
@click="activeTab = 0"
>
<text>鐢ㄦ埛绛夌骇閰嶇疆</text>
<text>用户等级配置</text>
</view>
<view
class="tab-item"
:class="{ active: activeTab === 1 }"
@click="activeTab = 1"
>
<text>鏂扮敤鎴疯缃?/text>
<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>
<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>
<text class="radio-text">开启</text>
</label>
<label class="radio-label">
<radio value="0" :checked="levelConfig.enabled === '0'" color="#2f54eb" />
<text class="radio-text">鍏抽棴</text>
<text class="radio-text">关闭</text>
</label>
</radio-group>
<text class="item-desc">鍟嗗煄鐢ㄦ埛绛夌骇鍔熻兘寮€鍚叧闂?/text>
<text class="item-desc">商城用户等级功能开启关闭</text>
</view>
</view>
<view class="form-item">
<view class="item-label">
<text class="label-text">璁㈠崟璧犻€佺粡楠岋細</text>
<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>
<text class="item-desc">下单赠送用户经验比例 (实际支付1元赠送多少经验)</text>
</view>
</view>
<view class="form-item">
<view class="item-label">
<text class="label-text">閭€鏂拌禒閫佺粡楠岋細</text>
<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>
<text class="item-desc">邀请一个新用户赠送用户经验值</text>
</view>
</view>
<view class="form-actions">
<button class="submit-btn" type="primary" @click="onSubmit">鎻愪氦</button>
<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>
<text class="label-text">用户默认头像：</text>
</view>
<view class="item-content">
<view class="avatar-upload">
@@ -79,51 +79,51 @@
<text class="upload-icon">+</text>
</view>
</view>
<text class="item-desc">鍐呯敤鎴烽粯璁ゅご鍍忥紝鍚庡彴娣诲姞鐢ㄦ埛浠ュ強鐢ㄦ埛鐧诲綍鐨勯粯璁ゅご鍍忔樉绀猴紝灏哄(80*80)</text>
<text class="item-desc">内用户默认头像，后台添加用户以及用户登录的默认头像显示，尺寸(80*80)</text>
</view>
</view>
<view class="form-item">
<view class="item-label">
<text class="label-text">寮哄埗鎵嬫満鍙风櫥褰曪細</text>
<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>
<text class="radio-text">强制</text>
</label>
<label class="radio-label">
<radio value="0" :checked="newUserConfig.forcePhone === '0'" color="#2f54eb" />
<text class="radio-text">涓嶅己鍒?/text>
<text class="radio-text">不强制</text>
</label>
</radio-group>
<text class="item-desc">鐢ㄦ埛鍦ㄦ巿鏉冧箣鍚庡己鍒剁粦瀹氭墜鏈哄彿锛屽彲浠ュ疄鐜扮敤鎴峰绔粺涓€</text>
<text class="item-desc">用户在授权之后强制绑定手机号，可以实现用户多端统一</text>
</view>
</view>
<view class="form-item">
<view class="item-label">
<text class="label-text">璧犻€佷綑棰?鍏?锛?/text>
<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锛?涓轰笉璧犻€?/text>
<text class="item-desc">新用户奖励金额，必须大于等于0，0为不赠送</text>
</view>
</view>
<view class="form-item">
<view class="item-label">
<text class="label-text">璧犻€佺Н鍒嗭細</text>
<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锛?涓轰笉璧犻€?/text>
<text class="item-desc">新用户奖励积分，必须大于等于0，0为不赠送</text>
</view>
</view>
<view class="form-actions">
<button class="submit-btn" type="primary" @click="onSubmit">鎻愪氦</button>
<button class="submit-btn" type="primary" @click="onSubmit">提交</button>
</view>
</view>
</view>
@@ -157,11 +157,11 @@ function onForcePhoneChange(e: any) {
}
function onSubmit() {
uni.showLoading({ title: '鎻愪氦涓?..' })
uni.showLoading({ title: '提交中...' })
setTimeout(() => {
uni.hideLoading()
uni.showToast({
title: '淇敼鎴愬姛',
title: '修改成功',
icon: 'success'
})
}, 800)
@@ -170,9 +170,9 @@ function onSubmit() {
<style scoped lang="scss">
.user-config-page {
/* padding removed */
padding: 16px;
background-color: #f0f2f5;
min-height: 100vh;
}
.config-card {
@@ -339,4 +339,3 @@ function onSubmit() {
margin: 0;
}
</style>

18
pages/mall/admin/user/grade/card.uvue
View File

@@ -1,15 +1,15 @@
<template>
<template>
<view class="page-container">
<view class="page-header">
<text class="page-title">鍗″瘑浼氬憳</text>
<text class="page-title">卡密会员</text>
<text class="page-subtitle">Component: UserGradeCard</text>
</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>
<text class="placeholder-title">页面占位</text>
<text class="placeholder-desc">该功能模块正在开发中</text>
<text class="placeholder-info">当前采用 CRMEB 路由体系 1:1 映射</text>
</view>
</view>
</view>
@@ -18,14 +18,14 @@
<script setup lang="uts">
import { ref } from 'vue'
// TODO: 瀹炵幇 鍗″瘑浼氬憳 鐨勫叿浣撳姛鑳?
// TODO: 实现 卡密会员 的具体功能
const loading = ref<boolean>(false)
</script>
<style scoped lang="scss">
.page-container {
/* padding removed */
padding: 20px;
min-height: 100vh;
background: #f5f5f5;
}
@@ -79,5 +79,3 @@ const loading = ref<boolean>(false)
color: #1890ff;
}
</style>

18
pages/mall/admin/user/grade/record.uvue
View File

@@ -1,15 +1,15 @@
<template>
<template>
<view class="page-container">
<view class="page-header">
<text class="page-title">浼氬憳璁板綍</text>
<text class="page-title">会员记录</text>
<text class="page-subtitle">Component: UserGradeRecord</text>
</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>
<text class="placeholder-title">页面占位</text>
<text class="placeholder-desc">该功能模块正在开发中</text>
<text class="placeholder-info">当前采用 CRMEB 路由体系 1:1 映射</text>
</view>
</view>
</view>
@@ -18,14 +18,14 @@
<script setup lang="uts">
import { ref } from 'vue'
// TODO: 瀹炵幇 浼氬憳璁板綍 鐨勫叿浣撳姛鑳?
// TODO: 实现 会员记录 的具体功能
const loading = ref<boolean>(false)
</script>
<style scoped lang="scss">
.page-container {
/* padding removed */
padding: 20px;
min-height: 100vh;
background: #f5f5f5;
}
@@ -79,5 +79,3 @@ const loading = ref<boolean>(false)
color: #1890ff;
}
</style>

18
pages/mall/admin/user/grade/right.uvue
View File

@@ -1,15 +1,15 @@
<template>
<template>
<view class="page-container">
<view class="page-header">
<text class="page-title">浼氬憳鏉冪泭</text>
<text class="page-title">会员权益</text>
<text class="page-subtitle">Component: UserGradeRight</text>
</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>
<text class="placeholder-title">页面占位</text>
<text class="placeholder-desc">该功能模块正在开发中</text>
<text class="placeholder-info">当前采用 CRMEB 路由体系 1:1 映射</text>
</view>
</view>
</view>
@@ -18,14 +18,14 @@
<script setup lang="uts">
import { ref } from 'vue'
// TODO: 瀹炵幇 浼氬憳鏉冪泭 鐨勫叿浣撳姛鑳?
// TODO: 实现 会员权益 的具体功能
const loading = ref<boolean>(false)
</script>
<style scoped lang="scss">
.page-container {
/* padding removed */
padding: 20px;
min-height: 100vh;
background: #f5f5f5;
}
@@ -79,5 +79,3 @@ const loading = ref<boolean>(false)
color: #1890ff;
}
</style>

18
pages/mall/admin/user/grade/type.uvue
View File

@@ -1,15 +1,15 @@
<template>
<template>
<view class="page-container">
<view class="page-header">
<text class="page-title">浼氬憳绫诲瀷</text>
<text class="page-title">会员类型</text>
<text class="page-subtitle">Component: UserGradeType</text>
</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>
<text class="placeholder-title">页面占位</text>
<text class="placeholder-desc">该功能模块正在开发中</text>
<text class="placeholder-info">当前采用 CRMEB 路由体系 1:1 映射</text>
</view>
</view>
</view>
@@ -18,14 +18,14 @@
<script setup lang="uts">
import { ref } from 'vue'
// TODO: 瀹炵幇 浼氬憳绫诲瀷 鐨勫叿浣撳姛鑳?
// TODO: 实现 会员类型 的具体功能
const loading = ref<boolean>(false)
</script>
<style scoped lang="scss">
.page-container {
/* padding removed */
padding: 20px;
min-height: 100vh;
background: #f5f5f5;
}
@@ -79,5 +79,3 @@ const loading = ref<boolean>(false)
color: #1890ff;
}
</style>

105
pages/mall/admin/user/grouping/index.uvue
View File

@@ -1,78 +1,78 @@
<template>
<template>
<view class="user-group-page">
<view class="content-card">
<!-- 鎿嶄綔鎸夐挳琛?-->
<!-- 操作按钮行 -->
<view class="action-bar">
<button class="btn primary small" @click="onAddGroup">娣诲姞鍒嗙粍</button>
<button class="btn primary small" @click="onAddGroup">添加分组</button>
</view>
<!-- 鍒嗙粍鍒楄〃琛ㄦ牸 -->
<!-- 分组列表表格 -->
<view class="table-container">
<!-- 琛ㄥご -->
<!-- 表头 -->
<view class="table-header">
<view class="col col-id"><text>ID</text></view>
<view class="col col-name"><text>鍒嗙粍</text></view>
<view class="col col-ops"><text>鎿嶄綔</text></view>
<view class="col col-name"><text>分组</text></view>
<view class="col col-ops"><text>操作</text></view>
</view>
<!-- 琛ㄦ牸鍐呭 -->
<!-- 表格内容 -->
<view class="table-body">
<view v-for="group in groupList" :key="group.id" class="table-row">
<view class="col col-id"><text>{{ group.id }}</text></view>
<view class="col col-name"><text>{{ group.name }}</text></view>
<view class="col col-ops">
<text class="op-link" @click="onEditGroup(group)">淇敼</text>
<text class="op-link" @click="onEditGroup(group)">修改</text>
<view class="op-divider">|</view>
<text class="op-link" @click="onDeleteGroup(group)">鍒犻櫎</text>
<text class="op-link" @click="onDeleteGroup(group)">删除</text>
</view>
</view>
</view>
</view>
<!-- 鍒嗛〉鍖哄煙 -->
<!-- 分页区域 -->
<view class="pagination-row">
<text class="total-text">鍏?{{ groupList.length }} 鏉?/text>
<text class="total-text">共 {{ groupList.length }} 条</text>
<view class="page-size-selector">
<text>15鏉?椤?/text>
<text class="arrow">鈻?/text>
<text>15条/页</text>
<text class="arrow">▼</text>
</view>
<view class="page-btns">
<view class="page-btn disabled"><text>鈥?/text></view>
<view class="page-btn disabled"><text>‹</text></view>
<view class="page-btn active"><text>1</text></view>
<view class="page-btn disabled"><text>鈥?/text></view>
<view class="page-btn disabled"><text>›</text></view>
</view>
<view class="page-jump">
<text>鍓嶅線</text>
<text>前往</text>
<input class="jump-input" value="1" />
<text>椤?/text>
<text>页</text>
</view>
</view>
</view>
<!-- 娣诲姞/淇敼鍒嗙粍寮圭獥 -->
<!-- 添加/修改分组弹窗 -->
<view class="modal-mask" v-if="showModal" @click="closeModal">
<view class="modal-content" @click.stop>
<view class="modal-header">
<text class="modal-title">{{ modalTitle }}</text>
<text class="modal-close" @click="closeModal">脳</text>
<text class="modal-close" @click="closeModal">×</text>
</view>
<view class="modal-body">
<view class="form-item">
<view class="label-box">
<text class="required">*</text>
<text class="label">鍒嗙粍鍚嶇О锛?/text>
<text class="label">分组名称：</text>
</view>
<input
class="form-input"
v-model="formData.name"
placeholder="璇疯緭鍏ュ垎缁勫悕绉?
placeholder="请输入分组名称"
autofocus
/>
</view>
</view>
<view class="modal-footer">
<button class="btn ghost" @click="closeModal">鍙栨秷</button>
<button class="btn primary" @click="submitForm">纭畾</button>
<button class="btn ghost" @click="closeModal">取消</button>
<button class="btn primary" @click="submitForm">确定</button>
</view>
</view>
</view>
@@ -82,26 +82,26 @@
<script setup lang="uts">
import { ref, reactive, computed } from 'vue'
// 鍒嗙粍鏁版嵁
// 分组数据
const groupList = ref([
{ id: 251, name: 'A绫诲鎴? },
{ id: 252, name: 'B绫诲鎴? },
{ id: 253, name: 'C绫诲鎴? },
{ id: 254, name: 'D绫诲鎴? }
{ id: 251, name: 'A类客户' },
{ id: 252, name: 'B类客户' },
{ id: 253, name: 'C类客户' },
{ id: 254, name: 'D类客户' }
])
// 寮圭獥鐘舵€?
// 弹窗状态
const showModal = ref(false)
const isEdit = ref(false)
const modalTitle = computed(() => isEdit.value ? '淇敼鍒嗙粍' : '娣诲姞鍒嗙粍')
const modalTitle = computed(() => isEdit.value ? '修改分组' : '添加分组')
// 琛ㄥ崟鏁版嵁
// 表单数据
const formData = reactive({
id: 0,
name: ''
})
// 娣诲姞鍒嗙粍
// 添加分组
function onAddGroup() {
isEdit.value = false
formData.id = 0
@@ -109,7 +109,7 @@ function onAddGroup() {
showModal.value = true
}
// 淇敼鍒嗙粍
// 修改分组
function onEditGroup(group: any) {
isEdit.value = true
formData.id = group.id
@@ -117,47 +117,47 @@ function onEditGroup(group: any) {
showModal.value = true
}
// 鍒犻櫎鍒嗙粍
// 删除分组
function onDeleteGroup(group: any) {
uni.showModal({
title: '鎻愮ず',
content: '纭畾瑕佸垹闄よ鍒嗙粍鍚楋紵',
title: '提示',
content: '确定要删除该分组吗？',
success: (res) => {
if (res.confirm) {
groupList.value = groupList.value.filter(item => item.id !== group.id)
uni.showToast({ title: '鍒犻櫎鎴愬姛', icon: 'success' })
uni.showToast({ title: '删除成功', icon: 'success' })
}
}
})
}
// 鍏抽棴寮圭獥
// 关闭弹窗
function closeModal() {
showModal.value = false
}
// 鎻愪氦琛ㄥ崟
// 提交表单
function submitForm() {
if (!formData.name) {
uni.showToast({ title: '璇疯緭鍏ュ垎缁勫悕绉?, icon: 'none' })
uni.showToast({ title: '请输入分组名称', icon: 'none' })
return
}
if (isEdit.value) {
// 妯℃嫙淇敼
// 模拟修改
const index = groupList.value.findIndex(item => item.id === formData.id)
if (index > -1) {
groupList.value[index].name = formData.name
}
uni.showToast({ title: '淇敼鎴愬姛', icon: 'success' })
uni.showToast({ title: '修改成功', icon: 'success' })
} else {
// 妯℃嫙娣诲姞
// 模拟添加
const newId = groupList.value.length > 0 ? Math.max(...groupList.value.map(g => g.id)) + 1 : 1
groupList.value.push({
id: newId,
name: formData.name
})
uni.showToast({ title: '娣诲姞鎴愬姛', icon: 'success' })
uni.showToast({ title: '添加成功', icon: 'success' })
}
closeModal()
@@ -166,9 +166,9 @@ function submitForm() {
<style scoped lang="scss">
.user-group-page {
/* padding removed */
padding: 16px;
background-color: #f0f2f5;
min-height: 100vh;
}
.content-card {
@@ -183,7 +183,7 @@ function submitForm() {
flex-direction: row;
}
/* 鎸夐挳鏍峰紡 */
/* 按钮样式 */
.btn {
height: 32px;
line-height: 32px;
@@ -219,7 +219,7 @@ function submitForm() {
padding: 0 12px;
}
/* 琛ㄦ牸鏍峰紡 */
/* 表格样式 */
.table-container {
border: 1px solid #f0f0f0;
border-radius: 2px;
@@ -291,7 +291,7 @@ function submitForm() {
opacity: 0.5;
}
/* 鍒嗛〉鏍峰紡 */
/* 分页样式 */
.pagination-row {
margin-top: 24px;
display: flex;
@@ -368,7 +368,7 @@ function submitForm() {
}
}
/* 寮圭獥鏍峰紡 */
/* 弹窗样式 */
.modal-mask {
position: fixed;
top: 0;
@@ -462,4 +462,3 @@ function submitForm() {
gap: 8px;
}
</style>

101
pages/mall/admin/user/label/index.uvue
View File

@@ -1,78 +1,78 @@
<template>
<template>
<view class="user-label-page">
<view class="content-card">
<!-- 鎿嶄綔鎸夐挳琛?-->
<!-- 操作按钮行 -->
<view class="action-bar">
<button class="btn primary small" @click="onAddLabel">娣诲姞鏍囩</button>
<button class="btn primary small" @click="onAddLabel">添加标签</button>
</view>
<!-- 鏍囩鍒楄〃琛ㄦ牸 -->
<!-- 标签列表表格 -->
<view class="table-container">
<!-- 琛ㄥご -->
<!-- 表头 -->
<view class="table-header">
<view class="col col-id"><text>ID</text></view>
<view class="col col-name"><text>鏍囩鍚嶇О</text></view>
<view class="col col-ops"><text>鎿嶄綔</text></view>
<view class="col col-name"><text>标签名称</text></view>
<view class="col col-ops"><text>操作</text></view>
</view>
<!-- 琛ㄦ牸鍐呭 -->
<!-- 表格内容 -->
<view class="table-body">
<view v-for="label in labelList" :key="label.id" class="table-row">
<view class="col col-id"><text>{{ label.id }}</text></view>
<view class="col col-name"><text>{{ label.name }}</text></view>
<view class="col col-ops">
<text class="op-link" @click="onEditLabel(label)">淇敼</text>
<text class="op-link" @click="onEditLabel(label)">修改</text>
<view class="op-divider">|</view>
<text class="op-link" @click="onDeleteLabel(label)">鍒犻櫎</text>
<text class="op-link" @click="onDeleteLabel(label)">删除</text>
</view>
</view>
</view>
</view>
<!-- 鍒嗛〉鍖哄煙 -->
<!-- 分页区域 -->
<view class="pagination-row">
<text class="total-text">鍏?{{ labelList.length }} 鏉?/text>
<text class="total-text">共 {{ labelList.length }} 条</text>
<view class="page-size-selector">
<text>15鏉?椤?/text>
<text class="arrow">鈻?/text>
<text>15条/页</text>
<text class="arrow">▼</text>
</view>
<view class="page-btns">
<view class="page-btn disabled"><text>鈥?/text></view>
<view class="page-btn disabled"><text>‹</text></view>
<view class="page-btn active"><text>1</text></view>
<view class="page-btn disabled"><text>鈥?/text></view>
<view class="page-btn disabled"><text>›</text></view>
</view>
<view class="page-jump">
<text>鍓嶅線</text>
<text>前往</text>
<input class="jump-input" value="1" />
<text>椤?/text>
<text>页</text>
</view>
</view>
</view>
<!-- 娣诲姞/淇敼鏍囩寮圭獥 -->
<!-- 添加/修改标签弹窗 -->
<view class="modal-mask" v-if="showModal" @click="closeModal">
<view class="modal-content" @click.stop>
<view class="modal-header">
<text class="modal-title">{{ modalTitle }}</text>
<text class="modal-close" @click="closeModal">脳</text>
<text class="modal-close" @click="closeModal">×</text>
</view>
<view class="modal-body">
<view class="form-item">
<view class="label-box">
<text class="required">*</text>
<text class="label">鏍囩鍚嶇О锛?/text>
<text class="label">标签名称：</text>
</view>
<input
class="form-input"
v-model="formData.name"
placeholder="璇疯緭鍏ユ爣绛惧悕绉?
placeholder="请输入标签名称"
autofocus
/>
</view>
</view>
<view class="modal-footer">
<button class="btn ghost" @click="closeModal">鍙栨秷</button>
<button class="btn primary" @click="submitForm">纭畾</button>
<button class="btn ghost" @click="closeModal">取消</button>
<button class="btn primary" @click="submitForm">确定</button>
</view>
</view>
</view>
@@ -82,26 +82,26 @@
<script setup lang="uts">
import { ref, reactive, computed } from 'vue'
// 鏍囩鏁版嵁
// 标签数据
const labelList = ref([
{ id: 1, name: '鏂板鎴? },
{ id: 2, name: '鑰佸鎴? },
{ id: 3, name: '娲昏穬瀹㈡埛' },
{ id: 4, name: '娼滃湪瀹㈡埛' }
{ id: 1, name: '新客户' },
{ id: 2, name: '老客户' },
{ id: 3, name: '活跃客户' },
{ id: 4, name: '潜在客户' }
])
// 寮圭獥鐘舵€?
// 弹窗状态
const showModal = ref(false)
const isEdit = ref(false)
const modalTitle = computed(() => isEdit.value ? '淇敼鏍囩' : '娣诲姞鏍囩')
const modalTitle = computed(() => isEdit.value ? '修改标签' : '添加标签')
// 琛ㄥ崟鏁版嵁
// 表单数据
const formData = reactive({
id: 0,
name: ''
})
// 娣诲姞鏍囩
// 添加标签
function onAddLabel() {
isEdit.value = false
formData.id = 0
@@ -109,7 +109,7 @@ function onAddLabel() {
showModal.value = true
}
// 淇敼鏍囩
// 修改标签
function onEditLabel(label: any) {
isEdit.value = true
formData.id = label.id
@@ -117,29 +117,29 @@ function onEditLabel(label: any) {
showModal.value = true
}
// 鍒犻櫎鏍囩
// 删除标签
function onDeleteLabel(label: any) {
uni.showModal({
title: '鎻愮ず',
content: '纭畾瑕佸垹闄よ鏍囩鍚楋紵',
title: '提示',
content: '确定要删除该标签吗？',
success: (res) => {
if (res.confirm) {
labelList.value = labelList.value.filter(item => item.id !== label.id)
uni.showToast({ title: '鍒犻櫎鎴愬姛', icon: 'success' })
uni.showToast({ title: '删除成功', icon: 'success' })
}
}
})
}
// 鍏抽棴寮圭獥
// 关闭弹窗
function closeModal() {
showModal.value = false
}
// 鎻愪氦琛ㄥ崟
// 提交表单
function submitForm() {
if (!formData.name) {
uni.showToast({ title: '璇疯緭鍏ユ爣绛惧悕绉?, icon: 'none' })
uni.showToast({ title: '请输入标签名称', icon: 'none' })
return
}
@@ -148,14 +148,14 @@ function submitForm() {
if (index > -1) {
labelList.value[index].name = formData.name
}
uni.showToast({ title: '淇敼鎴愬姛', icon: 'success' })
uni.showToast({ title: '修改成功', icon: 'success' })
} else {
const newId = labelList.value.length > 0 ? Math.max(...labelList.value.map(g => g.id)) + 1 : 1
labelList.value.push({
id: newId,
name: formData.name
})
uni.showToast({ title: '娣诲姞鎴愬姛', icon: 'success' })
uni.showToast({ title: '添加成功', icon: 'success' })
}
closeModal()
@@ -164,9 +164,9 @@ function submitForm() {
<style scoped lang="scss">
.user-label-page {
/* padding removed */
padding: 16px;
background-color: #f0f2f5;
min-height: 100vh;
}
.content-card {
@@ -181,7 +181,7 @@ function submitForm() {
flex-direction: row;
}
/* 鎸夐挳鏍峰紡 */
/* 按钮样式 */
.btn {
height: 32px;
line-height: 32px;
@@ -217,7 +217,7 @@ function submitForm() {
padding: 0 12px;
}
/* 琛ㄦ牸鏍峰紡 */
/* 表格样式 */
.table-container {
border: 1px solid #f0f0f0;
border-radius: 2px;
@@ -289,7 +289,7 @@ function submitForm() {
opacity: 0.5;
}
/* 鍒嗛〉鏍峰紡 */
/* 分页样式 */
.pagination-row {
margin-top: 24px;
display: flex;
@@ -362,7 +362,7 @@ function submitForm() {
}
}
/* 寮圭獥鏍峰紡 */
/* 弹窗样式 */
.modal-mask {
position: fixed;
top: 0;
@@ -456,4 +456,3 @@ function submitForm() {
gap: 8px;
}
</style>

111
pages/mall/admin/user/level/index.uvue
View File

@@ -1,44 +1,44 @@
<template>
<template>
<view class="admin-user-level">
<view class="content-body">
<!-- 椤堕儴杩囨护鏍?-->
<!-- 顶部过滤栏 -->
<view class="filter-card border-shadow">
<view class="filter-item">
<text class="label-txt">绛夌骇鐘舵€?</text>
<text class="label-txt">等级状态:</text>
<view class="select-mock">
<text class="select-val">璇烽€夋嫨</text>
<text class="arrow-down">鈻?/text>
<text class="select-val">请选择</text>
<text class="arrow-down">▼</text>
</view>
</view>
<view class="filter-item">
<text class="label-txt">绛夌骇鍚嶇О:</text>
<input class="search-input" placeholder="璇疯緭鍏ョ瓑绾у悕绉? v-model="filterName" />
<text class="label-txt">等级名称:</text>
<input class="search-input" placeholder="请输入等级名称" v-model="filterName" />
</view>
<view class="btn-query" @click="handleQuery">
<text class="query-txt">鏌ヨ</text>
<text class="query-txt">查询</text>
</view>
</view>
<!-- 涓昏鍐呭鍖哄煙 -->
<!-- 主要内容区域 -->
<view class="table-card border-shadow">
<view class="card-header">
<view class="btn-primary-blue" @click="handleAdd">
<text class="btn-txt">娣诲姞鐢ㄦ埛绛夌骇</text>
<text class="btn-txt">添加用户等级</text>
</view>
</view>
<!-- 鏁版嵁琛ㄦ牸 -->
<!-- 数据表格 -->
<view class="table-container">
<view class="table-header-row">
<view class="th" style="width: 80px;">ID</view>
<view class="th" style="width: 120px;">绛夌骇鍥炬爣</view>
<view class="th" style="width: 150px;">绛夌骇鑳屾櫙鍥?/view>
<view class="th" style="flex: 1;">绛夌骇鍚嶇О</view>
<view class="th" style="width: 100px;">绛夌骇</view>
<view class="th" style="width: 120px;">浜彈鎶樻墸</view>
<view class="th" style="width: 150px;">缁忛獙鍊艰姹?/view>
<view class="th" style="width: 120px;">鏄惁鏄剧ず</view>
<view class="th" style="width: 150px;">鎿嶄綔</view>
<view class="th" style="width: 120px;">等级图标</view>
<view class="th" style="width: 150px;">等级背景图</view>
<view class="th" style="flex: 1;">等级名称</view>
<view class="th" style="width: 100px;">等级</view>
<view class="th" style="width: 120px;">享受折扣</view>
<view class="th" style="width: 150px;">经验值要求</view>
<view class="th" style="width: 120px;">是否显示</view>
<view class="th" style="width: 150px;">操作</view>
</view>
<view class="table-body">
@@ -63,22 +63,22 @@
</view>
<view class="td" style="width: 150px;">
<view class="op-links">
<text class="op-link" @click="handleEdit(item)">缂栬緫</text>
<text class="op-link" @click="handleEdit(item)">编辑</text>
<text class="op-split">|</text>
<text class="op-link text-danger">鍒犻櫎</text>
<text class="op-link text-danger">删除</text>
</view>
</view>
</view>
</view>
</view>
<!-- 鍒嗛〉 -->
<!-- 分页 -->
<view class="pagination-footer">
<view class="page-total">
<text class="total-txt">鍏?{{ total }} 鏉?/text>
<text class="total-txt">共 {{ total }} 条</text>
</view>
<view class="page-select">
<text class="page-val">15鏉?椤?鈻?/text>
<text class="page-val">15条/页 ▼</text>
</view>
<view class="page-btns">
<text class="p-btn disabled"><</text>
@@ -86,61 +86,61 @@
<text class="p-btn">></text>
</view>
<view class="page-jump">
<text class="jump-txt">鍓嶅線</text>
<text class="jump-txt">前往</text>
<input class="jump-input" placeholder="1" />
<text class="jump-txt">椤?/text>
<text class="jump-txt">页</text>
</view>
</view>
</view>
</view>
<!-- 鎶藉眽寮圭獥 (Add/Edit) -->
<!-- 抽屉弹窗 (Add/Edit) -->
<view v-if="showDrawer" :class="['drawer-mask', isClosing ? 'mask-fade-out' : '']" @click="closeDrawer">
<view :class="['drawer-content', isClosing ? 'slide-out' : '']" @click.stop="">
<view class="drawer-header">
<text class="title-txt">{{ isEdit ? '缂栬緫鐢ㄦ埛绛夌骇' : '娣诲姞鐢ㄦ埛绛夌骇' }}</text>
<text class="close-btn" @click="closeDrawer">脳</text>
<text class="title-txt">{{ isEdit ? '编辑用户等级' : '添加用户等级' }}</text>
<text class="close-btn" @click="closeDrawer">×</text>
</view>
<scroll-view class="drawer-body" :scroll-y="true">
<view class="form-item">
<view class="label-box"><text class="required">*</text><text class="label-txt">绛夌骇鍚嶇О:</text></view>
<input class="input-base" v-model="form.name" placeholder="璇疯緭鍏ョ瓑绾у悕绉? />
<view class="label-box"><text class="required">*</text><text class="label-txt">等级名称:</text></view>
<input class="input-base" v-model="form.name" placeholder="请输入等级名称" />
</view>
<view class="form-item">
<view class="label-box"><text class="required">*</text><text class="label-txt">绛夌骇鏉冮噸:</text></view>
<input class="input-base" type="number" v-model="form.level" placeholder="绛夌骇鏉冮噸瓒婂ぇ绛夌骇瓒婇珮" />
<view class="label-box"><text class="required">*</text><text class="label-txt">等级权重:</text></view>
<input class="input-base" type="number" v-model="form.level" placeholder="等级权重越大等级越高" />
</view>
<view class="form-item">
<view class="label-box"><text class="required">*</text><text class="label-txt">绛夌骇鍥炬爣:</text></view>
<view class="label-box"><text class="required">*</text><text class="label-txt">等级图标:</text></view>
<view class="upload-placeholder">
<text class="up-ic">+</text>
<text class="up-txt">涓婁紶鍥炬爣</text>
<text class="up-txt">上传图标</text>
</view>
</view>
<view class="form-item">
<view class="label-box"><text class="required">*</text><text class="label-txt">绛夌骇鑳屾櫙鍥?</text></view>
<view class="label-box"><text class="required">*</text><text class="label-txt">等级背景图:</text></view>
<view class="upload-placeholder bg-up">
<text class="up-ic">+</text>
<text class="up-txt">涓婁紶鑳屾櫙鍥?/text>
<text class="up-txt">上传背景图</text>
</view>
</view>
<view class="form-item">
<view class="label-box"><text class="required">*</text><text class="label-txt">浜彈鎶樻墸(%):</text></view>
<input class="input-base" type="number" v-model="form.discount" placeholder="璇疯緭鍏ユ姌鎵ｏ紝濡傦細95" />
<view class="label-box"><text class="required">*</text><text class="label-txt">享受折扣(%):</text></view>
<input class="input-base" type="number" v-model="form.discount" placeholder="请输入折扣，如：95" />
</view>
<view class="form-item">
<view class="label-box"><text class="required">*</text><text class="label-txt">缁忛獙鍊艰姹?</text></view>
<input class="input-base" type="number" v-model="form.experience" placeholder="璇疯緭鍏ョ粡楠屽€艰姹? />
<view class="label-box"><text class="required">*</text><text class="label-txt">经验值要求:</text></view>
<input class="input-base" type="number" v-model="form.experience" placeholder="请输入经验值要求" />
</view>
<view class="form-item">
<view class="label-box"><text class="label-txt">鏄惁鏄剧ず:</text></view>
<view class="label-box"><text class="label-txt">是否显示:</text></view>
<view :class="['switch-box', form.isShow ? 'active' : '']" @click="form.isShow = !form.isShow">
<view class="switch-dot"></view>
</view>
@@ -148,8 +148,8 @@
</scroll-view>
<view class="drawer-footer">
<view class="btn-cancel" @click="closeDrawer"><text class="btn-cancel-txt">鍙栨秷</text></view>
<view class="btn-save" @click="handleSave"><text class="btn-save-txt">鎻愪氦</text></view>
<view class="btn-cancel" @click="closeDrawer"><text class="btn-cancel-txt">取消</text></view>
<view class="btn-save" @click="handleSave"><text class="btn-save-txt">提交</text></view>
</view>
</view>
</view>
@@ -174,11 +174,11 @@ interface LevelItem {
const filterName = ref('')
const total = ref(5)
const levelList = ref<LevelItem[]>([
{ id: 1, name: 'V1', level: 1, iconBg: '#fdf6ec', iconSymbol: '馃憫', bgGradient: 'linear-gradient(to bottom right, #f5e6d3, #e8d5bc)', discount: 99, experience: 500, isShow: true },
{ id: 2, name: 'V2', level: 2, iconBg: '#ecf5ff', iconSymbol: '馃拵', bgGradient: 'linear-gradient(to bottom right, #d3e9f5, #bcd9e8)', discount: 97, experience: 1000, isShow: true },
{ id: 3, name: 'V3', level: 3, iconBg: '#f4f4f5', iconSymbol: '猸?, bgGradient: 'linear-gradient(to bottom right, #e3e3e3, #cbcbcb)', discount: 95, experience: 3000, isShow: true },
{ id: 4, name: 'V4', level: 4, iconBg: '#fef0f0', iconSymbol: '馃憫', bgGradient: 'linear-gradient(to bottom right, #f5dfd3, #e8c6bc)', discount: 93, experience: 8000, isShow: true },
{ id: 5, name: 'V5', level: 5, iconBg: '#f0f9eb', iconSymbol: '馃挔', bgGradient: 'linear-gradient(to bottom right, #d3e1f5, #bccce8)', discount: 70, experience: 15000, isShow: true }
{ id: 1, name: 'V1', level: 1, iconBg: '#fdf6ec', iconSymbol: '👑', bgGradient: 'linear-gradient(to bottom right, #f5e6d3, #e8d5bc)', discount: 99, experience: 500, isShow: true },
{ id: 2, name: 'V2', level: 2, iconBg: '#ecf5ff', iconSymbol: '💎', bgGradient: 'linear-gradient(to bottom right, #d3e9f5, #bcd9e8)', discount: 97, experience: 1000, isShow: true },
{ id: 3, name: 'V3', level: 3, iconBg: '#f4f4f5', iconSymbol: '⭐', bgGradient: 'linear-gradient(to bottom right, #e3e3e3, #cbcbcb)', discount: 95, experience: 3000, isShow: true },
{ id: 4, name: 'V4', level: 4, iconBg: '#fef0f0', iconSymbol: '👑', bgGradient: 'linear-gradient(to bottom right, #f5dfd3, #e8c6bc)', discount: 93, experience: 8000, isShow: true },
{ id: 5, name: 'V5', level: 5, iconBg: '#f0f9eb', iconSymbol: '💠', bgGradient: 'linear-gradient(to bottom right, #d3e1f5, #bccce8)', discount: 70, experience: 15000, isShow: true }
])
const showDrawer = ref(false)
@@ -252,7 +252,7 @@ const handleSave = () => {
gap: 20px;
}
/* 杩囨护鏍?*/
/* 过滤栏 */
.filter-card {
padding: 24px;
display: flex;
@@ -307,7 +307,7 @@ const handleSave = () => {
}
.query-txt { color: #fff; font-size: 14px; }
/* 琛ㄦ牸鍖哄煙 */
/* 表格区域 */
.table-card {
background-color: #fff;
display: flex;
@@ -355,7 +355,7 @@ const handleSave = () => {
.td-txt { font-size: 14px; color: #515a6e; }
/* 鍥炬爣鍜岃儗鏅瑙?*/
/* 图标和背景预览 */
.icon-circle {
width: 36px;
height: 36px;
@@ -374,7 +374,7 @@ const handleSave = () => {
border: 1px solid #eee;
}
/* Switch 寮€鍏冲鍒?*/
/* Switch 开关复刻 */
.switch-box {
width: 44px;
height: 22px;
@@ -402,7 +402,7 @@ const handleSave = () => {
.op-split { color: #e8eaec; margin: 0 5px; }
.text-danger { color: #ed4014; }
/* 鍒嗛〉 */
/* 分页 */
.pagination-footer {
padding: 20px;
display: flex;
@@ -447,7 +447,7 @@ const handleSave = () => {
.drawer-content {
width: 500px;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
animation: slideIn 0.3s ease-out;
@@ -520,4 +520,3 @@ const handleSave = () => {
@keyframes fadeOut { from { background-color: rgba(0, 0, 0, 0.4); } to { background-color: rgba(0, 0, 0, 0); } }
</style>

159
pages/mall/admin/user/management/index.uvue
View File

@@ -1,46 +1,46 @@
<template>
<template>
<view class="user-list-page">
<!-- 绛涢€夐潰鏉?-->
<!-- 筛选面板 -->
<view class="filter-card">
<view class="filter-row">
<view class="filter-item">
<text class="label">鐢ㄦ埛鎼滅储锛?/text>
<text class="label">用户搜索：</text>
<view class="input-group">
<view class="compact-select">
<text>璇烽€夋嫨</text>
<text class="arrow">鈻?/text>
<text>请选择</text>
<text class="arrow">▼</text>
</view>
<input class="filter-input" placeholder="璇疯緭鍏ョ敤鎴? />
<input class="filter-input" placeholder="请输入用户" />
</view>
</view>
<view class="filter-item">
<text class="label">鐢ㄦ埛绛夌骇锛?/text>
<text class="label">用户等级：</text>
<view class="filter-select">
<text class="select-placeholder">璇烽€夋嫨鐢ㄦ埛绛夌骇</text>
<text class="arrow">鈻?/text>
<text class="select-placeholder">请选择用户等级</text>
<text class="arrow">▼</text>
</view>
</view>
<view class="filter-item">
<text class="label">鐢ㄦ埛鍒嗙粍锛?/text>
<text class="label">用户分组：</text>
<view class="filter-select">
<text class="select-placeholder">璇烽€夋嫨鐢ㄦ埛鍒嗙粍</text>
<text class="arrow">鈻?/text>
<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>
<button class="btn primary" @click="onSearch">搜索</button>
<button class="btn" @click="onReset">重置</button>
<text class="expand-btn">展开 ∨</text>
</view>
</view>
</view>
<!-- 鍐呭鍗＄墖 -->
<!-- 内容卡片 -->
<view class="content-card">
<!-- 骞冲彴鍒囨崲 Tabs -->
<!-- 平台切换 Tabs -->
<view class="tabs-row">
<view
v-for="(tab, index) in tabs"
@@ -53,45 +53,45 @@
</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>
<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-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>
<text>余额</text>
<text class="sort-icon">↕</text>
</view>
<view class="col col-ops"><text>鎿嶄綔</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"
:style="{ zIndex: activeDropdownId === user.id ? 1000 : 1 }"
>
<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-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" />
@@ -100,7 +100,7 @@
<text class="name-text">{{ user.nickname }}</text>
</view>
<view class="col col-member">
<text :class="user.isMember === '鏄? ? 'status-yes' : 'status-no'">{{ user.isMember }}</text>
<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>
@@ -109,7 +109,7 @@
<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.stop="onDetail(user)">璇︽儏</text>
<text class="op-link" @click.stop="onDetail(user)">详情</text>
<view class="op-divider">|</view>
<view class="more-hover-container"
@mouseover="activeDropdownId = user.id"
@@ -117,18 +117,18 @@
@click.stop="activeDropdownId = (activeDropdownId === user.id ? null : user.id)"
>
<view class="more-trigger pointer">
<text class="op-link">鏇村</text>
<text class="arrow">鈭?/text>
<text class="op-link">更多</text>
<text class="arrow">∨</text>
</view>
<view class="dropdown-list-box" v-if="activeDropdownId === user.id">
<view class="dropdown-arrow-top"></view>
<view class="dropdown-menu-list">
<text class="menu-item" @click.stop="uni.showToast({title:'淇敼浣欓', icon:'none'})">淇敼浣欓</text>
<text class="menu-item" @click.stop="uni.showToast({title:'淇敼绉垎', icon:'none'})">淇敼绉垎</text>
<text class="menu-item" @click.stop="uni.showToast({title:'璧犻€佷細鍛?, icon:'none'})">璧犻€佷細鍛?/text>
<text class="menu-item" @click.stop="uni.showToast({title:'璁剧疆鍒嗙粍', icon:'none'})">璁剧疆鍒嗙粍</text>
<text class="menu-item" @click.stop="uni.showToast({title:'璁剧疆鏍囩', icon:'none'})">璁剧疆鏍囩</text>
<text class="menu-item" @click.stop="uni.showToast({title:'淇敼涓婄骇鎺ㄥ箍浜?, icon:'none'})">淇敼涓婄骇鎺ㄥ箍浜?/text>
<text class="menu-item" @click.stop="uni.showToast({title:'修改余额', icon:'none'})">修改余额</text>
<text class="menu-item" @click.stop="uni.showToast({title:'修改积分', icon:'none'})">修改积分</text>
<text class="menu-item" @click.stop="uni.showToast({title:'赠送会员', icon:'none'})">赠送会员</text>
<text class="menu-item" @click.stop="uni.showToast({title:'设置分组', icon:'none'})">设置分组</text>
<text class="menu-item" @click.stop="uni.showToast({title:'设置标签', icon:'none'})">设置标签</text>
<text class="menu-item" @click.stop="uni.showToast({title:'修改上级推广人', icon:'none'})">修改上级推广人</text>
</view>
</view>
</view>
@@ -137,9 +137,9 @@
</view>
</view>
<!-- 鍒嗛〉鍖哄煙 (妯℃嫙) -->
<!-- 分页区域 (模拟) -->
<view class="pagination">
<text class="page-info">鍏?80834 鏉℃暟鎹?/text>
<text class="page-info">共 80834 条数据</text>
</view>
</view>
</view>
@@ -149,47 +149,47 @@
import { ref } from 'vue'
const activeTab = ref(0)
const tabs = ['鍏ㄩ儴', '寰俊鍏紬鍙?, '寰俊灏忕▼搴?, 'H5', 'PC', 'APP']
const tabs = ['全部', '微信公众号', '微信小程序', 'H5', 'PC', 'APP']
const isAllChecked = ref(false)
const activeDropdownId = ref<string | null>(null)
const userList = ref([
{ id: '77414', avatar: '/static/logo.png', nickname: '199****0268', isMember: '鍚?, level: '鏃?, group: '鏃?, spreadLevel: '', phone: '199****0268', userType: '鍏紬鍙?, balance: '88888.00', checked: false },
{ id: '75311', avatar: '/static/logo.png', nickname: 'wljbhg', isMember: '鍚?, level: '鏃?, group: 'A绫诲鎴?, spreadLevel: '', phone: '', userType: '鍏紬鍙?, balance: '100002.00', checked: false },
{ id: '75305', avatar: '/static/logo.png', nickname: '鐩歌娆?, isMember: '鍚?, level: '鏃?, group: 'A绫诲鎴?, spreadLevel: '', phone: '', userType: '鍏紬鍙?, balance: '100000.00', checked: false },
{ id: '75296', avatar: '/static/logo.png', nickname: '..', isMember: '鍚?, level: '鏃?, group: 'A绫诲鎴?, spreadLevel: '', phone: '', userType: '鍏紬鍙?, balance: '100000.00', checked: false },
{ id: '75293', avatar: '/static/logo.png', nickname: '閽?閽?鍗?, isMember: '鍚?, level: '鏃?, group: 'A绫诲鎴?, spreadLevel: '', phone: '', userType: '鍏紬鍙?, balance: '100000.00', checked: false },
{ id: '75289', avatar: '/static/logo.png', nickname: '灏忎簩涓婇厭', isMember: '鍚?, level: '鏃?, group: 'A绫诲鎴?, spreadLevel: '', phone: '', userType: '鍏紬鍙?, balance: '100000.00', checked: false },
{ id: '75257', avatar: '/static/logo.png', nickname: '5+7', isMember: '鏄?, level: '鏃?, group: 'A绫诲鎴?, spreadLevel: '', phone: '', userType: '鍏紬鍙?, balance: '100000.00', checked: false },
{ id: '75226', avatar: '/static/logo.png', nickname: '鎱㈡鍓嶈', isMember: '鏄?, level: '鏃?, group: 'A绫诲鎴?, spreadLevel: '', phone: '', userType: '鍏紬鍙?, balance: '100000.00', checked: false },
{ id: '75211', avatar: '/static/logo.png', nickname: '闅惧緱绯婃秱', isMember: '鍚?, level: '鏃?, group: 'A绫诲鎴?, spreadLevel: '', phone: '', userType: '鍏紬鍙?, balance: '100000.00', checked: false }
{ id: '77414', avatar: '/static/logo.png', nickname: '199****0268', isMember: '否', level: '无', group: '无', spreadLevel: '', phone: '199****0268', userType: '公众号', balance: '88888.00', checked: false },
{ id: '75311', avatar: '/static/logo.png', nickname: 'wljbhg', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100002.00', checked: false },
{ id: '75305', avatar: '/static/logo.png', nickname: '相见欢', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
{ id: '75296', avatar: '/static/logo.png', nickname: '..', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
{ id: '75293', avatar: '/static/logo.png', nickname: '钟(钏)华', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
{ id: '75289', avatar: '/static/logo.png', nickname: '小二上酒', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
{ id: '75257', avatar: '/static/logo.png', nickname: '5+7', isMember: '是', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
{ id: '75226', avatar: '/static/logo.png', nickname: '慢步前行', isMember: '是', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false },
{ id: '75211', avatar: '/static/logo.png', nickname: '难得糊涂', isMember: '否', level: '无', group: 'A类客户', spreadLevel: '', phone: '', userType: '公众号', balance: '100000.00', checked: false }
])
function onSearch() {
uni.showToast({ title: '鎼滅储涓?..', icon: 'none' })
uni.showToast({ title: '搜索中...', icon: 'none' })
}
function onReset() {
uni.showToast({ title: '宸查噸缃?, icon: 'none' })
uni.showToast({ title: '已重置', icon: 'none' })
}
function onAddUser() {
uni.showToast({ title: '娣诲姞鐢ㄦ埛', icon: 'none' })
uni.showToast({ title: '添加用户', icon: 'none' })
}
function onDetail(user: any) {
uni.showToast({ title: '鏌ョ湅鐢ㄦ埛: ' + user.id, icon: 'none' })
uni.showToast({ title: '查看用户: ' + user.id, icon: 'none' })
}
</script>
<style scoped lang="scss">
.user-list-page {
/* padding removed */
padding: 16px;
background-color: #f0f2f5;
min-height: 100vh;
}
/* 绛涢€夊崱鐗?*/
/* 筛选卡片 */
.filter-card {
background: #fff;
border-radius: 4px;
@@ -305,12 +305,12 @@ function onDetail(user: any) {
cursor: pointer;
}
/* 鍐呭鍗＄墖 */
/* 内容卡片 */
.content-card {
background: #fff;
border-radius: 4px;
padding: 0;
overflow: visible; /* 蹇呴』 visible 浠ユ樉绀轰笅鎷夎彍鍗?*/
overflow: visible; /* 必须 visible 以显示下拉菜单 */
}
/* Tabs */
@@ -341,7 +341,7 @@ function onDetail(user: any) {
}
}
/* 鎿嶄綔鏍?*/
/* 操作栏 */
.action-bar {
padding: 16px 24px;
display: flex;
@@ -349,7 +349,7 @@ function onDetail(user: any) {
gap: 12px;
}
/* 琛ㄦ牸 */
/* 表格 */
.table-container {
padding: 0 24px 24px;
overflow: visible;
@@ -412,7 +412,7 @@ function onDetail(user: any) {
align-items: center;
justify-content: center;
height: 32px;
min-width: 46px; /* 澧炲姞鐐瑰嚮鍜屾偓鍋滆寖鍥?*/
min-width: 46px; /* 增加点击和悬停范围 */
padding: 0 4px;
cursor: pointer;
}
@@ -422,16 +422,16 @@ function onDetail(user: any) {
flex-direction: row;
align-items: center;
gap: 2px;
pointer-events: none; /* 纭繚浜嬩欢鍐掓场鍒?container */
pointer-events: none; /* 确保事件冒泡到 container */
.arrow { font-size: 10px; color: #2f54eb; margin-left: 2px; }
}
.dropdown-list-box {
position: absolute;
top: 30px;
right: -5px; /* 绋嶅井鍚戝乏绉诲姩涓€鐐?*/
width: 140px; /* 澧炲姞瀹藉害浠ュ绾抽暱鏂囧瓧 */
padding-top: 10px; /* 澧炲姞缂撳啿鍖洪槻姝㈤紶鏍囩Щ鍑?*/
right: -5px; /* 稍微向左移动一点 */
width: 140px; /* 增加宽度以容纳长文字 */
padding-top: 10px; /* 增加缓冲区防止鼠标移出 */
z-index: 9999;
}
@@ -530,4 +530,3 @@ function onDetail(user: any) {
color: #999;
}
</style>

69
pages/mall/admin/user/statistics/index.uvue
View File

@@ -1,34 +1,34 @@
<template>
<template>
<view class="statistic-page">
<!-- 绛涢€夋爮 -->
<!-- 筛选栏 -->
<view class="filter-card">
<view class="filter-item">
<text class="filter-label">鐢ㄦ埛娓犻亾锛?/text>
<text class="filter-label">用户渠道：</text>
<view class="select-box">
<text class="select-text">鍏ㄩ儴</text>
<text class="select-arrow">鈻?/text>
<text class="select-text">全部</text>
<text class="select-arrow">▼</text>
</view>
</view>
<view class="filter-item">
<text class="filter-label">閫夋嫨鏃堕棿锛?/text>
<text class="filter-label">选择时间：</text>
<view class="date-picker-box">
<text class="date-icon">馃搮</text>
<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>
<button class="btn primary" @click="onSearch">查询</button>
<button class="btn" @click="onExport">导出</button>
</view>
</view>
<!-- 鐢ㄦ埛姒傚喌鍗＄墖鍖?(浣跨敤 6-2-1 鍝嶅簲寮忕綉鏍? -->
<!-- 用户概况卡片区 (使用 6-2-1 响应式网格) -->
<view class="section-card">
<view class="section-header">
<text class="section-title">鐢ㄦ埛姒傚喌</text>
<text class="info-icon">鉂?/text>
<text class="section-title">用户概况</text>
<text class="info-icon">❓</text>
</view>
<view class="kpi-grid-6">
@@ -40,22 +40,22 @@
<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-label">环比增长：</text>
<text class="meta-value" :class="item.trend">
{{ item.percent }}
<text class="trend-icon">{{ item.trend === 'up' ? '鈻? : '鈻? }}</text>
<text class="trend-icon">{{ item.trend === 'up' ? '▲' : '▼' }}</text>
</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>
<text class="download-icon">📥</text>
</view>
</view>
<AnalyticsMultiLineChart
@@ -66,7 +66,7 @@
</view>
</view>
<!-- 鍦板煙鍒嗗竷涓庢€у埆姣斾緥 -->
<!-- 地域分布与性别比例 -->
<view class="analysis-row">
<view class="map-col">
<AnalyticsUserMapTable />
@@ -85,39 +85,39 @@ import AnalyticsUserMapTable from '@/components/analytics/AnalyticsUserMapTable.
import AnalyticsUserGenderSection from '@/components/analytics/AnalyticsUserGenderSection.uvue'
const kpiData = [
{ title: '绱鐢ㄦ埛', value: '80887', percent: '0.79%', trend: 'up', icon: '馃懃', bg: '#efebff' },
{ title: '璁垮鏁?, value: '1076', percent: '11.65%', trend: 'down', icon: '馃懁', bg: '#e8f4ff' },
{ title: '娴忚閲?, value: '8843', percent: '12.09%', trend: 'down', icon: '馃搧', bg: '#e6fff1' },
{ title: '鏂板鐢ㄦ埛鏁?, value: '635', percent: '14.65%', trend: 'down', icon: '馃懁', bg: '#fff7e6' },
{ title: '鎴愪氦鐢ㄦ埛鏁?, value: '122', percent: '0.81%', trend: 'down', icon: '馃懃', bg: '#f2f0ff' },
{ title: '浠樿垂浼氬憳鏁?, value: '76', percent: '13.63%', trend: 'down', icon: '馃拵', bg: '#f2f0ff' }
{ title: '累计用户', value: '80887', percent: '0.79%', trend: 'up', icon: '👥', bg: '#efebff' },
{ title: '访客数', value: '1076', percent: '11.65%', trend: 'down', icon: '👤', bg: '#e8f4ff' },
{ title: '浏览量', value: '8843', percent: '12.09%', trend: 'down', icon: '📁', bg: '#e6fff1' },
{ title: '新增用户数', value: '635', percent: '14.65%', trend: 'down', icon: '👤', bg: '#fff7e6' },
{ title: '成交用户数', value: '122', percent: '0.81%', trend: 'down', icon: '👥', bg: '#f2f0ff' },
{ title: '付费会员数', value: '76', percent: '13.63%', trend: 'down', icon: '💎', bg: '#f2f0ff' }
]
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] }
{ 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: '鎼滅储涓?..' })
uni.showToast({ title: '搜索中...' })
}
function onExport() {
uni.showToast({ title: '瀵煎嚭涓?..' })
uni.showToast({ title: '导出中...' })
}
</script>
<style scoped>
.statistic-page {
/* padding removed */
padding: 16px;
background-color: #f0f2f5;
min-height: 100vh;
}
.filter-card {
@@ -226,7 +226,7 @@ function onExport() {
font-size: 14px;
}
/* kpi-row 宸插簾寮冿紝閲囩敤鍏ㄥ眬 kpi-grid-6 */
/* kpi-row 已废弃，采用全局 kpi-grid-6 */
.kpi-card {
display: flex;
flex-direction: row;
@@ -329,4 +329,3 @@ function onExport() {
}
}
</style>