master

分支 (1)

管理

管理

master

international-schools-mobile
/
evaluationApplication.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<link rel="icon" href="./favicon.ico" />
<title>报考资格测评</title>
<script src="./assets/js/global.js"></script>
</head>

<body>

<div v-cloak id="app">
  <zb-main>

    <div class="evaluation-application-page">

      <div class="evaluation-module-1">
        <evaluation-module title="学生性别">
          <div class="list">
            <div class="item item-1" :class="{ active: payload.sex === 1 }" @click="updateSex(1)">
              <div class="icon">
                <img src="./assets/images/evaluation/boy-icon.png" alt="">
              </div>
              <div class="name">男生</div>
              <div v-if="payload.sex === 1" class="checked"></div>
            </div>
            <div class="item item-2" :class="{ active: payload.sex === 2 }" @click="updateSex(2)">
              <div class="icon">
                <img src="./assets/images/evaluation/girl-icon.png" alt="">
              </div>
              <div class="name">女生</div>
              <div v-if="payload.sex === 2" class="checked"></div>
            </div>
          </div>
          <div class="form">
            <div class="left">
              <span>Hi</span>你好！
            </div>
            <div class="right">
              <div class="item">
                <div class="label">请问您叫：</div>
                <input v-model.trim="payload.name" placeholder="请填写您的姓名" type="text">
              </div>
              <div class="item">
                <div class="label">联系方式：</div>
                <input v-model.trim="payload.mobile" placeholder="请填写您的手机号码" type="tel">
              </div>
            </div>
          </div>
        </evaluation-module>
      </div>

      <div class="evaluation-module-2">
        <evaluation-module title="学生入学年级">
          <div class="list">
            <div v-for="(item,index) in gradeList" :key="index" class="item" :class="{ active: item.id === payload.grade }" @click="updateGrade(item.id)">{{item.name}}</div>
          </div>
        </evaluation-module>
      </div>

      <div class="evaluation-module-3">
        <evaluation-module title="报考地区">
          <div class="wrapper">
            <div class="left">
              <div v-for="(item,index) in applicationArea" :key="index" class="item" :class="{ active: item.id === payload.cityId }" @click="updateCity(item.id)">
                <span>{{item.name}}</span>
              </div>
            </div>
            <div class="right">
              <div class="list">
                <div v-for="(item,index) in regionList" :key="index" class="item" :class="{ active: item.id === payload.regionId }" @click="updateRegion(item.id)">{{item.name}}</div>
              </div>
            </div>
          </div>
        </evaluation-module>
      </div>

      <div class="evaluation-module-4">
        <evaluation-module title="学生户籍学籍情况">
          <div class="list">
            <div v-for="(item,index) in studentResidences" class="item" :class="{ active: payload.domicile === item.value }" @click="payload.domicile = item.value">
              {{item.label}}
            </div>
          </div>
          <div class="remarks">
            <div class="label">备注：</div>
            <div class="txt">
              <textarea v-model.trim="payload.remark" placeholder="可填写学生户籍/学籍特殊情况"></textarea>
            </div>
          </div>
        </evaluation-module>
      </div>

      <div class="evaluation-module-5">
        <evaluation-module title="学生英文水平情况">
          <div class="list">
            <div class="item">
              <div class="left">有雅思成绩</div>
              <div class="right">
                <div class="score">分数：</div>
                <input type="text" v-model.trim="payload.ieltsScore">
              </div>
            </div>
            <div class="item">
              <div class="left">有托福成绩</div>
              <div class="right">
                <div class="score">分数：</div>
                <input type="text" v-model.trim="payload.toeflScore">
              </div>
            </div>
            <div class="item">
              <div class="left">SAT/SSAT成绩</div>
              <div class="right">
                <div class="score">分数：</div>
                <input type="text" v-model.trim="payload.satScore">
              </div>
            </div>
          </div>
          <div class="needs">
            <div v-for="(item,index) in boardNeedList" :key="index" class="item" :class="{ active: item.value === payload.boardNeed }" @click="payload.boardNeed = item.value">{{item.label}}</div>
          </div>
          <div class="btn" @click="handleSubmit">提交测评结果</div>
        </evaluation-module>
      </div>

    </div>

  </zb-main>
</div>

