Skip to content

C
chinafrica
提交 d1b10389 authored 作者: zgy's avatar zgy
浏览文件
操作

新增分类框

上级 7fd4cfd5
隐藏空白字符变更
内嵌 并排
正在显示 包含 287 行增加 和 11 行删除
platform-admin/src/main/webapp/WEB-INF/page/sys/tbcfposters.html
浏览文件 @ d1b10389
...@@ -3,6 +3,40 @@ ...@@ -3,6 +3,40 @@
<head> <head>
<title>首页海报</title> <title>首页海报</title>
#parse("sys/header.html") #parse("sys/header.html")
<style>
body{
background: #f9f9f9;
}
ul li{
list-style: none;
text-align: center;
}
#app{
box-sizing: border-box;
min-width: 1200px;
margin:0 auto;
}
.category-container{
width:800px;
min-height:600px;
}
.edit-container{
position: relative;
height:500px;
}
.btn-container{
position: absolute;
bottom:0;
right:0;
}
.productList,.search{
display: flex;
justify-content: space-between;
}.productList-style-start{
display: flex;
justify-content: start;
}
</style>
</head> </head>
<body> <body>
<div id="rrapp" v-cloak style="height: calc(100% - 15px);"> <div id="rrapp" v-cloak style="height: calc(100% - 15px);">
...@@ -49,6 +83,101 @@ ...@@ -49,6 +83,101 @@
<Form-item label="跳转链接" prop="redirectUrl"> <Form-item label="跳转链接" prop="redirectUrl">
<i-input v-model="tbCfPosters.redirectUrl" placeholder="跳转链接"/> <i-input v-model="tbCfPosters.redirectUrl" placeholder="跳转链接"/>
</Form-item> </Form-item>
<div id="app">
<Card class="category-container" >
<p slot="title">
<label v-for="(element,index) in items" :key='index' style="margin-left:20px;">
<input type="checkbox" :checked='element.isChecked' @click='vHandleChange(element,index)' class="v-radio"/>
{{element.name}}
</label>
</p>
<section class="edit-container">
<!-- 链接 -->
<div v-if='active==0'>
<i-Input v-model="link" placeholder="请输入目标链接" />
</div>
<!-- 分类子页面 -->
<div v-else-if='active==1'>
<span>一级分类</span>
<i-Select v-model="subcategoryListsActive" style="width:200px">
<i-Option v-for="item in subCategoryLists" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
</i-Select>
<span style="margin-left:20px;">二级分类</span>
<i-Select v-model="subsubCategoryListsActive" style="width:200px">
<i-Option v-for="item in subsubCategoryLists" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
</i-Select>
</div>
<!-- 商品列表页 -->
<div v-else-if='active==2' >
<div class="productList">
<div>
<span>一级分类</span>
<i-Select v-model="categoryListsActive1" style="width:100px">
<i-Option v-for="item in CategoryLists1" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
</i-Select>
</div>
<div>
<span style="margin-left:20px;">二级分类</span>
<i-Select v-model="categoryListsActive2" style="width:100px">
<i-Option v-for="item in CategoryLists2" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
</i-Select>
</div>
<div>
<span style="margin-left:20px;">三级分类</span>
<i-Select v-model="categoryListsActive3" style="width:100px">
<i-Option v-for="item in CategoryLists3" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
</i-Select>
</div>
<div>
<span style="margin-left:20px;">独立分类</span>
<i-Select v-model="categoryListsActive" style="width:100px">
<i-Option v-for="item in categoryLists" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
</i-Select>
</div>
</div>
<i-Button type="warning" style="float: right;margin-top:30px;width:100px;" @click='resetSelectedCategory'>重置</i-Button>
</div>
<!-- 商品 -->
<div v-else>
<div class="productList-style-start">
<div>
<span>一级分类</span>
<i-Select v-model="commoditycategoryListsActive1" style="width:100px">
<i-Option v-for="item in commodityCategoryLists1" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
</i-Select>
</div>
<div>
<span style="margin-left:20px;">二级分类</span>
<i-Select v-model="commoditycategoryListsActive2" style="width:100px">
<i-Option v-for="item in commodityCategoryLists2" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
</i-Select>
</div>
<div>
<span style="margin-left:20px;">三级分类</span>
<i-Select v-model="commoditycategoryListsActive3" style="width:100px">
<i-Option v-for="item in commodityCategoryLists3" :value="item.value" :key="item.value">{{ item.label }}</i-Option>
</i-Select>
</div>
</div>
<div class="search" style="margin-top:20px;">
<div>
<i-Input v-model="search" placeholder="请输入搜索内容" style="width:500px;" />
</div>
<i-Button type="primary" style="width:100px;" @click='handleSearch()'>搜索</i-Button>
<i-Button style="width:100px;" @click="resetSelectedCategory('commodity')">重置</i-Button>
</div>
<section>
表格内容。。。
</section>
</div>
<div class="btn-container">
<i-Button type="primary" @click='submit()'>确定</i-Button>
<i-Button >取消</i-Button>
</div>
</section>
</Card>
</div>
<Form-item label="是否展示" prop="isShow"> <Form-item label="是否展示" prop="isShow">
<i-input v-model="tbCfPosters.isShow" placeholder="是否展示"/> <i-input v-model="tbCfPosters.isShow" placeholder="是否展示"/>
</Form-item> </Form-item>
......
platform-admin/src/main/webapp/js/sys/tbcfposters.js
浏览文件 @ d1b10389
...@@ -16,17 +16,121 @@ $(function () { ...@@ -16,17 +16,121 @@ $(function () {
let vm = new Vue({ let vm = new Vue({
el: '#rrapp', el: '#rrapp',
data: { data(){
showList: true, return{
title: null, active:3, //显示索引
tbCfPosters: {}, items:[
ruleValidate: { {
name: [ name:'链接',
{required: true, message: '名称不能为空', trigger: 'blur'} isChecked:false
] },{
}, name:'分类子页面',
q: { isChecked:false
name: '' },{
name:'商品列表页',
isChecked:false
},{
name:'商品',
isChecked:true
},
],
/*
--链接方式
*/
link:null,//链接
/*
--分类子页面
*/
// 一级分类
subCategoryLists: [
{
value: 'New',
label: 'New'
}
],
subcategoryListsActive:null,
// 二级分类
subsubCategoryLists: [
{
value: 'York',
label: 'York'
}
],
subsubCategoryListsActive:null,
/*
--商品列表页
*/
//一级
CategoryLists1: [
{
value: '一级',
label: '一级'
}
],
categoryListsActive1:null,
//二级
CategoryLists2: [
{
value: '二级',
label: '二级'
}
],
categoryListsActive2:null,
//三级
CategoryLists3: [
{
value: '三级',
label: '三级'
}
],
categoryListsActive3:null,
// 独立
categoryLists:[
{
value: '独立',
label: '独立'
}
],
categoryListsActive:null,
/*
--商品
*/
commodityCategoryLists1: [
{
value: '商品一级',
label: '商品一级'
}
],
commoditycategoryListsActive1:null,
//二级
commodityCategoryLists2: [
{
value: '商品二级',
label: '商品二级'
}
],
commoditycategoryListsActive2:null,
//三级
commodityCategoryLists3: [
{
value: '商品三级',
label: '商品三级'
}
],
commoditycategoryListsActive3:null,
// 搜索
search:null,
showList: true,
title: null,
tbCfPosters: {},
ruleValidate: {
name: [
{required: true, message: '名称不能为空', trigger: 'blur'}
]
},
q: {
name: ''
}
} }
}, },
methods: { methods: {
...@@ -136,6 +240,49 @@ let vm = new Vue({ ...@@ -136,6 +240,49 @@ let vm = new Vue({
} }
} }
}); });
},
$(name){
return document.querySelectorAll(name);
},
//切换海报导航定向方式
vHandleChange(element,_index){
this.$('.v-radio').forEach((item,index)=>{
item.checked = false;
})
setTimeout(()=>{
this.$('.v-radio')[_index].checked = true;
_index!==3?this.$('.v-radio')[3].checked = false:null;
},0)
this.active = _index;
},
/* 重置选中的类别 */
resetSelectedCategory(e){
if(e==='commodity'){
this.search=this.commoditycategoryListsActive1=this.commoditycategoryListsActive2=this.commoditycategoryListsActive3=null;
}else{
this.categoryListsActive=this.categoryListsActive3=this.categoryListsActive2=this.categoryListsActive1=null;
}
},
/* 搜索 */
handleSearch(){
this.search?alert('你搜索的内容是'+this.search):alert('未输入搜索内容~');
},
/* 确定 */
submit(){
if(this.active===0){
this.$Message.info('你提交的内容是'+this.items[this.active].name)
}else if(this.active===1){
this.$Message.info('你提交的内容是'+this.items[this.active].name)
}else if(this.active===1){
this.$Message.info('你提交的内容是'+this.items[this.active].name)
}else {
this.$Message.info('你提交的内容是'+this.items[this.active].name)
}
} }
},
created(){
},
mounted(){
} }
}); });
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论