commit
c1853fd4e0
|
@ -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) {
|
||||||
|
|
|
@ -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");
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -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>
|
<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>
|
|
||||||
<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
|
||||||
|
>
|
||||||
|
</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
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
type="info"
|
|
||||||
size="small"
|
size="small"
|
||||||
@click="handleSelectLink(item)"
|
@click="handleSelectImg(item)"
|
||||||
|
>选择图片</Button
|
||||||
|
>
|
||||||
|
<Button type="info" size="small" @click="handleSelectLink(item)"
|
||||||
>选择链接</Button
|
>选择链接</Button
|
||||||
>
|
>
|
||||||
<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) {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
<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
|
||||||
>
|
>
|
||||||
<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;
|
||||||
|
|
|
@ -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>
|
/>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<Button type="info" size="small" @click="handleSelectLink(item)"
|
||||||
|
>选择链接</Button
|
||||||
|
>
|
||||||
<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
|
||||||
|
>
|
||||||
|
|
||||||
<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 {
|
||||||
|
|
|
@ -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>
|
|
||||||
</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
|
||||||
|
>
|
||||||
|
</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>
|
|
@ -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}} ></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 }} ></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}} ></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}} ></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>
|
>
|
||||||
|
|
||||||
<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 }} ></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 }} ></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
|
||||||
|
>
|
||||||
|
|
||||||
|
<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>
|
|
@ -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) {
|
||||||
|
|
|
@ -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>
|
<Checkbox v-model="form.freeFreightFlag" disabled>免邮费</Checkbox
|
||||||
<Checkbox v-model="form.couponFlag" disabled>送优惠券</Checkbox>
|
>
|
||||||
|
<Checkbox v-model="form.couponFlag" disabled>送优惠券</Checkbox
|
||||||
|
>
|
||||||
<Checkbox v-model="form.giftFlag" disabled>送赠品</Checkbox>
|
<Checkbox v-model="form.giftFlag" disabled>送赠品</Checkbox>
|
||||||
<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) => {
|
||||||
|
|
Loading…
Reference in New Issue