Files
income_payments_enterprise_…/src/views/signUp/SignUpPage.vue
T

972 lines
33 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<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>{{ currentMeetingInfo.registerDeadline }}</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 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 :gutter="24">
<a-col :span="24" class="flex-col">
<label>会议内容:</label>
<span class="word-beak">{{ currentMeetingInfo.meetingContent }}</span>
</a-col>
</a-row>
<a-row>
<a-col :span="24" class="flex-col">
<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"
full-company-info
: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" :disabled="!isInternalEnterprise">内部企业</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>
<span class="color-red">(如无邀请码,请选否)</span>
</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" :disabled="!isInternalEnterprise">内部企业</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">
<invite-code v-decorator="[ 'invitationCode', validatorRules.invitationCode]" @change-value="validateCode"></invite-code>
</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"
></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 || guestType === 5)">
<seminar-partner-form ref="seminarPartnerForm" @formData="getFormData"></seminar-partner-form>
</template>
<div class="item-title">其他信息</div>
<a-row :gutter="24">
<a-col :xxl="8" :xl="12" :sm="24">
<a-form-item label="备注" :labelCol="remarksLabelCol" :wrapperCol="remarksWrapperCol">
<a-textarea
placeholder="请输入备注"
:auto-size="{ minRows: 3, maxRows: 6 }"
v-decorator="['remark']"
:maxLength='200'
@change="e => {e.target.value = (e.target.value + '').trim()}"/>
</a-form-item>
</a-col>
</a-row>
<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-->
<invoice-confirm-modal ref="invoiceConfirmModal" @ok="confirmOk"></invoice-confirm-modal>
</div>
</template>
<script>
import {getMeetInfoById,validateStandard, judgeInternalEnterprise, judgeMeetingCode} 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'
import InviteCode from './InviteCode'
import InvoiceConfirmModal from './modules/InvoiceConfirmModal'
export default {
name: 'SignUpPage',
components: {
SelectContacts,
SeminarPartnerForm,
// JDictSelectTag,
OtherMeetingForm,
SeminarVipForm,
PreviewFile,
JImageUpload,
CompanySelect,
InviteCode,
InvoiceConfirmModal
},
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'
},
invitationCode: {
rules: [{required: true, validator: this.checkCode}],
validateTrigger: 'change'
},
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'
},
// 当前参会企业是否是内部企业
isInternalEnterprise: false,
}
},
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
// 初始化会议费用
// 有vip会议费用 并且 不是 信息交流会(年会)
if (this.currentMeetingInfo.meetingCostsVip && (this.currentMeetingInfo.tbMeetingType + '' !== '3')) {
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
}
// 直接写一个回调函数,然后做后续的调用
const callbackFunc = (submitData, that) => {
let url = that.url.add
let method = 'post'
httpAction(url, submitData, method).then(res => {
if (res.success) {
that.$emit('ok')
let messageText = '报名成功'
// 标协会议增加不同的提示语
if(submitData.meetingType === '2' && Number(this.currentMeetingInfo.isAddQuestion)) {
messageText = '报名成功!请到会议详情页-问题征集处进行提问'
}
// that.$message.success(res.message)
that.$notification.success({
message: messageText,
})
setTimeout(() => {
that.handleCancel()
},500)
that.confirmLoading = false
} else {
that.$message.warn(res.message)
}
}).finally(() => {
that.confirmLoading = false
})
}
//todo 判断当前是否需要发票,如果需要发票,二次判断对应发票的信息是否正确
if (submitData.needInvoice) {
that.showInvoiceConfirmModal(submitData, callbackFunc)
that.confirmLoading = false
return
}
callbackFunc && callbackFunc(submitData, that)
}
})
},
/*
* 获取表单的值
* */
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, otherParams) {
console.log(otherParams)
// this.selectedCompany = value
this.selectedCompany = otherParams
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()
}
// 判断当前企业是否是内部企业
console.log('------this.selectedCompany-----------', this.selectedCompany)
this.judgeInternalEnterprise(this.selectedCompany.id)
},
/*
* 选择联系人获取信息
* */
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)
}
})
},
/*
* 判断当前的企业是否是内部企业,如果是修改isInternalEnterprise
* */
judgeInternalEnterprise(id) {
let params = {
id: id
}
judgeInternalEnterprise(params).then(res => {
if(res.success) {
this.isInternalEnterprise = res.result !== 'false'
}
}).finally(() => {
// 清空form表单身份的数据
this.form.setFieldsValue({
identity: null
})
// 嘉宾类型置空
this.guestType = null
})
},
/*
* 是否有邀请码
* */
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(['invitationCode'],(err) => {
if(!err){
// 获取邀请码
let currentCode = this.form.getFieldValue('invitationCode')
let code = currentCode.substring(0, currentCode.indexOf('-'))
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
// 参展商
case this.currentMeetingInfo.exhibitorInvitationCode:
this.identifyType = 1
this.guestType = 5
break
default :
this.guestType = null
}
}
})
},
/*
* 校验邀请码是否正确 给出提示
* */
validateCode() {
let currentCode = this.form.getFieldValue('invitationCode')
if(currentCode === undefined || currentCode === ''){
return
}
let code = currentCode.substring(0, currentCode.indexOf('-'))
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
// 参展商
case this.currentMeetingInfo.exhibitorInvitationCode:
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()
},
showInvoiceConfirmModal(obj, callbackFunc) {
this.$refs.invoiceConfirmModal.show(obj)
this.nextCallbackFunc = callbackFunc
this.nextCallbackParams = obj
},
// 二次确定发票信息的回调
confirmOk() {
this.nextCallbackFunc && this.nextCallbackParams && this.nextCallbackFunc(this.nextCallbackParams, this)
},
// 验证邀请码输入是否正确的方法
checkCode(rules, value, callback) {
if (value) {
let params = {
meetingId: this.currentMeetingInfo.id,
randomCode: value
}
judgeMeetingCode(params).then(res => {
res['success'] ? callback() : callback(res['message'])
}).catch(err => {
callback(err.message || err)
})
} else {
callback('请输入邀请码')
}
}
}
}
</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;
}
.flex-col {
display: flex;
label {
flex-shrink: 0;
}
}
// 邀请码内部的样式问题
.code-form-item{
display: flex;
align-items: center;
.ant-input{
flex: 1;
}
.split-span{
display: inline-block;
width: 20px;
text-align: center;
}
}
</style>