Skip to content

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

轮播图优化

上级 f4b73bfc
隐藏空白字符变更
内嵌 并排
正在显示 包含 604 行增加 和 14 行删除
platform-admin/src/main/webapp/WEB-INF/page/sys/tbcfhomepage.html
浏览文件 @ 41b91b0b
......@@ -7,6 +7,83 @@
.ui-jqgrid .ui-jqgrid-bdiv {
height: auto !important;
}
body {
background: #f9f9f9;
}
ul li {
list-style: none;
text-align: center;
}
#app {
box-sizing: border-box;
min-width: 1200px;
margin: 0 auto;
}
.category-container {
min-height: 600px;
padding-bottom: 80px;
}
.edit-container {
position: relative;
height: 500px;
}
.btn-container {
position: absolute;
bottom: 0;
right: 0;
}
.productList {
padding-bottom: 10px;
}
.productList, .search {
display: flex;
justify-content: start;
}
.productList-style-start {
display: flex;
justify-content: start;
}
.vRadio {
display: inline-block;
width: 20px;
height: 20px;
background: #eeeeee;
border-radius: 4px;
transition: all 0.4s;
}
.vradio-wrapper {
cursor: pointer;
}
.vRadio-active {
background: #000;
opacity: 0.6;
}
.vradio-wrapper > i {
vertical-align: top;
}
#searchjqGrid {
width: 100%;
margin-top: 10px;
}
#showItems {
margin-top: 20px;
}
</style>
</head>
<body>
......@@ -56,7 +133,7 @@
</el-select>
</Form-item>-->
<Form-item label="版本" prop="imgVersion" >
<Form-item label="版本" prop="imgVersion">
<i-select placeholder="请选择" v-model="tbCfHomePage.imgVersion">
<i-option v-for="(el,i) in versionOptions" :key='i'
:value="el.value">{{el.label}}
......@@ -66,25 +143,166 @@
<Form-item label="排序" prop="sort">
<i-input v-model="tbCfHomePage.sort" placeholder="排序"/>
</Form-item>
<Form-item label="跳转链接" prop="linkUrl">
<i-input v-model="tbCfHomePage.linkUrl"
placeholder="Android跳转url;IOS跳转url(最多两个url,并以分号分割);如:https://www.andriod.com;https://www.apple.com"/>
</Form-item>
<Form-item label="图片" prop="newsImg">
<img v-bind:src="tbCfHomePage.imgUrl" style="width:200px;height:200px;" v-show="!!tbCfHomePage.imgUrl"/>
<input type="file" placeholder="主图" @change="tirggerFile($event)"/>
</Form-item>
<!-- <Form-item label="跳转链接" prop="linkUrl">-->
<!-- <i-input v-model="tbCfHomePage.linkUrl"-->
<!-- placeholder="Android跳转url;IOS跳转url(最多两个url,并以分号分割);如:https://www.andriod.com;https://www.apple.com"/>-->
<!-- </Form-item>-->
<div id="app">
<Card class="category-container">
<p slot="title">
<span
v-for="(element,index) in items" :key='index'
@click='vHandleChange(element,index)'
style="margin-left:20px;"
class="vradio-wrapper"
>
<span class="vRadio" :class="[element.isChecked?'vRadio-active':null]"></span>
<i>{{element.name}}</i>
</span>
</p>
<section class="edit-container">
<!-- 链接 -->
<div v-if='typeActive==0'>
<i-Input v-model="link" placeholder="请输入目标链接"/>
</div>
<!-- 分类子页面 -->
<!-- <div v-else-if='typeActive==1'>-->
<!-- <span>一级分类</span>-->
<!-- <i-Select v-model="subcategoryListsActive" style="width:200px" @on-change="changeSubCateType">-->
<!-- <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='typeActive==1'>
<div class="productList-style-start">
<div>
<span>一级分类</span>
<i-Select v-model.sync="categoryListsActive1" style="width:100px"
@on-change="changeSubCateType">
<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.sync="categoryListsActive2" @on-change="queryMiniCatagory(2)"
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.sync="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>
<i-Button type="warning" style="float: right;margin-top:30px;width:100px;"
@click='resetSelectedCategory'>重置
</i-Button>
</div>
<!-- 商品 -->
<div v-else-if="typeActive==2">
<div class="productList-style-start">
<div>
<span>一级分类</span>
<i-Select v-model="commoditycategoryListsActive1" style="width:100px"
@on-change="changeSubCateType">
<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" @on-change="queryMiniCatagory(3)"
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 id="showItems">
<table id="searchjqGrid"></table>
</section>
</div>
<div v-else-if="typeActive==3">
<div>
<span style="margin-left:20px;">商品标签</span>
<i-Select v-model="tagListsActive" style="width:100px">
<i-Option v-for="item in tagLists" :value="item.value" :key="item.value">{{
item.label }}
</i-Option>
</i-Select>
</div>
</div>
</section>
</Card>
</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<!--<Form-item label="图片链接" prop="imgUrl">
<i-input v-model="tbCfHomePage.imgUrl" placeholder="图片链接"/>
</Form-item>-->
<Form-item label="是否支持浏览" prop="scanFlag">
<!--<Form-item label="是否支持浏览" prop="scanFlag">
<i-input v-model="tbCfHomePage.scanFlag" placeholder="是否支持浏览"/>
</Form-item>
<Form-item label="跳转页面" prop="redirectFlag">
<i-input v-model="tbCfHomePage.redirectFlag" placeholder="跳转页面"/>
</Form-item>
<Form-item label="是否可用" prop="enableFlag">
<i-input v-model="tbCfHomePage.enableFlag" placeholder="是否可用"/>
</Form-item>-->
<!-- <Form-item label="是否可用" prop="enableFlag">-->
<!-- <i-input v-model="tbCfHomePage.enableFlag" placeholder="是否可用"/>-->
<!-- </Form-item>-->
<Form-item label="是否展示" prop="enableFlag">
<i-select placeholder="请选择" v-model="tbCfHomePage.enableFlag">
<i-option v-for="(el,i) in chooseOptions" :key='i'
:value="el.value">{{el.label}}
</i-option>
</i-select>
</Form-item>
<Form-item>
<i-button type="primary" @click="handleSubmit('formValidate')">提交</i-button>
......
platform-admin/src/main/webapp/js/sys/tbcfhomepage.js
浏览文件 @ 41b91b0b
......@@ -8,8 +8,8 @@ $(function () {
{label: '排序(倒序显示)', name: 'sort', index: 'sort', width: 80},
{label: '跳转链接', name: 'linkUrl', index: 'link_url', width: 100, formatter: linkFormat},
{label: '图片', name: 'imgUrl', index: 'img_url', width: 80, formatter: imageFormat},
{label: '是否支持浏览', name: 'scanFlag', index: 'scan_flag', width: 80, formatter: yesOrNoFormat},
{label: '跳转页面', name: 'redirectFlag', index: 'redirect_flag', width: 80, formatter: pageFormat},
// {label: '是否支持浏览', name: 'scanFlag', index: 'scan_flag', width: 80, formatter: yesOrNoFormat},
// {label: '跳转页面', name: 'redirectFlag', index: 'redirect_flag', width: 80, formatter: pageFormat},
{label: '是否可用', name: 'enableFlag', index: 'enable_flag', width: 80, formatter: yesOrNoFormat}],
shrinkToFit: true,
datatype: "json",
......@@ -29,6 +29,118 @@ $(function () {
let vm = new Vue({
el: '#rrapp',
data: {
chooseOptions:null,
typeActive: 0, //显示索引
items: [
{
name: '链接',
isChecked: true
},
// {
// name: '分类子页面',
// isChecked: false
// },
{
name: '商品列表页',
isChecked: false
}, {
name: '商品',
isChecked: false
}, {
name: '标签',
isChecked: false
},
{
name: '不跳转',
isChecked: false
}
],
/*
--链接方式
*/
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,
// 独立
tagLists: [
{
value: '独立',
label: '独立'
}
],
tagListsActive: null,
/*
--商品
*/
commodityCategoryLists1: [
{
value: '商品一级',
label: '商品一级'
}
],
commoditycategoryListsActive1: null,
//二级
commodityCategoryLists2: [
{
value: '商品二级',
label: '商品二级'
}
],
commoditycategoryListsActive2: null,
//三级
commodityCategoryLists3: [
{
value: '商品三级',
label: '商品三级'
}
],
commoditycategoryListsActive3: null,
// 搜索
search: null,
showList: true,
title: null,
tbCfHomePage: {},
......@@ -50,6 +162,16 @@ let vm = new Vue({
value: 1,
label: '新版'
}
],
chooseOptions: [
{
value: 1,
label: '是'
},
{
value: 0,
label: '否'
}
]
},
methods: {
......@@ -57,9 +179,13 @@ let vm = new Vue({
vm.reload();
},
add: function () {
vm.resetSelectedCategory();
vm.resetSelectedCategory('commodity');
vm.showList = false;
vm.title = "新增";
vm.tbCfHomePage = {};
this.link = null;
this.typeActive = 0;
},
update: function (event) {
let pageId = getSelectedRow("#jqGrid");
......@@ -73,6 +199,8 @@ let vm = new Vue({
},
saveOrUpdate: function (event) {
let url = vm.tbCfHomePage.pageId == null ? "../tbcfhomepage/save" : "../tbcfhomepage/update";
vm.tbCfHomePage.linkUrl = event;
vm.tbCfHomePage.imgType = this.typeActive;
Ajax.request({
url: url,
params: JSON.stringify(vm.tbCfHomePage),
......@@ -106,11 +234,49 @@ let vm = new Vue({
});
},
getInfo: function (pageId) {
vm.resetSelectedCategory('commodity');
Ajax.request({
url: "../tbcfhomepage/info/" + pageId,
async: true,
successCallback: function (r) {
vm.tbCfHomePage = r.tbCfHomePage;
//数据回显
vm.typeActive = vm.tbCfHomePage.imgType;
vm.vHandleChange(null,vm.typeActive)
if(vm.typeActive===0){
vm.link=vm.tbCfHomePage.linkUrl;
}else if(vm.typeActive===1){
let ARR_ids = vm.tbCfHomePage.linkUrl.split(',');
vm.CategoryLists1.forEach(item=>{
if(item.value===ARR_ids[0]) {
vm.categoryListsActive1 = item.value
}
})
if(ARR_ids[1]!='null'){
vm.changeSubCateType(()=>{
vm.CategoryLists2.forEach(item=>{
if(item.value===ARR_ids[1]){
vm.categoryListsActive2 = item.value
}
})
});
}
if(ARR_ids[2]!='null'){
vm.queryMiniCatagory(2,()=>{
vm.CategoryLists3.forEach(item=>{
if(item.value===ARR_ids[2]){
vm.categoryListsActive3 = item.value
}
})
});
}
}else if(vm.typeActive===2){
setTimeout(()=>{
vm.handleSearch(vm.tbCfHomePage.linkUrl);
},500)
}else if(vm.typeActive===3){
vm.tagListsActive = vm.tbCfHomePage.linkUrl;
}
}
});
},
......@@ -130,9 +296,38 @@ let vm = new Vue({
vm.reload();
},
handleSubmit: function (name) {
handleSubmitValidate(this, name, function () {
vm.saveOrUpdate()
});
let linkUrl = null;
let imgType = this.typeActive; //海报类型
switch (this.typeActive) {
case 0:
linkUrl = this.link;
linkUrl?vm.saveOrUpdate(linkUrl):this.$Message.info('请输入链接')
break;
case 1:
this.categoryListsActive1?(()=>{
linkUrl = `${this.categoryListsActive1},${this.categoryListsActive2},${this.categoryListsActive3}`;
vm.saveOrUpdate(linkUrl)
})():this.$Message.info('至少选择一种分类')
break;
case 2:
linkUrl = getSelectedRows("#searchjqGrid")[0];
if(linkUrl){
vm.saveOrUpdate(linkUrl)
}
break;
case 3:
linkUrl = this.tagListsActive;
if(linkUrl){
vm.saveOrUpdate(linkUrl)
}
break;
default :
vm.saveOrUpdate('')
break;
}
// handleSubmitValidate(this, name, function () {
// vm.saveOrUpdate()
// });
},
handleReset: function (name) {
handleResetForm(this, name);
......@@ -159,6 +354,183 @@ let vm = new Vue({
}
}
});
},
$(name) {
return document.querySelectorAll(name);
},
//切换海报导航定向方式
vHandleChange(element, _index) {
this.items.forEach((item, index) => {
item.isChecked = false
})
this.typeActive = _index;
this.items[_index].isChecked = true;
},
/* 重置选中的类别 */
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(e) {
1 == 1 ? (() => {
$('#showItems').children().remove();
$('#showItems').append(`<table id="searchjqGrid"></table>`);
function beforeSelectRow() {
$("#searchjqGrid").jqGrid('resetSelection');
return (true);
}
let _this = this;
$(function () {
$("#searchjqGrid").Grid({
url: `../tbcfstationitem/list?itemCategory=${_this.commoditycategoryListsActive1 || ''}&typeTwo=${_this.commoditycategoryListsActive2 || ''}&typeThree=${_this.commoditycategoryListsActive3 || ''}&name=${vm.search || e || ''}`,
colModel: [
{label: 'itemId', name: 'itemId', index: 'item_id', key: true, hidden: true},
{label: '商品图片', name: 'itemImg', index: 'item_img', width: 50, formatter: imageFormat},
{label: '商品编号', name: 'itemCode', index: 'item_code', width: 160},
{label: '商品名称', name: 'itemName', index: 'item_name', width: 160},
/* {label: '商品标题', name: 'itemBrief', index: 'item_brief', width: 120},*/
/*{label: '商品链接', name: 'itemUrl', index: 'item_url', width: 80,formatter:linkFormat},*/
{label: '商品原价', name: 'itemPrice', index: 'item_price', width: 65},
{label: '商品现价', name: 'discountPrice', index: 'discount_price', width: 55},
{label: '库存', name: 'itemCount', index: 'item_count', width: 55},
{label: '点击量', name: 'itemNum', index: 'item_num', width: 55},
/*{label: '所属平台', name: 'platformCode', index: 'platform_code', width: 80},
{label: '平台名', name: 'platformName', index: 'platform_name', width: 80},*/
{label: '供应商', name: 'supplier', index: 'supplier', width: 80},
{label: '商品一级分类', name: 'goodtype', index: 'goodtype', width: 80},
{label: '商品二级分类', name: 'title', index: 'title', width: 80},
{label: '商品品名', name: 'dname', index: 'itemDescritionId', width: 120},
{
label: '状态',
name: 'enableFlag',
index: 'enable_flag',
width: 120,
formatter: itemStatusFormat
},
{label: '创建日期', name: 'createTime', index: 'create_time', width: 160}
],
multiselect: true,
multiboxonly: true,
beforeSelectRow: beforeSelectRow,
});
});
})() : alert('未输入搜索内容~');
},
//获取分类子页面二级分类数据
changeSubCateType(callback = null) {
let ID = null;
if (this.typeActive === 1000) {
ID = this.subcategoryListsActive
} else if (this.typeActive === 1) {
ID = this.categoryListsActive1
} else {
ID = this.commoditycategoryListsActive1
}
this.subsubCategoryLists = [];
this.CategoryLists2 = [];
this.commodityCategoryLists2 = [];
$.get('../tbcfstationitem/queryByItemType?typeId=' + ID, res => {
let _res = JSON.parse(res);
_res.code === 0 ? (() => {
if (this.typeActive === 1000) {
_res.list.forEach((item) => {
this.subsubCategoryLists.push({
label: item.goodstwotypeTitle,
value: item.goodstwotypeId
})
})
} else if (this.typeActive === 1) {
_res.list.forEach((item) => {
this.CategoryLists2.push({
label: item.goodstwotypeTitle,
value: item.goodstwotypeId
})
})
} else {
_res.list.forEach((item) => {
this.commodityCategoryLists2.push({
label: item.goodstwotypeTitle,
value: item.goodstwotypeId
})
})
}
callback ? callback() : null;
})() : null
})
},
//查询三级分类
queryMiniCatagory(status, callback = null) {
let ID = null
status === 2 ? ID = this.categoryListsActive2 : ID = this.commoditycategoryListsActive2
$.get('../tbcfstationitem/queryByItemTypeTwo?typeTwoId=' + ID, res => {
this.CategoryLists3 = [];
this.commodityCategoryLists3 = [];
let _res = JSON.parse(res);
_res.code === 0 ? (() => {
_res.descripiton.forEach((item) => {
this.CategoryLists3.push({
label: item.descripitionName,
value: item.descripitionId
})
this.commodityCategoryLists3.push({
label: item.descripitionName,
value: item.descripitionId
})
})
callback ? callback() : null;
})() : null
})
}
},
created() {
document.onkeydown = (e) => {
if (this.search && e.keyCode === 13) {
this.handleSearch()
}
}
//获取分类子页面一级分类数据
$.get('../tbcfgoodstype/queryAll', res => {
res.code === 0 ? (() => {
this.subCategoryLists = [];
this.commodityCategoryLists1 = [];
this.CategoryLists1 = [];
res.list.forEach((item) => {
this.subCategoryLists.push({
label: item.goodstypeTitle,
value: item.goodstypeId
});
this.commodityCategoryLists1.push({
label: item.goodstypeTitle,
value: item.goodstypeId
});
this.CategoryLists1.push({
label: item.goodstypeTitle,
value: item.goodstypeId
})
})
})() : null
})
//获取标签
$.get('../tbcflabel/queryAll?timestamp=' + new Date().getTime(), res => {
this.tagLists = [];
let OBJ_res = JSON.parse(res);
OBJ_res.list.forEach((item) => {
console.log('labelName', item.labelName)
this.tagLists.push({
label: item.labelName,
value: item.id
});
})
})
},
mounted() {
}
});
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论