HarmonyOS 6效果实现：弹窗抽屉 Modal 开发教程，Stack 遮罩层实现底部滑出表单弹窗，点击外部关闭与弹窗层级 zIndex 控制详解

qq63160596

451人浏览 · 2026-08-23 11:33:20

qq63160596 · 2026-08-23 11:33:20 发布

从禧玛诺旗舰钓竿到达瓦水滴轮，从岩波海钓竿到探鱼器，从碳素支架到钓鱼箱——本文以一套完整的ArkTS湖畔渔具社应用为例，深度解析HarmonyOS ArkTS API 24在自然水岸风二手交易场景下的双Tab嵌套架构、14粒子漂浮动效、S/A/B/C四级稀有度分级、湖蓝浪花白详情头、以竿换竿交换帖等核心技术实现。

一、引言

钓竿、渔轮、鱼饵、钓台、配件、探鱼器——这些承载着钓友湖畔梦想的装备，在垂钓热潮下焕发了新的生机。从禧玛诺旗舰钓竿到达瓦水滴轮，从岩波海钓竿到探鱼器，从碳素支架到钓鱼箱，垂钓装备二手交易已经成为一个庞大的湖畔市场。然而垂钓装备交易长期依赖闲鱼、转转等泛平台，缺乏针对钓友的专业化功能——装备稀有度评级、规格尺寸区分（5.4m/3000型/4.5m/11cm/32L等）、以竿换竿交换、钓鱼教程指南等核心需求无法得到满足。

本应用（湖畔渔具社）以"湖蓝+浪花白"自然水岸风为视觉基调，打造集渔具交易、换货交换、图鉴收藏、个人中心四大模块于一体的自然水岸风二手交易与收藏社区。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嵌套是本应用的架构特色——渔具作为主品类，内部再按台钓/路亚/海钓/鱼饵/配件细分，钓友可以快速切换品类浏览。

三、色彩系统：湖蓝+浪花白自然水岸风

自然水岸风的视觉语言应该是"清新、自然、有湖畔的水感"。本应用采用湖蓝+浪花白配色：

主色体系：

#F0F7F7 浪花白：应用根背景、浅色卡片背景——代表浪花的自然质感
#FFFFFF 纯白：卡片背景、弹框背景、底部Tab背景——代表层次
#1B6CA8 湖蓝：主高亮色、Tab选中态、按钮、标签、渐变——代表湖水的深邃与生机
#1B2B3A 深海蓝：头部渐变终点、最深背景——代表深邃
#D9534F 砖红：删除按钮、价格、警告——代表热情与警告
#C9A24B 大地金：价格、等级标签、统计数字、交换弹框头部、Banner渐变——代表温暖的金色
#4DC3C8 湖青：辅助色、Tab下划线、进度条——代表湖水的青色
#6E8B8B 烟灰：辅助文字、未选中Tab、说明文字——代表素雅
#DCE7E7 浅蓝：分割线、进度条背景——代表层次

浅色背景层次（浅色主题下的层次）：

#F0F7F7 浪花白：应用根背景
#FFFFFF 纯白：卡片背景、弹框背景
#E0F0F5 浅湖蓝：高亮卡片背景、选中态背景、标签背景
#E0F5F5 浅湖青：高亮卡片背景、教程步骤背景、选中态背景
#DCE7E7 浅蓝：分割线、进度条背景

渐变设计：

头部：linearGradient angle 135 从#1B6CA8到#1B2B3A——湖蓝到深海蓝的深邃渐变
全部Tab Banner：linearGradient angle 120 从#C9A24B到#E2CE94——大地金到浅金的温暖渐变
台钓Tab横滑大卡：linearGradient angle 160 从#1B6CA8到#1B2B3A——湖蓝到深海蓝
鱼饵Tab对决卡：linearGradient angle 150 从#1B6CA8到#1B2B3A——湖蓝到深海蓝
我的页会员卡：linearGradient angle 120 从#1B6CA8到#1B2B3A——湖蓝到深海蓝
发布出售弹框头部：linearGradient angle 120 从#1B6CA8到#1B2B3A——湖蓝到深海蓝
装备详情弹框头部：linearGradient angle 135 从#C9A24B到#E0F0F5——大地金到浅湖蓝的温暖渐变

湖蓝+浪花白的配色通过浪花白根背景+纯白卡片+浅湖蓝/浅湖青高亮背景营造自然风格的清新水感，湖蓝#1B6CA8作为主高亮和按钮色，大地金#C9A24B作为价格和等级色，砖红#D9534F作为删除和价格色，确保视觉一致性和自然水岸风韵味。本应用是所有主题中渐变使用最多的（7处渐变），营造出丰富的视觉层次。

四、数据模型

应用定义了7个接口，覆盖垂钓装备二手交易全链路：

FishingItem装备（id/name/eng/cat/price/rarity/year/rating/starStr/seller/tag/desc/want/sales/emoji/size）——18款，含中英文名称、分类、稀有度0-100、发布年份、规格尺寸（5.4m/3000型/4.5m/11cm/32L/3m等）、卖家想换等二手交易特色字段
SwapItem交换帖（id/user/avatar/offer/want/time/likes/content/place）——8条交换帖，含我提供/我想换/地点/点赞数
GuideItem钓鱼教程（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套图鉴，含已收/总数/进度百分比
FishingReview圈友点评（id/user/setName/starStr/content）——3条点评
ColorPalette配色（bg/card/blue/cyan/deep/red/gold/sub/line）——9色配色常量

rarity稀有度字段是垂钓装备的特色设计——0-100数值，通过rarityLabel函数映射为四级（S级≥95/A级≥80/B级≥60/C级<60），通过rarityColor函数映射为四色（砖红/橙/湖蓝/湖青），在柱状图和装备详情中直接渲染。size规格字段区分5.4m/3000型/4.5m/11cm/32L/3m等不同尺寸，want卖家想换字段支持以竿换竿交易场景。

五、Tab0 渔具交易（双Tab嵌套）

渔具页是应用的核心，采用底部Tab+顶部Tab双层嵌套架构。顶部6个分类Tab（全部/台钓/路亚/海钓/鱼饵/配件），每个Tab有独立的布局风格：

全部Tab：Banner+双列瀑布

大地金渐变Banner：垂钓装备节春季专场+顶级装备3天限时卖家免服务费+顶级装备/路亚专区标签
全城新上架：双列瀑布布局，左列2件（钓鱼眼镜/钓鱼服防晒），右列1件（钓鱼手套，浅湖青高亮背景），每件含emoji/中文名/英文名/描述/价格/标签

台钓Tab：横滑大卡+稀有度柱状图+捡漏榜

顶级装备专区：3件横滑大卡（禧玛诺旗舰钓竿/达瓦渔轮/岩波海钓竿），湖蓝渐变背景160宽，含emoji/名称/英文+年份/价格+稀有度标签
稀有度排行：3根柱状图（92/85/80），第三根岩波海钓竿用大地金高亮，底部说明"禧玛诺旗舰钓竿以92分稀有度登顶，市面流通极少"
今日捡漏榜：3件排行列表，第1名砖红数字，含排名/emoji/名称+稀有度+卖家想换/价格

路亚Tab：教程时间轴

5套教程时间轴布局（台钓入门指南/路亚技巧手册/海钓入门教程/冬季钓鱼秘笈/鱼饵制作大全），左侧emoji+湖青竖线连接，右侧卡片含名称/下载数/作者+类型+页数/步骤列表（带序号圆点）/点赞+教程可下载

海钓Tab：三列格子+交换建议

配件周边三列网格（9款配件，31%宽度），每件含emoji/名称/系列/价格
配件交换行情：偶数ID配件的交换列表，含emoji/名称+成色/描述/价格（湖蓝）

鱼饵Tab：对决卡+侧栏统计

装备对决：禧玛诺钓竿 VS 达瓦渔轮，两张湖蓝渐变对决卡中间VS标识
左侧3件科技装备列表（碳素支架/钓鱼箱保温/探鱼器），右侧3格统计（12本周渔具成交湖蓝/2.2万渔具总交易额大地金/96%好评率湖蓝）

