修改师资培训报名相关文字和报名表单

src/components/tabs/screenTabs.vue

 <template>
   <div class="tabs-box">
-    <div class="name">{{ data.name }}</div>
+    <div class="name">{{ data.title }}</div>
     <ul>
       <template v-for="(item, index) in data.options">
         <li
@@ -18,18 +18,23 @@ export default {
     data: {
       type: Object,
       default: {}
+    },
+    activeIndex: {
+      type: Number,
+      default: 0
     }
   },
   components: {
   },
   data() {
     return {
-      tabsIndex: 0
+      tabsIndex: this.activeIndex
     }
   },
   methods: {
     tabs(n) {
       this.tabsIndex = n
+      this.$emit('update:activeIndex', n)
     }
   }
 }

src/pages/train/components/item.vue

 <template>
   <div class="item-box">
-    <img :src="data.cover_pc_url" alt="">
+    <img :src="data.imgUri" alt="">
     <div class="right-content">
       <div class="title">{{ data.title }}</div>
       <!-- v-html="data.additional" -->
       <div class="des-box">
         <!-- <p class="ind">计划时间：3.24-3.26</p> -->
-        <p>计划时间：4月23日-4月25日</p>
+        <p>计划时间：{{data.time}}</p>
         <!-- <p class="ind">ISBN：基础数据维护及档案管理</p> -->
-        <p>计划人数：100</p>
+        <p>计划人数：{{data.count}}</p>
       </div>
-      <router-link :to="`/train/detail?id=${data.id}`">
+      <router-link :to="`/train/detail?id=69`" v-if="data.activeIndex === 1">
         <div class="detail-btn">在线报名</div>
       </router-link>
+      <div class="detail-btn" v-if="data.activeIndex === 2">敬请期待</div>
+      <div class="detail-btn finished" v-if="data.activeIndex === 3">圆满结束</div>
     </div>
     <!-- <div class="right-time">
       <div class="week">{{ setDate('w') }}</div>
@@ -91,6 +93,9 @@ export default {
       border-radius: 4px;
       margin-top: 16px;
     }
