You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

972 lines
30 KiB

<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>