<script type="text/babel">
  new Vue({
    el: '#app',
    data: {
      payload: {
        sex: 1,
        name: '',
        mobile: '',
        grade: '',
        cityId: '1001',
        regionId: '100101',
        domicile: '',
        remark: '',
        toeflScore: '',
        ieltsScore: '',
        satScore: '',
        boardNeed: ''
      },
      // 寄宿需求
      boardNeedList: [
        { label: '没有寄宿需求', value: 1 },
        { label: '不方便每天接送，考虑能寄宿的学校', value: 2 },
        { label: '短时间没有寄宿需求，但之后可能会', value: 3 },
      ],
      // 入学年级
      gradeList: [
        { id: 1, name: '幼儿园' },
        { id: 2, name: '学前班' },
        { id: 3, name: '一年级' },
        { id: 4, name: '二年级' },
        { id: 5, name: '三年级' },
        { id: 6, name: '四年级' },
        { id: 7, name: '五年级' },
        { id: 8, name: '六年级' },
        { id: 9, name: '七年级' },
        { id: 10, name: '八年级' },
        { id: 11, name: '九年级' },
        { id: 12, name: '十年级' },
        { id: 13, name: '十一年级' },
        { id: 14, name: '十二年级' }
      ],
      // 报考地区
      applicationArea: [
        {
          name: '北京',
          id: '1001',
          list: [
            { name: '东城区', id: '100101' },
            { name: '西城区', id: '100102' },
            { name: '朝阳区', id: '100103' },
            { name: '丰台区', id: '100104' },
            { name: '石景山区', id: '100105' },
            { name: '海淀区', id: '100106' },
            { name: '顺义区', id: '100107' },
            { name: '通州区', id: '100108' },
            { name: '大兴区', id: '100109' },
            { name: '房山区', id: '1001010' },
            { name: '门头沟区', id: '1001011' },
            { name: '昌平区', id: '1001012' },
            { name: '平谷区', id: '1001013' },
            { name: '密云区', id: '1001014' },
            { name: '怀柔区', id: '1001015' },
            { name: '延庆区', id: '1001016' },
          ]
        },{
          name: '河北',
          id: '1002',
          list: [
            { name: '海淀区', id: '100101' },
            { name: '朝阳区', id: '100102' },
            { name: '大兴区', id: '100103' },
            { name: '石景山区', id: '100104' },
            { name: '东城区', id: '100105' },
            { name: '西城区', id: '100106' },
            { name: '顺义区', id: '100107' },
            { name: '怀柔区', id: '100108' },
            { name: '门头沟', id: '100109' },
            { name: '延庆区', id: '1001010' },
            { name: '昌平区', id: '1001011' },
            { name: '通州区', id: '1001012' },
            { name: '平谷区', id: '1001013' },
            { name: '丰台区', id: '1001014' },
            { name: '房山区', id: '1001015' },
            { name: '密云区', id: '1001016' },
          ]
        },{
          name: '天津',
          id: '1003',
          list: [
            { name: '和平区', id: '100101' },
            { name: '河东区', id: '100102' },
            { name: '河西区', id: '100103' },
            { name: '南开区', id: '100104' },
            { name: '河北区', id: '100105' },
            { name: '红桥区', id: '100106' },
            { name: '东丽区', id: '100107' },
            { name: '西青区', id: '100108' },
            { name: '津南区', id: '100109' },
            { name: '北辰区', id: '1001010' },
            { name: '武清区', id: '1001011' },
            { name: '宝坻区', id: '1001012' },
            { name: '滨海新区', id: '1001013' },
            { name: '宁河区', id: '1001014' },
            { name: '静海区', id: '1001015' },
            { name: '蓟州区', id: '1001016' },
          ]
        },{
          name: '山东',
          id: '1004',
          list: [
            { name: '海淀区', id: '100101' },
            { name: '朝阳区', id: '100102' },
            { name: '大兴区', id: '100103' },
            { name: '石景山区', id: '100104' },
            { name: '东城区', id: '100105' },
            { name: '西城区', id: '100106' },
            { name: '顺义区', id: '100107' },
            { name: '怀柔区', id: '100108' },
            { name: '门头沟', id: '100109' },
            { name: '延庆区', id: '1001010' },
            { name: '昌平区', id: '1001011' },
            { name: '通州区', id: '1001012' },
            { name: '平谷区', id: '1001013' },
            { name: '丰台区', id: '1001014' },
            { name: '房山区', id: '1001015' },
            { name: '密云区', id: '1001016' },
          ]
        },{
          name: '四川',
          id: '1005',
          list: [
            { name: '海淀区', id: '100101' },
            { name: '朝阳区', id: '100102' },
            { name: '大兴区', id: '100103' },
            { name: '石景山区', id: '100104' },
            { name: '东城区', id: '100105' },
            { name: '西城区', id: '100106' },
            { name: '顺义区', id: '100107' },
            { name: '怀柔区', id: '100108' },
            { name: '门头沟', id: '100109' },
            { name: '延庆区', id: '1001010' },
            { name: '昌平区', id: '1001011' },
            { name: '通州区', id: '1001012' },
            { name: '平谷区', id: '1001013' },
            { name: '丰台区', id: '1001014' },
            { name: '房山区', id: '1001015' },
            { name: '密云区', id: '1001016' },
          ]
        },{
          name: '广东',
          id: '1006',
          list: [
            { name: '海淀区', id: '100101' },
            { name: '朝阳区', id: '100102' },
            { name: '大兴区', id: '100103' },
            { name: '石景山区', id: '100104' },
            { name: '东城区', id: '100105' },
            { name: '西城区', id: '100106' },
            { name: '顺义区', id: '100107' },
            { name: '怀柔区', id: '100108' },
            { name: '门头沟', id: '100109' },
            { name: '延庆区', id: '1001010' },
            { name: '昌平区', id: '1001011' },
            { name: '通州区', id: '1001012' },
            { name: '平谷区', id: '1001013' },
            { name: '丰台区', id: '1001014' },
            { name: '房山区', id: '1001015' },
            { name: '密云区', id: '1001016' },
          ]
        },
      ],
      // 学生户籍学籍情况
      studentResidences: [
        { label: '一、有报考地区户籍和学籍', value: 1 },
        { label: '二、没有报考地区户籍有本市学籍', value: 2 },
        { label: '三、有报考地区户籍没有本市学籍', value: 3 },
        { label: '四、没有报考地区户籍和学籍', value: 4 },
      ],
    },
    computed: {
      regionList() {
        const target = this.applicationArea.find(v => v.id === this.payload.cityId)
        if (target) {
          return target.list
        }
        return []
      }
    },
    components: {
      'evaluation-module': {
        template: `
          <div class="evaluation-module">
            <div class="titles">
              <div class="title">
                选择<span>{{title}}</span>
              </div>
            </div>
            <slot />
          </div>
        `,
        props: {
          title: String,
        }
      }
    },
    methods: {
      onlineService() {
        onlineService()
      },
      updateSex(sex) {
        this.payload.sex = sex
      },
      updateGrade(grade) {
        this.payload.grade = grade
      },
      updateCity(cityId) {
        this.payload.cityId = cityId
        this.payload.regionId = this.regionList[0].id
      },
      updateRegion(regionId) {
        this.payload.regionId = regionId
      },
      handleSubmit() {
        const {
          sex,
          name,
          mobile,
          grade,
          cityId,
          regionId,
          domicile,
          remark,
          toeflScore,
          ieltsScore,
          satScore,
          boardNeed
        } = this.payload
        if (!sex) {
          vant.Notify({ type: 'warning', message: '请选择性别', duration: 1500 })
          return
        }
        if (!name) {
          vant.Notify({ type: 'warning', message: '请填写您的姓名', duration: 1500 })
          return
        }
        if (!mobile) {
          vant.Notify({ type: 'warning', message: '请填写您的手机号码', duration: 1500 })
          return
        }
        if (!commonRegulars.mobile.test(mobile)) {
          vant.Notify({ type: 'warning', message: '请填写正确的手机号码', duration: 1500 })
          return
        }
        if (!grade) {
          vant.Notify({ type: 'warning', message: '请选择学生入学年级', duration: 1500 })
          return
        }
        if (!regionId) {
          vant.Notify({ type: 'warning', message: '请选择报考地区', duration: 1500 })
          return
        }
        if (!domicile) {
          vant.Notify({ type: 'warning', message: '请选择学生户籍学籍情况', duration: 1500 })
          return
        }
        if (!remark) {
          vant.Notify({ type: 'warning', message: '请填写学生户籍/学籍特殊情况', duration: 1500 })
          return
        }
        if (toeflScore && !commonRegulars.score.test(toeflScore)) {
          vant.Notify({ type: 'warning', message: '请填写正确的分数', duration: 1500 })
          return
        }
        if (ieltsScore && !commonRegulars.score.test(ieltsScore)) {
          vant.Notify({ type: 'warning', message: '请填写正确的分数', duration: 1500 })
          return
        }
        if (satScore && !commonRegulars.score.test(satScore)) {
          vant.Notify({ type: 'warning', message: '请填写正确的分数', duration: 1500 })
          return
        }
        if (!boardNeed) {
          vant.Notify({ type: 'warning', message: '请选择寄宿需求', duration: 1500 })
          return
        }
        console.log('提交数据 === ', this.payload)
      }
    },
    mounted() {

    }
  })
</script>

</body>
</html>