2614 lines
75 KiB
Vue
2614 lines
75 KiB
Vue
<template>
|
||
<view class="container" :class="[`${themeInfo.theme}-theme`, `${themeInfo.language}`]">
|
||
<view class="selectSite card" @click="goSite">
|
||
<view class="left">
|
||
<image src="/static/home/address.svg" mode="heightFix" class="icon"></image>
|
||
<text class="address fontb">{{ unitTypeData[0]?.city }}·{{ unitTypeData[0]?.district }}</text>
|
||
</view>
|
||
<view class="right">
|
||
<text class="more fontb">更多分店</text><image src="/static/home/jiantou.svg" style="width: 24rpx;height: 24rpx;" class="icon"></image>
|
||
</view>
|
||
</view>
|
||
<template v-if="state.siteId">
|
||
<view class="siteInfo card">
|
||
<!-- 顶部：左中右布局 -->
|
||
<view class="top">
|
||
<view class="left">
|
||
<image src="/static/home/siteicon.svg" class="icon"></image>
|
||
<view class="title-wrap">
|
||
<text class="title font36 fontb">{{ unitTypeData[0]?.sitdName }}</text>
|
||
<!-- <view class="tag font16 fontb">距离最近</view> -->
|
||
</view>
|
||
</view>
|
||
<view class="right" v-if="siteDistance" @click="handleNavigate">
|
||
<text class="distance font28 fontb">{{ siteDistance }}KM</text>
|
||
</view>
|
||
</view>
|
||
<!-- 底部：地址 -->
|
||
<view class="bottom" @click="handleNavigate">
|
||
<image src="/static/home/siteicon2.svg" class="icon"></image>
|
||
<text class="address font26 fontb textGary">{{ unitTypeData[0]?.sitdAddress }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="unitType card" v-if="unitTypeData.length">
|
||
<view class="title font32 fontb mgb20">
|
||
仓型选择
|
||
</view>
|
||
<view class="swiper" >
|
||
<view class="info">
|
||
<view class="left arrow">
|
||
<view class="arrowIcon" @click="prev" v-if="unitTypeData.length > 1">
|
||
<image src="/static/home/jiantouleft.svg" style="width: 64rpx;height: 64rpx;" class="icon"></image>
|
||
</view>
|
||
</view>
|
||
<view class="swiper-container" >
|
||
<swiper class="warehouse-detail" circular style="height: 300rpx;" :indicator-dots="false"
|
||
:autoplay="false" @change="changeMove" :current="state.active">
|
||
<swiper-item v-for="(item, index) in unitTypeData" :key="index">
|
||
<view class="warehouse-detail-items">
|
||
<image class="warehouse-detail-right" @click="showImage(baseImageUrl + item.imgUrl)"
|
||
:src="baseImageUrl + item.imgUrl" mode="widthFix"></image>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
</view>
|
||
<view class="right arrow">
|
||
<view class="arrowIcon" @click="next" v-if="unitTypeData.length > 1">
|
||
<image src="/static/home/jiantouright.svg" style="width: 64rpx;height: 64rpx;" class="icon"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bottom" v-if="unitTypeData.length">
|
||
<view class="font32 fontb name">
|
||
{{ unitTypeData[state.active].name }}
|
||
</view>
|
||
<view class="font26 fontb textGary" style="padding: 0 28rpx;padding-right: 0;">
|
||
{{ unitTypeData[state.active].volumeRange }}
|
||
</view>
|
||
<view class="font26 fontb textGary">({{ unitTypeData[state.active].description }})</view>
|
||
</view>
|
||
</view>
|
||
<view class="full-wrap card" v-if="!unitTypeData[state.active]?.hasAvailableLocker">
|
||
{{ $t("site.full") }}
|
||
<uv-button :plain="!isApply" @click="postWaitingAppointment" color="#FB322E" >
|
||
{{
|
||
isApply === false
|
||
? "加入候补"
|
||
: "已候补"
|
||
}}
|
||
</uv-button>
|
||
</view>
|
||
<view class="empt font32 fontb" v-if="unitTypeData.length === 0" style="text-align: center;margin-top: 20rpx;">
|
||
暂无可用仓型，请选择其他门店～
|
||
</view>
|
||
<view class="orderInfo sflist card" v-if="unitTypeData.length && unitTypeData[state.active]?.hasAvailableLocker">
|
||
<ul>
|
||
<li @click="showUnitPopup">
|
||
<view class="left"><text class="font32 fontb">体积</text>
|
||
<!-- <text style="font-size: 26rpx;margin-left: 10rpx;"
|
||
v-if="state.selectUnitRow?.name">（仓号：{{ state.selectUnitRow?.name }}）</text> -->
|
||
</view>
|
||
<view class="right font26 fontb"><text
|
||
:style="{ color: state.selectUnitRow?.name ? '#000000' : '#FB322E' }">{{
|
||
state.selectUnitRow?.name ? `${state.selectUnitRow?.volume}m³ ` : "请选择" }} </text>
|
||
<image src="/static/home/jiantou.svg" style="width: 24rpx;height: 24rpx;" class="icon"></image>
|
||
</view>
|
||
</li>
|
||
<li @click="showMonthPopup" class="zuqi">
|
||
<view class="left"><text class="font32 fontb">租期</text></view>
|
||
<view class="right font26 fontb" :class="{textGary:!state.month}"><text>{{ state.month }}个月</text>
|
||
<image src="/static/home/jiantou.svg" style="width: 24rpx;height: 24rpx;" class="icon"></image>
|
||
</view>
|
||
</li>
|
||
<li @click="openCoupon">
|
||
<view class="left"><text class="font32 fontb">优惠劵</text></view>
|
||
<view class="right font26 fontb">
|
||
<text v-for="(item, index) in state.couponItem" :key="index">{{ couponDesc(item) }}</text>
|
||
<text class="textGary" v-if="!state.couponItem.length &&!state.couponOtherItem.length">{{
|
||
$t("detail.noselect")
|
||
}}</text>
|
||
<image src="/static/home/jiantou.svg" style="width: 24rpx;height: 24rpx;" class="icon"></image>
|
||
</view>
|
||
</li>
|
||
<li>
|
||
<view class="left"><text class="font32 fontb">租金</text></view>
|
||
<view class="right font26 fontb" :class="{textGary:!state.priceData?.price}"><text>{{ state.priceData?.price ? `￥ ${state.priceData?.price}` :
|
||
'--'
|
||
}} </text>
|
||
</view>
|
||
</li>
|
||
<li @click="showCalendar">
|
||
<view class="left"><text class="font32 fontb">开始时间</text></view>
|
||
<view class="right font26 fontb"><text>{{ dayjs(state.startDate).format("YYYY/MM/DD") }}</text>
|
||
<image src="/static/home/jiantou.svg" style="width: 24rpx;height: 24rpx;" class="icon"></image>
|
||
</view>
|
||
</li>
|
||
<li @click="goVaild">
|
||
<view class="left"><text class="font32 fontb">实名验证</text></view>
|
||
<view class="right font26 fontb textGary"><text
|
||
:style="{ color: state.hasVerify ? '#1E9B00' : '#FB322E' }">{{
|
||
state.hasVerify ? '已验证' : '未验证' }}</text>
|
||
<image src="/static/home/jiantou.svg" v-if="!state.hasVerify" style="width: 24rpx;height: 24rpx;" class="icon"></image>
|
||
</view>
|
||
</li>
|
||
</ul>
|
||
</view>
|
||
<view class="goReserve font28 fontb" @click="goReserve">
|
||
<view class="left"><text>预约</text><text>咨询</text> </view>
|
||
<view class="right">
|
||
填写预约，专员为您估价与讲解。<image src="/static/home/jiantou.svg" style="width: 24rpx;height: 24rpx;" class="icon"></image>
|
||
</view>
|
||
</view>
|
||
<view class="kefu font28 fontb" style="padding: 20rpx 0;color: #A8AAAC;">
|
||
租赁相关问题可联系客服咨询(电话:<text @click="openPopup" style="color: #2E5DB5;">4008181813</text>)
|
||
</view>
|
||
<view class="toOrderBox">
|
||
<view class="agreed" v-if="unitTypeData.length" @click="changeCheck">
|
||
<view class="check-wrap" :class="{ checked: state.checked }">
|
||
<uv-radio-group v-model="state.checked" activeColor="#fb322e" size="30rpx" inactiveColor="#D8D8D8">
|
||
<uv-radio activeColor="#fb322e" :key="0" :name="true">
|
||
</uv-radio></uv-radio-group>
|
||
</view>
|
||
<view style="display: flex;align-items: center;">
|
||
<text class="stress" @click="openAgreement">阅读并同意<text style="color: #2E5DB5;">《订仓协议》</text></text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="agreed agreed2"><text class="stress">租赁相关问题可联系客服咨询(电话:4008181813)</text></view> -->
|
||
<view class="toOrder card font28" v-if="unitTypeData.length">
|
||
<view class="left font28">
|
||
<text class="price fontb" :class="{ overMaxFont: String(state.priceData?.discountExpense).length>6 }"><text v-if="state.priceData.expense" style="font-size: 30rpx;">租金￥</text>{{ state.priceData.discountExpense ? `${state.priceData.discountExpense}` : '--'
|
||
}}</text>
|
||
<view class="detail" v-if="state.priceData.expense" @click="showPayPopup"><text class="detail1" :class="{ overMaxFont:String(state.priceData?.lockerExpense).length>6 }" v-if="state.priceData?.expense">￥{{ state.priceData.lockerExpense }}</text>
|
||
<!-- <text class="detail2">明细</text> -->
|
||
<!-- <image src="/static/home/jiantouup.svg" style="height: 10rpx;margin-left: 10rpx;" mode="heightFix" class="icon"></image> -->
|
||
</view>
|
||
</view>
|
||
<!-- <view class="left" >
|
||
<text class="price fontb" :class="{ overMaxFont: String(state.priceData?.expense).length>6 }"> {{ state.priceData.expense ? `￥${state.priceData.expense}` : '￥--'
|
||
}}</text>
|
||
<view class="detail" v-if="state.priceData.expense" @click="showPayPopup"><text class="detail1" :class="{ overMaxFont:String(state.priceData?.expense).length>6 }" v-if="state.priceData?.expense">￥{{ state.priceData.leaseOriginalPrice }}</text><text class="detail2">明细</text>
|
||
<image src="/static/home/jiantouup.svg" style="height: 10rpx;margin-left: 10rpx;" mode="heightFix" class="icon"></image>
|
||
</view>
|
||
</view> -->
|
||
<view class="right">
|
||
<uv-button :customStyle="{
|
||
height: '86rpx',
|
||
color: '#fff',
|
||
}" :textStyle="{
|
||
fontSize: '32rpx',
|
||
fontWeight: 'bold',
|
||
}" shape="circle" @click="showPayPopup" color="#FB322E" :disabled="!state.lockerId || !state.month"
|
||
class="goOrder">下单</uv-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</template>
|
||
<template v-else>
|
||
<!-- <view style="margin-top: 40vh;" @click="goSite">
|
||
<uv-button :customStyle="{
|
||
height: '86rpx',
|
||
width: '560rpx',
|
||
color: '#2979ff',
|
||
fontSize: '32rpx',
|
||
}" shape="circle">选择门店</uv-button>
|
||
</view> -->
|
||
<view class="empt font32 fontb" @click="goSite" style="text-align: center;margin-top: 20rpx;">
|
||
请选择其他门店～
|
||
</view>
|
||
</template>
|
||
<div class="footer">
|
||
<myCustomtTabBar direction="horizontal" :show-icon="true" :selected="0" @onTabItemTap="onTabItemTap">
|
||
</myCustomtTabBar>
|
||
</div>
|
||
<uv-popup ref="unitPopupRef" mode="bottom" zIndex="999" round="24px">
|
||
<view class="unitPopupBox">
|
||
<view class="title font36 fontb">
|
||
体积选择 <image class="close-icon" style="width: 30rpx;height: 30rpx;" src="/static/home/close2.svg" @click="hideUnitPopup"></image>
|
||
</view>
|
||
<view class="info">
|
||
<uv-radio-group v-model="state.radiovalue" activeColor="#fb322e" size="40rpx" inactiveColor="#D8D8D8">
|
||
<view class="list" v-for="(item, index) in LockerList">
|
||
<view class="left">
|
||
<view class="volume mgb10 font28 fontb">
|
||
体积: {{ item.volume }}m³
|
||
</view>
|
||
<view class="unit textGary font28 fontb mgb10">
|
||
仓号: {{ item.name }}
|
||
</view>
|
||
<view class="site textGary font28 fontb mgb10">
|
||
尺寸: {{ item.length }}m*{{ item.width }}m*{{ item.height }}m
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="radioBox">
|
||
<uv-radio :key="item.lockerId" :name="item.lockerId" size="40rpx">
|
||
</uv-radio>
|
||
</view>
|
||
<view class="price mgb10">
|
||
<text class="font28 textGary fontb" style="text-decoration: line-through;text-decoration-color: rgb(0, 0, 0);padding-right: 20rpx;">￥ {{
|
||
item.price
|
||
}}/月</text>
|
||
<text class="font28 fontb" style="color: #D2021B;">￥ {{ item.currentPrice }}/月</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uv-radio-group>
|
||
</view>
|
||
<view class="btn" style="display: flex;justify-content: center;">
|
||
<uv-button @click="confirmUnit" :customStyle="{
|
||
height: '86rpx',
|
||
color: '#fff',
|
||
fontSize: '32rpx',
|
||
width: '630rpx',
|
||
}" color="#FB322E" shape="circle">
|
||
确定
|
||
</uv-button>
|
||
</view>
|
||
</view>
|
||
</uv-popup>
|
||
<uv-popup ref="monthPopupRef" mode="bottom" zIndex="999" round="24px">
|
||
<view class="unitPopupBox">
|
||
<view class="title font36 fontb">
|
||
租期选择 <image class="close-icon" style="width: 30rpx;height: 30rpx;" src="/static/home/close2.svg" @click="hideMonthPopup"></image>
|
||
</view>
|
||
<view class="info">
|
||
<uv-radio-group v-model="state.radioMonthvalue" activeColor="#fb322e" size="40rpx" labelWidth="0" inactiveColor="#D8D8D8">
|
||
<view class="list" v-for="item in state.lockData?.discountList">
|
||
<view class="left">
|
||
<view class="volume mgb10 font28 fontb">
|
||
租期: {{ item.month }}个月
|
||
</view>
|
||
<view class="unit mgb10 textRed font28 fontb">
|
||
优惠: 享受{{ (item.discount * 100) / 10 }}折优惠
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="radioBox">
|
||
<uv-radio :key="item.month" :name="item.month">
|
||
</uv-radio>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="list">
|
||
<view class="left">
|
||
<view class="volume mgb10 font28 fontb zuqi" style="display: flex;">
|
||
自定义租期:
|
||
<!-- <uv-number-box v-model="state.selfMonth" buttonSize="26" color="#000" bgColor="#EBEBEB"
|
||
:min="1" :max="24" :step="1" iconStyle="color: #fff"></uv-number-box> -->
|
||
<uv-number-box v-model="state.selfMonth" :min="1" :max="24" :step="1">
|
||
<template v-slot:minus>
|
||
<view class="minus">
|
||
<uv-icon name="minus" size="20rpx">
|
||
</uv-icon>
|
||
</view>
|
||
</template>
|
||
<template v-slot:input>
|
||
<text style="width: 50px;text-align: center;color: #000;" class="input">
|
||
{{state.selfMonth}}
|
||
</text>
|
||
</template>
|
||
<template v-slot:plus>
|
||
<view class="plus">
|
||
<uv-icon name="plus" color="#FFFFFF" size="20rpx">
|
||
</uv-icon>
|
||
</view>
|
||
</template>
|
||
</uv-number-box>
|
||
个月
|
||
</view>
|
||
<view class="unit mgb10 textRed font28 fontb" v-if="selfDiscount !== 1">
|
||
优惠: 享受{{ selfDiscount * 100 / 10 }}折优惠
|
||
</view>
|
||
<view class="unit mgb10 textRed font28 fontb" v-else>
|
||
优惠: --
|
||
</view>
|
||
<!-- <view class="site textGary mgb10">
|
||
尺寸: 120cm*100cm*100cm
|
||
</view> -->
|
||
</view>
|
||
<view class="right">
|
||
<view class="radioBox">
|
||
<uv-radio :key="0" :name="-1">
|
||
</uv-radio>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</uv-radio-group>
|
||
</view>
|
||
<view class="btn" @click="confirmMonth" style="display: flex;justify-content: center;" >
|
||
<uv-button :customStyle="{
|
||
height: '86rpx',
|
||
color: '#fff',
|
||
fontSize: '32rpx',
|
||
width: '630rpx',
|
||
}" color="#FB322E" shape="circle">
|
||
确定
|
||
</uv-button>
|
||
</view>
|
||
</view>
|
||
</uv-popup>
|
||
<uv-popup ref="payPopupRef" mode="bottom" zIndex="999" round="24px">
|
||
<view class="unitPopupBox payPopupBox">
|
||
<view class="title font36 fontb">
|
||
租赁费用详情 <image class="close-icon" style="width: 30rpx;height: 30rpx;" src="/static/home/close2.svg" @click="hidePayPopup"></image>
|
||
</view>
|
||
<view class="garyBox font28 card20">
|
||
（体积月费 x 租期 + 押金）- 优惠
|
||
</view>
|
||
<view class="title2 font32 fontb">
|
||
<text>租赁体积</text> <text>{{ `${state.selectUnitRow?.volume}m³` }}</text>
|
||
</view>
|
||
<view class="garyBox font28 card20">
|
||
<view class="mgb10">
|
||
仓号: {{ state.selectUnitRow?.name }}
|
||
</view>
|
||
<view class="">
|
||
尺寸: {{ state.selectUnitRow?.['length'] }}m*{{ state.selectUnitRow?.width }}m*{{ state.selectUnitRow?.height
|
||
}}m
|
||
</view>
|
||
</view>
|
||
<view class="title2 font32 fontb">
|
||
<text>租金总价</text> <text>￥ {{ state.priceData?.lockerExpense }}</text>
|
||
</view>
|
||
<view class="title2 textGary2 fontb font28">
|
||
<text>租金月费</text> <text> ￥ {{ state.priceData?.lockerPrice }}</text>
|
||
</view>
|
||
<view class="title2 textGary2 fontb font28">
|
||
<text>租期时长</text> <text> {{ state.month }}个月</text>
|
||
</view>
|
||
<view class="title2 font32 fontb">
|
||
<text>押金费用</text> <text>￥ {{ state.priceData.securityDeposit }}</text>
|
||
</view>
|
||
<view class="title2 textGary2 fontb font28">
|
||
<text>租赁押金在租期结束后给予归还</text>
|
||
</view>
|
||
<view class="title2 font32 fontb">
|
||
<text>优惠信息</text> <text style="color: #FB322E;">-￥ {{ state.priceData.favorable }}</text>
|
||
</view>
|
||
<view class="title2 textGary2 fontb font28">
|
||
<text>优惠劵优惠</text><text style="color: #FB322E;">-￥ {{
|
||
state.priceData.codeFavorable
|
||
}}</text>
|
||
</view>
|
||
<view class="title2 textGary2 fontb font28">
|
||
<text>租期优惠（{{state.month}}个月长租）</text><text style="color: #FB322E;">-￥ {{ state.priceData.leaseDiscount }}</text>
|
||
</view>
|
||
<view class="agreed" @click="changeCheck">
|
||
<view class="check-wrap" :class="{ checked: state.checked }">
|
||
<uv-radio-group v-model="state.checked" activeColor="#fb322e" size="30rpx" inactiveColor="#D8D8D8">
|
||
<uv-radio activeColor="#fb322e" :key="0" :name="true">
|
||
</uv-radio></uv-radio-group>
|
||
</view>
|
||
<view style="display: flex;align-items: center;">
|
||
<text class="stress" @click="openAgreement">阅读并同意<text style="color: #2E5DB5;">《订仓协议》</text></text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="agreed agreed2"><text class="stress">租赁相关问题可联系客服咨询(电话:4008181813)</text></view> -->
|
||
<view class="toOrder card font28">
|
||
<view class="left font28">
|
||
<text class="price fontb" :class="{ overMaxFont: String(state.priceData?.expense).length>6 }"> {{ state.priceData.expense ? `￥${state.priceData.expense}` : '--'
|
||
}}</text>
|
||
<view class="detail" v-if="state.priceData.expense" @click="hidePayPopup"><text class="detail1" :class="{ overMaxFont: String(state.priceData?.expense).length>6 }" v-if="state.priceData?.expense">￥{{ state.priceData.leaseOriginalPrice }}</text><text class="detail2">明细</text>
|
||
<image src="/static/home/jiantouup.svg" style="height: 12rpx;margin-left: 10rpx;" mode="heightFix" class="icon"></image>
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<uv-button :customStyle="{
|
||
height: '86rpx',
|
||
color: '#fff',
|
||
}" :textStyle="{
|
||
fontSize: '32rpx',
|
||
fontWeight: 'bold',
|
||
}" color="#FB322E" :disabled="!state.lockerId || !state.month" @click="goOrder" shape="circle"
|
||
class="goOrder">下单</uv-button>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</uv-popup>
|
||
<uv-popup ref="agreementRef" mode="bottom" :closeOnClickOverlay="false" width="750rpx" zIndex="999" round="24px">
|
||
<view class="agreement-wrap">
|
||
<view class="agreement-top">
|
||
<view>
|
||
|
||
</view>
|
||
<view class="name">{{ $t("detail.agreement") }}</view>
|
||
<image class="close-icon" style="width: 30rpx;height: 30rpx;" src="/static/home/close2.svg" @click="closeAgreement"></image>
|
||
</view>
|
||
<scroll-view class="agreement-content" :scroll-top="state.scrollTop" scroll-y="true"
|
||
@scrolltolower="handleScrollBottom" @scroll="handleScroll">
|
||
<!-- themeInfo.language === 'en_lang' ? state.enAgreementContent : state.agreementContent -->
|
||
<uv-parse :content="state.agreementContent" :tag-style="state.tagStyle"></uv-parse>
|
||
<view style="margin-top: 200rpx;">
|
||
<uv-loading-icon v-if="!state.agreementContent" :vertical="true"
|
||
:text="$t('common.loading')"></uv-loading-icon>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- <view class="roll-btn" @click="handleRoll">
|
||
<uv-icon name="arrow-down" size="24" color="#FFFFFF"></uv-icon>
|
||
</view> -->
|
||
<view class="bottom-read agree" v-if="state.isRead" @click="handleAgree">{{ $t("detail.agreeTerm") }}</view>
|
||
<view class="bottom-read" v-else>{{ $t("detail.scrollRead") }}</view>
|
||
</view>
|
||
</uv-popup>
|
||
<myModal v-model="state.showhasOrderModal" :content="$t('common.cantUselocker')" :cancelShow="false"></myModal>
|
||
<myModal v-model="state.showhasunpaidOrderModal" :content="$t('common.unpaidOrderTips')" @confirm="unpaidOrder" :cancelShow="false"></myModal>
|
||
|
||
<uv-popup ref="openPopupRef" customStyle="width: 620rpx; border-radius: 24rpx;" :safeAreaInsetBottom="false" :closeOnClickOverlay="false"
|
||
zIndex="9999">
|
||
<view class="modal-container-callPhone">
|
||
<view class="modal-title">提示</view>
|
||
<text class="modal-text">
|
||
确定拨打电话 {{ projectInfo.callPhone }} 吗？
|
||
</text>
|
||
<view class="modal-button">
|
||
<!-- <view class="modal-button-2" @click="goEvaluate">{{ $t("unlock.evaluate") }}</view> -->
|
||
<uv-button @click="closePopup" :customStyle="{
|
||
height: '86rpx',
|
||
lineHeight: '86rpx',
|
||
color: '#000',
|
||
fontSize: '32rpx',
|
||
}" shape="circle">
|
||
关闭
|
||
</uv-button>
|
||
<uv-button :customStyle="{
|
||
height: '86rpx',
|
||
lineHeight: '86rpx',
|
||
color: '#fff',
|
||
fontSize: '32rpx',
|
||
}" color="#FB322E" shape="circle" @click="callPhone">
|
||
拨号
|
||
</uv-button>
|
||
</view>
|
||
</view>
|
||
</uv-popup>
|
||
<uv-calendar
|
||
:safeAreaInsetBottom="false" :closeOnClickOverlay="false"
|
||
ref="calendars"
|
||
:minDate="state.minDate"
|
||
:date = "state.startDate"
|
||
confirmText="确定"
|
||
cancelText="取消"
|
||
title="开始时间"
|
||
:maxDate="state.maxDate"
|
||
:showSubtitle="false"
|
||
@confirm="calendarConfirm"
|
||
color="#FB322E"
|
||
/>
|
||
</view>
|
||
<!-- 优惠卷 -->
|
||
<coupon
|
||
ref="couponRef"
|
||
:siteData="state.lockData"
|
||
:couponOtherItem="state.couponOtherItem"
|
||
:couponItem="state.couponItem"
|
||
:priceData="state.priceData"
|
||
:month="state.month"
|
||
v-model="state.couponShow"
|
||
@chooseCoupon="chooseCoupon"
|
||
@chooseOtherCoupon = "chooseOtherCoupon"
|
||
@confirm="confirmCoupon"
|
||
:disabledFunc="disabledFunc"
|
||
></coupon>
|
||
<myPopup v-model="state.showCoupon" customStyle="background-color: transparent;width: 90%; height: auto;" :closeOnClickOverlay="false" >
|
||
<view>
|
||
<button v-if="state.copuonList.length" class="noCssBtn" style="height: 100%; width: 100%"
|
||
@click="getCouponByCode">
|
||
<uv-image @click="getCouponByCode" width="100%" mode="widthFix"
|
||
:src="baseImageUrl + state.copuonList[0].coverSheet">
|
||
</uv-image>
|
||
</button>
|
||
</view>
|
||
<view style="
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 10px;
|
||
">
|
||
<uv-icon @click="deletCouponList" size="32" color="#FFFFFF" name="close-circle"></uv-icon>
|
||
</view>
|
||
</myPopup>
|
||
<myModal
|
||
v-model="state.showCancelModal"
|
||
:content="$t('site.cancelAppointment')"
|
||
@confirm="cancelAppointment"
|
||
></myModal>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, nextTick, watch } from "vue";
|
||
import { onTabItemTap, getDistance, makePhoneCall, mergeFiveGoatStores, parseUrlParams } from "/utils/common.js";
|
||
import myCustomtTabBar from "@/components/myCustomtTabBar.vue";
|
||
// import wxNavbar from "@/components/wxNavbar.vue";
|
||
// import siteDetail from '@/components/siteDetail.vue';
|
||
import { onLoad, onShow, onShareAppMessage, onUnload } from "@dcloudio/uni-app";
|
||
import { baseImageUrl, projectInfo, isKingKong, setOrderDays } from "@/config/index.js";
|
||
import { useLoginApi } from "/Apis/home.js";
|
||
import myPopup from "@/components/myPopup.vue";
|
||
import { navigateTo } from '@/utils/navigateTo';
|
||
// 主题色配置
|
||
import { useMainStore } from "@/store/index.js";
|
||
import { navbarHeightAndStatusBarHeight, shareParam } from "@/utils/common.js";
|
||
import coupon from "@/components/coupon.vue";
|
||
import myModal from "@/components/myModal.vue";
|
||
import { couponApi } from "@/Apis/coupon.js";
|
||
import { useLocation } from "@/hooks/useLocation";
|
||
import { useLoginApi as useLoginApi2 } from "@/Apis/login";
|
||
import { useSiteApi } from "@/Apis/site.js";
|
||
import { authInfoApi } from "@/Apis/validInfo.js";
|
||
import { ClientSite } from "@/Apis/book.js";
|
||
import { useLockApi } from '@/Apis/lock.js';
|
||
import { useOrderApi } from "@/Apis/order.js";
|
||
import { useI18n } from "vue-i18n";
|
||
import dayjs from 'dayjs';
|
||
import { driver } from "driver.js";
|
||
import "driver.js/dist/driver.css";
|
||
const getOrderApi = useOrderApi();
|
||
const getAuthApi = authInfoApi();
|
||
const getCouponApi = couponApi();
|
||
const { themeInfo, storeState, getUserInfo } = useMainStore();
|
||
// 国际化配置
|
||
const { t, locale } = useI18n();
|
||
const getApi = useLoginApi();
|
||
const { getLocation, locationState } = useLocation();
|
||
const getLockApi = useLockApi()
|
||
const getSiteApi = useSiteApi();
|
||
const getApi2 = useLoginApi2();
|
||
const getClientSiteApi = ClientSite();
|
||
|
||
const openPopupRef = ref(null);
|
||
const unitPopupRef = ref(null);
|
||
const monthPopupRef = ref(null);
|
||
const payPopupRef = ref(null);
|
||
const calendars = ref(null);
|
||
|
||
|
||
const couponRef = ref();
|
||
// 导航栏高度
|
||
const navHeight = ref(0);
|
||
const language = ref("");
|
||
const agreementRef = ref();
|
||
const today = dayjs()
|
||
.set("hour", 0)
|
||
.set("minute", 0)
|
||
.set("second", 0)
|
||
.set("millisecond", 0);
|
||
// 生成当天一个月后的日期
|
||
let oneMonthLater = today.add(setOrderDays, "day");
|
||
const state = ref({
|
||
active: 0,
|
||
id: "",
|
||
radiovalue: 0,
|
||
radioMonthvalue: -1,
|
||
checkAgreementUrlTime: 0,
|
||
agreementContent: "无",
|
||
enAgreementContent: "无",
|
||
scrollTop: 0,
|
||
oldScrollTop: 0,
|
||
isRead: false,
|
||
checked: false,
|
||
siteId: "",
|
||
unitTypeId: "",
|
||
lockerId: "",
|
||
selectUnitRow: {},
|
||
month: 1,
|
||
selfMonth: 1,
|
||
lockData: {
|
||
discountList: []
|
||
},
|
||
startDate: today.format("YYYY/MM/DD"),
|
||
minDate: today.format("YYYY/MM/DD"),
|
||
maxDate: oneMonthLater.format("YYYY/MM/DD"), // 日期选择器最大日期
|
||
zhuangxiuzhong: false,
|
||
priceData: {},
|
||
hasVerify: false,
|
||
showhasOrderModal:false,
|
||
showhasunpaidOrderModal:false,
|
||
tagStyle: {
|
||
p: 'margin: 0.8rem 0;',
|
||
},
|
||
startDriverTime: 0,
|
||
couponItem: [], // 优惠卷
|
||
couponOtherItem:[],
|
||
couponShow: false,
|
||
showCoupon: false, // 优惠卷弹窗
|
||
copuonList: [], // 待领取的优惠卷列表
|
||
loading: false,
|
||
showCancelModal: false,
|
||
});
|
||
|
||
const deletCouponList = () => {
|
||
state.value.copuonList.shift();
|
||
state.value.showCoupon = false;
|
||
// 如果列表还有弹窗 继续显示
|
||
setTimeout(() => {
|
||
if (state.value.copuonList.length) {
|
||
state.value.showCoupon = true;
|
||
} else {
|
||
const token = uni.getStorageSync("token");
|
||
if (token) {
|
||
const date = new Date();
|
||
uni.setStorageSync("getCouponCodeTime", date.getTime());
|
||
}
|
||
|
||
}
|
||
}, 600);
|
||
};
|
||
// 优惠卷弹窗列表
|
||
const GetNewUserCouponCode = async () => {
|
||
// state.value.showCoupon = false;
|
||
getCouponApi.GetNewUserCouponCode().then((res) => {
|
||
if (res.code === 200) {
|
||
state.value.copuonList = res.data
|
||
if (state.value.copuonList.length) {
|
||
nextTick(() => {
|
||
setTimeout(() => {
|
||
state.value.showCoupon = true;
|
||
}, 500);
|
||
});
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
const showNewUserCouponCode = () => {
|
||
if(!state.value.startDriverTime) return
|
||
const getCouponCodeTime = uni.getStorageSync("getCouponCodeTime") || 0;
|
||
|
||
const now = Date.now(); // 当前时间戳
|
||
const diff = now - getCouponCodeTime; // 时间差 (毫秒)
|
||
|
||
const eightMinutes = 6 * 60 * 1000; // 8分钟
|
||
|
||
if (diff > eightMinutes) {
|
||
// 超过8分钟才请求
|
||
GetNewUserCouponCode();
|
||
}
|
||
};
|
||
// 领取优惠卷
|
||
|
||
const getCouponByCode = (item) => {
|
||
const { couponCode } = state.value.copuonList[0];
|
||
uni.showLoading();
|
||
getCouponApi
|
||
.DrawDownCoupon({ couponCode: couponCode })
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
uni.showToast({
|
||
title: t("coupon.redemptionuccessful"),
|
||
icon: "none",
|
||
});
|
||
deletCouponList();
|
||
} else {
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: "none",
|
||
});
|
||
}
|
||
})
|
||
.finally(() => {
|
||
uni.hideLoading();
|
||
});
|
||
};
|
||
|
||
|
||
const openCoupon = () => {
|
||
if(!state.value.lockData?.siteId){
|
||
return uni.showToast({
|
||
title: '请选择体积',
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
}
|
||
|
||
couponRef.value.open();
|
||
};
|
||
const disabledFunc = (item) => {
|
||
if (!item) {
|
||
return true;
|
||
}
|
||
// item.siteIds 空的时候 包括全部
|
||
const isSite = item.siteIds.length
|
||
? item.siteIds.includes(state.value.lockData.siteId)
|
||
: true;
|
||
const isUnit = item.unitTypeIds.length
|
||
? item.unitTypeIds.includes(state.value.lockData.unitTypeId)
|
||
: true;
|
||
let isPrice = item.satisfyAmount
|
||
? state.value.priceData.expense >= item.satisfyAmount
|
||
: true;
|
||
if([3,4,5,6].includes(item.couponType)){
|
||
isPrice = state.value.month>=item.fullMonth
|
||
}
|
||
// 将日期字符串转换为 Date 对象
|
||
const start = new Date(item.startDate);
|
||
const end = new Date(item.endDate);
|
||
// 获取当前日期和时间
|
||
const now = new Date();
|
||
// 判断当前日期是否在开始日期和结束日期之间
|
||
const isDate = now >= start && now <= end;
|
||
const canAdd = canAddValue(state.value.couponItem.map(x=>x.couponType),item.couponType)
|
||
return !(isSite && isUnit && isPrice && isDate&& canAdd);
|
||
};
|
||
|
||
const confirmCoupon = (data)=>{
|
||
const { couponItem, couponOtherItem } = data;
|
||
state.value.couponItem = couponItem;
|
||
state.value.couponOtherItem = couponOtherItem;
|
||
getLockerExpense();
|
||
couponRef.value.close();
|
||
}
|
||
|
||
// 根据优惠卷类型 返回优惠卷 作用范围 优惠多少钱 打多少折 首页多少钱
|
||
const couponDesc = (item)=>{
|
||
let detail = ''
|
||
switch(item.couponType){
|
||
case 1:
|
||
detail = `${t('discountMomey',{discount:item.discountLimit})}`
|
||
break
|
||
case 2:
|
||
detail = `${t('couponDiscount',{percent: 100 - item.discountRange * 100,discount: (item.discountRange * 100) / 10,})}`
|
||
break
|
||
case 3:
|
||
detail = `${t('firstMonthRent',{discount:item.firstMonthAmount})}`
|
||
break
|
||
case 4:
|
||
detail = `${t('couponDiscount',{percent: 100 - item.monthDiscount * 100,discount: (item.monthDiscount * 100) / 10})}`
|
||
break
|
||
case 5:
|
||
detail = `${t('freeMonth',{discount:item.freeMonth})}`
|
||
break
|
||
case 6:
|
||
detail = `${t('BonusMonth',{discount:item.freeMonth})}`
|
||
break
|
||
default:
|
||
detail = `${t('discountMomey',{discount:item.discountLimit})}`
|
||
break
|
||
}
|
||
return `${detail}`
|
||
}
|
||
function canAddValue(arr, value) {
|
||
// 定义可以共存的数字
|
||
const allowedNumbers = new Set([1, 3, 4]);
|
||
|
||
// 如果数组为空，可以添加任意值
|
||
if (arr.length === 0) {
|
||
return true;
|
||
}
|
||
|
||
// 检查数组中是否已经存在非1、3、4的值
|
||
const hasInvalidNumber = arr.some(num => !allowedNumbers.has(num));
|
||
if (hasInvalidNumber) {
|
||
return false; // 如果数组中已经有非1、3、4的值，不能添加任何值
|
||
}
|
||
|
||
// 如果要添加的值是1、3、4，且没有重复，则可以添加
|
||
if (allowedNumbers.has(value) && !arr.includes(value)) {
|
||
return true;
|
||
}
|
||
|
||
// 其他情况不能添加
|
||
return false;
|
||
}
|
||
const chooseCoupon = (item) => {
|
||
// 可以叠加就添加
|
||
if(item.couponType == 5){
|
||
if(state.value.month<item.fullMonth){
|
||
uni.showToast({
|
||
title: `月数不足${item.fullMonth}个月,无法此优惠卷！`,
|
||
icon: "none",
|
||
duration: 2000,
|
||
});
|
||
return
|
||
}
|
||
}
|
||
if (item.isSuperposition) {
|
||
if (
|
||
state.value.couponItem.every(
|
||
(x) => item.couponDispositionId != x.couponDispositionId
|
||
)
|
||
) {
|
||
if(state.value.couponItem.every(x=>item.couponType != x.couponType)){
|
||
state.value.couponItem.push(item);
|
||
}else{
|
||
uni.showToast({
|
||
title: `相同优惠卷类型不能重复！`,
|
||
icon: "none",
|
||
duration: 2000,
|
||
})
|
||
}
|
||
}
|
||
} else {
|
||
state.value.couponItem = [item];
|
||
}
|
||
getLockerExpense();
|
||
};
|
||
const chooseOtherCoupon= (item) => {
|
||
const isE = state.value.couponOtherItem.find(x=>x.number == item.number);
|
||
if (!isE) {
|
||
state.value.couponOtherItem.push(item);
|
||
}
|
||
getLockerExpense();
|
||
}
|
||
const steps = [
|
||
{
|
||
element: '.selectSite',
|
||
popover: {
|
||
// title: '切换门店',
|
||
description: '可根据不同地区，切换对应门店'
|
||
},
|
||
onHighlighted: (el) => scrollToElement(el)
|
||
},
|
||
{
|
||
element: '.unitType',
|
||
popover: {
|
||
// title: '切换不同仓型',
|
||
description: '左右滑动,选择不同仓型体积',
|
||
side: "bottom",
|
||
},
|
||
onHighlighted: (el) => scrollToElement(el)
|
||
},
|
||
// {
|
||
// element: '.swiper .left',
|
||
// popover: {
|
||
// // title: '切换不同仓型',
|
||
// description: '向左滑动。'
|
||
// },
|
||
// onHighlighted: (el) => scrollToElement(el)
|
||
// },
|
||
// {
|
||
// element: '.swiper .right',
|
||
// popover: {
|
||
// // title: '切换不同仓型',
|
||
// description: '向右滑动。'
|
||
// },
|
||
// onHighlighted: (el) => scrollToElement(el)
|
||
// },
|
||
{
|
||
element: '.orderInfo',
|
||
side: "bottom",
|
||
popover: {
|
||
// title: '选择基本需求',
|
||
description: '选择仓型后，根据需求选择体积,租期。<br/> <span style="color: #FF8A00;">租期越长，优惠越多。</span>'
|
||
},
|
||
onHighlighted: (el) => scrollToElement(el)
|
||
},
|
||
// {
|
||
// element: '.zuqi',
|
||
// popover: {
|
||
// // title: '租期',
|
||
// description: '租期越长，优惠越多。'
|
||
// },
|
||
// onHighlighted: (el) => scrollToElement(el)
|
||
// },
|
||
{
|
||
element: '.kefu',
|
||
popover: {
|
||
// title: '联系客服',
|
||
description: '如有疑问，欢迎致电客服。'
|
||
},
|
||
onHighlighted: (el) => scrollToElement(el)
|
||
}
|
||
]
|
||
|
||
const driverObj = driver({
|
||
showProgress: false,
|
||
doneBtnText: "完成",
|
||
closeBtnText: "跳过",
|
||
nextBtnText: "下一步",
|
||
prevBtnText: "上一步",
|
||
popoverClass: 'driverjs-theme',
|
||
|
||
// 关键：点击遮罩层不关闭
|
||
overlayClickBehavior: 'none',
|
||
// 结束后回到顶部
|
||
onDestroyStarted: () => {
|
||
// 这里只做UI收尾，不记录完成
|
||
window.scrollTo({
|
||
top: 0,
|
||
behavior: "smooth"
|
||
})
|
||
driverObj.destroy();
|
||
showNewUserCouponCode()
|
||
},
|
||
// ⭐ 关键：只有点击完成才执行
|
||
onNextClick: (element, step) => {
|
||
// ⭐ 必须手动下一步
|
||
driverObj.moveNext();
|
||
const isLast = step.element === steps[steps.length - 1].element;
|
||
if (isLast) {
|
||
uni.setStorageSync('driver_finished', 1)
|
||
}
|
||
},
|
||
steps,
|
||
});
|
||
|
||
// 滚动方法（单独写）
|
||
function scrollToElement(element) {
|
||
if (!element) return
|
||
|
||
const top =
|
||
element.getBoundingClientRect().top +
|
||
window.pageYOffset -
|
||
120; // 偏移量 可调
|
||
|
||
window.scrollTo({
|
||
top,
|
||
behavior: "smooth"
|
||
});
|
||
}
|
||
const startDriver = () => {
|
||
state.value.startDriverTime++;
|
||
if (state.value.startDriverTime > 1) {
|
||
return;
|
||
}
|
||
const driver_finished = uni.getStorageSync('driver_finished')
|
||
if(driver_finished){
|
||
if(state.value.startDriverTime == 1){
|
||
showNewUserCouponCode()
|
||
}
|
||
return
|
||
}
|
||
driverObj.drive();
|
||
}
|
||
|
||
// 点击路线跳转
|
||
const handleNavigate = (item) => {
|
||
// const { latitude, longitude } = wgs84ToGcj02(item.latitude, item.longitude);
|
||
wx.openLocation({
|
||
latitude:Number(unitTypeData.value[0]?.latitude),
|
||
longitude:Number(unitTypeData.value[0]?.longitude),
|
||
name: unitTypeData.value[0]?.sitdName,
|
||
address: unitTypeData.value[0]?.sitdAddress,
|
||
})
|
||
};
|
||
|
||
const showCalendar = () => {
|
||
calendars.value.open();
|
||
};
|
||
const calendarConfirm = (e) => {
|
||
const fullDate = dayjs(e[0]); // 保持 dayjs 对象
|
||
|
||
if (state.value.zhuangxiuzhong) {
|
||
const limitDate = dayjs(state.value.lockData.preSaleTime);
|
||
|
||
if (fullDate.isBefore(limitDate)) {
|
||
uni.showModal({
|
||
title: t("common.title"),
|
||
content: t("storeRenovationNotice", {
|
||
limitDate: limitDate.format("YYYY/MM/DD")
|
||
}),
|
||
showCancel: false,
|
||
});
|
||
return;
|
||
} else {
|
||
state.value.startDate = fullDate.format("YYYY/MM/DD");
|
||
}
|
||
} else {
|
||
state.value.startDate = fullDate.format("YYYY/MM/DD");
|
||
}
|
||
};
|
||
|
||
const closePopup = () => {
|
||
openPopupRef.value.close();
|
||
}
|
||
const openPopup = () => {
|
||
openPopupRef.value.open();
|
||
}
|
||
|
||
const callPhone = ()=>{
|
||
window.location.href = `tel:${projectInfo.callPhone}`;
|
||
closePopup();
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
const goOrder = async () => {
|
||
if (!state.value.lockerId) {
|
||
return uni.showToast({
|
||
title: '请选择体积',
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
}
|
||
if (!state.value.month) {
|
||
return uni.showToast({
|
||
title: '租期',
|
||
icon: 'none',
|
||
duration: 3000
|
||
}
|
||
)
|
||
}
|
||
uni.showLoading({mask: true})
|
||
await getVerifyStatus()
|
||
uni.hideLoading();
|
||
|
||
if (!state.value.hasVerify) {
|
||
return uni.showToast({
|
||
title: '请先验证实名信息!',
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
}
|
||
if (!state.value.checked) {
|
||
openAgreement();
|
||
return uni.showToast({
|
||
title: '请勾选协议!',
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
}
|
||
let source = window.sf.isSfApp() ? 2 : 1;
|
||
let startTime = dayjs(state.value.startDate).format("YYYY-MM-DDTHH:mm:ssZ");
|
||
uni.showLoading({
|
||
title: '支付中',
|
||
mask: true
|
||
})
|
||
getOrderApi
|
||
.AddOrder2({
|
||
lockerId: state.value.lockerId,
|
||
startTime,
|
||
month: state.value.month,
|
||
source,
|
||
couponIds: state.value.couponItem.map((item) => item.couponDispositionId),
|
||
serialNumber: state.value.couponOtherItem.map(x => {
|
||
return {
|
||
dealGroupId: x.dealGroupId,
|
||
number: x.number,
|
||
marketPrice: x.marketPrice,
|
||
purchasePrice: x.price
|
||
}
|
||
}),
|
||
sfId: uni.getStorageSync("sfId"),
|
||
})
|
||
.then((res) => {
|
||
uni.hideLoading();
|
||
if (res.code === 200) {
|
||
let path = window.location.pathname;
|
||
if (!path.endsWith('/')) {
|
||
path = path + '/';
|
||
}
|
||
const returnUrl = `${window.location.origin}${path}#/pages/unlock/index`;
|
||
const failUrl = `${window.location.origin}${path}#/pages/index/index`;
|
||
if (window.sf.isSfApp()) {
|
||
window.sf.goPay({
|
||
partnerId: res.data.partnerId, //商户id
|
||
prepayId: res.data.package, // 预支付id
|
||
nonceStr: res.data.nonceStr, //随机字符串
|
||
timeStamp: res.data.timeStamp, //时间戳
|
||
sign: res.data.paySign, //签名
|
||
package: `prepay_id=${res.data.package}`,
|
||
payChannel: 'payByWeChat' // app微信支付
|
||
}).then(res => {
|
||
const { channelType, status, message, channelResult } = res && res.result || {}
|
||
if (status === 0) {
|
||
uni.showToast({
|
||
title: '支付成功',
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
reset();
|
||
goUnlock();
|
||
} else {
|
||
uni.showToast({
|
||
title: '支付失败',
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
}
|
||
}).catch(err => console.log(err))
|
||
} else {
|
||
window.sf.goPay({
|
||
timeStamp: res.data.timeStamp, // 从服务器获取的时间戳
|
||
nonceStr: res.data.nonceStr, // 从服务器获取的随机字符串
|
||
package: `prepay_id=${res.data.package}`, // 从服务器获取的预支付交易会话标识
|
||
signType: res.data.signType, // 签名方式
|
||
paySign: res.data.paySign, // 从服务器获取的签名
|
||
successUrl: returnUrl,
|
||
failUrl: failUrl
|
||
}).then(res => { }).catch(err => console.log(err))
|
||
}
|
||
} else {
|
||
if(res.code === 206){
|
||
reset();
|
||
// uni.showToast({
|
||
// title: '仓位已出租，请重新选择其他仓位！',
|
||
// icon: 'none',
|
||
// duration: 5000
|
||
// })
|
||
state.value.showhasOrderModal = true;
|
||
|
||
// uni.showModal({
|
||
// title: t('common.title'),
|
||
// content: "仓位已出租，请重新选择",
|
||
// showCancel: false,
|
||
// success: function () {
|
||
// reset();
|
||
// },
|
||
// })
|
||
}
|
||
if (res.code === 1001) {
|
||
state.value.showhasunpaidOrderModal = true;
|
||
return
|
||
}
|
||
}
|
||
});
|
||
}
|
||
const unpaidOrder = async () => {
|
||
getApp().globalData.tabParams = { type: 'unpaid' }
|
||
uni.switchTab({
|
||
url: '/pages/unlock/index',
|
||
})
|
||
}
|
||
const reset = () => {
|
||
state.value.lockerId = null;
|
||
state.value.priceData = {};
|
||
state.value.selectUnitRow = {};
|
||
state.value.lockData = {
|
||
discountList: []
|
||
}
|
||
state.value.couponItem = [];
|
||
state.value.couponOtherItem = [];
|
||
clearCoupon();
|
||
|
||
}
|
||
const clearCoupon = () => {
|
||
state.value.couponItem = [];
|
||
state.value.couponOtherItem = [];
|
||
};
|
||
|
||
|
||
const selfDiscount = computed(() =>
|
||
state.value.lockData.discountList
|
||
.sort((a, b) => b.month - a.month)
|
||
.find(item => state.value.selfMonth >= item.month)?.discount ?? 1
|
||
)
|
||
|
||
|
||
const siteDistance = computed(() => {
|
||
if (storeState.location.latitude && storeState.location.longitude && unitTypeData.value[0]?.latitude && unitTypeData.value[0]?.longitude) {
|
||
return getDistance(storeState.location.latitude,
|
||
storeState.location.longitude, unitTypeData.value[0]?.latitude, unitTypeData.value[0]?.longitude).distance;
|
||
} else {
|
||
return 0
|
||
}
|
||
|
||
})
|
||
|
||
const changeCheck = () => {
|
||
if (state.value.checkAgreementUrlTime == 0) {
|
||
uni.showToast({
|
||
title: t("common.checkAgreementUrl"),
|
||
icon: "none",
|
||
duration: 2000,
|
||
})
|
||
openAgreement();
|
||
return
|
||
}
|
||
state.value.checked = !state.value.checked;
|
||
};
|
||
|
||
const showPayPopup = () => {
|
||
if (!state.value.lockerId) {
|
||
return uni.showToast({
|
||
title: '请选择体积',
|
||
icon: 'none',
|
||
duration: 3000
|
||
})
|
||
}
|
||
if (!state.value.month) {
|
||
return uni.showToast({
|
||
title: '租期',
|
||
icon: 'none',
|
||
duration: 3000
|
||
}
|
||
)
|
||
}
|
||
payPopupRef.value.open();
|
||
};
|
||
const hidePayPopup = () => {
|
||
payPopupRef.value.close();
|
||
}
|
||
|
||
const showMonthPopup = () => {
|
||
if (state.value.lockerId) {
|
||
getLockerById();
|
||
monthPopupRef.value.open();
|
||
} else {
|
||
uni.showToast({
|
||
title: "请选择体积",
|
||
icon: "none",
|
||
duration: 2000,
|
||
})
|
||
}
|
||
};
|
||
const hideMonthPopup = () => {
|
||
monthPopupRef.value.close();
|
||
};
|
||
const showUnitPopup = () => {
|
||
unitPopupRef.value.open();
|
||
getLockerBySiteId();
|
||
|
||
};
|
||
const hideUnitPopup = () => {
|
||
unitPopupRef.value.close();
|
||
state.value.radiovalue = null;
|
||
};
|
||
|
||
// 合同下拉
|
||
const handleRoll = () => {
|
||
state.value.oldScrollTop += 4000;
|
||
state.value.scrollTop = state.value.oldScrollTop;
|
||
}
|
||
|
||
// 滑动到底部了
|
||
const handleScrollBottom = () => {
|
||
state.value.isRead = true;
|
||
}
|
||
|
||
const handleScroll = (e) => {
|
||
state.value.oldScrollTop = e.detail.scrollTop;
|
||
}
|
||
|
||
const handleAgree = () => {
|
||
state.value.checked = true;
|
||
closeAgreement();
|
||
}
|
||
|
||
const openAgreement = () => {
|
||
if (!state.value.lockerId) {
|
||
uni.showToast({
|
||
title: "请选择体积",
|
||
icon: "none",
|
||
duration: 2000,
|
||
})
|
||
return
|
||
}
|
||
|
||
GetLockerAgreementHTMLById()
|
||
state.value.scrollTop = state.value.oldScrollTop;
|
||
agreementRef?.value.open();
|
||
};
|
||
|
||
const closeAgreement = () => {
|
||
agreementRef?.value.close();
|
||
};
|
||
|
||
const confirmUnit = () => {
|
||
if (!state.value.radiovalue) {
|
||
return uni.showToast({
|
||
title: "请选择体积",
|
||
icon: "none",
|
||
duration: 2000,
|
||
})
|
||
}
|
||
state.value.lockerId = state.value.radiovalue;
|
||
state.value.selectUnitRow = LockerList.value.find(item => item.lockerId == state.value.lockerId);
|
||
getLockerById();
|
||
clearCoupon();
|
||
getLockerExpense();
|
||
hideUnitPopup();
|
||
}
|
||
|
||
const confirmMonth = () => {
|
||
if (state.value.radioMonthvalue === -1) {
|
||
state.value.month = state.value.selfMonth;
|
||
} else {
|
||
state.value.month = state.value.radioMonthvalue;
|
||
}
|
||
clearCoupon();
|
||
getLockerExpense();
|
||
hideMonthPopup();
|
||
}
|
||
|
||
|
||
// 切换到上一张
|
||
const prev = () => {
|
||
if (state.value.active > 0) {
|
||
state.value.active -= 1;
|
||
} else {
|
||
state.value.active = unitTypeData.value.length - 1; // 如果是第一张，跳到最后一张
|
||
}
|
||
state.value.unitTypeId = unitTypeData.value[state.value.active].id;
|
||
}
|
||
// 切换到下一张
|
||
const next = () => {
|
||
if (state.value.active < unitTypeData.value.length - 1) {
|
||
state.value.active += 1;
|
||
} else {
|
||
state.value.active = 0; // 如果是最后一张，跳到第一张
|
||
}
|
||
state.value.unitTypeId = unitTypeData.value[state.value.active].id;
|
||
}
|
||
|
||
onShareAppMessage((res) => {
|
||
if (res.from === "button") {
|
||
// 来自页面内分享按钮
|
||
console.log(res.target);
|
||
}
|
||
return shareParam;
|
||
});
|
||
|
||
const goSite = () => {
|
||
uni.navigateTo({
|
||
url: "/pages/site/index",
|
||
});
|
||
};
|
||
|
||
const goReserve= () => {
|
||
uni.navigateTo({
|
||
url: "/pagesb/reserve/index",
|
||
});
|
||
}
|
||
|
||
const isApply = ref(false);
|
||
async function postWaitingAppointment() {
|
||
if (isApply.value) return (state.value.showCancelModal = true);
|
||
// 微信就判断 用户是否有手机号 H5就直接预约
|
||
|
||
uni.showLoading();
|
||
const unitTypeId = state.value.unitTypeId;
|
||
if (state.value.siteId && unitTypeId) {
|
||
const res = await getUserInfo();
|
||
if (res?.data?.code === 401) {
|
||
AlternateReservation();
|
||
}
|
||
uni.hideLoading();
|
||
if (res.code === 200) {
|
||
if (!res.data.phone) {
|
||
popup.value.open();
|
||
} else {
|
||
AlternateReservation();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 预约
|
||
const AlternateReservation = () => {
|
||
const unitTypeId = state.value.unitTypeId;
|
||
uni.showLoading({mask:true})
|
||
getSiteApi
|
||
.AlternateReservation({
|
||
siteId: state.value.siteId,
|
||
unitTypeId: unitTypeId,
|
||
comeFrom: "WeChat",
|
||
})
|
||
.then((res) => {
|
||
uni.hideLoading();
|
||
if (res.code === 200) {
|
||
setTimeout(() => {
|
||
state.value.showAppointmentSuccess = true;
|
||
}, 500);
|
||
}
|
||
isWaitingAppointment();
|
||
uni.hideLoading();
|
||
});
|
||
};
|
||
|
||
// 取消预约
|
||
const cancelAppointment = () => {
|
||
uni.showLoading();
|
||
const unitTypeId = state.value.unitTypeId;
|
||
getSiteApi
|
||
.CancelReservation({
|
||
siteId: state.value.siteId,
|
||
unitTypeId: unitTypeId,
|
||
})
|
||
.then((res) => {
|
||
uni.hideLoading();
|
||
if (res.code === 200) {
|
||
isWaitingAppointment();
|
||
}
|
||
uni.hideLoading();
|
||
});
|
||
};
|
||
// 查看是否预约过
|
||
function isWaitingAppointment(showLoadi) {
|
||
if (!showLoadi) {
|
||
uni.showLoading();
|
||
}
|
||
const unitTypeId = state.value.unitTypeId;
|
||
if (state.value.siteId && unitTypeId) {
|
||
getSiteApi
|
||
.GetReserveIsEnable({
|
||
siteId: state.value.siteId,
|
||
unitTypeId: unitTypeId,
|
||
})
|
||
.then((res) => {
|
||
if (res.code === 200) {
|
||
isApply.value = res.data;
|
||
}
|
||
if (!showLoadi) {
|
||
uni.hideLoading();
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
const goUnlock = () => {
|
||
getApp().globalData.tabParams = { type: 'paid' }
|
||
uni.navigateTo({
|
||
url: "/pages/unlock/index",
|
||
});
|
||
};
|
||
const LockerList = ref([]);
|
||
// 获取仓位
|
||
const getLockerBySiteId = () => {
|
||
LockerList.value = [];
|
||
if (state.value.siteId && state.value.unitTypeId) {
|
||
uni.showLoading({
|
||
mask: true
|
||
})
|
||
getSiteApi
|
||
.GetLockerBySiteId({ siteId: state.value.siteId, unitTypeId: state.value.unitTypeId,month: state.value.month })
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
LockerList.value = res.data;
|
||
}
|
||
}).finally(() => {
|
||
uni.hideLoading()
|
||
})
|
||
;
|
||
}
|
||
};
|
||
|
||
const getVerifyStatus = async () => {
|
||
if (uni.getStorageSync('token')) {
|
||
// uni.showLoading();
|
||
await getAuthApi.GetIsCertification().then(res => {
|
||
// uni.hideLoading();
|
||
if (res.code == 200) state.value.hasVerify = res.data?.isPass;
|
||
});
|
||
}
|
||
}
|
||
// 获取门店信息
|
||
const getSiteDetail = () => {
|
||
let list = []
|
||
uni.showLoading();
|
||
let city = "";
|
||
let district = "";
|
||
list = []
|
||
getClientSiteApi.getSiteDetailsAll({
|
||
city,
|
||
district,
|
||
}).then(res => {
|
||
if (res.code === 200) {
|
||
list = mergeFiveGoatStores(res.data.filter(item => !item.isSoldOut && item.city.indexOf("广州") !== -1));
|
||
if (locationState?.latitude && locationState?.longitude) {
|
||
const { latitude, longitude } = locationState;
|
||
list.forEach(item => {
|
||
const { distance, number } = getDistance(latitude, longitude, item.latitude, item.longitude);
|
||
item.distance = distance;
|
||
item.distanceNumber = number;
|
||
});
|
||
list.sort((a, b) => a.distanceNumber - b.distanceNumber);
|
||
// 优先冼村店
|
||
const xiancundian = list.find(item => item.id == "2030892603720994816")
|
||
if (list[0]?.id) {
|
||
state.value.siteId =xiancundian?xiancundian.id:list[0]?.id
|
||
reset();
|
||
getUnitTypeBySiteId();
|
||
}
|
||
} else {
|
||
// 优先冼村店
|
||
const xiancundian = list.find(item => item.id == "2030892603720994816")
|
||
state.value.siteId = xiancundian?xiancundian.id:list[0]?.id
|
||
reset();
|
||
getUnitTypeBySiteId();
|
||
}
|
||
|
||
}
|
||
}).catch(err => {
|
||
|
||
}).finally(() => {
|
||
setTimeout(() => {
|
||
uni.hideLoading();
|
||
}, 300);
|
||
})
|
||
;
|
||
}
|
||
onLoad(async (params) => {
|
||
|
||
// 二、分享小程序原生页面到微信：
|
||
const shareParams = {
|
||
title: '欢迎使用城市迷你仓',
|
||
imageUrl: 'data:image/png;base64,6oG0tMIsZRVyzpV7z3tpQWw2SPDKKN0wYRB0ea0Ng3B6GlGCfj3lqAy16qhsalsGqvaB9uVd17jWZkQeTk6eJrBg2dMlRbBs2Yo8FmFRsQcx2PvvMykuR8TV06QKpmbe7TNyGoYuiWvIVEskJTHqMIyec0GVUcTxTsNxQQOoiYChjAnzXYpLqHxWLI4pgMhqe1Bi/L5s2dp5HK+tt6h/l9yRGoPmilCy3FzzS+XC6+/IhUrponGNI14AiDqSx3siKgiBwL9ldMMiUXt79nbyxX5phxwygpFWRHI/l6K3Oh+Obu1ZyuSyuuKfgibcgs1pikX1h5jOhszL4rnW2AAmoNH30EU0AvSOjO6tbBzItkwvc0Iby7FQpXsHb0qIBJLmLCA1znT2jag9jt0dmTRhiEwMYXOXgQjbrlC+Xwt97H6ggb3emvG6rfz+UFjdhw7Xuz3CJzhLXBpZ2z9KU6n5+hPP4duAxgXHOMCjB2+539g1KX5kRRDUTUje3Ui2A8OB2Ik7fPYA2MPXHbDfgm4n3H/4HjACQ/2BO21J/jq11/D09dew7tv/xCHOzbqAaNdlV7GBnQZuidgnABcgJispo9os5/866d6BRr8+T+GL3/xf4b3f/g27o8XwB440ynYmnrMzUIkhUR1MHmespIjEP0E355kcAMd/rxh2zZ0GG6Q7+9hbK0TuHs48HB/4O7uHh/e3eH9uxd4uH/AM3fESz9+7NxiP3lSPq39ZQZAeKUhGxsvF1dp+qBDQ5TCT3rPT7mon7kcLtEOBIy7KhcBRW2STDNOckavAK/vrF6cJSy+KNNA0hJ1LZVhjZhVtCwsHWQU/o0KC2azUhFLkU8SFgWxaBBU5ArtJ03RpkKr0YhKmVEtM0tKmiJRqVlg1nAsBman4tSzSvH48OyBUoZYoG/bBIVUkGHOPK8UoKOSZqUstory1VitpyG2AKJGD5eHsYKgQCBQZaVBmk9mWxGgk87nSSsIAIcDp9iwjzRWptpMxRTbRiWbeWgdWYq3wRAtcLq9gTsrF40T4nyG7zvCRxoYArgxam4z/zjD7PmvVOjujvvLwNM9cLff4Xz/AH8B7O0G9x++hb/x1/8K/vPW8YVXXsYXP/cKvvj5l/DaK6/gtZdfwStPb/D0ZsPNtuG0GZp5Rrd84PJwwf2LB9zdfYD7+3vslwPhQO8ntPMtbp4+wbPnz/H1X/5T+FP/2J/Fzc0N+rYBpsa0wMORIfygMu5tnr+KZhmyqTRI+7MJngNtKtowbCzHHir1bp2GSK6xvL9qB5D2x6Kkub5XR6288DREwGjYYpQVLZiee+GT7JnHPJBI7z4vegUQGwF3lvsV8LPagwle1Hw1oGqOdR/urd6nkTipjxOcaHYNgHpn1fihPT7rwen96SDRecoW4C2CesBKVkzqY8zcVV7Q2lJsBDP6YTYQ2AA7wXDh2LPK5EQ/wXVcDMG6ts4Do2FXIt0K8T1mEFzRibheov6VAcZ3s+x7lGK0FkCVFW6VOwSumtYuHt1nzqNsmGUdQC9vOHcZq7gtTjrtnUmnmrk4Ybp33QwyFt0PoOUZmjld2ffPTHlFC9A1mbgyjvg+kPmK3mmkZLW2wUqWUWvOXE5IhwHAhono2RQRDiYvcu8qeuxTFxx5X91D57WLZQFc5UltXU3Sk+6WkbA0rN7/4AOcz2cgApd9x8N+QW8NNzc3GVuMpMr3iurjKrKSkRGV/08De2j+GWkP6ZZlv6WhwX5b4Yz2ydlDiiQBuBxPc19EgX+Zz8ny6DU+ja1YJDErDsuoHmMaUc06Zun8SQOVXvXFibK+sscl14XRxDGYQ01aZ9/OsNaYq+VX+173brbV/eVoUf+tNGZVJTVwPp/qHGntNaczyi/8ogqGqa/cD/QqFmZ1fiiBuEa2XHtBNcGeiwHE8QA/Wjb87g47DXjLKritnWF2QtueoJ0CuKHn1R02DoxxgR3ZuDs8KW9+HDgGIzRx5BnxAEau88kMJwPidMITbPC+wVvD/XHgvQ9e4Ls/ehfx8IDxZEuDMwLwHR4PgO08RA3AA2AOnAYQN/MML895JS8fw9/48W99opdtGC//GfgrX8Pt8y+hxz1wIcZxtWhIxkdriYZgumvqg2YN1pNy16whtl5Fx5Qfd4EKZOy47Afu9wOXyw7fHcc+sF8ueHhxwfHwgPFwn7lxHwP7DR/Z+khZSt3/aefj8SsMMFaRDMeUj5jWngXEQgNpmB8zyJ/+Wr+z6Oernz/m/c9cDtfqfSwhUwp3/j7pHKkMfFH261dENaneFvyuF6CZFcfKUwaBrlg8bVPoqQDHKG8+CmwahdEahUqgNCNuWDx2+VqSwyNBGTDQex5wBz1NETSIOjojJI2e0X0c2NpWcwigko9FuVFz5RWkZpEOlALMqmLpjczOSim0K3cNebCzT1PMyTYgYh5yZ0nl6gKVWJhgUgAIjAAHrMusYuEQzxyz5kYAnwZCIwjP0bIXBZuDNhO8BuAbvGeoHMMQW08DKhFRgcPeewmA3hoam/dWyl8MDM+eV8cRGDjwYgAvdsPd/Zfx8OIOD/f3eHH3Ah+++w5+/w/fxN/7u38f+/0H6L6jxcC5pWF8urnFs2e3eOWll/DGF76IL33pK/jil38Rn/vcq7hlg2UBiuHXSagJFq4Bg/akFJ4MB8JCKtlUiqp+5gDCjHuXFL6mXjak1zDvTBXmICPAR1YgiwlOxX0XoJnneAIVa/P+PMUrlqo9up4xM1S/Ol0/Pa46RysIYTK6tuKjsaxne3regWrq22Zz9Py7wGJZjTWfzWYvrrWAhuhXFbqIiRnnWCSnSBuzoXoN/Pz0yitqszqgRDGatB6DEoMFkjLKzBL5QM15Hr01F0NnUaCRydcEjCO85kfRi6tIyLLQCZ...',
|
||
url: `/pages/index/index?siteId=${state.value.siteId}&lockerId=${state.value.lockerId}`,
|
||
supportShare: 'YES'
|
||
}
|
||
setTimeout(() => {
|
||
console.log(Object.keys(SFUIP))
|
||
window.sf = sf
|
||
// SFUIP.shareToWx(shareParams)
|
||
console.log(SFUIP)
|
||
console.log(window.sf)
|
||
console.log("分享参数",shareParams,SFUIP.shareToWx,window.sf.shareToWx);
|
||
console.log(window.sf.share(shareParams))
|
||
},3000)
|
||
|
||
if (params.q) {
|
||
let urlParams = decodeURIComponent(params.q);
|
||
} else {
|
||
}
|
||
if (params.Pre_ID) {
|
||
uni.setStorageSync('Pre_ID', params.Pre_ID)
|
||
}
|
||
if (params.mediatorId) {
|
||
uni.setStorageSync('mediatorId', params.mediatorId);
|
||
}
|
||
if (params.q) {
|
||
const parseUrlRes = parseUrlParams(decodeURIComponent(params.q));
|
||
if (parseUrlRes.mediatorId) uni.setStorageSync('mediatorId', parseUrlRes.mediatorId);
|
||
}
|
||
//如果链接带了lockerId 则直接跳转到订单详情
|
||
let url = window.location.href;
|
||
if(parseUrlParams(url).lockerId){
|
||
|
||
|
||
|
||
}
|
||
uni.$on('homeSiteId', (data) => {
|
||
if (data.id) {
|
||
state.value.siteId = data.id
|
||
reset();
|
||
getUnitTypeBySiteId();
|
||
}
|
||
});
|
||
uni.showLoading({
|
||
mask: true,
|
||
})
|
||
getLocation().then(() => {
|
||
// getSiteDetail()
|
||
});
|
||
getSiteDetail()
|
||
|
||
});
|
||
onUnload(() => {
|
||
uni.$off('homeSiteId');
|
||
if(driverObj){
|
||
driverObj.destroy();
|
||
}
|
||
|
||
})
|
||
onShow(() => {
|
||
uni.hideTabBar();
|
||
getVerifyStatus();
|
||
showNewUserCouponCode()
|
||
});
|
||
|
||
const goVaild = () => {
|
||
navigateTo('/pagesb/validationInfo/index');
|
||
}
|
||
|
||
|
||
const getLockerById = () => {
|
||
uni.showLoading();
|
||
getSiteApi.GetLockerById({ lockerId: state.value.lockerId }).then((res) => {
|
||
if (res.code === 200) {
|
||
state.value.lockData = res.data;
|
||
console.log(state.value.lockData,"siteData");
|
||
if (state.value.lockData.isPreSale) {
|
||
// 订单可以租用
|
||
state.value.zhuangxiuzhong = true;
|
||
const limitDate = dayjs(state.value.lockData.preSaleTime).format("YYYY/MM/DD");
|
||
if (today.isBefore(limitDate)) {
|
||
if (dayjs(state.value.startDate, "YYYY/MM/DD").isBefore(limitDate)) {
|
||
state.value.startDate = limitDate;
|
||
}
|
||
state.value.minDate = limitDate;
|
||
uni.showModal({
|
||
title: t("common.title"),
|
||
content: t("storeRenovationNotice", { limitDate }),
|
||
showCancel: false,
|
||
success: function () { },
|
||
});
|
||
}
|
||
} else {
|
||
state.value.startDate = today.format("YYYY/MM/DD");
|
||
state.value.zhuangxiuzhong = false;
|
||
}
|
||
// res.data == null 找不到订单 isPlaceOrder 等于订单不可以租用
|
||
if (!res.data || !res.data?.isPlaceOrder) {
|
||
// 支付回调 会触发onshow 这个会优先出来 所有 支付成功就不弹窗 会有一个支付成功的弹窗显示
|
||
state.value.showhasOrderModal = true
|
||
reset();
|
||
// uni.showModal({
|
||
// title: t("common.title"),
|
||
// content: t("common.cantUselocker"),
|
||
// showCancel: false,
|
||
// success: function () {
|
||
// reset();
|
||
// },
|
||
// });
|
||
uni.hideLoading();
|
||
return;
|
||
}
|
||
getLockerExpense();
|
||
} else {
|
||
// uni.reLaunch({
|
||
// url: "/pages/index/index",
|
||
// });
|
||
}
|
||
}).finally(() => {
|
||
uni.hideLoading();
|
||
});
|
||
;
|
||
};
|
||
|
||
const getLockerExpense = () => {
|
||
if (!state.value.lockerId || !state.value.month) {
|
||
return;
|
||
}
|
||
uni.showLoading();
|
||
getSiteApi
|
||
.GetLockerExpense({
|
||
lockerId: state.value.lockerId,
|
||
month: state.value.month,
|
||
couponIds: state.value.couponItem.map((item) => item.couponDispositionId),
|
||
serialNumber: state.value.couponOtherItem.map(x => {
|
||
return {
|
||
dealGroupId: x.dealGroupId,
|
||
number: x.number,
|
||
marketPrice: x.marketPrice,
|
||
purchasePrice: x.price
|
||
}
|
||
}),
|
||
// couponIds: state.value.couponItem
|
||
// .map((item) => item.couponDispositionId),
|
||
// isShortTerm: false,
|
||
// point: state.value.point,
|
||
// serialNumber: state.value.couponOtherItem.map(x => {
|
||
// return {
|
||
// dealGroupId: x.dealGroupId,
|
||
// number: x.number,
|
||
// marketPrice: x.marketPrice,
|
||
// purchasePrice: x.price
|
||
// }
|
||
// })
|
||
})
|
||
.then((res) => {
|
||
uni.hideLoading();
|
||
if (res.code === 200) {
|
||
state.value.priceData = res.data;
|
||
}
|
||
if (res.code === 1002) {
|
||
uni.showModal({
|
||
title: t('common.title'),
|
||
content: t('common.ORDER_AMOUNT_ERROR'),
|
||
showCancel: false,
|
||
success: function () {
|
||
reset();
|
||
},
|
||
});
|
||
|
||
}
|
||
});
|
||
};
|
||
const GetLockerAgreementHTMLById = () => {
|
||
uni.showLoading(
|
||
{
|
||
mask: true
|
||
}
|
||
);
|
||
getSiteApi.GetLockerAgreementHTMLById({ lockerId: state.value.lockerId }).then((res) => {
|
||
uni.hideLoading();
|
||
if (res.code === 200) {
|
||
state.value.agreementContent = res.data;
|
||
}
|
||
});
|
||
};
|
||
// 获取可用仓型
|
||
const getUnitTypeBySiteId = () => {
|
||
// barNameList.value = [];
|
||
if (state.value.siteId) {
|
||
uni.showLoading();
|
||
getSiteApi.GetUnitTypeBySiteId({ siteId: state.value.siteId }).then((res) => {
|
||
if (res.code == 200) {
|
||
unitTypeData.value = res.data
|
||
// .filter(item => item.hasAvailableLocker);
|
||
state.value.active = 0
|
||
state.value.unitTypeId = unitTypeData.value[0]?.id;
|
||
// barNameList.value = res.data;
|
||
// if (state.value.getDataTime <= 1 && state.value.unitTypeId) {
|
||
// tabIndex.value =
|
||
// barNameList.value.findIndex(
|
||
// (item) => item.id == state.value.unitTypeId
|
||
// ) || 0;
|
||
// }
|
||
// if(state.value.getDataTime <= 1 && !state.value.unitTypeId){
|
||
// const index1 = barNameList.value.findIndex(item => item.id == state.value.unitTypeId);
|
||
// const index2 = barNameList.value.findIndex(item => item.hasAvailableLocker);
|
||
// tabIndex.value = index1 !== -1 ? index1 : (index2 !== -1 ? index2 : 0);
|
||
// }
|
||
// getLockerBySiteId();
|
||
// state.value.address = res.data[0]?.sitdAddress;
|
||
// state.value.name = res.data[0]?.sitdName;
|
||
// state.value.latitude = res.data[0]?.latitude;
|
||
// state.value.longitude = res.data[0]?.longitude;
|
||
// state.value.tags = res.data[0]?.tags ?? [];
|
||
startDriver();
|
||
isWaitingAppointment(true);
|
||
}
|
||
}).finally(() => {
|
||
uni.hideLoading();
|
||
})
|
||
;
|
||
}
|
||
};
|
||
|
||
const showImage = (url) => {
|
||
uni.previewImage({
|
||
urls: [url],
|
||
});
|
||
};
|
||
const gotoPage = (url) => {
|
||
uni.navigateTo({
|
||
url: `/${url}`,
|
||
});
|
||
}
|
||
|
||
// tab
|
||
const current = ref(0);
|
||
const unitTypeData = ref([]);
|
||
|
||
function changeMove(event) {
|
||
state.value.active = event.detail.current;
|
||
state.value.unitTypeId = unitTypeData.value[state.value.active].id;
|
||
isWaitingAppointment();
|
||
}
|
||
|
||
// watch(() => storeState.hasTrytoLogin, () => {
|
||
// if (storeState.hasTrytoLogin) {
|
||
// showNewUserCouponCode()
|
||
// }
|
||
// })
|
||
|
||
</script>
|
||
<style scoped lang="scss">
|
||
@import "@/static/style/theme.scss";
|
||
|
||
:deep(.driverjs-theme) {
|
||
&.driver-popover {
|
||
border-radius: 8px;
|
||
padding: 20rpx;
|
||
min-width: 240px;
|
||
max-width: unset;
|
||
width: 710rpx;
|
||
background: #ffffff;
|
||
border: 1px solid #eee;
|
||
box-shadow: 0 4px 16px rgba(0,0,0,.08);
|
||
}
|
||
|
||
.driver-popover-title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #333;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.driver-popover-description {
|
||
font-size: 29rpx;
|
||
// font-weight: 600;
|
||
color: #000;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.driver-popover-footer {
|
||
margin-top: 12px;
|
||
|
||
button {
|
||
height: 32px;
|
||
font-size: 14px;
|
||
padding: 0 14px;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
|
||
.driver-popover-next-btn {
|
||
background: #E60012;
|
||
color: #fff;
|
||
border: none;
|
||
font-size: 28rpx;
|
||
padding: 8rpx 14rpx;
|
||
}
|
||
|
||
.driver-popover-prev-btn {
|
||
background: #fff;
|
||
color: #E60012;
|
||
border: 1px solid #E60012;
|
||
}
|
||
|
||
.driver-popover-done-btn {
|
||
background: #E60012;
|
||
color: #fff;
|
||
}
|
||
|
||
.driver-popover-close-btn {
|
||
color: #999;
|
||
}
|
||
|
||
.driver-popover-arrow {
|
||
&.driver-popover-arrow-side-top {
|
||
border-top-color: #fff;
|
||
}
|
||
|
||
&.driver-popover-arrow-side-bottom {
|
||
border-bottom-color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.full-wrap{
|
||
display: flex;
|
||
width: 100%;
|
||
margin-bottom: 20rpx;
|
||
font-size: 26rpx;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
:deep(.uv-button){
|
||
width: 150rpx;
|
||
height: 60rpx;
|
||
font-size: 26rpx;
|
||
padding: 10rpx;
|
||
}
|
||
}
|
||
|
||
.toOrderBox{
|
||
width: 100%;
|
||
background-color: #FFFFFF;
|
||
position: fixed;
|
||
bottom: 156upx;
|
||
padding: 16rpx 20rpx 12rpx 20rpx;
|
||
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
|
||
}
|
||
.modal-container-callPhone {
|
||
// height: 700rpx;
|
||
// background: #000;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
padding: 32rpx;
|
||
|
||
.modal-title {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
:deep(.uv-upload__wrap) {
|
||
display: flex;
|
||
}
|
||
|
||
.modal-text {
|
||
width: 100%;
|
||
margin-top: 20rpx;
|
||
padding: 20rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
line-height: 32rpx;
|
||
}
|
||
|
||
.upload {
|
||
margin-top: 30rpx;
|
||
height: 250rpx;
|
||
width: 100%;
|
||
// background: #000;
|
||
display: flex;
|
||
justify-content: center;
|
||
// overflow-x: scroll;
|
||
overflow-y: scroll;
|
||
// white-space: nowrap;
|
||
flex-wrap: nowrap;
|
||
// overflow: hidden;
|
||
}
|
||
|
||
.modal-button {
|
||
margin-top: 20rpx;
|
||
width: 100%;
|
||
min-height: 86rpx;
|
||
display: flex;
|
||
gap: 20rpx;
|
||
|
||
:deep(.uv-button-wrapper) {
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.payPopupBox {
|
||
.garyBox {
|
||
border: 3rpx solid #F6F6F7;
|
||
background-color: #F8F9FB;
|
||
padding: 20rpx 26rpx;
|
||
margin-bottom: 30rpx;
|
||
border-radius: 12rpx;
|
||
color: #808386;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.title2 {
|
||
margin-bottom: 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.toOrder {
|
||
min-height: 88rpx;
|
||
padding: 0;
|
||
padding-left: 28rpx;
|
||
border-radius: 999rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background-color: #0D1118;
|
||
color: #FFFFFF;
|
||
|
||
.left {
|
||
color: #E9CBA1;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 38rpx;
|
||
.price {
|
||
font-size: 38rpx;
|
||
&::first-letter{
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
&.overMaxFont{
|
||
font-size: 30rpx;
|
||
&::first-letter{
|
||
font-size: 28rpx;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
}
|
||
.detail {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #d0d1d2;
|
||
margin-left: 16rpx;
|
||
font-size: 28rpx;
|
||
font-weight: normal;
|
||
// .overMaxFont{
|
||
// font-size: 24rpx;
|
||
// }
|
||
.detail1{
|
||
font-size: 28rpx;
|
||
}
|
||
.detail2{
|
||
padding-left: 10rpx;
|
||
font-size: 26rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
// border-left:1px solid #4a4d51;
|
||
&::before{
|
||
content: '';
|
||
display: block;
|
||
width: 1px;
|
||
height: 30rpx;
|
||
border-radius: 50%;
|
||
background-color: #4a4d51;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
image{
|
||
margin-left: 10rpx;
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.right {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: -1px;
|
||
|
||
text {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.goOrder {
|
||
height: 86rpx;
|
||
width: 250rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 999rpx;
|
||
letter-spacing: 4rpx;
|
||
:deep(.uv-button) {
|
||
font-size: 28rpx;
|
||
border: none;
|
||
font-weight: 600;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.goReserve{
|
||
width: 100%;
|
||
background-color: #F8ECE0;
|
||
border-radius: 12rpx;
|
||
padding: 20rpx 40rpx;
|
||
font-size: 26rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
&:hover{
|
||
opacity: 0.7;
|
||
}
|
||
.left{
|
||
text{
|
||
color: #D1001B;
|
||
font-size: 28rpx;
|
||
&:nth-child(2){
|
||
color: #000;
|
||
}
|
||
}
|
||
}
|
||
.right{
|
||
color: #94673C;
|
||
font-size: 27rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.unitPopupBox {
|
||
:deep(.uv-radio__label-wrap){
|
||
display: none;
|
||
}
|
||
min-height: 50%;
|
||
padding: 32rpx;
|
||
// padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));
|
||
// padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
|
||
|
||
.title {
|
||
margin-bottom: 20rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
|
||
}
|
||
|
||
:deep(.uv-radio-group) {
|
||
width: 100%;
|
||
}
|
||
|
||
.info {
|
||
display: flex;
|
||
font-size: 28rpx;
|
||
max-height: 60vh;
|
||
overflow-y: auto;
|
||
|
||
.list {
|
||
display: flex;
|
||
width: 100%;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 1px dashed #787B7E10;
|
||
margin-bottom: 20rpx;
|
||
|
||
.left {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
|
||
.zuqi{
|
||
display: flex;
|
||
align-items: center;
|
||
.minus {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-width: 1px;
|
||
border-color: #E6E6E6;
|
||
border-style: solid;
|
||
border-top-left-radius: 100px;
|
||
border-top-right-radius: 100px;
|
||
border-bottom-left-radius: 100px;
|
||
border-bottom-right-radius: 100px;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
justify-content: center;
|
||
align-items: center;
|
||
line-height: 1;
|
||
}
|
||
.input {
|
||
padding: 10rpx;
|
||
background-color: #EBEBEB;
|
||
border-radius: 8rpx;
|
||
margin: 0 10rpx;
|
||
font-weight: 600;
|
||
}
|
||
.plus {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
background-color: #FF0000;
|
||
border-radius: 50%;
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
justify-content: center;
|
||
align-items: center;
|
||
line-height: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.radioBox {
|
||
display: flex;
|
||
justify-content: end;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.container {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding-bottom: 500rpx;
|
||
}
|
||
|
||
.agreement-wrap {
|
||
position: relative;
|
||
height: 70vh;
|
||
padding: 20rpx 40rpx;
|
||
// padding-bottom: 100rpx;
|
||
border-radius: 28rpx 28rpx 0 0;
|
||
background: #FFFFFF;
|
||
|
||
.agreement-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 0rpx;
|
||
margin-bottom: 20rpx;
|
||
font-size:36rpx;
|
||
font-weight: 600;
|
||
.name {
|
||
font-size: 40rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
|
||
.agreement-content {
|
||
height: calc(100% - 200rpx);
|
||
overflow: auto;
|
||
}
|
||
|
||
.roll-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
position: absolute;
|
||
right: 40rpx;
|
||
bottom: 140rpx;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
border-radius: 10rpx;
|
||
background: #FB322E;
|
||
}
|
||
|
||
.bottom-read {
|
||
width: 100%;
|
||
// margin: 30rpx 0;
|
||
padding: 20rpx 0;
|
||
color: var(--text-color);
|
||
border-radius: 99rpx;
|
||
text-align: center;
|
||
background: #FB322E;
|
||
opacity: 0.4;
|
||
|
||
&.agree {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.agreed {
|
||
display: flex;
|
||
width: 100%;
|
||
padding-bottom: 16rpx;
|
||
padding-left: 36rpx;
|
||
|
||
.check-wrap {
|
||
pointer-events: none;
|
||
margin-right: 8rpx;
|
||
:deep(.uv-radio-group){
|
||
flex-direction: column-reverse;
|
||
}
|
||
:deep(.uv-radio__label-wrap){
|
||
display: none;
|
||
}
|
||
// min-width: 40rpx;
|
||
// height: 40rpx;
|
||
// border: 6rpx solid #242a37;
|
||
// border-radius: 50%;
|
||
// margin: 4rpx 20rpx 0 0;
|
||
// font-size: 26rpx;
|
||
// color: #A8AAAC;
|
||
// text-align: center;
|
||
// line-height: 40rpx;
|
||
// background-color: #242a37;
|
||
// &.checked {
|
||
// background-color: var(--active-color);
|
||
// }
|
||
}
|
||
|
||
.read {
|
||
color: #323233;
|
||
}
|
||
|
||
.stress {
|
||
font-size: 24rpx;
|
||
color: #9D9FA2;
|
||
}
|
||
}
|
||
.agreed2{
|
||
padding-bottom: 20rpx;
|
||
.stress {
|
||
padding-left: 48rpx;
|
||
}
|
||
}
|
||
|
||
.agreed {
|
||
.check-wrap {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 10rpx;
|
||
:deep(.uv-radio__label-wrap){
|
||
display: none;
|
||
}
|
||
// :deep(.uv-radio){
|
||
// zoom: 1.0;
|
||
// }
|
||
// min-width: 30rpx;
|
||
// height: 30rpx;
|
||
// border: 4rpx solid #242a37;
|
||
// border-radius: 50%;
|
||
// margin: 4rpx 20rpx 0 0;
|
||
// font-size: 26rpx;
|
||
// color: #A8AAAC;
|
||
// &.checked {
|
||
// background-color: var(--active-color);
|
||
// }
|
||
}
|
||
|
||
.read {
|
||
color: #A8AAAC;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.stress {
|
||
font-size: 24rpx;
|
||
color: #9D9FA2;
|
||
}
|
||
}
|
||
|
||
.toOrder {
|
||
padding: 0;
|
||
padding-left: 28rpx;
|
||
border-radius: 999rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background-color: #0D1118;
|
||
color: #FFFFFF;
|
||
padding-bottom: 0;
|
||
margin-bottom: 0;
|
||
.left {
|
||
color: #E9CBA1;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 38rpx;
|
||
.price {
|
||
font-size: 38rpx;
|
||
&::first-letter{
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
&.overMaxFont{
|
||
font-size: 30rpx;
|
||
&::first-letter{
|
||
font-size: 28rpx;
|
||
font-weight: normal;
|
||
}
|
||
}
|
||
}
|
||
.detail {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #d0d1d2;
|
||
margin-left: 16rpx;
|
||
font-size: 28rpx;
|
||
font-weight: normal;
|
||
// .overMaxFont{
|
||
// font-size: 24rpx;
|
||
// }
|
||
.detail1{
|
||
font-size: 28rpx;
|
||
}
|
||
.detail2{
|
||
padding-left: 10rpx;
|
||
font-size: 26rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
// border-left:1px solid #4a4d51;
|
||
&::before{
|
||
content: '';
|
||
display: block;
|
||
width: 1px;
|
||
height: 30rpx;
|
||
border-radius: 50%;
|
||
background-color: #4a4d51;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
image{
|
||
margin-left: 10rpx;
|
||
transform: rotate(180deg);
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.right {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: -1px;
|
||
|
||
|
||
text {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.goOrder {
|
||
height: 86rpx;
|
||
width: 250rpx;
|
||
background-color: #FFFFFF;
|
||
border-radius: 999rpx;
|
||
letter-spacing: 4rpx;
|
||
:deep(.uv-button) {
|
||
font-size: 28rpx;
|
||
border: none;
|
||
font-weight: 600;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.orderInfo {
|
||
padding: 0;
|
||
|
||
ul {
|
||
list-style: none;
|
||
padding: 8rpx 40rpx;
|
||
|
||
li {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 32rpx 0;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #a8aaac20;
|
||
// padding-left: 10rpx;
|
||
// &:first-child {
|
||
// padding-top: 0;
|
||
// }
|
||
// &:last-child {
|
||
// padding-bottom: 0;
|
||
// }
|
||
|
||
&:active {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
&:last-child {
|
||
border: none;
|
||
}
|
||
|
||
.right {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
text {
|
||
padding-right: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.selectSite {
|
||
height: 75rpx; // 整体高度
|
||
display: flex;
|
||
justify-content: space-between; // 左右分布
|
||
align-items: center; // 垂直居中
|
||
background: linear-gradient(90deg, #FFE8C4 0%, #FFFFFF 100%);
|
||
width: 100%;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.selectSite .left {
|
||
display: flex;
|
||
align-items: center; // 左侧垂直居中
|
||
}
|
||
|
||
.selectSite .left .icon {
|
||
width: 30rpx; // 图片大小，可根据实际调整
|
||
height: 30rpx;
|
||
margin-right: 20rpx; // 图片和文字间距
|
||
}
|
||
|
||
.selectSite .left .address {
|
||
font-size: 28rpx;
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.selectSite .right {
|
||
display: flex;
|
||
align-items: center; // 右侧垂直居中
|
||
}
|
||
|
||
.selectSite .right .more {
|
||
font-size: 28rpx;
|
||
color: #000;
|
||
margin-right: 8rpx; // text 和 icon 间距
|
||
}
|
||
|
||
.siteInfo {
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
image {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
/* 顶部行 */
|
||
.top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
|
||
image {
|
||
// margin-top: 6rpx;
|
||
}
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
.title-wrap {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
|
||
.title {}
|
||
.tag {
|
||
background-color: $sfgrayBgColor;
|
||
margin-left: 8rpx;
|
||
border-radius: 8px;
|
||
height: 35rpx;
|
||
line-height: 35rpx;
|
||
padding: 0 8rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.right {
|
||
display: flex;
|
||
.distance {}
|
||
}
|
||
}
|
||
|
||
/* 底部地址行 */
|
||
.bottom {
|
||
display: flex;
|
||
image {
|
||
}
|
||
.address {
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
flex: 1;
|
||
line-height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.info {
|
||
display: flex;
|
||
.right.arrow {
|
||
justify-content: end;
|
||
transform: translateX(20rpx);
|
||
}
|
||
.left.arrow{
|
||
transform: translateX(-20rpx);
|
||
}
|
||
.arrow {
|
||
width: 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.arrowIcon {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 64rpx;
|
||
height: 64rpx;
|
||
text-align: center;
|
||
opacity: 0.4;
|
||
}
|
||
}
|
||
|
||
.swiper-container {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.swiper-container {
|
||
height: 320rpx;
|
||
margin-bottom: 20rpx;
|
||
|
||
.warehouse-detail-items {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.warehouse-detail-right {
|
||
// width: 250rpx;
|
||
height: 100% !important;
|
||
width: 100% !important;
|
||
|
||
image {
|
||
width: 300rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
uni-swiper-item {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.unitType {
|
||
padding: 40rpx;
|
||
.title {
|
||
// padding-left: 10rpx;
|
||
}
|
||
.bottom {
|
||
.name{
|
||
// padding-left: 10rpx;
|
||
}
|
||
display: flex;
|
||
align-items: baseline;
|
||
}
|
||
}
|
||
</style>
|