配件Tab：标签云+紧凑列表

配件周边标签云：6套图鉴（台钓装备/路亚装备/海钓装备/鱼饵/钓鱼配件/科技装备），浅湖蓝背景chip
3件紧凑列表（鱼护网兜/饵料盘双磁/失手绳），第3件浅湖蓝高亮背景，含稀有度彩色标签
底部提示：集齐三大装备可召唤隐藏福利：禧玛诺+达瓦+探鱼器

双层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求购中大地金/¥2.8万累计成交额大地金）。

2. 我的求购清单：3件求购装备（鱼护网兜/钓鱼手套/钓鱼服防晒），每件含emoji/名称+预算+卖家想换/右侧出价中标签（大地金底浅大地金背景）。

3. 常去面交点：5个地点列表（金银湖钓场/江汉路站/洪山广场站/楚河汉街站/线上互换），每个含不同emoji（🚇/🏬/🚌/🏪/📦）+地点名+右侧站点说明（金银湖站/江汉路天桥/洪山转盘/楚河入口/顺丰网点）。

我的页通过求购清单和常去面交点两个特色功能，将垂钓装备二手交易的线下场景融入个人中心，让钓友可以管理自己的求购装备和常去面交地点。

九、弹框体系

本应用有4种弹框，均通过@State布尔值控制显隐，zIndex通过Stack层叠实现：

1. 发布出售弹框（新增）：88%宽76%高，湖蓝渐变头部（🎣发布出售+闲置回血神装不愁卖），滚动内容含：要出售的装备（8个装备chip选择，选中湖蓝底白字）+成色说明（5档chip：全新未拆/仅使用1次/9成新/8成新/有磨损，选中大地金底白字）+出售价格（−/¥价格/＋步进器，步进10元，价格>2000显示"高价好物建议包邮"否则"实惠价更容易出手"）+宝贝描述（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. 14粒子漂浮动效：aboutToAppear生命周期中buildParticles生成14个粒子（🎣/🐟/🪝/🚤/🪱五种emoji随机，大小12-22px，速度0.6-2.0，透明度0.2-0.6），setInterval每80ms调用driftParticles更新x坐标（超出360重置为-20），通过position绝对定位漂浮在页面上，营造湖畔水花纷飞氛围。aboutToDisappear中clearInterval清理定时器避免内存泄漏。

3. S/A/B/C四级稀有度分级：rarity字段0-100数值，通过rarityLabel映射为四级标签（S级≥95/A级≥80/B级≥60/C级<60），通过rarityColor映射为四色（砖红/橙/湖蓝/湖青），在柱状图、装备详情、紧凑列表中统一渲染，数据驱动UI。

4. 湖蓝浪花白头部设计：头部使用湖蓝#1B6CA8到深海蓝#1B2B3A的linearGradient渐变，白色文字和标签在深色背景上形成鲜明对比，营造自然风格的清新水感。

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. 详情数据取值方法：14个detailXxx方法（detailName/detailEng/detailEmoji/detailPrice/detailSize/detailRarity/detailYear/detailSeller/detailTag/detailStar/detailRating/detailDesc/detailWant）通过遍历FISHINGS数组查找selectedFishingId对应的装备字段，在详情弹框中调用，避免在Builder中写复杂的查找逻辑。

9. 步进器价格输入：发布出售弹框的价格采用−/¥价格/＋步进器设计，步进10元，通过@State sellPrice控制，价格>2000时动态显示"高价好物建议包邮"提示，交互友好。

10. Stack层叠弹框管理：4种弹框通过Stack层叠+@State布尔值控制，半透明黑色背景99000000，点击背景关闭，弹框内容居中，zIndex自动由Stack层叠顺序决定，无需手动管理zIndex。

11. 7处渐变设计：本应用是所有主题中渐变使用最多的，头部、全部Tab Banner、台钓Tab横滑大卡、鱼饵Tab对决卡、我的页会员卡、发布出售弹框头部、装备详情弹框头部均使用linearGradient渐变，营造出丰富的视觉层次和自然水岸风韵味。

十一、同类对比

维度	通用二手平台	本应用（湖畔渔具社）
主题	浅色/蓝色为主	湖蓝+浪花白自然水岸风
架构	单Tab或简单分类	双Tab嵌套（底部4+顶部6）
动效	无或简单	14个粒子漂浮动效
稀有度	无或简单星级	0-100数值+S/A/B/C四级+四色映射
以竿换竿	无或简单留言	交换帖+我提供⇄我想换对称布局
钓鱼教程	无或外部链接	5套时间轴布局教程+步骤列表
装备图鉴	无或简单收藏	6套图鉴+进度条+成就墙
求购清单	无	3件求购装备+预算+出价中
常去面交点	无	5个地点+站点说明
弹框	2-3种	4种（发布出售/发起交换/下架/详情）
渐变	无或1处	7处渐变设计

十二、完整代码结构总览

1314.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/selectedFishingId/4个弹框显隐/发布出售表单/发起交换表单/particles粒子）
│   ├── 生命周期（aboutToAppear生成粒子+启动定时器/aboutToDisappear清理定时器）
│   ├── 粒子方法（buildParticles/driftParticles）
│   ├── 详情取值方法（14个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）、HarmonyOS SDK API 24、Node.js 18+、至少8GB内存。

13.2 安装DevEco Studio

DevEco Studio 安装界面

从华为开发者官网下载最新版本，运行安装包，选择安装路径，勾选创建桌面快捷方式，点击安装。

13.3 配置SDK

SDK 配置界面

首次启动后进入File > Settings > HarmonyOS SDK，勾选API 24及以上版本，点击Apply等待下载完成。

13.4 创建项目

创建项目界面

选择Create Project > Empty Ability，配置项目名称、包名、保存路径，选择Compile SDK为API 24，点击Finish。

13.5 运行应用

运行应用界面

将1316.ets代码替换到entry/src/main/ets/pages/Index.ets，连接HarmonyOS设备或启动模拟器，点击运行按钮预览。

13.6 预览调试

预览调试界面

DevEco Studio提供实时预览功能，编辑器右侧打开Previewer面板，支持多设备尺寸预览、深色模式切换、组件树inspect等调试能力。

十四、总结展望

本文完整解析了基于HarmonyOS ArkTS API 24的湖畔渔具社应用，从湖蓝+浪花白自然水岸配色系统、双Tab嵌套架构、装备数据模型（含稀有度0-100/规格尺寸/卖家想换等特色字段）、渔具交易六大品类独立布局（全部双列瀑布/台钓横滑大卡+稀有度柱状图+捡漏榜/路亚教程时间轴/海钓三列网格/鱼饵对决卡+侧栏统计/配件标签云+紧凑列表）、换货以竿换竿交换帖、图鉴收藏进度条、个人中心求购清单+常去面交点，到4种弹框体系、14粒子漂浮动效、S/A/B/C四级稀有度分级、湖蓝浪花白头部、7处渐变设计、全局纯函数工具集、详情数据取值方法，展现了ArkTS在自然水岸风二手交易场景下的完整工程实践。

核心价值：

湖蓝+浪花白自然水岸配色：自然风格的清新水感，湖蓝高亮营造湖畔氛围
双Tab嵌套架构：底部4Tab+顶部6Tab，双层分类浏览体验
14粒子漂浮动效：setInterval驱动emoji粒子漂浮，aboutToDisappear清理定时器
S/A/B/C四级稀有度分级：0-100数值→四级标签→四色映射，数据驱动UI
以竿换竿交换帖：我提供⇄我想换对称布局+热度标签动态生成+钓场面交
装备图鉴进度管理：6套图鉴+双色进度条+成就墙，收藏系统化
7处渐变设计：所有主题中渐变使用最多，营造丰富视觉层次
全局纯函数工具集：10+纯函数抽离数据到UI映射逻辑，代码可维护

未来可扩展：

