kidArtExpo/src/views/signup/size375/index.vue

<script setup>
import {ref} from "vue";
import {useAuth} from "@/store/auth/index.js";
import {uploadFile} from "@/api/auth/index.js";
const {clickApply,formData,genderOptions,clickAddWorks,removeWorks} =useAuth()
const showPicker=ref(false)
function onConfirm(data){
  formData.value.gender=data.selectedValues?.[0]
  showPicker.value=false
}
const afterRead=async (file,item)=>{
  const formData1 = new FormData()
  formData1.append("file", file.file)
  formData1.append("type", 'image')
const res=await uploadFile(formData1)
  if (res.status===0){
    item.picUrl=res.data
  }
}
const deleteImg=(item)=>{
item.picUrl=''
  item.imgList=[]
}
</script>
<template>
  <div class="box-border relative w-1920px h-screen bg-no-repeat bg-cover bg-[url('@/assets/image/zu3237.png')] flex items-center flex-col">
    <div class="mt-143px w-1074px h-178px bg-cover bg-no-repeat bg-[url('@/assets/image/zu3311@2x.png')]"></div>
    <div class="absolute top-0 left-0 w-671px h-728px bg-cover">
      <img src="@/assets/image/gdz27.png" alt="">
    </div>
    <div class="absolute bottom-200px w-1270px h-145px">
      <img src="@/assets/image/zu733@2x.png" alt="">
    </div>
    <div class="flex flex-col items-center w-1654px h-2729px bg-cover bg-no-repeat bg-[url('@/assets/image/zu3186@2x.png')] mt-123px pt-164px px-82px">
      <div class="flex items-center w-full mt-80px px-31px">
        <div class="text-72px font-bold text-[#2B69A1] w-265px">*姓名</div>
        <div class="w-1150px h-174px bg-[#DCE5E9] pl-61px">
          <input v-no-space v-model="formData.name" class="w-full h-full bg-transparent border-none placeholder-[#2B69A1] placeholder-text-72px focus:outline-none" placeholder="请输入宝贝姓名" type="text">
        </div>
      </div>
      <div class="flex items-center w-full mt-80px px-31px">
        <div class="text-72px font-bold text-[#2B69A1] w-265px">*年龄</div>
        <div class="w-1150px h-174px bg-[#DCE5E9] pl-61px">
          <input  v-no-space v-model="formData.age" type="number" class="w-full h-full bg-transparent border-none placeholder-[#2B69A1] placeholder-text-72px focus:outline-none" placeholder="请输入年龄">
        </div>
      </div>
      <div class="flex items-center w-full mt-87px px-31px">
        <div class="text-72px font-bold text-[#2B69A1] w-265px">*性别</div>
        <div class="w-1150px h-174px bg-[#DCE5E9] pl-61px" @click="showPicker=true">
          <input readonly v-model="formData.gender" class="w-full h-full bg-transparent border-none placeholder-[#2B69A1] placeholder-text-72px focus:outline-none" placeholder="请选择性别" type="text">
          <img src="@/assets/image/hsmr@2x.png" class="absolute right-72px top-1/2 transform -translate-y-1/2 w-50px h-28px" alt="">
        </div>
      </div>
      <div class="flex mt-77px flex-col items-center w-full pt-46px h-1382px bg-[#F5F5F5] w-1490px overflow-y-auto pr-44px pl-44px">

        <div :class="`flex w-full ${formData.works?.length>1&&index+1!==formData.works?.length?'border-b-1px border-b-[#D6E0E9] border-b-solid mb-97px pb-102px':''}` "  v-for="(item,index) of formData.works" :key="index">
          <div class="w-265px shrink-0 font-bold text-[#2B69A1]">*作品{{index+1}}</div>
          <div>
            <div class="flex items-end">
              <van-uploader v-model="item.imgList" @delete="deleteImg(item)"  :max-count="1" :after-read="(e)=>{afterRead(e,item)}">
                <div class="w-410px h-410px bg-[#D6E0E9] rounded-20px flex flex-col items-center justify-center">
                  <img class="w-88px h-88px" src="@/assets/image/zu3264@2x.png" alt="">
                  <div class="mt-36px text-[#2B69A1] text-72px">上传作品</div>
                </div>
              </van-uploader>
              <div class="ml-31px" v-if="formData.works?.length>1" @click="removeWorks(index)">
                <img class="w-84px h-91px" src="@/assets/image/sc@2x.png" alt="">
              </div>
            </div>

            <div class="mt-41px text-61px text-[#2B69A1]">作品名称</div>
            <input v-no-space v-model="item.workName" class="mt-20px w-1150px h-174px bg-[#DCE5E9] pl-61px border-none placeholder-[#2B69A1] placeholder-text-72px focus:outline-none" placeholder="请输入作品名称" type="text">
            <div class="flex justify-between mt-41px">
              <div class="flex flex-col">
                <div class="text-61px text-[#2B69A1]">长度</div>
                <div class="flex items-center">
                  <input v-no-space v-model="item.length" class="w-379px h-174px bg-[#DCE5E9] pl-61px border-none placeholder-[#2B69A1] placeholder-text-72px focus:outline-none" placeholder="请输入" type="number">
                  <div class="ml-30px text-[#2B69A1] text-72px">cm</div>
                </div>
              </div>
              <div class="flex flex-col">
                <div class="text-61px text-[#2B69A1]">宽度</div>
                <div class="flex items-center">
                  <input v-no-space v-model="item.wide" class="w-379px h-174px bg-[#DCE5E9] pl-61px border-none placeholder-[#2B69A1] placeholder-text-72px focus:outline-none" placeholder="请输入" type="number">
                  <div class="ml-30px text-[#2B69A1] text-72px">cm</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mt-51px mb-46px w-184px h-184px bg-[#336699] rounded-full flex items-center relative justify-center shadow-0-0-10px-rgba(0,0,0,0.1) shrink-0" @click="clickAddWorks">
          <div class="absolute w-88px h-6px bg-white"></div>
          <div class="absolute w-6px h-88px bg-white"></div>
        </div>
      </div>
      <div @click="clickApply" class="mt-60px w-866px h-200px bg-contain bg-no-repeat bg-[url('@/assets/image/zu3189@2x1.png')] flex justify-center items-center text-white text-82px">
        确定
      </div>
    </div>
    <van-popup v-model:show="showPicker" round position="bottom">
      <van-picker
          :columns="genderOptions"
          @cancel="showPicker = false"
          @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>