HarmonyOS 6页面布局规范化开发，采用Row、Column、Flex弹性布局，实现自适应排版，严格遵循无单边边框、无高度铺满开发规范
·
从传世孤品到地摊捡漏，从鉴定教程到藏品图鉴，从以物换物到求购清单——本文以一套完整的ArkTS墨玉古玩斋应用为例，深度解析HarmonyOS 6.1.1在国风文玩交易场景下的双Tab嵌套架构、粒子漂浮动效、稀有度四级分级、藏品详情黑金渐变头、以物换物交换帖等核心技术实现。
一、引言
古玩收藏是中国传统文化中最具底蕴的领域之一。从瓷器到玉石，从书画到钱币，每一件藏品都承载着千年的历史与故事。然而传统古玩交易高度依赖线下古玩城和熟人圈子，信息不对称、鉴定门槛高、交换渠道少，让很多藏友难以找到心仪的藏品，也难以出手闲置的宝贝。
本应用（墨玉古玩斋）以"墨玉黑+赤金"国风文玩风为视觉基调，打造集古玩交易、捡漏交换、藏品图鉴、个人中心四大模块于一体的文玩古玩交易与收藏社区。18款藏品覆盖瓷器/玉石/书画/杂项/钱币五大品类，8条捡漏交换帖覆盖以物换物场景，5套鉴定/修复教程覆盖瓷器/玉器/书画/钱币/杂项，9款杂项配件覆盖收藏周边，6套图鉴收藏记录收藏进度，3条藏友点评提供真实评价。
本文将从架构设计、色彩系统、数据模型、四大Tab页面、弹框体系、核心技术特性等维度，完整解析这套应用的ArkTS实现。
二、整体架构
本应用采用单组件双Tab嵌套架构——@Entry @Component struct Index作为唯一入口组件，通过@State currentBottomTab控制四大底部Tab（古玩/捡漏/图鉴/我的），古玩Tab内部再通过@State currentTopTab控制六大顶部分类Tab（全部/瓷器/玉石/书画/杂项/钱币），形成双层Tab嵌套。
架构层次：
- 入口层：Index，负责双层Tab切换、头部、底部导航、粒子动效、弹框管理
- 页面层：4个底部Tab对应的Builder方法（bazaarContent/swapContent/collectionContent/mineContent），古玩Tab内含6个顶部Tab对应的Builder方法（cityContent/retiredContent/mocContent/figContent/techContent/streetContent）
- 数据层：8个全局const数组（18藏品+8捡漏帖+5鉴定教程+9杂项配件+6图鉴收藏+3点评+2图表数据+2弹框选项）+1个配色常量PALETTE
- 工具函数层：10+全局纯函数（catColor/catLabel/rarityLabel/rarityColor/tradeBarHeight/rateColor/6个分类筛选函数/swapBadge）
- 弹框层：4种弹框（发布出售/发起交换/下架删除/藏品详情），均通过@State布尔值控制显隐
单组件架构的优势在于状态集中管理、数据共享方便、弹框统一调度，适合中等复杂度的应用。双层Tab嵌套是本应用的架构特色——古玩作为主品类，内部再按瓷器/玉石/书画/杂项/钱币细分，用户可以快速切换品类浏览。
三、色彩系统：墨玉黑+赤金国风文玩风
国风文玩的视觉语言应该是"沉稳、典雅、贵气、有历史感"。本应用采用墨玉黑+赤金国风配色：
主色体系：
#2C2C2C墨玉黑：主文字色、头部渐变起点、深色卡片背景——代表沉稳与厚重#C9A24B赤金：主高亮色、Tab选中态、按钮、标签、渐变——代表贵气与典雅#1A1613深墨：深色卡片渐变终点、弹框头部——代表深邃与历史#A83A2E朱砂红：价格、删除按钮、热门标签、稀有度最高级——代表警示与珍贵#4A7C59松石绿：好评率、收藏进度高级、鉴定好评——代表健康与吉祥#8A8378烟灰：辅助文字、未选中Tab、说明文字——代表素雅#E2CE94浅金：头部副标题、深色卡片文字——代表温润
浅色背景层次：
#F5F3EF米白：应用根背景#FFFFFF纯白：卡片背景、弹框背景#F0E9D8浅金：标签背景、选中态背景、进度条背景#F5EFE0米黄：高亮卡片背景、提示背景#E8E4DE浅灰：分割线、进度条背景#4A3B2A深棕：头部渐变终点
渐变设计：
- 头部：
linearGradient angle 135从#2C2C2C到#4A3B2A——墨玉黑到深棕的沉稳渐变 - 古玩捡漏节Banner：
linearGradient angle 120从#C9A24B到#E2CE94——赤金到浅金的贵气渐变 - 传世孤品大卡：
linearGradient angle 160从#2C2C2C到#1A1613——墨玉黑到深墨的深邃渐变 - 藏品详情头部：
linearGradient angle 135从#C9A24B到#F0E9D8——赤金到浅金的典雅渐变 - 发布出售弹框头部：
linearGradient angle 120从#2C2C2C到#4A3B2A——与头部一致的沉稳渐变 - 我的页会员卡：
linearGradient angle 120从#2C2C2C到#4A3B2A——与头部一致
墨玉黑+赤金的配色通过米白根背景+纯白卡片+浅金/米黄高亮背景营造国风空间感，赤金#C9A24B作为唯一主高亮色贯穿全应用，朱砂红#A83A2E作为价格和删除操作色，松石绿#4A7C59作为好评和收藏进度色，确保视觉一致性和国风韵味。
四、数据模型
应用定义了7个接口，覆盖文玩交易全链路：
AntiqueItem藏品（id/name/eng/cat/price/rarity/year/rating/starStr/seller/tag/desc/want/sales/emoji/dynasty）——18款藏品，含中英文名称、分类、稀有度0-100、年份、朝代、想换物品等古玩特色字段SwapItem捡漏帖（id/user/avatar/offer/want/time/likes/content/place）——8条交换帖，含我提供/我想换/地点/点赞数CraftItem鉴定教程（id/name/type/pages/author/likes/downloads/emoji/steps）——5套教程，含步骤数组AccessoryItem杂项配件（id/name/series/price/condition/seller/emoji/desc）——9款配件CollectionItem图鉴收藏（id/name/series/owned/total/rate/emoji）——6套图鉴，含已收/总数/进度百分比AntiqueReview点评（id/user/setName/starStr/content）——3条点评ColorPalette配色（bg/card/black/gold/deep/red/green/sub/line）——9色配色常量
rarity稀有度字段是古玩藏品的特色设计——0-100数值，通过rarityLabel函数映射为四级（传世级≥95/珍藏级≥80/精品级≥60/流通级<60），通过rarityColor函数映射为四色（朱砂红/橙/蓝/绿），在稀有度柱状图和藏品详情中直接渲染。want想换物品字段支持以物换物场景，dynasty朝代字段提供历史信息。
五、Tab0 古玩交易（双Tab嵌套）
古玩页是应用的核心，采用底部Tab+顶部Tab双层嵌套架构。顶部6个分类Tab（全部/瓷器/玉石/书画/杂项/钱币），每个Tab有独立的布局风格：
全部Tab：Banner+双列瀑布
- 赤金渐变Banner：古玩捡漏节春季专场+真品保证3天限时+传世孤品/精品玉器标签
- 全城新上架：双列瀑布布局，左列2件（清代钱币全套/民国漆器首饰盒），右列1件（战国玉璧，米黄高亮背景），每件含emoji/中文名/英文名/描述/价格/标签
瓷器Tab：横滑大卡+稀有度柱状图+捡漏榜
- 传世孤品专区：3件横滑大卡（明成化斗彩鸡缸杯/清乾隆白玉如意/宋代建窑建盏），墨玉黑渐变背景160宽，含emoji/名称/英文+朝代/价格+稀有度标签
- 稀有度排行：3根柱状图（99/90/85），第三根宋代建盏用朱砂红高亮，底部说明"成化斗彩鸡缸杯以99分稀有度登顶"
- 今日捡漏榜：3件排行列表，第1名朱砂红数字，含排名/emoji/名称+稀有度+想换/价格
玉石Tab：鉴定时间轴
- 5套鉴定教程时间轴布局（瓷器鉴定入门/古玉沁色详解/书画装裱修复法/钱币评级标准/杂项收藏通论），左侧emoji+赤金竖线连接，右侧卡片含名称/下载数/作者+类型+页数/步骤列表（带序号圆点）/点赞+鉴定可下载
书画Tab：三列格子+交换行情
- 杂项配件三列网格（9款配件，31%宽度），每件含emoji/名称/系列/价格
- 杂项交换行情：偶数ID配件的交换列表，含emoji/名称+品相/描述/价格（松石绿）
杂项Tab：对决卡+侧栏统计
- 巅峰对决：宋代建盏VS清代钱币全套，两张深色渐变对决卡中间VS标识
- 左侧3件藏品列表（宋代龙泉青瓷/清代翡翠扳指/唐代铜鎏金佛像），右侧3格统计（12本周珍品成交/5.6万珍品总交易额/92%鉴定好评率）
钱币Tab：标签云+紧凑列表
- 收藏标签云：6套图鉴（青花瓷器/和田玉器/古钱币/名家书画/杂项收藏/紫砂壶），浅金背景chip
- 3件紧凑列表（明代黄花梨笔洗/清代珐琅彩碗/宋代钧窑花盆），第2件米黄高亮背景，含稀有度彩色标签
- 底部提示：集齐五帝钱可召唤隐藏福利
双层Tab嵌套让用户可以在古玩主Tab内快速切换6大品类，每个品类有独立的视觉布局和数据展示方式，避免单一布局的单调感。
六、Tab1 捡漏交换
捡漏页是文玩交易的特色功能——以物换物。由两个层次构成：
1. 统计条+发捡漏按钮：四格统计（156在交换中赤金/42今日捡漏朱砂红/98%鉴定好评松石绿）+右侧发捡漏按钮（朱砂红底，触发发起交换弹框）。
2. 捡漏帖列表：8条交换帖卡片，每帖含：
- 头部：头像emoji+用户名+热度标签（🔥热门≥50/👍热度≥30/🌱新帖<30，通过swapBadge函数动态生成）+时间+地点+右侧⋯菜单（触发下架删除弹框）
- 交换区：我提供（浅金背景）⇄ 我想换（米黄背景），左右对称布局
- 内容：帖文描述
- 底部：📍地点标签+❤️点赞数
捡漏页解决了文玩交易中"以物换物"的核心需求——藏友可以用自己的闲置藏品交换心仪的宝贝，通过地点标签支持线下古玩城面交，通过热度标签筛选热门交换帖。
七、Tab2 藏品图鉴
图鉴页是收藏进度管理功能。由三个层次构成：
1. 标题+登记按钮：我的藏品图鉴标题+记录每一件心头好的收藏进度+右侧✚登记按钮（赤金底，触发发布出售弹框复用）。
2. 图鉴进度列表：6套图鉴（青花瓷器/和田玉器/古钱币/名家书画/杂项收藏/紫砂壶），每套含：
- 头部：emoji+名称+英文系列名+已收X/总数+右侧进度百分比（通过rateColor函数动态着色：≥55松石绿/≥40赤金/<40朱砂红）
- 进度条：双色进度条（已收部分rateColor色+未收部分浅灰），宽度通过百分比动态计算
3. 图鉴成就墙：4个成就标签（🎖️瓷器专家/🏆孤品猎人/💎玉器鉴定师/🪙钱币百晓生），不同颜色背景。
图鉴页让藏友可以系统化管理自己的收藏进度，通过进度条和百分比直观看到每套图鉴的完成度，通过成就墙增加收藏的趣味性和成就感。
八、Tab3 个人中心
我的页是藏友个人信息管理。由三个层次构成：
1. 会员信息卡：墨玉黑渐变背景（与头部一致），含🧧头像+古玩收藏家老陈+LV.10藏宝阁主·信用分990+右侧＞箭头+三格统计（38在售藏品赤金/12求购中赤金/¥15.8万累计成交额赤金）。
2. 我的求购清单：3件求购藏品（明代黄花梨笔洗/战国玉璧/民国漆器首饰盒），每件含emoji/名称+预算+想换/右侧出价中标签（朱砂红底）。
3. 常去古玩城：5个地点列表（汉口古玩城/徐东古玩城/崇仁路古玩城/武昌火车站/线上互换），每个含不同emoji（🚇/🏬/🚌/🏪/📦）+地点名+右侧站点说明。
我的页通过求购清单和常去古玩城两个特色功能，将文玩交易的线下场景融入个人中心，让藏友可以管理自己的求购需求和常去的线下交易地点。
九、弹框体系
本应用有4种弹框，均通过@State布尔值控制显隐，zIndex通过Stack层叠实现：
1. 发布出售弹框（新增）：88%宽76%高，黑金渐变头部（🏺发布出售+闲置回血孤品不愁卖），滚动内容含：要出售的藏品（8款藏品chip选择，选中赤金底白字）+品相说明（5档chip：全品/品相佳/有瑕疵/需修复/有残缺，选中朱砂红底白字）+出售价格（−/¥价格/＋步进器，步进10元，价格>20000显示"孤品级建议包邮"否则"实惠价更容易捡漏"）+藏品描述（TextInput输入）+取消/上架出售双按钮。
2. 发起交换弹框（新增）：88%宽72%高，赤金纯色头部（🤝发起交换+用闲置换心头好藏友互助），滚动内容含：我提供（5款藏品chip选择，选中深墨底白字）+我想换可多选（5款藏品chip，选中朱砂红底白字带✓）+交换地点（5个地点chip，选中赤金底白字）+安全提示（💡交换双方可自行协商补差价，面交请选择古玩城或人流密集的公共场所）+再想想/发布交换帖双按钮。
3. 下架删除弹框：72%宽居中，🗑️图标+下架这件藏品？+说明文字（下架后买家将无法搜索到这条信息，收藏和留言会一并清空，可重新上架）+留着（赤金底浅金背景）/确认下架（朱砂红底白字）双按钮。
4. 藏品详情弹框：88%宽78%高，赤金渐变头部（emoji+中文名+英文名+标签+稀有度标签），滚动内容含：四格数据（售价朱砂红/年代赤金/稀有度动态色/年份蓝）+藏品描述（描述文字+卖家+星级评分）+藏家想换（🤝+想换物品，米黄背景）+藏友点评（3条点评卡片）+留言问问（赤金底浅金背景）/立即购买（朱砂红底白字）双按钮。
所有弹框均通过Stack层叠+半透明黑色背景（99000000）+居中布局实现，点击背景区域关闭弹框。
十、核心技术特性
1. 双Tab嵌套架构：底部4Tab+古玩Tab内部顶部6Tab，通过两个@State（currentBottomTab/currentTopTab）独立控制，if-else链分发到对应的Builder方法，实现双层分类浏览。
2. 粒子漂浮动效：aboutToAppear生命周期中buildParticles生成14个粒子（🏺/💎/✨/🪙/🖼️五种emoji随机，大小12-22px，速度0.6-2.0，透明度0.2-0.6），setInterval每80ms调用driftParticles更新x坐标（超出360重置为-20），通过position绝对定位漂浮在页面上，营造国风古韵氛围。aboutToDisappear中clearInterval清理定时器避免内存泄漏。
3. 稀有度四级分级：rarity字段0-100数值，通过rarityLabel映射为四级标签（传世级≥95/珍藏级≥80/精品级≥60/流通级<60），通过rarityColor映射为四色（朱砂红/橙/蓝/绿），在柱状图、藏品详情、紧凑列表中统一渲染，数据驱动UI。
4. 黑金渐变头部设计：头部、传世孤品大卡、发布出售弹框头部、我的页会员卡均使用墨玉黑#2C2C2C到深棕#4A3B2A的linearGradient渐变，赤金#C9A24B文字和标签在深色背景上形成强烈对比，营造国风贵气感。
5. 以物换物交换帖：捡漏页每条帖子采用我提供（浅金背景）⇄我想换（米黄背景）的对称布局，通过swapBadge函数根据点赞数动态生成热度标签（🔥热门/👍热度/🌱新帖），支持线下古玩城面交，解决文玩交易中的以物换物需求。
6. 全局纯函数工具集：10+全局纯函数（catColor/catLabel/rarityLabel/rarityColor/tradeBarHeight/rateColor/6个分类筛选函数/swapBadge），将数据到UI的映射逻辑抽离为纯函数，便于复用和维护，符合函数式编程思想。
7. 分类筛选函数：6个函数（retiredSets/mocSets/figSets/techSets/streetSets/classicSets）通过数组切片返回对应分类的3件藏品，cityLeft/cityRight返回全部Tab的双列数据，hotSets返回热门藏品，数据筛选逻辑清晰。
8. 详情数据取值方法：13个detailXxx方法（detailName/detailEng/detailEmoji/detailPrice/detailDynasty/detailRarity/detailYear/detailSeller/detailTag/detailStar/detailRating/detailDesc/detailWant）通过遍历ANTIQUES数组查找selectedAntiqueId对应的藏品字段，在详情弹框中调用，避免在Builder中写复杂的查找逻辑。
9. 步进器价格输入：发布出售弹框的价格采用−/¥价格/＋步进器设计，步进10元，通过@State sellPrice控制，价格>20000时动态显示"孤品级建议包邮"提示，交互友好。
10. Stack层叠弹框管理：4种弹框通过Stack层叠+@State布尔值控制，半透明黑色背景99000000，点击背景关闭，弹框内容居中，zIndex自动由Stack层叠顺序决定，无需手动管理zIndex。
十一、同类对比
| 维度 | 通用古玩交易App | 本应用（墨玉古玩斋） |
|---|---|---|
| 主题 | 浅色/红色为主 | 墨玉黑+赤金国风文玩风 |
| 架构 | 单Tab或简单分类 | 双Tab嵌套（底部4+顶部6） |
| 动效 | 无或简单 | 14个粒子漂浮动效 |
| 稀有度 | 无或简单星级 | 0-100数值+四级分级+四色映射 |
| 以物换物 | 无或简单留言 | 交换帖+我提供⇄我想换对称布局 |
| 鉴定教程 | 无或外部链接 | 5套时间轴布局教程+步骤列表 |
| 藏品图鉴 | 无或简单收藏 | 6套图鉴+进度条+成就墙 |
| 求购清单 | 无 | 3件求购+预算+想换+出价中 |
| 常去古玩城 | 无 | 5个地点+站点说明 |
| 弹框 | 2-3种 | 4种（发布出售/发起交换/下架/详情） |
十二、完整代码结构总览
1301.ets
├── 数据结构（7个interface）
├── 静态配置（PALETTE配色 + 2个Tab配置 + 2个弹框选项 + 2个图表数据）
├── 静态数据（8个数组：18藏品+8捡漏帖+5鉴定教程+9杂项配件+6图鉴+3点评）
├── 全局纯函数（10+个：catColor/catLabel/rarityLabel/rarityColor/rateColor/6分类筛选/swapBadge）
├── Index入口组件（@Entry @Component）
│ ├── 状态（currentBottomTab/currentTopTab/selectedAntiqueId/4个弹框显隐/出售表单/交换表单/particles粒子）
│ ├── 生命周期（aboutToAppear生成粒子+启动定时器/aboutToDisappear清理定时器）
│ ├── 粒子方法（buildParticles/driftParticles）
│ ├── 详情取值方法（13个detailXxx）
│ ├── 头部Builder
│ ├── 顶部Tab Builder
│ ├── 6个顶部Tab内容Builder（city/retired/moc/fig/tech/street）
│ ├── 古玩首页Builder（bazaarContent）
│ ├── 捡漏页Builder（swapContent）
│ ├── 图鉴页Builder（collectionContent）
│ ├── 我的页Builder（mineContent）
│ ├── 底部Tab Builder
│ ├── 4种弹框Builder（sellModal/swapModal/deleteModal/detailModal）
│ ├── 交换多选辅助方法（pickedWant/toggleWant）
│ └── build主布局（Stack层叠+Column内容+粒子+4弹框）
十三、开发环境搭建
13.1 环境要求
DevEco Studio 5.0+（支持HarmonyOS 6.1.1/API 24）、HarmonyOS SDK API 24、Node.js 18+、至少8GB内存。
13.2 安装DevEco Studio
从华为开发者官网下载最新版本，运行安装包，选择安装路径，勾选创建桌面快捷方式，点击安装。
13.3 配置SDK
首次启动后进入File > Settings > HarmonyOS SDK，勾选API 24及以上版本，点击Apply等待下载完成。
13.4 创建项目
选择Create Project > Empty Ability，配置项目名称、包名、保存路径，选择Compile SDK为API 24，点击Finish。
13.5 运行应用
将1301.ets代码替换到entry/src/main/ets/pages/Index.ets，连接HarmonyOS设备或启动模拟器，点击运行按钮预览。
13.6 预览调试
DevEco Studio提供实时预览功能，编辑器右侧打开Previewer面板，支持多设备尺寸预览、深色模式切换、组件树inspect等调试能力。
十四、总结展望
本文完整解析了基于HarmonyOS 6.1.1的墨玉古玩斋应用，从墨玉黑+赤金国风配色系统、双Tab嵌套架构、古玩藏品数据模型（含稀有度0-100/想换物品/朝代等特色字段）、古玩交易六大品类独立布局（全部双列瀑布/瓷器横滑大卡+稀有度柱状图+捡漏榜/玉石鉴定时间轴/书画三列网格/杂项对决卡+侧栏统计/钱币标签云+紧凑列表）、捡漏以物换物交换帖、藏品图鉴进度条、个人中心求购清单+常去古玩城，到4种弹框体系、14粒子漂浮动效、稀有度四级分级、黑金渐变头部、全局纯函数工具集、详情数据取值方法，展现了ArkTS在国风文玩交易场景下的完整工程实践。
核心价值：
- 墨玉黑+赤金国风配色：6处linearGradient渐变营造沉稳贵气的国风韵味
- 双Tab嵌套架构：底部4Tab+顶部6Tab，双层分类浏览体验
- 14粒子漂浮动效：setInterval驱动emoji粒子漂浮，aboutToDisappear清理定时器
- 稀有度四级分级：0-100数值→四级标签→四色映射，数据驱动UI
- 以物换物交换帖：我提供⇄我想换对称布局+热度标签动态生成+线下面交
- 藏品图鉴进度管理：6套图鉴+双色进度条+成就墙，收藏系统化
- 全局纯函数工具集：10+纯函数抽离数据到UI映射逻辑，代码可维护
未来可扩展：
- 接入真实AI鉴定功能，通过拍照识别藏品年代和真伪，替代手动鉴定教程
- 粒子动效接入设备陀螺仪，随手机倾斜方向漂移，增强沉浸感
- 稀有度接入真实市场数据和拍卖记录，动态更新稀有度评分
- 以物换物接入智能匹配算法，根据藏品品类和价值推荐交换对象
- 图鉴接入NFC扫码登记，扫描藏品NFC标签自动添加到图鉴
- 接入直播鉴宝功能，藏友可以直播展示藏品请专家在线鉴定
- 求购清单接入推送通知，有匹配藏品时自动提醒藏友
墨玉古玩斋，让千年古韵一键可触，让每一件藏品都找到懂它的人。
附录：完整源码
// ============================================================
// 1301.ets - 墨玉古玩斋
// 场景：瓷器/玉石/书画/钱币的文玩古玩交易与收藏社区（国风风）
// 风格：墨玉黑 #2C2C2C + 赤金 #C9A24B 国风文玩风
// 底部Tab：古玩 / 捡漏 / 图鉴 / 我的
// 顶部Tab：全部 / 瓷器 / 玉石 / 书画 / 杂项 / 钱币
// 弹框：发布出售(新增) / 发起交换(新增) / 下架(删除) / 藏品详情(详情)
// ============================================================
// ---------------- 配色 ----------------
interface ColorPalette {
bg: string;
card: string;
black: string;
gold: string;
deep: string;
red: string;
green: string;
sub: string;
line: string;
}
const PALETTE: ColorPalette = {
bg: '#F5F3EF',
card: '#FFFFFF',
black: '#2C2C2C',
gold: '#C9A24B',
deep: '#1A1613',
red: '#A83A2E',
green: '#4A7C59',
sub: '#8A8378',
line: '#E8E4DE'
};
// ---------------- 通用结构 ----------------
interface TabItem { label: string; icon: string; }
interface ParticleItem { x: number; emoji: string; size: number; speed: number; opacity: number; }
// ---------------- 藏品条目 ----------------
interface AntiqueItem {
id: number; name: string; eng: string; cat: string; price: number;
rarity: number; year: number; rating: number; starStr: string; seller: string;
tag: string; desc: string; want: string; sales: number; emoji: string; dynasty: string;
}
// ---------------- 捡漏帖 ----------------
interface SwapItem {
id: number; user: string; avatar: string; offer: string; want: string;
time: string; likes: number; content: string; place: string;
}
// ---------------- 鉴定/修复 ----------------
interface CraftItem {
id: number; name: string; type: string; pages: number; author: string;
likes: number; downloads: number; emoji: string; steps: string[];
}
// ---------------- 杂项/配件 ----------------
interface AccessoryItem {
id: number; name: string; series: string; price: number; condition: string;
seller: string; emoji: string; desc: string;
}
// ---------------- 图鉴收藏 ----------------
interface CollectionItem {
id: number; name: string; series: string; owned: number; total: number; rate: number; emoji: string;
}
// ---------------- 点评 ----------------
interface AntiqueReview {
id: number; user: string; setName: string; starStr: string; content: string;
}
// ---------------- Tab 配置 ----------------
const BOTTOM_TABS: TabItem[] = [
{ label: '古玩', icon: '🏺' }, { label: '捡漏', icon: '🤝' }, { label: '图鉴', icon: '📖' }, { label: '我的', icon: '🧧' }
];
const TOP_TABS: TabItem[] = [
{ label: '全部', icon: '🧿' }, { label: '瓷器', icon: '🍶' }, { label: '玉石', icon: '💎' },
{ label: '书画', icon: '🖼️' }, { label: '杂项', icon: '🔮' }, { label: '钱币', icon: '🪙' }
];
// ---------------- 藏品数据（18款写死） ----------------
const ANTIQUES: AntiqueItem[] = [
{ id: 1, name: '明成化 斗彩鸡缸杯', eng: 'Chenghua Chicken Cup', cat: 'retired', price: 28000, rarity: 99, year: 1465, rating: 5.0, starStr: '⭐⭐⭐⭐⭐', seller: '古窑斋主', tag: '传世孤品', desc: '成化斗彩，胎薄如纸，釉色温润，传世极少，大收藏家必争之物。', want: '换 宋代汝窑', sales: 1, emoji: '🏆', dynasty: '明代' },
{ id: 2, name: '清乾隆 白玉如意', eng: 'Qianlong White Jade', cat: 'retired', price: 15000, rarity: 90, year: 1736, rating: 4.8, starStr: '⭐⭐⭐⭐✨', seller: '玉痴老李', tag: '玉质温润', desc: '和田白玉，雕工繁复，寓意吉祥如意，手感油润，收藏级。', want: '换 和田籽料', sales: 3, emoji: '💎', dynasty: '清代' },
{ id: 3, name: '宋代 建窑建盏', eng: 'Song Dynasty JianZhan', cat: 'retired', price: 6800, rarity: 85, year: 1100, rating: 4.9, starStr: '⭐⭐⭐⭐⭐', seller: '建盏非遗传承人', tag: '曜变天目', desc: '兔毫盏，釉色变幻莫测，在茶汤下流光溢彩，极具收藏价值。', want: '换 宋代吉州窑', sales: 4, emoji: '🫖', dynasty: '宋代' },
{ id: 4, name: '齐白石 虾趣图', eng: 'Qi Baishi Shrimp', cat: 'moc', price: 8800, rarity: 75, year: 1950, rating: 4.9, starStr: '⭐⭐⭐⭐⭐', seller: '白石门下', tag: '名家真迹', desc: '齐白石晚年小品，水墨淋漓，虾的形态栩栩如生，附鉴定证书。', want: '换 张大千', sales: 2, emoji: '🦐', dynasty: '近现代' },
{ id: 5, name: '清晚期 粉彩瓷板画', eng: 'Famille Rose Plaque', cat: 'moc', price: 4500, rarity: 65, year: 1890, rating: 4.7, starStr: '⭐⭐⭐⭐', seller: '瓷板画鉴定师', tag: '粉彩人物', desc: '粉彩人物故事图，色彩鲜艳，画工精细，品相完好，挂墙绝美。', want: '换 民国粉彩', sales: 8, emoji: '🎨', dynasty: '清代' },
{ id: 6, name: '清代 紫砂壶', eng: 'Qing Dynasty Yixing', cat: 'moc', price: 3200, rarity: 60, year: 1880, rating: 4.8, starStr: '⭐⭐⭐⭐✨', seller: '紫砂壶玩家', tag: '陈鸣远款', desc: '底款陈鸣远，泥料纯正，包浆自然，泡茶极香，品相完美。', want: '换 顾景舟', sales: 10, emoji: '🫖', dynasty: '清代' },
{ id: 7, name: '汉代 玉蝉', eng: 'Han Dynasty Jade Cicada', cat: 'fig', price: 2600, rarity: 80, year: 200, rating: 4.6, starStr: '⭐⭐⭐⭐', seller: '古玉鉴定家', tag: '汉八刀', desc: '汉八刀工艺，线条简练有力，玉质沁色自然，随身把玩极佳。', want: '换 战国玉璧', sales: 5, emoji: '🦗', dynasty: '汉代' },
{ id: 8, name: '唐代 海兽葡萄镜', eng: 'Tang Dynasty Mirror', cat: 'fig', price: 6800, rarity: 88, year: 700, rating: 4.7, starStr: '⭐⭐⭐⭐', seller: '铜镜收藏家', tag: '铜镜极品', desc: '海兽葡萄纹饰，铸工精湛，银光闪闪，保存完好，极具历史研究价值。', want: '换 汉代铜镜', sales: 3, emoji: '🪞', dynasty: '唐代' },
{ id: 9, name: '民国 红木笔筒', eng: 'Republic Mahogany', cat: 'fig', price: 1800, rarity: 55, year: 1930, rating: 4.5, starStr: '⭐⭐⭐⭐', seller: '文房四宝斋', tag: '大红酸枝', desc: '大红酸枝材质，包浆温润，雕刻梅兰竹菊，文人气息十足。', want: '换 清代笔洗', sales: 9, emoji: '🖋️', dynasty: '民国' },
{ id: 10, name: '宋代 龙泉青瓷', eng: 'Song Longquan Celadon', cat: 'tech', price: 12000, rarity: 92, year: 1200, rating: 4.9, starStr: '⭐⭐⭐⭐⭐', seller: '青瓷研究所', tag: '梅子青釉', desc: '梅子青釉，釉色如雨过天晴，开片自然，极其雅致。', want: '换 越窑青瓷', sales: 3, emoji: '🫙', dynasty: '宋代' },
{ id: 11, name: '清代 翡翠扳指', eng: 'Qing Jadeite Ring', cat: 'tech', price: 9800, rarity: 82, year: 1880, rating: 4.8, starStr: '⭐⭐⭐⭐✨', seller: '翠玉阁', tag: '帝王绿', desc: '满绿翡翠，种水极佳，通透感强，扳指造型，富贵大气。', want: '换 翡翠挂件', sales: 5, emoji: '💍', dynasty: '清代' },
{ id: 12, name: '唐代 铜鎏金佛像', eng: 'Tang Gilt Bronze', cat: 'tech', price: 45000, rarity: 96, year: 700, rating: 5.0, starStr: '⭐⭐⭐⭐⭐', seller: '佛造像藏家', tag: '国宝级', desc: '鎏金工艺精湛，神态庄严，收藏级别，极具佛教艺术造诣。', want: '换 明代佛像', sales: 1, emoji: '🙏', dynasty: '唐代' },
{ id: 13, name: '明代 黄花梨笔洗', eng: 'Ming Huanghuali', cat: 'street', price: 8000, rarity: 78, year: 1600, rating: 4.7, starStr: '⭐⭐⭐⭐', seller: '木器玩家', tag: '文房重器', desc: '黄花梨笔洗，纹理绚丽，包浆老辣，实用与收藏兼具。', want: '换 清代紫檀', sales: 4, emoji: '🪵', dynasty: '明代' },
{ id: 14, name: '清代 珐琅彩碗', eng: 'Qing Falangcai Bowl', cat: 'street', price: 5800, rarity: 70, year: 1730, rating: 4.8, starStr: '⭐⭐⭐⭐✨', seller: '瓷器世家', tag: '御用瓷器', desc: '珐琅彩瓷，色彩艳丽，画工精细，皇家御用，极具奢华感。', want: '换 雍正粉彩', sales: 6, emoji: '🥣', dynasty: '清代' },
{ id: 15, name: '宋代 钧窑花盆', eng: 'Song Jun Kiln', cat: 'street', price: 6600, rarity: 72, year: 1100, rating: 4.6, starStr: '⭐⭐⭐⭐', seller: '窑变爱好者', tag: '窑变釉', desc: '钧窑窑变，红紫相间，像晚霞一般美丽，天然成趣。', want: '换 定窑白瓷', sales: 7, emoji: '🌸', dynasty: '宋代' },
{ id: 16, name: '战国 玉璧', eng: 'Warring States Jade Bi', cat: 'classic', price: 15000, rarity: 88, year: 300, rating: 4.9, starStr: '⭐⭐⭐⭐⭐', seller: '古玉研究所', tag: '礼器重宝', desc: '战国玉璧，双龙纹饰，谷纹清晰，尺寸罕见，收藏价值极高。', want: '换 汉代玉蝉', sales: 2, emoji: '⚪', dynasty: '战国' },
{ id: 17, name: '清代 铜钱币全套', eng: 'Qing Coin Set', cat: 'classic', price: 2500, rarity: 50, year: 1850, rating: 4.5, starStr: '⭐⭐⭐⭐', seller: '钱币收藏社', tag: '五帝钱', desc: '顺治、康熙、雍正、乾隆、嘉庆五帝钱一套，品相完好，辟邪镇宅。', want: '换 宋代铜钱', sales: 25, emoji: '🪙', dynasty: '清代' },
{ id: 18, name: '民国 漆器首饰盒', eng: 'Republic Lacquer Box', cat: 'classic', price: 1500, rarity: 45, year: 1940, rating: 4.7, starStr: '⭐⭐⭐⭐', seller: '大漆工艺师', tag: '大漆工艺', desc: '雕漆工艺，色彩厚重，图案富贵，存放首饰绝佳。', want: '换 明代木盒', sales: 12, emoji: '🎁', dynasty: '民国' }
];
// ---------------- 捡漏帖数据（8条写死） ----------------
const SWAPS: SwapItem[] = [
{ id: 1, user: '捡漏小能手', avatar: '🔍', offer: '清代铜钱', want: '宋代铜钱', time: '今天 13:20', likes: 46, content: '手里有一串顺治通宝，想换宋钱，可补差价，面交古玩城。', place: '汉口古玩城' },
{ id: 2, user: '玉器鉴定师', avatar: '💎', offer: '汉代玉蝉', want: '战国玉璧', time: '今天 11:05', likes: 38, content: '汉八刀工艺玉蝉，沁色自然，想换战国的玉璧，可详谈。', place: '徐东古玩城' },
{ id: 3, user: '瓷器老玩家', avatar: '🍶', offer: '清代粉彩碗', want: '清代珐琅彩', time: '昨天 18:42', likes: 61, content: '粉彩碗画工精细，换珐琅彩，可补差价，只和懂行的人换。', place: '崇仁路古玩城' },
{ id: 4, user: '书画装裱师', avatar: '🖼️', offer: '书画鉴定书', want: '任意字画', time: '昨天 15:30', likes: 29, content: '提供专业书画鉴定服务，可换取任意一幅有趣的画作。', place: '线上交换' },
{ id: 5, user: '紫砂壶玩家', avatar: '🫖', offer: '清代紫砂壶', want: '宋代建盏', time: '前天 20:15', likes: 22, content: '紫砂壶换建盏，都是茶器，补差价换，好东西诚心换。', place: '汉口江滩' },
{ id: 6, user: '木器收藏家', avatar: '🪵', offer: '明代黄花梨笔洗', want: '清代紫檀', time: '前天 09:50', likes: 41, content: '黄花梨换紫檀，补差价，文房重器交换，只看缘分。', place: '线上互换' },
{ id: 7, user: '铜镜老专家', avatar: '🪞', offer: '唐代海兽葡萄镜', want: '汉代铜镜', time: '3天前 22:08', likes: 55, content: '唐代铜镜换汉代铜镜，都是老物件，可补差价，面交。', place: '武昌火车站' },
{ id: 8, user: '古玩地摊王', avatar: '🧿', offer: '民国漆盒', want: '任意杂项', time: '4天前 14:26', likes: 17, content: '漆盒换任意古董杂项，学生党优先，主要是想捡漏。', place: '线上交换' }
];
// ---------------- 鉴定/修复数据（5条写死） ----------------
const CRAFTS: CraftItem[] = [
{ id: 1, name: '瓷器鉴定入门', type: '鉴定', pages: 80, author: '古窑斋主', likes: 342, downloads: 2100, emoji: '🏺', steps: ['胎质判断基础 1-15页', '釉面特征解析 16-35页', '底款识读技巧 36-55页', '做旧辨析 56-70页', '实战鉴定案例 71-80页'] },
{ id: 2, name: '古玉沁色详解', type: '玉器', pages: 66, author: '玉痴老李', likes: 276, downloads: 1580, emoji: '💎', steps: ['玉质种类鉴别 1-18页', '沁色成因剖析 19-40页', '雕工时代特征 41-55页', '盘玩保养方法 56-66页'] },
{ id: 3, name: '书画装裱修复法', type: '书画', pages: 95, author: '书画装裱师', likes: 415, downloads: 3300, emoji: '🖼️', steps: ['揭裱去污技法 1-28页', '补纸全色技巧 29-55页', '绫绢装裱流程 56-78页', '成品验收标准 79-95页'] },
{ id: 4, name: '钱币评级标准', type: '钱币', pages: 48, author: '钱币收藏社', likes: 198, downloads: 1260, emoji: '🪙', steps: ['品相等级分类 1-12页', '存世量评估 13-28页', '真伪辨析 29-40页', '市场行情分析 41-48页'] },
{ id: 5, name: '杂项收藏通论', type: '杂项', pages: 70, author: '杂项大掌柜', likes: 233, downloads: 1420, emoji: '🔮', steps: ['铜器收藏基础 1-22页', '漆器保养指南 23-44页', '竹木牙角雕鉴定 45-58页', '杂项投资建议 59-70页'] }
];
// ---------------- 杂项/配件数据（9条写死） ----------------
const ACCESSORIES: AccessoryItem[] = [
{ id: 1, name: '红木展示底座', series: '通用', price: 150, condition: '全新', seller: '红木家具厂', emoji: '🪵', desc: '红木材质，做工精良，平稳牢固' },
{ id: 2, name: '古玩鉴定证书', series: '专业', price: 300, condition: '全新', seller: '鉴定机构', emoji: '📜', desc: '权威机构出具，含防伪标识' },
{ id: 3, name: '紫檀木收纳盒', series: '定制', price: 800, condition: '9.5成新', seller: '木作工作室', emoji: '🎁', desc: '可定制尺寸，防潮防尘' },
{ id: 4, name: '放大镜鉴定灯', series: '专业', price: 500, condition: '9成新', seller: '鉴定工具店', emoji: '🔦', desc: '多倍放大，自带LED照明' },
{ id: 5, name: '手串展示架', series: '实木', price: 100, condition: '全新', seller: '文玩配件', emoji: '📿', desc: '实木材质，可悬挂多串' },
{ id: 6, name: '古玩防潮剂', series: '进口', price: 50, condition: '全新', seller: '防潮专家', emoji: '🧪', desc: '有效防潮防霉，保护藏品' },
{ id: 7, name: '玉石抛光布', series: '细绒', price: 30, condition: '全新', seller: '玉器工具', emoji: '🧻', desc: '细腻绒布，不伤玉石' },
{ id: 8, name: '字画卷轴收纳盒', series: '定制', price: 200, condition: '全新', seller: '书画装裱', emoji: '🎞️', desc: '防潮防虫，尺寸可定制' },
{ id: 9, name: '古钱币保护壳', series: '透明', price: 20, condition: '全新', seller: '钱币收藏', emoji: '🛡️', desc: 'PVC材质，抗震防划' }
];
// ---------------- 图鉴收藏数据（6条写死） ----------------
const COLLECTIONS: CollectionItem[] = [
{ id: 1, name: '青花瓷器', series: 'Blue and White', owned: 5, total: 12, rate: 42, emoji: '🍶' },
{ id: 2, name: '和田玉器', series: 'Hetian Jade', owned: 3, total: 10, rate: 30, emoji: '💎' },
{ id: 3, name: '古钱币', series: 'Ancient Coins', owned: 14, total: 25, rate: 56, emoji: '🪙' },
{ id: 4, name: '名家书画', series: 'Calligraphy', owned: 2, total: 8, rate: 25, emoji: '🖼️' },
{ id: 5, name: '杂项收藏', series: 'Misc', owned: 6, total: 15, rate: 40, emoji: '🔮' },
{ id: 6, name: '紫砂壶', series: 'Yixing', owned: 4, total: 7, rate: 57, emoji: '🫖' }
];
// ---------------- 点评数据（3条写死） ----------------
const ANTIQUE_REVIEWS: AntiqueReview[] = [
{ id: 1, user: '老古玩商', setName: '成化斗彩杯', starStr: '⭐⭐⭐⭐⭐', content: '成化斗彩真是稀世珍宝，釉色温润如玉，能上手看一眼都值了，确实是顶尖收藏。' },
{ id: 2, user: '玉器专家', setName: '汉八刀玉蝉', starStr: '⭐⭐⭐⭐✨', content: '线条简练有力，沁色入骨，鉴定为真品无疑，性价比极高，值得入手。' },
{ id: 3, user: '书画鉴定师', setName: '齐白石虾图', starStr: '⭐⭐⭐⭐⭐', content: '白石老人的水墨真迹，虾的灵动跃然纸上，保存完好，艺术价值极高。' }
];
// ---------------- 全城周交易量图表数据 ----------------
const TRADE_LABELS: string[] = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
const TRADE_BARS: number[] = [56, 44, 62, 48, 92, 146, 128];
// ---------------- 弹框选项 ----------------
const CONDITION_OPTIONS: string[] = ['全品', '品相佳', '有瑕疵', '需修复', '有残缺'];
const PLACES: string[] = ['汉口古玩城', '徐东古玩城', '崇仁路古玩城', '武昌火车站', '线上互换'];
// ---------------- 全局纯函数 ----------------
function catColor(cat: string): string {
if (cat === 'retired') return '#A83A2E';
if (cat === 'moc') return '#7C4DFF';
if (cat === 'fig') return '#4A7C59';
if (cat === 'tech') return '#C9A24B';
if (cat === 'street') return '#1E88E5';
return '#2C2C2C';
}
function catLabel(cat: string): string {
if (cat === 'retired') return '传世孤品';
if (cat === 'moc') return '鉴定收藏';
if (cat === 'fig') return '玉石钱币';
if (cat === 'tech') return '海外回流';
if (cat === 'street') return '地摊捡漏';
return '经典老件';
}
function rarityLabel(r: number): string {
if (r >= 95) return '传世级';
if (r >= 80) return '珍藏级';
if (r >= 60) return '精品级';
return '流通级';
}
function rarityColor(r: number): string {
if (r >= 95) return '#A83A2E';
if (r >= 80) return '#FF8A00';
if (r >= 60) return '#1E88E5';
return '#4A7C59';
}
function tradeBarHeight(v: number): string {
return Math.round(v / 146 * 96).toString() + 'vp';
}
function rateColor(r: number): string {
if (r >= 55) return '#4A7C59';
if (r >= 40) return '#C9A24B';
return '#A83A2E';
}
function retiredSets(): AntiqueItem[] { return [ANTIQUES[0], ANTIQUES[1], ANTIQUES[2]]; }
function mocSets(): AntiqueItem[] { return [ANTIQUES[3], ANTIQUES[4], ANTIQUES[5]]; }
function figSets(): AntiqueItem[] { return [ANTIQUES[6], ANTIQUES[7], ANTIQUES[8]]; }
function techSets(): AntiqueItem[] { return [ANTIQUES[9], ANTIQUES[10], ANTIQUES[11]]; }
function streetSets(): AntiqueItem[] { return [ANTIQUES[12], ANTIQUES[13], ANTIQUES[14]]; }
function classicSets(): AntiqueItem[] { return [ANTIQUES[15], ANTIQUES[16], ANTIQUES[17]]; }
function cityLeft(): AntiqueItem[] { return [ANTIQUES[16], ANTIQUES[17]]; }
function cityRight(): AntiqueItem[] { return [ANTIQUES[15]]; }
function hotSets(): AntiqueItem[] { return [ANTIQUES[3], ANTIQUES[5], ANTIQUES[16], ANTIQUES[17], ANTIQUES[9]]; }
function swapBadge(likes: number): string {
if (likes >= 50) return '🔥热门';
if (likes >= 30) return '👍热度';
return '🌱新帖';
}
// ============================================================
// 主页面
// ============================================================
@Entry
@Component
struct Index {
@State currentBottomTab: number = 0;
@State currentTopTab: number = 0;
@State selectedAntiqueId: number = 1;
@State showSellModal: boolean = false;
@State showSwapModal: boolean = false;
@State showDeleteModal: boolean = false;
@State showDetailModal: boolean = false;
@State sellAntiqueIdx: number = 0;
@State sellCondIdx: number = 0;
@State sellPrice: number = 100;
@State sellWords: string = '';
@State swapOfferIdx: number = 0;
@State swapWantIdx: number = 1;
@State swapPlaceIdx: number = 0;
@State particles: ParticleItem[] = [];
private timerId: number = -1;
aboutToAppear(): void {
this.buildParticles();
this.timerId = setInterval(() => { this.driftParticles(); }, 80);
}
aboutToDisappear(): void {
if (this.timerId !== -1) { clearInterval(this.timerId); this.timerId = -1; }
}
buildParticles(): void {
const emojis: string[] = ['🏺', '💎', '✨', '🪙', '🖼️'];
const list: ParticleItem[] = [];
for (let i = 0; i < 14; i++) {
list.push({ x: Math.random() * 340, emoji: emojis[i % emojis.length], size: 12 + Math.random() * 10, speed: 0.6 + Math.random() * 1.4, opacity: 0.2 + Math.random() * 0.4 });
}
this.particles = list;
}
driftParticles(): void {
for (let i = 0; i < this.particles.length; i++) {
this.particles[i].x += this.particles[i].speed;
if (this.particles[i].x > 360) { this.particles[i].x = -20; }
}
this.particles = this.particles.slice();
}
// 详情弹框数据取值
detailName(): string { for (let i = 0; i < ANTIQUES.length; i++) if (ANTIQUES[i].id === this.selectedAntiqueId) return ANTIQUES[i].name; return ''; }
detailEng(): string { for (let i = 0; i < ANTIQUES.length; i++) if (ANTIQUES[i].id === this.selectedAntiqueId) return ANTIQUES[i].eng; return ''; }
detailEmoji(): string { for (let i = 0; i < ANTIQUES.length; i++) if (ANTIQUES[i].id === this.selectedAntiqueId) return ANTIQUES[i].emoji; return '🏺'; }
detailPrice(): string { for (let i = 0; i < ANTIQUES.length; i++) if (ANTIQUES[i].id === this.selectedAntiqueId) return '¥' + ANTIQUES[i].price.toString(); return ''; }
detailDynasty(): string { for (let i = 0; i < ANTIQUES.length; i++) if (ANTIQUES[i].id === this.selectedAntiqueId) return ANTIQUES[i].dynasty; return ''; }
detailRarity(): string { for (let i = 0; i < ANTIQUES.length; i++) if (ANTIQUES[i].id === this.selectedAntiqueId) return ANTIQUES[i].rarity.toString(); return ''; }
detailYear(): string { for (let i = 0; i < ANTIQUES.length; i++) if (ANTIQUES[i].id === this.selectedAntiqueId) return ANTIQUES[i].year.toString(); return ''; }
detailSeller(): string { for (let i = 0; i < ANTIQUES.length; i++) if (ANTIQUES[i].id === this.selectedAntiqueId) return ANTIQUES[i].seller; return ''; }
detailTag(): string { for (let i = 0; i < ANTIQUES.length; i++) if (ANTIQUES[i].id === this.selectedAntiqueId) return ANTIQUES[i].tag; return ''; }
detailStar(): string { for (let i = 0; i < ANTIQUES.length; i++) if (ANTIQUES[i].id === this.selectedAntiqueId) return ANTIQUES[i].starStr; return ''; }
detailRating(): string { for (let i = 0; i < ANTIQUES.length; i++) if (ANTIQUES[i].id === this.selectedAntiqueId) return ANTIQUES[i].rating.toFixed(1) + '分'; return ''; }
detailDesc(): string { for (let i = 0; i < ANTIQUES.length; i++) if (ANTIQUES[i].id === this.selectedAntiqueId) return ANTIQUES[i].desc; return ''; }
detailWant(): string { for (let i = 0; i < ANTIQUES.length; i++) if (ANTIQUES[i].id === this.selectedAntiqueId) return ANTIQUES[i].want; return ''; }
// ---------------- 头部 ----------------
@Builder
headerBuilder() {
Column() {
Row() {
Column() {
Text('🏺 墨玉古玩斋').fontSize(22).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
Text('捡漏 · 鉴定 · 收藏').fontSize(11).fontColor('#E2CE94').margin({ top: 3 })
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Row({ space: 14 }) {
Text('🔎').fontSize(20)
Text('📦').fontSize(20)
Column() {
Text('🧧').fontSize(20)
Text('3').fontSize(9).fontColor('#2C2C2C').backgroundColor('#C9A24B').borderRadius(6).padding({ left: 4, right: 4 }).margin({ top: -6 })
}.alignItems(HorizontalAlign.End)
}
}.width('100%').padding({ left: 16, right: 16, top: 14, bottom: 10 })
Row({ space: 8 }) {
Text('🔍 搜索：建盏 / 玉璧 / 字画').fontSize(12).fontColor('#D4C8B0').layoutWeight(1)
Text('🧰 我的捡漏').fontSize(11).fontColor('#2C2C2C').backgroundColor('#C9A24B').borderRadius(10).padding({ left: 10, right: 10, top: 4, bottom: 4 })
}.width('100%').padding({ left: 16, right: 16, bottom: 12 })
}
.linearGradient({ angle: 135, colors: [['#2C2C2C', 0], ['#4A3B2A', 1]] })
.borderRadius({ bottomLeft: 18, bottomRight: 18 })
}
// ---------------- 顶部Tab ----------------
@Builder
topTabsBuilder() {
Row() {
ForEach(TOP_TABS, (t: TabItem, idx: number) => {
Column() {
Text(t.icon).fontSize(17)
Text(t.label).fontSize(12).fontColor(this.currentTopTab === idx ? '#C9A24B' : '#8A8378').fontWeight(this.currentTopTab === idx ? FontWeight.Bold : FontWeight.Normal).margin({ top: 2 })
if (this.currentTopTab === idx) {
Divider().width(16).strokeWidth(3).color('#C9A24B').borderRadius(2).margin({ top: 4 })
} else {
Divider().width(16).strokeWidth(3).color('#F5F3EF').borderRadius(2).margin({ top: 4 })
}
}.layoutWeight(1).alignItems(HorizontalAlign.Center).padding({ top: 10, bottom: 6 }).onClick(() => { this.currentTopTab = idx; })
}, (t: TabItem, idx: number) => 'top' + idx.toString() + t.label)
}.width('100%').backgroundColor('#FFFFFF').borderRadius(14).margin({ top: 10 })
}
// ---------------- 全部Tab：banner + 双列瀑布 ----------------
@Builder
cityContent() {
Column({ space: 12 }) {
Column() {
Text('🏺 古玩捡漏节 · 春季专场').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#2C2C2C')
Text('真品保证 3天限时 · 支持鉴定').fontSize(12).fontColor('#5B6B7F').margin({ top: 6 })
Row({ space: 10 }) {
Text('🏆 传世孤品').fontSize(11).fontColor('#2C2C2C').backgroundColor('#FFFFFF').borderRadius(12).padding({ left: 10, right: 10, top: 4, bottom: 4 })
Text('💎 精品玉器').fontSize(11).fontColor('#2C2C2C').backgroundColor('#FFFFFF').borderRadius(12).padding({ left: 10, right: 10, top: 4, bottom: 4 })
}.margin({ top: 10 })
}.width('100%').padding(18).alignItems(HorizontalAlign.Start).linearGradient({ angle: 120, colors: [['#C9A24B', 0], ['#E2CE94', 1]] }).borderRadius(16)
Text('✨ 全城新上架').fontSize(15).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').width('100%')
Row({ space: 10 }) {
Column({ space: 10 }) {
ForEach(cityLeft(), (t: AntiqueItem) => {
Column() {
Text(t.emoji).fontSize(34).margin({ top: 16 })
Text(t.name).fontSize(14).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').margin({ top: 8 })
Text(t.eng).fontSize(9).fontColor('#8A8378').margin({ top: 2 })
Text(t.desc).fontSize(11).fontColor('#8A8378').margin({ top: 8 }).maxLines(3).textOverflow({ overflow: TextOverflow.Ellipsis })
Row({ space: 6 }) {
Text('¥' + t.price.toString()).fontSize(15).fontWeight(FontWeight.Bold).fontColor('#A83A2E')
Text(t.tag).fontSize(9).fontColor('#2C2C2C').backgroundColor('#F0E9D8').borderRadius(8).padding({ left: 6, right: 6, top: 2, bottom: 2 })
}.margin({ top: 10, bottom: 14 })
}.width('100%').backgroundColor('#FFFFFF').borderRadius(14).alignItems(HorizontalAlign.Start).padding({ left: 14, right: 14 })
.onClick(() => { this.selectedAntiqueId = t.id; this.showDetailModal = true; })
}, (t: AntiqueItem) => 'cl' + t.id.toString())
}.layoutWeight(1)
Column({ space: 10 }) {
ForEach(cityRight(), (t: AntiqueItem) => {
Column() {
Text(t.emoji).fontSize(34).margin({ top: 24 })
Text(t.name).fontSize(14).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').margin({ top: 8 })
Text(t.eng).fontSize(9).fontColor('#8A8378').margin({ top: 2 })
Text(t.desc).fontSize(11).fontColor('#8A8378').margin({ top: 10 }).maxLines(4).textOverflow({ overflow: TextOverflow.Ellipsis })
Row({ space: 6 }) {
Text('¥' + t.price.toString()).fontSize(15).fontWeight(FontWeight.Bold).fontColor('#A83A2E')
Text(t.starStr).fontSize(10)
}.margin({ top: 12, bottom: 20 })
}.width('100%').backgroundColor('#F5EFE0').borderRadius(14).alignItems(HorizontalAlign.Start).padding({ left: 14, right: 14 })
.onClick(() => { this.selectedAntiqueId = t.id; this.showDetailModal = true; })
}, (t: AntiqueItem) => 'cr' + t.id.toString())
}.layoutWeight(1)
}.width('100%').alignItems(VerticalAlign.Top)
}.width('100%').padding({ left: 14, right: 14, top: 10, bottom: 16 })
}
// ---------------- 瓷器Tab：横滑大卡 + 稀有度柱状图 + 捡漏榜 ----------------
@Builder
retiredContent() {
Column({ space: 14 }) {
Text('🏆 传世孤品专区').fontSize(15).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').width('100%')
Scroll() {
Row({ space: 12 }) {
ForEach(retiredSets(), (t: AntiqueItem) => {
Column() {
Text(t.emoji).fontSize(40).margin({ top: 18 })
Text(t.name).fontSize(15).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').margin({ top: 8 })
Text(t.eng + ' · ' + t.dynasty).fontSize(9).fontColor('#E2CE94').margin({ top: 4 })
Row({ space: 6 }) {
Text('¥' + t.price.toString()).fontSize(16).fontWeight(FontWeight.Bold).fontColor('#E2CE94')
Text(rarityLabel(t.rarity)).fontSize(10).fontColor('#2C2C2C').backgroundColor('#C9A24B').borderRadius(8).padding({ left: 6, right: 6, top: 2, bottom: 2 })
}.margin({ top: 10, bottom: 18 })
}.width(160).linearGradient({ angle: 160, colors: [['#2C2C2C', 0], ['#1A1613', 1]] }).borderRadius(16).alignItems(HorizontalAlign.Center)
.onClick(() => { this.selectedAntiqueId = t.id; this.showDetailModal = true; })
}, (t: AntiqueItem) => 'rt' + t.id.toString())
}.padding({ left: 14, right: 14 })
}.scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off).width('100%')
Column() {
Text('📈 稀有度排行').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').width('100%')
Row({ space: 6 }) {
ForEach(retiredSets(), (t: AntiqueItem, i: number) => {
Column({ space: 5 }) {
Text(t.rarity.toString()).fontSize(9).fontColor('#C9A24B')
Column().width(34).height((t.rarity).toString() + 'vp').backgroundColor(i === 2 ? '#A83A2E' : '#C9A24B').borderRadius({ topLeft: 5, topRight: 5 })
Text(t.dynasty).fontSize(9).fontColor('#8A8378')
}.alignItems(HorizontalAlign.Center).layoutWeight(1)
}, (t: AntiqueItem, i: number) => 'rb' + i.toString() + t.id.toString())
}.width('100%').justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Bottom).padding({ top: 12 })
Text('成化斗彩鸡缸杯以99分稀有度登顶，市面流通不足十件').fontSize(10).fontColor('#8A8378').margin({ top: 8 })
}.width('100%').backgroundColor('#FFFFFF').borderRadius(14).padding(14).margin({ left: 14, right: 14 })
Column() {
Text('🕵️ 今日捡漏榜').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').width('100%').margin({ bottom: 8 })
ForEach(retiredSets(), (t: AntiqueItem, i: number) => {
Row({ space: 10 }) {
Text((i + 1).toString()).fontSize(14).fontWeight(FontWeight.Bold).fontColor(i === 0 ? '#A83A2E' : '#8A8378').width(20)
Text(t.emoji).fontSize(18)
Column() {
Text(t.name).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#2C2C2C')
Text(rarityLabel(t.rarity) + ' · ' + t.want).fontSize(10).fontColor('#8A8378').margin({ top: 2 })
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('¥' + t.price.toString()).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#A83A2E')
}.width('100%').padding({ top: 8, bottom: 8 }).onClick(() => { this.selectedAntiqueId = t.id; this.showDetailModal = true; })
}, (t: AntiqueItem, i: number) => 'pck' + i.toString() + t.id.toString())
}.width('100%').backgroundColor('#FFFFFF').borderRadius(14).padding(14).margin({ left: 14, right: 14, bottom: 16 })
}.width('100%').alignItems(HorizontalAlign.Start).padding({ top: 10 })
}
// ---------------- 玉石Tab：鉴定时间轴 ----------------
@Builder
mocContent() {
Column({ space: 0 }) {
Text('💎 鉴定收藏 · 图文教程').fontSize(15).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').width('100%').margin({ top: 10, bottom: 12 })
ForEach(CRAFTS, (m: CraftItem, i: number) => {
Row({ space: 12 }) {
Column({ space: 4 }) {
Text(m.emoji).fontSize(20)
if (i < CRAFTS.length - 1) {
Column().width(2).layoutWeight(1).backgroundColor('#C9A24B').margin({ top: 4 })
}
}.width(40).alignItems(HorizontalAlign.Center)
Column({ space: 6 }) {
Row({ space: 8 }) {
Text(m.name).fontSize(14).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').layoutWeight(1)
Text('⬇ ' + m.downloads.toString()).fontSize(10).fontColor('#C9A24B')
}.width('100%')
Text('by ' + m.author + ' · ' + m.type + ' · ' + m.pages.toString() + '页').fontSize(10).fontColor('#8A8378')
Column({ space: 5 }) {
ForEach(m.steps, (s: string, si: number) => {
Row({ space: 8 }) {
Text((si + 1).toString()).fontSize(9).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').backgroundColor('#F0E9D8').borderRadius(9).width(18).height(18).textAlign(TextAlign.Center)
Text(s).fontSize(10).fontColor('#4A5A6E').layoutWeight(1)
}.width('100%')
}, (s: string, si: number) => 'ms' + si.toString() + m.id.toString())
}.width('100%').backgroundColor('#F5F3EF').borderRadius(10).padding(10)
Row({ space: 8 }) {
Text('❤️ ' + m.likes.toString()).fontSize(10).fontColor('#A83A2E')
Text(m.emoji + ' 鉴定可下载').fontSize(10).fontColor('#C9A24B').layoutWeight(1).textAlign(TextAlign.End)
}.width('100%')
}.layoutWeight(1).backgroundColor(i === 1 ? '#F5EFE0' : '#FFFFFF').borderRadius(14).padding(12).margin({ bottom: 14 })
}.width('100%').alignItems(VerticalAlign.Top)
}, (m: CraftItem, i: number) => 'moc' + i.toString() + m.id.toString())
}.width('100%').padding({ left: 14, right: 14, bottom: 16 })
}
// ---------------- 书画Tab：三列格子 + 交换建议 ----------------
@Builder
figContent() {
Column({ space: 14 }) {
Text('🖼️ 杂项配件 · 鉴定战场').fontSize(15).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').width('100%')
Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween }) {
ForEach(ACCESSORIES, (f: AccessoryItem) => {
Column() {
Text(f.emoji).fontSize(26).margin({ top: 12 })
Text(f.name).fontSize(11).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').margin({ top: 6 }).maxLines(1)
Text(f.series).fontSize(8).fontColor('#8A8378').margin({ top: 2 })
Text('¥' + f.price.toString()).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#A83A2E').margin({ top: 4, bottom: 12 })
}.width('31%').backgroundColor('#FFFFFF').borderRadius(12).alignItems(HorizontalAlign.Center).margin({ bottom: 8 })
.onClick(() => { this.selectedAntiqueId = 7 + f.id % 3; this.showDetailModal = true; })
}, (f: AccessoryItem) => 'fg' + f.id.toString())
}.width('100%')
Column() {
Text('🤝 杂项交换行情').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').width('100%').margin({ bottom: 6 })
ForEach(ACCESSORIES, (f: AccessoryItem) => {
if (f.id % 2 === 0) {
Row({ space: 10 }) {
Text(f.emoji).fontSize(20)
Column({ space: 2 }) {
Text(f.name + ' · ' + f.condition).fontSize(12).fontWeight(FontWeight.Bold).fontColor('#2C2C2C')
Text(f.desc).fontSize(10).fontColor('#8A8378')
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('¥' + f.price.toString()).fontSize(12).fontWeight(FontWeight.Bold).fontColor('#4A7C59')
}.width('100%').padding({ top: 8, bottom: 8 })
}
}, (f: AccessoryItem) => 'fgx' + f.id.toString())
}.width('100%').backgroundColor('#FFFFFF').borderRadius(14).padding(14)
}.width('100%').padding({ left: 14, right: 14, top: 10, bottom: 16 })
}
// ---------------- 杂项Tab：对决卡 + 侧栏统计 ----------------
@Builder
techContent() {
Column({ space: 14 }) {
Text('🔮 珍稀杂项 · 巅峰对决').fontSize(15).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').width('100%')
Row({ space: 10 }) {
Column() {
Text('🍶').fontSize(34).margin({ top: 14 })
Text('宋代建盏').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').margin({ top: 6 })
Text('1100年 · 现价¥6800').fontSize(10).fontColor('#E2CE94').margin({ top: 4, bottom: 14 })
}.layoutWeight(1).linearGradient({ angle: 150, colors: [['#2C2C2C', 0], ['#4A3B2A', 1]] }).borderRadius(14).alignItems(HorizontalAlign.Center)
Column() {
Text('VS').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#C9A24B')
Text('本周').fontSize(9).fontColor('#8A8378')
}.alignItems(HorizontalAlign.Center)
Column() {
Text('🪙').fontSize(34).margin({ top: 14 })
Text('清代钱币全套').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').margin({ top: 6 })
Text('1850年 · 现价¥2500').fontSize(10).fontColor('#E2CE94').margin({ top: 4, bottom: 14 })
}.layoutWeight(1).linearGradient({ angle: 150, colors: [['#8A8378', 0], ['#1A1613', 1]] }).borderRadius(14).alignItems(HorizontalAlign.Center)
}.width('100%')
Row({ space: 10 }) {
Column({ space: 10 }) {
ForEach(techSets(), (t: AntiqueItem) => {
Row({ space: 10 }) {
Text(t.emoji).fontSize(22)
Column({ space: 2 }) {
Text(t.name).fontSize(12).fontWeight(FontWeight.Bold).fontColor('#2C2C2C')
Text(t.tag + ' · ' + t.dynasty).fontSize(10).fontColor('#8A8378')
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('¥' + t.price.toString()).fontSize(12).fontWeight(FontWeight.Bold).fontColor('#A83A2E')
}.width('100%').backgroundColor('#FFFFFF').borderRadius(12).padding(12).onClick(() => { this.selectedAntiqueId = t.id; this.showDetailModal = true; })
}, (t: AntiqueItem) => 'tc' + t.id.toString())
}.layoutWeight(1)
Column({ space: 10 }) {
Column({ space: 4 }) {
Text('12').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#C9A24B')
Text('本周珍品成交').fontSize(9).fontColor('#8A8378')
}.width('100%').backgroundColor('#F0E9D8').borderRadius(12).padding({ top: 10, bottom: 10 }).alignItems(HorizontalAlign.Center)
Column({ space: 4 }) {
Text('5.6万').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#A83A2E')
Text('珍品总交易额').fontSize(9).fontColor('#8A8378')
}.width('100%').backgroundColor('#F5EFE0').borderRadius(12).padding({ top: 10, bottom: 10 }).alignItems(HorizontalAlign.Center)
Column({ space: 4 }) {
Text('92%').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#4A7C59')
Text('鉴定好评率').fontSize(9).fontColor('#8A8378')
}.width('100%').backgroundColor('#FFFFFF').borderRadius(12).padding({ top: 10, bottom: 10 }).alignItems(HorizontalAlign.Center)
}.width(86)
}.width('100%').alignItems(VerticalAlign.Top)
}.width('100%').padding({ left: 14, right: 14, top: 10, bottom: 16 })
}
// ---------------- 钱币Tab：标签云 + 紧凑列表 ----------------
@Builder
streetContent() {
Column({ space: 14 }) {
Text('🪙 钱币收藏 · 历史见证').fontSize(15).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').width('100%')
Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Start }) {
ForEach(COLLECTIONS, (c: CollectionItem) => {
Text(c.emoji + ' ' + c.name + ' ' + c.owned.toString() + '/' + c.total.toString()).fontSize(11).fontColor('#2C2C2C').backgroundColor('#F0E9D8').borderRadius(12).padding({ left: 10, right: 10, top: 6, bottom: 6 }).margin(4)
}, (c: CollectionItem) => 'ccoll' + c.id.toString())
}.width('100%')
ForEach(streetSets(), (t: AntiqueItem) => {
Row({ space: 12 }) {
Text(t.emoji).fontSize(24)
Column({ space: 2 }) {
Row({ space: 6 }) {
Text(t.name).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#2C2C2C')
Text(rarityLabel(t.rarity)).fontSize(8).fontColor('#FFFFFF').backgroundColor(rarityColor(t.rarity)).borderRadius(6).padding({ left: 5, right: 5, top: 1, bottom: 1 })
}
Text(t.desc).fontSize(10).fontColor('#8A8378').maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('¥' + t.price.toString()).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#A83A2E')
}.width('100%').backgroundColor(t.id === 15 ? '#F0E9D8' : '#FFFFFF').borderRadius(12).padding(12).onClick(() => { this.selectedAntiqueId = t.id; this.showDetailModal = true; })
}, (t: AntiqueItem) => 'st' + t.id.toString())
Text('💬 集齐五帝钱可召唤隐藏福利：顺治+康熙+雍正+乾隆+嘉庆').fontSize(10).fontColor('#8A8378').width('100%')
}.width('100%').padding({ left: 14, right: 14, top: 10, bottom: 16 })
}
// ---------------- 古玩首页 ----------------
@Builder
bazaarContent() {
Column() {
this.topTabsBuilder()
if (this.currentTopTab === 0) { this.cityContent() }
else if (this.currentTopTab === 1) { this.retiredContent() }
else if (this.currentTopTab === 2) { this.mocContent() }
else if (this.currentTopTab === 3) { this.figContent() }
else if (this.currentTopTab === 4) { this.techContent() }
else { this.streetContent() }
}.width('100%')
}
// ---------------- 捡漏页 ----------------
@Builder
swapContent() {
Column({ space: 12 }) {
Row({ space: 0 }) {
Column({ space: 4 }) { Text('156').fontSize(20).fontWeight(FontWeight.Bold).fontColor('#C9A24B'); Text('在交换中').fontSize(10).fontColor('#8A8378') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 4 }) { Text('42').fontSize(20).fontWeight(FontWeight.Bold).fontColor('#A83A2E'); Text('今日捡漏').fontSize(10).fontColor('#8A8378') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 4 }) { Text('98%').fontSize(20).fontWeight(FontWeight.Bold).fontColor('#4A7C59'); Text('鉴定好评').fontSize(10).fontColor('#8A8378') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 6 }) { Text('🤝 发捡漏').fontSize(12).fontColor('#FFFFFF').backgroundColor('#A83A2E').borderRadius(14).padding({ left: 12, right: 12, top: 6, bottom: 6 }).onClick(() => { this.showSwapModal = true; }) }.alignItems(HorizontalAlign.Center)
}.width('100%').backgroundColor('#FFFFFF').borderRadius(14).padding({ top: 14, bottom: 14 })
ForEach(SWAPS, (s: SwapItem) => {
Column({ space: 8 }) {
Row({ space: 10 }) {
Text(s.avatar).fontSize(26)
Column({ space: 2 }) {
Row({ space: 6 }) {
Text(s.user).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#2C2C2C')
Text(swapBadge(s.likes)).fontSize(8).fontColor('#A83A2E').backgroundColor('#F5EFE0').borderRadius(6).padding({ left: 5, right: 5, top: 1, bottom: 1 })
}
Text(s.time + ' · ' + s.place).fontSize(9).fontColor('#8A8378')
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('⋯').fontSize(16).fontColor('#8A8378').onClick(() => { this.showDeleteModal = true; })
}.width('100%')
Row({ space: 10 }) {
Column({ space: 4 }) { Text('我提供').fontSize(9).fontColor('#C9A24B'); Text(s.offer).fontSize(11).fontWeight(FontWeight.Bold).fontColor('#2C2C2C') }.layoutWeight(1).backgroundColor('#F0E9D8').borderRadius(10).padding(8).alignItems(HorizontalAlign.Center)
Text('⇄').fontSize(14).fontColor('#C9A24B')
Column({ space: 4 }) { Text('我想换').fontSize(9).fontColor('#A83A2E'); Text(s.want).fontSize(11).fontWeight(FontWeight.Bold).fontColor('#2C2C2C') }.layoutWeight(1).backgroundColor('#F5EFE0').borderRadius(10).padding(8).alignItems(HorizontalAlign.Center)
}.width('100%')
Text(s.content).fontSize(11).fontColor('#4A5A6E').lineHeight(16).width('100%')
Row({ space: 8 }) {
Text('📍 ' + s.place).fontSize(10).fontColor('#C9A24B').backgroundColor('#F5F3EF').borderRadius(10).padding({ left: 8, right: 8, top: 4, bottom: 4 })
Text('❤️ ' + s.likes.toString()).fontSize(10).fontColor('#A83A2E').layoutWeight(1).textAlign(TextAlign.End)
}.width('100%')
}.width('100%').backgroundColor('#FFFFFF').borderRadius(14).padding(14)
}, (s: SwapItem) => 'sw' + s.id.toString())
}.width('100%').padding({ left: 14, right: 14, top: 10, bottom: 16 })
}
// ---------------- 图鉴页 ----------------
@Builder
collectionContent() {
Column({ space: 12 }) {
Row({ space: 10 }) {
Column({ space: 4 }) {
Text('📖 我的藏品图鉴').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#2C2C2C')
Text('记录每一件心头好的收藏进度').fontSize(10).fontColor('#8A8378')
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('✚ 登记').fontSize(12).fontColor('#FFFFFF').backgroundColor('#C9A24B').borderRadius(14).padding({ left: 14, right: 14, top: 7, bottom: 7 }).onClick(() => { this.showSellModal = true; })
}.width('100%').margin({ top: 10 })
ForEach(COLLECTIONS, (c: CollectionItem) => {
Column({ space: 8 }) {
Row({ space: 10 }) {
Text(c.emoji).fontSize(28)
Column({ space: 3 }) {
Text(c.name).fontSize(14).fontWeight(FontWeight.Bold).fontColor('#2C2C2C')
Text(c.series + ' · 已收 ' + c.owned.toString() + '/' + c.total.toString()).fontSize(10).fontColor('#8A8378')
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text(c.rate.toString() + '%').fontSize(15).fontWeight(FontWeight.Bold).fontColor(rateColor(c.rate))
}.width('100%')
Row({ space: 0 }) {
Column().width(c.rate.toString() + '%').height(6).backgroundColor(rateColor(c.rate)).borderRadius(3)
Column().width((100 - c.rate).toString() + '%').height(6).backgroundColor('#E8E4DE').borderRadius(3)
}.width('100%')
}.width('100%').backgroundColor(c.id === 5 ? '#F5EFE0' : '#FFFFFF').borderRadius(14).padding(14)
}, (c: CollectionItem) => 'coll' + c.id.toString())
Column() {
Text('🏅 图鉴成就墙').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').width('100%').margin({ bottom: 8 })
Flex({ wrap: FlexWrap.Wrap }) {
Text('🎖️ 瓷器专家').fontSize(10).fontColor('#C9A24B').backgroundColor('#F0E9D8').borderRadius(10).padding({ left: 8, right: 8, top: 5, bottom: 5 }).margin(4)
Text('🏆 孤品猎人').fontSize(10).fontColor('#A83A2E').backgroundColor('#F5EFE0').borderRadius(10).padding({ left: 8, right: 8, top: 5, bottom: 5 }).margin(4)
Text('💎 玉器鉴定师').fontSize(10).fontColor('#4A7C59').backgroundColor('#E8F7EF').borderRadius(10).padding({ left: 8, right: 8, top: 5, bottom: 5 }).margin(4)
Text('🪙 钱币百晓生').fontSize(10).fontColor('#1E88E5').backgroundColor('#E8F0FE').borderRadius(10).padding({ left: 8, right: 8, top: 5, bottom: 5 }).margin(4)
}.width('100%')
}.width('100%').backgroundColor('#FFFFFF').borderRadius(14).padding(14)
}.width('100%').padding({ left: 14, right: 14, bottom: 16 })
}
// ---------------- 我的页 ----------------
@Builder
mineContent() {
Column({ space: 14 }) {
Column() {
Row({ space: 12 }) {
Text('🧧').fontSize(40)
Column({ space: 4 }) {
Text('古玩收藏家老陈').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
Text('LV.10 藏宝阁主 · 信用分 990').fontSize(10).fontColor('#E2CE94')
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('＞').fontSize(18).fontColor('#E2CE94')
}.width('100%')
Row({ space: 0 }) {
Column({ space: 3 }) { Text('38').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#C9A24B'); Text('在售藏品').fontSize(9).fontColor('#E2CE94') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 3 }) { Text('12').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#C9A24B'); Text('求购中').fontSize(9).fontColor('#E2CE94') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 3 }) { Text('¥15.8万').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#C9A24B'); Text('累计成交额').fontSize(9).fontColor('#E2CE94') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
}.width('100%').margin({ top: 16 })
}.width('100%').padding(18).linearGradient({ angle: 120, colors: [['#2C2C2C', 0], ['#4A3B2A', 1]] }).borderRadius(16).margin({ top: 10 })
Column() {
Text('🔨 我的求购清单').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').width('100%').margin({ bottom: 6 })
ForEach(ANTIQUES, (t: AntiqueItem) => {
if (t.id === 13 || t.id === 16 || t.id === 18) {
Row({ space: 10 }) {
Text(t.emoji).fontSize(20)
Column({ space: 2 }) {
Text(t.name).fontSize(12).fontWeight(FontWeight.Bold).fontColor('#2C2C2C')
Text('预算 ¥' + t.price.toString() + ' 内 · ' + t.want).fontSize(9).fontColor('#8A8378')
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('出价中').fontSize(10).fontColor('#A83A2E').backgroundColor('#F5EFE0').borderRadius(10).padding({ left: 8, right: 8, top: 3, bottom: 3 })
}.width('100%').padding({ top: 9, bottom: 9 })
}
}, (t: AntiqueItem) => 'wish' + t.id.toString())
}.width('100%').backgroundColor('#FFFFFF').borderRadius(14).padding(14)
Column() {
Text('📍 常去古玩城').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').width('100%').margin({ bottom: 6 })
ForEach(PLACES, (p: string, i: number) => {
Row({ space: 10 }) {
Text(['🚇', '🏬', '🚌', '🏪', '📦'][i]).fontSize(16)
Text(p).fontSize(12).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').layoutWeight(1)
Text(['汉口站台', '徐东入口', '崇仁路站', '武昌广场', '顺丰网点'][i]).fontSize(9).fontColor('#8A8378')
}.width('100%').padding({ top: 9, bottom: 9 })
}, (p: string, i: number) => 'pl' + i.toString() + p)
}.width('100%').backgroundColor('#FFFFFF').borderRadius(14).padding(14)
}.width('100%').padding({ left: 14, right: 14, bottom: 16 })
}
// ---------------- 底部Tab ----------------
@Builder
bottomTabsBuilder() {
Row() {
ForEach(BOTTOM_TABS, (t: TabItem, idx: number) => {
Column({ space: 3 }) {
Text(t.icon).fontSize(20)
Text(t.label).fontSize(10).fontColor(this.currentBottomTab === idx ? '#C9A24B' : '#8A8378').fontWeight(this.currentBottomTab === idx ? FontWeight.Bold : FontWeight.Normal)
}.layoutWeight(1).alignItems(HorizontalAlign.Center).padding({ top: 8, bottom: 8 }).onClick(() => { this.currentBottomTab = idx; })
}, (t: TabItem, idx: number) => 'bt' + idx.toString() + t.label)
}.width('100%').backgroundColor('#FFFFFF').borderRadius({ topLeft: 18, topRight: 18 })
}
// ---------------- 弹框1：发布出售（新增·黑金渐变头） ----------------
@Builder
sellModalBuilder() {
Column() {
Column() {
Text('🏺 发布出售').fontSize(17).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').margin({ top: 16 })
Text('闲置回血，孤品不愁卖').fontSize(11).fontColor('#E2CE94').margin({ top: 4, bottom: 16 })
}.width('100%').linearGradient({ angle: 120, colors: [['#2C2C2C', 0], ['#4A3B2A', 1]] }).borderRadius({ topLeft: 18, topRight: 18 })
Scroll() {
Column({ space: 14 }) {
Column({ space: 8 }) {
Text('要出售的藏品').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').width('100%')
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(ANTIQUES, (t: AntiqueItem, i: number) => {
if (i < 8) {
Text(t.emoji + ' ' + t.name).fontSize(10).fontColor(this.sellAntiqueIdx === i ? '#FFFFFF' : '#2C2C2C').backgroundColor(this.sellAntiqueIdx === i ? '#C9A24B' : '#F0E9D8').borderRadius(12).padding({ left: 9, right: 9, top: 5, bottom: 5 }).margin(4).onClick(() => { this.sellAntiqueIdx = i; })
}
}, (t: AntiqueItem, i: number) => 'st' + i.toString() + t.id.toString())
}.width('100%')
}.width('100%').alignItems(HorizontalAlign.Start)
Column({ space: 8 }) {
Text('品相说明').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').width('100%')
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(CONDITION_OPTIONS, (c: string, i: number) => {
Text(c).fontSize(10).fontColor(this.sellCondIdx === i ? '#FFFFFF' : '#A83A2E').backgroundColor(this.sellCondIdx === i ? '#A83A2E' : '#F5EFE0').borderRadius(12).padding({ left: 10, right: 10, top: 5, bottom: 5 }).margin(4).onClick(() => { this.sellCondIdx = i; })
}, (c: string, i: number) => 'sd' + i.toString() + c)
}.width('100%')
}.width('100%').alignItems(HorizontalAlign.Start)
Row({ space: 12 }) {
Text('出售价格').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#2C2C2C')
Row({ space: 0 }) {
Text('−').fontSize(16).fontColor('#C9A24B').backgroundColor('#F0E9D8').borderRadius({ topLeft: 10, bottomLeft: 10 }).width(34).height(30).textAlign(TextAlign.Center).onClick(() => { if (this.sellPrice > 10) { this.sellPrice -= 10; } })
Text('¥' + this.sellPrice.toString()).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').backgroundColor('#FFFFFF').height(30).textAlign(TextAlign.Center).padding({ left: 14, right: 14 })
Text('＋').fontSize(16).fontColor('#FFFFFF').backgroundColor('#C9A24B').borderRadius({ topRight: 10, bottomRight: 10 }).width(34).height(30).textAlign(TextAlign.Center).onClick(() => { if (this.sellPrice < 99999) { this.sellPrice += 10; } })
}.borderRadius(10)
Text(this.sellPrice > 20000 ? '💰 孤品级建议包邮' : '实惠价更容易捡漏').fontSize(9).fontColor(this.sellPrice > 20000 ? '#A83A2E' : '#8A8378').layoutWeight(1).textAlign(TextAlign.End)
}.width('100%')
Column({ space: 8 }) {
Text('藏品描述').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').width('100%')
TextInput({ placeholder: '年代、品相、来源如实描述…', text: this.sellWords }).fontSize(12).fontColor('#2C2C2C').backgroundColor('#F5F3EF').borderRadius(10).height(40).padding({ left: 12, right: 12 }).onChange((v: string) => { this.sellWords = v; })
}.width('100%').alignItems(HorizontalAlign.Start)
Row({ space: 12 }) {
Text('取消').fontSize(13).fontColor('#8A8378').backgroundColor('#F5F3EF').borderRadius(20).layoutWeight(1).height(42).textAlign(TextAlign.Center).onClick(() => { this.showSellModal = false; })
Text('上架出售').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').backgroundColor('#C9A24B').borderRadius(20).layoutWeight(1).height(42).textAlign(TextAlign.Center).onClick(() => { this.showSellModal = false; })
}.width('100%').margin({ top: 4, bottom: 18 })
}.width('100%').padding({ left: 16, right: 16, top: 16 })
}.scrollBar(BarState.Off).layoutWeight(1).align(Alignment.Top)
}.width('88%').height('76%').backgroundColor('#FFFFFF').borderRadius(18).clip(true)
}
// ---------------- 弹框2：发起交换（新增·赤金头） ----------------
@Builder
swapModalBuilder() {
Column() {
Column() {
Row({ space: 8 }) { Text('🤝').fontSize(22); Text('发起交换').fontSize(17).fontWeight(FontWeight.Bold).fontColor('#2C2C2C') }.margin({ top: 16 })
Text('用闲置换心头好，藏友互助').fontSize(11).fontColor('#5B6B7F').margin({ top: 4, bottom: 14 })
}.width('100%').backgroundColor('#C9A24B').borderRadius({ topLeft: 18, topRight: 18 })
Scroll() {
Column({ space: 14 }) {
Column({ space: 8 }) {
Text('我提供').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').width('100%')
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(ANTIQUES, (t: AntiqueItem, i: number) => {
if (i % 3 === 0 && i < 15) {
Text(t.emoji + ' ' + t.name).fontSize(10).fontColor(this.swapOfferIdx === i ? '#FFFFFF' : '#2C2C2C').backgroundColor(this.swapOfferIdx === i ? '#1A1613' : '#F5F3EF').borderRadius(12).padding({ left: 9, right: 9, top: 5, bottom: 5 }).margin(4).onClick(() => { this.swapOfferIdx = i; })
}
}, (t: AntiqueItem, i: number) => 'wo' + i.toString() + t.id.toString())
}.width('100%')
}.width('100%').alignItems(HorizontalAlign.Start)
Column({ space: 8 }) {
Text('我想换（可多选）').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').width('100%')
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(ANTIQUES, (t: AntiqueItem, i: number) => {
if (i % 3 === 2 && i < 15) {
Text((this.pickedWant(i) ? '✓ ' : '') + t.emoji + ' ' + t.name).fontSize(10).fontColor(this.pickedWant(i) ? '#FFFFFF' : '#A83A2E').backgroundColor(this.pickedWant(i) ? '#A83A2E' : '#F5EFE0').borderRadius(12).padding({ left: 9, right: 9, top: 5, bottom: 5 }).margin(4).onClick(() => { this.toggleWant(i); })
}
}, (t: AntiqueItem, i: number) => 'ww' + i.toString() + t.id.toString())
}.width('100%')
}.width('100%').alignItems(HorizontalAlign.Start)
Column({ space: 8 }) {
Text('交换地点').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').width('100%')
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(PLACES, (p: string, i: number) => {
Text(p).fontSize(10).fontColor(this.swapPlaceIdx === i ? '#FFFFFF' : '#C9A24B').backgroundColor(this.swapPlaceIdx === i ? '#C9A24B' : '#F0E9D8').borderRadius(12).padding({ left: 10, right: 10, top: 5, bottom: 5 }).margin(4).onClick(() => { this.swapPlaceIdx = i; })
}, (p: string, i: number) => 'wp' + i.toString() + p)
}.width('100%')
}.width('100%').alignItems(HorizontalAlign.Start)
Row({ space: 8 }) {
Text('💡').fontSize(14)
Text('交换双方可自行协商补差价，面交请选择古玩城或人流密集的公共场所。').fontSize(10).fontColor('#8A8378').lineHeight(15).layoutWeight(1)
}.width('100%').backgroundColor('#F5EFE0').borderRadius(10).padding(10)
Row({ space: 12 }) {
Text('再想想').fontSize(13).fontColor('#8A8378').backgroundColor('#F5F3EF').borderRadius(20).layoutWeight(1).height(42).textAlign(TextAlign.Center).onClick(() => { this.showSwapModal = false; })
Text('发布交换帖').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').backgroundColor('#C9A24B').borderRadius(20).layoutWeight(1).height(42).textAlign(TextAlign.Center).onClick(() => { this.showSwapModal = false; })
}.width('100%').margin({ top: 4, bottom: 18 })
}.width('100%').padding({ left: 16, right: 16, top: 16 })
}.scrollBar(BarState.Off).layoutWeight(1).align(Alignment.Top)
}.width('88%').height('72%').backgroundColor('#FFFFFF').borderRadius(18).clip(true)
}
// ---------------- 弹框3：下架/删除 ----------------
@Builder
deleteModalBuilder() {
Column({ space: 14 }) {
Text('🗑️').fontSize(36)
Text('下架这件藏品？').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#2C2C2C')
Text('下架后买家将无法搜索到这条信息，\n收藏和留言会一并清空，可重新上架。').fontSize(11).fontColor('#8A8378').textAlign(TextAlign.Center).lineHeight(17)
Row({ space: 12 }) {
Text('留着').fontSize(13).fontColor('#C9A24B').backgroundColor('#F0E9D8').borderRadius(20).layoutWeight(1).height(40).textAlign(TextAlign.Center).onClick(() => { this.showDeleteModal = false; })
Text('确认下架').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').backgroundColor('#A83A2E').borderRadius(20).layoutWeight(1).height(40).textAlign(TextAlign.Center).onClick(() => { this.showDeleteModal = false; })
}.width('100%').margin({ top: 6 })
}.width('72%').backgroundColor('#FFFFFF').borderRadius(18).padding({ left: 20, right: 20, top: 24, bottom: 22 }).alignItems(HorizontalAlign.Center)
}
// ---------------- 弹框4：藏品详情（黑金渐变头） ----------------
@Builder
detailModalBuilder() {
Column() {
Column() {
Text(this.detailEmoji()).fontSize(40).margin({ top: 18 })
Text(this.detailName()).fontSize(18).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').margin({ top: 8 })
Text(this.detailEng()).fontSize(10).fontColor('#5B6B7F').margin({ top: 2 })
Row({ space: 8 }) {
Text(this.detailTag()).fontSize(9).fontColor('#FFFFFF').backgroundColor('#C9A24B').borderRadius(8).padding({ left: 7, right: 7, top: 2, bottom: 2 })
Text(rarityLabel(Number(this.detailRarity()))).fontSize(9).fontColor('#2C2C2C').backgroundColor('#C9A24B').borderRadius(8).padding({ left: 7, right: 7, top: 2, bottom: 2 })
}.margin({ top: 10, bottom: 18 })
}.width('100%').linearGradient({ angle: 135, colors: [['#C9A24B', 0], ['#F0E9D8', 1]] }).borderRadius({ topLeft: 18, topRight: 18 }).alignItems(HorizontalAlign.Center)
Scroll() {
Column({ space: 14 }) {
Row({ space: 0 }) {
Column({ space: 4 }) { Text(this.detailPrice()).fontSize(17).fontWeight(FontWeight.Bold).fontColor('#A83A2E'); Text('售价').fontSize(9).fontColor('#8A8378') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 4 }) { Text(this.detailDynasty()).fontSize(17).fontWeight(FontWeight.Bold).fontColor('#C9A24B'); Text('年代').fontSize(9).fontColor('#8A8378') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 4 }) { Text(this.detailRarity()).fontSize(17).fontWeight(FontWeight.Bold).fontColor(rarityColor(Number(this.detailRarity()))); Text('稀有度').fontSize(9).fontColor('#8A8378') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 4 }) { Text(this.detailYear()).fontSize(17).fontWeight(FontWeight.Bold).fontColor('#1E88E5'); Text('年份').fontSize(9).fontColor('#8A8378') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
}.width('100%').backgroundColor('#F5F3EF').borderRadius(12).padding({ top: 12, bottom: 12 })
Column({ space: 8 }) {
Text('🧾 藏品描述').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').width('100%')
Text(this.detailDesc()).fontSize(11).fontColor('#4A5A6E').lineHeight(18)
Row({ space: 8 }) {
Text('👤 ' + this.detailSeller()).fontSize(10).fontColor('#C9A24B')
Text(this.detailStar() + ' ' + this.detailRating()).fontSize(10).fontColor('#A83A2E').layoutWeight(1).textAlign(TextAlign.End)
}.width('100%')
}.width('100%').alignItems(HorizontalAlign.Start)
Row({ space: 8 }) {
Text('🤝').fontSize(14)
Text('藏家想换：' + this.detailWant()).fontSize(11).fontColor('#A83A2E').layoutWeight(1)
}.width('100%').backgroundColor('#F5EFE0').borderRadius(10).padding(10)
Column({ space: 10 }) {
Text('💬 藏友点评').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#2C2C2C').width('100%')
ForEach(ANTIQUE_REVIEWS, (r: AntiqueReview) => {
Column({ space: 5 }) {
Row({ space: 8 }) { Text('👤').fontSize(14); Text(r.user).fontSize(11).fontWeight(FontWeight.Bold).fontColor('#2C2C2C'); Text(r.starStr).fontSize(9).layoutWeight(1).textAlign(TextAlign.End) }.width('100%')
Text(r.content).fontSize(10).fontColor('#8A8378').lineHeight(15)
}.width('100%').backgroundColor('#F5F3EF').borderRadius(10).padding(10)
}, (r: AntiqueReview) => 'rv' + r.id.toString())
}.width('100%').alignItems(HorizontalAlign.Start)
Row({ space: 12 }) {
Text('💬 留言问问').fontSize(13).fontColor('#C9A24B').backgroundColor('#F0E9D8').borderRadius(20).layoutWeight(1).height(42).textAlign(TextAlign.Center).onClick(() => { this.showDetailModal = false; })
Text('🛒 立即购买').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').backgroundColor('#A83A2E').borderRadius(20).layoutWeight(1).height(42).textAlign(TextAlign.Center).onClick(() => { this.showDetailModal = false; })
}.width('100%').margin({ top: 2, bottom: 18 })
}.width('100%').padding({ left: 16, right: 16, top: 14 })
}.scrollBar(BarState.Off).layoutWeight(1).align(Alignment.Top)
}.width('88%').height('78%').backgroundColor('#FFFFFF').borderRadius(18).clip(true)
}
// 交换多选辅助
pickedWant(i: number): boolean { return (i % 2) === 0; }
toggleWant(i: number): void { this.swapWantIdx = i; }
// ---------------- 主布局 ----------------
build() {
Stack() {
Column() {
this.headerBuilder()
Scroll() {
Column() {
if (this.currentBottomTab === 0) { this.bazaarContent() }
else if (this.currentBottomTab === 1) { this.swapContent() }
else if (this.currentBottomTab === 2) { this.collectionContent() }
else { this.mineContent() }
}.width('100%')
}.layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top)
this.bottomTabsBuilder()
}.width('100%').height('100%')
ForEach(this.particles, (p: ParticleItem, i: number) => {
Text(p.emoji).fontSize(p.size).opacity(p.opacity).position({ x: p.x, y: 80 + (i % 5) * 118 })
}, (p: ParticleItem, i: number) => 'pt' + i.toString())
if (this.showDetailModal) {
Column() { this.detailModalBuilder() }.width('100%').height('100%').backgroundColor('99000000').justifyContent(FlexAlign.Center).onClick(() => { this.showDetailModal = false; })
}
if (this.showSellModal) {
Column() { this.sellModalBuilder() }.width('100%').height('100%').backgroundColor('99000000').justifyContent(FlexAlign.Center).onClick(() => { this.showSellModal = false; })
}
if (this.showSwapModal) {
Column() { this.swapModalBuilder() }.width('100%').height('100%').backgroundColor('99000000').justifyContent(FlexAlign.Center).onClick(() => { this.showSwapModal = false; })
}
if (this.showDeleteModal) {
Column() { this.deleteModalBuilder() }.width('100%').height('100%').backgroundColor('99000000').justifyContent(FlexAlign.Center).onClick(() => { this.showDeleteModal = false; })
}
}.width('100%').height('100%').backgroundColor(PALETTE.bg)
}
}
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
3
0- 0
已为社区贡献46条内容
所有评论(0)