xingyy
/
kidArtExpo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

123

Browse Source
master
xingyy 1 month ago
parent eb1f168c10
commit c9522f8e24
7 changed files with 161 additions and 51 deletions
Show Stats Download Patch File Download Diff File

15
src/api/auth/index.js
Unescape Escape View File

@ -1,9 +1,22 @@
import request from '@/service/index.js' import request from '@/service/index.js'
export const sendCode = (data) => { export const sendCode = (data) => {
console.log('schildrenchildrenendCode')
return request({ return request({
url: '/api/children/competition/sendCode', url: '/api/children/competition/sendCode',
method: 'POST', method: 'POST',
data, 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 535 B

85
src/store/auth/index.js
Unescape Escape View File

@ -1,12 +1,76 @@
import {ref} from 'vue' import {ref,computed} from 'vue'
import {createGlobalState,useStorage} from '@vueuse/core' 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 {message} from "@/utils/message.js"
import { useRouter } from 'vue-router';
export const useAuth=createGlobalState(()=>{ export const useAuth=createGlobalState(()=>{
const router = useRouter();
const token = useStorage('token', '', localStorage) const token = useStorage('token', '', localStorage)
const telNum =ref('') const telNum =ref('')
const code=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 ()=>{ const clickSendCode=async ()=>{
if (isCountingDown.value) return;
if (!code.value){
message.warning('请输入验证码')
return
}
if (!telNum.value){ if (!telNum.value){
message.warning('请输入手机号') message.warning('请输入手机号')
return return
@ -16,10 +80,27 @@ export const useAuth=createGlobalState(()=>{
} }
const res=await sendCode(data) const res=await sendCode(data)
if (res.status===0){ if (res.status===0){
countdown.value = 60;
isCountingDown.value = true;
message.success('发送成功') message.success('发送成功')
timer = setInterval(() => {
if (countdown.value > 0) {
countdown.value -= 1;
} else {
clearInterval(timer);
isCountingDown.value = false;
}
}, 1000);
} }
} }
return { return {
removeWorks,
clickAddWorks,
genderOptions,
formData,
clickApply,
clickLogin,
showTextCode,
code, code,
clickSendCode, clickSendCode,
telNum, telNum,

11
src/views/login/size1440/index.vue
Unescape Escape View File

@ -1,5 +1,6 @@
<script setup> <script setup>
import {useAuth} from "@/store/auth/index.js"
const {clickSendCode,telNum,code,showTextCode ,clickLogin }= useAuth()
</script> </script>
<template> <template>
@ -12,17 +13,17 @@
<div class="flex items-center"> <div class="flex items-center">
<div class="text-primary text-[19px] font-bold w-[88px]">手机号</div> <div class="text-primary text-[19px] font-bold w-[88px]">手机号</div>
<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> </div>
<div class="flex items-center mt-[45px]"> <div class="flex items-center mt-[45px]">
<div class="text-primary text-[19px] font-bold w-[88px]">验证码</div> <div class="text-primary text-[19px] font-bold w-[88px]">验证码</div>
<div class="flex items-center justify-between w-[454px] grow-1"> <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"> <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">获取验证码</div> <div class="w-[160px] h-[45px] bg-primary text-#fff flex items-center justify-center shrink-0" @click="clickSendCode">{{ showTextCode }}</div>
</div> </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>
<div class="mt-[155px]"> <div class="mt-[155px]">
<img class="w-[331px] h-[38px]" src="@/assets/image/zu733@2x.png" alt=""> <img class="w-[331px] h-[38px]" src="@/assets/image/zu733@2x.png" alt="">

6
src/views/login/size375/index.vue
Unescape Escape View File

@ -1,6 +1,6 @@
<script setup> <script setup>
import {useAuth} from "@/store/auth/index.js" import {useAuth} from "@/store/auth/index.js"
const {clickSendCode,telNum,code}= useAuth() const {clickSendCode,telNum,code,showTextCode ,clickLogin }= useAuth()
</script> </script>
<template> <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=""> <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"> <input v-model="code" v-no-space class="wrap2_2_1 pr-[61px]" placeholder="请输入验证码" type="text">
</div> </div>
<div class="wrap2_3 bg-primary" @click="clickSendCode"> <div class="wrap2_3 bg-primary" @click="clickSendCode">
获取验证码 {{showTextCode}}
</div> </div>
</div> </div>
<div class="wrap3">登录/注册</div> <div class="wrap3" @click="clickLogin">登录/注册</div>
</div> </div>
<div class="content3 absolute top-0 left-0 bg-cover"> <div class="content3 absolute top-0 left-0 bg-cover">
<img class="w-[671px] h-[728px]" src="@/assets/image/gdz27.png" alt=""> <img class="w-[671px] h-[728px]" src="@/assets/image/gdz27.png" alt="">

19
src/views/signup/size1920/index.vue
Unescape Escape View File

@ -1,6 +1,9 @@
<script setup> <script setup>
import {useAuth} from "@/store/auth/index.js";
const {clickApply,formData,genderOptions,clickAddWorks,removeWorks} =useAuth()
import {ref} from 'vue' import {ref} from 'vue'
import {NUpload,NModal} from 'naive-ui' import {NUpload,NSelect} from 'naive-ui'
const previewFileList=ref([ const previewFileList=ref([
{ {
id: "react", id: "react",
@ -43,8 +46,12 @@ const handlePreview=()=>{
<div class="flex items-center mt-18px"> <div class="flex items-center mt-18px">
<div class="text-primary text-[14px] pl-5px w-[68px] font-bold">*性别</div> <div class="text-primary text-[14px] pl-5px w-[68px] font-bold">*性别</div>
<div class="text-primary relative"> <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"> <n-select
<img src="@/assets/image/hsmr@2x.png" class="w-10px h-5px absolute right-19px top-50% translate-y-[-50%]" alt=""> 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> </div>
<div class="bg-#F5F5F5 pb-9px mt-16px w-[710px] flex flex-col"> <div class="bg-#F5F5F5 pb-9px mt-16px w-[710px] flex flex-col">
@ -100,6 +107,12 @@ const handlePreview=()=>{
</template> </template>
<style scoped lang="scss"> <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){ :deep(.n-upload-file.n-upload-file--success-status.n-upload-file--image-card-type){
border:none; border:none;

76
src/views/signup/size375/index.vue
Unescape Escape View File

@ -1,89 +1,91 @@
<script setup> <script setup>
import { useAdaptation } from "@/utils/self-adaption.js";
import {ref} from "vue"; import {ref} from "vue";
const { maxWidth } = useAdaptation([ import {useAuth} from "@/store/auth/index.js";
{ maxWidth: '375px' }, const {clickApply,formData,genderOptions,clickAddWorks,removeWorks} =useAuth()
{ maxWidth: '768px' }
])
const showPicker=ref(false) const showPicker=ref(false)
const columns=ref([ function onConfirm(data){
{text:'男',value:0}, formData.value.gender=data.selectedValues?.[0]
{text:'女',value:1} showPicker.value=false
])
function onConfirm(){
} }
</script> </script>
<template> <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="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="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=""> <img src="@/assets/image/gdz27.png" alt="">
</div> </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=""> <img src="@/assets/image/zu733@2x.png" alt="">
</div> </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 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="flex items-center w-full mt-80px px-31px">
<div class="text-72px font-bold text-[#2B69A1] w-256px">*姓名</div> <div class="text-72px font-bold text-[#2B69A1] w-265px">*姓名</div>
<div class="w-1174px h-174px bg-[#DCE5E9] pl-61px"> <div class="w-1150px 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"> <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> </div>
<div class="flex items-center w-full mt-80px px-31px"> <div class="flex items-center w-full mt-80px px-31px">
<div class="text-72px font-bold text-[#2B69A1] w-256px">*年龄</div> <div class="text-72px font-bold text-[#2B69A1] w-265px">*年龄</div>
<div class="w-1174px h-174px bg-[#DCE5E9] pl-61px"> <div class="w-1150px 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"> <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> </div>
<div class="flex items-center w-full mt-87px px-31px"> <div class="flex items-center w-full mt-87px px-31px">
<div class="text-72px font-bold text-[#2B69A1] w-256px">*性别</div> <div class="text-72px font-bold text-[#2B69A1] w-265px">*性别</div>
<div class="relative w-1174px h-174px bg-[#DCE5E9] pl-61px" @click="showPicker=true"> <div class="w-1150px 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"> <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=""> <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> </div>
<div class="flex flex-col items-center w-full pt-46px bg-[#F5F5F5]"> <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"> <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-256px font-bold text-[#2B69A1]">*作品1</div> <div class="w-265px shrink-0 font-bold text-[#2B69A1]">*作品{{index+1}}</div>
<div> <div>
<van-uploader> <div class="flex items-end">
<div class="w-410px h-410px bg-[#D6E0E9] rounded-20px flex flex-col items-center justify-center"> <van-uploader>
<img class="w-88px h-88px" src="@/assets/image/zu3264@2x.png" alt=""> <div class="w-410px h-410px bg-[#D6E0E9] rounded-20px flex flex-col items-center justify-center">
<div class="mt-36px text-[#2B69A1] text-72px">上传作品</div> <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>
</van-uploader> </div>
<div class="mt-41px text-61px text-[#2B69A1]">作品名称</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 justify-between mt-41px">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="text-61px text-[#2B69A1]">长度</div> <div class="text-61px text-[#2B69A1]">长度</div>
<div class="flex items-center"> <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"> <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-51px text-[#2B69A1] text-72px">cm</div> <div class="ml-30px text-[#2B69A1] text-72px">cm</div>
</div> </div>
</div> </div>
<div class="flex flex-col"> <div class="flex flex-col">
<div class="text-61px text-[#2B69A1]">宽度</div> <div class="text-61px text-[#2B69A1]">宽度</div>
<div class="flex items-center"> <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"> <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-51px text-[#2B69A1] text-72px">cm</div> <div class="ml-30px text-[#2B69A1] text-72px">cm</div>
</div> </div>
</div> </div>
</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-88px h-6px bg-white"></div>
<div class="absolute w-6px h-88px bg-white"></div> <div class="absolute w-6px h-88px bg-white"></div>
</div> </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>
</div> </div>
<van-popup v-model:show="showPicker" round position="bottom"> <van-popup v-model:show="showPicker" round position="bottom">
<van-picker <van-picker
:columns="columns" :columns="genderOptions"
@cancel="showPicker = false" @cancel="showPicker = false"
@confirm="onConfirm" @confirm="onConfirm"
/> />

Write Preview
Loading…
Cancel
Save