fair-web/views/admin_classify.ejs

<% this.adminPage = 'classify'; %>
<% include admin_header %>
<style>
    [v-cloak] {
        display: none;
    }
    .current-classify{
        margin-bottom: 20px;
    }
</style>
<div id="classify" v-cloak>
    <div class="ui modal classify">
        <i class="close icon"></i>
        <div class="header">
            新增练习阶段
        </div>
        <div class="content">
            <div class="ui form">
                <div class="field required" :class="{ error: classifyName.length > 20 }">
                    <label>练习阶段名称(20字以内)</label>
                    <input type="text" v-model="classifyName" placeholder="请输入分类名称">
                </div>
                <div class="field required" :class="{ error: classifyName.length > 100 }">
                    <label>练习阶段简介(100字以内)</label>
                    <input type="text" v-model="classifyIntro" placeholder="请输入分类简介">
                </div>
                <div class="field">
                    <label>Gender</label>
                    <div class="ui selection dropdown">
                        <input type="hidden" name="gender">
                        <i class="dropdown icon"></i>
                        <div class="default text">Gender</div>
                        <div class="menu">
                            <div class="item" data-value="1">Male</div>
                            <div class="item" data-value="0">Female</div>
                        </div>
                    </div>
                </div>
                <button class="ui button" @click="submitInfo">提交</button>
            </div>
        </div>
    </div>
    <div v-if="mockClassify.length === 0">
        暂无练习阶段
    </div>
    <div v-else>
        <div class="current-classify">
            <h4>目前练习阶段</h4>
            <div class="ui cards">
                <div class="card" v-for="item in mockClassify">
                    <div class="content">
                        <div class="header">{{item.title}}</div>
                        <div class="description">
                            {{item.description}}
                        </div>
                    </div>
                    <div class="ui bottom attached button">
                        <i class="add icon"></i>
                        编辑练习阶段信息
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="ui labeled button" tabindex="0" @click="show">
        <div class="ui button">
            <i class="plus icon"></i> 新增练习阶段
        </div>
    </div>
</div>
<script>
  new window.Vue({
    el: '#classify',
    data: {
      classifyName: '',
      classifyIntro: '',
      message: 'Hello Vue!',
      mockClassify: [{
        title: '测试分类a',
        description: '测试介绍'
      }, {
        title: '测试分类1',
        description: '测试介绍1'
      }]
    },
    methods: {
      show: function(){
        $('.ui.modal.classify')
          .modal('show')
      },
      checkStringLength: function(string, maxLen) {
        return string.length > 0 && string.length <= maxLen;

      },
      submitInfo: function() {
        let name = this.classifyName;
        let intro = this.classifyIntro;
        if(this.checkStringLength(name, 20) && this.checkStringLength(intro, 100)) {
          const obj = {
            name: this.classifyName,
            intro: this.classifyIntro
          }
          $.ajax({
            url: '/api/practice/create',
            type: 'POST',
            async: true,
            data: obj,
            success: function (data) {
              console.log(data);
              if (data.error_code) {
                alert('创建失败');
              } else {
                alert('添加成功')
                $('.ui.modal.classify')
                  .modal('hide')
              }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
              console.log(XMLHttpRequest);
              alert('创建失败');
            }
          });
        }
      }
    }
  })
</script>
<% include admin_footer %>