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 12:06:33 +08:00
parent b7545173c6
commit d00f0b7412
83 changed files with 3901 additions and 2354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
pages/mall/admin/kefu/words.uvue
View File

@@ -1,11 +1,11 @@
<template>
<template>
<view class="admin-kefu-words">
<view class="words-container">
<!-- 左侧分类 -->
<!-- 宸︿晶鍒嗙被 -->
<view class="category-sidebar border-shadow">
<view class="sidebar-header" @click="handleAddCategory">
<text class="plus-icon">+</text>
<text class="header-txt">添加分类</text>
<text class="header-txt">娣诲姞鍒嗙被</text>
</view>
<scroll-view class="category-list" scroll-y="true">
<view
@@ -14,29 +14,29 @@
:class="['category-item', activeCategoryId == cat.id ? 'active' : '']"
@click="selectCategory(cat.id)"
>
<view class="folder-icon">📂</view>
<view class="folder-icon">馃搨</view>
<text class="cat-name">{{ cat.name }}</text>
</view>
</scroll-view>
</view>
<!-- 右侧话术列表 -->
<!-- 鍙充晶璇濇湳鍒楄〃 -->
<view class="content-main">
<view class="top-bar">
<view class="btn-primary" @click="handleAddWord">
<text class="btn-txt">添加话术</text>
<text class="btn-txt">娣诲姞璇濇湳</text>
</view>
</view>
<view class="table-card border-shadow">
<view class="table-header">
<view class="th col-id"><text class="th-txt">ID</text></view>
<view class="th col-cat"><text class="th-txt">分类</text></view>
<view class="th col-title"><text class="th-txt">标题</text></view>
<view class="th col-detail"><text class="th-txt">详情</text></view>
<view class="th col-sort"><text class="th-txt">排序</text></view>
<view class="th col-time"><text class="th-txt">添加时间</text></view>
<view class="th col-op"><text class="th-txt">操作</text></view>
<view class="th col-cat"><text class="th-txt">鍒嗙被</text></view>
<view class="th col-title"><text class="th-txt">鏍囬</text></view>
<view class="th col-detail"><text class="th-txt">璇︽儏</text></view>
<view class="th col-sort"><text class="th-txt">鎺掑簭</text></view>
<view class="th col-time"><text class="th-txt">娣诲姞鏃堕棿</text></view>
<view class="th col-op"><text class="th-txt">鎿嶄綔</text></view>
</view>
<view class="table-body">
@@ -50,19 +50,19 @@
<view class="td col-sort"><text class="td-txt">{{ item.sort }}</text></view>
<view class="td col-time"><text class="td-txt">{{ item.time }}</text></view>
<view class="td col-op">
<text class="btn-action" @click="handleEdit(item)">编辑</text>
<text class="btn-action" @click="handleEdit(item)">缂栬緫</text>
<view class="divider"></view>
<text class="btn-action danger">删除</text>
<text class="btn-action danger">鍒犻櫎</text>
</view>
</view>
</view>
<!-- 分页 -->
<!-- 鍒嗛〉 -->
<view class="pagination-bar">
<text class="page-total">共 {{ wordList.length }} 条</text>
<text class="page-total">鍏?{{ wordList.length }} 鏉?/text>
<view class="page-size-select">
<text class="size-txt">15条/页</text>
<text class="arrow-down">▼</text>
<text class="size-txt">15鏉?椤?/text>
<text class="arrow-down">鈻?/text>
</view>
<view class="page-nav">
<view class="nav-prev"><text class="nav-icon"> < </text></view>
@@ -70,32 +70,32 @@
<view class="nav-next"><text class="nav-icon"> > </text></view>
</view>
<view class="page-jump">
<text class="jump-txt">前往</text>
<text class="jump-txt">鍓嶅線</text>
<input class="jump-input" value="1" />
<text class="jump-txt">页</text>
<text class="jump-txt">椤?/text>
</view>
</view>
</view>
</view>
</view>
<!-- 侧边弹窗 (Drawer) -->
<!-- 渚ц竟寮圭獥 (Drawer) -->
<view v-if="showDrawer" class="drawer-mask" @click="closeDrawer">
<view class="drawer-content" @click.stop>
<view class="drawer-header">
<text class="drawer-title">{{ isEdit ? '编辑话术' : '添加话术' }}</text>
<text class="close-btn" @click="closeDrawer">×</text>
<text class="drawer-title">{{ isEdit ? '缂栬緫璇濇湳' : '娣诲姞璇濇湳' }}</text>
<text class="close-btn" @click="closeDrawer">脳</text>
</view>
<view class="drawer-body">
<view class="form-item">
<view class="label-box">
<text class="label-txt">话术分类:</text>
<text class="label-txt">璇濇湳鍒嗙被:</text>
</view>
<view class="input-box">
<view class="select-mock">
<text class="select-val">{{ formData.category || '请选择分类' }}</text>
<text class="arrow-down">▼</text>
<text class="select-val">{{ formData.category || '璇烽€夋嫨鍒嗙被' }}</text>
<text class="arrow-down">鈻?/text>
</view>
</view>
</view>
@@ -103,26 +103,26 @@
<view class="form-item">
<view class="label-box">
<text class="required">*</text>
<text class="label-txt">话术标题:</text>
<text class="label-txt">璇濇湳鏍囬:</text>
</view>
<view class="input-box">
<input class="input-base" v-model="formData.title" placeholder="请输入话术标题" />
<input class="input-base" v-model="formData.title" placeholder="璇疯緭鍏ヨ瘽鏈爣棰? />
</view>
</view>
<view class="form-item align-start">
<view class="label-box">
<text class="required">*</text>
<text class="label-txt">话术内容:</text>
<text class="label-txt">璇濇湳鍐呭:</text>
</view>
<view class="input-box">
<textarea class="textarea-base" v-model="formData.content" placeholder="请输入话术内容" />
<textarea class="textarea-base" v-model="formData.content" placeholder="璇疯緭鍏ヨ瘽鏈唴瀹? />
</view>
</view>
<view class="form-item">
<view class="label-box">
<text class="label-txt">排序:</text>
<text class="label-txt">鎺掑簭:</text>
</view>
<view class="input-box">
<input class="input-base" type="number" v-model="formData.sort" />
@@ -132,10 +132,10 @@
<view class="drawer-footer">
<view class="btn-cancel" @click="closeDrawer">
<text class="cancel-txt">取消</text>
<text class="cancel-txt">鍙栨秷</text>
</view>
<view class="btn-confirm" @click="submitForm">
<text class="confirm-txt">确定</text>
<text class="confirm-txt">纭畾</text>
</view>
</view>
</view>
@@ -161,8 +161,8 @@ interface Category {
}
const categories = ref<Category[]>([
{ id: 1, name: '全部' },
{ id: 2, name: '系统话术' }
{ id: 1, name: '鍏ㄩ儴' },
{ id: 2, name: '绯荤粺璇濇湳' }
])
const activeCategoryId = ref(1)
@@ -170,20 +170,20 @@ const activeCategoryId = ref(1)
const wordList = ref<WordItem[]>([
{
id: '67',
category: '系统默认',
title: '旗舰版介绍',
content: '【旗舰版】可以授权给公司或者个人，企业自用搭建，不限制授权域名，提供专属技术总监、产品总监等。',
category: '绯荤粺榛樿',
title: '鏃楄埌鐗堜粙缁?,
content: '銆愭棗鑸扮増銆戝彲浠ユ巿鏉冪粰鍏徃鎴栬€呬釜浜猴紝浼佷笟鑷敤鎼缓锛屼笉闄愬埗鎺堟潈鍩熷悕锛屾彁渚涗笓灞炴妧鏈€荤洃銆佷骇鍝佹€荤洃绛夈€?,
sort: 0,
time: '2024-09-27 10:15:07'
}
])
// 表单逻辑
// 琛ㄥ崟閫昏緫
const showDrawer = ref(false)
const isEdit = ref(false)
const formData = reactive({
id: '',
category: '系统话术',
category: '绯荤粺璇濇湳',
title: '',
content: '',
sort: 0
@@ -194,7 +194,7 @@ const selectCategory = (id: number) => {
}
const handleAddCategory = () => {
console.log('添加分类')
console.log('娣诲姞鍒嗙被')
}
const handleAddWord = () => {
@@ -221,7 +221,7 @@ const closeDrawer = () => {
}
const submitForm = () => {
console.log('提交表单', formData)
console.log('鎻愪氦琛ㄥ崟', formData)
showDrawer.value = false
}
</script>
@@ -246,7 +246,7 @@ const submitForm = () => {
gap: 20px;
}
/* 左侧分类 */
/* 宸︿晶鍒嗙被 */
.category-sidebar {
width: 280px;
display: flex;
@@ -307,7 +307,7 @@ const submitForm = () => {
color: #333;
}
/* 右侧内容 */
/* 鍙充晶鍐呭 */
.content-main {
flex: 1;
display: flex;
@@ -395,7 +395,7 @@ const submitForm = () => {
text-align: left;
}
/* 列宽分配 */
/* 鍒楀鍒嗛厤 */
.col-id { width: 60px; }
.col-cat { width: 100px; }
.col-title { width: 150px; }
@@ -421,7 +421,7 @@ const submitForm = () => {
margin: 0 10px;
}
/* 分页 */
/* 鍒嗛〉 */
.pagination-bar {
padding: 15px 20px;
display: flex;
@@ -478,7 +478,7 @@ const submitForm = () => {
font-size: 13px;
}
/* 抽屉 Drawer 1:1 复刻 - 修正位置到右侧 */
/* 鎶藉眽 Drawer 1:1 澶嶅埢 - 淇浣嶇疆鍒板彸渚?*/
.drawer-mask {
position: fixed;
top: 0;
@@ -492,10 +492,10 @@ const submitForm = () => {
.drawer-content {
position: absolute;
top: 0;
right: 0; /* 强制靠右占据右边屏幕 */
width: 50%; /* 占屏幕一半宽度 */
right: 0; /* 寮哄埗闈犲彸鍗犳嵁鍙宠竟灞忓箷 */
width: 50%; /* 鍗犲睆骞曚竴鍗婂搴?*/
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
@@ -624,3 +624,4 @@ const submitForm = () => {
.cancel-txt { font-size: 14px; color: #606266; }
.confirm-txt { font-size: 14px; color: #fff; }
</style>