xingyy/sign-stream
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

submit

Browse Source
This commit is contained in:
Phoenix 2024-02-05 16:51:32 +08:00
parent c51bc16acb
commit b3dcecb7e3
2 changed files with 60 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/views/upload-id-card/content/three.vue
View File

@ -1,35 +1,49 @@
<script setup> <script setup>
import { ref } from 'vue'; import {ref} from 'vue';
import { areaList } from '@vant/area-data'; import {areaList} from '@vant/area-data';
const selectAddress=ref(null)
const showBottom = ref(false)
const openSelectAddress = () => {
showBottom.value = true
}
const confirmAddress = (data) => {
selectAddress.value=data
showBottom.value = false
}
</script> </script>
<template> <template>
<div> <div>
<!-- <van-area title="标题" :area-list="areaList" />--> <van-popup
<div class="content-address"> v-model:show="showBottom"
<div class="wrap1">通讯地址</div> position="bottom"
<div class="wrap2"></div> >
<div class="wrap3"> <van-area title="请选择通讯地址" @cancel="showBottom=false"
省-市-区 @confirm="confirmAddress" :area-list="areaList"/>
</van-popup>
<div class="content-address">
<div class="wrap1">通讯地址</div>
<div class="wrap2"></div>
<div class="wrap3" :class="[selectAddress?.selectedOptions.map(x=>x.text).join('-')?'show':'']">
{{selectAddress?.selectedOptions.map(x=>x.text).join('-')|| '省-市-区'}}
</div>
<div class="wrap4" @click="openSelectAddress">
<img src="@/assets/images/zzz766@3x.png" alt="">
</div>
</div> </div>
<div class="wrap4"> <div class="detail-address">
<img src="@/assets/images/zzz766@3x.png" alt="">
</div>
</div>
<div class="detail-address">
<div class="wrap1">详细地址</div> <div class="wrap1">详细地址</div>
<div class="wrap2"> <div class="wrap2">
<textarea rows="4" cols="50" placeholder="在此输入详细地址"> <textarea rows="4" cols="50" placeholder="在此输入详细地址">
</textarea> </textarea>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss">
.detail-address{ .detail-address {
margin-top: 18px; margin-top: 18px;
padding: 16px 16px 12px 14px; padding: 16px 16px 12px 14px;
width: 332px; width: 332px;
@ -37,38 +51,45 @@ import { areaList } from '@vant/area-data';
background-color: #fff; background-color: #fff;
border-radius: 12px; border-radius: 12px;
box-sizing: border-box; box-sizing: border-box;
.wrap2{
.wrap2 {
height: 155px; height: 155px;
background-color: #F0F0F0; background-color: #F0F0F0;
box-sizing: border-box; box-sizing: border-box;
border-radius: 12px; border-radius: 12px;
overflow: hidden; overflow: hidden;
textarea{
textarea {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 11px 17px 11px 17px; padding: 11px 17px 11px 17px;
background-color: #F0F0F0; background-color: #F0F0F0;
border: none; border: none;
color: #24437E;
&::placeholder{ font-size: 12px;
&::placeholder {
color: #CECECE; color: #CECECE;
font-size: 12px; font-size: 12px;
} }
&:focus{
&:focus {
color: #24437E;
font-size: 12px; font-size: 12px;
outline: none; outline: none;
border: none; border: none;
} }
} }
} }
.wrap1{
.wrap1 {
color: #000; color: #000;
font-size: 12px; font-size: 12px;
margin-bottom: 6px; margin-bottom: 6px;
padding-left: 10px; padding-left: 10px;
} }
} }
.content-address{
.content-address {
box-sizing: border-box; box-sizing: border-box;
width: 332px; width: 332px;
height: 45px; height: 45px;
@ -77,23 +98,32 @@ import { areaList } from '@vant/area-data';
display: flex; display: flex;
align-items: center; align-items: center;
padding: 13px 21px 11px 26px; padding: 13px 21px 11px 26px;
.wrap4{
.wrap4 {
margin-left: auto; margin-left: auto;
img{
img {
width: 32.11px; width: 32.11px;
height: 16px; height: 16px;
} }
} }
.wrap3{
.wrap3 {
margin-left: 12px; margin-left: 12px;
color: #CECECE; color: #CECECE;
font-size: 12px; font-size: 12px;
&.show{
color: #24437E;
}
} }
.wrap1{
.wrap1 {
flex-shrink: 0;
color: #000; color: #000;
font-size: 12px; font-size: 12px;
} }
.wrap2{
.wrap2 {
margin-left: 34px; margin-left: 34px;
background-color: #BBC5E0; background-color: #BBC5E0;
width: 1px; width: 1px;

2
src/views/upload-id-card/index.vue
View File

@ -30,7 +30,7 @@ const stepsClick = (item) => {
if (item.type === 'next') { if (item.type === 'next') {
active.value=2 active.value=2
router.replace(`/title-forward/upload-id-card/${2}`) router.replace(`/title-forward/upload-id-card/${2}`)
buttons.value = [{label: "上一步", type: "back"}, {label: "完成", type: "finish"}] buttons.value = [{label: "上一步", type: "back"}, {label: "提交", type: "submit"}]
} else if (item.type === 'back') { } else if (item.type === 'back') {
active.value=0 active.value=0
router.replace(`/title-forward/upload-id-card/${0}`) router.replace(`/title-forward/upload-id-card/${0}`)