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.

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