报名页面

2021-09-17 18:12:58 +08:00
parent c418e8daec
commit 2a51b93fcd
10 changed files with 1051 additions and 71 deletions
@@ -1,4 +1,6 @@
 import { UserLayout, TabLayout } from "@/components/layouts";
+import SignUpEntrance from "@views/signUp/SignUpEntrance";
+import SignUpPage from "@views/signUp/SignUpPage";

 /**
 * 走菜单，走权限控制
@@ -51,5 +53,15 @@ export const constantRouterMap = [
        component: () => import(/* webpackChunkName: "user" */ "@/views/user/alteration/Alteration")
      }
    ]
-  }
+  },
+  {
+    path: "/signUpEntrance",
+    component: SignUpEntrance,
+    hidden: true,
+  },
+  {
+    path: "/signUpPage",
+    component: SignUpPage,
+    hidden: true,
+  },
 ];
@@ -9,7 +9,7 @@ import { generateIndexRouter } from '@/utils/util'

 NProgress.configure({ showSpinner: false }) // NProgress Configuration

-const whiteList = ['/user/login', '/user/register', '/user/register-result', '/user/alteration'] // no redirect whitelist
+const whiteList = ['/user/login', '/user/register', '/user/register-result', '/user/alteration','/signUpEntrance','/signUpPage'] // no redirect whitelist

 router.beforeEach((to, from, next) => {
  NProgress.start() // start progress bar
@@ -388,7 +388,9 @@ export default {
      // 签到二维码
      signInQRCode: '',
      // 收款二维码
-      payMentQRCode: ''
+      payMentQRCode: '',
+      // 会议费用
+      meetingCostBool:false
    }
  },
  created() {
@@ -402,6 +404,33 @@ export default {
        this.currentMeetingInfo = Object.assign({}, res.result)
        // 转化会议类型
        this.meetingType = this.generateMeetingType(this.currentMeetingInfo.meetingType)
+        // 计算会议费用 会议费用为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
+          }
+        }
      }
    })
    this.filters.meetingId = this.$route.query.id
@@ -459,7 +488,8 @@ export default {
        path: '/incomePayments/meetManage/SignUpInfoEdit',
        query: {
          meetingType: this.currentMeetingInfo.meetingType,
-          meetingId: this.$route.query.id
+          meetingId: this.$route.query.id,
+          costBool:this.meetingCostBool
        }
      })
    },
@@ -473,6 +503,7 @@ export default {
          id: record.id,
          meetingId: this.$route.query.id,
          meetingType: this.currentMeetingInfo.meetingType,
+          costBool:this.meetingCostBool
        }
      })
    },
@@ -20,64 +20,79 @@

      <a-col :xxl="8" :xl="12" :sm="24">
        <a-form-item label="离开时间" :labelCol="labelCol" :wrapperCol="wrapperCol">
-          <j-date placeholder="请选择离开时间"   :disabled-date="disabledEndDate" style="width: 100%;" v-decorator="['departureTime']" :trigger-change="true"
+          <j-date placeholder="请选择离开时间" :disabled-date="disabledEndDate" style="width: 100%;"
+                  v-decorator="['departureTime']" :trigger-change="true"
                  date-format="YYYY-MM-DD"/>
        </a-form-item>
      </a-col>
    </a-row>
    <!--    选择嘉宾和内部企业、缴费方式为打包也不显示-->
