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.

1363 lines
45 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 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
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.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.preFamiliarize.price }}/</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.paramValue
  384. },
  385. methods: {
  386. companionLevelPrice(){
  387. let companionLevel = this.$globalData.newOrderData.companionLevel
  388. let price = Number(companionLevel.paramValueText) * this.isAddPrice()
  389. return price * this.$store.state.memberRate
  390. },
  391. //判断当前选中的地址是否加价
  392. isAddPrice(){
  393. let currentAddress = this.$globalData.newOrderData.currentAddress || {}
  394. let defaultPrice = 1
  395. try{
  396. defaultPrice = this.price_config.cityConfig.priceRates.default
  397. }catch(e){
  398. defaultPrice = 1
  399. }
  400. if(!this.price_config.cityConfig || !currentAddress.province || !currentAddress.city){
  401. return defaultPrice
  402. }
  403. let addressList = this.price_config.cityConfig.priceRates || []
  404. for(let key in addressList){
  405. if((currentAddress.province + currentAddress.city).includes(key)){
  406. return addressList[key]
  407. }
  408. }
  409. return defaultPrice
  410. },
  411. getDateText(date){
  412. return dayjs(date).format('MM-DD')
  413. },
  414. // 将currentPets转换为showPets
  415. getShowPets() {
  416. const showPets = []
  417. // 将 currentPetsByDay 通过petId分组
  418. const groupedPets = this.currentPetsByDay.reduce((acc, pet) => {
  419. pet.index = pet.petId + '-' + pet.serviceDate
  420. if (!acc[pet.petId]) {
  421. acc[pet.petId] = []; // 如果不存在,则初始化一个空数组
  422. }
  423. acc[pet.petId].push(pet); // 将当前宠物添加到对应的 petId 数组中
  424. return acc;
  425. }, {});
  426. console.log(groupedPets)
  427. // 循环将pets转换为showPets
  428. for (let petId in groupedPets) {
  429. const showPet = {
  430. petId: petId,
  431. name: groupedPets[petId][0].name,
  432. gender: groupedPets[petId][0].gender,
  433. petType: groupedPets[petId][0].petType,
  434. bodyType: groupedPets[petId][0].bodyType,
  435. photo: groupedPets[petId][0].photo,
  436. pets: groupedPets[petId]
  437. }
  438. showPets.push(showPet)
  439. }
  440. this.showPets = showPets
  441. console.log(this.showPets)
  442. },
  443. // 将宠物按天分组
  444. groupPetsByDate() {
  445. const dailyShowData = []
  446. const dailyPets = [];
  447. // 按日期分组宠物
  448. this.currentPetsByDay.forEach(pet => {
  449. const serviceDate = pet.serviceDate;
  450. if (!dailyPets[serviceDate]) {
  451. dailyPets[serviceDate] = [];
  452. }
  453. dailyPets[serviceDate].push(pet);
  454. });
  455. // 计算每日费用
  456. for (const date in dailyPets) {
  457. const pets = dailyPets[date];
  458. const priceDetails = []
  459. // 基础服务 - 根据是否为节假日设置价格
  460. const baseServiceCost = Number(this.isHoliday(date) ? this.holidayPrice : this.normalPrice)
  461. const largeDogCount = pets.filter(pet => pet.petType === 'dog' && pet.bodyType.includes('大型')).length;
  462. let mediumDogCount = pets.filter(pet => pet.petType === 'dog' && pet.bodyType.includes('中型')).length;
  463. let smallDogCount = pets.filter(pet => pet.petType === 'dog' && pet.bodyType.includes('小型')).length;
  464. let catCount = pets.filter(pet => pet.petType === 'cat').length;
  465. const additionalCostItem = []
  466. let additionalCost = 0
  467. // 单天总宠物费用
  468. let totalPetCost = pets.reduce((acc, pet) => {
  469. return acc + this.calculatePetCost(pet);
  470. }, 0);
  471. // 根据 freePetConfig 配置计算免费宠物数量
  472. const freePetConfig = this.price_config.freePetConfig || this.freePetConfig
  473. // 计算收费的宠物数量(扣除免费数量)
  474. const chargeableMediumDogCount = Math.max(0, mediumDogCount - freePetConfig.mediumDog.freeCount)
  475. const chargeableSmallDogCount = Math.max(0, smallDogCount - freePetConfig.smallDog.freeCount)
  476. const chargeableCatCount = Math.max(0, catCount - freePetConfig.cat.freeCount)
  477. // 计算额外宠物费用
  478. if (chargeableMediumDogCount > 0) {
  479. additionalCost += (this.calculatePetCost({
  480. petType: 'dog',
  481. bodyType: '中型',
  482. }) * chargeableMediumDogCount)
  483. additionalCostItem.push({
  484. itemName: '中型犬',
  485. price: this.calculatePetCost({
  486. petType: 'dog',
  487. bodyType: '中型',
  488. }),
  489. quantity: chargeableMediumDogCount,
  490. unit: '只'
  491. })
  492. }
  493. if (chargeableSmallDogCount > 0) {
  494. additionalCost += (this.calculatePetCost({
  495. petType: 'dog',
  496. bodyType: '小型',
  497. }) * chargeableSmallDogCount)
  498. additionalCostItem.push({
  499. itemName: '小型犬',
  500. price: this.calculatePetCost({
  501. petType: 'dog',
  502. bodyType: '小型',
  503. }),
  504. quantity: chargeableSmallDogCount,
  505. unit: '只'
  506. })
  507. }
  508. if (chargeableCatCount > 0) {
  509. additionalCost += (this.calculatePetCost({
  510. petType: 'cat',
  511. }) * chargeableCatCount)
  512. additionalCostItem.push({
  513. itemName: '猫猫',
  514. price: this.calculatePetCost({
  515. petType: 'cat',
  516. }),
  517. quantity: chargeableCatCount,
  518. unit: '只'
  519. })
  520. }
  521. // 计算收费的大型犬数量(扣除免费数量)
  522. const chargeableLargeDogCount = Math.max(0, largeDogCount - freePetConfig.largeDog.freeCount)
  523. if (chargeableLargeDogCount > 0) {
  524. additionalCost += (this.calculatePetCost({
  525. petType: 'dog',
  526. bodyType: '大型',
  527. }) * chargeableLargeDogCount)
  528. additionalCostItem.push({
  529. itemName: '大型犬',
  530. price: this.calculatePetCost({
  531. petType: 'dog',
  532. bodyType: '大型',
  533. }),
  534. quantity: chargeableLargeDogCount,
  535. unit: '只'
  536. })
  537. }
  538. // 当日多次服务次数 - 基础价格乘以倍数
  539. let multServicesTotalCost = 0
  540. const maxFeedCount = Math.max(...pets.map(pet => pet.feedCount));
  541. const multiService = this.price_config.multiService || { two: { price: 1 }, three: { price: 1 } }
  542. if (maxFeedCount === 2) {
  543. multServicesTotalCost += baseServiceCost * (multiService.two.price || 1); // 基础价格 × 2次倍数
  544. } else if (maxFeedCount === 3) {
  545. multServicesTotalCost += baseServiceCost * (multiService.three.price || 1); // 基础价格 × 3次倍数
  546. }
  547. priceDetails.push({
  548. name: '专业喂养',
  549. item: [{
  550. itemName: this.isHoliday(date) ? '节假日' : '非节假日',
  551. price: baseServiceCost,
  552. quantity: 1,
  553. unit: '天'
  554. }, ]
  555. })
  556. priceDetails.push({
  557. name: '上门次数',
  558. item: [{
  559. itemName: `1天2次 (${this.isHoliday(date) ? '节假日' : '非节假日'})`,
  560. price: baseServiceCost * (multiService.two.price || 1),
  561. quantity: maxFeedCount === 2 ? 1 : 0,
  562. unit: '天'
  563. },
  564. {
  565. itemName: `1天3次 (${this.isHoliday(date) ? '节假日' : '非节假日'})`,
  566. price: baseServiceCost * (multiService.three.price || 1),
  567. quantity: maxFeedCount === 3 ? 1 : 0,
  568. unit: '天'
  569. },
  570. ]
  571. })
  572. if (additionalCostItem.length > 0) {
  573. priceDetails.push({
  574. name: '额外宠物费用',
  575. item: additionalCostItem
  576. })
  577. }
  578. // 所有宠物定制服务费用
  579. const customServiceCost = pets.reduce((acc, pet) => acc + this.calculatePetCustomServiceCost(pet), 0)
  580. console.log(baseServiceCost + additionalCost + multServicesTotalCost + customServiceCost);
  581. console.log(baseServiceCost , additionalCost , multServicesTotalCost , customServiceCost);
  582. const totalCost = parseFloat((baseServiceCost + additionalCost + multServicesTotalCost + Number(customServiceCost))).toFixed(2)
  583. // 所有宠物定制服务总项数,每个类型的服务只算一次
  584. const acc = []
  585. pets.map(pet => {
  586. pet.customServices.forEach(service => {
  587. if (!acc.includes(service.skuId) && service.quantity > 0) {
  588. acc.push(service.skuId)
  589. }
  590. })
  591. })
  592. const customServicesTotalCnt = acc.length
  593. dailyShowData.push({
  594. date,
  595. pets,
  596. priceDetails,
  597. totalCost,
  598. customServicesTotalCnt
  599. })
  600. }
  601. // 将dailyShowData按日期排序
  602. this.dailyShowData = dailyShowData.sort((a, b) => new Date(a.date) - new Date(b.date))
  603. this.getShowTotalPrice()
  604. },
  605. calculatePetCost(pet) {
  606. // 宠物额外费用 不计算大型犬
  607. let petExtra = this.price_config.petExtra || {}
  608. let petCost = 0;
  609. if (pet.petType === 'cat' && petExtra.cat) {
  610. petCost += Number(petExtra.cat.price || 0); // 猫额外费用
  611. } else if (pet.petType === 'dog' && pet.bodyType.includes('小型') && petExtra.smallDog) {
  612. petCost += Number(petExtra.smallDog.price || 0); // 小型犬额外费用
  613. } else if (pet.petType === 'dog' && pet.bodyType.includes('中型') && petExtra.mediumDog) {
  614. petCost += Number(petExtra.mediumDog.price || 0); // 中型犬额外费用
  615. } else if (pet.petType === 'dog' && pet.bodyType.includes('大型') && petExtra.largeDog) {
  616. petCost += Number(petExtra.largeDog.price || 0); // 大型犬额外费用
  617. }
  618. return petCost;
  619. },
  620. // 计算宠物定制服务费用
  621. calculatePetCustomServiceCost(pet) {
  622. console.log('pet.customServices',pet.customServices)
  623. const customServiceCost = pet.customServices.reduce((acc, item) => acc + Number(item.price) * item.quantity, 0)
  624. console.log('customServiceCost',customServiceCost)
  625. return parseFloat(customServiceCost).toFixed(2)
  626. },
  627. // 展开或收起服务详情
  628. toggleExpand(index) {
  629. console.log(index)
  630. this.expandedIndexs = this.expandedIndexs.includes(index) ? this.expandedIndexs.filter(i => i !== index) :
  631. [...this.expandedIndexs, index];
  632. // this.expandedIndexs.push(index)
  633. console.log(this.expandedIndexs)
  634. },
  635. goBack() {
  636. let len = getCurrentPages().length;
  637. if (len >= 2) {
  638. uni.navigateBack();
  639. } else {
  640. uni.redirectTo({
  641. url: '/pages/newOrder/serviceNew2'
  642. });
  643. }
  644. },
  645. changeAgree() {
  646. this.isAgree = !this.isAgree
  647. },
  648. checkAgreement() {
  649. uni.navigateTo({
  650. url: '/pages/details/agreement'
  651. });
  652. },
  653. // 初始化价格配置
  654. initPriceConfig() {
  655. let priceConfig = this.$store.state.price_config
  656. console.log('价格配置:', priceConfig)
  657. // 将价格配置赋值给组件
  658. this.price_config = priceConfig || {}
  659. // 获取伴宠师等级价格和城市倍率
  660. let companionPrice = this.$globalData.newOrderData.companionLevelPrice || 0
  661. let cityPriceRate = this.$globalData.newOrderData.cityPriceRate || 1
  662. if(priceConfig.basePrice && priceConfig.basePrice.holiday){
  663. this.holidayPrice = Number((priceConfig.basePrice.holiday * this.$store.state.memberRate * cityPriceRate) + companionPrice).toFixed(2)
  664. }
  665. if(priceConfig.basePrice && priceConfig.basePrice.normal){
  666. this.normalPrice = Number((priceConfig.basePrice.normal * this.$store.state.memberRate * cityPriceRate) + companionPrice).toFixed(2)
  667. }
  668. if(priceConfig.holidays && priceConfig.holidays.length > 0){
  669. this.holidayDate = priceConfig.holidays
  670. }else{
  671. this.holidayDate = []
  672. }
  673. this.discountMemberText = (this.$store.state.memberRate * 10)
  674. },
  675. // 判断是否为节假日
  676. isHoliday(date) {
  677. return this.holidayDate.includes(date)
  678. },
  679. // 节流
  680. throttle(func, delay) {
  681. let lastCall = 0;
  682. return function(...args) {
  683. const now = new Date().getTime();
  684. if (now - lastCall < delay) {
  685. return;
  686. }
  687. lastCall = now;
  688. func(...args);
  689. }
  690. },
  691. getPersonalInfo() {
  692. getPersonalInfo().then(res => {
  693. if (res && (res.id || res.id === 0)) {
  694. let userLevel = res.level
  695. this.currentMember = this.memberDiscountList.find(item => {
  696. if (item.itemType.includes(userLevel)) {
  697. return item
  698. }
  699. })
  700. this.getShowTotalPrice()
  701. // 重新计算最优惠的优惠券
  702. if (this.couponList.length > 0) {
  703. this.autoSelectBestCoupon()
  704. }
  705. }
  706. })
  707. },
  708. // 获取优惠券列表
  709. getCouponList() {
  710. getCouponListForOrder().then(res => {
  711. let rows = res.rows
  712. console.log(rows)
  713. this.couponList = rows.filter(item => item.couponState == "SENDED")
  714. this.couponList.forEach(item => {
  715. item.checked = []
  716. item.couponAmount = 20
  717. item.isAutoSelected = false
  718. })
  719. // 自动选择最优惠的优惠券
  720. this.autoSelectBestCoupon()
  721. })
  722. },
  723. selectCoupon() {
  724. this.showCoupon = true
  725. },
  726. changeCoupon(item) {
  727. this.showCouponList = false
  728. const selectedCouponId = item[0]
  729. const selectedCoupon = this.couponList.find(coupon => coupon.id === selectedCouponId)
  730. // 清空所有优惠券的选中状态和自动选择标记
  731. this.couponList.forEach(coupon => {
  732. coupon.checked = null
  733. coupon.isAutoSelected = false
  734. })
  735. // 如果选择了优惠券,检查是否有相同 couponState 的优惠券已被使用
  736. if (selectedCoupon) {
  737. // 检查是否有相同 couponState 的优惠券已被使用
  738. const hasSameStateUsed = this.couponList.some(coupon =>
  739. coupon.id !== selectedCouponId &&
  740. coupon.couponState === selectedCoupon.couponState &&
  741. coupon.checked &&
  742. coupon.checked.length > 0
  743. )
  744. if (hasSameStateUsed) {
  745. uni.showToast({
  746. title: '相同类型的优惠券不可重复使用',
  747. icon: 'none'
  748. })
  749. this.showCouponList = true
  750. return
  751. }
  752. // 设置选中状态,标记为用户手动选择
  753. selectedCoupon.checked = item
  754. selectedCoupon.isAutoSelected = false
  755. }
  756. this.showCouponList = true
  757. },
  758. confirmCoupon() {
  759. this.selectedCoupon = this.couponList.find(coupon => coupon.checked && coupon.checked.length > 0)
  760. if (!this.selectedCoupon) {
  761. this.couponId = null
  762. this.discount = 0
  763. } else {
  764. this.couponId = this.selectedCoupon?.id
  765. // 如果优惠券是折扣
  766. if (this.selectedCoupon?.stockType == "PDISCOUNT" && this.selectedCoupon?.discountPercent > 0) {
  767. //保留两位小数
  768. this.discount = (this.originalTotalPrice * (1 - this.selectedCoupon.discountPercent / 100))
  769. .toFixed(2)
  770. } else {
  771. this.discount = this.selectedCoupon?.discountAmount
  772. }
  773. }
  774. this.getShowTotalPrice()
  775. this.showCoupon = false
  776. },
  777. togglePriceDetails() {
  778. this.showCoupon = !this.showCoupon
  779. },
  780. // 构造订单
  781. constructOrder() {
  782. const order = {
  783. openId: getOpenIdKey(),
  784. addressId: this.currentAddress.id,
  785. totalPrice: this.finalPrice,//应付费用
  786. needPreFamiliarize: this.needPreFamiliarize.length > 0,
  787. couponId: this.couponId,
  788. petOrderServices: this.getPetOrderServices(this.currentPetsByDay),
  789. //费用明细
  790. //dailyShowData : JSON.stringify(this.dailyShowData),
  791. //优惠券优惠
  792. couponDiscount: this.discount,
  793. //会员折扣
  794. memberDiscount: this.memberDiscount,
  795. //费用总计
  796. oldPrice : this.originalTotalPrice,
  797. //提前熟悉的费用
  798. preFamiliarizePrice: (this.price_config.preFamiliarize && this.price_config.preFamiliarize.price) || 40,
  799. //伴宠师等级名称
  800. companionLevelTitle : this.companionLevelTitle,
  801. //伴宠师等级加价(已合并到基础价格中)
  802. companionLevelPrice: 0,
  803. }
  804. if(this.buyInfo.teacher){
  805. order.teacherId = this.buyInfo.teacher.userId
  806. }
  807. if(this.$globalData.newOrderData.companionLevel){
  808. //打印
  809. console.log(this.$globalData.newOrderData.companionLevel);
  810. order.companionLevel = this.$globalData.newOrderData.companionLevel.paramValueNum
  811. // order.companionLevel = ['', 'junior', 'senior'].indexOf(this.$globalData.newOrderData.companionLevel)
  812. }
  813. if(this.$globalData.newOrderData.orderId){
  814. order.orderId = this.$globalData.newOrderData.orderId
  815. }
  816. // 再来一单费用
  817. if(this.$globalData.newOrderData.moreOrderPrice){
  818. order.moreOrderPrice = this.$globalData.newOrderData.moreOrderPrice
  819. }
  820. console.log(order)
  821. return order
  822. },
  823. getSkuList(customServices, feedCount, price) {
  824. console.log('customServices', JSON.parse(JSON.stringify(customServices)));
  825. const skuList = customServices.filter(service => service.quantity > 0).map(service2 => {
  826. return {
  827. skuId: service2.skuId,
  828. quantity: service2.quantity,
  829. isMainProduct: service2.isMainProduct,
  830. price: service2.price
  831. }
  832. })
  833. skuList.push({
  834. skuId: this.$globalData.mainSku[0].skuId,
  835. quantity: feedCount,
  836. isMainProduct: true,
  837. price
  838. })
  839. return skuList
  840. },
  841. getPetOrderServices(currentPetsByDay) {
  842. console.log('currentPetsByDay', JSON.parse(JSON.stringify(currentPetsByDay)));
  843. const petOrderServices = currentPetsByDay.map(pet => {
  844. let price = this.isHoliday(pet.serviceDate) ? this.holidayPrice : this.normalPrice
  845. // 当日多次服务次数 - 基础价格乘以倍数
  846. let feedCountPrice = 0;
  847. const multiService = this.price_config.multiService || { two: { price: 1 }, three: { price: 1 } }
  848. if (pet.feedCount == 2) {
  849. feedCountPrice += price * (multiService.two.price || 1); // 基础价格 × 2次倍数
  850. } else if (pet.feedCount == 3) {
  851. feedCountPrice += price * (multiService.three.price || 1); // 基础价格 × 3次倍数
  852. }
  853. return {
  854. petId: pet.petId,
  855. serviceDate: pet.serviceDate,
  856. feedCount: pet.feedCount,
  857. selectedTimeSlots: pet.selectedTimeSlots.join(','),
  858. skuList: this.getSkuList(pet.customServices, pet.feedCount, price),
  859. feedCountPrice,//当日多次服务加价
  860. }
  861. })
  862. return petOrderServices
  863. },
  864. pay(params) {
  865. if (this.isPaying) {
  866. return;
  867. }
  868. this.isPaying = true
  869. uni.requestPayment({
  870. provider: 'wxpay',
  871. timeStamp: params.timeStamp,
  872. nonceStr: params.nonceStr,
  873. package: params.package_,
  874. signType: params.signType,
  875. paySign: params.paySign,
  876. success: (res) => {
  877. this.$modal.showToast('支付成功')
  878. this.$globalData.newOrderData = {
  879. currentAddress: {},
  880. currentPets: [],
  881. totalPrice: 0,
  882. needPreFamiliarize: []
  883. }
  884. uni.reLaunch({
  885. // url: '/pages_order/order/orderList'
  886. url: '/pages_order/order/payOrderSuccessful'
  887. });
  888. },
  889. fail: (err) => {
  890. this.loading = false
  891. console.log('支付失败', err)
  892. this.$modal.showToast('支付失败')
  893. uni.reLaunch({
  894. url: '/pages_order/order/orderList'
  895. });
  896. },
  897. complete: () => {
  898. this.loading = false
  899. this.isPaying = false
  900. }
  901. })
  902. },
  903. changePreFamiliarize(name) {
  904. const preFamiliarizePrice = (this.price_config.preFamiliarize && this.price_config.preFamiliarize.price) || 40
  905. if (name && name.length > 0) {
  906. this.needPreFamiliarize = name
  907. this.originalTotalPrice = this.originalTotalPrice + preFamiliarizePrice
  908. } else {
  909. this.needPreFamiliarize = []
  910. this.originalTotalPrice = this.originalTotalPrice - preFamiliarizePrice
  911. }
  912. // 重新计算最优惠的优惠券
  913. this.autoSelectBestCoupon()
  914. this.getShowTotalPrice()
  915. },
  916. getShowTotalPrice() {
  917. // 会员折扣已经在上一个页面减去了,这里需要根据originalTotalPrice反推会员减去了多少
  918. // originalTotalPrice: 已经应用会员折扣后的价格
  919. // memberRate: 会员折扣率(如0.9表示9折)
  920. // 反推原价:originalTotalPrice / memberRate
  921. // 会员折扣金额:原价 - originalTotalPrice
  922. const originalPriceBeforeMemberDiscount = this.originalTotalPrice / this.$store.state.memberRate
  923. this.memberDiscount = (originalPriceBeforeMemberDiscount - this.originalTotalPrice).toFixed(2)
  924. // 获取再来一单费用
  925. const moreOrderPrice = this.$globalData.newOrderData.moreOrderPrice || 0
  926. // 计算最终支付价格
  927. // finalPrice: 最终支付价格 = 已应用会员折扣的价格 + 再来一单费用 - 优惠券优惠
  928. this.finalPrice = (this.originalTotalPrice + moreOrderPrice - this.discount).toFixed(2)
  929. },
  930. getCouponAmountOrDiscount(item) {
  931. if (item.stockType == "PDISCOUNT") {
  932. return item.discountPercent / 10 + '折'
  933. } else {
  934. return '¥' + item.discountAmount
  935. }
  936. },
  937. // 自动选择最优惠的优惠券
  938. autoSelectBestCoupon() {
  939. // 清空所有优惠券的选中状态和自动选择标记
  940. this.couponList.forEach(coupon => {
  941. coupon.checked = null
  942. coupon.isAutoSelected = false
  943. })
  944. // 过滤出可用的优惠券(满足最低消费要求)
  945. const availableCoupons = this.couponList.filter(coupon =>
  946. this.originalTotalPrice >= coupon.transactionMinimum
  947. )
  948. if (availableCoupons.length === 0) {
  949. this.selectedCoupon = null
  950. this.couponId = null
  951. this.discount = 0
  952. return
  953. }
  954. // 计算每个优惠券的实际优惠金额
  955. const couponsWithDiscount = availableCoupons.map(coupon => {
  956. let discountAmount = 0
  957. if (coupon.stockType === "PDISCOUNT" && coupon.discountPercent > 0) {
  958. // 折扣券:计算折扣后的优惠金额
  959. discountAmount = this.originalTotalPrice * (coupon.discountPercent / 100)
  960. } else {
  961. // 满减券:直接使用优惠金额
  962. discountAmount = coupon.discountAmount
  963. }
  964. return {
  965. ...coupon,
  966. calculatedDiscount: discountAmount
  967. }
  968. })
  969. // 按优惠金额从高到低排序,选择最优惠的
  970. couponsWithDiscount.sort((a, b) => b.calculatedDiscount - a.calculatedDiscount)
  971. // 选择最优惠的优惠券
  972. const bestCoupon = couponsWithDiscount[0]
  973. // 在原始的 couponList 中找到对应的优惠券并设置选中状态
  974. const originalCoupon = this.couponList.find(coupon => coupon.id === bestCoupon.id)
  975. if (originalCoupon) {
  976. originalCoupon.checked = [originalCoupon.id]
  977. originalCoupon.isAutoSelected = true // 标记为自动选择
  978. this.selectedCoupon = originalCoupon
  979. this.couponId = originalCoupon.id
  980. // 计算优惠金额
  981. if (originalCoupon.stockType === "PDISCOUNT" && originalCoupon.discountPercent > 0) {
  982. this.discount = (this.originalTotalPrice * (1 - originalCoupon.discountPercent / 100)).toFixed(2)
  983. } else {
  984. this.discount = originalCoupon.discountAmount
  985. }
  986. console.log('自动选择最优惠优惠券:', originalCoupon.stockName, '优惠金额:', this.discount)
  987. }
  988. // 重新计算总价
  989. this.getShowTotalPrice()
  990. },
  991. goNext() {
  992. if (!this.isAgree) {
  993. uni.showToast({
  994. title: '请先同意用户协议',
  995. icon: 'none'
  996. })
  997. return
  998. }
  999. const order = this.constructOrder()
  1000. createOrderNew(order).then(res => {
  1001. if (res.code == 200) {
  1002. this.pay(res.data)
  1003. } else {
  1004. this.$modal.showToast('创建订单失败,请重试');
  1005. this.loading = false
  1006. }
  1007. })
  1008. }
  1009. }
  1010. }
  1011. </script>
  1012. <style scoped lang="scss">
  1013. .container {
  1014. position: relative;
  1015. height: 100%;
  1016. padding-bottom: 200rpx;
  1017. .details-subscribe {
  1018. background-color: #FFFFFF;
  1019. padding: 10px;
  1020. width: 100%;
  1021. height: 200rpx;
  1022. position: fixed;
  1023. bottom: 0;
  1024. z-index: 100;
  1025. .details-btn {
  1026. width: 100%;
  1027. border-radius: 6px;
  1028. background: #FFB13F;
  1029. font-size: 16px;
  1030. color: #FFFFFF;
  1031. }
  1032. .details-radio {
  1033. display: flex;
  1034. align-items: center;
  1035. justify-content: center;
  1036. }
  1037. }
  1038. }
  1039. .service-new {
  1040. .service-new-flag {
  1041. width: 8rpx;
  1042. height: 32rpx;
  1043. background: #FFBF60;
  1044. border-radius: 30rpx 30rpx 30rpx 30rpx;
  1045. margin-right: 10rpx;
  1046. }
  1047. .split-line {
  1048. width: 100%;
  1049. height: 1rpx;
  1050. background: #EFEFEF;
  1051. }
  1052. .service-new-title {
  1053. display: flex;
  1054. font-weight: 500;
  1055. font-size: 28rpx;
  1056. color: #333333;
  1057. line-height: 33rpx;
  1058. margin: 42rpx 0 30rpx;
  1059. justify-content: space-between;
  1060. .service-new-title-left {
  1061. display: flex;
  1062. align-items: center;
  1063. }
  1064. }
  1065. .service-new-details-desc {
  1066. font-weight: 400;
  1067. font-size: 24rpx;
  1068. color: #A94F20;
  1069. line-height: 28rpx;
  1070. text-align: left;
  1071. padding: 26rpx 0;
  1072. }
  1073. .personal-address-info {
  1074. display: flex;
  1075. align-items: center;
  1076. justify-content: flex-start;
  1077. flex-wrap: wrap;
  1078. margin: 32rpx 0;
  1079. width: 80%;
  1080. .personal-address-text {
  1081. color: #333;
  1082. font-size: 28rpx;
  1083. font-weight: bold;
  1084. width: 100%;
  1085. }
  1086. .personal-address-people {
  1087. color: #7D8196;
  1088. font-size: 28rpx;
  1089. font-weight: 400;
  1090. display: flex;
  1091. justify-content: flex-start;
  1092. align-items: center;
  1093. }
  1094. }
  1095. .service-new-address-selected {
  1096. display: flex;
  1097. justify-content: space-between;
  1098. align-items: center;
  1099. }
  1100. }
  1101. .personal-pet-list {
  1102. margin-top: 20rpx;
  1103. .personal-pet-list-item {
  1104. margin-bottom: 20rpx;
  1105. background-color: #F9F9F9;
  1106. height: 172rpx;
  1107. border-radius: 8rpx;
  1108. .personal-pet-info {
  1109. height: 100%;
  1110. display: flex;
  1111. align-items: center;
  1112. padding: 0 20rpx;
  1113. }
  1114. }
  1115. }
  1116. .service-new-address {
  1117. .service-summary {
  1118. height: 90rpx;
  1119. display: flex;
  1120. justify-content: space-between;
  1121. align-items: center;
  1122. padding: 15rpx;
  1123. cursor: pointer;
  1124. transition: background-color 0.3s;
  1125. }
  1126. .service-details {
  1127. padding: 10rpx 15rpx;
  1128. background-color: #F9F9F9;
  1129. margin-bottom: 10rpx;
  1130. .pet-info {
  1131. display: flex;
  1132. justify-content: space-between;
  1133. margin: 5rpx 0;
  1134. font-size: 24rpx;
  1135. color: #333;
  1136. }
  1137. .service-item {
  1138. display: flex;
  1139. justify-content: space-between;
  1140. width: 100%;
  1141. color: #999999;
  1142. font-size: 28rpx;
  1143. }
  1144. }
  1145. .total-cost {
  1146. padding: 10rpx 15rpx;
  1147. font-size: 28rpx;
  1148. color: #333;
  1149. display: flex;
  1150. justify-content: space-between;
  1151. }
  1152. }
  1153. .calendar-popup {
  1154. position: fixed;
  1155. bottom: 0;
  1156. left: 0;
  1157. right: 0;
  1158. z-index: 999;
  1159. .calendar-content {
  1160. background: #F5F5F7;
  1161. border-radius: 16rpx 16rpx 0 0;
  1162. padding: 0 20rpx 40rpx;
  1163. }
  1164. }
  1165. .calendar-mask {
  1166. position: fixed;
  1167. top: 0;
  1168. left: 0;
  1169. right: 0;
  1170. bottom: 0;
  1171. background: rgba(0, 0, 0, 0.5);
  1172. /* 半透明黑色 */
  1173. z-index: 998;
  1174. /* 确保在内容下方 */
  1175. pointer-events: none;
  1176. /* 使遮罩层不阻止点击事件 */
  1177. }
  1178. .calendar-content {
  1179. position: relative;
  1180. /* 确保内容在遮罩层之上 */
  1181. z-index: 999;
  1182. /* 确保内容在遮罩层之上 */
  1183. }
  1184. .price-details {
  1185. background: #F5F5F7;
  1186. /* 背景颜色 */
  1187. padding: 10px 10px 0 10px;
  1188. /* 内边距 */
  1189. z-index: 1000;
  1190. /* 确保在其他元素之上 */
  1191. min-height: 600rpx;
  1192. /* 固定高度 */
  1193. overflow: hidden;
  1194. /* 隐藏超出部分 */
  1195. }
  1196. .price-details-header {
  1197. display: flex;
  1198. justify-content: space-between;
  1199. align-items: center;
  1200. padding-bottom: 20rpx;
  1201. }
  1202. .price-details-body {
  1203. margin-top: 20rpx;
  1204. max-height: 450rpx;
  1205. /* 留出头部空间 */
  1206. overflow-y: auto;
  1207. /* 允许上下滚动 */
  1208. }
  1209. .coupon-card {
  1210. display: flex;
  1211. align-items: center;
  1212. width: 100%;
  1213. padding: 10px 0;
  1214. background: #fff;
  1215. border-radius: 8px;
  1216. -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%);
  1217. -webkit-mask-size: 100%, 2px 4px;
  1218. -webkit-mask-repeat: repeat, repeat-y;
  1219. -webkit-mask-position: 0 -4px, 87px;
  1220. -webkit-mask-composite: source-out;
  1221. mask-composite: subtract;
  1222. // background: linear-gradient(45deg, orange, red);
  1223. // &.auto-selected {
  1224. // border: 2px solid #FF530A;
  1225. // background: linear-gradient(135deg, #fff 0%, #FFF4E4 100%);
  1226. // }
  1227. // &.manual-selected {
  1228. // border: 2px solid #4CAF50;
  1229. // background: linear-gradient(135deg, #fff 0%, #E8F5E8 100%);
  1230. // }
  1231. }
  1232. .card-left {
  1233. width: 88px;
  1234. text-align: center;
  1235. font-size: 28rpx;
  1236. color: #FF530A;
  1237. }
  1238. .card-right {
  1239. padding: 0px 12px;
  1240. display: flex;
  1241. flex: 1;
  1242. /* flex-direction: column; */
  1243. justify-content: space-between;
  1244. align-items: center;
  1245. height: 60px;
  1246. s .card-content {
  1247. width: 80%;
  1248. }
  1249. .card-icon {
  1250. position: relative;
  1251. right: -10px;
  1252. top: -10px;
  1253. }
  1254. }
  1255. .card-info {
  1256. margin: 0;
  1257. font-size: 14px;
  1258. line-height: 20px;
  1259. color: #333333;
  1260. }
  1261. .card-time {
  1262. font-size: 12px;
  1263. line-height: 16px;
  1264. font-weight: normal;
  1265. color: #aaaaaa;
  1266. margin-top: 4px;
  1267. }
  1268. </style>