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),
				}
				
				if(this.buyInfo.teacher){
					order.teacherId = this.buyInfo.teacher.userId
				}else{
                    //打印
                    console.log(this.$globalData.newOrderData.companionLevel);
					order.companionLevel = ['', 'junior', 'senior'].indexOf(this.$globalData.newOrderData.companionLevel)
				}
				
				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.reLaunch({
							url: '/pages_order/order/payOrderSuccessful'
							// 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>