1692 lines
52 KiB
Vue
1692 lines
52 KiB
Vue
<template>
|
||
<view class="feeding-container">
|
||
<scroll-view class="feeding-scroll" scroll-y>
|
||
<view class="feeding-content">
|
||
<!-- Tab切换 -->
|
||
<!-- <view class="order-tab-list">
|
||
<view :class="activeTab === 'reservation' ? 'activeItem' : 'tabItem'"
|
||
@click.stop="switchTab('reservation')">
|
||
预约单
|
||
</view>
|
||
<view :class="activeTab === 'instant' ? 'activeItem' : 'tabItem'"
|
||
@click.stop="switchTab('instant')">
|
||
即时单
|
||
</view>
|
||
</view> -->
|
||
|
||
<!-- 表单内容 -->
|
||
<view class="form-wrapper">
|
||
<!-- 选择宠物 -->
|
||
<view class="form-section">
|
||
<view class="form-label-row">
|
||
<text class="required">*</text>
|
||
<text class="form-label">选择宠物</text>
|
||
</view>
|
||
<view class="add-pet-wrapper">
|
||
<view v-for="(pet, index) in selectedPets" :key="pet.id || index"
|
||
class="selected-pet-avatar">
|
||
<image class="pet-avatar-img" :src="pet.avatar || `${imgPrefix}record_avator.png`"
|
||
mode="aspectFill" />
|
||
<view class="remove-pet-btn" @click.stop="removePet(index)">×</view>
|
||
</view>
|
||
<view class="add-pet-btn" @click="addPet">
|
||
<text class="plus-icon">+</text>
|
||
</view>
|
||
</view>
|
||
<text class="add-pet-text">添加宠物</text>
|
||
|
||
</view>
|
||
|
||
<!-- 选择套餐 -->
|
||
<view class="form-section package-section">
|
||
<view class="package-header">
|
||
<text class="required">*</text>
|
||
<text class="form-label">选择宠物套餐</text>
|
||
</view>
|
||
<scroll-view class="package-scroll" scroll-x>
|
||
<view class="package-list">
|
||
<view class="package-card"
|
||
:class="{ 'package-card-selected': formData.selectedPackageIndex === index }"
|
||
v-for="(item, index) in packageList" :key="index" @click="selectPackage(index)">
|
||
<view class="package-info">
|
||
<view class="package-name-row">
|
||
<text class="package-name">{{ item.service_name }}</text>
|
||
<image class="info-icon" :src="imgPrefix + 'trainingTips.png'"
|
||
mode="widthFix" @click.stop="showPackageInfo(item)" />
|
||
</view>
|
||
<text class="package-duration">{{ item.service_desc }}</text>
|
||
<view class="package-price-row">
|
||
<view class="price-content">
|
||
<text class="package-price">¥{{ item.service_price }}</text>
|
||
<text class="package-unit">元/只</text>
|
||
</view>
|
||
<image v-if="formData.selectedPackageIndex === index" class="package-radio"
|
||
src="@/static/images/cart_checked.png" mode="widthFix" />
|
||
<image v-else class="package-radio"
|
||
:src="imgPrefix + 'packageUnchecked.png'" mode="widthFix" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 选择服务时间 -->
|
||
<view class="form-section" v-if="activeTab === 'reservation'" @click="selectTime">
|
||
<view class="service-time-header">
|
||
<text class="required">*</text>
|
||
<text class="service-time-title">选择服务时间</text>
|
||
<view class="service-time-count" v-if="selectedDatesCount > 0">
|
||
<text class="count-text">共{{ selectedDatesCount }}天</text>
|
||
<image class="right-icon" :src="imgPrefix + 'right-arrow.png'" mode="widthFix" />
|
||
</view>
|
||
<view class="service-time-count" v-else>
|
||
<text class="placeholder-text">请选择</text>
|
||
<image class="right-icon" :src="imgPrefix + 'right-arrow.png'" mode="widthFix" />
|
||
</view>
|
||
</view>
|
||
<view class="service-time-content" v-if="formData.serviceTime && selectedDatesCount > 0">
|
||
<view class="service-time-item">
|
||
<text class="service-time-label">已选择日期:</text>
|
||
<text class="service-time-value">{{ selectedDatesList.join(',') }}</text>
|
||
</view>
|
||
<view class="service-time-item">
|
||
<text class="service-time-label">已选择时间段:</text>
|
||
<text class="service-time-value">{{ selectedTimeSlot }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 选择服务地址 -->
|
||
<view class="form-section" @click="selectAddress">
|
||
<view class="info-top-view">
|
||
<text class="required">*</text>
|
||
<view class="title-view">
|
||
<text class="form-label">选择服务地址</text>
|
||
</view>
|
||
<view class="info-view" v-if="addressInfo">
|
||
<view class="address-display">
|
||
<view class="address-name-phone">
|
||
<text class="address-name-text">{{ addressInfo.recipient_name || '' }}</text>
|
||
<text class="address-phone-text">{{ addressInfo.phone || '' }}</text>
|
||
</view>
|
||
<text class="address-detail-text">{{ formData.serviceAddress }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="info-view" v-else>
|
||
<text class="placeholder-text">请选择</text>
|
||
</view>
|
||
<image class="right-icon" :src="imgPrefix + 'right-arrow.png'" mode="widthFix" />
|
||
</view>
|
||
<!-- <text class="nightFee">以下区域需收取调度费：奉贤区、嘉定区、青浦区、松江区、崇明县、金山区</text> -->
|
||
</view>
|
||
|
||
|
||
|
||
<!-- Wi-Fi密码 -->
|
||
<view class="form-section">
|
||
<view class="info-top-view">
|
||
<view class="title-view">
|
||
<text class="form-label">Wi-Fi密码</text>
|
||
</view>
|
||
<view class="info-view">
|
||
<input class="form-input" type="text" v-model="formData.wifiPassword"
|
||
placeholder="以便工作人员拍摄宠物视频" placeholder-class="placeholder-class" />
|
||
</view>
|
||
<view class="right-icon" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 服务备注 -->
|
||
<view class="form-section" @click="inputServiceNotes">
|
||
<view class="info-top-view">
|
||
<view class="title-view">
|
||
<text class="form-label">服务备注</text>
|
||
</view>
|
||
<view class="info-view" v-if="formData.serviceNotes">
|
||
<text class="form-label">{{ formData.serviceNotes }}</text>
|
||
</view>
|
||
<view class="info-view" v-else>
|
||
<text class="placeholder-text">请补充宠物注意事项</text>
|
||
</view>
|
||
<image class="right-icon" :src="imgPrefix + 'right-arrow.png'" mode="widthFix" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 钥匙交接备注 -->
|
||
<view class="form-section" @click="inputKeyNotes">
|
||
<view class="info-top-view">
|
||
<text class="required">*</text>
|
||
<view class="title-view">
|
||
<text class="form-label">钥匙交接备注</text>
|
||
</view>
|
||
<view class="info-view" v-if="formData.keyNotes">
|
||
<text class="form-label">{{ formData.keyNotes }}</text>
|
||
</view>
|
||
<view class="info-view" v-else>
|
||
<text class="placeholder-text">请补充钥匙交接备注</text>
|
||
</view>
|
||
<image class="right-icon" :src="imgPrefix + 'right-arrow.png'" mode="widthFix" />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 停车状况 -->
|
||
<view class="form-section form-section-park">
|
||
<view class="info-top-view">
|
||
<text class="required">*</text>
|
||
<view class="title-view">
|
||
<text class="form-label">停车状况</text>
|
||
</view>
|
||
</view>
|
||
<view class="park-list">
|
||
<view class="park-card" v-for="item in parkConditions" :key="item"
|
||
:class="{ 'park-card-selected': formData.parkState === item }"
|
||
@click="selectParkState(item)">
|
||
<text class="park-card-text"
|
||
:class="{ 'park-card-text-selected': formData.parkState === item }">{{ item
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="park-input-wrap" v-if="formData.parkState === '其他'">
|
||
<textarea class="park-input" v-model="formData.otherParkState" placeholder="点击输入停车信息"
|
||
placeholder-class="placeholder-class" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 说明图片 -->
|
||
<view class="explain-image-section">
|
||
<image class="explain-image"
|
||
:src="imgPrefix + (serviceType === 'feeding' ? 'feedPetLong.png' : 'trainingExplain.png')"
|
||
mode="widthFix" />
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 底部固定栏（含 tip 时上方展示说明条） -->
|
||
<view class="bottom-fixed-wrap">
|
||
<view v-if="tip" class="tip-notice-bar">
|
||
<image class="tip-notice-icon" :src="imgPrefix + 'reservationTime-notice.png'" mode="aspectFit" />
|
||
<text class="tip-notice-text">{{ tip }}</text>
|
||
</view>
|
||
<view class="bottom-action-bar">
|
||
<view class="price-info">
|
||
<view class="estimate-price">
|
||
<text class="estimate-label">预估：</text>
|
||
<text class="estimate-amount">¥{{ estimatedPrice }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="next-step-btn" @click="goToNextStep">
|
||
<text class="next-step-text">下一步</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 服务备注弹窗 -->
|
||
<view class="key-notes-modal" v-if="showServiceNotesModal" @click.stop="closeServiceNotesModal">
|
||
<view class="modal-content" @click.stop="">
|
||
<!-- 标题栏 -->
|
||
<view class="modal-header">
|
||
<view class="close-btn-placeholder"></view>
|
||
<text class="modal-title">服务备注</text>
|
||
<view class="close-btn" @click="closeServiceNotesModal">
|
||
<text class="close-icon">×</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 内容区域 -->
|
||
<view class="content-view">
|
||
<!-- 输入框 -->
|
||
<view class="input-wrapper">
|
||
<textarea class="notes-input" v-model="serviceNotesInput" placeholder="请补充宠物注意事项"
|
||
placeholder-class="input-placeholder" maxlength="100" @input="onServiceNotesInput" />
|
||
<view class="char-count">{{ serviceNotesInput.length }}/100</view>
|
||
</view>
|
||
|
||
<!-- 快捷输入 -->
|
||
<view class="quick-input-section">
|
||
<text class="quick-input-label">快捷输入</text>
|
||
<view class="quick-tags">
|
||
<view class="quick-tag" v-for="(tag, index) in serviceNotesQuickTags" :key="index"
|
||
@click="selectServiceNotesTag(tag)">
|
||
<text class="tag-text">{{ tag }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提交按钮 -->
|
||
<view class="submit-btn" @click="submitServiceNotes">
|
||
<text class="submit-btn-text">提交</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 服务介绍弹窗 -->
|
||
<view class="service-info-modal" v-if="showServiceInfoModal" @click.stop="closeServiceInfoModal">
|
||
<view class="service-info-modal-content" @click.stop="">
|
||
<view class="service-info-header">
|
||
<text class="service-info-title">服务介绍</text>
|
||
</view>
|
||
<view class="service-info-body">
|
||
<text class="service-info-text">{{ currentServiceInfo }}</text>
|
||
</view>
|
||
<view class="service-info-footer">
|
||
<view class="service-info-btn" @click="closeServiceInfoModal">
|
||
<text class="service-info-btn-text">我知道了</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 钥匙交接备注弹窗 -->
|
||
<view class="key-notes-modal" v-if="showKeyNotesModal" @click.stop="closeKeyNotesModal">
|
||
<view class="modal-content" @click.stop="">
|
||
<!-- 标题栏 -->
|
||
<view class="modal-header">
|
||
<view class="close-btn-placeholder"></view>
|
||
<text class="modal-title">钥匙交接备注</text>
|
||
<view class="close-btn" @click="closeKeyNotesModal">
|
||
<text class="close-icon">×</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 内容区域 -->
|
||
<view class="content-view">
|
||
<!-- 输入框 -->
|
||
<view class="input-wrapper">
|
||
<textarea class="notes-input" v-model="keyNotesInput" placeholder="请补充宠物注意事项"
|
||
placeholder-class="input-placeholder" maxlength="100" @input="onKeyNotesInput" />
|
||
<view class="char-count">{{ keyNotesInput.length }}/100</view>
|
||
</view>
|
||
|
||
<!-- 快捷输入 -->
|
||
<view class="quick-input-section">
|
||
<text class="quick-input-label">快捷输入</text>
|
||
<view class="quick-tags">
|
||
<view class="quick-tag" v-for="(tag, index) in keyNotesQuickTags" :key="index"
|
||
@click="selectQuickTag(tag)">
|
||
<text class="tag-text">{{ tag }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 提交按钮 -->
|
||
<view class="submit-btn" @click="submitKeyNotes">
|
||
<text class="submit-btn-text">提交</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { imgPrefix } from '@/utils/common';
|
||
import { getHomeServices } from '@/api/common';
|
||
import { createFeedOrder, createWalkOrder, checkHolidayFee } from '@/api/order';
|
||
import { PET_TYPE_CAT, PET_TYPE_DOG } from '@/constants/app.business';
|
||
import moment from 'moment';
|
||
|
||
export default {
|
||
name: 'Feeding',
|
||
data() {
|
||
return {
|
||
imgPrefix,
|
||
serviceType: 'feeding', // 服务类型：feeding(上门喂宠) 或 walking(上门遛宠)
|
||
activeTab: 'reservation',
|
||
formData: {
|
||
pet: null,
|
||
selectedPackageIndex: null,
|
||
serviceTime: null, // 改为存储完整的timeData对象 {dates: [], timeSlot: ''}
|
||
serviceAddress: '',
|
||
parkState: '',
|
||
otherParkState: '',
|
||
wifiPassword: '',
|
||
serviceNotes: '',
|
||
keyNotes: ''
|
||
},
|
||
parkConditions: ['小区', '地库', '路边', '其他'],
|
||
selectedPets: [], // 选中的宠物列表
|
||
addressInfo: null, // 地址信息对象
|
||
packageList: [
|
||
{
|
||
name: '单只小型犬(≤10kg)',
|
||
duration: '服务时长约30分钟',
|
||
price: 128
|
||
},
|
||
{
|
||
name: '单只中型犬(10-25kg)',
|
||
duration: '服务时长约60分钟',
|
||
price: 158
|
||
},
|
||
{
|
||
name: '单只大型犬(>25kg)',
|
||
duration: '服务时长约90分钟',
|
||
price: 188
|
||
}
|
||
],
|
||
showKeyNotesModal: false,
|
||
keyNotesInput: '',
|
||
showServiceNotesModal: false,
|
||
serviceNotesInput: '',
|
||
serviceNotesQuickTags: [
|
||
'怕生怕冷',
|
||
'胆小怕生',
|
||
'攻击性',
|
||
'不可抱',
|
||
'皮肤病',
|
||
'术后恢复',
|
||
'呼吸道敏感',
|
||
'需要安抚',
|
||
'护食',
|
||
'咬人',
|
||
'抓人'
|
||
],
|
||
keyNotesQuickTags: [
|
||
'存于快递柜',
|
||
'放于指定位置',
|
||
'家里有人在'
|
||
],
|
||
showServiceInfoModal: false,
|
||
currentServiceInfo: '',
|
||
holidayFee: 0,
|
||
tip: ''
|
||
};
|
||
},
|
||
computed: {
|
||
// 已选择日期数量
|
||
selectedDatesCount() {
|
||
return this.formData.serviceTime?.dates?.length || 0;
|
||
},
|
||
// 已选择日期列表（格式：YYYY-MM-DD）
|
||
selectedDatesList() {
|
||
return this.formData.serviceTime?.dates || [];
|
||
},
|
||
// 已选择时间段
|
||
selectedTimeSlot() {
|
||
return this.formData.serviceTime?.timeSlot || '';
|
||
},
|
||
// 预估价格（根据选中的套餐计算）
|
||
estimatedPrice() {
|
||
if (this.formData.selectedPackageIndex !== null && this.formData.selectedPackageIndex !== undefined) {
|
||
const selectedPackage = this.packageList[this.formData.selectedPackageIndex];
|
||
if (selectedPackage && selectedPackage.service_price) {
|
||
// 基础价格（包含1只体重最小的宠物1天的费用）
|
||
let basePrice = parseFloat(selectedPackage.service_price) || 0;
|
||
|
||
// 宠物费用：找出体重最小的宠物（套餐已包含），计算其他宠物的额外费用
|
||
let petsFee = 0;
|
||
if (this.selectedPets.length > 0) {
|
||
// 找出体重最小的宠物（weight_id最小的）
|
||
let minWeightId = Infinity;
|
||
let minWeightPetIndex = 0;
|
||
this.selectedPets.forEach((pet, index) => {
|
||
const weightId = pet.weight_id || pet.weight?.weight_id || 0;
|
||
if (weightId < minWeightId) {
|
||
minWeightId = weightId;
|
||
minWeightPetIndex = index;
|
||
}
|
||
});
|
||
|
||
// 遍历所有宠物，计算额外费用
|
||
this.selectedPets.forEach((pet, index) => {
|
||
// 跳过体重最小的那只（套餐已包含）
|
||
if (index === minWeightPetIndex) {
|
||
return;
|
||
}
|
||
|
||
if (this.serviceType === 'feeding') {
|
||
// 上门喂宠：每只额外宠物固定加30元
|
||
petsFee += 30;
|
||
} else if (this.serviceType === 'walking') {
|
||
// 上门遛宠：根据每只狗的体重判断
|
||
const weightId = pet.weight_id || pet.weight?.weight_id || 0;
|
||
|
||
// 根据体重ID判断费用
|
||
if (weightId < 7) {
|
||
petsFee += 40; // weight_id < 7，加40元
|
||
} else if (weightId >= 7) {
|
||
petsFee += 50; // weight_id >= 7，加50元
|
||
} else {
|
||
// 如果没有体重信息，默认加40元
|
||
petsFee += 40;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
let day = this.selectedDatesCount === 0 ? 1 : this.selectedDatesCount;
|
||
// 总价格 = 基础价格 + 附加价格 * 天数
|
||
let totalPrice = (basePrice + petsFee) * day;
|
||
return (totalPrice + this.holidayFee).toFixed(2);
|
||
}
|
||
}
|
||
return '0.00';
|
||
},
|
||
// 会员价格（预估价格的折扣价，假设9折）
|
||
// memberPrice() {
|
||
// const price = parseFloat(this.estimatedPrice);
|
||
// if (price > 0) {
|
||
// return (price * 0.8).toFixed(2);
|
||
// }
|
||
// return '0.00';
|
||
// }
|
||
},
|
||
onLoad(options) {
|
||
// 获取服务类型参数：feeding(上门喂宠) 或 walking(上门遛宠)
|
||
if (options.serviceType) {
|
||
this.serviceType = options.serviceType;
|
||
}
|
||
// 根据服务类型动态设置导航栏标题
|
||
const title = this.serviceType === 'walking' ? '上门遛宠' : '上门喂宠';
|
||
uni.setNavigationBarTitle({
|
||
title: title
|
||
});
|
||
// 调用套餐列表接口
|
||
this.getPackageList();
|
||
// 监听地址选择事件
|
||
uni.$on("selectAddress", this.addressChange);
|
||
},
|
||
onUnload() {
|
||
// 移除事件监听
|
||
uni.$off("selectAddress", this.addressChange);
|
||
},
|
||
methods: {
|
||
getPackageList() {
|
||
// 根据服务类型设置 service_type：上门喂宠=1，上门遛宠=2
|
||
const serviceType = this.serviceType === 'feeding' ? 1 : 2;
|
||
getHomeServices({ service_type: serviceType }).then((res) => {
|
||
// 兼容不同的返回结构
|
||
const list = res?.data || res?.info || res || [];
|
||
if (Array.isArray(list) && list.length > 0) {
|
||
this.packageList = list;
|
||
}
|
||
}).catch((err) => {
|
||
console.error('获取套餐列表失败:', err);
|
||
// 如果接口调用失败，保持使用默认的套餐列表
|
||
});
|
||
},
|
||
switchTab(tab) {
|
||
this.activeTab = tab;
|
||
// 清除所有选择的数据
|
||
this.selectedPets = [];
|
||
this.formData.pet = null;
|
||
this.formData.selectedPackageIndex = null;
|
||
this.formData.serviceTime = null;
|
||
this.addressInfo = null;
|
||
this.formData.serviceAddress = '';
|
||
},
|
||
addPet() {
|
||
uni.navigateTo({
|
||
url: `/pageHome/selectPet/index?serviceType=${this.serviceType}`,
|
||
events: {
|
||
changePet: (pet) => {
|
||
// 检查是否已经添加过这个宠物
|
||
const isExist = this.selectedPets.some(p => p.id === pet.id);
|
||
if (!isExist) {
|
||
this.selectedPets.push(pet);
|
||
// 如果只有一个宠物，也更新 formData.pet
|
||
if (this.selectedPets.length === 1) {
|
||
this.formData.pet = pet;
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: '该宠物已添加',
|
||
icon: 'none',
|
||
duration: 1500
|
||
});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
removePet(index) {
|
||
this.selectedPets.splice(index, 1);
|
||
// 如果删除后没有宠物了，清空 formData.pet
|
||
if (this.selectedPets.length === 0) {
|
||
this.formData.pet = null;
|
||
} else if (this.selectedPets.length === 1) {
|
||
// 如果只有一个了，更新 formData.pet
|
||
this.formData.pet = this.selectedPets[0];
|
||
}
|
||
},
|
||
selectTime() {
|
||
// 构建URL参数，传递已选择的数据
|
||
let url = '/pageHome/service/select-service-time';
|
||
if (this.formData.serviceTime && this.formData.serviceTime.dates && this.formData.serviceTime.dates.length > 0) {
|
||
const dates = encodeURIComponent(JSON.stringify(this.formData.serviceTime.dates));
|
||
const timeSlot = encodeURIComponent(this.formData.serviceTime.timeSlot || '');
|
||
url += `?dates=${dates}&timeSlot=${timeSlot}`;
|
||
}
|
||
|
||
uni.navigateTo({
|
||
url: url,
|
||
events: {
|
||
changeServiceTime: (timeData) => {
|
||
// timeData 包含 dates 和 timeSlot
|
||
// 直接存储完整的timeData对象
|
||
if (timeData && timeData.dates && timeData.dates.length > 0 && timeData.timeSlot) {
|
||
this.formData.serviceTime = timeData;
|
||
// 选择完日期后调用节假日费用校验接口，传递日期数组
|
||
checkHolidayFee({ date: timeData.dates }).then((res) => {
|
||
// 可根据返回结果处理节假日费用展示或价格更新
|
||
if (res && res.data) {
|
||
console.log('check_holiday_fee', res.data);
|
||
this.holidayFee = res.data.fee
|
||
this.tip = res.data.tip
|
||
}
|
||
}).catch((err) => {
|
||
console.error('check_holiday_fee error', err);
|
||
});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
},
|
||
selectPackage(index) {
|
||
this.formData.selectedPackageIndex = index;
|
||
},
|
||
showPackageInfo(item) {
|
||
this.currentServiceInfo = item.service_info || '';
|
||
this.showServiceInfoModal = true;
|
||
},
|
||
closeServiceInfoModal() {
|
||
this.showServiceInfoModal = false;
|
||
},
|
||
selectAddress() {
|
||
uni.navigateTo({
|
||
url: `/pageHome/selectAddress/index?typeSelect=1&addressId=${this.addressInfo?.id || this.addressInfo?.address_id || ""}`
|
||
});
|
||
},
|
||
addressChange(addressInfo) {
|
||
this.addressInfo = addressInfo;
|
||
// 格式化地址信息：省市区 + 详细地址（用于显示）
|
||
const region = [addressInfo.province, addressInfo.city, addressInfo.district].filter(Boolean).join('');
|
||
this.formData.serviceAddress = region ? `${region}${addressInfo.full_address}` : addressInfo.full_address;
|
||
},
|
||
selectParkState(item) {
|
||
this.formData.parkState = item;
|
||
if (item !== '其他') {
|
||
this.formData.otherParkState = '';
|
||
}
|
||
},
|
||
inputServiceNotes() {
|
||
this.serviceNotesInput = this.formData.serviceNotes || '';
|
||
this.showServiceNotesModal = true;
|
||
},
|
||
closeServiceNotesModal() {
|
||
this.showServiceNotesModal = false;
|
||
},
|
||
onServiceNotesInput(e) {
|
||
this.serviceNotesInput = e.detail.value;
|
||
},
|
||
selectServiceNotesTag(tag) {
|
||
if (this.serviceNotesInput.length + tag.length <= 100) {
|
||
this.serviceNotesInput = this.serviceNotesInput ? this.serviceNotesInput + ' ' + tag : tag;
|
||
} else {
|
||
uni.showToast({
|
||
title: '字数超出限制',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
submitServiceNotes() {
|
||
this.formData.serviceNotes = this.serviceNotesInput;
|
||
this.closeServiceNotesModal();
|
||
},
|
||
inputKeyNotes() {
|
||
this.keyNotesInput = this.formData.keyNotes || '';
|
||
this.showKeyNotesModal = true;
|
||
},
|
||
closeKeyNotesModal() {
|
||
this.showKeyNotesModal = false;
|
||
},
|
||
onKeyNotesInput(e) {
|
||
this.keyNotesInput = e.detail.value;
|
||
},
|
||
selectQuickTag(tag) {
|
||
if (this.keyNotesInput.length + tag.length <= 100) {
|
||
this.keyNotesInput = this.keyNotesInput ? this.keyNotesInput + ' ' + tag : tag;
|
||
} else {
|
||
uni.showToast({
|
||
title: '字数超出限制',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
},
|
||
submitKeyNotes() {
|
||
this.formData.keyNotes = this.keyNotesInput;
|
||
this.closeKeyNotesModal();
|
||
},
|
||
validateForm() {
|
||
// 校验选择宠物
|
||
if (!this.selectedPets || this.selectedPets.length === 0) {
|
||
uni.showToast({
|
||
title: '请选择宠物',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
// 校验选择宠物套餐
|
||
if (this.formData.selectedPackageIndex === null || this.formData.selectedPackageIndex === undefined) {
|
||
uni.showToast({
|
||
title: '请选择宠物套餐',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
// 校验选择服务时间（仅在预约单时）
|
||
if (this.activeTab === 'reservation') {
|
||
if (!this.formData.serviceTime || !this.formData.serviceTime.dates || this.formData.serviceTime.dates.length === 0 || !this.formData.serviceTime.timeSlot) {
|
||
uni.showToast({
|
||
title: '请选择服务时间',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}
|
||
}
|
||
|
||
// 校验选择服务地址
|
||
if (!this.addressInfo || !this.addressInfo.id) {
|
||
uni.showToast({
|
||
title: '请选择服务地址',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
// 校验停车状况
|
||
if (!this.formData.parkState) {
|
||
uni.showToast({
|
||
title: '请选择停车状况',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}
|
||
if (this.formData.parkState === '其他' && !(this.formData.otherParkState || '').trim()) {
|
||
uni.showToast({
|
||
title: '请输入停车信息',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
// 校验钥匙交接备注
|
||
if (!this.formData.keyNotes || !this.formData.keyNotes.trim()) {
|
||
uni.showToast({
|
||
title: '请输入钥匙交接备注',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
return true;
|
||
},
|
||
goToNextStep() {
|
||
// 校验表单
|
||
if (!this.validateForm()) {
|
||
return;
|
||
}
|
||
|
||
// 构建接口参数
|
||
const selectedPackage = this.packageList[this.formData.selectedPackageIndex];
|
||
if (!selectedPackage) {
|
||
uni.showToast({
|
||
title: '请选择套餐',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 构建宠物数组
|
||
const pets = this.selectedPets.map(pet => ({
|
||
pet_id: pet.id,
|
||
pet_name: pet.name || pet.pet_nickname || ''
|
||
}));
|
||
|
||
// 构建时间段数组
|
||
let slots = [];
|
||
if (this.activeTab === 'instant') {
|
||
// 即时单（现场单）：直接设置为今天，格式 YYYY-MM-DD
|
||
const todayStr = moment().format('YYYY-MM-DD');
|
||
|
||
slots = [{
|
||
date: todayStr,
|
||
period_name: '' // 现场单不需要 period_name
|
||
}];
|
||
} else {
|
||
// 预约单：将时间段字符串转换为 period_name 格式
|
||
// 例如 "12:00-15:00" 转换为 "12:00:00 ~ 15:00:00"
|
||
const timeSlot = this.formData.serviceTime.timeSlot;
|
||
const periodName = timeSlot.replace(/-/g, ':00 ~ ') + ':00';
|
||
|
||
slots = this.formData.serviceTime.dates.map(date => ({
|
||
date: date,
|
||
period_name: periodName
|
||
}));
|
||
}
|
||
|
||
// 校验 park_desc 字段
|
||
const parkDesc = this.formData.parkState === '其他' ? (this.formData.otherParkState || '').trim() : '';
|
||
if (this.formData.parkState === '其他' && !parkDesc) {
|
||
uni.showToast({
|
||
title: '请输入停车信息',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
const orderData = {
|
||
pets: pets,
|
||
service_type: this.serviceType === 'feeding' ? 1 : 2, // 上门喂宠=1, 上门遛宠=2
|
||
service_id: selectedPackage.service_id,
|
||
service_name: selectedPackage.service_name || '',
|
||
address_id: this.addressInfo.id || this.addressInfo.address_id,
|
||
address: this.formData.serviceAddress || this.addressInfo.full_address || '',
|
||
park_desc: (this.formData.otherParkState || '').trim() || this.formData.parkState,
|
||
wifi_password: this.formData.wifiPassword || '',
|
||
remark: this.formData.serviceNotes || '',
|
||
key_handover_remark: this.formData.keyNotes || '',
|
||
slots: slots,
|
||
service_price: +selectedPackage.service_price,
|
||
service_actual_price: +this.estimatedPrice
|
||
};
|
||
|
||
uni.showLoading({
|
||
title: '提交中...',
|
||
mask: true
|
||
});
|
||
|
||
// 根据服务类型调用不同的接口
|
||
const createOrderAPI = this.serviceType === 'walking' ? createWalkOrder : createFeedOrder;
|
||
|
||
createOrderAPI(orderData)
|
||
.then((res) => {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '订单创建成功',
|
||
icon: 'success'
|
||
});
|
||
// 获取订单ID（兼容不同的响应结构）
|
||
const orderId = res?.data?.order_id;
|
||
// 跳转到支付确认页面
|
||
setTimeout(() => {
|
||
uni.navigateTo({
|
||
url: `/pageHome/service/payment-confirm?order_id=${orderId}`
|
||
});
|
||
}, 800);
|
||
})
|
||
.catch((err) => {
|
||
uni.hideLoading();
|
||
console.error('创建订单失败:', err);
|
||
uni.showToast({
|
||
title: err?.msg || err?.message || '创建订单失败',
|
||
icon: 'none'
|
||
});
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.feeding-container {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: #faf7f8;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.feeding-scroll {
|
||
flex: 1;
|
||
height: 100%;
|
||
padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.feeding-content {
|
||
padding: 0 20rpx;
|
||
padding-top: 20rpx;
|
||
}
|
||
|
||
.order-tab-list {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
margin-top: 20rpx;
|
||
|
||
.tabItem {
|
||
flex: 1;
|
||
text-align: center;
|
||
background-color: #ffd8e6;
|
||
border-radius: 16rpx 16rpx 0px 0px;
|
||
height: 92rpx;
|
||
line-height: 92rpx;
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.activeItem {
|
||
background-color: #fff;
|
||
flex: 1;
|
||
text-align: center;
|
||
height: 92rpx;
|
||
line-height: 92rpx;
|
||
border-radius: 16rpx 16rpx 0px 0px;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.form-wrapper {
|
||
background-color: #fff;
|
||
padding: 0rpx 20rpx;
|
||
border-radius: 0px 0px 16rpx 16rpx;
|
||
}
|
||
|
||
.form-section {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 36rpx 0;
|
||
box-sizing: border-box;
|
||
border-bottom: 1px solid #ececec;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
|
||
.form-section-park {
|
||
.park-list {
|
||
margin-top: 16rpx;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 24rpx;
|
||
}
|
||
|
||
.park-card {
|
||
padding: 12rpx 20rpx;
|
||
border-radius: 182rpx;
|
||
background-color: #f5f5f5;
|
||
color: #000;
|
||
}
|
||
|
||
.park-card-selected {
|
||
background-color: #fee9f3;
|
||
}
|
||
|
||
.park-card-text {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.park-card-text-selected {
|
||
color: #FF19A0;
|
||
}
|
||
|
||
.park-input-wrap {
|
||
width: 100%;
|
||
height: 200rpx;
|
||
margin-top: 32rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.park-input {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 32rpx;
|
||
border-radius: 30rpx;
|
||
color: #333;
|
||
box-sizing: border-box;
|
||
background-color: #f9f7f9;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.form-label-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.form-label {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
display: flex;
|
||
flex: 1;
|
||
align-items: center;
|
||
}
|
||
|
||
.required-star {
|
||
font-size: 24rpx;
|
||
color: #FF19A0;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.add-pet-wrapper {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
margin-top: 20rpx;
|
||
flex-wrap: wrap;
|
||
padding-left: 12rpx;
|
||
}
|
||
|
||
.selected-pet-avatar {
|
||
position: relative;
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
}
|
||
|
||
.pet-avatar-img {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
border-radius: 50%;
|
||
background-color: #f0f0f0;
|
||
}
|
||
|
||
.remove-pet-btn {
|
||
position: absolute;
|
||
top: -8rpx;
|
||
right: -8rpx;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border-radius: 50%;
|
||
background-color: #FF19A0;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
line-height: 1;
|
||
border: 2rpx solid #fff;
|
||
}
|
||
|
||
.add-pet-btn {
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
border: 1rpx dashed #3D3D3D;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: #EBEBEB;
|
||
}
|
||
|
||
.plus-icon {
|
||
font-size: 60rpx;
|
||
color: #999;
|
||
line-height: 1;
|
||
}
|
||
|
||
.add-pet-text {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.info-top-view {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.required {
|
||
color: #FF19A0;
|
||
font-size: 24rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.title-view {
|
||
display: flex;
|
||
flex: 1;
|
||
align-items: center;
|
||
}
|
||
|
||
.info-view {
|
||
max-width: 60%;
|
||
}
|
||
|
||
.address-display {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
width: 100%;
|
||
|
||
}
|
||
|
||
.address-name-phone {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.address-name-text {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.address-phone-text {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.address-detail-text {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
text-align: left;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
width: 100%;
|
||
}
|
||
|
||
.placeholder-text {
|
||
color: #9B939A;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.form-input {
|
||
text-align: right;
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
width: 100%;
|
||
}
|
||
|
||
.placeholder-class {
|
||
color: #9B939A;
|
||
}
|
||
|
||
.right-icon {
|
||
margin-left: 16rpx;
|
||
width: 10rpx;
|
||
height: 18rpx;
|
||
}
|
||
|
||
|
||
.service-time-header {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.service-time-title {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
margin-left: 4rpx;
|
||
}
|
||
|
||
.service-time-count {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.count-text {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.service-time-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
margin-top: 16rpx;
|
||
}
|
||
|
||
.service-time-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.service-time-label {
|
||
color: #3D3D3D;
|
||
flex-shrink: 0;
|
||
margin-right: 8rpx;
|
||
font-size: 24rpx;
|
||
line-height: 36rpx;
|
||
}
|
||
|
||
.service-time-value {
|
||
color: #3D3D3D;
|
||
flex: 1;
|
||
word-break: break-all;
|
||
font-size: 24rpx;
|
||
line-height: 36rpx;
|
||
}
|
||
|
||
|
||
.form-selector {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
box-sizing: border-box;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.selector-text {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
flex: 1;
|
||
}
|
||
|
||
.selector-text.placeholder {
|
||
color: #999;
|
||
}
|
||
|
||
.selector-desc {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.arrow-icon {
|
||
width: 10rpx;
|
||
height: 18rpx;
|
||
flex-shrink: 0;
|
||
margin-left: 8rpx;
|
||
}
|
||
|
||
.dispatch-fee-notice {
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
.nightFee {
|
||
color: #ff19a0;
|
||
font-family: PingFangSC;
|
||
font-size: 20rpx;
|
||
font-weight: normal;
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.notice-text {
|
||
font-size: 24rpx;
|
||
color: #FF19A0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.explain-image-section {
|
||
width: 100%;
|
||
margin-top: 20rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.explain-image {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
|
||
.key-notes-modal {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
z-index: 1000;
|
||
animation: fadeIn 0.3s ease forwards;
|
||
}
|
||
|
||
.key-notes-modal .modal-content {
|
||
width: 100%;
|
||
background-color: #fff;
|
||
border-radius: 24rpx 24rpx 0 0;
|
||
padding: 40rpx;
|
||
padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
|
||
box-sizing: border-box;
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
transform: translateY(100%);
|
||
animation: slideUp 0.3s ease forwards;
|
||
}
|
||
|
||
.key-notes-modal .modal-header {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 40rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.key-notes-modal .modal-title {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #333;
|
||
flex: 1;
|
||
text-align: center;
|
||
}
|
||
|
||
.key-notes-modal .close-btn-placeholder {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.key-notes-modal .close-btn {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.key-notes-modal .close-icon {
|
||
font-size: 48rpx;
|
||
color: #666;
|
||
line-height: 1;
|
||
}
|
||
|
||
.key-notes-modal .content-view {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.key-notes-modal .input-wrapper {
|
||
position: relative;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.key-notes-modal .notes-input {
|
||
width: 100%;
|
||
min-height: 216rpx;
|
||
background-color: #F5F5F5;
|
||
border-radius: 12rpx;
|
||
padding: 24rpx;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.key-notes-modal .input-placeholder {
|
||
color: #999;
|
||
}
|
||
|
||
.key-notes-modal .char-count {
|
||
position: absolute;
|
||
bottom: 16rpx;
|
||
right: 24rpx;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.key-notes-modal .quick-input-section {
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.key-notes-modal .quick-input-label {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
margin-bottom: 16rpx;
|
||
display: block;
|
||
}
|
||
|
||
.key-notes-modal .quick-tags {
|
||
display: flex;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.key-notes-modal .quick-tag {
|
||
padding: 12rpx 24rpx;
|
||
background-color: #fff;
|
||
border: 1px solid #E0E0E0;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.key-notes-modal .tag-text {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.key-notes-modal .submit-btn {
|
||
width: 100%;
|
||
height: 96rpx;
|
||
background-color: #FF19A0;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 100px;
|
||
}
|
||
|
||
.key-notes-modal .submit-btn-text {
|
||
font-size: 32rpx;
|
||
color: #fff;
|
||
font-weight: 500;
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
background-color: rgba(0, 0, 0, 0);
|
||
}
|
||
|
||
to {
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
}
|
||
}
|
||
|
||
@keyframes slideUp {
|
||
from {
|
||
transform: translateY(100%);
|
||
}
|
||
|
||
to {
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* 服务介绍弹窗样式 */
|
||
.service-info-modal {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
animation: fadeIn 0.3s ease forwards;
|
||
}
|
||
|
||
.service-info-modal-content {
|
||
width: 600rpx;
|
||
background-color: #fff;
|
||
border-radius: 24rpx;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
animation: scaleIn 0.3s ease forwards;
|
||
}
|
||
|
||
.service-info-header {
|
||
padding: 40rpx 40rpx 24rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.service-info-title {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
}
|
||
|
||
.service-info-body {
|
||
padding: 0rpx 40rpx;
|
||
min-height: 120rpx;
|
||
max-height: 400rpx;
|
||
overflow-y: auto;
|
||
padding-bottom: 40rpx;
|
||
}
|
||
|
||
.service-info-text {
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
line-height: 1.8;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.service-info-footer {
|
||
padding: 0 40rpx 40rpx;
|
||
}
|
||
|
||
.service-info-btn {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background-color: #FF19A0;
|
||
border-radius: 44rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.service-info-btn-text {
|
||
font-size: 32rpx;
|
||
color: #fff;
|
||
}
|
||
|
||
@keyframes scaleIn {
|
||
from {
|
||
transform: scale(0.9);
|
||
opacity: 0;
|
||
}
|
||
|
||
to {
|
||
transform: scale(1);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.package-section {
|
||
padding: 32rpx 0;
|
||
border-bottom: 1px solid #ececec;
|
||
}
|
||
|
||
.package-header {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
}
|
||
|
||
.package-header .required {
|
||
color: #FF19A0;
|
||
font-size: 28rpx;
|
||
margin-right: 4rpx;
|
||
}
|
||
|
||
.package-header .form-label {
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.package-scroll {
|
||
width: 100%;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.package-list {
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.package-card {
|
||
flex-shrink: 0;
|
||
width: 300rpx;
|
||
background-color: #F6F6F6;
|
||
border-radius: 16rpx;
|
||
padding: 16rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
border: 1px solid transparent;
|
||
}
|
||
|
||
.package-card-selected {
|
||
border: 1px solid #FF19A0;
|
||
background: rgba(231, 64, 152, 0.1);
|
||
}
|
||
|
||
.package-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.package-name-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.package-name {
|
||
font-size: 24rpx;
|
||
color: #222222;
|
||
}
|
||
|
||
.info-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.package-duration {
|
||
font-size: 22rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.package-price-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 4rpx;
|
||
}
|
||
|
||
.price-content {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: baseline;
|
||
gap: 4rpx;
|
||
}
|
||
|
||
.package-price {
|
||
font-size: 24rpx;
|
||
color: #FF19A0;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.package-unit {
|
||
font-size: 24rpx;
|
||
color: #FF19A0;
|
||
}
|
||
|
||
.package-radio {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.bottom-fixed-wrap {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
z-index: 100;
|
||
}
|
||
|
||
.tip-notice-bar {
|
||
background-color: #FFE5F0;
|
||
padding: 12rpx 20rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.tip-notice-icon {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.tip-notice-text {
|
||
color: #FF19A0;
|
||
font-size: 24rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.bottom-action-bar {
|
||
background-color: #fff;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24rpx 32rpx;
|
||
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
||
box-sizing: border-box;
|
||
border-top: 1px solid #f0f0f0;
|
||
}
|
||
|
||
.price-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.estimate-price {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: baseline;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
.estimate-label {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.estimate-amount {
|
||
font-size: 48rpx;
|
||
color: #FF19A0;
|
||
}
|
||
|
||
.member-price-row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 4rpx;
|
||
}
|
||
|
||
.vip-price-icon {
|
||
width: 86rpx;
|
||
height: 28rpx;
|
||
}
|
||
|
||
.member-price-amount {
|
||
font-size: 28rpx;
|
||
color: #3D3D3D;
|
||
}
|
||
|
||
.next-step-btn {
|
||
background-color: #FF19A0;
|
||
border-radius: 50rpx;
|
||
padding: 20rpx 60rpx;
|
||
margin-left: 32rpx;
|
||
}
|
||
|
||
.next-step-text {
|
||
font-size: 32rpx;
|
||
color: #fff;
|
||
font-weight: 500;
|
||
}
|
||
</style>
|