-    <div class="item-title" v-if="identifyType === 2 && !payModeBool ">邮寄信息</div>
-    <a-row :gutter="24">
-      <a-col :xxl="8" :xl="12" :sm="24" v-if="identifyType === 2 && !payModeBool ">
-        <a-form-item label="邮寄联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
-          <select-contacts :selected-company="selectedCompany"
-                           :init-contacts="selectPostPerson"
-                           placeholder="请选择邮寄联系人"
-                           v-decorator="['postContactId',validatorRules.postContactId]"
-                           :maxLength='50'
-                           ref="selectMailContacts"
-                           @ok="addContactsOk"></select-contacts>
-        </a-form-item>
-      </a-col>
-      <!--    选择嘉宾和内部企业、缴费方式为打包也不显示-->
-      <a-col :xxl="8" :xl="12" :sm="24" v-if="identifyType === 2 && !payModeBool ">
-        <a-form-item label="地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
-          <a-input placeholder="请输入地址"
-                   :maxLength='50'
-                   v-decorator="[ 'postContactAddress']"></a-input>
-        </a-form-item>
-      </a-col>
-    </a-row>
+    <!--    会议费为0不显示 -->
+    <template v-if="!meetingCostBool">
+      <div class="item-title" v-if="identifyType === 2 && !payModeBool ">邮寄信息</div>
+      <a-row :gutter="24">
+        <a-col :xxl="8" :xl="12" :sm="24" v-if="identifyType === 2 && !payModeBool ">
+          <a-form-item label="邮寄联系人" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <select-contacts :selected-company="selectedCompany"
+                             :init-contacts="selectPostPerson"
+                             placeholder="请选择邮寄联系人"
+                             v-decorator="['postContactId',validatorRules.postContactId]"
+                             :maxLength='50'
+                             ref="selectMailContacts"
+                             @ok="addContactsOk"></select-contacts>
+          </a-form-item>
+        </a-col>
+        <!--    选择嘉宾和内部企业、缴费方式为打包也不显示-->
+        <a-col :xxl="8" :xl="12" :sm="24" v-if="identifyType === 2 && !payModeBool ">
+          <a-form-item label="地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input placeholder="请输入地址"
+                     :maxLength='50'
+                     v-decorator="[ 'postContactAddress']"></a-input>
+          </a-form-item>
+        </a-col>
+
+        <a-col :xxl="8" :xl="12" :sm="24" v-if="identifyType === 2 && !payModeBool ">
+          <a-form-item label="邮编" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-input placeholder="请输入邮编"
+                     :maxLength='50'
+                     v-decorator="[ 'postContacCode']"></a-input>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </template>

-    <div class="item-title" v-if="identifyType === 2 && !payModeBool">缴费信息</div>
    <!--    选择嘉宾和内部企业、缴费方式为打包也不显示-->
-    <a-row :gutter="24">
-      <a-col :xxl="8" :xl="12" :sm="24" v-if="identifyType === 2">
-        <a-form-item label="缴费方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
-          <a-radio-group v-decorator="['payMode',validatorRules.payMode]" @change="changePayMode">
-            <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 === 2 && !payModeBool ">
-        <a-form-item label="需要发票" :labelCol="labelCol" :wrapperCol="wrapperCol">
-          <j-dict-select-tag style="width: 100%" dict-code="invoice_type"
-                             v-decorator="['needInvoice',validatorRules.needInvoice]"
-                             :trigger-change="true"
-                             placeholder="请选择发票类型"></j-dict-select-tag>
-        </a-form-item>
-      </a-col>
-      <!--    选择嘉宾和内部企业、缴费方式为打包也不显示-->
-      <a-col :xxl="8" :xl="12" :sm="24" v-if="identifyType === 2 && !payModeBool  ">
-        <a-form-item label="付款凭证" :labelCol="labelCol" :wrapperCol="wrapperCol">
-          <j-image-upload v-decorator="['paymentRecord']" :return-id="true"></j-image-upload>
-        </a-form-item>
-      </a-col>
+    <!--    会议费为0不显示 -->
+    <template v-if="!meetingCostBool">
+      <div class="item-title" v-if="identifyType === 2 && !payModeBool">缴费信息</div>
+      <a-row :gutter="24">
+        <a-col :xxl="8" :xl="12" :sm="24" v-if="identifyType === 2">
+          <a-form-item label="缴费方式" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <a-radio-group v-decorator="['payMode',validatorRules.payMode]" @change="changePayMode">
+              <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 === 2 && !payModeBool ">
+          <a-form-item label="需要发票" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <j-dict-select-tag style="width: 100%" dict-code="invoice_type"
+                               v-decorator="['needInvoice',validatorRules.needInvoice]"
+                               :trigger-change="true"
+                               placeholder="请选择发票类型"></j-dict-select-tag>
+          </a-form-item>
+        </a-col>
+        <!--    选择嘉宾和内部企业、缴费方式为打包也不显示-->
+        <a-col :xxl="8" :xl="12" :sm="24" v-if="identifyType === 2 && !payModeBool  ">
+          <a-form-item label="付款凭证" :labelCol="labelCol" :wrapperCol="wrapperCol">
+            <j-image-upload v-decorator="['paymentRecord']" :return-id="true"></j-image-upload>
+          </a-form-item>
+        </a-col>

-    </a-row>
+      </a-row>
+    </template>
  </a-form>
 </template>

