new-88live/pages/account/complaint-lists.vue

<template>
	<view class="cp-list-page">
		<view class="cp-list-nav" :style="{ paddingTop: statusBar + 'px' }">
			<view class="cp-list-nav-row">
				<view class="cp-list-back" @tap="goBack">
					<text class="cp-list-back-icon">←</text>
				</view>
				<text class="cp-list-nav-title">{{ copy.title }}</text>
				<view class="cp-list-nav-placeholder" />
			</view>
		</view>

		<scroll-view
			scroll-y
			class="cp-list-scroll"
			:style="{ height: scrollHeight + 'px' }"
			:lower-threshold="120"
			@scrolltolower="onScrollToLower"
		>
			<view class="cp-list-body" :style="{ paddingBottom: safeBottom + 'px' }">
				<view v-if="loading && !rows.length" class="cp-list-state">
					<text class="cp-list-state-txt">{{ copy.loading }}</text>
				</view>

				<empty
					v-else-if="loaded && !rows.length"
					:text="copy.empty"
				/>

				<view v-else class="cp-list-stack">
					<view
						v-for="item in rows"
						:key="item.id"
						class="cp-list-card"
					>
						<view class="cp-list-card-head">
							<view class="cp-list-user">
								<image
									class="cp-list-avatar"
									:src="avatarUrl"
									mode="aspectFill"
								/>
								<view class="cp-list-user-meta">
									<text class="cp-list-user-name">{{ nickname }}</text>
									<text class="cp-list-user-time">{{ timeText(item.createtime) }}</text>
								</view>
							</view>
							<text
								v-if="item.state_text"
								class="cp-list-badge"
							>{{ item.state_text }}</text>
						</view>

						<view
							v-if="goodsCard(item)"
							class="cp-list-goods"
							@tap="openGoods(goodsCard(item))"
						>
							<image
								class="cp-list-goods-cover"
								:src="goodsCover(goodsCard(item))"
								mode="aspectFill"
							/>
							<view class="cp-list-goods-body">
								<text class="cp-list-goods-title">{{ goodsCard(item).title }}</text>
								<view class="cp-list-goods-foot">
									<text v-if="goodsCard(item).price" class="cp-list-goods-price">{{ goodsCard(item).price }}</text>
									<text v-if="item.reason_text" class="cp-list-goods-reason">{{ item.reason_text }}</text>
								</view>
							</view>
						</view>

						<text class="cp-list-content">{{ item.content || copy.noContent }}</text>

						<view
							v-if="item.images && item.images.length"
							class="cp-list-images"
							:class="'cp-list-images--' + imageColClass(item.images.length)"
						>
							<view
								v-for="(image, index) in item.images"
								:key="index"
								class="cp-list-img-cell"
								@tap="previewImages(item.images, index)"
							>
								<image
									class="cp-list-img"
									:src="imageThumb(image)"
									mode="aspectFill"
								/>
							</view>
						</view>

						<view v-if="item.state === 'hidden' && item.receipt" class="cp-list-receipt">
							<text class="cp-list-receipt-label">{{ copy.processResult }}</text>
							<text class="cp-list-receipt-text">{{ item.receipt }}</text>
						</view>
					</view>
				</view>

				<uni-load-more
					v-if="rows.length"
					:status="loadStatus"
					:content-text="loadMoreText"
				/>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { mapState } from 'vuex'
import { fetchComplaintListPage } from '@/features/account/complaint-gateway'

