school_uni/package2/IdleTrad/wantList.vue

<template>
	<view class="want-page">
		<view class="fixed-header" :style="{ paddingTop: statusBarTop + 'px' }">
			<view class="nav-row">
				<view class="back" @tap="back"><uni-icons type="left" size="22" color="#15362f"></uni-icons></view>
				<view class="title-wrap">
					<view class="title">求购广场</view>
					<view class="subtitle">看看同学们正在找什么</view>
				</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 class="sort-row">
				<view class="sort-item" :class="{ active: sortType == item.key }" v-for="item in sortList" :key="item.key" @tap="changeSort(item.key)">
					{{item.name}}
				</view>
			</view>
			<scroll-view class="category-scroll" scroll-x :show-scrollbar="false">
				<view class="category-inner">
					<view
						class="category-item"
						:class="{ active: categoryIndex == index }"
						v-for="(item,index) in categoryOptions"
						:key="item.key"
						@tap="changeCategory(index)"
					>{{item.name}}</view>
				</view>
			</scroll-view>
		</view>

		<scroll-view
			class="want-scroll"
			scroll-y
			:style="{ paddingTop: headerHeight + 'px' }"
			:show-scrollbar="false"
			@scrolltolower="loadMore"
		>
			<view class="scroll-content">
				<view class="goods-grid" v-if="wantList.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
									v-if="item.pic"
									class="goods-image"
									:src="item.pic"
									mode="aspectFill"
									:data-want-id="item.id"
									@load="onImageLoad"
								></image>
								<view v-else class="no-image">暂无图片</view>
								<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-if="item.category">{{item.category}}</text>
									<text>求购</text>
								</view>
								<view class="price-row">
									<view class="current-price"><text>预算 ¥</text>{{item.price}}</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">
										<uni-icons type="eye" size="16" color="#a5aeab"></uni-icons>
										<text>{{item.browseCount}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="empty-state" v-else-if="!loading">
					<uni-icons type="search" size="38" color="#b8c2be"></uni-icons>
					<view>没有找到相关求购</view>
					<text>换个关键词试试吧</text>
				</view>
				<view class="load-more" v-if="loading">加载中...</view>
				<view class="load-more" v-else-if="wantList.length && pageNum >= totalPages">没有更多了</view>
				<view class="bottom-space"></view>
			</view>
		</scroll-view>
	</view>
</template>

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

	export default {
		data() {
			return {
				statusBarTop: 24,
				keyword: '',
				sortType: 'latest',
				sortList: [
					{ key: 'latest', name: '最新' },
					{ key: 'hot', name: '热门' },
					{ key: 'priceAsc', name: '预算低到高' },
					{ key: 'priceDesc', name: '预算高到低' }
				],
				categoryIndex: 0,
				categoryList: [],
				wantList: [],
				pageNum: 1,
				pageSize: 10,
				totalPages: 1,
				loading: false,
				defaultCover: '/static/images/img/songshu.png'
			}
		},
		computed: {
			headerHeight() {
				return this.statusBarTop + uni.upx2px(302)
			},
			categoryOptions() {
				return [{ id: '', name: '全部', key: 'all' }].concat(this.categoryList.map(item => ({
					...item,
					key: item.id || item.name
				})))
			},
			waterfallColumns() {
				const columns = [[], []]
				const columnHeights = [0, 0]
				this.wantList.forEach(item => {
					const targetColumn = columnHeights[0] <= columnHeights[1] ? 0 : 1
					columns[targetColumn].push(item)
					columnHeights[targetColumn] += this.getImageHeight(item) + 190
				})
				return columns
			}
		},
		onLoad() {
			if (uni.getMenuButtonBoundingClientRect) {
				this.statusBarTop = uni.getMenuButtonBoundingClientRect().top || this.statusBarTop
			}
			this.loadCategories()
			this.reload()
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			handleSearch() {
				uni.hideKeyboard()
				this.reload()
			},
			changeSort(key) {
				if (this.sortType == key) return
				this.sortType = key
				this.reload()
			},
			changeCategory(index) {
				if (this.categoryIndex == index) return
				this.categoryIndex = index
				this.reload()
			},
			loadCategories() {
				const area = this.getArea()
				listFishCategories(area.id || '').then(list => {
					this.categoryList = Array.isArray(list) ? list : []
				}).catch(() => {})
			},
			reload() {
				this.pageNum = 1
				this.totalPages = 1
				this.wantList = []
				this.loadWants()
			},
			loadMore() {
				if (this.loading || this.pageNum >= this.totalPages) return
				this.pageNum += 1
				this.loadWants()
			},
			loadWants() {
				if (this.loading) return
				this.loading = true
				const area = this.getArea()
				const category = this.categoryOptions[this.categoryIndex] || {}
				pageFishWants({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					titleKeyword: this.keyword,
					sortType: this.sortType,
					regionId: area.id || '',
					categoryId: category.id || '',
					status: 1,
					auditStatus: 1
				}).then(page => {
					const records = this.normalizeRecords(page && (page.records || page.content))
					this.totalPages = Number(page && (page.pages || page.totalPages)) || 1
					this.wantList = this.pageNum == 1 ? records : this.wantList.concat(records)
				}).finally(() => {
					this.loading = false
				})
			},
			normalizeRecords(records) {
				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 imageList = item.imageList && item.imageList.length ? item.imageList : images
					return {
						raw: item,
						id: item.id,
						pic: item.coverImage || imageList[0] || '',
						text: item.title || '',
						price: item.expectedPrice || 0,
						icon: item.userAvatar || this.defaultCover,
						shopName: item.userName || '校园同学',
						regionName: item.regionName || item.schoolName || item.areaName || fallbackRegionName,
						category: item.categoryName || '',
						browseCount: item.browseCount || 0
					}
				})
			},
			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 wantId = String(dataset.wantId || '')
				const item = this.wantList.find(want => String(want.id) === wantId)
				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)
				}
			},
			goDetail(item) {
				if (!item || !item.id) return
				uni.navigateTo({
					url: '/package2/IdleTrad/detail?type=want&id=' + item.id
				})
			}
		}
	}
