完善下单逻辑及其ui展示,修复支付倒计时显示错误bug
This commit is contained in:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user