OceansDeep
Gitee
commit
c1853fd4e0
|
|
@ -142,7 +142,7 @@ service.interceptors.response.use(
|
|||
const errorResponse = error.response || {};
|
||||
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++;
|
||||
|
||||
if (isRefreshToken === 1) {
|
||||
|
|
|
|||
|
|
@ -341,6 +341,7 @@ export default {
|
|||
title: "优惠券",
|
||||
methodsed: () => {
|
||||
this.showPromotionList = [];
|
||||
this.activeColumns = this.pintuanColumns;
|
||||
this.sortGoods("COUPON");
|
||||
},
|
||||
};
|
||||
|
|
@ -349,6 +350,7 @@ export default {
|
|||
title: "积分商品",
|
||||
methodsed: () => {
|
||||
this.showPromotionList = [];
|
||||
this.activeColumns = this.pintuanColumns;
|
||||
this.sortGoods("POINTS_GOODS");
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,10 +2,15 @@
|
|||
<div class="model-form">
|
||||
<div class="model-content">
|
||||
<!-- 头部广告，登录信息，不需要拖拽 -->
|
||||
<div class="top-fixed-advert" :style="{backgroundColor:topAdvert.bgColor}">
|
||||
<img :src="topAdvert.img" width="1200" height="80" alt="">
|
||||
<div
|
||||
class="top-fixed-advert"
|
||||
:style="{ backgroundColor: topAdvert.bgColor }"
|
||||
>
|
||||
<img :src="topAdvert.img" width="1200" height="80" alt="" />
|
||||
<div class="setup-box">
|
||||
<Button size="small" @click.stop="handleModel('topAdvert')">编辑</Button>
|
||||
<Button size="small" @click.stop="handleModel('topAdvert')"
|
||||
>编辑</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-con">
|
||||
|
|
@ -15,12 +20,12 @@
|
|||
<li>请登录</li>
|
||||
<li>我的订单</li>
|
||||
<li>我的足迹</li>
|
||||
<li><Icon size="18" type="ios-cart-outline" ></Icon>购物车</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="">
|
||||
<img :src="require('@/assets/logo.png')" class="logo" alt="" />
|
||||
<div class="search">
|
||||
<i-input size="large" placeholder="输入你想查找的商品">
|
||||
<Button slot="append">搜索</Button>
|
||||
|
|
@ -30,24 +35,33 @@
|
|||
<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 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>
|
||||
<Button size="small" @click.stop="handleModel('quickNav')"
|
||||
>编辑</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 装修主体 -->
|
||||
<div>
|
||||
<draggable class="model-form-list"
|
||||
<draggable
|
||||
class="model-form-list"
|
||||
v-model="data.list"
|
||||
v-bind="{group:'model', ghostClass: 'ghost'}"
|
||||
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>
|
||||
<model-form-item
|
||||
v-if="element && element.key"
|
||||
:key="element.key"
|
||||
:element="element"
|
||||
:index="index"
|
||||
:data="data"
|
||||
></model-form-item>
|
||||
</template>
|
||||
</draggable>
|
||||
</div>
|
||||
|
|
@ -59,26 +73,37 @@
|
|||
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 />
|
||||
<img
|
||||
class="show-image"
|
||||
width="600"
|
||||
height="40"
|
||||
:src="topAdvert.img"
|
||||
alt
|
||||
/>
|
||||
</div>
|
||||
<div class="tips">
|
||||
建议尺寸：<span>{{ topAdvert.size }}</span>
|
||||
</div>
|
||||
<div>
|
||||
图片链接：<span>{{ topAdvert.url }}</span><Button size="small" type="primary" @click="handleSelectLink">选择链接</Button>
|
||||
图片链接：<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" />
|
||||
选择图片：<Button size="small" type="primary" @click="handleSelectImg"
|
||||
>选择图片</Button
|
||||
>
|
||||
</div>
|
||||
<div>选择背景色：<ColorPicker v-model="topAdvert.bgColor" /></div>
|
||||
</div>
|
||||
</Modal>
|
||||
<Modal
|
||||
|
|
@ -91,7 +116,9 @@
|
|||
>
|
||||
<!-- 分类tab栏 -->
|
||||
<div class="modal-tab-bar">
|
||||
<Button type="primary" size='small' @click="handleAddNav">添加分类</Button>
|
||||
<Button type="primary" size="small" @click="handleAddNav"
|
||||
>添加分类</Button
|
||||
>
|
||||
<table cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -104,11 +131,23 @@
|
|||
<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 /></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>
|
||||
<Button
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleSelectLink(item, index)"
|
||||
>选择链接</Button
|
||||
>
|
||||
<Button type="error" size="small" @click="handleDelNav(index)"
|
||||
>删除</Button
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -116,91 +155,107 @@
|
|||
</div>
|
||||
</Modal>
|
||||
<!-- 选择商品。链接 -->
|
||||
<liliDialog
|
||||
ref="liliDialog"
|
||||
@selectedLink="selectedLink"
|
||||
|
||||
></liliDialog>
|
||||
<liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
|
||||
<!-- 选择图片 -->
|
||||
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||
<ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
|
||||
<ossManage
|
||||
@callback="callbackSelected"
|
||||
:isComponent="true"
|
||||
ref="ossManage"
|
||||
/>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Draggable from 'vuedraggable'
|
||||
import ModelFormItem from './modelFormItem.vue'
|
||||
import Draggable from "vuedraggable";
|
||||
import ModelFormItem from "./modelFormItem.vue";
|
||||
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||
export default {
|
||||
name:'modelForm',
|
||||
components:{
|
||||
name: "modelForm",
|
||||
components: {
|
||||
Draggable,
|
||||
ModelFormItem,
|
||||
ossManage
|
||||
ossManage,
|
||||
},
|
||||
props:['data'],
|
||||
data(){
|
||||
return{
|
||||
props: ["data"],
|
||||
data() {
|
||||
return {
|
||||
picModelFlag: false, // 选择图片模态框
|
||||
showModal: false, // 顶部广告模态框
|
||||
showModalNav: false, // 分类nav模态框
|
||||
selectedNav:null, //当前已选nav
|
||||
selectedNav: null, //当前已选nav
|
||||
// 模拟搜索框下方数据
|
||||
promotionTags: [ "买2免1", "领200神券", "199减100", "母婴5折抢", "充100送20"], // 热词数据
|
||||
topAdvert:{ // 头部广告图数据
|
||||
type:'topAdvert',
|
||||
img:'',
|
||||
url:'',
|
||||
bgColor:'#de000d',
|
||||
size:'1200*80'
|
||||
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:''},
|
||||
]
|
||||
}
|
||||
}
|
||||
navList: {
|
||||
// 分类nav数据
|
||||
type: "navBar",
|
||||
list: [
|
||||
{ name: "秒杀", url: "" },
|
||||
{ name: "闪购", url: "" },
|
||||
{ name: "优惠券", url: "" },
|
||||
{ name: "拍卖", url: "" },
|
||||
{ name: "服装城", url: "" },
|
||||
],
|
||||
},
|
||||
mounted(){
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
document.body.ondrop = function (event) {
|
||||
let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
|
||||
let isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") > -1;
|
||||
if (isFirefox) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
handleSelectLink(item,index) { // 调起选择链接弹窗
|
||||
if(item) this.selectedNav = item;
|
||||
this.$refs.liliDialog.open('link')
|
||||
methods: {
|
||||
handleSelectLink(item, index) {
|
||||
// 调起选择链接弹窗
|
||||
if (item) this.selectedNav = item;
|
||||
this.$refs.liliDialog.open("link");
|
||||
console.log(item);
|
||||
},
|
||||
// 已选链接
|
||||
selectedLink(val) {
|
||||
console.log(val);
|
||||
if(this.showModalNav){
|
||||
if (this.showModalNav) {
|
||||
this.selectedNav.url = this.$options.filters.formatLinkType(val);
|
||||
}else {
|
||||
this.selectedNav.type =
|
||||
val.___type === "other" && val.url === "" ? "link" : "other";
|
||||
} else {
|
||||
this.topAdvert.url = this.$options.filters.formatLinkType(val);
|
||||
this.topAdvert.type =
|
||||
val.___type === "other" && val.url === "" ? "link" : "other";
|
||||
}
|
||||
},
|
||||
handleDelNav(index){ // 删除导航
|
||||
this.navList.list.splice(index,1)
|
||||
handleDelNav(index) {
|
||||
// 删除导航
|
||||
this.navList.list.splice(index, 1);
|
||||
},
|
||||
handleAddNav(){ // 添加导航
|
||||
this.navList.list.push(
|
||||
{name:'',url:''}
|
||||
)
|
||||
console.log(this.navList.list)
|
||||
handleAddNav() {
|
||||
// 添加导航
|
||||
this.navList.list.push({ name: "", url: "" });
|
||||
},
|
||||
// 拖动结束回调
|
||||
handleMoveEnd ({newIndex, oldIndex}) {
|
||||
console.log('index', newIndex, oldIndex)
|
||||
handleMoveEnd({ newIndex, oldIndex }) {
|
||||
console.log("index", newIndex, oldIndex);
|
||||
},
|
||||
// 修改顶部广告
|
||||
handleModel (type) {
|
||||
if(type == 'topAdvert'){
|
||||
handleModel(type) {
|
||||
if (type == "topAdvert") {
|
||||
this.showModal = true;
|
||||
} else {
|
||||
this.showModalNav = true;
|
||||
|
|
@ -211,16 +266,21 @@ export default {
|
|||
this.$refs.ossManage.selectImage = true;
|
||||
this.picModelFlag = true;
|
||||
},
|
||||
callbackSelected (item) { // 选择图片回调
|
||||
callbackSelected(item) {
|
||||
// 选择图片回调
|
||||
this.picModelFlag = false;
|
||||
this.topAdvert.img = item.url;
|
||||
},
|
||||
handleModelAdd (evt) { // 拖拽，添加模块
|
||||
const newIndex = evt.newIndex
|
||||
handleModelAdd(evt) {
|
||||
// 拖拽，添加模块
|
||||
const newIndex = evt.newIndex;
|
||||
|
||||
// 为拖拽到容器的元素添加唯一 key
|
||||
this.data.list[newIndex] = JSON.parse(JSON.stringify(this.data.list[newIndex]))
|
||||
const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
|
||||
this.data.list[newIndex] = JSON.parse(
|
||||
JSON.stringify(this.data.list[newIndex])
|
||||
);
|
||||
const key =
|
||||
Date.parse(new Date()) + "_" + Math.ceil(Math.random() * 99999);
|
||||
this.$set(this.data.list, newIndex, {
|
||||
...this.data.list[newIndex],
|
||||
options: {
|
||||
|
|
@ -228,36 +288,36 @@ export default {
|
|||
},
|
||||
key,
|
||||
// 绑定键值
|
||||
model: this.data.list[newIndex].type + '_' + key
|
||||
})
|
||||
model: this.data.list[newIndex].type + "_" + key,
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './modelList/setup-box.scss';
|
||||
.model-form {
|
||||
@import "./modelList/setup-box.scss";
|
||||
.model-form {
|
||||
width: 1500px;
|
||||
}
|
||||
.model-content {
|
||||
}
|
||||
.model-content {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
min-height: 1200px;
|
||||
}
|
||||
.model-form-list{
|
||||
}
|
||||
.model-form-list {
|
||||
min-height: 500px;
|
||||
}
|
||||
/** 顶部广告，头部，搜索框 start */
|
||||
.top-fixed-advert{
|
||||
}
|
||||
/** 顶部广告，头部，搜索框 start */
|
||||
.top-fixed-advert {
|
||||
display: flex;
|
||||
width:1500px;
|
||||
width: 1500px;
|
||||
margin-left: -150px;
|
||||
background: $theme_color;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.header-con {
|
||||
.header-con {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 35px;
|
||||
|
|
@ -265,38 +325,39 @@ export default {
|
|||
line-height: 35px;
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
div,li{
|
||||
&:hover{
|
||||
div,
|
||||
li {
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.detail{
|
||||
.detail {
|
||||
display: flex;
|
||||
>li{
|
||||
> li {
|
||||
margin-left: 10px;
|
||||
&::after{
|
||||
&::after {
|
||||
content: "|";
|
||||
padding-left: 10px;
|
||||
}
|
||||
&:last-child::after{
|
||||
content:'';
|
||||
&:last-child::after {
|
||||
content: "";
|
||||
padding-left: 0;
|
||||
}
|
||||
&:hover::after{
|
||||
&:hover::after {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/** 搜索框 */
|
||||
.search-con {
|
||||
}
|
||||
/** 搜索框 */
|
||||
.search-con {
|
||||
padding-top: 15px;
|
||||
margin: 0px auto;
|
||||
margin-bottom: 10px;
|
||||
width: 1200px;
|
||||
position: relative;
|
||||
.logo{
|
||||
.logo {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
|
|
@ -327,14 +388,14 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/** 商品分类 */
|
||||
.nav-con{
|
||||
width:1200px;
|
||||
}
|
||||
/** 商品分类 */
|
||||
.nav-con {
|
||||
width: 1200px;
|
||||
height: 40px;
|
||||
background: #eee;
|
||||
display: flex;
|
||||
.all-categories{
|
||||
.all-categories {
|
||||
width: 200px;
|
||||
line-height: 40px;
|
||||
color: #fff;
|
||||
|
|
@ -350,36 +411,39 @@ export default {
|
|||
list-style: none;
|
||||
background-color: #eee;
|
||||
display: flex;
|
||||
li{
|
||||
li {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-left: 20px;
|
||||
a{
|
||||
color:rgb(89, 88, 88);
|
||||
a {
|
||||
color: rgb(89, 88, 88);
|
||||
font-size: 15px;
|
||||
&:hover{color:$theme_color}
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/** 顶部广告，头部，搜索框 end */
|
||||
}
|
||||
/** 顶部广告，头部，搜索框 end */
|
||||
|
||||
.top-fixed-advert, .nav-con{
|
||||
.top-fixed-advert,
|
||||
.nav-con {
|
||||
position: relative;
|
||||
&:hover{
|
||||
.setup-box{
|
||||
&:hover {
|
||||
.setup-box {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
/** 装修模态框 内部样式start */
|
||||
.modal-top-advert{
|
||||
}
|
||||
/** 装修模态框 内部样式start */
|
||||
.modal-top-advert {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
>*{
|
||||
> * {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -198,7 +198,12 @@
|
|||
建议尺寸：<span>{{ selected.size }}</span>
|
||||
</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
|
||||
>
|
||||
|
|
@ -211,11 +216,7 @@
|
|||
</div>
|
||||
</Modal>
|
||||
<!-- 选择商品。链接 -->
|
||||
<liliDialog
|
||||
ref="liliDialog"
|
||||
@selectedLink="selectedLink"
|
||||
|
||||
></liliDialog>
|
||||
<liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
|
||||
<!-- 选择图片 -->
|
||||
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||
<ossManage
|
||||
|
|
@ -229,8 +230,8 @@
|
|||
|
||||
<script>
|
||||
import ModelCarousel from "./modelList/carousel.vue";
|
||||
import ModelCarousel1 from './modelList/carousel1.vue';
|
||||
import ModelCarousel2 from './modelList/carousel2.vue';
|
||||
import ModelCarousel1 from "./modelList/carousel1.vue";
|
||||
import ModelCarousel2 from "./modelList/carousel2.vue";
|
||||
import FirstPageAdvert from "./modelList/firstPageAdvert.vue";
|
||||
import NewGoodsSort from "./modelList/newGoodsSort.vue";
|
||||
import Recommend from "./modelList/recommend.vue";
|
||||
|
|
@ -284,6 +285,8 @@ export default {
|
|||
// 确定选择链接
|
||||
selectedLink(val) {
|
||||
this.selected.url = this.$options.filters.formatLinkType(val);
|
||||
this.selected.type =
|
||||
val.___type === "other" && val.url === "" ? "link" : "other";
|
||||
},
|
||||
|
||||
handleSelectImg() {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,9 @@
|
|||
<div class="person-msg">
|
||||
<img :src="userInfo.face" v-if="userInfo.face" alt />
|
||||
<Avatar icon="ios-person" class="mb_10" v-else size="80" />
|
||||
<div>Hi，{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}</div>
|
||||
<div>
|
||||
Hi，{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}
|
||||
</div>
|
||||
<div v-if="userInfo.id">
|
||||
<Button type="error" shape="circle">会员中心</Button>
|
||||
</div>
|
||||
|
|
@ -34,8 +36,13 @@
|
|||
<div>
|
||||
<span>常见问题</span>
|
||||
<ul class="article-list">
|
||||
<li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)">
|
||||
{{article.title}}
|
||||
<li
|
||||
class="ellipsis"
|
||||
:alt="article.title"
|
||||
v-for="(article, index) in articleList"
|
||||
:key="index"
|
||||
>
|
||||
{{ article.title }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -49,8 +56,6 @@
|
|||
width="800"
|
||||
:z-index="100"
|
||||
:mask-closable="false"
|
||||
|
||||
|
||||
>
|
||||
<div class="modal-tab-bar">
|
||||
<Button type="primary" size="small" @click="handleAdd">添加轮播</Button>
|
||||
|
|
@ -78,7 +83,13 @@
|
|||
alt=""
|
||||
/>
|
||||
</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>
|
||||
<Button
|
||||
|
|
@ -87,10 +98,7 @@
|
|||
@click="handleSelectImg(item)"
|
||||
>选择图片</Button
|
||||
>
|
||||
<Button
|
||||
type="info"
|
||||
size="small"
|
||||
@click="handleSelectLink(item)"
|
||||
<Button type="info" size="small" @click="handleSelectLink(item)"
|
||||
>选择链接</Button
|
||||
>
|
||||
<Button
|
||||
|
|
@ -107,14 +115,14 @@
|
|||
</div>
|
||||
</Modal>
|
||||
<!-- 选择商品。链接 -->
|
||||
<liliDialog
|
||||
ref="liliDialog"
|
||||
@selectedLink="selectedLink"
|
||||
|
||||
></liliDialog>
|
||||
<liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
|
||||
<!-- 选择图片 -->
|
||||
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||
<ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
|
||||
<ossManage
|
||||
@callback="callbackSelected"
|
||||
:isComponent="true"
|
||||
ref="ossManage"
|
||||
/>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -125,39 +133,40 @@ export default {
|
|||
name: "modelCarousel",
|
||||
props: ["data"],
|
||||
components: {
|
||||
ossManage
|
||||
ossManage,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showModal: false, // modal显隐
|
||||
selected: null, // 已选数据
|
||||
picModelFlag: false, // 选择图片modal
|
||||
userInfo:{},
|
||||
articleList:[
|
||||
{title:'促销计算规则'},
|
||||
{title:'商家申请开店'},
|
||||
{title:'商家账号注册'},
|
||||
{title:'促销计算规则'}
|
||||
]
|
||||
userInfo: {},
|
||||
articleList: [
|
||||
{ title: "促销计算规则" },
|
||||
{ title: "商家申请开店" },
|
||||
{ title: "商家账号注册" },
|
||||
{ title: "促销计算规则" },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleSelectModel () {
|
||||
handleSelectModel() {
|
||||
// 编辑模块
|
||||
this.showModal = true;
|
||||
},
|
||||
// 添加轮播图
|
||||
handleAdd () {
|
||||
this.data.options.list.push({ img: "", url: "" });
|
||||
handleAdd() {
|
||||
this.data.options.list.push({ img: "", url: "", type: "" });
|
||||
this.$forceUpdate();
|
||||
},
|
||||
handleSelectLink (item) {
|
||||
handleSelectLink(item) {
|
||||
// 选择链接
|
||||
this.$refs.liliDialog.open('link')
|
||||
this.$refs.liliDialog.open("link");
|
||||
this.selected = item;
|
||||
},
|
||||
callbackSelected (item) { // 选择图片回调
|
||||
callbackSelected(item) {
|
||||
// 选择图片回调
|
||||
this.picModelFlag = false;
|
||||
this.selected.img = item.url;
|
||||
},
|
||||
|
|
@ -165,10 +174,11 @@ export default {
|
|||
// 删除图片
|
||||
this.data.options.list.splice(index, 1);
|
||||
},
|
||||
selectedLink(val) { // 选择链接回调
|
||||
console.log(val);
|
||||
selectedLink(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) {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div class="model-carousel1" :style="{background: bgColor}">
|
||||
<div class="model-carousel1" :style="{ background: bgColor }">
|
||||
<div class="nav-body clearfix">
|
||||
<!-- 侧边导航 -->
|
||||
<div class="nav-side">分类占位区</div>
|
||||
<div class="nav-content setup-content">
|
||||
<!-- 轮播图 -->
|
||||
<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">
|
||||
<img :src="item.img" width="1200" height="470" />
|
||||
</div>
|
||||
|
|
@ -26,14 +26,14 @@
|
|||
width="800"
|
||||
:z-index="100"
|
||||
:mask-closable="false"
|
||||
|
||||
|
||||
>
|
||||
<div class="modal-tab-bar">
|
||||
<Button type="primary" size="small" @click="handleAdd">添加轮播</Button>
|
||||
|
||||
<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">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -54,12 +54,15 @@
|
|||
alt=""
|
||||
/>
|
||||
</td>
|
||||
<td><Input v-model="item.url" disabled /></td>
|
||||
<td>
|
||||
<Button
|
||||
type="info"
|
||||
size="small"
|
||||
@click="handleSelectLink(item)"
|
||||
<Input
|
||||
class="outsideUrl"
|
||||
v-model="item.url"
|
||||
:disabled="!!item.type && item.type !== 'link'"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<Button type="info" size="small" @click="handleSelectLink(item)"
|
||||
>选择链接</Button
|
||||
>
|
||||
<ColorPicker size="small" v-model="item.bgColor" />
|
||||
|
|
@ -78,11 +81,7 @@
|
|||
</div>
|
||||
</Modal>
|
||||
<!-- 选择商品。链接 -->
|
||||
<liliDialog
|
||||
ref="liliDialog"
|
||||
@selectedLink="selectedLink"
|
||||
|
||||
></liliDialog>
|
||||
<liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
|
||||
<!-- 选择图片 -->
|
||||
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||
<ossManage @callback="callbackSelected" ref="ossManage" />
|
||||
|
|
@ -96,39 +95,40 @@ export default {
|
|||
name: "modelCarousel",
|
||||
props: ["data"],
|
||||
components: {
|
||||
ossManage
|
||||
ossManage,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showModal: false, // modal显隐
|
||||
selected: null, // 已选数据
|
||||
picModelFlag: false, // 选择图片modal
|
||||
bgColor:'#fff' // 轮播背景色
|
||||
bgColor: "#fff", // 轮播背景色
|
||||
};
|
||||
},
|
||||
mounted () {
|
||||
this.bgColor = this.data.options.list[0].bgColor
|
||||
mounted() {
|
||||
this.bgColor = this.data.options.list[0].bgColor;
|
||||
},
|
||||
methods: {
|
||||
handleSelectModel () {
|
||||
handleSelectModel() {
|
||||
// 编辑模块
|
||||
this.showModal = true;
|
||||
},
|
||||
// 自动切换时改变背景色
|
||||
autoChange (oVal,val) {
|
||||
this.bgColor = this.data.options.list[val].bgColor
|
||||
autoChange(oVal, val) {
|
||||
this.bgColor = this.data.options.list[val].bgColor;
|
||||
},
|
||||
// 添加轮播图片和链接
|
||||
handleAdd () {
|
||||
this.data.options.list.push({ img: "", url: "", bgColor: '#fff' });
|
||||
handleAdd() {
|
||||
this.data.options.list.push({ img: "", url: "", bgColor: "#fff" });
|
||||
this.$forceUpdate();
|
||||
},
|
||||
// 打开选择链接modal
|
||||
handleSelectLink (item) {
|
||||
this.$refs.liliDialog.open('link')
|
||||
handleSelectLink(item) {
|
||||
this.$refs.liliDialog.open("link");
|
||||
this.selected = item;
|
||||
},
|
||||
callbackSelected (item) { // 选择图片回调
|
||||
callbackSelected(item) {
|
||||
// 选择图片回调
|
||||
this.picModelFlag = false;
|
||||
this.selected.img = item.url;
|
||||
},
|
||||
|
|
@ -136,15 +136,18 @@ export default {
|
|||
handleDel(index) {
|
||||
this.data.options.list.splice(index, 1);
|
||||
},
|
||||
selectedLink(val) { // 选择链接回调
|
||||
selectedLink(val) {
|
||||
// 选择链接回调
|
||||
this.selected.url = this.$options.filters.formatLinkType(val);
|
||||
this.selected.type =
|
||||
val.___type === "other" && val.url === "" ? "link" : "other";
|
||||
},
|
||||
// 打开选择图片modal
|
||||
handleSelectImg(item) {
|
||||
this.selected = item;
|
||||
this.$refs.ossManage.selectImage = true;
|
||||
this.picModelFlag = true;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -163,14 +166,13 @@ export default {
|
|||
width: 1200px;
|
||||
height: 470px;
|
||||
margin: 0px auto;
|
||||
|
||||
}
|
||||
.nav-side {
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
padding: 0px;
|
||||
color: #fff;
|
||||
background-color:rgba(0,0,0,.5);
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
line-height: 470px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -21,7 +21,10 @@
|
|||
<div class="nav-content1 setup-content">
|
||||
<!-- 轮播图 -->
|
||||
<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">
|
||||
<img :src="item[0].img" width="190" height="150" />
|
||||
</div>
|
||||
|
|
@ -43,7 +46,9 @@
|
|||
<div class="person-msg">
|
||||
<img :src="userInfo.face" v-if="userInfo.face" alt />
|
||||
<Avatar icon="ios-person" class="mb_10" v-else size="80" />
|
||||
<div>Hi，{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}</div>
|
||||
<div>
|
||||
Hi，{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}
|
||||
</div>
|
||||
<div v-if="userInfo.id">
|
||||
<Button type="error" shape="circle">会员中心</Button>
|
||||
</div>
|
||||
|
|
@ -55,8 +60,13 @@
|
|||
<div>
|
||||
<span>常见问题</span>
|
||||
<ul class="article-list">
|
||||
<li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)">
|
||||
{{article.title}}
|
||||
<li
|
||||
class="ellipsis"
|
||||
:alt="article.title"
|
||||
v-for="(article, index) in articleList"
|
||||
:key="index"
|
||||
>
|
||||
{{ article.title }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -97,13 +107,17 @@
|
|||
alt=""
|
||||
/>
|
||||
</td>
|
||||
<td><Input v-model="item.url" disabled /></td>
|
||||
<td>
|
||||
<Button
|
||||
type="info"
|
||||
size="small"
|
||||
@click="handleSelectLink(item)"
|
||||
>选择链接</Button>
|
||||
<Input
|
||||
class="outsideUrl"
|
||||
v-model="item.url"
|
||||
:disabled="!!item.type && item.type !== 'link'"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
<Button type="info" size="small" @click="handleSelectLink(item)"
|
||||
>选择链接</Button
|
||||
>
|
||||
<Button
|
||||
type="error"
|
||||
ghost
|
||||
|
|
@ -127,12 +141,23 @@
|
|||
:mask-closable="false"
|
||||
>
|
||||
<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 style="color: red" class="fz_12 ml_10">点击缩略图替换图片</span>
|
||||
<Tabs type="card" closable @on-tab-remove="handleTabRemove" class="mt_10">
|
||||
<TabPane :label="'图片组'+(gIndex+1)" v-for="(group, gIndex) in data.options.listRight" :key="gIndex">
|
||||
<Tabs
|
||||
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">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -153,28 +178,30 @@
|
|||
alt=""
|
||||
/>
|
||||
</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>
|
||||
<Button
|
||||
type="info"
|
||||
size="small"
|
||||
@click="handleSelectLink(item)"
|
||||
>选择链接</Button>
|
||||
>选择链接</Button
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
|
||||
</div>
|
||||
</Modal>
|
||||
<!-- 选择商品。链接 -->
|
||||
<liliDialog
|
||||
ref="liliDialog"
|
||||
@selectedLink="selectedLink"
|
||||
|
||||
></liliDialog>
|
||||
<liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
|
||||
<!-- 选择图片 -->
|
||||
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||
<ossManage @callback="callbackSelected" ref="ossManage" />
|
||||
|
|
@ -188,51 +215,52 @@ export default {
|
|||
name: "modelCarousel",
|
||||
props: ["data"],
|
||||
components: {
|
||||
ossManage
|
||||
ossManage,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showModal: false, // modal显隐
|
||||
selected: null, // 已选数据
|
||||
picModelFlag: false, // 选择图片modal
|
||||
userInfo:{},
|
||||
articleList:[
|
||||
{title:'促销计算规则'},
|
||||
{title:'商家申请开店'},
|
||||
{title:'商家账号注册'},
|
||||
{title:'促销计算规则'}
|
||||
]
|
||||
userInfo: {},
|
||||
articleList: [
|
||||
{ title: "促销计算规则" },
|
||||
{ title: "商家申请开店" },
|
||||
{ title: "商家账号注册" },
|
||||
{ title: "促销计算规则" },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleSelectModel () {
|
||||
handleSelectModel() {
|
||||
// 编辑模块
|
||||
this.showModal = true;
|
||||
},
|
||||
// 添加轮播
|
||||
handleAdd () {
|
||||
handleAdd() {
|
||||
this.data.options.list.push({ img: "", url: "" });
|
||||
this.$forceUpdate();
|
||||
},
|
||||
// 添加图片组
|
||||
handleAddGroup () {
|
||||
handleAddGroup() {
|
||||
this.data.options.listRight.push([
|
||||
{img:'',url:''},
|
||||
{img:'',url:''},
|
||||
{img:'',url:''}
|
||||
])
|
||||
{ img: "", url: "" },
|
||||
{ img: "", url: "" },
|
||||
{ img: "", url: "" },
|
||||
]);
|
||||
},
|
||||
// 删除图片组
|
||||
handleTabRemove (index) {
|
||||
this.data.options.listRight.splice(index, 1)
|
||||
handleTabRemove(index) {
|
||||
this.data.options.listRight.splice(index, 1);
|
||||
},
|
||||
// 打开图片链接
|
||||
handleSelectLink (item) {
|
||||
this.$refs.liliDialog.open('link')
|
||||
handleSelectLink(item) {
|
||||
this.$refs.liliDialog.open("link");
|
||||
this.selected = item;
|
||||
},
|
||||
callbackSelected (item) { // 选择图片回调
|
||||
callbackSelected(item) {
|
||||
// 选择图片回调
|
||||
this.picModelFlag = false;
|
||||
this.selected.img = item.url;
|
||||
},
|
||||
|
|
@ -240,10 +268,11 @@ export default {
|
|||
handleDel(index) {
|
||||
this.data.options.list.splice(index, 1);
|
||||
},
|
||||
selectedLink(val) { // 选择链接回调
|
||||
console.log(val);
|
||||
selectedLink(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
|
||||
handleSelectImg(item) {
|
||||
|
|
@ -294,7 +323,8 @@ export default {
|
|||
}
|
||||
|
||||
/*导航内容*/
|
||||
.nav-content,.nav-content1 {
|
||||
.nav-content,
|
||||
.nav-content1 {
|
||||
width: 590px;
|
||||
height: 470px;
|
||||
overflow: hidden;
|
||||
|
|
@ -302,7 +332,7 @@ export default {
|
|||
position: relative;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.nav-content1{
|
||||
.nav-content1 {
|
||||
width: 190px;
|
||||
}
|
||||
.nav-right {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,26 @@
|
|||
<template>
|
||||
<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
|
||||
class="item setup-content"
|
||||
:style="{
|
||||
backgroundImage: `linear-gradient(to right, ${item.fromColor}, ${item.toColor})`,
|
||||
}"
|
||||
v-for="(item, index) in options.list"
|
||||
:key="index"
|
||||
>
|
||||
<div>
|
||||
<span class="line top-line"></span>
|
||||
<p>{{item.name}}</p>
|
||||
<p>{{ item.name }}</p>
|
||||
<span class="line btm-line"></span>
|
||||
<p>{{item.describe}}</p>
|
||||
<p>{{ item.describe }}</p>
|
||||
</div>
|
||||
<img :src="item.img" width="170" height="170" alt="">
|
||||
<img :src="item.img" width="170" height="170" alt="" />
|
||||
<div class="setup-box">
|
||||
<div><Button size="small" @click.stop="handleSelectModel(item)">编辑</Button></div>
|
||||
<div>
|
||||
<Button size="small" @click.stop="handleSelectModel(item)"
|
||||
>编辑</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
|
|
@ -19,142 +30,167 @@
|
|||
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" />
|
||||
<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>
|
||||
图片链接：<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" />
|
||||
<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" />
|
||||
<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
|
||||
:style="{
|
||||
backgroundImage: `linear-gradient(to right, ${selected.fromColor}, ${selected.toColor})`,
|
||||
}"
|
||||
class="exhibition"
|
||||
></div>
|
||||
<div>
|
||||
选择图片：<Button size="small" type="primary" @click="handleSelectImg">选择图片</Button>
|
||||
选择图片：<Button size="small" type="primary" @click="handleSelectImg"
|
||||
>选择图片</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
<!-- 选择商品。链接 -->
|
||||
<liliDialog
|
||||
ref="liliDialog"
|
||||
@selectedLink="selectedLink"
|
||||
|
||||
></liliDialog>
|
||||
<liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
|
||||
<!-- 选择图片 -->
|
||||
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||
<ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
|
||||
<ossManage
|
||||
@callback="callbackSelected"
|
||||
:isComponent="true"
|
||||
ref="ossManage"
|
||||
/>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||
export default {
|
||||
props:{
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
default: null,
|
||||
},
|
||||
components: {ossManage},
|
||||
},
|
||||
components: { ossManage },
|
||||
data() {
|
||||
return {
|
||||
options: this.data.options, // 当前类型数据
|
||||
showModal: false, // modal显隐
|
||||
selected: {}, // 已选数据
|
||||
picModelFlag: false // 图片选择器
|
||||
}
|
||||
picModelFlag: false, // 图片选择器
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
methods: {
|
||||
// 打开装修modal
|
||||
handleSelectModel (item,type) {
|
||||
handleSelectModel(item, type) {
|
||||
this.selected = item;
|
||||
this.showModal = true
|
||||
this.showModal = true;
|
||||
},
|
||||
handleSelectLink(item,index) { // 调起选择链接弹窗
|
||||
this.$refs.liliDialog.open('link')
|
||||
handleSelectLink(item, index) {
|
||||
// 调起选择链接弹窗
|
||||
this.$refs.liliDialog.open("link");
|
||||
},
|
||||
// 选择链接回调
|
||||
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.picModelFlag = true;
|
||||
},
|
||||
// 选择图片回调
|
||||
callbackSelected (val) {
|
||||
callbackSelected(val) {
|
||||
this.picModelFlag = false;
|
||||
this.selected.img = val.url;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './setup-box.scss';
|
||||
.first-page-advert{
|
||||
@import "./setup-box.scss";
|
||||
.first-page-advert {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
// margin-top: -10px;
|
||||
.item{
|
||||
.item {
|
||||
width: 393px;
|
||||
height: 170px;
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img{margin-left: 20px;}
|
||||
img {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
&:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3){margin-top: 0;}
|
||||
&:nth-of-type(1),
|
||||
&:nth-of-type(2),
|
||||
&:nth-of-type(3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p:nth-of-type(1){
|
||||
p:nth-of-type(1) {
|
||||
margin: 3px 0;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
p:nth-of-type(2){
|
||||
p:nth-of-type(2) {
|
||||
margin-top: 3px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
}
|
||||
.line{
|
||||
.line {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: 2px;
|
||||
background: url(../../../assets/festival_icon.png);
|
||||
z-index: 1;
|
||||
}
|
||||
.top-line{
|
||||
.top-line {
|
||||
width: 78px;
|
||||
background-position: -1px -3px;
|
||||
}
|
||||
.btm-line{
|
||||
.btm-line {
|
||||
background-position: 0 -11px;
|
||||
width: 154px;
|
||||
}
|
||||
|
||||
}
|
||||
.modal-top-advert{
|
||||
.modal-top-advert {
|
||||
align-items: start;
|
||||
padding: 0 30px;
|
||||
.exhibition{
|
||||
.exhibition {
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,66 +1,118 @@
|
|||
<template>
|
||||
<div class="new-goods">
|
||||
|
||||
<div class="left">
|
||||
<div class="top-header setup-content" :style="{background:options.left.bgColor}">
|
||||
<span>{{options.left.title}}</span>
|
||||
<span>{{options.left.secondTitle}} ></span>
|
||||
<div
|
||||
class="top-header setup-content"
|
||||
:style="{ background: options.left.bgColor }"
|
||||
>
|
||||
<span>{{ options.left.title }}</span>
|
||||
<span>{{ options.left.secondTitle }} ></span>
|
||||
<div class="setup-box">
|
||||
<div><Button size="small" @click.stop="handleSelectModel(options.left,true)">编辑</Button></div>
|
||||
<div>
|
||||
<Button
|
||||
size="small"
|
||||
@click.stop="handleSelectModel(options.left, true)"
|
||||
>编辑</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="con-item setup-content" v-for="(item, index) in options.left.list" :key="index">
|
||||
<div
|
||||
class="con-item setup-content"
|
||||
v-for="(item, index) in options.left.list"
|
||||
:key="index"
|
||||
>
|
||||
<div>
|
||||
<p>{{item.name}}</p>
|
||||
<p class="describe">{{item.describe}}</p>
|
||||
<p>{{ item.name }}</p>
|
||||
<p class="describe">{{ item.describe }}</p>
|
||||
</div>
|
||||
<img :src="item.img" alt="">
|
||||
<img :src="item.img" alt="" />
|
||||
<div class="setup-box">
|
||||
<div><Button size="small" @click.stop="handleSelectModel(item)">编辑</Button></div>
|
||||
<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="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>
|
||||
<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
|
||||
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>
|
||||
<p>{{ item.name }}</p>
|
||||
<p class="describe">{{ item.describe }}</p>
|
||||
</div>
|
||||
<img :src="item.img" alt="">
|
||||
<img :src="item.img" alt="" />
|
||||
<div class="setup-box">
|
||||
<div><Button size="small" @click.stop="handleSelectModel(item)">编辑</Button></div>
|
||||
<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="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>
|
||||
<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-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>
|
||||
<Button size="small" @click.stop="handleSelectGoods(item)"
|
||||
>编辑</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -73,30 +125,50 @@
|
|||
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" />
|
||||
<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>
|
||||
图片链接：<span>{{ selected.url }}</span> <Button size="small" type="primary" @click="handleSelectLink">选择链接</Button>
|
||||
图片链接：<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="handleSelectImg"
|
||||
>选择图片</Button
|
||||
>
|
||||
|
||||
<Button size="small" type="primary" @click="handleSelectGoods('')">选择商品</Button>
|
||||
<Button size="small" type="primary" @click="handleSelectGoods('')"
|
||||
>选择商品</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
@ -108,21 +180,28 @@
|
|||
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>主标题：</span><Input v-model="selected.title" />
|
||||
<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><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" />
|
||||
<span>背景色：</span
|
||||
><ColorPicker v-if="selected.bgColor" v-model="selected.bgColor" />
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
@ -134,165 +213,193 @@
|
|||
></liliDialog>
|
||||
<!-- 选择图片 -->
|
||||
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||
<ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
|
||||
<ossManage
|
||||
@callback="callbackSelected"
|
||||
:isComponent="true"
|
||||
ref="ossManage"
|
||||
/>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||
export default {
|
||||
props:{
|
||||
data:{
|
||||
type:Object,
|
||||
default:null
|
||||
}
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
components:{
|
||||
ossManage
|
||||
},
|
||||
components: {
|
||||
ossManage,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options:this.data.options, // 当前数据
|
||||
showModal:false, // modal显隐
|
||||
showModal1:false, // modal显隐
|
||||
options: this.data.options, // 当前数据
|
||||
showModal: false, // modal显隐
|
||||
showModal1: false, // modal显隐
|
||||
selected: {}, // 已选数据
|
||||
picModelFlag: false // 选择图片modal
|
||||
}
|
||||
picModelFlag: false, // 选择图片modal
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
methods: {
|
||||
// 装修modal
|
||||
handleSelectModel (item, type) {
|
||||
handleSelectModel(item, type) {
|
||||
this.selected = item;
|
||||
console.warn(item);
|
||||
if(type){
|
||||
this.showModal1 = true
|
||||
if (type) {
|
||||
this.showModal1 = true;
|
||||
} else {
|
||||
this.showModal = true
|
||||
this.showModal = true;
|
||||
}
|
||||
|
||||
},
|
||||
handleSelectLink() { // 调起选择链接弹窗
|
||||
this.$refs.liliDialog.open('link')
|
||||
handleSelectLink() {
|
||||
// 调起选择链接弹窗
|
||||
this.$refs.liliDialog.open("link");
|
||||
},
|
||||
handleSelectGoods(item) { // 调起选择商品
|
||||
handleSelectGoods(item) {
|
||||
// 调起选择商品
|
||||
console.warn(item);
|
||||
if (item) this.selected = item;
|
||||
this.$refs.liliDialog.open('goods', 'single')
|
||||
this.$refs.liliDialog.open("goods", "single");
|
||||
setTimeout(() => {
|
||||
this.$refs.liliDialog.goodsData = [this.selected]
|
||||
this.$refs.liliDialog.goodsData = [this.selected];
|
||||
}, 500);
|
||||
},
|
||||
// 选择链接回调
|
||||
selectedLink (val) {
|
||||
selectedLink(val) {
|
||||
this.selected.url = this.$options.filters.formatLinkType(val);
|
||||
this.selected.type =
|
||||
val.___type === "other" && val.url === "" ? "link" : "other";
|
||||
},
|
||||
// 选择商品回调
|
||||
selectedGoodsData (val) {
|
||||
console.log(val);
|
||||
let goods = val[0]
|
||||
selectedGoodsData(val) {
|
||||
let goods = val[0];
|
||||
console.log(this.selected);
|
||||
this.selected.img = goods.thumbnail
|
||||
this.selected.price = goods.price
|
||||
this.selected.name = goods.goodsName
|
||||
this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`
|
||||
this.selected.img = goods.thumbnail;
|
||||
this.selected.price = goods.price;
|
||||
this.selected.name = goods.goodsName;
|
||||
this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
|
||||
},
|
||||
handleSelectImg(){ // 选择图片
|
||||
handleSelectImg() {
|
||||
// 选择图片
|
||||
this.$refs.ossManage.selectImage = true;
|
||||
this.picModelFlag = true;
|
||||
},
|
||||
// 选择图片回显
|
||||
callbackSelected (val) {
|
||||
callbackSelected(val) {
|
||||
this.picModelFlag = false;
|
||||
this.selected.img = val.url;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './setup-box.scss';
|
||||
.new-goods{
|
||||
@import "./setup-box.scss";
|
||||
.new-goods {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
>div{
|
||||
> div {
|
||||
width: 393px;
|
||||
height: 440px;
|
||||
}
|
||||
|
||||
.left>.content{
|
||||
>div:nth-child(1){
|
||||
.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{
|
||||
img {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
.describe{margin-top: 10px;}
|
||||
.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;
|
||||
}
|
||||
>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;
|
||||
.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;}
|
||||
> 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{
|
||||
.right > .content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
font-size: 12px;
|
||||
>div{
|
||||
> div {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
padding: 5px 10px 0 10px;
|
||||
img{
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
border-bottom: 1px solid #eee;
|
||||
:nth-child(2){
|
||||
:nth-child(2) {
|
||||
height: 38px;
|
||||
overflow: hidden;
|
||||
}
|
||||
:nth-child(3){
|
||||
:nth-child(3) {
|
||||
color: $theme_color;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.jiaobiao{
|
||||
.jiaobiao {
|
||||
position: absolute;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
top: 10px;
|
||||
right: 16px;
|
||||
background: url('../../../assets/festival_icon.png');
|
||||
color: #FFF;
|
||||
background: url("../../../assets/festival_icon.png");
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.jiaobiao1,.jiaobiao4{
|
||||
.jiaobiao1,
|
||||
.jiaobiao4 {
|
||||
background-position: -2px -30px;
|
||||
}
|
||||
.jiaobiao2,.jiaobiao5{
|
||||
.jiaobiao2,
|
||||
.jiaobiao5 {
|
||||
background-position: -31px -30px;
|
||||
}
|
||||
.jiaobiao3,.jiaobiao6{
|
||||
.jiaobiao3,
|
||||
.jiaobiao6 {
|
||||
background-position: -60px -30px;
|
||||
}
|
||||
}
|
||||
>div:nth-child(4),>div:nth-child(5),>div:nth-child(6){border: none;}
|
||||
> div:nth-child(4),
|
||||
> div:nth-child(5),
|
||||
> div:nth-child(6) {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.top-header{
|
||||
.top-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -300,39 +407,39 @@ export default {
|
|||
padding: 0 10px;
|
||||
background: #c43d7e;
|
||||
color: #fff;
|
||||
span:nth-child(1){
|
||||
span:nth-child(1) {
|
||||
font-size: 20px;
|
||||
}
|
||||
span:nth-child(2){
|
||||
span:nth-child(2) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.content{
|
||||
.content {
|
||||
padding: 10px 12px 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
height: 370px;
|
||||
}
|
||||
.con-item{
|
||||
.con-item {
|
||||
width: 185px;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
padding-left: 10px;
|
||||
padding-top: 10px;
|
||||
img{
|
||||
img {
|
||||
width: 90px;
|
||||
height: 90px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
.describe{
|
||||
.describe {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
.modal-top-advert{
|
||||
.modal-top-advert {
|
||||
align-items: start;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -108,8 +108,6 @@
|
|||
width="800"
|
||||
:z-index="100"
|
||||
:mask-closable="false"
|
||||
|
||||
|
||||
>
|
||||
<div class="modal-top-advert">
|
||||
<div>
|
||||
|
|
@ -144,7 +142,12 @@
|
|||
建议尺寸：<span>{{ selected.size }}</span>
|
||||
</div>
|
||||
<div>
|
||||
图片链接：<span>{{ selected.url }}</span>
|
||||
图片链接：<Input
|
||||
class="outsideUrl"
|
||||
v-model="selected.url"
|
||||
:disabled="!!selected.type && selected.type !== 'link'"
|
||||
placeholder="https://"
|
||||
/>
|
||||
<Button
|
||||
size="small"
|
||||
class="ml_10"
|
||||
|
|
@ -170,14 +173,17 @@
|
|||
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
|
||||
<span
|
||||
>副标题链接：<Input
|
||||
class="outsideUrl"
|
||||
v-model="selected.url"
|
||||
:disabled="!!selected.type && selected.type !== 'link'"
|
||||
placeholder="https://" /></span
|
||||
><Button
|
||||
size="small"
|
||||
class="ml_10"
|
||||
|
|
@ -200,7 +206,11 @@
|
|||
></liliDialog>
|
||||
<!-- 选择图片 -->
|
||||
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||
<ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
|
||||
<ossManage
|
||||
@callback="callbackSelected"
|
||||
:isComponent="true"
|
||||
ref="ossManage"
|
||||
/>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -242,11 +252,13 @@ export default {
|
|||
},
|
||||
handleSelectGoods(item) {
|
||||
// 调起选择商品
|
||||
this.$refs.liliDialog.open('goods', 'single')
|
||||
this.$refs.liliDialog.open("goods", "single");
|
||||
},
|
||||
// 选择链接回调
|
||||
selectedLink(val) {
|
||||
this.selected.url = this.$options.filters.formatLinkType(val);
|
||||
this.selected.type =
|
||||
val.___type === "other" && val.url === "" ? "link" : "other";
|
||||
},
|
||||
// 选择商品回调
|
||||
selectedGoodsData(val) {
|
||||
|
|
|
|||
|
|
@ -52,8 +52,12 @@
|
|||
/>
|
||||
<span class="describe">消费达到当前金额可以参与优惠</span>
|
||||
</FormItem>
|
||||
<FormItem label="优惠方式">
|
||||
<RadioGroup type="button" button-style="solid" v-model="form.discountType">
|
||||
<FormItem label="赠送优惠券">
|
||||
<RadioGroup
|
||||
type="button"
|
||||
button-style="solid"
|
||||
v-model="form.discountType"
|
||||
>
|
||||
<Radio label="fullMinusFlag" disabled>减现金</Radio>
|
||||
<Radio label="fullRateFlag" disabled>打折</Radio>
|
||||
</RadioGroup>
|
||||
|
|
@ -88,24 +92,29 @@
|
|||
<span class="describe">优惠折扣为0-10之间数字，可有一位小数</span>
|
||||
</FormItem>
|
||||
<FormItem label="额外赠送">
|
||||
<Checkbox v-model="form.freeFreightFlag" disabled>免邮费</Checkbox>
|
||||
<Checkbox v-model="form.couponFlag" disabled>送优惠券</Checkbox>
|
||||
<Checkbox v-model="form.freeFreightFlag" disabled>免邮费</Checkbox
|
||||
>
|
||||
<Checkbox v-model="form.couponFlag" disabled>送优惠券</Checkbox
|
||||
>
|
||||
<Checkbox v-model="form.giftFlag" disabled>送赠品</Checkbox>
|
||||
<Checkbox v-model="form.pointFlag" disabled>送积分</Checkbox>
|
||||
</FormItem>
|
||||
<FormItem v-if="form.couponFlag" label="赠送优惠券" prop="couponId">
|
||||
<Select
|
||||
v-model="form.couponId"
|
||||
:disabled="form.promotionStatus != 'NEW'"
|
||||
filterable
|
||||
:remote-method="getCouponList"
|
||||
placeholder="输入优惠券名称搜索"
|
||||
disabled
|
||||
:loading="couponLoading"
|
||||
style="width: 260px"
|
||||
style="width: 280px"
|
||||
>
|
||||
<Option
|
||||
v-for="item in couponList"
|
||||
:value="item.id"
|
||||
:key="item.id"
|
||||
>{{ item.couponName }}</Option
|
||||
>
|
||||
<Option v-for="item in couponList" :value="item.id" :key="item.id">{{
|
||||
item.couponName
|
||||
}}</Option>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<FormItem v-if="form.giftFlag" label="赠品" prop="giftId">
|
||||
|
|
@ -118,22 +127,37 @@
|
|||
:loading="giftLoading"
|
||||
style="width: 260px"
|
||||
>
|
||||
<Option v-for="item in giftList" :value="item.id" :key="item.id">{{
|
||||
item.goodsName
|
||||
}}</Option>
|
||||
<Option
|
||||
v-for="item in giftList"
|
||||
:value="item.id"
|
||||
:key="item.id"
|
||||
>{{ item.goodsName }}</Option
|
||||
>
|
||||
</Select>
|
||||
</FormItem>
|
||||
<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 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="PORTION_GOODS" disabled>指定商品</Radio>
|
||||
</RadioGroup>
|
||||
</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">
|
||||
<template slot-scope="{ row }" slot="goodsName">
|
||||
<div>
|
||||
|
|
@ -165,7 +189,10 @@
|
|||
</FormItem>
|
||||
|
||||
<div>
|
||||
<Button @click="$router.push({ name: 'promotions/full-discount' })">返回</Button>
|
||||
<Button
|
||||
@click="$router.push({ name: 'promotions/full-discount' })"
|
||||
>返回</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -211,7 +238,10 @@ export default {
|
|||
key: "price",
|
||||
minWidth: 40,
|
||||
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 = {
|
||||
pageSize: 10,
|
||||
pageNumber: 0,
|
||||
getType: "ACTIVITY",
|
||||
storeId: "",
|
||||
couponName: query,
|
||||
promotionStatus: "START",
|
||||
};
|
||||
|
|
@ -276,7 +308,10 @@ export default {
|
|||
let params = {
|
||||
pageSize: 10,
|
||||
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;
|
||||
getGoodsSkuData(params).then((res) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue