修复pc端楼层装修外部链接无法填写

master
paulGao 2022-07-13 20:00:41 +08:00
parent 994b700892
commit 75ef173c64
11 changed files with 1276 additions and 975 deletions

View File

@ -142,7 +142,7 @@ service.interceptors.response.use(
const errorResponse = error.response || {}; const errorResponse = error.response || {};
const errorData = errorResponse.data || {}; const errorData = errorResponse.data || {};
if (errorResponse.status === 403 || error.response.data.code === 20004) { if (errorResponse.status === 401 || errorResponse.status === 403 || error.response.data.code === 20004) {
isRefreshToken++; isRefreshToken++;
if (isRefreshToken === 1) { if (isRefreshToken === 1) {

View File

@ -341,6 +341,7 @@ export default {
title: "优惠券", title: "优惠券",
methodsed: () => { methodsed: () => {
this.showPromotionList = []; this.showPromotionList = [];
this.activeColumns = this.pintuanColumns;
this.sortGoods("COUPON"); this.sortGoods("COUPON");
}, },
}; };
@ -349,6 +350,7 @@ export default {
title: "积分商品", title: "积分商品",
methodsed: () => { methodsed: () => {
this.showPromotionList = []; this.showPromotionList = [];
this.activeColumns = this.pintuanColumns;
this.sortGoods("POINTS_GOODS"); this.sortGoods("POINTS_GOODS");
}, },
}; };

View File

@ -1,385 +1,449 @@
<template> <template>
<div class="model-form"> <div class="model-form">
<div class="model-content"> <div class="model-content">
<!-- 头部广告登录信息不需要拖拽 --> <!-- 头部广告登录信息不需要拖拽 -->
<div class="top-fixed-advert" :style="{backgroundColor:topAdvert.bgColor}"> <div
<img :src="topAdvert.img" width="1200" height="80" alt=""> class="top-fixed-advert"
<div class="setup-box"> :style="{ backgroundColor: topAdvert.bgColor }"
<Button size="small" @click.stop="handleModel('topAdvert')">编辑</Button> >
</div> <img :src="topAdvert.img" width="1200" height="80" alt="" />
</div> <div class="setup-box">
<div class="header-con"> <Button size="small" @click.stop="handleModel('topAdvert')"
<div></div> >编辑</Button
<ul class="detail"> >
<li>立即注册</li>
<li>请登录</li>
<li>我的订单</li>
<li>我的足迹</li>
<li><Icon size="18" type="ios-cart-outline" ></Icon>购物车</li>
<li>店铺入驻</li>
</ul>
</div>
<div class="search-con">
<img :src="require('@/assets/logo.png')" class="logo" alt="">
<div class="search">
<i-input size="large" placeholder="输入你想查找的商品">
<Button slot="append">搜索</Button>
</i-input>
</div>
</div>
<div class="nav-con">
<div class="all-categories">全部商品分类</div>
<ul class="nav-item">
<li v-for="(item,index) in navList.list" :key="index">
<a href="#">{{item.name}}</a>
</li>
</ul>
<div class="setup-box">
<Button size="small" @click.stop="handleModel('quickNav')">编辑</Button>
</div>
</div>
<!-- 装修主体 -->
<div>
<draggable class="model-form-list"
v-model="data.list"
v-bind="{group:'model', ghostClass: 'ghost'}"
@end="handleMoveEnd"
@add="handleModelAdd"
>
<template v-for="(element, index) in data.list">
<model-form-item v-if="element && element.key" :key="element.key" :element="element" :index="index" :data="data"></model-form-item>
</template>
</draggable>
</div>
</div> </div>
<Modal </div>
v-model="showModal" <div class="header-con">
title="顶部广告" <div></div>
draggable <ul class="detail">
width="800" <li>立即注册</li>
:z-index="100" <li>请登录</li>
:mask-closable="false" <li>我的订单</li>
<li>我的足迹</li>
<li><Icon size="18" type="ios-cart-outline"></Icon>购物车</li>
> <li>店铺入驻</li>
<!-- 顶部广告 --> </ul>
<div class="modal-top-advert"> </div>
<div> <div class="search-con">
<img class="show-image" width="600" height="40" :src="topAdvert.img" alt /> <img :src="require('@/assets/logo.png')" class="logo" alt="" />
</div> <div class="search">
<div class="tips"> <i-input size="large" placeholder="输入你想查找的商品">
建议尺寸<span>{{ topAdvert.size }}</span> <Button slot="append">搜索</Button>
</div> </i-input>
<div> </div>
图片链接<span>{{ topAdvert.url }}</span><Button size="small" type="primary" @click="handleSelectLink"></Button> </div>
</div> <div class="nav-con">
<div> <div class="all-categories">全部商品分类</div>
选择图片<Button size="small" type="primary" @click="handleSelectImg"></Button>&nbsp; <ul class="nav-item">
</div> <li v-for="(item, index) in navList.list" :key="index">
<div> <a href="#">{{ item.name }}</a>
选择背景色<ColorPicker v-model="topAdvert.bgColor" /> </li>
</div> </ul>
</div> <div class="setup-box">
</Modal> <Button size="small" @click.stop="handleModel('quickNav')"
<Modal >编辑</Button
v-model="showModalNav" >
title="快捷导航" </div>
draggable </div>
width="800" <!-- 装修主体 -->
:z-index="100" <div>
:mask-closable="false" <draggable
> class="model-form-list"
<!-- 分类tab栏 --> v-model="data.list"
<div class="modal-tab-bar"> v-bind="{ group: 'model', ghostClass: 'ghost' }"
<Button type="primary" size='small' @click="handleAddNav"></Button> @end="handleMoveEnd"
<table cellspacing="0"> @add="handleModelAdd"
<thead> >
<tr> <template v-for="(element, index) in data.list">
<th width="250">分类名称</th> <model-form-item
<th width="250">链接地址</th> v-if="element && element.key"
<!-- <th width="150">排序</th> --> :key="element.key"
<th width="250">操作</th> :element="element"
</tr> :index="index"
</thead> :data="data"
<tbody> ></model-form-item>
<tr v-for="(item, index) in navList.list" :key="index"> </template>
<td><Input v-model="item.name" /></td> </draggable>
<td><Input v-model="item.url" disabled /></td> </div>
<!-- <td><Input v-model="item.sort"/></td> -->
<td>
<Button type="primary" size="small" @click="handleSelectLink(item,index)"></Button>&nbsp;
<Button type="error" size="small" @click="handleDelNav(index)"></Button>
</td>
</tr>
</tbody>
</table>
</div>
</Modal>
<!-- 选择商品链接 -->
<liliDialog
ref="liliDialog"
@selectedLink="selectedLink"
></liliDialog>
<!-- 选择图片 -->
<Modal width="1200px" v-model="picModelFlag" footer-hide>
<ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
</Modal>
</div> </div>
<Modal
v-model="showModal"
title="顶部广告"
draggable
width="800"
:z-index="100"
:mask-closable="false"
>
<!-- 顶部广告 -->
<div class="modal-top-advert">
<div>
<img
class="show-image"
width="600"
height="40"
:src="topAdvert.img"
alt
/>
</div>
<div class="tips">
建议尺寸<span>{{ topAdvert.size }}</span>
</div>
<div>
图片链接<Input
class="outsideUrl"
v-model="topAdvert.url"
:disabled="!!topAdvert.type && topAdvert.type !== 'link'"
placeholder="https://"
/><Button size="small" type="primary" @click="handleSelectLink"
>选择链接</Button
>
</div>
<div>
选择图片<Button size="small" type="primary" @click="handleSelectImg"
>选择图片</Button
>&nbsp;
</div>
<div>选择背景色<ColorPicker v-model="topAdvert.bgColor" /></div>
</div>
</Modal>
<Modal
v-model="showModalNav"
title="快捷导航"
draggable
width="800"
:z-index="100"
:mask-closable="false"
>
<!-- 分类tab栏 -->
<div class="modal-tab-bar">
<Button type="primary" size="small" @click="handleAddNav"
>添加分类</Button
>
<table cellspacing="0">
<thead>
<tr>
<th width="250">分类名称</th>
<th width="250">链接地址</th>
<!-- <th width="150">排序</th> -->
<th width="250">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in navList.list" :key="index">
<td><Input v-model="item.name" /></td>
<td>
<Input
v-model="item.url"
:disabled="!!item.type && item.type !== 'link'"
/>
</td>
<!-- <td><Input v-model="item.sort"/></td> -->
<td>
<Button
type="primary"
size="small"
@click="handleSelectLink(item, index)"
>选择链接</Button
>&nbsp;
<Button type="error" size="small" @click="handleDelNav(index)"
>删除</Button
>
</td>
</tr>
</tbody>
</table>
</div>
</Modal>
<!-- 选择商品链接 -->
<liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
<!-- 选择图片 -->
<Modal width="1200px" v-model="picModelFlag" footer-hide>
<ossManage
@callback="callbackSelected"
:isComponent="true"
ref="ossManage"
/>
</Modal>
</div>
</template> </template>
<script> <script>
import Draggable from 'vuedraggable' import Draggable from "vuedraggable";
import ModelFormItem from './modelFormItem.vue' import ModelFormItem from "./modelFormItem.vue";
import ossManage from "@/views/sys/oss-manage/ossManage"; import ossManage from "@/views/sys/oss-manage/ossManage";
export default { export default {
name:'modelForm', name: "modelForm",
components:{ components: {
Draggable, Draggable,
ModelFormItem, ModelFormItem,
ossManage ossManage,
},
props: ["data"],
data() {
return {
picModelFlag: false, //
showModal: false, // 广
showModalNav: false, // nav
selectedNav: null, //nav
//
promotionTags: [
"买2免1",
"领200神券",
"199减100",
"母婴5折抢",
"充100送20",
], //
topAdvert: {
// 广
type: "topAdvert",
img: "",
url: "",
bgColor: "#de000d",
size: "1200*80",
},
navList: {
// nav
type: "navBar",
list: [
{ name: "秒杀", url: "" },
{ name: "闪购", url: "" },
{ name: "优惠券", url: "" },
{ name: "拍卖", url: "" },
{ name: "服装城", url: "" },
],
},
};
},
mounted() {
document.body.ondrop = function (event) {
let isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
if (isFirefox) {
event.preventDefault();
event.stopPropagation();
}
};
},
methods: {
handleSelectLink(item, index) {
//
if (item) this.selectedNav = item;
this.$refs.liliDialog.open("link");
console.log(item);
}, },
props:['data'], //
data(){ selectedLink(val) {
return{ if (this.showModalNav) {
picModelFlag: false, // this.selectedNav.url = this.$options.filters.formatLinkType(val);
showModal: false, // 广 this.selectedNav.type =
showModalNav: false, // nav val.___type === "other" && val.url === "" ? "link" : "other";
selectedNav:null, //nav } else {
// this.topAdvert.url = this.$options.filters.formatLinkType(val);
promotionTags: [ "买2免1", "领200神券", "199减100", "母婴5折抢", "充100送20"], // this.topAdvert.type =
topAdvert:{ // 广 val.___type === "other" && val.url === "" ? "link" : "other";
type:'topAdvert', }
img:'',
url:'',
bgColor:'#de000d',
size:'1200*80'
},
navList:{ // nav
type:'navBar',
list:[
{name:'秒杀', url:''}, {name:'闪购', url:''}, {name:'优惠券', url:''}, {name:'拍卖', url:''}, {name:'服装城', url:''},
]
}
}
}, },
mounted(){ handleDelNav(index) {
document.body.ondrop = function (event) { //
let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1 this.navList.list.splice(index, 1);
if (isFirefox) {
event.preventDefault()
event.stopPropagation()
}
}
}, },
methods:{ handleAddNav() {
handleSelectLink(item,index) { // //
if(item) this.selectedNav = item; this.navList.list.push({ name: "", url: "" });
this.$refs.liliDialog.open('link') },
}, //
// handleMoveEnd({ newIndex, oldIndex }) {
selectedLink(val) { console.log("index", newIndex, oldIndex);
console.log(val); },
if(this.showModalNav){ // 广
this.selectedNav.url = this.$options.filters.formatLinkType(val); handleModel(type) {
}else { if (type == "topAdvert") {
this.topAdvert.url = this.$options.filters.formatLinkType(val); this.showModal = true;
} } else {
}, this.showModalNav = true;
handleDelNav(index){ // }
this.navList.list.splice(index,1) },
}, //
handleAddNav(){ // handleSelectImg() {
this.navList.list.push( this.$refs.ossManage.selectImage = true;
{name:'',url:''} this.picModelFlag = true;
) },
console.log(this.navList.list) callbackSelected(item) {
}, //
// this.picModelFlag = false;
handleMoveEnd ({newIndex, oldIndex}) { this.topAdvert.img = item.url;
console.log('index', newIndex, oldIndex) },
}, handleModelAdd(evt) {
// 广 //
handleModel (type) { const newIndex = evt.newIndex;
if(type == 'topAdvert'){
this.showModal = true;
} else {
this.showModalNav = true;
}
},
//
handleSelectImg() {
this.$refs.ossManage.selectImage = true;
this.picModelFlag = true;
},
callbackSelected (item) { //
this.picModelFlag = false;
this.topAdvert.img = item.url;
},
handleModelAdd (evt) { //
const newIndex = evt.newIndex
// key // key
this.data.list[newIndex] = JSON.parse(JSON.stringify(this.data.list[newIndex])) this.data.list[newIndex] = JSON.parse(
const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999) JSON.stringify(this.data.list[newIndex])
this.$set(this.data.list, newIndex, { );
...this.data.list[newIndex], const key =
options: { Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
...this.data.list[newIndex].options, this.$set(this.data.list, newIndex, {
}, ...this.data.list[newIndex],
key, options: {
// ...this.data.list[newIndex].options,
model: this.data.list[newIndex].type + '_' + key
})
}, },
} key,
} //
model: this.data.list[newIndex].type + "_" + key,
});
},
},
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import './modelList/setup-box.scss'; @import "./modelList/setup-box.scss";
.model-form { .model-form {
width: 1500px; width: 1500px;
} }
.model-content { .model-content {
width: 1200px; width: 1200px;
margin: 0 auto; margin: 0 auto;
background: #fff; background: #fff;
min-height: 1200px; min-height: 1200px;
} }
.model-form-list{ .model-form-list {
min-height: 500px; min-height: 500px;
} }
/** 顶部广告,头部,搜索框 start */ /** 顶部广告,头部,搜索框 start */
.top-fixed-advert{ .top-fixed-advert {
display: flex; display: flex;
width:1500px; width: 1500px;
margin-left: -150px; margin-left: -150px;
background: $theme_color; background: $theme_color;
justify-content: center; justify-content: center;
} }
.header-con { .header-con {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
height: 35px; height: 35px;
padding: 0 15px; padding: 0 15px;
line-height: 35px; line-height: 35px;
color: #999;
font-weight: bold;
div,
li {
&:hover {
color: $theme_color;
cursor: pointer;
}
}
.detail {
display: flex;
> li {
margin-left: 10px;
&::after {
content: "|";
padding-left: 10px;
}
&:last-child::after {
content: "";
padding-left: 0;
}
&:hover::after {
color: #999; color: #999;
font-weight: bold; }
div,li{
&:hover{
color: $theme_color;
cursor: pointer;
}
}
.detail{
display: flex;
>li{
margin-left: 10px;
&::after{
content: "|";
padding-left: 10px;
}
&:last-child::after{
content:'';
padding-left: 0;
}
&:hover::after{
color: #999;
}
}
}
} }
/** 搜索框 */ }
.search-con { }
padding-top: 15px; /** 搜索框 */
margin: 0px auto; .search-con {
margin-bottom: 10px; padding-top: 15px;
width: 1200px; margin: 0px auto;
position: relative; margin-bottom: 10px;
.logo{ width: 1200px;
position: absolute; position: relative;
top: 10px; .logo {
left: 10px; position: absolute;
width: 150px; top: 10px;
height: 50px; left: 10px;
} width: 150px;
.search { height: 50px;
width: 460px; }
margin: 0 auto; .search {
/deep/ .ivu-input.ivu-input-large { width: 460px;
border: 2px solid $theme_color; margin: 0 auto;
font-size: 12px; /deep/ .ivu-input.ivu-input-large {
height: 34px; border: 2px solid $theme_color;
&:focus { font-size: 12px;
box-shadow: none; height: 34px;
} &:focus {
} box-shadow: none;
/deep/ .ivu-input-group-append { }
border: 1px solid $theme_color;
border-left: none;
height: 30px;
background-color: $theme_color;
color: #ffffff;
button {
font-size: 14px;
font-weight: 600;
line-height: 1;
}
}
}
} }
/** 商品分类 */ /deep/ .ivu-input-group-append {
.nav-con{ border: 1px solid $theme_color;
width:1200px; border-left: none;
height: 40px; height: 30px;
background: #eee; background-color: $theme_color;
display: flex; color: #ffffff;
.all-categories{ button {
width: 200px; font-size: 14px;
line-height: 40px; font-weight: 600;
color: #fff; line-height: 1;
background-color: $theme_color; }
text-align: center;
font-size: 16px;
}
.nav-item {
width: 1000px;
height: 40px;
line-height: 40px;
overflow: hidden;
list-style: none;
background-color: #eee;
display: flex;
li{
font-size: 16px;
font-weight: bold;
margin-left: 20px;
a{
color:rgb(89, 88, 88);
font-size: 15px;
&:hover{color:$theme_color}
}
}
}
} }
/** 顶部广告,头部,搜索框 end */ }
}
/** 商品分类 */
.nav-con {
width: 1200px;
height: 40px;
background: #eee;
display: flex;
.all-categories {
width: 200px;
line-height: 40px;
color: #fff;
background-color: $theme_color;
text-align: center;
font-size: 16px;
}
.nav-item {
width: 1000px;
height: 40px;
line-height: 40px;
overflow: hidden;
list-style: none;
background-color: #eee;
display: flex;
li {
font-size: 16px;
font-weight: bold;
margin-left: 20px;
a {
color: rgb(89, 88, 88);
font-size: 15px;
&:hover {
color: $theme_color;
}
}
}
}
}
/** 顶部广告,头部,搜索框 end */
.top-fixed-advert, .nav-con{ .top-fixed-advert,
position: relative; .nav-con {
&:hover{ position: relative;
.setup-box{ &:hover {
display: block; .setup-box {
} display: block;
}
}
/** 装修模态框 内部样式start */
.modal-top-advert{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
>*{
margin-bottom: 10px;
}
} }
}
}
/** 装修模态框 内部样式start */
.modal-top-advert {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
> * {
margin-bottom: 10px;
}
}
</style> </style>

View File

@ -198,7 +198,12 @@
建议尺寸<span>{{ selected.size }}</span> 建议尺寸<span>{{ selected.size }}</span>
</div> </div>
<div> <div>
图片链接<span>{{ selected.url }}</span> 图片链接<Input
class="outsideUrl"
v-model="selected.url"
:disabled="!!selected.type && selected.type !== 'link'"
placeholder="https://"
/>
<Button size="small" type="primary" @click="handleSelectLink" <Button size="small" type="primary" @click="handleSelectLink"
>选择链接</Button >选择链接</Button
> >
@ -211,11 +216,7 @@
</div> </div>
</Modal> </Modal>
<!-- 选择商品链接 --> <!-- 选择商品链接 -->
<liliDialog <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
ref="liliDialog"
@selectedLink="selectedLink"
></liliDialog>
<!-- 选择图片 --> <!-- 选择图片 -->
<Modal width="1200px" v-model="picModelFlag" footer-hide> <Modal width="1200px" v-model="picModelFlag" footer-hide>
<ossManage <ossManage
@ -229,8 +230,8 @@
<script> <script>
import ModelCarousel from "./modelList/carousel.vue"; import ModelCarousel from "./modelList/carousel.vue";
import ModelCarousel1 from './modelList/carousel1.vue'; import ModelCarousel1 from "./modelList/carousel1.vue";
import ModelCarousel2 from './modelList/carousel2.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";
@ -284,8 +285,10 @@ export default {
// //
selectedLink(val) { selectedLink(val) {
this.selected.url = this.$options.filters.formatLinkType(val); this.selected.url = this.$options.filters.formatLinkType(val);
this.selected.type =
val.___type === "other" && val.url === "" ? "link" : "other";
}, },
handleSelectImg() { handleSelectImg() {
// //
this.$refs.ossManage.selectImage = true; this.$refs.ossManage.selectImage = true;

View File

@ -22,7 +22,9 @@
<div class="person-msg"> <div class="person-msg">
<img :src="userInfo.face" v-if="userInfo.face" alt /> <img :src="userInfo.face" v-if="userInfo.face" alt />
<Avatar icon="ios-person" class="mb_10" v-else size="80" /> <Avatar icon="ios-person" class="mb_10" v-else size="80" />
<div>Hi{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}</div> <div>
Hi{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}
</div>
<div v-if="userInfo.id"> <div v-if="userInfo.id">
<Button type="error" shape="circle">会员中心</Button> <Button type="error" shape="circle">会员中心</Button>
</div> </div>
@ -34,8 +36,13 @@
<div> <div>
<span>常见问题</span> <span>常见问题</span>
<ul class="article-list"> <ul class="article-list">
<li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)"> <li
{{article.title}} class="ellipsis"
:alt="article.title"
v-for="(article, index) in articleList"
:key="index"
>
{{ article.title }}
</li> </li>
</ul> </ul>
</div> </div>
@ -49,8 +56,6 @@
width="800" width="800"
:z-index="100" :z-index="100"
:mask-closable="false" :mask-closable="false"
> >
<div class="modal-tab-bar"> <div class="modal-tab-bar">
<Button type="primary" size="small" @click="handleAdd"></Button> <Button type="primary" size="small" @click="handleAdd"></Button>
@ -78,19 +83,22 @@
alt="" alt=""
/> />
</td> </td>
<td><Input v-model="item.url" disabled /></td> <td>
<Input
class="outsideUrl"
v-model="item.url"
:disabled="!!item.type && item.type !== 'link'"
/>
</td>
<!-- <td><Input v-model="item.sort"/></td> --> <!-- <td><Input v-model="item.sort"/></td> -->
<td> <td>
<Button <Button
type="primary" type="primary"
size="small"
@click="handleSelectImg(item)"
>选择图片</Button
>&nbsp;
<Button
type="info"
size="small" size="small"
@click="handleSelectLink(item)" @click="handleSelectImg(item)"
>选择图片</Button
>&nbsp;
<Button type="info" size="small" @click="handleSelectLink(item)"
>选择链接</Button >选择链接</Button
>&nbsp; >&nbsp;
<Button <Button
@ -107,14 +115,14 @@
</div> </div>
</Modal> </Modal>
<!-- 选择商品链接 --> <!-- 选择商品链接 -->
<liliDialog <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
ref="liliDialog"
@selectedLink="selectedLink"
></liliDialog>
<!-- 选择图片 --> <!-- 选择图片 -->
<Modal width="1200px" v-model="picModelFlag" footer-hide> <Modal width="1200px" v-model="picModelFlag" footer-hide>
<ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" /> <ossManage
@callback="callbackSelected"
:isComponent="true"
ref="ossManage"
/>
</Modal> </Modal>
</div> </div>
</template> </template>
@ -125,39 +133,40 @@ export default {
name: "modelCarousel", name: "modelCarousel",
props: ["data"], props: ["data"],
components: { components: {
ossManage ossManage,
}, },
data() { data() {
return { return {
showModal: false, // modal showModal: false, // modal
selected: null, // selected: null, //
picModelFlag: false, // modal picModelFlag: false, // modal
userInfo:{}, userInfo: {},
articleList:[ articleList: [
{title:'促销计算规则'}, { title: "促销计算规则" },
{title:'商家申请开店'}, { title: "商家申请开店" },
{title:'商家账号注册'}, { title: "商家账号注册" },
{title:'促销计算规则'} { title: "促销计算规则" },
] ],
}; };
}, },
methods: { methods: {
handleSelectModel () { handleSelectModel() {
// //
this.showModal = true; this.showModal = true;
}, },
// //
handleAdd () { handleAdd() {
this.data.options.list.push({ img: "", url: "" }); this.data.options.list.push({ img: "", url: "", type: "" });
this.$forceUpdate(); this.$forceUpdate();
}, },
handleSelectLink (item) { handleSelectLink(item) {
// //
this.$refs.liliDialog.open('link') this.$refs.liliDialog.open("link");
this.selected = item; this.selected = item;
}, },
callbackSelected (item) { // callbackSelected(item) {
//
this.picModelFlag = false; this.picModelFlag = false;
this.selected.img = item.url; this.selected.img = item.url;
}, },
@ -165,10 +174,11 @@ export default {
// //
this.data.options.list.splice(index, 1); this.data.options.list.splice(index, 1);
}, },
selectedLink(val) { // selectedLink(val) {
console.log(val); //
this.selected.url = this.$options.filters.formatLinkType(val); this.selected.url = this.$options.filters.formatLinkType(val);
console.log(this.selected.url); this.selected.type =
val.___type === "other" && val.url === "" ? "link" : "other";
}, },
// //
handleSelectImg(item) { handleSelectImg(item) {

View File

@ -1,12 +1,12 @@
<template> <template>
<div class="model-carousel1" :style="{background: bgColor}"> <div class="model-carousel1" :style="{ background: bgColor }">
<div class="nav-body clearfix"> <div class="nav-body clearfix">
<!-- 侧边导航 --> <!-- 侧边导航 -->
<div class="nav-side">分类占位区</div> <div class="nav-side">分类占位区</div>
<div class="nav-content setup-content"> <div class="nav-content setup-content">
<!-- 轮播图 --> <!-- 轮播图 -->
<Carousel autoplay @on-change="autoChange"> <Carousel autoplay @on-change="autoChange">
<CarouselItem v-for="(item, index) in data.options.list" :key="index" > <CarouselItem v-for="(item, index) in data.options.list" :key="index">
<div style="overflow: hidden"> <div style="overflow: hidden">
<img :src="item.img" width="1200" height="470" /> <img :src="item.img" width="1200" height="470" />
</div> </div>
@ -26,14 +26,14 @@
width="800" width="800"
:z-index="100" :z-index="100"
:mask-closable="false" :mask-closable="false"
> >
<div class="modal-tab-bar"> <div class="modal-tab-bar">
<Button type="primary" size="small" @click="handleAdd"></Button> <Button type="primary" size="small" @click="handleAdd"></Button>
&nbsp; &nbsp;
<span class="ml_10">图片尺寸:{{ data.size }}</span> <span class="ml_10">图片尺寸:{{ data.size }}</span>
<span style="color: red" class="fz_12 ml_10">点击缩略图替换图片点击颜色选择器选择背景色</span> <span style="color: red" class="fz_12 ml_10"
>点击缩略图替换图片点击颜色选择器选择背景色</span
>
<table cellspacing="0"> <table cellspacing="0">
<thead> <thead>
<tr> <tr>
@ -54,12 +54,15 @@
alt="" alt=""
/> />
</td> </td>
<td><Input v-model="item.url" disabled /></td>
<td> <td>
<Button <Input
type="info" class="outsideUrl"
size="small" v-model="item.url"
@click="handleSelectLink(item)" :disabled="!!item.type && item.type !== 'link'"
/>
</td>
<td>
<Button type="info" size="small" @click="handleSelectLink(item)"
>选择链接</Button >选择链接</Button
>&nbsp; >&nbsp;
<ColorPicker size="small" v-model="item.bgColor" /> <ColorPicker size="small" v-model="item.bgColor" />
@ -78,11 +81,7 @@
</div> </div>
</Modal> </Modal>
<!-- 选择商品链接 --> <!-- 选择商品链接 -->
<liliDialog <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
ref="liliDialog"
@selectedLink="selectedLink"
></liliDialog>
<!-- 选择图片 --> <!-- 选择图片 -->
<Modal width="1200px" v-model="picModelFlag" footer-hide> <Modal width="1200px" v-model="picModelFlag" footer-hide>
<ossManage @callback="callbackSelected" ref="ossManage" /> <ossManage @callback="callbackSelected" ref="ossManage" />
@ -96,39 +95,40 @@ export default {
name: "modelCarousel", name: "modelCarousel",
props: ["data"], props: ["data"],
components: { components: {
ossManage ossManage,
}, },
data() { data() {
return { return {
showModal: false, // modal showModal: false, // modal
selected: null, // selected: null, //
picModelFlag: false, // modal picModelFlag: false, // modal
bgColor:'#fff' // bgColor: "#fff", //
}; };
}, },
mounted () { mounted() {
this.bgColor = this.data.options.list[0].bgColor this.bgColor = this.data.options.list[0].bgColor;
}, },
methods: { methods: {
handleSelectModel () { handleSelectModel() {
// //
this.showModal = true; this.showModal = true;
}, },
// //
autoChange (oVal,val) { autoChange(oVal, val) {
this.bgColor = this.data.options.list[val].bgColor this.bgColor = this.data.options.list[val].bgColor;
}, },
// //
handleAdd () { handleAdd() {
this.data.options.list.push({ img: "", url: "", bgColor: '#fff' }); this.data.options.list.push({ img: "", url: "", bgColor: "#fff" });
this.$forceUpdate(); this.$forceUpdate();
}, },
// modal // modal
handleSelectLink (item) { handleSelectLink(item) {
this.$refs.liliDialog.open('link') this.$refs.liliDialog.open("link");
this.selected = item; this.selected = item;
}, },
callbackSelected (item) { // callbackSelected(item) {
//
this.picModelFlag = false; this.picModelFlag = false;
this.selected.img = item.url; this.selected.img = item.url;
}, },
@ -136,15 +136,18 @@ export default {
handleDel(index) { handleDel(index) {
this.data.options.list.splice(index, 1); this.data.options.list.splice(index, 1);
}, },
selectedLink(val) { // selectedLink(val) {
//
this.selected.url = this.$options.filters.formatLinkType(val); this.selected.url = this.$options.filters.formatLinkType(val);
this.selected.type =
val.___type === "other" && val.url === "" ? "link" : "other";
}, },
// modal // modal
handleSelectImg(item) { handleSelectImg(item) {
this.selected = item; this.selected = item;
this.$refs.ossManage.selectImage = true; this.$refs.ossManage.selectImage = true;
this.picModelFlag = true; this.picModelFlag = true;
} },
}, },
}; };
</script> </script>
@ -163,14 +166,13 @@ export default {
width: 1200px; width: 1200px;
height: 470px; height: 470px;
margin: 0px auto; margin: 0px auto;
} }
.nav-side { .nav-side {
height: 100%; height: 100%;
width: 200px; width: 200px;
padding: 0px; padding: 0px;
color: #fff; color: #fff;
background-color:rgba(0,0,0,.5); background-color: rgba(0, 0, 0, 0.5);
line-height: 470px; line-height: 470px;
text-align: center; text-align: center;
position: absolute; position: absolute;

View File

@ -21,7 +21,10 @@
<div class="nav-content1 setup-content"> <div class="nav-content1 setup-content">
<!-- 轮播图 --> <!-- 轮播图 -->
<Carousel autoplay :autoplay-speed="5000"> <Carousel autoplay :autoplay-speed="5000">
<CarouselItem v-for="(item, index) in data.options.listRight" :key="index"> <CarouselItem
v-for="(item, index) in data.options.listRight"
:key="index"
>
<div class="mb_10"> <div class="mb_10">
<img :src="item[0].img" width="190" height="150" /> <img :src="item[0].img" width="190" height="150" />
</div> </div>
@ -43,7 +46,9 @@
<div class="person-msg"> <div class="person-msg">
<img :src="userInfo.face" v-if="userInfo.face" alt /> <img :src="userInfo.face" v-if="userInfo.face" alt />
<Avatar icon="ios-person" class="mb_10" v-else size="80" /> <Avatar icon="ios-person" class="mb_10" v-else size="80" />
<div>Hi{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}</div> <div>
Hi{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}
</div>
<div v-if="userInfo.id"> <div v-if="userInfo.id">
<Button type="error" shape="circle">会员中心</Button> <Button type="error" shape="circle">会员中心</Button>
</div> </div>
@ -55,8 +60,13 @@
<div> <div>
<span>常见问题</span> <span>常见问题</span>
<ul class="article-list"> <ul class="article-list">
<li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)"> <li
{{article.title}} class="ellipsis"
:alt="article.title"
v-for="(article, index) in articleList"
:key="index"
>
{{ article.title }}
</li> </li>
</ul> </ul>
</div> </div>
@ -97,13 +107,17 @@
alt="" alt=""
/> />
</td> </td>
<td><Input v-model="item.url" disabled /></td>
<td> <td>
<Button <Input
type="info" class="outsideUrl"
size="small" v-model="item.url"
@click="handleSelectLink(item)" :disabled="!!item.type && item.type !== 'link'"
>选择链接</Button>&nbsp; />
</td>
<td>
<Button type="info" size="small" @click="handleSelectLink(item)"
>选择链接</Button
>&nbsp;
<Button <Button
type="error" type="error"
ghost ghost
@ -127,12 +141,23 @@
:mask-closable="false" :mask-closable="false"
> >
<div class="modal-tab-bar"> <div class="modal-tab-bar">
<Button type="primary" size="small" @click="handleAddGroup"></Button> <Button type="primary" size="small" @click="handleAddGroup"
>添加组</Button
>
&nbsp; &nbsp;
<span class="ml_10">图片尺寸:{{ data.size }}</span> <span class="ml_10">图片尺寸:{{ data.size }}</span>
<span style="color: red" class="fz_12 ml_10">点击缩略图替换图片</span> <span style="color: red" class="fz_12 ml_10">点击缩略图替换图片</span>
<Tabs type="card" closable @on-tab-remove="handleTabRemove" class="mt_10"> <Tabs
<TabPane :label="'图片组'+(gIndex+1)" v-for="(group, gIndex) in data.options.listRight" :key="gIndex"> type="card"
closable
@on-tab-remove="handleTabRemove"
class="mt_10"
>
<TabPane
:label="'图片组' + (gIndex + 1)"
v-for="(group, gIndex) in data.options.listRight"
:key="gIndex"
>
<table cellspacing="0"> <table cellspacing="0">
<thead> <thead>
<tr> <tr>
@ -153,28 +178,30 @@
alt="" alt=""
/> />
</td> </td>
<td><Input v-model="item.url" disabled /></td> <td>
<Input
class="outsideUrl"
v-model="item.url"
:disabled="!!item.type && item.type !== 'link'"
/>
</td>
<td> <td>
<Button <Button
type="info" type="info"
size="small" size="small"
@click="handleSelectLink(item)" @click="handleSelectLink(item)"
>选择链接</Button> >选择链接</Button
>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</TabPane> </TabPane>
</Tabs> </Tabs>
</div> </div>
</Modal> </Modal>
<!-- 选择商品链接 --> <!-- 选择商品链接 -->
<liliDialog <liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
ref="liliDialog"
@selectedLink="selectedLink"
></liliDialog>
<!-- 选择图片 --> <!-- 选择图片 -->
<Modal width="1200px" v-model="picModelFlag" footer-hide> <Modal width="1200px" v-model="picModelFlag" footer-hide>
<ossManage @callback="callbackSelected" ref="ossManage" /> <ossManage @callback="callbackSelected" ref="ossManage" />
@ -188,51 +215,52 @@ export default {
name: "modelCarousel", name: "modelCarousel",
props: ["data"], props: ["data"],
components: { components: {
ossManage ossManage,
}, },
data() { data() {
return { return {
showModal: false, // modal showModal: false, // modal
selected: null, // selected: null, //
picModelFlag: false, // modal picModelFlag: false, // modal
userInfo:{}, userInfo: {},
articleList:[ articleList: [
{title:'促销计算规则'}, { title: "促销计算规则" },
{title:'商家申请开店'}, { title: "商家申请开店" },
{title:'商家账号注册'}, { title: "商家账号注册" },
{title:'促销计算规则'} { title: "促销计算规则" },
] ],
}; };
}, },
methods: { methods: {
handleSelectModel () { handleSelectModel() {
// //
this.showModal = true; this.showModal = true;
}, },
// //
handleAdd () { handleAdd() {
this.data.options.list.push({ img: "", url: "" }); this.data.options.list.push({ img: "", url: "" });
this.$forceUpdate(); this.$forceUpdate();
}, },
// //
handleAddGroup () { handleAddGroup() {
this.data.options.listRight.push([ this.data.options.listRight.push([
{img:'',url:''}, { img: "", url: "" },
{img:'',url:''}, { img: "", url: "" },
{img:'',url:''} { img: "", url: "" },
]) ]);
}, },
// //
handleTabRemove (index) { handleTabRemove(index) {
this.data.options.listRight.splice(index, 1) this.data.options.listRight.splice(index, 1);
}, },
// //
handleSelectLink (item) { handleSelectLink(item) {
this.$refs.liliDialog.open('link') this.$refs.liliDialog.open("link");
this.selected = item; this.selected = item;
}, },
callbackSelected (item) { // callbackSelected(item) {
//
this.picModelFlag = false; this.picModelFlag = false;
this.selected.img = item.url; this.selected.img = item.url;
}, },
@ -240,10 +268,11 @@ export default {
handleDel(index) { handleDel(index) {
this.data.options.list.splice(index, 1); this.data.options.list.splice(index, 1);
}, },
selectedLink(val) { // selectedLink(val) {
console.log(val); //
this.selected.url = this.$options.filters.formatLinkType(val); this.selected.url = this.$options.filters.formatLinkType(val);
console.log(this.selected.url); this.selected.type =
val.___type === "other" && val.url === "" ? "link" : "other";
}, },
// modal // modal
handleSelectImg(item) { handleSelectImg(item) {
@ -294,7 +323,8 @@ export default {
} }
/*导航内容*/ /*导航内容*/
.nav-content,.nav-content1 { .nav-content,
.nav-content1 {
width: 590px; width: 590px;
height: 470px; height: 470px;
overflow: hidden; overflow: hidden;
@ -302,7 +332,7 @@ export default {
position: relative; position: relative;
margin-left: 10px; margin-left: 10px;
} }
.nav-content1{ .nav-content1 {
width: 190px; width: 190px;
} }
.nav-right { .nav-right {

View File

@ -1,162 +1,198 @@
<template> <template>
<div class="first-page-advert"> <div class="first-page-advert">
<div class="item setup-content" :style="{backgroundImage:`linear-gradient(to right, ${item.fromColor}, ${item.toColor})`}" v-for="(item, index) in options.list" :key="index"> <div
<div> class="item setup-content"
<span class="line top-line"></span> :style="{
<p>{{item.name}}</p> backgroundImage: `linear-gradient(to right, ${item.fromColor}, ${item.toColor})`,
<span class="line btm-line"></span> }"
<p>{{item.describe}}</p> v-for="(item, index) in options.list"
</div> :key="index"
<img :src="item.img" width="170" height="170" alt=""> >
<div class="setup-box"> <div>
<div><Button size="small" @click.stop="handleSelectModel(item)">编辑</Button></div> <span class="line top-line"></span>
</div> <p>{{ item.name }}</p>
<span class="line btm-line"></span>
<p>{{ item.describe }}</p>
</div>
<img :src="item.img" width="170" height="170" alt="" />
<div class="setup-box">
<div>
<Button size="small" @click.stop="handleSelectModel(item)"
>编辑</Button
>
</div> </div>
<Modal </div>
v-model="showModal"
title="装修"
draggable
width="800"
:z-index="100"
:mask-closable="false"
>
<div class="modal-top-advert">
<div>
<img class="show-image" width="170" height="170" :src="selected.img" alt />
</div>
<div>
<span>图片主标题</span><Input v-model="selected.name" />
</div>
<div>
<span>图片描述</span><Input v-model="selected.describe" />
</div>
<div class="tips">
建议尺寸<span>{{ selected.size }}</span>
</div>
<div>
图片链接<span>{{ selected.url }}</span> <Button size="small" type="primary" @click="handleSelectLink"></Button>
</div>
<div>
<span>渐变背景色</span><Input v-model="selected.fromColor" /> <ColorPicker v-if="selected.fromColor" v-model="selected.fromColor" />
</div>
<div>
<span>渐变背景色</span><Input v-model="selected.toColor" /> <ColorPicker v-if="selected.toColor" v-model="selected.toColor" />
</div>
<div :style="{backgroundImage:`linear-gradient(to right, ${selected.fromColor}, ${selected.toColor})`}" class="exhibition"></div>
<div>
选择图片<Button size="small" type="primary" @click="handleSelectImg"></Button>&nbsp;
</div>
</div>
</Modal>
<!-- 选择商品链接 -->
<liliDialog
ref="liliDialog"
@selectedLink="selectedLink"
></liliDialog>
<!-- 选择图片 -->
<Modal width="1200px" v-model="picModelFlag" footer-hide>
<ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
</Modal>
</div> </div>
<Modal
v-model="showModal"
title="装修"
draggable
width="800"
:z-index="100"
:mask-closable="false"
>
<div class="modal-top-advert">
<div>
<img
class="show-image"
width="170"
height="170"
:src="selected.img"
alt
/>
</div>
<div><span>图片主标题</span><Input v-model="selected.name" /></div>
<div><span>图片描述</span><Input v-model="selected.describe" /></div>
<div class="tips">
建议尺寸<span>{{ selected.size }}</span>
</div>
<div>
图片链接<Input
class="outsideUrl"
v-model="selected.url"
:disabled="!!selected.type && selected.type !== 'link'"
placeholder="https://"
/>
<Button size="small" type="primary" @click="handleSelectLink"
>选择链接</Button
>
</div>
<div>
<span>渐变背景色</span><Input v-model="selected.fromColor" />
<ColorPicker v-if="selected.fromColor" v-model="selected.fromColor" />
</div>
<div>
<span>渐变背景色</span><Input v-model="selected.toColor" />
<ColorPicker v-if="selected.toColor" v-model="selected.toColor" />
</div>
<div
:style="{
backgroundImage: `linear-gradient(to right, ${selected.fromColor}, ${selected.toColor})`,
}"
class="exhibition"
></div>
<div>
选择图片<Button size="small" type="primary" @click="handleSelectImg"
>选择图片</Button
>&nbsp;
</div>
</div>
</Modal>
<!-- 选择商品链接 -->
<liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
<!-- 选择图片 -->
<Modal width="1200px" v-model="picModelFlag" footer-hide>
<ossManage
@callback="callbackSelected"
:isComponent="true"
ref="ossManage"
/>
</Modal>
</div>
</template> </template>
<script> <script>
import ossManage from "@/views/sys/oss-manage/ossManage"; import ossManage from "@/views/sys/oss-manage/ossManage";
export default { export default {
props:{ props: {
data: { data: {
type: Object, type: Object,
default: null default: null,
}
}, },
components: {ossManage}, },
data() { components: { ossManage },
return { data() {
options: this.data.options, // return {
showModal: false, // modal options: this.data.options, //
selected: {}, // showModal: false, // modal
picModelFlag: false // selected: {}, //
} picModelFlag: false, //
};
},
methods: {
// modal
handleSelectModel(item, type) {
this.selected = item;
this.showModal = true;
}, },
methods:{ handleSelectLink(item, index) {
// modal //
handleSelectModel (item,type) { this.$refs.liliDialog.open("link");
this.selected = item; },
this.showModal = true //
}, selectedLink(val) {
handleSelectLink(item,index) { // this.selected.url = this.$options.filters.formatLinkType(val);
this.$refs.liliDialog.open('link') this.selected.type =
}, val.___type === "other" && val.url === "" ? "link" : "other";
// },
selectedLink(val) { handleSelectImg() {
this.selected.url = this.$options.filters.formatLinkType(val);; //
}, this.$refs.ossManage.selectImage = true;
handleSelectImg(){ // this.picModelFlag = true;
this.$refs.ossManage.selectImage = true; },
this.picModelFlag = true; //
}, callbackSelected(val) {
// this.picModelFlag = false;
callbackSelected (val) { this.selected.img = val.url;
this.picModelFlag = false; },
this.selected.img = val.url; },
} };
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import './setup-box.scss'; @import "./setup-box.scss";
.first-page-advert{ .first-page-advert {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
// margin-top: -10px;
.item {
width: 393px;
height: 170px;
margin-top: 10px;
display: flex; display: flex;
flex-wrap: wrap; align-items: center;
justify-content: space-between; justify-content: center;
// margin-top: -10px; img {
.item{ margin-left: 20px;
width: 393px;
height: 170px;
margin-top: 10px;
display: flex;
align-items: center;
justify-content: center;
img{margin-left: 20px;}
&:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3){margin-top: 0;}
p:nth-of-type(1){
margin: 3px 0;
font-size: 18px;
color: #fff;
}
p:nth-of-type(2){
margin-top: 3px;
color: #fff;
}
}
.line{
position: relative;
display: block;
height: 2px;
background: url(../../../assets/festival_icon.png);
z-index: 1;
}
.top-line{
width: 78px;
background-position: -1px -3px;
}
.btm-line{
background-position: 0 -11px;
width: 154px;
} }
&:nth-of-type(1),
&:nth-of-type(2),
&:nth-of-type(3) {
margin-top: 0;
}
p:nth-of-type(1) {
margin: 3px 0;
font-size: 18px;
color: #fff;
}
p:nth-of-type(2) {
margin-top: 3px;
color: #fff;
}
}
.line {
position: relative;
display: block;
height: 2px;
background: url(../../../assets/festival_icon.png);
z-index: 1;
}
.top-line {
width: 78px;
background-position: -1px -3px;
}
.btm-line {
background-position: 0 -11px;
width: 154px;
}
} }
.modal-top-advert{ .modal-top-advert {
align-items: start; align-items: start;
padding: 0 30px; padding: 0 30px;
.exhibition{ .exhibition {
width: 300px; width: 300px;
height: 50px; height: 50px;
} }
} }
</style> </style>

View File

@ -1,339 +1,446 @@
<template> <template>
<div class="new-goods"> <div class="new-goods">
<div class="left">
<div class="left"> <div
<div class="top-header setup-content" :style="{background:options.left.bgColor}"> class="top-header setup-content"
<span>{{options.left.title}}</span> :style="{ background: options.left.bgColor }"
<span>{{options.left.secondTitle}} &gt;</span> >
<div class="setup-box"> <span>{{ options.left.title }}</span>
<div><Button size="small" @click.stop="handleSelectModel(options.left,true)">编辑</Button></div> <span>{{ options.left.secondTitle }} &gt;</span>
</div> <div class="setup-box">
</div> <div>
<div class="content"> <Button
<div class="con-item setup-content" v-for="(item, index) in options.left.list" :key="index"> size="small"
<div> @click.stop="handleSelectModel(options.left, true)"
<p>{{item.name}}</p> >编辑</Button
<p class="describe">{{item.describe}}</p>
</div>
<img :src="item.img" alt="">
<div class="setup-box">
<div><Button size="small" @click.stop="handleSelectModel(item)">编辑</Button></div>
</div>
</div>
</div>
</div>
<div class="middle">
<div class="top-header setup-content" :style="{background:options.middle.bgColor}">
<span>{{options.middle.title}}</span>
<span>{{options.middle.secondTitle}} &gt;</span>
<div class="setup-box">
<div><Button size="small" @click.stop="handleSelectModel(options.middle,true)">编辑</Button></div>
</div>
</div>
<div class="content">
<div class="con-item setup-content" v-for="(item, index) in options.middle.list" :key="index">
<div>
<p>{{item.name}}</p>
<p class="describe">{{item.describe}}</p>
</div>
<img :src="item.img" alt="">
<div class="setup-box">
<div><Button size="small" @click.stop="handleSelectModel(item)">编辑</Button></div>
</div>
</div>
</div>
</div>
<div class="right">
<div class="top-header setup-content" :style="{background:options.right.bgColor}">
<span>{{options.right.title}}</span>
<span>{{options.right.secondTitle}} &gt;</span>
<div class="setup-box">
<div><Button size="small" @click.stop="handleSelectModel(options.right,true)">编辑</Button></div>
</div>
</div>
<div class="content">
<div class="setup-content" v-for="(item, index) in options.right.list" :key="index">
<img :src="item.img" alt="">
<p>{{item.name}}</p>
<p>{{item.price | unitPrice('¥')}}</p>
<div class="jiaobiao" :class="'jiaobiao'+(index+1)">{{index+1}}</div>
<div class="setup-box">
<div><Button size="small" @click.stop="handleSelectGoods(item)">编辑</Button></div>
</div>
</div>
</div>
</div>
<!-- 装修内容 -->
<Modal
v-model="showModal"
title="装修"
draggable
width="800"
:z-index="100"
:mask-closable="false"
> >
<div class="modal-top-advert"> </div>
<div> </div>
<img class="show-image" width="160" height="160" v-if="selected.size && selected.size.indexOf('160*160')>=0" :src="selected.img" alt /> </div>
<img class="show-image" width="80" height="80" v-if="selected.size && selected.size.indexOf('90*90')>=0" :src="selected.img" alt /> <div class="content">
</div> <div
<div> class="con-item setup-content"
<span>图片主标题</span><Input v-model="selected.name" /> v-for="(item, index) in options.left.list"
</div> :key="index"
<div> >
<span>图片描述</span><Input v-model="selected.describe" /> <div>
</div> <p>{{ item.name }}</p>
<div class="tips"> <p class="describe">{{ item.describe }}</p>
建议尺寸<span>{{ selected.size }}</span> </div>
</div> <img :src="item.img" alt="" />
<div> <div class="setup-box">
图片链接<span>{{ selected.url }}</span> <Button size="small" type="primary" @click="handleSelectLink"></Button> <div>
</div> <Button size="small" @click.stop="handleSelectModel(item)"
<div> >编辑</Button
<Button size="small" type="primary" @click="handleSelectImg"></Button>&nbsp; >
<Button size="small" type="primary" @click="handleSelectGoods('')"></Button>
</div>
</div> </div>
</Modal> </div>
<!-- 装修标题 --> </div>
<Modal </div>
v-model="showModal1"
title="装修"
draggable
width="800"
:z-index="100"
:mask-closable="false"
>
<div class="modal-top-advert">
<div>
<span>主标题</span><Input v-model="selected.title" />
</div>
<div>
<span>副标题</span><Input v-model="selected.secondTitle" />
</div>
<div>
<span>副标题链接{{selected.url}}</span><Button size="small" class="ml_10" type="primary" @click="handleSelectLink"></Button>
</div>
<div>
<span>背景色</span><ColorPicker v-if="selected.bgColor" v-model="selected.bgColor" />
</div>
</div>
</Modal>
<!-- 选择商品链接 -->
<liliDialog
ref="liliDialog"
@selectedLink="selectedLink"
@selectedGoodsData="selectedGoodsData"
></liliDialog>
<!-- 选择图片 -->
<Modal width="1200px" v-model="picModelFlag" footer-hide>
<ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
</Modal>
</div> </div>
<div class="middle">
<div
class="top-header setup-content"
:style="{ background: options.middle.bgColor }"
>
<span>{{ options.middle.title }}</span>
<span>{{ options.middle.secondTitle }} &gt;</span>
<div class="setup-box">
<div>
<Button
size="small"
@click.stop="handleSelectModel(options.middle, true)"
>编辑</Button
>
</div>
</div>
</div>
<div class="content">
<div
class="con-item setup-content"
v-for="(item, index) in options.middle.list"
:key="index"
>
<div>
<p>{{ item.name }}</p>
<p class="describe">{{ item.describe }}</p>
</div>
<img :src="item.img" alt="" />
<div class="setup-box">
<div>
<Button size="small" @click.stop="handleSelectModel(item)"
>编辑</Button
>
</div>
</div>
</div>
</div>
</div>
<div class="right">
<div
class="top-header setup-content"
:style="{ background: options.right.bgColor }"
>
<span>{{ options.right.title }}</span>
<span>{{ options.right.secondTitle }} &gt;</span>
<div class="setup-box">
<div>
<Button
size="small"
@click.stop="handleSelectModel(options.right, true)"
>编辑</Button
>
</div>
</div>
</div>
<div class="content">
<div
class="setup-content"
v-for="(item, index) in options.right.list"
:key="index"
>
<img :src="item.img" alt="" />
<p>{{ item.name }}</p>
<p>{{ item.price | unitPrice("¥") }}</p>
<div class="jiaobiao" :class="'jiaobiao' + (index + 1)">
{{ index + 1 }}
</div>
<div class="setup-box">
<div>
<Button size="small" @click.stop="handleSelectGoods(item)"
>编辑</Button
>
</div>
</div>
</div>
</div>
</div>
<!-- 装修内容 -->
<Modal
v-model="showModal"
title="装修"
draggable
width="800"
:z-index="100"
:mask-closable="false"
>
<div class="modal-top-advert">
<div>
<img
class="show-image"
width="160"
height="160"
v-if="selected.size && selected.size.indexOf('160*160') >= 0"
:src="selected.img"
alt
/>
<img
class="show-image"
width="80"
height="80"
v-if="selected.size && selected.size.indexOf('90*90') >= 0"
:src="selected.img"
alt
/>
</div>
<div><span>图片主标题</span><Input v-model="selected.name" /></div>
<div><span>图片描述</span><Input v-model="selected.describe" /></div>
<div class="tips">
建议尺寸<span>{{ selected.size }}</span>
</div>
<div>
图片链接<Input
class="outsideUrl"
v-model="selected.url"
:disabled="!!selected.type && selected.type !== 'link'"
placeholder="https://"
/>
<Button size="small" type="primary" @click="handleSelectLink"
>选择链接</Button
>
</div>
<div>
<Button size="small" type="primary" @click="handleSelectImg"
>选择图片</Button
>&nbsp;
<Button size="small" type="primary" @click="handleSelectGoods('')"
>选择商品</Button
>
</div>
</div>
</Modal>
<!-- 装修标题 -->
<Modal
v-model="showModal1"
title="装修"
draggable
width="800"
:z-index="100"
:mask-closable="false"
>
<div class="modal-top-advert">
<div><span>主标题</span><Input v-model="selected.title" /></div>
<div><span>副标题</span><Input v-model="selected.secondTitle" /></div>
<div>
<span
>副标题链接<Input
class="outsideUrl"
v-model="selected.url"
:disabled="!!selected.type && selected.type !== 'link'"
placeholder="https://" /></span
><Button
size="small"
class="ml_10"
type="primary"
@click="handleSelectLink"
>选择链接</Button
>
</div>
<div>
<span>背景色</span
><ColorPicker v-if="selected.bgColor" v-model="selected.bgColor" />
</div>
</div>
</Modal>
<!-- 选择商品链接 -->
<liliDialog
ref="liliDialog"
@selectedLink="selectedLink"
@selectedGoodsData="selectedGoodsData"
></liliDialog>
<!-- 选择图片 -->
<Modal width="1200px" v-model="picModelFlag" footer-hide>
<ossManage
@callback="callbackSelected"
:isComponent="true"
ref="ossManage"
/>
</Modal>
</div>
</template> </template>
<script> <script>
import ossManage from "@/views/sys/oss-manage/ossManage"; import ossManage from "@/views/sys/oss-manage/ossManage";
export default { export default {
props:{ props: {
data:{ data: {
type:Object, type: Object,
default:null default: null,
}
}, },
components:{ },
ossManage components: {
ossManage,
},
data() {
return {
options: this.data.options, //
showModal: false, // modal
showModal1: false, // modal
selected: {}, //
picModelFlag: false, // modal
};
},
methods: {
// modal
handleSelectModel(item, type) {
this.selected = item;
console.warn(item);
if (type) {
this.showModal1 = true;
} else {
this.showModal = true;
}
}, },
data() { handleSelectLink() {
return { //
options:this.data.options, // this.$refs.liliDialog.open("link");
showModal:false, // modal
showModal1:false, // modal
selected: {}, //
picModelFlag: false // modal
}
}, },
methods:{ handleSelectGoods(item) {
// modal //
handleSelectModel (item, type) { console.warn(item);
this.selected = item; if (item) this.selected = item;
console.warn(item); this.$refs.liliDialog.open("goods", "single");
if(type){ setTimeout(() => {
this.showModal1 = true this.$refs.liliDialog.goodsData = [this.selected];
} else { }, 500);
this.showModal = true },
} //
selectedLink(val) {
}, this.selected.url = this.$options.filters.formatLinkType(val);
handleSelectLink() { // this.selected.type =
this.$refs.liliDialog.open('link') val.___type === "other" && val.url === "" ? "link" : "other";
}, },
handleSelectGoods(item) { // //
console.warn(item); selectedGoodsData(val) {
if (item) this.selected = item; let goods = val[0];
this.$refs.liliDialog.open('goods', 'single') console.log(this.selected);
setTimeout(() => { this.selected.img = goods.thumbnail;
this.$refs.liliDialog.goodsData = [this.selected] this.selected.price = goods.price;
}, 500); this.selected.name = goods.goodsName;
}, this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
// },
selectedLink (val) { handleSelectImg() {
this.selected.url = this.$options.filters.formatLinkType(val); //
}, this.$refs.ossManage.selectImage = true;
// this.picModelFlag = true;
selectedGoodsData (val) { },
console.log(val); //
let goods = val[0] callbackSelected(val) {
console.log(this.selected); this.picModelFlag = false;
this.selected.img = goods.thumbnail this.selected.img = val.url;
this.selected.price = goods.price },
this.selected.name = goods.goodsName },
this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}` };
},
handleSelectImg(){ //
this.$refs.ossManage.selectImage = true;
this.picModelFlag = true;
},
//
callbackSelected (val) {
this.picModelFlag = false;
this.selected.img = val.url;
}
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import './setup-box.scss'; @import "./setup-box.scss";
.new-goods{ .new-goods {
display: flex;
justify-content: space-between;
> div {
width: 393px;
height: 440px;
}
.left > .content {
> div:nth-child(1) {
height: 240px;
flex-direction: column;
border: 1px solid #eee;
border-top: none;
border-left: none;
justify-content: space-between;
img {
width: 160px;
height: 160px;
}
.describe {
margin-top: 10px;
}
}
> div:nth-child(2) {
border-right: 1px solid #eee;
}
> div:nth-child(3),
> div:nth-child(4) {
border-bottom: 1px solid #eee;
}
}
.middle > .content {
> div {
border-style: solid;
border-color: #eee;
border-width: 0;
border-bottom-width: 1px;
}
> div:nth-child(1),
> div:nth-child(2),
> div:nth-child(3) {
border-right-width: 1px;
}
> div:nth-child(6),
> div:nth-child(3) {
border-bottom-width: 0;
}
}
.right > .content {
display: flex; display: flex;
justify-content: space-between; flex-wrap: wrap;
>div{ flex-direction: row;
width: 393px; font-size: 12px;
height: 440px; > div {
} position: relative;
width: 120px;
.left>.content{ padding: 5px 10px 0 10px;
>div:nth-child(1){ img {
height: 240px; width: 100px;
flex-direction: column; height: 100px;
border: 1px solid #eee; }
border-top: none; border-bottom: 1px solid #eee;
border-left: none; :nth-child(2) {
justify-content: space-between; height: 38px;
img{ overflow: hidden;
width: 160px; }
height: 160px; :nth-child(3) {
} color: $theme_color;
.describe{margin-top: 10px;} margin-top: 5px;
} }
>div:nth-child(2){border-right: 1px solid #eee;} .jiaobiao {
>div:nth-child(3),>div:nth-child(4){border-bottom: 1px solid #eee;} position: absolute;
} width: 23px;
height: 23px;
.middle>.content{ top: 10px;
>div{ right: 16px;
border-style:solid; background: url("../../../assets/festival_icon.png");
border-color: #eee;
border-width: 0;
border-bottom-width: 1px;
}
>div:nth-child(1),>div:nth-child(2),>div:nth-child(3){border-right-width: 1px;}
>div:nth-child(6), >div:nth-child(3){border-bottom-width: 0;}
}
.right>.content{
display: flex;
flex-wrap: wrap;
flex-direction: row;
font-size: 12px;
>div{
position: relative;
width: 120px;
padding: 5px 10px 0 10px;
img{
width: 100px;
height: 100px;
}
border-bottom: 1px solid #eee;
:nth-child(2){
height: 38px;
overflow: hidden;
}
:nth-child(3){
color: $theme_color;
margin-top: 5px;
}
.jiaobiao{
position: absolute;
width: 23px;
height: 23px;
top: 10px;
right: 16px;
background: url('../../../assets/festival_icon.png');
color: #FFF;
text-align: center;
}
.jiaobiao1,.jiaobiao4{
background-position: -2px -30px;
}
.jiaobiao2,.jiaobiao5{
background-position: -31px -30px;
}
.jiaobiao3,.jiaobiao6{
background-position: -60px -30px;
}
}
>div:nth-child(4),>div:nth-child(5),>div:nth-child(6){border: none;}
}
.top-header{
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
padding: 0 10px;
background: #c43d7e;
color: #fff; color: #fff;
span:nth-child(1){ text-align: center;
font-size: 20px; }
} .jiaobiao1,
span:nth-child(2){ .jiaobiao4 {
font-size: 12px; background-position: -2px -30px;
} }
.jiaobiao2,
.jiaobiao5 {
background-position: -31px -30px;
}
.jiaobiao3,
.jiaobiao6 {
background-position: -60px -30px;
}
} }
.content{ > div:nth-child(4),
padding: 10px 12px 0; > div:nth-child(5),
display: flex; > div:nth-child(6) {
flex-wrap: wrap; border: none;
flex-direction: column;
height: 370px;
} }
.con-item{ }
width: 185px;
height: 120px; .top-header {
display: flex; display: flex;
padding-left: 10px; align-items: center;
padding-top: 10px; justify-content: space-between;
img{ height: 50px;
width: 90px; padding: 0 10px;
height: 90px; background: #c43d7e;
margin-top: 10px; color: #fff;
} span:nth-child(1) {
font-size: 20px;
} }
.describe{ span:nth-child(2) {
color: #999; font-size: 12px;
font-size: 12px;
margin-top: 15px;
} }
}
.content {
padding: 10px 12px 0;
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 370px;
}
.con-item {
width: 185px;
height: 120px;
display: flex;
padding-left: 10px;
padding-top: 10px;
img {
width: 90px;
height: 90px;
margin-top: 10px;
}
}
.describe {
color: #999;
font-size: 12px;
margin-top: 15px;
}
} }
.modal-top-advert{ .modal-top-advert {
align-items: start; align-items: start;
padding: 0 30px; padding: 0 30px;
} }
</style> </style>

View File

@ -108,8 +108,6 @@
width="800" width="800"
:z-index="100" :z-index="100"
:mask-closable="false" :mask-closable="false"
> >
<div class="modal-top-advert"> <div class="modal-top-advert">
<div> <div>
@ -144,7 +142,12 @@
建议尺寸<span>{{ selected.size }}</span> 建议尺寸<span>{{ selected.size }}</span>
</div> </div>
<div> <div>
图片链接<span>{{ selected.url }}</span> 图片链接<Input
class="outsideUrl"
v-model="selected.url"
:disabled="!!selected.type && selected.type !== 'link'"
placeholder="https://"
/>
<Button <Button
size="small" size="small"
class="ml_10" class="ml_10"
@ -170,14 +173,17 @@
width="800" width="800"
:z-index="100" :z-index="100"
:mask-closable="false" :mask-closable="false"
> >
<div class="modal-top-advert"> <div class="modal-top-advert">
<div><span>主标题</span><Input v-model="selected.title" /></div> <div><span>主标题</span><Input v-model="selected.title" /></div>
<div><span>副标题</span><Input v-model="selected.secondTitle" /></div> <div><span>副标题</span><Input v-model="selected.secondTitle" /></div>
<div> <div>
<span>副标题链接{{ selected.url }}</span <span
>副标题链接<Input
class="outsideUrl"
v-model="selected.url"
:disabled="!!selected.type && selected.type !== 'link'"
placeholder="https://" /></span
><Button ><Button
size="small" size="small"
class="ml_10" class="ml_10"
@ -200,7 +206,11 @@
></liliDialog> ></liliDialog>
<!-- 选择图片 --> <!-- 选择图片 -->
<Modal width="1200px" v-model="picModelFlag" footer-hide> <Modal width="1200px" v-model="picModelFlag" footer-hide>
<ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" /> <ossManage
@callback="callbackSelected"
:isComponent="true"
ref="ossManage"
/>
</Modal> </Modal>
</div> </div>
</template> </template>
@ -242,11 +252,13 @@ export default {
}, },
handleSelectGoods(item) { handleSelectGoods(item) {
// //
this.$refs.liliDialog.open('goods', 'single') this.$refs.liliDialog.open("goods", "single");
}, },
// //
selectedLink(val) { selectedLink(val) {
this.selected.url = this.$options.filters.formatLinkType(val); this.selected.url = this.$options.filters.formatLinkType(val);
this.selected.type =
val.___type === "other" && val.url === "" ? "link" : "other";
}, },
// //
selectedGoodsData(val) { selectedGoodsData(val) {

View File

@ -52,8 +52,12 @@
/> />
<span class="describe">消费达到当前金额可以参与优惠</span> <span class="describe">消费达到当前金额可以参与优惠</span>
</FormItem> </FormItem>
<FormItem label="优惠方式"> <FormItem label="赠送优惠券">
<RadioGroup type="button" button-style="solid" v-model="form.discountType"> <RadioGroup
type="button"
button-style="solid"
v-model="form.discountType"
>
<Radio label="fullMinusFlag" disabled>减现金</Radio> <Radio label="fullMinusFlag" disabled>减现金</Radio>
<Radio label="fullRateFlag" disabled>打折</Radio> <Radio label="fullRateFlag" disabled>打折</Radio>
</RadioGroup> </RadioGroup>
@ -88,24 +92,29 @@
<span class="describe">优惠折扣为0-10之间数字可有一位小数</span> <span class="describe">优惠折扣为0-10之间数字可有一位小数</span>
</FormItem> </FormItem>
<FormItem label="额外赠送"> <FormItem label="额外赠送">
<Checkbox v-model="form.freeFreightFlag" disabled>免邮费</Checkbox>&nbsp; <Checkbox v-model="form.freeFreightFlag" disabled>免邮费</Checkbox
<Checkbox v-model="form.couponFlag" disabled>送优惠券</Checkbox>&nbsp; >&nbsp;
<Checkbox v-model="form.couponFlag" disabled>送优惠券</Checkbox
>&nbsp;
<Checkbox v-model="form.giftFlag" disabled>送赠品</Checkbox>&nbsp; <Checkbox v-model="form.giftFlag" disabled>送赠品</Checkbox>&nbsp;
<Checkbox v-model="form.pointFlag" disabled>送积分</Checkbox> <Checkbox v-model="form.pointFlag" disabled>送积分</Checkbox>
</FormItem> </FormItem>
<FormItem v-if="form.couponFlag" label="赠送优惠券" prop="couponId"> <FormItem v-if="form.couponFlag" label="赠送优惠券" prop="couponId">
<Select <Select
v-model="form.couponId" v-model="form.couponId"
:disabled="form.promotionStatus != 'NEW'"
filterable filterable
:remote-method="getCouponList" :remote-method="getCouponList"
placeholder="输入优惠券名称搜索" placeholder="输入优惠券名称搜索"
disabled
:loading="couponLoading" :loading="couponLoading"
style="width: 260px" style="width: 280px"
> >
<Option v-for="item in couponList" :value="item.id" :key="item.id">{{ <Option
item.couponName v-for="item in couponList"
}}</Option> :value="item.id"
:key="item.id"
>{{ item.couponName }}</Option
>
</Select> </Select>
</FormItem> </FormItem>
<FormItem v-if="form.giftFlag" label="赠品" prop="giftId"> <FormItem v-if="form.giftFlag" label="赠品" prop="giftId">
@ -118,22 +127,37 @@
:loading="giftLoading" :loading="giftLoading"
style="width: 260px" style="width: 260px"
> >
<Option v-for="item in giftList" :value="item.id" :key="item.id">{{ <Option
item.goodsName v-for="item in giftList"
}}</Option> :value="item.id"
:key="item.id"
>{{ item.goodsName }}</Option
>
</Select> </Select>
</FormItem> </FormItem>
<FormItem v-if="form.pointFlag" label="赠积分" prop="point"> <FormItem v-if="form.pointFlag" label="赠积分" prop="point">
<Input v-model="form.point" type="number" disabled style="width: 260px" /> <Input
v-model="form.point"
type="number"
disabled
style="width: 260px"
/>
</FormItem> </FormItem>
<FormItem label="使用范围" prop="scopeType"> <FormItem label="使用范围" prop="scopeType">
<RadioGroup type="button" button-style="solid" v-model="form.scopeType"> <RadioGroup
type="button"
button-style="solid"
v-model="form.scopeType"
>
<Radio label="ALL" disabled>全品类</Radio> <Radio label="ALL" disabled>全品类</Radio>
<Radio label="PORTION_GOODS" disabled>指定商品</Radio> <Radio label="PORTION_GOODS" disabled>指定商品</Radio>
</RadioGroup> </RadioGroup>
</FormItem> </FormItem>
<FormItem style="width: 100%" v-if="form.scopeType == 'PORTION_GOODS'"> <FormItem
style="width: 100%"
v-if="form.scopeType == 'PORTION_GOODS'"
>
<Table border :columns="columns" :data="form.promotionGoodsList"> <Table border :columns="columns" :data="form.promotionGoodsList">
<template slot-scope="{ row }" slot="goodsName"> <template slot-scope="{ row }" slot="goodsName">
<div> <div>
@ -165,7 +189,10 @@
</FormItem> </FormItem>
<div> <div>
<Button @click="$router.push({ name: 'promotions/full-discount' })">返回</Button> <Button
@click="$router.push({ name: 'promotions/full-discount' })"
>返回</Button
>
</div> </div>
</div> </div>
</div> </div>
@ -211,7 +238,10 @@ export default {
key: "price", key: "price",
minWidth: 40, minWidth: 40,
render: (h, params) => { render: (h, params) => {
return h("div", this.$options.filters.unitPrice(params.row.price, "¥")); return h(
"div",
this.$options.filters.unitPrice(params.row.price, "¥")
);
}, },
}, },
{ {
@ -260,6 +290,8 @@ export default {
let params = { let params = {
pageSize: 10, pageSize: 10,
pageNumber: 0, pageNumber: 0,
getType: "ACTIVITY",
storeId: "",
couponName: query, couponName: query,
promotionStatus: "START", promotionStatus: "START",
}; };
@ -276,7 +308,10 @@ export default {
let params = { let params = {
pageSize: 10, pageSize: 10,
pageNumber: 1, pageNumber: 1,
goodsName: query, id: query === this.form.giftId ? this.form.giftId : null,
goodsName: query === this.form.giftId ? null : query,
marketEnable: "UPPER",
authFlag: "PASS"
}; };
this.giftLoading = true; this.giftLoading = true;
getGoodsSkuData(params).then((res) => { getGoodsSkuData(params).then((res) => {