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.
1091 lines
30 KiB
1091 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),
|
|
}
|
|
|
|
if(this.buyInfo.teacher){
|
|
order.teacherId = this.buyInfo.teacher.userId
|
|
}else{
|
|
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.navigateTo({
|
|
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>
|