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

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>