master

分支 (1)

管理

管理

master

international-schools-mobile
/
schoolDetail.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 class="school-detail-container">

<div v-cloak id="app">
  <zb-main type="2" logo="./assets/images/icon/logo-2.png" color="#FF2E30" white>

    <div class="school-detail-1">
      <div class="m0">
        <img src="./assets/images/icon/photo.png" alt="">
      </div>
      <div class="m1">
        <div class="t1">
          <div class="name">北京德闳学校</div>
          <div class="area">通州区</div>
        </div>
        <div class="t2">
          <div class="item item-1">幼儿园</div>
          <div class="item item-2">小学</div>
          <div class="item item-3">初中</div>
          <div class="item item-4">高中</div>
        </div>
        <div class="t3">
          <span>课程方向：</span>双语课程 / IB课程
        </div>
        <div class="t3">
          <span>招生状态：</span>正在招生 / 可插班
        </div>
        <div class="t3">
          <span>授课方式：</span>双语
        </div>
      </div>
      <div class="m2">
        <span>学校详情:</span> {{contentStr}}...<a @click="showMore = !showMore">{{showMore ? '收起' : '查看'}}详情{{showMore ? '<<' : '>>'}}</a>
      </div>
      <div class="m3">
        <div v-for="(item,index) in lists" :key="index" class="item">
          {{item}}
        </div>
      </div>
      <a href="map.html" class="m4">学校地址：北京市通州区榆滨锦苑二区2号楼 </a>
    </div>

    <div class="quick-module-1 quick-module-2" style="margin-bottom:0;padding-bottom:0.1rem;background-color: transparent;">
      <index-title title="学校资讯" bottom="0.5rem">有问必有答</index-title>
      <div class="news-wrapper">
        <div class="news-list">
          <div class="item item-1">
            <div class="head">
              <div class="rank">01</div>
              <div class="bt">择校必读</div>
            </div>
            <div class="box">
              <a class="sub" href="newsDetail.html?id=1"><span>【最新】</span>2023年秋季招生，耀华国际教育学校北京亦庄校区...</a>
              <a class="sub" href="newsDetail.html?id=2">【最新】2023年泛洋文华学校录取分数线是多少?</a>
              <a class="sub" href="newsDetail.html?id=3">【最新】北京新府学外国语学校排名怎么样?</a>
            </div>
          </div>
          <div class="item item-2">
            <div class="head">
              <div class="rank">02</div>
              <div class="bt">优质选校</div>
            </div>
            <div class="box">
              <a class="sub" href="newsDetail.html?id=4"><span>【最新】</span>2023年秋季招生，耀华国际教育学校北京亦庄校区...</a>
              <a class="sub" href="newsDetail.html?id=5">【最新】2023年泛洋文华学校录取分数线是多少?</a>
              <a class="sub" href="newsDetail.html?id=6">【最新】北京新府学外国语学校排名怎么样?</a>
            </div>
          </div>
        </div>
      </div>
      <div class="news-detail-wrapper">
        <div class="item" @click="openModal">
          <img src="./assets/images/quickSelection/service-1.png" alt="" class="icon">
          <div class="name">学校费用</div>
        </div>
        <div class="item">
          <img src="./assets/images/quickSelection/service-2.png" alt="" class="icon">
          <div class="name">入学考试</div>
        </div>
        <div class="item">
          <img src="./assets/images/quickSelection/service-3.png" alt="" class="icon">
          <div class="name">报名流程</div>
        </div>
        <div class="item">
          <img src="./assets/images/quickSelection/service-4.png" alt="" class="icon">
          <div class="name">联系老师</div>
        </div>
      </div>
    </div>

    <div class="school-detail-2">
      <div class="bt">北京德闳学校 填写表单</div>
      <div class="form">
        <div class="form-item">
          <div class="label">学生姓名</div>
          <div class="val">
            <input v-model.trim="payload.name" placeholder="请输入您的姓名" type="text">
          </div>
        </div>
        <div class="form-item">
          <div class="label">学生性别</div>
          <div class="val radio-box">
            <label v-for="(item,index) in sexRange">
              <input class="radio" v-model="payload.sex" type="radio" name="sex" :value="item.value">
              <span>{{item.label}}</span>
            </label>
          </div>
        </div>
        <div class="form-item">
          <div class="label">出生日期</div>
          <div class="val" @click="showDatePicker = true">
            <input v-model.trim="payload.birthDay" readonly placeholder="请选择您的出生日期" type="text">
            <img src="./assets/images/icon/date.png" alt="" class="icon">
          </div>
        </div>
        <div class="form-item">
          <div class="label">申请年级</div>
          <div class="val" @click="showGradePicker = true">
            <input v-model="gradeStr" readonly placeholder="请选择年级" type="text">
            <img src="./assets/images/icon/arrow.png" alt="" class="icon">
          </div>
        </div>
        <div class="form-item">
          <div class="label">手机号码</div>
          <div class="val">
            <input v-model.trim="payload.mobile" placeholder="请输入您的手机号码" type="tel">
          </div>
        </div>
        <div class="form-item">
          <div class="label">您的疑问</div>
          <div class="val">
            <input v-model.trim="payload.content" placeholder="请填写您的问题" type="text">
          </div>
        </div>
        <div class="btn" @click="submit">提交</div>
      </div>
    </div>

    <school-fee :visible.sync="visible"></school-fee>

    <!-- 选择年级 -->
    <van-popup v-model="showGradePicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="gradeList"
        value-key="name"
        @cancel="showGradePicker = false"
        @confirm="onGradeConfirm"
      />
    </van-popup>

    <!-- 选择出生日期 -->
    <van-popup v-model="showDatePicker" round position="bottom">
      <van-datetime-picker
        type="date"
        v-model="currentDate"
        :min-date="minDate"
        @cancel="showDatePicker = false"
        @confirm="onDatePicker"
      />
    </van-popup>


  </zb-main>
