new-88live/pages/account/feedback-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>
							<view v-if="item.score > 0" class="fb-list-stars">
								<text
									v-for="n in 5"
									:key="n"
									class="fb-list-star"
									:class="{ 'fb-list-star--on': item.score >= n }"
								>★</text>
							</view>
						</view>

						<view v-if="item.status_text" class="fb-list-status">
							<text class="fb-list-status-tag">{{ item.status_text }}</text>
						</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.contact" class="fb-list-contact">
							<text class="fb-list-contact-label">{{ copy.contactLabel }}</text>
							<text class="fb-list-contact-text">{{ item.contact }}</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 { fetchFeedbackListPage } from '@/features/account/feedback-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('feedback.myList'),
				loading: t('feedback-lists.loading'),
				empty: t('feedback.no-feedback-found'),
				noContent: t('feedback-lists.no-content'),
				contactLabel: t('feedback-lists.contactLabel'),
				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)
				: ''
		},
		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'
			})
		},
		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 fetchFeedbackListPage(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-scroll {
	width: 100%;
}

.cp-list-body {
	padding: 24rpx;
	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;
	gap: 24rpx;
}

.cp-list-card {
	background-color: #ffffff;
	border-radius: 24rpx;
	padding: 28rpx;
	box-shadow: 0 8rpx 32rpx rgba(26, 29, 38, 0.04);
}

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

.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: 50%;
	background-color: #eef1f6;
	flex-shrink: 0;
}

.cp-list-user-meta {
	margin-left: 16rpx;
	flex: 1;
	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: 4rpx;
	font-size: 24rpx;
	color: #8a8d9e;
}

.fb-list-stars {
	display: flex;
	flex-direction: row;
	flex-shrink: 0;
	margin-left: 12rpx;
}

.fb-list-star {
	font-size: 28rpx;
	color: #d5dae6;
	line-height: 1;
}

.fb-list-star--on {
	color: #f59e0b;
}

.fb-list-status {
	margin-bottom: 12rpx;
}

.fb-list-status-tag {
	display: inline-block;
	padding: 4rpx 16rpx;
	font-size: 22rpx;
	color: #4a8cff;
	background-color: rgba(74, 140, 255, 0.1);
	border-radius: 8rpx;
}

.cp-list-content {
	display: block;
	font-size: 28rpx;
	color: #3d4150;
	line-height: 1.55;
	word-break: break-word;
}

.cp-list-images {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 20rpx;
	gap: 12rpx;
}

.cp-list-images--1 .cp-list-img-cell {
	width: 100%;
	height: 360rpx;
}

.cp-list-images--2 .cp-list-img-cell,
.cp-list-images--3 .cp-list-img-cell {
	width: calc(33.33% - 8rpx);
	height: 200rpx;
}

.cp-list-img-cell {
	border-radius: 16rpx;
	overflow: hidden;
	background-color: #f0f3f8;
}

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

.fb-list-contact {
	margin-top: 20rpx;
	padding: 16rpx 20rpx;
	background-color: #f7f9fc;
	border-radius: 12rpx;
}

.fb-list-contact-label {
	display: block;
	font-size: 22rpx;
	color: #8a8d9e;
	margin-bottom: 6rpx;
}

.fb-list-contact-text {
	font-size: 26rpx;
	color: #3d4150;
	word-break: break-all;
}
</style>