完善下单逻辑及其ui展示,修复支付倒计时显示错误bug

This commit is contained in:
2026-05-25 15:35:41 +08:00
parent d25f80ccdd
commit cecb51a8e2
40 changed files with 13040 additions and 3217 deletions

View File

@@ -28,12 +28,20 @@
</view>
<ServicePanel title="Step1 服务地址" subtitle="确认上门地址、楼层与入户条件。">
<view class="form-item">
<text class="label">上门地址</text>
<view class="value-card" @click="selectAddress">
<text class="value-card-text">{{ addressLineText }}</text>
<text class="value-card-action">点击更换</text>
<view class="service-address-card" @click="selectAddress">
<view class="service-address-main">
<text class="service-address-title">服务地址</text>
<view v-if="selectedAddress != null" class="service-address-detail">
<view class="service-address-contact-row">
<text class="service-address-contact">{{ selectedAddress.contactName }}</text>
<text class="service-address-phone">{{ getSelectedAddressPhone() }}</text>
</view>
<text class="service-address-full">{{ selectedAddress.fullAddress }}</text>
<text v-if="selectedAddress.remark != ''" class="service-address-remark">备注:{{ selectedAddress.remark }}</text>
</view>
<text v-else class="service-address-placeholder">请选择服务地址</text>
</view>
<text class="service-address-arrow">></text>
</view>
<view class="form-grid">
<view class="form-grid-item">
@@ -271,11 +279,13 @@
<script setup lang="uts">
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { onLoad, onShow } from '@dcloudio/uni-app'
import ServicePageHeader from '@/components/homeService/ServicePageHeader.uvue'
import ServicePanel from '@/components/homeService/ServicePanel.uvue'
import { createHomeServiceApplication, fetchHomeServiceCatalog } from '@/services/homeServiceService.uts'
import { HomeServiceApplicationDraftType, HomeServiceCatalogType } from '@/types/home-service.uts'
import { HomeServiceApplicationDraftType, HomeServiceCatalogType, HomeServiceSelectedAddressType } from '@/types/home-service.uts'
import { getCurrentUser, getCurrentUserId } from '@/utils/store.uts'
import { goToLogin } from '@/utils/utils.uts'
import {
BookingDayOptionType,
BookingTimeSlotType,
@@ -390,6 +400,7 @@ const servicePackages = ref<Array<ServicePackageOptionType>>([])
const selectedDayId = ref('day-1')
const selectedSlotId = ref('slot-1')
const selectedAddress = ref<HomeServiceSelectedAddressType | null>(null)
const careAddress = ref(defaultCareAddress.address)
const careDetailAddress = ref(defaultCareAddress.detailAddress)
@@ -499,10 +510,56 @@ function buildDefaultPackages(currentServiceId: string, basePrice: number, durat
}
const addressLineText = computed((): string => {
if (selectedAddress.value != null && selectedAddress.value.fullAddress != '') {
return selectedAddress.value.fullAddress
}
const fullAddress = careAddress.value + ' ' + careDetailAddress.value
return fullAddress.trim() != '' ? fullAddress : '请选择上门服务地址'
return fullAddress.trim() != '' ? fullAddress : '请选择服务地址'
})
function applySelectedAddress(address: HomeServiceSelectedAddressType | null): void {
selectedAddress.value = address
if (address == null) {
careAddress.value = ''
careDetailAddress.value = ''
return
}
const locationAddress = address.locationAddress != null && address.locationAddress != '' ? address.locationAddress : address.addressDetail
const doorNo = address.doorNo != null && address.doorNo != '' ? address.doorNo : address.houseNumber
careAddress.value = locationAddress
careDetailAddress.value = doorNo
if (contactName.value == '') {
contactName.value = address.contactName
}
const phoneText = address.phone != null && address.phone != '' ? address.phone : address.contactPhone
if (contactPhone.value == '') {
contactPhone.value = phoneText
}
}
function getSelectedAddressPhone(): string {
if (selectedAddress.value == null) {
return ''
}
if (selectedAddress.value.phone != null && selectedAddress.value.phone != '') {
return selectedAddress.value.phone
}
return selectedAddress.value.contactPhone
}
function loadCachedSelectedAddress(): void {
try {
const cachedAddress = uni.getStorageSync('hss_selected_service_address') as HomeServiceSelectedAddressType | null
if (cachedAddress != null && cachedAddress.fullAddress != '') {
applySelectedAddress(cachedAddress)
return
}
} catch (error) {
console.error('读取服务地址缓存失败', error)
}
applySelectedAddress(null)
}
const selectedTimeText = computed((): string => {
let selectedDayLabel = ''
for (let i = 0; i < bookingDays.value.length; i++) {
@@ -611,9 +668,20 @@ function buildDemandSummary(): string {
+ ',服务需求:' + selectedNeeds
+ ',详细需求:' + demandDetailText.value
+ ',紧急联系人:' + emergencyName.value + ' ' + emergencyPhone.value
+ ',服务地址备注:' + (selectedAddress.value != null ? selectedAddress.value.remark : '')
+ ',备注:' + remarkText.value
}
function setUnavailableServiceState() {
serviceTitle.value = '服务暂未配置'
serviceSubtitle.value = '当前服务目录未找到该项目,请稍后再试。'
servicePrice.value = 0
serviceDuration.value = '待配置'
serviceSuitableFor.value = '请联系管理员初始化服务目录。'
serviceImageText.value = '服务'
servicePackages.value = [] as Array<ServicePackageOptionType>
}
async function loadData() {
bookingDays.value = getBookingDayOptions()
bookingSlots.value = getBookingTimeSlots()
@@ -633,15 +701,7 @@ async function loadData() {
}
}
if (matchedService == null) {
const fallbackItems = getHomeServiceItems(catalog)
if (fallbackItems.length > 0) {
serviceTitle.value = fallbackItems[0].title
serviceSubtitle.value = fallbackItems[0].subtitle
servicePrice.value = fallbackItems[0].price
serviceSuitableFor.value = fallbackItems[0].suitableFor
serviceImageText.value = fallbackItems[0].imageText
}
servicePackages.value = buildDefaultPackages(serviceId.value, servicePrice.value, serviceDuration.value)
setUnavailableServiceState()
return
}
serviceTitle.value = matchedService.name
@@ -656,17 +716,22 @@ async function loadData() {
servicePackages.value = buildDefaultPackages(serviceId.value, servicePrice.value, serviceDuration.value)
}
function selectAddress() {
if (careAddress.value == '' || careDetailAddress.value == '') {
careAddress.value = defaultCareAddress.address
careDetailAddress.value = defaultCareAddress.detailAddress
careArea.value = defaultCareAddress.area
careFloor.value = defaultCareAddress.floor
careHasElevator.value = defaultCareAddress.hasElevator
uni.showToast({ title: '已填入示例地址', icon: 'none' })
return
async function ensureLogin(): Promise<boolean> {
const user = await getCurrentUser()
if (user == null || getCurrentUserId() == '') {
goToLogin('/pages/mall/consumer/home-service/service-detail?id=' + serviceId.value + '&mode=booking')
return false
}
uni.navigateTo({ url: '/pages/mall/consumer/address-list' })
return true
}
function selectAddress() {
ensureLogin().then((ok) => {
if (!ok) {
return
}
uni.navigateTo({ url: '/pages/address/address-list' })
})
}
function handleAgencyReplace() {
@@ -746,8 +811,15 @@ function selectServicePackage(packageId: string) {
}
async function submitBooking() {
if (careAddress.value == '' || careDetailAddress.value == '') {
uni.showToast({ title: '请选择上门服务地址', icon: 'none' })
if (!(await ensureLogin())) {
return
}
if (servicePackages.value.length == 0 || servicePrice.value <= 0) {
uni.showToast({ title: '当前服务暂不可预约', icon: 'none' })
return
}
if (selectedAddress.value == null) {
uni.showToast({ title: '请选择服务地址', icon: 'none' })
return
}
if (recipientName.value == '') {
@@ -781,10 +853,15 @@ async function submitBooking() {
phone: contactPhone.value,
address: addressLineText.value,
preferredTime: selectedTimeText.value,
demandSummary: buildDemandSummary()
demandSummary: buildDemandSummary(),
serviceAddressSnapshot: selectedAddress.value
}
const created = await createHomeServiceApplication(draft)
if (created == null) {
uni.showToast({ title: '预约提交失败,请稍后重试', icon: 'none' })
return
}
uni.showToast({ title: '预约已提交', icon: 'success' })
uni.navigateTo({ url: '/pages/mall/consumer/home-service/order-detail?id=' + created.id })
}
@@ -796,12 +873,14 @@ onLoad((options) => {
}
const mode = options['mode']
if (mode != null && mode == 'booking') {
careAddress.value = defaultCareAddress.address
careDetailAddress.value = defaultCareAddress.detailAddress
careArea.value = defaultCareAddress.area
}
loadData()
})
onShow(() => {
loadCachedSelectedAddress()
})
</script>
<style scoped>
@@ -845,6 +924,81 @@ onLoad((options) => {
box-shadow: 0 12rpx 24rpx rgba(15, 23, 42, 0.06);
}
.service-address-card {
background: #ffffff;
border-radius: 24rpx;
padding: 24rpx;
flex-direction: row;
align-items: center;
justify-content: space-between;
border: 1rpx solid rgba(255, 125, 151, 0.16);
margin-bottom: 24rpx;
box-shadow: 0 10rpx 20rpx rgba(15, 23, 42, 0.04);
}
.service-address-main {
flex: 1;
margin-right: 20rpx;
}
.service-address-title {
font-size: 28rpx;
font-weight: 600;
color: #1f2937;
margin-bottom: 12rpx;
}
.service-address-detail {
display: flex;
flex-direction: column;
gap: 8rpx;
}
.service-address-contact-row {
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 16rpx;
}
.service-address-contact,
.service-address-phone,
.service-address-full,
.service-address-remark,
.service-address-placeholder,
.service-address-arrow {
font-size: 24rpx;
}
.service-address-contact {
font-weight: 600;
color: #111827;
}
.service-address-phone {
color: #4b5563;
}
.service-address-full {
color: #374151;
line-height: 1.5;
}
.service-address-remark {
color: #6b7280;
line-height: 1.5;
}
.service-address-placeholder {
color: #9ca3af;
line-height: 1.5;
}
.service-address-arrow {
color: #c18b95;
font-weight: 600;
}
.summary-top-row,
.summary-tag-row,
.summary-price-row,