HarmonyOS 6图表可视化开发实践，通过动态柱形、进度条组件展示数据占比与趋势，适配统计类页面数据可视化场景
·
从首页瀑布流到手机横卡列表，从电脑参数对比到配件双列网格，从订单状态管理到个人深色卡片——本文以一套完整的ArkTS数码3C电商应用为例，深度解析HarmonyOS ArkTS API 24在深色科技风电商场景下的多组件架构、商品数据模型、瀑布流布局、倒计时秒杀、参数对比表、订单图表、弹框体系等核心技术实现。
一、引言
数码3C电商是移动电商中竞争最激烈的品类之一，用户对商品信息密度、价格透明度、参数对比、订单追踪有极高要求。传统电商App往往采用浅色主题，但数码3C用户更偏好深色科技风——深色背景能突出商品图片、减少视觉疲劳、营造科技感。
本应用（数码3C潮品商城）以"深色科技蓝"为视觉基调，打造集首页推荐、手机数码、电脑办公、潮品配件、订单管理、个人中心六大模块于一体的数码3C电商全链路平台。20款数码产品覆盖手机/电脑/耳机/手表/相机五大品类，8笔订单覆盖待付款/待发货/待收货/已完成四种状态，5张优惠券覆盖不同品类和门槛，3个收货地址，6个商品分类。
本文将从架构设计、色彩系统、数据模型、六大Tab页面、弹框体系、核心技术特性等维度，完整解析这套应用的ArkTS实现。
二、整体架构
与之前单组件架构不同，本应用采用多组件分离架构——@Entry @Component struct DigitalMallApp作为入口容器，通过@State activeTab控制六大Tab切换，每个Tab页面都是独立的@Component子组件（HomeContent/PhoneContent/ComputerContent/AccessoryContent/OrderContent/ProfileContent），各自管理自己的状态和弹框。
架构层次：
- 入口层：DigitalMallApp，负责Tab切换和底部导航
- 页面层：6个独立@Component子组件，每个组件有自己的@State状态和弹框Builder
- 数据层：5个全局const数组（20商品+8订单+3地址+5优惠券+6分类配置）+3个常量数组（状态/品牌/排序）
- 弹框层：每个页面组件内部定义自己的弹框，总计17+种弹框（购物车确认/领券中心/商品详情/删除确认/地址选择/筛选/编辑购买/参数对比/修改配置/新增配件/编辑配件/订单详情/编辑订单/编辑资料/注销账号/地址列表/关于我们）
多组件架构的优势在于：每个页面状态隔离、代码模块化、便于团队协作开发。底部导航通过bottomTabItem Builder统一渲染，选中态有青色文字+底部指示条。
三、色彩系统：深色科技蓝
数码3C电商的视觉语言应该是"科技、专业、高端、沉浸"。本应用采用全深色主题：
主色体系：
#00E5FF科技青：主色调，用于Tab选中态、价格、按钮、标签、倒计时数字、图表高亮——代表科技与未来#FF6E40活力橙：用于待收货统计、对比表第二列高亮、删除提示——代表活力与警示#FFD600金色：用于星级评分、收藏夹统计——代表品质与价值#00E676绿色：用于订单状态、优惠券统计——代表成功与优惠#FF1744红色：用于删除按钮、注销确认——代表危险操作#7C4DFF紫色：用于电脑分类色、优惠券——代表高端
深色背景层次（三级递进）：
#0D0D1A最深黑：应用根背景、排序栏#16162B深灰蓝：页面头部、卡片背景、弹框背景#1A1A2E中灰蓝：商品卡片、输入框、按钮背景、列表项#2A2A4E浅灰蓝：分割线、边框#1A2330蓝灰：百亿补贴横幅#1A3A5E深蓝：次要按钮背景#0A3A5E暗蓝：图表非高亮柱#0A2E1A暗绿：订单状态标签背景
文字色：
#FFFFFF纯白：主标题、商品名#CCCCCC浅灰：次要文字、设置项#AAAAAA中灰：说明文字#888888灰：辅助文字、未选中Tab#666666深灰：原价、占位符#555555最深灰：箭头、搜索占位符
深色主题通过三级背景层次（#0D0D1A→#16162B→#1A1A2E）营造空间感，科技青#00E5FF作为唯一高亮色贯穿全应用，确保视觉一致性。
四、数据模型
应用定义了5个接口，覆盖电商全链路：
ProductItem商品（id/name/brand/price/originalPrice/sales/icon/tag/rating/stock）——20款商品，含手机/电脑/耳机/手表/相机OrderItem订单（id/orderNo/productName/amount/status/date/icon）——8笔订单AddressItem地址（id/name/phone/detail/isDefault）——3个地址CouponItem优惠券（id/value/threshold/scope/expire/color）——5张优惠券CategoryMeta分类元数据（label/icon/color）——6个分类配置
CATEGORY_CONFIG采用Record<string, CategoryMeta>字典结构，通过分类名快速查找图标和颜色，避免switch分支。
五、Tab0 首页推荐
首页是电商的"门面"，由六个层次构成：
1. 顶部搜索栏：🔍图标+TextInput搜索框（深色背景#1A1A2E）+🎫领券入口按钮。
2. 限时秒杀区：⚡限时秒杀标题+每日0点更新+倒计时组件（时:分:秒，每个数字在青色背景#00E5FF上显示深色数字#0D0D1A，冒号分隔）。
3. 分类快捷入口：6个分类横排（手机📱/电脑💻/耳机🎧/配件🔌/手表⌚/相机📷），通过CATEGORY_CONFIG字典获取图标。
4. 百亿补贴横幅：💰图标+百亿补贴·数码3C直降+查看更多，蓝灰背景#1A2330。
5. 商品瀑布双列：20款商品按奇偶分双列排列，每卡含80高图标区+商品名（maxLines 1）+品牌+价格行（青色现价+灰色划线原价）+标签行（百亿补贴/限时秒杀等青色标签+已售数量）。点击商品弹出商品详情弹框。
瀑布双列通过两个Column并列实现，左列放偶数索引商品，右列放奇数索引商品，模拟拼多多瀑布流效果。
六、Tab1 手机数码
手机页采用横卡列表布局，由四个层次构成：
1. 顶部标题栏：📱手机数码+🔧筛选按钮。
2. 品牌快捷筛选横滑：7个品牌chip（全部/华为/小米/苹果/OPPO/vivo/荣耀），选中态青色背景深色文字，未选中深色背景灰色文字，横滑滚动。
3. 排序栏：4个排序选项（综合/销量/价格/新品），选中态青色加粗，固定在品牌筛选下方。
4. 手机横卡列表：21款手机商品横卡排列，每卡含80×80图标块+商品名（maxLines 2）+标签行（百亿补贴等青色标签+⭐评分+已售）+价格行（青色价格+灰色划线原价+右侧+加购按钮）。点击卡片弹出商品详情快览弹框，点击+按钮也弹出详情。
筛选弹框支持品牌选择和排序方式选择，确定后关闭弹框。编辑购买信息弹框支持数量stepper、配送方式选择（顺丰包邮/京东物流/门店自提）、备注输入。
七、Tab2 电脑办公
电脑页的核心特色是参数对比表，由两个层次构成：
1. 顶部标题栏：💻电脑办公+📊对比按钮（直接触发参数对比弹框）。
2. 电脑横卡列表：17款电脑商品横卡，每卡含60×60图标块+商品名+价格行（青色价格+原价）+已售+评分+右侧对比按钮（青色背景）。点击卡片弹出商品详情弹框，点击对比按钮弹出参数对比弹框。
参数对比弹框是本页亮点：以表格形式对比MacBook Pro和拯救者Y9000P两款电脑，包含7个参数行（处理器/内存/存储/屏幕/续航/价格），表头参数项灰色、MacBook列青色、拯救者列橙色，价格行加粗高亮。底部有关闭和对比详情按钮。
修改配置弹框支持内存配置（16GB/32GB/64GB）、硬盘容量（512GB/1TB/2TB）、颜色（深空黑/银色）选择，选中态青色背景。
八、Tab3 潮品配件
配件页采用双列网格布局，由两个层次构成：
1. 顶部标题栏：🔌潮品配件+右侧+新增按钮（青色圆形，触发新增配件弹框）。
2. 配件双列网格：20款配件按双列网格排列，每卡含70高图标区（顶部圆角）+商品名（maxLines 1）+品牌+青色价格+标签行（青色标签+⭐评分）。点击卡片弹出配件详情弹框。
新增配件弹框支持配件名称输入、分类选择（耳机/充电器/保护壳/数据线）、价格输入、库存输入。编辑配件弹框支持名称修改、价格调整、状态切换（上架中/已下架）。
九、Tab4 订单管理
订单页的核心特色是状态Tab+销量图表，由四个层次构成：
1. 顶部标题栏：📋订单管理+共8单统计。
2. 状态Tab：5个状态选项（全部/待付款/待发货/待收货/已完成），选中态青色加粗，固定在标题下方。
3. 本周订单趋势图表：📊本周订单趋势标题+7天柱状图（周一到周日），周六（最高22单）青色高亮柱，其他天暗蓝#0A3A5E柱，每柱上方显示订单数青色文字，下方显示星期灰色文字。图表通过Column高度动态计算实现（weekSales[d]/maxSale*60vp）。
4. 订单列表：8笔订单横卡，每卡含56×56图标块+商品名（maxLines 1）+订单号+价格行（青色金额+日期+右侧状态标签绿色背景）。点击卡片弹出订单详情弹框。
订单详情弹框展示订单号/商品/金额/状态/日期五项信息，底部有编辑和删除按钮。编辑订单弹框支持收件人/电话/地址/备注修改。
十、Tab5 个人中心
个人中心采用全深色卡片布局，由三个层次构成：
1. 用户信息卡：64×64圆形头像（🧑💻emoji）+昵称"数码达人"+手机号+VIP3标签（青色背景）+积分12850+优惠券12张+右侧✏️编辑按钮（触发编辑资料弹框）。
2. 数据统计条：四格统计（12全部订单青色/3待收货橙色/28收藏夹金色/5优惠券绿色），每格含数字+标签。
3. 设置列表：12个设置项（收货地址管理/我的优惠券/我的钱包/我的收藏/浏览历史/消息通知/主题设置/隐私与安全/联系客服/关于我们/退出登录），每项含图标+标签+右侧>箭头，深色卡片背景圆角12。点击退出登录触发注销账号确认弹框（红色警示）。
编辑资料弹框支持昵称/手机号/邮箱修改。地址列表弹框展示3个地址，默认地址有青色标签。关于我们弹框展示应用名/版本号/标语。
十一、弹框体系
本应用弹框数量多达17+种，按页面分布：
首页5种：cartConfirmModal加入购物车确认（底部滑出，含商品信息+数量stepper+加入购物车/立即购买双按钮）、couponModal领券中心（居中卡，5张优惠券列表含金额/门槛/范围/有效期+领取按钮）、detailModal商品详情（大面积居中，含60px图标+商品名+价格行+评分/已售/库存+商品详情5项+收藏/加入购物车/立即购买三按钮）、deleteConfirmModal删除确认（小号居中警示）、addressModal地址选择（侧滑列表，3个地址含编辑/删除操作）。
手机页4种：filterModal筛选排序（居中卡，品牌选择+排序方式+确定按钮）、detailModal商品详情快览（小号居中）、editModal编辑购买信息（居中卡，数量stepper+配送方式+备注）、deleteModal删除确认。
电脑页4种：compareModal参数对比（居中大卡，7行参数对比表）、editModal修改配置（居中卡，内存/硬盘/颜色选择）、deleteModal移出对比确认、detailModal商品详情。
配件页4种：detailModal配件详情、addModal新增配件（居中卡，名称/分类/价格/库存输入）、editModal编辑配件、deleteModal删除确认。
订单页3种：orderDetailModal订单详情、editModal编辑订单、deleteModal删除订单。
我的页4种：editProfileModal编辑资料、deleteAccountModal注销账号（红色警示）、addressListModal地址列表、aboutModal关于我们。
所有弹框均采用统一的modalOverlay半透明遮罩（rgba(0,0,0,0.6)）+居中卡片或底部滑出形态，zIndex 999确保在最上层。
十二、核心技术特性
1. 多组件分离架构：6个独立@Component子组件，每个组件管理自己的状态和弹框，入口组件只负责Tab切换，代码模块化程度高。
2. 深色三级背景层次：通过#0D0D1A（根背景）→#16162B（头部/卡片/弹框）→#1A1A2E（商品卡/输入框/按钮）三级递进营造深色空间感，避免纯黑扁平。
3. 瀑布双列布局：首页和配件页通过两个Column并列实现瀑布流，左列偶数索引、右列奇数索引，模拟拼多多瀑布流效果。
4. 倒计时组件：首页限时秒杀区通过三个Text分别显示时/分/秒，padStart(2,‘0’)补零，青色背景深色数字，冒号分隔。
5. 参数对比表：电脑页通过Row+Column组合实现7行3列参数对比表，表头灰色、两列数据分别青色和橙色高亮，价格行加粗。
6. 动态柱状图：订单页通过Column高度动态计算（weekSales[d]/maxSale*60vp）实现7天销量柱状图，最高值周六青色高亮，其他天暗蓝。
7. 分类配置字典：CATEGORY_CONFIG采用Record<string, CategoryMeta>字典结构，通过分类名快速查找图标和颜色，避免switch分支，扩展性强。
8. 统一弹框遮罩：所有弹框共用modalOverlay Builder（rgba(0,0,0,0.6)半透明+点击关闭），zIndex 999，确保弹框在最上层且交互一致。
9. 状态隔离：每个页面组件的@State状态独立，弹框显隐互不干扰，避免单组件架构中状态过多导致的维护困难。
10. 底部导航指示条：选中Tab除了青色文字加粗外，底部还有18×3青色圆角指示条，视觉反馈明确。
十三、同类对比
| 维度 | 通用电商App | 本应用（数码3C潮品商城） |
|---|---|---|
| 主题 | 浅色为主 | 全深色科技蓝三级背景 |
| 架构 | 单组件 | 6个独立@Component多组件分离 |
| 首页布局 | 单列/网格 | 瀑布双列+倒计时秒杀 |
| 商品列表 | 统一卡片 | 手机横卡/电脑对比/配件网格差异化 |
| 参数对比 | 无或简单 | 7行3列专业参数对比表 |
| 订单页 | 纯列表 | 状态Tab+7天动态柱状图 |
| 弹框数量 | 5-8种 | 17+种覆盖全流程 |
| 分类配置 | switch分支 | Record字典快速查找 |
十四、完整代码结构总览
1173.ets
├── 数据结构（5个interface）
├── 静态配置（CATEGORY_CONFIG字典 + 3个常量数组）
├── 静态数据（5个数组：20商品+8订单+3地址+5优惠券）
├── DigitalTab枚举（6个Tab）
├── DigitalMallApp入口组件（@Entry @Component）
│ ├── contentArea() Tab内容分发
│ ├── bottomTabItem() 底部导航项
│ └── build() 入口布局
├── HomeContent首页组件（5种弹框+productCard+瀑布双列）
├── PhoneContent手机组件（4种弹框+phoneItemBuilder+横卡列表+筛选排序）
├── ComputerContent电脑组件（4种弹框+computerCard+参数对比表+修改配置）
├── AccessoryContent配件组件（4种弹框+accessoryCard+双列网格+新增编辑）
├── OrderContent订单组件（3种弹框+orderItemBuilder+状态Tab+动态柱状图）
└── ProfileContent我的组件（4种弹框+settingItem+用户信息卡+数据统计+设置列表）
十五、开发环境搭建
15.1 环境要求
DevEco Studio 5.0+（支持ArkTS API 24）、HarmonyOS SDK API 24、Node.js 18+、至少8GB内存。
15.2 安装DevEco Studio
从华为开发者官网下载最新版本，运行安装包，选择安装路径，勾选创建桌面快捷方式，点击安装。
15.3 配置SDK
首次启动后进入File > Settings > HarmonyOS SDK，勾选API 24及以上版本，点击Apply等待下载完成。
15.4 创建项目
选择Create Project > Empty Ability，配置项目名称、包名、保存路径，选择Compile SDK为API 24，点击Finish。
15.5 运行应用
将1173.ets代码替换到entry/src/main/ets/pages/Index.ets，连接HarmonyOS设备或启动模拟器，点击运行按钮预览。
15.6 预览调试
DevEco Studio提供实时预览功能，编辑器右侧打开Previewer面板，支持多设备尺寸预览、深色模式切换、组件树inspect等调试能力。
十六、总结展望
本文完整解析了基于HarmonyOS ArkTS API 24的数码3C潮品商城应用，从深色科技蓝三级背景色彩系统、多组件分离架构、商品数据模型、瀑布双列布局、倒计时秒杀、手机横卡列表+筛选排序、电脑参数对比表、配件双列网格+新增编辑、订单状态Tab+动态柱状图、个人深色卡片，到17+种弹框体系、分类配置字典、统一弹框遮罩，展现了ArkTS在深色科技风电商场景下的完整工程实践。
核心价值：
- 深色科技风：三级深色背景层次+科技青唯一高亮色，营造沉浸式数码购物体验
- 多组件分离：6个独立@Component子组件，状态隔离、代码模块化、便于协作
- 差异化布局：首页瀑布双列/手机横卡/电脑对比表/配件网格，每个品类布局最优化
- 专业参数对比：7行3列参数对比表，数码3C用户选购决策更高效
- 数据可视化：订单页7天动态柱状图，销售趋势一目了然
- 全流程弹框：17+种弹框覆盖购物车/领券/详情/筛选/对比/配置/新增/编辑/订单/地址/资料/注销全流程
未来可扩展：
- 接入真实商品API和库存系统，实现实时价格和库存同步
- 瀑布流接入真实图片加载和懒加载，提升性能
- 参数对比支持多商品自由选择对比，不限于两款
- 订单图表接入真实销售数据，支持月/季/年维度切换
- 接入支付SDK和物流追踪，实现完整交易闭环
- 深色/浅色主题切换，满足不同用户偏好
数码3C潮品商城，让科技购物更沉浸。
附录：完整源码
// ============ 1173.ets 数码3C潮品商城（拼多多风格） ============
// 场景：数码3C / 手机电脑 / 潮品配件 · 深色科技蓝主题
// 布局差异：首页瀑布双列+倒计时 / 手机横卡列表 / 电脑对比表 / 配件双列网格 / 订单状态Tab+图表 / 个人深色卡片
interface ProductItem { id: number; name: string; brand: string; price: number; originalPrice: number; sales: number; icon: string; tag: string; rating: number; stock: number }
interface OrderItem { id: number; orderNo: string; productName: string; amount: number; status: string; date: string; icon: string }
interface AddressItem { id: number; name: string; phone: string; detail: string; isDefault: boolean }
interface CouponItem { id: number; value: number; threshold: number; scope: string; expire: string; color: string }
interface CategoryMeta { label: string; icon: string; color: string }
const CATEGORY_CONFIG: Record<string, CategoryMeta> = {
'手机': { label: '手机', icon: '📱', color: '#00E5FF' },
'电脑': { label: '电脑', icon: '💻', color: '#7C4DFF' },
'耳机': { label: '耳机', icon: '🎧', color: '#FF6E40' },
'配件': { label: '配件', icon: '🔌', color: '#00E676' },
'手表': { label: '手表', icon: '⌚', color: '#FFD600' },
'相机': { label: '相机', icon: '📷', color: '#FF1744' }
}
const STATUS_LIST: string[] = ['全部', '待付款', '待发货', '待收货', '已完成']
const PHONE_BRANDS: string[] = ['全部', '华为', '小米', '苹果', 'OPPO', 'vivo', '荣耀']
const SORT_OPTIONS: string[] = ['综合', '销量', '价格', '新品']
const mockProducts: ProductItem[] = [
{ id: 1, name: '华为Mate 60 Pro 12+512G', brand: '华为', price: 6999, originalPrice: 7999, sales: 28534, icon: '📱', tag: '百亿补贴', rating: 4.9, stock: 156 },
{ id: 2, name: '小米14 Ultra 徕卡影像', brand: '小米', price: 6499, originalPrice: 6999, sales: 18293, icon: '📱', tag: '新品首发', rating: 4.8, stock: 89 },
{ id: 3, name: 'MacBook Pro M3 Max 16寸', brand: '苹果', price: 21999, originalPrice: 24999, sales: 9432, icon: '💻', tag: '教育优惠', rating: 5.0, stock: 45 },
{ id: 4, name: 'AirPods Pro 2 USB-C版', brand: '苹果', price: 1599, originalPrice: 1899, sales: 56721, icon: '🎧', tag: '限时秒杀', rating: 4.9, stock: 320 },
{ id: 5, name: '华为Watch GT4 46mm', brand: '华为', price: 1588, originalPrice: 1888, sales: 32456, icon: '⌚', tag: '百亿补贴', rating: 4.7, stock: 210 },
{ id: 6, name: '索尼A7M4 全画幅微单', brand: '索尼', price: 15999, originalPrice: 17999, sales: 4521, icon: '📷', tag: '摄影专用', rating: 4.9, stock: 23 },
{ id: 7, name: 'iPad Pro 11寸 M2芯片', brand: '苹果', price: 6799, originalPrice: 7299, sales: 21345, icon: '💻', tag: '百亿补贴', rating: 4.8, stock: 78 },
{ id: 8, name: '小米手环8 Pro', brand: '小米', price: 399, originalPrice: 499, sales: 89234, icon: '⌚', tag: '限时秒杀', rating: 4.6, stock: 560 },
{ id: 9, name: '华为FreeBuds Pro 3', brand: '华为', price: 1099, originalPrice: 1499, sales: 41234, icon: '🎧', tag: '新品首发', rating: 4.7, stock: 180 },
{ id: 10, name: 'ROG游戏手机8 Pro', brand: '华硕', price: 7999, originalPrice: 8999, sales: 6532, icon: '📱', tag: '电竞专用', rating: 4.8, stock: 34 },
{ id: 11, name: '联想拯救者Y9000P', brand: '联想', price: 9499, originalPrice: 10999, sales: 12345, icon: '💻', tag: '百亿补贴', rating: 4.7, stock: 56 },
{ id: 12, name: '三星Galaxy S24 Ultra', brand: '三星', price: 8999, originalPrice: 9999, sales: 15623, icon: '📱', tag: 'AI拍照', rating: 4.8, stock: 67 },
{ id: 13, name: '大疆Osmo Pocket 3', brand: '大疆', price: 2499, originalPrice: 2899, sales: 23456, icon: '📷', tag: 'Vlog神器', rating: 4.9, stock: 120 },
{ id: 14, name: 'OPPO Find X7 Ultra', brand: 'OPPO', price: 5999, originalPrice: 6499, sales: 18234, icon: '📱', tag: '百亿补贴', rating: 4.7, stock: 90 },
{ id: 15, name: 'vivo X100 Pro', brand: 'vivo', price: 4999, originalPrice: 5499, sales: 21345, icon: '📱', tag: '蔡司影像', rating: 4.8, stock: 110 },
{ id: 16, name: '荣耀Magic6 Pro', brand: '荣耀', price: 5699, originalPrice: 6299, sales: 16789, icon: '📱', tag: '新品首发', rating: 4.6, stock: 85 },
{ id: 17, name: '小米平板6S Pro 12.4寸', brand: '小米', price: 3299, originalPrice: 3699, sales: 9876, icon: '💻', tag: '百亿补贴', rating: 4.7, stock: 65 },
{ id: 18, name: 'JBL Flip 6 蓝牙音箱', brand: 'JBL', price: 699, originalPrice: 999, sales: 45678, icon: '🎧', tag: '限时秒杀', rating: 4.6, stock: 230 },
{ id: 19, name: '佳能EOS R6 Mark II', brand: '佳能', price: 15999, originalPrice: 17999, sales: 3421, icon: '📷', tag: '摄影专用', rating: 4.9, stock: 18 },
{ id: 20, name: '华为MatePad Pro 13.2', brand: '华为', price: 4299, originalPrice: 4899, sales: 8765, icon: '💻', tag: '百亿补贴', rating: 4.7, stock: 52 }
]
const mockOrders: OrderItem[] = [
{ id: 1, orderNo: 'DD20260825001', productName: '华为Mate 60 Pro 12+512G', amount: 6999, status: '待收货', date: '2026-08-22', icon: '📱' },
{ id: 2, orderNo: 'DD20260824002', productName: 'AirPods Pro 2 USB-C版', amount: 1599, status: '已完成', date: '2026-08-20', icon: '🎧' },
{ id: 3, orderNo: 'DD20260823003', productName: '小米手环8 Pro', amount: 399, status: '待发货', date: '2026-08-23', icon: '⌚' },
{ id: 4, orderNo: 'DD20260822004', productName: 'MacBook Pro M3 Max 16寸', amount: 21999, status: '待付款', date: '2026-08-24', icon: '💻' },
{ id: 5, orderNo: 'DD20260821005', productName: '华为FreeBuds Pro 3', amount: 1099, status: '已完成', date: '2026-08-18', icon: '🎧' },
{ id: 6, orderNo: 'DD20260820006', productName: '华为Watch GT4 46mm', amount: 1588, status: '待收货', date: '2026-08-21', icon: '⌚' },
{ id: 7, orderNo: 'DD20260819007', productName: 'JBL Flip 6 蓝牙音箱', amount: 699, status: '已完成', date: '2026-08-15', icon: '🎧' },
{ id: 8, orderNo: 'DD20260818008', productName: '大疆Osmo Pocket 3', amount: 2499, status: '待发货', date: '2026-08-22', icon: '📷' }
]
const mockAddresses: AddressItem[] = [
{ id: 1, name: '张伟', phone: '138****8888', detail: '上海市浦东新区张江高科技园区博云路2号5楼', isDefault: true },
{ id: 2, name: '李娜', phone: '139****6666', detail: '北京市海淀区中关村南大街5号北大科技园3栋', isDefault: false },
{ id: 3, name: '王芳', phone: '137****7777', detail: '深圳市南山区科技园南区高新南一道9号', isDefault: false }
]
const mockCoupons: CouponItem[] = [
{ id: 1, value: 100, threshold: 1000, scope: '数码3C全场', expire: '2026-08-31', color: '#00E5FF' },
{ id: 2, value: 300, threshold: 3000, scope: '手机数码', expire: '2026-09-15', color: '#7C4DFF' },
{ id: 3, value: 50, threshold: 500, scope: '配件专区', expire: '2026-08-28', color: '#FF6E40' },
{ id: 4, value: 500, threshold: 5000, scope: '电脑办公', expire: '2026-09-30', color: '#00E676' },
{ id: 5, value: 200, threshold: 2000, scope: '耳机音响', expire: '2026-09-10', color: '#FFD600' }
]
enum DigitalTab { HOME = 0, PHONE = 1, COMPUTER = 2, ACCESSORY = 3, ORDER = 4, PROFILE = 5 }
@Entry @Component struct DigitalMallApp {
@State activeTab: DigitalTab = DigitalTab.HOME
@Builder contentArea() {
Column() {
if (this.activeTab === DigitalTab.HOME) { HomeContent() }
else if (this.activeTab === DigitalTab.PHONE) { PhoneContent() }
else if (this.activeTab === DigitalTab.COMPUTER) { ComputerContent() }
else if (this.activeTab === DigitalTab.ACCESSORY) { AccessoryContent() }
else if (this.activeTab === DigitalTab.ORDER) { OrderContent() }
else { ProfileContent() }
}.layoutWeight(1)
}
@Builder bottomTabItem(icon: string, label: string, tab: DigitalTab) {
Column() {
Text(icon).fontSize(20).opacity(this.activeTab === tab ? 1.0 : 0.45)
Text(label).fontSize(9).fontColor(this.activeTab === tab ? '#00E5FF' : '#888888')
.fontWeight(this.activeTab === tab ? FontWeight.Bold : FontWeight.Normal).margin({ top: 1 })
if (this.activeTab === tab) {
Column().width(18).height(3).backgroundColor('#00E5FF').borderRadius(2).margin({ top: 2 })
}
}.layoutWeight(1).alignItems(HorizontalAlign.Center).padding({ top: 5, bottom: 5 })
.onClick(() => { this.activeTab = tab })
}
build() {
Column() {
this.contentArea()
Row() {
this.bottomTabItem('🏠', '首页', DigitalTab.HOME)
this.bottomTabItem('📱', '手机', DigitalTab.PHONE)
this.bottomTabItem('💻', '电脑', DigitalTab.COMPUTER)
this.bottomTabItem('🔌', '配件', DigitalTab.ACCESSORY)
this.bottomTabItem('📋', '订单', DigitalTab.ORDER)
this.bottomTabItem('👤', '我的', DigitalTab.PROFILE)
}.width('100%').backgroundColor('#1A1A2E').padding({ top: 4, bottom: 6 })
.border({ width: { top: 1 }, color: '#2A2A4E' })
}.width('100%').height('100%').backgroundColor('#0D0D1A')
}
}
@Component struct HomeContent {
@State showCartModal: boolean = false
@State showCouponModal: boolean = false
@State showDetailModal: boolean = false
@State showDeleteModal: boolean = false
@State showAddressModal: boolean = false
@State selectedProduct: ProductItem | null = null
@State countdownHour: number = 3
@State countdownMin: number = 25
@State countdownSec: number = 18
@Builder modalOverlay(onClose?: () => void) {
Column().width('100%').height('100%').backgroundColor('rgba(0,0,0,0.6)')
.onClick(() => { if (onClose) { onClose() } })
}
@Builder cartConfirmModal() {
Column() {
this.modalOverlay(() => { this.showCartModal = false })
Column() {
Row() {
Text(this.selectedProduct?.icon ?? '📦').fontSize(40)
Column() {
Text(this.selectedProduct?.name ?? '').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
Text('¥' + (this.selectedProduct?.price ?? 0).toString()).fontSize(18).fontWeight(FontWeight.Bold).fontColor('#00E5FF')
}.layoutWeight(1).alignItems(HorizontalAlign.Start).padding({ left: 12 })
Text('✕').fontSize(18).fontColor('#888888').onClick(() => { this.showCartModal = false })
}.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 12 })
Column() {
Text('选择数量').fontSize(12).fontColor('#AAAAAA').width('100%')
Row() {
Text('−').fontSize(20).fontColor('#00E5FF').width(36).height(36).textAlign(TextAlign.Center)
.backgroundColor('#1A1A2E').borderRadius(8)
Text('1').fontSize(16).fontColor('#FFFFFF').width(50).height(36).textAlign(TextAlign.Center)
.backgroundColor('#1A1A2E').borderRadius(8).margin({ left: 8 })
Text('+').fontSize(20).fontColor('#00E5FF').width(36).height(36).textAlign(TextAlign.Center)
.backgroundColor('#1A1A2E').borderRadius(8).margin({ left: 8 })
Column().layoutWeight(1)
Text('库存' + (this.selectedProduct?.stock ?? 0) + '件').fontSize(11).fontColor('#666666')
}.width('100%').margin({ top: 8 })
}.width('100%').padding({ left: 16, right: 16, bottom: 16 })
Row() {
Text('加入购物车').fontSize(14).fontColor('#00E5FF')
.backgroundColor('#1A1A2E').borderRadius(20)
.padding({ left: 28, right: 28, top: 12, bottom: 12 })
.onClick(() => { this.showCartModal = false })
Text('立即购买').fontSize(14).fontColor('#0D0D1A')
.backgroundColor('#00E5FF').borderRadius(20)
.padding({ left: 28, right: 28, top: 12, bottom: 12 }).margin({ left: 12 })
.onClick(() => { this.showCartModal = false })
}.width('100%').justifyContent(FlexAlign.Center).padding({ bottom: 20 })
}.width('100%').backgroundColor('#16162B')
.border({ width: { top: 1 }, color: '#00E5FF' })
.borderRadius({ topLeft: 16, topRight: 16 })
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.End)
}
@Builder couponModal() {
Column() {
this.modalOverlay(() => { this.showCouponModal = false })
Column() {
Text('🎫 领券中心').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
.padding({ top: 20, bottom: 8 })
Text('精选好券 · 限时领取').fontSize(11).fontColor('#888888').padding({ bottom: 12 })
Scroll() {
Column() {
ForEach(mockCoupons, (c: CouponItem) => {
Row() {
Column() {
Text('¥' + c.value).fontSize(24).fontWeight(FontWeight.Bold).fontColor(c.color)
Text('满' + c.threshold + '可用').fontSize(10).fontColor('#888888')
}.width(90).alignItems(HorizontalAlign.Center)
Column() {
Text(c.scope).fontSize(13).fontColor('#FFFFFF').fontWeight(FontWeight.Medium)
Text('有效期至 ' + c.expire).fontSize(10).fontColor('#666666').margin({ top: 2 })
}.layoutWeight(1).alignItems(HorizontalAlign.Start)
Text('领取').fontSize(12).fontColor('#0D0D1A')
.backgroundColor(c.color).borderRadius(14)
.padding({ left: 14, right: 14, top: 6, bottom: 6 })
.onClick(() => { this.showCouponModal = false })
}.width('100%').backgroundColor('#1A1A2E')
.borderRadius(10).padding({ top: 12, bottom: 12, left: 12, right: 12 })
.margin({ left: 16, right: 16, top: 6 })
})
}
}.layoutWeight(1).constraintSize({ maxHeight: '50%' })
Text('✕').fontSize(16).fontColor('#666666')
.margin({ top: 12, bottom: 16 })
.onClick(() => { this.showCouponModal = false })
}.width('88%').backgroundColor('#16162B').borderRadius(16)
.alignItems(HorizontalAlign.Center)
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.Center)
}
@Builder detailModal() {
Column() {
this.modalOverlay(() => { this.showDetailModal = false })
Column() {
Row() {
Text(this.selectedProduct?.icon ?? '📦').fontSize(60).margin({ top: 20 })
}.width('100%').justifyContent(FlexAlign.Center)
Text(this.selectedProduct?.name ?? '').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
.padding({ left: 20, right: 20, top: 12 })
Row() {
Text('¥' + (this.selectedProduct?.price ?? 0)).fontSize(28).fontWeight(FontWeight.Bold).fontColor('#00E5FF')
Text('¥' + (this.selectedProduct?.originalPrice ?? 0)).fontSize(14).fontColor('#666666')
.decoration({ type: TextDecorationType.LineThrough }).margin({ left: 8, top: 8 })
Text((this.selectedProduct?.tag ?? '')).fontSize(10).fontColor('#0D0D1A')
.backgroundColor('#00E5FF').borderRadius(4)
.padding({ left: 6, right: 6, top: 2, bottom: 2 }).margin({ left: 8, top: 6 })
}.width('100%').padding({ left: 20, top: 8 })
Row() {
Text('⭐' + (this.selectedProduct?.rating ?? 0)).fontSize(13).fontColor('#FFD600')
Text('已售' + (this.selectedProduct?.sales ?? 0) + '件').fontSize(11).fontColor('#888888').margin({ left: 12 })
Text('库存' + (this.selectedProduct?.stock ?? 0) + '件').fontSize(11).fontColor('#888888').margin({ left: 12 })
}.width('100%').padding({ left: 20, top: 8 })
Text('—— 商品详情 ——').fontSize(12).fontColor('#666666').margin({ top: 16, bottom: 8 })
Column() {
Text('品牌：' + (this.selectedProduct?.brand ?? '')).fontSize(12).fontColor('#AAAAAA')
Text('分类：数码3C').fontSize(12).fontColor('#AAAAAA').margin({ top: 4 })
Text('评价：好评率 ' + (((this.selectedProduct?.rating ?? 0) / 5 * 100).toFixed(0)) + '%').fontSize(12).fontColor('#AAAAAA').margin({ top: 4 })
Text('物流：顺丰包邮·次日达').fontSize(12).fontColor('#AAAAAA').margin({ top: 4 })
Text('售后：7天无理由退换·全国联保').fontSize(12).fontColor('#AAAAAA').margin({ top: 4 })
}.width('100%').padding({ left: 20, right: 20, bottom: 12 })
Row() {
Text('收藏').fontSize(12).fontColor('#888888')
.backgroundColor('#1A1A2E').borderRadius(20)
.padding({ left: 24, right: 24, top: 12, bottom: 12 })
Text('加入购物车').fontSize(12).fontColor('#00E5FF')
.backgroundColor('#1A3A5E').borderRadius(20)
.padding({ left: 24, right: 24, top: 12, bottom: 12 }).margin({ left: 8 })
Text('立即购买').fontSize(12).fontColor('#0D0D1A')
.backgroundColor('#00E5FF').borderRadius(20)
.padding({ left: 24, right: 24, top: 12, bottom: 12 }).margin({ left: 8 })
.onClick(() => { this.showDetailModal = false; this.showCartModal = true })
}.width('100%').justifyContent(FlexAlign.Center)
.padding({ top: 16, bottom: 20, left: 16, right: 16 })
}.width('92%').backgroundColor('#16162B').borderRadius(16)
.alignItems(HorizontalAlign.Center).position({ x: '4%', y: '8%' })
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
}
@Builder deleteConfirmModal() {
Column() {
this.modalOverlay(() => { this.showDeleteModal = false })
Column() {
Text('⚠️').fontSize(40).margin({ top: 20 })
Text('确认移除商品？').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
Text('移出后可重新添加').fontSize(12).fontColor('#FF6E40').margin({ top: 4 })
Row() {
Text('取消').fontSize(14).fontColor('#888888')
.backgroundColor('#1A1A2E').borderRadius(18)
.padding({ left: 28, right: 28, top: 10, bottom: 10 })
.onClick(() => { this.showDeleteModal = false })
Text('确认移除').fontSize(14).fontColor('#FFFFFF')
.backgroundColor('#FF1744').borderRadius(18)
.padding({ left: 28, right: 28, top: 10, bottom: 10 }).margin({ left: 12 })
.onClick(() => { this.showDeleteModal = false })
}.padding({ top: 20, bottom: 20 })
}.width('76%').backgroundColor('#16162B').borderRadius(16)
.alignItems(HorizontalAlign.Center)
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.Center)
}
@Builder addressModal() {
Column() {
this.modalOverlay(() => { this.showAddressModal = false })
Column() {
Row() {
Text('📍 收货地址').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
Column().layoutWeight(1)
Text('+新增').fontSize(12).fontColor('#00E5FF').onClick(() => { this.showAddressModal = false })
}.width('100%').padding({ left: 16, right: 16, top: 18, bottom: 12 })
Divider().color('#2A2A4E')
Scroll() {
Column() {
ForEach(mockAddresses, (a: AddressItem) => {
Column() {
Row() {
Text(a.name).fontSize(14).fontColor('#FFFFFF').fontWeight(FontWeight.Bold)
Text(a.phone).fontSize(12).fontColor('#AAAAAA').margin({ left: 10 })
if (a.isDefault) {
Text('默认').fontSize(9).fontColor('#0D0D1A').backgroundColor('#00E5FF')
.borderRadius(4).padding({ left: 5, right: 5, top: 1, bottom: 1 }).margin({ left: 6 })
}
Column().layoutWeight(1)
Text('编辑').fontSize(11).fontColor('#00E5FF')
Text('删除').fontSize(11).fontColor('#FF6E40').margin({ left: 12 })
.onClick(() => { this.showAddressModal = false; this.showDeleteModal = true })
}.width('100%')
Text(a.detail).fontSize(12).fontColor('#CCCCCC').margin({ top: 4 })
}.width('100%').padding({ left: 16, right: 16, top: 14, bottom: 14 })
.border({ width: { bottom: 1 }, color: '#2A2A4E' })
})
}
}.layoutWeight(1)
}.width('85%').height('60%').backgroundColor('#16162B').borderRadius(16)
.position({ x: '7.5%', y: '15%' })
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
}
@Builder productCard(p: ProductItem) {
Column() {
Column() { Text(p.icon).fontSize(40).margin({ top: 12 }) }
.width('100%').height(80).justifyContent(FlexAlign.Center)
Text(p.name).fontSize(12).fontColor('#FFFFFF').maxLines(1).padding({ left: 8, right: 8, top: 4 })
Text(p.brand).fontSize(9).fontColor('#888888').margin({ top: 2 })
Row() {
Text('¥' + p.price).fontSize(15).fontColor('#00E5FF').fontWeight(FontWeight.Bold)
Text('¥' + p.originalPrice).fontSize(10).fontColor('#666666')
.decoration({ type: TextDecorationType.LineThrough }).margin({ left: 4, top: 3 })
}.width('100%').padding({ left: 8, bottom: 4 })
Row() {
Text(p.tag).fontSize(8).fontColor('#0D0D1A').backgroundColor('#00E5FF')
.borderRadius(4).padding({ left: 4, right: 4, top: 1, bottom: 1 })
Text('已售' + p.sales).fontSize(8).fontColor('#888888').margin({ left: 4 })
}.width('100%').padding({ left: 8, bottom: 8 })
}.width('100%').backgroundColor('#1A1A2E').borderRadius(10)
.onClick(() => { this.selectedProduct = p; this.showDetailModal = true })
}
build() {
Stack() {
Column() {
Row() {
Text('🔍').fontSize(14).margin({ left: 12 })
TextInput({ placeholder: '搜索数码3C好物...' })
.placeholderColor('#555555').fontSize(13).layoutWeight(1)
.backgroundColor('#1A1A2E').borderRadius(8).margin({ left: 6, right: 6 })
Text('🎫').fontSize(18).margin({ right: 10 })
.onClick(() => { this.showCouponModal = true })
}.width('100%').padding({ top: 10, bottom: 8 }).backgroundColor('#16162B')
Row() {
Column() {
Text('⚡ 限时秒杀').fontSize(15).fontWeight(FontWeight.Bold).fontColor('#00E5FF')
Text('每日0点更新').fontSize(9).fontColor('#888888').margin({ top: 1 })
}.alignItems(HorizontalAlign.Start)
Column().layoutWeight(1)
Row() {
Text(this.countdownHour.toString().padStart(2, '0')).fontSize(14).fontColor('#0D0D1A')
.backgroundColor('#00E5FF').borderRadius(4).width(28).height(24).textAlign(TextAlign.Center)
Text(':').fontSize(14).fontColor('#00E5FF')
Text(this.countdownMin.toString().padStart(2, '0')).fontSize(14).fontColor('#0D0D1A')
.backgroundColor('#00E5FF').borderRadius(4).width(28).height(24).textAlign(TextAlign.Center)
Text(':').fontSize(14).fontColor('#00E5FF')
Text(this.countdownSec.toString().padStart(2, '0')).fontSize(14).fontColor('#0D0D1A')
.backgroundColor('#00E5FF').borderRadius(4).width(28).height(24).textAlign(TextAlign.Center)
}
}.width('100%').padding({ left: 14, right: 14, top: 10, bottom: 10 }).backgroundColor('#16162B')
Row() {
ForEach(['手机', '电脑', '耳机', '配件', '手表', '相机'], (cat: string) => {
Column() {
Text(CATEGORY_CONFIG[cat]?.icon ?? '📦').fontSize(22)
Text(CATEGORY_CONFIG[cat]?.label ?? cat).fontSize(9).fontColor('#CCCCCC').margin({ top: 2 })
}.layoutWeight(1).alignItems(HorizontalAlign.Center)
})
}.width('100%').padding({ top: 12, bottom: 12 }).backgroundColor('#16162B')
Row() {
Text('💰').fontSize(16)
Text('百亿补贴 · 数码3C直降').fontSize(13).fontColor('#00E5FF').fontWeight(FontWeight.Bold).margin({ left: 6 })
Column().layoutWeight(1)
Text('查看更多 >').fontSize(10).fontColor('#888888')
}.width('100%').padding({ left: 14, right: 14, top: 10, bottom: 10 })
.backgroundColor('#1A2330').borderRadius(10).margin({ left: 12, right: 12, top: 6 })
Scroll() {
Column() {
Row() {
Column() {
this.productCard(mockProducts[0])
this.productCard(mockProducts[3])
this.productCard(mockProducts[6])
this.productCard(mockProducts[9])
this.productCard(mockProducts[12])
this.productCard(mockProducts[15])
this.productCard(mockProducts[18])
}.layoutWeight(1)
Column() {
this.productCard(mockProducts[1])
this.productCard(mockProducts[4])
this.productCard(mockProducts[7])
this.productCard(mockProducts[10])
this.productCard(mockProducts[13])
this.productCard(mockProducts[16])
this.productCard(mockProducts[19])
}.layoutWeight(1)
}.padding({ left: 6, right: 6, bottom: 20 })
}
}.layoutWeight(1).scrollBar(BarState.Off)
}.width('100%').height('100%')
if (this.showCartModal) { this.cartConfirmModal() }
if (this.showCouponModal) { this.couponModal() }
if (this.showDetailModal) { this.detailModal() }
if (this.showDeleteModal) { this.deleteConfirmModal() }
if (this.showAddressModal) { this.addressModal() }
}.width('100%').height('100%')
}
}
@Component struct PhoneContent {
@State selectedBrand: string = '全部'
@State selectedSort: string = '综合'
@State showFilterModal: boolean = false
@State showDetailModal: boolean = false
@State showEditModal: boolean = false
@State showDeleteModal: boolean = false
@State selectedProduct: ProductItem | null = null
@Builder modalOverlay(onClose?: () => void) {
Column().width('100%').height('100%').backgroundColor('rgba(0,0,0,0.6)')
.onClick(() => { if (onClose) { onClose() } })
}
@Builder filterModal() {
Column() {
this.modalOverlay(() => { this.showFilterModal = false })
Column() {
Text('🔧 筛选排序').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
.padding({ top: 18, bottom: 12 })
Text('品牌').fontSize(12).fontColor('#888888').width('100%').padding({ left: 20 })
Column() {
ForEach(PHONE_BRANDS, (b: string) => {
if (this.selectedBrand === b) {
Text(b).fontSize(12).fontColor('#0D0D1A').backgroundColor('#00E5FF')
.borderRadius(14).padding({ left: 14, right: 14, top: 6, bottom: 6 }).margin({ top: 6 })
} else {
Text(b).fontSize(12).fontColor('#CCCCCC').backgroundColor('#1A1A2E')
.borderRadius(14).padding({ left: 14, right: 14, top: 6, bottom: 6 }).margin({ top: 6 })
.onClick(() => { this.selectedBrand = b })
}
})
}.alignItems(HorizontalAlign.Start).padding({ left: 16, right: 16 })
Text('排序方式').fontSize(12).fontColor('#888888').width('100%').padding({ left: 20, top: 12 })
Row() {
ForEach(SORT_OPTIONS, (s: string) => {
if (this.selectedSort === s) {
Text(s).fontSize(11).fontColor('#0D0D1A').backgroundColor('#00E5FF')
.borderRadius(12).padding({ left: 10, right: 10, top: 5, bottom: 5 }).margin({ left: 4 })
} else {
Text(s).fontSize(11).fontColor('#CCCCCC').backgroundColor('#1A1A2E')
.borderRadius(12).padding({ left: 10, right: 10, top: 5, bottom: 5 }).margin({ left: 4 })
.onClick(() => { this.selectedSort = s })
}
})
}.padding({ left: 16, right: 16, top: 6 })
Text('确定').fontSize(14).fontColor('#0D0D1A')
.backgroundColor('#00E5FF').borderRadius(20)
.padding({ left: 32, right: 32, top: 10, bottom: 10 }).margin({ top: 16, bottom: 20 })
.onClick(() => { this.showFilterModal = false })
}.width('80%').backgroundColor('#16162B').borderRadius(16).alignItems(HorizontalAlign.Center)
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.Center)
}
@Builder detailModal() {
Column() {
this.modalOverlay(() => { this.showDetailModal = false })
Column() {
Text(this.selectedProduct?.icon ?? '📱').fontSize(50).margin({ top: 20 })
Text(this.selectedProduct?.name ?? '').fontSize(15).fontColor('#FFFFFF').fontWeight(FontWeight.Bold)
.padding({ left: 16, right: 16, top: 10 })
Text('¥' + (this.selectedProduct?.price ?? 0)).fontSize(24).fontColor('#00E5FF').fontWeight(FontWeight.Bold)
.margin({ top: 6 })
Row() {
Text('⭐' + (this.selectedProduct?.rating ?? 0)).fontSize(12).fontColor('#FFD600')
Text('已售' + (this.selectedProduct?.sales ?? 0)).fontSize(11).fontColor('#888888').margin({ left: 12 })
}.margin({ top: 6 })
Row() {
Text('加入购物车').fontSize(13).fontColor('#00E5FF')
.backgroundColor('#1A3A5E').borderRadius(18)
.padding({ left: 22, right: 22, top: 10, bottom: 10 })
.onClick(() => { this.showDetailModal = false })
Text('立即购买').fontSize(13).fontColor('#0D0D1A')
.backgroundColor('#00E5FF').borderRadius(18)
.padding({ left: 22, right: 22, top: 10, bottom: 10 }).margin({ left: 10 })
.onClick(() => { this.showDetailModal = false; this.showEditModal = true })
}.padding({ top: 16, bottom: 20 })
}.width('70%').backgroundColor('#16162B').borderRadius(16).alignItems(HorizontalAlign.Center)
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.Center)
}
@Builder editModal() {
Column() {
this.modalOverlay(() => { this.showEditModal = false })
Column() {
Text('✏️ 编辑购买信息').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
.padding({ top: 18, bottom: 8 })
Divider().color('#2A2A4E')
Column() {
Text('购买数量').fontSize(12).fontColor('#AAAAAA').width('100%')
Row() {
Text('−').fontSize(18).fontColor('#00E5FF').width(32).height(32).textAlign(TextAlign.Center)
.backgroundColor('#1A1A2E').borderRadius(8)
Text('1').fontSize(14).fontColor('#FFFFFF').width(40).height(32).textAlign(TextAlign.Center)
.backgroundColor('#1A1A2E').borderRadius(8).margin({ left: 8 })
Text('+').fontSize(18).fontColor('#00E5FF').width(32).height(32).textAlign(TextAlign.Center)
.backgroundColor('#1A1A2E').borderRadius(8).margin({ left: 8 })
}.margin({ top: 6 })
Text('配送方式').fontSize(12).fontColor('#AAAAAA').width('100%').margin({ top: 12 })
Row() {
Text('顺丰包邮').fontSize(11).fontColor('#0D0D1A').backgroundColor('#00E5FF')
.borderRadius(10).padding({ left: 10, right: 10, top: 4, bottom: 4 })
Text('京东物流').fontSize(11).fontColor('#CCCCCC').backgroundColor('#1A1A2E')
.borderRadius(10).padding({ left: 10, right: 10, top: 4, bottom: 4 }).margin({ left: 8 })
Text('门店自提').fontSize(11).fontColor('#CCCCCC').backgroundColor('#1A1A2E')
.borderRadius(10).padding({ left: 10, right: 10, top: 4, bottom: 4 }).margin({ left: 8 })
}.margin({ top: 6 })
Text('备注').fontSize(12).fontColor('#AAAAAA').width('100%').margin({ top: 12 })
TextInput({ placeholder: '选填，留言说明...' })
.placeholderColor('#555555').fontSize(12).width('100%')
.backgroundColor('#1A1A2E').borderRadius(8).margin({ top: 4 })
}.width('100%').padding({ left: 20, right: 20, top: 12, bottom: 12 })
Row() {
Text('取消').fontSize(13).fontColor('#888888')
.backgroundColor('#1A1A2E').borderRadius(18)
.padding({ left: 24, right: 24, top: 10, bottom: 10 })
.onClick(() => { this.showEditModal = false })
Text('确认下单').fontSize(13).fontColor('#0D0D1A')
.backgroundColor('#00E5FF').borderRadius(18)
.padding({ left: 24, right: 24, top: 10, bottom: 10 }).margin({ left: 10 })
.onClick(() => { this.showEditModal = false })
}.padding({ top: 8, bottom: 20 })
}.width('85%').backgroundColor('#16162B').borderRadius(16).alignItems(HorizontalAlign.Center)
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.Center)
}
@Builder deleteModal() {
Column() {
this.modalOverlay(() => { this.showDeleteModal = false })
Column() {
Text('🗑️').fontSize(36).margin({ top: 18 })
Text('确认删除该商品？').fontSize(15).fontColor('#FFFFFF').fontWeight(FontWeight.Bold).margin({ top: 6 })
Text('删除后可从收藏恢复').fontSize(11).fontColor('#888888').margin({ top: 4 })
Row() {
Text('取消').fontSize(13).fontColor('#888888')
.backgroundColor('#1A1A2E').borderRadius(16)
.padding({ left: 24, right: 24, top: 8, bottom: 8 })
.onClick(() => { this.showDeleteModal = false })
Text('删除').fontSize(13).fontColor('#FFFFFF')
.backgroundColor('#FF1744').borderRadius(16)
.padding({ left: 24, right: 24, top: 8, bottom: 8 }).margin({ left: 10 })
.onClick(() => { this.showDeleteModal = false })
}.padding({ top: 14, bottom: 18 })
}.width('70%').backgroundColor('#16162B').borderRadius(16).alignItems(HorizontalAlign.Center)
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.Center)
}
@Builder phoneItemBuilder(p: ProductItem) {
Row() {
Column() { Text(p.icon).fontSize(36) }
.width(80).height(80).backgroundColor('#1A1A2E').borderRadius(10)
.justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
Column() {
Text(p.name).fontSize(13).fontColor('#FFFFFF').fontWeight(FontWeight.Medium).maxLines(2)
Row() {
Text(p.tag).fontSize(8).fontColor('#0D0D1A').backgroundColor('#00E5FF')
.borderRadius(4).padding({ left: 4, right: 4, top: 1, bottom: 1 })
Text('⭐' + p.rating).fontSize(10).fontColor('#FFD600').margin({ left: 6 })
Text('已售' + p.sales).fontSize(9).fontColor('#888888').margin({ left: 6 })
}.margin({ top: 4 })
Row() {
Text('¥' + p.price).fontSize(16).fontColor('#00E5FF').fontWeight(FontWeight.Bold)
Text('¥' + p.originalPrice).fontSize(10).fontColor('#666666')
.decoration({ type: TextDecorationType.LineThrough }).margin({ left: 4, top: 4 })
Column().layoutWeight(1)
Text('+').fontSize(16).fontColor('#0D0D1A').backgroundColor('#00E5FF')
.width(28).height(28).borderRadius(14).textAlign(TextAlign.Center)
.onClick(() => { this.selectedProduct = p; this.showDetailModal = true })
}.margin({ top: 6 })
}.layoutWeight(1).alignItems(HorizontalAlign.Start).padding({ left: 12 })
}.width('100%').backgroundColor('#16162B').borderRadius(10)
.padding({ left: 12, right: 12, top: 10, bottom: 10 }).margin({ left: 12, right: 12, top: 5 })
.onClick(() => { this.selectedProduct = p; this.showDetailModal = true })
}
build() {
Stack() {
Column() {
Row() {
Text('📱 手机数码').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
Column().layoutWeight(1)
Text('🔧').fontSize(18).margin({ right: 14 })
.onClick(() => { this.showFilterModal = true })
}.width('100%').padding({ top: 14, bottom: 10 }).backgroundColor('#16162B')
Scroll() {
Row() {
ForEach(PHONE_BRANDS, (b: string) => {
if (this.selectedBrand === b) {
Text(b).fontSize(11).fontColor('#0D0D1A').backgroundColor('#00E5FF')
.borderRadius(14).padding({ left: 12, right: 12, top: 5, bottom: 5 }).margin({ left: 4, right: 4 })
} else {
Text(b).fontSize(11).fontColor('#CCCCCC').backgroundColor('#1A1A2E')
.borderRadius(14).padding({ left: 12, right: 12, top: 5, bottom: 5 }).margin({ left: 4, right: 4 })
.onClick(() => { this.selectedBrand = b })
}
})
}.padding({ left: 8, right: 8 })
}.scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off).height(36)
.backgroundColor('#16162B')
Row() {
ForEach(SORT_OPTIONS, (s: string) => {
if (this.selectedSort === s) {
Text(s).fontSize(11).fontColor('#00E5FF').fontWeight(FontWeight.Bold)
.padding({ left: 8, right: 8 }).layoutWeight(1).textAlign(TextAlign.Center)
} else {
Text(s).fontSize(11).fontColor('#888888')
.padding({ left: 8, right: 8 }).layoutWeight(1).textAlign(TextAlign.Center)
.onClick(() => { this.selectedSort = s })
}
})
}.width('100%').padding({ top: 8, bottom: 8 }).backgroundColor('#0D0D1A')
.border({ width: { top: 1, bottom: 1 }, color: '#1A1A2E' })
Scroll() {
Column() {
this.phoneItemBuilder(mockProducts[0])
this.phoneItemBuilder(mockProducts[1])
this.phoneItemBuilder(mockProducts[9])
this.phoneItemBuilder(mockProducts[11])
this.phoneItemBuilder(mockProducts[13])
this.phoneItemBuilder(mockProducts[14])
this.phoneItemBuilder(mockProducts[15])
this.phoneItemBuilder(mockProducts[2])
this.phoneItemBuilder(mockProducts[6])
this.phoneItemBuilder(mockProducts[16])
this.phoneItemBuilder(mockProducts[10])
this.phoneItemBuilder(mockProducts[4])
this.phoneItemBuilder(mockProducts[8])
this.phoneItemBuilder(mockProducts[17])
this.phoneItemBuilder(mockProducts[5])
this.phoneItemBuilder(mockProducts[18])
this.phoneItemBuilder(mockProducts[19])
this.phoneItemBuilder(mockProducts[3])
this.phoneItemBuilder(mockProducts[7])
this.phoneItemBuilder(mockProducts[12])
}.padding({ bottom: 20 })
}.layoutWeight(1).scrollBar(BarState.Off)
}.width('100%').height('100%')
if (this.showFilterModal) { this.filterModal() }
if (this.showDetailModal) { this.detailModal() }
if (this.showEditModal) { this.editModal() }
if (this.showDeleteModal) { this.deleteModal() }
}.width('100%').height('100%')
}
}
@Component struct ComputerContent {
@State showCompareModal: boolean = false
@State showEditModal: boolean = false
@State showDeleteModal: boolean = false
@State showDetailModal: boolean = false
@State selectedProduct: ProductItem | null = null
@Builder modalOverlay(onClose?: () => void) {
Column().width('100%').height('100%').backgroundColor('rgba(0,0,0,0.6)')
.onClick(() => { if (onClose) { onClose() } })
}
@Builder compareModal() {
Column() {
this.modalOverlay(() => { this.showCompareModal = false })
Column() {
Text('📊 参数对比').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
.padding({ top: 18, bottom: 12 })
Divider().color('#2A2A4E')
Column() {
Row() {
Text('参数项').fontSize(11).fontColor('#888888').layoutWeight(1)
Text('MacBook Pro').fontSize(11).fontColor('#00E5FF').layoutWeight(1).textAlign(TextAlign.Center)
Text('拯救者Y9000P').fontSize(11).fontColor('#FF6E40').layoutWeight(1).textAlign(TextAlign.Center)
}.width('100%').padding({ top: 10, bottom: 10 }).border({ width: { bottom: 1 }, color: '#2A2A4E' })
Row() {
Text('处理器').fontSize(11).fontColor('#CCCCCC').layoutWeight(1)
Text('M3 Max').fontSize(11).fontColor('#FFFFFF').layoutWeight(1).textAlign(TextAlign.Center)
Text('i9-13900HX').fontSize(11).fontColor('#FFFFFF').layoutWeight(1).textAlign(TextAlign.Center)
}.width('100%').padding({ top: 8, bottom: 8 }).border({ width: { bottom: 1 }, color: '#1A1A2E' })
Row() {
Text('内存').fontSize(11).fontColor('#CCCCCC').layoutWeight(1)
Text('36GB').fontSize(11).fontColor('#FFFFFF').layoutWeight(1).textAlign(TextAlign.Center)
Text('32GB DDR5').fontSize(11).fontColor('#FFFFFF').layoutWeight(1).textAlign(TextAlign.Center)
}.width('100%').padding({ top: 8, bottom: 8 }).border({ width: { bottom: 1 }, color: '#1A1A2E' })
Row() {
Text('存储').fontSize(11).fontColor('#CCCCCC').layoutWeight(1)
Text('1TB SSD').fontSize(11).fontColor('#FFFFFF').layoutWeight(1).textAlign(TextAlign.Center)
Text('1TB SSD').fontSize(11).fontColor('#FFFFFF').layoutWeight(1).textAlign(TextAlign.Center)
}.width('100%').padding({ top: 8, bottom: 8 }).border({ width: { bottom: 1 }, color: '#1A1A2E' })
Row() {
Text('屏幕').fontSize(11).fontColor('#CCCCCC').layoutWeight(1)
Text('16寸 Liquid').fontSize(11).fontColor('#FFFFFF').layoutWeight(1).textAlign(TextAlign.Center)
Text('16寸 240Hz').fontSize(11).fontColor('#FFFFFF').layoutWeight(1).textAlign(TextAlign.Center)
}.width('100%').padding({ top: 8, bottom: 8 }).border({ width: { bottom: 1 }, color: '#1A1A2E' })
Row() {
Text('续航').fontSize(11).fontColor('#CCCCCC').layoutWeight(1)
Text('22小时').fontSize(11).fontColor('#FFFFFF').layoutWeight(1).textAlign(TextAlign.Center)
Text('8小时').fontSize(11).fontColor('#FFFFFF').layoutWeight(1).textAlign(TextAlign.Center)
}.width('100%').padding({ top: 8, bottom: 8 }).border({ width: { bottom: 1 }, color: '#1A1A2E' })
Row() {
Text('价格').fontSize(11).fontColor('#CCCCCC').layoutWeight(1)
Text('¥21999').fontSize(13).fontColor('#00E5FF').fontWeight(FontWeight.Bold).layoutWeight(1).textAlign(TextAlign.Center)
Text('¥9499').fontSize(13).fontColor('#FF6E40').fontWeight(FontWeight.Bold).layoutWeight(1).textAlign(TextAlign.Center)
}.width('100%').padding({ top: 8, bottom: 8 })
}.width('100%').padding({ left: 16, right: 16 })
Row() {
Text('关闭').fontSize(13).fontColor('#888888')
.backgroundColor('#1A1A2E').borderRadius(18)
.padding({ left: 24, right: 24, top: 10, bottom: 10 })
.onClick(() => { this.showCompareModal = false })
Text('对比详情').fontSize(13).fontColor('#0D0D1A')
.backgroundColor('#00E5FF').borderRadius(18)
.padding({ left: 24, right: 24, top: 10, bottom: 10 }).margin({ left: 10 })
.onClick(() => { this.showCompareModal = false; this.showDetailModal = true })
}.padding({ top: 8, bottom: 20 })
}.width('90%').backgroundColor('#16162B').borderRadius(16).alignItems(HorizontalAlign.Center)
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.Center)
}
@Builder editModal() {
Column() {
this.modalOverlay(() => { this.showEditModal = false })
Column() {
Text('✏️ 修改配置').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
.padding({ top: 18, bottom: 8 })
Divider().color('#2A2A4E')
Text('内存配置').fontSize(12).fontColor('#888888').width('100%').padding({ left: 20, top: 12 })
Row() {
Text('16GB').fontSize(11).fontColor('#CCCCCC').backgroundColor('#1A1A2E').borderRadius(10)
.padding({ left: 12, right: 12, top: 5, bottom: 5 }).margin({ left: 4 })
Text('32GB').fontSize(11).fontColor('#0D0D1A').backgroundColor('#00E5FF').borderRadius(10)
.padding({ left: 12, right: 12, top: 5, bottom: 5 }).margin({ left: 4 })
Text('64GB').fontSize(11).fontColor('#CCCCCC').backgroundColor('#1A1A2E').borderRadius(10)
.padding({ left: 12, right: 12, top: 5, bottom: 5 }).margin({ left: 4 })
}.padding({ left: 16, right: 16, top: 6 })
Text('硬盘容量').fontSize(12).fontColor('#888888').width('100%').padding({ left: 20, top: 12 })
Row() {
Text('512GB').fontSize(11).fontColor('#CCCCCC').backgroundColor('#1A1A2E').borderRadius(10)
.padding({ left: 12, right: 12, top: 5, bottom: 5 }).margin({ left: 4 })
Text('1TB').fontSize(11).fontColor('#0D0D1A').backgroundColor('#00E5FF').borderRadius(10)
.padding({ left: 12, right: 12, top: 5, bottom: 5 }).margin({ left: 4 })
Text('2TB').fontSize(11).fontColor('#CCCCCC').backgroundColor('#1A1A2E').borderRadius(10)
.padding({ left: 12, right: 12, top: 5, bottom: 5 }).margin({ left: 4 })
}.padding({ left: 16, right: 16, top: 6 })
Text('颜色').fontSize(12).fontColor('#888888').width('100%').padding({ left: 20, top: 12 })
Row() {
Text('深空黑').fontSize(11).fontColor('#0D0D1A').backgroundColor('#00E5FF').borderRadius(10)
.padding({ left: 12, right: 12, top: 5, bottom: 5 }).margin({ left: 4 })
Text('银色').fontSize(11).fontColor('#CCCCCC').backgroundColor('#1A1A2E').borderRadius(10)
.padding({ left: 12, right: 12, top: 5, bottom: 5 }).margin({ left: 4 })
}.padding({ left: 16, right: 16, top: 6 })
Row() {
Text('取消').fontSize(13).fontColor('#888888')
.backgroundColor('#1A1A2E').borderRadius(18)
.padding({ left: 24, right: 24, top: 10, bottom: 10 })
.onClick(() => { this.showEditModal = false })
Text('确认修改').fontSize(13).fontColor('#0D0D1A')
.backgroundColor('#00E5FF').borderRadius(18)
.padding({ left: 24, right: 24, top: 10, bottom: 10 }).margin({ left: 10 })
.onClick(() => { this.showEditModal = false })
}.padding({ top: 16, bottom: 20 })
}.width('85%').backgroundColor('#16162B').borderRadius(16).alignItems(HorizontalAlign.Center)
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.Center)
}
@Builder deleteModal() {
Column() {
this.modalOverlay(() => { this.showDeleteModal = false })
Column() {
Text('⚠️').fontSize(36).margin({ top: 18 })
Text('移出对比栏？').fontSize(15).fontColor('#FFFFFF').fontWeight(FontWeight.Bold).margin({ top: 6 })
Row() {
Text('取消').fontSize(13).fontColor('#888888')
.backgroundColor('#1A1A2E').borderRadius(16)
.padding({ left: 24, right: 24, top: 8, bottom: 8 })
.onClick(() => { this.showDeleteModal = false })
Text('移出').fontSize(13).fontColor('#FFFFFF')
.backgroundColor('#FF1744').borderRadius(16)
.padding({ left: 24, right: 24, top: 8, bottom: 8 }).margin({ left: 10 })
.onClick(() => { this.showDeleteModal = false })
}.padding({ top: 14, bottom: 18 })
}.width('70%').backgroundColor('#16162B').borderRadius(16).alignItems(HorizontalAlign.Center)
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.Center)
}
@Builder detailModal() {
Column() {
this.modalOverlay(() => { this.showDetailModal = false })
Column() {
Text(this.selectedProduct?.icon ?? '💻').fontSize(48).margin({ top: 18 })
Text(this.selectedProduct?.name ?? '').fontSize(15).fontColor('#FFFFFF').fontWeight(FontWeight.Bold)
.padding({ left: 16, right: 16, top: 8 })
Text('¥' + (this.selectedProduct?.price ?? 0)).fontSize(22).fontColor('#00E5FF').fontWeight(FontWeight.Bold)
.margin({ top: 4 })
Row() {
Text('编辑配置').fontSize(13).fontColor('#00E5FF')
.backgroundColor('#1A3A5E').borderRadius(18)
.padding({ left: 22, right: 22, top: 10, bottom: 10 })
.onClick(() => { this.showDetailModal = false; this.showEditModal = true })
Text('删除对比').fontSize(13).fontColor('#FFFFFF')
.backgroundColor('#FF1744').borderRadius(18)
.padding({ left: 22, right: 22, top: 10, bottom: 10 }).margin({ left: 10 })
.onClick(() => { this.showDetailModal = false; this.showDeleteModal = true })
}.padding({ top: 14, bottom: 18 })
}.width('72%').backgroundColor('#16162B').borderRadius(16).alignItems(HorizontalAlign.Center)
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.Center)
}
@Builder computerCard(p: ProductItem) {
Row() {
Column() { Text(p.icon).fontSize(30) }
.width(60).height(60).backgroundColor('#1A1A2E').borderRadius(8)
.justifyContent(FlexAlign.Center)
Column() {
Text(p.name).fontSize(13).fontColor('#FFFFFF').fontWeight(FontWeight.Medium).maxLines(1)
Text('¥' + p.price + ' 原价¥' + p.originalPrice).fontSize(12).fontColor('#00E5FF').margin({ top: 2 })
Text('已售' + p.sales + ' · ⭐' + p.rating).fontSize(10).fontColor('#888888').margin({ top: 2 })
}.layoutWeight(1).alignItems(HorizontalAlign.Start).padding({ left: 10 })
Text('对比').fontSize(11).fontColor('#0D0D1A')
.backgroundColor('#00E5FF').borderRadius(12)
.padding({ left: 10, right: 10, top: 4, bottom: 4 })
.onClick(() => { this.selectedProduct = p; this.showCompareModal = true })
}.width('100%').backgroundColor('#16162B').borderRadius(10)
.padding({ left: 12, right: 12, top: 10, bottom: 10 }).margin({ left: 12, right: 12, top: 5 })
.onClick(() => { this.selectedProduct = p; this.showDetailModal = true })
}
build() {
Stack() {
Column() {
Row() {
Text('💻 电脑办公').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
Column().layoutWeight(1)
Text('📊').fontSize(18).margin({ right: 14 })
.onClick(() => { this.showCompareModal = true })
}.width('100%').padding({ top: 14, bottom: 10 }).backgroundColor('#16162B')
Scroll() {
Column() {
this.computerCard(mockProducts[2])
this.computerCard(mockProducts[10])
this.computerCard(mockProducts[6])
this.computerCard(mockProducts[16])
this.computerCard(mockProducts[19])
this.computerCard(mockProducts[17])
this.computerCard(mockProducts[3])
this.computerCard(mockProducts[18])
this.computerCard(mockProducts[12])
this.computerCard(mockProducts[5])
this.computerCard(mockProducts[9])
this.computerCard(mockProducts[13])
this.computerCard(mockProducts[14])
this.computerCard(mockProducts[15])
this.computerCard(mockProducts[4])
this.computerCard(mockProducts[8])
}.padding({ bottom: 20 })
}.layoutWeight(1).scrollBar(BarState.Off)
}.width('100%').height('100%')
if (this.showCompareModal) { this.compareModal() }
if (this.showEditModal) { this.editModal() }
if (this.showDeleteModal) { this.deleteModal() }
if (this.showDetailModal) { this.detailModal() }
}.width('100%').height('100%')
}
}
@Component struct AccessoryContent {
@State showDetailModal: boolean = false
@State showAddModal: boolean = false
@State showDeleteModal: boolean = false
@State showEditModal: boolean = false
@State selectedProduct: ProductItem | null = null
@Builder modalOverlay(onClose?: () => void) {
Column().width('100%').height('100%').backgroundColor('rgba(0,0,0,0.6)')
.onClick(() => { if (onClose) { onClose() } })
}
@Builder detailModal() {
Column() {
this.modalOverlay(() => { this.showDetailModal = false })
Column() {
Text(this.selectedProduct?.icon ?? '🔌').fontSize(48).margin({ top: 18 })
Text(this.selectedProduct?.name ?? '').fontSize(14).fontColor('#FFFFFF').fontWeight(FontWeight.Bold)
.padding({ left: 16, right: 16, top: 8 })
Text('¥' + (this.selectedProduct?.price ?? 0)).fontSize(22).fontColor('#00E5FF').fontWeight(FontWeight.Bold)
Row() {
Text('编辑').fontSize(13).fontColor('#00E5FF')
.backgroundColor('#1A3A5E').borderRadius(18)
.padding({ left: 22, right: 22, top: 10, bottom: 10 })
.onClick(() => { this.showDetailModal = false; this.showEditModal = true })
Text('删除').fontSize(13).fontColor('#FFFFFF')
.backgroundColor('#FF1744').borderRadius(18)
.padding({ left: 22, right: 22, top: 10, bottom: 10 }).margin({ left: 10 })
.onClick(() => { this.showDetailModal = false; this.showDeleteModal = true })
}.padding({ top: 14, bottom: 18 })
}.width('72%').backgroundColor('#16162B').borderRadius(16).alignItems(HorizontalAlign.Center)
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.Center)
}
@Builder addModal() {
Column() {
this.modalOverlay(() => { this.showAddModal = false })
Column() {
Text('➕ 新增配件').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
.padding({ top: 18, bottom: 8 })
Divider().color('#2A2A4E')
Text('配件名称').fontSize(12).fontColor('#888888').width('100%').padding({ left: 20, top: 12 })
TextInput({ placeholder: '输入配件名称...' })
.placeholderColor('#555555').fontSize(13).width('90%')
.backgroundColor('#1A1A2E').borderRadius(8).margin({ top: 4 })
Text('配件分类').fontSize(12).fontColor('#888888').width('100%').padding({ left: 20, top: 12 })
Row() {
Text('耳机').fontSize(11).fontColor('#0D0D1A').backgroundColor('#00E5FF').borderRadius(10)
.padding({ left: 10, right: 10, top: 5, bottom: 5 }).margin({ left: 4 })
Text('充电器').fontSize(11).fontColor('#CCCCCC').backgroundColor('#1A1A2E').borderRadius(10)
.padding({ left: 10, right: 10, top: 5, bottom: 5 }).margin({ left: 4 })
Text('保护壳').fontSize(11).fontColor('#CCCCCC').backgroundColor('#1A1A2E').borderRadius(10)
.padding({ left: 10, right: 10, top: 5, bottom: 5 }).margin({ left: 4 })
Text('数据线').fontSize(11).fontColor('#CCCCCC').backgroundColor('#1A1A2E').borderRadius(10)
.padding({ left: 10, right: 10, top: 5, bottom: 5 }).margin({ left: 4 })
}.padding({ left: 16, right: 16, top: 6 })
Text('价格').fontSize(12).fontColor('#888888').width('100%').padding({ left: 20, top: 12 })
TextInput({ placeholder: '¥ 0.00' })
.placeholderColor('#555555').fontSize(13).width('90%')
.backgroundColor('#1A1A2E').borderRadius(8).margin({ top: 4 })
Text('库存').fontSize(12).fontColor('#888888').width('100%').padding({ left: 20, top: 12 })
TextInput({ placeholder: '0' })
.placeholderColor('#555555').fontSize(13).width('90%')
.backgroundColor('#1A1A2E').borderRadius(8).margin({ top: 4 })
Row() {
Text('取消').fontSize(13).fontColor('#888888')
.backgroundColor('#1A1A2E').borderRadius(18)
.padding({ left: 24, right: 24, top: 10, bottom: 10 })
.onClick(() => { this.showAddModal = false })
Text('添加').fontSize(13).fontColor('#0D0D1A')
.backgroundColor('#00E5FF').borderRadius(18)
.padding({ left: 24, right: 24, top: 10, bottom: 10 }).margin({ left: 10 })
.onClick(() => { this.showAddModal = false })
}.padding({ top: 16, bottom: 20 })
}.width('88%').backgroundColor('#16162B').borderRadius(16).alignItems(HorizontalAlign.Center)
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.Center)
}
@Builder editModal() {
Column() {
this.modalOverlay(() => { this.showEditModal = false })
Column() {
Text('✏️ 编辑配件信息').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
.padding({ top: 18, bottom: 8 })
Divider().color('#2A2A4E')
Text('配件名称').fontSize(12).fontColor('#888888').width('100%').padding({ left: 20, top: 12 })
TextInput({ placeholder: this.selectedProduct?.name ?? '' })
.placeholderColor('#555555').fontSize(13).width('90%')
.backgroundColor('#1A1A2E').borderRadius(8).margin({ top: 4 })
Text('价格调整').fontSize(12).fontColor('#888888').width('100%').padding({ left: 20, top: 12 })
TextInput({ placeholder: '¥' + (this.selectedProduct?.price ?? 0) })
.placeholderColor('#555555').fontSize(13).width('90%')
.backgroundColor('#1A1A2E').borderRadius(8).margin({ top: 4 })
Text('状态').fontSize(12).fontColor('#888888').width('100%').padding({ left: 20, top: 12 })
Row() {
Text('上架中').fontSize(11).fontColor('#0D0D1A').backgroundColor('#00E5FF').borderRadius(10)
.padding({ left: 10, right: 10, top: 5, bottom: 5 }).margin({ left: 4 })
Text('已下架').fontSize(11).fontColor('#CCCCCC').backgroundColor('#1A1A2E').borderRadius(10)
.padding({ left: 10, right: 10, top: 5, bottom: 5 }).margin({ left: 4 })
}.padding({ left: 16, right: 16, top: 6 })
Row() {
Text('取消').fontSize(13).fontColor('#888888')
.backgroundColor('#1A1A2E').borderRadius(18)
.padding({ left: 24, right: 24, top: 10, bottom: 10 })
.onClick(() => { this.showEditModal = false })
Text('保存').fontSize(13).fontColor('#0D0D1A')
.backgroundColor('#00E5FF').borderRadius(18)
.padding({ left: 24, right: 24, top: 10, bottom: 10 }).margin({ left: 10 })
.onClick(() => { this.showEditModal = false })
}.padding({ top: 16, bottom: 20 })
}.width('88%').backgroundColor('#16162B').borderRadius(16).alignItems(HorizontalAlign.Center)
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.Center)
}
@Builder deleteModal() {
Column() {
this.modalOverlay(() => { this.showDeleteModal = false })
Column() {
Text('🗑️').fontSize(36).margin({ top: 18 })
Text('确认删除配件？').fontSize(15).fontColor('#FFFFFF').fontWeight(FontWeight.Bold).margin({ top: 6 })
Row() {
Text('取消').fontSize(13).fontColor('#888888')
.backgroundColor('#1A1A2E').borderRadius(16)
.padding({ left: 24, right: 24, top: 8, bottom: 8 })
.onClick(() => { this.showDeleteModal = false })
Text('删除').fontSize(13).fontColor('#FFFFFF')
.backgroundColor('#FF1744').borderRadius(16)
.padding({ left: 24, right: 24, top: 8, bottom: 8 }).margin({ left: 10 })
.onClick(() => { this.showDeleteModal = false })
}.padding({ top: 14, bottom: 18 })
}.width('70%').backgroundColor('#16162B').borderRadius(16).alignItems(HorizontalAlign.Center)
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.Center)
}
@Builder accessoryCard(p: ProductItem) {
Column() {
Column() { Text(p.icon).fontSize(36) }
.width('100%').height(70).justifyContent(FlexAlign.Center)
.backgroundColor('#1A1A2E').borderRadius({ topLeft: 10, topRight: 10 })
Text(p.name).fontSize(11).fontColor('#FFFFFF').maxLines(1).padding({ left: 6, right: 6, top: 4 })
Text(p.brand).fontSize(9).fontColor('#888888')
Text('¥' + p.price).fontSize(14).fontColor('#00E5FF').fontWeight(FontWeight.Bold)
Row() {
Text(p.tag).fontSize(8).fontColor('#0D0D1A').backgroundColor('#00E5FF')
.borderRadius(4).padding({ left: 4, right: 4, top: 1, bottom: 1 })
Text('⭐' + p.rating).fontSize(9).fontColor('#FFD600').margin({ left: 4 })
}.padding({ left: 6, bottom: 6 })
}.width('100%').backgroundColor('#16162B').borderRadius(10)
.onClick(() => { this.selectedProduct = p; this.showDetailModal = true })
}
build() {
Stack() {
Column() {
Row() {
Text('🔌 潮品配件').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
Column().layoutWeight(1)
Text('+').fontSize(20).fontColor('#0D0D1A')
.backgroundColor('#00E5FF').width(28).height(28).borderRadius(14).textAlign(TextAlign.Center)
.margin({ right: 14 })
.onClick(() => { this.showAddModal = true })
}.width('100%').padding({ top: 14, bottom: 10 }).backgroundColor('#16162B')
Scroll() {
Column() {
Row() {
this.accessoryCard(mockProducts[3])
this.accessoryCard(mockProducts[8])
}.padding({ left: 6, right: 6 })
Row() {
this.accessoryCard(mockProducts[17])
this.accessoryCard(mockProducts[4])
}.padding({ left: 6, right: 6, top: 6 })
Row() {
this.accessoryCard(mockProducts[5])
this.accessoryCard(mockProducts[18])
}.padding({ left: 6, right: 6, top: 6 })
Row() {
this.accessoryCard(mockProducts[12])
this.accessoryCard(mockProducts[9])
}.padding({ left: 6, right: 6, top: 6 })
Row() {
this.accessoryCard(mockProducts[1])
this.accessoryCard(mockProducts[11])
}.padding({ left: 6, right: 6, top: 6 })
Row() {
this.accessoryCard(mockProducts[13])
this.accessoryCard(mockProducts[14])
}.padding({ left: 6, right: 6, top: 6 })
Row() {
this.accessoryCard(mockProducts[15])
this.accessoryCard(mockProducts[16])
}.padding({ left: 6, right: 6, top: 6 })
Row() {
this.accessoryCard(mockProducts[0])
this.accessoryCard(mockProducts[2])
}.padding({ left: 6, right: 6, top: 6 })
Row() {
this.accessoryCard(mockProducts[6])
this.accessoryCard(mockProducts[7])
}.padding({ left: 6, right: 6, top: 6 })
Row() {
this.accessoryCard(mockProducts[10])
this.accessoryCard(mockProducts[19])
}.padding({ left: 6, right: 6, top: 6, bottom: 20 })
}
}.layoutWeight(1).scrollBar(BarState.Off)
}.width('100%').height('100%')
if (this.showDetailModal) { this.detailModal() }
if (this.showAddModal) { this.addModal() }
if (this.showDeleteModal) { this.deleteModal() }
if (this.showEditModal) { this.editModal() }
}.width('100%').height('100%')
}
}
@Component struct OrderContent {
@State selectedStatus: string = '全部'
@State showDetailModal: boolean = false
@State showEditModal: boolean = false
@State showDeleteModal: boolean = false
@State selectedOrder: OrderItem | null = null
weekSales: number[] = [12, 8, 15, 6, 18, 22, 9]
weekDays: string[] = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
maxSale: number = 22
@Builder modalOverlay(onClose?: () => void) {
Column().width('100%').height('100%').backgroundColor('rgba(0,0,0,0.6)')
.onClick(() => { if (onClose) { onClose() } })
}
@Builder orderDetailModal() {
Column() {
this.modalOverlay(() => { this.showDetailModal = false })
Column() {
Text(this.selectedOrder?.icon ?? '📦').fontSize(40).margin({ top: 18 })
Text('订单详情').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').margin({ top: 8 })
Divider().color('#2A2A4E').margin({ top: 10 })
Column() {
Row() {
Text('订单号').fontSize(11).fontColor('#888888')
Text(this.selectedOrder?.orderNo ?? '').fontSize(11).fontColor('#CCCCCC').margin({ left: 8 })
}.width('100%').padding({ top: 8, bottom: 4 })
Row() {
Text('商品').fontSize(11).fontColor('#888888')
Text(this.selectedOrder?.productName ?? '').fontSize(11).fontColor('#FFFFFF').margin({ left: 8 })
}.width('100%').padding({ top: 4, bottom: 4 })
Row() {
Text('金额').fontSize(11).fontColor('#888888')
Text('¥' + (this.selectedOrder?.amount ?? 0)).fontSize(13).fontColor('#00E5FF').fontWeight(FontWeight.Bold).margin({ left: 8 })
}.width('100%').padding({ top: 4, bottom: 4 })
Row() {
Text('状态').fontSize(11).fontColor('#888888')
Text(this.selectedOrder?.status ?? '').fontSize(11).fontColor('#00E676').margin({ left: 8 })
}.width('100%').padding({ top: 4, bottom: 4 })
Row() {
Text('日期').fontSize(11).fontColor('#888888')
Text(this.selectedOrder?.date ?? '').fontSize(11).fontColor('#CCCCCC').margin({ left: 8 })
}.width('100%').padding({ top: 4, bottom: 8 })
}.width('100%').padding({ left: 20, right: 20 })
Row() {
Text('编辑').fontSize(13).fontColor('#00E5FF')
.backgroundColor('#1A3A5E').borderRadius(18)
.padding({ left: 22, right: 22, top: 10, bottom: 10 })
.onClick(() => { this.showDetailModal = false; this.showEditModal = true })
Text('删除').fontSize(13).fontColor('#FFFFFF')
.backgroundColor('#FF1744').borderRadius(18)
.padding({ left: 22, right: 22, top: 10, bottom: 10 }).margin({ left: 10 })
.onClick(() => { this.showDetailModal = false; this.showDeleteModal = true })
}.padding({ top: 8, bottom: 18 })
}.width('82%').backgroundColor('#16162B').borderRadius(16).alignItems(HorizontalAlign.Center)
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.Center)
}
@Builder editModal() {
Column() {
this.modalOverlay(() => { this.showEditModal = false })
Column() {
Text('✏️ 编辑订单').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
.padding({ top: 18, bottom: 8 })
Divider().color('#2A2A4E')
Text('收件人').fontSize(12).fontColor('#888888').width('100%').padding({ left: 20, top: 12 })
TextInput({ placeholder: '张伟' })
.placeholderColor('#555555').fontSize(13).width('90%')
.backgroundColor('#1A1A2E').borderRadius(8).margin({ top: 4 })
Text('联系电话').fontSize(12).fontColor('#888888').width('100%').padding({ left: 20, top: 12 })
TextInput({ placeholder: '138****8888' })
.placeholderColor('#555555').fontSize(13).width('90%')
.backgroundColor('#1A1A2E').borderRadius(8).margin({ top: 4 })
Text('收货地址').fontSize(12).fontColor('#888888').width('100%').padding({ left: 20, top: 12 })
TextArea({ placeholder: '上海市浦东新区...' })
.placeholderColor('#555555').fontSize(12).width('90%').height(50)
.backgroundColor('#1A1A2E').borderRadius(8).margin({ top: 4 })
Text('备注').fontSize(12).fontColor('#888888').width('100%').padding({ left: 20, top: 12 })
TextInput({ placeholder: '选填...' })
.placeholderColor('#555555').fontSize(13).width('90%')
.backgroundColor('#1A1A2E').borderRadius(8).margin({ top: 4 })
Row() {
Text('取消').fontSize(13).fontColor('#888888')
.backgroundColor('#1A1A2E').borderRadius(18)
.padding({ left: 24, right: 24, top: 10, bottom: 10 })
.onClick(() => { this.showEditModal = false })
Text('保存').fontSize(13).fontColor('#0D0D1A')
.backgroundColor('#00E5FF').borderRadius(18)
.padding({ left: 24, right: 24, top: 10, bottom: 10 }).margin({ left: 10 })
.onClick(() => { this.showEditModal = false })
}.padding({ top: 16, bottom: 20 })
}.width('88%').backgroundColor('#16162B').borderRadius(16).alignItems(HorizontalAlign.Center)
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.Center)
}
@Builder deleteModal() {
Column() {
this.modalOverlay(() => { this.showDeleteModal = false })
Column() {
Text('⚠️').fontSize(36).margin({ top: 18 })
Text('确认删除此订单？').fontSize(15).fontColor('#FFFFFF').fontWeight(FontWeight.Bold).margin({ top: 6 })
Text('删除后不可恢复').fontSize(11).fontColor('#FF6E40').margin({ top: 4 })
Row() {
Text('取消').fontSize(13).fontColor('#888888')
.backgroundColor('#1A1A2E').borderRadius(16)
.padding({ left: 24, right: 24, top: 8, bottom: 8 })
.onClick(() => { this.showDeleteModal = false })
Text('确认删除').fontSize(13).fontColor('#FFFFFF')
.backgroundColor('#FF1744').borderRadius(16)
.padding({ left: 24, right: 24, top: 8, bottom: 8 }).margin({ left: 10 })
.onClick(() => { this.showDeleteModal = false })
}.padding({ top: 14, bottom: 18 })
}.width('72%').backgroundColor('#16162B').borderRadius(16).alignItems(HorizontalAlign.Center)
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.Center)
}
@Builder orderItemBuilder(o: OrderItem) {
Row() {
Column() { Text(o.icon).fontSize(32) }
.width(56).height(56).backgroundColor('#1A1A2E').borderRadius(8)
.justifyContent(FlexAlign.Center)
Column() {
Text(o.productName).fontSize(12).fontColor('#FFFFFF').fontWeight(FontWeight.Medium).maxLines(1)
Text(o.orderNo).fontSize(10).fontColor('#666666').margin({ top: 2 })
Row() {
Text('¥' + o.amount).fontSize(14).fontColor('#00E5FF').fontWeight(FontWeight.Bold)
Text(o.date).fontSize(10).fontColor('#888888').margin({ left: 8 })
Column().layoutWeight(1)
Text(o.status).fontSize(10).fontColor('#00E676')
.backgroundColor('#0A2E1A').borderRadius(6)
.padding({ left: 6, right: 6, top: 2, bottom: 2 })
}.margin({ top: 4 })
}.layoutWeight(1).alignItems(HorizontalAlign.Start).padding({ left: 10 })
}.width('100%').backgroundColor('#16162B').borderRadius(10)
.padding({ left: 12, right: 12, top: 10, bottom: 10 }).margin({ left: 12, right: 12, top: 5 })
.onClick(() => { this.selectedOrder = o; this.showDetailModal = true })
}
build() {
Stack() {
Column() {
Row() {
Text('📋 订单管理').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
Column().layoutWeight(1)
Text('共' + mockOrders.length + '单').fontSize(11).fontColor('#888888').margin({ right: 14 })
}.width('100%').padding({ top: 14, bottom: 10 }).backgroundColor('#16162B')
Row() {
ForEach(STATUS_LIST, (s: string) => {
if (this.selectedStatus === s) {
Text(s).fontSize(11).fontColor('#00E5FF').fontWeight(FontWeight.Bold)
.padding({ left: 6, right: 6 }).layoutWeight(1).textAlign(TextAlign.Center)
} else {
Text(s).fontSize(11).fontColor('#888888')
.padding({ left: 6, right: 6 }).layoutWeight(1).textAlign(TextAlign.Center)
.onClick(() => { this.selectedStatus = s })
}
})
}.width('100%').padding({ top: 8, bottom: 8 }).backgroundColor('#0D0D1A')
.border({ width: { bottom: 1 }, color: '#1A1A2E' })
Column() {
Text('📊 本周订单趋势').fontSize(12).fontColor('#CCCCCC').fontWeight(FontWeight.Bold)
.width('100%').padding({ left: 16, top: 12, bottom: 8 })
Row() {
ForEach([0, 1, 2, 3, 4, 5, 6], (d: number) => {
Column() {
Text(this.weekSales[d].toString()).fontSize(9).fontColor('#00E5FF').margin({ bottom: 3 })
Column()
.width(24)
.height((this.weekSales[d] / this.maxSale * 60).toFixed(0) + 'vp')
.backgroundColor(d === 5 ? '#00E5FF' : '#0A3A5E')
.borderRadius({ topLeft: 4, topRight: 4 })
Text(this.weekDays[d]).fontSize(8).fontColor('#888888').margin({ top: 3 })
}.layoutWeight(1).alignItems(HorizontalAlign.Center)
})
}.padding({ left: 12, right: 12, bottom: 12 })
}.width('100%').backgroundColor('#16162B').borderRadius(10)
.margin({ left: 12, right: 12, top: 6 })
Scroll() {
Column() {
this.orderItemBuilder(mockOrders[0])
this.orderItemBuilder(mockOrders[1])
this.orderItemBuilder(mockOrders[2])
this.orderItemBuilder(mockOrders[3])
this.orderItemBuilder(mockOrders[4])
this.orderItemBuilder(mockOrders[5])
this.orderItemBuilder(mockOrders[6])
this.orderItemBuilder(mockOrders[7])
}.padding({ bottom: 20 })
}.layoutWeight(1).scrollBar(BarState.Off)
}.width('100%').height('100%')
if (this.showDetailModal) { this.orderDetailModal() }
if (this.showEditModal) { this.editModal() }
if (this.showDeleteModal) { this.deleteModal() }
}.width('100%').height('100%')
}
}
@Component struct ProfileContent {
@State showEditModal: boolean = false
@State showDeleteModal: boolean = false
@State showAddressModal: boolean = false
@State showAboutModal: boolean = false
@Builder modalOverlay(onClose?: () => void) {
Column().width('100%').height('100%').backgroundColor('rgba(0,0,0,0.6)')
.onClick(() => { if (onClose) { onClose() } })
}
@Builder editProfileModal() {
Column() {
this.modalOverlay(() => { this.showEditModal = false })
Column() {
Text('✏️ 编辑资料').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
.padding({ top: 18, bottom: 8 })
Divider().color('#2A2A4E')
Text('昵称').fontSize(12).fontColor('#888888').width('100%').padding({ left: 20, top: 12 })
TextInput({ placeholder: '数码达人' })
.placeholderColor('#555555').fontSize(13).width('90%')
.backgroundColor('#1A1A2E').borderRadius(8).margin({ top: 4 })
Text('手机号').fontSize(12).fontColor('#888888').width('100%').padding({ left: 20, top: 12 })
TextInput({ placeholder: '138****8888' })
.placeholderColor('#555555').fontSize(13).width('90%')
.backgroundColor('#1A1A2E').borderRadius(8).margin({ top: 4 })
Text('邮箱').fontSize(12).fontColor('#888888').width('100%').padding({ left: 20, top: 12 })
TextInput({ placeholder: 'tech@example.com' })
.placeholderColor('#555555').fontSize(13).width('90%')
.backgroundColor('#1A1A2E').borderRadius(8).margin({ top: 4 })
Row() {
Text('取消').fontSize(13).fontColor('#888888')
.backgroundColor('#1A1A2E').borderRadius(18)
.padding({ left: 24, right: 24, top: 10, bottom: 10 })
.onClick(() => { this.showEditModal = false })
Text('保存').fontSize(13).fontColor('#0D0D1A')
.backgroundColor('#00E5FF').borderRadius(18)
.padding({ left: 24, right: 24, top: 10, bottom: 10 }).margin({ left: 10 })
.onClick(() => { this.showEditModal = false })
}.padding({ top: 16, bottom: 20 })
}.width('88%').backgroundColor('#16162B').borderRadius(16).alignItems(HorizontalAlign.Center)
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.Center)
}
@Builder deleteAccountModal() {
Column() {
this.modalOverlay(() => { this.showDeleteModal = false })
Column() {
Text('⚠️').fontSize(40).margin({ top: 20 })
Text('确认注销账号？').fontSize(16).fontColor('#FFFFFF').fontWeight(FontWeight.Bold).margin({ top: 8 })
Text('注销后所有数据将永久删除').fontSize(11).fontColor('#FF1744').margin({ top: 4 })
Text('请谨慎操作').fontSize(11).fontColor('#FF1744').margin({ top: 2 })
Row() {
Text('取消').fontSize(14).fontColor('#888888')
.backgroundColor('#1A1A2E').borderRadius(18)
.padding({ left: 28, right: 28, top: 10, bottom: 10 })
.onClick(() => { this.showDeleteModal = false })
Text('确认注销').fontSize(14).fontColor('#FFFFFF')
.backgroundColor('#FF1744').borderRadius(18)
.padding({ left: 28, right: 28, top: 10, bottom: 10 }).margin({ left: 12 })
.onClick(() => { this.showDeleteModal = false })
}.padding({ top: 20, bottom: 22 })
}.width('76%').backgroundColor('#16162B').borderRadius(16).alignItems(HorizontalAlign.Center)
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.Center)
}
@Builder addressListModal() {
Column() {
this.modalOverlay(() => { this.showAddressModal = false })
Column() {
Text('📍 收货地址').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
.padding({ top: 18, bottom: 12 })
Divider().color('#2A2A4E')
Scroll() {
Column() {
ForEach(mockAddresses, (a: AddressItem) => {
Column() {
Row() {
Text(a.name).fontSize(13).fontColor('#FFFFFF').fontWeight(FontWeight.Bold)
Text(a.phone).fontSize(12).fontColor('#AAAAAA').margin({ left: 8 })
if (a.isDefault) {
Text('默认').fontSize(9).fontColor('#0D0D1A').backgroundColor('#00E5FF')
.borderRadius(4).padding({ left: 5, right: 5, top: 1, bottom: 1 }).margin({ left: 6 })
}
}.width('100%')
Text(a.detail).fontSize(12).fontColor('#CCCCCC').margin({ top: 4 })
}.width('100%').padding({ left: 16, right: 16, top: 12, bottom: 12 })
.border({ width: { bottom: 1 }, color: '#2A2A4E' })
})
}
}.layoutWeight(1).constraintSize({ maxHeight: '40%' })
Text('✕ 关闭').fontSize(13).fontColor('#888888')
.margin({ top: 12, bottom: 16 })
.onClick(() => { this.showAddressModal = false })
}.width('82%').backgroundColor('#16162B').borderRadius(16).alignItems(HorizontalAlign.Center)
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.Center)
}
@Builder aboutModal() {
Column() {
this.modalOverlay(() => { this.showAboutModal = false })
Column() {
Text('📱').fontSize(48).margin({ top: 20 })
Text('数码3C潮品商城').fontSize(16).fontColor('#FFFFFF').fontWeight(FontWeight.Bold).margin({ top: 8 })
Text('v3.2.0').fontSize(12).fontColor('#00E5FF').margin({ top: 4 })
Text('为您提供精选数码3C好物').fontSize(11).fontColor('#888888').margin({ top: 8 })
Text('百亿补贴 · 正品保障 · 极速配送').fontSize(11).fontColor('#666666').margin({ top: 4 })
Text('✕ 关闭').fontSize(13).fontColor('#888888')
.margin({ top: 16, bottom: 20 })
.onClick(() => { this.showAboutModal = false })
}.width('72%').backgroundColor('#16162B').borderRadius(16).alignItems(HorizontalAlign.Center)
}.width('100%').height('100%').position({ x: 0, y: 0 }).zIndex(999)
.justifyContent(FlexAlign.Center)
}
@Builder settingItem(icon: string, label: string, action?: () => void) {
Row() {
Text(icon).fontSize(18)
Text(label).fontSize(13).fontColor('#CCCCCC').layoutWeight(1).margin({ left: 12 })
Text('>').fontSize(14).fontColor('#555555')
}.width('100%').padding({ top: 14, bottom: 14, left: 16 })
.border({ width: { bottom: 1 }, color: '#1A1A2E' })
.onClick(() => { if (action) { action() } })
}
build() {
Stack() {
Column() {
Row() {
Column() { Text('🧑💻').fontSize(40) }
.width(64).height(64).backgroundColor('#1A1A2E').borderRadius(32)
.justifyContent(FlexAlign.Center)
Column() {
Text('数码达人').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
Text('138****8888').fontSize(11).fontColor('#888888').margin({ top: 2 })
Row() {
Text('VIP3').fontSize(9).fontColor('#0D0D1A').backgroundColor('#00E5FF')
.borderRadius(4).padding({ left: 5, right: 5, top: 1, bottom: 1 })
Text('积分 12850').fontSize(10).fontColor('#888888').margin({ left: 8 })
Text('优惠券 12张').fontSize(10).fontColor('#888888').margin({ left: 8 })
}.margin({ top: 4 })
}.layoutWeight(1).alignItems(HorizontalAlign.Start).padding({ left: 14 })
Text('✏️').fontSize(18).margin({ right: 14 })
.onClick(() => { this.showEditModal = true })
}.width('100%').padding({ left: 16, right: 16, top: 16, bottom: 16 }).backgroundColor('#16162B')
Row() {
Column() {
Text('12').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#00E5FF')
Text('全部订单').fontSize(9).fontColor('#888888')
}.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column() {
Text('3').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FF6E40')
Text('待收货').fontSize(9).fontColor('#888888')
}.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column() {
Text('28').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FFD600')
Text('收藏夹').fontSize(9).fontColor('#888888')
}.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column() {
Text('5').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#00E676')
Text('优惠券').fontSize(9).fontColor('#888888')
}.layoutWeight(1).alignItems(HorizontalAlign.Center)
}.width('100%').padding({ top: 12, bottom: 12 }).backgroundColor('#16162B').margin({ top: 6 })
Scroll() {
Column() {
this.settingItem('📍', '收货地址管理', () => { this.showAddressModal = true })
this.settingItem('🎫', '我的优惠券', () => {})
this.settingItem('💰', '我的钱包', () => {})
this.settingItem('⭐', '我的收藏', () => {})
this.settingItem('📦', '浏览历史', () => {})
this.settingItem('🔔', '消息通知', () => {})
this.settingItem('🎨', '主题设置', () => {})
this.settingItem('🔒', '隐私与安全', () => {})
this.settingItem('📞', '联系客服', () => {})
this.settingItem('ℹ️', '关于我们', () => { this.showAboutModal = true })
this.settingItem('🚪', '退出登录', () => { this.showDeleteModal = true })
}.backgroundColor('#16162B').borderRadius(12)
.margin({ left: 12, right: 12, top: 8, bottom: 20 })
}.layoutWeight(1).scrollBar(BarState.Off)
}.width('100%').height('100%')
if (this.showEditModal) { this.editProfileModal() }
if (this.showDeleteModal) { this.deleteAccountModal() }
if (this.showAddressModal) { this.addressListModal() }
if (this.showAboutModal) { this.aboutModal() }
}.width('100%').height('100%')
}
}
ontWeight(FontWeight.Bold).fontColor(‘#00E5FF’)
Text(‘全部订单’).fontSize(9).fontColor(‘#888888’)
}.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column() {
Text(‘3’).fontSize(18).fontWeight(FontWeight.Bold).fontColor(‘#FF6E40’)
Text(‘待收货’).fontSize(9).fontColor(‘#888888’)
}.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column() {
Text(‘28’).fontSize(18).fontWeight(FontWeight.Bold).fontColor(‘#FFD600’)
Text(‘收藏夹’).fontSize(9).fontColor(‘#888888’)
}.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column() {
Text(‘5’).fontSize(18).fontWeight(FontWeight.Bold).fontColor(‘#00E676’)
Text(‘优惠券’).fontSize(9).fontColor(‘#888888’)
}.layoutWeight(1).alignItems(HorizontalAlign.Center)
}.width(‘100%’).padding({ top: 12, bottom: 12 }).backgroundColor(‘#16162B’).margin({ top: 6 })
Scroll() {
Column() {
this.settingItem(‘📍’, ‘收货地址管理’, () => { this.showAddressModal = true })
this.settingItem(‘🎫’, ‘我的优惠券’, () => {})
this.settingItem(‘💰’, ‘我的钱包’, () => {})
this.settingItem(‘⭐’, ‘我的收藏’, () => {})
this.settingItem(‘📦’, ‘浏览历史’, () => {})
this.settingItem(‘🔔’, ‘消息通知’, () => {})
this.settingItem(‘🎨’, ‘主题设置’, () => {})
this.settingItem(‘🔒’, ‘隐私与安全’, () => {})
this.settingItem(‘📞’, ‘联系客服’, () => {})
this.settingItem(‘ℹ️’, ‘关于我们’, () => { this.showAboutModal = true })
this.settingItem(‘🚪’, ‘退出登录’, () => { this.showDeleteModal = true })
}.backgroundColor(‘#16162B’).borderRadius(12)
.margin({ left: 12, right: 12, top: 8, bottom: 20 })
}.layoutWeight(1).scrollBar(BarState.Off)
}.width(‘100%’).height(‘100%’)
if (this.showEditModal) { this.editProfileModal() }
if (this.showDeleteModal) { this.deleteAccountModal() }
if (this.showAddressModal) { this.addressListModal() }
if (this.showAboutModal) { this.aboutModal() }
}.width(‘100%’).height(‘100%’)
}
}
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
8
0- 0
已为社区贡献114条内容
所有评论(0)