first commit

.svn/pristine/2d/2dc87d14d0f5cec97678e6318cfd58a52dd91ac5.svn-base

@@ -0,0 +1,196 @@
+<template>
+	<view class="contact-support-page">
+		<!-- 全新方案：纯 CSS 手动构建的骨架屏 -->
+		<view v-if="loading" class="skeleton-wrapper">
+			<view class="skeleton-card">
+				<view  style="padding: 40rpx 0; ">
+					<view class="skeleton-item skeleton-text" style="width: 100%; height: 60rpx;"></view>
+				</view>
+			</view>
+			
+		</view>
+
+		<!-- 页面实际内容 -->
+		<view v-else class="page-content">
+
+			<view class="page-container">
+				<view class="card emergency-card" @click="callEmergency">
+					<view class="emergency-title">
+						<up-icon name="phone-fill" color="#fa6400" size="18"></up-icon>
+						<text>紧急问题？直接拨打人工客服</text>
+					</view>
+					<text class="phone-number">{{ phone }}</text>
+					<text class="service-time">9:00-22:00</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+	import { ref, reactive } from 'vue';
+	import { onLoad, onShow } from '@dcloudio/uni-app';
+	import { Service, CNRiderLoginService } from "@/Service/CN/CNRiderLoginService";
+	const loading = ref<boolean>(true);
+
+	let phone=ref('')
+	
+	onLoad(() => {
+		getData()
+	});
+	onShow(() => { });
+	
+	const getData=()=>{
+		
+		CNRiderLoginService.GetKefuInfo().then(res=>{
+			loading.value = false;
+			
+			if(res.code==0){
+				phone.value=res.data.phone
+			}
+			
+		})
+	}
+		
+	
+	const callEmergency = () => {
+		uni.makePhoneCall({
+			phoneNumber: phone.value
+		});
+	};	
+	
+</script>
+
+<style lang="scss" scoped>
+	@keyframes skeleton-blink {
+		0% {
+			background-position: 100% 50%;
+		}
+
+		100% {
+			background-position: 0 50%;
+		}
+	}
+
+	.skeleton-item {
+		background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+		background-size: 200% 100%;
+		animation: skeleton-blink 1.5s infinite linear;
+	}
+
+	.skeleton-rect {
+		border-radius: 12rpx;
+	}
+
+	.skeleton-text {
+		border-radius: 4rpx;
+	}
+
+	.skeleton-wrapper {
+		padding: 24rpx;
+		background-color: #f7f7f7;
+
+		.skeleton-card {
+			background-color: #fff;
+			padding: 30rpx;
+			border-radius: 16rpx;
+			margin-bottom: 24rpx;
+		}
+	}
+
+	.contact-support-page {
+		background-color: #f7f7f7;
+		min-height: 100vh;
+	}
+
+	.page-container {
+		padding: 24rpx;
+	}
+
+	.card {
+		background-color: #fff;
+		border-radius: 16rpx;
+		margin-bottom: 24rpx;
+	}
+
+	.section {
+		.section-title {
+			font-size: 28rpx;
+			color: #666;
+			margin-bottom: 20rpx;
+			display: block;
+		}
+	}
+
+	.notice-box {
+		display: flex;
+		align-items: center;
+		gap: 16rpx;
+		border-radius: 16rpx;
+		padding: 24rpx;
+		font-size: 26rpx;
+
+		&.info-box {
+			background-color: #ecf5ff;
+			color: #40a9ff;
+		}
+	}
+
+	.menu-list {
+		padding: 0 30rpx;
+
+		:deep(.up-cell-group) {
+			.up-cell {
+				.up-cell__body {
+					padding: 28rpx 0;
+				}
+			}
+		}
+
+		.cell-title {
+			display: flex;
+			flex-direction: column;
+			margin-left: 20rpx;
+
+			.title {
+				font-size: 30rpx;
+				color: #333;
+			}
+
+			.desc {
+				font-size: 24rpx;
+				color: #999;
+				margin-top: 4rpx;
+			}
+		}
+	}
+
+	.emergency-card {
+		background-color: #ffffff;
+		text-align: center;
+		padding: 30rpx;
+
+		.emergency-title {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: 10rpx;
+			font-size: 28rpx;
+			color: #fa6400;
+			font-weight: 500;
+		}
+
+		.phone-number {
+			display: block;
+			font-size: 44rpx;
+			font-weight: bold;
+			color: #333;
+			margin: 16rpx 0;
+		}
+
+		.service-time {
+			font-size: 26rpx;
+			color: #999;
+		}
+	}
+</style>