pet-front-order/pages/newOrder/serviceNew2.vue

<template>
    <view class="service-new container">


        <view style="background-color: #FFF4E5; margin: 10px; padding: 10px; border-radius: 8rpx;">
            <view style="display: flex;">
                <image style="width: 40rpx; height: 40rpx;" slot='cover'
                    src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/petServiceOrder/OrderIcon.png">
                </image>
                <text style="color: #A94F20; font-size: 28rpx; font-weight: 500;">
                    下单方式：
                    <text v-if="buyInfo.teacher">指定喂养员 - {{ buyInfo.teacher.userName }}</text>
                    <text v-else>系统派单</text>
                </text>
            </view>
            <view style="margin-top: 10rpx;">
                <text v-if="buyInfo.teacher" style="color: #A94F20; font-size: 24rpx; font-weight: 400;">
                    (若伴宠师1小时内无响应或拒绝接单则系统派单)
                </text>
            </view>
        </view>

        <view>
            <uni-card padding=0 :is-shadow="false">
                <view class="service-new-title" slot="title">
                    <view class="service-new-title-left">
                        <view class="service-new-flag"></view>
                        <view>爱宠选择</view>
                    </view>
                </view>
                <view class="split-line"></view>
                <view class="service-new-pet-content">
                    <scroll-view scroll-x class="scroll-view">
                        <view class="scroll-content">
                            <view v-for="item in currentPets" :key="item.id" class="service-new-pet-item ellipsis"
                                :class="{ 'pet-selected': item.id === currentPetId, 'pet-unselect': item.id !== currentPetId }"
                                @click="selectPet(item)">
                                {{ item.name }}
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </uni-card>
        </view>
        <view>
            <uni-card padding=0 :is-shadow="false">
                <view class="service-new-title" slot="title">
                    <view class="service-new-title-left">
                        <view class="service-new-flag"></view>
                        <view>服务日期</view>
                    </view>
                </view>
                <view class="split-line"></view>
                <view class="service-new-pet-content">
                    <scroll-view scroll-y class="scroll-view-vertical">
                        <view v-for="(month, monthIndex) in sortedGroupedDates" :key="monthIndex" class="month-group">
                            <view class="month-title">{{ month.monthLabel }}</view>
                            <scroll-view scroll-x class="scroll-view-horizontal">
                                <view class="dates-wrapper">
                                    <view v-for="(day, dayIndex) in month.dates" :key="dayIndex" class="calendar-day"
                                        :class="{ 'day-selected': isDateSelected(day) }" @click="selectDate(day)">
                                        <image :src="isDateSelected(day) ?
                                            'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/newOrder/updated.png' :
                                            'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/newOrder/update_un.png'" class="calendar-bg" />
                                        <text class="day-text"
                                            :class="{ 'day-highlighted': isCurrentSelected(day), 'day-normal': !isCurrentSelected(day) }">
                                            {{ day.date < 10 ? '0' + day.date : day.date }}</text>
                                    </view>
                                </view>
                            </scroll-view>
                        </view>
                    </scroll-view>
                </view>
            </uni-card>
        </view>
        <view>
            <uni-card padding=0 :is-shadow="false">
                <view class="service-new-title" slot="title">
                    <view class="service-new-title-left">
                        <view class="service-new-flag"></view>
                        <view>期望时间 <span class="time-slot-time-tip">*请勾选您可以接受的上门时间段</span></view>
                    </view>
                </view>
                <view class="split-line"></view>
                <view class="service-new-pet-content">
                    <view class="time-slots">
                        <view v-for="slot in timeSlots" :key="slot.id" class="time-slot-item"
                            @click="selectTimeSlot(slot.id)">
                            <image :src="slot.selected ? slot.activeIcon : slot.inactiveIcon" class="time-slot-icon" />
                            <view class="time-slot-info">
                                <text class="time-slot-time">{{ slot.time }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </uni-card>
        </view>
        <view>
            <uni-card padding=0 :is-shadow="false">
                <view class="service-new-title" slot="title">
                    <view class="service-new-title-left">
                        <view class="service-new-flag"></view>
                        <view>服务选择</view>
                    </view>
                    <view style="display: flex; justify-content: flex-end; align-items: center; ">
                        <view style="margin-right: 10rpx;color: #AAAAAA;">爱宠：{{ currentPetId && getCurrentPetName() }}
                            全日期保持一致</view>
                        <u-switch space="2" :value="isAllSame" activeColor="#f9ae3d" size="18" @change="isAllSameChange"
                            inactiveColor="rgb(230, 230, 230)">
                        </u-switch>
                    </view>
                </view>
                <view class="split-line"></view>
                <view class="service-new-pet-content">
                    <view class="service-item">
                        <view class="service-item-header">
                            <image src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/newOrder/service.png"
                                class="service-icon"></image>
                            <text class="service-title">基础服务</text>
                        </view>
                        <view class="service-list">
                            <!-- <view style="border-radius: 8rpx" :style="{'background-color': needFeed.length > 0 ? '#FFFCF2' : '#F9F9F9', 'border': needFeed.length > 0 ? '1px solid #FFBF60' : 'none'}" >
								<view style="padding: 30rpx 0; margin: 0 20rpx; ">
									<u-checkbox-group
										v-model="needFeed"
										iconPlacement="right" 
										placement="column">
										<u-checkbox activeColor="#FFBF60" label="专业喂养" shape="circle"></u-checkbox>
									</u-checkbox-group>
								</view>
							</view> -->
                            <view class="service-list" style="border-radius: 8rpx;margin-top: 28rpx;">
                                <view class="service-row" style="background-color: #FFECCD">
                                    <view class="service-row-content"
                                        :style="{ 'border-bottom': feedCount > 1 ? '1rpx solid #ECBFA8' : 'none' }">
                                        <text class="service-name" style="color: #A94F20;">一天多次</text>
                                        <view class="service-price">
                                            <u-number-box slot="right-icon" :value="feedCount" @change="feedCountChange"
                                                step="1" :min="1" :max="3">
                                                <view slot="minus" class="minus">
                                                    <u-icon name="minus-circle-fill" size="20" color="#FFBF60"></u-icon>
                                                </view>
                                                <text slot="input" style="width: 40rpx;text-align: center;"
                                                    class="input">{{ feedCount }}</text>
                                                <view slot="plus" class="plus">
                                                    <u-icon name="plus-circle-fill" color="#FFBF60" size="20"></u-icon>
                                                </view>
                                            </u-number-box>
                                        </view>
                                    </view>
                                </view>
                                <view v-if="feedCount > 1" class="service-row" style="background-color: #FFECCD">
                                    <view class="service-row-content">
                                        <text class="service-name" style="color: #A94F20;">额外服务费</text>
                                        <view class="service-price" style="color:#A94F20">
                                            ¥{{ feedCount > 2 ? price_config.multiService.three.price : price_config.multiService.two.price }}
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>

                    <view class="service-item">
                        <view class="service-item-header">
                            <image src="https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/newOrder/love.png"
                                class="service-icon"></image>
                            <text class="service-title">定制服务</text>
                        </view>
                        <view class="service-list" style="border-radius: 8rpx;">
                            <view class="service-row" v-for="(item, index) in customServices" :key="item.skuId">
                                <view class="service-row-content"
                                    :style="{ 'border-bottom': index !== customServices.length - 1 ? '1rpx solid #EFEFEF' : 'none' }">
                                    <text class="service-name" style="">{{ item.name }}</text>
                                    <view class="service-price">
                                        <text
                                            style="font-size: 32rpx; color: #FFBF60; margin-right: 20rpx;">¥{{ item.price }}元/次</text>
                                        <u-number-box slot="right-icon" :value="item.quantity" :name="item.name"
                                            @change="customServiceCountChange" step="1" :min="0" :max="10">
                                            <view slot="minus" class="minus">
                                                <u-icon name="minus-circle-fill" size="20" color="#FFBF60"></u-icon>
                                            </view>
                                            <text slot="input" style="width: 40rpx;text-align: center;"
                                                class="input">{{ item.quantity }}</text>
                                            <view slot="plus" class="plus">
                                                <u-icon name="plus-circle-fill" color="#FFBF60" size="20"></u-icon>
                                            </view>
                                        </u-number-box>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </uni-card>
        </view>

        <view v-if="!showPriceDetails" class="details-subscribe">
            <view style="display: flex;justify-content: space-between;">
                <view style="height: 80rpx;">
                    <view>
                        <text style="color: #333333;">订单总价： </text>
                        <text style="color: #FF530A; font-size: 40rpx;">¥{{ Number(totalPrice).toFixed(2) }} <text
                                style="font-size: 32rpx;"></text></text>
                    </view>
                    <view style="display: flex; justify-content: flex-end;" @click="togglePriceDetails">
                        <text v-if="currentDayPrice" style="color:#FF530A; font-size: 22rpx;"> 当日价格：¥{{ Number(currentDayPrice).toFixed(2)
                            }}|</text>
                        <text style="color:#FF530A; font-size: 22rpx;margin-left: 10rpx;">明细</text>
                        <u-icon name="arrow-up" color="#FF530A" size="10"></u-icon>
                    </view>
                </view>
                <view style="display: flex;">
                    <u-button color="#FFF4E4" customStyle="width: 200rpx; color: #FFAA48; margin-right: 20rpx;"
                        text="上一步" @click="goBack"></u-button>
                    <u-button color="#FFBF60" customStyle="width: 200rpx; color: #FFF;" text="确认下单"
                        @click="goNext"></u-button>
                </view>
            </view>
        </view>

        <!-- 遮罩层 -->
        <view v-if="showPriceDetails" class="price-details-overlay">
            <view class="price-details">
                <view class="price-details-header">
                    <text
                        style="text-align: center; width: 100%; font-size: 32rpx; font-weight: 500; color: #333333;">价格明细</text>
                    <u-icon name="close" @click="togglePriceDetails"></u-icon>
                </view>
                <view style="text-align: center; width: 100%; font-size: 28rpx; color: #AAAAAA; margin: 20rpx 0;">
                    实际支付金额以确认下单页为准</view>
                <view class="split-line"></view>
                <scroll-view class="price-details-body" scroll-y>
                    <view v-for="(item, index) in priceDetails" :key="index">
                        <view class="price-details-item">
                            <view v-if="showName(item)" style="font-size: 28rpx; color: #333333;">{{ item.name }}</view>
                            <view class="price-details-item-price-total">
                                <view style="display: flex;" v-for="(item2, index) in item.item" :key="index">
                                    <view style="display: flex; align-items: center;">
                                        <view v-if="item2.date && item2.quantity"
                                            class="price-details-item-price-total-item">{{ item2.date }}</view>
                                        <view v-if="item2.itemName != item.name && item2.quantity"
                                            class="price-details-item-price-total-item">{{ item2.itemName }}</view>
                                        <view v-if="item2.quantity" class="price-details-item-price-total-item">
                                            ¥{{ item2.price }} × {{ item2.quantity }} {{ item2.unit }}</view>
                                    </view>
                                    <view v-if="item2.quantity"
                                        style="color: #333333; margin-left: 20rpx; margin: auto 0; width: 100rpx; text-align: right; font-size: 28rpx;">
                                        ¥{{ item2.price * item2.quantity }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
                <view style="position: absolute; bottom: 0; left: 0; right: 0; padding: 20rpx;">
                    <view class="split-line"></view>
                    <view class="price-details-item" style="margin: 20rpx 0;">
                        <view style="font-size: 32rpx; color: #333333; font-weight: 500;">合计</view>
                        <view style="font-size: 32rpx; color: #333333; font-weight: 500;">¥{{ Number(totalPrice).toFixed(2) }}</view>
                    </view>
                    <view class="split-line"></view>
                </view>

            </view>
            <view class="details-subscribe">
                <view style="display: flex;justify-content: space-between;">
                    <view style="height: 80rpx;">
                        <view>
                            <text style="color: #333333;">订单总价： </text>
                            <text style="color: #FF530A; font-size: 40rpx;">¥{{ Number(totalPrice).toFixed(2) }} <text
                                    style="font-size: 32rpx;"></text></text>
                        </view>
                        <view style="display: flex; justify-content: flex-end;" @click="togglePriceDetails">
                            <text v-if="currentDayPrice" style="color:#FF530A; font-size: 22rpx;"> 当日价格：¥{{
                                Number(currentDayPrice).toFixed(2) }}|</text>
                            <text style="color:#FF530A; font-size: 22rpx;margin-left: 10rpx;">明细</text>
                            <u-icon name="arrow-up" color="#FF530A" size="10"></u-icon>
                        </view>
                    </view>
                    <view style="display: flex;">
                        <u-button color="#FFF4E4" customStyle="width: 200rpx; color: #FFAA48; margin-right: 20rpx;"
                            text="上一步" @click="goBack"></u-button>
                        <u-button color="#FFBF60" customStyle="width: 200rpx; color: #FFF;" text="确认下单"
                            @click="goNext"></u-button>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {
    getProductList,
    getOpenId
} from "@/api/system/user"
import { setToken, setOpenIdKey } from '@/utils/auth'
import positionMixin from '../../mixins/position';
export default {
    mixins: [positionMixin],
    data() {
        return {
            basePrice: 75,
            baseProduct: '专业喂养',
            // 节假日价格配置
            holidayPrice: 75,
            normalPrice: 75,
            distancePrice: 1,
            holidayDate: [],
            currentPets: [],
            currentPetId: '',
            currentMonthDay: {},
            selectedDates: [],
            groupedDates: [],
            timeSlots: [
                {
                    id: 'MORNING',
                    name: '早上',
                    time: '08:00-12:00',
                    selected: false,
                    activeIcon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/newOrder/morning.png',
                    inactiveIcon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/newOrder/morning_un.png'
                },
                {
                    id: 'AFTERNOON',
                    name: '午后',
                    time: '12:00-18:00',
                    selected: false,
                    activeIcon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/newOrder/noon.png',
                    inactiveIcon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/newOrder/noon_un.png'
                },
                {
                    id: 'EVENING',
                    name: '晚间',
                    time: '18:00-22:00',
                    selected: false,
                    activeIcon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/newOrder/night.png',
                    inactiveIcon: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/newOrder/night_un.png'
                }
            ],
            feedCount: 1,
            // customServices原始值
            customServicesStr: '',
            customServices: [
                // { name: '陪玩(20分钟)', price: 20, quantity: 0 },
                // { name: '活动区吸毛', price: 20, quantity: 0 },
                // { name: '毛发梳理', price: 15, quantity: 0 },
                // { name: '身体清洁(如眼、耳、鼻等)', price: 5, quantity: 0 },
                // { name: '指甲修剪', price: 10, quantity: 0 },
                // { name: '会员深度清洁', price: 20, quantity: 0 },
                // { name: '喂药', price: 15, quantity: 0 },
                // { name: '上药', price: 25, quantity: 0 }
            ],
            showPriceDetails: false, // 控制价格明细的显示
            priceDetails: [],
            totalPrice: 0,
            isAllSame: false,
            newOrderData: [],
            // 提前熟悉费用
            needPreFamiliarizeCost: 0,
            // 基础服务总费用
            baseServiceTotalCost: 0,
            // 额外宠物总费用
            additionalTotalCost: 0,
            // 多次服务总费用
            multServicesTotalCost: 0,
            // 定制服务总费用
            customServicesTotalCost: 0,
            // 一天两次日期
            oneDayTwoTimesDates: [],
            // 一天三次日期
            oneDayThreeTimesDates: [],
            // 宠物类型次数统计
            petTypeCounts: [],

            // 定制服务单项总次数统计
            customServiceItemCount: [],
            // 当日价格
            currentDayPrice: 0,
        }

    },
    onLoad: function (option) {
        this.$globalData.newOrderData.distancePrice = this.calculateDistancePrice()
    },
    mounted() {
        console.log('this.$globalData', this.$globalData)
        this.currentPets = this.$globalData.newOrderData.currentPets;
        if (this.currentPets.length < 1) {
            uni.reLaunch({
                url: '/pages/index'
            });
            return
        }
        if (this.$globalData.mainSku && this.$globalData.mainSku[0]) {
            this.basePrice = this.$globalData.mainSku[0].price
            this.baseProduct = this.$globalData.mainSku[0].name
        }

        // 初始化价格配置
        this.initPriceConfig()
        this.getProductList()
    },
    watch: {
        currentPetId: {
            immediate: true,
            handler(newId) {
                if (newId) {
                    this.updateGroupedDates()
                }
            }
        }
    },
    methods: {
        companionLevelPrice(){
            let companionLevel = this.$globalData.newOrderData.companionLevel
            let price = Number(companionLevel.paramValueText) * this.isAddPrice()

            return price * this.$store.state.memberRate
        },
        //判断当前选中的地址是否加价
        isAddPrice(){
            let currentAddress = this.$globalData.newOrderData.currentAddress || {}

            let defaultPrice = 1

            try{
                defaultPrice = this.price_config.cityConfig.priceRates.default
            }catch(e){
                defaultPrice = 1
            }

            if(!this.price_config.cityConfig || !currentAddress.province || !currentAddress.city){
                return defaultPrice
            }

            let addressList = this.price_config.cityConfig.priceRates || []

            for(let key in addressList){
                if((currentAddress.province + currentAddress.city).includes(key)){
                    return addressList[key]
                }
            }
            return defaultPrice
        },
        //计算距离价格
        calculateDistancePrice() {
            if(!this.buyInfo.teacher || !this.buyInfo.teacher.appletAddresseList){
                return
            }
            let addressList = this.buyInfo.teacher.appletAddresseList

            let d = this.calculateDistanceAddressList(addressList, {
                latitude: this.$globalData.newOrderData.latitude,
                longitude: this.$globalData.newOrderData.longitude,
            })[0]?.distance || 0

            return d * this.distancePrice
        },
        initNewOrderData() {
            const needPreFamiliarize = this.$globalData.newOrderData.needPreFamiliarize.length > 0
            const pets = []
            // 初始化当前宠物全日期保持一致
            this.currentPets = this.currentPets.map(pet => {
                pet.isAllSame = false
                return pet
            })

            this.currentPets.map(pet => {
                // 单个宠物服务日期列表
                const serviceDateList = pet.selectedDate.map(item => item.date)
                serviceDateList.forEach(date => {
                    pets.push({
                        petId: pet.id,
                        serviceDate: date,
                        name: pet.name,
                        gender: pet.gender,
                        petType: pet.petType,
                        bodyType: pet.bodyType,
                        photo: pet.photo,
                        feedCount: 1,
                        selectedTimeSlots: [],
                        customServices: [],
                        //额外费用
                        additionalCost: 0
                    })
                })
            })
            this.newOrderData = {
                needPreFamiliarize: needPreFamiliarize, // 是否需要提前熟悉 40元/次 参与计算
                pets: pets
            }
            // 默认选择第一个宠物
            this.selectPet(this.currentPets[0] || {})
            this.calculateTotalPrice()
        },
        // 选择宠物
        selectPet(pet) {
            this.currentPetId = pet.id
            // 默认选择当前宠物的最小日期
            if (pet.selectedDate?.length > 1) {
                const minDate = pet.selectedDate.reduce((min, date) => {
                    const currentDate = new Date(date.date);
                    const minDate = new Date(min.date);
                    return currentDate < minDate ? date : min;
                }, pet.selectedDate[0]);
                // 当前选择日期
                this.currentMonthDay = {
                    petId: this.currentPetId,
                    date: new Date(minDate.date).getDate(),
                    fullDate: minDate.date
                }
            } else {
                this.currentMonthDay = {
                    petId: this.currentPetId,
                    date: new Date(pet.selectedDate[0].date).getDate(),
                    fullDate: pet.selectedDate[0].date
                }
            }
            this.getCurrentPetIsAllSame()
            this.selectDate(this.currentMonthDay)
        },
        selectDate(day) {
            // 当前选择日期
            this.currentMonthDay = day
            const selectedDay = this.selectedDates?.find(item => item.fullDate === day.fullDate && item
                .currentPetId === day.petId)
            if (!selectedDay) {
                this.selectedDates.push(day)
            }
            // 还原当前选择日期是否已选择期望时间
            const pets = this.newOrderData?.pets
            const selectedPet = pets.find(pet => pet.petId === this.currentPetId && pet.serviceDate === this
                .currentMonthDay.fullDate);
            const selectedTimeSlots = selectedPet ? selectedPet.selectedTimeSlots : [];
            if (selectedTimeSlots.length > 0) {
                this.timeSlots.forEach(slot => {
                    if (selectedTimeSlots.includes(slot.id)) {
                        slot.selected = true
                    } else {
                        slot.selected = false
                    }
                })
            } else {
                this.timeSlots.forEach(slot => {
                    slot.selected = false
                })
            }
            // 还原当前选择日期喂食次数
            this.feedCount = selectedPet ? selectedPet.feedCount : 1
            // 还原当前选择日期是否已选择定制服务
            this.customServices = selectedPet.customServices.length > 0 ? selectedPet.customServices : JSON.parse(this.customServicesStr)
            this.getCurrentDayPrice(this.currentMonthDay.fullDate)
        },

        isDateSelected(day) {
            const selectedDay = this.selectedDates.find(item => item.fullDate === day.fullDate && this.currentPetId ===
                item.petId)
            if (selectedDay) {
                return true
            }
            return false
        },
        isCurrentSelected(day) {
            return this.currentMonthDay.fullDate === day.fullDate && this.currentPetId === day.petId
        },
        updateGroupedDates() {
            const currentPet = this.currentPets.find(pet => pet.id === this.currentPetId)
            if (!currentPet) return

            // 按月份分组日期
            const grouped = currentPet.selectedDate.reduce((acc, dateObj) => {
                const date = new Date(dateObj.date)
                const monthKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`
                const monthLabel = `${date.getFullYear()}年${date.getMonth() + 1}月`

                if (!acc[monthKey]) {
                    acc[monthKey] = {
                        monthLabel,
                        dates: []
                    }
                }

                acc[monthKey].dates.push({
                    petId: currentPet.id,
                    date: date.getDate(),
                    fullDate: dateObj.date
                })

                return acc
            }, {})

            // 转换为数组并排序
            this.groupedDates = Object.values(grouped).sort((a, b) => {
                return a.monthLabel.localeCompare(b.monthLabel)
            })
        },
        selectTimeSlot(slotId) {
            const slot = this.timeSlots.find(slot => slot.id === slotId)
            if (slot) {
                slot.selected = !slot.selected
            }
            // 将期望时间添加到当前宠物
            const selectedTimeSlots = this.timeSlots.filter(slot => slot.selected)
            if (this.isAllSame) {
                // 如果保持一致，则更新该宠物所有期望时间
                this.newOrderData.pets.forEach(pet => {
                    pet.selectedTimeSlots = selectedTimeSlots.map(item => item.id)
                })
            } else {
                const currentPetIndex = this.newOrderData.pets.findIndex(pet => pet.petId === this.currentPetId
                    && pet.serviceDate === this.currentMonthDay.fullDate)
                if (currentPetIndex !== -1) {
                    this.newOrderData.pets[currentPetIndex].selectedTimeSlots = selectedTimeSlots.map(item => item.id)
                }
            }
        },
        feedCountChange(e) {
            this.feedCount = e.value
            if (this.isAllSame) {
                // 如果保持一致，则更新该宠物的喂食次数
                this.newOrderData.pets.forEach(pet => {
                    if (pet.petId === this.currentPetId) {
                        pet.feedCount = this.feedCount
                    }
                })
            } else {
                const pets = this.newOrderData.pets
                const currentPetIndex = pets.findIndex(pet => pet.petId === this.currentPetId && pet.serviceDate ===
                    this.currentMonthDay.fullDate)
                if (currentPetIndex !== -1) {
                    this.newOrderData.pets[currentPetIndex].feedCount = this.feedCount
                }
            }
            this.calculateTotalPrice()

        },
        customServiceCountChange(val) {
            console.log(val)
            this.customServices.forEach(item => {
                if (item.name === val.name) {
                    item.quantity = val.value
                }
            })
            if (this.isAllSame) {
                // 如果保持一致，则更新当前宠物的定制服务次数
                this.newOrderData.pets.forEach(pet => {
                    if (pet.petId === this.currentPetId) {
                        pet.customServices = JSON.parse(JSON.stringify(this.customServices))
                    }
                })
            } else {
                const pets = this.newOrderData.pets
                const currentPetIndex = pets.findIndex(pet => pet.petId === this.currentPetId && pet.serviceDate ===
                    this.currentMonthDay.fullDate)
                if (currentPetIndex !== -1) {
                    this.newOrderData.pets[currentPetIndex].customServices = JSON.parse(JSON.stringify(this
                        .customServices))
                }
            }
            this.calculateTotalPrice()
        },
        togglePriceDetails() {
            this.showPriceDetails = !this.showPriceDetails; // 切换价格明细的显示状态
            if (this.showPriceDetails) {
                this.priceDetailDate()
            }
        },
        calculateTotalPrice() {
            // 1. 订单维度：是否需要提前熟悉
            if (this.$globalData.newOrderData.needPreFamiliarize && this.$globalData.newOrderData.needPreFamiliarize.length > 0) {
                this.needPreFamiliarizeCost = this.price_config.preFamiliarize.price
            } else {
                this.needPreFamiliarizeCost = 0
            }

            // 2. 日期维度
            // 2.1 基础服务费用 - 根据节假日和非节假日分别计算
            const uniqueDates = new Set(this.newOrderData.pets.map(item => item.serviceDate)); // 去重日期
            let baseServiceTotalCost = 0;
            uniqueDates.forEach(date => {
                const isHolidayDate = this.isHoliday(date);
                const dayPrice = isHolidayDate ? parseFloat(this.holidayPrice) : parseFloat(this.normalPrice);
                baseServiceTotalCost += dayPrice;
            });
            this.baseServiceTotalCost = baseServiceTotalCost;

            // 2.2 额外宠物费用
            // petType为dog 且bodyType包含 '大型' 则为大型犬,40元/次
            // petType为dog 且bodyType包含 '中型' 则为中型犬,30元/次
            // petType为dog 且bodyType包含 '小型' 则为小型犬,15元/次
            // petType为cat 则为猫,10元/次

            this.newOrderData.pets.forEach(pet => {
                pet.additionalCost = this.calculatePetCost(pet)
                // if (pet.petType === 'dog' && pet.bodyType.includes('大型')) {
                //     pet.additionalCost = 40
                // } else if (pet.petType === 'dog' && pet.bodyType.includes('中型')) {
                //     pet.additionalCost = 30
                // } else if (pet.petType === 'dog' && pet.bodyType.includes('小型')) {
                //     pet.additionalCost = 15
                // } else if (pet.petType === 'cat') {
                //     pet.additionalCost = 10
                // }
            })

            // const largeDogArray = this.newOrderData.pets.filter(pet => pet.petType === 'dog' && pet.bodyType.includes('大型'));
            // this.additionalTotalCost = this.additionalTotalCost + (largeDogArray.length * 40)
            // // 非大型犬
            // const otherPets = this.newOrderData.pets.filter(pet => pet.petType !== 'dog' && !pet.bodyType.includes('大型'));
            // 宠物日期分组
            const dailyPets = [];
            // 按日期分组宠物
            this.newOrderData.pets.forEach(pet => {
                const serviceDate = pet.serviceDate;
                if (!dailyPets[serviceDate]) {
                    dailyPets[serviceDate] = [];
                }
                dailyPets[serviceDate].push(pet);
            });
            const petTypeCounts = []
            let additionalTotalCost = 0
            // 计算每日额外宠物费用
            for (const date in dailyPets) {
                const pets = dailyPets[date];
                const largeDogCount = pets.filter(pet => pet.petType === 'dog' && pet.bodyType.includes('大型')).length;
                let mediumDogCount = pets.filter(pet => pet.petType === 'dog' && pet.bodyType.includes('中型')).length;
                let smallDogCount = pets.filter(pet => pet.petType === 'dog' && pet.bodyType.includes('小型')).length;
                let catCount = pets.filter(pet => pet.petType === 'cat').length;


                let additionalCost = 0
                // 总宠物费用
                let totalPetCost = pets.reduce((acc, pet) => {
                    return acc + this.calculatePetCost(pet);
                }, 0);
                // 如果总宠物费用>30                    
                const freeQuota = this.price_config.freeQuota
                if (totalPetCost > Number(freeQuota.threshold)) {
                    freeQuota.rules.forEach(rule => {
                        if (rule.type === 'cat' && catCount >= rule.count) {
                            additionalCost = totalPetCost - Number(rule.freeAmount)
                            catCount = catCount - rule.count
                        }else if(rule.type === 'smallDog' && smallDogCount >= rule.count){
                            additionalCost = totalPetCost - Number(rule.freeAmount)
                            smallDogCount = smallDogCount - rule.count
                        }else if(rule.type === 'mediumDog' && mediumDogCount >= rule.count){
                            additionalCost = totalPetCost - Number(rule.freeAmount)
                            mediumDogCount = mediumDogCount - rule.count
                        }else{
                            additionalCost = totalPetCost - Number(rule.freeAmount)
                        }
                    })
                // if (totalPetCost > 30) {
                //     // 如果猫数量>=3
                //     if (catCount >= 3) {
                //         additionalCost = totalPetCost - 30
                //         catCount = catCount - 3
                //     } else if (smallDogCount >= 2) {
                //         additionalCost = totalPetCost - 30
                //         smallDogCount = smallDogCount - 2
                //     } else if (mediumDogCount >= 1) {
                //         additionalCost = totalPetCost - 30
                //         mediumDogCount = mediumDogCount - 1
                //     } else {
                //         additionalCost = totalPetCost - 25
                //         catCount = catCount - 1
                //         smallDogCount = smallDogCount - 1
                //     }
                    petTypeCounts.push({
                        date,
                        largeDogCount,
                        mediumDogCount,
                        smallDogCount,
                        catCount
                    })
                }


                // 如果有大型犬，额外费用为40元/只
                if (largeDogCount > 0) {
                    additionalCost += (40 * largeDogCount)
                }
                // 如果有额外费用，添加到总额外费用
                if (additionalCost > 0) {
                    additionalTotalCost += additionalCost;
                }
            }
            this.additionalTotalCost = additionalTotalCost
            this.petTypeCounts = petTypeCounts

            // 2.3 当日多次服务总价
            // 计算每日多次服务次数费用
            let multServicesTotalCost = 0
            let oneDayTwoTimesDates = []
            let oneDayThreeTimesDates = []
            for (const date in dailyPets) {
                const maxFeedCount = Math.max(...dailyPets[date].map(pet => pet.feedCount));
                if (maxFeedCount === 2) {
                    multServicesTotalCost += this.price_config.multiService.two.price; // 1天2次
                    oneDayTwoTimesDates.push(date)
                } else if (maxFeedCount === 3) {
                    multServicesTotalCost += this.price_config.multiService.three.price; // 1天3次
                    oneDayThreeTimesDates.push(date)
                }
            }
            this.oneDayTwoTimesDates = oneDayTwoTimesDates
            this.oneDayThreeTimesDates = oneDayThreeTimesDates
            this.multServicesTotalCost = multServicesTotalCost
            // 3. 定制服务
            //定制服务单项总次数统计
            const customServiceItemCount = JSON.parse(this.customServicesStr)
            let customServicesTotalCost = 0
            this.newOrderData.pets.forEach(pet => {
                const customServices = pet.customServices
                // 定制服务费用
                customServices.forEach(service => {
                    const itemIndex = customServiceItemCount.findIndex(item => item.name === service.name)
                    if (itemIndex !== -1) {
                        customServiceItemCount[itemIndex].quantity += service.quantity
                    }
                    customServicesTotalCost += service.price * service.quantity;
                })
            });
            this.customServiceItemCount = customServiceItemCount
            this.customServicesTotalCost = customServicesTotalCost

            this.totalPrice = Number(this.needPreFamiliarizeCost)
                + Number(this.baseServiceTotalCost)
                + Number(this.additionalTotalCost)
                + Number(this.multServicesTotalCost)
                + Number(this.companionLevelPrice())
                + Number(this.customServicesTotalCost); // 更新总价

            this.getCurrentDayPrice(this.currentMonthDay.fullDate)
        },

        calculatePetCost(pet) {
            // 宠物额外费用 不计算大型犬
            let petExtra = this.price_config.petExtra
            let petCost = 0;
            if (pet.petType === 'cat') {
                petCost += Number(petExtra.cat); // 猫额外费用
            } else if (pet.petType === 'dog' && pet.bodyType.includes('小型')) {
                petCost += Number(petExtra.smallDog); // 小型犬额外费用
            } else if (pet.petType === 'dog' && pet.bodyType.includes('中型')) {
                petCost += Number(petExtra.mediumDog); // 中型犬额外费用
            }
            return petCost;
        },

        goNext() {
            this.calculateTotalPrice(); // 计算总价
            this.showPriceDetails = false;
            this.$globalData.newOrderData.currentPetsByDay = this.newOrderData.pets
            this.$globalData.newOrderData.totalPrice = this.totalPrice
            uni.navigateTo({
                url: '/pages/newOrder/confirmOrder'
            });
        },
        goBack() {
            this.showPriceDetails = false

            let len = getCurrentPages().length;
            this.loading = false
            if (len >= 2) {
                uni.navigateBack();
            } else {
                uni.redirectTo({
                    url: '/pages/newOrder/serviceNew'
                });
            }
        },
        // 价格明细数据
        priceDetailDate() {
            const priceDetails = []
            if (this.newOrderData.needPreFamiliarize) {
                priceDetails.push({
                    name: '提前熟悉',
                    item: [{
                        itemName: '提前熟悉',
                        price: this.price_config.preFamiliarize.price,
                        quantity: this.newOrderData.needPreFamiliarize ? 1 : 0,
                        unit: '次'
                    },]
                })
            }
            
            let companionLevel = this.$globalData.newOrderData.companionLevel
            if (companionLevel) {
                priceDetails.push({
                    name: '伴宠师等级',
                    item: [{
                        itemName: companionLevel.paramValue,
                        price: this.companionLevelPrice(),
                        quantity: 1,
                        unit: '位'
                    },]
                })
            }
            // 分别统计节假日和非节假日的天数
            const uniqueDates = new Set(this.newOrderData.pets.map(item => item.serviceDate));
            let holidayCount = 0;
            let normalCount = 0;
            uniqueDates.forEach(date => {
                if (this.isHoliday(date)) {
                    holidayCount++;
                } else {
                    normalCount++;
                }
            });
            
            const baseServiceItems = [];
            if (normalCount > 0) {
                baseServiceItems.push({
                    itemName: '非节假日 | ',
                    price: parseFloat(this.normalPrice),
                    quantity: normalCount,
                    unit: '天'
                });
            }
            if (holidayCount > 0) {
                baseServiceItems.push({
                    itemName: '节假日 | ',
                    price: parseFloat(this.holidayPrice),
                    quantity: holidayCount,
                    unit: '天'
                });
            }
            
            if (baseServiceItems.length > 0) {
                priceDetails.push({
                    name: this.baseProduct,
                    item: baseServiceItems
                });
            }
            if (this.oneDayTwoTimesDates.length > 0 || this.oneDayThreeTimesDates.length > 0) {
                priceDetails.push({
                    name: '上门次数',
                    item: [{
                        itemName: '1天2次',
                        price: this.price_config.multiService.two.price,
                        quantity: this.oneDayTwoTimesDates.length,
                        unit: '天'
                    },
                    {
                        itemName: '1天3次',
                        price: this.price_config.multiService.three.price,
                        quantity: this.oneDayThreeTimesDates.length,
                        unit: '天'
                    },
                    ]
                })
            }
            // 过滤宠物类型数量>0的数组
            const additionalCostItem = []
            const petTypeArr = this.petTypeCounts.filter(item => item.largeDogCount > 0 || item.mediumDogCount > 0 ||
                item.smallDogCount > 0 || item.catCount > 0)
            // 假设largeDogCount=1 mediumDogCount=2 smallDogCount=3 catCount=4	则生成4条数据
            petTypeArr.forEach(item => {
                if (item.largeDogCount > 0) {
                    additionalCostItem.push({
                        itemName: '大型犬',
                        price: this.calculatePetCost({
                            petType: 'dog',
                            bodyType: '大型',
                        }),
                        quantity: item.largeDogCount,
                        unit: '只',
                        date: item.date
                    })
                }
                if (item.mediumDogCount > 0) {
                    additionalCostItem.push({
                        itemName: '中型犬',
                        price: this.calculatePetCost({
                            petType: 'dog',
                            bodyType: '中型',
                        }),
                        quantity: item.mediumDogCount,
                        unit: '只',
                        date: item.date
                    })
                }
                if (item.smallDogCount > 0) {
                    additionalCostItem.push({
                        itemName: '小型犬',
                        price: this.calculatePetCost({
                            petType: 'dog',
                            bodyType: '小型',
                        }),
                        quantity: item.smallDogCount,
                        unit: '只',
                        date: item.date
                    })
                }
                if (item.catCount > 0) {
                    additionalCostItem.push({
                        itemName: '猫猫',
                        price: this.calculatePetCost({
                            petType: 'cat',
                        }),
                        quantity: item.catCount,
                        unit: '只',
                        date: item.date
                    })
                }
            })
            // 按日期先后顺序排序
            additionalCostItem.sort((a, b) => new Date(a.date) - new Date(b.date))
            if (additionalCostItem.length > 0) {
                priceDetails.push({
                    name: '额外宠物费用',
                    item: additionalCostItem
                })
            }
            const customServiceItem = this.customServiceItemCount.filter(item => item.quantity > 0).map(service => {
                return { itemName: service.name, price: service.price, quantity: service.quantity, unit: '次' }
            })
            if (customServiceItem.length > 0) {
                priceDetails.push({
                    name: '定制服务',
                    item: customServiceItem
                })
            }
            this.priceDetails = priceDetails
            this.calculateTotalPrice()
        },
        showName(item) {
            return item.item.some(item2 => item2.quantity > 0)
        },
        isAllSameChange(e) {
            if (e) {
                this.isAllSame = true
                this.setCurrentPetIsAllSame()
                // 当前宠物全日期保持一致
                this.newOrderData.pets.forEach(pet => {
                    if (pet.petId === this.currentPetId) {
                        pet.selectedTimeSlots = this.timeSlots.filter(slot => slot.selected).map(item => item.id)
                        pet.feedCount = this.feedCount
                        pet.customServices = this.customServices
                    }
                })
                this.calculateTotalPrice()
            } else {
                this.isAllSame = false
                this.setCurrentPetIsAllSame()
            }

        },
        // 初始化价格配置
        initPriceConfig() {
            let priceConfig = this.$store.state.price_config
            console.log('价格配置:', priceConfig)
            if(priceConfig.basePrice && priceConfig.basePrice.holiday){
                this.holidayPrice = (priceConfig.basePrice.holiday * this.$store.state.memberRate).toFixed(2)
            }
            if(priceConfig.basePrice && priceConfig.basePrice.normal){
                this.normalPrice = (priceConfig.basePrice.normal * this.$store.state.memberRate).toFixed(2)
            }
            if(priceConfig.holidays && priceConfig.holidays.length > 0){
                this.holidayDate = priceConfig.holidays
            }else{
                this.holidayDate = []
            }
        },
        // 判断是否为节假日
        isHoliday(date) {
            return this.holidayDate.some(holiday => holiday === date)
        },
        getProductList() {
            getProductList({
                "publishStatus": 1,
                "categoryId": 78,
                "needSku": true
            }).then(response => {
                if (response && response.content && response.content.length > 0) {
                    this.customServices = response.content.map(item => {
                        const skus = item.skus
                        if (skus && skus.length > 0) {
                            let productSku = {
                                "skuId": skus[0].id,
                                "price": (skus[0].price * this.$store.state.memberRate).toFixed(2),
                                "name": item.name,
                                "quantity": 0,
                                "isMainProduct": false
                            }
                            return productSku
                        }
                    })
                    this.customServicesStr = JSON.stringify(this.customServices)
                    // 初始化新订单数据
                    this.initNewOrderData()

                } else {
                    uni.showToast('获取主产品失败，请联系管理员')
                }

                console.log(response);
            })
        },
        login() {
            uni.login({
                provider: 'weixin',
                success: (loginRes) => {
                    this.getOpenId(loginRes.code)
                },
                fail: function (error) {
                    // 授权失败处理
                    uni.showToast('授权失败，请授权后再试')
                }
            });
        },
        getOpenId(code) {
            getOpenId(code).then(res => {
                if (res.code == 200 && res.data) {
                    let resData = JSON.parse(res.data)
                    let token = resData.token;
                    let openId = resData.openId;
                    setOpenIdKey(openId)
                    if (token) {
                        setToken(token)
                    }
                }
            })
        },
        getCurrentDayPrice(currentDay) {
            const currentDayPets = this.newOrderData.pets.filter(pet => pet.serviceDate === currentDay)
            // 根据是否为节假日确定基础服务价格
            const isHolidayDate = this.isHoliday(currentDay)
            const baseServiceCost = isHolidayDate ? parseFloat(this.holidayPrice) : parseFloat(this.normalPrice)

            const largeDogCount = currentDayPets.filter(pet => pet.petType === 'dog' && pet.bodyType.includes('大型')).length;
            let mediumDogCount = currentDayPets.filter(pet => pet.petType === 'dog' && pet.bodyType.includes('中型')).length;
            let smallDogCount = currentDayPets.filter(pet => pet.petType === 'dog' && pet.bodyType.includes('小型')).length;
            let catCount = currentDayPets.filter(pet => pet.petType === 'cat').length;


            const additionalCostItem = []
            let additionalCost = 0
            // 单天总宠物费用
            let totalPetCost = currentDayPets.reduce((acc, pet) => {
                return acc + this.calculatePetCost(pet);
            }, 0);
            // 如果总宠物费用>30
            const freeQuota = this.price_config.freeQuota
            if (totalPetCost > Number(freeQuota.threshold)) {
                freeQuota.rules.forEach(rule => {
                    if (rule.type === 'cat' && catCount >= rule.count) {
                        additionalCost = totalPetCost - Number(rule.freeAmount)
                        catCount = catCount - rule.count
                    }else if(rule.type === 'smallDog' && smallDogCount >= rule.count){
                        additionalCost = totalPetCost - Number(rule.freeAmount)
                        smallDogCount = smallDogCount - rule.count
                    }else if(rule.type === 'mediumDog' && mediumDogCount >= rule.count){
                        additionalCost = totalPetCost - Number(rule.freeAmount)
                        mediumDogCount = mediumDogCount - rule.count
                    }else{
                        additionalCost = totalPetCost - Number(rule.freeAmount)
                    }
                })

                if (largeDogCount > 0) {
                    additionalCostItem.push({ itemName: '大型犬', price: this.calculatePetCost({
                        petType: 'dog',
                        bodyType: '大型',
                    }), quantity: largeDogCount, unit: '只' })
                }
                if (mediumDogCount > 0) {
                    additionalCostItem.push({ itemName: '中型犬', price: this.calculatePetCost({
                        petType: 'dog',
                        bodyType: '中型',
                    }), quantity: mediumDogCount, unit: '只' })
                }
                if (smallDogCount > 0) {
                    additionalCostItem.push({ itemName: '小型犬', price: this.calculatePetCost({
                        petType: 'dog',
                        bodyType: '小型',
                    }), quantity: smallDogCount, unit: '只' })
                }
                if (catCount > 0) {
                    additionalCostItem.push({ itemName: '猫猫', price: this.calculatePetCost({
                        petType: 'cat',
                    }), quantity: catCount, unit: '只' })
                }

            }
            // 如果有大型犬，额外费用为40元/只
            if (largeDogCount > 0) {
                additionalCost += (this.calculatePetCost({
                    petType: 'dog',
                    bodyType: '大型',
                }) * largeDogCount)
            }
            // 当日多次服务次数
            let multServicesTotalCost = 0
            const maxFeedCount = Math.max(...currentDayPets.map(pet => pet.feedCount));
            if (maxFeedCount === 2) {
                multServicesTotalCost += this.price_config.multiService.two.price; // 1天2次
            } else if (maxFeedCount === 3) {
                multServicesTotalCost += this.price_config.multiService.three.price; // 1天3次
            }
            // 所有宠物定制服务费用
            const customServiceCost = currentDayPets.reduce((acc, pet) => acc + this.calculatePetCustomServiceCost(pet), 0)
            const totalCost = baseServiceCost + additionalCost + multServicesTotalCost + customServiceCost
            this.currentDayPrice = totalCost
        },
        calculatePetCustomServiceCost(pet) {
            const customServiceCost = pet.customServices.reduce((acc, item) => acc + item.price * item.quantity, 0)
            return customServiceCost
        },
        getCurrentPetName() {
            const currentPet = this.currentPets.find(pet => pet.id === this.currentPetId)
            return currentPet.name
        },
        setCurrentPetIsAllSame() {
            const currentPet = this.currentPets.find(pet => pet.id === this.currentPetId)
            currentPet.isAllSame = this.isAllSame
        },
        getCurrentPetIsAllSame() {
            const currentPet = this.currentPets.find(pet => pet.id === this.currentPetId)
            this.isAllSame = currentPet.isAllSame
        },
    },
    computed: {
        sortedGroupedDates() {
            return this.groupedDates.sort((a, b) => {
                const dateA = new Date(a.monthLabel.replace('年', '-').replace('月', '-01'))
                const dateB = new Date(b.monthLabel.replace('年', '-').replace('月', '-01'))
                return dateA - dateB
            })
        }
    }

}
</script>


<style scoped lang="less">
.container {
    position: relative;
    height: 100%;
    padding-bottom: 160rpx;

    .details-subscribe {
        background-color: #FFFFFF;
        padding: 10px;
        width: 100%;
        height: 160rpx;
        position: fixed;
        bottom: 0;
        z-index: 100;

        .details-btn {
            width: 100%;
            border-radius: 6px;
            background: #FFB13F;
            font-size: 16px;
            color: #FFFFFF;
        }
    }
}

.service-new {
    .service-new-flag {
        width: 8rpx;
        height: 32rpx;
        background: #FFBF60;
        border-radius: 30rpx 30rpx 30rpx 30rpx;
        margin-right: 10rpx;
    }

    .split-line {
        width: 100%;
        height: 1rpx;
        background: #EFEFEF;
    }

    .service-new-title {
        display: flex;
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
        line-height: 33rpx;
        margin: 42rpx 0 30rpx;
        justify-content: space-between;

        .service-new-title-left {
            display: flex;
            align-items: center;
        }
    }

    .service-new-pet-content {
        padding: 20rpx 0;
    }

    .service-new-pet-item {
        height: 96rpx;
        width: 184rpx;
        border-radius: 8rpx;
        padding: 0 20rpx;
        margin-right: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        flex-shrink: 0;
    }

    .scroll-content {
        display: inline-flex;
    }

    .scroll-view {
        width: 100%;
        white-space: nowrap;
    }

    .pet-selected {
        background: #FFBF60;
        color: #FFFFFF;
    }

    .pet-unselect {
        background: #F5F5F7;
        color: #7D8196;
    }

}

.calendar-wrapper {
    display: flex;
    gap: 20rpx;
    padding: 20rpx;
}

.scroll-view {
    width: 100%;
    white-space: nowrap;
}

.calendar-day {
    position: relative;
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 20rpx;
    flex-shrink: 0;
}

.calendar-bg {
    position: absolute;
    width: 88rpx;
    height: 78rpx;
    z-index: 1;
}

.day-text {
    position: relative;
    z-index: 2;
    top: 5rpx;

}

.day-highlighted {
    font-size: 38rpx;
    font-weight: bold;
    color: #FFBF60;
}

.day-normal {
    color: #3E3A39;
    font-size: 32rpx;
}


.month-group {
    margin-bottom: 30rpx;

    .month-title {
        font-size: 32rpx;
        color: #666;
        margin-bottom: 20rpx;
    }

    .dates-wrapper {
        display: inline-flex;
    }
}

.scroll-view-vertical {
    height: 100%;
}

.scroll-view-horizontal {
    width: 100%;
    white-space: nowrap;
}

.time-slots {
    display: flex;
    justify-content: space-around;
}

.time-slot-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200rpx;
    cursor: pointer;
}

.time-slot-icon {
    width: 160rpx;
    height: 160rpx;
    margin-bottom: 10rpx;
}

.time-slot-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.time-slot-name {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 8rpx;
}

.time-slot-time {
    font-size: 24rpx;
    color: #666;
}

.time-slot-time-tip {
    background-color: #FFECCD;
    color: #A94F20;
    margin-left: 10rpx;
    padding: 5rpx 10rpx;
    font-size: 20rpx;
}

.service-item {
    margin-bottom: 20rpx;
    /* 每个服务项之间的间距 */
}

.service-item-header {
    display: flex;
    align-items: center;
    margin-bottom: 10rpx;
    /* 标题与服务列表之间的间距 */
}

.service-icon {
    width: 40rpx;
    /* 图标大小 */
    height: 40rpx;
    /* 图标大小 */
    margin-right: 10rpx;
    /* 图标与标题之间的间距 */
}

.service-title {
    font-size: 28rpx;
    /* 服务标题字体大小 */
    font-weight: bold;
    /* 服务标题加粗 */
}

.service-row {
    display: flex;
    align-items: center;
    /* 垂直居中对齐 */
    flex-wrap: wrap;
    background-color: #F9F9F9;
}

.service-row-content {
    display: flex;
    justify-content: space-between;
    /* 每行的上下内边距 */
    width: 100%;
    padding: 32rpx 0rpx;
    margin: 0 20rpx;
}

.service-name {
    width: 50%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 28rpx;
    color: #333;
    /* 服务名称颜色 */
}

.service-price {
    display: flex;
    align-items: center;
    /* 垂直居中对齐 */
}

.service-count {
    display: flex;
    align-items: center;
    /* 垂直居中对齐 */
    margin-left: 10rpx;
    /* 价格数量之间的间距 */
}

.price-details {
    position: fixed;
    /* 固定位置 */
    bottom: 160rpx;
    /* 根据需要调整位置 */
    left: 0;
    right: 0;
    background: #FFF;
    /* 背景颜色 */
    padding: 10px 10px 0 10px;
    /* 内边距 */
    border-radius: 8rpx 8rpx 0 0;
    /* 圆角 */
    z-index: 1000;
    /* 确保在其他元素之上 */
    min-height: 600rpx;
    /* 固定高度 */
    overflow: hidden;
    /* 隐藏超出部分 */
}

.price-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-details-body {
    margin-top: 10px;
    max-height: 300rpx;
    /* 留出头部空间 */
    overflow-y: auto;
    /* 允许上下滚动 */
}

.price-details-overlay {
    position: fixed;
    /* 固定位置 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    /* 半透明背景 */
    z-index: 999;
    /* 确保在其他元素之上 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.price-details-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;

    .price-details-item-price-total {
        display: flex;
        width: 70%;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .price-details-item-price-total-item {
        color: #999999;
        text-align: right;
        font-size: 28rpx;
        margin-right: 20rpx;
    }
}
</style>