school_uni/components/tab-bar/postList.vue

<template>
	<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>

		<scroll-view
			class="market-scroll"
			scroll-y
			:style="{ paddingTop: headerHeight + 'px' }"
			:show-scrollbar="false"
			@scrolltolower="loadMore"
		>
			<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>

				<view class="hero-dots">
					<view class="hero-dot hero-dot--active"></view>
					<view class="hero-dot"></view>
					<view class="hero-dot"></view>
				</view>
				-->
				<view class="shortcut-list">
					<view
						class="shortcut-item"
						:class="{ 'shortcut-item--publish': item.action == 'publishSell' }"
						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 class="shortcut-badge" v-if="item.action == 'sessions' && fishUnread > 0">{{formatBadgeCount(fishUnread)}}</view>
						</view>
						<view class="shortcut-name">{{item.name}}</view>
						<view class="shortcut-desc">{{item.action == 'publishSell' ? '点我发布' : item.desc}}</view>
					</view>
				</view>

				<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 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.regionName}}</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">半径卖家</text>
									<view class="want-count" @tap.stop="toggleLike(item)">
										<uni-icons
											:type="item.liked ? 'heart-filled' : 'heart'"
											size="20"
											:color="item.liked ? '#27b889' : '#a5aeab'"
										></uni-icons>
										<text>{{item.xiangyao}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</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>
		</scroll-view>
		<view class="page-like-effect" v-if="pageLikeEffects.length">
			<view
				class="page-like-heart"
				:class="effect.className"
				:style="effect.style"
				v-for="effect in pageLikeEffects"
				:key="effect.id"
			>
				<view class="page-like-heart-shape"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listFishCategories,
		pageFishGoods,
		pageFishWants,
		toggleFishLike,
		getFishUnreadSummary
	} from '@/common/fishMarketApi.js'

	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 {
				menuButtonInfo: {},
				postListImages: {},
				keyword: '',
				categoryIndex: 0,
				shortcutList: [{
					name: '求购广场',
					desc: '大家想要的',
					category: '求购',
					imageKey: 'wanted',
					action: 'wantSquare'
				}, {
					name: '拼团购',
					desc: '暂未开放',
					category: '拼团购',
					imageKey: 'groupBuy',
					action: 'disabled'
				}, {
					name: '发布',
					desc: '极速买卖',
					category: '推荐',
					imageKey: 'quickSell',
					action: 'publishSell'
				},{
					name: '我的消息',
					desc: '买卖沟通',
					category: '推荐',
					imageKey: 'free',
					action: 'sessions'
				}, {
					name: '我的',
					desc: '个人中心',
					category: '我的',
					imageKey: 'graduation',
					action: 'mine'
				}],
				baseCategories: ['推荐', '最新'],
				categoryList: [],
				goodsList: [],
				pageNum: 1,
				pageSize: 10,
				totalPages: 1,
				loading: false,
				sortType: 'hot',
				likeEffectSeq: 0,
				likeEffectTimers: {},
				pageLikeEffects: [],
				fishUnread: 0
			}
		},
		computed: {
			categories() {
				return this.baseCategories.concat(this.categoryList.map(item => item.name))
			},
			statusBarTop() {
				return Number(this.menuButtonInfo.top) || 24
			},
			headerHeight() {
				// 头部实际高度：顶部安全区 + 品牌区 72rpx + 搜索栏 68rpx + 底部 18rpx
				return this.statusBarTop + uni.upx2px(158)
			},
			filteredGoods() {
				return this.goodsList
			},
			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
			}
		},
		created() {
			this.applyCachedPostListImages()
			uni.$on('fishUnreadChange', this.handleFishUnreadChange)
		},
		beforeDestroy() {
			Object.keys(this.likeEffectTimers || {}).forEach(key => {
				clearTimeout(this.likeEffectTimers[key])
			})
			this.likeEffectTimers = {}
			uni.$off('fishUnreadChange', this.handleFishUnreadChange)
		},
		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() {
				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
					}
				}
				this.loadCategories()
				this.loadFishUnread()
				this.reloadGoods()
			},
			formatBadgeCount(count) {
				const value = Number(count) || 0
				return value > 99 ? '99+' : value
			},
			loadFishUnread() {
				const token = uni.getStorageSync('hiver_token')
				if (!token) {
					this.fishUnread = 0
					return
				}
				getFishUnreadSummary().then(res => {
					this.fishUnread = Number(res && res.fishUnread) || 0
				}).catch(() => {
					this.fishUnread = 0
				})
			},
			handleFishUnreadChange(summary) {
				if (summary && summary.fishUnread !== undefined) {
					this.fishUnread = Number(summary.fishUnread) || 0
					return
				}
				this.loadFishUnread()
			},
			handleSearch() {
				uni.hideKeyboard()
				this.reloadGoods()
			},
			changeCategory(index) {
				this.categoryIndex = index
				this.reloadGoods()
			},
			selectShortcut(item) {
				if (!item) return
				if (item.action == 'disabled') {
					uni.showToast({
						title: item.name + '暂未开放',
						icon: 'none'
					})
					return
				}
				if (item.action == 'publishSell') {
					this.goPublish('sell')
					return
				}
				if (item.action == 'publishWant') {
					this.goPublish('want')
					return
				}
				if (item.action == 'mine') {
					this.goMyFish()
					return
				}
				if (item.action == 'sessions') {
					this.goFishSessions()
					return
				}
				if (item.action == 'wantSquare') {
					this.goWantSquare()
					return
				}
				const index = this.categories.indexOf(item.category)
				if (index > -1) {
					this.categoryIndex = index
					if (item.keyword) {
						this.keyword = item.keyword
					} else if (item.action != 'filter') {
						this.keyword = ''
					}
					this.reloadGoods()
				} else {
					this.keyword = item.keyword || item.name
					this.categoryIndex = 0
					this.reloadGoods()
				}
			},
			showFilterTip() {
				const sorts = ['推荐优先', '最新发布', '价格从低到高', '价格从高到低']
				uni.showActionSheet({
					itemList: sorts,
					success: (res) => {
						const map = ['hot', 'latest', 'priceAsc', 'priceDesc']
						this.sortType = map[res.tapIndex] || 'hot'
						this.reloadGoods()
					}
				})
			},
			openBlindBox() {
				uni.showToast({
					title: '幸运盲盒即将开放',
					icon: 'none'
				})
			},
			loadCategories() {
				const area = this.getArea()
				listFishCategories(area.id || '').then(list => {
					this.categoryList = Array.isArray(list) ? list : []
				}).catch(() => {})
			},
			reloadGoods() {
				this.pageNum = 1
				this.totalPages = 1
				this.goodsList = []
				this.loadGoods()
			},
			loadMore() {
				if (this.loading || this.pageNum >= this.totalPages) return
				this.pageNum += 1
				this.loadGoods()
			},
			loadGoods() {
				if (this.loading) return
				this.loading = true
				const category = this.categories[this.categoryIndex]
				const categoryItem = this.categoryList.find(item => item.name == category)
				const area = this.getArea()
				const sortType = this.sortType || (category == '附近' ? 'school' : (category == '最新' ? 'latest' : 'hot'))
				const query = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					keyword: this.keyword,
					regionId: area.id || '',
					sortType,
					categoryId: categoryItem ? categoryItem.id : '',
					status: 1,
					auditStatus: 1,
					offShelf: 0
				}
				const request = category == '求购' ? pageFishWants(query) : pageFishGoods(query)
				request.then(page => {
					const records = this.normalizeRecords(page && (page.records || page.content), category == '求购')
					this.totalPages = Number(page && (page.pages || page.totalPages)) || 1
					this.goodsList = this.pageNum == 1 ? records : this.goodsList.concat(records)
				}).finally(() => {
					this.loading = false
				})
			},
			normalizeRecords(records, isWant) {
				const area = this.getArea()
				const fallbackRegionName = area.title || area.name || uni.getStorageSync('schoolName') || '本校'
				return (Array.isArray(records) ? records : []).map(item => {
					const images = this.parseJsonList(item.images)
					const tags = this.parseJsonList(item.tags)
					return {
						raw: item,
						id: item.id,
						pic: item.coverImage || images[0] || '',
						text: item.title || '',
						price: isWant ? (item.expectedPrice || 0) : (item.price || 0),
						originalPrice: item.originPrice,
						xiangyao: item.likeCount || 0,
						distance: item.distance || '本校',
						icon: item.userAvatar || '/static/images/img/songshu.png',
						shopName: item.userName || '校园同学',
						regionName: item.regionName || item.schoolName || item.areaName || fallbackRegionName,
						tags: tags.length ? tags : (item.negotiable == 1 ? ['可小刀'] : []),
						category: item.categoryName || '',
						liked: !!item.liked,
						type: isWant ? 'want' : 'goods'
					}
				})
			},
			parseJsonList(value) {
				if (!value) return []
				if (Array.isArray(value)) return value
				try {
					const parsed = JSON.parse(value)
					return Array.isArray(parsed) ? parsed : []
				} catch (e) {
					return []
				}
			},
			getArea() {
				const area = uni.getStorageSync('area')
				if (!area) return {}
				if (typeof area === 'string') {
					try {
						return JSON.parse(area)
					} catch (e) {
						return {}
					}
				}
				return area
			},
			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) {
				if (!item || item.type == 'want') return
				if (!item.id) {
					uni.showToast({ title: '商品ID不能为空', icon: 'none' })
					return
				}
				const shouldAnimate = !item.liked
				if (shouldAnimate) {
					this.playLikeEffect(item)
				}
				toggleFishLike({ goodsId: item.id, likeType: 'goods' }).then(res => {
					if (!res) return
					item.liked = !!res.liked
					item.xiangyao = Number(res.count) || 0
				})
			},
			playLikeEffect(item) {
				const burstId = Date.now() + '-' + (++this.likeEffectSeq)
				const tracks = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight']
				const effects = tracks.map((name, index) => ({
					id: burstId + '-' + index,
					className: 'page-like-heart--' + name,
					style: `left:${6 + ((index * 59) % 86)}%; animation-delay:${index * 95}ms;`
				}))
				this.pageLikeEffects = effects
				const timerKey = 'page'
				if (this.likeEffectTimers[timerKey]) {
					clearTimeout(this.likeEffectTimers[timerKey])
				}
				this.likeEffectTimers[timerKey] = setTimeout(() => {
					if (this.pageLikeEffects.length && String(this.pageLikeEffects[0].id).indexOf(burstId) === 0) {
						this.pageLikeEffects = []
					}
					delete this.likeEffectTimers[timerKey]
				}, 3050)
			},
			goDetail(item) {
				if (!item) return
				if (item.type == 'want') {
					this.goPublish('sell')
					return
				}
				uni.navigateTo({
					url: '/package2/IdleTrad/detail?id=' + item.id
				})
			},
			goPublish(type) {
				uni.navigateTo({
					url: '/package1/tabbar/fishRelease?type=' + (type || 'sell')
				})
			},
			goMyFish() {
				uni.navigateTo({
					url: '/package2/myCenter/myPost'
				})
			},
			goFishSessions() {
				uni.navigateTo({
					url: '/package2/IdleTrad/sessionList'
				})
			},
			goWantSquare() {
				uni.navigateTo({
					url: '/package2/IdleTrad/wantList'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background: #f7f9f7;
		color: #17241f;
	}

	.market-page {
		width: 100%;
		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;
	}

	.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: 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;
	}

	.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;
		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;
		align-items: center;
		justify-content: center;
		gap: 10rpx;
	}

	.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;
		justify-content: space-between;
		padding: 8rpx 4rpx 22rpx;
	}

	.shortcut-item {
		width: 19%;
		position: relative;
		text-align: center;
	}

	.shortcut-item--publish {
		margin-top: 4rpx;
	}

	.shortcut-item--publish::before {
		content: '';
		position: absolute;
		left: 50%;
		top: -6rpx;
		width: 104rpx;
		height: 104rpx;
		border-radius: 30rpx;
		background: linear-gradient(180deg, #fff7df 0%, #fff 100%);
		box-shadow: 0 10rpx 24rpx rgba(255, 156, 24, 0.24);
		transform: translateX(-50%);
	}

	.shortcut-icon {
		width: 84rpx;
		height: 84rpx;
		margin: 0 auto 10rpx;
		position: relative;
	}

	.shortcut-item--publish .shortcut-icon {
		position: relative;
		z-index: 1;
		width: 98rpx;
		height: 98rpx;
		margin-bottom: 2rpx;
	}

	.shortcut-icon-image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.shortcut-badge {
		position: absolute;
		right: -8rpx;
		top: -8rpx;
		min-width: 30rpx;
		height: 30rpx;
		padding: 0 8rpx;
		border-radius: 18rpx;
		background: #ff4d5f;
		color: #fff;
		font-size: 18rpx;
		font-weight: 900;
		line-height: 30rpx;
		text-align: center;
		box-shadow: 0 6rpx 14rpx rgba(255, 77, 95, .26);
		box-sizing: border-box;
	}

	.shortcut-name {
		color: #29342f;
		font-size: 21rpx;
		font-weight: 800;
		white-space: nowrap;
	}

	.shortcut-item--publish .shortcut-name {
		position: relative;
		z-index: 1;
		color: #ff8a00;
		font-size: 25rpx;
		font-weight: 900;
	}

	.shortcut-desc {
		margin-top: 5rpx;
		color: #939c98;
		font-size: 17rpx;
		white-space: nowrap;
	}

	.shortcut-item--publish .shortcut-desc {
		position: relative;
		z-index: 1;
		margin-top: 1rpx;
		color: #ff9b1a;
		font-size: 18rpx;
		font-weight: 800;
	}

	.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;
	}

	.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;
	}

	.category-item--active::after {
		content: '';
		position: absolute;
		left: 50%;
		bottom: 5rpx;
		width: 40rpx;
		height: 6rpx;
		border-radius: 6rpx;
		background: #35c194;
		transform: translateX(-50%);
	}

	.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;
		box-shadow: 0 8rpx 24rpx rgba(24, 61, 49, 0.055);
	}

	.goods-image-box {
		position: relative;
		width: 100%;
		overflow: hidden;
		background: #edf2ef;
		transition: height 0.2s ease;
	}

	.goods-image {
		width: 100%;
		height: 100%;
	}

	.distance-tag {
		position: absolute;
		top: 1rpx;
		left: 1rpx;
		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;
	}

	.goods-info {
		padding: 15rpx 15rpx 17rpx;
	}

	.goods-title {
		height: 40rpx;
		overflow: hidden;
		color: #29332f;
		font-size: 25rpx;
		font-weight: 800;
		line-height: 40rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.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;
	}

	.goods-tags text:nth-child(2) {
		background: #fff0f4;
		color: #dc7794;
	}

	.price-row {
		height: 52rpx;
		display: flex;
		align-items: flex-end;
	}

	.current-price {
		color: #ef4c3f;
		font-family: Arial, sans-serif;
		font-size: 31rpx;
		font-weight: 900;
		line-height: 46rpx;
	}

	.current-price text {
		margin-right: 2rpx;
		font-size: 20rpx;
	}

	.original-price {
		margin-left: 10rpx;
		color: #a6aeaa;
		font-size: 18rpx;
		line-height: 42rpx;
		text-decoration: line-through;
	}

	.seller-row {
		height: 42rpx;
		display: flex;
		align-items: center;
	}

	.seller-avatar {
		width: 32rpx;
		height: 32rpx;
		flex-shrink: 0;
		border-radius: 50%;
		background: #e6eeea;
	}

	.seller-name {
		flex: 1;
		min-width: 0;
		margin-left: 8rpx;
		overflow: hidden;
		color: #87908c;
		font-size: 18rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.want-count {
		position: relative;
		display: flex;
		align-items: center;
		gap: 3rpx;
		color: #a1aaa6;
		font-size: 17rpx;
	}

	.page-like-effect {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
		pointer-events: none;
		z-index: 99999;
	}

	.page-like-heart {
		position: absolute;
		bottom: -230rpx;
		width: 120rpx;
		height: 120rpx;
		opacity: 0;
		transform-origin: center;
		animation-duration: 2600ms;
		animation-timing-function: cubic-bezier(.14, .66, .22, 1);
		animation-fill-mode: forwards;
	}

	.page-like-heart-shape {
		position: absolute;
		left: 50%;
		top: 50%;
		width: 72%;
		height: 72%;
		background: linear-gradient(135deg, rgba(255, 176, 207, .72), rgba(255, 88, 148, .36));
		border-radius: 18rpx 18rpx 10rpx 18rpx;
		box-shadow:
			0 18rpx 42rpx rgba(255, 104, 164, .28),
			inset 14rpx 18rpx 28rpx rgba(255, 255, 255, .32);
		filter: blur(.2rpx);
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.page-like-heart-shape::before,
	.page-like-heart-shape::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background: inherit;
		box-shadow: inherit;
	}

	.page-like-heart-shape::before {
		left: -50%;
		top: 0;
	}

	.page-like-heart-shape::after {
		left: 0;
		top: -50%;
	}

	.page-like-heart--one { width: 154rpx; height: 154rpx; animation-name: pageHeartFloatOne; }
	.page-like-heart--two { width: 112rpx; height: 112rpx; animation-name: pageHeartFloatTwo; }
	.page-like-heart--three { width: 188rpx; height: 188rpx; animation-name: pageHeartFloatThree; }
	.page-like-heart--four { width: 92rpx; height: 92rpx; animation-name: pageHeartFloatFour; }
	.page-like-heart--five { width: 136rpx; height: 136rpx; animation-name: pageHeartFloatFive; }
	.page-like-heart--six { width: 82rpx; height: 82rpx; animation-name: pageHeartFloatSix; }
	.page-like-heart--seven { width: 166rpx; height: 166rpx; animation-name: pageHeartFloatSeven; }
	.page-like-heart--eight { width: 104rpx; height: 104rpx; animation-name: pageHeartFloatEight; }

	.page-like-heart--three .page-like-heart-shape,
	.page-like-heart--seven .page-like-heart-shape {
		background: linear-gradient(135deg, rgba(255, 198, 220, .66), rgba(255, 103, 158, .28));
		filter: blur(1rpx);
	}

	.page-like-heart--four .page-like-heart-shape,
	.page-like-heart--six .page-like-heart-shape,
	.page-like-heart--eight .page-like-heart-shape {
		background: linear-gradient(135deg, rgba(255, 211, 226, .74), rgba(255, 126, 174, .32));
	}

	@keyframes pageHeartFloatOne {
		0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.68) rotate(-8deg); }
		14% { opacity: .82; transform: translate3d(-18rpx, -92rpx, 0) scale(1) rotate(5deg); }
		62% { opacity: .52; transform: translate3d(-72rpx, -370rpx, 0) scale(.94) rotate(-12deg); }
		100% { opacity: 0; transform: translate3d(-112rpx, -650rpx, 0) scale(.72) rotate(-22deg); }
	}

	@keyframes pageHeartFloatTwo {
		0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.62) rotate(6deg); }
		16% { opacity: .7; transform: translate3d(28rpx, -112rpx, 0) scale(.92) rotate(-6deg); }
		64% { opacity: .44; transform: translate3d(96rpx, -350rpx, 0) scale(.82) rotate(12deg); }
		100% { opacity: 0; transform: translate3d(146rpx, -600rpx, 0) scale(.62) rotate(22deg); }
	}

	@keyframes pageHeartFloatThree {
		0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.64) rotate(-4deg); }
		12% { opacity: .64; transform: translate3d(8rpx, -86rpx, 0) scale(.94) rotate(7deg); }
		60% { opacity: .38; transform: translate3d(-36rpx, -420rpx, 0) scale(.78) rotate(-12deg); }
		100% { opacity: 0; transform: translate3d(-68rpx, -710rpx, 0) scale(.58) rotate(-24deg); }
	}

	@keyframes pageHeartFloatFour {
		0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.58) rotate(12deg); }
		18% { opacity: .68; transform: translate3d(-26rpx, -124rpx, 0) scale(.86) rotate(-6deg); }
		66% { opacity: .4; transform: translate3d(-112rpx, -320rpx, 0) scale(.72) rotate(14deg); }
		100% { opacity: 0; transform: translate3d(-166rpx, -560rpx, 0) scale(.54) rotate(26deg); }
	}

	@keyframes pageHeartFloatFive {
		0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.64) rotate(-10deg); }
		14% { opacity: .72; transform: translate3d(34rpx, -96rpx, 0) scale(.96) rotate(6deg); }
		62% { opacity: .44; transform: translate3d(68rpx, -380rpx, 0) scale(.78) rotate(-10deg); }
		100% { opacity: 0; transform: translate3d(104rpx, -650rpx, 0) scale(.58) rotate(-20deg); }
	}

	@keyframes pageHeartFloatSix {
		0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.52) rotate(8deg); }
		20% { opacity: .64; transform: translate3d(6rpx, -132rpx, 0) scale(.8) rotate(-8deg); }
		68% { opacity: .36; transform: translate3d(44rpx, -290rpx, 0) scale(.64) rotate(12deg); }
		100% { opacity: 0; transform: translate3d(70rpx, -500rpx, 0) scale(.48) rotate(22deg); }
	}

	@keyframes pageHeartFloatSeven {
		0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.62) rotate(-8deg); }
		13% { opacity: .62; transform: translate3d(-28rpx, -82rpx, 0) scale(.88) rotate(6deg); }
		58% { opacity: .38; transform: translate3d(-86rpx, -390rpx, 0) scale(.72) rotate(-12deg); }
		100% { opacity: 0; transform: translate3d(-132rpx, -680rpx, 0) scale(.52) rotate(-22deg); }
	}

	@keyframes pageHeartFloatEight {
		0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.56) rotate(10deg); }
		18% { opacity: .66; transform: translate3d(38rpx, -118rpx, 0) scale(.84) rotate(-8deg); }
		64% { opacity: .4; transform: translate3d(122rpx, -338rpx, 0) scale(.68) rotate(14deg); }
		100% { opacity: 0; transform: translate3d(178rpx, -580rpx, 0) scale(.5) rotate(26deg); }
	}

	.empty-state {
		padding: 100rpx 0;
		color: #77827d;
		font-size: 27rpx;
		text-align: center;
	}

	.empty-state view {
		margin-top: 14rpx;
		font-weight: 700;
	}

	.empty-state text {
		display: block;
		margin-top: 8rpx;
		color: #aab3af;
		font-size: 21rpx;
	}

	.bottom-space {
		height: calc(190rpx + constant(safe-area-inset-bottom));
		height: calc(190rpx + env(safe-area-inset-bottom));
	}

</style>