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 12:06:33 +08:00
parent b7545173c6
commit d00f0b7412
83 changed files with 3901 additions and 2354 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
pages/mall/admin/decoration/data-config.uvue
View File

@@ -1,35 +1,35 @@
<template>
<template>
<view class="admin-data-config anim-fade-in">
<!-- 顶部标题 -->
<!-- 椤堕儴鏍囬 -->
<view class="page-header border-shadow">
<view class="header-left">
<text class="page-title">数据配置</text>
<text class="page-title">鏁版嵁閰嶇疆</text>
</view>
<view class="header-right">
<view class="btn-save" @click="handleSave">
<text class="save-txt">保存</text>
<text class="save-txt">淇濆瓨</text>
</view>
</view>
</view>
<!-- 主内容区：三栏布局 -->
<!-- 涓诲唴瀹瑰尯锛氫笁鏍忓竷灞€ -->
<view class="main-content">
<view class="card-container border-shadow">
<!-- A. 左栏：配置分类菜单 -->
<!-- A. 宸︽爮锛氶厤缃垎绫昏彍鍗?-->
<MenuSide
:categories="categories"
:activeKey="activeKey"
@change="k => activeKey = k"
/>
<!-- B. 中栏：手机预览 -->
<!-- B. 涓爮锛氭墜鏈洪瑙?-->
<PhonePreview
:activeKey="activeKey"
:activeLabel="activeLabel"
:activeConfig="activeConfig"
/>
<!-- C. 右栏：配置表单 -->
<!-- C. 鍙虫爮锛氶厤缃〃鍗?-->
<view class="settings-column">
<view class="settings-header">
<view class="title-marker"></view>
@@ -39,22 +39,22 @@
<text class="settings-desc">{{ activeCategory?.recommendSizeText }}</text>
</view>
<!-- 开屏广告特有字段 -->
<!-- 寮€灞忓箍鍛婄壒鏈夊瓧娈?-->
<view v-if="activeKey === 'ad'" class="ad-special-fields">
<view class="form-row">
<text class="field-label">开启广告</text>
<text class="field-label">寮€鍚箍鍛?/text>
<switch :checked="activeConfig.enabled" @change="handleSwitchAd" color="#2d8cf0" />
</view>
<view class="form-row">
<text class="field-label">广告时间</text>
<text class="field-label">骞垮憡鏃堕棿</text>
<view class="input-with-unit">
<input type="number" class="time-input" v-model="activeConfig.durationSeconds" />
<text class="unit-txt">单位(秒)</text>
<text class="unit-txt">鍗曚綅(绉?</text>
</view>
</view>
</view>
<!-- 图片项编辑器 -->
<!-- 鍥剧墖椤圭紪杈戝櫒 -->
<view v-if="activeKey !== 'ad' || activeConfig.enabled">
<CarouselEditor
:items="activeConfig.items"
@@ -67,7 +67,7 @@
/>
</view>
<view v-else class="ad-disabled-placeholder">
<text class="disabled-txt">开屏广告已关闭，开启后可配置图片</text>
<text class="disabled-txt">寮€灞忓箍鍛婂凡鍏抽棴锛屽紑鍚悗鍙厤缃浘鐗?/text>
</view>
</view>
</view>
@@ -82,48 +82,48 @@ import MenuSide from '@/pages/mall/admin/decoration/components/MenuSide.uvue'
import PhonePreview from '@/pages/mall/admin/decoration/components/PhonePreview.uvue'
import CarouselEditor from '@/pages/mall/admin/decoration/components/CarouselEditor.uvue'
// 状态定义
// 鐘舵€佸畾涔?
const activeKey = ref('jingpin')
const categories = reactive<Category[]>([
{ key: 'jingpin', label: '首页精品推荐图片', type: 'carousel', recommendSizeText: '建议尺寸：690 * 240px，拖拽图片可调整图片顺序哦，最多添加五张' },
{ key: 'hot', label: '热门榜单推荐图片', type: 'carousel', recommendSizeText: '建议尺寸：690 * 240px，拖拽图片可调整图片顺序哦，最多添加五张' },
{ key: 'new', label: '首发新品推荐图片', type: 'carousel', recommendSizeText: '建议尺寸：690 * 240px，拖拽图片可调整图片顺序哦，最多添加五张' },
{ key: 'promo', label: '促销单品推荐图片', type: 'carousel', recommendSizeText: '建议尺寸：690 * 240px，拖拽图片可调整图片顺序哦，最多添加五张' },
{ key: 'login', label: '后台登录页面幻灯片', type: 'carousel', recommendSizeText: '建议尺寸：690 * 240px，拖拽图片可调整图片顺序哦，最多添加五张' },
{ key: 'group', label: '拼团列表轮播图', type: 'carousel', recommendSizeText: '建议尺寸：710 * 300px，拖拽图片可调整图片顺序哦，最多添加五张' },
{ key: 'points', label: '积分商城轮播图', type: 'carousel', recommendSizeText: '建议尺寸：710 * 300px，拖拽图片可调整图片顺序哦，最多添加五张' },
{ key: 'ad', label: '开屏广告', type: 'ad', recommendSizeText: '建议尺寸：750 * 1334px，拖拽图片可调整图片顺序哦，最多添加五张' }
{ key: 'jingpin', label: '棣栭〉绮惧搧鎺ㄨ崘鍥剧墖', type: 'carousel', recommendSizeText: '寤鸿灏哄锛?90 * 240px锛屾嫋鎷藉浘鐗囧彲璋冩暣鍥剧墖椤哄簭鍝︼紝鏈€澶氭坊鍔犱簲寮? },
{ key: 'hot', label: '鐑棬姒滃崟鎺ㄨ崘鍥剧墖', type: 'carousel', recommendSizeText: '寤鸿灏哄锛?90 * 240px锛屾嫋鎷藉浘鐗囧彲璋冩暣鍥剧墖椤哄簭鍝︼紝鏈€澶氭坊鍔犱簲寮? },
{ key: 'new', label: '棣栧彂鏂板搧鎺ㄨ崘鍥剧墖', type: 'carousel', recommendSizeText: '寤鸿灏哄锛?90 * 240px锛屾嫋鎷藉浘鐗囧彲璋冩暣鍥剧墖椤哄簭鍝︼紝鏈€澶氭坊鍔犱簲寮? },
{ key: 'promo', label: '淇冮攢鍗曞搧鎺ㄨ崘鍥剧墖', type: 'carousel', recommendSizeText: '寤鸿灏哄锛?90 * 240px锛屾嫋鎷藉浘鐗囧彲璋冩暣鍥剧墖椤哄簭鍝︼紝鏈€澶氭坊鍔犱簲寮? },
{ key: 'login', label: '鍚庡彴鐧诲綍椤甸潰骞荤伅鐗?, type: 'carousel', recommendSizeText: '寤鸿灏哄锛?90 * 240px锛屾嫋鎷藉浘鐗囧彲璋冩暣鍥剧墖椤哄簭鍝︼紝鏈€澶氭坊鍔犱簲寮? },
{ key: 'group', label: '鎷煎洟鍒楄〃杞挱鍥?, type: 'carousel', recommendSizeText: '寤鸿灏哄锛?10 * 300px锛屾嫋鎷藉浘鐗囧彲璋冩暣鍥剧墖椤哄簭鍝︼紝鏈€澶氭坊鍔犱簲寮? },
{ key: 'points', label: '绉垎鍟嗗煄杞挱鍥?, type: 'carousel', recommendSizeText: '寤鸿灏哄锛?10 * 300px锛屾嫋鎷藉浘鐗囧彲璋冩暣鍥剧墖椤哄簭鍝︼紝鏈€澶氭坊鍔犱簲寮? },
{ key: 'ad', label: '寮€灞忓箍鍛?, type: 'ad', recommendSizeText: '寤鸿灏哄锛?50 * 1334px锛屾嫋鎷藉浘鐗囧彲璋冩暣鍥剧墖椤哄簭鍝︼紝鏈€澶氭坊鍔犱簲寮? }
])
// 初始化数据
// 鍒濆鍖栨暟鎹?
const configMap = reactive<Record<string, ConfigData>>({
'jingpin': { max: 5, items: [{ id: 1, name: '1', imageUrl: '', link: { type: 'internal', value: '/pages/points_mall/integral_index' }, sort: 0 }] },
'hot': { max: 5, items: [{ id: 1, name: '1', imageUrl: '', link: { type: 'internal', value: '/pages/index/index' }, sort: 0 }] },
'new': { max: 5, items: [{ id: 1, name: '1', imageUrl: '', link: { type: 'internal', value: '/pages/index/index' }, sort: 0 }] },
'promo': { max: 5, items: [{ id: 1, name: '1', imageUrl: '', link: { type: 'internal', value: '/pages/points_mall/integral_index' }, sort: 0 }] },
'login': { max: 5, items: [{ id: 1, name: '1', imageUrl: '', link: { type: 'internal', value: '' }, sort: 0 }] },
'group': { max: 5, items: [{ id: 1, name: '拼团', imageUrl: '', link: { type: 'internal', value: '/pages/activity/goods_combination/index' }, sort: 0 }] },
'group': { max: 5, items: [{ id: 1, name: '鎷煎洟', imageUrl: '', link: { type: 'internal', value: '/pages/activity/goods_combination/index' }, sort: 0 }] },
'points': { max: 5, items: [{ id: 1, name: '1', imageUrl: '', link: { type: 'internal', value: '/pages/points_mall/integral_index' }, sort: 0 }] },
'ad': { enabled: false, durationSeconds: 3, max: 5, items: [] }
})
// 计算属性
// 璁＄畻灞炴€?
const activeCategory = computed(() => categories.find(c => c.key === activeKey.value))
const activeLabel = computed(() => activeCategory.value?.label ?? '')
const activeConfig = computed(() => configMap[activeKey.value])
const activeTitle = computed(() => {
if (activeKey.value === 'ad') return '引导页设置'
if (activeKey.value === 'login') return '幻灯片设置'
return '轮播图设置'
if (activeKey.value === 'ad') return '寮曞椤佃缃?
if (activeKey.value === 'login') return '骞荤伅鐗囪缃?
return '杞挱鍥捐缃?
})
// 方法
// 鏂规硶
const handleSave = () => {
uni.showLoading({ title: '保存中...' })
uni.showLoading({ title: '淇濆瓨涓?..' })
setTimeout(() => {
uni.hideLoading()
uni.showToast({ title: '保存成功', icon: 'success' })
uni.showToast({ title: '淇濆瓨鎴愬姛', icon: 'success' })
}, 800)
}
@@ -134,7 +134,7 @@ const handleSwitchAd = (e: any) => {
const handleAddItem = () => {
const config = activeConfig.value
if (config.items.length >= config.max) {
uni.showToast({ title: `最多添加 ${config.max} 条`, icon: 'none' })
uni.showToast({ title: `鏈€澶氭坊鍔?${config.max} 鏉, icon: 'none' })
return
}
config.items.push({
@@ -167,11 +167,11 @@ const handleUpdateItem = (payload: any) => {
const handleSelectLink = (index: number) => {
uni.showActionSheet({
itemList: ['内部页面', '外部链接', '其他小程序'],
itemList: ['鍐呴儴椤甸潰', '澶栭儴閾炬帴', '鍏朵粬灏忕▼搴?],
success: (res) => {
const types: LinkType[] = ['internal', 'external', 'miniProgram']
activeConfig.value.items[index].link.type = types[res.tapIndex]
uni.showToast({ title: '功能建设中', icon: 'none' })
uni.showToast({ title: '鍔熻兘寤鸿涓?, icon: 'none' })
}
})
}
@@ -219,12 +219,12 @@ const handleSelectLink = (index: number) => {
display: flex;
flex-direction: row;
min-height: 800px;
background-color: #fff;
border-radius: 8px;
overflow: hidden;
}
/* 右侧设置 */
/* 鍙充晶璁剧疆 */
.settings-column {
flex: 1;
padding: 30px;
@@ -243,7 +243,7 @@ const handleSelectLink = (index: number) => {
.settings-desc-box { margin-bottom: 24px; padding-left: 13px; }
.settings-desc { font-size: 13px; color: #999; }
/* 开屏广告特有样式 */
/* 寮€灞忓箍鍛婄壒鏈夋牱寮?*/
.ad-special-fields { padding: 20px; background-color: #f6f8fb; border-radius: 8px; margin-bottom: 20px; }
.form-row { display: flex; flex-direction: row; align-items: center; margin-bottom: 15px; }
.field-label { width: 80px; font-size: 14px; color: #333; }
@@ -257,3 +257,4 @@ const handleSelectLink = (index: number) => {
.anim-fade-in { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
</style>