export default {
	data() {
		return {
			statusBar: 0,
			scrollHeight: 600,
			safeBottom: 0,
			rows: [],
			page: 1,
			lastPage: 1,
			loading: false,
			loaded: false,
			loadStatus: 'more'
		}
	},
	computed: {
		...mapState('user', {
			profile: (state) => state
		}),
		copy() {
			const t = this.$t.bind(this)
			return {
				title: t('user.myReports'),
				loading: t('complaint-lists.loading'),
				empty: t('complaint-lists.no-complaint'),
				noContent: t('complaint-lists.no-content'),
				processResult: t('complaint-lists.process-result'),
				network: t('user.realnameNetworkError')
			}
		},
		nickname() {
			return (this.profile && this.profile.nickname) || this.$t('complaint.guest')
		},
		avatarUrl() {
			const raw = (this.profile && this.profile.avatar) || ''
			return this.$appKit && this.$appKit.oss
				? this.$appKit.oss(raw, 72, 72, 2, 'avatar')
				: raw
		},
		loadMoreText() {
			return {
				contentdown: ' ',
				contentrefresh: this.copy.loading,
				contentnomore: ''
			}
		}
	},
	onLoad() {
		const sys = uni.getSystemInfoSync()
		this.statusBar = sys.statusBarHeight || 0
		this.safeBottom = sys.safeAreaInsets ? sys.safeAreaInsets.bottom : 0
		const navH = this.statusBar + uni.upx2px(88)
		this.scrollHeight = (sys.windowHeight || 667) - navH
		this.reloadList()
	},
	onPullDownRefresh() {
		this.reloadList()
	},
	methods: {
		goBack() {
			if (getCurrentPages().length > 1) {
				uni.navigateBack({ delta: 1 })
			} else {
				uni.switchTab({
					url: '/pages/mine/index',
					fail: () => uni.reLaunch({ url: '/pages/mine/index' })
				})
			}
		},
		timeText(ts) {
			return this.$appKit && this.$appKit.timeToDate
				? this.$appKit.timeToDate(ts)
				: ''
		},
		goodsCard(item) {
			if (!item) return null
			if (Number(item.type) === 1 && item.goods) return item.goods
			if (Number(item.type) === 3 && item.groups) return item.groups
			return null
		},
		goodsCover(goods) {
			const raw = goods && goods.image
			return this.$appKit && this.$appKit.oss ? this.$appKit.oss(raw, 132, 132) : raw
		},
		imageColClass(count) {
			if (count > 3) return '3'
			return String(count || 1)
		},
		imageThumb(url) {
			return this.$appKit && this.$appKit.oss ? this.$appKit.oss(url, 248, 0) : url
		},
		previewImages(images, index) {
			const urls = images.map((item) =>
				this.$appKit.oss ? this.$appKit.oss(item, 500) : item
			)
			uni.previewImage({
				urls,
				current: urls[index],
				indicator: 'number'
			})
		},
		openGoods(goods) {
			if (!goods || !goods.id) return
			if (typeof this.$appKit.onGoods === 'function') {
				this.$appKit.onGoods(goods.id)
			}
		},
		reloadList() {
			this.page = 1
			this.lastPage = 1
			this.rows = []
			this.loaded = false
			this.loadStatus = 'more'
			this.loadPage(true)
		},
		onScrollToLower() {
			if (this.loading || this.page >= this.lastPage) {
				this.loadStatus = 'noMore'
				return
			}
			this.page += 1
			this.loadStatus = 'loading'
			this.loadPage(false)
		},
		async loadPage(replace) {
			if (this.loading) return
			this.loading = true
			try {
				const res = await fetchComplaintListPage(this.page)
				this.rows = replace ? res.rows : this.rows.concat(res.rows)
				this.page = res.currentPage
				this.lastPage = res.lastPage
				this.loadStatus = res.total === 0 || this.page >= this.lastPage ? 'noMore' : 'more'
			} catch (err) {
				this.$appKit.msg((err && err.message) || this.copy.network)
				this.loadStatus = 'more'
			} finally {
				this.loading = false
				this.loaded = true
				uni.stopPullDownRefresh()
			}
		}
	}
}
</script>

<style scoped>
.cp-list-page {
	min-height: 100vh;
	background-color: #f4f6fb;
}

.cp-list-nav {
	background-color: #ffffff;
	border-bottom: 1rpx solid #eef1f6;
}