</div>

<script type="text/babel">
  new Vue({
    el: '#app',
    data: {
      detail: {
        content: '黑利伯瑞国际学校是经天津市教育主管部门批准成立的全日制寄宿学校。学校拥有北京首创集团雄厚财力的支持，与位于澳洲的著名百年贵族名校黑利伯瑞学校共享师资与学术资源具备提供高端一流国际教育的夯实基础。学校设有小学部、初中部、高中部。学校秉持“中黑利伯瑞国际学校是经天津市教育主管部门批准成立的全日制寄宿学校。学校拥有北京首创集团雄厚财力的支持，与位于澳洲的著名百年贵族名校黑利伯瑞学校共享师资与学术资源具备提供高端一流国际教育的夯实基础。学校设有小学部、初中部、高中部。学校秉持“中黑利伯瑞国际学校是经天津市教育主管部门批准成立的全日制寄宿学校。学校拥有北京首创集团雄厚财力的支持，与位于澳洲的著名百年贵族名校黑利伯瑞学校共享师资与学术资源具备提供高端一流国际教育的夯实基础。学校设有小学部、初中部、高中部。学校秉持“中黑利伯瑞国际学校是经天津市教育主管部门批准成立的全日制寄宿学校。学校拥有北京首创集团雄厚财力的支持，与位于澳洲的著名百年贵族名校黑利伯瑞学校共享师资与学术资源具备提供高端一流国际教育的夯实基础。学校设有小学部、初中部、高中部。学校秉持“中黑利伯瑞国际学校是经天津市教育主管部门批准成立的全日制寄宿学校。学校拥有北京首创集团雄厚财力的支持，与位于澳洲的著名百年贵族名校黑利伯瑞学校共享师资与学术资源具备提供高端一流国际教育的夯实基础。学校设有小学部、初中部、高中部。学校秉持“中'
      },
      showMore: false,
      currentDate: new Date(),
      minDate: new Date(1900, 0, 1),
      showDatePicker: false,
      showGradePicker: false,
      lists: [
        '游泳',
        '书法',
        '芭蕾舞',
        '油画',
        '陶艺',
        '创意美术',
        '烘培',
        '马术',
        '击剑',
        '冰球',
        '小语种',
        '人工智能',
        '国际竞赛',
        '架子鼓',
        '尤克里里',
        '网球',
        '篮球'
      ],
      visible: false,
      payload: {
        name: '',
        sex: '',
        birthDay: '',
        grade: '',
        mobile: '',
        content: ''
      },
      sexRange: [
        { label: '男', value: 1 },
        { label: '女', value: 2 },
      ],
      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: '十二年级' }
      ],
    },
    computed: {
      gradeStr() {
        const target = this.gradeList.find(v => v.id == this.payload.grade)
        if (target) {
          return target.name
        }
        return ''
      },
      contentStr() {
        const content = this.detail.content
        if (content.length > 119 && !this.showMore) {
          const arr = content.split('')
          arr.length = 119
          return arr.join('') + '...'
        }
        return content
      }
    },
    components: {},
    methods: {
      onDatePicker(e) {
        const dateStr = e.toLocaleString()
        const date = dateStr.split(' ')[0].split('/')
        date[1] = Number(date[1]) < 10 ? '0' + date[1] : date[1]
        date[2] = Number(date[2]) < 10 ? '0' + date[2] : date[2]
        this.payload.birthDay = date.join('-')
        this.showDatePicker = false
      },
      onGradeConfirm(e) {
        this.payload.grade = e.id
        this.showGradePicker = false
      },
      onlineService() {
        onlineService()
      },
      openModal() {
        this.visible = true
      },
      submit() {
        const {
          name,
          sex,
          birthDay,
          grade,
          mobile,
          content
        } = this.payload
        if (name === '') {
          vant.Notify({ type: 'warning', message: '请输入学生姓名', duration: 1500 })
          return
        }
        if (sex === '') {
          vant.Notify({ type: 'warning', message: '请选择学生性别', duration: 1500 })
          return
        }
        if (birthDay === '') {
          console.log('birthDay')
          vant.Notify({ type: 'warning', message: '请选择出生日期', duration: 1500 })
          return
        }
        if (grade === '') {
          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 (content === '') {
          vant.Notify({ type: 'warning', message: '请填写您的问题', duration: 1500 })
          return
        }
        console.log('最后提交数据：', this.payload)
      }
    },
    mounted() {

    }
  })
</script>

</body>
</html>