+    .finished{
+      background:#a9a3a9;
+    }
   }
 }
 .right-time{

src/pages/train/components/payPop.vue

@@ -8,7 +8,7 @@
       </div>
       <div class="tips-cen mar-t-20">
         <div class="name">费&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用：</div>
-        <div class="money">1780<span>元</span></div>
+        <div class="money">2960<span>元</span></div>
       </div>
       <div class="tips-top">
         <div class="name">支付方式：</div>

src/pages/train/detail.vue

@@ -11,8 +11,8 @@
             <div class="des-box">
               <p>活动类型：师资培训</p>
               <p>培训形式：线下培训</p>
-              <p>培训地点：汇丰大厦浙江金苑培训中心（浙江金融职业学院培训中心）</p>
-              <p>培训时间：4月23日-4月25日</p>
+              <p>培训地点：河南郑州金苑培训中心（浙江金融职业学院培训中心）</p>
+              <p>培训时间：6月15日-6月19日</p>
             </div>
             <router-link to="/train/form">
               <div class="detail-btn">立即报名</div>

src/pages/train/form.vue

@@ -3,68 +3,67 @@
     <!-- <breadcrumb class="content-max-width crumb" :data="crumbData"/> -->
     <div class="title-form">师资培训报名信息填写</div>
     <div class="form-box">
-      <el-form ref="form" :model="form" label-width="80px" class="forms" :disabled="isPayStatus">
-        <el-form-item label="院校名称" label-width="110px">
+      <el-form ref="form" :model="form" :rules="rules" label-width="110px" class="forms" :disabled="isPayStatus">
+        <el-form-item label="院校名称" prop="school_name">
           <el-input v-model="form.school_name"></el-input>
         </el-form-item>
-        <el-form-item label="院校地址" label-width="110px">
-          <el-input v-model="form.school_address"></el-input>
-        </el-form-item>
-        <el-form-item label="真实姓名" id="name" label-width="110px">
+        <el-form-item label="真实姓名" id="name" prop="username">
           <el-input v-model="form.username"></el-input>
         </el-form-item>
-        <el-form-item label="性别" id="sex" label-width="110px">
-          <el-select v-model="form.sex" placeholder="请选择" class="width100">
-            <el-option label="男" value="1"></el-option>
-            <el-option label="女" value="2"></el-option>
-          </el-select>
+        <el-form-item label="性别" id="sex" prop="sex">
+          <el-radio-group v-model="form.sex">
+            <el-radio label="1">男</el-radio>
+            <el-radio label="2">女</el-radio>
+          </el-radio-group>
         </el-form-item>
-        <el-form-item label="民族" id="mz" label-width="110px">
+        <el-form-item label="民族" id="mz" prop="nation">
           <el-input v-model="form.nation"></el-input>
         </el-form-item>
-        <el-form-item label="院系及职务" label-width="110px">
+        <!-- <el-form-item label="院系及职务">
           <el-input v-model="form.department_duty"></el-input>
-        </el-form-item>
-        <el-form-item label="身份证号" label-width="110px">
+        </el-form-item> -->
+        <el-form-item label="身份证号" prop="id_num">
           <el-input v-model="form.id_num"></el-input>
         </el-form-item>
-        <el-form-item label="常用邮箱" id="mail" label-width="110px">
+        <!-- <el-form-item label="常用邮箱" id="mail">
           <el-input v-model="form.email"></el-input>
+        </el-form-item> -->
+        <el-form-item label="住宿方式" id="zs" prop="live_status">
+          <el-radio-group v-model="form.live_status">
+            <el-radio label="1">单住</el-radio>
+            <el-radio label="2">单住</el-radio>
+            <el-radio label="0">无</el-radio>
+          </el-radio-group>
         </el-form-item>
-        <el-form-item label="单/合住" id="zs" label-width="110px">
-          <el-select v-model="form.live_status" placeholder="请选择" class="width100">
-            <el-option label="单住" value="1"></el-option>
-            <el-option label="合住" value="2"></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label-width="110px">
+        <el-form-item style="height:10px;">
           <div class="line">发票信息填写</div>
         </el-form-item>
-        <el-form-item label="发票类型" id="fplx" label-width="110px">
+        <el-form-item label="发票类型" id="fplx" prop="invoice_type">
           <el-select v-model="form.invoice_type" placeholder="请选择" class="width100">
-            <el-option label="增值税普通发票" value="增值税普通发票"></el-option>
-            <el-option label="增值税专用发票" value="增值税专用发票"></el-option>
+            <el-option label="无" value="无"></el-option>
+            <el-option label="普通发票" value="增值税普通发票"></el-option>
+            <el-option label="专用发票" value="增值税专用发票"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="发票抬头" label-width="110px">
+        <el-form-item label="发票抬头" v-if="form.invoice_type && form.invoice_type !== '无'" prop="invoice_title" :rules="{ required: true, message: '请输入发票抬头', trigger: 'blur' }">
           <el-input v-model="form.invoice_title"></el-input>
         </el-form-item>
-        <el-form-item label="纳税人识别号" label-width="110px">
+        <el-form-item label="纳税人识别号" v-if="form.invoice_type && form.invoice_type !== '无'" prop="taxpayer_registration_num" :rules="{ required: true, message: '请输入纳税人识别号', trigger: 'blur' }">
           <el-input v-model="form.taxpayer_registration_num"></el-input>
         </el-form-item>
-        <el-form-item label="地址电话" label-width="110px">
+        <el-form-item label="注册地址" v-if="form.invoice_type === '增值税专用发票'" prop="invoice_address_mobile" :rules="{ required: true, message: '请输入注册地址', trigger: 'blur' }">
           <el-input v-model="form.invoice_address_mobile"></el-input>
         </el-form-item>
-        <el-form-item label="开户行及账号" id="account" label-width="110px">
+        <el-form-item label="开户行及账号" id="account" v-if="form.invoice_type === '增值税专用发票'" prop="opening_bank_account" :rules="{ required: true, message: '请输入开户行及账号', trigger: 'blur' }">
           <el-input v-model="form.opening_bank_account"></el-input>
         </el-form-item>
-        <el-form-item label="发票内容" id="sh" label-width="110px">
+        <el-form-item label="发票内容" id="sh" v-if="form.invoice_type && form.invoice_type !== '无'">
           <el-input v-model="form.invoice_detail" readonly></el-input>
         </el-form-item>
-        <el-form-item label="手机号码" label-width="110px">
+        <el-form-item label="手机号码" prop="mobile">
           <el-input v-model="form.mobile"></el-input>
         </el-form-item>
-        <el-form-item label="验证码" label-width="110px" v-if="!isLogin">
+        <el-form-item label="验证码" v-if="!isLogin">
           <el-input style="width: 166px" v-model="form.checked_code"></el-input>
           <el-button
             style="border-radius: 3px; width: 118px"
@@ -132,13 +131,31 @@ import breadcrumb from '@/components/breadcrumb'
 import payPop from './components/payPop'
 const IDCARD_REG = /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/
 const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
-const EMAIL_REG = /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
+const EMAIL_REG = /^[A-Za-z0-9]+([_\.\\-][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/
 export default {
   components: {
     breadcrumb,
     payPop
   },
   data() {
+    const IDChecked = (rule, value, callback) => {
+      if (value) {
+        if (!IDCARD_REG.test(value)) {
+          callback(new Error('身份证号格式错误'))
+        } else {
+          callback()
+        }
+      }
+    }
+    const mobileChecked = (rule, value, callback) => {
+      if (value) {
+        if (!MOBILE_REG.test(value)) {
+          callback(new Error('手机号格式错误'))
+        } else {
+          callback()
+        }
+      }
+    }
     return {
       isInfoNull: false,
       isPayStatus: false,
@@ -153,13 +170,13 @@ export default {
       ],
       form: {
         school_name: '',
-        school_address: '',
+        // school_address: '',
         username: '',
         sex: '',
         nation: '',
-        department_duty: '',
+        // department_duty: '',
         id_num: '',
-        email: '',
+        // email: '',
         live_status: '',
         invoice_type: '',
         invoice_title: '',
@@ -170,6 +187,22 @@ export default {
         mobile: '',
         checked_code: ''
       },
+      rules: {
+        school_name: { required: true, message: '请输入院校名称', trigger: 'blur' },
+        username: { required: true, message: '请输入真实姓名', trigger: 'blur' },
+        sex: { required: true, message: '请选择性别', trigger: 'change' },
+        nation: { required: true, message: '请输入民族', trigger: 'blur' },
+        id_num: [
+          { required: true, message: '请输入身份证号', trigger: 'blur' },
+          { validator: IDChecked, trigger: 'blur' }
+        ],
+        live_status: { required: true, message: '请选择居住方式', trigger: 'change' },
+        invoice_type: { required: true, message: '请选择发票类型', trigger: 'change' },
+        mobile: [
+          { required: true, message: '请输入手机号', trigger: 'blur' },
+          { validator: mobileChecked, trigger: 'blur' }
+        ]
+      },
       isBtnDisabled: false,
       isPayPopShow: false,
       isLogin: false
@@ -186,10 +219,10 @@ export default {
   },
   mounted() {
     // $('#name label').html('姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名')
-    $('#sex label').html('性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别')
-    $('#mz label').html('民&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族')
+    $('#sex>label').html('性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别')
+    $('#mz>label').html('民&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族')
     // $('#mail label').html('邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱')
-    $('#zs label').html('单&nbsp;/合住')
+    // $('#zs>label').html('单&nbsp;/合住')
     // $('#account label').html('账&nbsp;&nbsp;&nbsp;号')
     // $('#sh label').html('税&nbsp;&nbsp;&nbsp;号')
   },
@@ -272,26 +305,33 @@ export default {
           this.form.order_no = '1'
         }
       }
-      let flag = true
-      Object.keys(this.form).map(item => {
-        if (this.form[item] === '') {
-          console.log(item)
-          flag = false
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          call()
+        } else {
+          return false
         }
       })
-      console.log(this.form)
-      if (!flag) {
-        // this.$message('请完善信息')
-        this.message('请完善信息')
-      } else if (!MOBILE_REG.test(this.form.mobile)) {
-        this.message('手机号格式错误')
-      } else if (!IDCARD_REG.test(this.form.id_num)) {
-        this.message('身份证号格式错误')
-      } else if (!EMAIL_REG.test(this.form.email)) {
-        this.message('邮箱格式错误')
-      } else {
-        call()
-      }
+      // let flag = true
+      // Object.keys(this.form).map(item => {
+      //   if (this.form[item] === '') {
+      //     console.log(item)
+      //     flag = false
+      //   }
+      // })
+      // console.log(this.form)
+      // if (!flag) {
+      //   // this.$message('请完善信息')
+      //   this.message('请完善信息')
+      // } else if (!MOBILE_REG.test(this.form.mobile)) {
+      //   this.message('手机号格式错误')
+      // } else if (!IDCARD_REG.test(this.form.id_num)) {
+      //   this.message('身份证号格式错误')
+      // } else if (!EMAIL_REG.test(this.form.email)) {
+      //   this.message('邮箱格式错误')
+      // } else {
+      //   call()
+      // }
     },
     onSubmit() {
       /* let arr = [this.defaultRegister(), this.sendEnrollInfo()];
@@ -378,6 +418,18 @@ export default {
     },
     sendEnrollInfo() {
       let promise = new Promise((resolve, reject) => {
+        const form = {...this.form}
+        if (form.invoice_type !== '增值税专用发票') {
+          delete form.invoice_address_mobile
+          delete form.opening_bank_account
+          if (form.invoice_type === '无') {
+            delete form.invoice_title
+            delete form.taxpayer_registration_num
+            delete form.invoice_detail
+          }
+        }
+        console.log(form)
+        console.log(this.form)
         action.articleAction.formCommit(this.form).then(res => {
           if (res && res.code === 200) {
             resolve({
@@ -543,12 +595,12 @@ export default {
 }
 .line {
   position: absolute;
-  top: 0;
+  top: 10px;
   left: 50%;
   width: 1000px;
   transform: translate(-50%, -10px);
   border-top: 1px dashed #ccc;
-  line-height: 20px;
+  line-height: 30px;
   // margin-bottom: 30px;
 }
 .content-max-width {

src/pages/train/index.vue

 <template>
   <div class="content-max-width">
     <!-- <breadcrumb class="content-max-width crumb" :data="crumbData"/> -->
-    <!-- <btn-tabs class="btn-tabs-box" @tabsChange="tabsChange" :data="btnTabsData"></btn-tabs> -->
-    <template v-if="!tabsIndex">
+    <template>
       <div class="new-tits">师资培训报名</div>
-      <screen-tabs class="screen-tabs-box" :data="screenTabsData"></screen-tabs>
+      <screen-tabs class="screen-tabs-box" :activeIndex.sync="tabsIndex" :data="screenTabsData" @tabChange="HandleTabChange"></screen-tabs>
       <div class="train-mian">
         <ul>
-          <template v-for="(item, index) in list">
-            <li :key="index">
+          <template v-for="(item, index) in tabsContentList">
+            <li :key="index" v-if="tabsIndex === 0 || tabsIndex === item.activeIndex">
               <item :data="item"></item>
             </li>
           </template>
@@ -28,7 +27,7 @@
         </el-pagination>
       </div>
     </template>
-    <template v-else>
+    <template v-if="false">
       <search />
       <noData/>
     </template>
@@ -55,7 +54,30 @@ export default {
     return {
       articleClassify: this.$store.state.classify,
       list: [],
-      tabsIndex: 0,
+      tabsIndex: 1,
+      tabsContentList: [
+        {
+          imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
+          title: '2021年第2期“1+X金融产品数字化营销职业技能等级证书(中级)”师资培训班',
+          time: '6月15日-6月19日',
+          count: 100,
+          activeIndex: 1
+        },
+        {
+          imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
+          title: '2021年第3期“1+X金融产品数字化营销职业技能等级证书(中级)”师资培训班',
+          time: '待定',
+          count: '待定',
+          activeIndex: 2
+        },
+        {
+          imgUri: 'http://vocational-store.oss-cn-beijing.aliyuncs.com/files/20210225/9e74559a240db3b39b824418353ec3a3.jpg',
+          title: '2021年第1期“1+X金融产品数字化营销职业技能等级证书(中级)”师资培训班',
+          time: '4月23日-4月25日',
+          count: 100,
+          activeIndex: 3
+        }
+      ],
       value3: '',
       btnTabsData: {
         options: ['会议报名', '核心专家']
@@ -80,8 +102,9 @@ export default {
     this.newsList()
   },
   methods: {
-    tabsChange(i) {
-      this.tabsIndex = i
+    HandleTabChange(index) {
+      console.log(index)
+      this.tabsIndex = index
     },
     newsList() {
       const loading = this.$loading({