大致完成页面
This commit is contained in:
@@ -1,81 +1,445 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<view class="page-header">
|
||||
<text class="page-title">商品规格</text>
|
||||
<text class="page-subtitle">Component: ProductAttr</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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="admin-main">
|
||||
<!-- 头部搜索 -->
|
||||
<view class="search-card">
|
||||
<view class="search-row">
|
||||
<view class="search-item">
|
||||
<text class="search-label">规格搜索:</text>
|
||||
<input class="search-input" placeholder="请输入规格名称" />
|
||||
</view>
|
||||
<button class="btn-query">查询</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数据表格区域 -->
|
||||
<view class="table-card">
|
||||
<view class="table-toolbar">
|
||||
<button class="btn-add" @click="showModal = true">添加商品规格</button>
|
||||
<button class="btn-batch-del">批量删除</button>
|
||||
</view>
|
||||
|
||||
<view class="table-header">
|
||||
<view class="th-cell flex-1 row-center">
|
||||
<view class="checkbox-mock"></view>
|
||||
</view>
|
||||
<text class="th-cell flex-1">ID</text>
|
||||
<text class="th-cell flex-3">规格名称</text>
|
||||
<text class="th-cell flex-4">商品规格</text>
|
||||
<text class="th-cell flex-4">商品属性</text>
|
||||
<text class="th-cell flex-2 text-center">操作</text>
|
||||
</view>
|
||||
|
||||
<view class="table-body">
|
||||
<view v-if="list.length === 0" class="empty-box">
|
||||
<text class="empty-text">暂无数据</text>
|
||||
</view>
|
||||
<view v-for="(item, index) in list" :key="index" class="table-row">
|
||||
<view class="td-cell flex-1 row-center">
|
||||
<view class="checkbox-mock" :class="item.selected ? 'checked' : ''" @click="item.selected = !item.selected">
|
||||
<text v-if="item.selected" class="check-mark">✓</text>
|
||||
</view>
|
||||
</view>
|
||||
<text class="td-cell flex-1 color-9">{{ item.id }}</text>
|
||||
<text class="td-cell flex-3">{{ item.name }}</text>
|
||||
<text class="td-cell flex-4">{{ item.specs }}</text>
|
||||
<text class="td-cell flex-4">{{ item.attrs }}</text>
|
||||
<view class="td-cell flex-2 row-center">
|
||||
<text class="btn-link">编辑</text>
|
||||
<view class="divider"></view>
|
||||
<text class="btn-link delete" @click="deleteItem(index)">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 添加规格弹窗 -->
|
||||
<view class="modal-mask" v-if="showModal" @click="showModal = false">
|
||||
<view class="modal-content" @click.stop>
|
||||
<view class="modal-header">
|
||||
<text class="modal-title">添加商品规格</text>
|
||||
<text class="modal-close" @click="showModal = false">×</text>
|
||||
</view>
|
||||
<view class="modal-body">
|
||||
<view class="modal-form">
|
||||
<view class="form-item">
|
||||
<view class="form-label-box"><text class="form-label">规格名称:</text></view>
|
||||
<view class="form-input-box">
|
||||
<input class="modal-input" v-model="form.name" placeholder="请输入规格名称" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="form-label-box"><text class="form-label">商品规格:</text></view>
|
||||
<view class="form-input-box">
|
||||
<input class="modal-input" v-model="form.specs" placeholder="请输入商品规格" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="form-label-box"><text class="form-label">商品属性:</text></view>
|
||||
<view class="form-input-box">
|
||||
<input class="modal-input" v-model="form.attrs" placeholder="请输入商品属性" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-footer">
|
||||
<button class="btn-modal-cancel" @click="showModal = false">取消</button>
|
||||
<button class="btn-modal-submit" @click="saveAttr">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
|
||||
// TODO: 实现 商品规格 的具体功能
|
||||
const loading = ref<boolean>(false)
|
||||
interface AttrItem {
|
||||
id: number;
|
||||
name: string;
|
||||
specs: string;
|
||||
attrs: string;
|
||||
selected: boolean;
|
||||
}
|
||||
|
||||
const list = reactive<AttrItem[]>([
|
||||
{ id: 104, name: '颜色', specs: '红色,蓝色,黑色,白色', attrs: '颜色属性', selected: false },
|
||||
{ id: 105, name: '尺寸', specs: 'S,M,L,XL,XXL', attrs: '服装尺寸', selected: false },
|
||||
{ id: 106, name: '材质', specs: '纯棉,涤纶,真丝', attrs: '面料材质', selected: false },
|
||||
{ id: 107, name: '内存', specs: '8G,16G,32G', attrs: '硬件参数', selected: false },
|
||||
{ id: 108, name: '存储', specs: '128G,256G,512G', attrs: '容量', selected: false }
|
||||
])
|
||||
|
||||
const showModal = ref(false)
|
||||
const form = reactive({
|
||||
name: '',
|
||||
specs: '',
|
||||
attrs: ''
|
||||
})
|
||||
|
||||
function saveAttr() {
|
||||
if (!form.name) {
|
||||
uni.showToast({ title: '请输入规格名称', icon: 'none' })
|
||||
return
|
||||
}
|
||||
list.push({
|
||||
id: Math.floor(Math.random() * 1000),
|
||||
name: form.name,
|
||||
specs: form.specs,
|
||||
attrs: form.attrs,
|
||||
selected: false
|
||||
})
|
||||
showModal.value = false
|
||||
form.name = ''
|
||||
form.specs = ''
|
||||
form.attrs = ''
|
||||
uni.showToast({ title: '添加成功', icon: 'success' })
|
||||
}
|
||||
|
||||
function deleteItem(index: number) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定删除该规格吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
list.splice(index, 1)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
.admin-main {
|
||||
padding: 20px;
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
/* 搜索卡片 */
|
||||
.search-card {
|
||||
background-color: #fff;
|
||||
padding: 24px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
.search-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
.search-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
.search-label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.placeholder-card {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
.search-input {
|
||||
width: 250px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
.btn-query {
|
||||
width: 64px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.placeholder-desc {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
/* 表格区域 */
|
||||
.table-card {
|
||||
background-color: #fff;
|
||||
padding: 24px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.placeholder-info {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #1890ff;
|
||||
.table-toolbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 15px;
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
margin-left: 0;
|
||||
margin-right: 12px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-batch-del {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 15px;
|
||||
background-color: #fff;
|
||||
color: #606266;
|
||||
border: 1px solid #dcdfe6;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #f8f9fa;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
height: 48px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.th-cell {
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
min-height: 54px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.empty-box {
|
||||
padding: 60px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.td-cell {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.color-9 {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.checkbox-mock {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-mock.checked {
|
||||
background-color: #1890ff;
|
||||
border-color: #1890ff;
|
||||
}
|
||||
|
||||
.check-mark {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
font-size: 14px;
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-link.delete {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background-color: #f0f0f0;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.row-center {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Modal styles */
|
||||
.modal-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
width: 500px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
font-size: 24px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-bottom: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-label-box {
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.form-input-box {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.modal-input {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 12px 24px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn-modal-cancel, .btn-modal-submit {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 20px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.btn-modal-cancel {
|
||||
background-color: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.btn-modal-submit {
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.flex-1 { flex: 1; }
|
||||
.flex-2 { flex: 2; }
|
||||
.flex-3 { flex: 3; }
|
||||
.flex-4 { flex: 4; }
|
||||
</style>
|
||||
|
||||
|
||||
@@ -1,81 +1,661 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<view class="page-header">
|
||||
<text class="page-title">商品分类</text>
|
||||
<text class="page-subtitle">Component: ProductClassify</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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<template>
|
||||
<view class="admin-main">
|
||||
<!-- 头部搜索和操作 -->
|
||||
<view class="search-card">
|
||||
<view class="search-row">
|
||||
<view class="search-item">
|
||||
<text class="search-label">分类名称:</text>
|
||||
<input class="search-input" placeholder="请输入分类名称" />
|
||||
</view>
|
||||
<view class="search-item">
|
||||
<text class="search-label">状态:</text>
|
||||
<view class="mock-select">
|
||||
<text>全部</text>
|
||||
<text class="arrow-down"></text>
|
||||
</view>
|
||||
</view>
|
||||
<button class="btn-query">查询</button>
|
||||
<button class="btn-reset">重置</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数据表格区域 -->
|
||||
<view class="table-card">
|
||||
<view class="table-toolbar">
|
||||
<button class="btn-add" @click="openDrawer()">添加商品分类</button>
|
||||
</view>
|
||||
|
||||
<view class="table-header">
|
||||
<text class="th-cell flex-1">ID</text>
|
||||
<text class="th-cell flex-3">分类名称</text>
|
||||
<text class="th-cell flex-2">分类图标</text>
|
||||
<text class="th-cell flex-1">排序</text>
|
||||
<text class="th-cell flex-2 text-center">状态</text>
|
||||
<text class="th-cell flex-3 text-center">操作</text>
|
||||
</view>
|
||||
|
||||
<view class="table-body">
|
||||
<view v-for="(item, index) in list" :key="index" class="table-row-group">
|
||||
<!-- 父级 -->
|
||||
<view class="table-row">
|
||||
<text class="td-cell flex-1 color-9">{{ item.id }}</text>
|
||||
<view class="td-cell flex-3 row-layout">
|
||||
<text class="expand-icon" @click="item.expanded = !item.expanded">{{ item.expanded ? '' : '' }}</text>
|
||||
<text>{{ item.name }}</text>
|
||||
</view>
|
||||
<view class="td-cell flex-2">
|
||||
<image class="cate-icon" :src="item.icon" mode="aspectFit"></image>
|
||||
</view>
|
||||
<text class="td-cell flex-1">{{ item.sort }}</text>
|
||||
<view class="td-cell flex-2 row-center">
|
||||
<view class="switch-mock" :class="item.status ? 'switch-on' : ''" @click="toggleStatus(item)">
|
||||
<view class="switch-dot"></view>
|
||||
<text class="switch-text">{{ item.status ? '开启' : '关闭' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="td-cell flex-3 row-center">
|
||||
<text class="btn-link" @click="openDrawer(item)">编辑</text>
|
||||
<view class="divider"></view>
|
||||
<text class="btn-link delete" @click="deleteItem(item)">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 子级 -->
|
||||
<view v-if="item.expanded">
|
||||
<view v-for="(child, cIndex) in item.children" :key="cIndex" class="table-row sub-row">
|
||||
<text class="td-cell flex-1 color-9">{{ child.id }}</text>
|
||||
<view class="td-cell flex-3 row-layout pl-20">
|
||||
<text class="child-line"></text>
|
||||
<text>{{ child.name }}</text>
|
||||
</view>
|
||||
<view class="td-cell flex-2">
|
||||
<image class="cate-icon" :src="child.icon" mode="aspectFit"></image>
|
||||
</view>
|
||||
<text class="td-cell flex-1">{{ child.sort }}</text>
|
||||
<view class="td-cell flex-2 row-center">
|
||||
<view class="switch-mock" :class="child.status ? 'switch-on' : ''" @click="toggleStatus(child)">
|
||||
<view class="switch-dot"></view>
|
||||
<text class="switch-text">{{ child.status ? '开启' : '关闭' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="td-cell flex-3 row-center">
|
||||
<text class="btn-link" @click="openDrawer(child)">编辑</text>
|
||||
<view class="divider"></view>
|
||||
<text class="btn-link delete" @click="deleteItem(child)">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 添加/编辑抽屉 (50% 宽度，贴右侧展示) -->
|
||||
<view class="drawer-mask" v-if="showDrawerMask" @click="closeDrawer">
|
||||
<view class="drawer-content" @click.stop="" :class="{ 'drawer-show': showDrawer }">
|
||||
<view class="drawer-header">
|
||||
<text class="drawer-title">{{ isEdit ? '编辑分类' : '添加分类' }}</text>
|
||||
<text class="drawer-close" @click="closeDrawer"></text>
|
||||
</view>
|
||||
<scroll-view class="drawer-body" scroll-y="true">
|
||||
<view class="drawer-form">
|
||||
<view class="form-item">
|
||||
<view class="form-label-box"><text class="form-label">上级分类:</text></view>
|
||||
<view class="form-input-box">
|
||||
<view class="mock-select-full">
|
||||
<text>{{ form.parentName || '顶级分类' }}</text>
|
||||
<text class="arrow-down"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="form-label-box"><text class="form-label required">分类名称:</text></view>
|
||||
<view class="form-input-box">
|
||||
<input class="drawer-input" v-model="form.name" placeholder="请输入分类名称" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item align-start">
|
||||
<view class="form-label-box"><text class="form-label">分类图标:</text></view>
|
||||
<view class="form-input-box">
|
||||
<view class="upload-box">
|
||||
<text class="plus">+</text>
|
||||
<text class="upload-text">上传图片</text>
|
||||
</view>
|
||||
<text class="form-tip">建议尺寸：180*180</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="form-label-box"><text class="form-label">排序:</text></view>
|
||||
<view class="form-input-box">
|
||||
<input type="number" class="drawer-input" v-model="form.sort" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<view class="form-label-box"><text class="form-label">状态:</text></view>
|
||||
<view class="form-input-box">
|
||||
<view class="switch-mock" :class="form.status ? 'switch-on' : ''" @click="form.status = !form.status">
|
||||
<view class="switch-dot"></view>
|
||||
<text class="switch-text">{{ form.status ? '开启' : '关闭' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="drawer-footer">
|
||||
<button class="btn-footer-cancel" @click="closeDrawer">取消</button>
|
||||
<button class="btn-footer-submit" @click="saveCate">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
|
||||
// TODO: 实现 商品分类 的具体功能
|
||||
const loading = ref<boolean>(false)
|
||||
interface CateItem {
|
||||
id: number;
|
||||
name: string;
|
||||
icon: string;
|
||||
sort: number;
|
||||
status: boolean;
|
||||
expanded?: boolean;
|
||||
children?: CateItem[];
|
||||
parentId?: number;
|
||||
}
|
||||
|
||||
const list = reactive<CateItem[]>([
|
||||
{
|
||||
id: 100, name: '家用电器', icon: '/static/logo.png', sort: 1, status: true, expanded: true,
|
||||
children: [
|
||||
{ id: 101, name: '电视机', icon: '/static/logo.png', sort: 1, status: true, parentId: 100 },
|
||||
{ id: 102, name: '电冰箱', icon: '/static/logo.png', sort: 2, status: true, parentId: 100 }
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 200, name: '手机数码', icon: '/static/logo.png', sort: 2, status: true, expanded: false,
|
||||
children: [
|
||||
{ id: 201, name: '手机', icon: '/static/logo.png', sort: 1, status: true, parentId: 200 },
|
||||
{ id: 202, name: '耳机', icon: '/static/logo.png', sort: 2, status: true, parentId: 200 }
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
const showDrawerMask = ref(false)
|
||||
const showDrawer = ref(false)
|
||||
const isEdit = ref(false)
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
parentName: '',
|
||||
sort: 0,
|
||||
status: true
|
||||
})
|
||||
|
||||
function openDrawer(item: CateItem | null = null) {
|
||||
if (item != null) {
|
||||
isEdit.value = true
|
||||
form.name = item.name
|
||||
form.sort = item.sort
|
||||
form.status = item.status
|
||||
form.parentName = item.parentId != null ? '子分类' : '顶级分类'
|
||||
} else {
|
||||
isEdit.value = false
|
||||
form.name = ''
|
||||
form.sort = 0
|
||||
form.status = true
|
||||
form.parentName = '顶级分类'
|
||||
}
|
||||
showDrawerMask.value = true
|
||||
setTimeout(() => {
|
||||
showDrawer.value = true
|
||||
}, 50)
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
showDrawer.value = false
|
||||
setTimeout(() => {
|
||||
showDrawerMask.value = false
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function saveCate() {
|
||||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||||
closeDrawer()
|
||||
}
|
||||
|
||||
function toggleStatus(item: CateItem) {
|
||||
item.status = !item.status
|
||||
}
|
||||
|
||||
function deleteItem(item: CateItem) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定删除该分类吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({ title: '已模拟删除', icon: 'none' })
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
.admin-main {
|
||||
padding: 24px;
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
.search-card {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
.search-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
.search-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
.search-label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.placeholder-card {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
.search-input {
|
||||
width: 200px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
.mock-select {
|
||||
width: 150px;
|
||||
height: 32px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.placeholder-desc {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
.arrow-down {
|
||||
font-size: 10px;
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.placeholder-info {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #1890ff;
|
||||
.btn-query {
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 16px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.btn-reset {
|
||||
background-color: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
color: #666;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 16px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.table-card {
|
||||
background-color: #fff;
|
||||
padding: 24px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.table-toolbar {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 16px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #fafafa;
|
||||
height: 44px;
|
||||
align-items: center;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.th-cell {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.table-row-group {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
border-left: 1px solid #f0f0f0;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.sub-row {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.td-cell {
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.color-9 {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.pl-20 {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.child-line {
|
||||
color: #ccc;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.cate-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.expand-icon {
|
||||
font-size: 10px;
|
||||
color: #999;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
font-size: 14px;
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-link.delete {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background-color: #f0f0f0;
|
||||
margin: 0 12px;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.row-layout {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.row-center {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Switch Mock */
|
||||
.switch-mock {
|
||||
width: 54px;
|
||||
height: 24px;
|
||||
background-color: #ccc;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 6px;
|
||||
}
|
||||
|
||||
.switch-on {
|
||||
background-color: #1890ff;
|
||||
}
|
||||
|
||||
.switch-dot {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.switch-on .switch-dot {
|
||||
left: 33px;
|
||||
}
|
||||
|
||||
.switch-text {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.switch-on .switch-text {
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Drawer styles */
|
||||
.drawer-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
background-color: #fff;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.drawer-show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.drawer-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.drawer-close {
|
||||
font-size: 20px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.drawer-body {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.drawer-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.align-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.form-label-box {
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.required::before {
|
||||
content: '*';
|
||||
color: #ff4d4f;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.form-input-box {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.drawer-input {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.mock-select-full {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.upload-box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 1px dashed #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.plus {
|
||||
font-size: 24px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.form-tip {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn-footer-cancel,
|
||||
.btn-footer-submit {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 20px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.btn-footer-cancel {
|
||||
background-color: #fff;
|
||||
border: 1px solid #dcdfe6;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.btn-footer-submit {
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.flex-1 { flex: 1; }
|
||||
.flex-2 { flex: 2; }
|
||||
.flex-3 { flex: 3; }
|
||||
</style>
|
||||
|
||||
@@ -1,81 +1,504 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<view class="page-header">
|
||||
<text class="page-title">商品标签</text>
|
||||
<text class="page-subtitle">Component: ProductLabel</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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<template>
|
||||
<view class="admin-main">
|
||||
<view class="label-layout">
|
||||
<!-- 左侧标签组 -->
|
||||
<view class="label-group-aside">
|
||||
<view class="aside-header" @click="openGroupModal()">
|
||||
<text class="btn-group-add">+ 添加分组</text>
|
||||
</view>
|
||||
<scroll-view class="aside-list" :scroll-y="true">
|
||||
<view
|
||||
v-for="(group, gIndex) in groups"
|
||||
:key="gIndex"
|
||||
class="group-item"
|
||||
:class="activeGroupIndex === gIndex ? 'active' : ''"
|
||||
@click="activeGroupIndex = gIndex"
|
||||
>
|
||||
<view class="group-left">
|
||||
<image src="/static/logo.png" class="folder-icon" />
|
||||
<text class="group-name">{{ group.name }}</text>
|
||||
</view>
|
||||
<view class="group-ops">
|
||||
<text class="op-more">...</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 右侧标签列表 -->
|
||||
<view class="label-content-main">
|
||||
<view class="table-card-full">
|
||||
<view class="table-toolbar">
|
||||
<button class="btn-add-label" @click="openLabelDrawer()">添加标签</button>
|
||||
</view>
|
||||
|
||||
<view class="table-header-row">
|
||||
<text class="th-cell flex-1">ID</text>
|
||||
<text class="th-cell flex-3">标签名称</text>
|
||||
<text class="th-cell flex-3">分类名称</text>
|
||||
<text class="th-cell flex-2 text-center">状态</text>
|
||||
<text class="th-cell flex-2 text-center">移动端展示</text>
|
||||
<text class="th-cell flex-2 text-center">操作</text>
|
||||
</view>
|
||||
|
||||
<view class="table-body-scroll">
|
||||
<view v-if="filteredLabels.length === 0" class="empty-box">
|
||||
<text class="empty-text">该分组下暂无标签</text>
|
||||
</view>
|
||||
<view v-for="(label, lIndex) in filteredLabels" :key="lIndex" class="table-row-line">
|
||||
<text class="td-cell flex-1 color-9">{{ label.id }}</text>
|
||||
<view class="td-cell flex-3">
|
||||
<text class="label-tag-box">{{ label.name }}</text>
|
||||
</view>
|
||||
<text class="td-cell flex-3">{{ groups[activeGroupIndex]?.name }}</text>
|
||||
<view class="td-cell flex-2 row-center">
|
||||
<view class="status-switch-mini" :class="label.status ? 'active' : ''" @click="label.status = !label.status">
|
||||
<text class="switch-txt-inner">{{ label.status ? '开启' : '关闭' }}</text>
|
||||
<view class="switch-dot-mini"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="td-cell flex-2 row-center">
|
||||
<view class="status-switch-mini" :class="label.showInMobile ? 'active' : ''" @click="label.showInMobile = !label.showInMobile">
|
||||
<text class="switch-txt-inner">{{ label.showInMobile ? '开启' : '关闭' }}</text>
|
||||
<view class="switch-dot-mini"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="td-cell flex-2 row-center">
|
||||
<text class="btn-op-blue" @click="openLabelDrawer(label)">修改</text>
|
||||
<view class="v-line"></view>
|
||||
<text class="btn-op-red" @click="deleteLabel(label)">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 分页模拟 -->
|
||||
<view class="table-pagination">
|
||||
<text class="page-total">共 {{ filteredLabels.length }} 条</text>
|
||||
<view class="page-size-selector">
|
||||
<text>15条/页</text>
|
||||
<text class="arrow-down">v</text>
|
||||
</view>
|
||||
<view class="page-numbers">
|
||||
<text class="page-btn active">1</text>
|
||||
</view>
|
||||
<view class="page-jump">
|
||||
<text>前往</text>
|
||||
<input class="jump-input" :value="'1'" />
|
||||
<text>页</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 标签抽屉 (右侧展示) -->
|
||||
<view class="drawer-mask" v-if="showDrawerMask" @click="closeLabelDrawer">
|
||||
<view class="drawer-content" @click.stop="" :class="{ 'drawer-show': showDrawer }">
|
||||
<view class="drawer-header">
|
||||
<text class="drawer-title">添加标签</text>
|
||||
<text class="drawer-close" @click="closeLabelDrawer"></text>
|
||||
</view>
|
||||
<view class="drawer-body">
|
||||
<view class="form-item">
|
||||
<text class="form-label">标签名称:</text>
|
||||
<input class="drawer-input" v-model="labelForm.name" placeholder="请输入标签名称" />
|
||||
</view>
|
||||
<view class="form-item">
|
||||
<text class="form-label">所属分组:</text>
|
||||
<text class="form-value">{{ groups[activeGroupIndex]?.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="drawer-footer">
|
||||
<button class="btn-footer-cancel" @click="closeLabelDrawer">取消</button>
|
||||
<button class="btn-footer-submit" @click="closeLabelDrawer">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, reactive, computed } from 'vue'
|
||||
|
||||
// TODO: 实现 商品标签 的具体功能
|
||||
const loading = ref<boolean>(false)
|
||||
interface Label {
|
||||
id: number;
|
||||
name: string;
|
||||
groupId: number;
|
||||
status: boolean;
|
||||
showInMobile: boolean;
|
||||
}
|
||||
|
||||
interface Group {
|
||||
id: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const groups = reactive<Group[]>([
|
||||
{ id: 0, name: '全部' } as Group,
|
||||
{ id: 1, name: '商务礼品专题' } as Group,
|
||||
{ id: 2, name: '员工福利' } as Group,
|
||||
{ id: 3, name: '主题' } as Group
|
||||
])
|
||||
|
||||
const labels = reactive<Label[]>([
|
||||
{ id: 1, name: '外事礼品', groupId: 1, status: true, showInMobile: true } as Label,
|
||||
{ id: 2, name: '会议庆典', groupId: 1, status: true, showInMobile: true } as Label,
|
||||
{ id: 3, name: '入职纪念', groupId: 2, status: true, showInMobile: true } as Label,
|
||||
{ id: 4, name: '员工激励', groupId: 2, status: true, showInMobile: true } as Label,
|
||||
{ id: 5, name: '员工生日', groupId: 2, status: true, showInMobile: true } as Label,
|
||||
{ id: 6, name: '三八妇女节', groupId: 3, status: true, showInMobile: true } as Label,
|
||||
{ id: 7, name: '新春快乐', groupId: 3, status: true, showInMobile: true } as Label
|
||||
])
|
||||
|
||||
const activeGroupIndex = ref(0)
|
||||
|
||||
const filteredLabels = computed((): Label[] => {
|
||||
const activeGroup = groups[activeGroupIndex.value]
|
||||
if (activeGroupIndex.value === 0) return labels
|
||||
return labels.filter((l: Label): boolean => l.groupId === activeGroup.id)
|
||||
})
|
||||
|
||||
// Drawer logic
|
||||
const showDrawerMask = ref(false)
|
||||
const showDrawer = ref(false)
|
||||
const labelForm = reactive({ name: '' })
|
||||
|
||||
function openLabelDrawer(label: Label | null = null) {
|
||||
if (label) { labelForm.name = label.name } else { labelForm.name = '' }
|
||||
showDrawerMask.value = true
|
||||
setTimeout(() => {
|
||||
showDrawer.value = true
|
||||
}, 50)
|
||||
}
|
||||
|
||||
function closeLabelDrawer() {
|
||||
showDrawer.value = false
|
||||
setTimeout(() => {
|
||||
showDrawerMask.value = false
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function openGroupModal() {
|
||||
uni.showToast({ title: '添加分组功能已模拟', icon: 'none' })
|
||||
}
|
||||
|
||||
function deleteLabel(label: Label) {
|
||||
const idx = labels.indexOf(label)
|
||||
if (idx > -1) { labels.splice(idx, 1) }
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
.admin-main {
|
||||
padding: 20px;
|
||||
background-color: #f0f2f5;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
.label-layout {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
/* 左侧 */
|
||||
.label-group-aside {
|
||||
width: 200px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
.aside-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
.btn-group-add { font-size: 14px; color: #999; }
|
||||
|
||||
.aside-list { flex: 1; }
|
||||
|
||||
.group-item {
|
||||
padding: 12px 16px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
border-left: 3px solid transparent;
|
||||
}
|
||||
|
||||
.placeholder-card {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
.group-item.active {
|
||||
background-color: #e6f7ff;
|
||||
color: #1890ff;
|
||||
border-left-color: #1890ff;
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
.group-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.placeholder-desc {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
.folder-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.placeholder-info {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #1890ff;
|
||||
.group-name { font-size: 14px; }
|
||||
.op-more { color: #ccc; }
|
||||
|
||||
/* 右侧 */
|
||||
.label-content-main {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.table-card-full {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.table-toolbar { margin-bottom: 20px; }
|
||||
|
||||
.btn-add-label {
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.table-header-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #fafafa;
|
||||
height: 44px;
|
||||
align-items: center;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.th-cell { font-size: 14px; font-weight: bold; padding: 0 12px; }
|
||||
|
||||
.table-body-scroll { flex: 1; overflow-y: auto; }
|
||||
|
||||
.table-row-line {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
min-height: 54px;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
border-left: 1px solid #f0f0f0;
|
||||
border-right: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.td-cell { padding: 0 12px; font-size: 14px; color: #666; }
|
||||
.color-9 { color: #999; }
|
||||
|
||||
.label-tag-box {
|
||||
background-color: #f0f9eb;
|
||||
color: #67c23a;
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status-switch-mini {
|
||||
width: 60px;
|
||||
height: 24px;
|
||||
background-color: #ccc;
|
||||
border-radius: 12px;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.status-switch-mini.active { background-color: #1890ff; }
|
||||
|
||||
.switch-txt-inner {
|
||||
font-size: 11px;
|
||||
color: #fff;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.status-switch-mini.active .switch-txt-inner {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.switch-dot-mini {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 3px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.status-switch-mini.active .switch-dot-mini { left: 39px; }
|
||||
|
||||
.btn-op-blue { color: #1890ff; font-size: 14px; cursor: pointer; }
|
||||
.btn-op-red { color: #ff4d4f; font-size: 14px; cursor: pointer; }
|
||||
.v-line { width: 1px; height: 12px; background-color: #eee; margin: 0 10px; }
|
||||
|
||||
/* 分页 */
|
||||
.table-pagination {
|
||||
padding-top: 20px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.page-total { font-size: 13px; color: #666; margin-right: 12px; }
|
||||
|
||||
.page-size-selector {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border: 1px solid #dcdfe6;
|
||||
padding: 0 8px;
|
||||
height: 28px;
|
||||
border-radius: 4px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.page-size-selector text { font-size: 12px; }
|
||||
.arrow-down { margin-left: 5px; color: #999; }
|
||||
|
||||
.page-numbers { display: flex; flex-direction: row; margin-right: 12px; }
|
||||
|
||||
.page-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
.page-btn.active { background-color: #1890ff; color: #fff; border-color: #1890ff; }
|
||||
|
||||
.page-jump {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.jump-input {
|
||||
width: 40px;
|
||||
height: 28px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
/* Drawer styles */
|
||||
.drawer-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.drawer-content {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
background-color: #fff;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.drawer-show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.drawer-title { font-size: 16px; font-weight: bold; }
|
||||
.drawer-close { font-size: 20px; color: #999; cursor: pointer; }
|
||||
|
||||
.drawer-body { flex: 1; padding: 24px; }
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-label { width: 100px; font-size: 14px; color: #666; }
|
||||
.form-value { font-size: 14px; color: #333; }
|
||||
|
||||
.drawer-input {
|
||||
flex: 1;
|
||||
height: 36px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.drawer-footer {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn-footer-cancel, .btn-footer-submit {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 20px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.btn-footer-cancel { background-color: #fff; border: 1px solid #dcdfe6; color: #666; }
|
||||
.btn-footer-submit { background-color: #1890ff; color: #fff; border: none; }
|
||||
|
||||
.empty-box { padding: 40px 0; text-align: center; }
|
||||
.empty-text { font-size: 13px; color: #999; }
|
||||
|
||||
.row-center { display: flex; flex-direction: row; justify-content: center; align-items: center; }
|
||||
.flex-1 { flex: 1; }
|
||||
.flex-2 { flex: 2; }
|
||||
.flex-3 { flex: 3; }
|
||||
</style>
|
||||
|
||||
@@ -1,81 +1,334 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<view class="page-header">
|
||||
<text class="page-title">商品参数</text>
|
||||
<text class="page-subtitle">Component: ProductParam</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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<template>
|
||||
<view class="admin-main">
|
||||
<!-- 头部搜索 -->
|
||||
<view class="search-card">
|
||||
<view class="search-row">
|
||||
<view class="search-item">
|
||||
<text class="search-label">模板搜索:</text>
|
||||
<input class="search-input" placeholder="请输入模板名称" />
|
||||
</view>
|
||||
<button class="btn-query">查询</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数据表格区域 -->
|
||||
<view class="table-card">
|
||||
<view class="table-toolbar">
|
||||
<button class="btn-add" @click="openDrawer()">添加商品参数</button>
|
||||
</view>
|
||||
|
||||
<view class="table-header">
|
||||
<text class="th-cell flex-1">ID</text>
|
||||
<text class="th-cell flex-3">参数模板名称</text>
|
||||
<text class="th-cell flex-5">参数详情</text>
|
||||
<text class="th-cell flex-2 text-center">操作</text>
|
||||
</view>
|
||||
|
||||
<view class="table-body">
|
||||
<view v-if="list.length === 0" class="empty-box">
|
||||
<text class="empty-text">暂无数据</text>
|
||||
</view>
|
||||
<view v-for="(item, index) in list" :key="index" class="table-row">
|
||||
<text class="td-cell flex-1 color-9">{{ item.id }}</text>
|
||||
<text class="td-cell flex-3">{{ item.name }}</text>
|
||||
<view class="td-cell flex-5">
|
||||
<text class="param-tags">{{ formatParams(item.params) }}</text>
|
||||
</view>
|
||||
<view class="td-cell flex-2 row-center">
|
||||
<text class="btn-link" @click="openDrawer(item)">编辑</text>
|
||||
<view class="divider"></view>
|
||||
<text class="btn-link delete" @click="deleteItem(index)">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 添加/编辑参数抽屉 (右侧 50%) -->
|
||||
<view class="drawer-mask" v-if="showDrawerMask" @click="closeDrawer">
|
||||
<view class="drawer-content" @click.stop="" :class="{ 'drawer-show': showDrawer }">
|
||||
<view class="drawer-header">
|
||||
<text class="drawer-title">商品参数</text>
|
||||
<text class="drawer-close" @click="closeDrawer"></text>
|
||||
</view>
|
||||
<scroll-view class="drawer-body" scroll-y="true">
|
||||
<view class="drawer-form-box">
|
||||
<view class="form-item-grp">
|
||||
<view class="item-label-box"><text class="item-label">模板名称:</text></view>
|
||||
<view class="item-value-box">
|
||||
<input class="styled-input" v-model="form.name" placeholder="请输入模板名称" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item-grp">
|
||||
<view class="item-label-box"><text class="item-label">排序:</text></view>
|
||||
<view class="item-value-box">
|
||||
<input type="number" class="styled-input" v-model="form.sort" placeholder="请输入排序" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="param-edit-section">
|
||||
<view class="param-grid-head">
|
||||
<text class="grid-th flex-2 pl-40">参数名称</text>
|
||||
<text class="grid-th flex-3">参数值</text>
|
||||
<text class="grid-th flex-1 text-center">操作</text>
|
||||
</view>
|
||||
<view class="param-grid-list">
|
||||
<view v-for="(p, pi) in form.params" :key="pi" class="param-grid-row">
|
||||
<view class="drag-handle-box flex-center">
|
||||
<view class="dots-icon"></view>
|
||||
</view>
|
||||
<view class="grid-td flex-2">
|
||||
<input class="grid-cell-input" v-model="p.label" placeholder="请输入参数名称" />
|
||||
</view>
|
||||
<view class="grid-td flex-3">
|
||||
<input class="grid-cell-input" v-model="p.value" placeholder="请输入参数值" />
|
||||
</view>
|
||||
<view class="grid-td flex-1 row-center">
|
||||
<text class="btn-del-text" @click="removeParamRow(pi)">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<button class="btn-add-row" @click="addParamRow">添加参数</button>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="drawer-footer-actions">
|
||||
<button class="btn-act-cancel" @click="closeDrawer">取消</button>
|
||||
<button class="btn-act-confirm" @click="saveParam">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
|
||||
// TODO: 实现 商品参数 的具体功能
|
||||
const loading = ref<boolean>(false)
|
||||
interface ParamKV {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
interface ParamItem {
|
||||
id: number;
|
||||
name: string;
|
||||
sort: number;
|
||||
params: ParamKV[];
|
||||
}
|
||||
|
||||
const list = reactive<ParamItem[]>([
|
||||
{ id: 1, name: '手机数码', sort: 1, params: [{label: '品牌', value: '华为'}, {label: '型号', value: 'Mate 60'}] as ParamKV[] },
|
||||
{ id: 2, name: '家用电器', sort: 2, params: [{label: '能效等级', value: '一级'}, {label: '产地', value: '中国'}] as ParamKV[] }
|
||||
])
|
||||
|
||||
const showDrawerMask = ref(false)
|
||||
const showDrawer = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const editIndex = ref(-1)
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
sort: 0,
|
||||
params: [] as ParamKV[]
|
||||
})
|
||||
|
||||
function formatParams(params: ParamKV[]): string {
|
||||
return params.map(p => p.label + ':' + p.value).join(' | ')
|
||||
}
|
||||
|
||||
function openDrawer(item: ParamItem | null = null) {
|
||||
if (item != null) {
|
||||
isEdit.value = true
|
||||
form.name = item.name
|
||||
form.sort = item.sort
|
||||
form.params = JSON.parse<ParamKV[]>(JSON.stringify(item.params)) as ParamKV[]
|
||||
editIndex.value = list.indexOf(item)
|
||||
} else {
|
||||
isEdit.value = false
|
||||
form.name = ''
|
||||
form.sort = 0
|
||||
form.params = [{ label: '', value: '' }] as ParamKV[]
|
||||
}
|
||||
|
||||
showDrawerMask.value = true
|
||||
setTimeout(() => {
|
||||
showDrawer.value = true
|
||||
}, 50)
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
showDrawer.value = false
|
||||
setTimeout(() => {
|
||||
showDrawerMask.value = false
|
||||
}, 300)
|
||||
}
|
||||
|
||||
function addParamRow() {
|
||||
form.params.push({ label: '', value: '' } as ParamKV)
|
||||
}
|
||||
|
||||
function removeParamRow(index: number) {
|
||||
form.params.splice(index, 1)
|
||||
}
|
||||
|
||||
function saveParam() {
|
||||
if (!form.name) {
|
||||
uni.showToast({ title: '请输入模板名称', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (isEdit.value) {
|
||||
const item = list[editIndex.value]
|
||||
item.name = form.name
|
||||
item.sort = form.sort
|
||||
item.params = JSON.parse<ParamKV[]>(JSON.stringify(form.params)) as ParamKV[]
|
||||
} else {
|
||||
list.unshift({
|
||||
id: Date.now() % 1000,
|
||||
name: form.name,
|
||||
sort: form.sort,
|
||||
params: JSON.parse<ParamKV[]>(JSON.stringify(form.params)) as ParamKV[]
|
||||
} as ParamItem)
|
||||
}
|
||||
closeDrawer()
|
||||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||||
}
|
||||
|
||||
function deleteItem(index: number) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定删除该参数模板吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
list.splice(index, 1)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
.admin-main {
|
||||
padding: 24px;
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
.search-card {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
.search-row { display: flex; flex-direction: row; align-items: center; }
|
||||
|
||||
.search-item { display: flex; flex-direction: row; align-items: center; margin-right: 24px; }
|
||||
.search-label { font-size: 14px; margin-right: 12px; }
|
||||
.search-input { width: 220px; height: 32px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 12px; font-size: 14px; }
|
||||
|
||||
.btn-query { background-color: #1890ff; color: #fff; height: 32px; line-height: 32px; padding: 0 20px; border-radius: 4px; border: none; font-size: 14px; margin: 0; }
|
||||
|
||||
.table-card { background-color: #fff; padding: 24px; border-radius: 4px; }
|
||||
.table-toolbar { margin-bottom: 20px; }
|
||||
.btn-add { background-color: #1890ff; color: #fff; height: 32px; line-height: 32px; padding: 0 16px; border-radius: 4px; border: none; font-size: 14px; margin: 0; }
|
||||
|
||||
.table-header { display: flex; flex-direction: row; background-color: #fafafa; height: 44px; align-items: center; border: 1px solid #f0f0f0; }
|
||||
.th-cell { font-size: 14px; font-weight: bold; padding: 0 12px; }
|
||||
|
||||
.table-row { display: flex; flex-direction: row; min-height: 54px; align-items: center; border-bottom: 1px solid #f0f0f0; border-left: 1px solid #f0f0f0; border-right: 1px solid #f0f0f0; }
|
||||
|
||||
.td-cell { padding: 0 12px; font-size: 14px; color: #666; }
|
||||
.color-9 { color: #999; }
|
||||
.param-tags { color: #1890ff; }
|
||||
|
||||
.btn-link { color: #1890ff; font-size: 14px; cursor: pointer; }
|
||||
.btn-link.delete { color: #ff4d4f; }
|
||||
.divider { width: 1px; height: 12px; background-color: #eee; margin: 0 10px; }
|
||||
|
||||
.flex-center { display: flex; justify-content: center; align-items: center; }
|
||||
.row-center { display: flex; flex-direction: row; justify-content: center; align-items: center; }
|
||||
|
||||
/* Drawer styles */
|
||||
.drawer-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
.drawer-content {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 50%;
|
||||
background-color: #fff;
|
||||
transform: translateX(100%);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
.drawer-show {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.placeholder-card {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
.drawer-header {
|
||||
padding: 20px 24px; border-bottom: 1px solid #f0f0f0;
|
||||
display: flex; flex-direction: row; justify-content: space-between; align-items: center;
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
.drawer-title { font-size: 16px; font-weight: bold; }
|
||||
.drawer-close { font-size: 20px; color: #999; cursor: pointer; }
|
||||
|
||||
.drawer-body { flex: 1; padding: 24px; }
|
||||
|
||||
.form-item-grp { display: flex; flex-direction: row; margin-bottom: 24px; align-items: center; }
|
||||
.item-label-box { width: 100px; text-align: right; margin-right: 16px; }
|
||||
.item-label { font-size: 14px; color: #333; }
|
||||
.item-value-box { flex: 1; }
|
||||
.styled-input { width: 100%; height: 36px; border: 1px solid #dcdfe6; border-radius: 4px; padding: 0 12px; font-size: 14px; }
|
||||
|
||||
.param-edit-section { margin-top: 20px; border: 1px solid #f0f0f0; border-radius: 4px; padding: 12px; }
|
||||
|
||||
.param-grid-head { display: flex; flex-direction: row; background-color: #f8f9fa; height: 40px; align-items: center; border-bottom: 1px solid #f0f0f0; }
|
||||
.grid-th { font-size: 13px; font-weight: bold; color: #666; }
|
||||
.pl-40 { padding-left: 40px; }
|
||||
|
||||
.param-grid-row { display: flex; flex-direction: row; height: 48px; align-items: center; border-bottom: 1px solid #f0f0f0; }
|
||||
|
||||
.drag-handle-box { width: 40px; height: 40px; }
|
||||
.dots-icon {
|
||||
width: 14px; height: 10px;
|
||||
background-image: radial-gradient(#ccc 2px, transparent 2px);
|
||||
background-size: 4px 4px;
|
||||
}
|
||||
|
||||
.placeholder-desc {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
.grid-td { padding: 0 8px; }
|
||||
.grid-cell-input { width: 100%; height: 32px; border: 1px solid transparent; padding: 0 8px; font-size: 13px; }
|
||||
.grid-cell-input:focus { border-bottom: 1px solid #1890ff; }
|
||||
|
||||
.btn-del-text { color: #ff4d4f; font-size: 13px; cursor: pointer; }
|
||||
|
||||
.btn-add-row {
|
||||
margin-top: 16px; height: 32px; line-height: 32px;
|
||||
border: 1px dashed #1890ff; color: #1890ff; background-color: #fff;
|
||||
font-size: 13px; border-radius: 4px;
|
||||
}
|
||||
|
||||
.placeholder-info {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #1890ff;
|
||||
.drawer-footer-actions {
|
||||
padding: 16px 24px; border-top: 1px solid #f0f0f0;
|
||||
display: flex; flex-direction: row; justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn-act-cancel, .btn-act-confirm { height: 32px; line-height: 32px; padding: 0 20px; border-radius: 4px; font-size: 14px; margin-left: 12px; }
|
||||
.btn-act-cancel { background-color: #fff; border: 1px solid #dcdfe6; color: #606266; }
|
||||
.btn-act-confirm { background-color: #1890ff; color: #fff; border: none; }
|
||||
|
||||
.flex-1 { flex: 1; }
|
||||
.flex-2 { flex: 2; }
|
||||
.flex-3 { flex: 3; }
|
||||
.flex-5 { flex: 5; }
|
||||
</style>
|
||||
|
||||
@@ -1,81 +1,422 @@
|
||||
<template>
|
||||
<view class="page-container">
|
||||
<view class="page-header">
|
||||
<text class="page-title">商品保障</text>
|
||||
<text class="page-subtitle">Component: ProductProtection</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>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="admin-main">
|
||||
<!-- 头部提示 -->
|
||||
<view class="alert-info-box">
|
||||
<text class="alert-info-txt">商品保障可在商品详情页展示，提升用户购买意愿。</text>
|
||||
</view>
|
||||
|
||||
<!-- 数据表格区域 -->
|
||||
<view class="table-card">
|
||||
<view class="table-toolbar">
|
||||
<button class="btn-primary-add" @click="openModal()">添加商品保障</button>
|
||||
</view>
|
||||
|
||||
<view class="table-header-pane">
|
||||
<view class="th flex-1">ID</view>
|
||||
<view class="th flex-2">图标</view>
|
||||
<view class="th flex-4">服务条款名称</view>
|
||||
<view class="th flex-5">服务描述</view>
|
||||
<view class="th flex-2 text-center">状态</view>
|
||||
<view class="th flex-2 text-center">操作</view>
|
||||
</view>
|
||||
|
||||
<view class="table-body">
|
||||
<view v-if="list.length === 0" class="empty-box">
|
||||
<text class="empty-text">暂无数据</text>
|
||||
</view>
|
||||
<view v-for="(item, index) in list" :key="index" class="table-row-item">
|
||||
<text class="td flex-1 color-9">{{ item.id }}</text>
|
||||
<view class="td flex-2">
|
||||
<image class="protection-icon-img" :src="item.icon" mode="aspectFit"></image>
|
||||
</view>
|
||||
<text class="td flex-4">{{ item.name }}</text>
|
||||
<text class="td flex-5 color-6">{{ item.desc }}</text>
|
||||
<view class="td flex-2 row-center">
|
||||
<view class="status-switch-mini" :class="item.status ? 'active' : ''" @click="toggleStatus(index)">
|
||||
<view class="switch-dot-mini"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="td flex-2 row-center">
|
||||
<text class="btn-action-blue" @click="openModal(item)">编辑</text>
|
||||
<view class="v-divider-line"></view>
|
||||
<text class="btn-action-red" @click="deleteItem(index)">删除</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 添加/编辑弹窗 (居中 Modal) -->
|
||||
<view class="modal-overlay" v-if="showModal" @click="closeModal">
|
||||
<view class="modal-main-pane" @click.stop>
|
||||
<view class="modal-header-box">
|
||||
<text class="modal-title-txt">添加保障</text>
|
||||
<text class="modal-close-icon" @click="closeModal">×</text>
|
||||
</view>
|
||||
<view class="modal-body-form">
|
||||
<view class="form-item-box">
|
||||
<view class="label-box"><text class="form-label font-star">保障名称:</text></view>
|
||||
<view class="val-box">
|
||||
<input class="input-ctrl" v-model="form.name" placeholder="请输入保障名称" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item-box row-align-start">
|
||||
<view class="label-box"><text class="form-label font-star">保障内容:</text></view>
|
||||
<view class="val-box">
|
||||
<textarea class="textarea-ctrl" v-model="form.desc" placeholder="请输入保障内容" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item-box">
|
||||
<view class="label-box"><text class="form-label">图标:</text></view>
|
||||
<view class="val-box">
|
||||
<view class="icon-upload-placeholder" @click="mockIconPicker">
|
||||
<image v-if="form.icon" :src="form.icon" class="icon-preview-img"></image>
|
||||
<image v-else src="/static/logo.png" class="icon-empty-img" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item-box">
|
||||
<view class="label-box"><text class="form-label">排序:</text></view>
|
||||
<view class="val-box">
|
||||
<input type="number" class="input-ctrl" v-model="form.sort" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="form-item-box">
|
||||
<view class="label-box"><text class="form-label">是否显示:</text></view>
|
||||
<view class="val-box row-center-start">
|
||||
<view class="radio-item" @click="form.status = true">
|
||||
<view class="radio-circle" :class="form.status ? 'radio-checked' : ''"></view>
|
||||
<text class="radio-txt">显示</text>
|
||||
</view>
|
||||
<view class="radio-item" @click="form.status = false">
|
||||
<view class="radio-circle" :class="!form.status ? 'radio-checked' : ''"></view>
|
||||
<text class="radio-txt">隐藏</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="modal-footer-box">
|
||||
<button class="btn-foot-cancel" @click="closeModal">取消</button>
|
||||
<button class="btn-foot-submit" @click="saveProtection">确定</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
|
||||
// TODO: 实现 商品保障 的具体功能
|
||||
const loading = ref<boolean>(false)
|
||||
interface ProtectionItem {
|
||||
id: number;
|
||||
name: string;
|
||||
icon: string;
|
||||
desc: string;
|
||||
status: boolean;
|
||||
sort: number;
|
||||
}
|
||||
|
||||
const list = reactive<ProtectionItem[]>([
|
||||
{ id: 1, name: '正品保障', icon: '/static/logo.png', desc: '该商品由平台认证，保证百分百正品。', status: true, sort: 0 },
|
||||
{ id: 2, name: '七天无理由', icon: '/static/logo.png', desc: '商品在不影响二次销售的情况下，支持7天无理由退换。', status: true, sort: 0 }
|
||||
])
|
||||
|
||||
const showModal = ref(false)
|
||||
const isEdit = ref(false)
|
||||
const editIndex = ref(-1)
|
||||
|
||||
const form = reactive({
|
||||
name: '',
|
||||
icon: '',
|
||||
desc: '',
|
||||
status: true,
|
||||
sort: 0
|
||||
})
|
||||
|
||||
function openModal(item: ProtectionItem | null = null) {
|
||||
if (item) {
|
||||
isEdit.value = true
|
||||
form.name = item.name
|
||||
form.icon = item.icon
|
||||
form.desc = item.desc
|
||||
form.status = item.status
|
||||
form.sort = item.sort
|
||||
editIndex.value = list.indexOf(item)
|
||||
} else {
|
||||
isEdit.value = false
|
||||
form.name = ''
|
||||
form.icon = ''
|
||||
form.desc = ''
|
||||
form.status = true
|
||||
form.sort = 0
|
||||
}
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
showModal.value = false
|
||||
}
|
||||
|
||||
function mockIconPicker() {
|
||||
uni.showToast({ title: '已模拟选择图标', icon: 'none' })
|
||||
form.icon = '/static/logo.png'
|
||||
}
|
||||
|
||||
function saveProtection() {
|
||||
if (!form.name || !form.desc) {
|
||||
uni.showToast({ title: '请输入必填项', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (isEdit.value) {
|
||||
const item = list[editIndex.value]
|
||||
item.name = form.name
|
||||
item.icon = form.icon
|
||||
item.desc = form.desc
|
||||
item.status = form.status
|
||||
item.sort = form.sort
|
||||
} else {
|
||||
list.unshift({
|
||||
id: Date.now() % 1000,
|
||||
name: form.name,
|
||||
icon: form.icon || '/static/logo.png',
|
||||
desc: form.desc,
|
||||
status: form.status,
|
||||
sort: form.sort
|
||||
})
|
||||
}
|
||||
closeModal()
|
||||
uni.showToast({ title: '保存成功', icon: 'success' })
|
||||
}
|
||||
|
||||
function toggleStatus(index: number) {
|
||||
list[index].status = !list[index].status
|
||||
}
|
||||
|
||||
function deleteItem(index: number) {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '确定删除该保障条款吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
list.splice(index, 1)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.page-container {
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
.admin-main {
|
||||
padding: 20px;
|
||||
background-color: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 20px;
|
||||
.alert-info-box {
|
||||
background-color: #e6f7ff;
|
||||
border: 1px solid #91d5ff;
|
||||
padding: 10px 16px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 8px;
|
||||
.alert-info-txt { font-size: 14px; color: #1890ff; }
|
||||
|
||||
.table-card {
|
||||
background-color: #fff;
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
.table-toolbar { margin-bottom: 20px; }
|
||||
|
||||
.btn-primary-add {
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 24px;
|
||||
.table-header-pane {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #f8f9fa;
|
||||
height: 44px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.placeholder-card {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
.th { font-size: 14px; font-weight: bold; padding: 0 12px; }
|
||||
|
||||
.table-row-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
min-height: 60px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.placeholder-title {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
margin-bottom: 12px;
|
||||
.td { padding: 0 12px; font-size: 14px; }
|
||||
.color-9 { color: #999; }
|
||||
.color-6 { color: #666; }
|
||||
|
||||
.protection-icon-img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.placeholder-desc {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 8px;
|
||||
/* Switch */
|
||||
.status-switch-mini {
|
||||
width: 44px;
|
||||
height: 20px;
|
||||
background-color: #ccc;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.placeholder-info {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #1890ff;
|
||||
.status-switch-mini.active { background-color: #1890ff; }
|
||||
.switch-dot-mini {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
transition: left 0.3s;
|
||||
}
|
||||
</style>
|
||||
.status-switch-mini.active .switch-dot-mini { left: 26px; }
|
||||
|
||||
.btn-action-blue { color: #1890ff; font-size: 14px; cursor: pointer; }
|
||||
.btn-action-red { color: #ff4d4f; font-size: 14px; cursor: pointer; }
|
||||
.v-divider-line { width: 1px; height: 12px; background-color: #eee; margin: 0 10px; }
|
||||
.row-center { display: flex; flex-direction: row; justify-content: center; align-items: center; }
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
z-index: 2000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-main-pane {
|
||||
width: 600px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-header-box {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.modal-title-txt { font-size: 16px; font-weight: bold; }
|
||||
.modal-close-icon { font-size: 18px; color: #999; cursor: pointer; }
|
||||
|
||||
.modal-body-form { padding: 24px; }
|
||||
|
||||
.form-item-box { display: flex; flex-direction: row; margin-bottom: 20px; align-items: center; }
|
||||
.row-align-start { align-items: flex-start; }
|
||||
|
||||
.label-box { width: 100px; text-align: right; margin-right: 16px; }
|
||||
.form-label { font-size: 14px; color: #333; }
|
||||
.font-star::before { content: '*'; color: #ff4d4f; margin-right: 4px; }
|
||||
|
||||
.val-box { flex: 1; }
|
||||
|
||||
.input-ctrl {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 0 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.textarea-ctrl {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.icon-upload-placeholder {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-empty-img { width: 24px; height: 24px; opacity: 0.3; }
|
||||
.icon-preview-img { width: 100%; height: 100%; }
|
||||
|
||||
.row-center-start { display: flex; flex-direction: row; align-items: center; }
|
||||
|
||||
.radio-item { display: flex; flex-direction: row; align-items: center; margin-right: 20px; cursor: pointer; }
|
||||
.radio-circle {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 50%;
|
||||
margin-right: 6px;
|
||||
position: relative;
|
||||
}
|
||||
.radio-checked { border-color: #1890ff; background-color: #1890ff; }
|
||||
.radio-checked::after {
|
||||
content: '';
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
}
|
||||
.radio-txt { font-size: 14px; color: #333; }
|
||||
|
||||
.modal-footer-box {
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn-foot-cancel, .btn-foot-submit {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding: 0 20px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.btn-foot-cancel { background-color: #fff; border: 1px solid #dcdfe6; color: #606266; }
|
||||
.btn-foot-submit { background-color: #1890ff; color: #fff; border: none; }
|
||||
|
||||
.flex-1 { flex: 1; }
|
||||
.flex-2 { flex: 2; }
|
||||
.flex-4 { flex: 4; }
|
||||
.flex-5 { flex: 5; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user