huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页细节调整

Browse Source
This commit is contained in:
huangzhenbao
2026-02-06 16:18:04 +08:00
parent d00f0b7412
commit 57846534bc
86 changed files with 2751 additions and 3074 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
pages/mall/admin/product/specifications/index.uvue
View File

@@ -1,21 +1,21 @@
<template>
<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="璇疯緭鍏ヨ鏍煎悕绉? />
<text class="search-label">规格搜索:</text>
<input class="search-input" placeholder="请输入规格名称" />
</view>
<button class="btn-query">鏌ヨ</button>
<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>
<button class="btn-add" @click="showModal = true">添加商品规格</button>
<button class="btn-batch-del">批量删除</button>
</view>
<view class="table-header">
@@ -23,20 +23,20 @@
<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>
<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>
<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>
<text v-if="item.selected" class="check-mark">✓</text>
</view>
</view>
<text class="td-cell flex-1 color-9">{{ item.id }}</text>
@@ -44,46 +44,46 @@
<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>
<text class="btn-link">编辑</text>
<view class="divider"></view>
<text class="btn-link delete" @click="deleteItem(index)">鍒犻櫎</text>
<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>
<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-label-box"><text class="form-label">规格名称:</text></view>
<view class="form-input-box">
<input class="modal-input" v-model="form.name" placeholder="璇疯緭鍏ヨ鏍煎悕绉? />
<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-label-box"><text class="form-label">商品规格:</text></view>
<view class="form-input-box">
<input class="modal-input" v-model="form.specs" placeholder="璇疯緭鍏ュ晢鍝佽鏍? />
<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-label-box"><text class="form-label">商品属性:</text></view>
<view class="form-input-box">
<input class="modal-input" v-model="form.attrs" placeholder="璇疯緭鍏ュ晢鍝佸睘鎬? />
<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>
<button class="btn-modal-cancel" @click="showModal = false">取消</button>
<button class="btn-modal-submit" @click="saveAttr">确定</button>
</view>
</view>
</view>
@@ -102,11 +102,11 @@ interface AttrItem {
}
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 }
{ 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)
@@ -118,7 +118,7 @@ const form = reactive({
function saveAttr() {
if (!form.name) {
uni.showToast({ title: '璇疯緭鍏ヨ鏍煎悕绉?, icon: 'none' })
uni.showToast({ title: '请输入规格名称', icon: 'none' })
return
}
list.push({
@@ -132,13 +132,13 @@ function saveAttr() {
form.name = ''
form.specs = ''
form.attrs = ''
uni.showToast({ title: '娣诲姞鎴愬姛', icon: 'success' })
uni.showToast({ title: '添加成功', icon: 'success' })
}
function deleteItem(index: number) {
uni.showModal({
title: '鎻愮ず',
content: '纭畾鍒犻櫎璇ヨ鏍煎悧锛?,
title: '提示',
content: '确定删除该规格吗？',
success: (res) => {
if (res.confirm) {
list.splice(index, 1)
@@ -155,7 +155,7 @@ function deleteItem(index: number) {
min-height: 100vh;
}
/* 鎼滅储鍗＄墖 */
/* 搜索卡片 */
.search-card {
background-color: #fff;
padding: 24px;
@@ -203,7 +203,7 @@ function deleteItem(index: number) {
margin-left: 0;
}
/* 琛ㄦ牸鍖哄煙 */
/* 表格区域 */
.table-card {
background-color: #fff;
padding: 24px;
@@ -348,7 +348,7 @@ function deleteItem(index: number) {
.modal-content {
width: 500px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
@@ -443,4 +443,3 @@ function deleteItem(index: number) {
.flex-4 { flex: 4; }
</style>