pc端添加2个轮播代码,楼层装修跟pc端样式不一致,楼层装修无法添加的bug修改

master
mabo 2021-08-11 14:56:02 +08:00
parent d104baf426
commit cc80242896
13 changed files with 428 additions and 200 deletions

View File

@ -25,9 +25,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.model-content { .model-content {
width: 1200px; width: 100%;
margin: 0 auto;
// background: #fff;
min-height: 1200px; min-height: 1200px;
} }
</style> </style>

View File

@ -2,11 +2,17 @@
<div class="model-item" v-if="element && element.key"> <div class="model-item" v-if="element && element.key">
<!-- 轮播图模块包括个人信息快捷导航模块 --> <!-- 轮播图模块包括个人信息快捷导航模块 -->
<template v-if="element.type == 'carousel'"> <template v-if="element.type == 'carousel'">
<model-carousel :data="element" class="mb_20"></model-carousel> <model-carousel :data="element" class="mb_20 width_1200_auto"></model-carousel>
</template>
<template v-if="element.type == 'carousel1'">
<model-carousel1 :data="element" class="mb_20"></model-carousel1>
</template>
<template v-if="element.type == 'carousel2'">
<model-carousel2 :data="element" class="mb_20 width_1200_auto"></model-carousel2>
</template> </template>
<!-- 热门广告 --> <!-- 热门广告 -->
<template v-if="element.type == 'hotAdvert'"> <template v-if="element.type == 'hotAdvert'">
<div class="mb_20"> <div class="mb_20 width_1200_auto">
<img <img
style="display: block" style="display: block"
class="hover-pointer" class="hover-pointer"
@ -16,7 +22,7 @@
alt="" alt=""
/> />
</div> </div>
<ul class="advert-list"> <ul class="advert-list width_1200_auto">
<template v-for="(item, index) in element.options.list"> <template v-for="(item, index) in element.options.list">
<li <li
v-if="index !== 0" v-if="index !== 0"
@ -31,12 +37,12 @@
</template> </template>
<!-- 限时秒杀 待完善 --> <!-- 限时秒杀 待完善 -->
<template v-if="element.type == 'seckill' && element.options.list.length"> <template v-if="element.type == 'seckill' && element.options.list.length">
<seckill :data="element" class="mb_20"></seckill> <seckill :data="element" class="mb_20 width_1200_auto"></seckill>
</template> </template>
<!-- 折扣广告 --> <!-- 折扣广告 -->
<template v-if="element.type == 'discountAdvert'"> <template v-if="element.type == 'discountAdvert'">
<div <div
class="discountAdvert mb_20" class="discountAdvert"
:style="{'backgroundImage' :'url(' + require('@/assets/images/decorate.png') + ')'}" :style="{'backgroundImage' :'url(' + require('@/assets/images/decorate.png') + ')'}"
> >
<img <img
@ -64,15 +70,15 @@
<!-- 好货推荐 --> <!-- 好货推荐 -->
<template v-if="element.type == 'recommend'"> <template v-if="element.type == 'recommend'">
<recommend :data="element" class="mb_20"></recommend> <recommend :data="element" class="mb_20 width_1200_auto"></recommend>
</template> </template>
<!-- 新品排行 --> <!-- 新品排行 -->
<template v-if="element.type == 'newGoodsSort'"> <template v-if="element.type == 'newGoodsSort'">
<new-goods-sort :data="element" class="mb_20"></new-goods-sort> <new-goods-sort :data="element" class="mb_20 width_1200_auto"></new-goods-sort>
</template> </template>
<!-- 首页广告 --> <!-- 首页广告 -->
<template v-if="element.type == 'firstAdvert'"> <template v-if="element.type == 'firstAdvert'">
<first-page-advert :data="element" class="mb_20"></first-page-advert> <first-page-advert :data="element" class="mb_20 width_1200_auto"></first-page-advert>
</template> </template>
<!-- 横幅广告 --> <!-- 横幅广告 -->
<template v-if="element.type == 'bannerAdvert'"> <template v-if="element.type == 'bannerAdvert'">
@ -85,13 +91,15 @@
/> />
</template> </template>
<template v-if="element.type == 'notEnough'"> <template v-if="element.type == 'notEnough'">
<not-enough :data="element" class="mb_20"></not-enough> <not-enough :data="element" class="mb_20 width_1200_auto"></not-enough>
</template> </template>
</div> </div>
</template> </template>
<script> <script>
import ModelCarousel from './modelList/Carousel.vue'; import ModelCarousel from './modelList/Carousel.vue';
import ModelCarousel1 from './modelList/Carousel1.vue';
import ModelCarousel2 from './modelList/Carousel2.vue';
import FirstPageAdvert from './modelList/FirstPageAdvert.vue'; import FirstPageAdvert from './modelList/FirstPageAdvert.vue';
import NewGoodsSort from './modelList/NewGoodsSort.vue'; import NewGoodsSort from './modelList/NewGoodsSort.vue';
import Recommend from './modelList/Recommend.vue'; import Recommend from './modelList/Recommend.vue';
@ -103,6 +111,8 @@ export default {
props: ['element', 'select', 'index', 'data'], props: ['element', 'select', 'index', 'data'],
components: { components: {
ModelCarousel, ModelCarousel,
ModelCarousel1,
ModelCarousel2,
Recommend, Recommend,
NewGoodsSort, NewGoodsSort,
FirstPageAdvert, FirstPageAdvert,
@ -118,9 +128,9 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.model-item { .model-item {
position: relative; position: relative;
background-color: #fff;
} }
/** 热门广告 */ /** 热门广告 */
@ -153,10 +163,13 @@ export default {
} }
/** 折扣广告 */ /** 折扣广告 */
.discountAdvert { .discountAdvert {
width: 1300px;
height: 566px; height: 566px;
margin: 0 auto;
margin-bottom: 20px;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-left: -97px;
position: relative; position: relative;
left: -47px;
padding-left: 295px; padding-left: 295px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -171,104 +184,6 @@ export default {
} }
} }
} }
/** 首页品牌 */
.brand {
.brand-view {
display: flex;
margin-top: 10px;
.brand-view-content {
width: 470px;
margin-left: 10px;
img {
width: 100%;
height: 316px;
}
.brand-view-title {
height: 50px;
padding: 0 5px;
display: flex;
align-items: center;
justify-content: space-between;
}
}
.brand-view-content:first-child {
width: 240px;
margin-left: 0;
}
}
.brand-list {
margin-top: 10px;
display: flex;
align-items: center;
flex-wrap: wrap;
li {
width: 121px;
height: 112px;
position: relative;
overflow: hidden;
border: 1px solid #f5f5f5;
margin: -1px -1px 0 0;
&:hover {
.brand-mash {
display: flex;
}
}
.brand-img {
text-align: center;
margin-top: 30px;
img {
width: 100px;
height: auto;
}
}
.brand-mash {
display: none;
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
width: inherit;
height: inherit;
font-size: 12px;
font-weight: bold;
.ivu-icon {
position: absolute;
right: 10px;
top: 10px;
font-size: 15px;
}
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
cursor: pointer;
div:last-child {
background-color: $theme_color;
border-radius: 9px;
padding: 0 10px;
margin-top: 5px;
}
}
}
.refresh {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
.ivu-icon {
font-size: 18px;
transition: all 0.3s ease-out;
}
&:hover {
background-color: $theme_color;
color: #fff;
.ivu-icon {
transform: rotateZ(360deg);
}
}
}
}
}
/** 装修模态框 内部样式start */ /** 装修模态框 内部样式start */
.modal-top-advert { .modal-top-advert {
@ -280,4 +195,9 @@ export default {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
.width_1200_auto{
width: 1200px;
margin: 0 auto;
background-color: #fff;
}
</style> </style>

View File

@ -0,0 +1,76 @@
<template>
<div class="model-carousel1" :style="{background: bgColor}">
<div class="nav-body clearfix">
<!-- 侧边导航 -->
<div class="nav-side"></div>
<div class="nav-content">
<!-- 轮播图 -->
<Carousel autoplay @on-change="autoChange">
<CarouselItem v-for="(item, index) in data.options.list" :key="index" >
<div style="overflow: hidden">
<img :src="item.img" width="1200" height="470" />
</div>
</CarouselItem>
</Carousel>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'modelCarousel1',
props: ['data'],
data () {
return {
showModal: false, // modal
selected: null, //
picModelFlag: false, // modal
bgColor: '#fff' //
};
},
mounted () {
this.bgColor = this.data.options.list[0].bgColor
},
methods: {
//
autoChange (oVal, val) {
this.bgColor = this.data.options.list[val].bgColor
}
}
};
</script>
<style scoped lang="scss">
.model-carousel1 {
width: 100%;
height: 470px;
background: #fff;
}
/*大的导航信息,包含导航,幻灯片等*/
.nav-body {
width: 1200px;
height: 470px;
margin: 0px auto;
}
.nav-side {
height: 470px;
width: 200px;
padding: 0px;
color: #fff;
line-height: 470px;
text-align: center;
position: absolute;
z-index: 1;
}
/*导航内容*/
.nav-content {
width: 1200px;
height: 470px;
overflow: hidden;
float: left;
position: relative;
}
</style>

View File

@ -0,0 +1,211 @@
<template>
<div class="model-carousel2">
<div class="nav-body clearfix">
<!-- 侧边导航 -->
<div class="nav-side"></div>
<div class="nav-content">
<!-- 轮播图 -->
<Carousel autoplay>
<CarouselItem v-for="(item, index) in data.options.list" :key="index">
<div style="overflow: hidden">
<img :src="item.img" width="590" height="470" />
</div>
</CarouselItem>
</Carousel>
</div>
<div class="nav-content1">
<!-- 轮播图 -->
<Carousel autoplay :autoplay-speed="5000">
<CarouselItem v-for="(item, index) in data.options.listRight" :key="index">
<div class="mb_10">
<img :src="item[0].img" width="190" height="150" />
</div>
<div class="mb_10">
<img :src="item[1].img" width="190" height="150" />
</div>
<div>
<img :src="item[2].img" width="190" height="150" />
</div>
</CarouselItem>
</Carousel>
</div>
<div class="nav-right">
<div class="person-msg">
<img :src="userInfo.face" v-if="userInfo.face" alt />
<Avatar icon="ios-person" class="mb_10" v-else size="80" />
<div>Hi{{ userInfo.nickName || "欢迎来到LiLi Shop" | secrecyMobile }}</div>
<div v-if="userInfo.id">
<Button type="error" shape="circle">会员中心</Button>
</div>
<div v-else>
<Button type="error" shape="circle">请登录</Button>
</div>
</div>
<div class="shop-msg">
<div>
<span>常见问题</span>
<ul class="article-list">
<li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)">
{{article.title}}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {articleList} from '@/api/common.js'
import storage from '@/plugins/storage';
export default {
name: 'modelCarousel2',
props: ['data'],
data () {
return {
userInfo: {}, //
articleList: [], //
params: { //
pageNumber: 1,
pageSize: 10,
type: 'ANNOUNCEMENT',
sort: 'sort'
}
};
},
methods: {
getArticleList () { //
articleList(this.params).then(res => {
if (res.success) {
this.articleList = res.result.records
}
})
},
goArticle (id) { //
let routeUrl = this.$router.resolve({
path: '/article',
query: {id}
});
window.open(routeUrl.href, '_blank');
}
},
mounted () {
if (storage.getItem('userInfo')) this.userInfo = JSON.parse(storage.getItem('userInfo'));
this.getArticleList()
}
};
</script>
<style scoped lang="scss">
.model-carousel2 {
width: 1200px;
height: 470px;
overflow: hidden;
}
.nav-item li {
float: left;
font-size: 16px;
font-weight: bold;
margin-left: 30px;
}
.nav-item a {
text-decoration: none;
color: #555555;
}
.nav-item a:hover {
color: $theme_color;
}
/*大的导航信息,包含导航,幻灯片等*/
.nav-body {
width: 1200px;
height: 470px;
margin: 0px auto;
}
.nav-side {
height: 100%;
width: 200px;
padding: 0px;
color: #fff;
float: left;
background-color: #6e6568;
line-height: 470px;
text-align: center;
}
/*导航内容*/
.nav-content,.nav-content1 {
width: 590px;
height: 470px;
overflow: hidden;
float: left;
position: relative;
margin-left: 10px;
}
.nav-content1{
width: 190px;
}
.nav-right {
float: left;
width: 190px;
margin-left: 10px;
.person-msg {
display: flex;
align-items: center;
flex-direction: column;
margin: 20px auto;
button {
height: 25px !important;
margin-top: 10px;
}
.ivu-btn-default {
color: $theme_color;
border-color: $theme_color;
}
img {
margin-bottom: 10px;
width: 80px;
height: 80px;
border-radius: 50%;
}
}
.shop-msg {
div {
width: 100%;
margin: 10px 27px;
span {
cursor: pointer;
text-align: center;
font-weight: bold;
margin-left: 5px;
}
span:nth-child(1) {
@include content_color($theme_color);
margin-left: 0;
}
span:nth-child(2) {
font-weight: normal;
}
span:nth-child(3):hover {
color: $theme_color;
}
}
ul {
li {
cursor: pointer;
margin: 5px 0;
color: #999395;
width: 150px;
font-size: 12px;
&:hover {
color: $theme_color;
}
}
}
}
}
</style>

View File

@ -4,7 +4,6 @@
<div class="all-categories hover-pointer" @mouseenter="showFirstList = true" @mouseleave="showFirstList = false">全部商品分类</div> <div class="all-categories hover-pointer" @mouseenter="showFirstList = true" @mouseleave="showFirstList = false">全部商品分类</div>
<ul class="nav-item" v-if="showNavBar"> <ul class="nav-item" v-if="showNavBar">
<li <li
class="hover-color"
v-for="(item, index) in navList.list" v-for="(item, index) in navList.list"
:key="index" :key="index"
@click="linkTo(item.url)" @click="linkTo(item.url)"
@ -16,7 +15,7 @@
<!-- 全部商品分类 --> <!-- 全部商品分类 -->
<div class="cate-list" v-show="showAlways || showFirstList" @mouseenter="showFirstList = true" @mouseleave="showFirstList = false"> <div class="cate-list" v-show="showAlways || showFirstList" @mouseenter="showFirstList = true" @mouseleave="showFirstList = false">
<!-- 第一级分类 --> <!-- 第一级分类 -->
<div class="nav-side" @mouseleave="panel = false"> <div class="nav-side" :class="{'large-nav': large, 'opacity-nav': opacity}" @mouseleave="panel = false">
<ul> <ul>
<li v-for="(item, index) in cateList" :key="index" @mouseenter="showDetail(index)" > <li v-for="(item, index) in cateList" :key="index" @mouseenter="showDetail(index)" >
<span class="nav-side-item" @click="goGoodsList(item.id)">{{item.name}}</span> <span class="nav-side-item" @click="goGoodsList(item.id)">{{item.name}}</span>
@ -30,6 +29,7 @@
<!-- 展开分类 --> <!-- 展开分类 -->
<div <div
class="detail-item-panel" class="detail-item-panel"
:style="{'minHeight': large?'470px':'340px'}"
v-show="panel" v-show="panel"
@mouseenter="panel = true" @mouseenter="panel = true"
@mouseleave="panel = false" @mouseleave="panel = false"
@ -77,6 +77,14 @@ export default {
hover: { hover: {
default: false, default: false,
type: Boolean type: Boolean
},
large: { //
default: false,
type: Boolean
},
opacity: { //
default: false,
type: Boolean
} }
}, },
data () { data () {
@ -156,7 +164,6 @@ export default {
.nav-con { .nav-con {
width: 1200px; width: 1200px;
height: 40px; height: 40px;
// background: #eee;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
.all-categories { .all-categories {
@ -176,7 +183,7 @@ export default {
background-color: #eee; background-color: #eee;
display: flex; display: flex;
li { li {
font-size: 16px; float: left;
font-weight: bold; font-weight: bold;
margin-left: 20px; margin-left: 20px;
color: rgb(89, 88, 88); color: rgb(89, 88, 88);
@ -187,24 +194,12 @@ export default {
} }
} }
} }
//
.cate-list{ .cate-list{
margin: 0 auto; margin: 0 auto;
position: absolute; position: absolute;
z-index: 1000; z-index: 1000;
} }
.nav-item li {
float: left;
font-size: 16px;
font-weight: bold;
margin-left: 30px;
}
.nav-item a {
text-decoration: none;
color: #555555;
}
.nav-item a:hover {
color: $theme_color;
}
.nav-side { .nav-side {
width: 200px; width: 200px;
@ -215,6 +210,15 @@ export default {
height: 335px; height: 335px;
overflow: hidden; overflow: hidden;
} }
.large-nav{
height: 470px;
ul>li{
line-height: 20px;
}
}
.opacity-nav{
background-color:rgba(0,0,0,.5);
}
.nav-side ul { .nav-side ul {
width: 100%; width: 100%;
padding: 0px; padding: 0px;
@ -226,9 +230,9 @@ export default {
padding-left: 12px; padding-left: 12px;
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
} &:hover{
.nav-side li:hover { background: #999395;
background: #999395; }
} }
.nav-side-item:hover { .nav-side-item:hover {
cursor: pointer; cursor: pointer;
@ -237,7 +241,7 @@ export default {
/*显示商品详细信息*/ /*显示商品详细信息*/
.detail-item-panel { .detail-item-panel {
width: 815px; width: 1000px;
min-height: 340px; min-height: 340px;
background-color: #fff; background-color: #fff;
box-shadow: 0px 0px 15px #ccc; box-shadow: 0px 0px 15px #ccc;
@ -265,7 +269,6 @@ export default {
} }
.detail-item-panel li { .detail-item-panel li {
line-height: 30px; line-height: 30px;
// margin-left: 40px;
} }
.detail-item-title { .detail-item-title {
font-weight: bold; font-weight: bold;

View File

@ -10,7 +10,7 @@
<!-- 搜索框logo --> <!-- 搜索框logo -->
<Search></Search> <Search></Search>
<!-- 商品分类 --> <!-- 商品分类 -->
<cateNav :showAlways="true" v-if="showNav"></cateNav> <cateNav :showAlways="true" v-if="showNav" :large="carouselLarge" :opacity="carouselOpacity"></cateNav>
<!-- 楼层装修部分 --> <!-- 楼层装修部分 -->
<model-form ref="modelForm" :data="modelForm"></model-form> <model-form ref="modelForm" :data="modelForm"></model-form>
<!-- 底部栏 --> <!-- 底部栏 -->
@ -44,7 +44,9 @@ export default {
modelForm: { list: [] }, // modelForm: { list: [] }, //
topAdvert: {}, // 广 topAdvert: {}, // 广
showNav: false, // showNav: false, //
topSearchShow: false // topSearchShow: false, //
carouselLarge: false, //
carouselOpacity: false //
}; };
}, },
methods: { methods: {
@ -53,15 +55,21 @@ export default {
indexData({ clientType: 'PC' }).then((res) => { indexData({ clientType: 'PC' }).then((res) => {
if (res.success) { if (res.success) {
let dataJson = JSON.parse(res.result.pageData); let dataJson = JSON.parse(res.result.pageData);
this.modelForm = dataJson;
// //
//
for (let i = 0; i < dataJson.list.length; i++) { for (let i = 0; i < dataJson.list.length; i++) {
if (dataJson.list[i].type === 'seckill') { let type = dataJson.list[i].type
if (type === 'carousel2') {
this.carouselLarge = true;
} else if (type === 'carousel1') {
this.carouselLarge = true
this.carouselOpacity = true
} else if (type === 'seckill') {
let seckill = this.getListByDay() let seckill = this.getListByDay()
dataJson.list[i].options.list = seckill dataJson.list[i].options.list = seckill
break;
} }
} }
this.modelForm = dataJson;
storage.setItem('navList', dataJson.list[1]) storage.setItem('navList', dataJson.list[1])
this.showNav = true this.showNav = true
this.topAdvert = dataJson.list[0]; this.topAdvert = dataJson.list[0];

View File

@ -24,8 +24,8 @@
<div class="goodsBuy"> <div class="goodsBuy">
<Button size="small" type="primary" @click="buynow(item.skuId, item.goodsId)" v-if="params.type === 'GOODS'"></Button> <Button size="small" type="primary" @click="buynow(item.skuId, item.goodsId)" v-if="params.type === 'GOODS'"></Button>
<Button size="small" type="primary" @click="goShop(item.id)" v-else></Button> <Button size="small" type="primary" @click="goShop(item.id)" v-else></Button>
<Button size="small" type="error" ghost v-if="params.type === 'GOODS'" @click="cancel(item.skuId)"></Button> <Button size="small" v-if="params.type === 'GOODS'" @click="cancel(item.skuId)"></Button>
<Button size="small" type="error" ghost v-if="params.type === 'SHOP'" @click="cancel(item.id)"></Button> <Button size="small" v-if="params.type === 'SHOP'" @click="cancel(item.id)"></Button>
</div> </div>
</div> </div>
</template> </template>

View File

@ -43,7 +43,6 @@ export default {
data() { data() {
return { return {
type: "multiple", // single multiple type: "multiple", // single multiple
skuList: [], // sku skuList: [], // sku
total: 0, // total: 0, //
goodsParams: { // goodsParams: { //
@ -115,7 +114,6 @@ export default {
res.result.records.forEach((item) => { res.result.records.forEach((item) => {
item.selected = false; item.selected = false;
item.___type = "goods"; //goodspc wap item.___type = "goods"; //goodspc wap
this.selectedWay.forEach(e => { this.selectedWay.forEach(e => {
if (e.id === item.id) { if (e.id === item.id) {
item.selected = true item.selected = true

View File

@ -9,9 +9,9 @@
</div> </div>
</div> </div>
<div class="header-con"> <div class="header-con">
<div><Icon type="md-pin" />北京</div> <div></div>
<ul class="detail"> <ul class="detail">
<!-- <li>切换主题</li> --> <li>立即注册</li>
<li>请登录</li> <li>请登录</li>
<li>我的订单</li> <li>我的订单</li>
<li>我的足迹</li> <li>我的足迹</li>

View File

@ -20,24 +20,25 @@
</div> </div>
<div class="nav-right"> <div class="nav-right">
<div class="person-msg"> <div class="person-msg">
<img src="../../../assets/play.png" alt /> <img :src="userInfo.face" v-if="userInfo.face" alt />
<div>Hi欢迎来到LiLi Shop</div> <Avatar icon="ios-person" class="mb_10" v-else size="80" />
<div> <div>Hi{{ userInfo.nickName || "欢迎来到LiLi Shop" | secrecyMobile }}</div>
<Button type="error" shape="circle">请登录</Button> &nbsp; <div v-if="userInfo.id">
<Button size="small" shape="circle">我要开店</Button> <Button type="error" shape="circle">会员中心</Button>
</div>
<div v-else>
<Button type="error" shape="circle">请登录</Button>
</div> </div>
</div> </div>
<div class="shop-msg"> <div class="shop-msg">
<div> <div>
<span>店铺信息</span> <span>常见问题</span>
<span>|</span> <ul class="article-list">
<span>网站帮助分类</span> <li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)">
{{article.title}}
</li>
</ul>
</div> </div>
<ul>
<li>免责条款</li>
<li>联系我们</li>
<li>咨询热点</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
@ -131,6 +132,13 @@ export default {
showModal: false, // modal showModal: false, // modal
selected: null, // selected: null, //
picModelFlag: false, // modal picModelFlag: false, // modal
userInfo:{},
articleList:[
{title:'促销计算规则'},
{title:'商家申请开店'},
{title:'商家账号注册'},
{title:'促销计算规则'}
]
}; };
}, },

View File

@ -16,7 +16,7 @@
</div> </div>
<!-- 操作按钮 --> <!-- 操作按钮 -->
<div class="btn-bar"> <div class="btn-bar">
<Button type="primary" @click="saveTemplate"></Button> <Button type="primary" :loading="submitLoading" @click="saveTemplate"></Button>
<Button class="ml_10" @click="resetTemplate"></Button> <Button class="ml_10" @click="resetTemplate"></Button>
</div> </div>
</div> </div>
@ -38,6 +38,7 @@ export default {
return { return {
modelData, // modelData, //
modelForm: { list: [] }, // modelForm: { list: [] }, //
submitLoading: false, //
}; };
}, },
methods: { methods: {
@ -47,15 +48,17 @@ export default {
}, },
// //
submitTemplate(pageShow) { submitTemplate(pageShow) {
this.modelForm.list.unshift(this.$refs.modelForm.navList); this.submitLoading = true
this.modelForm.list.unshift(this.$refs.modelForm.topAdvert); const modelForm = JSON.parse(JSON.stringify(this.modelForm))
const modelForm = JSON.stringify(this.modelForm); modelForm.list.unshift(this.$refs.modelForm.navList);
modelForm.list.unshift(this.$refs.modelForm.topAdvert);
const data = { const data = {
id: this.$route.query.id, id: this.$route.query.id,
pageData: modelForm, pageData: JSON.stringify(modelForm),
pageShow pageShow
}; };
API_floor.updateHome(this.$route.query.id, data).then((res) => { API_floor.updateHome(this.$route.query.id, data).then((res) => {
this.submitLoading = false
if (res.success) { if (res.success) {
this.$Message.success("保存模板成功"); this.$Message.success("保存模板成功");
} }

View File

@ -1,10 +1,4 @@
<style lang="scss" scoped>
@import "@/styles/tree-common.scss";
.desc{
font-size: 12px;
color: #999;
}
</style>
<template> <template>
<div class="search"> <div class="search">
<Card> <Card>
@ -130,7 +124,6 @@
@click="submitEdit" @click="submitEdit"
:loading="submitLoading" :loading="submitLoading"
type="primary" type="primary"
icon="ios-create-outline"
>保存 >保存
</Button </Button
> >
@ -232,6 +225,7 @@ import {
addPermission, addPermission,
editPermission, editPermission,
deletePermission, deletePermission,
searchPermission,
} from "@/api/index"; } from "@/api/index";
import util from "@/libs/util.js"; import util from "@/libs/util.js";
@ -436,6 +430,20 @@ export default {
this.cancelEdit(); this.cancelEdit();
} }
}, },
//
search() {
if (this.searchKey) {
this.loading = true;
searchPermission({title: this.searchKey}).then((res) => {
this.loading = false;
if (res.success) {
this.data = res.result;
}
});
} else {
this.getAllList();
}
},
// //
cancelEdit() { cancelEdit() {
let data = this.$refs.tree.getSelectedNodes()[0]; let data = this.$refs.tree.getSelectedNodes()[0];
@ -591,3 +599,10 @@ export default {
}, },
}; };
</script> </script>
<style lang="scss" scoped>
@import "@/styles/tree-common.scss";
.desc{
font-size: 12px;
color: #999;
}
</style>

View File

@ -45,12 +45,20 @@
</Row> </Row>
<div class="oss-operation padding-row"> <div class="oss-operation padding-row">
<div> <div>
<Button <Upload
@click="uploadVisible = true" style="display:inline-block;"
type="primary" :action="baseUrl + '/common/upload/file'"
>上传文件 :headers="accessToken"
</Button :on-success="handleSuccess"
:on-error="handleError"
:show-upload-list="false"
:max-size="1024"
:on-exceeded-size="handleMaxSize"
multiple
ref="up"
> >
<Button type="primary">上传文件</Button>
</Upload>
<Dropdown @on-click="handleDropdown"> <Dropdown @on-click="handleDropdown">
<Button> <Button>
更多操作 更多操作
@ -181,28 +189,7 @@
</Row> </Row>
</Card> </Card>
<Drawer title="文件上传" class="drawer" styles="z-index:2000;" closable v-model="uploadVisible" width="500">
<Upload
:action="baseUrl + '/common/upload/file'"
:headers="accessToken"
:on-success="handleSuccess"
:on-error="handleError"
:max-size="1024"
:on-exceeded-size="handleMaxSize"
multiple
type="drag"
ref="up"
>
<div style="padding: 20px 0">
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
<p>点击这里或将文件拖拽到这里上传</p>
</div>
</Upload>
<div class="drawer-footer">
<Button @click="clearFiles"></Button>
</div>
</Drawer>
<Modal <Modal
:title="modalTitle" :title="modalTitle"
@ -497,7 +484,7 @@ export default {
"Button", "Button",
{ {
props: { props: {
type: "primary", type: "info",
size: "small", size: "small",
}, },
style: { style: {
@ -517,6 +504,7 @@ export default {
{ {
props: { props: {
size: "small", size: "small",
type: 'success'
}, },
style: { style: {
marginRight: "5px", marginRight: "5px",