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

<template>
  <view class="service-new container">
    <view class="service-new-address">
			<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-address-content">
					<view class="service-new-address-selected" >
						<view class="personal-address-info">
							<view class="personal-address-text">
								{{currentAddress.province}} {{currentAddress.city}} {{currentAddress.detailAddress}}
							</view>
							<view class="personal-address-people">
								<view>
									{{currentAddress.name}}
								</view>
								<view style="border: solid #7D8196 1px; margin: 0 10px; height: 12px;">	</view>
								<view>
									{{currentAddress.phone}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
		<view class="service-new-pet">
			<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 class="service-new-title-text">
							服务宠物
						</view>
					</view>
				</view>
				<view class="split-line"></view>
				<view class="service-new-pet-content">
					<view class="personal-pet-list">			
						<view v-for="(item,index) in showPets" :key="index">
							<view class="personal-pet-list-item">
								<view class="personal-pet-info">
									<!-- 左侧头像 -->
									<view class="pet-avatar">
										<u-avatar :src="item.photo?item.photo:defaultPhoto" size="60" shape="circle"></u-avatar>
									</view>
									
									<!-- 中间内容 -->
									<view class="pet-info" style="flex: 1; margin: 0 20rpx; max-width: 50%;">
										<view class="pet-name-gender" style="display: flex; align-items: center;">
											<view>{{item.name}}</view>
											<view class="pet-gender" style="margin-left: 10rpx; display: flex;align-items: center;">
												<img :src="item.gender=='男生'?'../../static/images/details/boy.svg':'../../static/images/details/girl.svg'" alt="sex" 		
												style="width: 16px;height: 16px;"/>
											</view>
										</view>
										<view class="pet-dates ellipsis" >
											{{ item.pets.map(e=>e.serviceDate).join(';') }}
										</view>
									</view>
									
									<!-- 右侧天数统计 -->
									<view class="date-total" style="margin-left: auto;width: 140rpx;text-align: end;">
										共 {{item.pets.length}} 天 
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
		<view class="service-new-pet">
			<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 class="service-new-title-text">
							服务信息及费用
						</view>
					</view>
				</view>
				<view class="split-line"></view>
				<view class="service-new-pet-content">
					<view class="personal-pet-list">			
						
						<view v-for="item in dailyShowData" :key="item.date" class="service-new-address">
							<view  class="service-summary">
								<view style="display: flex; align-items: center;">
									<view style="padding-right: 10rpx;color: #7D8196;">{{ item.date }}</view>
									<view style="margin: 0 10rpx; width: 2px; height: 20rpx; background-color: #7D8196;"></view>
									<view style="color: #333333; margin-left: 10rpx;">{{baseProduct}} 
											{{item.customServicesTotalCnt? ' + 定制服务' + item.customServicesTotalCnt + '项' : '' }} </view>
								</view>
								<view style="display: flex; align-items: center;">
									<view style="color: #333333;margin-right: 10rpx;">¥{{ item.totalCost }}.00</view>
									<view>
										<u-icon @click="toggleExpand( item.date )" :name="expandedIndexs.includes( item.date ) ? 'arrow-up' : 'arrow-down'" color="#FFBF60" size="14"></u-icon>
									</view>
								</view>
							</view>
							
							<view v-if="!expandedIndexs.includes(item.date)" class="split-line"></view>
							<view v-show="expandedIndexs.includes(item.date)" class="service-details">
								<!-- 基础服务 上门次数 额外费用  -->
								<view>基础服务</view>
								<view v-for="(priceItem, priceIndex) in item.priceDetails" :key="priceIndex" class="price-details-item" >
									<view style="display: flex;" v-for="(item2, index) in priceItem.item" :key="index">
										<view v-if="item2.quantity" class="service-item">
											<view v-if="item2.itemName != item.name" class="price-details-item-price-total-item">- {{ item2.itemName }}</view>
											<view class="price-details-item-price-total-item">¥{{ item2.price }} × {{ item2.quantity }} {{ item2.unit }}</view>
										</view>
									</view>
								</view>
								<view v-if="item.customServicesTotalCnt>0" style="margin-top: 20rpx;">定制服务</view>
								<view v-for="(pet, petIndex) in item.pets" :key="petIndex">
									<view v-if="pet.customServices &&pet.customServices.filter(e=>e.quantity>0).length>0" style="display: flex; align-items: center; justify-content: flex-start; margin-top: 20rpx;">
										<view class="pet-avatar">
											<u-avatar :src="pet.photo?pet.photo:defaultPhoto" size="34" shape="circle"></u-avatar>
										</view>
										<view style="margin-left: 20rpx;">{{ pet.name}}</view>
									</view>
									<!-- 定制服务 -->
									<view v-for="(customItem, customIndex) in pet.customServices" :key="customIndex">
										<view v-if="customItem.quantity"  class="service-item">
											<view>- {{ customItem.name }}</view>
											<view>¥{{ customItem.price }} × {{ customItem.quantity }} 次</view>
										</view>
									</view>	
								</view>
							</view>
						</view>

						<view class="service-new-address">
							<view v-if="needPreFamiliarize.length>0" class="total-cost">
								<view>提前熟悉 </view>
								<view>¥40</view>
							</view>
							<view class="total-cost">
								<view>费用总计 </view>
								<view>¥{{ originalTotalPrice }}</view>
							</view>
							<view class="total-cost">
								<view>平台优惠</view>
								<view style="color: #FF530A;">-¥{{ discount }} 
									<uni-icons type="right" size="28rpx" color="#AAA" @click="selectCoupon"></uni-icons>
								</view>
							</view>
							<view class="total-cost">
								<view>会员折扣</view>
								<view style="display: flex; align-items: center;">
									<view style="color: #999999;">{{ currentMember.itemType }}</view>
									<view style="border: solid #7D8196 1px; margin: 0 10rpx; height: 12px;">	</view>
									<view style="color: #FF530A;">-¥{{ memberDiscount }}</view>
								</view>
							</view>
							<view class="total-cost">
								<view>应付费用</view>
								<view style="font-weight: 500;font-size: 32rpx;">¥{{ finalPrice }}</view>
							</view>
						</view>
						
					</view>
				</view>
			</uni-card>
		</view>

    <view class="service-new-pet">
			<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 class="service-new-title-text">
							服务细则
						</view>
					</view>
				</view>
				<view class="split-line"></view>
				<view class="service-new-details-content">
					<view style="margin: 30rpx 0;">
						<u-checkbox-group
								@change="changePreFamiliarize"
						    :value="needPreFamiliarize"
						    iconPlacement="right" 
								placement="column">
							<u-checkbox activeColor="#FFBF60" label="是否提前熟悉" name="是否提前熟悉" shape="circle"></u-checkbox>
						</u-checkbox-group>
					</view>
					<view class="split-line"></view>
					<view class="service-new-details-desc">
						<view style="display: flex;">
							<text style="width: 20rpx;">*</text>
							<text style="flex: 1;">价格40元/次</text>
						</view>
						<view style="display: flex; margin: 20rpx 0;">
							<text style="width: 20rpx;">*</text>
							<text style="flex: 1;">服务内容: 购买此服务后，伴宠师将在您离家前，按照约定日期提前上门沟通，熟悉喂养要求及宠物</text>
						</view>
						<view style="display: flex;">
							<text style="width: 20rpx;">*</text>
							<text style="flex: 1;">服务保障: 购买此服务后，平台支持在提前熟悉后，上门服务第一天前，无理由免费更换伴宠师1次</text>
						</view>
					</view>
				</view>
			</uni-card>
		</view>
    <view class="details-subscribe">
			<view class="details-radio" style="width: 100%;padding-bottom: 20rpx;">
				<view>
					<u-checkbox-group v-model="isAgree" size="16" labelSize="14" labelColor="#999999">
						<u-checkbox activeColor="#FFBF60" label="我同意" name="我同意" labelSize="14" size="14" shape="circle"></u-checkbox>
					</u-checkbox-group>
				</view>
				<text style="color: #FFBF60;font-size: 28rpx;" @click="checkAgreement">《猫妈狗爸用户服务协议和隐私协议》</text>
			</view>
			<view style="display: flex;justify-content: space-between; align-items: center;">
				<view style="height: 80rpx; display: flex; align-items: center;">
					<text style="color: #333333;">订单总价: </text>
					<text style="color: #FF530A; font-size: 40rpx;">¥{{ finalPrice }} <text style="font-size: 32rpx;"></text></text>
				</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="showCoupon" class="calendar-popup">
      <view class="calendar-mask" ></view>
      <view class="calendar-content">
        <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 class="split-line"></view> 
					<scroll-view class="price-details-body" scroll-y v-if="showCouponList">
						<view v-for="(item,index) in couponList" style="padding-bottom:14px;" :key="index">
							<view class="coupon-card">
								<view class="card-left"><text style="font-size: 40rpx; margin-left: 5rpx;">{{ getCouponAmountOrDiscount(item) }}</text></view>
								<view class="card-right">
									<view class="card-content">
										<view class="card-info">{{item.stockName}}</view>
										<view class="card-time">有效期限: {{item.expireTime.slice(0, 10)}}截止</view>
									</view>
									<view style="width: 20%;">
										<u-checkbox-group :value="item.checked" @change="changeCoupon">
											<u-checkbox :disabled="item.transactionMinimum > originalTotalPrice" shape="circle" :name="item.id" activeColor="#ffbf60"></u-checkbox>
										</u-checkbox-group>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
        <u-button color="#FFBF60" type="primary" @click="confirmCoupon">确定</u-button>
      </view>
      
    </view>
  </view>
</template>
<script>
	import {getPersonalInfo,getCouponList,getCouponListForOrder} from "@/api/system/personal.js"
	import {getToken,getOpenIdKey} from '@/utils/auth'
	import { createOrderNew } from '@/api/system/user.js'
  export default {
    data() {
      return {
				isPaying:false,
        currentAddress: {},
        currentPetsByDay: [],
        showPets: [],
        expandedIndexs: [],
				isAgree: false,
				needPreFamiliarize: [],
				dailyShowData: [],
				originalTotalPrice:0,
        totalPrice: 0, // 总费用
        discount: 0, // 平台优惠
				memberDiscount:0, // 会员折扣
        finalPrice: 0, // 应付费用
				defaultPhoto:'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png',
				currentMember:{},
				memberDiscountList:[
					{
						itemType:"新晋家长9.5折优惠",
						discount:0.05
					},
					{
						itemType:"普卡会员9折优惠",
						discount:0.1
					},
					{
						itemType:"银卡会员8.8折优惠",
						discount:0.12
					},
					{
						itemType:"金卡会员8.5折优惠",
						discount:0.15
					}
				],
				couponList:[],
				showCoupon:false ,
				selectedCoupon:null,
				showCouponList:true,
				couponId:null,
				basePrice:0,
				baseProduct:'',
				
      }
    },
    onLoad() {
			if (getToken() && getOpenIdKey()) {
				this.getPersonalInfo()
			}
			
			this.originalTotalPrice = this.$globalData.newOrderData.totalPrice
			if(this.originalTotalPrice){
				this.basePrice = this.$globalData.mainSku[0].price
				this.baseProduct = this.$globalData.mainSku[0].name
				this.currentAddress = this.$globalData.newOrderData.currentAddress
				this.currentPetsByDay = this.$globalData.newOrderData.currentPetsByDay
				this.needPreFamiliarize = this.$globalData.newOrderData.needPreFamiliarize
			}else{
				// 返回首页
				uni.reLaunch({
					url: '/pages/index'
				});
			}
			this.getCouponList()
			this.getShowPets()
			this.groupPetsByDate()
      // this.totalPrice = this.$globalData.newOrderData.totalPrice
			
    },
    methods: {
			// 将currentPets转换为showPets
			getShowPets() {
				const showPets = []
				// 将 currentPetsByDay 通过petId分组
				const groupedPets = this.currentPetsByDay.reduce((acc, pet) => {
					pet.index = pet.petId + '-' + pet.serviceDate
					if (!acc[pet.petId]) {
						acc[pet.petId] = []; // 如果不存在，则初始化一个空数组
					}
					acc[pet.petId].push(pet); // 将当前宠物添加到对应的 petId 数组中
					return acc;
				}, {});
				console.log(groupedPets)
				// 循环将pets转换为showPets
				for(let petId in groupedPets) {
					const showPet = {
						petId: petId,
						name: groupedPets[petId][0].name,
						gender: groupedPets[petId][0].gender,
						petType: groupedPets[petId][0].petType,
						bodyType: groupedPets[petId][0].bodyType,
						photo: groupedPets[petId][0].photo,
						pets: groupedPets[petId]
					}
					showPets.push(showPet)
				}
				this.showPets = showPets
				console.log(this.showPets)
			},
			// 将宠物按天分组
			groupPetsByDate() {
				const dailyShowData = []
				const dailyPets = [];
				// 按日期分组宠物
				this.currentPetsByDay.forEach(pet => {
					const serviceDate = pet.serviceDate;
					if (!dailyPets[serviceDate]) {
						dailyPets[serviceDate] = [];
					}
					dailyPets[serviceDate].push(pet);
				});
				
				// 计算每日费用
				for (const date in dailyPets) {
					const pets = dailyPets[date];
					const priceDetails = []
					// 基础服务
					const baseServiceCost = this.basePrice
					
					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;

					
					const additionalCostItem = []
					let additionalCost = 0
					// 单天总宠物费用
					let totalPetCost = pets.reduce((acc, pet) => {
							return acc + this.calculatePetCost(pet);
						}, 0);
					// 如果总宠物费用>30
					if(totalPetCost>30){
						// 如果猫数量>=3,则免3只猫	
						if (catCount >= 3) {
							additionalCost = totalPetCost - 30
							catCount = catCount-3
						}else if (smallDogCount >= 2) { // 如果小型犬数量>=2,则免2只小型犬
							additionalCost = totalPetCost - 30
							smallDogCount = smallDogCount-2
						}else if(mediumDogCount >= 1) { // 如果中型犬数量>=1,则免1只中型犬
							additionalCost = totalPetCost - 30
							mediumDogCount = mediumDogCount-1
						}else{
							additionalCost = totalPetCost - 25
							catCount = catCount - 1
							smallDogCount = smallDogCount - 1
						}

						
						if(mediumDogCount>0){
							additionalCostItem.push({ itemName: '中型犬', price: 30, quantity: mediumDogCount, unit: '只'})
						}
						if(smallDogCount>0){
							additionalCostItem.push({ itemName: '小型犬', price: 15, quantity: smallDogCount, unit: '只'})
						}
						if(catCount>0){
							additionalCostItem.push({ itemName: '猫猫', price: 10, quantity: catCount, unit: '只'})
						}

					}
					// 如果有大型犬，额外费用为40元/只
					if (largeDogCount > 0) {
						additionalCost +=(40 * largeDogCount)
						additionalCostItem.push({ itemName: '大型犬', price: 40, quantity: largeDogCount, unit: '只'})
					}
					// 当日多次服务次数
					let multServicesTotalCost = 0
					const maxFeedCount = Math.max(...pets.map(pet => pet.feedCount));
					if (maxFeedCount === 2) {
						multServicesTotalCost += 45; // 1天2次
					} else if (maxFeedCount === 3) {
						multServicesTotalCost += 130; // 1天3次
					}
					priceDetails.push({ name: '专业喂养', item: [
						{ itemName: '专业喂养', price: baseServiceCost, quantity: 1, unit: '天' },
					]})
					priceDetails.push({ name: '上门次数', item: [
						{ itemName: '1天2次', price: 45, quantity: maxFeedCount === 2 ? 1 : 0, unit: '天'},
						{ itemName: '1天3次', price: 130, quantity: maxFeedCount === 3 ? 1 : 0, unit: '天'},
					]})
					
					if(additionalCostItem.length>0){
						priceDetails.push({ name: '额外宠物费用', item: additionalCostItem})
					}

					// 所有宠物定制服务费用
					const customServiceCost = pets.reduce((acc, pet) => acc + this.calculatePetCustomServiceCost(pet), 0)
					const totalCost = baseServiceCost + additionalCost + multServicesTotalCost + customServiceCost
					// 所有宠物定制服务总项数，每个类型的服务只算一次
					const acc = []
					pets.map(pet=>{
						pet.customServices.forEach(service=>{
							if(!acc.includes(service.skuId) && service.quantity>0){
								acc.push(service.skuId)
							}
						})
					})
					const customServicesTotalCnt = acc.length
					dailyShowData.push({
						date,
						pets,
						priceDetails,
						totalCost,
						customServicesTotalCnt
					})

				}
				// 将dailyShowData按日期排序
				this.dailyShowData = dailyShowData.sort((a, b) => new Date(a.date) - new Date(b.date))
				this.getShowTotalPrice()
			},
			calculatePetCost(pet) {
				// 宠物额外费用 不计算大型犬
				let petCost = 0;
				if (pet.petType === 'cat') {
					petCost += 10; // 猫额外费用
				} else if (pet.petType === 'dog' && pet.bodyType.includes('小型')) {
					petCost += 15; // 小型犬额外费用
				} else if (pet.petType === 'dog' && pet.bodyType.includes('中型')) {
					petCost += 30; // 中型犬额外费用
				} 
				return petCost;
			},
			// 计算宠物定制服务费用
			calculatePetCustomServiceCost(pet) {
				const customServiceCost = pet.customServices.reduce((acc, item) => acc + item.price * item.quantity, 0)
				return customServiceCost
			},
			// 展开或收起服务详情
      toggleExpand(index) {
				console.log(index)
        this.expandedIndexs = this.expandedIndexs.includes(index) ? this.expandedIndexs.filter(i => i !== index) : [...this.expandedIndexs, index];
				// this.expandedIndexs.push(index)
				console.log(this.expandedIndexs)
      },
      goBack() {		
				let len = getCurrentPages().length;
				if(len >= 2) {  
				    uni.navigateBack();  
				}else {  
				    uni.redirectTo({url:'/pages/newOrder/serviceNew2'});  
				}
			},
			changeAgree() {
				this.isAgree = !this.isAgree
			},
			checkAgreement() {
				uni.navigateTo({
					url: '/pages/details/agreement'
				});
			},
				// 节流
			throttle(func, delay) {
			  let lastCall = 0;
			  return function(...args) {
			    const now = new Date().getTime();
			    if (now - lastCall < delay) {
			      return;
			    }
			    lastCall = now;
			    func(...args);
			  }
			},
			getPersonalInfo(){
				getPersonalInfo().then(res=>{
					if(res&&(res.id || res.id === 0)){
						let userLevel=res.level
						this.currentMember = this.memberDiscountList.find(item=>{
							if(item.itemType.includes(userLevel)){
								return item
							}
						})					
						this.getShowTotalPrice()
					}
				})
			},
			// 获取优惠券列表
			getCouponList() {
				getCouponListForOrder().then(res=>{
					let rows = res.rows
					console.log(rows)
					this.couponList=rows.filter(item=>item.couponState=="SENDED")
					this.couponList.forEach(item=>{
						item.checked = []
						item.couponAmount = 20
					})
					
				})
			},
			selectCoupon(){
				this.showCoupon = true
			},
			changeCoupon(item){
				this.showCouponList = false
				this.couponList.forEach(coupon=>{
					if(coupon.id!=item[0]){
					coupon.checked = null
				}else{
					coupon.checked = item
					}
				})
				this.showCouponList = true
			},
			confirmCoupon(){
				this.selectedCoupon = this.couponList.find(coupon=>coupon.checked && coupon.checked.length>0)
				if(!this.selectedCoupon){
					this.couponId = null
					this.discount = 0
				}else{
					this.couponId = this.selectedCoupon?.id
					// 如果优惠券是折扣
					if(this.selectedCoupon?.stockType=="PDISCOUNT" && this.selectedCoupon?.discountPercent>0){
					//保留两位小数	
						this.discount = (this.originalTotalPrice * (1-this.selectedCoupon.discountPercent/100)).toFixed(2)
					}else{
						this.discount = this.selectedCoupon?.discountAmount
					}
				}
				this.getShowTotalPrice()
				this.showCoupon = false
				
			},
			togglePriceDetails(){
				this.showCoupon = !this.showCoupon
			},
			// 构造订单
			constructOrder(){
				const order = {
					openId:getOpenIdKey(),
					addressId:this.currentAddress.id,
					totalPrice:this.finalPrice,
					needPreFamiliarize:this.needPreFamiliarize.length>0,
					couponId:this.couponId,
					petOrderServices:this.getPetOrderServices(this.currentPetsByDay),

				}
				console.log(order)
				return order
			},
			getSkuList(customServices,feedCount){
				const skuList = customServices.filter(service=>service.quantity>0).map(service2=>{
					return {
						skuId:service2.skuId,
						quantity:service2.quantity,
						isMainProduct:service2.isMainProduct
					}
				})
				skuList.push({
					skuId:this.$globalData.mainSku[0].skuId,
					quantity:feedCount,
					isMainProduct:true
				})
				return skuList
			},
			getPetOrderServices(currentPetsByDay){
				const petOrderServices = currentPetsByDay.map(pet=>{
					return {
						petId:pet.petId,
						serviceDate:pet.serviceDate,
						feedCount:pet.feedCount,
						selectedTimeSlots:pet.selectedTimeSlots.join(','),
						skuList:this.getSkuList(pet.customServices,pet.feedCount)
					}
				})
				return petOrderServices
			},
			pay(params) {
				if (this.isPaying) {
					return;
				}
				this.isPaying = true
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: params.timeStamp,
					nonceStr: params.nonceStr,
					package: params.package_,
					signType: params.signType,
					paySign: params.paySign,
					success: (res) => {
						this.$modal.showToast('支付成功')
						this.$globalData.newOrderData={
							currentAddress:{},
							currentPets:[],
							totalPrice:0,
							needPreFamiliarize:[]
						}
						uni.navigateTo({
							url: '/pages/details/successful'
						});
					},
					fail: (err) => {
						this.loading=false
						console.log('支付失败', err)
						this.$modal.showToast('支付失败')
					},
					complete: () => {
						this.loading=false
						this.isPaying = false
					}
				})
			},
			changePreFamiliarize(name){
				if(name&&name.length>0){
					this.needPreFamiliarize=name
					this.originalTotalPrice = this.originalTotalPrice + 40
				}else{
					this.needPreFamiliarize=[]
					this.originalTotalPrice = this.originalTotalPrice - 40
				}
				// 如果总价小于优惠券的最低消费，则不使用优惠券
				if(this.selectedCoupon && this.originalTotalPrice<this.selectedCoupon.transactionMinimum){
					this.discount = 0
					this.couponId = null
					this.couponList.forEach(coupon=>{
						coupon.checked = null
					})
				}
				this.getShowTotalPrice()
			},
			getShowTotalPrice(){
				//保留两位小数
				this.memberDiscount = ((this.originalTotalPrice - this.discount) * this.currentMember.discount).toFixed(2)
				this.finalPrice = (this.originalTotalPrice - this.memberDiscount - this.discount).toFixed(2)
			},
			getCouponAmountOrDiscount(item){
				if(item.stockType=="PDISCOUNT"){
					return item.discountPercent/10 + '折'
				}else{
					return '¥' + item.discountAmount
				}
			},
      goNext() {
				if(!this.isAgree) {
					uni.showToast({
						title: '请先同意用户协议',
						icon: 'none'
					})
					return
				}
				const order = this.constructOrder()
				createOrderNew(order).then(res => {
					if (res.code == 200) {
						this.pay(res.data)
					} else {
						this.$modal.showToast('创建订单失败，请重试');
						this.loading=false
					}
				})
        
      }
    }
  }
