国展报名 调整
张 元山
2 weeks ago
parent
196670f15c
commit
b670b9dd3f
File diff suppressed because it is too large
Load Diff
@ -1,139 +1,128 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import {ref} from 'vue';
|
import { upload_img } from "@/apis/index.js";
|
||||||
import {areaList} from '@vant/area-data';
|
|
||||||
import { useUserStore } from '@/stores/userStore.js'
|
import { useUserStore } from '@/stores/userStore.js'
|
||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from "pinia";
|
||||||
|
import defaultImg from "@/assets/images/zu1171@2x.png"
|
||||||
const userStore = useUserStore()
|
const userStore = useUserStore()
|
||||||
const {selectAddress,detailAddress} = storeToRefs(userStore);
|
const { artworkFile } = storeToRefs(userStore);
|
||||||
const showBottom = ref(false)
|
const afterRead = async (file) => {
|
||||||
const openSelectAddress = () => {
|
const res = await upload_img({
|
||||||
showBottom.value = true
|
file: file.file,
|
||||||
|
source: "artwork",
|
||||||
|
type: 'image'
|
||||||
|
})
|
||||||
|
if (res.status === 0) {
|
||||||
|
artworkFile.value = res.data.ori_url
|
||||||
}
|
}
|
||||||
const confirmAddress = (data) => {
|
|
||||||
selectAddress.value=data
|
|
||||||
showBottom.value = false
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="three-content">
|
<div class="two-content">
|
||||||
<van-popup
|
<van-uploader :afterRead="afterRead">
|
||||||
v-model:show="showBottom"
|
<div class="content1">
|
||||||
position="bottom"
|
<div class="wrap1">
|
||||||
>
|
<div v-show="!artworkFile"
|
||||||
<van-area title="请选择通讯地址" @cancel="showBottom=false"
|
class="wrap1_1">
|
||||||
@confirm="confirmAddress" :area-list="areaList"/>
|
|
||||||
</van-popup>
|
<img class="wrap1_1_2"
|
||||||
<div class="content-address">
|
:src="defaultImg">
|
||||||
<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 v-show="artworkFile"
|
||||||
|
class="wrap1_2">
|
||||||
|
<img class="wrap1_2_1"
|
||||||
|
:src="artworkFile">
|
||||||
</div>
|
</div>
|
||||||
<div class="detail-address">
|
<div class="wrap1_3"
|
||||||
<div class="wrap1">详细地址</div>
|
v-show="artworkFile">更换</div>
|
||||||
<div class="wrap2">
|
|
||||||
<textarea rows="4" cols="50" v-model="detailAddress" placeholder="在此输入详细地址">
|
|
||||||
</textarea>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="wrap2">上传近照</div>
|
||||||
</div>
|
</div>
|
||||||
|
</van-uploader>
|
||||||
|
<div class="bottom-text">*点击相机上传/拍摄近照</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style scoped lang="scss">
|
|
||||||
.three-content{
|
|
||||||
margin-bottom: 247px;
|
|
||||||
}
|
|
||||||
.detail-address {
|
|
||||||
margin-top: 18px;
|
|
||||||
padding: 16px 16px 12px 14px;
|
|
||||||
width: 332px;
|
|
||||||
height: 205px;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 12px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.wrap2 {
|
|
||||||
height: 155px;
|
|
||||||
background-color: #F0F0F0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: 12px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
textarea {
|
<style scoped lang="scss">
|
||||||
width: 100%;
|
.two-content {
|
||||||
box-sizing: border-box;
|
margin-bottom: 115px;
|
||||||
padding: 11px 17px 11px 17px;
|
|
||||||
background-color: #F0F0F0;
|
|
||||||
border: none;
|
|
||||||
color: #24437E;
|
|
||||||
font-size: 12px;
|
|
||||||
&::placeholder {
|
|
||||||
color: #CECECE;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
color: #24437E;
|
|
||||||
font-size: 12px;
|
|
||||||
outline: none;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap1 {
|
.bottom-text {
|
||||||
color: #000;
|
text-align: right;
|
||||||
|
margin-top: 8px;
|
||||||
|
color: #ffffff;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin-bottom: 6px;
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-address {
|
.content1 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 332px;
|
width: 332px;
|
||||||
height: 45px;
|
height: 377px;
|
||||||
border-radius: 12px;
|
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 16px 20px 10px 20px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 13px 21px 11px 26px;
|
|
||||||
|
|
||||||
.wrap4 {
|
|
||||||
margin-left: auto;
|
|
||||||
|
|
||||||
|
.wrap2 {
|
||||||
|
margin-top: 6px;
|
||||||
|
color: #2159c4;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
.wrap1 {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border: 2px solid #2159c4;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
.wrap1_3 {
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: #fff;
|
||||||
|
width: 48px;
|
||||||
|
height: 32px;
|
||||||
|
background-color: #2159c4;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 12px;
|
||||||
|
right: 12px;
|
||||||
|
}
|
||||||
|
.wrap1_2 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
img {
|
img {
|
||||||
width: 32.11px;
|
max-width: 293px;
|
||||||
height: 16px;
|
height: 330px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.wrap1_1 {
|
||||||
.wrap3 {
|
width: 256px;
|
||||||
margin-left: 12px;
|
height: 297px;
|
||||||
color: #CECECE;
|
background-image: url("@/assets/images/zu1174@2x.png");
|
||||||
font-size: 12px;
|
background-size: cover;
|
||||||
&.show{
|
display: flex;
|
||||||
color: #24437E;
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
.wrap1_1_1 {
|
||||||
|
margin: -18px;
|
||||||
|
width: 100%;
|
||||||
|
max-height: 297.5px;
|
||||||
}
|
}
|
||||||
|
.wrap1_1_2 {
|
||||||
|
width: 75px;
|
||||||
|
height: 75px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap1 {
|
|
||||||
flex-shrink: 0;
|
|
||||||
color: #000;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap2 {
|
|
||||||
margin-left: 34px;
|
|
||||||
background-color: #BBC5E0;
|
|
||||||
width: 1px;
|
|
||||||
height: 20.93px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue