mahjong_group/pages/other/faq.vue

<template>
	<view class="content column">
		<view class="row header-row" :style="{ marginTop: statusBarHeight + 'px' }">
			<image src="/static/back.png" class="back-icon" @click="goBack()" mode=""></image>
			<text class="page-title">常见问题</text>
			<view class="spacer-40"></view>
		</view>

		<view class="list-wrapper">
			<view v-if="loading" class="tip-text">加载中...</view>
			<view v-else>
				<view v-if="errorMsg" class="tip-text">{{ errorMsg }}</view>
				<template v-else>
					<view v-if="commonList.length" class="section">
						<view class="section-title">常见问题</view>
						<view class="column list-inner">
							<view class="reservation-item reservation-box" v-for="(item, index) in commonList" :key="item.id || index">
								<view class="column reservation-inner">
									<view class="row title title-row">
										<view class="title">{{ item.title }}</view>
									</view>
									<view class="row row-text row-center mt-20">
										<text class="ml-20">{{ item.description }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view v-if="serviceList.length" class="section">
						<view class="section-title">服务问题</view>
						<view class="column list-inner">
							<view class="reservation-item reservation-box" v-for="(item, index) in serviceList" :key="item.id || index">
								<view class="column reservation-inner">
									<view class="row title title-row">
										<view class="title">{{ item.title }}</view>
									</view>
									<view class="row row-text row-center mt-20">
										<text class="ml-20">{{ item.description }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view v-if="deliveryList.length" class="section">
						<view class="section-title">订单问题</view>
						<view class="column list-inner">
							<view class="reservation-item reservation-box" v-for="(item, index) in deliveryList" :key="item.id || index">
								<view class="column reservation-inner">
									<view class="row title title-row">
										<view class="title">{{ item.title }}</view>
									</view>
									<view class="row row-text row-center mt-20">
										<text class="ml-20">{{ item.description }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<view v-if="!commonList.length && !serviceList.length && !deliveryList.length" class="tip-text">暂无内容</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { getServiceDescription } from '@/common/server/interface/common.js'

	const statusBarHeight = ref(uni.getSystemInfoSync().statusBarHeight);

	const loading = ref(true)
	const errorMsg = ref('')
	const commonList = ref([])
	const serviceList = ref([])
	const deliveryList = ref([])

	const fetchData = async () => {
		try {
			loading.value = true
			errorMsg.value = ''
			const data = await getServiceDescription()
			if (data) {
				const filterSort = (arr = []) => arr
					.filter(i => i && i.isShow)
					.sort((a, b) => Number(a.sortId || 0) - Number(b.sortId || 0))
				commonList.value = filterSort(data.commonQuestion || [])
				serviceList.value = filterSort(data.service || [])
				deliveryList.value = filterSort(data.delivery || [])
			} else {
				errorMsg.value = '获取失败'
			}
		} catch (e) {
			console.error('获取服务与说明失败:', e)
			errorMsg.value = '获取失败'
		} finally {
			loading.value = false
		}
	}

	onMounted(fetchData)

	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background: #F7F7F7;
	}

	.header-row {
		width: 90%;
		margin: 100rpx auto 0;
		justify-content: space-between;
	}

	.back-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.page-title {
		font-size: 30rpx;
	}

	.spacer-40 {
		width: 40rpx;
	}

	.list-wrapper {
		width: 100%;
		overflow-y: auto;
		margin-top: 30rpx;
	}

	.list-inner {
		width: 90%;
		margin: 0 auto 0;
		font-size: 24rpx;
	}

	.section {
		width: 100%;
		margin-bottom: 20rpx;
	}

	.section-title {
		width: 90%;
		margin: 0 auto 20rpx;
		font-size: 28rpx;
		color: #322A2A;
		font-weight: 600;
	}

	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 35rpx;
		color: #322A2A;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.title-row {
		justify-content: space-between;
	}

	.row-text {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #575757;
		text-align: left;
		font-style: normal;
		text-transform: none;
		word-break: break-all;
		white-space: pre-wrap;
	}

	.reservation-item {
		background: linear-gradient(180deg, #D7F0DD 0%, #FFFFFF 100%);
		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.25);
		border-radius: 46rpx 46rpx 46rpx 46rpx;
		transition: transform 0.2s;

		&:active {
			transform: scale(0.98);
		}
	}

	.reservation-box {
		width: 100%;
		border-radius: 10rpx;
		background-color: #F2F3F5;
		margin-bottom: 40rpx;
	}

	.reservation-inner {
		width: 95%;
		margin: 20rpx auto 20rpx;
	}

	.row-center {
		align-items: center;
	}

	.mt-20 {
		margin-top: 20rpx;
	}

	.ml-20 {
		margin-left: 20rpx;
	}

	.tip-text {
		width: 100%;
		text-align: center;
		color: #999;
		font-size: 26rpx;
		margin-top: 60rpx;
	}
</style>