323 lines
8.6 KiB
Vue
323 lines
8.6 KiB
Vue
<template>
|
||
<div>
|
||
<!--头部begin-->
|
||
<header class="header">
|
||
<img src="../../assets/signUpImg/bg.png" class="header-img">
|
||
<div class="meeting-name">{{ currentMeetingInfo.meetingName }}</div>
|
||
</header>
|
||
<!--头部end-->
|
||
<!--内容begin-->
|
||
<section class="content">
|
||
<div class="main-content">
|
||
<section class="main-content-title">
|
||
{{ currentMeetingInfo.meetingName }}
|
||
</section>
|
||
<section class="main-content-info">
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<label>会议类型：</label>
|
||
<span>{{ initMeetingType(currentMeetingInfo.meetingType) }}</span>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<label>会议费用：</label>
|
||
<span>{{ meetingMoney }}</span>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<label>负责人：</label>
|
||
<span>{{ currentMeetingInfo.directorName }} {{currentMeetingInfo.directorPhone}}</span>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<label>报名截止时间：</label>
|
||
<span>{{ currentMeetingInfo.registerDeadline }}</span>
|
||
</a-col>
|
||
<!-- <a-col :span="12">-->
|
||
<!-- <label>预计参加人数：</label>-->
|
||
<!-- <span>{{ currentMeetingInfo.estimatedNumber }}</span>-->
|
||
<!-- </a-col>-->
|
||
</a-row>
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<label>召开时间：</label>
|
||
<span>{{ holdtime }}</span>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<label>会议内容：</label>
|
||
<span class="word-beak">{{ currentMeetingInfo.meetingContent }}</span>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="24">
|
||
<a-col :span="12">
|
||
<label>备注：</label>
|
||
<span class="word-beak"> {{ currentMeetingInfo.remark }}</span>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row :gutter="24">
|
||
|
||
<a-col :span="12" style="display: flex">
|
||
<label>会议通知：</label>
|
||
<preview-file :file-id="currentMeetingInfo.meetingFiles"
|
||
v-if="currentMeetingInfo.meetingFiles"></preview-file>
|
||
</a-col>
|
||
</a-row>
|
||
<a-row>
|
||
<label>会议报名：</label>
|
||
</a-row>
|
||
<a-row>
|
||
<img :src="singUpQRCode" class="qr-code"/>
|
||
</a-row>
|
||
<a-button type="primary" style="margin-left: 19px;" @click="toSingUpPage" v-if="!invalidationBool && urlHaveIdBool">立即报名
|
||
</a-button>
|
||
</section>
|
||
</div>
|
||
</section>
|
||
<!--内容end-->
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import PreviewFile from '@comp/jero/PreviewFile'
|
||
import {createQcCode} from '@api/incomePaymentsApi'
|
||
import {getMeetInfoById} from '@api/incomePaymentsApi'
|
||
|
||
export default {
|
||
name: 'SignUpEntrance',
|
||
components: {
|
||
PreviewFile
|
||
},
|
||
data() {
|
||
return {
|
||
description: '报名入口',
|
||
// 报名二维码
|
||
singUpQRCode: '',
|
||
// 会议详情
|
||
currentMeetingInfo: {},
|
||
// 会议费用
|
||
meetingMoney: '',
|
||
// 召开时间
|
||
holdtime: '',
|
||
// 召开地点
|
||
holdAddress: '',
|
||
// 会议id
|
||
meetingId: '',
|
||
// 当前时间是否超过报名截止时间
|
||
invalidationBool: false,
|
||
// url是否有id参数
|
||
urlHaveIdBool:false,
|
||
}
|
||
},
|
||
created() {
|
||
// 获取会议id
|
||
let id = this.GetQueryString('id')
|
||
this.urlHaveIdBool = id ? true :false
|
||
this.meetingId = id
|
||
document.title = '报名入口'
|
||
if (id) {
|
||
this.getMeetingInfo(id)
|
||
}
|
||
},
|
||
async mounted() {
|
||
this.singUpQRCode = await this.generateQRCode(this.signUpHerfUrl)
|
||
},
|
||
computed:{
|
||
// 报名链接
|
||
signUpHerfUrl() {
|
||
return `${ window._CONFIG['singUpQRCodeURL'] }?id=${this.meetingId}`
|
||
},
|
||
},
|
||
methods: {
|
||
/*
|
||
* 生成二维码
|
||
* */
|
||
generateQRCode(params) {
|
||
return new Promise(resolve => {
|
||
let code = ''
|
||
createQcCode({contact: params}).then(res => {
|
||
if (res.success) {
|
||
code = res.result
|
||
} else {
|
||
console.error('生成二维码失败')
|
||
}
|
||
}).finally(() => {
|
||
resolve(code)
|
||
})
|
||
})
|
||
},
|
||
/*
|
||
* 立即报名
|
||
* */
|
||
toSingUpPage() {
|
||
this.$router.push({
|
||
path: '/signUpPage',
|
||
query: {
|
||
id: this.meetingId
|
||
}
|
||
})
|
||
},
|
||
/*
|
||
* 获取会议详情
|
||
* */
|
||
getMeetingInfo(params) {
|
||
getMeetInfoById({id: params}).then(res => {
|
||
if (res.success) {
|
||
this.currentMeetingInfo = res.result
|
||
// true超过了 false 未超过
|
||
this.invalidationBool = this.compareCurrentTime(res.result.registerDeadline)
|
||
if (this.invalidationBool) {
|
||
this.$notification.error({
|
||
message: '系统提示',
|
||
description: '当前会议超出报名时间,不可报名！'
|
||
})
|
||
}
|
||
// 初始化会议费用
|
||
if (this.currentMeetingInfo.meetingCostsVip) {
|
||
this.meetingMoney = `普通会员(${this.currentMeetingInfo.meetingCosts}/人) 标协会员(${this.currentMeetingInfo.meetingCostsVip}/人)`
|
||
} else {
|
||
this.meetingMoney = ` ${this.currentMeetingInfo.meetingCosts}/人`
|
||
}
|
||
// 初始化召开时间
|
||
if (this.currentMeetingInfo.startTime) {
|
||
this.holdtime = this.currentMeetingInfo.startTime + '~' + this.currentMeetingInfo.endTime
|
||
}
|
||
// 初始化召开地点
|
||
if (this.currentMeetingInfo.venue) {
|
||
this.holdAddress = this.currentMeetingInfo.venue + '/' + this.currentMeetingInfo.address
|
||
}
|
||
} else {
|
||
this.urlHaveIdBool = false
|
||
}
|
||
})
|
||
},
|
||
/*
|
||
* 当前时间是否超过会议报名时间
|
||
* */
|
||
compareCurrentTime(time) {
|
||
let date = new Date()
|
||
let compareTime = new Date(time)
|
||
if (date.getTime() > compareTime.getTime()) {
|
||
return true
|
||
} else {
|
||
return false
|
||
}
|
||
},
|
||
/*
|
||
* 会议类型
|
||
* */
|
||
initMeetingType(val) {
|
||
if (val) {
|
||
switch (val) {
|
||
case '1':
|
||
return '工作组会议'
|
||
case '2':
|
||
switch (this.currentMeetingInfo.tbMeetingType + '') {
|
||
case '1':
|
||
return '标协会议-标准宣贯'
|
||
case '2':
|
||
return '标协会议-培训会'
|
||
case '3':
|
||
return '标协会议-信息交流会'
|
||
}
|
||
break
|
||
case '3':
|
||
return '国际研讨会'
|
||
case '4':
|
||
return '其他会议'
|
||
case '5':
|
||
return '分标委会议'
|
||
case '6':
|
||
return '理事会会议'
|
||
}
|
||
} else {
|
||
return ''
|
||
}
|
||
},
|
||
/**
|
||
* 获取url的参数
|
||
* @param name要获取的参数名
|
||
* */
|
||
GetQueryString(name) {
|
||
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
|
||
var r = window.location.search.substr(1).match(reg)
|
||
if (r != null) return unescape(r[2])
|
||
return null
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.header {
|
||
text-align: center;
|
||
position: relative;
|
||
user-select: none;
|
||
-webkit-user-seletct: none;
|
||
-moz-user-seletct: none;
|
||
-ms-user-seletct: none;
|
||
|
||
.header-img {
|
||
width: 100%;
|
||
min-width: 1200px;
|
||
height: 450px;
|
||
}
|
||
|
||
.meeting-name {
|
||
width: 80%;
|
||
min-width: 1200px;
|
||
position: absolute;
|
||
font-family: PingFang SC, PingFang SC-Bold;
|
||
font-weight: 700;
|
||
letter-spacing: 2px;
|
||
color: #fff;
|
||
font-size: 42px;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
}
|
||
|
||
.content {
|
||
user-select: none;
|
||
background: rgba(240, 242, 245);
|
||
|
||
.main-content {
|
||
min-height: calc(100vh - 450px);
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
width: 80%;
|
||
min-width: 1200px;
|
||
background: #fff;
|
||
font-family: PingFang SC, PingFang SC-Medium;
|
||
|
||
&-title {
|
||
text-align: center;
|
||
width: 100%;
|
||
background: rgba(8, 182, 175, .1);
|
||
color: #333;
|
||
font-family: PingFang SC, PingFang SC-Medium;
|
||
letter-spacing: 1px;
|
||
font-weight: 500;
|
||
font-size: 18px;
|
||
height: 50px;
|
||
line-height: 50px;
|
||
}
|
||
|
||
&-info {
|
||
padding: 20px 20px 0 20px;
|
||
box-sizing: border-box;
|
||
font-size: 16px;
|
||
color: #555;
|
||
line-height: 2.1;
|
||
}
|
||
}
|
||
}
|
||
|
||
.qr-code {
|
||
width: 140px;
|
||
height: 140px;
|
||
}
|
||
.word-beak {
|
||
word-break: break-all;
|
||
}
|
||
</style> |