450 lines
11 KiB
Plaintext
450 lines
11 KiB
Plaintext
<template>
|
|
<ServicePageScaffold title="居家上门服务" fallback-url="/pages/main/index">
|
|
<view class="hero-card">
|
|
<view>
|
|
<text class="hero-title">居家服务大厅</text>
|
|
<text class="hero-desc">从服务选择、预约下单到服务单跟踪，整体体验升级为上门服务预约平台。</text>
|
|
</view>
|
|
<view class="hero-right-tag">
|
|
<text class="hero-right-tag-text">服务保障</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="service-category-grid">
|
|
<view v-for="item in categoryGrid" :key="item.id" class="service-category-card" @click="switchCategory(item.id)">
|
|
<view class="service-category-icon" :style="{ background: item.color }">
|
|
<text class="service-category-icon-text">{{ item.iconText }}</text>
|
|
</view>
|
|
<text class="service-category-name">{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<scroll-view class="promo-scroll" direction="horizontal" :show-scrollbar="false">
|
|
<view class="promo-row">
|
|
<view v-for="item in promoCards" :key="item.id" :class="['promo-card', 'promo-card-' + item.tone]" @click="consultService">
|
|
<text class="promo-card-title">{{ item.title }}</text>
|
|
<text class="promo-card-desc">{{ item.desc }}</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<ServicePanel title="推荐服务" subtitle="优先展示最常预约的居家服务项目。">
|
|
<view v-for="item in filteredServices" :key="item.id" class="recommend-card">
|
|
<view class="recommend-card-top">
|
|
<view class="recommend-card-cover">
|
|
<text class="recommend-card-cover-text">{{ item.imageText }}</text>
|
|
</view>
|
|
<view class="recommend-card-main">
|
|
<text class="recommend-card-title">{{ item.title }}</text>
|
|
<text class="recommend-card-subtitle">{{ item.subtitle }}</text>
|
|
<text class="recommend-card-suitable">适用对象：{{ item.suitableFor }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="recommend-card-tags">
|
|
<text v-for="tag in item.tags" :key="item.id + '-' + tag" class="recommend-card-tag">{{ tag }}</text>
|
|
</view>
|
|
<view class="recommend-card-bottom">
|
|
<view>
|
|
<text class="recommend-card-price-prefix">¥</text>
|
|
<text class="recommend-card-price">{{ item.price }}</text>
|
|
<text class="recommend-card-unit">起 / {{ item.unit }}</text>
|
|
</view>
|
|
<view class="recommend-card-actions">
|
|
<view class="recommend-card-secondary" @click="goDetail(item.id)">查看详情</view>
|
|
<view class="recommend-card-primary" @click="goBooking(item.id)">立即预约</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</ServicePanel>
|
|
|
|
<ServicePanel title="我的预约 / 服务单" subtitle="按服务预约单的方式呈现状态、机构和上门信息。">
|
|
<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="goOrderDetail(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.staffName == '待分配' ? '待分配机构' : item.staffName }}</text>
|
|
<text class="case-info">上门时间：{{ item.serviceTime }}</text>
|
|
<text class="case-info">服务地址：{{ item.address }}</text>
|
|
<view class="case-action-row">
|
|
<view class="case-action-secondary" @click.stop="goDetailByName(item.serviceName)">再次预约</view>
|
|
<view class="case-action-primary" @click.stop="goOrderDetail(item.id)">查看服务单</view>
|
|
</view>
|
|
</view>
|
|
</ServicePanel>
|
|
</ServicePageScaffold>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { computed, 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'
|
|
import { getCurrentUser, getCurrentUserId } from '@/utils/store.uts'
|
|
import { goToLogin } from '@/utils/utils.uts'
|
|
import {
|
|
HomeServiceCategoryType,
|
|
HomeServiceItemType,
|
|
HomeServicePromoCardType,
|
|
getHomeServiceCategories,
|
|
getHomeServiceItems,
|
|
getHomeServicePromoCards
|
|
} from '@/utils/homeServiceUiMock.uts'
|
|
|
|
const services = ref<Array<HomeServiceCatalogType>>([])
|
|
const cases = ref<Array<HomeServiceCaseType>>([])
|
|
const categoryGrid = ref<Array<HomeServiceCategoryType>>([])
|
|
const promoCards = ref<Array<HomeServicePromoCardType>>([])
|
|
const selectedCategory = ref('all-services')
|
|
|
|
const filteredServices = computed((): Array<HomeServiceItemType> => {
|
|
const serviceItems = getHomeServiceItems(services.value)
|
|
if (selectedCategory.value == 'all-services') {
|
|
return serviceItems
|
|
}
|
|
const result: Array<HomeServiceItemType> = []
|
|
for (let i = 0; i < serviceItems.length; i++) {
|
|
if (serviceItems[i].category == selectedCategory.value) {
|
|
result.push(serviceItems[i])
|
|
}
|
|
}
|
|
if (result.length == 0) {
|
|
return serviceItems
|
|
}
|
|
return result
|
|
})
|
|
|
|
async function loadData() {
|
|
categoryGrid.value = getHomeServiceCategories()
|
|
promoCards.value = getHomeServicePromoCards()
|
|
services.value = await fetchHomeServiceCatalog()
|
|
const user = await getCurrentUser()
|
|
if (user == null || getCurrentUserId() == '') {
|
|
cases.value = [] as Array<HomeServiceCaseType>
|
|
return
|
|
}
|
|
cases.value = await fetchConsumerHomeServiceCases()
|
|
}
|
|
|
|
async function ensureLogin(redirectUrl: string): Promise<boolean> {
|
|
const user = await getCurrentUser()
|
|
if (user == null || getCurrentUserId() == '') {
|
|
goToLogin(redirectUrl)
|
|
return false
|
|
}
|
|
return true
|
|
}
|
|
|
|
function switchCategory(categoryId: string) {
|
|
selectedCategory.value = categoryId
|
|
}
|
|
|
|
function consultService() {
|
|
uni.showToast({ title: '即将接入专属客服入口', icon: 'none' })
|
|
}
|
|
|
|
function goDetail(serviceId: string) {
|
|
uni.navigateTo({ url: '/pages/mall/consumer/home-service/service-detail?id=' + serviceId })
|
|
}
|
|
|
|
function goBooking(serviceId: string) {
|
|
ensureLogin('/pages/mall/consumer/home-service/service-detail?id=' + serviceId + '&mode=booking').then((ok) => {
|
|
if (!ok) {
|
|
return
|
|
}
|
|
uni.navigateTo({ url: '/pages/mall/consumer/home-service/service-detail?id=' + serviceId + '&mode=booking' })
|
|
})
|
|
}
|
|
|
|
function goOrderDetail(caseId: string) {
|
|
ensureLogin('/pages/mall/consumer/home-service/order-detail?id=' + caseId).then((ok) => {
|
|
if (!ok) {
|
|
return
|
|
}
|
|
uni.navigateTo({ url: '/pages/mall/consumer/home-service/order-detail?id=' + caseId })
|
|
})
|
|
}
|
|
|
|
function goDetailByName(serviceName: string) {
|
|
if (serviceName == '康复训练指导') {
|
|
goBooking('svc-002')
|
|
return
|
|
}
|
|
if (serviceName == '慢病健康随访') {
|
|
goBooking('svc-003')
|
|
return
|
|
}
|
|
goBooking('svc-001')
|
|
}
|
|
|
|
onLoad((options) => {
|
|
const category = options['category']
|
|
if (category != null) {
|
|
selectedCategory.value = category as string
|
|
}
|
|
loadData()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.hero-card {
|
|
background: linear-gradient(180deg, #eafbf7 0%, #eff6ff 100%);
|
|
border-radius: 32rpx;
|
|
padding: 28rpx;
|
|
margin-bottom: 24rpx;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 40rpx;
|
|
font-weight: 700;
|
|
color: #16324f;
|
|
line-height: 54rpx;
|
|
}
|
|
|
|
.hero-desc {
|
|
margin-top: 16rpx;
|
|
font-size: 24rpx;
|
|
line-height: 36rpx;
|
|
color: #5f7284;
|
|
}
|
|
|
|
.hero-right-tag {
|
|
height: 56rpx;
|
|
padding: 0 22rpx;
|
|
border-radius: 999rpx;
|
|
background: rgba(255, 255, 255, 0.76);
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hero-right-tag-text {
|
|
font-size: 22rpx;
|
|
font-weight: 700;
|
|
color: #0f766e;
|
|
}
|
|
|
|
.service-category-grid,
|
|
.promo-row,
|
|
.recommend-card-top,
|
|
.recommend-card-bottom,
|
|
.recommend-card-actions,
|
|
.case-card {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.service-category-grid {
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.service-category-card {
|
|
width: 19%;
|
|
align-items: center;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.service-category-icon {
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
border-radius: 28rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.service-category-icon-text {
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
color: #16324f;
|
|
}
|
|
|
|
.service-category-name {
|
|
margin-top: 12rpx;
|
|
font-size: 22rpx;
|
|
line-height: 30rpx;
|
|
text-align: center;
|
|
color: #425466;
|
|
}
|
|
|
|
.promo-scroll {
|
|
height: 168rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.promo-row {
|
|
padding-right: 20rpx;
|
|
}
|
|
|
|
.promo-card {
|
|
width: 240rpx;
|
|
height: 144rpx;
|
|
padding: 24rpx;
|
|
border-radius: 24rpx;
|
|
box-sizing: border-box;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.promo-card-green {
|
|
background: #eafbf7;
|
|
}
|
|
|
|
.promo-card-orange {
|
|
background: #fff7ed;
|
|
}
|
|
|
|
.promo-card-blue {
|
|
background: #eff6ff;
|
|
}
|
|
|
|
.promo-card-teal {
|
|
background: #ecfeff;
|
|
}
|
|
|
|
.promo-card-title {
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
color: #16324f;
|
|
}
|
|
|
|
.promo-card-desc {
|
|
margin-top: 12rpx;
|
|
font-size: 22rpx;
|
|
line-height: 32rpx;
|
|
color: #5f7284;
|
|
}
|
|
|
|
.recommend-card,
|
|
.case-card {
|
|
padding: 24rpx;
|
|
border-radius: 24rpx;
|
|
background: #f8fbfc;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
|
|
.recommend-card-top,
|
|
.recommend-card-bottom,
|
|
.case-row,
|
|
.case-action-row {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.recommend-card-cover {
|
|
width: 112rpx;
|
|
height: 112rpx;
|
|
border-radius: 28rpx;
|
|
background: linear-gradient(180deg, #eafbf7 0%, #eff6ff 100%);
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.recommend-card-cover-text {
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
color: #0f766e;
|
|
}
|
|
|
|
.recommend-card-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.recommend-card-title,
|
|
.case-title {
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
color: #16324f;
|
|
}
|
|
|
|
.recommend-card-subtitle,
|
|
.recommend-card-suitable,
|
|
.case-no,
|
|
.case-info,
|
|
.empty-text {
|
|
margin-top: 10rpx;
|
|
font-size: 24rpx;
|
|
line-height: 34rpx;
|
|
color: #66788a;
|
|
}
|
|
|
|
.recommend-card-tags {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
margin-top: 18rpx;
|
|
margin-bottom: 18rpx;
|
|
}
|
|
|
|
.recommend-card-tag {
|
|
padding: 10rpx 16rpx;
|
|
border-radius: 999rpx;
|
|
background: #eef2f7;
|
|
font-size: 22rpx;
|
|
color: #476072;
|
|
margin-right: 12rpx;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.recommend-card-price-prefix,
|
|
.recommend-card-price {
|
|
font-size: 34rpx;
|
|
font-weight: 700;
|
|
color: #0f766e;
|
|
}
|
|
|
|
.recommend-card-unit {
|
|
font-size: 22rpx;
|
|
color: #64748b;
|
|
}
|
|
|
|
.recommend-card-secondary,
|
|
.recommend-card-primary,
|
|
.case-action-secondary,
|
|
.case-action-primary {
|
|
height: 68rpx;
|
|
padding: 0 24rpx;
|
|
border-radius: 999rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 700;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 12rpx;
|
|
}
|
|
|
|
.recommend-card-secondary,
|
|
.case-action-secondary {
|
|
background: #ffffff;
|
|
border-width: 2rpx;
|
|
border-style: solid;
|
|
border-color: #cbd5e1;
|
|
color: #476072;
|
|
}
|
|
|
|
.recommend-card-primary,
|
|
.case-action-primary {
|
|
background: #16a085;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.case-action-row {
|
|
margin-top: 18rpx;
|
|
}
|
|
|
|
.empty-box {
|
|
padding: 40rpx 0;
|
|
align-items: center;
|
|
}
|
|
</style> |