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

修复bug

Browse Source
This commit is contained in:
huangzhenbao
2026-03-20 15:24:59 +08:00
parent 14b506036c
commit 29f588a2b2
13 changed files with 321 additions and 2003 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
pages/mall/admin/decoration/category.uvue
View File

@@ -1,270 +0,0 @@
<template>
<view class="admin-decoration-category">
<!-- 顶部标题与按钮 -->
<view class="page-header border-shadow">
<view class="header-left">
<text class="page-title">商品分类装修</text>
</view>
<view class="header-right">
<view class="btn-primary" @click="handleSave">
<text class="btn-txt">{{ isSaving ? '保存中...' : '保存配置' }}</text>
</view>
<view class="btn-ghost" @click="handleReset">
<text class="ghost-txt">重置</text>
</view>
</view>
</view>
<!-- 分类展示区域 -->
<view class="content-container">
<view v-if="isLoading" class="loading-state">
<text>加载配置中...</text>
</view>
<view v-else class="style-list">
<!-- 样式1 -->
<view class="style-card-wrapper">
<view :class="['style-card', selectedStyle === 1 ? 'active' : '']" @click="selectedStyle = 1">
<view class="phone-mock">
<view class="phone-header">
<text class="p-title">产品分类</text>
<text class="p-dots">••• Ⓞ</text>
</view>
<view class="phone-body">
<view class="search-bar">
<text class="ic-search">🔍</text>
<text class="search-ph">点击搜索商品信息</text>
</view>
<view class="style1-content">
<view class="sidebar-mock">
<text class="sb-item active">精选水果</text>
<text class="sb-item" v-for="name in ['肉制品','水产海鲜','米面粮油','厨房主食','新鲜蛋品','调味品','日配冷藏','豆制品']" :key="name">{{name}}</text>
</view>
<view class="main-mock">
<view class="category-section">
<view class="section-title"><text class="st-txt">精选水果</text></view>
<view class="grid-container">
<view class="grid-item" v-for="i in 6" :key="i">
<view class="item-img-box"><text class="item-placeholder">🍐</text></view>
<text class="item-txt">{{ ['精品香蕉','坚果优选','猕猴桃','大肉块','五花肉','鸡腿'][i-1] }}</text>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="phone-tabbar">
<view class="tb-item"><text class="tb-ic">🏠</text></view>
<view class="tb-item active"><text class="tb-ic">📂</text></view>
<view class="tb-item"><text class="tb-ic">👤</text></view>
</view>
</view>
</view>
<text class="style-name" :style="{color: selectedStyle === 1 ? '#2d8cf0' : '#666'}">样式1</text>
</view>
<!-- 样式2 -->
<view class="style-card-wrapper">
<view :class="['style-card', selectedStyle === 2 ? 'active' : '']" @click="selectedStyle = 2">
<view class="phone-mock">
<view class="phone-header-img"></view>
<view class="phone-header-v2">
<text class="p2-title">分类</text>
<view class="home-ic">🏠</view>
</view>
<view class="phone-body p2-body">
<view class="search-bar-v2">
<text class="ic-search">🔍</text>
<text class="search-ph">点击搜索商品信息</text>
</view>
<view class="style2-content">
<view class="sidebar-v2">
<text class="s2-item active">乳品</text>
<text class="s2-item" v-for="n in 5" :key="n">分类{{n}}</text>
</view>
<view class="main-v2">
<view class="banner-mock-v2">
<text class="b-txt">深层 V8 高清直屏\n双镜头/VR科技体验</text>
</view>
<view class="prod-v2" v-for="i in 2" :key="i">
<text class="p-name">精选爆款商品标题示例内容展示</text>
<view class="p-price-row">
<text class="p-price">¥99.00</text>
<view class="btn-buy"><text class="buy-txt">立即购买</text></view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<text class="style-name" :style="{color: selectedStyle === 2 ? '#2d8cf0' : '#666'}">样式2</text>
</view>
<!-- 样式3 -->
<view class="style-card-wrapper">
<view :class="['style-card', selectedStyle === 3 ? 'active' : '']" @click="selectedStyle = 3">
<view class="phone-mock">
<view class="phone-header">
<text class="p-title">产品分类</text>
</view>
<view class="phone-body">
<view class="search-bar-v3">
<view class="home-btn">🏠</view>
<view class="search-input-v3">
<text class="ic-search">🔍</text>
<text class="search-ph">搜索商品</text>
</view>
</view>
<view class="style3-content">
<view class="sidebar-v3">
<text class="s3-item active">乳品</text>
<text class="s3-item" v-for="n in 5" :key="n">分类{{n}}</text>
</view>
<view class="main-v3">
<view class="prod-v3" v-for="i in 5" :key="i">
<view class="pv-img"></view>
<view class="pv-info">
<text class="pv-name">优质精选商品名称展示示例</text>
<text class="pv-price">¥25.99</text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<text class="style-name" :style="{color: selectedStyle === 3 ? '#2d8cf0' : '#666'}">样式3</text>
</view>
</view>
</view>
</view>
</template>
<script setup lang="uts">
import { ref, onMounted } from 'vue'
import { getActiveDiyConfig, saveDiyPage, type DiyPage } from '@/services/admin/decorationService.uts'
const selectedStyle = ref(1)
const isLoading = ref(false)
const isSaving = ref(false)
const currentPageId = ref<string | null>(null)
onMounted(() => {
loadConfig()
})
async function loadConfig() {
isLoading.value = true
try {
const config = await getActiveDiyConfig('category')
if (config != null) {
currentPageId.value = config.id
const style = config.config.getNumber('style')
if (style != null) {
selectedStyle.value = style.toInt()
}
}
} catch (e) {
console.error('Failed to load category decoration config', e)
} finally {
isLoading.value = false
}
}
const handleSave = async () => {
isSaving.value = true
try {
const config = { style: selectedStyle.value } as UTSJSONObject
const id = await saveDiyPage(currentPageId.value, '商品分类默认配置', 'category', config, true)
if (id != null) {
currentPageId.value = id
uni.showToast({ title: '保存成功', icon: 'success' })
}
} catch (e) {
uni.showToast({ title: '保存失败', icon: 'none' })
} finally {
isSaving.value = false
}
}
const handleReset = () => {
selectedStyle.value = 1
}
</script>
<style scoped lang="scss">
.admin-decoration-category { background-color: #f0f2f5; min-height: 100vh; display: flex; flex-direction: column; }
.border-shadow { background-color: #fff; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); }
.page-header { height: 60px; padding: 0 24px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; z-index: 10; }
.page-title { font-size: 16px; font-weight: 600; color: #303133; }
.header-right { display: flex; flex-direction: row; gap: 12px; }
.btn-primary, .btn-ghost { height: 32px; padding: 0 20px; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.btn-primary { background-color: #2d8cf0; }
.btn-ghost { border: 1px solid #dcdfe6; position: relative; }
.btn-txt { color: #fff; font-size: 14px; }
.ghost-txt { color: #606266; font-size: 14px; }
.content-container { flex: 1; padding: 30px 40px; }
.loading-state { padding: 100px; text-align: center; color: #999; }
.style-list { display: flex; flex-direction: row; gap: 30px; flex-wrap: wrap; }
.style-card-wrapper { display: flex; flex-direction: column; align-items: center; gap: 15px; }
.style-card { width: 300px; height: 600px; background-color: #fff; border: 2px solid transparent; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.1); cursor: pointer; transition: all 0.3s; }
.style-card.active { border-color: #2d8cf0; box-shadow: 0 4px 20px rgba(45, 140, 240, 0.2); }
.style-name { font-size: 14px; font-weight: bold; }
/* Phone Mockup Common */
.phone-mock { width: 100%; height: 100%; display: flex; flex-direction: column; background-color: #fff; }
.phone-header { height: 44px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 15px; border-bottom: 1px solid #eee; }
.p-title { font-size: 14px; font-weight: bold; color: #333; }
.p-dots { font-size: 12px; color: #333; }
.phone-body { flex: 1; background-color: #f8f8f8; display: flex; flex-direction: column; overflow: hidden; }
/* Styles logic */
.style1-content, .style2-content, .style3-content { flex: 1; display: flex; flex-direction: row; }
.sidebar-mock, .sidebar-v2, .sidebar-v3 { width: 70px; background-color: #f7f7f7; display: flex; flex-direction: column; }
.sb-item, .s2-item, .s3-item { height: 44px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #666; }
.sb-item.active, .s2-item.active, .s3-item.active { background-color: #fff; color: #f2270c; font-weight: bold; position: relative; }
.sb-item.active::before, .s3-item.active::before { content: ''; position: absolute; left: 0; top: 15px; height: 14px; width: 3px; background-color: #f2270c; }
.main-mock, .main-v2, .main-v3 { flex: 1; background-color: #fff; padding: 10px; }
.search-bar, .search-bar-v2, .search-bar-v3 { height: 32px; background-color: #f2f2f2; margin: 10px; border-radius: 16px; display: flex; flex-direction: row; align-items: center; padding: 0 12px; }
.ic-search { font-size: 12px; margin-right: 6px; color: #999; }
.search-ph { font-size: 10px; color: #999; }
.category-section { margin-bottom: 10px; }
.st-txt { font-size: 12px; font-weight: bold; color: #333; }
.grid-container { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.grid-item { width: 60px; display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; }
.item-img-box { width: 44px; height: 44px; background-color: #f5f5f5; border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.item-txt { font-size: 9px; color: #666; text-align: center; }
.phone-tabbar { height: 48px; display: flex; flex-direction: row; border-top: 1px solid #eee; }
.tb-item { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #999; }
.tb-item.active { color: #f2270c; }
.banner-mock-v2 { height: 70px; background-color: #0081ff; border-radius: 6px; padding: 10px; display: flex; align-items: center; margin-bottom: 10px; }
.b-txt { font-size: 10px; color: #fff; font-weight: bold; }
.prod-v2 { border-bottom: 1px solid #f5f5f5; padding-bottom: 8px; margin-bottom: 8px; }
.p-name { font-size: 10px; color: #333; line-height: 1.3; }
.p-price { font-size: 11px; color: #f2270c; font-weight: bold; }
.btn-buy { background-color: #f2270c; padding: 3px 8px; border-radius: 10px; }
.buy-txt { font-size: 8px; color: #fff; }
.prod-v3 { display: flex; flex-direction: row; margin-bottom: 10px; }
.pv-img { width: 60px; height: 60px; background-color: #f5f5f5; border-radius: 4px; margin-right: 8px; }
.pv-name { font-size: 10px; color: #333; }
.pv-price { font-size: 12px; color: #f2270c; font-weight: bold; }
.settings-panel { flex: 1; padding: 30px; }
.group-title { display: flex; flex-direction: row; align-items: center; margin-bottom: 20px; }
.title-line { width: 3px; height: 16px; background-color: #2d8cf0; margin-right: 10px; }
.title-txt { font-size: 15px; font-weight: bold; }
.radio-group { display: flex; flex-direction: column; gap: 15px; }
.radio-item { display: flex; flex-direction: row; align-items: center; cursor: pointer; }
.radio-dot { width: 16px; height: 16px; border: 1px solid #dcdfe6; border-radius: 8px; margin-right: 10px; }
.radio-dot.active { border-color: #2d8cf0; background-color: #2d8cf0; }
.radio-txt { font-size: 14px; color: #333; }
.hint-txt { font-size: 12px; color: #999; margin-top: 20px; line-height: 1.6; }
</style>