@@ -117,6 +132,11 @@ export default {
    guestType: {
      type: Number,
      required: false
+    },
+    // 会议费用是否为0
+    meetingCostBool:{
+      type:Boolean,
+      required:false,
    }
  },
  data() {
@@ -140,9 +160,9 @@ export default {
        sm: {span: 21}
      },
      // 缴费方式为打包
-      payModeBool:false,
+      payModeBool: false,
      // 回显的邮寄联系人
-      selectPostPerson:null,
+      selectPostPerson: null,
      validatorRules: {
        postContactId: {
          rules: [{required: true, message: '请选择邮寄联系人'}],
@@ -159,10 +179,10 @@ export default {
      }
    }
  },
-  watch:{
+  watch: {
    // 监听它是因为 当选择参会人并且选择打包 再去切换身份 底下不显示bug
-    identifyType(val){
-      if(val !== 2){
+    identifyType(val) {
+      if (val !== 2) {
        this.payModeBool = false
        console.log(val)
        return val
@@ -175,8 +195,8 @@ export default {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$emit('formData', values)
-        }else {
-          this.$emit('formData', {stop:true})
+        } else {
+          this.$emit('formData', {stop: true})
        }
      })
    },
@@ -194,7 +214,7 @@ export default {
    * */
    disabledEndDate(endValue) {
      const startValueTemp = this.form.getFieldValue('arrivalTime')
-      const startValue = startValueTemp  && moment(startValueTemp ,'YYYY-MM-DD')
+      const startValue = startValueTemp && moment(startValueTemp, 'YYYY-MM-DD')
      if (!endValue || !startValue) {
        return false
      }
@@ -203,22 +223,22 @@ export default {
    /*
    * 缴费方式选择
    * */
-    changePayMode(e){
-      if(e.target.value === 3){
+    changePayMode(e) {
+      if (e.target.value === 3) {
        this.payModeBool = true
-      }else {
+      } else {
        this.payModeBool = false
      }
    },
    /*
    * 编辑回显值
    * */
-    setFormVal(record){
-      console.log('record============',record)
+    setFormVal(record) {
+      console.log('record============', record)
      // 回显邮寄联系人
      this.selectPostPerson = {
-        id:record.postContactTemporaryId,
-        name:record.postContactName
+        id: record.postContactTemporaryId,
+        name: record.postContactName
      }
      this.$nextTick(() => {
        // 身份类型是嘉宾 内部企业只渲染 住店 抵达时间 离开时间
@@ -84,13 +84,13 @@
          <!--个人信息end-->
          <!--除开国际研讨会的其他会议的显示-->
          <template v-if="meetingType !== '3' ">
-            <other-meeting-form ref="formother" :selected-company="selectedCompany"
+            <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"
+            <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-->
@@ -201,6 +201,8 @@ export default {
      selectPerson:null,
      // 会议类型
      meetingType: '',
+      // 会议费用是否为0
+      meetingCostBool:false,
      url:{
        add:'/meeting/payMeetingSituation/add',
        edit:'/meeting/payMeetingSituation/edit'
@@ -209,6 +211,12 @@ export default {
  },
  created() {
    this.meetingType = this.$route.query.meetingType
+    // 参会情况页面判断的是否会议费用为0  true 为0
+    if(this.$route.query.costBool === 'true'){
+      this.meetingCostBool = true
+    }else if(this.$route.query.costBool === 'false'){
+      this.meetingCostBool = false
+    }
    if(this.$route.query.id){
      // 通过id获取参会人信息
      getSingUpUserInfo({id:this.$route.query.id}).then(res => {
@@ -0,0 +1,277 @@
+<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 }}</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>
+          </a-row>
+          <a-row>
+            <img :src="singUpQRCode" class="qr-code"/>
+          </a-row>
+          <a-button type="primary" style="margin-left: 19px;" @click="toSingUpPage">立即报名</a-button>
+        </section>
+      </div>
+    </section>
+    <!--内容end-->
+  </div>
+</template>
+
+<script>
+import {createQcCode} from '@api/incomeMeetingApi'
+import {getMeetInfoById} from '@api/incomeMeetingApi'
+
+export default {
+  name: 'SignUpEntrance',
+  data() {
+    return {
+      description: '报名入口',
+      // 报名二维码
+      singUpQRCode: '',
+      // 会议详情
+      currentMeetingInfo: {},
+      // 会议费用
+      meetingMoney: '',
+      // 召开时间
+      holdtime:'',
+      // 召开地点
+      holdAddress:'',
+      // 会议id
+      meetingId:''
+    }
+  },
+  created() {
+    // 获取会议id
+    let id = this.GetQueryString('id')
+    this.meetingId = id
+    document.title = '报名入口'
+    if(id){
+      this.getMeetingInfo(id)
+    }
+  },
+  async mounted() {
+    this.singUpQRCode = await this.generateQRCode('123')
+  },
+  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
+          // 初始化会议费用
+          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 {
+          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
+    }
+  }
+}
+</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;
+}
+
+</style>
@@ -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>