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

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

@@ -1,58 +1,58 @@
<template>
<template>
<view class="admin-decoration-category">
<!-- 椤堕儴鏍囬涓庢寜閽?-->
<!-- 顶部标题与按钮 -->
<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-primary" @click="handleSave">
<text class="btn-txt">淇濆瓨</text>
<text class="btn-txt">保存</text>
</view>
<view class="btn-ghost" @click="handleReset">
<text class="ghost-txt">閲嶇疆</text>
<text class="ghost-txt">重置</text>
</view>
</view>
</view>
<!-- 鍒嗙被灞曠ず鍖哄煙 -->
<!-- 分类展示区域 -->
<view class="content-container">
<view class="style-list">
<!-- 鏍峰紡1 -->
<!-- 样式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>
<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>
<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>
<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="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 class="item-img-box"><text class="item-placeholder">🍐</text></view>
<text class="item-txt">{{ ['精品香蕉','坚果优选','猕猴桃','大肉块','五花肉','鸡腿'][i-1] }}</text>
</view>
</view>
</view>
<view class="category-section">
<view class="section-title"><text class="st-txt">鑲夊埗鍝?/text></view>
<view class="section-title"><text class="st-txt">肉制品</text></view>
<view class="grid-container">
<view class="grid-item" v-for="i in 3" :key="i">
<view class="item-img-box"><text class="item-placeholder">馃ォ</text></view>
<text class="item-txt">{{ ['澶ц倝鍧?,'浜旇姳鑲?,'楦¤吙'][i-1] }}</text>
<view class="item-img-box"><text class="item-placeholder">🥩</text></view>
<text class="item-txt">{{ ['大肉块','五花肉','鸡腿'][i-1] }}</text>
</view>
</view>
</view>
@@ -60,124 +60,124 @@
</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 class="tb-item"><text class="tb-ic">馃懁</text></view>
<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 class="tb-item"><text class="tb-ic">👤</text></view>
</view>
</view>
</view>
<text class="style-name" :style="{color: selectedStyle === 1 ? '#2d8cf0' : '#666'}">鏍峰紡1</text>
<text class="style-name" :style="{color: selectedStyle === 1 ? '#2d8cf0' : '#666'}">样式1</text>
</view>
<!-- 鏍峰紡2 -->
<!-- 样式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>
<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>
<text class="ic-search">🔍</text>
<text class="search-ph">点击搜索商品信息</text>
</view>
<view class="tabs-v2">
<text class="t2-item active">姘存灉</text>
<text class="t2-item">鍏ㄩ儴</text>
<text class="t2-item">鐑甫姘存灉</text>
<text class="t2-item">瑗跨摐钁¤悇</text>
<text class="t2-arrow">鈻?/text>
<text class="t2-item active">水果</text>
<text class="t2-item">全部</text>
<text class="t2-item">热带水果</text>
<text class="t2-item">西瓜葡萄</text>
<text class="t2-arrow">▼</text>
</view>
<view class="style2-content">
<view class="sidebar-v2">
<text class="s2-item active">涔冲搧</text>
<text class="s2-item">鍗堥棿闆堕</text>
<text class="s2-item">鏂伴矞钄彍</text>
<text class="s2-item">缇庡鎶よ偆</text>
<text class="s2-item">瀹犵墿鐢ㄥ搧</text>
<text class="s2-item">鎴峰鐜╁叿</text>
<text class="s2-item active">乳品</text>
<text class="s2-item">午间零食</text>
<text class="s2-item">新鲜蔬菜</text>
<text class="s2-item">美妆护肤</text>
<text class="s2-item">宠物用品</text>
<text class="s2-item">户外玩具</text>
</view>
<view class="main-v2">
<view class="banner-mock-v2">
<text class="b-txt">娣卞眰 V8 楂樻竻鐩村睆\n鍙岄暅澶?VR绉戞妧浣撻獙</text>
<text class="b-txt">深层 V8 高清直屏\n双镜头/VR科技体验</text>
</view>
<view class="prod-v2" v-for="i in 2" :key="i">
<text class="p-name">Haier/娴峰皵 BCD-216STPT 鏃跺皻闈欓煶鍐扮 涓夐棬鍑洪棬绉熷鐢ㄥ皬鍨嬬數鍐扮</text>
<text class="p-name">Haier/海尔 BCD-216STPT 时尚静音冰箱 三门出门租家用小型电冰箱</text>
<view class="p-price-row">
<text class="p-price">楼999.00</text>
<text class="p-sales">宸插敭 92</text>
<view class="btn-buy"><text class="buy-txt">绔嬪嵆璐拱</text></view>
<text class="p-price">¥999.00</text>
<text class="p-sales">已售 92</text>
<view class="btn-buy"><text class="buy-txt">立即购买</text></view>
</view>
</view>
</view>
</view>
</view>
<view class="cart-badge">馃洅<text class="badge-num">7</text></view>
<view class="cart-badge">🛒<text class="badge-num">7</text></view>
<view class="footer-p2">
<text class="f2-total">楼999.00</text>
<view class="btn-settle"><text class="settle-txt">鍘荤粨绠?/text></view>
<text class="f2-total">¥999.00</text>
<view class="btn-settle"><text class="settle-txt">去结算</text></view>
</view>
</view>
</view>
<text class="style-name" :style="{color: selectedStyle === 2 ? '#2d8cf0' : '#666'}">鏍峰紡2</text>
<text class="style-name" :style="{color: selectedStyle === 2 ? '#2d8cf0' : '#666'}">样式2</text>
</view>
<!-- 鏍峰紡3 -->
<!-- 样式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>
<text class="p-title">产品分类</text>
</view>
<view class="phone-body">
<view class="search-bar-v3">
<view class="home-btn">馃彔</view>
<view class="home-btn">🏠</view>
<view class="search-input-v3">
<text class="ic-search">馃攳</text>
<text class="search-ph">鎼滅储鍟嗗搧</text>
<text class="ic-search">🔍</text>
<text class="search-ph">搜索商品</text>
</view>
</view>
<view class="tabs-v3">
<text class="t3-item active">姘存灉</text>
<text class="t3-item specialty">鏃舵椂鐢熼矞</text>
<text class="t3-item">浼戦棽闆堕</text>
<text class="t3-item">鍧氭灉铚滈ク</text>
<text class="t3-arrow">鈭?/text>
<text class="t3-item active">水果</text>
<text class="t3-item specialty">时时生鲜</text>
<text class="t3-item">休闲零食</text>
<text class="t3-item">坚果蜜饯</text>
<text class="t3-arrow">∨</text>
</view>
<view class="style3-content">
<view class="sidebar-v3">
<text class="s3-item active">涔冲搧</text>
<text class="s3-item">鍗堥棿闆堕</text>
<text class="s3-item">鏂伴矞钄彍</text>
<text class="s3-item">鐗规儬涓撳尯</text>
<text class="s3-item">澶ч椄锜?/text>
<text class="s3-item">绮鹃€夌ぜ鐩?/text>
<text class="s3-item active">乳品</text>
<text class="s3-item">午间零食</text>
<text class="s3-item">新鲜蔬菜</text>
<text class="s3-item">特惠专区</text>
<text class="s3-item">大闸蟹</text>
<text class="s3-item">精选礼盒</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">銆愭涓埍椹粫銆戞灉闄呮柊楠戝＋鏅氬鐢滄10涓崟瑁?/text>
<text class="pv-price">楼25.99</text>
<text class="pv-name">【橙中爱马仕】果际新骑士晚季甜橙10个单装</text>
<text class="pv-price">¥25.99</text>
</view>
<view class="pv-add-box">
<text class="pv-add">馃洅</text>
<text class="pv-add">🛒</text>
</view>
</view>
</view>
</view>
</view>
<view class="cart-v3">
<view class="c3-ic-box">馃洅<text class="c3-badge">7</text></view>
<text class="c3-price">楼999.00</text>
<view class="btn-settle-v3"><text class="settle-txt">鍘荤粨绠?/text></view>
<view class="c3-ic-box">🛒<text class="c3-badge">7</text></view>
<text class="c3-price">¥999.00</text>
<view class="btn-settle-v3"><text class="settle-txt">去结算</text></view>
</view>
</view>
</view>
<text class="style-name" :style="{color: selectedStyle === 3 ? '#2d8cf0' : '#666'}">鏍峰紡3</text>
<text class="style-name" :style="{color: selectedStyle === 3 ? '#2d8cf0' : '#666'}">样式3</text>
</view>
</view>
@@ -192,7 +192,7 @@ const selectedStyle = ref(1)
const handleSave = () => {
console.log('Saving classification style:', selectedStyle.value)
uni.showToast({ title: '淇濆瓨鎴愬姛', icon: 'success' })
uni.showToast({ title: '保存成功', icon: 'success' })
}
const handleReset = () => {
@@ -362,7 +362,7 @@ const handleReset = () => {
.t3-item.specialty { background-color: #f2270c; color: #fff; padding: 2px 8px; border-radius: 10px; }
.t3-arrow { font-size: 12px; color: #ccc; flex: 1; text-align: right; }
.style3-content { flex: 1; display: flex; flex-direction: row; }
.style3-content { flex: 1; display: flex; flex-direction: row; background-color: #fff; }
.sidebar-v3 { width: 75px; background-color: #f7f7f7; }
.s3-item { height: 50px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #666; }
.s3-item.active { background-color: #fff; color: #333; font-weight: bold; position: relative; }
@@ -383,4 +383,3 @@ const handleReset = () => {
.c3-price { font-size: 14px; color: #f2270c; font-weight: bold; flex: 1; }
.btn-settle-v3 { background-color: #f2270c; padding: 6px 20px; border-radius: 20px; }
</style>

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: '寤鸿灏哄锛?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锛屾嫋鎷藉浘鐗囧彲璋冩暣鍥剧墖椤哄簭鍝︼紝鏈€澶氭坊鍔犱簲寮? }
{ 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，拖拽图片可调整图片顺序哦，最多添加五张' }
])
// 鍒濆鍖栨暟鎹?
// 初始化数据
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,4 +257,3 @@ 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>

161
pages/mall/admin/decoration/home.uvue
View File

@@ -1,23 +1,23 @@
<template>
<template>
<view class="admin-decoration-home">
<view class="content-container">
<!-- 宸︿晶锛氭墜鏈洪瑙堝尯 -->
<!-- 左侧：手机预览区 -->
<view class="preview-section border-shadow">
<view class="phone-mock">
<view class="phone-inner">
<view class="phone-header-img">
<view class="status-bar-mock"></view>
<view class="search-bar-mock">
<text class="search-ic">馃攳</text>
<text class="search-ph">璇疯緭鍏ユ悳绱㈣瘝</text>
<text class="search-ic">🔍</text>
<text class="search-ph">请输入搜索词</text>
</view>
<view class="tabs-mock">
<text class="tab-item active">棣栭〉</text>
<text class="tab-item">鐢熸椿瀹跺眳</text>
<text class="tab-item">杩愬姩涓撳尯</text>
<text class="tab-item">鐢靛瓙浜у搧</text>
<text class="tab-item">瀹剁敤鐢靛櫒</text>
<text class="tab-more">鈮?/text>
<text class="tab-item active">首页</text>
<text class="tab-item">生活家居</text>
<text class="tab-item">运动专区</text>
<text class="tab-item">电子产品</text>
<text class="tab-item">家用电器</text>
<text class="tab-more">≡</text>
</view>
</view>
@@ -43,8 +43,8 @@
<!-- Announcement -->
<view class="notice-mock">
<view class="notice-ic">馃摙</view>
<text class="notice-txt">CRMEB 骞翠腑618娲诲姩寮€鍚繘琛屼腑锛?/text>
<view class="notice-ic">📢</view>
<text class="notice-txt">CRMEB 年中618活动开启进行中！</text>
<text class="notice-arr">></text>
</view>
@@ -52,11 +52,11 @@
<view class="checkin-mock">
<view class="checkin-days">
<view class="day-dot" v-for="i in 7" :key="i">
<view class="dot-circle">猸?/view>
<text class="dot-text">鍛▄{ weekDays[i-1] }}</text>
<view class="dot-circle">⭐</view>
<text class="dot-text">周{{ weekDays[i-1] }}</text>
</view>
</view>
<view class="btn-checkin"><text class="check-txt">绛惧埌</text></view>
<view class="btn-checkin"><text class="check-txt">签到</text></view>
</view>
<!-- Bottom Space -->
@@ -66,54 +66,54 @@
<!-- Bottom TabBar -->
<view class="tabbar-mock">
<view class="tb-item active">
<text class="tb-ic">馃彔</text>
<text class="tb-txt">棣栭〉</text>
<text class="tb-ic">🏠</text>
<text class="tb-txt">首页</text>
</view>
<view class="tb-item">
<text class="tb-ic">馃搨</text>
<text class="tb-txt">鍒嗙被</text>
<text class="tb-ic">📂</text>
<text class="tb-txt">分类</text>
</view>
<view class="tb-item">
<text class="tb-ic">馃洅</text>
<text class="tb-txt">璐墿杞?/text>
<text class="tb-ic">🛒</text>
<text class="tb-txt">购物车</text>
</view>
<view class="tb-item">
<text class="tb-ic">馃懁</text>
<text class="tb-txt">鎴戠殑</text>
<text class="tb-ic">👤</text>
<text class="tb-txt">我的</text>
</view>
</view>
</view>
</view>
</view>
<!-- 鍙充晶锛氬垪琛ㄧ鐞嗗尯 -->
<!-- 右侧：列表管理区 -->
<view class="list-section">
<view class="manage-card border-shadow">
<view class="action-bar">
<view class="btn-primary-blue mr-10" @click="handleAdd">
<text class="btn-txt">娣诲姞椤甸潰</text>
<text class="btn-txt">添加页面</text>
</view>
<view class="btn-import-blue" @click="handleImport">
<text class="btn-txt">瀵煎叆妯℃澘</text>
<text class="btn-txt">导入模板</text>
</view>
</view>
<!-- 琛ㄦ牸 -->
<!-- 表格 -->
<view class="table-container">
<view class="table-header-row">
<view class="th" style="width: 80px;">椤甸潰ID</view>
<view class="th" style="flex: 2;">妯℃澘鍚嶇О</view>
<view class="th" style="flex: 1;">妯℃澘绫诲瀷</view>
<view class="th" style="flex: 2;">娣诲姞鏃堕棿</view>
<view class="th" style="flex: 2;">鏇存柊鏃堕棿</view>
<view class="th" style="width: 280px;">鎿嶄綔</view>
<view class="th" style="width: 80px;">页面ID</view>
<view class="th" style="flex: 2;">模板名称</view>
<view class="th" style="flex: 1;">模板类型</view>
<view class="th" style="flex: 2;">添加时间</view>
<view class="th" style="flex: 2;">更新时间</view>
<view class="th" style="width: 280px;">操作</view>
</view>
<view v-for="(item, index) in tableData" :key="index" class="table-body-row">
<view class="td" style="width: 80px;">{{ item.id }}</view>
<view class="td" style="flex: 2;">{{ item.name }}</view>
<view class="td" style="flex: 1;">
<view :class="['type-tag', item.type === '棣栭〉' ? 'type-home' : 'type-topic']">
<view :class="['type-tag', item.type === '首页' ? 'type-home' : 'type-topic']">
<text class="tag-label">{{ item.type }}</text>
</view>
</view>
@@ -121,27 +121,27 @@
<view class="td" style="flex: 2;">{{ item.updateTime }}</view>
<view class="td" style="width: 280px;">
<view class="op-links">
<text class="op-link" @click="handleEdit(item)">缂栬緫</text>
<text class="op-link" @click="handleEdit(item)">编辑</text>
<text class="op-split">|</text>
<text class="op-link text-danger">鍒犻櫎</text>
<text class="op-link text-danger">删除</text>
<text class="op-split">|</text>
<text class="op-link">棰勮</text>
<text class="op-link">预览</text>
<text class="op-split">|</text>
<text class="op-link" v-if="item.type !== '棣栭〉'">璁句负棣栭〉</text>
<text class="op-split" v-if="item.type !== '棣栭〉'">|</text>
<text class="op-link">瀵煎嚭妯℃澘</text>
<text class="op-link" v-if="item.type !== '首页'">设为首页</text>
<text class="op-split" v-if="item.type !== '首页'">|</text>
<text class="op-link">导出模板</text>
</view>
</view>
</view>
</view>
<!-- 鍒嗛〉鍣?-->
<!-- 分页器 -->
<view class="pagination-footer">
<view class="page-total">
<text class="total-txt">鍏?{{ total }} 鏉?/text>
<text class="total-txt">共 {{ total }} 条</text>
</view>
<view class="page-select">
<text class="page-val">15鏉?椤?鈻?/text>
<text class="page-val">15条/页 ▼</text>
</view>
<view class="page-btns">
<text class="p-btn disabled"><</text>
@@ -149,64 +149,64 @@
<text class="p-btn">></text>
</view>
<view class="page-jump">
<text class="jump-txt">鍓嶅線</text>
<text class="jump-txt">前往</text>
<input class="jump-input" value="1" />
<text class="jump-txt">椤?/text>
<text class="jump-txt">页</text>
</view>
</view>
</view>
</view>
</view>
<!-- 娣诲姞椤甸潰渚ц竟鏍?-->
<!-- 添加页面侧边栏 -->
<view v-if="showDrawer" :class="['drawer-mask', isClosing ? 'mask-fade-out' : '']" @click="closeDrawer">
<view :class="['drawer-content', isClosing ? 'slide-out' : '']" @click.stop="">
<view class="drawer-header">
<text class="title-txt">娣诲姞椤甸潰</text>
<text class="close-btn" @click="closeDrawer">脳</text>
<text class="title-txt">添加页面</text>
<text class="close-btn" @click="closeDrawer">×</text>
</view>
<scroll-view class="drawer-body" :scroll-y="true">
<view class="form-item-v">
<text class="v-label">椤甸潰鍚嶇О</text>
<input class="v-input" v-model="formName" placeholder="璇峰～鍐欓〉闈㈠悕绉? />
<text class="v-label">页面名称</text>
<input class="v-input" v-model="formName" placeholder="请填写页面名称" />
</view>
<view class="form-item-v">
<text class="v-label">椤甸潰绫诲瀷</text>
<text class="v-label">页面类型</text>
<view class="radio-group">
<view class="radio-item" @click="formType = '棣栭〉'">
<view :class="['radio-dot', formType === '棣栭〉' ? 'active' : '']"></view>
<text class="radio-txt">棣栭〉</text>
<view class="radio-item" @click="formType = '首页'">
<view :class="['radio-dot', formType === '首页' ? 'active' : '']"></view>
<text class="radio-txt">首页</text>
</view>
<view class="radio-item" @click="formType = '涓撻椤?">
<view :class="['radio-dot', formType === '涓撻椤? ? 'active' : '']"></view>
<text class="radio-txt">涓撻椤?/text>
<view class="radio-item" @click="formType = '专题页'">
<view :class="['radio-dot', formType === '专题页' ? 'active' : '']"></view>
<text class="radio-txt">专题页</text>
</view>
</view>
</view>
<view class="template-select-title">
<text class="t-title">閫夋嫨妯℃澘</text>
<text class="t-sub">璇烽€夋嫨瑕佸紩鐢ㄧ殑妯℃澘</text>
<text class="t-title">选择模板</text>
<text class="t-sub">请选择要引用的模板</text>
</view>
<view class="template-grid">
<view class="tpl-item" v-for="i in 4" :key="i">
<view class="tpl-thumb">
<text class="tpl-ic">馃搫</text>
<text class="tpl-ic">📄</text>
</view>
<text class="tpl-name">閫氱敤妯℃澘 {{ i }}</text>
<text class="tpl-name">通用模板 {{ i }}</text>
</view>
</view>
</scroll-view>
<view class="drawer-footer">
<view class="btn-cancel" @click="closeDrawer">
<text class="btn-cancel-txt">鍙栨秷</text>
<text class="btn-cancel-txt">取消</text>
</view>
<view class="btn-save" @click="handleSavePage">
<text class="btn-save-txt">鎻愪氦</text>
<text class="btn-save-txt">提交</text>
</view>
</view>
</view>
@@ -217,28 +217,28 @@
<script setup lang="uts">
import { ref } from 'vue'
const menuNames = ['绉掓潃娲诲姩', '鍟嗗搧鍒嗙被', '鎷煎洟娲诲姩', '绉垎鍟嗗煄', '鐮嶄环涓績', '琛屼笟璧勮', '鎴戠殑鍦板潃', '绉垎鎶藉', '鎴戠殑璐︽埛', '璁㈠崟鍒楄〃']
const weekDays = ['涓€', '浜?, '涓?, '鍥?, '浜?, '鍏?, '鏃?]
const menuNames = ['秒杀活动', '商品分类', '拼团活动', '积分商城', '砍价中心', '行业资讯', '我的地址', '积分抽奖', '我的账户', '订单列表']
const weekDays = ['一', '二', '三', '四', '五', '六', '日']
const total = ref(11)
const tableData = ref([
{ id: 497, name: 'DIY瀵煎叆鏁版嵁', type: '涓撻椤?, addTime: '2025-03-20 15:18:01', updateTime: '2025-05-21 10:17:45' },
{ id: 496, name: 'DIY瀵煎叆鏁版嵁', type: '涓撻椤?, addTime: '2025-03-20 15:12:58', updateTime: '2025-03-20 15:12:58' },
{ id: 494, name: '鍥句功绫绘ā鏉匡紝鍕垮姩锛侊紒', type: '涓撻椤?, addTime: '2025-02-27 15:42:08', updateTime: '2025-03-19 10:40:13' },
{ id: 493, name: '鍋ュ悍绫绘ā鏉匡紝鍕垮姩锛侊紒', type: '涓撻椤?, addTime: '2025-02-27 15:40:55', updateTime: '2025-03-07 09:46:14' },
{ id: 492, name: '婕斿嚭绫绘ā鏉匡紝鍕垮姩锛侊紒', type: '涓撻椤?, addTime: '2025-02-27 15:33:09', updateTime: '2025-03-07 09:49:43' },
{ id: 491, name: '娼帺绫绘ā鏉匡紝鍕垮姩锛侊紒', type: '涓撻椤?, addTime: '2025-02-27 15:31:28', updateTime: '2025-03-07 09:55:53' },
{ id: 490, name: '瀹跺眳绫绘ā鏉匡紝鍕垮姩锛侊紒', type: '涓撻椤?, addTime: '2025-02-27 15:30:21', updateTime: '2025-03-07 09:57:59' },
{ id: 482, name: '鏂囧叿绫绘ā鏉匡紝鍕垮姩锛侊紒', type: '涓撻椤?, addTime: '2025-02-26 11:32:07', updateTime: '2025-03-07 09:59:25' },
{ id: 481, name: '妯℃澘', type: '涓撻椤?, addTime: '2025-02-26 09:21:04', updateTime: '2025-03-12 14:55:46' },
{ id: 480, name: '妯℃澘', type: '涓撻椤?, addTime: '2025-02-26 09:19:24', updateTime: '2026-02-02 17:11:45' },
{ id: 479, name: '棣栭〉妯℃澘锛屽嬁鍔紒锛?, type: '棣栭〉', addTime: '2025-02-25 20:59:59', updateTime: '2026-01-20 11:16:20' }
{ id: 497, name: 'DIY导入数据', type: '专题页', addTime: '2025-03-20 15:18:01', updateTime: '2025-05-21 10:17:45' },
{ id: 496, name: 'DIY导入数据', type: '专题页', addTime: '2025-03-20 15:12:58', updateTime: '2025-03-20 15:12:58' },
{ id: 494, name: '图书类模板，勿动！！', type: '专题页', addTime: '2025-02-27 15:42:08', updateTime: '2025-03-19 10:40:13' },
{ id: 493, name: '健康类模板，勿动！！', type: '专题页', addTime: '2025-02-27 15:40:55', updateTime: '2025-03-07 09:46:14' },
{ id: 492, name: '演出类模板，勿动！！', type: '专题页', addTime: '2025-02-27 15:33:09', updateTime: '2025-03-07 09:49:43' },
{ id: 491, name: '潮玩类模板，勿动！！', type: '专题页', addTime: '2025-02-27 15:31:28', updateTime: '2025-03-07 09:55:53' },
{ id: 490, name: '家居类模板，勿动！！', type: '专题页', addTime: '2025-02-27 15:30:21', updateTime: '2025-03-07 09:57:59' },
{ id: 482, name: '文具类模板，勿动！！', type: '专题页', addTime: '2025-02-26 11:32:07', updateTime: '2025-03-07 09:59:25' },
{ id: 481, name: '模板', type: '专题页', addTime: '2025-02-26 09:21:04', updateTime: '2025-03-12 14:55:46' },
{ id: 480, name: '模板', type: '专题页', addTime: '2025-02-26 09:19:24', updateTime: '2026-02-02 17:11:45' },
{ id: 479, name: '首页模板，勿动！！', type: '首页', addTime: '2025-02-25 20:59:59', updateTime: '2026-01-20 11:16:20' }
])
const showDrawer = ref(false)
const isClosing = ref(false)
const formName = ref('')
const formType = ref('棣栭〉')
const formType = ref('首页')
const viewState = ref('list') // 'list' | 'design'
const editingName = ref('')
@@ -293,7 +293,7 @@ const handleSaveDesign = () => {
gap: 20px;
}
/* 宸︿晶鎵嬫満棰勮鍖?*/
/* 左侧手机预览区 */
.preview-section {
width: 380px;
height: 800px;
@@ -455,7 +455,7 @@ const handleSaveDesign = () => {
.tb-txt { font-size: 11px; color: #999; }
.tb-item.active .tb-txt { color: #f2270c; }
/* 鍙充晶鍒楄〃绠＄悊鍖?*/
/* 右侧列表管理区 */
.list-section { flex: 1; }
.manage-card { display: flex; flex-direction: column; min-height: 800px; }
@@ -614,7 +614,7 @@ const handleSaveDesign = () => {
.drawer-content {
width: 450px;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
animation: slideIn 0.3s ease-out;
@@ -723,4 +723,3 @@ const handleSaveDesign = () => {
}
</style>