|
|
|
<% 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 %>
|