162 lines
4.1 KiB
Plaintext
162 lines
4.1 KiB
Plaintext
<template>
|
||
<ServicePageScaffold title="居家上门服务" fallback-url="/pages/main/index">
|
||
<view class="hero-card">
|
||
<text class="hero-title">居家上门服务</text>
|
||
<text class="hero-desc">覆盖服务申请、上门评估、执行跟踪与验收反馈，先用 mock 数据跑通前端闭环。</text>
|
||
<view class="hero-actions">
|
||
<view class="primary-btn" @click="goApply">立即申请</view>
|
||
</view>
|
||
</view>
|
||
|
||
<ServicePanel title="推荐服务" subtitle="适老化信息更清晰，入口更聚焦。">
|
||
<view v-for="item in services" :key="item.id" class="service-card">
|
||
<view class="service-top">
|
||
<view>
|
||
<text class="service-name">{{ item.name }}</text>
|
||
<text class="service-meta">{{ item.category }} · {{ item.durationText }}</text>
|
||
</view>
|
||
<text class="service-price">¥{{ item.price }}</text>
|
||
</view>
|
||
<text class="service-summary">{{ item.summary }}</text>
|
||
<text class="service-suitable">适用对象：{{ item.suitableFor }}</text>
|
||
</view>
|
||
</ServicePanel>
|
||
|
||
<ServicePanel title="我的服务单" subtitle="先展示待派单和服务中的 mock 单据。">
|
||
<view v-if="cases.length == 0" class="empty-box">
|
||
<text class="empty-text">当前没有服务单</text>
|
||
</view>
|
||
<view v-for="item in cases" :key="item.id" class="case-card" @click="goDetail(item.id)">
|
||
<view class="case-row">
|
||
<view>
|
||
<text class="case-title">{{ item.serviceName }}</text>
|
||
<text class="case-no">{{ item.caseNo }}</text>
|
||
</view>
|
||
<ServiceStatusTag :text="item.statusText" :tone="item.statusTone"></ServiceStatusTag>
|
||
</view>
|
||
<text class="case-info">服务对象：{{ item.elderName }}，{{ item.age }} 岁</text>
|
||
<text class="case-info">上门时间：{{ item.serviceTime }}</text>
|
||
<text class="case-info">服务地址：{{ item.address }}</text>
|
||
</view>
|
||
</ServicePanel>
|
||
</ServicePageScaffold>
|
||
</template>
|
||
|
||
<script setup lang="uts">
|
||
import { ref } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
|
||
import ServicePanel from '@/components/homeService/ServicePanel.uvue'
|
||
import ServiceStatusTag from '@/components/homeService/ServiceStatusTag.uvue'
|
||
import { fetchConsumerHomeServiceCases, fetchHomeServiceCatalog } from '@/services/homeServiceService.uts'
|
||
import { HomeServiceCatalogType, HomeServiceCaseType } from '@/types/home-service.uts'
|
||
|
||
const services = ref<Array<HomeServiceCatalogType>>([])
|
||
const cases = ref<Array<HomeServiceCaseType>>([])
|
||
|
||
async function loadData() {
|
||
services.value = await fetchHomeServiceCatalog()
|
||
cases.value = await fetchConsumerHomeServiceCases()
|
||
}
|
||
|
||
function goApply() {
|
||
uni.navigateTo({ url: '/pages/mall/consumer/home-service/apply' })
|
||
}
|
||
|
||
function goDetail(caseId: string) {
|
||
uni.navigateTo({ url: '/pages/mall/consumer/home-service/order-detail?id=' + caseId })
|
||
}
|
||
|
||
onLoad(() => {
|
||
loadData()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page {
|
||
min-height: 100vh;
|
||
background: #f3f7f9;
|
||
padding: 24rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.hero-card {
|
||
background: linear-gradient(135deg, #0f766e, #1d4ed8);
|
||
border-radius: 28rpx;
|
||
padding: 32rpx;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 40rpx;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
line-height: 56rpx;
|
||
}
|
||
|
||
.hero-desc {
|
||
margin-top: 16rpx;
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.hero-actions {
|
||
margin-top: 28rpx;
|
||
}
|
||
|
||
.primary-btn {
|
||
background: #ffffff;
|
||
color: #0f3d66;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
padding: 24rpx 0;
|
||
border-radius: 18rpx;
|
||
}
|
||
|
||
.service-card,
|
||
.case-card {
|
||
padding: 24rpx;
|
||
border-radius: 20rpx;
|
||
background: #f8fbfc;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.service-top,
|
||
.case-row {
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.service-name,
|
||
.case-title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #16324f;
|
||
}
|
||
|
||
.service-meta,
|
||
.case-no,
|
||
.case-info,
|
||
.service-summary,
|
||
.service-suitable,
|
||
.empty-text {
|
||
margin-top: 10rpx;
|
||
font-size: 26rpx;
|
||
line-height: 38rpx;
|
||
color: #66788a;
|
||
}
|
||
|
||
.service-price {
|
||
font-size: 34rpx;
|
||
font-weight: 700;
|
||
color: #0f766e;
|
||
}
|
||
|
||
.empty-box {
|
||
padding: 40rpx 0;
|
||
align-items: center;
|
||
}
|
||
</style> |