From 25e4fc06c6313f07cb31f6ce2d36e22efbd28dba Mon Sep 17 00:00:00 2001 From: zhangyahui Date: Mon, 2 Feb 2026 13:41:51 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/CFile.svg | 1 + src/assets/images/award/upload_video_icon.png | Bin 0 -> 7837 bytes src/views/AwardPage/apply.vue | 249 ++++++++++++------ src/views/AwardPage/components/Success.vue | 2 +- 4 files changed, 168 insertions(+), 84 deletions(-) create mode 100644 src/assets/icons/CFile.svg create mode 100644 src/assets/images/award/upload_video_icon.png diff --git a/src/assets/icons/CFile.svg b/src/assets/icons/CFile.svg new file mode 100644 index 00000000..e824de6e --- /dev/null +++ b/src/assets/icons/CFile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/award/upload_video_icon.png b/src/assets/images/award/upload_video_icon.png new file mode 100644 index 0000000000000000000000000000000000000000..dbc1ed68a699418a7275b5e026a45659567f8107 GIT binary patch literal 7837 zcmai3Wm6nXvt2Z}yDkKIaQEPZ-~$m=}4g>dZL z1xYI?5I@Y!SRIMVj9FzFYlJ@(e=Ipf%R}9RY)I)zLDf0G-=i(7=+tF9ax9UY7GIZv z!6lhxr2g{|b^Uhu7!tdL46xr=EYL%f43!!7-k0m?E$5B${cY`LQ}H!D3?*PA#@N|Daf-4PIcB0?$( zRv1ovCq00t2aWNJcDjE>wr-gqjmvVfyQHK9JmknmLM5OOI_HES;G{dhwgx?@>AGKS zsU3i4b+cavgB?+~S^@0X7ZKb&zLh~GrY!^K-nC9!eGAK7Q#1h0FPfO&;_WlZJnc6c zt>~MJIGcS2KukXbY3Z;Q|0;HsWBKou&EZmi|_?=lt$=H<&(ol-G5IN!W z-k(ouTF%zn8ju&A;V03N^)_i*JF%|}TLaz4Z|3E`uw1FIl zUWu9I3WtIIhDjH=+?`2kGb(td6D!JD z_sw8a9tvVFAFp#m3vPy&l^H7C0&e5$6f1o>9}>CPh-1sdN0Jqpwi}EQp7silNhc@GCB` zfl%VsM-13_z`kOK!k*Twhzg5%@=|1*IvKiYEwS0Qg)04$p6dj0|KFjEpmjY~%fEX# zkorj5Rymf-&z4H=p+b#4Cru(^S)oF{`I|wqkI(0thi>GJ4uZK zo!OlqA3s0cpRH+P<^XUe21>eU$j^ z$f&a3TsD`(ozpQZO~AC1wT8iIkAsnm3O9yD3=e;WIgQ9@Zf>SDYMTS_cPvxUhgohf z`+)D8TbfKH*vLOJ*Ks_POtHfb=;`ShfZ=@Ps5TVgV?8I1X>W&}tn({=*EPX+ooQ;% zy)CU5c*7G}D(M!6G5@7G3sXy2CA?>^C@1)8XXulb;45(SWwN9kjlcw&1iC{iNuUG&PVdt$I{Xge&bD2;aplF?IN8| zR@smsp3?tui|(*mz)rQse4+VeTWhVFA>N!{F~^@?)@&fPk2q?RRd>@gLd%zGQk<715W+u%np zL`Tn#n4VEY`nc5g%PKoQj%s#G{M2*7_ttjf1iW2m@YuektYZtXk5h?wMwF9)(FRGOXO**Kk+}NC1`kp{T?34g*+4l zK7z{c#w@j?Jeea5CDM!eF}`j-FH4-N6lJBaZmKF($69#u0Kw5Pf*Y|patxBsdm{XQ5UH48}pbZNt(12LT@A)?FGq)Gt3)mKeQshgd zAngEwf1$#NEA-)_rZm&~KJk%}pq{zJ6*XIiL2VSmxCGpBsf=40pk}0ld88 zTtzq7r2A7HXX^es)1mz~LDuwE3dZ5)Vp2YbO5Iwc-Z9-~JL_JwanO`Z_TovmcaS&* z?voxJ3?h1(;=8!|5kTryJWJK*+f2?nCSyqbYqcFutn6<@2i5QK!DGwItsMkVI+)VO z_7j+I)nqDEHddm-m`hVz4-{k%CMUf_+(unb9=~{GTUL`9tCy9p$fN@vRrmQzhcgi3ql++KI^mOKNXSh}6fE}x-vc_f!Ml(CeMyQN=) zIf3EL*c6;uMapI3Dcwc9Wp1tYmq0!&y#3C*McoUD=!dXlHiw;zDTxQ*98FW%c;V)9>@YpWCvWxvq+Yi2KBl|qV zAHorf{cSl)_6@f+4^x80!Rh&_0DSmg7|0$%h7QGdyR704KYgyHxUYJ*!Jf#ziLg4) zqX|FE!Sp+nRP69LJKpH>dEokauc|b$b-nr>Bpq+SJngL&skFjNotq?U%ceghmq`3I zYIrQgUG#QZ(y-rV9t`bks6P{A2&!_pPPI-{ZF_$9hHGi;C@()U{uOi)WG}HUy!+@O zkd^f*@51lx>40G*%Rm>|FJH*8Oc}#~q*Y<{nbvvYmy+jblQw0muL6y#O_hqw-q9Za zWcj{Ft$hFQgfELY^fD2V0#46V)|ETaJDnc?%qUmVK%m?c*K_lpHVZsWKx@&jFbRkdVlr2g6{R+INQ4XfJW&X3%?%CSd5G9PMbU!`N1abwiHSl0A7jqz9G zfO&Ks43QVM6lU#u6tWpvlT8*>3>`6|>7$-p;%y4C5uj@)#lxjAvj1J^*`ur%k-4{h_^e`jk2b78^wn; zrrbnq%x90th5UK|7BSldQJr2L4nfhNSGZ7-SY3gBXzI(&xI2=rQZm5CbA&!o-kB+R zNd+j(F83v@^7GvJRVe0&Owwy_3aP073&tsZzP+LDM?x7&;;*<-fPP|y&=t%tiI^~v zZzsKOi*25KHq@Ub_>aJV_93uH-PYC?0}(vd%Ds`qJ{TE!lIhs}gp1_=Q-CwZcCX|U z{h8o9-GdFlWTKb>?mH2g|I*K++2VSuw?39$uo0CJ2|pBJww!LJxUQP(OuJsx4e4`4 z@kAb$T}H-rjD8Xh%Ax_9qEV~X956w|5+_h?Ku;xpW>csbA!DDyT0SFguG$CD8c=6r zWoNe=#I(kj^y6ndE12bgT4Di(LnvUYFSKPMjbjJ?>8+K*`H(AS$M?)U(O&T+a}zqK zIYd@;USjG!2XDh24F5!zLT{^xEr;;5>2pyv(0<{TJEJ~sk}_o7u(YJo=1E=QgzK!s zfe*Zh%FgU7z@+Lk5nBVoQ7gPhE#z7-uLh9dMyX3?SvcXVNmeUBY<26JOJUA*2S7H7 zZnr^jpZ+*@oHhF>V0$v+oAKX+^5QCdW3IC0{TM!FKlm!rkB&Uw^{7V1cZjl@yB%51 zAR2;ZE#$Rx$1|w-p}D;?Ei;fK?-#D0(Z8&VK7oF)PNRNm(KE`$&y+$LtjMC2^JiCHn| zl-}PO@>2=oCibn*D+ZL)#p;E;-djInf~Y)9Gj!w;h?ApJ^i(Q)yD?-Yx4XJiJoH85 z49FMqjt{ti-JG=Hpo9OG8&F`v-m5DrqHeinVd=i4FNYR9`{F7m&TfU8T7!q{MG~sj zGlPPBTV(Uq2~m=z21xdIq(xH5nNw-BD1<47ITMQ>Q>p%OmXqjG1`BISvekHPN6_mS zjqft3?q~kA*875Yz3{oFRMCxc*jI__yG)|)Tu%Dv2vTJ3o-zYR^0rQQ%AkFQulWF4 z%yPRDD>MicQdo>=4^RgGM>_ZE{8iBHz1Q&ld1x4_vJ12G z$x!So+ECqunqViM7@JSYRdC_&epH|2aMK9R-!Z;-%f|nh)XZ(CQL-=+G+zf2EEmq%O+WHL%09r7sbBji z)yQrFtlkWfUpx@fVfQ|-Zmj^b_qz*rUz4Rpb=m!nk|9agzcuIzs#OSI5kJmd<9}Dt zb@(Wru6n#fZ91BJXH9d*4`!mr399@g*ZfTxph*YY<9_jTNN9ibpl3k<7A(*b@cu^c z(%U~UFzFKs~8#IYO#RBFgC(>G$*!%(?g%_d&jT&M@Z&+15srr zT+`F@VQN@CHGBTzxyW75Qv&oBGmtaoG&dGvoY3-VgX74_Te$J;qXrdv#D+k?r>jl2 zWOql0GlkfJo3aA7w@AzuFH=oR22chgsS5QcJoYZX;sfKR*h1F?#3H<6#XyrxR=5ba zFI8^^zz_I#;G@Jgq>A@!p;4Efv$%rOAcRQIIqN4Ps^yw4)GVzdFE1a>vzv}|Op`ot z#Rj36puy5RRt-mZA{z6kG0_O?3vT2< zMJ{Ihoz3@r?*JlSpSQ-x+J4e%OsF2Yx`xrQxoHY}4iORc=K!w33>vND(hCf8@M#6J z1TAtYdPsQk{zpAphE@#ihHhLmKck!62|*P8ML@6daRp0SFb^r7$xSK<3GUS4>2*LH zaRIgy89eVYZ*24;;a|PhkSh11CCyF)Wq*`QNI}m#_fm9uReyp`4lJE>(xEcZe&>m_ z@;O2Mwa-`%%RprIaG&5_@Afo2W<>ri*a&mTPK^?(ZHg+%t&q932esRxSoR{NV*m70aneu5EA4|Rvva|?ehGM4W@NW^7uMAa}f^mO& zG?@u{m;gBUCejwlW3#UR#Tl4~$R8YzLC9v%iA*uTGFZH1;-V<(evD@xr3(ILDo{r< zbyh0s75L^UuH%-UZRyx~H8}U5vLViCD0(fy`9VkPRQ<&!3`Q^vPNa+++G{z(=FeG` zwvWGFn3yKlK?$Lb#u$)tvEFvWFl*V^KcJ2J?5Ee&co?C#(q-`SFk$c~U@}YKFU;@~ z;vNgnDzY_etK0-z_oInWAZzDV{#s#cXg5llZny8#XTUk;MCg=IQZ_mA=X2BVsNm9C zt6kOK?qI*_1V^++^C^g2t?a9j$z0TF1MmnVBPqGeMXWg+e)6@6#*cqZ>;Ewx@icG)1^Bac-CdxBS|YJeN& zr!{VY>34r3J5PIX_p2Y#;~T$MjOBMj_rK<(w^~k_^O|8OdI~G0W@4;bA28=X&oGW7 zZYoptzK; zhJc6hQr$xVKnt9=2lImDN~{QL3biT*UC?jKePBB{>=mR=Kn+#S@i}k1P|@W_h;%84 z_?ex$DxMfSI8yqDyT_T#=ZqkiB83;rm7|>KC)}-Koz878B9F!@8iP$xZ#G(LA$oQR zerBK{h#|R7HfG;emHwo)0S)^&Rvs=+pVnK%cgr3`r`SHiUmY^M-tfUg*;<#(T?lS{ z$7B^%c1D9!9P?b$*L}D9_Z$78qw_e+-z$fnt)f6RQ6cK&`vAZfc*7B4tx%5z1pku# zTZQK!3A2JhO(H<*?Lg@})>lDe4LF&!orPolWN<={*mrhDNs{kqteD1b{KxqjH_-wY zU?7#^wfR~V*=Q!|pR;eqkx;O|zmN4Nk2s19&kD$M*V8a10v);~U7#EqP>Y>IW3#ur zYICch>6wknN0#A5jIK)l@1cz0p9PW5%ZvsRxSlwqgOoeP0>6V!ke;FHpLd@5kRL(G zw$1i;*A4fjJF#zk?Se8aZ&qikO-$xKMO_eiZ8_X1yTkZ*9-sSDgTOC{<|8Jhvfbtz z?e2VP8JrqhAUzU2ueH+bi&{%BHDoSoerWoPZgxcr z@PVs*DMT7q@YwkZzPAdocPaK+;=fe1qHL8ss=-;|4G%$H`XE`-LLdD~iTj2&SP{*< z*kBaFJI_?Uqh6P#_JzJbnmH`um2M}T;;v}h*4oh;ZSZIUIwJI{z=I8%rdZc_vGXFG z1WP)Jmtt}lDTW7BGs=T_dTnQ|9)+^e(`1z|JC`d%)2KG^jptks%E~s#)ed3x)u@TV zDH1aWxs?W8&(-)$Kc+_^@dn;LpAFyZ(qpZr9Znqq-=>0d9;p$ZU+wMfc}1gfmaKc^ z_QI{jnlh=}T*8U2K9Tpp^mHNWHLZ4$SrR5JUq-OfR1hvk?7{Cm@BKmn4ZH{D$^z%8 z&afeAae|aXcVP5Hg!qWVHI5I$O|I)Wvu8j(>Adv2E)2Eyfw7Tr?3G^V$*ucFAM}R> z(ycWAie}u|L<);;Nf4aF@3an#?p-(TN5)^!K~qD^#E1bejr&(H@aaXOXZN_C_)eU& zz|A14*Pl%6t=PE$1^2iCveu>rPTPGHJ?l zIn~>@y0Ut248Cf)^P#PkQuR){X49k>la2F(T_%-DV8?5Hs&s~T;v z9`BWEz7R#vz-r_jvDD{KY3|`XiTV(XQkVPpRP9GRopu9hx;!^OD8L-l^ncHqzu3X=_|w^nnbNO9(1{AvY%3dQgZ;#z8OyKbJv?wW^2=!u+WpvGH@1wA^GbAM?wI=}h ziJ+u-&d<-|ITyetiz7reThfr9ShU^sgO6@NiqotwIRF2|WQd(2mBB~tF zL$l6r-}mUqtDM^nMw9%5MEIws#_{;6`i86Gj1qS&(_e0q$v2YSqdFm6Sq&26yR|!h z$qIxVdhbePA!$6|+!kTmg>%6OIgJR(0tZ5c>>)Hx@`4!^Gfv~93R~XvifFrYOUfMok{DslMxz@c_}v^Uj^eQZW@m0^ z7IIw%@*zT1;?GPVMfKrcw>#pn8t1&VihN;=vnKd;eknZWq6k=r$s4{tE1l_nry%^7 z#idL>5FHPOkp8$jRcwHkt-wO0**3*c1RZ0znNnQifpc)BFq>0lU79ppy|(F_;|ZNe z^AOGCPTB!lszQB7!LG^p-;RJ=b675ga%!=XTjmNi@+pL@Y1`mnD|AGfUHZTD+kEWj z0jio?6eH{6Tg#i+F4^Zq^5-DL~rWYz)#Lr z@9`#Cg{DNp`92-k1b7h+sLTA->tNKF!>>_X#h+uw#IoKz5g+JbPNLw z3z|E+kF1<|m|E(Jb$fGXH}U8p*8e0x zgU1$3ye77)DgshnJqxVvskA7gdw=>2zlwvEC)kVSWJ&nZ!L7L7cy&8KOs(MKV@7Db z9)+S;o0 literal 0 HcmV?d00001 diff --git a/src/views/AwardPage/apply.vue b/src/views/AwardPage/apply.vue index 9ed29bf7..ad2bea7b 100644 --- a/src/views/AwardPage/apply.vue +++ b/src/views/AwardPage/apply.vue @@ -13,7 +13,10 @@
AiDA Users Only
- +
-
+

Click to upload or drag and drop

PDF file, max 20MB

+
-
-
+ class="progress-bar-container" + v-if="pdfUploadStatus === 'uploading'" + > +
+
@@ -209,23 +232,19 @@ :validate-trigger="[]" label="How will you use AiDA in your design process?" > -
+
@@ -233,25 +252,48 @@

Video file (MP4, MOV), 1080p, max 100MB

+
-
-
+ class="progress-bar-container" + v-if="videoUploadStatus === 'uploading'" + > +
+
@@ -342,7 +384,7 @@ import { ref, onUnmounted, onMounted, computed } from 'vue' import { debounce } from 'lodash-es' import type { Rule } from 'ant-design-vue/es/form' - import { message } from 'ant-design-vue' + import { message, Upload } from 'ant-design-vue' import { Https } from '@/tool/https' import { useRoute } from 'vue-router' import type { UploadChangeParam } from 'ant-design-vue' @@ -359,7 +401,7 @@ const route = useRoute() const isCompleted = ref(false) - const hasValidEmail = ref(false) + const readOnly = computed(() => { if (route.query.id && !hasValidEmail.value) { return true @@ -369,7 +411,7 @@ }) const formRef = ref(null) const form = ref({ - email: '', + email: 'yhzhang@aidlab.hk', firstName: '', lastName: '', gender: '', @@ -383,7 +425,10 @@ designDescription: '', pdfPath: '', videoPath: '', - secureToken: null + secureToken: '' + }) + const hasValidEmail = computed(() => { + return !!form.value.secureToken }) // 验证码输入组件引用 @@ -620,7 +665,6 @@ console.log('coderes', res) form.value.secureToken = res.data.secureToken - hasValidEmail.value = true message.success('Verification successful!') showModal.value = false @@ -675,7 +719,7 @@ const beforeUploadFile = (type: FileType, file: File) => { if (!hasValidEmail.value) { message.error('Please verify your email first') - return false + return Upload.LIST_IGNORE } let maxSize: number let allowedExtensions: string[] @@ -693,7 +737,7 @@ allowedMimeTypes = ['video/mp4', 'video/quicktime'] errorMessage = 'Please upload a MP4 or MOV file only.' } else { - return false + return Upload.LIST_IGNORE } // 验证文件类型 @@ -705,18 +749,18 @@ if (!isValidType) { message.error(errorMessage) // 从文件列表中移除 - if (type === 'pdf') { - const index = pdfList.value.findIndex(item => item.uid === file.uid) - if (index > -1) { - pdfList.value.splice(index, 1) - } - } else { - const index = videoList.value.findIndex(item => item.uid === file.uid) - if (index > -1) { - videoList.value.splice(index, 1) - } - } - return false // 阻止上传 + // if (type === 'pdf') { + // const index = pdfList.value.findIndex(item => item.uid === file.uid) + // if (index > -1) { + // pdfList.value.splice(index, 1) + // } + // } else { + // const index = videoList.value.findIndex(item => item.uid === file.uid) + // if (index > -1) { + // videoList.value.splice(index, 1) + // } + // } + return Upload.LIST_IGNORE } // 验证文件大小 @@ -726,21 +770,21 @@ `File size exceeds ${sizeLimit} limit. Please upload a smaller file.` ) // 从文件列表中移除 - if (type === 'pdf') { - const index = pdfList.value.findIndex(item => item.uid === file.uid) - if (index > -1) { - pdfList.value.splice(index, 1) - } - } else { - const index = videoList.value.findIndex(item => item.uid === file.uid) - if (index > -1) { - videoList.value.splice(index, 1) - } - } - return false // 阻止上传 + // if (type === 'pdf') { + // const index = pdfList.value.findIndex(item => item.uid === file.uid) + // if (index > -1) { + // pdfList.value.splice(index, 1) + // } + // } else { + // const index = videoList.value.findIndex(item => item.uid === file.uid) + // if (index > -1) { + // videoList.value.splice(index, 1) + // } + // } + return Upload.LIST_IGNORE } - return true // 允许上传 + return true } // PDF文件上传前验证 @@ -822,18 +866,22 @@ } const completeChunkUpload = async (type: FileType, file: File) => { - const endpoint = - type === 'pdf' - ? Https.httpUrls.uploadPDFComplete - : Https.httpUrls.uploadVideoComplete + try { + const endpoint = + type === 'pdf' + ? Https.httpUrls.uploadPDFComplete + : Https.httpUrls.uploadVideoComplete - return Https.axiosPost(endpoint, { - uploadId: chunkUploadState[type].uploadId, - email: form.value.email, - fileName: file.name, - totalSize: file.size, - secureToken: form.value.secureToken - }) + return Https.axiosPost(endpoint, { + uploadId: chunkUploadState[type].uploadId, + email: form.value.email, + fileName: file.name, + totalSize: file.size, + secureToken: form.value.secureToken + }) + } catch (error) { + console.log('complete错误', error) + } } type FileType = 'pdf' | 'video' @@ -922,10 +970,12 @@ isUploadingPdf.value = false uploadProgressPdf.value = 0 pdfUploadStatus.value = 'error' + pdfList.value = [] } else { isUploadingVideo.value = false uploadProgressVideo.value = 0 videoUploadStatus.value = 'error' + videoList.value = [] } } } @@ -940,6 +990,18 @@ return handleUploadFile(option, 'video') } + const handleRemoveFile = (type: 'video' | 'pdf') => { + if (type === 'pdf') { + form.value.pdfPath = '' + pdfUploadStatus.value = 'idle' + uploadProgressPdf.value = 0 + } else if (type === 'video') { + form.value.videoPath = '' + videoUploadStatus.value = 'idle' + uploadProgressVideo.value = 0 + } + } + const conditionsList = ref([ { check: false, @@ -1238,9 +1300,10 @@ .upload-container { margin-top: 6rem; - + position: relative; :deep(.ant-upload-drag) { height: 32rem; + border-radius: 0.8rem; .ant-upload-btn { padding: 0; @@ -1276,9 +1339,13 @@ display: flex; align-items: center; justify-content: center; - border: 0.2rem solid #d5d5d5; + border: 0.2rem dashed #d5d5d5; border-radius: 0.8rem; background-color: #fafafa; + position: absolute; + top: 0; + left: 0; + width: 100%; .uploading-text { color: #585858; @@ -1306,7 +1373,20 @@ } } } - + .custom-upload-list { + padding: 0.4rem 1rem; + margin-top: 1rem; + &:hover { + background-color: #f5f5f5; + border-radius: 0.4rem; + } + .c-svg { + width: fit-content; + } + .delete-file { + cursor: pointer; + } + } .conditions { margin-top: 12rem; @@ -1462,9 +1542,12 @@ diff --git a/src/views/AwardPage/components/Success.vue b/src/views/AwardPage/components/Success.vue index 4c42df4c..aee43d9e 100644 --- a/src/views/AwardPage/components/Success.vue +++ b/src/views/AwardPage/components/Success.vue @@ -35,7 +35,7 @@ return { icon: expiredIcon, title: 'Application Deadline Passed', - desc: 'The submission deadline for AIDA Global Fashion Award 2026 has ended.\nWe are no longer accepting new applications. ' + desc: 'The submission deadline for AiDA Global Fashion Award 2026 has ended.\nWe are no longer accepting new applications. ' } } else { return {