提交代码
This commit is contained in:
parent
3f30ae5620
commit
383934ef69
17
App.vue
17
App.vue
@ -38,11 +38,11 @@ const updateManagerFn = () => {
|
||||
const listenNetworkChange = () => {
|
||||
uni.onNetworkStatusChange((res) => {
|
||||
if (res.isConnected) {
|
||||
uni.showToast({
|
||||
title: "网络已连接",
|
||||
icon: "none",
|
||||
duration: 3000,
|
||||
});
|
||||
// uni.showToast({
|
||||
// title: "网络已连接",
|
||||
// icon: "none",
|
||||
// duration: 3000,
|
||||
// });
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "当前无网络连接",
|
||||
@ -171,6 +171,13 @@ page {
|
||||
// }
|
||||
}
|
||||
|
||||
:deep(.uv-radio__icon-wrap){
|
||||
border-width: 5rpx!important;
|
||||
}
|
||||
|
||||
.uni-tabbar{
|
||||
display: none;
|
||||
}
|
||||
|
||||
view,
|
||||
text {
|
||||
|
||||
@ -1,2 +1,4 @@
|
||||
# Introduction
|
||||
uniapp 金刚跟顺丰的微服务H5
|
||||
uniapp 金刚跟顺丰的微服务H5
|
||||
|
||||
通过点击顺丰软件的微应用，跳转到该H5页面
|
||||
@ -1,20 +1,111 @@
|
||||
<template>
|
||||
<uni-tabbar class="myCustomTabbar uni-tabbar" :style="{ flexDirection: direction === 'horizontal' ? 'row' : 'column' }">
|
||||
<div
|
||||
class="uni-tabbar__item"
|
||||
v-for="(item, index) in tabItems"
|
||||
:key="index"
|
||||
@click="handleTabItemTap(item)"
|
||||
:class="{ 'call-phone-item': item.phoneIcon }"
|
||||
>
|
||||
<uni-tabbar class="myCustomTabbar uni-tabbar"
|
||||
:style="{ flexDirection: direction === 'horizontal' ? 'row' : 'column' }">
|
||||
<div class="uni-tabbar__item" v-for="(item, index) in tabItems" :key="index" @click="handleTabItemTap(item)"
|
||||
:class="{ 'call-phone-item': item.phoneIcon }">
|
||||
<div class="uni-tabbar__bd">
|
||||
<div class="uni-tabbar__icon">
|
||||
<svg v-if="index === 0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="18.733154296875" viewBox="0 0 18 18.733154296875"><path d="M18,17.733154C18,18.285454,17.552299,18.733154,17,18.733154L1,18.733154C0.44772005,18.733154,0,18.285454,0,17.733154L0,7.2222252C0,6.9136353,0.14246988,6.6223249,0.38606,6.4328756L8.3860998,0.21064496C8.7472,-0.070214987,9.2528,-0.070214987,9.6139002,0.21064496L17.613899,6.4328756C17.8575,6.6223249,18,6.9136353,18,7.2222252L18,17.733154ZM16,16.733154L16,7.7113056L9,2.266865L2,7.7113056L2,16.733154L16,16.733154Z" :fill="selected === 0 ? '#fb322e' : '#000000'" fill-opacity="1" style="mix-blend-mode:passthrough"/></svg>
|
||||
<svg v-if="index === 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="18" height="20" viewBox="0 0 18 20"><path d="M17,20L1,20C0.44772005,20,0,19.552299,0,19L0,1C0,0.44772005,0.44772005,0,1,0L17,0C17.552299,0,18,0.44772005,18,1L18,19C18,19.552299,17.552299,20,17,20ZM16,18L16,2L2,2L2,18L16,18ZM5,5L13,5L13,7L5,7L5,5ZM5,9L13,9L13,11L5,11L5,9ZM5,13L10,13L10,15L5,15L5,13Z" :fill="selected === 1 ? '#fb322e' : '#000000'" fill-opacity="1" style="mix-blend-mode:passthrough"/></svg>
|
||||
<svg v-if="index === 2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="16" height="21" viewBox="0 0 16 21"><path d="M16,21L14,21L14,19C14,17.3431,12.6569,16,11,16L5,16C3.3431501,16,2,17.3431,2,19L2,21L0,21L0,19C0,16.2386,2.2385802,14,5,14L11,14C13.7614,14,16,16.2386,16,19L16,21ZM8,12C4.6862898,12,2,9.3136997,2,6C2,2.68629,4.6862898,0,8,0C11.3137,0,14,2.68629,14,6C14,9.3136997,11.3137,12,8,12ZM8,10C10.2091,10,12,8.2091398,12,6C12,3.7908602,10.2091,2,8,2C5.7908602,2,4,3.7908602,4,6C4,8.2091398,5.7908602,10,8,10Z" :fill="selected === 2 ? '#fb322e' : '#000000'" fill-opacity="1" style="mix-blend-mode:passthrough"/></svg>
|
||||
<svg version="1.0" v-if="index === 0" :fill="selected === 0 ? '#fb322e' : '#000000'"
|
||||
xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 1486.000000 1554.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g transform="translate(0.000000,1554.000000) scale(0.100000,-0.100000)" :fill="selected === 0 ? '#fb322e' : '#000000'" stroke="none">
|
||||
<path d="M7325 15449 c-172 -11 -228 -23 -445 -96 -193 -64 -233 -89 -1435
|
||||
-898 -331 -223 -790 -531 -1335 -897 -381 -256 -579 -388 -1265 -849 -176
|
||||
-119 -507 -341 -735 -494 -1275 -856 -1385 -930 -1465 -995 -329 -268 -553
|
||||
-687 -595 -1115 -8 -78 -10 -1318 -7 -4305 3 -3807 5 -4202 19 -4275 70 -347
|
||||
219 -635 448 -865 147 -148 267 -236 440 -320 157 -78 371 -139 545 -158 88
|
||||
-9 11807 -9 11895 0 132 14 331 65 457 117 85 35 265 137 343 194 194 144 376
|
||||
365 485 588 47 97 110 280 141 409 18 72 19 267 22 4320 2 2943 0 4273 -8
|
||||
4338 -35 309 -194 659 -411 900 -137 153 -164 173 -964 710 -225 151 -558 375
|
||||
-740 497 -181 122 -490 329 -685 460 -195 131 -472 317 -615 413 -143 97 -438
|
||||
295 -655 440 -408 274 -855 574 -1350 907 -824 554 -1053 706 -1131 753 -195
|
||||
117 -466 204 -679 217 -52 3 -111 7 -130 9 -19 1 -84 -1 -145 -5z m795 -2326
|
||||
c885 -595 1228 -826 1800 -1209 499 -335 1064 -715 1600 -1075 168 -113 566
|
||||
-380 885 -594 319 -214 583 -393 587 -399 4 -6 8 -1769 8 -3918 l0 -3908
|
||||
-5557 0 -5558 0 2 3912 c2 3121 5 3915 15 3924 7 6 247 168 533 359 286 192
|
||||
678 454 870 584 610 410 1145 769 1645 1105 267 179 611 410 765 513 154 104
|
||||
546 367 870 585 325 218 646 435 715 482 77 53 133 85 145 83 11 -2 315 -202
|
||||
675 -444z" />
|
||||
</g>
|
||||
</svg>
|
||||
<svg v-if="index === 1" version="1.0" :fill="selected === 1 ? '#fb322e' : '#000000'"
|
||||
xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 1486.000000 1554.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g transform="translate(0.000000,1554.000000) scale(0.100000,-0.100000)" :fill="selected === 1 ? '#fb322e' : '#000000'" stroke="none">
|
||||
<path d="M3950 15169 c-307 -14 -632 -62 -875 -130 -38 -11 -86 -24 -105 -29
|
||||
-228 -64 -426 -142 -675 -267 -71 -36 -159 -83 -194 -104 -34 -22 -65 -39 -68
|
||||
-39 -11 0 -293 -198 -382 -268 -279 -221 -558 -499 -767 -767 -213 -273 -335
|
||||
-466 -462 -736 -105 -220 -117 -251 -183 -452 -92 -281 -149 -551 -186 -882
|
||||
-17 -151 -18 -354 -18 -3730 0 -3902 -3 -3647 55 -3999 48 -292 156 -688 221
|
||||
-808 5 -10 9 -22 9 -28 0 -9 14 -42 90 -205 107 -231 297 -537 479 -770 137
|
||||
-176 383 -433 561 -588 58 -51 111 -97 118 -105 8 -7 30 -25 50 -40 21 -15 39
|
||||
-29 42 -32 28 -28 363 -257 400 -273 8 -4 38 -20 65 -37 104 -63 400 -206 510
|
||||
-247 40 -15 66 -25 108 -42 39 -17 140 -50 202 -66 33 -9 83 -22 110 -30 87
|
||||
-23 286 -63 415 -84 297 -48 150 -46 3980 -46 3397 0 3623 1 3753 18 422 53
|
||||
793 143 1042 252 17 8 55 23 85 35 64 25 315 148 380 186 25 15 59 35 75 44
|
||||
139 79 455 300 540 377 12 10 59 52 105 92 103 91 310 298 405 406 39 44 78
|
||||
89 88 100 24 26 204 266 244 325 30 45 98 155 134 217 11 18 29 50 41 70 38
|
||||
67 154 297 172 343 10 25 24 61 33 80 109 252 210 629 254 955 39 288 39 239
|
||||
39 3900 0 2202 -4 3561 -10 3630 -25 280 -61 498 -120 730 -36 137 -98 341
|
||||
-119 390 -5 11 -15 36 -22 55 -36 99 -189 416 -251 519 -21 34 -38 65 -38 67
|
||||
0 3 -28 46 -61 97 -441 661 -1042 1200 -1687 1515 -176 86 -329 150 -437 183
|
||||
-22 6 -49 15 -60 19 -41 16 -164 51 -280 80 -304 75 -517 105 -860 120 -262
|
||||
12 -6682 11 -6945 -1z m7085 -1654 c198 -24 293 -43 446 -90 600 -185 1142
|
||||
-644 1454 -1230 162 -305 243 -609 265 -1000 13 -228 13 -6632 0 -6860 -12
|
||||
-212 -24 -297 -72 -495 -22 -93 -53 -195 -68 -222 -6 -10 -10 -22 -10 -28 0
|
||||
-25 -110 -251 -183 -375 -231 -392 -652 -782 -1051 -974 -319 -153 -574 -217
|
||||
-956 -241 -223 -13 -6622 -14 -6850 0 -91 6 -196 15 -235 20 -614 92 -1133
|
||||
390 -1553 893 -223 268 -402 617 -476 932 -81 340 -75 62 -76 3916 0 2288 3
|
||||
3462 10 3535 52 542 239 976 601 1389 363 415 821 689 1329 795 237 49 99 48
|
||||
3815 49 3002 1 3507 -1 3610 -14z" />
|
||||
<path d="M4444 11249 c-16 -4 -48 -7 -71 -8 -23 0 -66 -7 -95 -15 -318 -84
|
||||
-559 -342 -608 -652 -12 -76 -14 -201 -5 -271 42 -307 285 -580 595 -669 63
|
||||
-18 173 -19 3205 -22 2709 -2 3150 0 3210 12 299 62 551 299 632 596 26 94 25
|
||||
330 -1 420 -41 139 -98 239 -197 344 -142 153 -302 234 -504 257 -90 10 -6114
|
||||
18 -6161 8z" />
|
||||
<path d="M4300 7949 c-365 -30 -666 -303 -735 -668 -33 -170 -9 -346 69 -505
|
||||
106 -213 305 -376 536 -438 l85 -23 2175 0 c2368 0 2247 -3 2393 56 222 89
|
||||
399 276 474 499 100 297 25 617 -197 841 -139 141 -313 223 -500 235 -110 8
|
||||
-4212 10 -4300 3z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" v-if="index === 2"
|
||||
:fill="selected === 2 ? '#fb322e' : '#000000'" width="18" height="18" viewBox="0 0 1284.000000 1514.000000"
|
||||
preserveAspectRatio="xMidYMid meet">
|
||||
|
||||
<g transform="translate(0.000000,1514.000000) scale(0.100000,-0.100000)" :fill="selected === 2 ? '#fb322e' : '#000000'" stroke="none">
|
||||
<path d="M6180 15024 c-362 -24 -555 -47 -800 -95 -934 -182 -1825 -609 -2527
|
||||
-1211 -523 -450 -909 -919 -1255 -1528 -62 -108 -204 -403 -264 -548 -292
|
||||
-700 -426 -1373 -426 -2132 0 -876 190 -1686 578 -2462 93 -186 103 -206 202
|
||||
-373 339 -571 817 -1110 1356 -1529 75 -59 86 -71 70 -77 -10 -4 -109 -35
|
||||
-219 -69 -444 -137 -1077 -380 -1467 -563 -605 -284 -1070 -849 -1233 -1496
|
||||
-48 -195 -60 -300 -60 -551 1 -265 14 -376 70 -595 125 -489 436 -933 881
|
||||
-1262 298 -220 666 -360 1056 -402 67 -8 1417 -11 4285 -11 3705 0 4203 2
|
||||
4313 15 492 61 903 258 1267 609 323 310 530 654 634 1050 115 442 93 962 -58
|
||||
1366 -204 546 -601 993 -1109 1248 -353 177 -1205 502 -1682 642 -40 12 -72
|
||||
25 -70 29 2 5 48 44 103 86 459 358 903 842 1221 1332 584 899 894 1943 894
|
||||
3013 0 2093 -1181 4003 -3050 4934 -626 312 -1266 495 -1960 561 -157 15 -633
|
||||
27 -750 19z m545 -1744 c644 -54 1245 -262 1780 -615 251 -166 472 -354 698
|
||||
-595 548 -587 897 -1360 981 -2178 21 -200 21 -564 0 -764 -84 -818 -433
|
||||
-1591 -981 -2178 -429 -458 -903 -776 -1474 -988 -454 -169 -906 -242 -1409
|
||||
-229 -410 11 -748 71 -1120 199 -559 193 -1032 489 -1450 908 -622 621 -990
|
||||
1395 -1091 2290 -17 150 -17 610 0 760 53 475 176 897 381 1307 189 380 405
|
||||
679 710 983 653 654 1472 1028 2415 1103 98 8 451 6 560 -3z m115 -9490 c1007
|
||||
-44 1919 -214 2858 -535 391 -133 976 -377 1077 -448 81 -58 149 -149 177
|
||||
-240 32 -99 31 -264 -1 -352 -56 -154 -189 -286 -341 -338 l-65 -22 -4070 -3
|
||||
c-2760 -2 -4095 1 -4149 8 -117 15 -213 64 -301 154 -114 116 -155 217 -155
|
||||
381 1 109 11 160 52 243 39 78 128 164 223 214 146 75 634 274 936 381 1182
|
||||
418 2493 612 3759 557z" />
|
||||
</g>
|
||||
</svg>
|
||||
<!-- <uv-icon v-if="showIcon" :name="item.icon" custom-prefix="custom-icon" :size="item.size || 20" :color="themeInfo.iconColor"></uv-icon> -->
|
||||
</div>
|
||||
<div class="uni-tabbar__label" :style="{ fontSize: '10px',color: selected === index ? '#fb322e' : '#000000' }">{{ item.label }}</div>
|
||||
<div class="uni-tabbar__label" :style="{ fontSize: '10px', color: selected === index ? '#fb322e' : '#000000' }">
|
||||
{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</uni-tabbar>
|
||||
@ -51,17 +142,17 @@ const emit = defineEmits(['onTabItemTap']);
|
||||
const tabItems = computed(() => {
|
||||
if (isXiaohongshu) {
|
||||
return [
|
||||
{ label: t('tabbar.home'), icon: 'home1', index:0, pagePath:'pages/index/index' },
|
||||
{ label: '', icon: 'telephone', index:2, pagePath:'', size: 34, phoneIcon: true },
|
||||
{ label: t('tabbar.book'), icon: 'book', index:1, pagePath:'pages/book/index'},
|
||||
{ label: t('tabbar.home'), icon: 'home1', index: 0, pagePath: 'pages/index/index' },
|
||||
{ label: '', icon: 'telephone', index: 2, pagePath: '', size: 34, phoneIcon: true },
|
||||
{ label: t('tabbar.book'), icon: 'book', index: 1, pagePath: 'pages/book/index' },
|
||||
]
|
||||
} else {
|
||||
return [
|
||||
{ label: t('tabbar.home'), icon: '/static/tabbar/home.svg', index:0, pagePath:'pages/index/index' },
|
||||
{ label: t('tabbar.home'), icon: '/static/tabbar/home.svg', index: 0, pagePath: 'pages/index/index' },
|
||||
// { label: t('tabbar.book'), icon: 'book', index:1, pagePath:'pages/book/index'},
|
||||
// { label: '', icon: 'telephone', index:2, pagePath:'', size: 34, phoneIcon: true },
|
||||
{ label: "订单", icon: '/static/tabbar/order.svg', index:3, pagePath:'pages/unlock/index' },
|
||||
{ label: t('tabbar.personal'), icon: '/static/tabbar/user.svg', index:4, pagePath:'pages/personal/index' },
|
||||
{ label: "订单", icon: '/static/tabbar/order.svg', index: 3, pagePath: 'pages/unlock/index' },
|
||||
{ label: t('tabbar.personal'), icon: '/static/tabbar/user.svg', index: 4, pagePath: 'pages/personal/index' },
|
||||
]
|
||||
}
|
||||
});
|
||||
@ -75,35 +166,39 @@ const handleTabItemTap = (index) => {
|
||||
.myCustomTabbar {
|
||||
display: flex;
|
||||
}
|
||||
.uni-tabbar{
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
z-index: 998;
|
||||
|
||||
.uni-tabbar {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
z-index: 998;
|
||||
}
|
||||
.uni-tabbar__item{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
font-size: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
|
||||
.uni-tabbar__item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
font-size: 0;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.uni-tabbar__bd{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
font-size: 0;
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
|
||||
.uni-tabbar__bd {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
font-size: 0;
|
||||
text-align: center;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
svg {
|
||||
max-width: 100%;
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
}
|
||||
max-width: 100%;
|
||||
height: 40rpx;
|
||||
width: 40rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -13,7 +13,11 @@
|
||||
@afterRead="afterRead"
|
||||
@delete="deletePic"
|
||||
@clickPreview="clickPreview"
|
||||
>
|
||||
>
|
||||
<view class="sfuploadBox" :style="{width:props.width,height:props.height}">
|
||||
<image src="/static/upload.png" style="width: 44rpx;height: 44rpx;" class="icon"></image>
|
||||
<text>上传图片</text>
|
||||
</view>
|
||||
<slot></slot>
|
||||
</uv-upload>
|
||||
</template>
|
||||
@ -135,6 +139,19 @@ const afterRead = async (event) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.sfuploadBox{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #F2F3F8;
|
||||
color: #6C6F73;
|
||||
border-radius: 8px;
|
||||
text{
|
||||
margin-top: 10rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
::v-deep .uv-upload__deletable {
|
||||
width: 20px !important;
|
||||
height: 20px !important;
|
||||
|
||||
33
components/uv-pickerself/changelog.md
Normal file
33
components/uv-pickerself/changelog.md
Normal file
@ -0,0 +1,33 @@
|
||||
## 1.0.14（2023-12-29）
|
||||
1. 修复上个版本引出的BUG
|
||||
## 1.0.13（2023-12-26）
|
||||
1. 修复抖音小程序滚到底不触发change的BUG
|
||||
## 1.0.12（2023-11-20）
|
||||
1. 修复issues反馈的问题uv-picker在组合式API的自定义组件中，columns动态赋值无法显示选项：https://gitee.com/climblee/uv-ui/issues/I8H0GQ
|
||||
## 1.0.11（2023-10-11）
|
||||
1. 将immediate-change默认值改为true，该值在于change回调的及时性，微信小程序生效
|
||||
## 1.0.10（2023-08-25）
|
||||
1. 增加round属性设置弹窗圆角，默认为0
|
||||
## 1.0.9（2023-08-24）
|
||||
1. 修复cli项目不返回值的问题
|
||||
## 1.0.8（2023-08-04）
|
||||
1. 优化
|
||||
## 1.0.7（2023-08-02）
|
||||
1. 改组件中删除uv-toolbar组件，请单独下载uv-toolbar组件
|
||||
## 1.0.6（2023-07-02）
|
||||
uv-picker 由于弹出层uv-popup的修改，打开和关闭方法更改，详情参考文档：https://www.uvui.cn/components/picker.html
|
||||
## 1.0.5（2023-06-26）
|
||||
1. 增加color参数
|
||||
2. 增加activeColor参数
|
||||
## 1.0.4（2023-06-15）
|
||||
1. 修改支付宝报错的BUG
|
||||
## 1.0.3（2023-06-12）
|
||||
1. setColumnValues的使用统一化，避免某些平台报错
|
||||
2. 取消change回调回传的组件实例，直接统一通过ref的方式调取setColumnValues方法
|
||||
## 1.0.2（2023-05-23）
|
||||
1. uv-toolbar组件新增下边框属性
|
||||
## 1.0.1（2023-05-16）
|
||||
1. 优化组件依赖，修改后无需全局引入，组件导入即可使用
|
||||
2. 优化部分功能
|
||||
## 1.0.0（2023-05-10）
|
||||
uv-picker 选择器
|
||||
95
components/uv-pickerself/components/uv-picker/props.js
Normal file
95
components/uv-pickerself/components/uv-picker/props.js
Normal file
@ -0,0 +1,95 @@
|
||||
export default {
|
||||
props: {
|
||||
// 是否展示顶部的操作栏
|
||||
showToolbar: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 顶部标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 弹窗圆角
|
||||
round: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
},
|
||||
// 对象数组，设置每一列的数据
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 是否显示加载中状态
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 各列中，单个选项的高度
|
||||
itemHeight: {
|
||||
type: [String, Number],
|
||||
default: 44
|
||||
},
|
||||
// 取消按钮的文字
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: '取消'
|
||||
},
|
||||
// 确认按钮的文字
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '确定'
|
||||
},
|
||||
// 取消按钮的颜色
|
||||
cancelColor: {
|
||||
type: String,
|
||||
default: '#909193'
|
||||
},
|
||||
// 确认按钮的颜色
|
||||
confirmColor: {
|
||||
type: String,
|
||||
default: '#3c9cff'
|
||||
},
|
||||
// 文字颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 选中文字的颜色
|
||||
activeColor: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 每列中可见选项的数量
|
||||
visibleItemCount: {
|
||||
type: [String, Number],
|
||||
default: 5
|
||||
},
|
||||
// 选项对象中，需要展示的属性键名
|
||||
keyName: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
// 是否允许点击遮罩关闭选择器
|
||||
closeOnClickOverlay: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 是否允许点击确认关闭选择器
|
||||
closeOnClickConfirm: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 各列的默认索引
|
||||
defaultIndex: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
// 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，只在微信2.21.1及以上有效
|
||||
immediateChange: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
...uni.$uv?.props?.picker
|
||||
}
|
||||
}
|
||||
337
components/uv-pickerself/components/uv-picker/uv-picker.vue
Normal file
337
components/uv-pickerself/components/uv-picker/uv-picker.vue
Normal file
@ -0,0 +1,337 @@
|
||||
<template>
|
||||
<uv-popup
|
||||
ref="pickerPopup"
|
||||
mode="bottom"
|
||||
:round="round"
|
||||
:close-on-click-overlay="closeOnClickOverlay"
|
||||
@change="popupChange"
|
||||
>
|
||||
<view class="uv-picker">
|
||||
<!-- <view class="title">
|
||||
请选择区域
|
||||
</view> -->
|
||||
<uv-toolbar
|
||||
v-if="showToolbar"
|
||||
:cancelColor="cancelColor"
|
||||
:confirmColor="confirmColor"
|
||||
:cancelText="cancelText"
|
||||
:confirmText="confirmText"
|
||||
:title="title"
|
||||
@cancel="cancel"
|
||||
@confirm="confirm"
|
||||
></uv-toolbar>
|
||||
<!-- #ifdef MP-TOUTIAO -->
|
||||
<picker-view
|
||||
class="uv-picker__view"
|
||||
:indicatorStyle="`height: ${$uv.addUnit(itemHeight)}`"
|
||||
:value="innerIndex"
|
||||
:immediateChange="immediateChange"
|
||||
:style="{
|
||||
height: `${$uv.addUnit(visibleItemCount * itemHeight)}`
|
||||
}"
|
||||
@pickend="changeHandler"
|
||||
>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP-TOUTIAO -->
|
||||
<picker-view
|
||||
class="uv-picker__view"
|
||||
:indicatorStyle="`height: ${$uv.addUnit(itemHeight)}`"
|
||||
:value="innerIndex"
|
||||
:immediateChange="immediateChange"
|
||||
:style="{
|
||||
height: `${$uv.addUnit(visibleItemCount * itemHeight)}`
|
||||
}"
|
||||
@change="changeHandler"
|
||||
>
|
||||
|
||||
<!-- #endif -->
|
||||
<!-- @pickend在这里为了解决抖音等滚到底不触发change兼容性问题 -->
|
||||
<picker-view-column
|
||||
v-for="(item, index) in innerColumns"
|
||||
:key="index"
|
||||
class="uv-picker__view__column"
|
||||
>
|
||||
<text
|
||||
v-if="$uv.test.array(item)"
|
||||
class="uv-picker__view__column__item uv-line-1"
|
||||
v-for="(item1, index1) in item"
|
||||
:key="index1"
|
||||
:style="[{
|
||||
height: $uv.addUnit(itemHeight),
|
||||
lineHeight: $uv.addUnit(itemHeight),
|
||||
fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal'
|
||||
},textStyle(index,index1)]"
|
||||
>
|
||||
|
||||
|
||||
{{ getItemText(item1) }}</text>
|
||||
</picker-view-column>
|
||||
</picker-view>
|
||||
<view
|
||||
v-if="loading"
|
||||
class="uv-picker--loading"
|
||||
>
|
||||
<uv-loading-icon mode="circle"></uv-loading-icon>
|
||||
</view>
|
||||
</view>
|
||||
</uv-popup>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* uv-picker
|
||||
* @description 选择器
|
||||
* @property {Boolean} showToolbar 是否显示顶部的操作栏（默认 true ）
|
||||
* @property {String} title 顶部标题
|
||||
* @property {Array} columns 对象数组，设置每一列的数据
|
||||
* @property {Boolean} loading 是否显示加载中状态（默认 false ）
|
||||
* @property {String | Number} itemHeight 各列中，单个选项的高度（默认 44 ）
|
||||
* @property {String} cancelText 取消按钮的文字（默认 '取消' ）
|
||||
* @property {String} confirmText 确认按钮的文字（默认 '确定' ）
|
||||
* @property {String} cancelColor 取消按钮的颜色（默认 '#909193' ）
|
||||
* @property {String} confirmColor 确认按钮的颜色（默认 '#3c9cff' ）
|
||||
* @property {String} color 文字颜色（默认 '' ）
|
||||
* @property {String} activeColor 选中文字的颜色（默认 '' ）
|
||||
* @property {String | Number} visibleItemCount 每列中可见选项的数量（默认 5 ）
|
||||
* @property {String} keyName 选项对象中，需要展示的属性键名（默认 'text' ）
|
||||
* @property {Boolean} closeOnClickOverlay 是否允许点击遮罩关闭选择器（默认 false ）
|
||||
* @property {Array} defaultIndex 各列的默认索引
|
||||
* @property {Boolean} immediateChange 是否在手指松开时立即触发change事件（默认 false ）
|
||||
* @event {Function} close 关闭选择器时触发
|
||||
* @event {Function} cancel 点击取消按钮触发
|
||||
* @event {Function} change 当选择值变化时触发
|
||||
* @event {Function} confirm 点击确定按钮，返回当前选择的值
|
||||
*/
|
||||
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
|
||||
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
|
||||
import props from './props.js';
|
||||
export default {
|
||||
name: 'uv-pickerSelf',
|
||||
emits: ['confirm','cancel','close','change'],
|
||||
mixins: [mpMixin, mixin, props],
|
||||
computed: {
|
||||
// 为了解决支付宝不生效
|
||||
textStyle(){
|
||||
return (index,index1) => {
|
||||
const style = {};
|
||||
// #ifndef APP-NVUE
|
||||
style.display = 'block';
|
||||
// #endif
|
||||
if(this.color) {
|
||||
style.color = this.color;
|
||||
}
|
||||
if(this.activeColor && index1 === this.innerIndex[index]) {
|
||||
style.color = this.activeColor;
|
||||
}
|
||||
return style;
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 上一次选择的列索引
|
||||
lastIndex: [],
|
||||
// 索引值 ，对应picker-view的value
|
||||
innerIndex: [],
|
||||
// 各列的值
|
||||
innerColumns: [],
|
||||
// 上一次的变化列索引
|
||||
columnIndex: 0,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听默认索引的变化，重新设置对应的值
|
||||
defaultIndex: {
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.setIndexs(n, true)
|
||||
}
|
||||
},
|
||||
// 监听columns参数的变化
|
||||
columns: {
|
||||
deep: true,
|
||||
immediate: true,
|
||||
handler(n) {
|
||||
this.setColumns(n)
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
this.$refs.pickerPopup.open();
|
||||
},
|
||||
close() {
|
||||
this.$refs.pickerPopup.close();
|
||||
},
|
||||
popupChange(e) {
|
||||
if(!e.show) this.$emit('close');
|
||||
},
|
||||
// 获取item需要显示的文字，判别为对象还是文本
|
||||
getItemText(item) {
|
||||
if (this.$uv.test.object(item)) {
|
||||
return item[this.keyName]
|
||||
} else {
|
||||
return item
|
||||
}
|
||||
},
|
||||
// 点击工具栏的取消按钮
|
||||
cancel() {
|
||||
this.$emit('cancel');
|
||||
this.close();
|
||||
},
|
||||
// 点击工具栏的确定按钮
|
||||
confirm() {
|
||||
// 在这里使用deepClone拷贝后，vue3会自动转换成原始对象，这样处理是因为cli项目可能出现不返回值的情况
|
||||
this.$emit('confirm', this.$uv.deepClone({
|
||||
indexs: this.innerIndex,
|
||||
value: this.innerColumns.map((item, index) => item[this.innerIndex[index]]),
|
||||
values: this.innerColumns
|
||||
}));
|
||||
if(this.closeOnClickConfirm) {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
// 选择器某一列的数据发生变化时触发
|
||||
changeHandler(e) {
|
||||
const {
|
||||
value
|
||||
} = e.detail
|
||||
let index = 0,
|
||||
columnIndex = 0
|
||||
// 通过对比前后两次的列索引，得出当前变化的是哪一列
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
let item = value[i]
|
||||
if (item !== (this.lastIndex[i] || 0)) { // 把undefined转为合法假值0
|
||||
// 设置columnIndex为当前变化列的索引
|
||||
columnIndex = i
|
||||
// index则为变化列中的变化项的索引
|
||||
index = item
|
||||
break // 终止循环，即使少一次循环，也是性能的提升
|
||||
}
|
||||
}
|
||||
this.columnIndex = columnIndex
|
||||
const values = this.innerColumns
|
||||
// 将当前的各项变化索引，设置为"上一次"的索引变化值
|
||||
this.setLastIndex(value)
|
||||
this.setIndexs(value)
|
||||
|
||||
this.$emit('change', {
|
||||
value: this.innerColumns.map((item, index) => item[value[index]]),
|
||||
index,
|
||||
indexs: value,
|
||||
// values为当前变化列的数组内容
|
||||
values,
|
||||
columnIndex
|
||||
})
|
||||
},
|
||||
// 设置index索引，此方法可被外部调用设置
|
||||
setIndexs(index, setLastIndex) {
|
||||
this.innerIndex = this.$uv.deepClone(index)
|
||||
if (setLastIndex) {
|
||||
this.setLastIndex(index)
|
||||
}
|
||||
},
|
||||
// 记录上一次的各列索引位置
|
||||
setLastIndex(index) {
|
||||
// 当能进入此方法，意味着当前设置的各列默认索引，即为“上一次”的选中值，需要记录，是因为changeHandler中
|
||||
// 需要拿前后的变化值进行对比，得出当前发生改变的是哪一列
|
||||
this.lastIndex = this.$uv.deepClone(index)
|
||||
},
|
||||
// 设置对应列选项的所有值
|
||||
setColumnValues(columnIndex, values) {
|
||||
// 替换innerColumns数组中columnIndex索引的值为values，使用的是数组的splice方法
|
||||
this.innerColumns.splice(columnIndex, 1, values)
|
||||
// 拷贝一份原有的innerIndex做临时变量，将大于当前变化列的所有的列的默认索引设置为0
|
||||
let tmpIndex = this.$uv.deepClone(this.innerIndex)
|
||||
for (let i = 0; i < this.innerColumns.length; i++) {
|
||||
if (i > this.columnIndex) {
|
||||
tmpIndex[i] = 0
|
||||
}
|
||||
}
|
||||
// 一次性赋值，不能单个修改，否则无效
|
||||
this.setIndexs(tmpIndex)
|
||||
},
|
||||
// 获取对应列的所有选项
|
||||
getColumnValues(columnIndex) {
|
||||
// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
|
||||
// 索引如果在外部change的回调中调用getColumnValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
|
||||
(async () => {
|
||||
await this.$uv.sleep()
|
||||
})()
|
||||
return this.innerColumns[columnIndex]
|
||||
},
|
||||
// 设置整体各列的columns的值
|
||||
setColumns(columns) {
|
||||
this.innerColumns = this.$uv.deepClone(columns)
|
||||
// 如果在设置各列数据时，没有被设置默认的各列索引defaultIndex，那么用0去填充它，数组长度为列的数量
|
||||
if (this.innerIndex.length === 0) {
|
||||
this.innerIndex = new Array(columns.length).fill(0)
|
||||
}
|
||||
},
|
||||
// 获取各列选中值对应的索引
|
||||
getIndexs() {
|
||||
return this.innerIndex
|
||||
},
|
||||
// 获取各列选中的值
|
||||
getValues() {
|
||||
// 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
|
||||
// 索引如果在外部change的回调中调用getValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
|
||||
(async () => {
|
||||
await this.$uv.sleep()
|
||||
})()
|
||||
return this.innerColumns.map((item, index) => item[this.innerIndex[index]])
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$show-lines: 1;
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
|
||||
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
|
||||
.uv-picker {
|
||||
position: relative;
|
||||
|
||||
&__view {
|
||||
|
||||
&__column {
|
||||
@include flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
|
||||
&__item {
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
color: $uv-main-color;
|
||||
|
||||
&--disabled {
|
||||
/* #ifndef APP-NVUE */
|
||||
cursor: not-allowed;
|
||||
/* #endif */
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
@include flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: rgba(255, 255, 255, 0.87);
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
90
components/uv-pickerself/package.json
Normal file
90
components/uv-pickerself/package.json
Normal file
@ -0,0 +1,90 @@
|
||||
{
|
||||
"id": "uv-picker",
|
||||
"displayName": "uv-picker 选择器 全面兼容vue3+2、app、h5、小程序等多端",
|
||||
"version": "1.0.14",
|
||||
"description": "uv-picker 此选择器用于单列，多列，多列联动的选择场景...",
|
||||
"keywords": [
|
||||
"uv-picker",
|
||||
"uvui",
|
||||
"uv-ui",
|
||||
"picker",
|
||||
"联动选择"
|
||||
],
|
||||
"repository": "",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"type": "component-vue",
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": ""
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uv-ui-tools",
|
||||
"uv-popup",
|
||||
"uv-loading-icon",
|
||||
"uv-toolbar"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
},
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y",
|
||||
"钉钉": "u",
|
||||
"快手": "u",
|
||||
"飞书": "u",
|
||||
"京东": "u"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
21
components/uv-pickerself/readme.md
Normal file
21
components/uv-pickerself/readme.md
Normal file
@ -0,0 +1,21 @@
|
||||
## Picker 选择器
|
||||
|
||||
> **组件名：uv-picker**
|
||||
|
||||
此选择器用于单列，多列，多列联动的选择场景。
|
||||
|
||||
`uv-datetime-picker`等组件也用到了该组件，功能完善，需要特别注意的是`columns`参数的形式是数组嵌套。
|
||||
|
||||
# <a href="https://www.uvui.cn/components/picker.html" target="_blank">查看文档</a>
|
||||
|
||||
## [下载完整示例项目](https://ext.dcloud.net.cn/plugin?name=uv-ui) <small>（请不要 下载插件ZIP）</small>
|
||||
|
||||
### [更多插件，请关注uv-ui组件库](https://ext.dcloud.net.cn/plugin?name=uv-ui)
|
||||
|
||||
<a href="https://ext.dcloud.net.cn/plugin?name=uv-ui" target="_blank">
|
||||
|
||||
|
||||
|
||||
</a>
|
||||
|
||||
#### 如使用过程中有任何问题反馈，或者您对uv-ui有一些好的建议，欢迎加入uv-ui官方交流群：<a href="https://www.uvui.cn/components/addQQGroup.html" target="_blank">官方QQ群</a>
|
||||
@ -77,7 +77,7 @@
|
||||
// checkAndRedirect();
|
||||
// });
|
||||
</script>
|
||||
<title>金刚迷你仓</title>
|
||||
<title>城市迷你仓</title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
|
||||
@ -206,8 +206,8 @@
|
||||
"detail.viewQuotation": "查看报价单",
|
||||
"detail.quotationFail": "生成报价单失败",
|
||||
"detail.quotationSuccess": "请手动保存或转发报价单",
|
||||
"detail.scrollRead": "請在同意前閱讀所有條款",
|
||||
"detail.agreeTerm": "同意條款",
|
||||
"detail.scrollRead": "请在同意前阅读所有条款",
|
||||
"detail.agreeTerm": "同意条款",
|
||||
"detail.points": "积分",
|
||||
"detail.PointsRedemption": "积分抵扣",
|
||||
"detail.AvailablePoints": "可用积分",
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name" : "金刚迷你仓",
|
||||
"name" : "城市迷你仓",
|
||||
"appid" : "__UNI__FB6F2F3",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "金刚迷你仓",
|
||||
"name": "城市迷你仓",
|
||||
"version": "1.0.0",
|
||||
"description": "金刚迷你仓",
|
||||
"description": "城市迷你仓",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
{
|
||||
"path": "validationInfo/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "实名验证"
|
||||
"navigationBarTitleText": "城市迷你仓"
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -80,7 +80,7 @@
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页",
|
||||
"navigationBarTitleText": "城市迷你仓",
|
||||
"mp-weixin": {
|
||||
"usingComponents": {
|
||||
"player-component": "plugin://player/video"
|
||||
@ -128,13 +128,13 @@
|
||||
{
|
||||
"path": "pages/unlock/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单"
|
||||
"navigationBarTitleText": "城市迷你仓"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/personal/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的"
|
||||
"navigationBarTitleText": "城市迷你仓"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -7,8 +7,7 @@
|
||||
<text class="address">{{ unitTypeData[0]?.city }}·{{ unitTypeData[0]?.district }}</text>
|
||||
</view>
|
||||
<view class="right">
|
||||
<text class="more">更多分店</text>
|
||||
<uv-icon bold name="arrow-right" size="24rpx" fontb />
|
||||
<text class="more">更多分店</text><image src="/static/home/jiantou.svg" style="width: 24rpx;height: 24rpx;" class="icon"></image>
|
||||
</view>
|
||||
</view>
|
||||
<template v-if="state.siteId">
|
||||
@ -40,7 +39,7 @@
|
||||
<view class="info">
|
||||
<view class="left arrow">
|
||||
<view class="arrowIcon" @click="prev" v-if="unitTypeData.length > 1">
|
||||
<uv-icon name="arrow-left" color="#000" bold size="64rpx"></uv-icon>
|
||||
<image src="/static/home/jiantouleft.svg" style="width: 64rpx;height: 64rpx;" class="icon"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="swiper-container">
|
||||
@ -56,16 +55,16 @@
|
||||
</view>
|
||||
<view class="right arrow">
|
||||
<view class="arrowIcon" @click="next" v-if="unitTypeData.length > 1">
|
||||
<uv-icon name="arrow-right" color="#000" bold size="64rpx"></uv-icon>
|
||||
<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">
|
||||
<view class="font32 fontb name">
|
||||
{{ unitTypeData[state.active].name }}
|
||||
</view>
|
||||
<view class="font26 fontb textGary" style="padding: 0 20rpx;">
|
||||
<view class="font26 fontb textGary" style="padding: 0 28rpx;">
|
||||
{{ unitTypeData[state.active].volumeRange }}
|
||||
</view>
|
||||
<view class="font26 fontb textGary">（{{ unitTypeData[state.active].description }}）</view>
|
||||
@ -79,13 +78,13 @@
|
||||
<view class="right font26 fontb textGary"><text
|
||||
:style="{ color: state.selectUnitRow?.name ? '#A8AAAC' : '#FB322E' }">{{
|
||||
state.selectUnitRow?.name ? `${state.selectUnitRow?.volume}m³ ` : "请选择" }} </text>
|
||||
<uv-icon bold name="arrow-right" color="#000000" size="24rpx" />
|
||||
<image src="/static/home/jiantou.svg" style="width: 44rpx;height: 24rpx;" class="icon"></image>
|
||||
</view>
|
||||
</li>
|
||||
<li @click="showMonthPopup">
|
||||
<view class="left"><text class="font32 fontb">租期</text></view>
|
||||
<view class="right font26 fontb textGary"><text>{{ state.month }}个月</text>
|
||||
<uv-icon bold name="arrow-right" color="#000000" size="24rpx" />
|
||||
<image src="/static/home/jiantou.svg" style="width: 44rpx;height: 24rpx;" class="icon"></image>
|
||||
</view>
|
||||
</li>
|
||||
<li>
|
||||
@ -99,8 +98,8 @@
|
||||
<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><uv-icon bold color="#000000" v-if="!state.hasVerify"
|
||||
name="arrow-right" size="24rpx" />
|
||||
state.hasVerify ? '已验证' : '未验证' }}</text>
|
||||
<image src="/static/home/jiantou.svg" v-if="!state.hasVerify" style="width: 44rpx;height: 24rpx;" class="icon"></image>
|
||||
</view>
|
||||
</li>
|
||||
</ul>
|
||||
@ -109,16 +108,18 @@
|
||||
<view class="left font28">
|
||||
<text class="price font36 fontb"> {{ state.priceData.expense ? `￥ ${state.priceData.expense}` : '￥--'
|
||||
}}</text>
|
||||
<view class="detail" @click="showPayPopup"><text class="font28">明细</text>
|
||||
<image src="/static/home/jiantouup.svg" style="height: 12rpx;margin-left: 10rpx;" mode="heightFix" class="icon"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="detail" @click="showPayPopup"><text class="font28">明细</text>
|
||||
<view class="viewIcon"><uv-icon name="play-left-fill" size="20" color="#FFF" /></view>
|
||||
</view>
|
||||
|
||||
<uv-button :customStyle="{
|
||||
height: '86rpx',
|
||||
color: '#fff',
|
||||
}" :textStyle="{
|
||||
fontSize: '32rpx',
|
||||
fontWeight: 'bold',
|
||||
}" shape="circle" color="#FB322E" :disabled="!state.lockerId || !state.month" @click="goOrder"
|
||||
class="goOrder">下单</uv-button>
|
||||
</view>
|
||||
@ -128,7 +129,7 @@
|
||||
</view>
|
||||
<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="32rpx">
|
||||
<uv-radio-group v-model="state.checked" activeColor="#fb322e" size="40rpx" inactiveColor="#D8D8D8">
|
||||
<uv-radio activeColor="#fb322e" :key="0" :name="true">
|
||||
</uv-radio></uv-radio-group>
|
||||
</view>
|
||||
@ -154,64 +155,65 @@
|
||||
<myCustomtTabBar direction="horizontal" :show-icon="true" :selected="0" @onTabItemTap="onTabItemTap">
|
||||
</myCustomtTabBar>
|
||||
</div>
|
||||
<uv-popup ref="unitPopupRef" mode="bottom" zIndex="999" round="16rpx">
|
||||
<uv-popup ref="unitPopupRef" mode="bottom" zIndex="999" round="24px">
|
||||
<view class="unitPopupBox">
|
||||
<view class="title font36 fontb">
|
||||
仓型选择
|
||||
</view>
|
||||
<view class="info">
|
||||
<uv-radio-group v-model="state.radiovalue" activeColor="#fb322e" size="32rpx">
|
||||
<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">
|
||||
<view class="volume mgb10 font28 fontb">
|
||||
体积: {{ item.volume }}m³
|
||||
</view>
|
||||
<view class="unit textGary mgb10">
|
||||
<view class="unit textGary font28 fontb mgb10">
|
||||
仓号: {{ item.name }}
|
||||
</view>
|
||||
<view class="site textGary mgb10">
|
||||
<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="32rpx">
|
||||
<uv-radio :key="item.lockerId" :name="item.lockerId" size="40rpx">
|
||||
</uv-radio>
|
||||
</view>
|
||||
<view class="price mgb10">
|
||||
<text class="font28 textGary" style="text-decoration: line-through;padding-right: 20rpx;">￥ {{
|
||||
<text class="font28 textGary fontb" style="text-decoration: line-through #000;padding-right: 20rpx;">￥ {{
|
||||
item.price
|
||||
}}/月</text>
|
||||
<text class="font28" style="color: #D2021B;">￥ {{ item.currentPrice }}/月</text>
|
||||
<text class="font28 fontb" style="color: #D2021B;">￥ {{ item.currentPrice }}/月</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uv-radio-group>
|
||||
</view>
|
||||
<view class="btn">
|
||||
<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="16rpx">
|
||||
<uv-popup ref="monthPopupRef" mode="bottom" zIndex="999" round="24px">
|
||||
<view class="unitPopupBox">
|
||||
<view class="title font36 fontb">
|
||||
租期选择
|
||||
</view>
|
||||
<view class="info">
|
||||
<uv-radio-group v-model="state.radioMonthvalue" activeColor="#fb322e" size="32rpx">
|
||||
<uv-radio-group v-model="state.radioMonthvalue" activeColor="#fb322e" size="40rpx" inactiveColor="#D8D8D8">
|
||||
<view class="list" v-for="item in state.lockData?.discountList">
|
||||
<view class="left">
|
||||
<view class="volume mgb10">
|
||||
<view class="volume mgb10 font28 fontb">
|
||||
租期: {{ item.month }}个月
|
||||
</view>
|
||||
<view class="unit mgb10 textRed">
|
||||
<view class="unit mgb10 textRed font28 fontb">
|
||||
优惠: 享受{{ (item.discount * 100) / 10 }}折优惠
|
||||
</view>
|
||||
</view>
|
||||
@ -224,14 +226,35 @@
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="left">
|
||||
<view class="volume mgb10" style="display: flex;">
|
||||
自定义租期: <uv-number-box button-size="36" v-model="state.selfMonth" buttonSize="26" color="#ffffff"
|
||||
bgColor="#FB322E" :min="1" :max="24" :step="1" iconStyle="color: #fff"></uv-number-box> 个月
|
||||
<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" v-if="selfDiscount !== 1">
|
||||
<view class="unit mgb10 textRed font28 fontb" v-if="selfDiscount !== 1">
|
||||
优惠: 享受{{ selfDiscount * 100 / 10 }}折优惠
|
||||
</view>
|
||||
<view class="unit mgb10 textRed" v-else>
|
||||
<view class="unit mgb10 textRed font28 fontb" v-else>
|
||||
优惠: --
|
||||
</view>
|
||||
<!-- <view class="site textGary mgb10">
|
||||
@ -247,33 +270,34 @@
|
||||
</view>
|
||||
</uv-radio-group>
|
||||
</view>
|
||||
<view class="btn" @click="confirmMonth">
|
||||
<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="16rpx">
|
||||
<uv-popup ref="payPopupRef" mode="bottom" zIndex="999" round="24px">
|
||||
<view class="unitPopupBox payPopupBox">
|
||||
<view class="title font36 fontb">
|
||||
租赁费用详情
|
||||
</view>
|
||||
<view class="garyBox font28 card20 textGary">
|
||||
<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="textGary mgb20">
|
||||
<view class="mgb10">
|
||||
仓号: {{ state.selectUnitRow?.name }}
|
||||
</view>
|
||||
<view class="textGary">
|
||||
<view class="">
|
||||
尺寸: {{ state.selectUnitRow?.['length'] }}m*{{ state.selectUnitRow?.width }}m*{{ state.selectUnitRow?.height
|
||||
}}m
|
||||
</view>
|
||||
@ -281,16 +305,16 @@
|
||||
<view class="title2 font32 fontb">
|
||||
<text>租金总价</text> <text>￥ {{ state.priceData?.lockerExpense }}</text>
|
||||
</view>
|
||||
<view class="title2 textGary font28">
|
||||
<view class="title2 textGary2 fontb font28">
|
||||
<text>租金月费</text> <text> ￥ {{ state.priceData?.lockerPrice }}</text>
|
||||
</view>
|
||||
<view class="title2 textGary font28">
|
||||
<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 textGary font28">
|
||||
<view class="title2 textGary2 fontb font28">
|
||||
<text>租赁押金在租期结束后给予归还</text>
|
||||
</view>
|
||||
<view class="title2 font32 fontb">
|
||||
@ -300,23 +324,24 @@
|
||||
<view class="left font28">
|
||||
<text class="price font36 fontb"> {{ state.priceData.expense ? `￥ ${state.priceData.expense}` : '--'
|
||||
}}</text>
|
||||
<view class="detail" v-if="state.priceData.expense" @click="hidePayPopup"><text class="font28">明细</text>
|
||||
<image src="/static/home/jiantouup.svg" style="height: 12rpx;margin-left: 10rpx;" mode="heightFix" class="icon"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="detail" v-if="state.priceData.expense" @click="hidePayPopup"><text class="font28">明细</text>
|
||||
<view class="viewIcon"><uv-icon name="play-left-fill" size="20" color="#FFF" /></view>
|
||||
</view>
|
||||
<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 class="agreed" @click="changeCheck">
|
||||
<view class="check-wrap" :class="{ checked: state.checked }">
|
||||
<uv-radio-group v-model="state.checked" activeColor="#fb322e" size="32rpx">
|
||||
<uv-radio-group v-model="state.checked" activeColor="#fb322e" size="40rpx" inactiveColor="#D8D8D8">
|
||||
<uv-radio activeColor="#fb322e" :key="0" :name="true">
|
||||
</uv-radio></uv-radio-group>
|
||||
</view>
|
||||
@ -326,7 +351,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</uv-popup>
|
||||
<uv-popup ref="agreementRef" mode="bottom" :closeOnClickOverlay="false" width="750rpx" zIndex="999" round="16rpx">
|
||||
<uv-popup ref="agreementRef" mode="bottom" :closeOnClickOverlay="false" width="750rpx" zIndex="999" round="24px">
|
||||
<view class="agreement-wrap">
|
||||
<view class="agreement-top">
|
||||
<view class="name">{{ $t("detail.agreement") }}</view>
|
||||
@ -557,7 +582,6 @@ const reset = () => {
|
||||
state.value.lockerId = null;
|
||||
state.value.priceData = {};
|
||||
state.value.selectUnitRow = {};
|
||||
state.value.checked = false;
|
||||
state.value.lockData = {
|
||||
discountList: []
|
||||
}
|
||||
@ -1028,8 +1052,12 @@ function changeMove(event) {
|
||||
|
||||
.payPopupBox {
|
||||
.garyBox {
|
||||
border: 1px solid #F6F6F7;
|
||||
border: 3rpx solid #F6F6F7;
|
||||
background-color: #F8F9FB;
|
||||
padding: 26rpx;
|
||||
border-radius: 12rpx;
|
||||
color: #808386;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.title2 {
|
||||
@ -1050,23 +1078,27 @@ function changeMove(event) {
|
||||
|
||||
.left {
|
||||
color: #E9CBA1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 38rpx;
|
||||
.detail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 40rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
image {
|
||||
margin-left: 10rpx;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.detail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.viewIcon {
|
||||
margin-left: 4rpx;
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
margin-right: -1px;
|
||||
|
||||
text {
|
||||
display: flex;
|
||||
@ -1082,6 +1114,7 @@ function changeMove(event) {
|
||||
:deep(.uv-button) {
|
||||
font-size: 28rpx;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1093,8 +1126,8 @@ function changeMove(event) {
|
||||
.unitPopupBox {
|
||||
min-height: 50%;
|
||||
padding: 32rpx;
|
||||
padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
|
||||
// padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));
|
||||
// padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
|
||||
|
||||
.title {
|
||||
margin-bottom: 20rpx;
|
||||
@ -1115,12 +1148,53 @@ function changeMove(event) {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1px solid #a8aaac69;
|
||||
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 {
|
||||
@ -1207,7 +1281,6 @@ function changeMove(event) {
|
||||
.check-wrap {
|
||||
pointer-events: none;
|
||||
margin-right: 10rpx;
|
||||
margin-left: 40rpx;
|
||||
:deep(.uv-radio-group){
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
@ -1278,26 +1351,29 @@ function changeMove(event) {
|
||||
align-items: center;
|
||||
background-color: #0D1118;
|
||||
color: #FFFFFF;
|
||||
|
||||
.left {
|
||||
color: #E9CBA1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 38rpx;
|
||||
.detail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 40rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
image{
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.detail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20rpx;
|
||||
|
||||
.viewIcon {
|
||||
margin-left: 4rpx;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
margin-right: -1px;
|
||||
|
||||
|
||||
text {
|
||||
display: flex;
|
||||
@ -1313,6 +1389,7 @@ function changeMove(event) {
|
||||
:deep(.uv-button) {
|
||||
font-size: 28rpx;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1332,6 +1409,7 @@ function changeMove(event) {
|
||||
padding: 32rpx 0;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #a8aaac20;
|
||||
padding-left: 10rpx;
|
||||
// &:first-child {
|
||||
// padding-top: 0;
|
||||
// }
|
||||
@ -1393,7 +1471,7 @@ function changeMove(event) {
|
||||
|
||||
.selectSite .right .more {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
color: #000;
|
||||
margin-right: 8rpx; // text 和 icon 间距
|
||||
}
|
||||
|
||||
@ -1411,24 +1489,22 @@ function changeMove(event) {
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
// align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
image {
|
||||
margin-top: 4rpx;
|
||||
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;
|
||||
@ -1449,8 +1525,9 @@ function changeMove(event) {
|
||||
/* 底部地址行 */
|
||||
.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
margin-top: 4rpx;
|
||||
}
|
||||
.address {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
@ -1520,10 +1597,14 @@ uni-swiper-item {
|
||||
|
||||
.unitType {
|
||||
padding: 40rpx;
|
||||
|
||||
.title {
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
.bottom {
|
||||
.name{
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,15 +3,15 @@
|
||||
<view class="orderInfo sflist card">
|
||||
<ul>
|
||||
<li @click="goOrder">
|
||||
<view class="left"><text class="font28 fontb">订单详情</text></view>
|
||||
<view class="left"><text class="font32 fontb">订单详情</text></view>
|
||||
<view class="right font36 fontb textGary">
|
||||
<uv-icon color="#000000" blod name="arrow-right" size="24rpx" />
|
||||
<image src="/static/home/jiantou.svg" style="width: 44rpx;height: 24rpx;" class="icon"></image>
|
||||
</view>
|
||||
</li>
|
||||
<li @click="goVaild">
|
||||
<view class="left"><text class="font28 fontb">信息验证</text></view>
|
||||
<view class="left"><text class="font32 fontb">信息验证</text></view>
|
||||
<view class="right font36 fontb textGary">
|
||||
<uv-icon color="#000000" blod name="arrow-right" size="24rpx" />
|
||||
<image src="/static/home/jiantou.svg" style="width: 44rpx;height: 24rpx;" class="icon"></image>
|
||||
</view>
|
||||
</li>
|
||||
<!-- <li>
|
||||
@ -20,18 +20,46 @@
|
||||
<uv-icon color="#000000" blod name="arrow-right" size="32" />
|
||||
</view>
|
||||
</li> -->
|
||||
<li @click="makePhoneCall">
|
||||
<view class="left"><text class="font28 fontb">客服咨询</text></view>
|
||||
<li @click="openPopup">
|
||||
<view class="left"><text class="font32 fontb">客服咨询</text></view>
|
||||
<view class="right font36 fontb textGary">
|
||||
<uv-icon color="#000000" blod name="arrow-right" size="24rpx" />
|
||||
<image src="/static/home/jiantou.svg" style="width: 44rpx;height: 24rpx;" class="icon"></image>
|
||||
</view>
|
||||
</li>
|
||||
</ul>
|
||||
</view>
|
||||
<div class="footer">
|
||||
<view class="footer">
|
||||
<myCustomtTabBar direction="horizontal" :show-icon="true" :selected="2" @onTabItemTap="onTabItemTap">
|
||||
</myCustomtTabBar>
|
||||
</div>
|
||||
</view>
|
||||
<uv-popup ref="openPopupRef" customStyle="width: 710rpx; border-radius: 24rpx;" :safeAreaInsetBottom="false" :closeOnClickOverlay="false"
|
||||
zIndex="9999">
|
||||
<view class="modal-container">
|
||||
<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>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -65,10 +93,24 @@ const couponRef = ref();
|
||||
const getRecommendApi = useRecommend();
|
||||
const getAuthApi = authInfoApi();
|
||||
const { t } = useI18n();
|
||||
const openPopupRef = ref();
|
||||
|
||||
const closePopup = () => {
|
||||
openPopupRef.value.close();
|
||||
}
|
||||
const openPopup = () => {
|
||||
openPopupRef.value.open();
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
uni.hideTabBar();
|
||||
})
|
||||
|
||||
const callPhone = ()=>{
|
||||
window.location.href = `tel:${projectInfo.callPhone}`;
|
||||
closePopup();
|
||||
}
|
||||
|
||||
const goVaild = () => {
|
||||
navigateTo('/pagesb/validationInfo/index');
|
||||
}
|
||||
@ -79,6 +121,70 @@ const goOrder = () => {
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/static/style/theme.scss';
|
||||
.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-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-container2 {
|
||||
height: 400rpx;
|
||||
|
||||
@extend .modal-container
|
||||
}
|
||||
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
@ -94,13 +200,14 @@ const goOrder = () => {
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
padding: 0 28rpx;
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 28rpx;
|
||||
padding: 28rpx 20rpx;
|
||||
padding-right: 0;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #a8aaac69;
|
||||
border-bottom: 1px solid #787B7E10;
|
||||
|
||||
&:active {
|
||||
background-color: #f5f5f5;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</view>
|
||||
<view class="right">
|
||||
<text class="more">更多分店</text>
|
||||
<uv-icon name="arrow-right" bold size="24rpx" fontb />
|
||||
<image src="/static/home/jiantou.svg" style="width: 44rpx;height: 24rpx;" class="icon"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="content">
|
||||
@ -22,7 +22,7 @@
|
||||
<!-- <view class="tag">随存随取</view> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="distance" @click.stop="handleNavigate(item)">
|
||||
<view class="distance" v-if="item.distance" @click.stop="handleNavigate(item)">
|
||||
<view class="icon">
|
||||
<image src="/static/site/map.svg"></image>
|
||||
</view>
|
||||
@ -42,7 +42,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<uv-picker ref="cityPicker" confirmColor="#FB322E" :columns="[state.cityData]" @confirm="cityConfirm"></uv-picker>
|
||||
<uvPickerSlef ref="cityPicker" confirmColor="#FB322E" round="24px" :columns="[state.cityData]" @confirm="cityConfirm"></uvPickerSlef>
|
||||
<view class="footer">
|
||||
<view @click="toHome">
|
||||
返回主页
|
||||
@ -61,6 +61,7 @@ import { getDistance,mergeFiveGoatStores,makePhoneCall} from "@/utils/common.js"
|
||||
import { useSiteApi } from "@/Apis/site.js";
|
||||
import { useLoginApi } from "@/Apis/login.js";
|
||||
import { ClientSite } from "@/Apis/book.js";
|
||||
import uvPickerSlef from "@/components/uv-pickerself/components/uv-picker/uv-picker.vue";
|
||||
// 主题色配置
|
||||
import { useMainStore } from "@/store/index.js";
|
||||
// 国际化配置
|
||||
@ -241,7 +242,7 @@ onShow(() => {
|
||||
|
||||
.selectSite .right .more {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
color: #000;
|
||||
margin-right: 8rpx; // text 和 icon 间距
|
||||
}
|
||||
|
||||
@ -300,9 +301,12 @@ onShow(() => {
|
||||
.tag{
|
||||
color: #D2021B;
|
||||
background-color: #FBE8EB;
|
||||
padding: 8rpx 12rpx;
|
||||
padding: 0rpx 12rpx;
|
||||
height: 32rpx;
|
||||
min-width: 94rpx;
|
||||
line-height: 32rpx;
|
||||
border-radius: 8rpx;
|
||||
font-size: 26rpx;
|
||||
font-size: 18rpx;
|
||||
margin-right: 10rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
@ -316,8 +320,8 @@ onShow(() => {
|
||||
text-align: center;
|
||||
}
|
||||
image{
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
padding: 6px;
|
||||
border-radius: 999rpx;
|
||||
background-color: #F2F3F8;
|
||||
|
||||
@ -1,14 +1,15 @@
|
||||
<template>
|
||||
<view class="container" :class="[`${themeInfo.theme}-theme`]">
|
||||
<!-- <view class="header">
|
||||
<view class="header">
|
||||
<uv-tabs lineWidth="80rpx" lineHeight="10rpx" lineColor="#f56c6c" :scrollable="false" :list="list">
|
||||
</uv-tabs>
|
||||
</view> -->
|
||||
</view>
|
||||
<view class="content">
|
||||
<view class="card orderList" v-for="item in state.orderList" :key="item.orderId">
|
||||
<view class="orderInfo">
|
||||
<!-- <uv-button shape="circle">复制</uv-button> -->
|
||||
<view class="orderOn">订单号：{{ item.orderNo }} <uv-button @click="copyOrderOn(item)" shape="circle">复制</uv-button> </view>
|
||||
<view class="orderOn">订单号：{{ item.orderNo }} <uv-button @click="copyOrderOn(item)"
|
||||
shape="circle">复制</uv-button> </view>
|
||||
<view class="box1">
|
||||
<!-- 顶部：左中右布局 -->
|
||||
<view class="top">
|
||||
@ -22,7 +23,8 @@
|
||||
<!-- 底部：地址 -->
|
||||
<view class="bottom">
|
||||
<image src="/static/home/siteicon2.svg" class="icon"></image>
|
||||
<text class="address font26 fontb textGary">{{ item.siteCity }}{{ item.siteDistrict }}{{ item.siteAddress }}</text>
|
||||
<text class="address font26 fontb textGary">{{ item.siteCity }}{{ item.siteDistrict }}{{
|
||||
item.siteAddress }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="box2">
|
||||
@ -33,12 +35,12 @@
|
||||
<view class="item">
|
||||
<view class="label font26 fontb textGary">体积:</view>
|
||||
<view class="value font26 fontb"> 长{{ item.lockerLength }}m*宽{{ item.lockerWidth }}m*高{{
|
||||
item.lockerHight }}m ({{ item.lockerVolume }}m³)</view>
|
||||
item.lockerHeight }}m ({{ item.lockerVolume }}m³)</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="label font26 fontb textGary">仓型: </view>
|
||||
<view class="value font26 fontb">{{ item.unitTypeName }}</view>
|
||||
</view>
|
||||
<view class="label font26 fontb textGary">仓型: </view>
|
||||
<view class="value font26 fontb">{{ item.unitTypeName }}</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="label font26 fontb textGary">租期: </view>
|
||||
<view class="value font26 fontb"> {{ item.endTime?.substr(0, 10) }}</view>
|
||||
@ -48,13 +50,13 @@
|
||||
<view class="value font26 fontb" style="color: #FB322E;">
|
||||
<template v-if="item.refundLockerStatus === 0">{{ $t("common.notStarted") }}</template>
|
||||
<template v-else-if="item.refundLockerStatus === 1">{{ $t("unlock.cancelPending")
|
||||
}}</template>
|
||||
}}</template>
|
||||
<template v-else-if="item.refundLockerStatus === 2">{{ $t("unlock.outComplete")
|
||||
}}</template>
|
||||
}}</template>
|
||||
<template v-else-if="item.refundLockerStatus === 3">{{ $t("unlock.disapproval") }} {{
|
||||
item.orderStatus == 5 ? `(${$t("unlock.overdue")})` : ''}}</template>
|
||||
item.orderStatus == 5 ? `(${$t("unlock.overdue")})` : '' }}</template>
|
||||
<template v-else-if="item.refundLockerStatus === 4">{{ $t("unlock.overdue")
|
||||
}}</template>
|
||||
}}</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -84,18 +86,20 @@
|
||||
<view class="btn" v-if="item.orderStatus == 2" style="justify-content: start;">
|
||||
<uv-button shape="circle" :customStyle="{
|
||||
color: '#fff',
|
||||
}" color="#FB322E" @click="handleCancelOrder(item)">取消订单</uv-button>
|
||||
}" color="#FB322E" @click="openCancelOrder(item)">取消订单</uv-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="empt font32 fontb" style="text-align: center;position: absolute; top: 50%;left: 50%;transform: translate(-50%, -50%);" v-if="state.orderList.length === 0" >
|
||||
暂无订单
|
||||
</view>
|
||||
<view class="empt font32 fontb"
|
||||
style="text-align: center;position: absolute; top: 50%;left: 50%;transform: translate(-50%, -50%);"
|
||||
v-if="state.orderList.length === 0">
|
||||
暂无订单
|
||||
</view>
|
||||
<view class="footer">
|
||||
<myCustomtTabBar direction="horizontal" :show-icon="true" :selected="1" @onTabItemTap="onTabItemTap">
|
||||
</myCustomtTabBar>
|
||||
</view>
|
||||
<uv-popup ref="detailPopupRef" zIndex="999" round="16rpx">
|
||||
<uv-popup ref="detailPopupRef" zIndex="999" round="24px">
|
||||
<view class="popupBox popupBoxW710">
|
||||
<view class="orderList">
|
||||
<view class="orderInfo">
|
||||
@ -126,9 +130,9 @@
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="label font26 fontb textGary">体积: </view>
|
||||
<view class="value font26 fontb">长{{ state.orderData['length'] }}m*{{
|
||||
state.orderData.width}}宽m*{{
|
||||
state.orderData.height }}高m ({{ state.orderData.volume }}m³)</view>
|
||||
<view class="value font26 fontb">长{{ state.orderData['length'] }}m*宽{{
|
||||
state.orderData.width }}m*高{{
|
||||
state.orderData.height }}m ({{ state.orderData.volume }}m³)</view>
|
||||
</view>
|
||||
<view class="item">
|
||||
<view class="label font26 fontb textGary">仓型: </view>
|
||||
@ -139,14 +143,14 @@
|
||||
<view class="label font26 fontb textGary">{{ $t('common.status') }}: </view>
|
||||
<view class="value font26 fontb" style="color: #FB322E;">
|
||||
<template v-if="state.orderData.refundLockerStatus === 0">{{ $t("common.notStarted")
|
||||
}}</template>
|
||||
}}</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>
|
||||
? `(${$t("unlock.overdue")})` : '' }}</template>
|
||||
<template v-else-if="state.orderData.refundLockerStatus === 4">{{
|
||||
$t("unlock.overdue") }}</template>
|
||||
</view>
|
||||
@ -189,13 +193,14 @@
|
||||
</view>
|
||||
</view>
|
||||
</uv-popup>
|
||||
<uv-popup ref="devicePopupRef" zIndex="999" round="16rpx">
|
||||
<view class="popupBox popupBoxW688">
|
||||
<uv-popup ref="devicePopupRef" zIndex="999" round="24rpx">
|
||||
<view class="popupBox popupBoxW710">
|
||||
<view class="title fontb font32">
|
||||
开门二维码
|
||||
</view>
|
||||
<view class="content">
|
||||
<img @click="showImage(QRCode)" alt="加载失败" v-show="ifShow" class="paw" width="100%" height="300rpx" :src="QRCode"></img>
|
||||
<img @click="showImage(QRCode)" alt="加载失败" v-show="ifShow" class="paw" width="100%" height="300rpx"
|
||||
:src="QRCode"></img>
|
||||
<text class="textGray font26">二维码的有效期仅为15分钟</text>
|
||||
</view>
|
||||
<view class="btnBox">
|
||||
@ -217,8 +222,8 @@
|
||||
</view>
|
||||
</view>
|
||||
</uv-popup>
|
||||
<uv-popup ref="pawPopupRef" zIndex="999" round="16rpx">
|
||||
<view class="popupBox pwdBox popupBoxW688">
|
||||
<uv-popup ref="pawPopupRef" zIndex="999" round="24px">
|
||||
<view class="popupBox pwdBox popupBoxW710">
|
||||
<view class="title fontb font32">
|
||||
开锁
|
||||
</view>
|
||||
@ -246,13 +251,13 @@
|
||||
</view>
|
||||
</uv-popup>
|
||||
|
||||
<uv-popup ref="payPopupRef" mode="bottom" zIndex="999" round="16rpx">
|
||||
<uv-popup ref="payPopupRef" mode="bottom" zIndex="999" round="24px">
|
||||
<view class="popupBox payPopupBox">
|
||||
<view class="title titleIcon font36 fontb">
|
||||
<image src="/static/home/siteicon.svg" class="icon"></image>
|
||||
<view class="title-wrap">
|
||||
<text class="title font36 fontb">{{ state.selectItem.siteName }} {{ state.selectItem.lockerName
|
||||
}}</text>
|
||||
}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title2 font32 fontb">
|
||||
@ -263,32 +268,34 @@
|
||||
<view style="display: flex;align-items: center;">租期时长</view>
|
||||
<view class="select"><text style="margin-right: 10rpx;color: #FB322E;font-weight: bold;">{{
|
||||
state.month
|
||||
}}个月</text> <uv-icon name="arrow-right" color="#000000" blod size="24rpx"></uv-icon></view>
|
||||
}}个月</text>
|
||||
<image src="/static/home/jiantou.svg" style="width: 24rpx;height: 24rpx;" class="icon"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="title2 font32 fontb">
|
||||
<text>租赁体积</text> <text>{{ `${state.lockData?.volume}m³` }}</text>
|
||||
</view>
|
||||
<view class="garyBox garyBoxM font28 card20">
|
||||
<view class="mgb20">
|
||||
仓号: {{ state.lockData?.name }}
|
||||
<view class="mgb10">
|
||||
仓号：{{ state.lockData?.name }}
|
||||
</view>
|
||||
<view>
|
||||
尺寸: {{ state.lockData?.['length'] }}m*{{ state.lockData?.width }}m*{{ state.lockData?.height }}m
|
||||
尺寸：长{{ state.lockData?.['length'] }}m*宽{{ state.lockData?.width }}m*高{{ state.lockData?.height }}m
|
||||
</view>
|
||||
</view>
|
||||
<view class="title2 font32 fontb">
|
||||
<text>租金总价</text> <text>￥ {{ state.priceData?.lockerExpense }}</text>
|
||||
</view>
|
||||
<view class="title2 textGary font28">
|
||||
<view class="title2 textGary2 fontb font28">
|
||||
<text>租金月费</text> <text> ￥ {{ state.priceData?.lockerPrice }}</text>
|
||||
</view>
|
||||
<view class="title2 textGary font28">
|
||||
<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 textGary font28">
|
||||
<view class="title2 textGary2 fontb font28">
|
||||
<text>租赁押金在租期结束后给予归还</text>
|
||||
</view>
|
||||
<view class="title2 font32 fontb">
|
||||
@ -296,37 +303,41 @@
|
||||
</view>
|
||||
<view class="toOrder card font28">
|
||||
<view class="left font28">
|
||||
<text class="price font36 fontb"> {{ state.priceData.expense ? `￥${state.priceData.expense}` :'--'}}</text>
|
||||
</view>
|
||||
<view class="right">
|
||||
<text class="price font36 fontb"> {{ state.priceData.expense ? `￥${state.priceData.expense}`
|
||||
:'--'}}</text>
|
||||
<view class="detail" v-if="state.priceData.expense" @click="hidePayPopup"><text
|
||||
class="font28">明细</text>
|
||||
<view class="viewIcon"><uv-icon name="play-left-fill" size="20" color="#FFF" /></view>
|
||||
<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',
|
||||
background: '#FB322E',
|
||||
color: '#fff',
|
||||
}" :textStyle="{
|
||||
fontSize: '32rpx',
|
||||
}" shape="circle" class="goOrder" @click="goOrder">续仓支付</uv-button>
|
||||
fontSize: '32rpx',
|
||||
fontWeight: 'bold',
|
||||
}" shape="circle" class="goOrder" @click="goOrder">续仓支付</uv-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uv-popup>
|
||||
<uv-popup ref="monthPopupRef" mode="bottom" zIndex="999" round="16rpx">
|
||||
<uv-popup ref="monthPopupRef" mode="bottom" zIndex="999" round="24px">
|
||||
<view class="unitPopupBox">
|
||||
<view class="title font36 fontb">
|
||||
租期选择
|
||||
</view>
|
||||
<view class="info">
|
||||
<uv-radio-group v-model="state.radioMonthvalue" activeColor="#fb322e" size="32rpx">
|
||||
<uv-radio-group v-model="state.radioMonthvalue" activeColor="#fb322e" size="40rpx"
|
||||
inactiveColor="#D8D8D8">
|
||||
<view class="list" v-for="item in state.lockData?.discountList">
|
||||
<view class="left">
|
||||
<view class="volume mgb10">
|
||||
<view class="volume mgb10 font28 fontb">
|
||||
租期: {{ item.month }}个月
|
||||
</view>
|
||||
<view class="unit mgb10">
|
||||
<view class="unit textRed mgb10 font28 fontb">
|
||||
优惠: 享受{{ (item.discount * 100) / 10 }}折优惠
|
||||
</view>
|
||||
<!-- <view class="site textGary mgb10">
|
||||
@ -335,22 +346,43 @@
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="radioBox mgb10">
|
||||
<uv-radio :key="item.month" :name="item.month">
|
||||
<uv-radio :key="item.month" :name="item.month" size="40rpx">
|
||||
</uv-radio>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="left">
|
||||
<view class="volume mgb10" style="display: flex;">
|
||||
自定义租期: <uv-number-box buttonSize="26" integer v-model="state.selfMonth"
|
||||
<view class="volume mgb10 font28 fontb zuqi" style="display: flex;">
|
||||
自定义租期:
|
||||
<!-- <uv-number-box buttonSize="26" integer v-model="state.selfMonth"
|
||||
color="#ffffff" bgColor="#FB322E" :min="1" :max="24" :step="1"
|
||||
iconStyle="color: #fff"></uv-number-box> 个月
|
||||
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" v-if="selfDiscount !== 1">
|
||||
<view class="unit textRed mgb10 font28 fontb" v-if="selfDiscount !== 1">
|
||||
优惠: 享受{{ selfDiscount * 100 / 10 }}折优惠
|
||||
</view>
|
||||
<view class="unit mgb10 textRed" v-else>
|
||||
<view class="unit textRed mgb10 textRed font28 fontb" v-else>
|
||||
优惠: --
|
||||
</view>
|
||||
<!-- <view class="site textGary mgb10">
|
||||
@ -359,20 +391,21 @@
|
||||
</view>
|
||||
<view class="right">
|
||||
<view class="radioBox mgb10">
|
||||
<uv-radio :key="0" :name="-1">
|
||||
<uv-radio :key="0" :name="-1" size="40rpx">
|
||||
</uv-radio>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</uv-radio-group>
|
||||
</view>
|
||||
<view class="btn" @click="confirmMonth">
|
||||
<view class="btn" @click="confirmMonth" style="display: flex;justify-content: center;">
|
||||
<uv-button :customStyle="{
|
||||
height: '86rpx',
|
||||
background: '#FB322E',
|
||||
color: '#fff',
|
||||
width: '630rpx',
|
||||
fontSize: '32rpx',
|
||||
}" shape="circle">
|
||||
}" color="#FB322E" shape="circle">
|
||||
确定
|
||||
</uv-button>
|
||||
</view>
|
||||
@ -380,8 +413,8 @@
|
||||
</uv-popup>
|
||||
|
||||
<!-- 上传图片退仓的弹窗 -->
|
||||
<uv-popup ref="moveOutPopup" customStyle="width: 688rpx; border-radius: 16rpx;"
|
||||
:closeOnClickOverlay="false" zIndex="9999">
|
||||
<uv-popup ref="moveOutPopup" customStyle="width: 710rpx; border-radius: 24px;" :safeAreaInsetBottom="false" :closeOnClickOverlay="false"
|
||||
zIndex="9999">
|
||||
<view class="modal-container">
|
||||
<view class="modal-title">{{ $t("unlock.moveoutReminder") }}</view>
|
||||
<text class="modal-text">
|
||||
@ -392,8 +425,7 @@
|
||||
</text>
|
||||
<view class="upload">
|
||||
<uv-upload :fileList="moveImageList" name="1" :maxCount="10" width="200rpx" height="200rpx" multiple
|
||||
:previewFullImage="false" uploadText=" " @afterRead="afterRead"
|
||||
@delete="deletePic">
|
||||
:previewFullImage="false" uploadText=" " @afterRead="afterRead" @delete="deletePic">
|
||||
</uv-upload>
|
||||
</view>
|
||||
<view class="modal-button">
|
||||
@ -407,20 +439,18 @@
|
||||
</uv-button>
|
||||
<uv-button :customStyle="{
|
||||
height: '86rpx',
|
||||
background: '#FB322E',
|
||||
lineHeight: '86rpx',
|
||||
color: '#fff',
|
||||
fontSize: '32rpx',
|
||||
}" shape="circle" @click="handleRefundLocker">
|
||||
}" color="#FB322E" shape="circle" @click="handleRefundLocker">
|
||||
{{ $t("unlock.confirmOut") }}
|
||||
</uv-button>
|
||||
</view>
|
||||
</view>
|
||||
</uv-popup>
|
||||
<!-- 成功退仓弹窗 -->
|
||||
<uv-popup ref="moveOutPopup2"
|
||||
customStyle="width: 688rpx; border-radius: 16rpx;"
|
||||
:closeOnClickOverlay="false" zIndex="9999">
|
||||
<uv-popup ref="moveOutPopup2" customStyle="width: 710rpx; 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">
|
||||
@ -428,7 +458,7 @@
|
||||
</text>
|
||||
<view class="modal-button">
|
||||
<!-- <view class="modal-button-2" @click="goEvaluate">{{ $t("unlock.evaluate") }}</view> -->
|
||||
<uv-button @click="closeModal2" :customStyle="{
|
||||
<uv-button @click="closeModal2" :customStyle="{
|
||||
height: '86rpx',
|
||||
lineHeight: '86rpx',
|
||||
color: '#000',
|
||||
@ -439,6 +469,34 @@
|
||||
</view>
|
||||
</view>
|
||||
</uv-popup>
|
||||
<uv-popup ref="cancelOrderPopupRef" customStyle="width: 710rpx; border-radius: 24rpx;" :safeAreaInsetBottom="false" :closeOnClickOverlay="false"
|
||||
zIndex="9999">
|
||||
<view class="modal-container">
|
||||
<view class="modal-title">{{ $t("common.cancelOrder") }}</view>
|
||||
<text class="modal-text">
|
||||
{{ $t("common.cancelOrderTips") }}
|
||||
</text>
|
||||
<view class="modal-button">
|
||||
<!-- <view class="modal-button-2" @click="goEvaluate">{{ $t("unlock.evaluate") }}</view> -->
|
||||
<uv-button @click="closeCancelOrder" :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="cancelOrder">
|
||||
{{ $t("unlock.confirmOut") }}
|
||||
</uv-button>
|
||||
</view>
|
||||
</view>
|
||||
</uv-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
@ -480,6 +538,7 @@ const { count, countDown, cancelCout } = useCountDown();
|
||||
const devicePopupRef = ref(null);
|
||||
const pawPopupRef = ref(null);
|
||||
const detailPopupRef = ref(null);
|
||||
const cancelOrderPopupRef = ref(null);
|
||||
uni.hideTabBar();
|
||||
const state = ref({
|
||||
orderList: [],
|
||||
@ -504,14 +563,14 @@ const list = [{
|
||||
}]
|
||||
|
||||
const showImage = (url) => {
|
||||
if(!url) return;
|
||||
uni.previewImage({
|
||||
urls: [url],
|
||||
});
|
||||
if (!url) return;
|
||||
uni.previewImage({
|
||||
urls: [url],
|
||||
});
|
||||
};
|
||||
|
||||
const copyOrderOn = (item) => {
|
||||
uni.setClipboardData({
|
||||
uni.setClipboardData({
|
||||
data: item.orderNo,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
@ -525,122 +584,120 @@ const copyOrderOn = (item) => {
|
||||
|
||||
|
||||
const goOrder = async () => {
|
||||
if (!state.value.selectItem?.orderId) {
|
||||
return uni.showToast({
|
||||
title: '请重新选择订单',
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
})
|
||||
}
|
||||
if (!state.value.month) {
|
||||
return uni.showToast({
|
||||
title: '租期',
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
}
|
||||
)
|
||||
}
|
||||
if (!state.value.selectItem?.orderId) {
|
||||
return uni.showToast({
|
||||
title: '请重新选择订单',
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
})
|
||||
}
|
||||
if (!state.value.month) {
|
||||
return uni.showToast({
|
||||
title: '租期',
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
let source = window.sf.isSfApp() ? 2 : 1;
|
||||
let source = window.sf.isSfApp() ? 2 : 1;
|
||||
uni.showLoading({
|
||||
title: '支付中',
|
||||
mask: true
|
||||
})
|
||||
getApi
|
||||
.ContinuationOrder({
|
||||
orderId: state.value.selectItem.orderId,
|
||||
month: state.value.month,
|
||||
source
|
||||
})
|
||||
.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`;
|
||||
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
|
||||
})
|
||||
hidePayPopup();
|
||||
GetOrderList();
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '支付失败',
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
})
|
||||
}
|
||||
}).catch(err => console.log(err))
|
||||
} else {
|
||||
uni.showLoading({
|
||||
title: '支付中',
|
||||
mask: true
|
||||
})
|
||||
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: returnUrl
|
||||
}).then(res => { }).catch(err => console.log(err))
|
||||
}
|
||||
} else {
|
||||
if (res.code === 1001) {
|
||||
uni.showModal({
|
||||
title: t('common.title'),
|
||||
content: t('common.unpaidOrderTips'),
|
||||
showCancel: false,
|
||||
success: function () {
|
||||
uni.switchTab({
|
||||
url: '/pages/unlock/index',
|
||||
})
|
||||
},
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const handleCancelOrder = (item) => {
|
||||
uni.showModal({
|
||||
title: t('common.cancelOrder'),
|
||||
content: t('common.cancelOrderTips'),
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
cancelOrder(item);
|
||||
getApi
|
||||
.ContinuationOrder({
|
||||
orderId: state.value.selectItem.orderId,
|
||||
month: state.value.month,
|
||||
source
|
||||
})
|
||||
.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`;
|
||||
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
|
||||
})
|
||||
hidePayPopup();
|
||||
GetOrderList();
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '支付失败',
|
||||
icon: 'none',
|
||||
duration: 3000
|
||||
})
|
||||
}
|
||||
}).catch(err => console.log(err))
|
||||
} else {
|
||||
uni.showLoading({
|
||||
title: '支付中',
|
||||
mask: true
|
||||
})
|
||||
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: returnUrl
|
||||
}).then(res => { }).catch(err => console.log(err))
|
||||
}
|
||||
} else {
|
||||
if (res.code === 1001) {
|
||||
uni.showModal({
|
||||
title: t('common.title'),
|
||||
content: t('common.unpaidOrderTips'),
|
||||
showCancel: false,
|
||||
success: function () {
|
||||
uni.switchTab({
|
||||
url: '/pages/unlock/index',
|
||||
})
|
||||
},
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
const cancelOrder = (item) => {
|
||||
|
||||
const openCancelOrder = (item) => {
|
||||
state.value.selectItem = item;
|
||||
cancelOrderPopupRef.value.open();
|
||||
}
|
||||
const closeCancelOrder = () => {
|
||||
cancelOrderPopupRef.value.close();
|
||||
}
|
||||
|
||||
const cancelOrder = () => {
|
||||
uni.showLoading({
|
||||
mark: true,
|
||||
})
|
||||
getApi.OrderCountdownTime({ orderId: item.orderId }).then(res=>{
|
||||
getApi.OrderCountdownTime({ orderId: state.value.selectItem.orderId }).then(res => {
|
||||
uni.hideLoading()
|
||||
if(res.code === 200){
|
||||
if (res.code === 200) {
|
||||
closeCancelOrder();
|
||||
GetOrderList();
|
||||
}else{
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "none",
|
||||
@ -1018,6 +1075,7 @@ onShow(() => {
|
||||
min-height: 86rpx;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
|
||||
:deep(.uv-button-wrapper) {
|
||||
flex: 1;
|
||||
}
|
||||
@ -1031,8 +1089,6 @@ onShow(() => {
|
||||
}
|
||||
|
||||
.payPopupBox {
|
||||
padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(32rpx + env(safe-area-inset-bottom));
|
||||
.titleIcon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -1048,10 +1104,14 @@ onShow(() => {
|
||||
}
|
||||
|
||||
.garyBox {
|
||||
border: 1px solid #F6F6F7;
|
||||
border: 3rpx solid #F6F6F7;
|
||||
background-color: #F8F9FB;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 26rpx;
|
||||
border-radius: 12rpx;
|
||||
color: #808386;
|
||||
font-weight: 600;
|
||||
|
||||
.select {
|
||||
display: flex;
|
||||
@ -1071,7 +1131,7 @@ onShow(() => {
|
||||
}
|
||||
|
||||
.title2 {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@ -1098,24 +1158,30 @@ onShow(() => {
|
||||
|
||||
.left {
|
||||
color: #E9CBA1;
|
||||
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.detail {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 20rpx;
|
||||
margin-left: 40rpx;
|
||||
color: #FFFFFF;
|
||||
font-size: 28rpx;
|
||||
|
||||
.viewIcon {
|
||||
margin-left: 4rpx;
|
||||
transform: rotate(270deg);
|
||||
image {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: -1px;
|
||||
|
||||
|
||||
|
||||
text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -1128,6 +1194,7 @@ onShow(() => {
|
||||
:deep(.uv-button) {
|
||||
font-size: 28rpx;
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1157,12 +1224,56 @@ onShow(() => {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1px solid #a8aaac69;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.radioBox {
|
||||
@ -1173,7 +1284,7 @@ onShow(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.popupBoxW710{
|
||||
.popupBoxW710 {
|
||||
width: 710rpx;
|
||||
}
|
||||
|
||||
@ -1277,12 +1388,15 @@ onShow(() => {
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
image {
|
||||
margin-top: 4rpx;
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
margin-top: 8rpx;
|
||||
}
|
||||
|
||||
.title-wrap {
|
||||
display: flex;
|
||||
@ -1308,13 +1422,16 @@ onShow(() => {
|
||||
/* 底部地址行 */
|
||||
.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
image {
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
|
||||
.address {
|
||||
flex: 1;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1324,8 +1441,9 @@ onShow(() => {
|
||||
|
||||
:deep(.uv-button) {
|
||||
min-width: 135rpx;
|
||||
height: 50rpx;
|
||||
font-size: 20rpx;
|
||||
height: 60rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 60rpx;
|
||||
color: #6f6f6f;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -1420,11 +1538,10 @@ onShow(() => {
|
||||
.top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
image {
|
||||
margin-top: 4rpx;
|
||||
margin-top: 0rpx;
|
||||
}
|
||||
|
||||
.left {
|
||||
@ -1457,13 +1574,16 @@ onShow(() => {
|
||||
/* 底部地址行 */
|
||||
.bottom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
image {
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
|
||||
.address {
|
||||
flex: 1;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1473,8 +1593,9 @@ onShow(() => {
|
||||
|
||||
:deep(.uv-button) {
|
||||
min-width: 135rpx;
|
||||
height: 50rpx;
|
||||
font-size: 20rpx;
|
||||
height: 60rpx;
|
||||
font-size: 26rpx;
|
||||
line-height: 60rpx;
|
||||
color: #6f6f6f;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -1483,5 +1604,4 @@ onShow(() => {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -9,28 +9,28 @@
|
||||
<uv-form labelPosition="left" labelWidth="190rpx" :model="state" ref="form">
|
||||
<!-- 用户姓名 -->
|
||||
<uv-form-item label="用户姓名" prop="formData.name" borderBottom>
|
||||
<uv-input placeholder="请填写" placeholderStyle="font-weight: 600;" v-model="state.formData.name" border="none"></uv-input>
|
||||
<uv-input placeholder="请填写" placeholderStyle="font-weight: 600;font-size: 28rpx;color:#A8AAAC;" v-model="state.formData.name" border="none"></uv-input>
|
||||
</uv-form-item>
|
||||
|
||||
<!-- 证件类型 -->
|
||||
<uv-form-item label="证件类型" prop="cardTypeText" borderBottom @click="openTypePicker">
|
||||
<uv-input placeholder="请选择" placeholderStyle="font-weight: 600;" v-model="state.cardTypeText" disabled disabledColor="#ffffff"
|
||||
<uv-input placeholder="请选择" placeholderStyle="font-weight: 600;font-size: 28rpx;color:#A8AAAC;" v-model="state.cardTypeText" disabled disabledColor="#ffffff"
|
||||
border="none"></uv-input>
|
||||
<template #right>
|
||||
<uv-icon name="arrow-right" size="24rpx"></uv-icon>
|
||||
<image src="/static/home/jiantou.svg" style="width: 44rpx;height: 24rpx;" class="icon"></image>
|
||||
</template>
|
||||
</uv-form-item>
|
||||
|
||||
<!-- 证件号码 -->
|
||||
<uv-form-item label="证件号码" prop="formData.idCard" borderBottom>
|
||||
<uv-input placeholder="请填写" placeholderStyle="font-weight: 600;" v-model="state.formData.idCard" border="none"></uv-input>
|
||||
<uv-input placeholder="请填写" placeholderStyle="font-weight: 600;font-size: 28rpx;color:#A8AAAC;" v-model="state.formData.idCard" border="none"></uv-input>
|
||||
</uv-form-item>
|
||||
|
||||
<!-- 上传证件 -->
|
||||
<uv-form-item label="证件正面照片" labelWidth="180rpx" labelPosition="top" borderBottom prop="formData.idFile1">
|
||||
<view class="ImgUpload">
|
||||
<my-upload v-model="state.formData.idFile1" :addWatermark="true" width="150rpx"
|
||||
height="150rpx" :previewFullImage="false" uploadText=" ">
|
||||
<my-upload v-model="state.formData.idFile1" :addWatermark="true" width="200rpx"
|
||||
height="200rpx" :previewFullImage="false" uploadText=" ">
|
||||
<!-- <image src="/static/personal/id02.png" mode="aspectFit"
|
||||
style="width: 280rpx;height:200rpx;margin-bottom:20rpx"></image> -->
|
||||
<!-- <view class="upLoadText">
|
||||
@ -41,9 +41,9 @@
|
||||
|
||||
</view>
|
||||
</uv-form-item>
|
||||
<uv-form-item label="证件背面照片" prop="formData.idFile2" labelPosition="top" labelWidth="180rpx">
|
||||
<uv-form-item label="证件背面照片" prop="formData.idFile2" labelPosition="top" labelWidth="180rpx" borderBottom>
|
||||
<view class="ImgUpload">
|
||||
<my-upload v-model="state.formData.idFile2" :addWatermark="true" width="150rpx" height="150rpx"
|
||||
<my-upload v-model="state.formData.idFile2" :addWatermark="true" width="200rpx" height="200rpx"
|
||||
:previewFullImage="false" uploadText=" ">
|
||||
<!-- <image src="/static/personal/id01.png" mode="aspectFit"
|
||||
style="width: 280rpx;height:200rpx;margin-bottom:20rpx"></image>
|
||||
@ -55,9 +55,9 @@
|
||||
</uv-form-item>
|
||||
|
||||
<!-- 手机号码 -->
|
||||
<uv-form-item label="手机号码" style="opacity: 0.4;" prop="formData.phone" borderBottom>
|
||||
<uv-form-item label="手机号码" :class="{'phoneForm-item-disabled': !!storeState.userInfo.phone}" prop="formData.phone" borderBottom>
|
||||
<view style="display:flex;align-items:center;width:100%">
|
||||
<uv-input placeholder="请填写" placeholderStyle="font-weight: 600;" v-model="state.formData.phone" border="none" style="flex:1"></uv-input>
|
||||
<uv-input placeholder="请填写" :disabled="!!storeState.userInfo.phone" placeholderStyle="font-weight: 600;font-size: 28rpx;color:#A8AAAC;" v-model="state.formData.phone" border="none" style="flex:1"></uv-input>
|
||||
</view>
|
||||
</uv-form-item>
|
||||
|
||||
@ -71,18 +71,18 @@
|
||||
<uv-icon name="play-right-fill" size="24rpx" style="transform: rotate(90deg)"></uv-icon>
|
||||
</view>
|
||||
|
||||
<uv-input placeholder="请填写" placeholderStyle="font-weight: 600;" v-model="state.formData.abroadPhone" border="none" style="flex:1"></uv-input>
|
||||
<uv-input placeholder="请填写" placeholderStyle="font-weight: 600;font-size: 28rpx;color:#A8AAAC;" v-model="state.formData.abroadPhone" border="none" style="flex:1"></uv-input>
|
||||
</view>
|
||||
</uv-form-item>
|
||||
|
||||
<!-- 紧急联系人 -->
|
||||
<uv-form-item label="紧急联系号码" prop="formData.emerPhone" borderBottom>
|
||||
<uv-input placeholder="请填写" placeholderStyle="font-weight: 600;" v-model="state.formData.emerPhone" border="none"></uv-input>
|
||||
<uv-input placeholder="请填写" placeholderStyle="font-weight: 600;font-size: 28rpx;color:#A8AAAC;" v-model="state.formData.emerPhone" border="none"></uv-input>
|
||||
</uv-form-item>
|
||||
|
||||
<!-- 邮箱 -->
|
||||
<uv-form-item label="邮箱" prop="formData.email" borderBottom>
|
||||
<uv-input placeholder="请填写" placeholderStyle="font-weight: 600;" v-model="state.formData.email" border="none"></uv-input>
|
||||
<uv-form-item label="邮箱" prop="formData.email">
|
||||
<uv-input placeholder="请填写" placeholderStyle="font-weight: 600;font-size: 28rpx;color:#A8AAAC;" v-model="state.formData.email" border="none"></uv-input>
|
||||
</uv-form-item>
|
||||
</uv-form>
|
||||
</view>
|
||||
@ -90,11 +90,11 @@
|
||||
<view class="infobox">
|
||||
<view class="personal" style="margin-top:20rpx;" v-show="state.vaildType == 1">
|
||||
|
||||
<view class="tips font36" v-if="state.formData.certificateStatus1 === 1"
|
||||
style="text-align: center;color: red;margin: 20rpx 0;">
|
||||
<view class="tips font28" v-if="state.formData.certificateStatus1 === 1"
|
||||
style="text-align: left;color: red;margin: 20rpx 0;">
|
||||
{{ $t("verification.vailFail") }}
|
||||
</view>
|
||||
<view class="tips font36" v-if="state.formData.certificateStatus1 === 0"
|
||||
<view class="tips font28" v-if="state.formData.certificateStatus1 === 0"
|
||||
style="text-align: center; color: green;margin: 20rpx 0;">
|
||||
{{ $t("verification.vailSuccess") }}
|
||||
</view>
|
||||
@ -117,15 +117,17 @@
|
||||
<view @click="toHome">
|
||||
返回主页
|
||||
</view>
|
||||
<view></view>
|
||||
<view @click="goOrder">
|
||||
返回订单
|
||||
</view>
|
||||
</view>
|
||||
<!-- 选择证件类型 -->
|
||||
<uv-picker ref="typePickerRef" :confirmText="$t('common.confirm')"
|
||||
:cancelText="$t('common.cancel')" confirmColor="#FB322E" :columns="state.cardType" keyName="label"
|
||||
:cancelText="$t('common.cancel')" confirmColor="#FB322E" round="24px" :columns="state.cardType" keyName="label"
|
||||
@confirm="confirmCardType"></uv-picker>
|
||||
<!-- 是否验证成功 -->
|
||||
<myModal v-model="state.showAuthModal" :content="state.contentTips" :cancelShow="false"></myModal>
|
||||
<uv-picker ref="AreaCodePickerRef" :columns="[areaCodeList]" keyName="label" @confirm="onAreaCodeConfirm" />
|
||||
<uv-picker ref="AreaCodePickerRef" :columns="[areaCodeList]" keyName="label" round="24px" @confirm="onAreaCodeConfirm" />
|
||||
|
||||
</view>
|
||||
</template>
|
||||
@ -146,6 +148,7 @@ const { themeInfo, storeState,getUserInfo } = useMainStore();
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useLoginApi } from "@/Apis/login.js";
|
||||
import { authInfoApi } from "@/Apis/validInfo.js";
|
||||
import { navigateTo } from '@/utils/navigateTo';
|
||||
import dayjs from 'dayjs';
|
||||
const { t } = useI18n();
|
||||
const app = getApp();
|
||||
@ -155,6 +158,10 @@ const getAuthApi = authInfoApi();
|
||||
const agree = ref(true)
|
||||
|
||||
|
||||
const goOrder = () => {
|
||||
navigateTo('/pages/unlock/index');
|
||||
}
|
||||
|
||||
|
||||
const typePickerRef = ref();
|
||||
const canGetCode = ref();
|
||||
@ -412,7 +419,7 @@ const verifyPerson = () => {
|
||||
state.showAuthModal = true;
|
||||
|
||||
if (res.data && pages.length >= 2) {
|
||||
if (pages[pages.length - 2].route == 'pages/setOrder/index') {
|
||||
if (pages[pages.length - 2].route == 'pages/index/index') {
|
||||
navigateBack()
|
||||
return
|
||||
}
|
||||
@ -518,6 +525,12 @@ const updateAuthInfo = () => {
|
||||
<style lang="scss" scoped>
|
||||
@import "@/static/style/theme.scss";
|
||||
|
||||
.phoneForm-item-disabled{
|
||||
:deep(.uv-form-item__body){
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
@ -530,14 +543,19 @@ const updateAuthInfo = () => {
|
||||
width: 100%;
|
||||
|
||||
.formBox {
|
||||
padding-top: 0;
|
||||
padding-top: 16rpx;
|
||||
padding-bottom: 16rpx;
|
||||
background-color: #FFF;
|
||||
:deep(.uv-form-item__body__left__content__label) {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
|
||||
:deep(.uv-form-item){
|
||||
.uv-line{
|
||||
border-color: #787B7E10!important;
|
||||
}
|
||||
}
|
||||
:deep(.uv-input__content__field-wrapper__field) {
|
||||
font-size: 28rpx !important;
|
||||
text-align: right!important;
|
||||
|
||||
3
static/home/jiantou.svg
Normal file
3
static/home/jiantou.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="12" height="22" viewBox="0 0 12 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.4623 9.46409L3.03504 0.550341C2.36734 -0.155509 1.25611 -0.186509 0.550256 0.481187C-0.155595 1.14888 -0.186594 2.26012 0.481102 2.96597L7.7733 10.6802L0.481101 18.3945C-0.186595 19.1004 -0.155596 20.2116 0.550255 20.8793C1.25611 21.547 2.36734 21.516 3.03504 20.8102L11.4623 11.8964C11.7866 11.5602 11.9488 11.1214 11.9512 10.685C11.9488 10.2391 11.7866 9.8027 11.4623 9.46409Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 511 B |
3
static/home/jiantouleft.svg
Normal file
3
static/home/jiantouleft.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="32" height="57" viewBox="0 0 32 57" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.29196 31.4409L23.5641 54.9987C25.3287 56.8641 28.2655 56.946 30.131 55.1814C31.9964 53.4168 32.0784 50.4799 30.3137 48.6145L11.0415 28.2268L30.3137 7.83903C32.0784 5.97357 31.9964 3.03673 30.131 1.2721C28.2655 -0.492523 25.3287 -0.410595 23.5641 1.45486L1.29196 25.0126C0.434855 25.9012 0.00630259 27.0608 3.36746e-07 28.2142C0.00630256 29.3927 0.434854 30.546 1.29196 31.4409Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 509 B |
3
static/home/jiantouright.svg
Normal file
3
static/home/jiantouright.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="32" height="57" viewBox="0 0 32 57" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M30.2935 25.0122L8.02139 1.45447C6.25677 -0.410988 3.31993 -0.492918 1.45446 1.27171C-0.410998 3.03633 -0.492924 5.97318 1.2717 7.83864L20.5439 28.2264L1.2717 48.6141C-0.492926 50.4796 -0.411 53.4164 1.45446 55.181C3.31992 56.9456 6.25676 56.8637 8.02139 54.9983L30.2935 31.4405C31.1506 30.5519 31.5791 29.3923 31.5854 28.239C31.5791 27.0605 31.1506 25.9071 30.2935 25.0122Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 502 B |
3
static/home/jiantouup.svg
Normal file
3
static/home/jiantouup.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="21" height="13" viewBox="0 0 21 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.0688979 12.2984L9.86686 0.284465C9.93846 0.195485 10.0291 0.12369 10.1321 0.0743614C10.2351 0.0250326 10.3479 -0.000575449 10.4621 -0.000575453C10.5763 -0.000575458 10.689 0.0250326 10.792 0.0743614C10.895 0.12369 10.9857 0.195485 11.0573 0.284465L20.8552 12.2984C20.8931 12.3434 20.9173 12.3982 20.9251 12.4564C20.9329 12.5146 20.9238 12.5739 20.8991 12.6272C20.8744 12.6805 20.835 12.7256 20.7855 12.7573C20.736 12.789 20.6785 12.8058 20.6198 12.806L0.309596 12.8086C0.25082 12.8078 0.193453 12.7905 0.144026 12.7587C0.0945989 12.7268 0.0550964 12.6818 0.0300148 12.6286C0.00493327 12.5755 -0.00471983 12.5163 0.00215435 12.458C0.00902852 12.3996 0.0321537 12.3443 0.0688979 12.2984Z" fill="#EDF3FA"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 819 B |
@ -1 +1,13 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><defs><clipPath id="master_svg0_622_50"><rect x="0" y="0" width="24" height="24" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_622_50)"><path d="M12,20.8995L16.949699000000003,15.9497C19.683399,13.2161,19.683399,8.7839203,16.949699000000003,6.0502501C14.2161,3.3165801,9.7839203,3.3165801,7.0502501,6.0502501C4.3165797999999995,8.7839203,4.3165797999999995,13.2161,7.0502501,15.9497L12,20.8995ZM12,23.7279L5.6360402,17.364C2.12132001,13.8492,2.12132001,8.1507597,5.6360402,4.6360402C9.1507597,1.12132001,14.8492,1.12132001,18.364,4.6360402C21.8787,8.1507597,21.8787,13.8492,18.364,17.364L12,23.7279ZM12,13C13.1046,13,14,12.1046,14,11C14,9.8954296,13.1046,9,12,9C10.8954,9,10,9.8954296,10,11C10,12.1046,10.8954,13,12,13ZM12,15C9.790860200000001,15,8,13.2091,8,11C8,8.790860200000001,9.790860200000001,7,12,7C14.2091,7,16,8.790860200000001,16,11C16,13.2091,14.2091,15,12,15Z" fill="#000000" fill-opacity="1" style="mix-blend-mode:passthrough"/></g></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<!-- 外轮廓（干净单线） -->
|
||||
<path
|
||||
d="M12 22s-7-6.2-7-11a7 7 0 1 1 14 0c0 4.8-7 11-7 11z"
|
||||
fill="none"
|
||||
stroke="#000"
|
||||
stroke-width="2"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
|
||||
<!-- 中间点 -->
|
||||
<circle cx="12" cy="11" r="2" fill="#000"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 329 B |
@ -76,6 +76,7 @@
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif;
|
||||
// line-height: 1;
|
||||
}
|
||||
|
||||
.location-popup {
|
||||
|
||||
BIN
static/upload.png
Normal file
BIN
static/upload.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
7
uni.scss
7
uni.scss
@ -44,7 +44,7 @@ $backgroundColor:
|
||||
.border-radius-20 { border-radius: 20rpx; }
|
||||
.card {
|
||||
background-color: #fff;
|
||||
border-radius: 16rpx;
|
||||
border-radius: 16px;
|
||||
padding: 36rpx;
|
||||
line-height: normal;
|
||||
margin-bottom: $padding20;
|
||||
@ -52,7 +52,7 @@ $backgroundColor:
|
||||
}
|
||||
.card20 {
|
||||
@extend .card;
|
||||
padding: 20rpx;
|
||||
padding: 16px;
|
||||
}
|
||||
.container{
|
||||
padding: $padding20;
|
||||
@ -88,6 +88,9 @@ $backgroundColor:
|
||||
.textGary{
|
||||
color: #A8AAAC;
|
||||
}
|
||||
.textGary2{
|
||||
color: #808386;
|
||||
}
|
||||
.textRed{
|
||||
color: $sfRedColor;
|
||||
}
|
||||
|
||||
@ -14,7 +14,8 @@
|
||||
<slot name="icon">
|
||||
<uv-icon
|
||||
class="uv-radio__icon-wrap__icon"
|
||||
name="checkbox-mark"
|
||||
name="checkmark"
|
||||
bold
|
||||
:size="elIconSize"
|
||||
:color="elIconColor"
|
||||
/>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user