报名页面

src/views/signUp/SignUpPage.vue

@@ -0,0 +1,632 @@
+<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 }}</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>{{ currentMeetingInfo.meetingContent }}</span>
+            </a-col>
+          </a-row>
+          <a-row :gutter="24">
+            <a-col :span="12">
+              <label>召开地点：</label>
+              <span>{{holdAddress}}</span>
+            </a-col>
+<!--            <a-col :span="12">-->
+<!--              <label>备注：</label>-->
+<!--              <span>{{ currentMeetingInfo.remark }}</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">
+              <label>会议通知：</label>
+              <span>{{ currentMeetingInfo.meetingFiles }}</span>
+            </a-col>
+          </a-row>
+          <a-row>
+            <label>收费二维码：</label>
+            <img :src="singUpQRCode" class="qr-code"/>
+          </a-row>
+          <a-row>
+            <a-col :span="24">
+              <label>备注：</label>
+              <span>{{ currentMeetingInfo.remark }}</span>
+            </a-col>
+          </a-row>
+        </section>
+        <section class="main-content-title mt-10">
+          <img src="../../assets/signUpImg/signUpInfo.png" />    报名信息
+        </section>
+        <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">
+                  <add-meeting-company @change="changeCompany" v-decorator="['companyId',validatorRules.companyId]"
+                                       placeholder="请选择参会企业"
+                                       :maxLength='50'>
+                  </add-meeting-company>
+                </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="请选择参会人"
+                                   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">
+                <a-form-item label="职务" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <a-input placeholder="请输入职务"
+                           :maxLength='11'
+                           disabled
+                           v-decorator="[ 'post']"></a-input>
+                </a-form-item>
+              </a-col>
+
+              <a-col :xxl="8" :xl="12" :sm="24">
+                <a-form-item label="邮箱" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <a-input placeholder="请输入邮箱"
+                           :maxLength='50'
+                           disabled
+                           v-decorator="[ 'email',
+                         validatorRules.email]"></a-input>
+                </a-form-item>
+              </a-col>
+
+              <a-col :xxl="8" :xl="12" :sm="24">
+                <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="identifyType === 1 && meetingType === '3' ">
+                <a-form-item label="嘉宾类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
+                  <a-radio-group v-decorator="['guestType',validatorRules.guestType]" @change="changeGuestType">
+                    <a-radio :value="1">VIP</a-radio>
+                    <a-radio :value="2">演讲嘉宾</a-radio>
+                    <a-radio :value="3">特邀嘉宾</a-radio>
+                    <a-radio :value="4">合作伙伴</a-radio>
+                  </a-radio-group>
+                </a-form-item>
+              </a-col>
+            </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">
+              <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>
+      </div>
+    </section>
+    <!--内容end-->
+  </div>
+</template>
+
+<script>
+import {getMeetInfoById} from '@api/incomeMeetingApi'
+import SelectContacts from '@comp/company/SelectContacts'
+import OtherMeetingForm from '@views/incomePayments/meetManage/OtherMeetingForm'
+import SeminarVipForm from '@views/incomePayments/meetManage/modules/SeminarVipForm'
+import SeminarPartnerForm from '@views/incomePayments/meetManage/modules/SeminarPartnerForm'
+import AddMeetingCompany from '@comp/company/AddMeetingCompany'
+import {httpAction} from '@api/manage'
+import {getContactsById} from '@api/api'
+import pick from 'lodash.pick'
+
+export default {
+  name: 'SignUpPage',
+  components: {
+    SelectContacts,
+    SeminarPartnerForm,
+    // JDictSelectTag,
+    OtherMeetingForm,
+    SeminarVipForm,
+    AddMeetingCompany
+  },
+  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'
+        },
+        companyContactId: {
+          rules: [{required: true, message: '请选择参会人'}],
+          validateTrigger: 'change'
+        },
+        phone: {
+          rules: [{required: true, message: '请输入手机号'}],
+          validateTrigger: 'blur'
+        },
+        email: {
+          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,
+      url:{
+        add:''
+      }
+    }
+  },
+  created() {
+    document.title = '会议报名'
+    // 获取会议id
+    let id = this.GetQueryString('id')
+    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 = Number(this.currentMeetingInfo.meetingCosts) + Number(this.currentMeetingInfo.meetingCostsVip)
+          } else {
+            this.meetingMoney = `普通会员(${this.currentMeetingInfo.meetingCosts}/人)`
+            // 费用合计
+            this.meetingCostSum = Number(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 {
+          console.log(res.message)
+        }
+      })
+    },
+    /*
+    * 会议类型
+    * */
+    initMeetingType(val) {
+      if (val) {
+        switch (val) {
+          case '1':
+            return '工作组会议'
+          case '2':
+            return '标协会议'
+          case '3':
+            return '国际研讨会'
+          case '4':
+            return '其他会议'
+          case '5':
+            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
+    },
+    /*
+     *  确定
+     * */
+    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) {
+          this.confirmLoading = true
+          let submitData = Object.assign({},values,this.formData)
+          submitData.companyId = values.companyId.id
+          // 会议id
+          submitData.meetingId = this.meetingId
+          // 会议类型
+          submitData.meetingType = this.meetingType
+          console.log(submitData)
+          let url = this.url.add
+          let method = 'post'
+          httpAction(url,submitData,method).then(res => {
+            if(res.success){
+              that.$emit('ok')
+              that.handleCancel()
+              that.$message.success(res.message)
+              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
+      }
+    },
+    /*
+    * 选择嘉宾类型
+    * */
+    changeGuestType(e) {
+      this.guestType = e.target.value
+    },
+    /*
+    * 选择参会企业
+    * */
+    changeCompany(value) {
+      this.selectedCompany = value
+    },
+    /*
+    * 选择联系人获取信息
+    * */
+    changeContact(val) {
+      const that = this
+      getContactsById({id: val}).then(res => {
+        const model = Object.assign({}, res.result)
+        // 设置手机 邮箱 职务
+        if (res.success) {
+          that.form.setFieldsValue(pick(model, 'phone', 'email', 'post'))
+        }
+        // 设置邮寄联系人和地址
+        if(this.$refs.formother !== undefined){
+          this.$refs.formother.setAddressVal(res.result)
+        }
+      })
+    },
+    /*
+     * 取消
+     * */
+    handleCancel() {
+      this.$router.go(-1)
+    },
+    addContactsOk() {
+      this.$refs.selectContacts.getContactsList()
+    }
+  }
+}
+</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: 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;
+    }
+  }
+}
+
+.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;
+  }
+}
+</style>