ajy/code/ajyApp/pages/my/questions/questions.nvue

<template>
	<view class="page">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
		<!-- 自定义导航栏 -->
		<view class="nav-bar">
			<image src="/static/public/backBlack.png" mode="aspectFill" class="back-img" @click="goBack"></image>
			<text class="nav-title">全部问题</text>
			<view class="nav-right"></view>
		</view>

		<!-- 问题列表 -->
		<list class="ques-list">
			<cell>
				<text class="ques-section-title">常见问题</text>
			</cell>
			<cell v-for="(itm, index) in list" :key="index">
				<view class="ques-item" @click="toDetail(itm)">
					<text class="ques-item-text">{{index + 1}}、{{itm.title}}</text>
					<image class="ques-arrow" src="/static/my/arrowright.png" mode="aspectFill"></image>
				</view>
			</cell>
		</list>

		<!-- 空状态 -->
		<view class="empty-wrap" v-if="list.length === 0">
			<text class="empty-text">暂无问题</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 44,
			list: []
		}
	},
	onLoad() {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarHeight = sysInfo.statusBarHeight || 44
		this.init()
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		toDetail(itm) {
			uni.navigateTo({
				url: '/pages/my/questions/quesinfo?id=' + itm.id + '&title=' + encodeURIComponent(itm.title || '')
			})
		},
		init() {
			// TODO: 后续对接后台接口获取问题列表
		}
	}
}
</script>

<style>
.page {
	flex: 1;
	background-color: #FFFFFF;
}
.status-bar {
	background-color: #FFFFFF;
}
.nav-bar {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	padding-left: 54rpx;
	padding-right: 54rpx;
	background-color: #FFFFFF;
}
.back-img {
	width: 50rpx;
	height: 50rpx;
}
.nav-title {
	font-weight: bold;
	font-size: 32rpx;
	color: #545F71;
}
.nav-right {
	width: 50rpx;
	height: 50rpx;
}
/* 问题列表 */
.ques-list {
	flex: 1;
	padding-left: 48rpx;
	padding-right: 48rpx;
}
.ques-section-title {
	font-size: 28rpx;
	color: #9BA5B7;
	margin-top: 48rpx;
	margin-bottom: 10rpx;
}
.ques-item {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 108rpx;
	border-bottom-width: 1px;
	border-bottom-color: #EEF1F4;
	border-bottom-style: solid;
}
.ques-item-text {
	flex: 1;
	font-size: 32rpx;
	color: #545F71;
}
.ques-arrow {
	width: 40rpx;
	height: 40rpx;
}
/* 空状态 */
.empty-wrap {
	align-items: center;
	padding-top: 200rpx;
}
.empty-text {
	font-size: 28rpx;
	color: #9BA5B7;
}
</style>