feat: 回显表单

src/tool/https.js

@@ -472,7 +472,8 @@ export const Https = {
 		uploadVideo: '/api/global-award/uploads/video/chunk', // 上传video
 		uploadPDFComplete: '/api/global-award/uploads/pdf/complete', // 上传pdf完成
 		uploadVideoComplete: '/api/global-award/uploads/video/complete', // 上传video完成
-		submitForm: '/api/global-award/contestants/save' // 提交表单
+		submitForm: '/api/global-award/contestants/save', // 提交表单
+		getContestantByID: '/api/global-award/contestants/' // 获取表单
 	},
 
 	axiosGet(url, config) {

src/views/AwardPage/apply.vue

@@ -329,16 +329,19 @@
 </template>
 
 <script setup lang="ts">
-	import { ref, onUnmounted } from 'vue'
+	import { ref, onUnmounted, onMounted } from 'vue'
 	import { debounce } from 'lodash-es'
 	import type { Rule } from 'ant-design-vue/es/form'
 	import { message } from 'ant-design-vue'
+	import { Https } from '@/tool/https'
+	import { useRoute } from 'vue-router'
 	import type { UploadChangeParam } from 'ant-design-vue'
 	import VerifycationCodeInput from './components/VerificationCodeInput.vue'
-	import { Https } from '@/tool/https'
 	import UploadStatus from './components/UploadStatus.vue'
 	import Success from './components/Success.vue'
 
+	const route = useRoute()
+
 	const isCompleted = ref(false)
 
 	const hasValidEmail = ref(false)
@@ -562,6 +565,8 @@
 			},
 			fullData: true
 		}).then(res => {
+			console.log('coderes', res)
+
 			form.value.secureToken = res.data.secureToken
 
 			message.success('Verification successful!')
@@ -581,7 +586,10 @@
 			.validate()
 			.then(res => {
 				console.log(res)
-				Https.axiosPost(Https.httpUrls.submitForm, form.value)
+				Https.axiosPost(Https.httpUrls.submitForm, form.value).then(res => {
+					console.log('res', res)
+					isCompleted.value = true
+				})
 			})
 			.catch(err => {
 				console.log(err)
@@ -900,7 +908,18 @@
 		}
 	])
 
-	// 组件卸载时清理定时器
+	const handleEchoForm = () => {
+		Https.axiosGet(Https.httpUrls.getContestantByID + route.query.id).then(res => {
+			console.log('获取到的值---', res)
+			Object.assign(form.value, res)
+		})
+	}
+
+	onMounted(() => {
+		if (route.query.id) {
+			handleEchoForm()
+		}
+	})
 	onUnmounted(() => {
 		clearCountdown()
 	})
@@ -924,7 +943,7 @@
 		width: 2rem;
 		height: 1rem;
 	}
-	.apply-container{
+	.apply-container {
 		min-height: calc(100% -18rem);
 		background-color: #f5f5f5;
 	}

src/views/AwardPage/container.vue

@@ -7,7 +7,10 @@
 					class="logo"
 				/>
 			</div>
-			<div class="header-right flex align-center">
+			<div
+				class="header-right flex align-center"
+				@click="handleBtnClick"
+			>
 				<div class="text">{{ btnText }}</div>
 				<img
 					src="@/assets/images/award/arrow.png"
@@ -89,7 +92,11 @@
 </template>
 
 <script setup lang="ts">
-	import { ref, computed } from 'vue'
+	import { ref, computed, watch } from 'vue'
+	import { useRoute, useRouter } from 'vue-router'
+
+	const route = useRoute()
+	const router = useRouter()
 
 	const showQRcode = ref(false)
 	const handleCloseQRcode = () => {
@@ -106,6 +113,30 @@
 			return 'Back to Introduction'
 		}
 	})
+
+	watch(
+		() => route.path,
+		val => {
+			console.log('val', val)
+
+			if (val.includes('apply')) {
+				btnType.value = 'form'
+			} else {
+				btnType.value = 'index'
+			}
+			console.log('btnType', btnType.value)
+		},
+		{
+			immediate: true
+		}
+	)
+	const handleBtnClick = () => {
+		if (btnType.value === 'index') {
+			router.push('/award/apply')
+		} else {
+			router.push('/award/index')
+		}
+	}
 </script>
 
 <style lang="less" scoped>