Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
67128aa9 by zhangmeng
Options

大师课

1 parent 0552625c
Inline Side-by-side
Showing 3 changed files with 103 additions and 77 deletions
src/viewsPc/components/masterClass.vue
<template>
<el-dialog
v-model="show" :close-on-click-modal="false" :title="title" append-to-body center
class="pcloginpop"
close-icon="CircleClose" destroy-on-close
:width="isMobile ? '90%' : '600px'"
v-model="show" :close-on-click-modal="false" :title="title" append-to-body center
class="pcloginpop"
close-icon="CircleClose" destroy-on-close
:width="isMobile ? '90%' : '600px'"
>
<div class="boxInvitation pd20">
<el-steps :active="activeStep" align-center class="mb20">
<el-step :title="language==0?'报名须知':'Notice'" />
<el-step :title="language==0?'填写信息':'Information'" />
<el-step :title="language==0?'选择课程':'Courses'" />
<el-step :title="language==0?'报名须知':'Notice'"/>
<el-step :title="language==0?'填写信息':'Information'"/>
<el-step :title="language==0?'选择课程':'Courses'"/>
</el-steps>
<div v-if="activeStep==0">
<div class="mb60 xzRich" style="max-height: 50vh;overflow: auto">
......@@ -26,12 +26,20 @@
<!-- The age limit for Youth Session: Born between 1st Jan, 2006 and 31st Dec., 2009.<br/>-->
<!-- The age limit for Juvenile Session: Born after 1 Jan., 2010.<br/>-->
Training Camp Venue：Nanjing International Exhibition and Convention Center<br>
Address：No. 300 Jiangdong Zhong Road, Jianye District, Nanjing City, Jiangsu Province. Nanjing International Exhibition and Conference Center, Room 302, 303, 402, 403.<br>
Address：No. 300 Jiangdong Zhong Road, Jianye District, Nanjing City, Jiangsu Province. Nanjing International
Exhibition and Conference Center, Room 302, 303, 402, 403.<br>
Schooltime:July 13th - July 14th, 2026.<br>
Check-in：July 12, 2026 13:30 - 17:0.<br>
Contact Person：Mr.Zhu<br>
Tel：+86 010-67183764<br>
Registration Deadline：<span style="text-decoration: underline">2026-07-10</span><br>
<div>
<el-image
src="@/assets/images/schedule.png"
:preview-src-list="['@/assets/images/schedule.png']"
show-progress/>
</div>
</div>
</div>
<div v-loading="loading" class="text-center">
......@@ -48,11 +56,11 @@
</div>
<div v-if="activeStep==1">
<el-form
ref="iformRef" :label-width="language==0?'80px':'160px'" :model="form" :rules="rules"
label-position="right"
ref="iformRef" :label-width="language==0?'80px':'160px'" :model="form" :rules="rules"
label-position="right"
>
<el-form-item :label="language==0?'姓名':'Name'" prop="name" required>
<el-input v-model="form.name" />
<el-input v-model="form.name"/>
</el-form-item>
<el-form-item :label="language==0?'性别':'Gender'" prop="gender" required>
<el-radio-group v-model="form.gender">
......@@ -63,31 +71,31 @@
<el-form-item :label="language==0?'国籍':'Nationality'" prop="nationality" required>
<el-select v-model="form.nationality" filterable style="width: 100%;">
<el-option
v-for="item in countrys" :key="item.id" :label="language==0?item.name:item.enName"
:value="item.id"
v-for="item in countrys" :key="item.id" :label="language==0?item.name:item.enName"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item :label="language==0?'出生日期':'Date of Birth'" prop="birth" required>
<el-date-picker
v-model="form.birth"
format="YYYY-MM-DD" placeholder="YYYY-MM-DD"
style="width: 100%;" type="date" value-format="YYYY-MM-DD"
v-model="form.birth"
format="YYYY-MM-DD" placeholder="YYYY-MM-DD"
style="width: 100%;" type="date" value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item :label="language==0?'手机号':'Phone number'" prop="phone" required>
<el-input v-model="form.phone" />
<el-input v-model="form.phone"/>
</el-form-item>
<el-form-item :label="language==0?'邮箱':'Email'" prop="email" required>
<el-input v-model="form.email" type="email" />
<el-input v-model="form.email" type="email"/>
</el-form-item>
<el-form-item :label="language==0?'证件号':'National license No.'" prop="passportNo" required>
<el-input v-model="form.passportNo" @blur="checkCard" />
<el-input v-model="form.passportNo" @blur="checkCard"/>
</el-form-item>
<el-form-item :label="language==0?'有效证件':'Passport Copy'" prop="passportCopy" required>
<image-upload
v-model="form.passportCopy" :button-text="language==0?'上传':'Upload'" :is-show-tip="false"
:limit="1"
v-model="form.passportCopy" :button-text="language==0?'上传':'Upload'" :is-show-tip="false"
:limit="1"
/>
</el-form-item>
<!-- <el-form-item :label="language==0?'抵达日期':'Date of Arrival'" required prop="arrival">-->
......@@ -105,9 +113,9 @@
<!-- />-->
<!-- </el-form-item>-->
<el-form-item :label="language==0?'备注':'Remark '">
<el-input v-model="form.remark" rows="3" type="textarea" />
<el-input v-model="form.remark" rows="3" type="textarea"/>
</el-form-item>
<div class="text-center">
<el-button plain round size="large" type="primary" @click="setActive(0)">
{{ language == 0 ? '上一步' : 'PREV' }}
......@@ -138,8 +146,9 @@
<el-checkbox-group v-model="form.courseId" size="large" @change="courseChange">
<div v-for="c in courseList" class="mb20">
<el-checkbox
:disabled="(form.courseId?.length>=2&&form.courseId.indexOf(c.id)==-1)||disChoose||(form.nationality==240&&c.viewStateCn == 0)||(form.nationality!=240&&c.viewStateEn == 0)" :value="c.id" border
class="w100"
:disabled="(form.courseId?.length>=2&&form.courseId.indexOf(c.id)==-1)||disChoose||(form.nationality==240&&c.viewStateCn == 0)||(form.nationality!=240&&c.viewStateEn == 0)"
:value="c.id" border
class="w100"
>
<div v-if="language==0" style="display: flex">
<div> {{ c.name }}{{ c.name.indexOf('青年') > -1 ? '(年龄在15岁~18岁)' : '(年龄在14岁以下)' }}</div>
......@@ -151,31 +160,31 @@
}}{{ c.nameEn.indexOf('Youth') > -1 ? '(Between the age 15 and 18)' : '(Under the age of 14)' }}
</div>
</div>
<el-tag
v-if="(c.viewStateCn == 0)||(c.viewStateEn == 0)"
class="ml20"
effect="dark" type="danger"
v-if="(c.viewStateCn == 0)||(c.viewStateEn == 0)"
class="ml20"
effect="dark" type="danger"
>{{ language == 0 ? '已报满' : 'Already full' }}
</el-tag>
</el-checkbox>
</div>
</el-checkbox-group>
<div class="text-center">
<el-button plain round size="large" type="primary" @click="setActive(1)">
{{ language == 0 ? '上一步' : 'PREV' }}
</el-button>
<el-button
v-if="!disChoose" class="btn-lineG w200px" round size="large" type="primary"
@click="submit"
v-if="!disChoose" class="btn-lineG w200px" round size="large" type="primary"
@click="submit"
>
{{ language == 0 ? '提交' : 'SUBMIT' }}
</el-button>
</div>
</div>
</div>
</div>
......@@ -184,16 +193,16 @@
</template>
<script setup>
import { useStorage } from '@vueuse/core/index'
import { getCurrentInstance, watch ,onMounted,ref} from 'vue'
import { nextTick } from '@vue/runtime-core'
import { ElMessage, ElMessageBox } from 'element-plus'
import { addInvitation, countryList } from '@/apiPc/match'
import {useStorage} from '@vueuse/core/index'
import {getCurrentInstance, watch, onMounted, ref} from 'vue'
import {nextTick} from '@vue/runtime-core'
import {ElMessage, ElMessageBox} from 'element-plus'
import {addInvitation, countryList} from '@/apiPc/match'
import ImageUpload from '@/components/ImageUpload'
import { masterClassList, getByCard, submitMasterApply, getMasterApply, delByCard } from '@/apiPc/common'
import {masterClassList, getByCard, submitMasterApply, getMasterApply, delByCard} from '@/apiPc/common'
import dayjs from 'dayjs'
const { proxy } = getCurrentInstance()
const {proxy} = getCurrentInstance()
const language = useStorage('language', 0)
const form = ref({})
const show = ref(false)
......@@ -207,25 +216,25 @@ const loading = ref(false)
const cptId = ref('')
const isMobile = ref(false)
const rules = ref(
{
nationality: [{ required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose' }],
name: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
phone: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
gender: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请选择' : 'Please choose' }],
email: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
birth: [{ required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose' }],
passportNo: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
passportCopy: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请上传' : 'Please Upload' }],
arrival: [{ required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose' }],
departure: [{ required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose' }]
})
{
nationality: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'}],
name: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter'}],
phone: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter'}],
gender: [{required: true, trigger: 'blur', message: language.value == 0 ? '请选择' : 'Please choose'}],
email: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter'}],
birth: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'}],
passportNo: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter'}],
passportCopy: [{required: true, trigger: 'blur', message: language.value == 0 ? '请上传' : 'Please Upload'}],
arrival: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'}],
departure: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'}]
})
const open = (params) => {
console.log(params)
show.value = true
title.value = language.value == 0 ? '2026年亚洲青少年体育舞蹈公益课' : '2026 Asian Youth Sports Dance Charity Class'
cptId.value = params.cptId
form.value={
gender:'0'
form.value = {
gender: '0'
}
getCourse()
}
......@@ -236,7 +245,7 @@ onMounted(() => {
checkMobile()
window.addEventListener('resize', checkMobile)
})
defineExpose({ open })
defineExpose({open})
// watch(show, (value) => {
// if (!value) {
// form.value = {
......@@ -254,7 +263,7 @@ defineExpose({ open })
function getCourse() {
// '1777256058082189313'
loading.value = true
masterClassList({ cptId: cptId.value }).then(res => {
masterClassList({cptId: cptId.value}).then(res => {
courseList.value = res.data
loading.value = false
})
......@@ -268,7 +277,7 @@ function setActive(n) {
activeStep.value = n
// 在移动设备上，切换步骤时滚动到顶部
if (isMobile.value) {
window.scrollTo({ top: 0, behavior: 'smooth' })
window.scrollTo({top: 0, behavior: 'smooth'})
}
}
......@@ -277,19 +286,19 @@ function courseChange(e) {
}
function checkApplyCourse(n) {
getMasterApply({ card: form.value.passportNo }).then(res => {
getMasterApply({card: form.value.passportNo}).then(res => {
if (res.data?.length > 0) {
form.value.courseId = []
for (var n of res.data) {
form.value.courseId.push(n.itemId)
}
ElMessageBox.confirm(
language.value == 0 ? '您已提交过信息，是否更新？' : 'You have submitted the information, do you want to update?',
language.value == 0 ? '提示' : 'Tips', {
confirmButtonText: language.value == 0 ? '是' : 'Confirm',
cancelButtonText: language.value == 0 ? '否' : 'Cancel',
type: 'warning'
}).then(() => {
language.value == 0 ? '您已提交过信息，是否更新？' : 'You have submitted the information, do you want to update?',
language.value == 0 ? '提示' : 'Tips', {
confirmButtonText: language.value == 0 ? '是' : 'Confirm',
cancelButtonText: language.value == 0 ? '否' : 'Cancel',
type: 'warning'
}).then(() => {
// 删除原记录
delByCard(form.value.passportNo).then(res => {
form.value.courseId = []
......@@ -324,7 +333,7 @@ function to2() {
function checkCard() {
getByCard({ card: form.value.passportNo }).then(res => {
getByCard({card: form.value.passportNo}).then(res => {
if (res.data) {
form.value = res.data
} else {
......@@ -353,12 +362,12 @@ const submit = () => {
return
}
ElMessageBox.confirm(
language.value == 0 ? '确认提交吗？' : 'Are you sure to submit?',
language.value == 0 ? '提示' : 'Tips', {
confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
type: 'warning'
}).then(() => {
language.value == 0 ? '确认提交吗？' : 'Are you sure to submit?',
language.value == 0 ? '提示' : 'Tips', {
confirmButtonText: language.value == 0 ? '确定' : 'Confirm',
cancelButtonText: language.value == 0 ? '取消' : 'Cancel',
type: 'warning'
}).then(() => {
// form.value.cptId = cptId.value
if (Array.isArray(form.value.passportCopy)) {
form.value.passportCopy = form.value.passportCopy[0].url
......@@ -370,7 +379,7 @@ const submit = () => {
ElMessage.success(language.value == 0 ? '提交成功' : 'Successfully!')
showR.value = true
}).catch(() => {
})
})
}
......
src/viewsPc/index_en.vue
......@@ -47,7 +47,7 @@
<!-- 赛事直播-->
Live Qrcode
</a>
<a class=" btn2" @click.stop="popMaster">Junior &Youth Camp REGISTER
<a class=" btn2" @click.stop="popMaster">2026 Asia Training Camp
</a>
</div>
</div>
......@@ -101,7 +101,7 @@
<a class=" btn2-phone" style="z-index: 999999" @click.stop="liveQrcodeShowBtn">
Live Qrcode
</a>
<a class=" btn2-phone" @click.stop="popMaster">Junior &Youth Camp REGISTER
<a class=" btn2-phone" @click.stop="popMaster">2026 Asia Training Camp
</a>
</div>
</div>
......@@ -129,7 +129,7 @@
v-if="matchData.isCourseView==1" class="zn-btn ml20 btn-q forPc"
style="font-size: 15px;margin-right: 20px" @click="popMaster"
>
Junior &Youth Camp REGISTER
2026 Asia Training Camp
<el-icon>
<Edit />
</el-icon>
......@@ -1454,6 +1454,21 @@ function applyInvitation() {
}
.btn2-phone {
cursor: pointer;
padding: 10px 20px;
font-size: 14px;
align-items: center;
overflow: hidden;
background: url(/src/assets/dance/time_bg.png) no-repeat center;
background-size: 100% 100%;
border-radius: 20px;
display: flex;
flex-wrap: nowrap;
color: #fff;
}
@media (max-width: 767px) {
.yaoQing {
img {
......@@ -1475,4 +1490,6 @@ function applyInvitation() {
}
}
}
</style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!