1569 lines
39 KiB
Vue
1569 lines
39 KiB
Vue
<template>
|
||
<view class="detail-wrap" :class="[`${themeInfo.theme}-theme`]">
|
||
<navBar />
|
||
<view class="container">
|
||
<view class="box1">
|
||
<view class="topBox">
|
||
<view class="info">
|
||
<!-- <view class="span"></view> -->
|
||
<view class="info-left">
|
||
{{ state.orderData.lockerName}}
|
||
</view>
|
||
<view class="info-right">
|
||
<view class="text">{{ $t("detail.store") }}：{{state.orderData.siteName}}</view>
|
||
<view class="text">{{ $t("detail.unit") }}：{{state.orderData.unitTypeName}}</view>
|
||
<template v-if="state.orderData.orderStatus !== 2">
|
||
<view class="text">{{ $t("detail.remain", { days: state.orderData.remainingDays }) }}</view>
|
||
<view class="text" style="color: red;" v-if="!(state.orderData.orderStartStatus == 2 && state.orderData.refundLockerStatus === 0)">
|
||
{{ $t('common.status') }}：
|
||
<template v-if="state.orderData.refundLockerStatus === 0">{{ $t("common.notStarted") }}</template>
|
||
<template v-else-if="state.orderData.refundLockerStatus === 1">{{ $t("unlock.cancelPending") }}</template>
|
||
<template v-else-if="state.orderData.refundLockerStatus === 2">{{ $t("unlock.outComplete") }}</template>
|
||
<template v-else-if="state.orderData.refundLockerStatus === 3">{{ $t("unlock.disapproval") }} {{ state.orderData.orderStatus == 5 ?`(${$t("unlock.overdue")})`:''}}</template>
|
||
<template v-else-if="state.orderData.refundLockerStatus === 4">{{ $t("unlock.overdue") }}</template>
|
||
</view>
|
||
<view v-if="state.orderData.refundLockerStatus == 3" class="text" style="color: red;">
|
||
{{ $t("unlock.disapprovalRemarks") }}：{{ state.orderData.dismissRemarks }}
|
||
</view>
|
||
<view class="text blackBtn">
|
||
<view class='li goodsListBox' @click.stop.prevent="goGoodsList(state.orderData.orderId)">
|
||
{{ $t("common.goodsList") }}
|
||
</view>
|
||
<view class='li goodsListBox' v-show="[0, 3, 4].includes(state.orderData?.refundLockerStatus)" @click.stop.prevent="goAuth(state.orderData)">
|
||
{{ $t("unlock.auth") }}
|
||
</view>
|
||
<view class='li goodsListBox' v-if="state.orderData?.orderStartStatus == 2 && state.orderData?.refundLockerStatus === 0 && state.orderData.canAddFace" @click.stop.prevent="goAControl(state.orderData.orderId)">
|
||
{{ $t("common.facialData") }}
|
||
</view>
|
||
<view class='li goodsListBox' @click.stop.prevent='showFixedPw' v-show="([0, 3, 4].includes(state.orderData?.refundLockerStatus))&&(state.orderData?.orderStartStatus == 2 && state.orderData?.refundLockerStatus !==4&&state.orderData?.orderStatus!==5)&&state.orderData?.canFixedPw">
|
||
{{ $t("unlock.FixedPassword") }}
|
||
</view>
|
||
<view class='li goodsListBox' @click.stop.prevent='showBindCard(state.orderData,0)' v-show="([0, 3, 4].includes(state.orderData?.refundLockerStatus))&&(state.orderData?.orderStartStatus == 2 && state.orderData?.refundLockerStatus !==4&&state.orderData?.orderStatus!==5)&&state.orderData?.canBindCard">
|
||
{{ $t("unlock.AccessControlCardBinding") }}
|
||
</view>
|
||
<view class='li goodsListBox' @click.stop.prevent='showBindCard(state.orderData,1)' v-show="([0, 3, 4].includes(state.orderData?.refundLockerStatus))&&(state.orderData?.orderStartStatus == 2 && state.orderData?.refundLockerStatus !==4&&state.orderData?.orderStatus!==5)&&state.orderData?.lockerCanBindCard">
|
||
{{ $t("unlock.LockCardUnbinding") }}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<view class="text" style="color: red;">
|
||
{{ $t('common.status') }}: {{ $t("unlock.unPaid") }}
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
<view class="box3">
|
||
<view class="select">
|
||
<view class="label">
|
||
* {{ $t("detail.orderNum") }}
|
||
</view>
|
||
<view class="inputBox">
|
||
<text class="value" :selectable='true' :user-select='true'>
|
||
{{state.orderData.orderNo}}
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="select">
|
||
<view class="label">
|
||
* {{ $t("detail.type") }}
|
||
</view>
|
||
<view class="inputBox">
|
||
<view class="value">
|
||
{{state.orderData.unitTypeName}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="select">
|
||
<view class="label">
|
||
* {{ $t("detail.period") }}
|
||
</view>
|
||
<view class="inputBox">
|
||
<view class="value">
|
||
{{state.orderData.rentalInitiateDate}} - {{state.orderData.rentalEndDate}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="select">
|
||
<view class="label">
|
||
* {{ $t("detail.cSize") }}
|
||
</view>
|
||
<view class="inputBox">
|
||
<view class="value">
|
||
{{state.orderData.volume}}({{state.orderData.length}}*{{state.orderData.width}}*{{state.orderData.height}})
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="select">
|
||
<view class="label">
|
||
* {{ $t("detail.cValueAdded") }}
|
||
</view>
|
||
<view class="inputBox">
|
||
<view class="value">
|
||
{{ $t("detail.nodemand") }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="select">
|
||
<view class="label">
|
||
* {{ $t("detail.valuation") }}
|
||
</view>
|
||
<view class="selectinfo">
|
||
<view class="left">
|
||
{{ $t("detail.rentalFee") }}
|
||
</view>
|
||
<view class="right">
|
||
{{ currency }} {{ state.orderData.originalPrice}}
|
||
</view>
|
||
</view>
|
||
<view class="selectinfo">
|
||
<view class="left">
|
||
{{ $t("detail.deposit") }}
|
||
</view>
|
||
<view class="right">
|
||
{{ currency }} {{ state.orderData.deposit}}
|
||
</view>
|
||
</view>
|
||
<view class="selectinfo">
|
||
<view class="left">
|
||
{{ $t("detail.valueAdded") }}
|
||
</view>
|
||
<view class="right">
|
||
{{ currency }} 0.00
|
||
</view>
|
||
</view>
|
||
<view class="selectinfo">
|
||
<view class="left">
|
||
{{ $t("detail.discount") }}
|
||
</view>
|
||
<view class="right">
|
||
{{ currency }} {{ state.orderData.favorable}}
|
||
</view>
|
||
</view>
|
||
<view class="selectinfo">
|
||
<view class="left">
|
||
{{ $t("common.tuangouCouponPrice") }}
|
||
</view>
|
||
<view class="right">
|
||
{{ currency }} {{ state.orderData.couponPrice}}
|
||
</view>
|
||
</view>
|
||
<view class="selectinfo Total">
|
||
<view class="left">
|
||
{{ $t("detail.total") }}
|
||
</view>
|
||
<view class="right">
|
||
{{ currency }} {{ state.orderData.actualPay}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="select" v-if="state.orderData?.paymentData?.length">
|
||
<view class="label">
|
||
* {{$t("detail.RENEWAL")}}
|
||
</view>
|
||
<view class="selectinfo" v-for="(item,index) in state.orderData.paymentData" :key="index">
|
||
<view class="left">
|
||
{{ index+1 }} {{ item.startTime }} {{ $t("detail.to") }} {{ item.endTime }}
|
||
</view>
|
||
<view class="right">
|
||
{{ currency }} {{ item.money}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<template v-if="state.orderData.orderStatus !== 2">
|
||
<view class="btnBox" v-show="state.orderData.refundLockerStatus === 0 || state.orderData.refundLockerStatus === 3 || state.orderData.refundLockerStatus === 4">
|
||
<uv-button
|
||
:disabled="!(state.orderData.orderStartStatus === 2 && state.orderData.refundLockerStatus !==4 && state.orderData.orderStatus !== 5 && state.orderData.isOpenDoor)"
|
||
class="uv-btn"
|
||
shape="circle"
|
||
@click="goDoor(state.orderData)"
|
||
customStyle="font-size: 20rpx;width: 135.42rpx;
|
||
height: 61.66rpx;
|
||
font-weight: 700;
|
||
white-space: nowrap;"
|
||
>
|
||
{{ $t("unlock.door") }}
|
||
</uv-button>
|
||
<uv-button
|
||
:disabled="!(state.orderData.orderStartStatus === 2 && state.orderData.refundLockerStatus !== 4 && state.orderData.orderStatus !== 5 && state.orderData.isOpenLock)"
|
||
class="uv-btn"
|
||
shape="circle"
|
||
@click="goLock(state.orderData)"
|
||
customStyle="font-size: 20rpx;width: 135.42rpx;
|
||
height: 61.66rpx;
|
||
font-weight: 700;
|
||
white-space: nowrap;"
|
||
>
|
||
{{ $t("unlock.lock") }}
|
||
</uv-button>
|
||
<uv-button
|
||
|
||
class="uv-btn"
|
||
shape="circle"
|
||
customStyle="font-size: 20rpx;width: 135.42rpx;
|
||
height: 61.66rpx;
|
||
font-weight: 700;
|
||
white-space: nowrap;"
|
||
@click="goRenew(state.orderData)"
|
||
:disabled="!((state.orderData.orderStartStatus == 2 || state.orderData.orderStartStatus == 1) && state.orderData.renewal)"
|
||
>
|
||
{{ $t("unlock.renew") }}
|
||
</uv-button>
|
||
<uv-button
|
||
class="uv-btn"
|
||
shape="circle"
|
||
v-show="state.orderData.refundLockerStatus === 4&&state.orderData.orderStatus!==5"
|
||
customStyle="font-size: 20rpx;width: 135.42rpx;
|
||
height: 61.66rpx;
|
||
font-weight: 700;
|
||
white-space: nowrap;"
|
||
@click="openModal"
|
||
>
|
||
{{ $t("unlock.moveout") }}
|
||
</uv-button>
|
||
<uv-button
|
||
class="uv-btn"
|
||
shape="circle"
|
||
customStyle="font-size: 20rpx;width: 135.42rpx;
|
||
height: 61.66rpx;
|
||
font-weight: 700;
|
||
white-space: nowrap;"
|
||
@click="goEvaluate"
|
||
>
|
||
{{ $t("unlock.evaluate") }}
|
||
</uv-button>
|
||
</view>
|
||
<view class="btnBox-1" v-show="state.orderData.refundLockerStatus === 1 || state.orderData.refundLockerStatus === 2">
|
||
<button class="pending" v-show="state.orderData.refundLockerStatus === 1" @click="cancelMoveOutRqt">
|
||
{{ $t("unlock.cancelout") }}
|
||
</button>
|
||
<button @click="backTo" class="pending">
|
||
{{ $t("unlock.return") }}
|
||
</button>
|
||
<button @click="goEvaluate" class="pending">
|
||
{{ $t("unlock.evaluate") }}
|
||
</button>
|
||
</view>
|
||
</template>
|
||
<template v-else>
|
||
<view class="btnBox-1">
|
||
<button @click="handlePay" class="pending">
|
||
{{ $t("unlock.goToPay") }}
|
||
</button>
|
||
<button @click="handleCancelOrder(state.orderData)" class="pending">
|
||
{{ $t("unlock.cancelOrder") }}
|
||
</button>
|
||
<button @click="backTo" class="pending">
|
||
{{ $t("unlock.return") }}
|
||
</button>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 上传图片退仓的弹窗 -->
|
||
<uv-popup
|
||
ref="popup"
|
||
customStyle="width: 80%; height: auto; padding:50rpx 0; border-radius: 32rpx;"
|
||
:closeOnClickOverlay="false"
|
||
>
|
||
<view class="modal-container">
|
||
<view class="modal-title">{{ $t("unlock.moveoutReminder") }}</view>
|
||
<text class="modal-text">
|
||
{{ $t("unlock.moveoutTip") }}
|
||
</text>
|
||
<view class="upload">
|
||
<uv-upload
|
||
:fileList="moveImageList"
|
||
name="1"
|
||
:maxCount="10"
|
||
width="500rpx"
|
||
height="200rpx"
|
||
multiple
|
||
:previewFullImage="false"
|
||
:uploadText="t('unlock.uploadTip')"
|
||
:customStyle="ifRedColor ? 'color: #FF0000;' : 'color: #242E42;'"
|
||
@afterRead="afterRead"
|
||
@delete="deletePic"
|
||
>
|
||
</uv-upload>
|
||
</view>
|
||
<view class="modal-button">
|
||
<view class="modal-button-1" @click="closeModal">{{ $t("unlock.cancel") }}</view>
|
||
<view class="modal-button-2" @click="handleRefundLocker">{{ $t("unlock.confirmOut") }}</view>
|
||
</view>
|
||
</view>
|
||
</uv-popup>
|
||
<!-- 成功退仓弹窗 -->
|
||
<uv-popup
|
||
ref="popup2"
|
||
customStyle="width: 80%; height: 400rpx; padding:50rpx 0; border-radius: 32rpx;"
|
||
:closeOnClickOverlay="false"
|
||
>
|
||
<view class="modal-container2">
|
||
<view class="modal-title">{{ $t("unlock.moveoutReminder") }}</view>
|
||
<text class="modal-text">
|
||
{{ $t("unlock.moveoutSuccess") }}
|
||
</text>
|
||
<view class="modal-button">
|
||
<!-- <view class="modal-button-2" @click="goEvaluate">{{ $t("unlock.evaluate") }}</view> -->
|
||
<view class="modal-button-2" @click="closeModal2">{{ $t("unlock.order") }}</view>
|
||
</view>
|
||
</view>
|
||
</uv-popup>
|
||
|
||
</view>
|
||
<myModal
|
||
v-model="state.pwModel"
|
||
:title="state.orderData?.lockerName+$t('unlock.FixedPassword')"
|
||
:confirmText="$t('common.close')"
|
||
:cancelShow="false"
|
||
>
|
||
<view class="pwModel">
|
||
<view class="content">
|
||
<view class="item">
|
||
<view class="label">{{ $t('common.password') }}:{{ state.orderData?.userPassword || 'none' }}</view>
|
||
</view>
|
||
<uv-input v-model="state.userPassword" :placeholder="$t('unlock.FixedPassword')" maxlength="6" type="number" >
|
||
<template v-slot:suffix>
|
||
<uv-button @click="setFiexdPw" size="mini">{{ $t('unlock.ResetPassword') }}</uv-button>
|
||
</template>
|
||
</uv-input>
|
||
</view>
|
||
</view>
|
||
</myModal>
|
||
<myPopup v-model="state.bingZonedCardShow" mode="bottom" :closeable="true" bgColor="transparent" :customStyle="{padding:'0'}">
|
||
<view class="bingZonedCardBox">
|
||
<view class="img"><view class="bg-img"></view><uv-image mode="widthFix" src="https://elitesoss.oss-cn-guangzhou.aliyuncs.com/0a6e1e12-49be-4ded-a009-d702d5685c33.png" width="140"></uv-image></view>
|
||
<view class="btn">
|
||
<!-- <view>开始配对</view> -->
|
||
<uv-button @click="startLockerBindCard">
|
||
<view v-if="state.bingCardState == 0 || state.bingCardState == 3">{{ $t("bingCard.start")}}</view>
|
||
<view v-if="state.bingCardState == 1">
|
||
<view>{{ $t("bingCard.Pairing")}}{{count}}s</view>
|
||
<view>{{ $t("bingCard.panel")}}</view>
|
||
</view>
|
||
</uv-button>
|
||
</view>
|
||
<view class="tip">
|
||
<view>1:{{ $t("bingCard.Click") }}</view>
|
||
<view>2:{{ $t("bingCard.panel") }}</view>
|
||
<view>3:{{ $t("bingCard.single") }}</view>
|
||
<view>4:{{ $t("bingCard.close") }}</view>
|
||
</view>
|
||
</view>
|
||
</myPopup>
|
||
<myModal
|
||
v-model="state.bindCardModel"
|
||
:title="state.bindCardType == 1 ? $t('unlock.LockCardUnbinding') : $t('unlock.AccessControlCardBinding')"
|
||
@confirm="choseBingCardType"
|
||
>
|
||
<view class="pwModel bindCardModel">
|
||
<view class="content">
|
||
<view class="item">
|
||
<view class="label">IC/ID卡号 CARD NUMBER</view>
|
||
<view class="label-input">
|
||
<uv-input v-model="state.cardNo" :placeholder="state.bindCardType == 1 ? '请输入在读卡器刷出的卡号' : '请输入在门禁机刷出的卡号'" ></uv-input>
|
||
</view>
|
||
<!-- <view class="tips">
|
||
请输入在门禁机刷出的卡号
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</myModal>
|
||
<!-- 是否去验证个人信息 -->
|
||
<myModal
|
||
v-model="state.showIsGoAuth"
|
||
:content="$t('common.isGoAuth')"
|
||
:cancelShow="false"
|
||
@confirm="goVaild"
|
||
></myModal>
|
||
<myModal
|
||
v-model="state.showPayAfterMoadl"
|
||
:cancelShow="false"
|
||
@confirm="payAfterconfirm"
|
||
>
|
||
<view class="payAfter">
|
||
<view
|
||
class="payAfterIcon"
|
||
style="display: flex; justify-content: center"
|
||
>
|
||
<uv-icon
|
||
:name="
|
||
state.paySuccessOrfail
|
||
? 'checkmark-circle-fill'
|
||
: 'close-circle-fill'
|
||
"
|
||
:color="state.paySuccessOrfail ? '#14b51a' : '#f10526'"
|
||
size="60"
|
||
></uv-icon>
|
||
</view>
|
||
<view class="payAfterText">
|
||
{{
|
||
state.paySuccessOrfail
|
||
? $t("common.paySuccess")
|
||
: $t("common.payFail")
|
||
}}
|
||
</view>
|
||
</view>
|
||
<template #affterBtn>
|
||
<view v-if="state.paySuccessOrfail" class="modal-button-1" @click="goAControl(state.orderData?.orderId)">{{ $t("unlock.FaceEnrollment") }}</view>
|
||
</template>
|
||
</myModal>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
ref, createApp
|
||
} from 'vue';
|
||
import navBar from '@/components/navBar.vue'
|
||
import { currency } from '@/config/index.js'
|
||
import { onLoad,onShow,onHide } from '@dcloudio/uni-app'
|
||
import { useOrderApi } from '@/Apis/order.js'
|
||
import dayjs from 'dayjs'
|
||
import myModal from '@/components/myModal.vue';
|
||
import myPopup from '@/components/myPopup.vue';
|
||
import { useCountDown } from "@/hooks/index";
|
||
// import { baseImageUrl } from '@/config/index.js'
|
||
import { navigateBack } from '@/utils/common.js'
|
||
import { useGoodsApi } from "@/Apis/goodsList.js";
|
||
const { count, countDown,cancelCout } = useCountDown();
|
||
import { useLockApi } from '@/Apis/lock.js';
|
||
// 主题色配置
|
||
import { useMainStore } from "@/store/index.js";
|
||
const { themeInfo, getUserInfo, storeState, getHasVerify} = useMainStore();
|
||
const getGoodsApi = useGoodsApi();
|
||
const getLockApi = useLockApi();
|
||
// 国际化配置
|
||
import { useI18n } from 'vue-i18n';
|
||
const { t } = useI18n();
|
||
const getApi = useOrderApi()
|
||
const checked = ref(true)
|
||
const columns = Array.from({ length: 36 }, (v, i) => ({
|
||
text: `${i + 1} month${i + 1 > 1 ? 's' : ''}`,
|
||
value: i + 1
|
||
}));
|
||
const today = dayjs().set('hour', 0).set('minute', 0).set('second', 0).set('millisecond', 0);
|
||
// 生成当天一个月后的日期
|
||
let oneMonthLater = today.add(1, 'month');
|
||
const state = ref({
|
||
checked:true,
|
||
orderId:'',
|
||
startDate:today,
|
||
month:24,
|
||
orderData:{},
|
||
pwModel:false,
|
||
userPassword:'',
|
||
bindCardModel:false,
|
||
cardNo:'',
|
||
refundLoading: false,
|
||
bindCardType:'', //0:门禁 1: 锁
|
||
bingZonedCardShow:false, // 绑定zoned卡
|
||
showPayAfterMoadl: false, //打开支付窗口
|
||
paySuccessOrfail: false, // 支付状态
|
||
showIsGoAuth: false, // 是否去验证个人信息
|
||
bingCardState:0, // 绑定卡状态 0未开始 1绑定中 2绑定成功 3绑定失败
|
||
})
|
||
onLoad((params)=>{
|
||
state.value.orderId = params.id
|
||
|
||
})
|
||
onShow((params)=>{
|
||
GetOrderById()
|
||
})
|
||
|
||
|
||
const handleCancelOrder = (item) => {
|
||
uni.showModal({
|
||
title: t('common.cancelOrder'),
|
||
content: t('common.cancelOrderTips'),
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
cancelOrder(item);
|
||
}
|
||
},
|
||
});
|
||
}
|
||
|
||
const payAfterconfirm = () => {
|
||
};
|
||
|
||
|
||
const handlePay = () => {
|
||
uni.showLoading({
|
||
mask: true,
|
||
});
|
||
getApi
|
||
.ContinueOrderPay({
|
||
orderId:state.value.orderData.orderId,
|
||
})
|
||
.then((res) => {
|
||
uni.hideLoading();
|
||
if (res.code === 200) {
|
||
uni.requestPayment({
|
||
provider: "wxpay",
|
||
timeStamp: res.data.timeStamp, // 从服务器获取的时间戳
|
||
nonceStr: res.data.nonceStr, // 从服务器获取的随机字符串
|
||
package: `prepay_id=${res.data.package}`, // 从服务器获取的预支付交易会话标识
|
||
signType: res.data.signType, // 签名方式
|
||
paySign: res.data.paySign, // 从服务器获取的签名
|
||
success(res) {
|
||
// 支付成功
|
||
state.value.paySuccessOrfail = true;
|
||
state.value.showPayAfterMoadl = true;
|
||
console.log("支付成功", res);
|
||
GetOrderById()
|
||
},
|
||
fail(err) {
|
||
uni.hideLoading();
|
||
state.value.paySuccessOrfail = false;
|
||
state.value.showPayAfterMoadl = true;
|
||
GetOrderById()
|
||
console.error("支付失败", err);
|
||
},
|
||
});
|
||
} else {
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
const cancelOrder = (item) => {
|
||
uni.showLoading({
|
||
mark: true,
|
||
})
|
||
getApi.OrderCountdownTime({ orderId: item.orderId }).then(res=>{
|
||
uni.hideLoading()
|
||
if(res.code === 200){
|
||
backTo()
|
||
}else{
|
||
uni.showToast({
|
||
title: res.msg,
|
||
icon: "none",
|
||
});
|
||
}
|
||
})
|
||
}
|
||
|
||
const goVaild = () => {
|
||
uni.navigateTo({
|
||
url: "/pagesb/validationInfo/index",
|
||
});
|
||
};
|
||
// 是否已经验证过了
|
||
const canUseByHasVerify = async ( item )=>{
|
||
const hasVerify = await getHasVerify()
|
||
const isTodayOrder = dayjs().isSame(dayjs(item.paymentTime), "day"); // 判断是否是今天的订单
|
||
// 验证通过 或者是当天的订单 可以直接进入
|
||
if(hasVerify || isTodayOrder){
|
||
return true
|
||
}else{
|
||
state.value.showIsGoAuth = true
|
||
return
|
||
}
|
||
return hasVerify
|
||
}
|
||
|
||
const showFixedPw = async ()=>{
|
||
const hasVerify = await canUseByHasVerify(item)
|
||
if(!hasVerify) return
|
||
state.value.pwModel = true
|
||
state.value.userPassword = ''
|
||
}
|
||
const setFiexdPw = ()=>{
|
||
const data = {
|
||
lockMac:state.value.orderData.lockMac,
|
||
input:state.value.userPassword,
|
||
siteId:state.value.orderData.siteId,
|
||
orderId:state.value.orderData.orderId
|
||
}
|
||
if(!data.lockMac){
|
||
uni.showToast({
|
||
title:'lcokMac is null',
|
||
icon:'none'
|
||
})
|
||
return
|
||
}
|
||
// 校验input 为6位数字
|
||
if(!/^\d{6}$/.test(data.input)){
|
||
uni.showToast({
|
||
title:'请输入6位数字',
|
||
icon:'none'
|
||
})
|
||
return
|
||
}
|
||
uni.showLoading()
|
||
getLockApi.SetUserFixedPassword(data).then(res=>{
|
||
uni.hideLoading()
|
||
if(res.data?.isSuccess){
|
||
state.value.orderData.userPassword = data.input
|
||
state.value.userPassword = ''
|
||
uni.showToast({
|
||
title:'success',
|
||
icon:'none'
|
||
})
|
||
}else{
|
||
uni.showToast({
|
||
title:res.data?.message || res.msg,
|
||
icon:'none'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
const showBindCard = async (item,type)=>{
|
||
const hasVerify = await canUseByHasVerify(item)
|
||
if(!hasVerify) return
|
||
if(type!=0 && !item.lockMac){
|
||
uni.showToast({
|
||
title:'lockMac is null',
|
||
icon:'none'
|
||
})
|
||
return
|
||
}
|
||
if(type == 1 && (item.lockTypeId == 1 || item.lockTypeId == 4)){
|
||
state.value.bingZonedCardShow = true
|
||
}else{
|
||
state.value.bindCardModel = true
|
||
}
|
||
|
||
state.value.cardNo = ''
|
||
state.value.selectItem = item
|
||
state.value.bindCardType = type
|
||
state.value.bingCardState = 0
|
||
}
|
||
|
||
const choseBingCardType = ()=>{
|
||
// 通通锁绑卡
|
||
if(state.value.bindCardType == 1){
|
||
BindCardByWifiSmartLock()
|
||
}else{
|
||
// 门禁
|
||
bindCard()
|
||
}
|
||
}
|
||
onHide(()=>{
|
||
cancelCout()
|
||
state.value.bingZonedCardShow = false
|
||
state.value.bindCardModel = false
|
||
state.value.pwModel = false
|
||
})
|
||
const SetRFIDCard = ()=>{
|
||
state.value.bingCardState = 1
|
||
getLockApi.SetRFIDCard({ lockMac: state.value.selectItem.lockMac, input: '1',siteId:state.value.selectItem.siteId,orderId:state.value.selectItem.orderId}).then(res=>{
|
||
if(res.data.isSuccess){
|
||
state.value.bingCardState = 1
|
||
GetBindingCardResult()
|
||
}else{
|
||
state.value.bingCardState = 3
|
||
}
|
||
})
|
||
}
|
||
const GetBindingCardResult = ()=>{
|
||
getLockApi.GetBindingCardResult({ lockMac: state.value.selectItem.lockMac,siteId:state.value.selectItem.siteId,orderId:state.value.selectItem.orderId }).then(res=>{
|
||
if (res.data === 'Waiting') {
|
||
if(state.value.bingZonedCardShow){
|
||
setTimeout(()=>{
|
||
GetBindingCardResult()
|
||
},1000)
|
||
}
|
||
} else if (res.data === 'OK') {
|
||
state.value.bingCardState = 2
|
||
cancelCout()
|
||
} else if (res.data === 'TimeOut') {
|
||
state.value.bingCardState = 3
|
||
cancelCout()
|
||
|
||
}
|
||
})
|
||
}
|
||
// 通通锁绑卡
|
||
const BindCardByWifiSmartLock = async()=>{
|
||
uni.showLoading()
|
||
const data = {
|
||
lockMac:state.value.selectItem.lockMac,
|
||
input:state.value.cardNo.trim(),
|
||
orderId:state.value.selectItem.orderId,
|
||
siteId:state.value.selectItem.siteId,
|
||
}
|
||
if(!data.lockMac){
|
||
uni.showToast({
|
||
title:'lockMac is null',
|
||
icon:'none'
|
||
})
|
||
return
|
||
}
|
||
if(data.input == ''){
|
||
uni.showToast({
|
||
title:'卡号不能为空',
|
||
icon:'none'
|
||
})
|
||
return
|
||
}
|
||
getLockApi.BindCardByWifiSmartLock(data).then(res=>{
|
||
if(res.code == 200&& res.data?.isSuccess){
|
||
setTimeout(()=>{
|
||
uni.hideLoading()
|
||
state.value.cardNo = ''
|
||
state.value.bindCardModel = false
|
||
uni.showToast({
|
||
title:'success',
|
||
icon:'none'
|
||
})
|
||
},2000)
|
||
}else{
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title:res.data?.message || res.msg,
|
||
icon:'none'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
const startLockerBindCard = ()=>{
|
||
countDown(30,()=>{
|
||
SetRFIDCard()
|
||
})
|
||
}
|
||
|
||
const bindCard = async()=>{
|
||
let customerId = storeState.userInfo?.id
|
||
if(!customerId){
|
||
const { data: userInfo } = await getUserInfo();
|
||
customerId = userInfo?.id
|
||
}
|
||
const data = {
|
||
customerId,
|
||
siteId:state.value.orderData.siteId,
|
||
cardNumber:state.value.cardNo.trim()
|
||
}
|
||
if(!data.siteId){
|
||
uni.showToast({
|
||
title:'siteId is null',
|
||
icon:'none'
|
||
})
|
||
return
|
||
}
|
||
if(!data.cardNumber){
|
||
uni.showToast({
|
||
title:'卡号不能为空',
|
||
icon:'none'
|
||
})
|
||
return
|
||
}
|
||
uni.showLoading()
|
||
getLockApi.AddCardNumber(data).then(res=>{
|
||
if(res.code == 200){
|
||
setTimeout(()=>{
|
||
uni.hideLoading()
|
||
state.value.cardNo = ''
|
||
state.value.bindCardModel = false
|
||
uni.showToast({
|
||
title:'success',
|
||
icon:'none'
|
||
})
|
||
},2000)
|
||
}else{
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title:res.data?.message || res.msg,
|
||
icon:'none'
|
||
})
|
||
}
|
||
})
|
||
}
|
||
const goAuth = async (item)=>{
|
||
const hasVerify = await canUseByHasVerify(item)
|
||
if(!hasVerify) return
|
||
uni.navigateTo({
|
||
url:`/pagesb/houseKey/index?Order_ID=${item.orderId}`
|
||
})
|
||
}
|
||
const goRenew = (item)=>{
|
||
if(item.renewal){
|
||
uni.navigateTo({
|
||
url:`/pages/renewOrder/index?siteId=${state.value.siteId}&lockerId=${item.lockerId}&orderId=${item.orderId}`
|
||
})
|
||
}
|
||
}
|
||
const backTo = ()=>{
|
||
navigateBack()
|
||
}
|
||
const GetOrderById = ()=>{
|
||
uni.showLoading()
|
||
getApi.GetOrderById({orderId:state.value.orderId}).then(res=>{
|
||
uni.hideLoading()
|
||
if(res.code===200){
|
||
state.value.orderData = res.data
|
||
}
|
||
})
|
||
}
|
||
function goDoor(item) {
|
||
if (!item.isOpenDoor) return;
|
||
uni.navigateTo({
|
||
url: `/pages/orderdetail/door?id=${item.orderId}&siteId=${item.siteId}`
|
||
})
|
||
}
|
||
const goAControl = (id) =>{
|
||
uni.navigateTo({
|
||
url:`/pagesb/AControl/index?id=${id}`
|
||
})
|
||
}
|
||
const goGoodsList = (id)=>{
|
||
uni.navigateTo({
|
||
url: `/pages/goodsList/index?orderId=${id}`
|
||
})
|
||
}
|
||
|
||
const hasGoodsList = async (id)=>{
|
||
uni.showLoading()
|
||
let res
|
||
try {
|
||
res = await getGoodsApi.GetSubmitGoodsList(id)
|
||
} catch (error) {
|
||
uni.hideLoading()
|
||
}
|
||
return res?.data
|
||
}
|
||
|
||
async function goLock(item) {
|
||
if (!item.isOpenLock) return;
|
||
const hasVerify = await canUseByHasVerify(item)
|
||
if(!hasVerify) return
|
||
// 判断有没有物品清单
|
||
const hasGoods= await hasGoodsList(item.orderId)
|
||
if (!hasGoods?.length) {
|
||
uni.showToast({
|
||
title: t('unlock.fillInventory'),
|
||
icon: 'none',
|
||
duration: 1000
|
||
});
|
||
setTimeout(() => {
|
||
goGoodsList(item.orderId);
|
||
}, 1000);
|
||
return;
|
||
}
|
||
uni.navigateTo({
|
||
url: `/pages/orderdetail/lock?id=${item.orderId}&lockmac=${item.lockMac}`
|
||
})
|
||
}
|
||
// 退仓弹出框
|
||
const popup = ref()
|
||
const popup2 = ref()
|
||
// CSS变颜色
|
||
const ifRedColor = ref(false)
|
||
function openModal() {
|
||
popup.value.open()
|
||
}
|
||
function closeModal() {
|
||
popup.value.close()
|
||
}
|
||
// 发起退仓请求后点击我的订单跳到unlock
|
||
function closeModal2() {
|
||
popup2.value.close()
|
||
uni.reLaunch({
|
||
url:'/pages/unlock/index'
|
||
});
|
||
}
|
||
function goEvaluate() {
|
||
uni.navigateTo({
|
||
url: `/pages/evaluate/index?orderId=${state.value.orderData.orderId}&siteId=${state.value.orderData.siteId}`
|
||
});
|
||
}
|
||
const moveImageList = ref([]);
|
||
// 删除图片
|
||
const deletePic = (event) => {
|
||
moveImageList.value.splice(event.index, 1);
|
||
};
|
||
// 新增图片方法
|
||
const afterRead = async (event) => {
|
||
let lists = [].concat(event.file);
|
||
let fileListLen = moveImageList.value.length;
|
||
lists.map(item => {
|
||
moveImageList.value.push({
|
||
...item,
|
||
status: 'uploading'
|
||
});
|
||
});
|
||
|
||
for (let i = 0; i < lists.length; i++) {
|
||
const result = await uploadImage(lists[i].url);
|
||
let item = moveImageList.value[fileListLen];
|
||
moveImageList.value.splice(fileListLen, 1, Object.assign(item, {
|
||
status: result ? 'success' : 'failed',
|
||
url: result
|
||
}));
|
||
fileListLen++;
|
||
}
|
||
}
|
||
// 上传图片请求
|
||
const uploadImage = async (url) => {
|
||
let resUrl = '';
|
||
try {
|
||
const res = await getApi.UploaderImage({ filePath: url });
|
||
resUrl = res.data;
|
||
ifRedColor.value = false;
|
||
} catch (error) {
|
||
console.error('UploaderImage error:', error);
|
||
}
|
||
return resUrl;
|
||
}
|
||
// 确认退仓
|
||
const handleRefundLocker = async () => {
|
||
try {
|
||
const hasLoadingImage = moveImageList.value.find(item => item.status === 'uploading');
|
||
if (hasLoadingImage) {
|
||
uni.showToast({
|
||
title: '图片上传中，请稍后（The picture is being uploaded, please wait）',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
const imageList = moveImageList.value.filter(item => item.status === 'success');
|
||
if (!imageList.length) {
|
||
ifRedColor.value = true;
|
||
uni.showToast({
|
||
title: '请上传图片（Please upload pictures）',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
if (state.value.refundLoading) return;
|
||
uni.showLoading({ mask:true });
|
||
state.value.refundLoading = true;
|
||
let imageUrls = imageList.map(item => item.url);
|
||
imageUrls = imageUrls.join(',');
|
||
const { code } = await getApi.ApplyForRefundLocker({ orderId: state.value.orderId, imageUrl: imageUrls });
|
||
if (code == 200) {
|
||
popup.value.close();
|
||
popup2.value.open();
|
||
}
|
||
uni.hideLoading();
|
||
state.value.refundLoading = false;
|
||
} catch (error) {
|
||
uni.hideLoading();
|
||
state.value.refundLoading = false;
|
||
}
|
||
}
|
||
// 取消退仓
|
||
const cancelMoveOutRqt = () => {
|
||
uni.showLoading()
|
||
getApi.CancelApplyForRefundLocker( state.value.orderId ).then(res=>{
|
||
if(res.code === 200) {
|
||
GetOrderById()
|
||
uni.hideLoading()
|
||
}
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import '@/static/style/theme.scss';
|
||
// 解决H5转微信小程序使用v-show不生效的问题
|
||
[hidden] {
|
||
display: none !important;
|
||
}
|
||
:deep(.modal-button-1) {
|
||
width: 260rpx;
|
||
height: 72rpx;
|
||
background: #F4F3F3;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
border-radius: 14rpx;
|
||
margin-left: 20upx;
|
||
&:active {
|
||
background: #888;
|
||
}
|
||
}
|
||
.payAfter {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
.payAfterIcon {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 20px;
|
||
}
|
||
.payAfterText {
|
||
font-size: 28rpx;
|
||
}
|
||
}
|
||
.pwModel{
|
||
.content{
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.item{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 40rpx 0;
|
||
.label{
|
||
font-size: 36rpx;
|
||
color: #242A37;
|
||
font-weight: bold;
|
||
margin-right: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.bindCardModel{
|
||
width: 90%;
|
||
.content{
|
||
.item{
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.label{
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
margin-bottom: 10rpx;
|
||
width: 100%
|
||
}
|
||
.label-input{
|
||
width: 100%;
|
||
}
|
||
.tips{
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
color: red;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
.bingZonedCardBox{
|
||
width: 98%;
|
||
margin: 0 1%;
|
||
background-color: #FFFFFF;
|
||
border-radius: 18rpx 18rpx 0 0;
|
||
padding: 20rpx;
|
||
.img{
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 20rpx;
|
||
position: relative;
|
||
.bg-img{
|
||
position: absolute;
|
||
top: 50px;
|
||
width: 120px;
|
||
height: 120px;
|
||
border-radius: 50%;
|
||
background-color: gold;
|
||
filter: blur(110px);
|
||
z-index: 0;
|
||
}
|
||
}
|
||
.btn{
|
||
::v-deep .uv-button {
|
||
color: var(--text-color);
|
||
background-color: var(--btn-color1);
|
||
border: none;
|
||
font-size: 32rpx;
|
||
height: auto;
|
||
font-weight: bold;
|
||
text-justify: 20rpx;
|
||
padding: 16rpx 0 ;
|
||
.uv-button__loading-text {
|
||
font-size: 32rpx!important;
|
||
font-weight: bold;
|
||
text-justify: 20rpx;
|
||
}
|
||
}
|
||
}
|
||
.tip{
|
||
margin: 20rpx 0;
|
||
view{
|
||
margin:20rpx 0;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
.detail-wrap {
|
||
min-height: 100%;
|
||
background: linear-gradient(0.00deg, var(--left-linear), var(--right-linear));
|
||
overflow: auto;
|
||
}
|
||
|
||
.container {
|
||
padding: 0 30rpx 40rpx;
|
||
font-size: 14px;
|
||
line-height: 24px;
|
||
|
||
|
||
.myCheckbox{
|
||
::v-deep .van-icon{
|
||
border: 2px solid #242A37;
|
||
background-color: #D8D8D8;
|
||
}
|
||
::v-deep .van-icon-success:before{
|
||
opacity: 0;
|
||
}
|
||
::v-deep .van-checkbox__icon--checked{
|
||
.van-icon{
|
||
background-color: var(--main-color);
|
||
}
|
||
}
|
||
}
|
||
.select{
|
||
border-bottom: 1px dashed #d8d8d857;
|
||
.label{
|
||
font-weight: bold;
|
||
color: #BEC2CE;
|
||
font-size: 24rpx;
|
||
}
|
||
.selectinfo{
|
||
color: #242E42;
|
||
font-size: 22rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-weight: bold;
|
||
padding:0 18rpx;
|
||
opacity: 0.7;
|
||
&.Total{
|
||
margin-top: 10rpx;
|
||
color: #242E42;
|
||
opacity: 1;
|
||
}
|
||
}
|
||
.garyBox{
|
||
background-color: rgba(216, 216, 216, 0.3);
|
||
border-radius: 8rpx;
|
||
padding: 2rpx 10rpx;
|
||
font-size: 20rpx;
|
||
font-weight: bold;
|
||
color: rgb(36, 46, 66);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 10rpx 4rpx;
|
||
}
|
||
.inputBox{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10rpx;
|
||
.value{
|
||
color:#242E42;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
}
|
||
image{
|
||
width: 20rpx;
|
||
height: 12rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.box3{
|
||
margin-top: 40rpx;
|
||
padding: 40rpx;
|
||
background-color:rgba(255, 255, 255,0.9);
|
||
border-radius: 18rpx;
|
||
|
||
.btnBox{
|
||
display: flex;
|
||
justify-content: space-evenly;
|
||
flex-wrap: wrap;
|
||
margin-top: 20rpx;
|
||
.uv-btn {
|
||
width: 135.42rpx;
|
||
height: 61.66rpx;
|
||
font-weight: 700;
|
||
white-space: nowrap;
|
||
}
|
||
.pending {
|
||
width: 100%;
|
||
height: 61.66rpx;
|
||
background: var(--btn-color1);
|
||
font-size: 20rpx;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
line-height: 61rpx;
|
||
color: #FFF;
|
||
border-radius: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
letter-spacing: 0.39px;
|
||
}
|
||
::v-deep .uv-button {
|
||
color: var(--text-color);
|
||
background-color: var(--btn-color1);
|
||
}
|
||
}
|
||
.btnBox-1 {
|
||
@extend .btnBox;
|
||
flex-direction: column;
|
||
}
|
||
.agreed{
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.text{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
text{
|
||
color: var(--active-color);
|
||
}
|
||
}
|
||
.bth{
|
||
margin-top: 60rpx;
|
||
margin-bottom: 20rpx;
|
||
button{
|
||
color: #FFF;
|
||
background: var(--active-color);
|
||
border-radius: 14rpx;
|
||
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.13);
|
||
}
|
||
|
||
}
|
||
.tips{
|
||
color: #2A3447;
|
||
font-size: 22rpx;
|
||
font-weight: bold;
|
||
}
|
||
.fee{
|
||
margin: 10rpx 0;
|
||
.info{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 24rpx;
|
||
color: #242A37;
|
||
font-weight: bold;
|
||
.left{
|
||
display: flex;
|
||
align-items: center;
|
||
&::before{
|
||
content: ' ';
|
||
display: block;
|
||
background: var(--active-color);
|
||
height: 24rpx;
|
||
width: 6rpx;
|
||
border-radius: 4rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
.monthSelect{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
.month{
|
||
display: flex;
|
||
align-items: center;
|
||
box-sizing: border-box;
|
||
margin-bottom: 10rpx;
|
||
width: 49%;
|
||
font-size: 22rpx;
|
||
background-color: #F2F0E9;
|
||
border: 1px solid #242E42;
|
||
padding: 4rpx 8rpx;
|
||
font-weight: bold;
|
||
border-radius: 8rpx;
|
||
image{
|
||
width: 21rpx;
|
||
height: 28rpx;
|
||
margin-left: 4rpx;
|
||
}
|
||
&.active{
|
||
background-color: var(--active-color);
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
.topBox {
|
||
position: relative;
|
||
background-color: #FFFFFF;
|
||
border-radius: 32rpx;
|
||
|
||
.pirce {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx 40rpx;
|
||
color: #242A37;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
.left{
|
||
position: relative;
|
||
&:after{
|
||
content: ' ';
|
||
display: block;
|
||
width: 120%;
|
||
height: 2px;
|
||
background-color: var(--btn-color3);
|
||
transform: rotate(9deg);
|
||
position: absolute;
|
||
top: 50%;
|
||
left: -5px;
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.info {
|
||
background: linear-gradient(180.00deg, var(--left-linear), var(--right-linear));
|
||
position: relative;
|
||
border-radius: 32rpx;
|
||
padding: 40rpx;
|
||
color: var(--text-color);
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.info-left {
|
||
padding: 0 40rpx;
|
||
width: 240rpx;
|
||
font-size: 64rpx;
|
||
font-weight: bold;
|
||
line-height: 1;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.info-right {
|
||
flex: 1;
|
||
font-size: 24rpx;
|
||
.blackBtn{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
.text{
|
||
.li{
|
||
padding: 4rpx 8rpx;
|
||
width: fit-content;
|
||
background-color: #242A37;
|
||
color: #f5f5f5;
|
||
font-size: 20rpx;
|
||
border-radius: 999rpx;
|
||
text-align: center;
|
||
margin-top: 10rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
// .span {
|
||
// position: absolute;
|
||
// inset: 0;
|
||
// rotate: 180deg;
|
||
// border-radius: 18rpx;
|
||
// &::before{
|
||
// content: "";
|
||
// position: absolute;
|
||
// bottom: 0;
|
||
// width: 100%;
|
||
// background-repeat: repeat;
|
||
// height: 4.5px;
|
||
// background-image: radial-gradient(
|
||
// circle at 2.5px 3.75px,
|
||
// #0a84b8 3px,
|
||
// transparent 3.5px
|
||
// );
|
||
// background-size: 10px 5px;
|
||
// /* 让波浪边框不会执行动画 */
|
||
|
||
|
||
// }
|
||
// &::after {
|
||
// content: "";
|
||
// position: absolute;
|
||
// bottom: 0;
|
||
// width: 100%;
|
||
// background-repeat: repeat;
|
||
// height: 0px;
|
||
// background-image: radial-gradient(
|
||
// circle at 2.5px -1.45px,
|
||
// transparent 6px,
|
||
// #0a84b8 3.75px
|
||
// );
|
||
// background-size: 5px 5px;
|
||
// }
|
||
// }
|
||
}
|
||
|
||
&::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -7px;
|
||
left: 4px;
|
||
width: 100%;
|
||
height: 14px;
|
||
background: radial-gradient(var(--right-linear) 0px, var(--right-linear) 5px, transparent 5px, transparent);
|
||
background-size: 14px 14px;
|
||
z-index: 9;
|
||
}
|
||
}
|
||
.modal-container {
|
||
// height: 700rpx;
|
||
// background: #000;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.modal-title {
|
||
width: 486rpx;
|
||
height: 42rpx;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
font-size: 36rpx;
|
||
color: #000000;
|
||
position: relative;
|
||
// display: inline-block;
|
||
z-index: 1;
|
||
&::before{
|
||
position: absolute;
|
||
content: ' ';
|
||
width: 100%;
|
||
height: 14rpx;
|
||
background-color: var(--main-color);
|
||
border-radius: 100px;
|
||
display: block;
|
||
bottom: 0;
|
||
z-index: -1;
|
||
}
|
||
}
|
||
.modal-text {
|
||
width: 486rpx;
|
||
margin-top: 38rpx;
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
text-align: left;
|
||
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: 80rpx;
|
||
width: 527.22rpx;
|
||
height: 72rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
// justify-content: space-between;
|
||
align-items: center;
|
||
& > .modal-button-1 {
|
||
width: 260rpx;
|
||
height: 72rpx;
|
||
background: #F4F3F3;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
border-radius: 14rpx;
|
||
&:active {
|
||
background: #888;
|
||
}
|
||
}
|
||
& > .modal-button-2 {
|
||
width: 260rpx;
|
||
height: 72rpx;
|
||
background: var(--main-color);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: #FBFBFB;
|
||
border-radius: 14rpx;
|
||
&:active {
|
||
background: #888;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.modal-container2 {
|
||
height: 400rpx;
|
||
|
||
@extend .modal-container
|
||
}
|
||
}
|
||
::v-deep .uv-upload__wrap {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
::v-deep .uv-upload__button {
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
border-radius: 26rpx;
|
||
// padding-top: 20rpx;
|
||
border: 1px dashed #C4C4C4;
|
||
position: relative;
|
||
}
|
||
::v-deep.uvicon-camera-fill {
|
||
position: absolute !important;
|
||
left: 20rpx;
|
||
margin-top: 20rpx;
|
||
}
|
||
::v-deep .uv-upload__button__text[data-v-822c46b5] {
|
||
width: 370rpx;
|
||
text-align: left;
|
||
font-size: 21rpx;
|
||
font-weight: 600;
|
||
margin-left: 40rpx;
|
||
// opacity: 0.52;
|
||
line-height: 26rpx;
|
||
color: var(--color);
|
||
}
|
||
// ::V-deep .uv-upload__wrap {
|
||
// flex-wrap:nowrap;
|
||
// }
|
||
.detail-wrap.golden-theme {
|
||
background: #FFFFFF;
|
||
|
||
.topBox,
|
||
.box3 {
|
||
background: var(--bg-color);
|
||
|
||
.inputBox .value,
|
||
.selectinfo {
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
|
||
::v-deep .back .left span,
|
||
::v-deep .back .left text {
|
||
color: var(--bg-color) !important;
|
||
}
|
||
|
||
.container .topBox::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: -7px;
|
||
left: 4px;
|
||
width: 100%;
|
||
height: 14px;
|
||
background: radial-gradient(#FFFFFF 0px, #FFFFFF 5px, transparent 5px, transparent);
|
||
background-size: 14px 14px;
|
||
z-index: 9;
|
||
|
||
}
|
||
}
|
||
</style> |