</script>
<style scoped lang="scss">
.container {
		position: relative;
		height: 100%;
		padding-bottom: 200rpx;
		.details-subscribe {
			background-color: #FFFFFF;
			padding: 10px;
			width: 100%;
			height: 200rpx;
			position: fixed;
			bottom: 0;
			z-index: 100;
		
			.details-btn {
				width: 100%;
				border-radius: 6px;
				background: #FFB13F;
				font-size: 16px;
				color: #FFFFFF;
			}
			.details-radio{
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
.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-details-desc{
		font-weight: 400;
		font-size: 24rpx;
		color: #A94F20;
		line-height: 28rpx;
		text-align: left;
		padding: 26rpx 0;
	}
	.personal-address-info{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin: 32rpx 0;
		width: 80%;
		.personal-address-text{
			color: #333;
			font-size: 28rpx;
			font-weight: bold;
			width: 100%;
		}
		.personal-address-people{
			color: #7D8196;
			font-size: 28rpx;
			font-weight: 400;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
	}
	.service-new-address-selected{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
.personal-pet-list {
	margin-top: 20rpx;
	
	.personal-pet-list-item {
		margin-bottom: 20rpx;
		background-color: #F9F9F9;
		height: 172rpx;
		border-radius: 8rpx;
		
		.personal-pet-info {
			height: 100%;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
		}
	}
}
.service-new-address {
	.service-summary {
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.service-details {
		padding: 10rpx 15rpx;
		background-color: #F9F9F9;
		margin-bottom: 10rpx;

		.pet-info {
			display: flex;
			justify-content: space-between;
			margin: 5rpx 0;
			font-size: 24rpx;
			color: #333;
		}
		.service-item {
			display: flex;
			justify-content: space-between;
			width: 100%;
			color: #999999;
			font-size: 28rpx;
		}
	}

	.total-cost {
		padding: 10rpx 15rpx;
		font-size: 28rpx;
		color: #333;
		display: flex;
		justify-content: space-between;
	}
	
}
.calendar-popup{
	position: fixed; 
	bottom: 0; 
	left: 0; 
	right: 0; 
	z-index: 999;
	.calendar-content{
		background: #F5F5F7;
		border-radius: 16rpx 16rpx 0 0; 
		padding: 0 20rpx 40rpx;
	}
}
.calendar-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
	z-index: 998; /* 确保在内容下方 */
	pointer-events: none; /* 使遮罩层不阻止点击事件 */
}
.calendar-content {
	position: relative; /* 确保内容在遮罩层之上 */
	z-index: 999; /* 确保内容在遮罩层之上 */
}
.price-details {
	background: #F5F5F7; /* 背景颜色 */
	padding: 10px 10px 0 10px; /* 内边距 */
	z-index: 1000; /* 确保在其他元素之上 */
	min-height: 600rpx; /* 固定高度 */
	overflow: hidden; /* 隐藏超出部分 */
	}
	.price-details-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 20rpx;
	}
	.price-details-body {
		margin-top: 20rpx;
		max-height: 450rpx; /* 留出头部空间 */
		overflow-y: auto; /* 允许上下滚动 */
	}
	.coupon-card{
		  display: flex;
		  align-items: center;
		  width: 100%;
		  padding: 10px 0;
		  background: #fff;
		  border-radius: 8px;
		  -webkit-mask-image: radial-gradient(circle at 88px 4px, transparent 4px, #d8d8d8 4.5px),radial-gradient(closest-side circle at 50%, #d8d8d8 99%, transparent 100%);
		  -webkit-mask-size: 100%, 2px 4px;
		  -webkit-mask-repeat: repeat, repeat-y;
		  -webkit-mask-position: 0 -4px, 87px;
		  -webkit-mask-composite: source-out;
		  mask-composite: subtract;
		  // background: linear-gradient(45deg, orange, red);
		}
		.card-left{
		  width: 88px;
		  text-align: center;
		  font-size: 28rpx;
		  color: #FF530A;
		  
		}
		.card-right{
		  padding: 0px 12px;
		  display: flex;
		  flex: 1;
		  /* flex-direction: column; */
		  justify-content: space-between;
		  align-items: center;
		  height: 60px;s
		  .card-content {
			  width: 80%;
		  }
		  .card-icon{
		  			position: relative;
		  			right: -10px;
		  			top: -10px;
		  }
		}
		.card-info{
		  margin: 0;
		  font-size: 14px;
		  line-height: 20px;
		  color:#333333;
		}
		.card-time{
		  font-size: 12px; 
		  line-height: 16px;
		  font-weight: normal;
		  color: #aaaaaa;
		  margin-top: 4px;
		}
</style>