.cp-list-nav-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 88rpx;
	padding: 0 24rpx;
	box-sizing: border-box;
}

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

.cp-list-back-icon {
	font-size: 40rpx;
	color: #1a1d26;
	line-height: 1;
}

.cp-list-nav-title {
	flex: 1;
	text-align: center;
	font-size: 32rpx;
	font-weight: 600;
	color: #1a1d26;
}

.cp-list-nav-placeholder {
	width: 64rpx;
}

.cp-list-body {
	padding: 24rpx 28rpx 0;
	box-sizing: border-box;
}

.cp-list-state {
	padding: 80rpx 0;
	text-align: center;
}

.cp-list-state-txt {
	font-size: 28rpx;
	color: #8a8d9e;
}

.cp-list-stack {
	display: flex;
	flex-direction: column;
}

.cp-list-card {
	background-color: #ffffff;
	border-radius: 24rpx;
	padding: 28rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 6rpx 24rpx rgba(74, 140, 255, 0.06);
}

.cp-list-card-head {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.cp-list-user {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex: 1;
	min-width: 0;
}

.cp-list-avatar {
	width: 72rpx;
	height: 72rpx;
	border-radius: 36rpx;
	background-color: #eef1f6;
	flex-shrink: 0;
}

.cp-list-user-meta {
	margin-left: 16rpx;
	min-width: 0;
}

.cp-list-user-name {
	display: block;
	font-size: 28rpx;
	font-weight: 600;
	color: #1a1d26;
}

.cp-list-user-time {
	display: block;
	margin-top: 6rpx;
	font-size: 24rpx;
	color: #8a8d9e;
}

.cp-list-badge {
	flex-shrink: 0;
	margin-left: 12rpx;
	padding: 6rpx 16rpx;
	border-radius: 999rpx;
	font-size: 22rpx;
	color: #ea580c;
	background-color: #fff7ed;
}

.cp-list-goods {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 16rpx;
	margin-bottom: 20rpx;
	border-radius: 16rpx;
	background-color: #f7f9fc;
}

.cp-list-goods-cover {
	width: 96rpx;
	height: 96rpx;
	border-radius: 12rpx;
	background-color: #eef1f6;
	flex-shrink: 0;
}

.cp-list-goods-body {
	flex: 1;
	margin-left: 16rpx;
	min-width: 0;
}

.cp-list-goods-title {
	display: block;
	font-size: 28rpx;
	color: #1a1d26;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cp-list-goods-foot {
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 8rpx;
	gap: 12rpx;
}

.cp-list-goods-price {
	font-size: 26rpx;
	font-weight: 600;
	color: #ef4444;
}

.cp-list-goods-reason {
	font-size: 24rpx;
	color: #ea580c;
}

.cp-list-content {
	display: block;
	font-size: 28rpx;
	line-height: 1.55;
	color: #374151;
	margin-bottom: 16rpx;
}

.cp-list-images {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: -6rpx;
	margin-bottom: 16rpx;
}

.cp-list-images--1 .cp-list-img-cell {
	width: calc(60% - 12rpx);
}

.cp-list-images--2 .cp-list-img-cell,
.cp-list-images--3 .cp-list-img-cell {
	width: calc(33.333% - 12rpx);
}

.cp-list-img-cell {
	margin: 6rpx;
	height: 200rpx;
	border-radius: 12rpx;
	overflow: hidden;
}

.cp-list-img {
	width: 100%;
	height: 100%;
}

.cp-list-receipt {
	padding: 16rpx 20rpx;
	border-radius: 12rpx;
	background-color: #f0f7ff;
}

.cp-list-receipt-label {
	display: block;
	font-size: 24rpx;
	font-weight: 600;
	color: #4a8cff;
	margin-bottom: 8rpx;
}

.cp-list-receipt-text {
	display: block;
	font-size: 26rpx;
	line-height: 1.5;
	color: #4b5563;
}
</style>