123

src/api/auth/index.js

@@ -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,
+    })
+}

src/store/auth/index.js

@@ -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,

src/views/login/size1440/index.vue

@@ -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="">

src/views/login/size375/index.vue

@@ -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="">

src/views/signup/size1920/index.vue

@@ -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;

src/views/signup/size375/index.vue

@@ -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"
       />