398 lines
14 KiB
Plaintext
398 lines
14 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 pagedList" :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>
|
|
|
|
<CommonPagination
|
|
v-if="true"
|
|
:total="total"
|
|
:loading="false"
|
|
:currentPage="currentPage"
|
|
:pageSize="pageSize"
|
|
:pageSizeOptionLabels="pageSizeOptionLabels"
|
|
:pageSizeIndex="pageSizeIndex"
|
|
:visiblePages="visiblePages"
|
|
:totalPage="totalPage"
|
|
:jumpPageInput="jumpPageInput"
|
|
@page-size-change="handlePageSizeChange"
|
|
@page-change="handlePageChange"
|
|
@update:jumpPageInput="(val: string) => { jumpPageInput.value = val }"
|
|
@jump-page="handleJumpPage"
|
|
/>
|
|
</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, computed } from 'vue'
|
|
import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
|
|
|
|
interface ParamKV {
|
|
label: string;
|
|
value: string;
|
|
}
|
|
|
|
interface ParamItem {
|
|
id: number;
|
|
name: string;
|
|
sort: number;
|
|
params: ParamKV[];
|
|
}
|
|
|
|
// ========== MOCK DATA START ==========
|
|
// TODO: 接真实接口时替换此处 list 为 fetchParamList() 调用
|
|
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[] },
|
|
{ id: 3, name: '服装鞋履', sort: 3, params: [{label: '面料', value: '纯棉'}, {label: '适用季节', value: '春夏'}] as ParamKV[] },
|
|
{ id: 4, name: '食品饮料', sort: 4, params: [{label: '保质期', value: '12个月'}, {label: '常温存储', value: '是'}] as ParamKV[] },
|
|
{ id: 5, name: '家具家居', sort: 5, params: [{label: '材质', value: '实木'}, {label: '风格', value: '新中式'}] as ParamKV[] },
|
|
{ id: 6, name: '美妆护肤', sort: 6, params: [{label: '肉质', value: '混合背'}, {label: '容量', value: '50ml'}] as ParamKV[] },
|
|
{ id: 7, name: '图书文具', sort: 7, params: [{label: '出版社', value: '人民兰山'}, {label: '平装/精装', value: '精装'}] as ParamKV[] },
|
|
{ id: 8, name: '运动户外', sort: 8, params: [{label: '适用季节', value: '冬季'}, {label: '防水等级', value: 'IPX5'}] as ParamKV[] },
|
|
{ id: 9, name: '母婴童装', sort: 9, params: [{label: '适用年龄', value: '0-3岁'}, {label: '安全认证', value: 'CCC'}] as ParamKV[] },
|
|
{ id: 10, name: '創业特惠', sort: 10, params: [{label: '折扣力度', value: '9折'}, {label: '限时时间', value: '7天'}] as ParamKV[] },
|
|
{ id: 11, name: '山地车辆', sort: 11, params: [{label: '厂家', value: '丰田'}, {label: '排量', value: '2.0T'}] as ParamKV[] },
|
|
{ id: 12, name: '唨具家电', sort: 12, params: [{label: '功率', value: '1500W'}, {label: '容量', value: '5L'}] as ParamKV[] }
|
|
])
|
|
// ========== MOCK DATA END ==========
|
|
|
|
// ========== PAGINATION STATE ==========
|
|
const currentPage = ref(1)
|
|
const pageSize = ref(10)
|
|
const jumpPageInput = ref('')
|
|
const pageSizeOptions = [10, 15, 20, 30, 50]
|
|
const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
|
|
const pageSizeIndex = computed(() => { const idx = pageSizeOptions.indexOf(pageSize.value); return idx >= 0 ? idx : 0 })
|
|
const total = computed(() => list.length)
|
|
const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
|
|
const pagedList = computed(() => {
|
|
const start = (currentPage.value - 1) * pageSize.value
|
|
return list.slice(start, start + pageSize.value)
|
|
})
|
|
const visiblePages = computed((): number[] => {
|
|
const t = totalPage.value; const cur = currentPage.value
|
|
if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
|
|
if (cur <= 4) return [1, 2, 3, 4, 5, -1, t]
|
|
if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
|
|
return [1, -1, cur - 1, cur, cur + 1, -1, t]
|
|
})
|
|
const handlePageChange = (p: number) => { currentPage.value = p }
|
|
const handlePageSizeChange = (e: any) => {
|
|
const idx = Number(e.detail.value)
|
|
pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
|
|
currentPage.value = 1
|
|
}
|
|
const handleJumpPage = () => {
|
|
const p = parseInt(jumpPageInput.value)
|
|
if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
|
|
}
|
|
// ========== END PAGINATION STATE ==========
|
|
|
|
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>
|