</script>

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

	.want-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: 20;
		padding-left: 26rpx;
		padding-right: 26rpx;
		padding-bottom: 18rpx;
		background: linear-gradient(180deg, #e4faf1 0%, rgba(247, 249, 247, 0.96) 100%);
		box-shadow: 0 8rpx 24rpx rgba(22, 85, 66, 0.06);
	}

	.nav-row {
		height: 72rpx;
		display: flex;
		align-items: center;
	}

	.back {
		width: 64rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
	}

	.title-wrap {
		flex: 1;
	}

	.title {
		color: #17362f;
		font-size: 34rpx;
		font-weight: 900;
	}

	.subtitle {
		margin-top: 2rpx;
		color: #739187;
		font-size: 20rpx;
	}

	.search-bar {
		height: 68rpx;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
		padding: 0 16rpx 0 22rpx;
		border-radius: 38rpx;
		background: #fff;
		box-shadow: 0 10rpx 30rpx rgba(31, 73, 58, 0.08);
	}

	.search-input {
		flex: 1;
		height: 68rpx;
		margin-left: 10rpx;
		font-size: 25rpx;
		color: #21342e;
	}

	.search-placeholder {
		color: #9ba7a3;
	}

	.search-button {
		min-width: 88rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		border-radius: 28rpx;
		color: #fff;
		font-size: 23rpx;
		font-weight: 800;
		background: linear-gradient(135deg, #37c990, #19af7e);
	}

	.sort-row {
		margin-top: 18rpx;
		display: flex;
		gap: 14rpx;
		overflow: hidden;
	}

	.sort-item {
		padding: 12rpx 18rpx;
		border-radius: 999rpx;
		background: rgba(255, 255, 255, 0.72);
		color: #62736e;
		font-size: 23rpx;
		font-weight: 800;
		white-space: nowrap;
	}

	.sort-item.active {
		color: #15362f;
		background: #c8f7e2;
	}

	.category-scroll {
		margin-top: 16rpx;
		width: 100%;
		white-space: nowrap;
	}

	.category-inner {
		display: inline-flex;
		align-items: center;
		gap: 14rpx;
		padding-right: 10rpx;
	}

	.category-item {
		padding: 12rpx 22rpx;
		border-radius: 999rpx;
		background: rgba(255, 255, 255, .76);
		color: #6f817c;
		font-size: 23rpx;
		font-weight: 800;
	}

	.category-item.active {
		background: linear-gradient(135deg, #37c990, #19af7e);
		color: #fff;
		box-shadow: 0 8rpx 18rpx rgba(25, 175, 126, .16);
	}

	.want-scroll {
		height: 100%;
		box-sizing: border-box;
	}

	.scroll-content {
		padding: 24rpx 24rpx 0;
		box-sizing: border-box;
	}

	.goods-grid {
		display: flex;
		gap: 18rpx;
		align-items: flex-start;
	}

	.waterfall-column {
		flex: 1;
		min-width: 0;
	}

	.goods-card {
		overflow: hidden;
		margin-bottom: 18rpx;
		border-radius: 26rpx;
		background: #fff;
		box-shadow: 0 10rpx 28rpx rgba(20, 60, 48, 0.06);
	}

	.goods-image-box {
		position: relative;
		width: 100%;
		min-height: 220rpx;
		background: #edf4f1;
	}

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

	.no-image {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #92a39d;
		background: linear-gradient(135deg, #eef6f2, #f8fbf9);
		font-size: 25rpx;
		font-weight: 900;
	}

	.distance-tag {
		position: absolute;
		left: 14rpx;
		bottom: 14rpx;
		padding: 6rpx 14rpx;
		border-radius: 20rpx;
		color: #fff;
		background: rgba(17, 39, 32, 0.58);
		font-size: 20rpx;
		font-weight: 700;
	}

	.goods-info {
		padding: 18rpx 18rpx 20rpx;
	}

	.goods-title {
		color: #17241f;
		font-size: 27rpx;
		line-height: 38rpx;
		font-weight: 800;
	}

	.goods-tags {
		margin-top: 12rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 8rpx;
	}

	.goods-tags text {
		padding: 5rpx 12rpx;
		border-radius: 14rpx;
		color: #3bb68a;
		background: #e8fbf3;
		font-size: 19rpx;
		font-weight: 800;
	}

	.price-row {
		margin-top: 14rpx;
		display: flex;
		align-items: baseline;
	}

	.current-price {
		color: #ef4c3f;
		font-size: 32rpx;
		font-weight: 900;
	}

	.current-price text {
		font-size: 21rpx;
	}

	.seller-row {
		margin-top: 14rpx;
		display: flex;
		align-items: center;
		color: #86928e;
		font-size: 21rpx;
	}

	.seller-avatar {
		width: 34rpx;
		height: 34rpx;
		margin-right: 8rpx;
		border-radius: 50%;
		background: #edf4f1;
	}

	.seller-name {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.want-count {
		display: flex;
		align-items: center;
		gap: 4rpx;
	}

	.empty-state,
	.load-more {
		padding: 90rpx 0;
		color: #9aa8a4;
		text-align: center;
		font-size: 24rpx;
	}

	.empty-state view {
		margin-top: 18rpx;
		color: #65736f;
		font-size: 27rpx;
		font-weight: 900;
	}

	.empty-state text {
		display: block;
		margin-top: 8rpx;
		font-size: 22rpx;
	}

	.bottom-space {
		height: 80rpx;
	}
</style>