SmartParks_uniapp/pages/sys/user/serviceCenter/serviceCenter.vue

<template>
	<view class="service-container">
		<!-- 固定顶部区域 -->
		<view class="fixed-header">
			<!-- 搜索框 -->
			<view class="service-search">
				<image src="/static/ic_search_gray.png" class="search-icon" />
				<input class="search-input" placeholder="请输入关键词 例 停车" />
			</view>
			<!-- 公告banner -->
			<view class="service-banner">
				<image src="/static/ic_s_c_01.png" class="banner-img" mode="aspectFill" />
			</view>
		</view>
		<!-- 可滚动内容区 -->
		<view class="scroll-content">
			<!-- 常见问题 -->
			<view class="faq-title">常见问题</view>
			<view class="faq-list">
				<view class="faq-item" v-for="(item, idx) in faqList" :key="idx" @click="goDetail(idx)">
					<text class="faq-text">{{ item }}</text>
				</view>
			</view>
			<view class="faq-end">- 到底了 -</view>
			<!-- 底部按钮 -->
			<button class="service-btn" @click="showDialog = true">电话咨询</button>
		</view>
		<!-- 弹窗 -->
		<view v-if="showDialog" class="dialog-mask" @click="showDialog = false">
			<view class="dialog-box">
				<image src="/static/ic_s_c_02.png" class="dialog-bg" mode="widthFix" />
				<view class="dialog-content">
					<view class="dialog-phone">023—950888</view>
					<button class="dialog-call-btn" @click.stop="callPhone">拨打电话</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				faqList: [
					'如何开取物业费发票，需要携带哪些资料？需要多...',
					'提交报修后一般多久会处理？',
					'生活服务优惠券怎么领取',
					'如何进行认证',
					'工程服务收费标准',
					'哪些时段可以进行施工装修',
					'包月停车、临时停车的办理流程及收费标准',
					'开锁的联系方式',
					'物业服务电话/投诉电话是多少',
					'电费查询及收费标准'
				],
				showDialog: false
			}
		},
		methods: {
			
			callPhone() {
				this.showDialog = false;
				uni.makePhoneCall({
					phoneNumber: '023950888'
				});
			},
			goDetail(idx) {
				uni.navigateTo({ url: '/pages/sys/user/serviceCenter/questionDetail' });
			}
		}
	}
</script>

<style scoped>
	.service-container {
		height: 100vh;
		background: #fff;
		display: flex;
		flex-direction: column;
	}
	.fixed-header {
		flex-shrink: 0;
	}
	.scroll-content {
		flex: 1;
		overflow-y: auto;
		padding-bottom: 120rpx;
	}

	.service-navbar {
		width: 100%;
		height: 120rpx;
		padding-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		background: #fff;
	}

	.service-back {
		position: absolute;
		left: 37rpx;
		width: 15rpx;
		height: 33rpx;
	}

	.service-title {
		font-size: 36rpx;
		color: #222;
		font-weight: bold;
	}

	.service-search {
		width: 85vw;
		background: rgba(225, 225, 225, 0.29);
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		height: 64rpx;
		margin: 0 auto;
	}

	.search-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 12rpx;
	}

	.search-input {
		border: none;
		background: transparent;
		font-size: 28rpx;
		flex: 1;
		color: #757575;
	}

	.service-banner {
		margin: 32rpx 32rpx 0 32rpx;
		position: relative;
		overflow: hidden;
	}

	.banner-img {
		width: 100%;
		height: 180rpx;
	}

	.banner-btn {
		position: absolute;
		right: 24rpx;
		bottom: 18rpx;
		background: #fff;
		color: #0090FF;
		font-size: 22rpx;
		border-radius: 24rpx;
		padding: 6rpx 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 144, 255, 0.08);
	}

	.faq-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #222;
		margin: 40rpx 0 18rpx 32rpx;
	}

	.faq-list {
		background: #fff;
		margin: 0 0 0 0;
	}

	.faq-item {
		padding: 0 32rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f7f7f7;
	}

	.faq-item:last-child {
		border-bottom: none;
	}

	.faq-text {
		font-size: 28rpx;
		color: #222;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.faq-end {
		text-align: center;
		color: #bbb;
		font-size: 26rpx;
		margin: 32rpx 0 0 0;
	}

	.service-btn {
		width: 90vw;
		height: 80rpx;
		background: linear-gradient(90deg, #2e6cf6 0%, #0090FF 100%);
		color: #fff;
		font-size: 32rpx;
		border: none;
		border-radius: 40rpx;
		margin: 60rpx auto 0 auto;
		display: block;
		font-weight: bold;
		box-shadow: 0 8rpx 24rpx rgba(0, 144, 255, 0.12);
	}

	.dialog-mask {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.dialog-box {
		width: 476rpx;
		height: 552rpx;
		overflow: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.dialog-bg {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		border-radius: 28rpx;
	}

	.dialog-content {
		position: relative;
		z-index: 1;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		padding-bottom: 48rpx;
	}

	.dialog-phone {
		margin-top: 180rpx;
		width: 100%;
		text-align: center;
		color: #fff;
		font-size: 38rpx;
		font-weight: bold;
		letter-spacing: 2rpx;
	}

	.dialog-call-btn {
		width: 90%;
		height: 80rpx;
		background: linear-gradient(90deg, #FFD600 0%, #FFB800 100%);
		color: #222;
		font-size: 32rpx;
		border: none;
		border-radius: 20rpx;
		margin: 40rpx auto 0 auto;
		font-weight: bold;
		box-shadow: 0 8rpx 24rpx rgba(255, 184, 0, 0.12);
	}
</style>