From bd82e9472e851e5a0f3f632abc13c2d23806e88e Mon Sep 17 00:00:00 2001
From: wangfukang <15630117759@163.com>
Date: Fri, 17 Jul 2026 13:37:55 +0800
Subject: [PATCH] 1

---
 components/tab-bar/myCenter.vue |    4 +-
 components/tab-bar/postList.vue | 1171 ++++++++++++++++++++++---------
 2 files changed, 825 insertions(+), 350 deletions(-)

diff --git a/components/tab-bar/myCenter.vue b/components/tab-bar/myCenter.vue
index d32d216..7a64d72 100644
--- a/components/tab-bar/myCenter.vue
+++ b/components/tab-bar/myCenter.vue
@@ -258,7 +258,7 @@
 					}
 				}
 				return {
-					paddingTop: this.statusBarHeight ? (this.statusBarHeight + 16) + 'px' : '98rpx'
+					paddingTop: this.statusBarHeight ? (this.statusBarHeight + 26) + 'px' : '118rpx'
 				}
 			},
 			hasWorker() {
@@ -640,6 +640,7 @@
 				uni.setStorageSync('shopName', item.shopName)
 				uni.setStorageSync('shopIcon', item.shopIcon)
 				uni.setStorageSync('shopScore', item.shopScore)
+				uni.setStorageSync('shopMerchantType', item.merchantType)
 				uni.setStorageSync('shopTakeaway', item.shopTakeaway)
 				uni.setStorageSync('attrId', item.attrId)
 				this.$refs.shopPopup.close()
@@ -704,6 +705,7 @@
 							uni.setStorageSync('attrId', this.schoolShop[0].attrId)
 							uni.setStorageSync('shopName', this.schoolShop[0].shopName)
 							uni.setStorageSync('shopIcon', this.schoolShop[0].shopIcon)
+							uni.setStorageSync('shopMerchantType', this.schoolShop[0].merchantType)
 							uni.setStorageSync('shopScore', this.schoolShop[0].shopScore)
 							uni.setStorageSync('shopTakeaway', this.schoolShop[0].shopTakeaway)
 							url = '/package2/shop/merchantCenter'
diff --git a/components/tab-bar/postList.vue b/components/tab-bar/postList.vue
index aa2fc10..b0833ef 100644
--- a/components/tab-bar/postList.vue
+++ b/components/tab-bar/postList.vue
@@ -1,239 +1,463 @@
 <template>
-	<!-- 鱼塘 -->
-	<view class="page1">
-		<view class="tab-mask" v-if="showMoreTab == true"></view>
-		<view class="title">
-			<view class="title-sreach" :style="{'margin-top': menuButtonInfo.top +'px'}">
-				<uni-icons type="search"></uni-icons>
-				<input type="text" placeholder="搜索"
-					style="flex:1;line-height: 66rpx;height: 66rpx;width: 70%;padding: 0 20rpx;" />
-				<view class="sreach-btn">
-					搜索
+	<view class="market-page">
+		<view class="fixed-header" :style="{ paddingTop: statusBarTop + 'px' }">
+			<view class="brand-row">
+				<view class="brand">
+					<text class="brand-main">校园二手</text>
+					<text class="brand-sub">鱼塘</text>
+					<view class="brand-fish">≋</view>
 				</view>
+				<view class="brand-slogan">物尽其用 · 让校园更美好</view>
+			</view>
+			<view class="search-bar">
+				<uni-icons type="search" size="19" color="#8d9693"></uni-icons>
+				<input
+					v-model.trim="keyword"
+					class="search-input"
+					type="text"
+					confirm-type="search"
+					placeholder="搜索二手物品、用户或关键词"
+					placeholder-class="search-placeholder"
+					@confirm="handleSearch"
+				/>
+				<view class="search-button" @tap="handleSearch">搜索</view>
 			</view>
 		</view>
-		<view class="nav-tab">
-			<view class="tab-box">
-				<view @tap="checkTab(index)" class="tab1" v-for="(item,index) in tabList" :key="index">
-					<view class="" style=""
-						:style="{'font-size':tabIndex == index?'28rpx':'24rpx','font-weight':tabIndex == index?'700':'400'}">
-						{{item.name}}
+
+		<scroll-view
+			class="market-scroll"
+			scroll-y
+			:style="{ paddingTop: headerHeight + 'px' }"
+			:show-scrollbar="false"
+		>
+			<view class="scroll-content">
+				<view class="hero-card">
+					<image class="hero-image" :src="getPostListImage('hero')" mode="aspectFill"></image>
+					<view class="hero-copy">
+						<view class="hero-title">幸运盲盒</view>
+						<view class="hero-subtitle">100%有惊喜</view>
+						<view class="hero-button" @tap="openBlindBox">
+							<text>立即抽盒</text>
+							<text class="hero-button-arrow">›</text>
+						</view>
 					</view>
-					<view class="black-line" v-if="tabIndex == index"></view>
 				</view>
-				<view class="down-tab" @tap="showMoreTab = true">
-					<uni-icons type="down"></uni-icons>
+
+				<view class="hero-dots">
+					<view class="hero-dot hero-dot--active"></view>
+					<view class="hero-dot"></view>
+					<view class="hero-dot"></view>
 				</view>
-			</view>
-			<view class="up-tab" v-if="showMoreTab == true">
-				<view>
-					<view
-						style="height: 50rpx;line-height: 50rpx;width: 100%;padding-left: 24rpx;font-size: 24rpx;font-weight: 700;">
-						更多分类
-						<text style="font-size: 24rpx;color: rgba(0, 35, 28, 0.5);">
-							点击进入分类
-						</text>
-					</view>
-					<view class="down-tab" @tap="showMoreTab = false">
-						<uni-icons type="down"></uni-icons>
+
+				<view class="shortcut-list">
+					<view class="shortcut-item" v-for="(item,index) in shortcutList" :key="index" @tap="selectShortcut(item)">
+						<view class="shortcut-icon">
+							<image class="shortcut-icon-image" :src="getPostListImage(item.imageKey)" mode="aspectFit"></image>
+						</view>
+						<view class="shortcut-name">{{item.name}}</view>
+						<view class="shortcut-desc">{{item.desc}}</view>
 					</view>
 				</view>
-				<view class="tanchu-tab">
-					<view class="tanchu1" v-for="(item,index) in tabList" :key="index"
-						:style="{'background':tabIndex == index?'rgba(0, 35, 28, 1)':'#fff','color':tabIndex == index?'rgba(166, 255, 234, 1)':''}">
-						{{item.name}}
+
+				<view class="category-row">
+					<scroll-view class="category-scroll" scroll-x :show-scrollbar="false">
+						<view class="category-inner">
+							<view
+								class="category-item"
+								:class="{ 'category-item--active': categoryIndex == index }"
+								v-for="(item,index) in categories"
+								:key="index"
+								@tap="changeCategory(index)"
+							>
+								{{item}}
+							</view>
+						</view>
+					</scroll-view>
+					<view class="filter-button" @tap="showFilterTip">
+						<uni-icons type="tune" size="18" color="#66706d"></uni-icons>
+						<text>筛选</text>
 					</view>
 				</view>
-			</view>
-		</view>
-		<view class="shop-list">
-			<view class="shop1" v-for="(item,index) in shopList" :key="index">
-				<img :src="item.img" alt="" />
-				<view class="shop-name">
-					{{item.shopName | sliceMsg}}
-				</view>
-			</view>
-		</view>
-		<view class="huodong">
-			<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/bc6b887514a5469a938cdd0001e841c2.png" alt=""
-				style="margin-right: 10rpx;" />
-			<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/90a37f3f8a204d7eaa8ea2d3293e1086.png" alt=""
-				style="margin-left: 10rpx;" />
-		</view>
-		<view style="display: flex;flex-wrap: wrap;">
-			<view class="c-1" @tap="goDetail(item)" v-for="(item,index) in goodsList" :key="index">
-				<view class="c-2">
-					<img :src="item.pic" alt="">
-				</view>
-				<view class="c-3">
-					{{item.text}}
-				</view>
-				<view class="c-4">
-					<view class="c-5">
-						￥{{item.price}}
-					</view>
-					<view class="c-6">
-						{{item.xiangyao}}人想要
+
+				<view class="goods-grid" v-if="filteredGoods.length">
+					<view class="waterfall-column" v-for="(column,columnIndex) in waterfallColumns" :key="columnIndex">
+						<view class="goods-card" v-for="item in column" :key="item.id" @tap="goDetail(item)">
+							<view class="goods-image-box" :style="{ height: getImageHeight(item) + 'rpx' }">
+								<image
+									class="goods-image"
+									:src="item.pic"
+									mode="aspectFill"
+									:data-goods-id="item.id"
+									@load="onImageLoad"
+								></image>
+								<view class="distance-tag">距离{{item.distance}}</view>
+							</view>
+							<view class="goods-info">
+								<view class="goods-title">{{item.text}}</view>
+								<view class="goods-tags">
+									<text v-for="(tag,tagIndex) in item.tags" :key="tagIndex">{{tag}}</text>
+								</view>
+								<view class="price-row">
+									<view class="current-price"><text>¥</text>{{item.price}}</view>
+									<view class="original-price" v-if="item.originalPrice">¥{{item.originalPrice}}</view>
+								</view>
+								<view class="seller-row">
+									<image class="seller-avatar" :src="item.icon" mode="aspectFill"></image>
+									<text class="seller-name">{{item.shopName}}</text>
+									<view class="want-count" @tap.stop="toggleLike(item)">
+										<uni-icons
+											:type="item.liked ? 'heart-filled' : 'heart'"
+											size="16"
+											:color="item.liked ? '#27b889' : '#a5aeab'"
+										></uni-icons>
+										<text>{{item.xiangyao}}</text>
+									</view>
+								</view>
+							</view>
+						</view>
 					</view>
 				</view>
-				<view class="c-7">
-					<img :src="item.icon" alt="" />
-					<view class="c-8">
-						AAA二手数码
-					</view>
+
+				<view class="empty-state" v-else>
+					<uni-icons type="search" size="38" color="#b8c2be"></uni-icons>
+					<view>没有找到相关闲置</view>
+					<text>换个关键词试试吧</text>
 				</view>
+				<view class="bottom-space"></view>
 			</view>
-		</view>
-		<view style="width: 100%;height: 200rpx;"></view>
+		</scroll-view>
 	</view>
 </template>
 
 <script>
+	const POST_LIST_IMAGE_CACHE_KEY = 'post_list_image_cache_v1'
+	const POST_LIST_IMAGE_CACHE_TTL = 30 * 24 * 60 * 60 * 1000
+	const POST_LIST_IMAGE_CACHE_LIMIT = 12
+	const postListImageDownloading = {}
+	const POST_LIST_IMAGE_URLS = {
+		hero: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/2248372de0ba41b7925ea5f2addfa084.png',
+		free: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/16cbfcd68eff477e98da9bf56c98dbde.png',
+		wanted: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/8e513a5590f24d588f1d71edfb67201c.png',
+		quickSell: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/73d796ce3fdb4dc2baf7a5938d699bc3.png',
+		groupBuy: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/8e5c6b97a50d49f7bdfdd34009e49db8.png',
+		graduation: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/180733a3210b48bbb4b2e8320a850274.png'
+	}
+
 	export default {
 		data() {
 			return {
-				goodsList: [{
-					pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png',
-					text: 'LG27寸显示屏，带底座，屏幕显示正常',
-					price: 100,
-					xiangyao: 12,
-					icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png',
-					shopName: 'AAA二手数码'
+				menuButtonInfo: {},
+				postListImages: {},
+				keyword: '',
+				categoryIndex: 0,
+				shortcutList: [{
+					name: '0元专区',
+					desc: '免费送好物',
+					category: '推荐',
+					imageKey: 'free'
+				}, {
+					name: '求购广场',
+					desc: '找你想要的',
+					category: '求购',
+					imageKey: 'wanted'
 				}, {
+					name: '极速卖',
+					desc: '快速出手',
+					category: '推荐',
+					imageKey: 'quickSell'
+				}, {
+					name: '拼团购',
+					desc: '拼着更便宜',
+					category: '拼团购',
+					imageKey: 'groupBuy'
+				}, {
+					name: '毕业清仓',
+					desc: '好物低价',
+					category: '生活',
+					imageKey: 'graduation'
+				}],
+				categories: ['推荐', '附近', '数码', '书籍', '生活', '美妆', '服饰'],
+				goodsList: [{
+					id: 1,
 					pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png',
-					text: 'LG27寸显示屏，带底座，屏幕显示正常',
+					text: 'LG 27寸显示屏 带底座',
 					price: 100,
-					xiangyao: 12,
+					originalPrice: 699,
+					xiangyao: 32,
+					distance: '200m',
 					icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png',
-					shopName: 'AAA二手数码'
+					shopName: '小熊数码',
+					tags: ['轻微使用', '可小刀'],
+					category: '数码',
+					liked: false
 				}, {
-					pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png',
-					text: 'LG27寸显示屏，带底座，屏幕显示正常',
-					price: 100,
-					xiangyao: 12,
+					id: 2,
+					pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/bc6b887514a5469a938cdd0001e841c2.png',
+					text: '宿舍护眼台灯 学习专用',
+					price: 38,
+					originalPrice: 89,
+					xiangyao: 21,
+					distance: '300m',
 					icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png',
-					shopName: 'AAA二手数码'
+					shopName: '桃桃乌龙',
+					tags: ['轻微使用', '可小刀'],
+					category: '生活',
+					liked: false
 				}, {
-					pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png',
-					text: 'LG27寸显示屏，带底座，屏幕显示正常',
-					price: 100,
-					xiangyao: 12,
+					id: 3,
+					pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/90a37f3f8a204d7eaa8ea2d3293e1086.png',
+					text: '考研资料打包出 笔记齐全',
+					price: 15,
+					originalPrice: 39,
+					xiangyao: 18,
+					distance: '400m',
 					icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png',
-					shopName: 'AAA二手数码'
+					shopName: '晴天小卖部',
+					tags: ['九成新', '可小刀'],
+					category: '书籍',
+					liked: false
 				}, {
+					id: 4,
 					pic: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/9362dfb66c0f426789584cabb3977ccc.png',
-					text: 'LG27寸显示屏，带底座，屏幕显示正常',
-					price: 100,
+					text: '便携蓝牙音箱 音质清晰',
+					price: 45,
+					originalPrice: 129,
 					xiangyao: 12,
+					distance: '150m',
 					icon: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/801c569079da4540990c1cc634186fdd.png',
-					shopName: 'AAA二手数码'
-				}],
-				shopList: [{
-					shopName: '高徒课堂',
-					img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
-				}, {
-					shopName: '赵一鸣',
-					img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
-				}, {
-					shopName: '蜜雪冰城',
-					img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
-				}, {
-					shopName: '怂柠',
-					img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
-				}, {
-					shopName: '麻辣烫酸辣粉',
-					img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
-				}, {
-					shopName: '鲸鱼AI教育',
-					img: 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/6c4ab92a43c842d8bb22035bce1f65cc.png'
-				}],
-				showMoreTab: false,
-				tabIndex: 0,
-				tabList: [{
-					name: '兼职',
-					index: 0
-				}, {
-					name: '广告',
-					index: 1
-				}, {
-					name: '活动',
-					index: 2
-				}, {
-					name: '美妆个护',
-					index: 3
-				}, {
-					name: '考学职称',
-					index: 4
-				}, {
-					name: '技能服务',
-					index: 5
-				}, {
-					name: '省钱神券',
-					index: 6
-				}, {
-					name: '推荐',
-					index: 7
-				}, {
-					name: '摄影',
-					index: 8
-				}, {
-					name: '吃饭',
-					index: 8
-				}, {
-					name: '电影',
-					index: 8
-				}, {
-					name: '唱歌',
-					index: 8
-				}, {
-					name: '美妆个护',
-					index: 8
-				}, {
-					name: '考学职称',
-					index: 8
-				}, {
-					name: '技能服务',
-					index: 8
-				}, {
-					name: '二手旧物',
-					index: 8
-				}],
-				menuButtonInfo: {}
+					shopName: '可乐不加冰',
+					tags: ['全新', '可小刀'],
+					category: '数码',
+					liked: false
+				}]
 			}
 		},
-		filters: {
-			sliceMsg(val) {
-				return val.slice(0, 4);
+		computed: {
+			statusBarTop() {
+				return Number(this.menuButtonInfo.top) || 24
+			},
+			headerHeight() {
+				// 头部实际高度：顶部安全区 + 品牌区 72rpx + 搜索栏 68rpx + 底部 18rpx
+				return this.statusBarTop + uni.upx2px(158)
+			},
+			filteredGoods() {
+				const keyword = this.keyword.toLowerCase()
+				const category = this.categories[this.categoryIndex]
+				return this.goodsList.filter(item => {
+					const matchesCategory = category == '推荐' || category == '附近' || item.category == category
+					const text = [item.text, item.shopName, item.category].concat(item.tags || []).join(' ').toLowerCase()
+					return matchesCategory && (!keyword || text.indexOf(keyword) > -1)
+				})
+			},
+			waterfallColumns() {
+				const columns = [[], []]
+				const columnHeights = [0, 0]
+				this.filteredGoods.forEach(item => {
+					const targetColumn = columnHeights[0] <= columnHeights[1] ? 0 : 1
+					columns[targetColumn].push(item)
+					columnHeights[targetColumn] += this.getImageHeight(item) + 190
+				})
+				return columns
 			}
 		},
-		props: {
-
-		},
-		watch: {
-
-		},
-		onReachBottom() {
-			if (this.searchForm.pageNumber >= this.totalPages) return;
-			// this.status = 'loading';
-			this.searchForm.pageNumber++;
-			this.getShopList();
-
+		created() {
+			this.applyCachedPostListImages()
 		},
 		methods: {
+			getPostListImage(key) {
+				return this.postListImages[key] || POST_LIST_IMAGE_URLS[key] || ''
+			},
+			getPostListImageCache() {
+				const cache = uni.getStorageSync(POST_LIST_IMAGE_CACHE_KEY)
+				return cache && typeof cache === 'object' ? cache : {}
+			},
+			savePostListImageCache(cache) {
+				uni.setStorageSync(POST_LIST_IMAGE_CACHE_KEY, cache)
+			},
+			isSavedFileExists(filePath) {
+				if (!filePath || filePath.indexOf('__tmp__') !== -1) return false
+				try {
+					const fs = (uni.getFileSystemManager && uni.getFileSystemManager())
+						|| (typeof wx !== 'undefined' && wx.getFileSystemManager ? wx.getFileSystemManager() : null)
+					if (fs && fs.accessSync) {
+						fs.accessSync(filePath)
+						return true
+					}
+				} catch (e) {
+					return false
+				}
+				return true
+			},
+			isPostListImageCacheValid(cacheItem) {
+				return !!(cacheItem
+					&& Date.now() - Number(cacheItem.savedAt || 0) < POST_LIST_IMAGE_CACHE_TTL
+					&& this.isSavedFileExists(cacheItem.path))
+			},
+			applyCachedPostListImages() {
+				const cache = this.getPostListImageCache()
+				Object.keys(POST_LIST_IMAGE_URLS).forEach((key) => {
+					const imageUrl = POST_LIST_IMAGE_URLS[key]
+					const cacheItem = cache[imageUrl]
+					if (this.isPostListImageCacheValid(cacheItem)) {
+						this.$set(this.postListImages, key, cacheItem.path)
+						return
+					}
+					if (cacheItem && cacheItem.path) {
+						delete cache[imageUrl]
+					}
+					this.$set(this.postListImages, key, imageUrl)
+					this.cachePostListImage(key, imageUrl)
+				})
+				this.prunePostListImageCache(cache, Object.keys(POST_LIST_IMAGE_URLS).map(key => POST_LIST_IMAGE_URLS[key]))
+			},
+			cachePostListImage(key, imageUrl) {
+				if (postListImageDownloading[imageUrl]) return
+				postListImageDownloading[imageUrl] = true
+				uni.downloadFile({
+					url: imageUrl,
+					success: (downloadRes) => {
+						if (downloadRes.statusCode !== 200 || !downloadRes.tempFilePath) {
+							this.$set(this.postListImages, key, imageUrl)
+							delete postListImageDownloading[imageUrl]
+							return
+						}
+						uni.saveFile({
+							tempFilePath: downloadRes.tempFilePath,
+							success: (saveRes) => {
+								const cache = this.getPostListImageCache()
+								const oldCacheItem = cache[imageUrl]
+								if (oldCacheItem && oldCacheItem.path && oldCacheItem.path !== saveRes.savedFilePath) {
+									uni.removeSavedFile({
+										filePath: oldCacheItem.path,
+										fail: () => {}
+									})
+								}
+								cache[imageUrl] = {
+									path: saveRes.savedFilePath,
+									savedAt: Date.now()
+								}
+								this.savePostListImageCache(cache)
+								this.$set(this.postListImages, key, saveRes.savedFilePath)
+							},
+							fail: () => {
+								this.$set(this.postListImages, key, imageUrl)
+							},
+							complete: () => {
+								delete postListImageDownloading[imageUrl]
+							}
+						})
+					},
+					fail: () => {
+						this.$set(this.postListImages, key, imageUrl)
+						delete postListImageDownloading[imageUrl]
+					},
+					complete: (downloadRes) => {
+						if (!downloadRes || downloadRes.statusCode !== 200) {
+							this.$set(this.postListImages, key, imageUrl)
+							delete postListImageDownloading[imageUrl]
+						}
+					}
+				})
+			},
+			prunePostListImageCache(cache, activeUrls) {
+				const activeUrlMap = activeUrls.reduce((result, url) => {
+					result[url] = true
+					return result
+				}, {})
+				const now = Date.now()
+				Object.keys(cache).forEach((url) => {
+					const item = cache[url]
+					const isExpired = !this.isPostListImageCacheValid(item)
+					if (isExpired && !activeUrlMap[url]) {
+						item && item.path && uni.removeSavedFile({
+							filePath: item.path,
+							fail: () => {}
+						})
+						delete cache[url]
+					}
+				})
+				const urls = Object.keys(cache).sort((a, b) => Number(cache[a].savedAt || now) - Number(cache[b].savedAt || now))
+				while (urls.length > POST_LIST_IMAGE_CACHE_LIMIT) {
+					const url = urls.shift()
+					if (activeUrlMap[url]) {
+						urls.push(url)
+						if (urls.every(itemUrl => activeUrlMap[itemUrl])) break
+						continue
+					}
+					const item = cache[url]
+					item && item.path && uni.removeSavedFile({
+						filePath: item.path,
+						fail: () => {}
+					})
+					delete cache[url]
+				}
+				this.savePostListImageCache(cache)
+			},
 			init() {
-				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
-				this.$forceUpdate()
+				const menuInfo = uni.getMenuButtonBoundingClientRect()
+				if (menuInfo && menuInfo.top) {
+					this.menuButtonInfo = menuInfo
+				} else {
+					const systemInfo = uni.getSystemInfoSync()
+					this.menuButtonInfo = {
+						top: systemInfo.statusBarHeight || 24,
+						bottom: (systemInfo.statusBarHeight || 24) + 32
+					}
+				}
 			},
-			goDetail(item){
-				uni.navigateTo({
-					url:'/package2/IdleTrad/detail'
+			handleSearch() {
+				uni.hideKeyboard()
+			},
+			changeCategory(index) {
+				this.categoryIndex = index
+			},
+			selectShortcut(item) {
+				const index = this.categories.indexOf(item.category)
+				if (index > -1) {
+					this.categoryIndex = index
+				} else {
+					uni.showToast({
+						title: item.name + '即将开放',
+						icon: 'none'
+					})
+				}
+			},
+			showFilterTip() {
+				uni.showToast({
+					title: '筛选功能即将开放',
+					icon: 'none'
 				})
 			},
-			checkTab(index) {
-				this.tabIndex = index
+			openBlindBox() {
+				uni.showToast({
+					title: '幸运盲盒即将开放',
+					icon: 'none'
+				})
 			},
-			getShopList() {
-
+			getImageHeight(item) {
+				return Number(item.imageHeight) || 280
+			},
+			onImageLoad(event) {
+				const detail = event && event.detail ? event.detail : {}
+				const dataset = event && event.currentTarget ? event.currentTarget.dataset || {} : {}
+				const goodsId = Number(dataset.goodsId)
+				const item = this.goodsList.find(goods => Number(goods.id) === goodsId)
+				const width = Number(detail.width)
+				const height = Number(detail.height)
+				if (!item || !width || !height) return
+				const adaptedHeight = Math.max(220, Math.min(430, Math.round(342 * height / width)))
+				if (item.imageHeight !== adaptedHeight) {
+					this.$set(item, 'imageHeight', adaptedHeight)
+				}
+			},
+			toggleLike(item) {
+				item.liked = !item.liked
+				item.xiangyao += item.liked ? 1 : -1
+			},
+			goDetail() {
+				uni.navigateTo({
+					url: '/package2/IdleTrad/detail'
+				})
 			}
 		}
 	}
@@ -243,232 +467,481 @@
 	page {
 		width: 100%;
 		height: 100%;
-		font-size: 24rpx;
-		background: #F5F8F5;
-		color: #00231C;
+		background: #f7f9f7;
+		color: #17241f;
 	}
 
-	.page1 {
+	.market-page {
 		width: 100%;
-		font-size: 24rpx;
-		position: relative;
+		height: 100%;
+		overflow: hidden;
+		background:
+			linear-gradient(180deg, rgba(224, 250, 241, 0.78) 0, rgba(247, 249, 247, 0) 340rpx),
+			#f7f9f7;
+	}
+
+	.fixed-header {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 900;
+		box-sizing: border-box;
+		padding-left: 30rpx;
+		padding-right: 30rpx;
+		padding-bottom: 18rpx;
+		background: linear-gradient(180deg, #e4faf3 0%, rgba(242, 252, 248, 0.98) 100%);
+		box-shadow: 0 8rpx 24rpx rgba(24, 99, 78, 0.05);
+	}
+
+	.brand-row {
+		height: 72rpx;
 		display: flex;
 		flex-direction: column;
+		justify-content: center;
+	}
+
+	.brand {
+		display: flex;
+		align-items: center;
+		height: 42rpx;
+		line-height: 42rpx;
+	}
+
+	.brand-main {
+		color: #10201b;
+		font-size: 38rpx;
+		font-weight: 900;
+		letter-spacing: 2rpx;
 	}
 
-	.title {
-		background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/25cad6ddbfb44230abf0c4d1a6259e16.png') no-repeat;
+	.brand-sub {
+		margin-left: 14rpx;
+		color: #20ae7f;
+		font-size: 24rpx;
+		font-weight: 900;
+		letter-spacing: 4rpx;
+	}
+
+	.brand-fish {
+		width: 34rpx;
+		height: 26rpx;
+		margin-left: 4rpx;
+		border: 3rpx solid #20ae7f;
+		border-radius: 50% 60% 60% 50%;
+		color: #20ae7f;
+		font-size: 22rpx;
+		font-weight: 900;
+		line-height: 20rpx;
+		text-align: center;
+		transform: rotate(-8deg);
+	}
+
+	.brand-slogan {
+		margin-top: 2rpx;
+		color: #89938f;
+		font-size: 17rpx;
+		letter-spacing: 5rpx;
+	}
+
+	.search-bar {
+		height: 68rpx;
+		display: flex;
+		align-items: center;
+		padding-left: 22rpx;
+		border: 2rpx solid rgba(43, 183, 139, 0.1);
+		border-radius: 38rpx;
+		background: rgba(255, 255, 255, 0.98);
+		box-shadow: 0 10rpx 26rpx rgba(19, 109, 82, 0.08);
+		box-sizing: border-box;
+	}
+
+	.search-input {
+		flex: 1;
+		height: 64rpx;
+		margin-left: 10rpx;
+		color: #293632;
+		font-size: 24rpx;
+		line-height: 64rpx;
+	}
+
+	.search-placeholder {
+		color: #a7aeab;
+	}
+
+	.search-button {
+		width: 94rpx;
+		height: 56rpx;
+		margin-right: 6rpx;
+		border-radius: 30rpx;
+		background: linear-gradient(135deg, #38c897, #19af7e);
+		box-shadow: 0 8rpx 16rpx rgba(31, 181, 133, 0.22);
+		color: #fff;
+		font-size: 24rpx;
+		font-weight: 700;
+		line-height: 56rpx;
+		text-align: center;
+	}
+
+	.market-scroll {
+		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+	}
+
+	.scroll-content {
+		padding: 8rpx 24rpx 0;
+		box-sizing: border-box;
+	}
+
+	.hero-card {
+		position: relative;
+		height: 240rpx;
+		overflow: hidden;
+		border-radius: 30rpx;
+		background: #e7f7f1;
+		box-shadow: 0 14rpx 34rpx rgba(38, 135, 105, 0.09);
+	}
+
+	.hero-image {
 		width: 100%;
-		height: 200rpx;
-		background-size: 100%;
+		height: 100%;
+		display: block;
+	}
+
+	.hero-copy {
+		position: absolute;
+		top: 30rpx;
+		left: 40rpx;
+		z-index: 2;
+	}
+
+	.hero-title {
+		color: #101714;
+		font-size: 36rpx;
+		font-weight: 900;
+		letter-spacing: 3rpx;
+		line-height: 48rpx;
 	}
 
-	.title-sreach {
-		width: 70%;
+	.hero-subtitle {
+		margin-top: 4rpx;
+		color: #087c61;
+		font-size: 31rpx;
+		font-weight: 800;
+		letter-spacing: 1rpx;
+		line-height: 42rpx;
+	}
+
+	.hero-button {
+		width: 150rpx;
+		height: 52rpx;
+		margin-top: 18rpx;
 		display: flex;
-		height: 66rpx;
-		line-height: 66rpx;
+		align-items: center;
+		justify-content: center;
+		border-radius: 28rpx;
+		background: linear-gradient(135deg, #39ca8f, #24b979);
+		box-shadow: 0 8rpx 18rpx rgba(26, 167, 110, 0.2);
+		color: #fff;
+		font-size: 22rpx;
+		font-weight: 800;
+	}
+
+	.hero-button-arrow {
+		margin-left: 9rpx;
+		font-size: 34rpx;
+		font-weight: 500;
+		line-height: 34rpx;
+	}
+
+	.hero-dots {
+		height: 34rpx;
 		display: flex;
-		background: #fff;
-		border-radius: 66rpx;
-		padding-left: 20rpx;
-		margin-left: 20rpx;
-	}
-
-	.sreach-btn {
-		width: 100rpx;
-		height: 50rpx;
-		line-height: 50rpx;
-		background: rgba(0, 35, 28, 1);
-		color: rgba(166, 255, 234, 1);
-		border-radius: 60rpx;
-		text-align: center;
-		margin: 8rpx;
+		align-items: center;
+		justify-content: center;
+		gap: 10rpx;
 	}
 
-	.tab-box {
+	.hero-dot {
+		width: 10rpx;
+		height: 10rpx;
+		border-radius: 50%;
+		background: #dce3df;
+	}
+
+	.hero-dot--active {
+		width: 18rpx;
+		border-radius: 8rpx;
+		background: #2bb889;
+	}
+
+	.shortcut-list {
 		display: flex;
-		height: 60rpx;
-		line-height: 40rpx;
-		padding-left: 24rpx;
+		justify-content: space-between;
+		padding: 8rpx 4rpx 22rpx;
+	}
+
+	.shortcut-item {
+		width: 19%;
+		text-align: center;
+	}
+
+	.shortcut-icon {
+		width: 84rpx;
+		height: 84rpx;
+		margin: 0 auto 10rpx;
+	}
+
+	.shortcut-icon-image {
 		width: 100%;
-		overflow: scroll;
+		height: 100%;
+		display: block;
+	}
+
+	.shortcut-name {
+		color: #29342f;
+		font-size: 21rpx;
+		font-weight: 800;
 		white-space: nowrap;
-		position: relative;
 	}
 
-	.tab1 {
-		margin-right: 36rpx;
+	.shortcut-desc {
+		margin-top: 5rpx;
+		color: #939c98;
+		font-size: 17rpx;
+		white-space: nowrap;
+	}
+
+	.category-row {
+		height: 80rpx;
+		display: flex;
+		align-items: center;
+		border-bottom: 1rpx solid #edf0ee;
+		background: rgba(247, 249, 247, 0.96);
+	}
+
+	.category-scroll {
+		flex: 1;
+		width: 0;
+		height: 80rpx;
+		white-space: nowrap;
 	}
 
-	.nav-tab {
+	.category-inner {
+		height: 80rpx;
+		display: inline-flex;
+		align-items: center;
+	}
+
+	.category-item {
 		position: relative;
+		height: 80rpx;
+		margin-right: 34rpx;
+		color: #7d8582;
+		font-size: 25rpx;
+		line-height: 80rpx;
+	}
+
+	.category-item--active {
+		color: #1d2925;
+		font-size: 29rpx;
+		font-weight: 900;
 	}
 
-	.black-line {
-		width: 50rpx;
+	.category-item--active::after {
+		content: '';
+		position: absolute;
+		left: 50%;
+		bottom: 5rpx;
+		width: 40rpx;
 		height: 6rpx;
-		background: #000;
 		border-radius: 6rpx;
-		margin: 0 auto;
+		background: #35c194;
+		transform: translateX(-50%);
 	}
 
-	.down-tab {
-		position: absolute;
-		top: 0;
-		right: 0;
+	.filter-button {
+		width: 94rpx;
+		height: 80rpx;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 5rpx;
+		background: linear-gradient(90deg, rgba(247, 249, 247, 0.7), #f7f9f7 20%);
+		color: #747d79;
+		font-size: 22rpx;
+	}
+
+	.goods-grid {
+		display: flex;
+		align-items: flex-start;
+		gap: 18rpx;
+		padding-top: 18rpx;
+	}
+
+	.waterfall-column {
+		width: calc(50% - 9rpx);
+		display: flex;
+		flex-direction: column;
+	}
+
+	.goods-card {
+		width: 100%;
+		margin-bottom: 20rpx;
+		overflow: hidden;
+		border-radius: 22rpx;
 		background: #fff;
-		width: 110rpx;
-		height: 40rpx;
-		text-align: right;
-		line-height: 40rpx;
-		padding-right: 14rpx;
-		background: linear-gradient(to right, transparent 0%, #ffffff 60%, #ffffff 100%);
+		box-shadow: 0 8rpx 24rpx rgba(24, 61, 49, 0.055);
 	}
 
-	.up-tab {
-		position: absolute;
-		top: 0;
-		left: 0;
+	.goods-image-box {
+		position: relative;
 		width: 100%;
-		height: 400rpx;
-		border-bottom-left-radius: 20rpx;
-		border-bottom-right-radius: 20rpx;
-		z-index: 99;
-		background: #F5F8F5;
+		overflow: hidden;
+		background: #edf2ef;
+		transition: height 0.2s ease;
 	}
 
-	.tab-mask {
+	.goods-image {
 		width: 100%;
 		height: 100%;
-		overflow: hidden;
+	}
+
+	.distance-tag {
 		position: absolute;
-		top: 200rpx;
-		left: 0;
-		background: rgba(0, 0, 0, 0.2);
-		z-index: 97;
+		top: 14rpx;
+		left: 14rpx;
+		height: 36rpx;
+		padding: 0 12rpx;
+		border-radius: 18rpx;
+		background: rgba(46, 190, 145, 0.92);
+		box-shadow: 0 5rpx 12rpx rgba(16, 126, 92, 0.18);
+		color: #fff;
+		font-size: 17rpx;
+		font-weight: 700;
+		line-height: 36rpx;
 	}
 
-	.tanchu-tab {
-		display: flex;
-		flex-wrap: wrap;
+	.goods-info {
+		padding: 15rpx 15rpx 17rpx;
 	}
 
-	.tanchu1 {
-		width: 160rpx;
-		height: 60rpx;
-		background: #fff;
-		border-radius: 20rpx;
-		text-align: center;
-		margin: 20rpx 0 0 20rpx;
-		line-height: 60rpx;
-		font-size: 26rpx;
+	.goods-title {
+		height: 40rpx;
+		overflow: hidden;
+		color: #29332f;
+		font-size: 25rpx;
+		font-weight: 800;
+		line-height: 40rpx;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 
-	.shop-list {
+	.goods-tags {
+		height: 34rpx;
 		display: flex;
+		align-items: center;
+		gap: 8rpx;
+		overflow: hidden;
+	}
+
+	.goods-tags text {
+		padding: 3rpx 10rpx;
+		border-radius: 7rpx;
+		background: #eaf9f3;
+		color: #32a980;
+		font-size: 16rpx;
+		line-height: 24rpx;
 		white-space: nowrap;
-		width: 100%;
-		padding: 0 24rpx;
-		overflow: scroll;
-		margin-top: 30rpx;
 	}
 
-	.shop1 {
-		height: 140rpx;
-		width: 100rpx;
-		text-align: center;
-		margin-right: 36rpx;
+	.goods-tags text:nth-child(2) {
+		background: #fff0f4;
+		color: #dc7794;
+	}
 
-		img {
-			width: 100rpx;
-			height: 100rpx;
-			border-radius: 100rpx;
-		}
+	.price-row {
+		height: 52rpx;
+		display: flex;
+		align-items: flex-end;
 	}
 
-	.shop-name {
-		height: 40rpx;
-		line-height: 40rpx;
-		font-weight: 600;
+	.current-price {
+		color: #ef4c3f;
+		font-family: Arial, sans-serif;
+		font-size: 31rpx;
+		font-weight: 900;
+		line-height: 46rpx;
 	}
 
-	.huodong {
-		padding: 0 24rpx;
-		display: flex;
-		height: 170rpx;
-		margin-top: 24rpx;
+	.current-price text {
+		margin-right: 2rpx;
+		font-size: 20rpx;
+	}
 
-		img {
-			height: 170rpx;
-			flex: 1;
-		}
+	.original-price {
+		margin-left: 10rpx;
+		color: #a6aeaa;
+		font-size: 18rpx;
+		line-height: 42rpx;
+		text-decoration: line-through;
 	}
 
-	.c-1 {
-		background: #fff;
-		width: 340rpx;
-		margin-left: 24rpx;
-		margin-top: 20rpx;
-		border-radius: 20rpx;
-		height: 580rpx;
+	.seller-row {
+		height: 42rpx;
+		display: flex;
+		align-items: center;
 	}
 
-	.c-2 {
-		background: #fff;
-		width: 340rpx;
-		height: 340rpx;
-
-		img {
-			width: 100%;
-			height: 100%;
-			background-size: 100%;
-			border-radius: 20rpx;
-		}
+	.seller-avatar {
+		width: 32rpx;
+		height: 32rpx;
+		flex-shrink: 0;
+		border-radius: 50%;
+		background: #e6eeea;
 	}
 
-	.c-3 {
-		background: #fff;
-		font-size: 28rpx;
-		font-weight: 700;
-		padding: 10rpx;
+	.seller-name {
+		flex: 1;
+		min-width: 0;
+		margin-left: 8rpx;
+		overflow: hidden;
+		color: #87908c;
+		font-size: 18rpx;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
 
-	.c-4 {
+	.want-count {
 		display: flex;
-		padding: 0 10rpx;
-		height: 40rpx;
-		line-height: 40rpx;
-		margin-top: 20rpx;
+		align-items: center;
+		gap: 3rpx;
+		color: #a1aaa6;
+		font-size: 17rpx;
 	}
 
-	.c-5 {
-		flex: 1;
-		font-size: 36rpx;
-		color: red;
-		font-weight: 700;
+	.empty-state {
+		padding: 100rpx 0;
+		color: #77827d;
+		font-size: 27rpx;
+		text-align: center;
 	}
 
-	.c-6 {
-		color: rgba(0, 35, 28, 0.6);
+	.empty-state view {
+		margin-top: 14rpx;
+		font-weight: 700;
 	}
 
-	.c-7 {
-		height: 48rpx;
-		line-height: 48rpx;
-		display: flex;
-		margin-top: 20rpx;
-		padding:0 10rpx;
-		img {
-			width: 48rpx;
-			height: 48rpx;
-			background-size: 100%;
-			border-radius: 48rpx;
-		}
+	.empty-state text {
+		display: block;
+		margin-top: 8rpx;
+		color: #aab3af;
+		font-size: 21rpx;
 	}
 
-	.c-8 {
-		padding-left: 20rpx;
-		color: rgba(0, 35, 28, 0.6)
+	.bottom-space {
+		height: calc(190rpx + constant(safe-area-inset-bottom));
+		height: calc(190rpx + env(safe-area-inset-bottom));
 	}
-</style>
\ No newline at end of file
+</style>