123
This commit is contained in:
parent
eb1f168c10
commit
c9522f8e24
@ -1,9 +1,22 @@
|
||||
import request from '@/service/index.js'
|
||||
export const sendCode = (data) => {
|
||||
console.log('schildrenchildrenendCode')
|
||||
return request({
|
||||
url: '/api/children/competition/sendCode',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
export const loginRegister = (data) => {
|
||||
return request({
|
||||
url: '/api/children/competition/login/register',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
export const competitionApply = (data) => {
|
||||
return request({
|
||||
url: '/api/children/competition/apply',
|
||||
method: 'POST',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
BIN
src/assets/image/sc@2x.png
Normal file
BIN
src/assets/image/sc@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 535 B |
@ -1,12 +1,76 @@
|
||||
import {ref} from 'vue'
|
||||
import {ref,computed} from 'vue'
|
||||
import {createGlobalState,useStorage} from '@vueuse/core'
|
||||
import {sendCode} from '@/api/auth/index.js'
|
||||
import {competitionApply, loginRegister, sendCode} from '@/api/auth/index.js'
|
||||
import {message} from "@/utils/message.js"
|
||||
import { useRouter } from 'vue-router';
|
||||
export const useAuth=createGlobalState(()=>{
|
||||
|
||||
const router = useRouter();
|
||||
const token = useStorage('token', '', localStorage)
|
||||
const telNum =ref('')
|
||||
const code=ref('')
|
||||
const countdown = ref(0);
|
||||
const isCountingDown = ref(false);
|
||||
const showTextCode=computed(()=>{
|
||||
return isCountingDown.value ? `${countdown.value}s` : '获取验证码'
|
||||
})
|
||||
const genderOptions=ref([
|
||||
{text:'男',value:'男'},
|
||||
{text:'女',value:'女'}
|
||||
])
|
||||
|
||||
const formData=ref({
|
||||
name:'',
|
||||
age:'',
|
||||
gender:'',
|
||||
works:[
|
||||
{
|
||||
picUrl: "", //作品图片url
|
||||
workName: "", //作品名称
|
||||
length: undefined, //长度
|
||||
wide:undefined//宽度
|
||||
}
|
||||
]
|
||||
})
|
||||
const clickAddWorks=()=>{
|
||||
formData.value.works.push({
|
||||
picUrl: "", //作品图片url
|
||||
workName: "", //作品名称
|
||||
length: undefined, //长度
|
||||
wide:undefined//宽度
|
||||
})
|
||||
}
|
||||
const removeWorks=(index)=>{
|
||||
formData.value.works.splice(index,1)
|
||||
}
|
||||
const clickApply=async ()=>{
|
||||
const data={
|
||||
...formData.value
|
||||
}
|
||||
const res=await competitionApply(data)
|
||||
if(res.status===0){
|
||||
message.success('报名成功')
|
||||
}
|
||||
}
|
||||
let timer = null;
|
||||
const clickLogin=async ()=>{
|
||||
const data={
|
||||
telNum:telNum.value,
|
||||
code:code.value
|
||||
}
|
||||
const res=await loginRegister(data)
|
||||
if(res.status===0){
|
||||
message.success('登录成功')
|
||||
token.value=res.data.token
|
||||
router.push('/signup')
|
||||
}
|
||||
}
|
||||
const clickSendCode=async ()=>{
|
||||
if (isCountingDown.value) return;
|
||||
if (!code.value){
|
||||
message.warning('请输入验证码')
|
||||
return
|
||||
}
|
||||
if (!telNum.value){
|
||||
message.warning('请输入手机号')
|
||||
return
|
||||
@ -16,10 +80,27 @@ export const useAuth=createGlobalState(()=>{
|
||||
}
|
||||
const res=await sendCode(data)
|
||||
if (res.status===0){
|
||||
countdown.value = 60;
|
||||
isCountingDown.value = true;
|
||||
message.success('发送成功')
|
||||
timer = setInterval(() => {
|
||||
if (countdown.value > 0) {
|
||||
countdown.value -= 1;
|
||||
} else {
|
||||
clearInterval(timer);
|
||||
isCountingDown.value = false;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
return {
|
||||
removeWorks,
|
||||
clickAddWorks,
|
||||
genderOptions,
|
||||
formData,
|
||||
clickApply,
|
||||
clickLogin,
|
||||
showTextCode,
|
||||
code,
|
||||
clickSendCode,
|
||||
telNum,
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script setup>
|
||||
|
||||
import {useAuth} from "@/store/auth/index.js"
|
||||
const {clickSendCode,telNum,code,showTextCode ,clickLogin }= useAuth()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -12,17 +13,17 @@
|
||||
<div class="flex items-center">
|
||||
<div class="text-primary text-[19px] font-bold w-[88px]">手机号</div>
|
||||
<div>
|
||||
<input class="pl-[16px] w-[455px] h-[45px] focus:outline-none placeholder:text-primary placeholder:text-[19px] focus: bg-[#DCE5E9] focus:text-[35px] border-none" placeholder="请输入手机号" type="text">
|
||||
<input v-model="telNum" v-no-space class="pl-[16px] w-[455px] h-[45px] focus:outline-none placeholder:text-primary placeholder:text-[19px] focus: bg-[#DCE5E9] border-none" placeholder="请输入手机号" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center mt-[45px]">
|
||||
<div class="text-primary text-[19px] font-bold w-[88px]">验证码</div>
|
||||
<div class="flex items-center justify-between w-[454px] grow-1">
|
||||
<input class="pl-[16px] w-[281px] h-[45px] focus:outline-none placeholder:text-primary placeholder:text-[19px] focus: bg-[#DCE5E9] focus:text-[35px] border-none" placeholder="请输入验证码" type="text">
|
||||
<div class="w-[160px] h-[45px] bg-primary text-#fff flex items-center justify-center shrink-0">获取验证码</div>
|
||||
<input v-model="code" v-no-space class="pl-[16px] w-[281px] h-[45px] focus:outline-none placeholder:text-primary placeholder:text-[19px] focus: bg-[#DCE5E9] border-none" placeholder="请输入验证码" type="text">
|
||||
<div class="w-[160px] h-[45px] bg-primary text-#fff flex items-center justify-center shrink-0" @click="clickSendCode">{{ showTextCode }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-[url('@/assets/image/z3255@2x.png')] w-[320px] h-[52px] bg-center bg-no-repeat bg-contain flex items-center justify-center text-#fff text-[21px] mt-[97px]">登录/注册</div>
|
||||
<div class="bg-[url('@/assets/image/z3255@2x.png')] w-[320px] h-[52px] bg-center bg-no-repeat bg-contain flex items-center justify-center text-#fff text-[21px] mt-[97px]" @click="clickLogin">登录/注册</div>
|
||||
</div>
|
||||
<div class="mt-[155px]">
|
||||
<img class="w-[331px] h-[38px]" src="@/assets/image/zu733@2x.png" alt="">
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import {useAuth} from "@/store/auth/index.js"
|
||||
const {clickSendCode,telNum,code}= useAuth()
|
||||
const {clickSendCode,telNum,code,showTextCode ,clickLogin }= useAuth()
|
||||
</script>
|
||||
<template>
|
||||
<div class="box-border relative w-screen h-screen bg-center bg-no-repeat bg-cover bg-[url('@/assets/image/gdz53@2x.png')]" style="">
|
||||
@ -18,10 +18,10 @@ const {clickSendCode,telNum,code}= useAuth()
|
||||
<input v-model="code" v-no-space class="wrap2_2_1 pr-[61px]" placeholder="请输入验证码" type="text">
|
||||
</div>
|
||||
<div class="wrap2_3 bg-primary" @click="clickSendCode">
|
||||
获取验证码
|
||||
{{showTextCode}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap3">登录/注册</div>
|
||||
<div class="wrap3" @click="clickLogin">登录/注册</div>
|
||||
</div>
|
||||
<div class="content3 absolute top-0 left-0 bg-cover">
|
||||
<img class="w-[671px] h-[728px]" src="@/assets/image/gdz27.png" alt="">
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
<script setup>
|
||||
import {useAuth} from "@/store/auth/index.js";
|
||||
|
||||
const {clickApply,formData,genderOptions,clickAddWorks,removeWorks} =useAuth()
|
||||
import {ref} from 'vue'
|
||||
import {NUpload,NModal} from 'naive-ui'
|
||||
import {NUpload,NSelect} from 'naive-ui'
|
||||
const previewFileList=ref([
|
||||
{
|
||||
id: "react",
|
||||
@ -43,8 +46,12 @@ const handlePreview=()=>{
|
||||
<div class="flex items-center mt-18px">
|
||||
<div class="text-primary text-[14px] pl-5px w-[68px] font-bold">*性别</div>
|
||||
<div class="text-primary relative">
|
||||
<input class="pl-16px pr-16px w-[645px] h-[34px] focus:outline-none placeholder-text-primary placeholder-text-14px focus: bg-[#DCE5E9] border-none" placeholder="请输入宝贝姓名" type="text">
|
||||
<img src="@/assets/image/hsmr@2x.png" class="w-10px h-5px absolute right-19px top-50% translate-y-[-50%]" alt="">
|
||||
<n-select
|
||||
class="w-[645px] h-[34px] focus:outline-none placeholder-text-primary placeholder-text-14px focus: bg-[#DCE5E9] border-none"
|
||||
:options="genderOptions"
|
||||
/>
|
||||
<!-- <input class="pl-16px pr-16px w-[645px] h-[34px] focus:outline-none placeholder-text-primary placeholder-text-14px focus: bg-[#DCE5E9] border-none" placeholder="请输入宝贝姓名" type="text">
|
||||
<img src="@/assets/image/hsmr@2x.png" class="w-10px h-5px absolute right-19px top-50% translate-y-[-50%]" alt="">-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-#F5F5F5 pb-9px mt-16px w-[710px] flex flex-col">
|
||||
@ -100,6 +107,12 @@ const handlePreview=()=>{
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.n-base-selection-placeholder__inner){
|
||||
color: #2B69A1!important;
|
||||
}
|
||||
:deep(.n-base-selection-label){
|
||||
background: #DCE5E9!important;
|
||||
}
|
||||
:deep(.n-upload-file.n-upload-file--success-status.n-upload-file--image-card-type){
|
||||
|
||||
border:none;
|
||||
|
||||
@ -1,89 +1,91 @@
|
||||
<script setup>
|
||||
import { useAdaptation } from "@/utils/self-adaption.js";
|
||||
import {ref} from "vue";
|
||||
const { maxWidth } = useAdaptation([
|
||||
{ maxWidth: '375px' },
|
||||
{ maxWidth: '768px' }
|
||||
])
|
||||
import {useAuth} from "@/store/auth/index.js";
|
||||
const {clickApply,formData,genderOptions,clickAddWorks,removeWorks} =useAuth()
|
||||
const showPicker=ref(false)
|
||||
const columns=ref([
|
||||
{text:'男',value:0},
|
||||
{text:'女',value:1}
|
||||
])
|
||||
function onConfirm(){
|
||||
function onConfirm(data){
|
||||
formData.value.gender=data.selectedValues?.[0]
|
||||
showPicker.value=false
|
||||
}
|
||||
|
||||
</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="relative w-671px h-728px bg-cover">
|
||||
<div class="absolute top-0 left-0 w-671px h-728px bg-cover">
|
||||
<img src="@/assets/image/gdz27.png" alt="">
|
||||
</div>
|
||||
<div class="relative bottom-200px w-1270px h-145px">
|
||||
<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-256px">*姓名</div>
|
||||
<div class="w-1174px h-174px bg-[#DCE5E9] pl-61px">
|
||||
<input class="w-full h-full bg-transparent border-none placeholder-[#2B69A1] placeholder-text-72px focus:outline-none" placeholder="请输入宝贝姓名" type="text">
|
||||
<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-256px">*年龄</div>
|
||||
<div class="w-1174px h-174px bg-[#DCE5E9] pl-61px">
|
||||
<input class="w-full h-full bg-transparent border-none placeholder-[#2B69A1] placeholder-text-72px focus:outline-none" placeholder="请输入年龄" type="text">
|
||||
<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-256px">*性别</div>
|
||||
<div class="relative w-1174px h-174px bg-[#DCE5E9] pl-61px" @click="showPicker=true">
|
||||
<input readonly class="w-full h-full bg-transparent border-none placeholder-[#2B69A1] placeholder-text-72px focus:outline-none" placeholder="请选择性别" type="text">
|
||||
<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 flex-col items-center w-full pt-46px bg-[#F5F5F5]">
|
||||
<div class="flex w-full">
|
||||
<div class="w-256px font-bold text-[#2B69A1]">*作品1</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?'pb-102px border-b-1px border-b-[#D6E0E9] border-b-solid mb-97px':''}`" v-for="(item,index) of formData.works" :key="index">
|
||||
<div class="w-265px shrink-0 font-bold text-[#2B69A1]">*作品{{index+1}}</div>
|
||||
<div>
|
||||
<van-uploader>
|
||||
<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 class="flex items-end">
|
||||
<van-uploader>
|
||||
<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>
|
||||
</van-uploader>
|
||||
</div>
|
||||
|
||||
<div class="mt-41px text-61px text-[#2B69A1]">作品名称</div>
|
||||
<input class="mt-20px w-1174px h-174px bg-[#DCE5E9] pl-61px border-none placeholder-[#2B69A1] placeholder-text-72px focus:outline-none" placeholder="请输入作品名称" type="text">
|
||||
<input 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 class="w-379px h-174px bg-[#DCE5E9] pl-61px border-none placeholder-[#2B69A1] placeholder-text-72px focus:outline-none" placeholder="请输入" type="text">
|
||||
<div class="ml-51px text-[#2B69A1] text-72px">cm</div>
|
||||
<input v-no-space v-model="formData.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 class="w-379px h-174px bg-[#DCE5E9] pl-61px border-none placeholder-[#2B69A1] placeholder-text-72px focus:outline-none" placeholder="请输入" type="text">
|
||||
<div class="ml-51px text-[#2B69A1] text-72px">cm</div>
|
||||
<input v-no-space v-model="formData.width" 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 justify-center shadow-0-0-10px-rgba(0,0,0,0.1) relative">
|
||||
<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 class="mt-133px 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 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="columns"
|
||||
:columns="genderOptions"
|
||||
@cancel="showPicker = false"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user