2329 lines
59 KiB
Vue
2329 lines
59 KiB
Vue
<template>
|
||
<view class="payment-confirm-container" v-if="!initializing">
|
||
<view class="payment-body-container">
|
||
<view class="info-cell" v-if="reservationInfo.addresInfo">
|
||
<view class="info-title-view">
|
||
<image src="@/static/images/address.png" mode="aspectFit" class="info-icon" />
|
||
<text class="app-fc-main fs-28">{{
|
||
reservationInfo.addresInfo.recipient_name
|
||
}}</text>
|
||
<text class="app-fc-main fs-28 phone-text">{{
|
||
reservationInfo.addresInfo.phone
|
||
}}</text>
|
||
</view>
|
||
<view class="address-view">
|
||
<view class="info-icon" />
|
||
<text class="app-fc-normal fs-24 address-text">
|
||
{{
|
||
`${reservationInfo.addresInfo.area_name} ${reservationInfo.addresInfo.full_address}`
|
||
}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="info-cell">
|
||
<view class="info-title-view">
|
||
<image src="/pageHome/static/time.png" mode="aspectFit" class="info-icon" />
|
||
<text class="app-fc-main fs-28">{{ reservationTime }}</text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="info-cell info-pet-cell info-pet-flex">
|
||
|
||
<image class="pet-headImg" :src="reservationInfo.petInfo.avatar" mode="" />
|
||
<view>
|
||
<view class="fs-24">
|
||
{{ petName }}
|
||
</view>
|
||
<view class="fs-20 petContext">
|
||
{{ petType }}/{{ sex }}/{{ reservationInfo.petInfo.weight_name }}
|
||
</view>
|
||
</view>
|
||
<detail-cell title="宠物类型" :content="petType" />
|
||
<detail-cell v-if="petHair" title="毛型分类" :content="petHair" />
|
||
<detail-cell title="宠物姓名" :content="petName" />
|
||
<detail-cell title="宠物重量区间" :content="petWeight.weight_name" />
|
||
|
||
<view class="line-view"></view>
|
||
<detail-cell
|
||
title="费用预估"
|
||
:content="`¥${showPrice || '0.00'}`"
|
||
:title-mark="true"
|
||
/>
|
||
</view> -->
|
||
<view class="info-cell info-pet-cell" v-if="reservationInfo.orderInfo.parkState">
|
||
<detail-cell title="停车状况" :content="reservationInfo.orderInfo.parkState" :content-mark="false"
|
||
:title-mark="true" />
|
||
</view>
|
||
</view>
|
||
<view class="recharge-method2">
|
||
<view class="pet-count-summary">
|
||
<view class="pet-count-summary-title">洗护服务</view>
|
||
<view class="pet-count-summary-value" v-if="petCountSummary">{{ petCountSummary }}</view>
|
||
</view>
|
||
<view v-for="(petItem, pIndex) in petWithItemsListForDisplay" :key="pIndex" class="pet-card">
|
||
<view class="pet-card-header" @click="togglePetCard(pIndex)">
|
||
<view class="pet-card-info">
|
||
<view class="pet-card-left">
|
||
<image class="pet-avatar-small" :src="getPetCardAvatar(petItem)" mode="aspectFit" />
|
||
<view class="pet-info-small">
|
||
<text class="pet-name-small">{{ petItem.name || petItem.pet_nickname || '宠物' }}</text>
|
||
<text class="pet-desc-small">{{ petCardMeta(petItem) }}</text>
|
||
</view>
|
||
</view>
|
||
<text class="pet-card-toggle">{{ collapsedPetIndex === pIndex ? '展开' : '收起' }}</text>
|
||
</view>
|
||
</view>
|
||
<view v-if="collapsedPetIndex !== pIndex" class="pet-card-body">
|
||
<view class="pet-card-row">
|
||
<text class="pet-card-label">实际宠物重量区间</text>
|
||
<text class="pet-card-value">{{ petItem.weight_name || (reservationInfo.petWeight &&
|
||
reservationInfo.petWeight.weight_name) || '-' }}</text>
|
||
</view>
|
||
<view class="pet-card-row">
|
||
<text class="pet-card-label">预约内容: 基础护理</text>
|
||
<view class="pet-card-money-wrap">
|
||
<text v-if="getBaseDiscountFold(pIndex)" class="pet-card-discount-tag">会员{{ getBaseDiscountFold(pIndex) }}折优惠</text>
|
||
<text v-if="hasBaseDiscount(pIndex)" class="pet-card-original-price">￥{{ petItem.basePrice }}</text>
|
||
<text v-if="hasBaseDiscount(pIndex)" class="pet-card-money">￥{{ petItem.discountBasePrice }}</text>
|
||
<text v-else class="pet-card-money">￥{{ petItem.basePrice || '0.00' }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="service-list">
|
||
<view class="service-item" v-for="(item, idx) in (petItem.additionalItems || [])" :key="idx">
|
||
<text class="service-item-name">{{ item.item_name }}</text>
|
||
<text class="service-item-price">￥{{ item.item_cut_price || item.item_price }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="pet-card-row pet-card-total">
|
||
<text class="pet-card-label">合计</text>
|
||
<text class="pet-card-money">￥{{ petCardTotal(petItem, pIndex) }}</text>
|
||
</view>
|
||
<view class="pet-card-remark">
|
||
<input class="pet-remark-input" v-model="petItem.note" placeholder="添加宠物备注" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="wechat">
|
||
<text class="x">合计</text>
|
||
<view class="estimate" v-if="reservationInfo.estimatePrice != 0">
|
||
<text class="money4">会员{{ reservationInfo.discount * 10 }}折</text>
|
||
<text class="money">￥{{ estimatedPrice }}</text>
|
||
<text class="money1">￥{{ toAmount }}</text>
|
||
</view>
|
||
<text v-else class="money">￥{{ toAmount }}</text>
|
||
</view> -->
|
||
<view class="wechat2"
|
||
v-if="reservationInfo && reservationInfo.amountList && (reservationInfo.amountList.night_fee_tab != 0 || reservationInfo.amountList.night_fee_show)">
|
||
<view class="night">
|
||
<text class="x">夜间费</text>
|
||
<text v-if="!reservationInfo.amountList.night_fee_show" class="x1">(剩余{{
|
||
reservationInfo.amountList.night_fee_tab }}次)</text>
|
||
</view>
|
||
<text v-if="reservationInfo.amountList.night_fee_show" class="money">￥{{
|
||
reservationInfo.amountList.night_fee || "0.00"
|
||
}}</text>
|
||
<view v-else class="mb-discount">
|
||
<text class="money4">会员免夜间费</text>
|
||
<text class="money5">￥{{ reservationInfo.amountList.night_fee || "0.00" }}</text>
|
||
<!-- <text class="money">￥0.00</text> -->
|
||
</view>
|
||
</view>
|
||
<view class="wechat2"
|
||
v-if="reservationInfo && reservationInfo.amountList && (reservationInfo.amountList.dispatch_fee_tab != 0 || reservationInfo.amountList.dispatch_fee_show)">
|
||
<view class="night">
|
||
<text class="x">调度费</text>
|
||
<text v-if="!reservationInfo.amountList.dispatch_fee_show" class="x1">(剩余{{
|
||
reservationInfo.amountList.dispatch_fee_tab }}次)</text>
|
||
</view>
|
||
<text v-if="reservationInfo.amountList.dispatch_fee_show" class="money">￥{{
|
||
reservationInfo.amountList.dispatch_fee }}</text>
|
||
<view v-else class="mb-discount">
|
||
<text class="money4">会员免调度费</text>
|
||
<text class="money5">￥{{ reservationInfo.amountList.dispatch_fee || "0.00" }}</text>
|
||
<!-- <text class="money">￥0.00</text> -->
|
||
</view>
|
||
<!-- <text class="x">调度费</text> -->
|
||
<!-- <text class="money">￥{{ reservationInfo.dispatch_fee }}</text> -->
|
||
</view>
|
||
|
||
<view class="wechat"
|
||
v-if="reservationInfo && reservationInfo.amountList && (reservationInfo.amountList.dispatch_fee || reservationInfo.amountList.night_fee)">
|
||
<text class="x">总计</text>
|
||
<view class="estimate" v-if="reservationInfo.discount != 0">
|
||
<!-- <text class="money4"
|
||
>会员{{ reservationInfo.amountList.discount }}折</text
|
||
> -->
|
||
<text class="money">￥{{ estimatedPri.toFixed(2) }}</text>
|
||
<text class="money1">￥{{ toAmount3.toFixed(2) }}</text>
|
||
</view>
|
||
<text v-else class="money">￥{{ toAmount2.toFixed(2) }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="carousel" v-if="!reservationInfo.discount">
|
||
<view class="member-carousel">
|
||
<view class="actimeb">
|
||
<image @click="rightsList(1)" v-if="activBj1" class="img-meb"
|
||
src="https://activity.wagoo.live/bj-1.png" />
|
||
<!-- <view @click="rightsList(1)" class="q" />
|
||
<text class="mn">199</text> -->
|
||
<image @click="rightsList(1)" v-if="activBj2" class="img-meb"
|
||
src="https://activity.wagoo.live/bj-2.png" />
|
||
</view>
|
||
<view class="actimeb">
|
||
<image @click="rightsList(2)" v-if="activhj1" class="img-meb"
|
||
src="https://activity.wagoo.live/huangj-1.png" />
|
||
<!-- <view @click="rightsList(2)" class="q" />
|
||
<text class="mn2">99</text> -->
|
||
<image v-if="activhj2" @click="rightsList(2)" class="img-meb"
|
||
src="https://activity.wagoo.live/huangj-2.png" />
|
||
</view>
|
||
<view class="actimeb">
|
||
<image @click="rightsList(3)" v-if="activheij1" class="img-meb"
|
||
src="https://activity.wagoo.live/hj-1.png" />
|
||
<!-- <view @click="rightsList(3)" class="q" />
|
||
<text class="mn3">399</text> -->
|
||
<image @click="rightsList(3)" v-if="activheij2" class="img-meb"
|
||
src="https://activity.wagoo.live/hj-2.png" />
|
||
</view>
|
||
</view>
|
||
<!-- <view class="rights">
|
||
<text class="r1">开通前请阅读协议《Wagoo会员协议》</text>
|
||
|
||
</view> -->
|
||
</view>
|
||
|
||
<view class="recharge-method2">
|
||
<view class="info-cell info-pet-cell" style="margin-bottom: 0;">
|
||
<detail-cell v-if="Object.keys(selectCoupon).length === 0" title="优惠券"
|
||
:content="couponList.length === 0 ? '暂无可用' : '未选优惠券'" :is-show-arrow="true"
|
||
:custom-content-style="{ color: '#ff19a0' }" @clickAction="isShowCouponModal = true" />
|
||
<detail-cell v-else title="优惠券" :content="showCoupon" :is-show-arrow="true"
|
||
:custom-content-style="{ color: '#ff19a0' }" @clickAction="isShowCouponModal = true" />
|
||
<!-- <detail-cell v-if="Object.keys(selectService).length === 0" title="服务券"
|
||
:content="serviceList.length === 0 ? '暂无可用' : '未选服务券'" :is-show-arrow="true"
|
||
:custom-content-style="{ color: '#9B939A' }" @clickAction="isShowServiceModal = true" />
|
||
<detail-cell v-else title="服务券" :content="showService" :is-show-arrow="true"
|
||
:custom-content-style="{ color: '#E82016' }" @clickAction="isShowServiceModal = true" /> -->
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
<view @click="elasticLayer = false" v-if="elasticLayer" class="elastic-layer" />
|
||
<view v-if="elasticLayer" class="select-pet">
|
||
<view class="close-icon" @click="elasticLayer = false" />
|
||
<image v-if="platinum" class="file-b" src="https://activity.wagoo.live/pop-b.png" mode="widthFix" />
|
||
<image v-if="gold" class="file-b" src="https://activity.wagoo.live/pop-h.png" mode="widthFix" />
|
||
<image v-if="blackGold" class="file-b" src="https://activity.wagoo.live/pop-hei.png" mode="widthFix" />
|
||
<view class="agreement">
|
||
<image v-if="mbselected1" class="not-selected" @click.stop="selecttwo('1')" src="@/static/images/w.png"
|
||
mode="widthFix" />
|
||
<image v-if="mbselected2" class="not-selected" @click.stop="selecttwo('2')" src="@/static/images/y.png"
|
||
mode="widthFix" />
|
||
</view>
|
||
<view @click="jumpTo('/pages/richText/membership-agreement')" class="agreement-img" />
|
||
<view @click="originc1(1)" class="origin1" />
|
||
<view @click="originc2(2)" class="origin2" />
|
||
<view @click="originc3(3)" class="origin3" />
|
||
<text class="money">¥{{ amountInfo1.actual_amount }}</text>
|
||
<view class="amountOut" @click="amountOut" />
|
||
<!-- <text class="money1">立即开通</text> -->
|
||
<!-- <view class="original">
|
||
<text class="y"> 原价 </text>
|
||
<text class="y">¥{{ amountInfo1.purchase_amount }}元 </text>
|
||
</view> -->
|
||
<!-- <text class="money2">立减¥{{ amountInfo1.discount_amount }}元</text> -->
|
||
<view class="roll-rights">
|
||
<view class="roll-item">
|
||
<view class="roll-e">
|
||
<view class="roll-t">
|
||
<image class="m" src="https://activity.wagoo.live/p1.png" mode="widthFix" />
|
||
<text class="z">折扣护理</text>
|
||
</view>
|
||
<view class="roll-t">
|
||
<image class="m" src="https://activity.wagoo.live/p2.png" mode="widthFix" />
|
||
<text class="z">入会礼包</text>
|
||
</view>
|
||
<view class="roll-t">
|
||
<image class="m" src="https://activity.wagoo.live/p3.png" mode="widthFix" />
|
||
<text class="z">定制浴液</text>
|
||
</view>
|
||
<view class="roll-t">
|
||
<image class="m" src="https://activity.wagoo.live/p4.png" mode="widthFix" />
|
||
<text class="z">专属会员活动</text>
|
||
</view>
|
||
<view class="roll-t">
|
||
<image class="m" src="https://activity.wagoo.live/p5.png" mode="widthFix" />
|
||
<text class="z">免费调度</text>
|
||
</view>
|
||
<view class="roll-t">
|
||
<image class="m" src="https://activity.wagoo.live/p6.png" mode="widthFix" />
|
||
<text class="z">公益勋章</text>
|
||
</view>
|
||
<view class="roll-t">
|
||
<image class="m" src="https://activity.wagoo.live/p7.png" mode="widthFix" />
|
||
<text class="z">专属影集</text>
|
||
</view>
|
||
<view class="roll-t">
|
||
<image class="m" src="https://activity.wagoo.live/p8.png" mode="widthFix" />
|
||
<text class="z">Al宠物档案</text>
|
||
</view>
|
||
<!-- <view class="roll-t">
|
||
<image
|
||
class="m"
|
||
src="https://activity.wagoo.live/p9.png"
|
||
mode="widthFix"
|
||
/>
|
||
<text class="z">积分加速</text>
|
||
</view> -->
|
||
<view class="roll-t">
|
||
<image class="m" src="https://activity.wagoo.live/p10.png" mode="widthFix" />
|
||
<text class="z">专属丝带</text>
|
||
</view>
|
||
<view class="roll-t">
|
||
<image class="m" src="https://activity.wagoo.live/p11.png" mode="widthFix" />
|
||
<text class="z">夜间免费</text>
|
||
</view>
|
||
<view class="roll-t">
|
||
<image class="m" src="https://activity.wagoo.live/p12.png" mode="widthFix" />
|
||
<text class="z">专属客服</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="recharge-method">
|
||
<view class="wechat" @click.stop="selectOption1('1')">
|
||
<view class="select">
|
||
<image class="w" src="@/static/images/douy.png" mode="widthFix" />
|
||
<text class="x">抖音</text>
|
||
</view>
|
||
<image v-if="selected1" class="not-selected" src="@/static/images/w.png" mode="widthFix" />
|
||
<image v-if="selected2" class="not-selected" src="@/static/images/y.png" mode="widthFix" />
|
||
</view>
|
||
<view class="wechat" @click.stop="selectOption2('2')">
|
||
<view class="select">
|
||
<image class="w" src="@/static/images/wallet.png" mode="widthFix" />
|
||
<text class="x">钱包支付</text>
|
||
</view>
|
||
<image v-if="selected3" class="not-selected" src="@/static/images/w.png" mode="widthFix" />
|
||
<image v-if="selected4" class="not-selected" src="@/static/images/y.png" mode="widthFix" />
|
||
</view>
|
||
</view>
|
||
<view class="handle-view">
|
||
<view class="handle-view-content">
|
||
<view class="handle-info">
|
||
<!-- <view class="estimate" v-if="reservationInfo.estimatePrice !=0 ">
|
||
<text class="money">￥{{ reservationInfo.estimatedPrice }}</text>
|
||
<text class="money1">￥{{ toAmount }}</text>
|
||
</view>
|
||
<text v-else class="money">￥{{ toAmount }}</text> -->
|
||
<view class="handle-info-cell">
|
||
<view v-if="reservationInfo.estimatePrice != 0">
|
||
<text class="money">￥{{ Math.max(0, estimatedPri - couponMoney2).toFixed(2) }}</text>
|
||
<text class="app-fc12">¥</text>
|
||
<text class="app-fc1">{{ Math.max(0, toAmount3).toFixed(2) || "0.00" }}</text>
|
||
</view>
|
||
<view v-else>
|
||
<text class="app-fc-main fs-30">¥</text>
|
||
<text class="app-fc-main fs-40 app-font-bold">{{
|
||
Math.max(0, (toAmount2.toFixed(2) || "0.00") - couponMoney)
|
||
}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="handle-info-cell tip-cell">
|
||
<image src="/static/images/notice.png" mode="aspectFit" class="tips-icon" />
|
||
<text class="app-fc-normal fs-24">以实际服务宠物的重量为准</text>
|
||
</view>
|
||
</view>
|
||
<view class="handle-btn" @click.stop="createPetOrder">
|
||
<text class="cfom">确认支付</text>
|
||
</view>
|
||
</view>
|
||
<view class="handle-safe-area"></view>
|
||
</view>
|
||
<RechargeCouponModal v-if="isShowCouponModal" :couponList="couponList" :price="reservationInfo.price"
|
||
:selected-item="selectCoupon" @useCoupon="useCoupon" @close="isShowCouponModal = false" />
|
||
|
||
<ServiceCouponModal v-if="isShowServiceModal" :service-list="serviceList" @useService="useService"
|
||
@close="isShowServiceModal = false" :weight-id="petWeight.weight_id" :price="reservationInfo.price"
|
||
:selected-item="selectService" />
|
||
<success-modal v-if="showSuccessModal" :img-src="'https://activity.wagoo.live/order_success.png'"
|
||
:img-style="{ width: '200rpx', height: '200rpx' }" title="预约成功" message="预约状态可在订单中进行查看"
|
||
@ok="paySuccessAction" />
|
||
<view v-if="elasticLayer1" class="elastic-layer" @click="(additionalBom1 = false), (elasticLayer1 = false)" />
|
||
<view class="additional-bottom" v-if="additionalBom1">
|
||
<image src="@/static/images/close.png" mode="aspectFit" class="close-icon"
|
||
@click="(additionalBom1 = false), (elasticLayer1 = false)" />
|
||
<view class="recharge-method2">
|
||
<view class="wechat">
|
||
<view class="select">
|
||
<image class="w" src="@/static/images/wallet.png" mode="widthFix" />
|
||
<text class="x">钱包支付</text>
|
||
</view>
|
||
<image v-if="select3" class="not-selected" @click.stop="selectOpt2('2')" src="@/static/images/w.png"
|
||
mode="widthFix" />
|
||
<image v-if="select4" class="not-selected" src="@/static/images/y.png" mode="widthFix" />
|
||
</view>
|
||
<view class="wechat">
|
||
<view class="select">
|
||
<image class="w" src="@/static/images/douy.png" mode="widthFix" />
|
||
<text class="x">抖音</text>
|
||
</view>
|
||
<image v-if="select1" class="not-selected" @click.stop="selectOpt1('1')" src="@/static/images/w.png"
|
||
mode="widthFix" />
|
||
<image v-if="select2" class="not-selected" src="@/static/images/y.png" mode="widthFix" />
|
||
</view>
|
||
|
||
</view>
|
||
<view class="payment" @click="rechargeNow">
|
||
<text class="Z"> 支付 </text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import DetailCell from "@/components/petOrder/detail-cell.vue";
|
||
import {
|
||
COUPON_TYPE_PET,
|
||
ORDER_TYPE_SITE,
|
||
PET_HAIR_LONG,
|
||
PET_TYPE_CAT,
|
||
PET_TYPE_DOG,
|
||
} from "@/constants/app.business";
|
||
import {
|
||
createOrder,
|
||
payOrder
|
||
} from "@/api/order";
|
||
import {
|
||
getCouponListByOrderPrice,
|
||
// getServiceCouponListByWeightId,
|
||
} from "@/api/coupon";
|
||
import {
|
||
walletTransaction,
|
||
memberType,
|
||
memberWXPAY,
|
||
membershipWallet,
|
||
} from "../../api/login";
|
||
import RechargeCouponModal from "@/components/coupon/RechargeCouponModal.vue";
|
||
import ServiceCouponModal from "@/components/coupon/ServiceCouponModal.vue";
|
||
import SuccessModal from "@/components/SuccessModal.vue";
|
||
import moment from "moment";
|
||
import {
|
||
ORDER_STATUS_RESERVED
|
||
} from "@/pageHome/constants/home";
|
||
import { imgPrefix } from "@/utils/common";
|
||
|
||
export default {
|
||
components: {
|
||
SuccessModal,
|
||
ServiceCouponModal,
|
||
RechargeCouponModal,
|
||
DetailCell,
|
||
},
|
||
onLoad(option) {
|
||
this.getmemberType();
|
||
// this.buyService();
|
||
const eventChannel = this.getOpenerEventChannel();
|
||
eventChannel.on("reservationInfo", (data) => {
|
||
console.log(data, "?");
|
||
this.initializing = false;
|
||
// 确保 orderType 在顶层可访问
|
||
if (data.orderInfo && data.orderInfo.orderType && !data.orderType) {
|
||
data.orderType = data.orderInfo.orderType;
|
||
}
|
||
this.reservationInfo = data;
|
||
|
||
Promise.all([this.getMyCouponList()]).then(
|
||
(result) => {
|
||
// if (this.serviceList.length) {
|
||
// let selectService = this.serviceList[0];
|
||
// this.serviceList.map((data) => {
|
||
// if (Number(data.price) > Number(selectService.price)) {
|
||
// selectService = data;
|
||
// }
|
||
// });
|
||
// this.selectService = selectService;
|
||
// } else
|
||
if (this.couponList.length) {
|
||
let selectCoupon = this.couponList[0];
|
||
// console.log(selectCoupon,'--=')
|
||
this.couponList.map((data) => {
|
||
if (Number(data.coupon_amount) > Number(selectCoupon.coupon_amount)) {
|
||
selectCoupon = data;
|
||
}
|
||
});
|
||
this.selectCoupon = selectCoupon;
|
||
}
|
||
}
|
||
);
|
||
});
|
||
// console.log( Number(this.showPrice),'--==')
|
||
},
|
||
|
||
computed: {
|
||
sex() {
|
||
const g = (this.reservationInfo.petInfo?.gender || '').toString().toLowerCase();
|
||
return g === 'male' ? '男生' : (g === 'female' ? '女生' : '');
|
||
},
|
||
estimatedPrice() {
|
||
// let couponMoney = this.selectCoupon?.coupon_amount || 0;
|
||
// console.log(this.selectCoupon,'?')
|
||
return this.reservationInfo.estimatedPrice;
|
||
},
|
||
estimatedPrice2() {
|
||
let couponMoney = this.selectCoupon?.coupon_amount || 0;
|
||
this.couponMoney2 = couponMoney
|
||
this.estimatedPri =
|
||
Number(this.estimatedPrice || 0) +
|
||
Number((this.reservationInfo.amountList?.night_fee_show ? this.reservationInfo.amountList.night_fee : 0) ||
|
||
0) +
|
||
Number((this.reservationInfo.amountList?.dispatch_fee_show ? this.reservationInfo.amountList.dispatch_fee :
|
||
0) || 0);
|
||
|
||
// console.log(this.estimatedPrice,this.reservationInfo.night_fee,this.reservationInfo.dispatch_fee,'???')
|
||
// return ( ( Number(this.estimatedPrice || 0 ) +
|
||
// Number( (this.reservationInfo.amountList?.night_fee_show ? this.reservationInfo.night_fee : 0) || 0 ) +
|
||
// Number( ( this.reservationInfo.amountList?.dispatch_fee_show ? this.reservationInfo.dispatch_fee : 0) || 0 ))
|
||
// - couponMoney).toFixed(2)
|
||
},
|
||
newAmount() {
|
||
let totalP = 0;
|
||
this.reservationInfo.selectidList?.map((item) => {
|
||
// console.log(item,'--===')
|
||
totalP += Number(item.item_price);
|
||
// console.log( totalP,'===')
|
||
});
|
||
if (this.reservationInfo.estimatePrice != 0) {
|
||
this.toAmount = Number(totalP || 0) + Number(this.showPrice || 0);
|
||
} else {
|
||
// let couponMoney = this.selectCoupon?.coupon_amount || 0;
|
||
this.toAmount =
|
||
Number(totalP || 0) + Number(this.showPrice || 0);
|
||
}
|
||
|
||
// +
|
||
// Number( (this.reservationInfo.amountList?.night_fee_show ? this.reservationInfo.night_fee : 0) || 0 ) +
|
||
// Number( ( this.reservationInfo.amountList?.dispatch_fee_show ? this.reservationInfo.dispatch_fee : 0) || 0 );
|
||
},
|
||
newAmount2() {
|
||
let couponMoney = this.selectCoupon?.coupon_amount || 0;
|
||
this.couponMoney = couponMoney
|
||
// console.log(couponMoney, '---')
|
||
this.toAmount2 =
|
||
Number(this.toAmount || 0) +
|
||
Number((this.reservationInfo.amountList?.night_fee_show ? this.reservationInfo.amountList.night_fee : 0) ||
|
||
0) +
|
||
Number((this.reservationInfo.amountList?.dispatch_fee_show ? this.reservationInfo.amountList.dispatch_fee :
|
||
0) || 0);
|
||
},
|
||
|
||
newAmount3() {
|
||
// let couponMoney = this.selectCoupon?.coupon_amount || 0;
|
||
// console.log( this.toAmount2,'---')
|
||
const nightFee = this.reservationInfo?.amountList?.night_fee || 0;
|
||
const dispatchFee = this.reservationInfo?.amountList?.dispatch_fee || 0;
|
||
// 基础金额：所有宠物的「原价」（基础护理原价 + 附加项原价）之和
|
||
const baseSum = Number(this.getOriginalTotalAmount() || 0);
|
||
this.toAmount3 = baseSum + Number(nightFee || 0) + Number(dispatchFee || 0);
|
||
},
|
||
petType() {
|
||
return `${this.reservationInfo?.petInfo?.type}` === `${PET_TYPE_CAT}` ?
|
||
"喵喵" :
|
||
"汪汪";
|
||
},
|
||
petName() {
|
||
return this.reservationInfo?.petInfo?.name || "";
|
||
},
|
||
petWeight() {
|
||
return this.reservationInfo?.petWeight || {};
|
||
},
|
||
petHair() {
|
||
if (`${this.reservationInfo?.petInfo?.type}` === `${PET_TYPE_CAT}`) {
|
||
return `${this.reservationInfo?.petInfo.maofa}` === `${PET_HAIR_LONG}` ?
|
||
"长毛" :
|
||
"短毛";
|
||
} else {
|
||
return "";
|
||
}
|
||
},
|
||
reservationTime() {
|
||
if (this.reservationInfo.orderType === ORDER_TYPE_SITE) {
|
||
return "今天 " + moment().format("M月D日");
|
||
}
|
||
return `${this.reservationInfo?.reservationTime?.dateLabel} ${this.reservationInfo?.reservationTime?.start}-${this.reservationInfo?.reservationTime?.end}`;
|
||
},
|
||
petWithItemsListForDisplay() {
|
||
const list = this.reservationInfo?.petWithItemsList;
|
||
if (Array.isArray(list) && list.length > 0) {
|
||
return list.map(pet => ({
|
||
...pet,
|
||
note: pet.note || ''
|
||
}));
|
||
}
|
||
const pet = this.reservationInfo?.petInfo;
|
||
if (pet && (pet.id || pet.chongwu_id)) {
|
||
return [{ ...pet, additionalItems: this.reservationInfo?.selectidList || [], note: pet.note || '' }];
|
||
}
|
||
return [];
|
||
},
|
||
petCountSummary() {
|
||
const pets = this.petWithItemsListForDisplay;
|
||
let dogCount = 0;
|
||
let catCount = 0;
|
||
pets.forEach(pet => {
|
||
const type = pet?.type;
|
||
if (type === PET_TYPE_DOG) {
|
||
dogCount++;
|
||
} else if (type === PET_TYPE_CAT) {
|
||
catCount++;
|
||
}
|
||
});
|
||
const parts = [];
|
||
if (dogCount > 0) parts.push(`${dogCount}只狗`);
|
||
if (catCount > 0) parts.push(`${catCount}只猫`);
|
||
return parts.join(' ') || '';
|
||
},
|
||
showService() {
|
||
return this.selectService.name || "";
|
||
},
|
||
showCoupon() {
|
||
return "-¥" + (+this.selectCoupon.coupon_amount || 0);
|
||
},
|
||
showPrice() {
|
||
if (Object.keys(this.selectService).length) {
|
||
return "0.00";
|
||
} else {
|
||
// let couponMoney = this.selectCoupon?.coupon_amount || 0;
|
||
return Number(this.reservationInfo.price).toFixed(2);
|
||
}
|
||
},
|
||
userInfo() {
|
||
return this.$store.state?.user?.userInfo || {};
|
||
},
|
||
},
|
||
// watch: {
|
||
// totalAmount(newVal) {
|
||
// let totalP = 0;
|
||
// newVal.map((item) => {
|
||
// console.log(item,'--===')
|
||
// totalP += Number(item.item_price)
|
||
// console.log( totalP,'===')
|
||
// });
|
||
// this.toAmount = Number(totalP) + Number(this.showPrice)
|
||
// console.log(totalP, this.showPrice,'--?')
|
||
// }
|
||
// },
|
||
data() {
|
||
return {
|
||
couponMoney2: '',
|
||
couponMoney: '',
|
||
mbselected1: true,
|
||
mbselected2: false,
|
||
mbselected3: true,
|
||
mbselected4: false,
|
||
toAmount3: '',
|
||
estimatedPri: "",
|
||
amountInfo1: "",
|
||
amountInfo2: "",
|
||
amountInfo3: "",
|
||
platinum: false,
|
||
elasticLayer1: false,
|
||
additionalBom1: false,
|
||
gold: false,
|
||
blackGold: false,
|
||
activBj1: true,
|
||
activBj2: false,
|
||
activhj1: true,
|
||
toAmount2: "",
|
||
activhj2: false,
|
||
activheij1: true,
|
||
activheij2: false,
|
||
reservationInfo: {},
|
||
initializing: true,
|
||
serviceList: [],
|
||
selectService: {},
|
||
isShowServiceModal: false,
|
||
couponList: [],
|
||
selectCoupon: {},
|
||
toAmount: "",
|
||
business_id: "",
|
||
isShowCouponModal: false,
|
||
showSuccessModal: false,
|
||
selected1: true,
|
||
selected2: false,
|
||
selected3: true,
|
||
selected4: false,
|
||
select1: true,
|
||
select2: false,
|
||
select3: true,
|
||
select4: false,
|
||
recharge: true,
|
||
elasticLayer: false,
|
||
record: false,
|
||
wallet: "",
|
||
collapsedPetIndex: -1,
|
||
};
|
||
},
|
||
methods: {
|
||
getPetCardAvatar(pet) {
|
||
const url = pet.chongwu_pic || pet.pet_avatar || pet.avatar || pet.pet_image_url;
|
||
return url || `${imgPrefix}record_avator.png`;
|
||
},
|
||
petCardMeta(pet) {
|
||
const type = `${pet?.type}` === `${PET_TYPE_CAT}` ? '喵喵' : '汪汪';
|
||
const gender = (pet?.gender || '').toString().toLowerCase();
|
||
const sex = gender === 'male' ? '男生' : (gender === 'female' ? '女生' : '');
|
||
const weight = pet?.weight_name || this.reservationInfo?.petWeight?.weight_name || '';
|
||
const parts = [type, sex];
|
||
if (pet?.age) parts.push(pet.age);
|
||
if (weight) parts.push(weight);
|
||
return parts.join('/') || '-';
|
||
},
|
||
togglePetCard(index) {
|
||
this.collapsedPetIndex = this.collapsedPetIndex === index ? -1 : index;
|
||
},
|
||
getBaseDiscountFold(pIndex) {
|
||
const discount = this.reservationInfo?.discount;
|
||
let item = 0;
|
||
if (Array.isArray(discount)) {
|
||
item = Number(discount[pIndex]) || 0;
|
||
} else if (pIndex === 0 && discount != null && discount !== '') {
|
||
item = Number(discount) || 0;
|
||
}
|
||
if (item === 0) return '';
|
||
return item / 10;
|
||
},
|
||
hasBaseDiscount(pIndex) {
|
||
const discount = this.reservationInfo?.discount;
|
||
if (Array.isArray(discount)) {
|
||
return Number(discount[pIndex]) !== 0;
|
||
}
|
||
if (pIndex === 0 && discount != null && discount !== '') {
|
||
return Number(discount) !== 0;
|
||
}
|
||
return false;
|
||
},
|
||
petCardTotal(petItem) {
|
||
// 合计 = 基础护理价格 + 选中附加项价格
|
||
// 基础护理优先用折后价 discountBasePrice，没有则用 basePrice
|
||
const base = Number(petItem.discountBasePrice != null ? petItem.discountBasePrice : petItem.basePrice || 0);
|
||
// 附加项优先用折后价 item_cut_price，没有则用 item_price
|
||
const add = (petItem.additionalItems || []).reduce((s, it) => {
|
||
const price = it.item_cut_price != null ? it.item_cut_price : it.item_price;
|
||
return s + Number(price || 0);
|
||
}, 0);
|
||
return (base + add).toFixed(2);
|
||
},
|
||
// 原价总和：所有宠物的基础护理原价 + 附加项原价
|
||
getOriginalTotalAmount() {
|
||
const pets = this.petWithItemsListForDisplay || [];
|
||
const sum = pets.reduce((total, pet) => {
|
||
const base = Number(pet.basePrice || 0); // 洗护原价
|
||
const add = (pet.additionalItems || []).reduce((s, it) => {
|
||
return s + Number(it.item_price || 0); // 附加项原价
|
||
}, 0);
|
||
return total + base + add;
|
||
}, 0);
|
||
return sum.toFixed(2);
|
||
},
|
||
getMyCouponList() {
|
||
return getCouponListByOrderPrice(
|
||
this.userInfo.userID,
|
||
this.reservationInfo.price + ''
|
||
)
|
||
.then((res) => {
|
||
// console.log(res,'??、？')
|
||
this.couponList = res?.data || [];
|
||
// console.log(this.couponList,'-=-?')
|
||
return Promise.resolve();
|
||
})
|
||
.catch(() => {
|
||
this.couponList = [];
|
||
this.selectCoupon = {};
|
||
return Promise.resolve();
|
||
});
|
||
},
|
||
originc1() {
|
||
this.gold = true;
|
||
this.platinum = false;
|
||
this.blackGold = false;
|
||
this.amountInfo1 = this.memberList[0];
|
||
},
|
||
originc2() {
|
||
this.gold = false;
|
||
this.platinum = true;
|
||
this.blackGold = false;
|
||
this.amountInfo1 = this.memberList[1];
|
||
},
|
||
originc3() {
|
||
this.gold = false;
|
||
this.platinum = false;
|
||
this.blackGold = true;
|
||
this.amountInfo1 = this.memberList[2];
|
||
},
|
||
|
||
async rechargeNow() {
|
||
// console.log(this.wallet, "???");
|
||
if (!this.WeChat1 && !this.wallet1) {
|
||
uni.showToast({
|
||
title: "请选择充值方式",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if (this.WeChat1 == 1) {
|
||
console.log(this.amountInfo1, "--");
|
||
try {
|
||
const data = {
|
||
card_name: this.amountInfo1.card_name,
|
||
card_type: this.amountInfo1.card_type,
|
||
total_fee: this.amountInfo1.actual_amount,
|
||
type: 2
|
||
// user_id: 50001
|
||
// user_nickname: this.reservationInfo.petInfo.jianhuren_name,
|
||
// user_id: Number(this.reservationInfo.petInfo.member_id),
|
||
// card_type: this.amountInfo1.card_type,
|
||
// card_name: this.amountInfo1.card_name,
|
||
// actual_amount: Number(this.amountInfo1.actual_amount),
|
||
};
|
||
memberWXPAY(data).then((res) => {
|
||
// 使用获取的支付参数进行支付
|
||
tt.pay({
|
||
orderInfo: {
|
||
order_id:res.data.orderInfo.order_id,
|
||
order_token:res.data.orderInfo.order_token,
|
||
},
|
||
service:5,
|
||
success: (res) => {
|
||
uni.showToast({
|
||
title: "支付成功",
|
||
icon: "none",
|
||
});
|
||
this.elasticLayer1 = false;
|
||
this.additionalBom1 = false;
|
||
let that = this;
|
||
uni.showModal({
|
||
content: "绑定宠物享受会员权益",
|
||
showCancel: false,
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
setTimeout(() => {
|
||
uni.reLaunch({
|
||
url: `/pages/client/recharge/my-card?user_id=${that.reservationInfo.petInfo.member_id}`,
|
||
});
|
||
// uni.navigateBack({
|
||
// delta: 1, // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
|
||
// });
|
||
}, 500);
|
||
}
|
||
},
|
||
});
|
||
|
||
// uni.reLaunch({
|
||
// url: `/pages/client/recharge/my-card?user_id=${this.reservationInfo.petInfo.member_id}`,
|
||
// });
|
||
// setTimeout(() => {
|
||
// uni.navigateBack({
|
||
// delta: 1, // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
|
||
// });
|
||
// }, 1500);
|
||
// this.buyService(this.user_id);
|
||
// this.additionalBom = false;
|
||
// this.elasticLayer = false;
|
||
console.log("支付成功:", res);
|
||
},
|
||
fail: (err) => {
|
||
console.error("支付失败:", err);
|
||
},
|
||
});
|
||
});
|
||
} catch (error) {
|
||
console.error("捕获到的错误:", error);
|
||
}
|
||
} else if (this.wallet1 == 2) {
|
||
let that = this;
|
||
uni.showModal({
|
||
title: "钱包付款",
|
||
content: "是否确认钱包付款",
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
const value = uni.getStorageSync("userInfo");
|
||
// console.log(this.selectService,'---')
|
||
const data = {
|
||
card_type: that.amountInfo1.card_type,
|
||
total_fee: that.amountInfo1.actual_amount,
|
||
type: 2,
|
||
user_nickname: value.user_nickname,
|
||
wallet_id: value.wallet_id,
|
||
// type: 2,
|
||
// wallet_id: value.wallet_id,
|
||
// order_id: value.user_id,
|
||
// amount: this.estimatedPri ? this.estimatedPri : this.toAmount2,
|
||
// order_no: orderInfo.order_no,
|
||
// business_type: 5,
|
||
// business_id: 1,
|
||
// card_name: that.amountInfo1.card_name,
|
||
// user_nickname: that.reservationInfo.petInfo.jianhuren_name,
|
||
// user_id: Number(that.reservationInfo.petInfo.member_id),
|
||
// amount: Number(that.amountInfo1.actual_amount),
|
||
// wallet_id: value.wallet_id,
|
||
// card_type: that.amountInfo1.card_type,
|
||
};
|
||
membershipWallet(data).then((res) => {
|
||
if (res.code == 0) {
|
||
uni.showToast({
|
||
title: "支付成功",
|
||
icon: "none",
|
||
});
|
||
|
||
uni.showModal({
|
||
content: "绑定宠物享受会员权益",
|
||
showCancel: false,
|
||
success: function (res) {
|
||
if (res.confirm) {
|
||
setTimeout(() => {
|
||
uni.reLaunch({
|
||
url: `/pages/client/recharge/my-card?user_id=${that.reservationInfo.petInfo.member_id}`,
|
||
});
|
||
// uni.navigateBack({
|
||
// delta: 1, // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
|
||
// });
|
||
}, 500);
|
||
}
|
||
},
|
||
});
|
||
|
||
// uni.reLaunch({
|
||
// url: `/pages/client/recharge/my-card?user_id=${that.reservationInfo.petInfo.member_id}`,
|
||
// });
|
||
that.elasticLayer1 = false;
|
||
that.additionalBom1 = false;
|
||
} else if (res.code == 100) {
|
||
uni.showToast({
|
||
title: res.message,
|
||
icon: "none",
|
||
});
|
||
}
|
||
});
|
||
// 用户点击确定后的操作
|
||
} else if (res.cancel) {
|
||
// 用户点击取消后的操作
|
||
}
|
||
},
|
||
});
|
||
}
|
||
},
|
||
rightsList(v) {
|
||
this.elasticLayer = true;
|
||
console.log(v);
|
||
if (v == 1) {
|
||
this.amountInfo1 = this.memberList[1];
|
||
this.platinum = true;
|
||
this.blackGold = false;
|
||
this.gold = false;
|
||
} else if (v == 2) {
|
||
this.amountInfo1 = this.memberList[0];
|
||
this.gold = true;
|
||
this.platinum = false;
|
||
this.blackGold = false;
|
||
} else if (v == 3) {
|
||
this.amountInfo1 = this.memberList[2];
|
||
this.blackGold = true;
|
||
this.gold = false;
|
||
this.platinum = false;
|
||
}
|
||
},
|
||
amountOut() {
|
||
if (!this.memberSelect || this.memberSelect == 2) {
|
||
uni.showToast({
|
||
title: "请先阅读并同意会员卡服务协议",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
} else {
|
||
this.additionalBom1 = true;
|
||
this.elasticLayer1 = true;
|
||
this.elasticLayer = false;
|
||
}
|
||
},
|
||
selecttwo(v) {
|
||
// console.log(v)
|
||
this.memberSelect = v;
|
||
if (v == 1) {
|
||
this.mbselected1 = false;
|
||
this.mbselected2 = true;
|
||
} else if (v == 2) {
|
||
this.mbselected1 = true;
|
||
this.mbselected2 = false;
|
||
}
|
||
},
|
||
buyService(orderInfo) {
|
||
// uni.showLoading({
|
||
// title: "处理中",
|
||
// mask: true,
|
||
// });
|
||
// 从 Vuex 中获取 userInfo，而不是本地存储
|
||
const value = (this.$store.state && this.$store.state.user && this.$store.state.user.userInfo) || {};
|
||
const data = {
|
||
type: 3,
|
||
wallet_id: value.wallet_id,
|
||
order_id: orderInfo.order_id,
|
||
total_fee: orderInfo.pay_amount,
|
||
order_no: orderInfo.order_no,
|
||
};
|
||
|
||
walletTransaction(data).then((res) => {
|
||
if (res.code == 0) {
|
||
console.log('钱包支付成功', res)
|
||
uni.showToast({
|
||
title: "支付成功",
|
||
icon: "none",
|
||
});
|
||
uni.hideLoading();
|
||
const eventChannel = this.getOpenerEventChannel();
|
||
eventChannel.emit("clearData");
|
||
this.showSuccessModal = true;
|
||
setTimeout(function () {
|
||
uni.redirectTo({
|
||
url: "/pages/client/petOrder/index",
|
||
complete() {
|
||
uni.$emit("changeTabBar", {
|
||
pageId: "orderPage",
|
||
orderState: ORDER_STATUS_RESERVED,
|
||
});
|
||
},
|
||
});
|
||
}, 1000);
|
||
|
||
} else if (res.code == 0) {
|
||
uni.showToast({
|
||
title: res.message,
|
||
icon: "none",
|
||
});
|
||
}
|
||
|
||
});
|
||
},
|
||
|
||
getmemberType() {
|
||
const data = {
|
||
type: 0,
|
||
};
|
||
memberType(data).then((res) => {
|
||
this.memberList = res.data;
|
||
});
|
||
},
|
||
|
||
selectOpt1(v) {
|
||
console.log(v);
|
||
this.WeChat1 = v;
|
||
this.wallet1 = "";
|
||
// console.log(this.WeChat);
|
||
this.select1 = false;
|
||
this.select2 = true;
|
||
this.select3 = true;
|
||
this.select4 = false;
|
||
},
|
||
selectOpt2(v) {
|
||
console.log(v);
|
||
this.WeChat1 = "";
|
||
this.wallet1 = v;
|
||
// console.log(this.wallet);
|
||
this.select1 = true;
|
||
this.select2 = false;
|
||
this.select3 = false;
|
||
this.select4 = true;
|
||
},
|
||
|
||
selectOption1(v) {
|
||
this.WeChat = v;
|
||
this.wallet = "";
|
||
this.payment_type = v;
|
||
// console.log(this.WeChat);
|
||
this.selected1 = false;
|
||
this.selected2 = true;
|
||
this.selected3 = true;
|
||
this.selected4 = false;
|
||
},
|
||
selectOption2(v) {
|
||
this.WeChat = "";
|
||
this.wallet = v;
|
||
this.payment_type = v;
|
||
// console.log(this.wallet);
|
||
this.selected1 = true;
|
||
this.selected2 = false;
|
||
this.selected3 = false;
|
||
this.selected4 = true;
|
||
},
|
||
jumpTo(url) {
|
||
uni.navigateTo({
|
||
url,
|
||
});
|
||
},
|
||
// getMyServiceList() {
|
||
// return getServiceCouponListByWeightId(
|
||
// this.reservationInfo?.petWeight?.weight_id
|
||
// )
|
||
// .then((res) => {
|
||
// this.serviceList = res?.info || [];
|
||
// return Promise.resolve();
|
||
// })
|
||
// .catch(() => {
|
||
// this.serviceList = [];
|
||
// this.selectService = {};
|
||
// return Promise.resolve();
|
||
// });
|
||
// },
|
||
useCoupon(item) {
|
||
// 如果点击的是已经选中的优惠券，则取消使用
|
||
if (this.selectCoupon && this.selectCoupon.distribution_id === item.distribution_id) {
|
||
this.selectCoupon = {};
|
||
} else {
|
||
this.selectCoupon = item;
|
||
}
|
||
this.isShowCouponModal = false;
|
||
},
|
||
useService(item) {
|
||
if (this.selectService.order_id === item.order_id) {
|
||
this.selectService = {};
|
||
} else {
|
||
this.selectService = item;
|
||
this.isShowServiceModal = false;
|
||
}
|
||
},
|
||
createPetOrder() {
|
||
// console.log(this.wallet, "???");
|
||
if (!this.WeChat && !this.wallet) {
|
||
uni.showToast({
|
||
title: "请选择支付方式",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
// console.log(this.WeChat,'---')
|
||
if (
|
||
Object.keys(this.selectService).length &&
|
||
Object.keys(this.selectCoupon).length
|
||
) {
|
||
uni.showToast({
|
||
title: "服务券和优惠券不能同时使用",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
uni.showLoading({
|
||
title: "正在创建订单",
|
||
mask: true,
|
||
});
|
||
const data = {
|
||
order_type: +this.reservationInfo.orderInfo.orderType, // 订单类型 (required)
|
||
address_id: this.reservationInfo?.addresInfo?.id, // 地址id
|
||
order_date: this.reservationInfo?.reservationTime?.date, // 预约日期 (required)
|
||
pay_type: +this.payment_type, // 支付方式 (required)
|
||
};
|
||
|
||
data.pet_list = this.petWithItemsListForDisplay.map(pet => {
|
||
|
||
const petData = {
|
||
id: pet.id,
|
||
note: pet.note
|
||
};
|
||
// 只有当 additionalItems 存在且不为空时才添加
|
||
if (pet.additionalItems && Array.isArray(pet.additionalItems) && pet.additionalItems.length > 0) {
|
||
petData.additional_items = pet.additionalItems;
|
||
}
|
||
return petData;
|
||
});
|
||
|
||
// 可选字段：时段id
|
||
if (this.reservationInfo?.reservationTime?.id) {
|
||
data.period_id = +this.reservationInfo.reservationTime.id;
|
||
}
|
||
|
||
// 可选字段：停车状况
|
||
if (this.reservationInfo.orderInfo.parkState) {
|
||
data.park_desc = this.reservationInfo.orderInfo.parkState;
|
||
}
|
||
|
||
// 可选字段：小哇ID
|
||
if (this.reservationInfo.orderInfo.xwID) {
|
||
data.wa_code = +this.reservationInfo.orderInfo.xwID;
|
||
}
|
||
|
||
// 可选字段：优惠券
|
||
if (this.selectCoupon.distribution_id) {
|
||
data.distribution_id = this.selectCoupon.distribution_id;
|
||
}
|
||
|
||
// 可选字段：附加项
|
||
// if (this.reservationInfo?.selectidList && this.reservationInfo.selectidList.length > 0) {
|
||
// data.additional_items = this.reservationInfo.selectidList;
|
||
// }
|
||
|
||
createOrder(data)
|
||
.then((res) => {
|
||
if (
|
||
Object.keys(this.selectService).length ||
|
||
`${this.showPrice}` === "0.00"
|
||
) {
|
||
const eventChannel = this.getOpenerEventChannel();
|
||
eventChannel.emit("clearData");
|
||
uni.hideLoading();
|
||
this.showSuccessModal = true;
|
||
} else {
|
||
if (this.WeChat == 1) {
|
||
this.weixinPay(res.data);
|
||
} else if (this.wallet == 2) {
|
||
this.buyService(res.data);
|
||
}
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
|
||
uni.showToast({
|
||
title: error,
|
||
icon: "none",
|
||
});
|
||
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
weixinPay(orderInfo) {
|
||
const params = {
|
||
user_id: this.userInfo.userID,
|
||
type: 3,// 3 洗护
|
||
total_fee: orderInfo.pay_amount,
|
||
order_id: orderInfo.order_id,
|
||
order_no: orderInfo.order_no,
|
||
}
|
||
payOrder(params)
|
||
.then((res) => {
|
||
tt.pay({
|
||
orderInfo: {
|
||
order_id:res.data.orderInfo.order_id,
|
||
order_token:res.data.orderInfo.order_token,
|
||
},
|
||
service:5,
|
||
success: (res) => {
|
||
uni.hideLoading();
|
||
const eventChannel = this.getOpenerEventChannel();
|
||
eventChannel.emit("clearData");
|
||
this.showSuccessModal = true;
|
||
},
|
||
|
||
fail: (err) => {
|
||
setTimeout(function () {
|
||
uni.redirectTo({
|
||
url: "/pages/client/petOrder/index",
|
||
complete() {
|
||
uni.$emit("changeTabBar", {
|
||
pageId: "orderPage",
|
||
orderState: ORDER_STATUS_RESERVED,
|
||
});
|
||
},
|
||
});
|
||
}, 1000);
|
||
uni.showToast({
|
||
title: "订单已创建，继续支付或取消",
|
||
icon: "none",
|
||
});
|
||
uni.hideLoading();
|
||
},
|
||
});
|
||
})
|
||
.catch(() => {
|
||
uni.showToast({
|
||
title: "订单已创建，继续支付或取消",
|
||
icon: "none",
|
||
});
|
||
setTimeout(function () {
|
||
uni.redirectTo({
|
||
url: "/pages/client/petOrder/index",
|
||
complete() {
|
||
uni.$emit("changeTabBar", {
|
||
pageId: "orderPage",
|
||
orderState: ORDER_STATUS_RESERVED,
|
||
});
|
||
},
|
||
});
|
||
}, 1000);
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
paySuccessAction() {
|
||
uni.redirectTo({
|
||
url: "/pages/client/petOrder/index",
|
||
complete() {
|
||
uni.$emit("changeTabBar", {
|
||
pageId: "orderPage",
|
||
orderState: ORDER_STATUS_RESERVED,
|
||
});
|
||
},
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.payment-confirm-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
background-color: #fbf8fc;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding-bottom: 280rpx;
|
||
overflow: auto;
|
||
|
||
.payment-body-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 20rpx 32rpx 0 20rpx;
|
||
|
||
.info-cell {
|
||
width: 100%;
|
||
padding: 40rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 30rpx;
|
||
background-color: #ffffff;
|
||
margin-bottom: 20rpx;
|
||
|
||
.info-title-view {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
|
||
.phone-text {
|
||
margin-left: 24rpx;
|
||
}
|
||
}
|
||
|
||
.address-view {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.address-text {
|
||
margin-top: 12rpx;
|
||
}
|
||
}
|
||
|
||
.info-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
flex-shrink: 0;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.info-view {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.line-view {
|
||
width: 100%;
|
||
height: 2rpx;
|
||
background-color: #ececec;
|
||
margin: 20rpx 0;
|
||
}
|
||
}
|
||
|
||
.info-pet-cell {
|
||
padding: 20rpx 40rpx;
|
||
}
|
||
|
||
.info-pet-flex {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.pet-headImg {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
border-radius: 50%;
|
||
margin-right: 12rpx;
|
||
}
|
||
|
||
.petContext {
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.recharge-method {
|
||
width: 92.5%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #fff;
|
||
margin: 0 0 30rpx 30rpx;
|
||
border-radius: 30rpx;
|
||
|
||
.wechat {
|
||
width: 100%;
|
||
height: 58px;
|
||
/* 自动布局 */
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 40rpx 15rpx;
|
||
border-radius: 16rpx;
|
||
box-sizing: border-box;
|
||
// border: 1px solid #ececec;
|
||
// margin-top: 30rpx;
|
||
}
|
||
|
||
.select {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.w {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.x {
|
||
font-family: PingFangSC;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
line-height: 16px;
|
||
letter-spacing: normal;
|
||
color: #333333;
|
||
display: flex;
|
||
margin-left: 24rpx;
|
||
}
|
||
}
|
||
|
||
.not-selected {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
}
|
||
|
||
.recharge-method2 {
|
||
width: 93%;
|
||
margin: 0 auto;
|
||
// padding: 10rpx 0;
|
||
background: #fff;
|
||
margin-bottom: 20rpx;
|
||
border-radius: 30rpx;
|
||
|
||
.pet-count-summary {
|
||
padding: 24rpx 20rpx 32rpx 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
&-title {
|
||
color: #272427;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
}
|
||
|
||
&-value {
|
||
color: #272427;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
.info-cell {
|
||
width: 100%;
|
||
padding: 0 23rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 30rpx;
|
||
background-color: #ffffff;
|
||
margin-bottom: 20rpx;
|
||
|
||
.info-title-view {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
|
||
.phone-text {
|
||
margin-left: 24rpx;
|
||
}
|
||
}
|
||
|
||
.address-view {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.address-text {
|
||
margin-top: 12rpx;
|
||
}
|
||
}
|
||
|
||
.info-icon {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
flex-shrink: 0;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.info-view {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.line-view {
|
||
width: 100%;
|
||
height: 2rpx;
|
||
background-color: #ececec;
|
||
margin: 20rpx 0;
|
||
}
|
||
}
|
||
|
||
.wechat {
|
||
width: 92%;
|
||
height: 60rpx;
|
||
/* 自动布局 */
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 24rpx 0 24rpx;
|
||
border-radius: 8px;
|
||
// box-sizing: border-box;
|
||
// border: 1px solid #ececec;
|
||
margin-top: 10rpx;
|
||
|
||
.money4 {
|
||
color: #ff19a0;
|
||
font-family: PingFangSC;
|
||
font-size: 11px;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.x {
|
||
font-family: PingFangSC;
|
||
font-size: 24rpx;
|
||
font-weight: normal;
|
||
color: #9b939a;
|
||
}
|
||
|
||
.estimate {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
|
||
.money {
|
||
font-family: PingFangSC;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #272427;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.money1 {
|
||
font-family: PingFangSC;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #aaaaaa;
|
||
text-decoration: line-through;
|
||
// margin-right: 60rpx;
|
||
}
|
||
}
|
||
|
||
.money {
|
||
font-family: PingFangSC;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #272427;
|
||
// margin-right: 60rpx;
|
||
}
|
||
}
|
||
|
||
.pet-card {
|
||
background: #F5F5F5;
|
||
padding: 20rpx;
|
||
border-radius: 20rpx;
|
||
margin: 0 20rpx 16rpx 20rpx;
|
||
}
|
||
|
||
.pet-card-header {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.pet-card-info {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.pet-card-left {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
|
||
.pet-avatar-small {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.pet-info-small {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 4rpx;
|
||
|
||
.pet-name-small {
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.pet-desc-small {
|
||
font-size: 20rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pet-card-price {
|
||
font-size: 24rpx;
|
||
color: #272427;
|
||
font-weight: 500;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.pet-card-toggle {
|
||
color: #FF19A0;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pet-card-body {
|
||
margin-top: 24rpx;
|
||
|
||
.pet-detail-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 24rpx;
|
||
|
||
.pet-avatar {
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
border-radius: 50%;
|
||
margin-right: 8rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.pet-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.pet-name {
|
||
font-size: 24rpx;
|
||
color: #333333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.pet-desc {
|
||
font-size: 20rpx;
|
||
color: #666;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pet-card-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
font-size: 24rpx;
|
||
margin-top: 24rpx;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
.pet-card-label {
|
||
font-size: 24rpx;
|
||
color: #9B939A;
|
||
}
|
||
|
||
.pet-card-value,
|
||
.pet-card-money {
|
||
font-size: 24rpx;
|
||
color: #272427;
|
||
}
|
||
|
||
.pet-card-money-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
}
|
||
|
||
.pet-card-discount-tag {
|
||
font-size: 24rpx;
|
||
color: #FF19A0;
|
||
}
|
||
|
||
.pet-card-original-price {
|
||
font-size: 22rpx;
|
||
color: #9B939A;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.service-list {
|
||
.service-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 24rpx;
|
||
|
||
&:last-child {
|
||
border-bottom: none;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.service-item-name {
|
||
font-size: 24rpx;
|
||
color: #9B939A;
|
||
}
|
||
|
||
.service-item-price {
|
||
font-size: 24rpx;
|
||
color: #272427;
|
||
}
|
||
}
|
||
}
|
||
|
||
// .pet-card-total {
|
||
// margin-top: 12rpx;
|
||
// padding-top: 16rpx;
|
||
// border-top: 1rpx solid #ececec;
|
||
// }
|
||
|
||
.pet-card-remark {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
.pet-remark-input {
|
||
width: 100%;
|
||
padding: 0rpx 20rpx;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
font-size: 24rpx;
|
||
color: #272427;
|
||
box-sizing: border-box;
|
||
height: 64rpx;
|
||
}
|
||
}
|
||
|
||
.wechat1 {
|
||
width: 92%;
|
||
height: 60rpx;
|
||
/* 自动布局 */
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 24rpx 0 24rpx;
|
||
border-radius: 8px;
|
||
// box-sizing: border-box;
|
||
// border: 1px solid #ececec;
|
||
margin-top: 10rpx;
|
||
|
||
.x {
|
||
font-family: PingFangSC;
|
||
font-size: 24rpx;
|
||
font-weight: normal;
|
||
color: #9b939a;
|
||
}
|
||
|
||
.money6 {
|
||
font-family: PingFangSC;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #272427;
|
||
// margin-right: 60rpx;
|
||
}
|
||
|
||
.mb-discount {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.money {
|
||
font-family: PingFangSC;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #272427;
|
||
// margin-right: 60rpx;
|
||
}
|
||
|
||
.money4 {
|
||
color: #ff19a0;
|
||
font-family: PingFangSC;
|
||
font-size: 11px;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.money5 {
|
||
color: #aaaaaa;
|
||
font-family: PingFangSC;
|
||
font-size: 11px;
|
||
text-decoration: line-through;
|
||
}
|
||
}
|
||
}
|
||
|
||
.wechat2 {
|
||
width: 92%;
|
||
height: 60rpx;
|
||
/* 自动布局 */
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 24rpx 0 24rpx;
|
||
border-radius: 8px;
|
||
// box-sizing: border-box;
|
||
// border: 1px solid #ececec;
|
||
margin-top: 10rpx;
|
||
|
||
.x {
|
||
font-family: PingFangSC;
|
||
font-size: 24rpx;
|
||
font-weight: normal;
|
||
color: #9b939a;
|
||
}
|
||
|
||
.money {
|
||
font-family: PingFangSC;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #272427;
|
||
// margin-right: 60rpx;
|
||
}
|
||
|
||
.mb-discount {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.money {
|
||
font-family: PingFangSC;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #272427;
|
||
// margin-right: 60rpx;
|
||
}
|
||
|
||
.money4 {
|
||
color: #ff19a0;
|
||
font-family: PingFangSC;
|
||
font-size: 11px;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.money5 {
|
||
color: #aaaaaa;
|
||
font-family: PingFangSC;
|
||
font-size: 11px;
|
||
text-decoration: line-through;
|
||
}
|
||
}
|
||
|
||
.night {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.x {
|
||
font-family: PingFangSC;
|
||
font-size: 24rpx;
|
||
font-weight: normal;
|
||
color: #9b939a;
|
||
}
|
||
|
||
.x1 {
|
||
font-family: PingFangSC;
|
||
font-size: 12px;
|
||
color: #ff19a0;
|
||
margin-left: 4rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.carousel {
|
||
background: #fff;
|
||
padding: 30rpx 0;
|
||
margin: 0 0 20rpx 28rpx;
|
||
border-radius: 30rpx;
|
||
width: 93%;
|
||
|
||
// overflow: hidden;
|
||
.member-carousel {
|
||
width: 659rpx;
|
||
height: 253rpx;
|
||
margin-left: 30rpx;
|
||
display: flex;
|
||
// white-space: nowrap;
|
||
overflow: auto;
|
||
|
||
.actimeb {
|
||
height: 120px;
|
||
position: relative;
|
||
|
||
.q {
|
||
width: 38rpx;
|
||
height: 50rpx;
|
||
border-radius: 50%;
|
||
// border: 1px solid #000;
|
||
position: absolute;
|
||
bottom: 15rpx;
|
||
left: 7rpx;
|
||
z-index: 1000000;
|
||
}
|
||
|
||
.mn {
|
||
position: absolute;
|
||
bottom: 18rpx;
|
||
left: 74rpx;
|
||
font-family: PingFangSC;
|
||
font-size: 24px;
|
||
color: #3d3d3d;
|
||
}
|
||
|
||
.mn2 {
|
||
position: absolute;
|
||
bottom: 18rpx;
|
||
left: 74rpx;
|
||
font-family: PingFangSC;
|
||
font-size: 24px;
|
||
color: #644d29;
|
||
}
|
||
|
||
.mn3 {
|
||
position: absolute;
|
||
bottom: 23rpx;
|
||
left: 74rpx;
|
||
font-family: PingFangSC;
|
||
font-size: 24px;
|
||
color: #cbad78;
|
||
}
|
||
|
||
.img-meb {
|
||
width: 220px;
|
||
// display: inline-block;
|
||
height: 115.25px;
|
||
// display: inline-block; /* 使图片并排显示 */
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
|
||
.img-meb {
|
||
width: 220px;
|
||
// display: inline-block;
|
||
height: 115.25px;
|
||
// display: inline-block; /* 使图片并排显示 */
|
||
margin-right: 10px;
|
||
}
|
||
|
||
// }
|
||
|
||
// }
|
||
}
|
||
|
||
.rights {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.r1 {
|
||
font-family: PingFang SC;
|
||
font-size: 12px;
|
||
color: #3d3d3d;
|
||
}
|
||
|
||
.r2 {
|
||
font-family: PingFang SC;
|
||
font-size: 12px;
|
||
color: #ff0097;
|
||
}
|
||
}
|
||
}
|
||
|
||
.elastic-layer {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
z-index: 999;
|
||
}
|
||
|
||
.select-pet {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
background: #fff;
|
||
padding-bottom: 60rpx;
|
||
width: 100%;
|
||
border-radius: 20px 20px 0px 0px;
|
||
height: 942rpx;
|
||
z-index: 99999;
|
||
|
||
.agreement {
|
||
position: absolute;
|
||
bottom: 44rpx;
|
||
left: 105px;
|
||
|
||
.not-selected {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
}
|
||
|
||
.agreement-img {
|
||
position: absolute;
|
||
bottom: 41rpx;
|
||
left: 140px;
|
||
// border: 1px solid #000;
|
||
width: 313rpx;
|
||
height: 37rpx;
|
||
}
|
||
|
||
.close-icon {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
// border: 1px solid #000;
|
||
position: absolute;
|
||
right: 31rpx;
|
||
top: 35rpx;
|
||
}
|
||
|
||
.file-b {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.origin1 {
|
||
position: absolute;
|
||
left: 34rpx;
|
||
top: 121rpx;
|
||
width: 209rpx;
|
||
height: 126rpx;
|
||
}
|
||
|
||
.origin2 {
|
||
position: absolute;
|
||
left: 272rpx;
|
||
top: 121rpx;
|
||
width: 209rpx;
|
||
height: 126rpx;
|
||
}
|
||
|
||
.origin3 {
|
||
position: absolute;
|
||
left: 500rpx;
|
||
top: 121rpx;
|
||
width: 209rpx;
|
||
height: 126rpx;
|
||
}
|
||
|
||
.money {
|
||
position: absolute;
|
||
left: 46rpx;
|
||
bottom: 113rpx;
|
||
font-family: Source Han Sans;
|
||
font-size: 24px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.amountOut {
|
||
position: absolute;
|
||
left: 20rpx;
|
||
bottom: 113rpx;
|
||
width: 698rpx;
|
||
height: 98rpx;
|
||
// border: 1px solid #000;
|
||
}
|
||
|
||
.money1 {
|
||
position: absolute;
|
||
right: 92rpx;
|
||
bottom: 66rpx;
|
||
font-family: PingFangSC;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #ff0097;
|
||
}
|
||
|
||
.money2 {
|
||
position: absolute;
|
||
right: 81rpx;
|
||
bottom: 205rpx;
|
||
font-family: Source Han Sans;
|
||
font-size: 16px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.original {
|
||
display: flex;
|
||
position: absolute;
|
||
left: 176rpx;
|
||
bottom: 125rpx;
|
||
|
||
.y {
|
||
font-family: PingFangSC;
|
||
font-size: 12px;
|
||
font-weight: normal;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.roll-rights {
|
||
position: absolute;
|
||
left: 38rpx;
|
||
bottom: 204rpx;
|
||
width: 350px;
|
||
|
||
.roll-item {
|
||
display: flex;
|
||
overflow: auto;
|
||
width: 363px;
|
||
height: 200rpx;
|
||
|
||
// border: 1px solid #000;
|
||
.roll-e {
|
||
// width: 280px;
|
||
display: flex;
|
||
|
||
.roll-t {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 150rpx;
|
||
|
||
.m {
|
||
width: 36px;
|
||
height: 36px;
|
||
}
|
||
|
||
.z {
|
||
font-family: PingFangSC;
|
||
font-size: 12px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.handle-view {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
box-sizing: border-box;
|
||
box-shadow: 0px -2rpx 10rpx 0px rgba(0, 0, 0, 0.05);
|
||
z-index: 99;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.handle-view-content {
|
||
width: 99%;
|
||
padding: 40rpx 36rpx 40rpx;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
}
|
||
|
||
.handle-safe-area {
|
||
height: constant(safe-area-inset-bottom);
|
||
height: env(safe-area-inset-bottom);
|
||
background-color: #fff;
|
||
}
|
||
|
||
.handle-info {
|
||
display: flex;
|
||
flex: 1;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
.handle-info-cell {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: flex-end;
|
||
width: 100%;
|
||
|
||
.money {
|
||
color: #ff19a0;
|
||
font-weight: bold;
|
||
font-family: Source Han Sans;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.app-fc1 {
|
||
text-decoration: line-through;
|
||
color: #999999;
|
||
font-family: PingFangSC;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.app-fc12 {
|
||
text-decoration: line-through;
|
||
color: #999999;
|
||
font-family: PingFangSC;
|
||
font-size: 16px;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.tips-icon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
}
|
||
}
|
||
|
||
.tip-cell {
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.handle-btn {
|
||
width: 260rpx;
|
||
height: 90rpx;
|
||
border-radius: 45rpx;
|
||
background-color: #ff19a0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.cfom {
|
||
color: #fff;
|
||
font-size: 16px;
|
||
font-family: PingFangSC;
|
||
}
|
||
}
|
||
}
|
||
|
||
.elastic-layer {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-end;
|
||
z-index: 999;
|
||
}
|
||
|
||
.additional-bottom {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 9999;
|
||
|
||
.close-icon {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
position: absolute;
|
||
right: 23rpx;
|
||
top: 2rpx;
|
||
}
|
||
|
||
.recharge-method2 {
|
||
height: 541rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #fff;
|
||
margin-bottom: 20rpx;
|
||
border-radius: 30rpx;
|
||
width: 100%;
|
||
|
||
.wechat {
|
||
width: 92%;
|
||
height: 58px;
|
||
/* 自动布局 */
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 12px;
|
||
border-radius: 8px;
|
||
box-sizing: border-box;
|
||
// border: 1px solid #ececec;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.select {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.w {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.x {
|
||
font-family: PingFangSC;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
line-height: 16px;
|
||
letter-spacing: normal;
|
||
color: #3d3d3d;
|
||
display: flex;
|
||
margin-left: 24rpx;
|
||
}
|
||
}
|
||
|
||
.not-selected {
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
}
|
||
|
||
.payment {
|
||
position: absolute;
|
||
border-radius: 100px;
|
||
bottom: 50rpx;
|
||
left: 30rpx;
|
||
width: 343px;
|
||
height: 48px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid #FF19A0;
|
||
z-index: 10000;
|
||
|
||
.Z {
|
||
font-family: PingFang SC;
|
||
font-size: 16px;
|
||
font-weight: normal;
|
||
color: #FF19A0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |