"实现主题配置和作品集上传功能的优化"

master
xingyy 1 month ago
parent 2f615b36c1
commit ac4cb11292

Binary file not shown.

After

Width:  |  Height:  |  Size: 72 KiB

@ -25,18 +25,24 @@ app.directive('no-space', {
});
}
})
app.directive('number-only', {
// 注册全局自定义指令
app.directive('decimal', {
mounted(el) {
el.addEventListener('input', (event) => {
const { value } = event.target;
// 使用正则表达式限制输入格式
event.target.value = value.replace(/[^0-9.]/g, ''); // 只保留数字和小数点
if (event.target.value.indexOf('.') !== -1) {
// 如果已经包含小数点
const parts = event.target.value.split('.');
event.target.value = `${parts[0]}.${parts[1].slice(0, 1)}`; // 只保留一位小数
// 获取当前输入的值
let value = event.target.value;
// 匹配有效的数字(最多一位小数)
const regex = /^\d*\.?\d{0,1}$/;
if (!regex.test(value)) {
// 如果不匹配,将输入值设置为最后一次有效输入的值
event.target.value = el._lastValidValue || '';
} else {
// 如果匹配,保存该有效输入值
el._lastValidValue = value;
}
});
},
}
});
app.mount('#app');

@ -15,6 +15,11 @@ const routes = [
name: 'signup',
component: () => import('@/views/signup/index.vue')
},
{
path: '/result',
name: 'result',
component: () => import('@/views/result/index.vue')
},
{
path: '/confirm',
name: 'confirm',

@ -86,6 +86,10 @@ export const useAuth=createGlobalState(()=>{
item.picUrl=''
item.imgList=[]
}
const viewDetails=async ()=>{
await getDetail()
router.push('/details')
}
const clickApply=async ()=>{
const isValid = validateFormData();
if (!isValid){
@ -98,7 +102,8 @@ export const useAuth=createGlobalState(()=>{
const res=await competitionApply(data)
if(res.status===0){
message.success('报名成功')
router.push('/confirm')
router.push('/result')
}
}
let timer = null;
@ -109,7 +114,6 @@ export const useAuth=createGlobalState(()=>{
}
const res=await competitionWorks({telNum:telNum.value})
if (res.status===0){
console.log(res.data,'getDetail')
detailData.value=res.data
}
}
@ -178,6 +182,7 @@ export const useAuth=createGlobalState(()=>{
})*/
}
return {
viewDetails,
goBack,
openMask1,
deleteImg,

@ -20,6 +20,7 @@ const viewComponent = computed(() => {
return size1920;
}
})
localStorage.clear()
</script>
<template>

@ -20,7 +20,7 @@ const {clickSendCode,telNum,code,showTextCode ,clickLogin }= useAuth()
<div class="text-primary text-[19px] font-bold w-[88px]">验证码</div>
<div class="flex items-center justify-between w-[454px] grow-1">
<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 class="w-[160px] h-[45px] bg-primary text-#fff flex items-center justify-center shrink-0 text-19px" @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]" @click="clickLogin">/</div>
@ -34,5 +34,16 @@ const {clickSendCode,telNum,code,showTextCode ,clickLogin }= useAuth()
</template>
<style scoped lang="scss">
:deep(.n-upload-file.n-upload-file--success-status.n-upload-file--image-card-type){
border-radius: 5px;
border:none;
width: 393px;
height: 188px;
}
:deep(.n-upload-trigger.n-upload-trigger--image-card){
border-radius: 5px;
border:none;
width: 393px;
height: 188px;
}
</style>

@ -0,0 +1,31 @@
<script setup>
import { computed } from 'vue';
import { useWindowSize } from '@vueuse/core';
import { useAuth } from '@/store/auth/index.js';
import size375 from '@/views/result/size375/index.vue';
import size768 from '@/views/result/size768/index.vue';
import size1440 from '@/views/result/size1440/index.vue';
import size1920 from '@/views/result/size1920/index.vue';
const { clickSendCode } = useAuth();
const { width } = useWindowSize();
const viewComponent = computed(() => {
const viewWidth = width.value;
if (viewWidth <= 450) {
return size375;
} else if (viewWidth <= 1100) {
return size768;
} else if (viewWidth <= 1500) {
return size1440;
} else if (viewWidth <= 1920) {
return size1920;
}
})
localStorage.clear()
</script>
<template>
<component @sendCode="clickSendCode" :is="viewComponent" />
</template>
<style scoped lang="scss">
</style>

@ -0,0 +1,11 @@
<script setup>
</script>
<template>
</template>
<style scoped lang="scss">
</style>

@ -0,0 +1,11 @@
<script setup>
</script>
<template>
</template>
<style scoped lang="scss">
</style>

@ -0,0 +1,36 @@
<script setup>
import {useAuth} from "@/store/auth/index.js";
const {viewDetails} =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')] flex items-center flex-col">
<div class="mt-143px">
<img src="@/assets/image/zu3311@2x.png" class="w-1074px h-178px" alt="">
</div>
<div class="top-0 absolute left-0px">
<img src="@/assets/image/gdz27.png" class="w-671px h-728px" alt="">
</div>
<div class="absolute bottom-0 right-0">
<img class="w-1170px h-557px" src="@/assets/image/dfdf4@2x.png" alt="">
</div>
<div class="absolute bottom-75px translate-x-[-50%] left-50%">
<img class="w-620px h-71px" src="@/assets/image/zu733@2x.png" alt="">
</div>
<div class="mt-[123px] w-[1608px] h-[2678px] bg-[url('@/assets/image/zu3186@2x.png')] bg-cover bg-no-repeat flex flex-col items-center">
<div class="mt-394px">
<img src="@/assets/image/gdzd57@2x.png" class="w-829px h-1044px" alt="">
</div>
<div class="text-primary text-72px mt-51px">
提交成功
</div>
<div class="w-866px h-200px bg-contain bg-no-repeat bg-[url('@/assets/image/zu3189@2x1.png')] flex-center text-white text-82px shrink-0 mt-[236px]" @click="viewDetails"></div>
</div>
</div>
</template>
<style scoped lang="scss">
</style>

@ -0,0 +1,36 @@
<script setup>
import {useAuth} from "@/store/auth/index.js";
const {viewDetails} =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')] flex items-center flex-col">
<div class="mt-303px">
<img src="@/assets/image/zu3311@2x.png" class="w-525px h-87px" alt="">
</div>
<div class="top-0 absolute left-40px">
<img src="@/assets/image/gdz47@2x.png" class="w-610px h-668px" alt="">
</div>
<div class="absolute bottom-0 right-0">
<img class="w-1170px h-557px" src="@/assets/image/dfdf4@2x.png" alt="">
</div>
<div class="absolute bottom-75px translate-x-[-50%] left-50%">
<img class="w-620px h-71px" src="@/assets/image/zu733@2x.png" alt="">
</div>
<div class="mt-[90px] w-[1173px] h-[1489px] bg-[url('@/assets/image/zu3327@2x.png')] bg-cover bg-no-repeat flex flex-col items-center">
<div class="mt-333px">
<img src="@/assets/image/gdzd57@2x.png" class="w-405px h-510px" alt="">
</div>
<div class="text-primary text-35px mt-25px">
提交成功
</div>
<div class="w-600px h-98px bg-contain bg-no-repeat bg-[url('@/assets/image/dfdf1.png')] flex-center text-white text-40px shrink-0 mt-[333px]" @click="viewDetails"></div>
</div>
</div>
</template>
<style scoped lang="scss">
</style>

@ -1,6 +1,9 @@
<script setup>
import {ref} from 'vue'
import {NUpload,NModal} from 'naive-ui'
import {NUpload, NModal, NSelect} from 'naive-ui'
import {useAuth} from "@/store/auth/index.js";
const {formData,genderOptions,clickAddWorks,removeWorks,goConfirm,deleteImg,afterRead} =useAuth()
const previewFileList=ref([
{
id: "react",
@ -21,9 +24,7 @@ const handlePreview=()=>{
<div class="absolute top-0 left-[193px]">
<img src="@/assets/image/gdz47@2x.png" class="w-[316px] h-[391px]" alt="">
</div>
<div class="absolute bottom-[40px] left-[50%] transform translate-x-[-50%]">
<img class="w-[620px] h-[71px]" src="@/assets/image/zu733@2x.png" alt="">
</div>
<div class="">
<img class="w-[280px] h-[46px] mt-[176px] mb-[33px]" src="@/assets/image/zu3311@2x.png" alt="">
</div>
@ -31,66 +32,78 @@ const handlePreview=()=>{
<div class="flex items-center">
<div class="text-primary text-[19px] pl-5px w-[68px] font-bold">*姓名</div>
<div class="text-primary">
<input class="pl-16px pr-16px w-[860px] h-[45px] focus:outline-none placeholder-text-primary placeholder-text-19px focus: bg-[#DCE5E9] border-none" placeholder="请输入宝贝姓名" type="text">
<input v-no-space v-model="formData.name" class="pl-16px pr-16px w-[860px] 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-24px">
<div class="text-primary text-[19px] w-[68px] pl-5px font-bold">*年龄</div>
<div class="text-primary">
<input class="pl-16px pr-16px w-[827px] h-[45px] focus:outline-none placeholder-text-primary placeholder-text-19px focus: bg-[#DCE5E9] border-none" placeholder="请输入年龄" type="text">
<input v-no-space v-model="formData.age" class="pl-16px pr-16px w-[827px] h-[45px] focus:outline-none placeholder-text-primary placeholder-text-19px focus: bg-[#DCE5E9] border-none" placeholder="请输入年龄" type="number">
</div>
<div class="text-primary text-19px ml-16px"></div>
</div>
<div class="flex items-center mt-23px">
<div class="text-primary text-[19px] pl-5px w-[68px] font-bold">*性别</div>
<div class="text-primary relative">
<input readonly class="pl-16px pr-16px w-[860px] h-[45px] focus:outline-none placeholder-text-primary placeholder-text-19px focus: bg-[#DCE5E9] border-none " placeholder="请选择宝贝性别" type="text">
<img src="@/assets/image/hsmr@2x.png" class="w-13px h-7px absolute right-19px top-50% translate-y-[-50%]" alt="">
<div class="text-primary">
<n-select
v-model:value="formData.gender"
placeholder="请选择宝贝性别"
class="w-861px"
:options="genderOptions.map(x=>{
return {
label:x.text,value:x.value
}
})"
/>
</div>
</div>
<div class="bg-#F5F5F5 pb-12px mt-21px w-[936px] flex flex-col grow-1">
<div class="flex">
<div class="text-primary text-19px w-[68px] font-bold mt-20px shrink-0 pl-5px ">*作品1</div>
<div class="bg-#F5F5F5 pb-12px mt-21px w-[936px] flex flex-col grow-1 overflow-y-auto">
<div :class="`flex w-full ${formData.works?.length>1&&index+1!==formData.works?.length?'border-b-1px border-b-[#D6E0E9] border-b-solid mb-27px pb-27px':''}` " v-for="(item,index) of formData.works" :key="index">
<div class="text-primary text-19px w-[68px] font-bold mt-20px shrink-0 pl-5px ">*作品1</div>
<div class="mt-10px">
<n-upload
action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:default-file-list="previewFileList"
list-type="image-card"
:max="1"
>
<div class="w-393px h-188px bg-#D6E0E9">
<div class="flex items-center flex-col justify-center w-100% h-100% rounded-5px">
<img src="@/assets/image/zu3264@2x.png" class="w-23px h-23px" alt="">
<div class="text-19px text-primary mt-11px">上传作品</div>
</div>
</div>
</n-upload>
<div class="flex items-end">
<n-upload
action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
:default-file-list="previewFileList"
list-type="image-card"
:max="1"
>
<div class="w-393px h-188px bg-#D6E0E9">
<div class="flex items-center flex-col justify-center w-100% h-100% rounded-5px ">
<img src="@/assets/image/zu3264@2x.png" class="w-23px h-23px" alt="">
<div class="text-19px text-primary mt-11px">上传作品</div>
</div>
</div>
</n-upload>
<img src="@/assets/image/sc@2x.png" v-if="formData.works?.length>1" @click="removeWorks(index)" class="w-22px h-24px ml-8px" alt="">
</div>
<div class="mt-11px text-16px text-[#2B69A1]">作品名称</div>
<input class="pl-16px pr-16px w-[827px] h-[45px] mt-5px focus:outline-none placeholder-text-primary placeholder-text-19px focus: bg-[#DCE5E9] border-none" placeholder="请输入作品名称" type="text">
<input v-no-space v-model="item.workName" class="pl-16px pr-16px w-[827px] h-[45px] mt-5px focus:outline-none placeholder-text-primary placeholder-text-19px focus: bg-[#DCE5E9] border-none" placeholder="请输入作品名称" type="text">
<div class="flex justify-between mt-11px mb-5px">
<div class="flex flex-col">
<div class="text-16px text-[#2B69A1]">长度</div>
<div class="flex items-center mt-[5px]">
<input class="pl-16px pr-16px w-372px h-[45px] mt-5px focus:outline-none placeholder-text-primary placeholder-text-19px focus: bg-[#DCE5E9] border-none" placeholder="请输入作品名称" type="text">
<input v-decimal v-no-space v-model="item.length" class="pl-16px pr-16px w-372px h-[45px] mt-5px focus:outline-none placeholder-text-primary placeholder-text-19px focus: bg-[#DCE5E9] border-none" placeholder="请输入作品名称" type="number">
<div class="ml-13px text-[#2B69A1] text-19px mr-21px">cm</div>
</div>
</div>
<div class="flex flex-col">
<div class="text-16px text-[#2B69A1]">宽度</div>
<div class="flex items-center mt-[5px]">
<input class="pl-16px pr-16px w-372px h-[45px] mt-5px focus:outline-none placeholder-text-primary placeholder-text-19px focus: bg-[#DCE5E9] border-none" placeholder="请输入作品名称" type="text">
<input v-decimal v-no-space v-model="item.wide" class="pl-16px pr-16px w-372px h-[45px] mt-5px focus:outline-none placeholder-text-primary placeholder-text-19px focus: bg-[#DCE5E9] border-none" placeholder="请输入作品名称" type="number">
<div class="ml-13px text-[#2B69A1] text-19px">cm</div>
</div>
</div>
</div>
</div>
</div>
<div class=" w-48px h-48px mt-15px bg-[#336699] rounded-full flex items-center justify-center shadow-0-0-10px-rgba(0,0,0,0.1) relative mx-auto">
<div class=" w-48px h-48px mt-15px bg-[#336699] rounded-full flex items-center justify-center shadow-0-0-10px-rgba(0,0,0,0.1) relative mx-auto shrink-0" @click="clickAddWorks">
<div class="absolute w-23px h-3px bg-white"></div>
<div class="absolute w-3px h-23px bg-white"></div>
</div>
</div>
<div class="mt-15px w-320px h-52px bg-cover bg-no-repeat bg-[url('@/assets/image/dfdf1.png')] flex justify-center items-center text-white text-21px">
<div class="mt-15px w-320px h-52px bg-cover bg-no-repeat bg-[url('@/assets/image/dfdf1.png')] flex justify-center items-center text-white text-21px shrink-0">
确定
</div>
</div>
@ -101,12 +114,28 @@ const handlePreview=()=>{
</template>
<style scoped lang="scss">
:deep(.n-base-selection-input__content){
color:#2B69A1 ;
}
:deep(.n-base-selection-placeholder__inner){
color: rgb(131, 162, 195)!important;
}
:deep(.n-base-selection-label){
height: 45px;
background: #DCE5E9!important;
}
:deep(.n-upload-file.n-upload-file--success-status.n-upload-file--image-card-type){
border:none;
width: 393px;
height: 188px;
}
:deep(.n-upload){
border:none;
width: 393px;
height: 188px;
}
:deep(.n-upload-trigger.n-upload-trigger--image-card){
border:none;
width: 393px;

@ -26,7 +26,7 @@ const {formData,genderOptions,clickAddWorks,removeWorks,goConfirm,deleteImg,afte
<div class="flex items-center mt-[45px]">
<div class="text-primary text-[35px] w-[165px] font-bold">*年龄</div>
<div class="text-primary text-[35px]">
<input v-no-space v-model="formData.age" class="pl-30px pr-[30px] w-[853px] h-[85px] focus:outline-none placeholder-text-primary placeholder:text-[35px] focus: bg-[#DCE5E9] focus:text-[35px] border-none" placeholder="请输入年龄" type="text">
<input v-no-space v-model="formData.age" class="pl-30px pr-[30px] w-[853px] h-[85px] focus:outline-none placeholder-text-primary placeholder:text-[35px] focus: bg-[#DCE5E9] focus:text-[35px] border-none" placeholder="请输入年龄" type="number">
</div>
</div>
<div class="flex items-center mt-18px">
@ -34,7 +34,7 @@ const {formData,genderOptions,clickAddWorks,removeWorks,goConfirm,deleteImg,afte
<div class="text-primary text-[35px]">
<n-select
v-model:value="formData.gender"
placeholder="请选择性别"
placeholder="请选择宝贝性别"
class="w-[853px] h-[85px] focus:outline-none placeholder-text-primary placeholder-text-35px focus: bg-[#DCE5E9] border-none"
:options="genderOptions.map(x=>{
return {
@ -42,13 +42,11 @@ const {formData,genderOptions,clickAddWorks,removeWorks,goConfirm,deleteImg,afte
}
})"
/>
<!-- <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 overflow-y-auto mt-38px w-[1065px] flex items-center flex-col grow-1">
<div :class="`flex w-full ${formData.works?.length>1&&index+1!==formData.works?.length?'border-b-1px border-b-[#D6E0E9] border-b-solid mb-50px pb-50px':''}` " v-for="(item,index) of formData.works" :key="index">
<div class="text-primary text-[35px] w-[165px] font-bold mt-38px">*作品{{index+1}}</div>
<div class="text-primary text-[35px] w-[165px] font-bold mt-38px pl-20px">*作品{{index+1}}</div>
<div class="mt-20px">
<div class="flex items-end">
<van-uploader v-model="item.imgList" @delete="deleteImg(item)" :max-count="1" :after-read="(e)=>{afterRead(e,item)}">
@ -67,14 +65,14 @@ const {formData,genderOptions,clickAddWorks,removeWorks,goConfirm,deleteImg,afte
<div class="flex flex-col">
<div class="text-30px text-[#2B69A1]">长度</div>
<div class="flex items-center mt-[10px]">
<input v-number-only v-no-space v-model="item.length" class="text-35px w-330px h-85px bg-[#DCE5E9] pl-30px pr-[30px] border-none placeholder-[#2B69A1] placeholder-text-35px focus:outline-none" placeholder="请输入" type="number">
<input v-decimal v-no-space v-model="item.length" class="text-35px w-330px h-85px bg-[#DCE5E9] pl-30px pr-[30px] border-none placeholder-[#2B69A1] placeholder-text-35px focus:outline-none" placeholder="请输入" type="number">
<div class="ml-25px text-[#2B69A1] text-35px">cm</div>
</div>
</div>
<div class="flex flex-col">
<div class="text-30px text-[#2B69A1]">宽度</div>
<div class="flex items-center mt-[10px]">
<input v-number-only v-no-space v-model="item.wide" class="w-330px h-85px bg-[#DCE5E9] pl-30px pr-[30px] border-none placeholder-[#2B69A1] placeholder-text-35px text-35px focus:outline-none" placeholder="请输入" type="number">
<input v-decimal v-no-space v-model="item.wide" class="w-330px h-85px bg-[#DCE5E9] pl-30px pr-[30px] border-none placeholder-[#2B69A1] placeholder-text-35px text-35px focus:outline-none" placeholder="请输入" type="number">
<div class="ml-25px text-[#2B69A1] text-35px">cm</div>
</div>
</div>
@ -86,7 +84,7 @@ const {formData,genderOptions,clickAddWorks,removeWorks,goConfirm,deleteImg,afte
<div class="absolute w-6px h-43px bg-white"></div>
</div>
</div>
<div class="mt-43px w-600px h-98px bg-cover bg-no-repeat bg-[url('@/assets/image/dfdf1.png')] flex-center text-white text-40px shrink-0" @click="goConfirm">
<div class="mt-43px w-600px h-98px bg-contain bg-no-repeat bg-[url('@/assets/image/dfdf1.png')] flex-center text-white text-40px shrink-0" @click="goConfirm">
确定
</div>
</div>

Loading…
Cancel
Save