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.

1392 lines
47 KiB

5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 days ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 days ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 days ago
5 days ago
5 days ago
5 months ago
5 months ago
5 months ago
5 days ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 days ago
5 months ago
5 months ago
5 months ago
5 days ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 days ago
5 days ago
5 days ago
5 days ago
5 days ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
  1. <template>
  2. <view class="service-new container">
  3. <view class="service-new-address">
  4. <uni-card padding=0 :is-shadow="false">
  5. <view class="service-new-title" slot="title">
  6. <view class="service-new-title-left">
  7. <view class="service-new-flag"></view>
  8. <view>服务地址</view>
  9. </view>
  10. </view>
  11. <view class="split-line"></view>
  12. <view class="service-new-address-content">
  13. <view class="service-new-address-selected">
  14. <view class="personal-address-info">
  15. <view class="personal-address-text">
  16. {{currentAddress.province}} {{currentAddress.city}} {{currentAddress.detailAddress}}
  17. </view>
  18. <view class="personal-address-people">
  19. <view>
  20. {{currentAddress.name}}
  21. </view>
  22. <view style="border: solid #7D8196 1px; margin: 0 10px; height: 12px;"> </view>
  23. <view>
  24. {{currentAddress.phone}}
  25. </view>
  26. </view>
  27. </view>
  28. </view>
  29. </view>
  30. </uni-card>
  31. </view>
  32. <view class="service-new-pet">
  33. <uni-card padding=0 :is-shadow="false">
  34. <view class="service-new-title" slot="title">
  35. <view class="service-new-title-left">
  36. <view class="service-new-flag">
  37. </view>
  38. <view class="service-new-title-text">
  39. 服务宠物
  40. </view>
  41. </view>
  42. </view>
  43. <view class="split-line"></view>
  44. <view class="service-new-pet-content">
  45. <view class="personal-pet-list">
  46. <view v-for="(item,index) in showPets" :key="index">
  47. <view class="personal-pet-list-item">
  48. <view class="personal-pet-info">
  49. <!-- 左侧头像 -->
  50. <view class="pet-avatar">
  51. <u-avatar :src="item.photo?item.photo:defaultPhoto" size="60"
  52. shape="circle"></u-avatar>
  53. </view>
  54. <!-- 中间内容 -->
  55. <view class="pet-info" style="flex: 1; margin: 0 20rpx; max-width: 50%;">
  56. <view class="pet-name-gender" style="display: flex; align-items: center;">
  57. <view>{{item.name}}</view>
  58. <view class="pet-gender"
  59. style="margin-left: 10rpx; display: flex;align-items: center;">
  60. <img :src="item.gender=='男生'?'../../static/images/details/boy.svg':'../../static/images/details/girl.svg'"
  61. alt="sex" style="width: 16px;height: 16px;" />
  62. </view>
  63. </view>
  64. <view class="pet-dates ellipsis">
  65. {{ item.pets.map(e=>e.serviceDate).join(';') }}
  66. </view>
  67. </view>
  68. <!-- 右侧天数统计 -->
  69. <view class="date-total" style="margin-left: auto;width: 140rpx;text-align: end;">
  70. {{item.pets.length}}
  71. </view>
  72. </view>
  73. </view>
  74. </view>
  75. </view>
  76. </view>
  77. </uni-card>
  78. </view>
  79. <view class="service-new-pet">
  80. <uni-card padding=0 :is-shadow="false">
  81. <view class="service-new-title" slot="title">
  82. <view class="service-new-title-left">
  83. <view class="service-new-flag">
  84. </view>
  85. <view class="service-new-title-text">
  86. 服务信息及费用
  87. </view>
  88. </view>
  89. </view>
  90. <view class="split-line"></view>
  91. <view class="service-new-pet-content">
  92. <view class="personal-pet-list">
  93. <view v-for="item in dailyShowData" :key="item.date" class="service-new-address">
  94. <view class="service-summary">
  95. <view style="display: flex; align-items: center;">
  96. <view style="padding-right: 10rpx;color: #7D8196;">{{ getDateText(item.date) }}</view>
  97. <!-- <view style="padding-right: 10rpx;color: #7D8196;">{{ item.date }}</view> -->
  98. <view
  99. style="margin: 0 10rpx; width: 2px; height: 20rpx; background-color: #7D8196;">
  100. </view>
  101. <view style="color: #333333; margin-left: 10rpx;">{{baseProduct}}
  102. {{item.customServicesTotalCnt? ' + 定制服务' + item.customServicesTotalCnt + '项' : '' }}
  103. </view>
  104. </view>
  105. <view style="display: flex; align-items: center;">
  106. <view style="color: #333333;margin-right: 10rpx;">¥{{ item.totalCost }}</view>
  107. <view>
  108. <u-icon @click="toggleExpand( item.date )"
  109. :name="expandedIndexs.includes( item.date ) ? 'arrow-up' : 'arrow-down'"
  110. color="#FFBF60" size="14"></u-icon>
  111. </view>
  112. </view>
  113. </view>
  114. <view v-if="!expandedIndexs.includes(item.date)" class="split-line"></view>
  115. <view v-show="expandedIndexs.includes(item.date)" class="service-details">
  116. <!-- 基础服务 上门次数 额外费用 -->
  117. <view>基础服务</view>
  118. <view v-for="(priceItem, priceIndex) in item.priceDetails" :key="priceIndex"
  119. class="price-details-item">
  120. <view style="display: flex;" v-for="(item2, index) in priceItem.item" :key="index">
  121. <view v-if="item2.quantity" class="service-item">
  122. <view v-if="item2.itemName != item.name"
  123. class="price-details-item-price-total-item">- {{ item2.itemName }}
  124. </view>
  125. <view class="price-details-item-price-total-item">¥{{ parseFloat(item2.price) }} ×
  126. {{ item2.quantity }} {{ item2.unit }}</view>
  127. </view>
  128. </view>
  129. </view>
  130. <view v-if="item.customServicesTotalCnt>0" style="margin-top: 20rpx;">定制服务</view>
  131. <view v-for="(pet, petIndex) in item.pets" :key="petIndex">
  132. <view
  133. v-if="pet.customServices &&pet.customServices.filter(e=>e.quantity>0).length>0"
  134. style="display: flex; align-items: center; justify-content: flex-start; margin-top: 20rpx;">
  135. <view class="pet-avatar">
  136. <u-avatar :src="pet.photo?pet.photo:defaultPhoto" size="34"
  137. shape="circle"></u-avatar>
  138. </view>
  139. <view style="margin-left: 20rpx;">{{ pet.name}}</view>
  140. </view>
  141. <!-- 定制服务 -->
  142. <view v-for="(customItem, customIndex) in pet.customServices" :key="customIndex">
  143. <view v-if="customItem.quantity" class="service-item">
  144. <view>- {{ customItem.name }}</view>
  145. <view>¥{{ parseFloat(customItem.price).toFixed(2) }} × {{ customItem.quantity }} </view>
  146. </view>
  147. </view>
  148. </view>
  149. </view>
  150. </view>
  151. <view class="service-new-address">
  152. <view v-if="needPreFamiliarize.length>0" class="total-cost">
  153. <view>提前熟悉 </view>
  154. <view>¥{{ (price_config && price_config.preFamiliarize && price_config.preFamiliarize.price) || 40 }}</view>
  155. </view>
  156. <!-- 伴宠师价格已合并到基础服务价格中不再单独显示 -->
  157. <view class="total-cost">
  158. <view>费用总计 </view>
  159. <view>¥{{ parseFloat(originalTotalPrice).toFixed(2) }}</view>
  160. </view>
  161. <view class="total-cost" @click="selectCoupon">
  162. <view>平台优惠</view>
  163. <view style="color: #FF530A;">
  164. {{ selectedCoupon ? selectedCoupon.stockName : '未使用优惠券' }}
  165. <uni-icons type="right" size="28rpx" color="#AAA"></uni-icons>
  166. </view>
  167. </view>
  168. <view class="total-cost" v-if="discountMemberText">
  169. <view>会员折扣</view>
  170. <view style="display: flex; align-items: center;">
  171. <view style="color: #999999;">{{ currentMember.itemType }}{{ discountMemberText }}折优惠</view>
  172. <view style="border: solid #7D8196 1px; margin: 0 10rpx; height: 12px;"> </view>
  173. <view style="color: #FF530A;">-¥{{ parseFloat(memberDiscount).toFixed(2) }}</view>
  174. </view>
  175. </view>
  176. <view class="total-cost" v-if="$globalData.newOrderData.moreOrderPrice && $globalData.newOrderData.moreOrderPrice > 0">
  177. <view>再来一单费用</view>
  178. <view style="color: #FF530A;">+¥{{ parseFloat($globalData.newOrderData.moreOrderPrice).toFixed(2) }}</view>
  179. </view>
  180. <view class="total-cost">
  181. <view>应付费用</view>
  182. <view style="font-weight: 500;font-size: 32rpx;">¥{{ parseFloat(finalPrice).toFixed(2) }}</view>
  183. </view>
  184. </view>
  185. </view>
  186. </view>
  187. </uni-card>
  188. </view>
  189. <view class="service-new-pet">
  190. <uni-card padding=0 :is-shadow="false">
  191. <view class="service-new-title" slot="title">
  192. <view class="service-new-title-left">
  193. <view class="service-new-flag">
  194. </view>
  195. <view class="service-new-title-text">
  196. 服务细则
  197. </view>
  198. </view>
  199. </view>
  200. <view class="split-line"></view>
  201. <view class="service-new-details-content">
  202. <view style="margin: 30rpx 0;">
  203. <u-checkbox-group @change="changePreFamiliarize" :value="needPreFamiliarize"
  204. iconPlacement="right" placement="column">
  205. <u-checkbox activeColor="#FFBF60" label="是否提前熟悉" name="是否提前熟悉" shape="circle"></u-checkbox>
  206. </u-checkbox-group>
  207. </view>
  208. <view class="split-line"></view>
  209. <view class="service-new-details-desc">
  210. <view style="display: flex;">
  211. <text style="width: 20rpx;">*</text>
  212. <text style="flex: 1;">价格{{ (price_config && price_config.preFamiliarize && price_config.preFamiliarize.price) || 40 }}/</text>
  213. </view>
  214. <view style="display: flex; margin: 20rpx 0;">
  215. <text style="width: 20rpx;">*</text>
  216. <text style="flex: 1;">服务内容: 购买此服务后伴宠师将在您离家前按照约定日期提前上门沟通熟悉喂养要求及宠物</text>
  217. </view>
  218. <view style="display: flex;">
  219. <text style="width: 20rpx;">*</text>
  220. <text style="flex: 1;">服务保障: 购买此服务后平台支持在提前熟悉后上门服务第一天前无理由免费更换伴宠师1次</text>
  221. </view>
  222. </view>
  223. </view>
  224. </uni-card>
  225. </view>
  226. <view class="details-subscribe">
  227. <view class="details-radio" style="width: 100%;padding-bottom: 20rpx;">
  228. <view>
  229. <u-checkbox-group v-model="isAgree" size="16" labelSize="14" labelColor="#999999">
  230. <u-checkbox activeColor="#FFBF60" label="我同意" name="我同意" labelSize="14" size="14"
  231. shape="circle"></u-checkbox>
  232. </u-checkbox-group>
  233. </view>
  234. <text style="color: #FFBF60;font-size: 28rpx;" @click="checkAgreement">猫妈狗爸用户服务协议和隐私协议</text>
  235. </view>
  236. <view style="display: flex;justify-content: space-between; align-items: center;">
  237. <view style="height: 80rpx; display: flex; align-items: center;">
  238. <text style="color: #333333;">订单总价: </text>
  239. <text style="color: #FF530A; font-size: 40rpx;">¥{{ parseFloat(finalPrice).toFixed(2) }} <text
  240. style="font-size: 32rpx;"></text></text>
  241. </view>
  242. <view style="display: flex;">
  243. <u-button color="#FFF4E4" customStyle="width: 200rpx; color: #FFAA48; margin-right: 20rpx;"
  244. text="上一步" @click="goBack"></u-button>
  245. <u-button color="#FFBF60" customStyle="width: 200rpx; color: #FFF;" text="支付"
  246. @click="goNext"></u-button>
  247. </view>
  248. </view>
  249. </view>
  250. <view v-if="showCoupon" class="calendar-popup">
  251. <view class="calendar-mask"></view>
  252. <view class="calendar-content">
  253. <view class="price-details">
  254. <view class="price-details-header">
  255. <text
  256. style="text-align: center; width: 100%; font-size: 32rpx; font-weight: 500; color: #333333;">优惠券</text>
  257. <u-icon name="close" @click="togglePriceDetails"></u-icon>
  258. </view>
  259. <view class="split-line"></view>
  260. <scroll-view class="price-details-body" scroll-y v-if="showCouponList">
  261. <view v-for="(item,index) in couponList" style="padding-bottom:14px;" :key="index">
  262. <view class="coupon-card" :class="{
  263. 'auto-selected': item.checked && item.checked.length > 0 && item.isAutoSelected,
  264. 'manual-selected': item.checked && item.checked.length > 0 && !item.isAutoSelected
  265. }">
  266. <view class="card-left"><text
  267. style="font-size: 40rpx; margin-left: 5rpx;">{{ getCouponAmountOrDiscount(item) }}</text>
  268. </view>
  269. <view class="card-right">
  270. <view class="card-content">
  271. <view class="card-info">
  272. {{item.stockName}}
  273. <text v-if="item.checked && item.checked.length > 0 && item.isAutoSelected" style="color: #FF530A; font-size: 24rpx; margin-left: 10rpx;">(自动选择)</text>
  274. <text v-if="item.checked && item.checked.length > 0 && !item.isAutoSelected" style="color: #FF530A; font-size: 24rpx; margin-left: 10rpx;">(手动选择)</text>
  275. </view>
  276. <view class="card-time">有效期限: {{item.expireTime.slice(0, 10)}}截止</view>
  277. </view>
  278. <view style="width: 20%;">
  279. <u-checkbox-group :value="item.checked" @change="changeCoupon">
  280. <u-checkbox :disabled="item.transactionMinimum > originalTotalPrice"
  281. shape="circle" :name="item.id" activeColor="#ffbf60"></u-checkbox>
  282. </u-checkbox-group>
  283. </view>
  284. </view>
  285. </view>
  286. </view>
  287. </scroll-view>
  288. </view>
  289. <u-button color="#FFBF60" type="primary" @click="confirmCoupon">确定</u-button>
  290. </view>
  291. </view>
  292. </view>
  293. </template>
  294. <script>
  295. import {
  296. getPersonalInfo,
  297. getCouponList,
  298. getCouponListForOrder
  299. } from "@/api/system/personal.js"
  300. import {
  301. getToken,
  302. getOpenIdKey
  303. } from '@/utils/auth'
  304. import {
  305. createOrderNew
  306. } from '@/api/system/user.js'
  307. import dayjs from '@/utils/lib/dayjs.min.js'
  308. export default {
  309. data() {
  310. return {
  311. isPaying: false,
  312. currentAddress: {},
  313. currentPetsByDay: [],
  314. showPets: [],
  315. expandedIndexs: [],
  316. isAgree: false,
  317. needPreFamiliarize: [],
  318. dailyShowData: [],
  319. originalTotalPrice: 0,
  320. totalPrice: 0, // 总费用
  321. discount: 0, // 平台优惠
  322. memberDiscount: 0, // 会员折扣
  323. finalPrice: 0, // 应付费用
  324. defaultPhoto: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/pet/catdog.png',
  325. currentMember: {},
  326. memberDiscountList: [{
  327. itemType: "新晋家长",
  328. },
  329. {
  330. itemType: "普卡会员",
  331. },
  332. {
  333. itemType: "银卡会员",
  334. },
  335. {
  336. itemType: "金卡会员",
  337. }
  338. ],
  339. couponList: [],
  340. showCoupon: false,
  341. selectedCoupon: null,
  342. showCouponList: true,
  343. couponId: null,
  344. basePrice: 0,
  345. baseProduct: '',
  346. // 节假日价格配置
  347. holidayPrice: 75,
  348. normalPrice: 75,
  349. holidayDate: [],
  350. //折扣
  351. discountMemberText : '',
  352. companionLevelTitle : '',
  353. freePetConfig : {
  354. cat: { freeCount: 1 },
  355. smallDog: { freeCount: 0 },
  356. mediumDog: { freeCount: 0 },
  357. largeDog: { freeCount: 0 }
  358. },
  359. }
  360. },
  361. onLoad() {
  362. if (getToken() && getOpenIdKey()) {
  363. this.getPersonalInfo()
  364. }
  365. this.originalTotalPrice = this.$globalData.newOrderData.totalPrice
  366. if (this.originalTotalPrice) {
  367. this.basePrice = this.$globalData.mainSku[0].price
  368. this.baseProduct = this.$globalData.mainSku[0].name
  369. this.currentAddress = this.$globalData.newOrderData.currentAddress
  370. this.currentPetsByDay = this.$globalData.newOrderData.currentPetsByDay
  371. this.needPreFamiliarize = this.$globalData.newOrderData.needPreFamiliarize
  372. } else {
  373. // 返回首页
  374. uni.reLaunch({
  375. url: '/pages/index'
  376. });
  377. }
  378. this.initPriceConfig()
  379. this.getShowPets()
  380. this.groupPetsByDate()
  381. this.getCouponList()
  382. // this.totalPrice = this.$globalData.newOrderData.totalPrice
  383. this.companionLevelTitle = (this.$globalData.newOrderData.companionLevel && this.$globalData.newOrderData.companionLevel.paramValue) || ''
  384. },
  385. methods: {
  386. companionLevelPrice(){
  387. let companionLevel = this.$globalData.newOrderData.companionLevel
  388. if (!companionLevel || !companionLevel.paramValueText) {
  389. return 0
  390. }
  391. let paramValueText = isNaN(companionLevel.paramValueText) ? 0 : Number(companionLevel.paramValueText)
  392. let addPrice = this.isAddPrice()
  393. let memberRate = isNaN(this.$store.state.memberRate) ? 1 : Number(this.$store.state.memberRate)
  394. let price = paramValueText * addPrice
  395. return price * memberRate
  396. },
  397. //判断当前选中的地址是否加价
  398. isAddPrice(){
  399. let currentAddress = this.$globalData.newOrderData.currentAddress || {}
  400. let defaultPrice = 1
  401. try{
  402. defaultPrice = this.price_config.cityConfig.priceRates.default
  403. }catch(e){
  404. defaultPrice = 1
  405. }
  406. if(!this.price_config.cityConfig || !currentAddress.province || !currentAddress.city){
  407. return defaultPrice
  408. }
  409. let addressList = this.price_config.cityConfig.priceRates || []
  410. for(let key in addressList){
  411. if((currentAddress.province + currentAddress.city).includes(key)){
  412. return addressList[key]
  413. }
  414. }
  415. return defaultPrice
  416. },
  417. getDateText(date){
  418. return dayjs(date).format('MM-DD')
  419. },
  420. // 将currentPets转换为showPets
  421. getShowPets() {
  422. const showPets = []
  423. // 将 currentPetsByDay 通过petId分组
  424. const groupedPets = this.currentPetsByDay.reduce((acc, pet) => {
  425. pet.index = pet.petId + '-' + pet.serviceDate
  426. if (!acc[pet.petId]) {
  427. acc[pet.petId] = []; // 如果不存在,则初始化一个空数组
  428. }
  429. acc[pet.petId].push(pet); // 将当前宠物添加到对应的 petId 数组中
  430. return acc;
  431. }, {});
  432. console.log(groupedPets)
  433. // 循环将pets转换为showPets
  434. for (let petId in groupedPets) {
  435. const showPet = {
  436. petId: petId,
  437. name: groupedPets[petId][0].name,
  438. gender: groupedPets[petId][0].gender,
  439. petType: groupedPets[petId][0].petType,
  440. bodyType: groupedPets[petId][0].bodyType,
  441. photo: groupedPets[petId][0].photo,
  442. pets: groupedPets[petId]
  443. }
  444. showPets.push(showPet)
  445. }
  446. this.showPets = showPets
  447. console.log(this.showPets)
  448. },
  449. // 将宠物按天分组
  450. groupPetsByDate() {
  451. const dailyShowData = []
  452. const dailyPets = [];
  453. // 按日期分组宠物
  454. this.currentPetsByDay.forEach(pet => {
  455. const serviceDate = pet.serviceDate;
  456. if (!dailyPets[serviceDate]) {
  457. dailyPets[serviceDate] = [];
  458. }
  459. dailyPets[serviceDate].push(pet);
  460. });
  461. // 计算每日费用
  462. for (const date in dailyPets) {
  463. const pets = dailyPets[date];
  464. const priceDetails = []
  465. // 基础服务 - 根据是否为节假日设置价格
  466. const holidayPrice = isNaN(this.holidayPrice) ? 75 : Number(this.holidayPrice)
  467. const normalPrice = isNaN(this.normalPrice) ? 75 : Number(this.normalPrice)
  468. const baseServiceCost = Number(this.isHoliday(date) ? holidayPrice : normalPrice)
  469. const largeDogCount = pets.filter(pet => pet.petType === 'dog' && pet.bodyType.includes('大型')).length;
  470. let mediumDogCount = pets.filter(pet => pet.petType === 'dog' && pet.bodyType.includes('中型')).length;
  471. let smallDogCount = pets.filter(pet => pet.petType === 'dog' && pet.bodyType.includes('小型')).length;
  472. let catCount = pets.filter(pet => pet.petType === 'cat').length;
  473. const additionalCostItem = []
  474. let additionalCost = 0
  475. // 单天总宠物费用
  476. let totalPetCost = pets.reduce((acc, pet) => {
  477. return acc + this.calculatePetCost(pet);
  478. }, 0);
  479. // 根据 freePetConfig 配置计算免费宠物数量
  480. const freePetConfig = this.price_config.freePetConfig || this.freePetConfig
  481. // 计算收费的宠物数量(扣除免费数量)
  482. const chargeableMediumDogCount = Math.max(0, mediumDogCount - freePetConfig.mediumDog.freeCount)
  483. const chargeableSmallDogCount = Math.max(0, smallDogCount - freePetConfig.smallDog.freeCount)
  484. const chargeableCatCount = Math.max(0, catCount - freePetConfig.cat.freeCount)
  485. // 计算额外宠物费用
  486. if (chargeableMediumDogCount > 0) {
  487. additionalCost += (this.calculatePetCost({
  488. petType: 'dog',
  489. bodyType: '中型',
  490. }) * chargeableMediumDogCount)
  491. additionalCostItem.push({
  492. itemName: '中型犬',
  493. price: this.calculatePetCost({
  494. petType: 'dog',
  495. bodyType: '中型',
  496. }),
  497. quantity: chargeableMediumDogCount,
  498. unit: '只'
  499. })
  500. }
  501. if (chargeableSmallDogCount > 0) {
  502. additionalCost += (this.calculatePetCost({
  503. petType: 'dog',
  504. bodyType: '小型',
  505. }) * chargeableSmallDogCount)
  506. additionalCostItem.push({
  507. itemName: '小型犬',
  508. price: this.calculatePetCost({
  509. petType: 'dog',
  510. bodyType: '小型',
  511. }),
  512. quantity: chargeableSmallDogCount,
  513. unit: '只'
  514. })
  515. }
  516. if (chargeableCatCount > 0) {
  517. additionalCost += (this.calculatePetCost({
  518. petType: 'cat',
  519. }) * chargeableCatCount)
  520. additionalCostItem.push({
  521. itemName: '猫猫',
  522. price: this.calculatePetCost({
  523. petType: 'cat',
  524. }),
  525. quantity: chargeableCatCount,
  526. unit: '只'
  527. })
  528. }
  529. // 计算收费的大型犬数量(扣除免费数量)
  530. const chargeableLargeDogCount = Math.max(0, largeDogCount - freePetConfig.largeDog.freeCount)
  531. if (chargeableLargeDogCount > 0) {
  532. additionalCost += (this.calculatePetCost({
  533. petType: 'dog',
  534. bodyType: '大型',
  535. }) * chargeableLargeDogCount)
  536. additionalCostItem.push({
  537. itemName: '大型犬',
  538. price: this.calculatePetCost({
  539. petType: 'dog',
  540. bodyType: '大型',
  541. }),
  542. quantity: chargeableLargeDogCount,
  543. unit: '只'
  544. })
  545. }
  546. // 当日多次服务次数 - 基础价格乘以倍数
  547. let multServicesTotalCost = 0
  548. const maxFeedCount = Math.max(...pets.map(pet => pet.feedCount));
  549. const multiService = this.price_config.multiService || { two: { price: 1 }, three: { price: 1 } }
  550. if (maxFeedCount === 2) {
  551. multServicesTotalCost += baseServiceCost * (multiService.two.price || 1); // 基础价格 × 2次倍数
  552. } else if (maxFeedCount === 3) {
  553. multServicesTotalCost += baseServiceCost * (multiService.three.price || 1); // 基础价格 × 3次倍数
  554. }
  555. priceDetails.push({
  556. name: '专业喂养',
  557. item: [{
  558. itemName: this.isHoliday(date) ? '节假日' : '非节假日',
  559. price: baseServiceCost,
  560. quantity: 1,
  561. unit: '天'
  562. }, ]
  563. })
  564. priceDetails.push({
  565. name: '上门次数',
  566. item: [{
  567. itemName: `1天2次 (${this.isHoliday(date) ? '节假日' : '非节假日'})`,
  568. price: baseServiceCost * (multiService.two.price || 1),
  569. quantity: maxFeedCount === 2 ? 1 : 0,
  570. unit: '天'
  571. },
  572. {
  573. itemName: `1天3次 (${this.isHoliday(date) ? '节假日' : '非节假日'})`,
  574. price: baseServiceCost * (multiService.three.price || 1),
  575. quantity: maxFeedCount === 3 ? 1 : 0,
  576. unit: '天'
  577. },
  578. ]
  579. })
  580. if (additionalCostItem.length > 0) {
  581. priceDetails.push({
  582. name: '额外宠物费用',
  583. item: additionalCostItem
  584. })
  585. }
  586. // 所有宠物定制服务费用
  587. const customServiceCost = pets.reduce((acc, pet) => acc + this.calculatePetCustomServiceCost(pet), 0)
  588. console.log(baseServiceCost + additionalCost + multServicesTotalCost + customServiceCost);
  589. console.log(baseServiceCost , additionalCost , multServicesTotalCost , customServiceCost);
  590. // 确保所有数值都是有效的数字,避免NaN
  591. const safeBaseServiceCost = isNaN(baseServiceCost) ? 0 : Number(baseServiceCost)
  592. const safeAdditionalCost = isNaN(additionalCost) ? 0 : Number(additionalCost)
  593. const safeMultServicesTotalCost = isNaN(multServicesTotalCost) ? 0 : Number(multServicesTotalCost)
  594. const safeCustomServiceCost = isNaN(customServiceCost) ? 0 : Number(customServiceCost)
  595. const totalCost = parseFloat(safeBaseServiceCost + safeAdditionalCost + safeMultServicesTotalCost + safeCustomServiceCost).toFixed(2)
  596. // 所有宠物定制服务总项数,每个类型的服务只算一次
  597. const acc = []
  598. pets.map(pet => {
  599. pet.customServices.forEach(service => {
  600. if (!acc.includes(service.skuId) && service.quantity > 0) {
  601. acc.push(service.skuId)
  602. }
  603. })
  604. })
  605. const customServicesTotalCnt = acc.length
  606. dailyShowData.push({
  607. date,
  608. pets,
  609. priceDetails,
  610. totalCost,
  611. customServicesTotalCnt
  612. })
  613. }
  614. // 将dailyShowData按日期排序
  615. this.dailyShowData = dailyShowData.sort((a, b) => new Date(a.date) - new Date(b.date))
  616. this.getShowTotalPrice()
  617. },
  618. calculatePetCost(pet) {
  619. // 宠物额外费用 不计算大型犬
  620. let petExtra = this.price_config.petExtra || {}
  621. let petCost = 0;
  622. if (pet.petType === 'cat' && petExtra.cat) {
  623. petCost += Number(petExtra.cat.price || 0); // 猫额外费用
  624. } else if (pet.petType === 'dog' && pet.bodyType.includes('小型') && petExtra.smallDog) {
  625. petCost += Number(petExtra.smallDog.price || 0); // 小型犬额外费用
  626. } else if (pet.petType === 'dog' && pet.bodyType.includes('中型') && petExtra.mediumDog) {
  627. petCost += Number(petExtra.mediumDog.price || 0); // 中型犬额外费用
  628. } else if (pet.petType === 'dog' && pet.bodyType.includes('大型') && petExtra.largeDog) {
  629. petCost += Number(petExtra.largeDog.price || 0); // 大型犬额外费用
  630. }
  631. return petCost;
  632. },
  633. // 计算宠物定制服务费用
  634. calculatePetCustomServiceCost(pet) {
  635. console.log('pet.customServices',pet.customServices)
  636. // 确保customServices存在且为数组
  637. if (!pet.customServices || !Array.isArray(pet.customServices)) {
  638. return '0.00'
  639. }
  640. const customServiceCost = pet.customServices.reduce((acc, item) => {
  641. const price = isNaN(item.price) ? 0 : Number(item.price)
  642. const quantity = isNaN(item.quantity) ? 0 : Number(item.quantity)
  643. return acc + price * quantity
  644. }, 0)
  645. console.log('customServiceCost',customServiceCost)
  646. return parseFloat(customServiceCost).toFixed(2)
  647. },
  648. // 展开或收起服务详情
  649. toggleExpand(index) {
  650. console.log(index)
  651. this.expandedIndexs = this.expandedIndexs.includes(index) ? this.expandedIndexs.filter(i => i !== index) :
  652. [...this.expandedIndexs, index];
  653. // this.expandedIndexs.push(index)
  654. console.log(this.expandedIndexs)
  655. },
  656. goBack() {
  657. let len = getCurrentPages().length;
  658. if (len >= 2) {
  659. uni.navigateBack();
  660. } else {
  661. uni.redirectTo({
  662. url: '/pages/newOrder/serviceNew2'
  663. });
  664. }
  665. },
  666. changeAgree() {
  667. this.isAgree = !this.isAgree
  668. },
  669. checkAgreement() {
  670. uni.navigateTo({
  671. url: '/pages/details/agreement'
  672. });
  673. },
  674. // 初始化价格配置
  675. initPriceConfig() {
  676. let priceConfig = this.$store.state.price_config
  677. console.log('价格配置:', priceConfig)
  678. // 将价格配置赋值给组件
  679. this.price_config = priceConfig || {}
  680. // 获取伴宠师等级价格和城市倍率,确保都是有效数字
  681. let companionPrice = isNaN(this.$globalData.newOrderData.companionLevelPrice) ? 0 : Number(this.$globalData.newOrderData.companionLevelPrice)
  682. let cityPriceRate = isNaN(this.$globalData.newOrderData.cityPriceRate) ? 1 : Number(this.$globalData.newOrderData.cityPriceRate)
  683. let memberRate = isNaN(this.$store.state.memberRate) ? 1 : Number(this.$store.state.memberRate)
  684. if(priceConfig.basePrice && priceConfig.basePrice.holiday){
  685. const holidayBasePrice = isNaN(priceConfig.basePrice.holiday) ? 75 : Number(priceConfig.basePrice.holiday)
  686. this.holidayPrice = Number((holidayBasePrice * memberRate * cityPriceRate) + companionPrice).toFixed(2)
  687. } else {
  688. this.holidayPrice = 75
  689. }
  690. if(priceConfig.basePrice && priceConfig.basePrice.normal){
  691. const normalBasePrice = isNaN(priceConfig.basePrice.normal) ? 75 : Number(priceConfig.basePrice.normal)
  692. this.normalPrice = Number((normalBasePrice * memberRate * cityPriceRate) + companionPrice).toFixed(2)
  693. } else {
  694. this.normalPrice = 75
  695. }
  696. if(priceConfig.holidays && Array.isArray(priceConfig.holidays) && priceConfig.holidays.length > 0){
  697. this.holidayDate = priceConfig.holidays
  698. }else{
  699. this.holidayDate = []
  700. }
  701. this.discountMemberText = (memberRate * 10)
  702. },
  703. // 判断是否为节假日
  704. isHoliday(date) {
  705. return this.holidayDate.includes(date)
  706. },
  707. // 节流
  708. throttle(func, delay) {
  709. let lastCall = 0;
  710. return function(...args) {
  711. const now = new Date().getTime();
  712. if (now - lastCall < delay) {
  713. return;
  714. }
  715. lastCall = now;
  716. func(...args);
  717. }
  718. },
  719. getPersonalInfo() {
  720. getPersonalInfo().then(res => {
  721. if (res && (res.id || res.id === 0)) {
  722. let userLevel = res.level
  723. this.currentMember = this.memberDiscountList.find(item => {
  724. if (item.itemType.includes(userLevel)) {
  725. return item
  726. }
  727. })
  728. this.getShowTotalPrice()
  729. // 重新计算最优惠的优惠券
  730. if (this.couponList.length > 0) {
  731. this.autoSelectBestCoupon()
  732. }
  733. }
  734. })
  735. },
  736. // 获取优惠券列表
  737. getCouponList() {
  738. getCouponListForOrder().then(res => {
  739. let rows = res.rows
  740. console.log(rows)
  741. this.couponList = rows.filter(item => item.couponState == "SENDED")
  742. this.couponList.forEach(item => {
  743. item.checked = []
  744. item.couponAmount = 20
  745. item.isAutoSelected = false
  746. })
  747. // 自动选择最优惠的优惠券
  748. this.autoSelectBestCoupon()
  749. })
  750. },
  751. selectCoupon() {
  752. this.showCoupon = true
  753. },
  754. changeCoupon(item) {
  755. this.showCouponList = false
  756. const selectedCouponId = item[0]
  757. const selectedCoupon = this.couponList.find(coupon => coupon.id === selectedCouponId)
  758. // 清空所有优惠券的选中状态和自动选择标记
  759. this.couponList.forEach(coupon => {
  760. coupon.checked = null
  761. coupon.isAutoSelected = false
  762. })
  763. // 如果选择了优惠券,检查是否有相同 couponState 的优惠券已被使用
  764. if (selectedCoupon) {
  765. // 检查是否有相同 couponState 的优惠券已被使用
  766. const hasSameStateUsed = this.couponList.some(coupon =>
  767. coupon.id !== selectedCouponId &&
  768. coupon.couponState === selectedCoupon.couponState &&
  769. coupon.checked &&
  770. coupon.checked.length > 0
  771. )
  772. if (hasSameStateUsed) {
  773. uni.showToast({
  774. title: '相同类型的优惠券不可重复使用',
  775. icon: 'none'
  776. })
  777. this.showCouponList = true
  778. return
  779. }
  780. // 设置选中状态,标记为用户手动选择
  781. selectedCoupon.checked = item
  782. selectedCoupon.isAutoSelected = false
  783. }
  784. this.showCouponList = true
  785. },
  786. confirmCoupon() {
  787. this.selectedCoupon = this.couponList.find(coupon => coupon.checked && coupon.checked.length > 0)
  788. if (!this.selectedCoupon) {
  789. this.couponId = null
  790. this.discount = 0
  791. } else {
  792. this.couponId = this.selectedCoupon?.id
  793. // 如果优惠券是折扣
  794. if (this.selectedCoupon?.stockType == "PDISCOUNT" && this.selectedCoupon?.discountPercent > 0) {
  795. //保留两位小数
  796. this.discount = (this.originalTotalPrice * (1 - this.selectedCoupon.discountPercent / 100))
  797. .toFixed(2)
  798. } else {
  799. this.discount = this.selectedCoupon?.discountAmount
  800. }
  801. }
  802. this.getShowTotalPrice()
  803. this.showCoupon = false
  804. },
  805. togglePriceDetails() {
  806. this.showCoupon = !this.showCoupon
  807. },
  808. // 构造订单
  809. constructOrder() {
  810. const order = {
  811. openId: getOpenIdKey(),
  812. addressId: this.currentAddress.id,
  813. totalPrice: this.finalPrice,//应付费用
  814. needPreFamiliarize: this.needPreFamiliarize.length > 0,
  815. couponId: this.couponId,
  816. petOrderServices: this.getPetOrderServices(this.currentPetsByDay),
  817. //费用明细
  818. //dailyShowData : JSON.stringify(this.dailyShowData),
  819. //优惠券优惠
  820. couponDiscount: this.discount,
  821. //会员折扣
  822. memberDiscount: this.memberDiscount,
  823. //费用总计
  824. oldPrice : this.originalTotalPrice,
  825. //提前熟悉的费用
  826. preFamiliarizePrice: (this.price_config.preFamiliarize && this.price_config.preFamiliarize.price) || 40,
  827. //伴宠师等级名称
  828. companionLevelTitle : this.companionLevelTitle,
  829. //伴宠师等级加价(已合并到基础价格中)
  830. companionLevelPrice: 0,
  831. }
  832. if(this.buyInfo.teacher){
  833. order.teacherId = this.buyInfo.teacher.userId
  834. }
  835. if(this.$globalData.newOrderData.companionLevel){
  836. //打印
  837. console.log(this.$globalData.newOrderData.companionLevel);
  838. order.companionLevel = this.$globalData.newOrderData.companionLevel.paramValueNum
  839. // order.companionLevel = ['', 'junior', 'senior'].indexOf(this.$globalData.newOrderData.companionLevel)
  840. }
  841. if(this.$globalData.newOrderData.orderId){
  842. order.orderId = this.$globalData.newOrderData.orderId
  843. }
  844. // 再来一单费用
  845. if(this.$globalData.newOrderData.moreOrderPrice){
  846. order.moreOrderPrice = this.$globalData.newOrderData.moreOrderPrice
  847. }
  848. console.log(order)
  849. return order
  850. },
  851. getSkuList(customServices, feedCount, price) {
  852. console.log('customServices', JSON.parse(JSON.stringify(customServices)));
  853. const skuList = customServices.filter(service => service.quantity > 0).map(service2 => {
  854. return {
  855. skuId: service2.skuId,
  856. quantity: service2.quantity,
  857. isMainProduct: service2.isMainProduct,
  858. price: service2.price
  859. }
  860. })
  861. skuList.push({
  862. skuId: this.$globalData.mainSku[0].skuId,
  863. quantity: feedCount,
  864. isMainProduct: true,
  865. price
  866. })
  867. return skuList
  868. },
  869. getPetOrderServices(currentPetsByDay) {
  870. console.log('currentPetsByDay', JSON.parse(JSON.stringify(currentPetsByDay)));
  871. const petOrderServices = currentPetsByDay.map(pet => {
  872. let price = this.isHoliday(pet.serviceDate) ? this.holidayPrice : this.normalPrice
  873. // 当日多次服务次数 - 基础价格乘以倍数
  874. let feedCountPrice = 0;
  875. const multiService = this.price_config.multiService || { two: { price: 1 }, three: { price: 1 } }
  876. if (pet.feedCount == 2) {
  877. feedCountPrice += price * (multiService.two.price || 1); // 基础价格 × 2次倍数
  878. } else if (pet.feedCount == 3) {
  879. feedCountPrice += price * (multiService.three.price || 1); // 基础价格 × 3次倍数
  880. }
  881. return {
  882. petId: pet.petId,
  883. serviceDate: pet.serviceDate,
  884. feedCount: pet.feedCount,
  885. selectedTimeSlots: pet.selectedTimeSlots.join(','),
  886. skuList: this.getSkuList(pet.customServices, pet.feedCount, price),
  887. feedCountPrice,//当日多次服务加价
  888. }
  889. })
  890. return petOrderServices
  891. },
  892. pay(params) {
  893. if (this.isPaying) {
  894. return;
  895. }
  896. this.isPaying = true
  897. uni.requestPayment({
  898. provider: 'wxpay',
  899. timeStamp: params.timeStamp,
  900. nonceStr: params.nonceStr,
  901. package: params.package_,
  902. signType: params.signType,
  903. paySign: params.paySign,
  904. success: (res) => {
  905. this.$modal.showToast('支付成功')
  906. this.$globalData.newOrderData = {
  907. currentAddress: {},
  908. currentPets: [],
  909. totalPrice: 0,
  910. needPreFamiliarize: []
  911. }
  912. uni.reLaunch({
  913. // url: '/pages_order/order/orderList'
  914. url: '/pages_order/order/payOrderSuccessful'
  915. });
  916. },
  917. fail: (err) => {
  918. this.loading = false
  919. console.log('支付失败', err)
  920. this.$modal.showToast('支付失败')
  921. uni.reLaunch({
  922. url: '/pages_order/order/orderList'
  923. });
  924. },
  925. complete: () => {
  926. this.loading = false
  927. this.isPaying = false
  928. }
  929. })
  930. },
  931. changePreFamiliarize(name) {
  932. const preFamiliarizePrice = (this.price_config.preFamiliarize && this.price_config.preFamiliarize.price) || 40
  933. if (name && name.length > 0) {
  934. this.needPreFamiliarize = name
  935. this.originalTotalPrice = this.originalTotalPrice + preFamiliarizePrice
  936. } else {
  937. this.needPreFamiliarize = []
  938. this.originalTotalPrice = this.originalTotalPrice - preFamiliarizePrice
  939. }
  940. // 重新计算最优惠的优惠券
  941. this.autoSelectBestCoupon()
  942. this.getShowTotalPrice()
  943. },
  944. getShowTotalPrice() {
  945. // 会员折扣已经在上一个页面减去了,这里需要根据originalTotalPrice反推会员减去了多少
  946. // originalTotalPrice: 已经应用会员折扣后的价格
  947. // memberRate: 会员折扣率(如0.9表示9折)
  948. // 反推原价:originalTotalPrice / memberRate
  949. // 会员折扣金额:原价 - originalTotalPrice
  950. const originalPriceBeforeMemberDiscount = this.originalTotalPrice / this.$store.state.memberRate
  951. this.memberDiscount = (originalPriceBeforeMemberDiscount - this.originalTotalPrice).toFixed(2)
  952. // 获取再来一单费用
  953. const moreOrderPrice = this.$globalData.newOrderData.moreOrderPrice || 0
  954. // 计算最终支付价格
  955. // finalPrice: 最终支付价格 = 已应用会员折扣的价格 + 再来一单费用 - 优惠券优惠
  956. this.finalPrice = (this.originalTotalPrice + moreOrderPrice - this.discount).toFixed(2)
  957. },
  958. getCouponAmountOrDiscount(item) {
  959. if (item.stockType == "PDISCOUNT") {
  960. return item.discountPercent / 10 + '折'
  961. } else {
  962. return '¥' + item.discountAmount
  963. }
  964. },
  965. // 自动选择最优惠的优惠券
  966. autoSelectBestCoupon() {
  967. // 清空所有优惠券的选中状态和自动选择标记
  968. this.couponList.forEach(coupon => {
  969. coupon.checked = null
  970. coupon.isAutoSelected = false
  971. })
  972. // 过滤出可用的优惠券(满足最低消费要求)
  973. const availableCoupons = this.couponList.filter(coupon =>
  974. this.originalTotalPrice >= coupon.transactionMinimum
  975. )
  976. if (availableCoupons.length === 0) {
  977. this.selectedCoupon = null
  978. this.couponId = null
  979. this.discount = 0
  980. return
  981. }
  982. // 计算每个优惠券的实际优惠金额
  983. const couponsWithDiscount = availableCoupons.map(coupon => {
  984. let discountAmount = 0
  985. if (coupon.stockType === "PDISCOUNT" && coupon.discountPercent > 0) {
  986. // 折扣券:计算折扣后的优惠金额
  987. discountAmount = this.originalTotalPrice * (coupon.discountPercent / 100)
  988. } else {
  989. // 满减券:直接使用优惠金额
  990. discountAmount = coupon.discountAmount
  991. }
  992. return {
  993. ...coupon,
  994. calculatedDiscount: discountAmount
  995. }
  996. })
  997. // 按优惠金额从高到低排序,选择最优惠的
  998. couponsWithDiscount.sort((a, b) => b.calculatedDiscount - a.calculatedDiscount)
  999. // 选择最优惠的优惠券
  1000. const bestCoupon = couponsWithDiscount[0]
  1001. // 在原始的 couponList 中找到对应的优惠券并设置选中状态
  1002. const originalCoupon = this.couponList.find(coupon => coupon.id === bestCoupon.id)
  1003. if (originalCoupon) {
  1004. originalCoupon.checked = [originalCoupon.id]
  1005. originalCoupon.isAutoSelected = true // 标记为自动选择
  1006. this.selectedCoupon = originalCoupon
  1007. this.couponId = originalCoupon.id
  1008. // 计算优惠金额
  1009. if (originalCoupon.stockType === "PDISCOUNT" && originalCoupon.discountPercent > 0) {
  1010. this.discount = (this.originalTotalPrice * (1 - originalCoupon.discountPercent / 100)).toFixed(2)
  1011. } else {
  1012. this.discount = originalCoupon.discountAmount
  1013. }
  1014. console.log('自动选择最优惠优惠券:', originalCoupon.stockName, '优惠金额:', this.discount)
  1015. }
  1016. // 重新计算总价
  1017. this.getShowTotalPrice()
  1018. },
  1019. goNext() {
  1020. if (!this.isAgree) {
  1021. uni.showToast({
  1022. title: '请先同意用户协议',
  1023. icon: 'none'
  1024. })
  1025. return
  1026. }
  1027. const order = this.constructOrder()
  1028. createOrderNew(order).then(res => {
  1029. if (res.code == 200) {
  1030. this.pay(res.data)
  1031. } else {
  1032. this.$modal.showToast('创建订单失败,请重试');
  1033. this.loading = false
  1034. }
  1035. })
  1036. }
  1037. }
  1038. }
  1039. </script>
  1040. <style scoped lang="scss">
  1041. .container {
  1042. position: relative;
  1043. height: 100%;
  1044. padding-bottom: 200rpx;
  1045. .details-subscribe {
  1046. background-color: #FFFFFF;
  1047. padding: 10px;
  1048. width: 100%;
  1049. height: 200rpx;
  1050. position: fixed;
  1051. bottom: 0;
  1052. z-index: 100;
  1053. .details-btn {
  1054. width: 100%;
  1055. border-radius: 6px;
  1056. background: #FFB13F;
  1057. font-size: 16px;
  1058. color: #FFFFFF;
  1059. }
  1060. .details-radio {
  1061. display: flex;
  1062. align-items: center;
  1063. justify-content: center;
  1064. }
  1065. }
  1066. }
  1067. .service-new {
  1068. .service-new-flag {
  1069. width: 8rpx;
  1070. height: 32rpx;
  1071. background: #FFBF60;
  1072. border-radius: 30rpx 30rpx 30rpx 30rpx;
  1073. margin-right: 10rpx;
  1074. }
  1075. .split-line {
  1076. width: 100%;
  1077. height: 1rpx;
  1078. background: #EFEFEF;
  1079. }
  1080. .service-new-title {
  1081. display: flex;
  1082. font-weight: 500;
  1083. font-size: 28rpx;
  1084. color: #333333;
  1085. line-height: 33rpx;
  1086. margin: 42rpx 0 30rpx;
  1087. justify-content: space-between;
  1088. .service-new-title-left {
  1089. display: flex;
  1090. align-items: center;
  1091. }
  1092. }
  1093. .service-new-details-desc {
  1094. font-weight: 400;
  1095. font-size: 24rpx;
  1096. color: #A94F20;
  1097. line-height: 28rpx;
  1098. text-align: left;
  1099. padding: 26rpx 0;
  1100. }
  1101. .personal-address-info {
  1102. display: flex;
  1103. align-items: center;
  1104. justify-content: flex-start;
  1105. flex-wrap: wrap;
  1106. margin: 32rpx 0;
  1107. width: 80%;
  1108. .personal-address-text {
  1109. color: #333;
  1110. font-size: 28rpx;
  1111. font-weight: bold;
  1112. width: 100%;
  1113. }
  1114. .personal-address-people {
  1115. color: #7D8196;
  1116. font-size: 28rpx;
  1117. font-weight: 400;
  1118. display: flex;
  1119. justify-content: flex-start;
  1120. align-items: center;
  1121. }
  1122. }
  1123. .service-new-address-selected {
  1124. display: flex;
  1125. justify-content: space-between;
  1126. align-items: center;
  1127. }
  1128. }
  1129. .personal-pet-list {
  1130. margin-top: 20rpx;
  1131. .personal-pet-list-item {
  1132. margin-bottom: 20rpx;
  1133. background-color: #F9F9F9;
  1134. height: 172rpx;
  1135. border-radius: 8rpx;
  1136. .personal-pet-info {
  1137. height: 100%;
  1138. display: flex;
  1139. align-items: center;
  1140. padding: 0 20rpx;
  1141. }
  1142. }
  1143. }
  1144. .service-new-address {
  1145. .service-summary {
  1146. height: 90rpx;
  1147. display: flex;
  1148. justify-content: space-between;
  1149. align-items: center;
  1150. padding: 15rpx;
  1151. cursor: pointer;
  1152. transition: background-color 0.3s;
  1153. }
  1154. .service-details {
  1155. padding: 10rpx 15rpx;
  1156. background-color: #F9F9F9;
  1157. margin-bottom: 10rpx;
  1158. .pet-info {
  1159. display: flex;
  1160. justify-content: space-between;
  1161. margin: 5rpx 0;
  1162. font-size: 24rpx;
  1163. color: #333;
  1164. }
  1165. .service-item {
  1166. display: flex;
  1167. justify-content: space-between;
  1168. width: 100%;
  1169. color: #999999;
  1170. font-size: 28rpx;
  1171. }
  1172. }
  1173. .total-cost {
  1174. padding: 10rpx 15rpx;
  1175. font-size: 28rpx;
  1176. color: #333;
  1177. display: flex;
  1178. justify-content: space-between;
  1179. }
  1180. }
  1181. .calendar-popup {
  1182. position: fixed;
  1183. bottom: 0;
  1184. left: 0;
  1185. right: 0;
  1186. z-index: 999;
  1187. .calendar-content {
  1188. background: #F5F5F7;
  1189. border-radius: 16rpx 16rpx 0 0;
  1190. padding: 0 20rpx 40rpx;
  1191. }
  1192. }
  1193. .calendar-mask {
  1194. position: fixed;
  1195. top: 0;
  1196. left: 0;
  1197. right: 0;
  1198. bottom: 0;
  1199. background: rgba(0, 0, 0, 0.5);
  1200. /* 半透明黑色 */
  1201. z-index: 998;
  1202. /* 确保在内容下方 */
  1203. pointer-events: none;
  1204. /* 使遮罩层不阻止点击事件 */
  1205. }
  1206. .calendar-content {
  1207. position: relative;
  1208. /* 确保内容在遮罩层之上 */
  1209. z-index: 999;
  1210. /* 确保内容在遮罩层之上 */
  1211. }
  1212. .price-details {
  1213. background: #F5F5F7;
  1214. /* 背景颜色 */
  1215. padding: 10px 10px 0 10px;
  1216. /* 内边距 */
  1217. z-index: 1000;
  1218. /* 确保在其他元素之上 */
  1219. min-height: 600rpx;
  1220. /* 固定高度 */
  1221. overflow: hidden;
  1222. /* 隐藏超出部分 */
  1223. }
  1224. .price-details-header {
  1225. display: flex;
  1226. justify-content: space-between;
  1227. align-items: center;
  1228. padding-bottom: 20rpx;
  1229. }
  1230. .price-details-body {
  1231. margin-top: 20rpx;
  1232. max-height: 450rpx;
  1233. /* 留出头部空间 */
  1234. overflow-y: auto;
  1235. /* 允许上下滚动 */
  1236. }
  1237. .coupon-card {
  1238. display: flex;
  1239. align-items: center;
  1240. width: 100%;
  1241. padding: 10px 0;
  1242. background: #fff;
  1243. border-radius: 8px;
  1244. -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%);
  1245. -webkit-mask-size: 100%, 2px 4px;
  1246. -webkit-mask-repeat: repeat, repeat-y;
  1247. -webkit-mask-position: 0 -4px, 87px;
  1248. -webkit-mask-composite: source-out;
  1249. mask-composite: subtract;
  1250. // background: linear-gradient(45deg, orange, red);
  1251. // &.auto-selected {
  1252. // border: 2px solid #FF530A;
  1253. // background: linear-gradient(135deg, #fff 0%, #FFF4E4 100%);
  1254. // }
  1255. // &.manual-selected {
  1256. // border: 2px solid #4CAF50;
  1257. // background: linear-gradient(135deg, #fff 0%, #E8F5E8 100%);
  1258. // }
  1259. }
  1260. .card-left {
  1261. width: 88px;
  1262. text-align: center;
  1263. font-size: 28rpx;
  1264. color: #FF530A;
  1265. }
  1266. .card-right {
  1267. padding: 0px 12px;
  1268. display: flex;
  1269. flex: 1;
  1270. /* flex-direction: column; */
  1271. justify-content: space-between;
  1272. align-items: center;
  1273. height: 60px;
  1274. s .card-content {
  1275. width: 80%;
  1276. }
  1277. .card-icon {
  1278. position: relative;
  1279. right: -10px;
  1280. top: -10px;
  1281. }
  1282. }
  1283. .card-info {
  1284. margin: 0;
  1285. font-size: 14px;
  1286. line-height: 20px;
  1287. color: #333333;
  1288. }
  1289. .card-time {
  1290. font-size: 12px;
  1291. line-height: 16px;
  1292. font-weight: normal;
  1293. color: #aaaaaa;
  1294. margin-top: 4px;
  1295. }
  1296. </style>