huangzhenbao/medical-mall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

解决登录显示、首页显示bug

Browse Source
This commit is contained in:
huangzhenbao
2026-05-19 11:06:46 +08:00
parent 2f7e097e6c
commit 00a859c551
181 changed files with 55329 additions and 998 deletions
Download Patch File Download Diff File Expand all files Collapse all files

363
pages/mall/consumer/home-service/apply.uvue
View File

@@ -1,8 +1,17 @@
<template>
<ServicePageScaffold title="提交服务申请" fallback-url="/pages/mall/consumer/home-service/index">
<ServicePanel title="提交服务申请" subtitle="先使用 mock 数据模拟申请受理流程。">
<view class="form-item">
<text class="label">选择服务</text>
<view class="apply-page">
<ServicePageScaffold title="提交服务申请" fallback-url="/pages/mall/consumer/home-service/index">
<view class="summary-card">
<text class="summary-title">快速预约上门服务</text>
<text class="summary-desc">保留现有申请逻辑，把旧入口调整为预约下单流程页体验。</text>
<view class="summary-tips-row">
<text class="summary-tip">平台认证</text>
<text class="summary-tip">可预约</text>
<text class="summary-tip">服务保障</text>
</view>
</view>
<ServicePanel title="Step1 选择服务" subtitle="先确认预约的居家服务项目。">
<view class="choice-wrap">
<view
v-for="item in services"
@@ -11,58 +20,109 @@
:class="selectedServiceId == item.id ? 'choice-active' : ''"
@click="selectService(item.id, item.name)"
>
<text class="choice-title">{{ item.name }}</text>
<text class="choice-desc">{{ item.durationText }} · ¥{{ item.price }}</text>
<view class="choice-header-row">
<text class="choice-title">{{ item.name }}</text>
<text class="choice-price">¥{{ item.price }}</text>
</view>
<text class="choice-desc">{{ item.durationText }} · {{ item.summary }}</text>
<text class="choice-suitable">适用对象：{{ item.suitableFor }}</text>
</view>
</view>
</view>
</ServicePanel>
<view class="form-item">
<text class="label">申请人</text>
<input v-model="form.applicantName" class="input" placeholder="请输入申请人姓名" />
</view>
<view class="form-item">
<text class="label">服务对象</text>
<input v-model="form.elderName" class="input" placeholder="请输入老人姓名" />
</view>
<view class="form-item">
<text class="label">年龄</text>
<input v-model="ageText" class="input" type="number" placeholder="请输入老人年龄" />
</view>
<view class="form-item">
<text class="label">联系电话</text>
<input v-model="form.phone" class="input" type="number" placeholder="请输入联系电话" />
</view>
<view class="form-item">
<text class="label">服务地址</text>
<textarea v-model="form.address" class="textarea" placeholder="请输入详细上门地址"></textarea>
</view>
<view class="form-item">
<text class="label">期望时间</text>
<input v-model="form.preferredTime" class="input" placeholder="例如 2026-05-14 上午" />
</view>
<view class="form-item">
<text class="label">需求说明</text>
<textarea v-model="form.demandSummary" class="textarea" placeholder="简要描述照护需求、病情重点、注意事项"></textarea>
</view>
<ServicePanel title="Step2 服务地址" subtitle="保持原有地址字段，先用预约卡形式承载。">
<view class="form-item">
<text class="label">服务地址</text>
<textarea v-model="form.address" class="textarea" placeholder="请输入详细上门地址"></textarea>
</view>
</ServicePanel>
<ServicePanel title="Step3 上门时间" subtitle="可直接选择推荐时段，也支持手动输入。">
<scroll-view class="booking-day-scroll" direction="horizontal" :show-scrollbar="false">
<view class="booking-day-row">
<view
v-for="item in bookingDays"
:key="item.id"
:class="['booking-day-card', selectedDayId == item.id ? 'booking-day-card-active' : '']"
@click="selectDay(item.id)"
>
<text :class="['booking-day-label', selectedDayId == item.id ? 'booking-day-label-active' : '']">{{ item.label }}</text>
<text :class="['booking-day-date', selectedDayId == item.id ? 'booking-day-date-active' : '']">{{ item.dateText }}</text>
</view>
</view>
</scroll-view>
<view class="booking-slot-grid">
<view
v-for="item in bookingSlots"
:key="item.id"
:class="['booking-slot-card', selectedSlotId == item.id ? 'booking-slot-card-active' : '', item.available ? '' : 'booking-slot-card-disabled']"
@click="selectSlot(item.id, item.available)"
>
<text :class="['booking-slot-label', selectedSlotId == item.id ? 'booking-slot-label-active' : '']">{{ item.label }}</text>
</view>
</view>
<view class="form-item form-item-last">
<text class="label">期望时间</text>
<input v-model="form.preferredTime" class="input" placeholder="例如 2026-05-14 上午" />
</view>
</ServicePanel>
<ServicePanel title="Step4 联系人信息" subtitle="保留现有字段，不改提交结构。">
<view class="form-item">
<text class="label">申请人</text>
<input v-model="form.applicantName" class="input" placeholder="请输入申请人姓名" />
</view>
<view class="form-item">
<text class="label">服务对象</text>
<input v-model="form.elderName" class="input" placeholder="请输入老人姓名" />
</view>
<view class="form-item">
<text class="label">年龄</text>
<input v-model="ageText" class="input" type="number" placeholder="请输入老人年龄" />
</view>
<view class="form-item">
<text class="label">联系电话</text>
<input v-model="form.phone" class="input" type="number" placeholder="请输入联系电话" />
</view>
<view class="form-item form-item-last">
<text class="label">需求说明</text>
<textarea v-model="form.demandSummary" class="textarea" placeholder="简要描述照护需求、病情重点、注意事项"></textarea>
</view>
</ServicePanel>
<view class="page-bottom-space"></view>
</ServicePageScaffold>
<view class="bottom-bar">
<view>
<text class="bottom-bar-label">预计金额</text>
<view class="bottom-bar-price-row">
<text class="bottom-bar-price-prefix">¥</text>
<text class="bottom-bar-price">{{ selectedPrice }}</text>
<text class="bottom-bar-price-unit">起</text>
</view>
</view>
<view class="submit-btn" @click="submitApplication">提交申请</view>
</ServicePanel>
</ServicePageScaffold>
</view>
</view>
</template>
<script setup lang="uts">
import { reactive, ref } from 'vue'
import { computed, reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
import ServicePanel from '@/components/homeService/ServicePanel.uvue'
import { createHomeServiceApplication, fetchHomeServiceCatalog } from '@/services/homeServiceService.uts'
import { HomeServiceApplicationDraftType, HomeServiceCatalogType } from '@/types/home-service.uts'
import { BookingDayOptionType, BookingTimeSlotType, getBookingDayOptions, getBookingTimeSlots } from '@/utils/homeServiceUiMock.uts'
const services = ref<Array<HomeServiceCatalogType>>([])
const selectedServiceId = ref('svc-001')
const selectedServiceName = ref('基础上门护理')
const ageText = ref('78')
const bookingDays = ref<Array<BookingDayOptionType>>([])
const bookingSlots = ref<Array<BookingTimeSlotType>>([])
const selectedDayId = ref('day-1')
const selectedSlotId = ref('slot-1')
const form = reactive({
serviceId: 'svc-001',
@@ -76,17 +136,61 @@ const form = reactive({
demandSummary: '老人需要基础照护、血压监测和跌倒风险提醒。'
} as HomeServiceApplicationDraftType)
const selectedPrice = computed((): string => {
for (let i = 0; i < services.value.length; i++) {
if (services.value[i].id == selectedServiceId.value) {
return services.value[i].price.toString()
}
}
return '0'
})
async function loadData() {
bookingDays.value = getBookingDayOptions()
bookingSlots.value = getBookingTimeSlots()
services.value = await fetchHomeServiceCatalog()
}
function selectService(serviceId: string, serviceName: string) {
selectedServiceId.value = serviceId
selectedServiceName.value = serviceName
form.serviceId = serviceId
form.serviceName = serviceName
}
function syncPreferredTime() {
let selectedDay = ''
for (let i = 0; i < bookingDays.value.length; i++) {
if (bookingDays.value[i].id == selectedDayId.value) {
selectedDay = bookingDays.value[i].label + ' ' + bookingDays.value[i].dateText
break
}
}
let selectedSlot = ''
for (let i = 0; i < bookingSlots.value.length; i++) {
if (bookingSlots.value[i].id == selectedSlotId.value) {
selectedSlot = bookingSlots.value[i].label
break
}
}
if (selectedDay != '' && selectedSlot != '') {
form.preferredTime = selectedDay + ' ' + selectedSlot
}
}
function selectDay(dayId: string) {
selectedDayId.value = dayId
syncPreferredTime()
}
function selectSlot(slotId: string, available: boolean) {
if (!available) {
uni.showToast({ title: '该时段暂不可约', icon: 'none' })
return
}
selectedSlotId.value = slotId
syncPreferredTime()
}
async function submitApplication() {
if (form.applicantName == '' || form.elderName == '' || form.phone == '' || form.address == '' || form.preferredTime == '') {
uni.showToast({ title: '请补全申请信息', icon: 'none' })
@@ -106,10 +210,66 @@ onLoad(() => {
</script>
<style scoped>
.apply-page {
background: #f4f8fb;
}
.summary-card {
background: linear-gradient(180deg, #eafbf7 0%, #eff6ff 100%);
border-radius: 32rpx;
padding: 28rpx;
margin-bottom: 24rpx;
box-shadow: 0 12rpx 24rpx rgba(15, 118, 110, 0.08);
}
.summary-title {
font-size: 38rpx;
font-weight: 700;
color: #16324f;
}
.summary-desc,
.choice-desc,
.choice-suitable,
.bottom-bar-label {
margin-top: 12rpx;
font-size: 24rpx;
line-height: 34rpx;
color: #64748b;
}
.summary-tips-row,
.choice-header-row,
.bottom-bar,
.bottom-bar-price-row,
.booking-day-row {
flex-direction: row;
align-items: center;
}
.summary-tips-row {
flex-wrap: wrap;
margin-top: 20rpx;
}
.summary-tip {
padding: 10rpx 16rpx;
border-radius: 999rpx;
background: rgba(255, 255, 255, 0.78);
font-size: 22rpx;
color: #476072;
margin-right: 12rpx;
margin-bottom: 12rpx;
}
.form-item {
margin-bottom: 24rpx;
}
.form-item-last {
margin-bottom: 0;
}
.label {
font-size: 28rpx;
font-weight: 700;
@@ -138,13 +298,13 @@ onLoad(() => {
}
.choice-wrap {
gap: 16rpx;
margin-top: 4rpx;
}
.choice-card {
padding: 22rpx;
background: #f8fbfc;
border-radius: 18rpx;
border-radius: 24rpx;
margin-bottom: 16rpx;
border-width: 2rpx;
border-style: solid;
@@ -156,25 +316,132 @@ onLoad(() => {
background: #effcf8;
}
.choice-header-row {
justify-content: space-between;
}
.choice-title {
font-size: 30rpx;
font-weight: 700;
color: #16324f;
}
.choice-price,
.bottom-bar-price-prefix,
.bottom-bar-price {
font-size: 34rpx;
font-weight: 700;
color: #0f766e;
}
.choice-desc {
margin-top: 8rpx;
}
.booking-day-scroll {
height: 132rpx;
margin-bottom: 18rpx;
}
.booking-day-row {
padding-right: 20rpx;
}
.booking-day-card {
width: 150rpx;
padding: 18rpx;
border-radius: 22rpx;
background: #f8fbfd;
margin-right: 16rpx;
box-sizing: border-box;
}
.booking-day-card-active {
background: #0f766e;
}
.booking-day-label,
.booking-day-date,
.booking-slot-label {
font-size: 24rpx;
color: #66788a;
line-height: 34rpx;
color: #476072;
}
.booking-day-date {
margin-top: 6rpx;
}
.booking-day-label-active,
.booking-day-date-active,
.booking-slot-label-active {
color: #ffffff;
font-weight: 700;
}
.booking-slot-grid {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 20rpx;
}
.booking-slot-card {
width: 48.5%;
height: 82rpx;
border-radius: 22rpx;
background: #f8fbfd;
align-items: center;
justify-content: center;
margin-bottom: 16rpx;
border-width: 2rpx;
border-style: solid;
border-color: transparent;
box-sizing: border-box;
}
.booking-slot-card-active {
background: #0f766e;
border-color: #0f766e;
}
.booking-slot-card-disabled {
background: #f1f5f9;
opacity: 0.55;
}
.page-bottom-space {
height: 150rpx;
}
.bottom-bar {
position: fixed;
left: 24rpx;
right: 24rpx;
bottom: 28rpx;
justify-content: space-between;
background: #ffffff;
border-radius: 30rpx;
padding: 20rpx 22rpx;
box-shadow: 0 12rpx 28rpx rgba(15, 23, 42, 0.12);
}
.bottom-bar-price-unit {
font-size: 22rpx;
color: #64748b;
margin-left: 8rpx;
margin-bottom: 4rpx;
}
.submit-btn {
margin-top: 16rpx;
padding: 26rpx 0;
border-radius: 20rpx;
height: 84rpx;
padding: 0 36rpx;
border-radius: 999rpx;
background: #0f766e;
text-align: center;
font-size: 30rpx;
align-items: center;
justify-content: center;
font-size: 28rpx;
font-weight: 700;
color: #ffffff;
}