537 lines
12 KiB
Plaintext
537 lines
12 KiB
Plaintext
<template>
|
|
<view class="service-content">
|
|
<view class="home-service-header">
|
|
<view class="header-top-row">
|
|
<view>
|
|
<text class="header-area">梅江区</text>
|
|
<text class="header-slogan">专业照护 服务保障</text>
|
|
</view>
|
|
<view class="header-helper-btn" @click="consultService">
|
|
<text class="header-helper-text">AI推荐</text>
|
|
</view>
|
|
</view>
|
|
<view class="header-title-wrap">
|
|
<text class="header-title">居家服务预约平台</text>
|
|
<text class="header-desc">护理 康复 陪诊 保洁，一站式预约上门服务。</text>
|
|
</view>
|
|
<view class="home-service-search" @click="goSearch">
|
|
<text class="home-service-search-icon">⌕</text>
|
|
<text class="home-service-search-text">搜索保洁 护理 陪诊 康复</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="service-category-grid">
|
|
<view
|
|
v-for="item in categoryGrid"
|
|
:key="item.id"
|
|
class="service-category-card"
|
|
@click="goCategory(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-card-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>
|
|
|
|
<view class="section-head">
|
|
<text class="section-title">场景服务</text>
|
|
<text class="section-link" @click="goServiceHall">查看全部</text>
|
|
</view>
|
|
<view class="scene-service-section">
|
|
<view v-for="item in sceneCards" :key="item.id" :class="['scene-service-card', 'scene-service-card-' + item.tone]" @click="goCategory(item.categoryId)">
|
|
<view>
|
|
<text class="scene-service-title">{{ item.title }}</text>
|
|
<text class="scene-service-subtitle">{{ item.subtitle }}</text>
|
|
</view>
|
|
<view class="scene-service-visual">
|
|
<text class="scene-service-icon">{{ item.iconText }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="section-head">
|
|
<text class="section-title">推荐服务</text>
|
|
<text class="section-link" @click="goServiceHall">服务大厅</text>
|
|
</view>
|
|
<view class="recommend-service-list">
|
|
<view v-for="item in allServices" :key="item.id" class="recommend-service-card">
|
|
<view class="recommend-service-top">
|
|
<view class="recommend-service-cover">
|
|
<text class="recommend-service-cover-text">{{ item.imageText }}</text>
|
|
</view>
|
|
<view class="recommend-service-main">
|
|
<text class="recommend-service-title">{{ item.title }}</text>
|
|
<text class="recommend-service-subtitle">{{ item.subtitle }}</text>
|
|
<text class="recommend-service-suitable">适用对象：{{ item.suitableFor }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="recommend-service-tags">
|
|
<text v-for="tag in item.tags" :key="item.id + '-' + tag" class="recommend-service-tag">{{ tag }}</text>
|
|
</view>
|
|
<view class="recommend-service-bottom">
|
|
<view>
|
|
<text class="recommend-service-price-prefix">¥</text>
|
|
<text class="recommend-service-price">{{ item.price }}</text>
|
|
<text class="recommend-service-unit">起 / {{ item.unit }}</text>
|
|
</view>
|
|
<view class="recommend-service-actions">
|
|
<view class="recommend-secondary-btn" @click="goDetail(item.id)">查看详情</view>
|
|
<view class="recommend-primary-btn" @click="goBooking(item.id)">立即预约</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="floating-service-helper" @click="consultService">
|
|
<text class="floating-service-helper-title">不确定选哪个？</text>
|
|
<text class="floating-service-helper-desc">咨询客服</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { onMounted, ref } from 'vue'
|
|
import { fetchHomeServiceCatalog } from '@/services/homeServiceService.uts'
|
|
import {
|
|
HomeServiceCategoryType,
|
|
HomeServiceItemType,
|
|
HomeServicePromoCardType,
|
|
HomeServiceSceneCardType,
|
|
getHomeServiceCategories,
|
|
getHomeServiceItems,
|
|
getHomeServicePromoCards,
|
|
getHomeServiceSceneCards
|
|
} from '@/utils/homeServiceUiMock.uts'
|
|
|
|
const categoryGrid = ref<Array<HomeServiceCategoryType>>([])
|
|
const promoCards = ref<Array<HomeServicePromoCardType>>([])
|
|
const sceneCards = ref<Array<HomeServiceSceneCardType>>([])
|
|
const allServices = ref<Array<HomeServiceItemType>>([])
|
|
|
|
async function loadServiceData() {
|
|
categoryGrid.value = getHomeServiceCategories()
|
|
promoCards.value = getHomeServicePromoCards()
|
|
sceneCards.value = getHomeServiceSceneCards()
|
|
const catalog = await fetchHomeServiceCatalog()
|
|
allServices.value = getHomeServiceItems(catalog)
|
|
}
|
|
|
|
function goSearch() {
|
|
uni.navigateTo({ url: '/pages/mall/consumer/search?keyword=' + encodeURIComponent('居家服务') })
|
|
}
|
|
|
|
function consultService() {
|
|
uni.showToast({ title: '即将接入专属客服入口', icon: 'none' })
|
|
}
|
|
|
|
function goServiceHall() {
|
|
uni.navigateTo({ url: '/pages/mall/consumer/home-service/index' })
|
|
}
|
|
|
|
function goCategory(categoryId: string) {
|
|
uni.navigateTo({ url: '/pages/mall/consumer/home-service/index?category=' + categoryId })
|
|
}
|
|
|
|
function goDetail(serviceId: string) {
|
|
uni.navigateTo({ url: '/pages/mall/consumer/home-service/service-detail?id=' + serviceId })
|
|
}
|
|
|
|
function goBooking(serviceId: string) {
|
|
uni.navigateTo({ url: '/pages/mall/consumer/home-service/service-detail?id=' + serviceId + '&mode=booking' })
|
|
}
|
|
|
|
onMounted(() => {
|
|
loadServiceData()
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.service-content {
|
|
padding: 20rpx 20rpx 180rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.home-service-header {
|
|
background: linear-gradient(180deg, #eafbf7 0%, #eff6ff 100%);
|
|
border-radius: 32rpx;
|
|
padding: 28rpx 24rpx;
|
|
box-shadow: 0 12rpx 24rpx rgba(15, 118, 110, 0.08);
|
|
}
|
|
|
|
.header-top-row,
|
|
.recommend-service-top,
|
|
.recommend-service-bottom,
|
|
.section-head,
|
|
.promo-card-row,
|
|
.recommend-service-actions {
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
.header-area {
|
|
font-size: 26rpx;
|
|
font-weight: 700;
|
|
color: #16324f;
|
|
}
|
|
|
|
|
|
.header-slogan {
|
|
margin-top: 8rpx;
|
|
font-size: 24rpx;
|
|
color: #64748b;
|
|
}
|
|
|
|
|
|
.header-helper-btn {
|
|
padding: 14rpx 22rpx;
|
|
border-radius: 999rpx;
|
|
background: rgba(255, 255, 255, 0.78);
|
|
}
|
|
|
|
|
|
.header-helper-text {
|
|
font-size: 22rpx;
|
|
font-weight: 700;
|
|
color: #0f766e;
|
|
}
|
|
|
|
|
|
.header-title-wrap {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
|
|
.header-title {
|
|
font-size: 40rpx;
|
|
font-weight: 700;
|
|
color: #16324f;
|
|
line-height: 54rpx;
|
|
}
|
|
|
|
|
|
.header-desc {
|
|
margin-top: 12rpx;
|
|
font-size: 24rpx;
|
|
line-height: 36rpx;
|
|
color: #5f7284;
|
|
}
|
|
|
|
|
|
.home-service-search {
|
|
margin-top: 22rpx;
|
|
background: #ffffff;
|
|
border-radius: 999rpx;
|
|
height: 82rpx;
|
|
padding-left: 28rpx;
|
|
padding-right: 28rpx;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
box-shadow: 0 10rpx 20rpx rgba(22, 160, 133, 0.08);
|
|
}
|
|
|
|
.home-service-search-icon {
|
|
font-size: 28rpx;
|
|
color: #16a085;
|
|
}
|
|
|
|
.home-service-search-text {
|
|
margin-left: 16rpx;
|
|
font-size: 24rpx;
|
|
color: #8aa0b3;
|
|
}
|
|
|
|
|
|
.service-category-grid,
|
|
.scene-service-section {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
|
|
.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-top: 4rpx;
|
|
}
|
|
|
|
.promo-card-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;
|
|
}
|
|
|
|
.section-head {
|
|
margin-top: 28rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: 700;
|
|
color: #16324f;
|
|
}
|
|
|
|
.section-link {
|
|
font-size: 24rpx;
|
|
color: #16a085;
|
|
}
|
|
|
|
.scene-service-card {
|
|
width: 49%;
|
|
border-radius: 28rpx;
|
|
padding: 24rpx;
|
|
box-sizing: border-box;
|
|
margin-bottom: 16rpx;
|
|
min-height: 168rpx;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.scene-service-card-green {
|
|
background: linear-gradient(180deg, #eafbf7 0%, #f8fffd 100%);
|
|
}
|
|
|
|
.scene-service-card-blue {
|
|
background: linear-gradient(180deg, #eff6ff 0%, #f9fbff 100%);
|
|
}
|
|
|
|
.scene-service-card-teal {
|
|
background: linear-gradient(180deg, #ecfeff 0%, #f8ffff 100%);
|
|
}
|
|
|
|
.scene-service-card-orange {
|
|
background: linear-gradient(180deg, #fff7ed 0%, #fffbf7 100%);
|
|
}
|
|
|
|
.scene-service-title {
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
color: #16324f;
|
|
}
|
|
|
|
.scene-service-subtitle {
|
|
margin-top: 10rpx;
|
|
font-size: 22rpx;
|
|
line-height: 32rpx;
|
|
color: #64748b;
|
|
}
|
|
|
|
.scene-service-visual {
|
|
margin-top: 18rpx;
|
|
width: 108rpx;
|
|
height: 56rpx;
|
|
border-radius: 999rpx;
|
|
background: rgba(255, 255, 255, 0.68);
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.scene-service-icon {
|
|
font-size: 22rpx;
|
|
font-weight: 700;
|
|
color: #0f766e;
|
|
}
|
|
|
|
.recommend-service-list {
|
|
margin-top: 8rpx;
|
|
}
|
|
|
|
.recommend-service-card {
|
|
background: #ffffff;
|
|
border-radius: 28rpx;
|
|
padding: 24rpx;
|
|
box-shadow: 0 10rpx 24rpx rgba(15, 23, 42, 0.06);
|
|
margin-bottom: 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.recommend-service-cover {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 28rpx;
|
|
background: linear-gradient(180deg, #eafbf7 0%, #eff6ff 100%);
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.recommend-service-cover-text {
|
|
font-size: 28rpx;
|
|
font-weight: 700;
|
|
color: #0f766e;
|
|
}
|
|
|
|
.recommend-service-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
.recommend-service-title {
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
color: #16324f;
|
|
}
|
|
|
|
.recommend-service-subtitle,
|
|
.recommend-service-suitable {
|
|
margin-top: 10rpx;
|
|
font-size: 24rpx;
|
|
line-height: 34rpx;
|
|
color: #64748b;
|
|
min-height: 0;
|
|
}
|
|
|
|
.recommend-service-tags {
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
margin-top: 18rpx;
|
|
margin-bottom: 18rpx;
|
|
}
|
|
|
|
.recommend-service-tag {
|
|
padding: 10rpx 16rpx;
|
|
border-radius: 999rpx;
|
|
background: #f1f5f9;
|
|
font-size: 22rpx;
|
|
color: #476072;
|
|
box-sizing: border-box;
|
|
margin-right: 12rpx;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.recommend-service-price-prefix,
|
|
.recommend-service-price {
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
color: #0f766e;
|
|
}
|
|
|
|
.recommend-service-unit {
|
|
font-size: 22rpx;
|
|
color: #64748b;
|
|
}
|
|
|
|
.recommend-secondary-btn,
|
|
.recommend-primary-btn {
|
|
padding: 0 26rpx;
|
|
height: 68rpx;
|
|
border-radius: 999rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 700;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 12rpx;
|
|
}
|
|
|
|
.recommend-secondary-btn {
|
|
background: #ffffff;
|
|
border-width: 2rpx;
|
|
border-style: solid;
|
|
border-color: #cbd5e1;
|
|
color: #476072;
|
|
}
|
|
|
|
.recommend-primary-btn {
|
|
background: #16a085;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.floating-service-helper {
|
|
position: fixed;
|
|
right: 24rpx;
|
|
bottom: 168rpx;
|
|
width: 176rpx;
|
|
padding: 20rpx 22rpx;
|
|
border-radius: 28rpx;
|
|
background: linear-gradient(180deg, #16a085 0%, #0f766e 100%);
|
|
box-shadow: 0 12rpx 24rpx rgba(15, 118, 110, 0.18);
|
|
}
|
|
|
|
.floating-service-helper-title,
|
|
.floating-service-helper-desc {
|
|
font-size: 22rpx;
|
|
line-height: 32rpx;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.floating-service-helper-desc {
|
|
margin-top: 6rpx;
|
|
font-weight: 700;
|
|
}
|
|
</style> |