接入真实垂钓装备数据库，自动识别装备类型和规格，替代手动分类
粒子动效接入设备陀螺仪，随手机倾斜方向漂移，增强沉浸感
稀有度接入真实成交数据和市场行情，动态更新装备稀有度评分
以竿换竿接入智能匹配算法，根据装备类型和价值推荐交换对象
装备图鉴接入装备扫码识别，自动更新装备收藏记录
接入钓点推荐功能，根据装备类型推荐适合的垂钓地点
求购清单接入推送通知，有匹配装备时自动提醒钓友

湖畔渔具社，让每一支钓竿都找到懂它的钓友，让湖蓝流转、浪花生香。

附录：完整源码

// ============================================================
// 1314.ets - 湖畔渔具社
// 场景：垂钓装备/钓竿/渔轮/鱼饵/钓台/配件的二手交易与收藏社区（自然水岸风）
// 风格：湖蓝 #1B6CA8 + 浪花白 #F0F7F7 自然水岸风
// 底部Tab：渔具 / 换货 / 图鉴 / 我的
// 顶部Tab：全部 / 台钓 / 路亚 / 海钓 / 鱼饵 / 配件
// 弹框：发布出售(新增) / 发起交换(新增) / 下架(删除) / 装备详情(详情)
// ============================================================
// ---------------- 配色 ----------------
interface ColorPalette {
bg: string;
card: string;
blue: string;
cyan: string;
deep: string;
red: string;
gold: string;
sub: string;
line: string;
}
const PALETTE: ColorPalette = {
bg: '#F0F7F7',
card: '#FFFFFF',
blue: '#1B6CA8',
cyan: '#4DC3C8',
deep: '#1B2B3A',
red: '#D9534F',
gold: '#C9A24B',
sub: '#6E8B8B',
line: '#DCE7E7'
};
// ---------------- 通用结构 ----------------
interface TabItem { label: string; icon: string; }
interface ParticleItem { x: number; emoji: string; size: number; speed: number; opacity: number; }
// ---------------- 装备条目 ----------------
interface FishingItem {
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; size: string;
}
// ---------------- 交换帖 ----------------
interface SwapItem {
id: number; user: string; avatar: string; offer: string; want: string;
time: string; likes: number; content: string; place: string;
}
// ---------------- 教程/指南 ----------------
interface GuideItem {
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 FishingReview {
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 FISHINGS: FishingItem[] = [
{ id: 1, name: '禧玛诺 旗舰钓竿', eng: 'Shimano Flagship Rod', cat: 'retired', price: 5800, rarity: 92, year: 2018, rating: 5.0, starStr: '⭐⭐⭐⭐⭐', seller: '钓鱼发烧友', tag: '碳纤维', desc: '禧玛诺旗舰台钓竿，碳纤维材质，超轻手感，腰力强劲，长度5.4米，成色极佳，全套包装。', want: '换 达瓦钓竿', sales: 2, emoji: '🎣', size: '5.4m' },
{ id: 2, name: '达瓦 渔轮', eng: 'Daiwa Reel', cat: 'retired', price: 2600, rarity: 85, year: 2020, rating: 4.9, starStr: '⭐⭐⭐⭐⭐', seller: '路亚玩家', tag: '磁力刹车', desc: '达瓦水滴轮，磁力刹车系统，抛投顺滑，泄力强劲，适合路亚和远投，成色极佳。', want: '换 禧玛诺轮', sales: 5, emoji: '🎡', size: '3000型' },
{ id: 3, name: '岩波 海钓竿', eng: 'Iwaki Sea Rod', cat: 'retired', price: 3800, rarity: 80, year: 2016, rating: 4.8, starStr: '⭐⭐⭐⭐✨', seller: '海钓老船长', tag: '碳素纤维', desc: '岩波海钓竿，碳素纤维材质，抗腐蚀，韧性好，适合礁石和船钓，全套配节。', want: '换 台钓竿', sales: 3, emoji: '🚤', size: '4.5m' },
{ id: 4, name: '台钓入门指南', eng: 'Fishing Guide', cat: 'moc', price: 29, rarity: 30, year: 2025, rating: 4.9, starStr: '⭐⭐⭐⭐⭐', seller: '钓鱼教练', tag: '新手必读', desc: '从调漂到鱼饵配方，完全图解台钓入门指南，让你从零开始学会钓鱼。', want: '可换鱼饵', sales: 156, emoji: '📖', size: '电子版' },
{ id: 5, name: '路亚技巧手册', eng: 'Lure Fishing', cat: 'moc', price: 39, rarity: 40, year: 2024, rating: 4.8, starStr: '⭐⭐⭐⭐✨', seller: '路亚大神', tag: '进阶技法', desc: '路亚技巧手册，涵盖假饵选择、抛投手法、操控节奏，图文并茂，路亚爱好者必读。', want: '换 假饵', sales: 98, emoji: '🐠', size: '电子版' },
{ id: 6, name: '活饵 红虫', eng: 'Red Worms', cat: 'moc', price: 25, rarity: 15, year: 2025, rating: 4.6, starStr: '⭐⭐⭐⭐', seller: '鱼饵专卖', tag: '冬季饵料', desc: '鲜活红虫，蛋白质丰富，鱼儿最爱，冬季钓鱼爆护必备，一盒100条。', want: '换 商品饵', sales: 210, emoji: '🪱', size: '100条' },
{ id: 7, name: '路亚假饵 米诺', eng: 'Minnow Lure', cat: 'fig', price: 45, rarity: 25, year: 2024, rating: 4.7, starStr: '⭐⭐⭐⭐', seller: '路亚装备店', tag: '沉水型', desc: '米诺假饵，沉水型，泳姿逼真，仿生涂装，适合钓翘嘴和黑鱼，成色极佳。', want: '换 亮片', sales: 30, emoji: '🐟', size: '11cm' },
{ id: 8, name: '钓鱼伞 加厚', eng: 'Fishing Umbrella', cat: 'fig', price: 120, rarity: 20, year: 2023, rating: 4.6, starStr: '⭐⭐⭐⭐', seller: '垂钓用品', tag: '防晒防雨', desc: '加厚钓鱼伞，防晒防雨，万向调节，伞下空间大，钓鱼防晒必备，成色极佳。', want: '换 钓椅', sales: 20, emoji: '☂️', size: '2.2m' },
{ id: 9, name: '折叠钓椅', eng: 'Folding Chair', cat: 'fig', price: 180, rarity: 35, year: 2024, rating: 4.7, starStr: '⭐⭐⭐⭐', seller: '钓鱼装备', tag: '带伞架', desc: '折叠钓椅，铝合金骨架，带伞架和炮台架，舒适耐用，钓鱼必备。', want: '换 钓台', sales: 15, emoji: '🪑', size: '加宽' },
{ id: 10, name: '碳素支架', eng: 'Carbon Rod Holder', cat: 'tech', price: 160, rarity: 30, year: 2024, rating: 4.8, starStr: '⭐⭐⭐⭐✨', seller: '钓鱼装备', tag: '超轻便携', desc: '碳素支架，超轻便携，可伸缩调节，支撑钓竿稳定，台钓必备。', want: '换 饵料盘', sales: 25, emoji: '🪝', size: '3m' },
{ id: 11, name: '钓鱼箱 保温', eng: 'Fishing Box', cat: 'tech', price: 280, rarity: 40, year: 2023, rating: 4.7, starStr: '⭐⭐⭐⭐', seller: '钓鱼装备', tag: '多功能', desc: '多功能钓鱼箱，保温保冷，可坐可储物，带侧袋和饵料盘，超实用。', want: '换 钓伞', sales: 10, emoji: '🧰', size: '32L' },
{ id: 12, name: '探鱼器', eng: 'Fish Finder', cat: 'tech', price: 680, rarity: 55, year: 2022, rating: 4.8, starStr: '⭐⭐⭐⭐✨', seller: '科技钓鱼', tag: '无线探鱼', desc: '探鱼器，无线声呐，可探测水深和鱼群，手机APP连接，钓鱼效率翻倍。', want: '换 钓竿', sales: 5, emoji: '📡', size: '便携' },
{ id: 13, name: '鱼护 网兜', eng: 'Fish Net', cat: 'street', price: 60, rarity: 20, year: 2024, rating: 4.5, starStr: '⭐⭐⭐⭐', seller: '钓鱼配件', tag: '防挂鱼', desc: '鱼护网兜，防挂鱼设计，涂胶材质，不伤鱼，大容量，钓鱼必备。', want: '换 鱼钩', sales: 50, emoji: '🕸️', size: '50cm' },
{ id: 14, name: '饵料盘 双磁', eng: 'Bait Tray', cat: 'street', price: 35, rarity: 15, year: 2025, rating: 4.6, starStr: '⭐⭐⭐⭐', seller: '钓鱼配件', tag: '开饵必备', desc: '双磁饵料盘，强磁吸附，开饵方便，拉饵效果好，钓鱼人必备。', want: '换 鱼线', sales: 40, emoji: '🍽️', size: '标准' },
{ id: 15, name: '失手绳', eng: 'Safety Rope', cat: 'street', price: 20, rarity: 10, year: 2025, rating: 4.5, starStr: '⭐⭐⭐⭐', seller: '钓鱼配件', tag: '防跑鱼', desc: '钓鱼失手绳，弹性好，防止鱼竿被拖走，夜光设计，超实用。', want: '换 鱼钩', sales: 60, emoji: '🪢', size: '3m' },
{ id: 16, name: '钓鱼手套', eng: 'Fishing Gloves', cat: 'classic', price: 40, rarity: 15, year: 2024, rating: 4.6, starStr: '⭐⭐⭐⭐', seller: '钓鱼装备', tag: '防刺防水', desc: '钓鱼手套，防刺防水，透气耐磨，拉鱼护手，钓鱼人必备。', want: '换 鱼护', sales: 30, emoji: '🧤', size: '均码' },
{ id: 17, name: '钓鱼眼镜', eng: 'Fishing Glasses', cat: 'classic', price: 90, rarity: 30, year: 2024, rating: 4.7, starStr: '⭐⭐⭐⭐', seller: '钓鱼装备', tag: '偏光防蓝光', desc: '钓鱼眼镜，偏光防蓝光，看漂清晰，减轻眼睛疲劳，户外垂钓必备。', want: '换 帽子', sales: 25, emoji: '🕶️', size: '均码' },
{ id: 18, name: '钓鱼服 防晒', eng: 'Fishing Shirt', cat: 'classic', price: 100, rarity: 20, year: 2024, rating: 4.5, starStr: '⭐⭐⭐⭐', seller: '钓鱼服饰', tag: '速干透气', desc: '防晒钓鱼服，UPF50+，速干透气，长袖连帽设计，夏季钓鱼防晒必备。', want: '换 手套', sales: 35, emoji: '👕', size: 'L码' }
];
// ---------------- 交换帖数据（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 GUIDES: GuideItem[] = [
{ id: 1, name: '台钓入门指南', type: '台钓', pages: 40, author: '钓鱼教练', likes: 342, downloads: 2100, emoji: '📖', steps: ['调漂技巧 1-15页', '鱼饵配方 16-25页', '钓位选择 26-40页'] },
{ id: 2, name: '路亚技巧手册', type: '路亚', pages: 35, author: '路亚大神', likes: 276, downloads: 1580, emoji: '🐠', steps: ['假饵选择 1-10页', '抛投手法 11-20页', '操控节奏 21-35页'] },
{ id: 3, name: '海钓入门教程', type: '海钓', pages: 50, author: '海钓老船长', likes: 415, downloads: 3300, emoji: '🚤', steps: ['钓点选择 1-15页', '潮汐规律 16-30页', '船钓技巧 31-50页'] },
{ id: 4, name: '冬季钓鱼秘笈', type: '冬钓', pages: 30, author: '冬钓高手', likes: 198, downloads: 1260, emoji: '❄️', steps: ['冬季钓位 1-10页', '饵料搭配 11-20页', '线组选择 21-30页'] },
{ id: 5, name: '鱼饵制作大全', type: '饵料', pages: 45, author: '鱼饵专家', likes: 233, downloads: 1420, emoji: '🪱', steps: ['基础饵配比 1-15页', '状态饵调整 16-30页', '味型调配 31-45页'] }
];
// ---------------- 配件/周边数据（9条写死） ----------------
const ACCESSORIES: AccessoryItem[] = [
{ id: 1, name: '钓鱼线', series: '尼龙', price: 30, condition: '全新', seller: '钓鱼配件', emoji: '🧵', desc: '切水快，拉力强' },
{ id: 2, name: '鱼钩套装', series: '伊势尼', price: 25, condition: '全新', seller: '钓鱼配件', emoji: '🪝', desc: '锋利耐用，不易变形' },
{ id: 3, name: '浮漂', series: '纳米', price: 40, condition: '9成新', seller: '钓鱼配件', emoji: '🎈', desc: '灵敏度高，醒目' },
{ id: 4, name: '铅皮座', series: '快速', price: 15, condition: '全新', seller: '钓鱼配件', emoji: '⚖️', desc: '快速更换，不伤线' },
{ id: 5, name: '饵料盆', series: '加厚', price: 20, condition: '全新', seller: '钓鱼配件', emoji: '🥣', desc: '开饵方便，易清洗' },
{ id: 6, name: '失手绳', series: '夜光', price: 20, condition: '全新', seller: '钓鱼配件', emoji: '🪢', desc: '弹力好，防跑鱼' },
{ id: 7, name: '钓鱼帽', series: '防晒', price: 35, condition: '全新', seller: '钓鱼服饰', emoji: '🧢', desc: '防晒透气，可调节' },
{ id: 8, name: '鱼护包', series: '防水', price: 55, condition: '全新', seller: '钓鱼装备', emoji: '🎒', desc: '防水耐磨，大容量' },
{ id: 9, name: '剪刀', series: '多功能', price: 18, condition: '全新', seller: '钓鱼配件', emoji: '✂️', desc: '剪线锋利，带失手绳' }
];
// ---------------- 图鉴收藏数据（6条写死） ----------------
const COLLECTIONS: CollectionItem[] = [
{ id: 1, name: '台钓装备', series: 'Taiwan', owned: 5, total: 12, rate: 42, emoji: '🎣' },
{ id: 2, name: '路亚装备', series: 'Lure', owned: 3, total: 8, rate: 38, emoji: '🐟' },
{ id: 3, name: '海钓装备', series: 'Sea', owned: 4, total: 10, rate: 40, emoji: '🚤' },
{ id: 4, name: '鱼饵', series: 'Bait', owned: 6, total: 15, rate: 40, emoji: '🪱' },
{ id: 5, name: '钓鱼配件', series: 'Accessories', owned: 8, total: 20, rate: 40, emoji: '🪝' },
{ id: 6, name: '科技装备', series: 'Tech', owned: 2, total: 6, rate: 33, emoji: '📡' }
];
// ---------------- 点评数据（3条写死） ----------------
const FISHING_REVIEWS: FishingReview[] = [
{ 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[] = [66, 54, 72, 58, 112, 146, 138];
// ---------------- 弹框选项 ----------------
const CONDITION_OPTIONS: string[] = ['全新未拆', '仅使用1次', '9成新', '8成新', '有磨损'];
const PLACES: string[] = ['金银湖钓场', '江汉路站', '洪山广场站', '楚河汉街站', '线上互换'];
// ---------------- 全局纯函数 ----------------
function catColor(cat: string): string {
if (cat === 'retired') return '#1B6CA8';
if (cat === 'moc') return '#7C4DFF';
if (cat === 'fig') return '#D9534F';
if (cat === 'tech') return '#C9A24B';
if (cat === 'street') return '#4DC3C8';
return '#1B6CA8';
}
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 'S级';
if (r >= 80) return 'A级';
if (r >= 60) return 'B级';
return 'C级';
}
function rarityColor(r: number): string {
if (r >= 95) return '#D9534F';
if (r >= 80) return '#FF8A00';
if (r >= 60) return '#1B6CA8';
return '#4DC3C8';
}
function tradeBarHeight(v: number): string {
return Math.round(v / 146 * 96).toString() + 'vp';
}
function rateColor(r: number): string {
if (r >= 55) return '#1B6CA8';
if (r >= 40) return '#C9A24B';
return '#D9534F';
}
function retiredSets(): FishingItem[] { return [FISHINGS[0], FISHINGS[1], FISHINGS[2]]; }
function mocSets(): FishingItem[] { return [FISHINGS[3], FISHINGS[4], FISHINGS[5]]; }
function figSets(): FishingItem[] { return [FISHINGS[6], FISHINGS[7], FISHINGS[8]]; }
function techSets(): FishingItem[] { return [FISHINGS[9], FISHINGS[10], FISHINGS[11]]; }
function streetSets(): FishingItem[] { return [FISHINGS[12], FISHINGS[13], FISHINGS[14]]; }
function classicSets(): FishingItem[] { return [FISHINGS[15], FISHINGS[16], FISHINGS[17]]; }
function cityLeft(): FishingItem[] { return [FISHINGS[16], FISHINGS[17]]; }
function cityRight(): FishingItem[] { return [FISHINGS[15]]; }
function hotSets(): FishingItem[] { return [FISHINGS[3], FISHINGS[5], FISHINGS[16], FISHINGS[17], FISHINGS[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 selectedFishingId: number = 1;
@State showSellModal: boolean = false;
@State showSwapModal: boolean = false;
@State showDeleteModal: boolean = false;
@State showDetailModal: boolean = false;
@State sellFishingIdx: number = 0;
@State sellCondIdx: number = 2;
@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 < FISHINGS.length; i++) if (FISHINGS[i].id === this.selectedFishingId) return FISHINGS[i].name; return ''; }
detailEng(): string { for (let i = 0; i < FISHINGS.length; i++) if (FISHINGS[i].id === this.selectedFishingId) return FISHINGS[i].eng; return ''; }
detailEmoji(): string { for (let i = 0; i < FISHINGS.length; i++) if (FISHINGS[i].id === this.selectedFishingId) return FISHINGS[i].emoji; return '🎣'; }
detailPrice(): string { for (let i = 0; i < FISHINGS.length; i++) if (FISHINGS[i].id === this.selectedFishingId) return '¥' + FISHINGS[i].price.toString(); return ''; }
detailSize(): string { for (let i = 0; i < FISHINGS.length; i++) if (FISHINGS[i].id === this.selectedFishingId) return FISHINGS[i].size; return ''; }
detailRarity(): string { for (let i = 0; i < FISHINGS.length; i++) if (FISHINGS[i].id === this.selectedFishingId) return FISHINGS[i].rarity.toString(); return ''; }
detailYear(): string { for (let i = 0; i < FISHINGS.length; i++) if (FISHINGS[i].id === this.selectedFishingId) return FISHINGS[i].year.toString(); return ''; }
detailSeller(): string { for (let i = 0; i < FISHINGS.length; i++) if (FISHINGS[i].id === this.selectedFishingId) return FISHINGS[i].seller; return ''; }
detailTag(): string { for (let i = 0; i < FISHINGS.length; i++) if (FISHINGS[i].id === this.selectedFishingId) return FISHINGS[i].tag; return ''; }
detailStar(): string { for (let i = 0; i < FISHINGS.length; i++) if (FISHINGS[i].id === this.selectedFishingId) return FISHINGS[i].starStr; return ''; }
detailRating(): string { for (let i = 0; i < FISHINGS.length; i++) if (FISHINGS[i].id === this.selectedFishingId) return FISHINGS[i].rating.toFixed(1) + '分'; return ''; }
detailDesc(): string { for (let i = 0; i < FISHINGS.length; i++) if (FISHINGS[i].id === this.selectedFishingId) return FISHINGS[i].desc; return ''; }
detailWant(): string { for (let i = 0; i < FISHINGS.length; i++) if (FISHINGS[i].id === this.selectedFishingId) return FISHINGS[i].want; return ''; }
// ---------------- 头部 ----------------
@Builder
headerBuilder() {
Column() {
Row() {
Column() {
Text('🎣 湖畔渔具社').fontSize(22).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
Text('淘好物 · 换心头好 · 去钓鱼').fontSize(11).fontColor('#B8E0E2').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('#1B6CA8').backgroundColor('#FFFFFF').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('#A2D4D6').layoutWeight(1)
Text('🧰 我的求购').fontSize(11).fontColor('#1B6CA8').backgroundColor('#FFFFFF').borderRadius(10).padding({ left: 10, right: 10, top: 4, bottom: 4 })
}.width('100%').padding({ left: 16, right: 16, bottom: 12 })
}
.linearGradient({ angle: 135, colors: [['#1B6CA8', 0], ['#1B2B3A', 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 ? '#1B6CA8' : '#6E8B8B').fontWeight(this.currentTopTab === idx ? FontWeight.Bold : FontWeight.Normal).margin({ top: 2 })
if (this.currentTopTab === idx) {
Divider().width(16).strokeWidth(3).color('#4DC3C8').borderRadius(2).margin({ top: 4 })
} else {
Divider().width(16).strokeWidth(3).color('#F0F7F7').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('#1B6CA8')
Text('顶级装备 3天限时 · 卖家免服务费').fontSize(12).fontColor('#6E8B8B').margin({ top: 6 })
Row({ space: 10 }) {
Text('🏆 顶级装备').fontSize(11).fontColor('#1B6CA8').backgroundColor('#FFFFFF').borderRadius(12).padding({ left: 10, right: 10, top: 4, bottom: 4 })
Text('🐟 路亚专区').fontSize(11).fontColor('#1B6CA8').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('#1B6CA8').width('100%')
Row({ space: 10 }) {
Column({ space: 10 }) {
ForEach(cityLeft(), (t: FishingItem) => {
Column() {
Text(t.emoji).fontSize(34).margin({ top: 16 })
Text(t.name).fontSize(14).fontWeight(FontWeight.Bold).fontColor('#1B6CA8').margin({ top: 8 })
Text(t.eng).fontSize(9).fontColor('#6E8B8B').margin({ top: 2 })
Text(t.desc).fontSize(11).fontColor('#6E8B8B').margin({ top: 8 }).maxLines(3).textOverflow({ overflow: TextOverflow.Ellipsis })
Row({ space: 6 }) {
Text('¥' + t.price.toString()).fontSize(15).fontWeight(FontWeight.Bold).fontColor('#D9534F')
Text(t.tag).fontSize(9).fontColor('#1B6CA8').backgroundColor('#E0F0F5').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.selectedFishingId = t.id; this.showDetailModal = true; })
}, (t: FishingItem) => 'cl' + t.id.toString())
}.layoutWeight(1)
Column({ space: 10 }) {
ForEach(cityRight(), (t: FishingItem) => {
Column() {
Text(t.emoji).fontSize(34).margin({ top: 24 })
Text(t.name).fontSize(14).fontWeight(FontWeight.Bold).fontColor('#1B6CA8').margin({ top: 8 })
Text(t.eng).fontSize(9).fontColor('#6E8B8B').margin({ top: 2 })
Text(t.desc).fontSize(11).fontColor('#6E8B8B').margin({ top: 10 }).maxLines(4).textOverflow({ overflow: TextOverflow.Ellipsis })
Row({ space: 6 }) {
Text('¥' + t.price.toString()).fontSize(15).fontWeight(FontWeight.Bold).fontColor('#D9534F')
Text(t.starStr).fontSize(10)
}.margin({ top: 12, bottom: 20 })
}.width('100%').backgroundColor('#E0F5F5').borderRadius(14).alignItems(HorizontalAlign.Start).padding({ left: 14, right: 14 })
.onClick(() => { this.selectedFishingId = t.id; this.showDetailModal = true; })
}, (t: FishingItem) => '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('#1B6CA8').width('100%')
Scroll() {
Row({ space: 12 }) {
ForEach(retiredSets(), (t: FishingItem) => {
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.year.toString() + '年').fontSize(9).fontColor('#B8E0E2').margin({ top: 4 })
Row({ space: 6 }) {
Text('¥' + t.price.toString()).fontSize(16).fontWeight(FontWeight.Bold).fontColor('#E2CE94')
Text(rarityLabel(t.rarity)).fontSize(10).fontColor('#1B6CA8').backgroundColor('#C9A24B').borderRadius(8).padding({ left: 6, right: 6, top: 2, bottom: 2 })
}.margin({ top: 10, bottom: 18 })
}.width(160).linearGradient({ angle: 160, colors: [['#1B6CA8', 0], ['#1B2B3A', 1]] }).borderRadius(16).alignItems(HorizontalAlign.Center)
.onClick(() => { this.selectedFishingId = t.id; this.showDetailModal = true; })
}, (t: FishingItem) => '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('#1B6CA8').width('100%')
Row({ space: 6 }) {
ForEach(retiredSets(), (t: FishingItem, i: number) => {
Column({ space: 5 }) {
Text(t.rarity.toString()).fontSize(9).fontColor('#1B6CA8')
Column().width(34).height((t.rarity).toString() + 'vp').backgroundColor(i === 2 ? '#C9A24B' : '#1B6CA8').borderRadius({ topLeft: 5, topRight: 5 })
Text(t.year.toString() + '年').fontSize(9).fontColor('#6E8B8B')
}.alignItems(HorizontalAlign.Center).layoutWeight(1)
}, (t: FishingItem, i: number) => 'rb' + i.toString() + t.id.toString())
}.width('100%').justifyContent(FlexAlign.Center).alignItems(VerticalAlign.Bottom).padding({ top: 12 })
Text('禧玛诺旗舰钓竿以92分稀有度登顶，市面流通极少').fontSize(10).fontColor('#6E8B8B').margin({ top: 8 })
}.width('100%').backgroundColor('#FFFFFF').borderRadius(14).padding(14).margin({ left: 14, right: 14 })
Column() {
Text('🕵️ 今日捡漏榜').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#1B6CA8').width('100%').margin({ bottom: 8 })
ForEach(retiredSets(), (t: FishingItem, i: number) => {
Row({ space: 10 }) {
Text((i + 1).toString()).fontSize(14).fontWeight(FontWeight.Bold).fontColor(i === 0 ? '#D9534F' : '#6E8B8B').width(20)
Text(t.emoji).fontSize(18)
Column() {
Text(t.name).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#1B6CA8')
Text(rarityLabel(t.rarity) + ' · ' + t.want).fontSize(10).fontColor('#6E8B8B').margin({ top: 2 })
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('¥' + t.price.toString()).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#D9534F')
}.width('100%').padding({ top: 8, bottom: 8 }).onClick(() => { this.selectedFishingId = t.id; this.showDetailModal = true; })
}, (t: FishingItem, 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('#1B6CA8').width('100%').margin({ top: 10, bottom: 12 })
ForEach(GUIDES, (m: GuideItem, i: number) => {
Row({ space: 12 }) {
Column({ space: 4 }) {
Text(m.emoji).fontSize(20)
if (i < GUIDES.length - 1) {
Column().width(2).layoutWeight(1).backgroundColor('#4DC3C8').margin({ top: 4 })
}
}.width(40).alignItems(HorizontalAlign.Center)
Column({ space: 6 }) {
Row({ space: 8 }) {
Text(m.name).fontSize(14).fontWeight(FontWeight.Bold).fontColor('#1B6CA8').layoutWeight(1)
Text('⬇ ' + m.downloads.toString()).fontSize(10).fontColor('#1B6CA8')
}.width('100%')
Text('by ' + m.author + ' · ' + m.type + ' · ' + m.pages.toString() + '页').fontSize(10).fontColor('#6E8B8B')
Column({ space: 5 }) {
ForEach(m.steps, (s: string, si: number) => {
Row({ space: 8 }) {
Text((si + 1).toString()).fontSize(9).fontWeight(FontWeight.Bold).fontColor('#1B6CA8').backgroundColor('#F0F7F7').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('#F0F7F7').borderRadius(10).padding(10)
Row({ space: 8 }) {
Text('❤️ ' + m.likes.toString()).fontSize(10).fontColor('#D9534F')
Text(m.emoji + ' 教程可下载').fontSize(10).fontColor('#1B6CA8').layoutWeight(1).textAlign(TextAlign.End)
}.width('100%')
}.layoutWeight(1).backgroundColor(i === 1 ? '#E0F5F5' : '#FFFFFF').borderRadius(14).padding(12).margin({ bottom: 14 })
}.width('100%').alignItems(VerticalAlign.Top)
}, (m: GuideItem, 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('#1B6CA8').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('#1B6CA8').margin({ top: 6 }).maxLines(1)
Text(f.series).fontSize(8).fontColor('#6E8B8B').margin({ top: 2 })
Text('¥' + f.price.toString()).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#D9534F').margin({ top: 4, bottom: 12 })
}.width('31%').backgroundColor('#FFFFFF').borderRadius(12).alignItems(HorizontalAlign.Center).margin({ bottom: 8 })
.onClick(() => { this.selectedFishingId = 7 + f.id % 3; this.showDetailModal = true; })
}, (f: AccessoryItem) => 'fg' + f.id.toString())
}.width('100%')
Column() {
Text('🤝 配件交换行情').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#1B6CA8').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('#1B6CA8')
Text(f.desc).fontSize(10).fontColor('#6E8B8B')
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('¥' + f.price.toString()).fontSize(12).fontWeight(FontWeight.Bold).fontColor('#1B6CA8')
}.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('#1B6CA8').width('100%')
Row({ space: 10 }) {
Column() {
Text('🎣').fontSize(34).margin({ top: 14 })
Text('禧玛诺钓竿').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').margin({ top: 6 })
Text('2018年 · 现价¥5800').fontSize(10).fontColor('#B8E0E2').margin({ top: 4, bottom: 14 })
}.layoutWeight(1).linearGradient({ angle: 150, colors: [['#1B6CA8', 0], ['#1B2B3A', 1]] }).borderRadius(14).alignItems(HorizontalAlign.Center)
Column() {
Text('VS').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#1B6CA8')
Text('本周').fontSize(9).fontColor('#6E8B8B')
}.alignItems(HorizontalAlign.Center)
Column() {
Text('🎡').fontSize(34).margin({ top: 14 })
Text('达瓦渔轮').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').margin({ top: 6 })
Text('2020年 · 现价¥2600').fontSize(10).fontColor('#B8E0E2').margin({ top: 4, bottom: 14 })
}.layoutWeight(1).linearGradient({ angle: 150, colors: [['#6E8B8B', 0], ['#1B2B3A', 1]] }).borderRadius(14).alignItems(HorizontalAlign.Center)
}.width('100%')
Row({ space: 10 }) {
Column({ space: 10 }) {
ForEach(techSets(), (t: FishingItem) => {
Row({ space: 10 }) {
Text(t.emoji).fontSize(22)
Column({ space: 2 }) {
Text(t.name).fontSize(12).fontWeight(FontWeight.Bold).fontColor('#1B6CA8')
Text(t.tag + ' · ' + t.size).fontSize(10).fontColor('#6E8B8B')
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('¥' + t.price.toString()).fontSize(12).fontWeight(FontWeight.Bold).fontColor('#D9534F')
}.width('100%').backgroundColor('#FFFFFF').borderRadius(12).padding(12).onClick(() => { this.selectedFishingId = t.id; this.showDetailModal = true; })
}, (t: FishingItem) => 'tc' + t.id.toString())
}.layoutWeight(1)
Column({ space: 10 }) {
Column({ space: 4 }) {
Text('12').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#1B6CA8')
Text('本周渔具成交').fontSize(9).fontColor('#6E8B8B')
}.width('100%').backgroundColor('#E0F0F5').borderRadius(12).padding({ top: 10, bottom: 10 }).alignItems(HorizontalAlign.Center)
Column({ space: 4 }) {
Text('2.2万').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#C9A24B')
Text('渔具总交易额').fontSize(9).fontColor('#6E8B8B')
}.width('100%').backgroundColor('#F0EAD8').borderRadius(12).padding({ top: 10, bottom: 10 }).alignItems(HorizontalAlign.Center)
Column({ space: 4 }) {
Text('96%').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#1B6CA8')
Text('好评率').fontSize(9).fontColor('#6E8B8B')
}.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('#1B6CA8').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('#1B6CA8').backgroundColor('#E0F0F5').borderRadius(12).padding({ left: 10, right: 10, top: 6, bottom: 6 }).margin(4)
}, (c: CollectionItem) => 'ccoll' + c.id.toString())
}.width('100%')
ForEach(streetSets(), (t: FishingItem) => {
Row({ space: 12 }) {
Text(t.emoji).fontSize(24)
Column({ space: 2 }) {
Row({ space: 6 }) {
Text(t.name).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#1B6CA8')
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('#6E8B8B').maxLines(1).textOverflow({ overflow: TextOverflow.Ellipsis })
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('¥' + t.price.toString()).fontSize(13).fontWeight(FontWeight.Bold).fontColor('#D9534F')
}.width('100%').backgroundColor(t.id === 15 ? '#E0F0F5' : '#FFFFFF').borderRadius(12).padding(12).onClick(() => { this.selectedFishingId = t.id; this.showDetailModal = true; })
}, (t: FishingItem) => 'st' + t.id.toString())
Text('💬 集齐三大装备可召唤隐藏福利：禧玛诺+达瓦+探鱼器').fontSize(10).fontColor('#6E8B8B').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('#1B6CA8'); Text('在交换中').fontSize(10).fontColor('#6E8B8B') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 4 }) { Text('42').fontSize(20).fontWeight(FontWeight.Bold).fontColor('#C9A24B'); Text('今日成交').fontSize(10).fontColor('#6E8B8B') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 4 }) { Text('98%').fontSize(20).fontWeight(FontWeight.Bold).fontColor('#1B6CA8'); Text('面交好评').fontSize(10).fontColor('#6E8B8B') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 6 }) { Text('🤝 发交换').fontSize(12).fontColor('#FFFFFF').backgroundColor('#1B6CA8').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('#1B6CA8')
Text(swapBadge(s.likes)).fontSize(8).fontColor('#C9A24B').backgroundColor('#F0EAD8').borderRadius(6).padding({ left: 5, right: 5, top: 1, bottom: 1 })
}
Text(s.time + ' · ' + s.place).fontSize(9).fontColor('#6E8B8B')
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('⋯').fontSize(16).fontColor('#6E8B8B').onClick(() => { this.showDeleteModal = true; })
}.width('100%')
Row({ space: 10 }) {
Column({ space: 4 }) { Text('我提供').fontSize(9).fontColor('#1B6CA8'); Text(s.offer).fontSize(11).fontWeight(FontWeight.Bold).fontColor('#1B6CA8') }.layoutWeight(1).backgroundColor('#E0F0F5').borderRadius(10).padding(8).alignItems(HorizontalAlign.Center)
Text('⇄').fontSize(14).fontColor('#C9A24B')
Column({ space: 4 }) { Text('我想换').fontSize(9).fontColor('#D9534F'); Text(s.want).fontSize(11).fontWeight(FontWeight.Bold).fontColor('#1B6CA8') }.layoutWeight(1).backgroundColor('#F0EAD8').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('#1B6CA8').backgroundColor('#F0F7F7').borderRadius(10).padding({ left: 8, right: 8, top: 4, bottom: 4 })
Text('❤️ ' + s.likes.toString()).fontSize(10).fontColor('#D9534F').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('#1B6CA8')
Text('记录每一件装备的收藏进度').fontSize(10).fontColor('#6E8B8B')
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('✚ 登记').fontSize(12).fontColor('#FFFFFF').backgroundColor('#1B6CA8').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('#1B6CA8')
Text(c.series + ' · 已收 ' + c.owned.toString() + '/' + c.total.toString()).fontSize(10).fontColor('#6E8B8B')
}.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('#DCE7E7').borderRadius(3)
}.width('100%')
}.width('100%').backgroundColor(c.id === 5 ? '#F0EAD8' : '#FFFFFF').borderRadius(14).padding(14)
}, (c: CollectionItem) => 'coll' + c.id.toString())
Column() {
Text('🏅 图鉴成就墙').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#1B6CA8').width('100%').margin({ bottom: 8 })
Flex({ wrap: FlexWrap.Wrap }) {
Text('🎖️ 台钓高手').fontSize(10).fontColor('#1B6CA8').backgroundColor('#E0F0F5').borderRadius(10).padding({ left: 8, right: 8, top: 5, bottom: 5 }).margin(4)
Text('🏆 路亚大神').fontSize(10).fontColor('#D9534F').backgroundColor('#F0EAD8').borderRadius(10).padding({ left: 8, right: 8, top: 5, bottom: 5 }).margin(4)
Text('🚤 海钓船长').fontSize(10).fontColor('#C9A24B').backgroundColor('#F5EFE0').borderRadius(10).padding({ left: 8, right: 8, top: 5, bottom: 5 }).margin(4)
Text('🪱 饵料专家').fontSize(10).fontColor('#4DC3C8').backgroundColor('#E8F7F7').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('#B8E0E2')
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('＞').fontSize(18).fontColor('#B8E0E2')
}.width('100%')
Row({ space: 0 }) {
Column({ space: 3 }) { Text('38').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#E2CE94'); Text('在售装备').fontSize(9).fontColor('#B8E0E2') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 3 }) { Text('12').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#E2CE94'); Text('求购中').fontSize(9).fontColor('#B8E0E2') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 3 }) { Text('¥2.8万').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#E2CE94'); Text('累计成交额').fontSize(9).fontColor('#B8E0E2') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
}.width('100%').margin({ top: 16 })
}.width('100%').padding(18).linearGradient({ angle: 120, colors: [['#1B6CA8', 0], ['#1B2B3A', 1]] }).borderRadius(16).margin({ top: 10 })
Column() {
Text('🔨 我的求购清单').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#1B6CA8').width('100%').margin({ bottom: 6 })
ForEach(FISHINGS, (t: FishingItem) => {
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('#1B6CA8')
Text('预算 ¥' + t.price.toString() + ' 内 · ' + t.want).fontSize(9).fontColor('#6E8B8B')
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text('出价中').fontSize(10).fontColor('#C9A24B').backgroundColor('#F0EAD8').borderRadius(10).padding({ left: 8, right: 8, top: 3, bottom: 3 })
}.width('100%').padding({ top: 9, bottom: 9 })
}
}, (t: FishingItem) => 'wish' + t.id.toString())
}.width('100%').backgroundColor('#FFFFFF').borderRadius(14).padding(14)
Column() {
Text('📍 常去面交点').fontSize(14).fontWeight(FontWeight.Bold).fontColor('#1B6CA8').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('#1B6CA8').layoutWeight(1)
Text(['金银湖站', '江汉路天桥', '洪山转盘', '楚河入口', '顺丰网点'][i]).fontSize(9).fontColor('#6E8B8B')
}.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 ? '#1B6CA8' : '#6E8B8B').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('#B8E0E2').margin({ top: 4, bottom: 16 })
}.width('100%').linearGradient({ angle: 120, colors: [['#1B6CA8', 0], ['#1B2B3A', 1]] }).borderRadius({ topLeft: 18, topRight: 18 })
Scroll() {
Column({ space: 14 }) {
Column({ space: 8 }) {
Text('要出售的装备').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#1B6CA8').width('100%')
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(FISHINGS, (t: FishingItem, i: number) => {
if (i < 8) {
Text(t.emoji + ' ' + t.name).fontSize(10).fontColor(this.sellFishingIdx === i ? '#FFFFFF' : '#1B6CA8').backgroundColor(this.sellFishingIdx === i ? '#1B6CA8' : '#E0F0F5').borderRadius(12).padding({ left: 9, right: 9, top: 5, bottom: 5 }).margin(4).onClick(() => { this.sellFishingIdx = i; })
}
}, (t: FishingItem, 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('#1B6CA8').width('100%')
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(CONDITION_OPTIONS, (c: string, i: number) => {
Text(c).fontSize(10).fontColor(this.sellCondIdx === i ? '#FFFFFF' : '#C9A24B').backgroundColor(this.sellCondIdx === i ? '#C9A24B' : '#F0EAD8').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('#1B6CA8')
Row({ space: 0 }) {
Text('−').fontSize(16).fontColor('#1B6CA8').backgroundColor('#E0F0F5').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('#1B6CA8').backgroundColor('#FFFFFF').height(30).textAlign(TextAlign.Center).padding({ left: 14, right: 14 })
Text('＋').fontSize(16).fontColor('#FFFFFF').backgroundColor('#1B6CA8').borderRadius({ topRight: 10, bottomRight: 10 }).width(34).height(30).textAlign(TextAlign.Center).onClick(() => { if (this.sellPrice < 9999) { this.sellPrice += 10; } })
}.borderRadius(10)
Text(this.sellPrice > 2000 ? '💰 高价好物建议包邮' : '实惠价更容易出手').fontSize(9).fontColor(this.sellPrice > 2000 ? '#D9534F' : '#6E8B8B').layoutWeight(1).textAlign(TextAlign.End)
}.width('100%')
Column({ space: 8 }) {
Text('宝贝描述').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#1B6CA8').width('100%')
TextInput({ placeholder: '成色、瑕疵、配件情况如实描述…', text: this.sellWords }).fontSize(12).fontColor('#1B6CA8').backgroundColor('#F0F7F7').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('#6E8B8B').backgroundColor('#F0F7F7').borderRadius(20).layoutWeight(1).height(42).textAlign(TextAlign.Center).onClick(() => { this.showSellModal = false; })
Text('上架出售').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').backgroundColor('#1B6CA8').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('#1B6CA8') }.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('#1B6CA8').width('100%')
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(FISHINGS, (t: FishingItem, i: number) => {
if (i % 3 === 0 && i < 15) {
Text(t.emoji + ' ' + t.name).fontSize(10).fontColor(this.swapOfferIdx === i ? '#FFFFFF' : '#1B6CA8').backgroundColor(this.swapOfferIdx === i ? '#1B2B3A' : '#F0F7F7').borderRadius(12).padding({ left: 9, right: 9, top: 5, bottom: 5 }).margin(4).onClick(() => { this.swapOfferIdx = i; })
}
}, (t: FishingItem, 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('#1B6CA8').width('100%')
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(FISHINGS, (t: FishingItem, i: number) => {
if (i % 3 === 2 && i < 15) {
Text((this.pickedWant(i) ? '✓ ' : '') + t.emoji + ' ' + t.name).fontSize(10).fontColor(this.pickedWant(i) ? '#FFFFFF' : '#D9534F').backgroundColor(this.pickedWant(i) ? '#D9534F' : '#F0EAD8').borderRadius(12).padding({ left: 9, right: 9, top: 5, bottom: 5 }).margin(4).onClick(() => { this.toggleWant(i); })
}
}, (t: FishingItem, 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('#1B6CA8').width('100%')
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(PLACES, (p: string, i: number) => {
Text(p).fontSize(10).fontColor(this.swapPlaceIdx === i ? '#FFFFFF' : '#1B6CA8').backgroundColor(this.swapPlaceIdx === i ? '#1B6CA8' : '#E0F0F5').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('#6E8B8B').lineHeight(15).layoutWeight(1)
}.width('100%').backgroundColor('#F0EAD8').borderRadius(10).padding(10)
Row({ space: 12 }) {
Text('再想想').fontSize(13).fontColor('#6E8B8B').backgroundColor('#F0F7F7').borderRadius(20).layoutWeight(1).height(42).textAlign(TextAlign.Center).onClick(() => { this.showSwapModal = false; })
Text('发布交换帖').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').backgroundColor('#1B6CA8').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('#1B6CA8')
Text('下架后买家将无法搜索到这条信息，\n收藏和留言会一并清空，可重新上架。').fontSize(11).fontColor('#6E8B8B').textAlign(TextAlign.Center).lineHeight(17)
Row({ space: 12 }) {
Text('留着').fontSize(13).fontColor('#1B6CA8').backgroundColor('#E0F0F5').borderRadius(20).layoutWeight(1).height(40).textAlign(TextAlign.Center).onClick(() => { this.showDeleteModal = false; })
Text('确认下架').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').backgroundColor('#D9534F').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('#1B6CA8').margin({ top: 8 })
Text(this.detailEng()).fontSize(10).fontColor('#5B6B7F').margin({ top: 2 })
Row({ space: 8 }) {
Text(this.detailTag()).fontSize(9).fontColor('#FFFFFF').backgroundColor('#1B6CA8').borderRadius(8).padding({ left: 7, right: 7, top: 2, bottom: 2 })
Text(rarityLabel(Number(this.detailRarity()))).fontSize(9).fontColor('#1B6CA8').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], ['#E0F0F5', 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('#D9534F'); Text('售价').fontSize(9).fontColor('#6E8B8B') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 4 }) { Text(this.detailSize()).fontSize(17).fontWeight(FontWeight.Bold).fontColor('#1B6CA8'); Text('规格').fontSize(9).fontColor('#6E8B8B') }.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('#6E8B8B') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
Column({ space: 4 }) { Text(this.detailYear()).fontSize(17).fontWeight(FontWeight.Bold).fontColor('#C9A24B'); Text('年份').fontSize(9).fontColor('#6E8B8B') }.layoutWeight(1).alignItems(HorizontalAlign.Center)
}.width('100%').backgroundColor('#F0F7F7').borderRadius(12).padding({ top: 12, bottom: 12 })
Column({ space: 8 }) {
Text('🧾 宝贝描述').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#1B6CA8').width('100%')
Text(this.detailDesc()).fontSize(11).fontColor('#4A5A6E').lineHeight(18)
Row({ space: 8 }) {
Text('👤 ' + this.detailSeller()).fontSize(10).fontColor('#1B6CA8')
Text(this.detailStar() + ' ' + this.detailRating()).fontSize(10).fontColor('#C9A24B').layoutWeight(1).textAlign(TextAlign.End)
}.width('100%')
}.width('100%').alignItems(HorizontalAlign.Start)
Row({ space: 8 }) {
Text('🤝').fontSize(14)
Text('卖家想换：' + this.detailWant()).fontSize(11).fontColor('#D9534F').layoutWeight(1)
}.width('100%').backgroundColor('#F0EAD8').borderRadius(10).padding(10)
Column({ space: 10 }) {
Text('💬 圈友点评').fontSize(12).fontWeight(FontWeight.Bold).fontColor('#1B6CA8').width('100%')
ForEach(FISHING_REVIEWS, (r: FishingReview) => {
Column({ space: 5 }) {
Row({ space: 8 }) { Text('👤').fontSize(14); Text(r.user).fontSize(11).fontWeight(FontWeight.Bold).fontColor('#1B6CA8'); Text(r.starStr).fontSize(9).layoutWeight(1).textAlign(TextAlign.End) }.width('100%')
Text(r.content).fontSize(10).fontColor('#6E8B8B').lineHeight(15)
}.width('100%').backgroundColor('#F0F7F7').borderRadius(10).padding(10)
}, (r: FishingReview) => 'rv' + r.id.toString())
}.width('100%').alignItems(HorizontalAlign.Start)
Row({ space: 12 }) {
Text('💬 留言问问').fontSize(13).fontColor('#1B6CA8').backgroundColor('#E0F0F5').borderRadius(20).layoutWeight(1).height(42).textAlign(TextAlign.Center).onClick(() => { this.showDetailModal = false; })
Text('🛒 立即购买').fontSize(13).fontWeight(FontWeight.Bold).fontColor('#FFFFFF').backgroundColor('#D9534F').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)
}
}