Merge remote-tracking branch 'origin/branch1210' into branch1210
This commit is contained in:
fengchenchen
@@ -0,0 +1,330 @@
|
||||
<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" v-for="(item,index) of currentMeetingInfo.meetingContactsList"
|
||||
:key="index">
|
||||
<label>会议联系人及手机号：</label>
|
||||
<span> {{ item.meetingContactsName + (item.meetingContactsPhone ?'：': '') + item.meetingContactsPhone + ' ' }}</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>
|
||||
@@ -0,0 +1,852 @@
|
||||
<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">
|
||||
<img src="../../assets/signUpImg/meetingInfo.png"/> 会议信息
|
||||
</section>
|
||||
<section class="main-content-info">
|
||||
<a-row :gutter="24">
|
||||
<a-col :span="12">
|
||||
<label>会议名称：</label>
|
||||
<span>{{ currentMeetingInfo.meetingName }}</span>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<label>年份：</label>
|
||||
<span>{{ currentMeetingInfo.particularYear }}</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<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>{{ holdAddress }}</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" v-for="(item,index) of currentMeetingInfo.meetingContactsList"
|
||||
:key="index">
|
||||
<label>会议联系人及手机号：</label>
|
||||
<span> {{ item.meetingContactsName + (item.meetingContactsPhone ?'：': '') + item.meetingContactsPhone + ' ' }}</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>{{ currentMeetingInfo.registerDeadline }}</span>
|
||||
</a-col>
|
||||
<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 type="flex" v-if="currentMeetingInfo.meetingCosts !== '0.00' ">
|
||||
<label>收费二维码：</label>
|
||||
<j-image-upload :return-id="true" v-if="currentMeetingInfo.paymentQrCode"
|
||||
v-model="currentMeetingInfo.paymentQrCode" disabled></j-image-upload>
|
||||
</a-row>
|
||||
<a-row>
|
||||
<a-col :span="24">
|
||||
<label>备注：</label>
|
||||
<span class="word-beak">{{ currentMeetingInfo.remark }}</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</section>
|
||||
<section class="main-content-title mt-10">
|
||||
<img src="../../assets/signUpImg/signUpInfo.png"/> 报名信息
|
||||
</section>
|
||||
<template v-if="urlHaveIdBool">
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form">
|
||||
<!--个人信息begin-->
|
||||
<div class="item-title">个人信息</div>
|
||||
<a-row :gutter="24">
|
||||
<a-col :xxl="8" :xl="12" :sm="24">
|
||||
<a-form-item label="参会企业" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<company-select @change="changeCompany" v-decorator="['companyId',validatorRules.companyId]"
|
||||
placeholder="请选择参会企业"
|
||||
:is-limit="true"
|
||||
:maxLength='50'>
|
||||
</company-select>
|
||||
<span class="color-red">若没有您要选择的企业,请您添加企业信息(发票抬头)</span>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="24">
|
||||
<a-col :xxl="8" :xl="12" :sm="24">
|
||||
<a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<select-contacts :selected-company="selectedCompany"
|
||||
placeholder="请选择参会人"
|
||||
:is-limit="true"
|
||||
v-decorator="['companyContactId',validatorRules.companyContactId]"
|
||||
:maxLength='50'
|
||||
@change="changeContact"
|
||||
ref="selectMailContacts"
|
||||
@ok="addContactsOk"></select-contacts>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xxl="8" :xl="12" :sm="24">
|
||||
<a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入手机号"
|
||||
@change="(e) => {e.target.value = e.target.value.replace(/[^0-9]/g,'')}"
|
||||
:maxLength='11'
|
||||
disabled
|
||||
v-decorator="['phone',validatorRules.phone]"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<!--非国际研讨会-->
|
||||
<a-col :xxl="8" :xl="12" :sm="24" v-if="meetingType !== '3' ">
|
||||
<a-form-item label="身份" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-radio-group v-decorator="['identity',validatorRules.identify]" @change="changeIdentify">
|
||||
<a-radio :value="1">嘉宾</a-radio>
|
||||
<a-radio :value="2">参会人</a-radio>
|
||||
<a-radio :value="3">内部企业</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :xxl="8" :xl="12" :sm="24" v-if="meetingType === '3' ">
|
||||
<a-form-item label="是否有邀请码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-radio-group v-decorator="['inviteCode',validatorRules.inviteCode]" @change="changeInviteCode">
|
||||
<a-radio :value="1">是</a-radio>
|
||||
<a-radio :value="0">否</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<!--邀请码选择是出现填写邀请码 否选择身份-->
|
||||
<a-col :xxl="8" :xl="12" :sm="24" v-if="meetingType === '3' && identityBool ">
|
||||
<a-form-item label="身份" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-radio-group v-decorator="['identity',validatorRules.identify]" @change="changeIdentify">
|
||||
<a-radio :value="2">参会人</a-radio>
|
||||
<a-radio :value="3">内部企业</a-radio>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
|
||||
<a-col :xxl="8" :xl="12" :sm="24" v-if="inviteCodeBool">
|
||||
<a-form-item label="邀请码" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
||||
<a-input placeholder="请输入邀请码"
|
||||
:maxLength='50'
|
||||
@change="event => event.target.value = event.target.value.trim()"
|
||||
@blur="validateCode"
|
||||
v-decorator="[ 'code',
|
||||
validatorRules.code]"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<!--邀请码选择是才出现-->
|
||||
<a-row :gutter="24" class="center" v-if="inviteCodeBool">
|
||||
<a-button @click="nextSetp" type="primary">下一步</a-button>
|
||||
</a-row>
|
||||
<!--个人信息end-->
|
||||
<!--除开国际研讨会的其他会议的显示-->
|
||||
<template v-if="meetingType !== '3' ">
|
||||
<other-meeting-form ref="formother" :selected-company="selectedCompany"
|
||||
:meeting-cost-bool="meetingCostBool"
|
||||
:identify-type="identifyType" @formData="getFormData"
|
||||
@isPack="isPack"></other-meeting-form>
|
||||
</template>
|
||||
|
||||
<!--国际研讨会参会人与内部企业的显示 默认不展示 -->
|
||||
<template v-if="meetingType === '3' && identifyType !== 1 && identifyType !== null ">
|
||||
<other-meeting-form ref="formother" :meeting-type="meetingType" :selected-company="selectedCompany"
|
||||
:meeting-cost-bool="meetingCostBool"
|
||||
:identify-type="identifyType" @formData="getFormData"></other-meeting-form>
|
||||
</template>
|
||||
<!-- 国际研讨会身份选择嘉宾 并且是VIP-->
|
||||
<template v-if="identifyType === 1 && guestType === 1">
|
||||
<seminar-vip-form ref="seminarVipForm" @formData="getFormData" :identify-type="identifyType"
|
||||
:guest-type="guestType"></seminar-vip-form>
|
||||
</template>
|
||||
<!-- 国际研讨会身份选择嘉宾 并且是演讲嘉宾-->
|
||||
<template v-if="identifyType === 1 && guestType === 2">
|
||||
<seminar-vip-form ref="seminarVipForm" @formData="getFormData"
|
||||
:guest-type="guestType"></seminar-vip-form>
|
||||
</template>
|
||||
<!-- 国际研讨会身份选择嘉宾 并且是特邀嘉宾-->
|
||||
<template v-if="identifyType === 1 && guestType === 3">
|
||||
<seminar-vip-form ref="seminarVipForm" @formData="getFormData"
|
||||
:guest-type="guestType"></seminar-vip-form>
|
||||
</template>
|
||||
<!-- 国际研讨会身份选择嘉宾 并且是合作伙伴-->
|
||||
<template v-if="identifyType === 1 && guestType === 4">
|
||||
<seminar-partner-form ref="seminarPartnerForm" @formData="getFormData"></seminar-partner-form>
|
||||
</template>
|
||||
<section class="meetingCost">
|
||||
费用合计：{{ meetingCostSum }} 元
|
||||
</section>
|
||||
<div class="action">
|
||||
<a-button class="submit" type="primary" @click="handleOk" v-preventclick>确定</a-button>
|
||||
<a-button @click="handleCancel">取消</a-button>
|
||||
</div>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</template>
|
||||
</div>
|
||||
</section>
|
||||
<!--内容end-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {getMeetInfoById,validateStandard} from '@api/incomePaymentsApi'
|
||||
import SelectContacts from '@comp/company/SelectContacts'
|
||||
import CompanySelect from '@comp/company/CompanySelect'
|
||||
import {httpAction} from '@api/manage'
|
||||
import pick from 'lodash.pick'
|
||||
import JImageUpload from '@comp/jero/JImageUpload'
|
||||
import PreviewFile from '@comp/jero/PreviewFile'
|
||||
import {getContactsById} from '@api/incomePaymentsApi'
|
||||
import OtherMeetingForm from '@comp/signUpForm/OtherMeetingForm'
|
||||
import SeminarVipForm from '@comp/signUpForm/SeminarVipForm'
|
||||
import SeminarPartnerForm from '@comp/signUpForm/SeminarPartnerForm'
|
||||
|
||||
|
||||
export default {
|
||||
name: 'SignUpPage',
|
||||
components: {
|
||||
SelectContacts,
|
||||
SeminarPartnerForm,
|
||||
// JDictSelectTag,
|
||||
OtherMeetingForm,
|
||||
SeminarVipForm,
|
||||
PreviewFile,
|
||||
JImageUpload,
|
||||
CompanySelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
description: '报名入口',
|
||||
// 报名二维码
|
||||
singUpQRCode: '',
|
||||
// 会议详情
|
||||
currentMeetingInfo: {},
|
||||
// 会议费用
|
||||
meetingMoney: '',
|
||||
// 召开时间
|
||||
holdtime: '',
|
||||
// 召开地点
|
||||
holdAddress: '',
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
formData: {},
|
||||
model: {},
|
||||
labelCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 6}
|
||||
},
|
||||
wrapperCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 18}
|
||||
},
|
||||
remarksLabelCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 3}
|
||||
},
|
||||
remarksWrapperCol: {
|
||||
xs: {span: 24},
|
||||
sm: {span: 21}
|
||||
},
|
||||
validatorRules: {
|
||||
companyId: {
|
||||
rules: [{required: true, message: '请选择参会企业'}],
|
||||
validateTrigger: 'change'
|
||||
},
|
||||
inviteCode: {
|
||||
rules: [{required: true, message: '请选择是否有邀请码'}],
|
||||
validateTrigger: 'change'
|
||||
},
|
||||
code: {
|
||||
rules: [{required: true, message: '请输入邀请码'}],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
companyContactId: {
|
||||
rules: [{required: true, message: '请选择参会人'}],
|
||||
validateTrigger: 'change'
|
||||
},
|
||||
phone: {
|
||||
rules: [{required: true, message: '请输入手机号'}],
|
||||
validateTrigger: 'blur'
|
||||
},
|
||||
identify: {
|
||||
rules: [{required: true, message: '请选择身份'}],
|
||||
validateTrigger: 'change'
|
||||
},
|
||||
guestType: {
|
||||
rules: [{required: true, message: '请选择嘉宾类型'}],
|
||||
validateTrigger: 'change'
|
||||
}
|
||||
},
|
||||
// 身份类型
|
||||
identifyType: null,
|
||||
// 嘉宾类型
|
||||
guestType: null,
|
||||
selectedCompany: null,
|
||||
// 会议类型
|
||||
meetingType: '',
|
||||
// 会议id
|
||||
meetingId: '',
|
||||
// 会议费用合计
|
||||
meetingCostSum: '',
|
||||
// 会议费用是否为0
|
||||
meetingCostBool: false,
|
||||
// 是否有邀请码
|
||||
inviteCodeBool: false,
|
||||
// 邀请码错误状态
|
||||
codeErrorBool: true,
|
||||
// 是否是打包
|
||||
isPackBool: false,
|
||||
// 国际研讨会身份的控制
|
||||
identityBool: false,
|
||||
// 是否是标协成员
|
||||
isStandardBool: false,
|
||||
// url是否有id字段 默认没有
|
||||
urlHaveIdBool: false,
|
||||
url: {
|
||||
add: '/meeting/payMeetingSituation/signUp'
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
document.title = '会议报名'
|
||||
// 获取会议id
|
||||
let id = this.GetQueryString('id')
|
||||
this.urlHaveIdBool = id ? true : false
|
||||
this.meetingId = id
|
||||
if (id) {
|
||||
this.getMeetingInfo(id)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/*
|
||||
* 获取会议详情
|
||||
* */
|
||||
getMeetingInfo(params) {
|
||||
// 增加点注释 提交代码
|
||||
getMeetInfoById({id: params}).then(res => {
|
||||
if (res.success) {
|
||||
this.currentMeetingInfo = res.result
|
||||
this.meetingType = this.currentMeetingInfo.meetingType
|
||||
// 初始化会议费用
|
||||
if (this.currentMeetingInfo.meetingCostsVip) {
|
||||
this.meetingMoney = `普通会员(${this.currentMeetingInfo.meetingCosts}/人) 标协会员(${this.currentMeetingInfo.meetingCostsVip}/人)`
|
||||
// 费用合计
|
||||
this.meetingCostSum = this.currentMeetingInfo.meetingCosts
|
||||
} else {
|
||||
this.meetingMoney = `${this.currentMeetingInfo.meetingCosts}/人`
|
||||
// 费用合计
|
||||
this.meetingCostSum = 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
|
||||
}
|
||||
// 计算会议费用 会议费用为0 报名信息不显示邮寄信息与缴费信息 标协会议
|
||||
if (this.currentMeetingInfo.meetingType === '2' && this.currentMeetingInfo.meetingCostsVip) {
|
||||
// 标协会员的费用
|
||||
let vipCost = this.currentMeetingInfo.meetingCostsVip
|
||||
// 判断标协会员的费用是否是0
|
||||
let flagVip = vipCost === 0 || vipCost === '0.00'
|
||||
let cost = this.currentMeetingInfo.meetingCosts
|
||||
// 判断普通会员的费用是否是0
|
||||
let flag = cost === 0 || cost === '0.00'
|
||||
if (flag && flagVip) {
|
||||
// 说明会议费用为0
|
||||
this.meetingCostBool = true
|
||||
} else {
|
||||
this.meetingCostBool = false
|
||||
}
|
||||
// 其他会议值判断一个费用
|
||||
} else if (this.currentMeetingInfo.meetingCosts) {
|
||||
// 判断其他会议
|
||||
let cost = this.currentMeetingInfo.meetingCosts
|
||||
// 判断普通会员的费用是否是0
|
||||
let flag = cost === 0 || cost === '0.00'
|
||||
if (flag) {
|
||||
this.meetingCostBool = true
|
||||
} else {
|
||||
this.meetingCostBool = false
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.urlHaveIdBool = 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) {
|
||||
let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
|
||||
let r = window.location.search.substr(1).match(reg)
|
||||
if (r != null) return unescape(r[2])
|
||||
return null
|
||||
},
|
||||
// 是否打包 打包会议费用为
|
||||
/*
|
||||
* 确定
|
||||
* */
|
||||
handleOk() {
|
||||
const that = this
|
||||
// 其他会议的表单验证
|
||||
if (this.$refs.formother !== undefined) {
|
||||
this.$refs.formother.handleOk()
|
||||
}
|
||||
// 国际研讨会 VIP 演讲嘉宾 特邀嘉宾 的表单验证
|
||||
if (this.$refs.seminarVipForm !== undefined) {
|
||||
this.$refs.seminarVipForm.handleOk()
|
||||
}
|
||||
// 国际研讨会的合作伙伴的表单验证
|
||||
if (this.$refs.seminarPartnerForm !== undefined) {
|
||||
this.$refs.seminarPartnerForm.handleOk()
|
||||
}
|
||||
if (this.formData.stop) {
|
||||
return
|
||||
}
|
||||
this.form.validateFields((err, values) => {
|
||||
if (!err) {
|
||||
// 判断邀请码是否错误 需要判断会议类型 以及 是否有邀请码
|
||||
if (this.codeErrorBool && this.currentMeetingInfo.meetingType === '3' && this.inviteCodeBool) {
|
||||
this.$message.error('邀请码填写错误')
|
||||
return
|
||||
}
|
||||
this.confirmLoading = true
|
||||
let submitData = Object.assign({}, values, this.formData)
|
||||
submitData.companyId = values.companyId.id
|
||||
// 会议id
|
||||
submitData.meetingId = this.meetingId
|
||||
// 会议类型
|
||||
submitData.meetingType = this.meetingType
|
||||
// 身份
|
||||
submitData.identity = values.identity || this.identifyType
|
||||
// 嘉宾类型
|
||||
submitData.guestType = values.guestType || this.guestType
|
||||
// 会议费用为0 参数设置需要发票为0
|
||||
if(this.meetingCostSum === '0.00' ){
|
||||
submitData.needInvoice = 0
|
||||
}
|
||||
console.log(submitData)
|
||||
let url = this.url.add
|
||||
let method = 'post'
|
||||
httpAction(url, submitData, method).then(res => {
|
||||
if (res.success) {
|
||||
that.$emit('ok')
|
||||
|
||||
// that.$message.success(res.message)
|
||||
that.$notification.success({
|
||||
message: '报名成功',
|
||||
})
|
||||
setTimeout(() => {
|
||||
that.handleCancel()
|
||||
},500)
|
||||
that.confirmLoading = false
|
||||
} else {
|
||||
that.$message.warn(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
that.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
/*
|
||||
* 获取表单的值
|
||||
* */
|
||||
getFormData(value) {
|
||||
this.formData = Object.assign({}, value)
|
||||
},
|
||||
/*
|
||||
* 改变身份
|
||||
* */
|
||||
changeIdentify(e) {
|
||||
this.identifyType = e.target.value
|
||||
// 切换身份清除上次选择的值
|
||||
if (e.target.value !== 1) {
|
||||
this.guestType = null
|
||||
}
|
||||
// 当前会议是国际研讨会 并且选择身份是内部企业的会议费用为0
|
||||
if(e.target.value === 3 && this.currentMeetingInfo.meetingType === '3' ){
|
||||
this.meetingCostSum = '0.00'
|
||||
}else {
|
||||
this.meetingCostSum = this.currentMeetingInfo.meetingCosts
|
||||
}
|
||||
// 当前会议不是国际研讨会议 身份选择嘉宾和 内部企业的会议费用为0
|
||||
if(e.target.value !== 2 && this.currentMeetingInfo.meetingType !== '3' ){
|
||||
this.meetingCostSum = '0.00'
|
||||
}else {
|
||||
// 会议是标协会议的话 需要判断企业是否是标协会员的企业
|
||||
if(this.currentMeetingInfo.meetingType === '2' && this.isStandardBool){
|
||||
this.meetingCostSum = this.currentMeetingInfo.meetingCostsVip
|
||||
}else if(this.currentMeetingInfo.meetingType === '2'){
|
||||
this.meetingCostSum = this.currentMeetingInfo.meetingCosts
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
/*
|
||||
* 选择嘉宾类型
|
||||
* */
|
||||
changeGuestType(e) {
|
||||
this.guestType = e.target.value
|
||||
},
|
||||
/*
|
||||
* 选择参会企业
|
||||
* */
|
||||
changeCompany(value) {
|
||||
this.selectedCompany = value
|
||||
// 通过企业名称判断当前参会人
|
||||
if (this.currentMeetingInfo.meetingType + '' === '2') {
|
||||
validateStandard({companyName: this.selectedCompany.companyName}).then(res => {
|
||||
this.isStandardBool = res.result
|
||||
if (this.isStandardBool) {
|
||||
this.meetingCostSum = this.currentMeetingInfo.meetingCostsVip
|
||||
}else {
|
||||
this.meetingCostSum = this.currentMeetingInfo.meetingCosts
|
||||
}
|
||||
})
|
||||
}
|
||||
// 选择企业清空 姓名 手机号
|
||||
this.form.resetFields(['companyContactId', 'phone'])
|
||||
if (this.$refs.formother) {
|
||||
this.$refs.formother.clearFormItem()
|
||||
}
|
||||
|
||||
},
|
||||
/*
|
||||
* 选择联系人获取信息
|
||||
* */
|
||||
changeContact(val) {
|
||||
// 监听删除联系人的时候 清除对应的表单赋值
|
||||
if(val === undefined){
|
||||
this.form.resetFields(['phone'])
|
||||
}
|
||||
const that = this
|
||||
// 通过id查询联系人信息
|
||||
getContactsById({id: val}).then(res => {
|
||||
const model = Object.assign({}, res.result)
|
||||
// 设置手机 邮箱 职务
|
||||
if (res.success) {
|
||||
that.form.setFieldsValue(pick(model, 'phone'))
|
||||
}
|
||||
// 设置邮寄联系人和地址
|
||||
if (this.$refs.formother !== undefined) {
|
||||
this.$refs.formother.setAddressVal(res.result)
|
||||
}
|
||||
})
|
||||
},
|
||||
/*
|
||||
* 是否有邀请码
|
||||
* */
|
||||
changeInviteCode(e) {
|
||||
if (e.target.value === 1) {
|
||||
// 选择是说明身份是嘉宾
|
||||
this.identifyType = 1
|
||||
this.inviteCodeBool = true
|
||||
this.identityBool = false
|
||||
} else if (e.target.value === 0) {
|
||||
this.inviteCodeBool = false
|
||||
this.identityBool = true
|
||||
// 选的否 身份置空
|
||||
this.identifyType = null
|
||||
// 嘉宾类型置空
|
||||
this.guestType = null
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.formother) {
|
||||
this.$refs.formother.isLimitBool = true
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
/*
|
||||
* 取消
|
||||
* */
|
||||
handleCancel() {
|
||||
this.$router.go(-1)
|
||||
},
|
||||
/*
|
||||
* 下一步
|
||||
* */
|
||||
nextSetp() {
|
||||
this.form.validateFields(['code'],(err) => {
|
||||
if(!err){
|
||||
// 获取邀请码
|
||||
let code = this.form.getFieldValue('code')
|
||||
switch (code) {
|
||||
// 合作伙伴
|
||||
case this.currentMeetingInfo.cooperativeInvitationCode:
|
||||
this.identifyType = 1
|
||||
this.guestType = 4
|
||||
break
|
||||
// 演讲嘉宾
|
||||
case this.currentMeetingInfo.speakerInvitationCode:
|
||||
this.identifyType = 1
|
||||
this.guestType = 2
|
||||
break
|
||||
// 特邀嘉宾
|
||||
case this.currentMeetingInfo.guestInvitationCode:
|
||||
this.identifyType = 1
|
||||
this.guestType = 3
|
||||
break
|
||||
// vip
|
||||
case this.currentMeetingInfo.vipInvitationCode:
|
||||
this.identifyType = 1
|
||||
this.guestType = 1
|
||||
break
|
||||
default :
|
||||
this.guestType = null
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
},
|
||||
/*
|
||||
* 校验邀请码是否正确 给出提示
|
||||
* */
|
||||
validateCode() {
|
||||
let code = this.form.getFieldValue('code')
|
||||
if(code === undefined || code === ''){
|
||||
return
|
||||
}
|
||||
let flag = false
|
||||
switch (code) {
|
||||
// 合作伙伴
|
||||
case this.currentMeetingInfo.cooperativeInvitationCode:
|
||||
flag = true
|
||||
break
|
||||
// 演讲嘉宾
|
||||
case this.currentMeetingInfo.speakerInvitationCode:
|
||||
flag = true
|
||||
break
|
||||
// 特邀嘉宾
|
||||
case this.currentMeetingInfo.guestInvitationCode:
|
||||
flag = true
|
||||
break
|
||||
// vip
|
||||
case this.currentMeetingInfo.vipInvitationCode:
|
||||
flag = true
|
||||
break
|
||||
default :
|
||||
flag = false
|
||||
}
|
||||
// 保存错误状态
|
||||
this.codeErrorBool = !flag
|
||||
// 判断guestType 是否等于 null
|
||||
if (!flag) {
|
||||
// 错误
|
||||
this.$message.warn('邀请码填写错误')
|
||||
this.guestType = null
|
||||
this.meetingCostSum = this.currentMeetingInfo.meetingCosts
|
||||
} else {
|
||||
this.$message.success('邀请码填写正确')
|
||||
this.meetingCostSum = '0.00'
|
||||
}
|
||||
},
|
||||
addContactsOk() {
|
||||
this.$refs.selectContacts.getContactsList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.header {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
user-select: 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: left;
|
||||
padding-left: 20px;
|
||||
width: 100%;
|
||||
background: rgba(8, 182, 175, .1);
|
||||
color: #333;
|
||||
font-family: PingFang SC, PingFang SC-Medium;
|
||||
letter-spacing: 1px;
|
||||
font-weight: bold;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
.color-red {
|
||||
color: red;
|
||||
}
|
||||
.qr-code {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.mt-10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.action {
|
||||
text-align: right;
|
||||
|
||||
.submit {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.meetingCost {
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
width: 100%;
|
||||
background: #F7F7F7;
|
||||
color: #333;
|
||||
font-family: PingFang SC, PingFang SC-Medium;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
padding-left: 40px;
|
||||
box-sizing: border-box;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
color: #333;
|
||||
position: relative;
|
||||
font-size: 16px;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: #069f99;
|
||||
top: 50%;
|
||||
margin-top: -5px;
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.word-beak {
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user