Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
2696ddab by 华明祺
Options

no message

1 parent 94d02189
Inline Side-by-side
Showing 4 changed files with 296 additions and 181 deletions
src/viewsPc/booking/hotelDetail.vue
......@@ -18,12 +18,16 @@
<a v-show="form?.label?.split('，').length>4">{{ language == 0 ? '更多' : 'MORE' }} ></a>
</div>
<div class="info">
<el-icon><Clock /></el-icon>
<el-icon>
<Clock/>
</el-icon>
<span class="mr10">{{ language == 0 ? '入住时间' : 'Check-in' }}：{{ form?.checkInTime }}</span>
<span>{{ language == 0 ? '离店时间' : 'Check-out' }}：{{ form?.checkOutTime }}</span>
</div>
<div class="info esp">
<el-icon><MapLocation /></el-icon>
<el-icon>
<MapLocation/>
</el-icon>
<span>{{ form?.addName }}</span>
</div>
<div v-if="form?.introduction" class="info pointer">
......@@ -43,13 +47,16 @@
<el-row :gutter="20">
<el-col :span="10">
<div class="imgbox hotelImg">
<el-image :src="fillImgUrl(form?.photos?.split(',')[0])" fit="cover" :preview-src-list="form?.photos?.split(',')"/>
<el-image :src="fillImgUrl(form?.photos?.split(',')[0])" fit="cover"
:preview-src-list="form?.photos?.split(',')"/>
</div>
</el-col>
<el-col :span="14">
<el-row class="h100" :gutter="20">
<el-col :span="8" class="oddmb" v-for="(p,index) in form?.photos?.split(',').slice(1,7)">
<div class="imgbox hotelImg"><el-image :src="fillImgUrl(p)" fit="cover"/></div>
<div class="imgbox hotelImg">
<el-image :src="fillImgUrl(p)" fit="cover"/>
</div>
</el-col>
</el-row>
</el-col>
......@@ -61,22 +68,24 @@
<ul>
<li>
{{ language == 0 ? '房型选择' : 'Available Rooms' }}
<span style="margin-left: 100px">
<span style="margin-left: 100px" @click="initTime">
<el-date-picker
@change="getDaysBetween"
v-model="hotTime"
type="daterange"
:disabled-date="disabledDateRZ"
:placeholder="language==0?'选择日期':'Select date'"
format="YYYY-MM-DD"
:clearable="false"
value-format="YYYY-MM-DD"/>
@change="getDaysBetween"
v-model="hotTime"
type="daterange"
:disabled-date="disabledDateRZ"
:placeholder="language==0?'选择日期':'Select date'"
format="YYYY-MM-DD"
:clearable="false"
value-format="YYYY-MM-DD"
/>
</span>
</li>
</ul>
</div>
<div>
<div v-for="(r,index) in roomList" :key="index" class="room" v-show="language==0?r.roomPrice>0:r.roomPriceEn>0">
<div v-for="(r,index) in roomList" :key="index" class="room"
v-show="language==0?r.roomPrice>0:r.roomPriceEn>0">
<el-row :gutter="30" align="middle">
<el-col :span="4">
<div class="roomImg">
......@@ -87,34 +96,37 @@
<h3 class="name">{{ r.roomType }}</h3>
<el-row :gutter="10">
<el-col :span="8">{{ r.area }}m²</el-col>
<el-col :span="8" v-show="r.windowFlag==1"> {{ language==0?'有窗':'With windows' }}</el-col>
<el-col :span="8" v-show="r.windowFlag==0"> {{ language==0?'无窗':'Windowless' }}</el-col>
<el-col :span="8" v-show="r.bathroomFlag==1"> {{ language==0?'热水洗浴':'Shower' }}</el-col>
<el-col :span="8" v-show="r.windowFlag==1"> {{ language == 0 ? '有窗' : 'With windows' }}</el-col>
<el-col :span="8" v-show="r.windowFlag==0"> {{ language == 0 ? '无窗' : 'Windowless' }}</el-col>
<el-col :span="8" v-show="r.bathroomFlag==1"> {{ language == 0 ? '热水洗浴' : 'Shower' }}</el-col>
<!-- <text v-show="r.bathroomFlag==0"> </text> -->
<el-col :span="8" v-show="r.addBedFlag==1"> {{ language==0?'允许加床':'Extra bed' }} </el-col>
<el-col :span="8" v-show="r.addBedFlag==1"> {{ language == 0 ? '允许加床' : 'Extra bed' }}</el-col>
<el-col :span="8" v-if="r.breakfastNum&&r.breakfastNum > '0'">
{{ r.breakfastNum }}{{ language==0?'份早餐':' breakfasts' }}
{{ r.breakfastNum }}{{ language == 0 ? '份早餐' : ' breakfasts' }}
</el-col>
<el-col :span="8" v-else>{{ language==0?'无早餐':'No breakfast' }}</el-col>
<el-col :span="8" v-else>{{ language == 0 ? '无早餐' : 'No breakfast' }}</el-col>
</el-row>
</el-col>
<el-col :span="3">
<div class="price">{{ language==0?'¥':'€' }}<span>{{language==0?r.roomPrice:r.roomPriceEn}}</span></div>
<div class="price">{{
language == 0 ? '¥' : '€'
}}<span>{{ language == 0 ? r.roomPrice : r.roomPriceEn }}</span></div>
</el-col>
<el-col :span="3">
<el-button v-if="language==0" :disabled="r.useCount<=0" :class="{'forbid':r.useCount<=0}" @click="goOrder(r)" class="bg-lineg button">
订
<div>{{ language==0?'在线付':'Online' }}</div>
</el-button>
<el-button v-else style="color: #fff" :disabled="!r.useCount" class="btn-lineG w100" :class="{'forbid':!r.useCount}" round type="pri mary" @click="goOrder(r)">Select</el-button>
<!-- <div class="text-center text-primary mt10 fontsize14 pointer" v-if="language == 0">-->
<!-- 剩余 {{(r.roomCount - (r.useCount||0)).toFixed()}} 间-->
<!-- </div>-->
<!-- <div class="text-center text-primary mt10 fontsize14" v-else>-->
<!-- {{(r.roomCount - (r.useCount||0)).toFixed()}} Remaining rooms-->
<!-- </div>-->
<el-button v-if="language==0" :disabled="r.useCount<=0" :class="{'forbid':r.useCount<=0}"
@click="goOrder(r)" class="bg-lineg button">
订
<div>{{ language == 0 ? '在线付' : 'Online' }}</div>
</el-button>
<el-button v-else style="color: #fff" :disabled="!r.useCount && !hotTime" class="btn-lineG w100"
:class="{'forbid':(!r.useCount && !hotTime)}" round type="pri mary" @click="goOrder(r)">Select
</el-button>
<!-- <div class="text-center text-primary mt10 fontsize14 pointer" v-if="language == 0">-->
<!-- 剩余 {{(r.roomCount - (r.useCount||0)).toFixed()}} 间-->
<!-- </div>-->
<!-- <div class="text-center text-primary mt10 fontsize14" v-else>-->
<!-- {{(r.roomCount - (r.useCount||0)).toFixed()}} Remaining rooms-->
<!-- </div>-->
</el-col>
</el-row>
</div>
......@@ -126,18 +138,20 @@
</div>
</template>
<script setup >
<script setup>
import {useRouter} from "vue-router";
import {ref, reactive, onMounted,getCurrentInstance} from "vue";
import {ref, reactive, onMounted, getCurrentInstance} from "vue";
import {useRoute} from "vue-router";
import {dayjs} from 'element-plus'
import {getHotelById, getHotelRooms,checkRoomPayByUserId} from "@/apiPc/booking"
import {getHotelById, getHotelRooms, checkRoomPayByUserId} from "@/apiPc/booking"
import {getBaseInfoByActiveId} from "@/apiPc/booking";
const { proxy } = getCurrentInstance()
const {proxy} = getCurrentInstance()
import {useStorage} from "@vueuse/core/index";
import useUserStore from "@/store/modules/user";
import {ElMessageBox} from "element-plus";
const user = useUserStore().user
const useStore = useUserStore
const language = useStorage('language', 0)
......@@ -147,20 +161,23 @@ const form = ref({})
const query = ref({
hotelId: route.query.id
})
const hotTime=ref([])
const hotTime = ref([])
const showAll = ref(false)
const loading = ref(false)
const roomList = ref([])
const map = ref(null)
const formTime=ref({})
const formTime = ref({})
let baseHotTime;
onMounted(() => {
console.log(route.params)
getBaseInfoByActiveId(route.params.cptId).then(res=>{
getBaseInfoByActiveId(route.params.cptId).then(res => {
formTime.value = res.data || null
}).catch(err=>{
}).catch(err => {
console.log(err)
formTime.value = null
}).finally(()=>{
}).finally(() => {
console.log(formTime.value)
getDateTime()
......@@ -169,14 +186,22 @@ onMounted(() => {
})
function getDateTime(){
if (formTime.value){
if (dayjs().isBefore(dayjs(formTime.value.hqStart))){
hotTime.value[0]=dayjs(formTime.value.hqStart).format('YYYY-MM-DD')
hotTime.value[1]=dayjs(formTime.value.hqStart).add(1,'day').format('YYYY-MM-DD')
} else{
hotTime.value[0]=dayjs().format('YYYY-MM-DD')
hotTime.value[1]=dayjs().add(1,'day').format('YYYY-MM-DD')
function initTime() {
if (!hotTime.value[0]) {
hotTime.value = baseHotTime
}
}
function getDateTime() {
if (formTime.value) {
if (dayjs().isBefore(dayjs(formTime.value.hqStart))) {
// hotTime.value[0]=dayjs(formTime.value.hqStart).format('YYYY-MM-DD')
// hotTime.value[1]=dayjs(formTime.value.hqStart).add(1,'day').format('YYYY-MM-DD')
baseHotTime = [dayjs(formTime.value.hqStart).format('YYYY-MM-DD'), dayjs(formTime.value.hqStart).add(1, 'day').format('YYYY-MM-DD')]
} else {
// hotTime.value[0]=dayjs().format('YYYY-MM-DD')
// hotTime.value[1]=dayjs().add(1,'day').format('YYYY-MM-DD')
baseHotTime = [dayjs().format('YYYY-MM-DD'), dayjs().add(1, 'day').format('YYYY-MM-DD')]
}
}
}
......@@ -191,8 +216,8 @@ function getData() {
console.log(err)
})
query.value.hotelId = route.query.id
query.value.rzStart=hotTime.value?hotTime.value[0]:null
query.value.rzEnd=hotTime.value?hotTime.value[1]:null
query.value.rzStart = hotTime.value ? hotTime.value[0] : null
query.value.rzEnd = hotTime.value ? hotTime.value[1] : null
getHotelRooms(query.value).then(res => {
roomList.value = res.rows
console.log(roomList.value)
......@@ -242,23 +267,26 @@ function initMap() {
}
function goOrder(room) {
ElMessageBox.confirm(language.value == 0 ? '你当前选择的入住时间为'+hotTime.value[0]+'至'+hotTime.value[1]+'，是否确定？':'Your current check-in time is'+hotTime.value[0]+'~'+hotTime.value[1]+'Are you sure?',{type:'warning'}).then({
if(!hotTime.value[0]){
proxy.$modal.msgError(language.value == 0 ?'请先选择入住日期':'Please choose the date of check-in first')
return
}
}).then(()=>{
checkRoomPayByUserId(room.hotelId).then(res=>{
if(res.data == -100){
ElMessageBox.confirm(language.value == 0 ? '你当前选择的入住时间为' + hotTime.value[0] + '至' + hotTime.value[1] + '，是否确定？' : 'Your current check-in time is' + hotTime.value[0] + '~' + hotTime.value[1] + 'Are you sure?', {type: 'warning'}).then({}).then(() => {
checkRoomPayByUserId(room.hotelId).then(res => {
if (res.data == -100) {
ElMessageBox.confirm(
language.value == 0 ?'你有未支付的酒店订单，是否前往个人中心查看':'You already have an unpaid hotel order, do you want to go to the personal center to check it?',
language.value==0?'提示':'Warning',
{
confirmButtonText: language.value==1?'Go My Reservation ':'前往我的预订',
// cancelButtonText: language.value==1?'Continue to book':'继续预订',
type: 'warning',
}
language.value == 0 ? '你有未支付的酒店订单，是否前往个人中心查看' : 'You already have an unpaid hotel order, do you want to go to the personal center to check it?',
language.value == 0 ? '提示' : 'Warning',
{
confirmButtonText: language.value == 1 ? 'Go My Reservation ' : '前往我的预订',
// cancelButtonText: language.value==1?'Continue to book':'继续预订',
type: 'warning',
}
).then((res) => {
console.log(res)
router.push({
name:'myReservation',
name: 'myReservation',
})
})
// .catch((res) => {
......@@ -272,32 +300,32 @@ function goOrder(room) {
})
}
function goNext(room) {
router.push({
name:'hotelOrder',
params:{
roomId:room.id
name: 'hotelOrder',
params: {
roomId: room.id
},
query:{
room:encodeURIComponent(JSON.stringify(room)),
hotelName:form.value.name,
checkInTime:form.value.checkInTime,
start:hotTime.value[0],
end:hotTime.value[1],
query: {
room: encodeURIComponent(JSON.stringify(room)),
hotelName: form.value.name,
checkInTime: form.value.checkInTime,
start: hotTime.value[0],
end: hotTime.value[1],
}
})
}
function getDaysBetween(){
if (hotTime.value && hotTime.value.length==2){
const d1=dayjs(hotTime.value[0]).format('YYYY-MM-DD')
const d2=dayjs(hotTime.value[1]).format('YYYY-MM-DD')
if (d1==d2){
function getDaysBetween() {
if (hotTime.value && hotTime.value.length == 2) {
const d1 = dayjs(hotTime.value[0]).format('YYYY-MM-DD')
const d2 = dayjs(hotTime.value[1]).format('YYYY-MM-DD')
if (d1 == d2) {
getDateTime()
return proxy.$modal.msgError(language.value==0?'入住时间跨度需要大于一天':'The duration of the stay must be more than one day.')
}else{
return proxy.$modal.msgError(language.value == 0 ? '入住时间跨度需要大于一天' : 'The duration of the stay must be more than one day.')
} else {
getData()
}
}
......@@ -308,9 +336,9 @@ function disabledDateRZ(date) {
if (formTime.value.hqStart) {
const today = dayjs().format('YYYY-MM-DD')
if (formTime.value.hqStart < today) {
return !((date.getTime() >= dayjs(today).valueOf())&&(date.getTime() <= dayjs(formTime.value.hqEnd).valueOf()))
return !((date.getTime() >= dayjs(today).valueOf()) && (date.getTime() <= dayjs(formTime.value.hqEnd).valueOf()))
} else {
return !((date.getTime() >= dayjs(formTime.value.hqStart).valueOf())&&(date.getTime() <= dayjs(formTime.value.hqEnd).valueOf()))
return !((date.getTime() >= dayjs(formTime.value.hqStart).valueOf()) && (date.getTime() <= dayjs(formTime.value.hqEnd).valueOf()))
}
}
// return true
......@@ -318,10 +346,10 @@ function disabledDateRZ(date) {
function goMap() {
return
// var tencentMapUrl = "https://map.qq.com/";
// window.location.href = tencentMapUrl;
// var tencentMapUrl = "https://map.qq.com/";
// window.location.href = tencentMapUrl;
var url = `https://map.qq.com/?type=gcj02&lat=${form.value.latitude}&lng=${form.value.longitude}`
var mapUrl_tx = "http://apis.map.qq.com/uri/v1/marker?marker=coord:"+form.value.latitude+","+form.value.longitude+"&referer=yellowpage";
var mapUrl_tx = "http://apis.map.qq.com/uri/v1/marker?marker=coord:" + form.value.latitude + "," + form.value.longitude + "&referer=yellowpage";
window.open(url, "_blank")
}
......@@ -329,19 +357,56 @@ function goMap() {
<style scoped lang="scss">
.room {
background: #FAFBFD;margin: 20px 0 0;padding: 20px;
background: #FAFBFD;
margin: 20px 0 0;
padding: 20px;
border: 1px solid #E5E5E5;
.name{font-size: 20px;margin: 0 0 10px;}
.roomImg{aspect-ratio: 16/9;border-radius: 10px;overflow: hidden;
img{width: 100%;object-fit: cover;object-position: center;height: 100%;}
.name {
font-size: 20px;
margin: 0 0 10px;
}
.price{color: #FF8124;font-size: 24px;
span{font-size: 36px;font-family: "DIN Alternate"}
.roomImg {
aspect-ratio: 16/9;
border-radius: 10px;
overflow: hidden;
img {
width: 100%;
object-fit: cover;
object-position: center;
height: 100%;
}
}
.bg-lineg{margin: auto;border-radius: 10px;text-align: center;padding: 7px 2px 2px;
font-size: 24px;width:66px;cursor: pointer;
div{background: #fff;font-size: 13px;border-radius: 20px;padding: 0 10px;
color: #453DEA;font-weight: 500;}
.price {
color: #FF8124;
font-size: 24px;
span {
font-size: 36px;
font-family: "DIN Alternate"
}
}
.bg-lineg {
margin: auto;
border-radius: 10px;
text-align: center;
padding: 7px 2px 2px;
font-size: 24px;
width: 66px;
cursor: pointer;
div {
background: #fff;
font-size: 13px;
border-radius: 20px;
padding: 0 10px;
color: #453DEA;
font-weight: 500;
}
}
}
......@@ -379,14 +444,17 @@ function goMap() {
}
}
}
:deep(.button) {
display: block;
height: 55px;
width: auto;
color: #fff;
span{
span {
display: block !important;
div{
div {
margin-top: 3px;
}
}
......@@ -449,26 +517,45 @@ function goMap() {
}
}
.hotelImg{border-radius: 10px;overflow: hidden;aspect-ratio: 16/9;
img{object-fit: cover;object-position: center;width: 100%;height: 100%;
.hotelImg {
border-radius: 10px;
overflow: hidden;
aspect-ratio: 16/9;
img {
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
}
}
.info{font-weight: 400;
.info {
font-weight: 400;
font-size: 14px;
color: #929AA0;
.el-icon{margin-right: 5px;}
.el-icon {
margin-right: 5px;
}
}
.oddmb:nth-child(2){margin-bottom: 20px;}
.forbid{
cursor:not-allowed !important;
.oddmb:nth-child(2) {
margin-bottom: 20px;
}
.forbid {
cursor: not-allowed !important;
color: #a8abb2 !important;
//filter:grayscale(1);
background: #fff;
div{
div {
color: #a8abb2 !important;
}
}
.forbid:hover{
box-shadow:none;
.forbid:hover {
box-shadow: none;
}
</style>
......
src/viewsPc/components/masterClass.vue
......@@ -6,22 +6,22 @@
>
<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">
<div v-if="language==0" style="width: 300px;margin: auto"><br/>
培训地点：无锡君来世尊酒店<br/>
详细地址：江苏省 无锡市 滨湖区 和风路111号<br/>
报到时间：2024年7月14日13:30 -17:00<br/>
联系人：蒋璐<br/>
联系电话：15961580050<br/>
</div>
<div v-if="language==0" style="width: 300px;margin: auto"><br/>
培训地点：无锡君来世尊酒店<br/>
详细地址：江苏省 无锡市 滨湖区 和风路111号<br/>
报到时间：2024年7月14日13:30 -17:00<br/>
联系人：蒋璐<br/>
联系电话：15961580050<br/>
</div>
<div v-else style="width: 400px;margin: auto"><br/>
<!-- 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/>-->
<!-- 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：Worldhotel Grand Juna Wuxi<br/>
Address：No.111 Hefeng Road, Binhu District, Wuxi, Jiangsu<br/>
Check-in：From 13:30 to 17:00 on July 14, 2024.<br/>
......@@ -30,12 +30,17 @@
</div>
</div>
<div class="text-center">
<el-button type="primary" v-if="courseList.length>0" class="btn-lineG" round @click="setActive(1)">{{ language == 0 ? '下一步' : 'NEXT' }}</el-button>
<el-button type="primary" class="btn-lineG" round v-else @click="close">{{language==0?'暂无可报课程':'No courses available for reporting'}}</el-button>
<el-button type="primary" v-if="courseList.length>0" class="btn-lineG" round @click="setActive(1)">
{{ language == 0 ? '下一步' : 'NEXT' }}
</el-button>
<el-button type="primary" class="btn-lineG" round v-else @click="close">
{{ language == 0 ? '暂无可报课程' : 'No courses available for reporting' }}
</el-button>
</div>
</div>
<div v-if="activeStep==1">
<el-form :model="form" :rules="rules" ref="iformRef" label-position="right" :label-width="language==0?'80px':'150px'">
<el-form :model="form" :rules="rules" ref="iformRef" label-position="right"
:label-width="language==0?'80px':'160px'">
<el-form-item :label="language==0?'姓名':'Name'" required prop="name">
<el-input v-model="form.name"/>
</el-form-item>
......@@ -58,36 +63,41 @@
type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item :label="language==0?'手机号':'Phone number'" required prop="phone">
<el-input v-model="form.phone"/>
</el-form-item>
<el-form-item :label="language==0?'邮箱':'Email'" required prop="email">
<el-input v-model="form.email" type="email"/>
</el-form-item>
<el-form-item :label="language==0?'证件号':'ID No.'" required prop="passportNo">
<el-form-item :label="language==0?'证件号':'National license No.'" required prop="passportNo">
<el-input v-model="form.passportNo" @blur="checkCard"/>
</el-form-item>
<el-form-item :label="language==0?'有效证件':'Passport Copy'" required prop="passportCopy">
<image-upload v-model="form.passportCopy" :limit="1" :is-show-tip="false"
:button-text="language==0?'上传':'Upload'"/>
</el-form-item>
<!-- <el-form-item :label="language==0?'抵达日期':'Date of Arrival'" required prop="arrival">-->
<!-- <el-date-picker-->
<!-- v-model="form.arrival" placeholder="YYYY-MM-DD"-->
<!-- style="width: 100%;"-->
<!-- type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="language==0?'出发日期':'Date of Departure'" required prop="departure">-->
<!-- <el-date-picker-->
<!-- v-model="form.departure"-->
<!-- style="width: 100%;" placeholder="YYYY-MM-DD"-->
<!-- type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="language==0?'抵达日期':'Date of Arrival'" required prop="arrival">-->
<!-- <el-date-picker-->
<!-- v-model="form.arrival" placeholder="YYYY-MM-DD"-->
<!-- style="width: 100%;"-->
<!-- type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"-->
<!-- />-->
<!-- </el-form-item>-->
<!-- <el-form-item :label="language==0?'出发日期':'Date of Departure'" required prop="departure">-->
<!-- <el-date-picker-->
<!-- v-model="form.departure"-->
<!-- style="width: 100%;" placeholder="YYYY-MM-DD"-->
<!-- type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"-->
<!-- />-->
<!-- </el-form-item>-->
<el-form-item :label="language==0?'备注':'Remark '">
<el-input type="textarea" v-model="form.remark" rows="3"/>
</el-form-item>
<div class="text-center">
<el-button size="large" @click="setActive(0)" round plain type="primary">{{ language == 0 ? '上一步' : 'PREV' }}</el-button>
<el-button size="large" @click="setActive(0)" round plain type="primary">
{{ language == 0 ? '上一步' : 'PREV' }}
</el-button>
<el-button type="primary" size="large" @click="checkApplyCourse(2)" round class="btn-lineG">
{{ language == 0 ? '下一步' : 'NEXT' }}
</el-button>
......@@ -99,41 +109,49 @@
<img class="mauto" src="@/assets/dance/ok.png"/>
<h2 class="text-center">{{ language == 0 ? '申请已提交' : 'Submitted successfully' }}</h2>
<h4 class="text-center" v-if="language == 0">
我们已收到您的申请，并将尽快处理。请耐心等待。
我们已收到您的申请，请在7月14日到无锡报到。
</h4>
<h4 v-else>
Your application has been received,<br/>
and we will process it as soon as possible.
Your application has been received,
<br/>
Please be patient while waiting.
Please register in Wuxi on July 14.
</h4>
</div>
<div v-else>
<div class="tip text-danger mb20" v-if="language==0">*选择参加的课程（最少一项，最多两项）</div>
<div class="tip text-danger mb20" v-else>*Select the courses to enroll in (at least one, no more than two)</div>
<div class="tip text-danger mb20" v-else>*Select the courses to enroll in (at least one, no more than two)
</div>
<el-checkbox-group size="large" v-model="form.courseId" @change="courseChange">
<div v-for="c in courseList" class="mb20">
<el-checkbox :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)">
<el-checkbox :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)">
<div v-if="language==0" style="display: flex">
<div> {{c.name}}{{c.name.indexOf('青年')>-1?'(年龄在15岁~18岁)':'(年龄在14岁以下)'}}</div>
<div> {{ c.name }}{{ c.name.indexOf('青年') > -1 ? '(年龄在15岁~18岁)' : '(年龄在14岁以下)' }}</div>
</div>
<div v-else>
<div> {{c.nameEn}}{{c.nameEn.indexOf('Youth')>-1?'(Between the age 15 and 18)':'(Under the age of 14)'}} </div>
<div>
{{ c.nameEn }}{{ c.nameEn.indexOf('Youth') > -1 ? '(Between the age 15 and 18)' : '(Under the age of 14)' }}
</div>
</div>
<el-tag class="ml20" v-if="(form.nationality==240&&c.viewStateCn == 0)||(form.nationality!=240&&c.viewStateEn == 0)" type="danger" effect="dark">{{language == 0 ?'已报满':'Already full'}}</el-tag>
<el-tag class="ml20"
v-if="(form.nationality==240&&c.viewStateCn == 0)||(form.nationality!=240&&c.viewStateEn == 0)"
type="danger" effect="dark">{{ language == 0 ? '已报满' : 'Already full' }}
</el-tag>
</el-checkbox>
</div>
</el-checkbox-group>
<div class="text-center">
<el-button size="large" @click="setActive(1)" round plain type="primary">{{ language == 0 ? '上一步' : 'PREV' }}</el-button>
<el-button type="primary" v-if="!disChoose" size="large" @click="submit" round class="btn-lineG w200px">
{{ language == 0 ? '提交' : 'SUBMIT' }}
</el-button>
<div class="text-center">
<el-button size="large" @click="setActive(1)" round plain type="primary">
{{ language == 0 ? '上一步' : 'PREV' }}
</el-button>
<el-button type="primary" v-if="!disChoose" size="large" @click="submit" round class="btn-lineG w200px">
{{ language == 0 ? '提交' : 'SUBMIT' }}
</el-button>
</div>
</div>
</div>
</div>
......@@ -153,9 +171,7 @@ import {masterClassList, getByCard, submitMasterApply, getMasterApply, delByCard
const {proxy} = getCurrentInstance()
const language = useStorage('language', 0)
const form = ref({
gender:'0'
})
const form = ref({})
const show = ref(false)
const showR = ref(false)
const disChoose = ref(false)
......@@ -178,7 +194,7 @@ const rules = ref(
const open = (params) => {
console.log(params)
show.value = true
title.value = language.value==0?'亚洲青少年体育舞蹈公益课':'Asian Youth DanceSport Training Camp'
title.value = language.value == 0 ? '亚洲青少年体育舞蹈公益课' : 'Asian Youth DanceSport Training Camp'
cptId.value = params.cptId
getCourse()
}
......@@ -196,24 +212,28 @@ watch(show, (value) => {
// proxy.$refs['dialogRef'].clearValidate()
})
})
function getCourse() {
// '1777256058082189313'
masterClassList({cptId:cptId.value}).then(res=>{
masterClassList({cptId: cptId.value}).then(res => {
courseList.value = res.data
})
}
function setActive(n) {
activeStep.value = n
}
function courseChange(e){
console.log('已选',e)
function courseChange(e) {
console.log('已选', e)
}
function checkApplyCourse(n) {
getMasterApply({card:form.value.passportNo}).then(res=>{
if(res.data?.length>0){
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)
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?',
......@@ -221,14 +241,14 @@ function checkApplyCourse(n) {
confirmButtonText: language.value == 0 ? '是' : 'Confirm',
cancelButtonText: language.value == 0 ? '否' : 'Cancel',
type: 'warning'
}).then(()=>{
}).then(() => {
//删除原记录
delByCard(form.value.passportNo).then(res=>{
delByCard(form.value.passportNo).then(res => {
form.value.courseId = []
disChoose.value = false
to2()
})
}).catch(()=>{
}).catch(() => {
disChoose.value = true
to2()
})
......@@ -238,6 +258,7 @@ function checkApplyCourse(n) {
})
}
function to2() {
proxy.$refs.iformRef.validate(valid => {
if (form.value.email.indexOf('@') == -1) {
......@@ -256,14 +277,15 @@ function to2() {
function checkCard() {
getByCard({card:form.value.passportNo}).then(res=>{
if(res.data){
getByCard({card: form.value.passportNo}).then(res => {
if (res.data) {
form.value = res.data
} else {
form.value.courseId = []
}
})
}
getCountryList()
function getCountryList() {
......@@ -296,29 +318,35 @@ const submit = () => {
form.value.itemIds = form.value.courseId.toString()
delete form.value.courseId
submitMasterApply(form.value).then((res) => {
ElMessage.success(language.value == 0 ?'提交成功':'Successfully!')
ElMessage.success(language.value == 0 ? '提交成功' : 'Successfully!')
showR.value = true
}).catch(()=>{
}).catch(() => {
})
})
}
const conti = () => {
showR.value = false
form.value = {
gender: '0'
}
form.value = {}
}
const close = () =>{
const close = () => {
show.value = false
}
</script>
<style scoped>
.xzRich{line-height: 2;font-size: 14px;}
.xzRich {
line-height: 2;
font-size: 14px;
}
.boxInvitation {
width: 90%;
margin: auto
}
h4{font-size: 15px;line-height: 1.6;}
h4 {
font-size: 15px;
line-height: 1.6;
}
</style>
......
src/viewsPc/index.vue
......@@ -94,7 +94,7 @@
</el-icon>
</a>
<!-- <el-button type="primary" @click="popMaster">青少年公益课</el-button>-->
<a class="zn-btn ml20 btn-q" @click="popMaster">青少年公益课</a>
<a class="zn-btn ml20 btn-q" @click="popMaster">青少年公益课报名</a>
</div>
</el-col>
<el-col :sm="24" :lg="14">
......
src/viewsPc/index_en.vue
......@@ -90,7 +90,7 @@
GUIDELINE
<el-icon><download /></el-icon>
</a>
<a class="zn-btn ml20 btn-q " @click="popMaster">Junior &Youth Camp <el-icon><Edit /></el-icon>
<a class="zn-btn ml20 btn-q " @click="popMaster">Junior &Youth Camp REGISTER<el-icon><Edit /></el-icon>
</a>
</div>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!