335 lines
10 KiB
Plaintext
335 lines
10 KiB
Plaintext
<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, reactive } from 'vue'
|
|
|
|
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">
|
|
.admin-main {
|
|
padding: 0;
|
|
background-color: transparent;
|
|
min-height: auto;
|
|
}
|
|
|
|
.search-card {
|
|
background-color: #fff;
|
|
padding: 24px;
|
|
border-radius: 4px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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-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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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>
|