309 lines
7.6 KiB
Vue
309 lines
7.6 KiB
Vue
<template>
|
||
<view class="container" :class="[`${themeInfo.theme}-theme`]">
|
||
<view class="content">
|
||
<view class="card">
|
||
<view class="title font26 fontb mgb20"> {{ $t('unlock.uploadTip') }}</view>
|
||
<view class="upload">
|
||
<my-upload v-model="moveImageList" :maxCount="2" :addWatermark="false" width="200rpx" height="200rpx"
|
||
:previewFullImage="false" uploadText=" ">
|
||
<!-- <image src="/static/personal/id01.png" mode="aspectFit"
|
||
style="width: 280rpx;height:200rpx;margin-bottom:20rpx"></image>
|
||
<view class="upLoadText">
|
||
{{ $t("common.IdCardBack") }}
|
||
</view> -->
|
||
</my-upload>
|
||
</view>
|
||
<view>
|
||
<text class=" font26 fontb" style="font-size: 26rpx;margin-top: 10rpx;">
|
||
退仓说明：
|
||
</text>
|
||
</view>
|
||
<view>
|
||
<text class=" font26 fontb" style="font-size: 26rpx;margin-top: 10rpx;">
|
||
退仓后，您将失去开门权限！请确认已经清空仓内物品，14个工作日内，系统将会自动返还押金。
|
||
</text>
|
||
</view>
|
||
</view>
|
||
<view class="modal-buttonOut">
|
||
<uv-button :customStyle="{
|
||
height: '86rpx',
|
||
lineHeight: '86rpx',
|
||
color: '#fff',
|
||
fontSize: '32rpx',
|
||
}" color="#FB322E" shape="circle" @click="handleRefundLocker">
|
||
申请退仓
|
||
</uv-button>
|
||
</view>
|
||
</view>
|
||
<view class="footer">
|
||
<view @click="toHome">
|
||
返回主页
|
||
</view>
|
||
<view @click="goOrder">
|
||
返回订单
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 成功退仓弹窗 -->
|
||
<uv-popup ref="moveOutPopup2" customStyle="width: 620rpx; border-radius: 24rpx;" :safeAreaInsetBottom="false"
|
||
:closeOnClickOverlay="false" zIndex="9999">
|
||
<view class="modal-container">
|
||
<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> -->
|
||
<uv-button @click="closeModal2" :customStyle="{
|
||
height: '86rpx',
|
||
lineHeight: '86rpx',
|
||
color: '#000',
|
||
fontSize: '32rpx',
|
||
}" shape="circle">
|
||
关闭
|
||
</uv-button>
|
||
</view>
|
||
</view>
|
||
</uv-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed } from 'vue';
|
||
import { onTabItemTap, onShowRerequestByIsLogin, makePhoneCall ,navigateBack} from '/utils/common.js'
|
||
import { navigateTo } from '@/utils/navigateTo';
|
||
import { onLoad, onShow, onShareAppMessage, onHide } from '@dcloudio/uni-app'
|
||
import myUpload from "@/components/myUpload.vue";
|
||
// 主题色配置
|
||
import { useMainStore } from "@/store/index.js";
|
||
import { navbarHeightAndStatusBarHeight, shareParam } from "@/utils/common.js";
|
||
import { storeToRefs } from 'pinia';
|
||
import { useOrderApi } from "@/Apis/order.js";
|
||
import { baseImageUrl } from "@/config/index.js";
|
||
import { useSiteApi } from "@/Apis/site.js";
|
||
import { useI18n } from 'vue-i18n';
|
||
|
||
|
||
const moveOutPopup2 = ref(null);
|
||
const { themeInfo, getUserInfo, getHasVerify } = useMainStore();
|
||
const { storeState } = storeToRefs(useMainStore());
|
||
const { locale, t } = useI18n();
|
||
const getApi = useOrderApi()
|
||
|
||
const getSiteApi = useSiteApi();
|
||
|
||
uni.hideTabBar();
|
||
const state = ref({
|
||
orderId: "",
|
||
});
|
||
|
||
|
||
// const getLockerById = () => {
|
||
// uni.showLoading();
|
||
// getSiteApi.GetLockerById({ lockerId: state.value.selectItem.lockerId }).then((res) => {
|
||
// if (res.code === 200) {
|
||
// state.value.lockData = res.data;
|
||
// state.value.lockData.orderId = state.value.selectItem.orderId;
|
||
// GetOrderById();
|
||
// getLockerExpense();
|
||
// }
|
||
// });
|
||
// };
|
||
|
||
// 发起退仓请求后点击我的订单跳到unlock
|
||
function closeModal2() {
|
||
moveOutPopup2.value.close()
|
||
navigateBack()
|
||
}
|
||
|
||
const moveImageList = ref([]);
|
||
// 确认退仓
|
||
const handleRefundLocker = async () => {
|
||
try {
|
||
const hasLoadingImage = moveImageList.value.find(item => item.status === 'uploading');
|
||
if (hasLoadingImage) {
|
||
uni.showToast({
|
||
title: '图片上传中，请稍后',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
const imageList = moveImageList.value.filter(item => item.status === 'success');
|
||
if (!imageList.length) {
|
||
uni.showToast({
|
||
title: '请上传图片',
|
||
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) {
|
||
moveOutPopup2.value.open();
|
||
}
|
||
uni.hideLoading();
|
||
state.value.refundLoading = false;
|
||
} catch (error) {
|
||
uni.hideLoading();
|
||
state.value.refundLoading = false;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
const GetOrderById = () => {
|
||
uni.showLoading()
|
||
state.value.orderData = {}
|
||
getApi.GetOrderById({ orderId: state.value.orderId }).then(res => {
|
||
uni.hideLoading()
|
||
if (res.code === 200) {
|
||
state.value.orderData = res.data
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
onShareAppMessage((res) => {
|
||
if (res.from === "button") {
|
||
// 来自页面内分享按钮
|
||
console.log(res.target);
|
||
}
|
||
return shareParam;
|
||
});
|
||
onLoad((params) => {
|
||
// GetOrderList()
|
||
state.value.orderId = params.orderId;
|
||
|
||
})
|
||
onHide(() => {
|
||
|
||
})
|
||
|
||
|
||
const token = ref(uni.getStorageSync('token'))
|
||
onShow(() => {
|
||
uni.hideTabBar()
|
||
token.value = uni.getStorageSync('token')
|
||
|
||
|
||
onShowRerequestByIsLogin(() => {
|
||
|
||
}, (err) => {
|
||
|
||
})
|
||
})
|
||
const toHome = (item) => {
|
||
uni.switchTab({
|
||
url: `/pages/index/index`,
|
||
});
|
||
}
|
||
|
||
const goOrder = () => {
|
||
navigateTo('/pages/unlock/index');
|
||
}
|
||
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
@import '@/static/style/theme.scss';
|
||
|
||
// 解决H5转微信小程序使用v-show不生效的问题
|
||
[hidden] {
|
||
display: none !important;
|
||
}
|
||
.modal-container {
|
||
// 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: 20rpx 0;
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
line-height: 32rpx;
|
||
}
|
||
.modal-button{
|
||
width: 100%;
|
||
}
|
||
.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-container2 {
|
||
height: 400rpx;
|
||
|
||
@extend .modal-container
|
||
}
|
||
.modal-buttonOut{
|
||
position: fixed;
|
||
width: 100%;
|
||
padding: 20px;
|
||
bottom: 100rpx;
|
||
left: 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
:deep(.uv-button){
|
||
width: 630rpx;
|
||
}
|
||
}
|
||
.upload{
|
||
padding-top: 20rpx;
|
||
padding-bottom: 40rpx;
|
||
border-bottom: 1.5px solid #787B7E10;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.footer{
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
background-color: #fff;
|
||
view{
|
||
width: 50%;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
color: #000;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
</style>
|