school_uni/package2/IdleTrad/sessionList.vue

<template>
	<view class="session-page">
		<view class="header" :style="{ paddingTop: statusBarTop + 'px' }">
			<view class="back" @tap="back"><uni-icons type="left" size="22" color="#15362f"></uni-icons></view>
			<view class="title">我的咨询</view>
			<view class="subtitle">我咨询的和咨询我的都在这里</view>
		</view>

		<scroll-view scroll-y class="session-list" @scrolltolower="loadMore">
			<view class="session-card" v-for="item in list" :key="item.id" @tap="openChat(item)">
				<image class="cover" :src="item.goodsCover || defaultCover" mode="aspectFill"></image>
				<view class="main">
					<view class="top-row">
						<view class="goods-title">{{item.goodsTitle || '校园二手商品'}}</view>
						<view class="role-tag" :class="{ seller: item.role == 'seller' }">{{item.roleText}}</view>
					</view>
					<view class="goods-meta">
						<text v-if="item.goodsPrice !== ''">¥{{item.goodsPrice}}</text>
						<text>{{item.lastChatTime || item.firstConsultTime || item.createTime || ''}}</text>
					</view>
					<view class="session-desc">{{item.desc}}</view>
				</view>
			</view>

			<view class="empty" v-if="!list.length && !loading">暂无咨询记录</view>
			<view class="load-more" v-if="loading">加载中...</view>
			<view class="load-more" v-else-if="list.length && pageNum >= totalPages">没有更多了</view>
			<view class="bottom-space"></view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		pageMyFishSessions,
		getFishGoodsDetail
	} from '@/common/fishMarketApi.js'

	export default {
		data() {
			return {
				statusBarTop: 24,
				list: [],
				pageNum: 1,
				pageSize: 10,
				totalPages: 1,
				loading: false,
				selfId: String(uni.getStorageSync('id') || ''),
				defaultCover: '/static/images/img/songshu.png'
			}
		},
		onLoad() {
			if (uni.getMenuButtonBoundingClientRect) {
				this.statusBarTop = uni.getMenuButtonBoundingClientRect().top || this.statusBarTop
			}
			this.load()
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			loadMore() {
				if (this.loading || this.pageNum >= this.totalPages) return
				this.pageNum += 1
				this.load()
			},
			load() {
				if (this.loading) return
				this.loading = true
				pageMyFishSessions({
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}).then(async page => {
					const records = page && (page.records || page.content) ? (page.records || page.content) : []
					this.totalPages = Number(page && (page.pages || page.totalPages)) || 1
					const normalized = await this.normalizeSessions(records)
					this.list = this.pageNum == 1 ? normalized : this.list.concat(normalized)
				}).finally(() => {
					this.loading = false
				})
			},
			async normalizeSessions(records) {
				const result = []
				for (let i = 0; i < records.length; i += 1) {
					const session = records[i]
					let goods = null
					if (session.goodsId) {
						goods = await getFishGoodsDetail(session.goodsId).catch(() => null)
					}
					const role = String(session.sellerId) == this.selfId ? 'seller' : 'buyer'
					const imageList = goods && goods.imageList ? goods.imageList : []
					result.push({
						...session,
						role,
						roleText: role == 'seller' ? '咨询我的' : '我咨询的',
						goodsTitle: goods ? goods.title : '',
						goodsCover: goods ? (goods.coverImage || imageList[0] || '') : '',
						goodsPrice: goods && goods.price !== undefined ? goods.price : '',
						desc: role == 'seller' ? '买家正在咨询这件商品' : '你正在咨询这件商品'
					})
				}
				return result
			},
			openChat(item) {
				const sessionId = item.sessionId || item.id
				if (!sessionId) return
				uni.navigateTo({
					url: `/package2/IdleTrad/chat?sessionId=${sessionId}&goodsId=${item.goodsId || ''}`
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f9f7;
	}

	.session-page {
		min-height: 100vh;
		background: linear-gradient(180deg, #e8fbf3 0%, #f7f9f7 300rpx);
		color: #15362f;
	}

	.header {
		padding: 0 28rpx 24rpx;
	}

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

	.title {
		margin-top: 8rpx;
		font-size: 42rpx;
		font-weight: 900;
	}

	.subtitle {
		margin-top: 8rpx;
		color: #71857f;
		font-size: 23rpx;
	}

	.session-list {
		height: calc(100vh - 190rpx);
	}

	.session-card {
		margin: 18rpx 24rpx 0;
		padding: 18rpx;
		display: flex;
		align-items: center;
		border-radius: 26rpx;
		background: #fff;
		box-shadow: 0 10rpx 26rpx rgba(20, 60, 48, 0.06);
	}

	.cover {
		width: 132rpx;
		height: 132rpx;
		border-radius: 20rpx;
		background: #edf4f1;
		flex-shrink: 0;
	}

	.main {
		flex: 1;
		min-width: 0;
		margin-left: 18rpx;
	}

	.top-row {
		display: flex;
		align-items: center;
	}

	.goods-title {
		flex: 1;
		overflow: hidden;
		font-size: 28rpx;
		font-weight: 900;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.role-tag {
		margin-left: 12rpx;
		padding: 6rpx 14rpx;
		border-radius: 18rpx;
		background: #e8fbf3;
		color: #18a878;
		font-size: 20rpx;
		font-weight: 900;
	}

	.role-tag.seller {
		background: #fff2df;
		color: #df8618;
	}

	.goods-meta {
		margin-top: 10rpx;
		display: flex;
		gap: 18rpx;
		color: #8a9994;
		font-size: 21rpx;
	}

	.goods-meta text:first-child {
		color: #ef4c3f;
		font-weight: 900;
	}

	.session-desc {
		margin-top: 10rpx;
		color: #61736e;
		font-size: 23rpx;
	}

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

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