196 lines
3.3 KiB
Plaintext
196 lines
3.3 KiB
Plaintext
<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> |