mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-21 10:25:53 +08:00
优化管理端代码结构
This commit is contained in:
paulGao
287
manager/src/views/page-decoration/floorList.vue
Normal file
287
manager/src/views/page-decoration/floorList.vue
Normal file
@@ -0,0 +1,287 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<Card class="category">
|
||||
<div
|
||||
:class="{ active: i == selectedIndex }"
|
||||
class="category-item"
|
||||
v-for="(typeItem, i) in pageTypes"
|
||||
:key="typeItem.type"
|
||||
>
|
||||
<div @click="clickType(typeItem.type, i)">{{ typeItem.title }}</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card class="content">
|
||||
<Button type="primary" @click="createTemp">添加页面</Button>
|
||||
<div class="list">
|
||||
<Spin size="large" fix v-if="loading"></Spin>
|
||||
<div class="item item-title">
|
||||
<div>页面名称</div>
|
||||
<div class="item-config">
|
||||
<div>状态</div>
|
||||
<div>操作</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item" v-for="(item, index) in list" :key="index">
|
||||
<div>{{ item.name || "暂无模板昵称" }}</div>
|
||||
<div class="item-config">
|
||||
<i-switch v-model="item.pageShow" @on-change="releaseTemplate(item.id)">
|
||||
<span slot="open">开</span>
|
||||
<span slot="close">关</span>
|
||||
</i-switch>
|
||||
<Button type="info" placement="right" @click="Template(item)" size="small"
|
||||
>编辑</Button
|
||||
>
|
||||
<Button type="success" placement="right" @click="decorate(item)" size="small"
|
||||
>装修</Button
|
||||
>
|
||||
<Poptip confirm title="删除此模板？" @on-ok="delTemplate(item.id)">
|
||||
<Button type="error" size="small">删除</Button>
|
||||
</Poptip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="no-more" v-if="list.length == 0">暂无更多模板</div>
|
||||
</div>
|
||||
<Page show-total :total="total" show-sizer :page-size-opts="[10, 20, 50]" show-elevator style="float:right;overflow:hidden;" @on-change="changePageNum" @on-page-size-change="changePageSize" :page-size="searchForm.pageSize"/>
|
||||
</Card>
|
||||
<Modal
|
||||
v-model="showModal"
|
||||
title="模板设置"
|
||||
draggable
|
||||
width="600"
|
||||
:z-index="100"
|
||||
:loading="loading"
|
||||
:mask-closable="false"
|
||||
@on-ok="newTemplate"
|
||||
@on-cancel="showModal = false"
|
||||
>
|
||||
<Form ref="form" :model="formData" :label-width="80">
|
||||
<FormItem label="模板名称" prop="name">
|
||||
<Input v-model="formData.name" placeholder="请输入模板名称" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_floor from "@/api/other.js";
|
||||
export default {
|
||||
name: "floorList",
|
||||
data() {
|
||||
return {
|
||||
showModal: false, // 添加modal的显示
|
||||
selectedIndex: 0, // 首页还是专题选择的index
|
||||
total:0,
|
||||
formData: {
|
||||
// 新建模态框的数据
|
||||
status: false, // 模板是否开启
|
||||
name: "", // 模板名称
|
||||
},
|
||||
searchForm:{
|
||||
pageNumber:1,
|
||||
pageSize:10,
|
||||
sort: 'createTime',
|
||||
order: 'desc',
|
||||
pageType:"INDEX",
|
||||
pageClientType:"PC",
|
||||
},
|
||||
columns: [
|
||||
// 列表展示的column
|
||||
{
|
||||
title: "页面名称",
|
||||
key: "name",
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
},
|
||||
],
|
||||
|
||||
loading: false, // 加载状态
|
||||
pageTypes: [
|
||||
// 那种类别的模板
|
||||
{
|
||||
type: "INDEX",
|
||||
title: "首页",
|
||||
},
|
||||
// {
|
||||
// type: "SPECIAL",
|
||||
// title: "专题",
|
||||
// },
|
||||
],
|
||||
list: [], // 模板列表
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getTemplateList();
|
||||
},
|
||||
methods: {
|
||||
newTemplate() {
|
||||
// 添加，编辑模板
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const data = this.formData;
|
||||
data.status ? (data.pageShow = "OPEN") : (data.pageShow = "CLOSE");
|
||||
delete data.status;
|
||||
(data.pageType = "INDEX"), (data.pageClientType = "PC");
|
||||
if (data.id) {
|
||||
API_floor.updateHome(data.id, data).then((res) => {
|
||||
this.$Message.success("编辑模板成功");
|
||||
this.showModal = false;
|
||||
this.getTemplateList();
|
||||
});
|
||||
} else {
|
||||
API_floor.setHomeSetup(data).then((res) => {
|
||||
this.$Message.success("新建模板成功");
|
||||
this.showModal = false;
|
||||
this.getTemplateList();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
createTemp() {
|
||||
// 新建表单
|
||||
this.$refs.form.resetFields();
|
||||
this.showModal = true;
|
||||
},
|
||||
|
||||
Template(item) {
|
||||
// 编辑表单
|
||||
item.status = item.pageShow;
|
||||
this.formData = item;
|
||||
this.showModal = true;
|
||||
},
|
||||
|
||||
decorate(val) {
|
||||
// 装修
|
||||
this.$router.push({
|
||||
name: "renovation",
|
||||
query: { id: val.id, pageShow: val.pageShow },
|
||||
});
|
||||
},
|
||||
|
||||
// 分页 修改页码
|
||||
changePageNum (val) {
|
||||
this.searchForm.pageNumber = val;
|
||||
this.getTemplateList();
|
||||
},
|
||||
// 分页 修改页数
|
||||
changePageSize (val) {
|
||||
this.searchForm.pageNumber = 1;
|
||||
this.searchForm.pageSize = val;
|
||||
this.getTemplateList();
|
||||
},
|
||||
getTemplateList() {
|
||||
//模板列表
|
||||
// let params = {
|
||||
// pageNumber: 1,
|
||||
// pageSize: 999,
|
||||
// pageType: "INDEX",
|
||||
// pageClientType: "PC",
|
||||
// };
|
||||
API_floor.getHomeList(this.searchForm).then((res) => {
|
||||
if (res.success) {
|
||||
// this.total
|
||||
this.total = res.result.total
|
||||
this.list = res.result.records;
|
||||
this.list.forEach((e) => {
|
||||
if (e.pageShow === "OPEN") {
|
||||
e.pageShow = true;
|
||||
} else {
|
||||
e.pageShow = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
releaseTemplate(id) {
|
||||
//发布模板
|
||||
API_floor.releasePageHome(id).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success("发布模板成功");
|
||||
this.getTemplateList();
|
||||
}
|
||||
});
|
||||
},
|
||||
// 删除模板
|
||||
delTemplate(id) {
|
||||
API_floor.removePageHome(id).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success("删除模板成功");
|
||||
this.getTemplateList();
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.category-item {
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
}
|
||||
.active {
|
||||
background: #ededed;
|
||||
}
|
||||
.item-title {
|
||||
background: #d7e7f5 !important;
|
||||
height: 54px;
|
||||
}
|
||||
.no-more {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.wrapper {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
}
|
||||
.category {
|
||||
flex: 2;
|
||||
}
|
||||
.content {
|
||||
flex: 8;
|
||||
}
|
||||
* {
|
||||
margin: 5px;
|
||||
}
|
||||
.list {
|
||||
min-height: 600px;
|
||||
position: relative;
|
||||
}
|
||||
.item:nth-of-type(2) {
|
||||
margin: 0 5px;
|
||||
}
|
||||
.item {
|
||||
width: 100% !important;
|
||||
padding: 0 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
> .item-config {
|
||||
width: 250px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
div:nth-child(2) {
|
||||
margin-right: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(2n + 1) {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
</style>
|
||||
955
manager/src/views/page-decoration/modelConfig.js
Normal file
955
manager/src/views/page-decoration/modelConfig.js
Normal file
@@ -0,0 +1,955 @@
|
||||
export const modelData = [{
|
||||
type: 'carousel',
|
||||
name: '图片轮播',
|
||||
icon: 'md-image',
|
||||
showName: '',
|
||||
size: "790*340",
|
||||
options: {
|
||||
list: [{
|
||||
img: require('@/assets/nav/1.jpg'),
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/2.jpg'),
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/3.jpg'),
|
||||
url: ''
|
||||
}
|
||||
],
|
||||
},
|
||||
},
|
||||
// {
|
||||
// type: 'carousel1',
|
||||
// name: '图片轮播1',
|
||||
// icon: 'md-image',
|
||||
// size: "1200*470",
|
||||
// options: {
|
||||
// list: [{
|
||||
// img: require('@/assets/nav/1.jpg'),
|
||||
// url: '',
|
||||
// bgColor: 'yellow'
|
||||
// },
|
||||
// {
|
||||
// img: require('@/assets/nav/2.jpg'),
|
||||
// url: '',
|
||||
// bgColor: 'purple'
|
||||
// },
|
||||
// {
|
||||
// img: require('@/assets/nav/3.jpg'),
|
||||
// url: '',
|
||||
// bgColor: 'blue'
|
||||
// }
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// type: 'carousel2',
|
||||
// name: '图片轮播2',
|
||||
// icon: 'md-image',
|
||||
// size: "590*470",
|
||||
// options: {
|
||||
// list: [{
|
||||
// img: require('@/assets/nav/1.jpg'),
|
||||
// url: ''
|
||||
// },
|
||||
// {
|
||||
// img: require('@/assets/nav/2.jpg'),
|
||||
// url: ''
|
||||
// },
|
||||
// {
|
||||
// img: require('@/assets/nav/3.jpg'),
|
||||
// url: ''
|
||||
// }
|
||||
// ],
|
||||
// listRight: [
|
||||
// [{
|
||||
// img: require('@/assets/nav/1.jpg'),
|
||||
// url: ''
|
||||
// },
|
||||
// {
|
||||
// img: require('@/assets/nav/2.jpg'),
|
||||
// url: ''
|
||||
// },
|
||||
// {
|
||||
// img: require('@/assets/nav/3.jpg'),
|
||||
// url: ''
|
||||
// }
|
||||
// ],
|
||||
// [{
|
||||
// img: require('@/assets/nav/1.jpg'),
|
||||
// url: ''
|
||||
// },
|
||||
// {
|
||||
// img: require('@/assets/nav/2.jpg'),
|
||||
// url: ''
|
||||
// },
|
||||
// {
|
||||
// img: require('@/assets/nav/3.jpg'),
|
||||
// url: ''
|
||||
// }
|
||||
// ],
|
||||
// ]
|
||||
// },
|
||||
// },
|
||||
{
|
||||
type: 'hotAdvert',
|
||||
name: '热门广告',
|
||||
icon: 'md-image',
|
||||
showName: '',
|
||||
options: {
|
||||
list: [{
|
||||
img: require('@/assets/nav/decorate1.png'),
|
||||
url: '',
|
||||
size: '1200*自定义'
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/1.jpg'),
|
||||
url: '',
|
||||
size: '230*190'
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/1.jpg'),
|
||||
url: '',
|
||||
size: '230*190'
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/1.jpg'),
|
||||
url: '',
|
||||
size: '230*190'
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/1.jpg'),
|
||||
url: '',
|
||||
size: '230*190'
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/1.jpg'),
|
||||
url: '',
|
||||
size: '230*190'
|
||||
}
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'seckill',
|
||||
name: '促销活动',
|
||||
icon: 'md-image',
|
||||
showName: '',
|
||||
options: {
|
||||
list: [{
|
||||
time: 6,
|
||||
goodsList: [{
|
||||
img: require('@/assets/nav/1.jpg'),
|
||||
price: 20,
|
||||
originalPrice: 30,
|
||||
name: '阿迪达斯三叶草asdasdafads123213a',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/2.jpg'),
|
||||
price: 20,
|
||||
originalPrice: 30,
|
||||
name: '阿迪达斯三叶草asdasdafadsa',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/3.jpg'),
|
||||
price: 20,
|
||||
originalPrice: 30,
|
||||
name: '阿迪达斯三叶草asdasdafadsa',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/4.jpg'),
|
||||
price: 20,
|
||||
originalPrice: 30,
|
||||
name: '阿迪达斯三叶草asdasdafadsa',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/5.jpg'),
|
||||
price: 20,
|
||||
originalPrice: 30,
|
||||
name: '阿迪达斯三叶草asdasdafadsa',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/1.jpg'),
|
||||
price: 20,
|
||||
originalPrice: 30,
|
||||
name: '阿迪达斯三叶草asdasdafadsa',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/2.jpg'),
|
||||
price: 20,
|
||||
originalPrice: 30,
|
||||
name: '阿迪达斯三叶草asdasdafadsa',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/3.jpg'),
|
||||
price: 20,
|
||||
originalPrice: 30,
|
||||
name: '阿迪达斯三叶草asdasdafadsa',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/4.jpg'),
|
||||
price: 20,
|
||||
originalPrice: 30,
|
||||
name: '阿迪达斯三叶草asdasdafadsa',
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/5.jpg'),
|
||||
price: 20,
|
||||
originalPrice: 30,
|
||||
name: '阿迪达斯三叶草asdasdafadsa',
|
||||
url: ''
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
time: 8,
|
||||
goodsList: [{
|
||||
img: require('@/assets/nav/1.jpg'),
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/2.jpg'),
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/3.jpg'),
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/4.jpg'),
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/5.jpg'),
|
||||
url: ''
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
time: 10,
|
||||
goodsList: [{
|
||||
img: require('@/assets/nav/1.jpg'),
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/2.jpg'),
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/3.jpg'),
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/4.jpg'),
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/5.jpg'),
|
||||
url: ''
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
time: 12,
|
||||
goodsList: [{
|
||||
img: require('@/assets/nav/1.jpg'),
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/2.jpg'),
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/3.jpg'),
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/4.jpg'),
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/5.jpg'),
|
||||
url: ''
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
time: 14,
|
||||
goodsList: []
|
||||
},
|
||||
{
|
||||
time: 16,
|
||||
goodsList: []
|
||||
},
|
||||
{
|
||||
time: 18,
|
||||
goodsList: []
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'discountAdvert',
|
||||
name: '折扣广告',
|
||||
icon: 'md-image',
|
||||
options: {
|
||||
bgImg: {
|
||||
img: require('@/assets/nav/decorate.png'),
|
||||
url: '',
|
||||
size: "1300*586"
|
||||
},
|
||||
classification: [{
|
||||
img: require('@/assets/nav/decorate2.jpeg'),
|
||||
url: '',
|
||||
size: '190*210'
|
||||
}, {
|
||||
img: require('@/assets/nav/decorate2.jpeg'),
|
||||
url: '',
|
||||
size: '190*210'
|
||||
}, {
|
||||
img: require('@/assets/nav/decorate2.jpeg'),
|
||||
url: '',
|
||||
size: '190*210'
|
||||
}, {
|
||||
img: require('@/assets/nav/decorate2.jpeg'),
|
||||
url: '',
|
||||
size: '190*210'
|
||||
}, {
|
||||
img: require('@/assets/nav/decorate2.jpeg'),
|
||||
url: '',
|
||||
size: '190*210'
|
||||
}, {
|
||||
img: require('@/assets/nav/decorate2.jpeg'),
|
||||
url: '',
|
||||
size: '190*210'
|
||||
}, {
|
||||
img: require('@/assets/nav/decorate2.jpeg'),
|
||||
url: '',
|
||||
size: '190*210'
|
||||
}, {
|
||||
img: require('@/assets/nav/decorate2.jpeg'),
|
||||
url: '',
|
||||
size: '190*210'
|
||||
}, {
|
||||
img: require('@/assets/nav/decorate2.jpeg'),
|
||||
url: '',
|
||||
size: '190*210'
|
||||
}, {
|
||||
img: require('@/assets/nav/decorate2.jpeg'),
|
||||
url: '',
|
||||
size: '190*210'
|
||||
}, ],
|
||||
brandList: [{
|
||||
img: require('@/assets/nav/decorate11.jpeg'),
|
||||
url: '',
|
||||
size: '240*105'
|
||||
}, {
|
||||
img: require('@/assets/nav/decorate11.jpeg'),
|
||||
url: '',
|
||||
size: '240*105'
|
||||
}, {
|
||||
img: require('@/assets/nav/decorate11.jpeg'),
|
||||
url: '',
|
||||
size: '240*105'
|
||||
}, {
|
||||
img: require('@/assets/nav/decorate11.jpeg'),
|
||||
url: '',
|
||||
size: '240*105'
|
||||
}, ]
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'recommend',
|
||||
name: '好货推荐',
|
||||
icon: 'md-image',
|
||||
options: {
|
||||
contentLeft: {
|
||||
title: '发现好货',
|
||||
secondTitle: '更多好货',
|
||||
bgColor: '#449dae',
|
||||
url: '',
|
||||
list: [{
|
||||
img: require('@/assets/nav/decorate3.jpeg'),
|
||||
name: '阿迪达斯三叶草',
|
||||
describe: '也许是每一款经典系列都应该有一个独特的故事吧',
|
||||
url: '',
|
||||
size: '160*160'
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate4.jpeg'),
|
||||
name: '360行车记录',
|
||||
describe: '夜行 监控 电子狗 蓝牙',
|
||||
url: '',
|
||||
size: '80*80'
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate4.jpeg'),
|
||||
name: '360行车记录',
|
||||
describe: '夜行 监控 电子狗 蓝牙',
|
||||
url: '',
|
||||
size: '80*80'
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate4.jpeg'),
|
||||
name: '360行车记录',
|
||||
describe: '夜行 监控 电子狗 蓝牙',
|
||||
url: '',
|
||||
size: '80*80'
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate4.jpeg'),
|
||||
name: '360行车记录',
|
||||
describe: '夜行 监控 电子狗 蓝牙',
|
||||
url: '',
|
||||
size: '80*80'
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate4.jpeg'),
|
||||
name: '360行车记录',
|
||||
describe: '夜行 监控 电子狗 蓝牙',
|
||||
url: '',
|
||||
size: '80*80'
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate4.jpeg'),
|
||||
name: '360行车记录',
|
||||
describe: '夜行 监控 电子狗 蓝牙',
|
||||
url: '',
|
||||
size: '80*80'
|
||||
},
|
||||
]
|
||||
},
|
||||
contentRight: {
|
||||
title: '特色推荐',
|
||||
secondTitle: '更多特色推荐',
|
||||
bgColor: '#a25684',
|
||||
url: '',
|
||||
list: [{
|
||||
img: require('@/assets/nav/decorate5.jpeg'),
|
||||
name: '好心情喝出来',
|
||||
describe: '遇见懂你的饮品',
|
||||
url: '',
|
||||
size: '100*100'
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate5.jpeg'),
|
||||
name: '好心情喝出来',
|
||||
describe: '遇见懂你的饮品',
|
||||
url: '',
|
||||
size: '100*100'
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate5.jpeg'),
|
||||
name: '好心情喝出来',
|
||||
describe: '遇见懂你的饮品',
|
||||
url: '',
|
||||
size: '100*100'
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate5.jpeg'),
|
||||
name: '好心情喝出来',
|
||||
describe: '遇见懂你的饮品',
|
||||
url: '',
|
||||
size: '100*100'
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'newGoodsSort',
|
||||
name: '新品排行',
|
||||
icon: 'md-image',
|
||||
options: {
|
||||
left: {
|
||||
title: '特卖',
|
||||
secondTitle: "更多特卖",
|
||||
bgColor: '#c43d7e',
|
||||
url: '',
|
||||
list: [{
|
||||
name: '新年心愿单',
|
||||
describe: '满269减50,满999减100',
|
||||
img: require('@/assets/nav/decorate6.jpeg'),
|
||||
url: '',
|
||||
size: "160*160"
|
||||
},
|
||||
{
|
||||
name: 'Ms.Maggie 冬季时尚',
|
||||
describe: '满269减50',
|
||||
img: require('@/assets/nav/decorate6.jpeg'),
|
||||
url: '',
|
||||
size: "90*90"
|
||||
},
|
||||
{
|
||||
name: 'Ms.Maggie 冬季时尚',
|
||||
describe: '满269减50',
|
||||
img: require('@/assets/nav/decorate6.jpeg'),
|
||||
url: '',
|
||||
size: "90*90"
|
||||
},
|
||||
{
|
||||
name: 'Ms.Maggie 冬季时尚',
|
||||
describe: '满269减50',
|
||||
img: require('@/assets/nav/decorate6.jpeg'),
|
||||
url: '',
|
||||
size: "90*90"
|
||||
},
|
||||
{
|
||||
name: '阿迪达斯 领跑时尚',
|
||||
describe: '满269减50',
|
||||
img: require('@/assets/nav/decorate6.jpeg'),
|
||||
url: '',
|
||||
size: "90*90"
|
||||
},
|
||||
],
|
||||
},
|
||||
middle: {
|
||||
title: '新品',
|
||||
secondTitle: "更多新品",
|
||||
bgColor: '#e66a07',
|
||||
url: '',
|
||||
list: [{
|
||||
name: '阿迪达斯 领跑时尚',
|
||||
describe: '满269减50',
|
||||
img: require('@/assets/nav/decorate6.jpeg'),
|
||||
url: '',
|
||||
size: "90*90"
|
||||
},
|
||||
{
|
||||
name: '阿迪达斯 领跑时尚',
|
||||
describe: '满269减50',
|
||||
img: require('@/assets/nav/decorate6.jpeg'),
|
||||
url: '',
|
||||
size: "90*90"
|
||||
},
|
||||
{
|
||||
name: '阿迪达斯 领跑时尚',
|
||||
describe: '满269减50',
|
||||
img: require('@/assets/nav/decorate6.jpeg'),
|
||||
url: '',
|
||||
size: "90*90"
|
||||
},
|
||||
{
|
||||
name: '阿迪达斯 领跑时尚',
|
||||
describe: '满269减50',
|
||||
img: require('@/assets/nav/decorate6.jpeg'),
|
||||
url: '',
|
||||
size: "90*90"
|
||||
},
|
||||
{
|
||||
name: '阿迪达斯 领跑时尚',
|
||||
describe: '满269减50',
|
||||
img: require('@/assets/nav/decorate6.jpeg'),
|
||||
url: '',
|
||||
size: "90*90"
|
||||
},
|
||||
{
|
||||
name: '阿迪达斯 领跑时尚',
|
||||
describe: '满269减50',
|
||||
img: require('@/assets/nav/decorate6.jpeg'),
|
||||
url: '',
|
||||
size: "90*90"
|
||||
},
|
||||
]
|
||||
},
|
||||
right: {
|
||||
title: '排行榜',
|
||||
secondTitle: "精品风向标",
|
||||
bgColor: '#b62323',
|
||||
url: '',
|
||||
list: [{
|
||||
name: '小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包',
|
||||
price: 14.9,
|
||||
img: require('@/assets/nav/decorate7.jpeg'),
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
name: '小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包',
|
||||
price: 14.9,
|
||||
img: require('@/assets/nav/decorate7.jpeg'),
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
name: '小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包',
|
||||
price: 14.9,
|
||||
img: require('@/assets/nav/decorate7.jpeg'),
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
name: '小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包',
|
||||
price: 14.9,
|
||||
img: require('@/assets/nav/decorate7.jpeg'),
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
name: '小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包',
|
||||
price: 14.9,
|
||||
img: require('@/assets/nav/decorate7.jpeg'),
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
name: '小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包',
|
||||
price: 14.9,
|
||||
img: require('@/assets/nav/decorate7.jpeg'),
|
||||
url: ''
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'firstAdvert',
|
||||
name: '首页广告',
|
||||
icon: 'md-image',
|
||||
options: {
|
||||
list: [{
|
||||
name: '生鲜',
|
||||
describe: "年货带回家 满199减60",
|
||||
img: require('@/assets/nav/decorate8.png'),
|
||||
url: '',
|
||||
fromColor: '#e89621',
|
||||
toColor: "#f5c568",
|
||||
size: '170*170'
|
||||
},
|
||||
{
|
||||
name: '众筹',
|
||||
describe: "年货带回家",
|
||||
img: require('@/assets/nav/decorate9.png'),
|
||||
url: '',
|
||||
fromColor: "#325bb4",
|
||||
toColor: '#4c9afe',
|
||||
size: '170*170'
|
||||
},
|
||||
{
|
||||
name: '生鲜',
|
||||
describe: "年货带回家 满199减60",
|
||||
img: require('@/assets/nav/decorate8.png'),
|
||||
url: '',
|
||||
fromColor: "#1c9daf",
|
||||
toColor: '#40cda7',
|
||||
size: '170*170'
|
||||
},
|
||||
{
|
||||
name: '众筹',
|
||||
describe: "备孕有孕检测仪",
|
||||
img: require('@/assets/nav/decorate9.png'),
|
||||
url: '',
|
||||
fromColor: "#d13837",
|
||||
toColor: '#df6d4f',
|
||||
size: '170*170'
|
||||
},
|
||||
{
|
||||
name: '生鲜',
|
||||
describe: "年货带回家 满199减60",
|
||||
img: require('@/assets/nav/decorate8.png'),
|
||||
url: '',
|
||||
fromColor: "#ca4283",
|
||||
toColor: '#eb75cf',
|
||||
size: '170*170'
|
||||
},
|
||||
{
|
||||
name: '众筹',
|
||||
describe: "备孕有孕检测仪",
|
||||
img: require('@/assets/nav/decorate9.png'),
|
||||
url: '',
|
||||
fromColor: "#5d40c1",
|
||||
toColor: '#8c5fdb',
|
||||
size: '170*170'
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'bannerAdvert',
|
||||
name: '横幅广告',
|
||||
icon: 'md-image',
|
||||
options: {
|
||||
img: '',
|
||||
url: '',
|
||||
size: '1200*自定义'
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'notEnough',
|
||||
name: '还没逛够',
|
||||
icon: 'md-image',
|
||||
options: {
|
||||
list: [
|
||||
[{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
],
|
||||
[{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
],
|
||||
[{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
],
|
||||
[{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
{
|
||||
img: require('@/assets/nav/decorate10.jpeg'),
|
||||
name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
|
||||
price: 6666,
|
||||
url: ''
|
||||
},
|
||||
],
|
||||
|
||||
],
|
||||
navList: [{
|
||||
title: '精选',
|
||||
desc: '猜你喜欢'
|
||||
},
|
||||
{
|
||||
title: '智能先锋',
|
||||
desc: '大电器城'
|
||||
},
|
||||
{
|
||||
title: '居家优品',
|
||||
desc: '品质生活'
|
||||
},
|
||||
{
|
||||
title: '超市百货',
|
||||
desc: '百货生鲜'
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
]
|
||||
449
manager/src/views/page-decoration/modelForm.vue
Normal file
449
manager/src/views/page-decoration/modelForm.vue
Normal file
@@ -0,0 +1,449 @@
|
||||
<template>
|
||||
<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="setup-box">
|
||||
<Button size="small" @click.stop="handleModel('topAdvert')"
|
||||
>编辑</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-con">
|
||||
<div></div>
|
||||
<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>
|
||||
<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>
|
||||
<script>
|
||||
import Draggable from "vuedraggable";
|
||||
import ModelFormItem from "./modelFormItem.vue";
|
||||
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||
export default {
|
||||
name: "modelForm",
|
||||
components: {
|
||||
Draggable,
|
||||
ModelFormItem,
|
||||
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);
|
||||
},
|
||||
// 已选链接
|
||||
selectedLink(val) {
|
||||
if (this.showModalNav) {
|
||||
this.selectedNav.url = this.$options.filters.formatLinkType(val);
|
||||
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);
|
||||
},
|
||||
handleAddNav() {
|
||||
// 添加导航
|
||||
this.navList.list.push({ name: "", url: "" });
|
||||
},
|
||||
// 拖动结束回调
|
||||
handleMoveEnd({ newIndex, oldIndex }) {
|
||||
console.log("index", newIndex, oldIndex);
|
||||
},
|
||||
// 修改顶部广告
|
||||
handleModel(type) {
|
||||
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
|
||||
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: {
|
||||
...this.data.list[newIndex].options,
|
||||
},
|
||||
key,
|
||||
// 绑定键值
|
||||
model: this.data.list[newIndex].type + "_" + key,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./modelList/setup-box.scss";
|
||||
.model-form {
|
||||
width: 1500px;
|
||||
}
|
||||
.model-content {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
min-height: 1200px;
|
||||
}
|
||||
.model-form-list {
|
||||
min-height: 500px;
|
||||
}
|
||||
/** 顶部广告，头部，搜索框 start */
|
||||
.top-fixed-advert {
|
||||
display: flex;
|
||||
width: 1500px;
|
||||
margin-left: -150px;
|
||||
background: $theme_color;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-con {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 35px;
|
||||
padding: 0 15px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/** 搜索框 */
|
||||
.search-con {
|
||||
padding-top: 15px;
|
||||
margin: 0px auto;
|
||||
margin-bottom: 10px;
|
||||
width: 1200px;
|
||||
position: relative;
|
||||
.logo {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 150px;
|
||||
height: 50px;
|
||||
}
|
||||
.search {
|
||||
width: 460px;
|
||||
margin: 0 auto;
|
||||
/deep/ .ivu-input.ivu-input-large {
|
||||
border: 2px solid $theme_color;
|
||||
font-size: 12px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/** 商品分类 */
|
||||
.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 {
|
||||
position: relative;
|
||||
&:hover {
|
||||
.setup-box {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
/** 装修模态框 内部样式start */
|
||||
.modal-top-advert {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
> * {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
494
manager/src/views/page-decoration/modelFormItem.vue
Normal file
494
manager/src/views/page-decoration/modelFormItem.vue
Normal file
@@ -0,0 +1,494 @@
|
||||
<template>
|
||||
<div class="model-item" v-if="element && element.key">
|
||||
<!-- 轮播图模块，包括个人信息，快捷导航模块 -->
|
||||
<template v-if="element.type == 'carousel'">
|
||||
<model-carousel :data="element"></model-carousel>
|
||||
</template>
|
||||
<!-- 轮播图模块，100%宽度，无个人信息栏 -->
|
||||
<template v-if="element.type == 'carousel1'">
|
||||
<model-carousel1 class="mb_20" :data="element"></model-carousel1>
|
||||
</template>
|
||||
<!-- 轮播图模块，包括个人信息，两个轮播模块 -->
|
||||
<template v-if="element.type == 'carousel2'">
|
||||
<model-carousel2 class="mb_20" :data="element"></model-carousel2>
|
||||
</template>
|
||||
<!-- 热门广告 -->
|
||||
<template v-if="element.type == 'hotAdvert'">
|
||||
<div class="setup-content">
|
||||
<img
|
||||
style="display: block"
|
||||
:src="element.options.list[0].img"
|
||||
@click="$router.push(element.options.list[0].url)"
|
||||
width="1200"
|
||||
alt=""
|
||||
/>
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button
|
||||
size="small"
|
||||
@click.stop="handleSelectModel(element.options.list[0])"
|
||||
>编辑</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="advert-list">
|
||||
<template v-for="(item, index) in element.options.list">
|
||||
<li
|
||||
v-if="index !== 0"
|
||||
@click="$router.push(item.url)"
|
||||
class="setup-content"
|
||||
:key="index"
|
||||
>
|
||||
<img :src="item.img" width="230" height="190" alt="" />
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button size="small" @click.stop="handleSelectModel(item)"
|
||||
>编辑</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</template>
|
||||
<!-- 限时秒杀 待完善 -->
|
||||
<template v-if="element.type == 'seckill'">
|
||||
<seckill :data="element"></seckill>
|
||||
</template>
|
||||
<!-- 折扣广告 -->
|
||||
<template v-if="element.type == 'discountAdvert'">
|
||||
<div
|
||||
class="discountAdvert"
|
||||
:style="{
|
||||
'background-image':
|
||||
'url(' + require('@/assets/nav/decorate.png') + ')',
|
||||
}"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
v-for="(item, index) in element.options.classification"
|
||||
:key="index"
|
||||
class="setup-content"
|
||||
>
|
||||
<img :src="item.img" width="190" height="210" alt="" />
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button size="small" @click.stop="handleSelectModel(item)"
|
||||
>编辑</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
v-for="(item, index) in element.options.brandList"
|
||||
:key="index"
|
||||
class="setup-content"
|
||||
>
|
||||
<img :src="item.img" width="240" height="105" alt="" />
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button size="small" @click.stop="handleSelectModel(item)"
|
||||
>编辑</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 好货推荐 -->
|
||||
<template v-if="element.type == 'recommend'">
|
||||
<recommend :data="element"></recommend>
|
||||
</template>
|
||||
<!-- 新品排行 -->
|
||||
<template v-if="element.type == 'newGoodsSort'">
|
||||
<new-goods-sort :data="element"></new-goods-sort>
|
||||
</template>
|
||||
<!-- 首页广告 -->
|
||||
<template v-if="element.type == 'firstAdvert'">
|
||||
<first-page-advert :data="element"></first-page-advert>
|
||||
</template>
|
||||
<!-- 横幅广告 -->
|
||||
<template v-if="element.type == 'bannerAdvert'">
|
||||
<div class="horizontal-advert setup-content">
|
||||
<img
|
||||
v-if="element.options.img"
|
||||
width="1200"
|
||||
:src="element.options.img"
|
||||
alt=""
|
||||
/>
|
||||
<div v-else class="default-con">
|
||||
<p>广告图片</p>
|
||||
<p>1200*自定义</p>
|
||||
</div>
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button
|
||||
size="small"
|
||||
@click.stop="handleSelectModel(element.options)"
|
||||
>编辑</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="element.type == 'notEnough'">
|
||||
<not-enough :data="element"></not-enough>
|
||||
</template>
|
||||
<div class="del-btn">
|
||||
<Button size="small" type="error" @click="handleModelDelete">删除</Button>
|
||||
</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"
|
||||
v-if="selected.size && selected.size.indexOf('1200') >= 0"
|
||||
:src="selected.img"
|
||||
alt
|
||||
/>
|
||||
<img
|
||||
class="show-image"
|
||||
width="230"
|
||||
height="190"
|
||||
v-if="selected.size && selected.size.indexOf('230*190') >= 0"
|
||||
:src="selected.img"
|
||||
alt
|
||||
/>
|
||||
<!-- 折扣广告三种图片尺寸 -->
|
||||
<img
|
||||
class="show-image"
|
||||
width="600"
|
||||
height="300"
|
||||
v-if="selected.size && selected.size.indexOf('1300') >= 0"
|
||||
:src="selected.img"
|
||||
alt
|
||||
/>
|
||||
<img
|
||||
class="show-image"
|
||||
width="190"
|
||||
height="210"
|
||||
v-if="selected.size && selected.size.indexOf('190*210') >= 0"
|
||||
:src="selected.img"
|
||||
alt
|
||||
/>
|
||||
<img
|
||||
class="show-image"
|
||||
width="240"
|
||||
height="105"
|
||||
v-if="selected.size && selected.size.indexOf('240*105') >= 0"
|
||||
:src="selected.img"
|
||||
alt
|
||||
/>
|
||||
</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
|
||||
>
|
||||
</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>
|
||||
|
||||
<script>
|
||||
import ModelCarousel from "./modelList/carousel.vue";
|
||||
import ModelCarousel1 from "./modelList/carousel1.vue";
|
||||
import ModelCarousel2 from "./modelList/carousel2.vue";
|
||||
import FirstPageAdvert from "./modelList/firstPageAdvert.vue";
|
||||
import NewGoodsSort from "./modelList/newGoodsSort.vue";
|
||||
import Recommend from "./modelList/recommend.vue";
|
||||
import NotEnough from "./modelList/notEnough.vue";
|
||||
import Seckill from "./modelList/seckill.vue";
|
||||
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||
|
||||
export default {
|
||||
name: "modelFormItem",
|
||||
props: ["element", "select", "index", "data"],
|
||||
components: {
|
||||
ModelCarousel,
|
||||
ModelCarousel1,
|
||||
ModelCarousel2,
|
||||
Recommend,
|
||||
NewGoodsSort,
|
||||
FirstPageAdvert,
|
||||
NotEnough,
|
||||
Seckill,
|
||||
ossManage,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showModal: false, // modal显隐
|
||||
selected: {}, // 已选数据
|
||||
picModelFlag: false, // 图片选择器
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 编辑模块
|
||||
handleSelectModel(item) {
|
||||
this.selected = item;
|
||||
this.showModal = true;
|
||||
},
|
||||
// 删除模块
|
||||
handleModelDelete() {
|
||||
this.$Modal.confirm({
|
||||
title: "提示",
|
||||
content: "<p>确定删除当前模块吗？</p>",
|
||||
onOk: () => {
|
||||
this.$nextTick(() => {
|
||||
this.data.list.splice(this.index, 1);
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
handleSelectLink(item, index) {
|
||||
// 调起选择链接弹窗
|
||||
this.$refs.liliDialog.open("link");
|
||||
},
|
||||
// 确定选择链接
|
||||
selectedLink(val) {
|
||||
this.selected.url = this.$options.filters.formatLinkType(val);
|
||||
this.selected.type =
|
||||
val.___type === "other" && val.url === "" ? "link" : "other";
|
||||
},
|
||||
|
||||
handleSelectImg() {
|
||||
// 选择图片
|
||||
this.$refs.ossManage.selectImage = true;
|
||||
this.picModelFlag = true;
|
||||
},
|
||||
// 回显图片
|
||||
callbackSelected(val) {
|
||||
this.picModelFlag = false;
|
||||
this.selected.img = val.url;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./modelList/setup-box.scss";
|
||||
.model-item {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
&:hover {
|
||||
.del-btn {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.del-btn {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: -100px;
|
||||
top: 0;
|
||||
&:hover {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
/** 横幅广告 */
|
||||
.horizontal-advert {
|
||||
width: 1200px;
|
||||
height: auto;
|
||||
.default-con {
|
||||
height: 100px;
|
||||
padding-top: 30px;
|
||||
text-align: center;
|
||||
background: #ddd;
|
||||
}
|
||||
}
|
||||
/** 热门广告 */
|
||||
.advert-list {
|
||||
background: $theme_color;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 3px 10px;
|
||||
> li {
|
||||
img {
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
transition: all 150ms ease-in-out;
|
||||
&:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 20px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
/** 限时秒杀 */
|
||||
.limit-img {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
img {
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
/** 折扣广告 */
|
||||
.discountAdvert {
|
||||
height: 566px;
|
||||
background-repeat: no-repeat;
|
||||
margin-left: -97px;
|
||||
position: relative;
|
||||
> div {
|
||||
padding-left: 295px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
&:nth-child(1) img {
|
||||
margin: 10px 10px 0 0;
|
||||
}
|
||||
&:nth-child(2) img {
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
/** 首页品牌 */
|
||||
.brand {
|
||||
.brand-view {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
.brand-view-content {
|
||||
width: 470px;
|
||||
margin-left: 10px;
|
||||
img {
|
||||
width: 100%;
|
||||
height: 316px;
|
||||
}
|
||||
.brand-view-title {
|
||||
height: 50px;
|
||||
padding: 0 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.brand-view-content:first-child {
|
||||
width: 240px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.brand-list {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
li {
|
||||
width: 121px;
|
||||
height: 112px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid #f5f5f5;
|
||||
margin: -1px -1px 0 0;
|
||||
&:hover {
|
||||
.brand-mash {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.brand-img {
|
||||
text-align: center;
|
||||
margin-top: 30px;
|
||||
img {
|
||||
width: 100px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.brand-mash {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
.ivu-icon {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
div:last-child {
|
||||
background-color: $theme_color;
|
||||
border-radius: 9px;
|
||||
padding: 0 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.refresh {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.ivu-icon {
|
||||
font-size: 18px;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
&:hover {
|
||||
background-color: $theme_color;
|
||||
color: #fff;
|
||||
.ivu-icon {
|
||||
transform: rotateZ(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/** 装修模态框 内部样式start */
|
||||
.modal-top-advert {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
> * {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
300
manager/src/views/page-decoration/modelList/carousel.vue
Normal file
300
manager/src/views/page-decoration/modelList/carousel.vue
Normal file
@@ -0,0 +1,300 @@
|
||||
<template>
|
||||
<div class="model-carousel">
|
||||
<div class="nav-body clearfix">
|
||||
<!-- 侧边导航 -->
|
||||
<div class="nav-side">分类占位区</div>
|
||||
<div class="nav-content setup-content">
|
||||
<!-- 轮播图 -->
|
||||
<Carousel autoplay>
|
||||
<CarouselItem v-for="(item, index) in data.options.list" :key="index">
|
||||
<div style="overflow: hidden">
|
||||
<img :src="item.img" width="790" height="340" />
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</Carousel>
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button size="small" @click.stop="handleSelectModel">编辑</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<div class="person-msg">
|
||||
<img :src="userInfo.face" v-if="userInfo.face" alt />
|
||||
<Avatar icon="ios-person" class="mb_10" v-else size="80" />
|
||||
<div>
|
||||
Hi，{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}
|
||||
</div>
|
||||
<div v-if="userInfo.id">
|
||||
<Button type="error" shape="circle">会员中心</Button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<Button type="error" shape="circle">请登录</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shop-msg">
|
||||
<div>
|
||||
<span>常见问题</span>
|
||||
<ul class="article-list">
|
||||
<li
|
||||
class="ellipsis"
|
||||
:alt="article.title"
|
||||
v-for="(article, index) in articleList"
|
||||
:key="index"
|
||||
>
|
||||
{{ article.title }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
v-model="showModal"
|
||||
title="快捷导航"
|
||||
draggable
|
||||
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>
|
||||
<div style="color: #999" class="fz_12">点击缩略图替换图片</div>
|
||||
<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 data.options.list" :key="index">
|
||||
<td>
|
||||
<img
|
||||
style="cursor: pointer"
|
||||
:src="item.img"
|
||||
@click="handleSelectImg(item)"
|
||||
width="200"
|
||||
height="100"
|
||||
alt=""
|
||||
/>
|
||||
</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
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="handleSelectImg(item)"
|
||||
>选择图片</Button
|
||||
>
|
||||
<Button type="info" size="small" @click="handleSelectLink(item)"
|
||||
>选择链接</Button
|
||||
>
|
||||
<Button
|
||||
type="error"
|
||||
ghost
|
||||
size="small"
|
||||
@click="handleDel(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>
|
||||
|
||||
<script>
|
||||
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||
export default {
|
||||
name: "modelCarousel",
|
||||
props: ["data"],
|
||||
components: {
|
||||
ossManage,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showModal: false, // modal显隐
|
||||
selected: null, // 已选数据
|
||||
picModelFlag: false, // 选择图片modal
|
||||
userInfo: {},
|
||||
articleList: [
|
||||
{ title: "促销计算规则" },
|
||||
{ title: "商家申请开店" },
|
||||
{ title: "商家账号注册" },
|
||||
{ title: "促销计算规则" },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleSelectModel() {
|
||||
// 编辑模块
|
||||
this.showModal = true;
|
||||
},
|
||||
// 添加轮播图
|
||||
handleAdd() {
|
||||
this.data.options.list.push({ img: "", url: "", type: "" });
|
||||
this.$forceUpdate();
|
||||
},
|
||||
handleSelectLink(item) {
|
||||
// 选择链接
|
||||
this.$refs.liliDialog.open("link");
|
||||
this.selected = item;
|
||||
},
|
||||
callbackSelected(item) {
|
||||
// 选择图片回调
|
||||
this.picModelFlag = false;
|
||||
this.selected.img = item.url;
|
||||
},
|
||||
handleDel(index) {
|
||||
// 删除图片
|
||||
this.data.options.list.splice(index, 1);
|
||||
},
|
||||
selectedLink(val) {
|
||||
// 选择链接回调
|
||||
this.selected.url = this.$options.filters.formatLinkType(val);
|
||||
this.selected.type =
|
||||
val.___type === "other" && val.url === "" ? "link" : "other";
|
||||
},
|
||||
// 选择图片
|
||||
handleSelectImg(item) {
|
||||
this.selected = item;
|
||||
this.$refs.ossManage.selectImage = true;
|
||||
this.picModelFlag = true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./setup-box.scss";
|
||||
.model-carousel {
|
||||
width: 1200px;
|
||||
height: 340px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-item li {
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.nav-item a {
|
||||
text-decoration: none;
|
||||
color: #555555;
|
||||
}
|
||||
.nav-item a:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
/*大的导航信息，包含导航，幻灯片等*/
|
||||
.nav-body {
|
||||
width: 1200px;
|
||||
height: 340px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.nav-side {
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
padding: 0px;
|
||||
color: #fff;
|
||||
float: left;
|
||||
background-color: #6e6568;
|
||||
line-height: 340px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*导航内容*/
|
||||
.nav-content {
|
||||
width: 800px;
|
||||
height: 340px;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
.nav-right {
|
||||
float: left;
|
||||
width: 200px;
|
||||
.person-msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin: 20px auto;
|
||||
|
||||
button {
|
||||
height: 25px !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.ivu-btn-default {
|
||||
color: $theme_color;
|
||||
border-color: $theme_color;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-bottom: 10px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.shop-msg {
|
||||
div {
|
||||
width: 100%;
|
||||
margin: 10px 27px;
|
||||
span {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
}
|
||||
span:nth-child(1) {
|
||||
color: $theme_color;
|
||||
margin-left: 0;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-weight: normal;
|
||||
}
|
||||
span:nth-child(3):hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin: 0 30px;
|
||||
li {
|
||||
cursor: pointer;
|
||||
margin: 5px 0;
|
||||
color: #999395;
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
190
manager/src/views/page-decoration/modelList/carousel1.vue
Normal file
190
manager/src/views/page-decoration/modelList/carousel1.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<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">
|
||||
<div style="overflow: hidden">
|
||||
<img :src="item.img" width="1200" height="470" />
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</Carousel>
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button size="small" @click.stop="handleSelectModel">编辑</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
v-model="showModal"
|
||||
title="快捷导航"
|
||||
draggable
|
||||
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
|
||||
>
|
||||
<table cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="250">所选图片</th>
|
||||
<th width="250">链接地址</th>
|
||||
<th width="250">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in data.options.list" :key="index">
|
||||
<td>
|
||||
<img
|
||||
style="cursor: pointer"
|
||||
:src="item.img"
|
||||
@click="handleSelectImg(item)"
|
||||
width="200"
|
||||
height="100"
|
||||
alt=""
|
||||
/>
|
||||
</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
|
||||
>
|
||||
<ColorPicker size="small" v-model="item.bgColor" />
|
||||
|
||||
<Button
|
||||
type="error"
|
||||
ghost
|
||||
size="small"
|
||||
@click="handleDel(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" ref="ossManage" />
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||
export default {
|
||||
name: "modelCarousel",
|
||||
props: ["data"],
|
||||
components: {
|
||||
ossManage,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showModal: false, // modal显隐
|
||||
selected: null, // 已选数据
|
||||
picModelFlag: false, // 选择图片modal
|
||||
bgColor: "#fff", // 轮播背景色
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.bgColor = this.data.options.list[0].bgColor;
|
||||
},
|
||||
methods: {
|
||||
handleSelectModel() {
|
||||
// 编辑模块
|
||||
this.showModal = true;
|
||||
},
|
||||
// 自动切换时改变背景色
|
||||
autoChange(oVal, val) {
|
||||
this.bgColor = this.data.options.list[val].bgColor;
|
||||
},
|
||||
// 添加轮播图片和链接
|
||||
handleAdd() {
|
||||
this.data.options.list.push({ img: "", url: "", bgColor: "#fff" });
|
||||
this.$forceUpdate();
|
||||
},
|
||||
// 打开选择链接modal
|
||||
handleSelectLink(item) {
|
||||
this.$refs.liliDialog.open("link");
|
||||
this.selected = item;
|
||||
},
|
||||
callbackSelected(item) {
|
||||
// 选择图片回调
|
||||
this.picModelFlag = false;
|
||||
this.selected.img = item.url;
|
||||
},
|
||||
// 删除图片
|
||||
handleDel(index) {
|
||||
this.data.options.list.splice(index, 1);
|
||||
},
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./setup-box.scss";
|
||||
.model-carousel1 {
|
||||
width: 1500px;
|
||||
height: 470px;
|
||||
margin-left: -150px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/*大的导航信息，包含导航，幻灯片等*/
|
||||
.nav-body {
|
||||
width: 1200px;
|
||||
height: 470px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.nav-side {
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
padding: 0px;
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
line-height: 470px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/*导航内容*/
|
||||
.nav-content {
|
||||
width: 1200px;
|
||||
height: 470px;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
400
manager/src/views/page-decoration/modelList/carousel2.vue
Normal file
400
manager/src/views/page-decoration/modelList/carousel2.vue
Normal file
@@ -0,0 +1,400 @@
|
||||
<template>
|
||||
<div class="model-carousel2">
|
||||
<div class="nav-body clearfix">
|
||||
<!-- 侧边导航 -->
|
||||
<div class="nav-side">分类占位区</div>
|
||||
<div class="nav-content setup-content">
|
||||
<!-- 轮播图 -->
|
||||
<Carousel autoplay>
|
||||
<CarouselItem v-for="(item, index) in data.options.list" :key="index">
|
||||
<div style="overflow: hidden">
|
||||
<img :src="item.img" width="590" height="470" />
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</Carousel>
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button size="small" @click.stop="handleSelectModel">编辑</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-content1 setup-content">
|
||||
<!-- 轮播图 -->
|
||||
<Carousel autoplay :autoplay-speed="5000">
|
||||
<CarouselItem
|
||||
v-for="(item, index) in data.options.listRight"
|
||||
:key="index"
|
||||
>
|
||||
<div class="mb_10">
|
||||
<img :src="item[0].img" width="190" height="150" />
|
||||
</div>
|
||||
<div class="mb_10">
|
||||
<img :src="item[1].img" width="190" height="150" />
|
||||
</div>
|
||||
<div>
|
||||
<img :src="item[2].img" width="190" height="150" />
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</Carousel>
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button size="small" @click.stop="handleSelectModel">编辑</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<div class="person-msg">
|
||||
<img :src="userInfo.face" v-if="userInfo.face" alt />
|
||||
<Avatar icon="ios-person" class="mb_10" v-else size="80" />
|
||||
<div>
|
||||
Hi，{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}
|
||||
</div>
|
||||
<div v-if="userInfo.id">
|
||||
<Button type="error" shape="circle">会员中心</Button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<Button type="error" shape="circle">请登录</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shop-msg">
|
||||
<div>
|
||||
<span>常见问题</span>
|
||||
<ul class="article-list">
|
||||
<li
|
||||
class="ellipsis"
|
||||
:alt="article.title"
|
||||
v-for="(article, index) in articleList"
|
||||
:key="index"
|
||||
>
|
||||
{{ article.title }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 左侧轮播装修 -->
|
||||
<Modal
|
||||
v-model="showModal"
|
||||
title="快捷导航"
|
||||
draggable
|
||||
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>
|
||||
<table cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="250">所选图片</th>
|
||||
<th width="250">链接地址</th>
|
||||
<th width="250">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in data.options.list" :key="index">
|
||||
<td>
|
||||
<img
|
||||
style="cursor: pointer"
|
||||
:src="item.img"
|
||||
@click="handleSelectImg(item)"
|
||||
width="200"
|
||||
height="100"
|
||||
alt=""
|
||||
/>
|
||||
</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
|
||||
type="error"
|
||||
ghost
|
||||
size="small"
|
||||
@click="handleDel(index)"
|
||||
>删除</Button
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Modal>
|
||||
<!-- 右侧轮播装修 -->
|
||||
<Modal
|
||||
v-model="showModal"
|
||||
title="右侧装修"
|
||||
draggable
|
||||
width="800"
|
||||
:z-index="100"
|
||||
:mask-closable="false"
|
||||
>
|
||||
<div class="modal-tab-bar">
|
||||
<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"
|
||||
>
|
||||
<table cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th width="250">所选图片</th>
|
||||
<th width="250">链接地址</th>
|
||||
<th width="250">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in group" :key="index">
|
||||
<td>
|
||||
<img
|
||||
style="cursor: pointer"
|
||||
:src="item.img"
|
||||
@click="handleSelectImg(item)"
|
||||
width="200"
|
||||
height="100"
|
||||
alt=""
|
||||
/>
|
||||
</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
|
||||
>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</Modal>
|
||||
<!-- 选择商品。链接 -->
|
||||
<liliDialog ref="liliDialog" @selectedLink="selectedLink"></liliDialog>
|
||||
<!-- 选择图片 -->
|
||||
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||
<ossManage @callback="callbackSelected" ref="ossManage" />
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||
export default {
|
||||
name: "modelCarousel",
|
||||
props: ["data"],
|
||||
components: {
|
||||
ossManage,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showModal: false, // modal显隐
|
||||
selected: null, // 已选数据
|
||||
picModelFlag: false, // 选择图片modal
|
||||
userInfo: {},
|
||||
articleList: [
|
||||
{ title: "促销计算规则" },
|
||||
{ title: "商家申请开店" },
|
||||
{ title: "商家账号注册" },
|
||||
{ title: "促销计算规则" },
|
||||
],
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleSelectModel() {
|
||||
// 编辑模块
|
||||
this.showModal = true;
|
||||
},
|
||||
// 添加轮播
|
||||
handleAdd() {
|
||||
this.data.options.list.push({ img: "", url: "" });
|
||||
this.$forceUpdate();
|
||||
},
|
||||
// 添加图片组
|
||||
handleAddGroup() {
|
||||
this.data.options.listRight.push([
|
||||
{ img: "", url: "" },
|
||||
{ img: "", url: "" },
|
||||
{ img: "", url: "" },
|
||||
]);
|
||||
},
|
||||
// 删除图片组
|
||||
handleTabRemove(index) {
|
||||
this.data.options.listRight.splice(index, 1);
|
||||
},
|
||||
// 打开图片链接
|
||||
handleSelectLink(item) {
|
||||
this.$refs.liliDialog.open("link");
|
||||
this.selected = item;
|
||||
},
|
||||
callbackSelected(item) {
|
||||
// 选择图片回调
|
||||
this.picModelFlag = false;
|
||||
this.selected.img = item.url;
|
||||
},
|
||||
// 删除图片
|
||||
handleDel(index) {
|
||||
this.data.options.list.splice(index, 1);
|
||||
},
|
||||
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>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "./setup-box.scss";
|
||||
.model-carousel2 {
|
||||
width: 1200px;
|
||||
height: 470px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-item li {
|
||||
float: left;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
margin-left: 30px;
|
||||
}
|
||||
.nav-item a {
|
||||
text-decoration: none;
|
||||
color: #555555;
|
||||
}
|
||||
.nav-item a:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
/*大的导航信息，包含导航，幻灯片等*/
|
||||
.nav-body {
|
||||
width: 1200px;
|
||||
height: 470px;
|
||||
margin: 0px auto;
|
||||
}
|
||||
.nav-side {
|
||||
height: 100%;
|
||||
width: 200px;
|
||||
padding: 0px;
|
||||
color: #fff;
|
||||
float: left;
|
||||
background-color: #6e6568;
|
||||
line-height: 470px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*导航内容*/
|
||||
.nav-content,
|
||||
.nav-content1 {
|
||||
width: 590px;
|
||||
height: 470px;
|
||||
overflow: hidden;
|
||||
float: left;
|
||||
position: relative;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.nav-content1 {
|
||||
width: 190px;
|
||||
}
|
||||
.nav-right {
|
||||
float: left;
|
||||
width: 190px;
|
||||
margin-left: 10px;
|
||||
.person-msg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin: 20px auto;
|
||||
|
||||
button {
|
||||
height: 25px !important;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.ivu-btn-default {
|
||||
color: $theme_color;
|
||||
border-color: $theme_color;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-bottom: 10px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.shop-msg {
|
||||
div {
|
||||
width: 100%;
|
||||
margin: 10px 27px;
|
||||
span {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
margin-left: 5px;
|
||||
}
|
||||
span:nth-child(1) {
|
||||
color: $theme_color;
|
||||
margin-left: 0;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-weight: normal;
|
||||
}
|
||||
span:nth-child(3):hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
cursor: pointer;
|
||||
margin: 5px 0;
|
||||
color: #999395;
|
||||
width: 150px;
|
||||
font-size: 12px;
|
||||
&:hover {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
198
manager/src/views/page-decoration/modelList/firstPageAdvert.vue
Normal file
198
manager/src/views/page-decoration/modelList/firstPageAdvert.vue
Normal file
@@ -0,0 +1,198 @@
|
||||
<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>
|
||||
<span class="line top-line"></span>
|
||||
<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>
|
||||
</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>
|
||||
<script>
|
||||
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
components: { ossManage },
|
||||
data() {
|
||||
return {
|
||||
options: this.data.options, // 当前类型数据
|
||||
showModal: false, // modal显隐
|
||||
selected: {}, // 已选数据
|
||||
picModelFlag: false, // 图片选择器
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 打开装修modal
|
||||
handleSelectModel(item, type) {
|
||||
this.selected = item;
|
||||
this.showModal = true;
|
||||
},
|
||||
handleSelectLink(item, index) {
|
||||
// 调起选择链接弹窗
|
||||
this.$refs.liliDialog.open("link");
|
||||
},
|
||||
// 选择链接回调
|
||||
selectedLink(val) {
|
||||
this.selected.url = this.$options.filters.formatLinkType(val);
|
||||
this.selected.type =
|
||||
val.___type === "other" && val.url === "" ? "link" : "other";
|
||||
},
|
||||
handleSelectImg() {
|
||||
// 选择图片
|
||||
this.$refs.ossManage.selectImage = true;
|
||||
this.picModelFlag = true;
|
||||
},
|
||||
// 选择图片回调
|
||||
callbackSelected(val) {
|
||||
this.picModelFlag = false;
|
||||
this.selected.img = val.url;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./setup-box.scss";
|
||||
.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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
.modal-top-advert {
|
||||
align-items: start;
|
||||
padding: 0 30px;
|
||||
.exhibition {
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
446
manager/src/views/page-decoration/modelList/newGoodsSort.vue
Normal file
446
manager/src/views/page-decoration/modelList/newGoodsSort.vue
Normal file
@@ -0,0 +1,446 @@
|
||||
<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="setup-box">
|
||||
<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>
|
||||
<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="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>
|
||||
<script>
|
||||
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
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;
|
||||
}
|
||||
},
|
||||
handleSelectLink() {
|
||||
// 调起选择链接弹窗
|
||||
this.$refs.liliDialog.open("link");
|
||||
},
|
||||
handleSelectGoods(item) {
|
||||
// 调起选择商品
|
||||
console.warn(item);
|
||||
if (item) this.selected = item;
|
||||
this.$refs.liliDialog.open("goods", "single");
|
||||
setTimeout(() => {
|
||||
this.$refs.liliDialog.goodsData = [this.selected];
|
||||
}, 500);
|
||||
},
|
||||
// 选择链接回调
|
||||
selectedLink(val) {
|
||||
this.selected.url = this.$options.filters.formatLinkType(val);
|
||||
this.selected.type =
|
||||
val.___type === "other" && val.url === "" ? "link" : "other";
|
||||
},
|
||||
// 选择商品回调
|
||||
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}`;
|
||||
},
|
||||
handleSelectImg() {
|
||||
// 选择图片
|
||||
this.$refs.ossManage.selectImage = true;
|
||||
this.picModelFlag = true;
|
||||
},
|
||||
// 选择图片回显
|
||||
callbackSelected(val) {
|
||||
this.picModelFlag = false;
|
||||
this.selected.img = val.url;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./setup-box.scss";
|
||||
.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;
|
||||
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;
|
||||
span:nth-child(1) {
|
||||
font-size: 20px;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.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 {
|
||||
align-items: start;
|
||||
padding: 0 30px;
|
||||
}
|
||||
</style>
|
||||
226
manager/src/views/page-decoration/modelList/notEnough.vue
Normal file
226
manager/src/views/page-decoration/modelList/notEnough.vue
Normal file
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<div class="not-enough">
|
||||
<ul class="nav-bar setup-content">
|
||||
<li v-for="(item, index) in conData.options.navList" :class="currentIndex===index?'curr':''" @click="changeCurr(index)" :key="index">
|
||||
<p>{{item.title}}</p>
|
||||
<p>{{item.desc}}</p>
|
||||
</li>
|
||||
<div class="setup-box" style="width:100px;left:1100px;">
|
||||
<div>
|
||||
<Button size="small" @click.stop="handleSelectModel">编辑</Button>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
<div class="content" v-if="showContent">
|
||||
<div v-for="(item, index) in conData.options.list[currentIndex]" :key="index" class="setup-content">
|
||||
<img :src="item.img" width="210" height="210" :alt="item.name">
|
||||
<p>{{item.name}}</p>
|
||||
<p>
|
||||
<span>{{item.price | unitPrice('￥')}}</span>
|
||||
<!-- <span>{{item.price | unitPrice('￥')}}</span> -->
|
||||
</p>
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button size="small" @click.stop="handleSelectGoods(item)">编辑</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
v-model="showModal"
|
||||
title="装修"
|
||||
draggable
|
||||
width="800"
|
||||
:z-index="100"
|
||||
:mask-closable="false"
|
||||
>
|
||||
<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="250">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(item, index) in conData.options.navList" :key="index">
|
||||
<td><Input v-model="item.title" /></td>
|
||||
<td><Input v-model="item.desc" /></td>
|
||||
<td v-if="index!=0">
|
||||
<Button type="error" size="small" @click="handleDelNav(index)">删除</Button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Modal>
|
||||
<!-- 选择商品。链接 -->
|
||||
<liliDialog
|
||||
ref="liliDialog"
|
||||
@selectedGoodsData="selectedGoodsData"
|
||||
></liliDialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
data:{
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentIndex:0, // 当前商品index
|
||||
conData:this.data, // 当前数据
|
||||
selected:{}, // 已选数据
|
||||
showModal:false, // modal显隐
|
||||
showContent:true, // 选择后刷新数据用
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
data:function(val){
|
||||
this.conData = val
|
||||
},
|
||||
conData:function(val){
|
||||
this.$emit('content',val)
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// tab点击切换
|
||||
changeCurr(index){
|
||||
this.currentIndex = index;
|
||||
},
|
||||
// 编辑
|
||||
handleSelectModel (item,type) {
|
||||
this.selected = item;
|
||||
this.showModal = true
|
||||
},
|
||||
handleSelectGoods(item) { // 调起选择商品弹窗
|
||||
if(item) this.selected = item;
|
||||
this.$refs.liliDialog.open('goods', 'single')
|
||||
setTimeout(() => {
|
||||
this.$refs.liliDialog.goodsData = [this.selected]
|
||||
}, 500);
|
||||
},
|
||||
// 选择商品回调
|
||||
selectedGoodsData(val){
|
||||
console.log(val)
|
||||
let goods = val[0]
|
||||
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}`
|
||||
},
|
||||
handleDelNav(index){ // 删除导航
|
||||
this.conData.options.navList.splice(index,1)
|
||||
this.conData.options.list.splice(index,1)
|
||||
},
|
||||
handleAddNav(){ // 添加导航
|
||||
this.conData.options.navList.push(
|
||||
{title:'',desc:''}
|
||||
)
|
||||
this.conData.options.list.push(
|
||||
[{ img:'', name:'', price:0, url:'' },
|
||||
{ img:'', name:'', price:0, url:'' },
|
||||
{ img:'', name:'', price:0, url:'' },
|
||||
{ img:'', name:'', price:0, url:'' },
|
||||
{ img:'', name:'', price:0, url:'' },
|
||||
{ img:'', name:'', price:0, url:'' },
|
||||
{ img:'', name:'', price:0, url:'' },
|
||||
{ img:'', name:'', price:0, url:'' },
|
||||
{ img:'', name:'', price:0, url:'' },
|
||||
{ img:'', name:'', price:0, url:'' },
|
||||
],
|
||||
)
|
||||
this.showContent = false
|
||||
this.$nextTick(()=>{
|
||||
this.showContent = true;
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './setup-box.scss';
|
||||
.nav-bar{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
background-color: rgb(218, 217, 217);
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
li{
|
||||
padding: 0 30px;
|
||||
text-align: center;
|
||||
p:nth-child(1){
|
||||
font-size: 16px;
|
||||
border-radius: 50px;
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
p:nth-child(2){
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
p{
|
||||
color: $theme_color;
|
||||
}
|
||||
cursor: pointer;
|
||||
}
|
||||
border-right: 1px solid #eee;
|
||||
|
||||
}
|
||||
li:last-of-type{
|
||||
border: none;
|
||||
}
|
||||
|
||||
.curr{
|
||||
p:nth-child(1){
|
||||
background-color: $theme_color;
|
||||
|
||||
color: #fff;
|
||||
}
|
||||
p:nth-child(2){
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
>div{
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #eee;
|
||||
margin-bottom: 10px;
|
||||
p:nth-of-type(1){
|
||||
overflow: hidden;
|
||||
width: 210px;
|
||||
white-space: nowrap;
|
||||
text-overflow:ellipsis;
|
||||
margin: 10px 0 5px 0;
|
||||
}
|
||||
p:nth-of-type(2){
|
||||
color: $theme_color;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
span:nth-child(2){
|
||||
text-decoration: line-through;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
430
manager/src/views/page-decoration/modelList/recommend.vue
Normal file
430
manager/src/views/page-decoration/modelList/recommend.vue
Normal file
@@ -0,0 +1,430 @@
|
||||
<template>
|
||||
<div class="recommend">
|
||||
<div class="recommend-left">
|
||||
<div
|
||||
class="head-recommend setup-content"
|
||||
:style="{ background: msgLeft.bgColor }"
|
||||
>
|
||||
<span>{{ msgLeft.title }}</span>
|
||||
<span>{{ msgLeft.secondTitle }}></span>
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button size="small" @click.stop="handleSelectModel(msgLeft, true)"
|
||||
>编辑</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-left">
|
||||
<div class="setup-content">
|
||||
<img :src="msgLeft.list[0].img" width="160" height="160" alt="" />
|
||||
<div class="margin-left">{{ msgLeft.list[0].name }}</div>
|
||||
<div class="margin-left">{{ msgLeft.list[0].describe }}</div>
|
||||
<Button
|
||||
size="small"
|
||||
:style="{ background: msgLeft.bgColor }"
|
||||
class="fz_12 view-btn"
|
||||
>点击查看</Button
|
||||
>
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button
|
||||
size="small"
|
||||
@click.stop="handleSelectModel(msgLeft.list[0])"
|
||||
>编辑</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<template v-for="(item, index) in msgLeft.list">
|
||||
<div v-if="index != 0" :key="index" class="setup-content">
|
||||
<img :src="item.img" width="80" height="80" alt="" />
|
||||
<div>
|
||||
<div>{{ item.name }}</div>
|
||||
<div>{{ item.describe }}</div>
|
||||
</div>
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button size="small" @click.stop="handleSelectModel(item)"
|
||||
>编辑</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recommend-right">
|
||||
<div
|
||||
class="head-recommend setup-content"
|
||||
:style="{ background: msgRight.bgColor }"
|
||||
>
|
||||
<span>{{ msgRight.title }}</span>
|
||||
<span>{{ msgRight.secondTitle }}></span>
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button size="small" @click.stop="handleSelectModel(msgRight, true)"
|
||||
>编辑</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content-right">
|
||||
<div
|
||||
v-for="(item, index) in msgRight.list"
|
||||
:key="index"
|
||||
class="setup-content"
|
||||
>
|
||||
<div
|
||||
class="right-item"
|
||||
:style="{ border: index === 2 || index === 3 ? 'none' : '' }"
|
||||
>
|
||||
<div>
|
||||
<span :style="{ background: msgRight.bgColor }">{{
|
||||
item.name
|
||||
}}</span>
|
||||
<span>{{ item.describe }}</span>
|
||||
</div>
|
||||
<div class="right-img">
|
||||
<img :src="item.img" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="setup-box">
|
||||
<div>
|
||||
<Button size="small" @click.stop="handleSelectModel(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('80*80') >= 0"
|
||||
:src="selected.img"
|
||||
alt
|
||||
/>
|
||||
<img
|
||||
class="show-image"
|
||||
width="100"
|
||||
height="100"
|
||||
v-if="selected.size && selected.size.indexOf('100*100') >= 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"
|
||||
class="ml_10"
|
||||
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><Input v-model="selected.bgColor" />
|
||||
<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>
|
||||
<script>
|
||||
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: {},
|
||||
},
|
||||
},
|
||||
components: {
|
||||
ossManage,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
msgLeft: this.data.options.contentLeft, // 左侧数据
|
||||
msgRight: this.data.options.contentRight, // 右侧数据
|
||||
showModal: false, // modal显隐
|
||||
showModal1: false, // modal显隐
|
||||
selected: {}, // 已选数据
|
||||
picModelFlag: false, // 图片选择
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 编辑
|
||||
handleSelectModel(item, type) {
|
||||
this.selected = item;
|
||||
if (type) {
|
||||
this.showModal1 = true;
|
||||
} else {
|
||||
this.showModal = true;
|
||||
}
|
||||
},
|
||||
handleSelectLink(item, index) {
|
||||
// 调起选择链接弹窗
|
||||
this.$refs.liliDialog.open("link");
|
||||
},
|
||||
handleSelectGoods(item) {
|
||||
// 调起选择商品
|
||||
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) {
|
||||
console.log(val);
|
||||
let goods = val[0];
|
||||
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() {
|
||||
// 选择图片
|
||||
this.$refs.ossManage.selectImage = true;
|
||||
this.picModelFlag = true;
|
||||
},
|
||||
// 选择图片回调
|
||||
callbackSelected(val) {
|
||||
this.picModelFlag = false;
|
||||
this.selected.img = val.url;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./setup-box.scss";
|
||||
.recommend {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.recommend-left {
|
||||
width: 595px;
|
||||
.content-left {
|
||||
display: flex;
|
||||
padding-top: 10px;
|
||||
font-size: 12px;
|
||||
> div:nth-child(1) {
|
||||
width: 189px;
|
||||
border-right: 1px solid #eee;
|
||||
height: 360px;
|
||||
img {
|
||||
margin: 40px 0 0 15px;
|
||||
}
|
||||
.margin-left {
|
||||
margin-left: 15px;
|
||||
width: 145px;
|
||||
}
|
||||
div:nth-of-type(1) {
|
||||
font-weight: bold;
|
||||
border-top: 1px solid #eee;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
div:nth-of-type(2) {
|
||||
color: #999;
|
||||
}
|
||||
.view-btn {
|
||||
margin-left: 15px;
|
||||
margin-top: 10px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
width: 405px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
> div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
img {
|
||||
margin: 0 10px;
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
// margin: 0 10px;
|
||||
:nth-child(2) {
|
||||
color: #449dae;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recommend-right {
|
||||
width: 595px;
|
||||
height: 360px;
|
||||
.head-recommend {
|
||||
background: #a25684;
|
||||
}
|
||||
.content-right {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
> div {
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
height: 180px;
|
||||
padding-top: 10px;
|
||||
.right-item {
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
height: 150px;
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
> div:nth-child(1) {
|
||||
width: 130px;
|
||||
margin-top: 30px;
|
||||
span:nth-child(1) {
|
||||
color: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 0 5px;
|
||||
background-color: #a25684;
|
||||
display: block;
|
||||
width: 120px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 0 10px 10px 0;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.right-img {
|
||||
width: 100;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
img {
|
||||
max-height: 100px;
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
> div:nth-child(n + 1) {
|
||||
border-right: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.head-recommend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 50px;
|
||||
padding: 0 10px;
|
||||
background: #449dae;
|
||||
color: #fff;
|
||||
span:nth-child(1) {
|
||||
font-size: 20px;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-top-advert {
|
||||
align-items: start;
|
||||
padding: 0 30px;
|
||||
}
|
||||
</style>
|
||||
291
manager/src/views/page-decoration/modelList/seckill.vue
Normal file
291
manager/src/views/page-decoration/modelList/seckill.vue
Normal file
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div class="seckill">
|
||||
<div class="desc">秒杀商品需要在促销活动中添加商品，有商品时才会在首页展示</div>
|
||||
<div class="aside">
|
||||
<div class="title">{{ actName }}</div>
|
||||
<div class="hour">
|
||||
<span>{{ currHour }}:00</span>点场 倒计时
|
||||
</div>
|
||||
<div class="count-down" v-if="actStatus === 1">
|
||||
<span>{{ hours }}</span
|
||||
><span>{{ minutes }}</span
|
||||
><span>{{ seconds }}</span>
|
||||
</div>
|
||||
<div class="act-status" v-else>
|
||||
{{ actStatus == 0 ? "未开始" : "已结束" }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<swiper ref="mySwiper" :options="swiperOptions">
|
||||
<swiper-slide
|
||||
v-for="(item, index) in options.list[0].goodsList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="content">
|
||||
<img :src="item.img" width="140" height="140" :alt="item.name" />
|
||||
<div class="ellipsis">{{ item.name }}</div>
|
||||
<div>
|
||||
<span>{{ item.price | unitPrice("￥") }}</span>
|
||||
<span>{{ item.originalPrice | unitPrice("￥") }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
|
||||
import "swiper/swiper-bundle.css";
|
||||
export default {
|
||||
components: {
|
||||
Swiper,
|
||||
SwiperSlide,
|
||||
},
|
||||
directives: {
|
||||
swiper: directive,
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: this.data.options, // 当前数据
|
||||
actStatus: 0, // 0 未开始 1 进行中 2 已结束
|
||||
actName: "限时秒杀",
|
||||
currHour: "00", // 当前秒杀场
|
||||
diffSeconds: 0, // 倒地时
|
||||
hours: "00", // 小时
|
||||
minutes: "00", // 分钟
|
||||
seconds: "00", // 秒
|
||||
interval: undefined, // 定时器
|
||||
swiperOptions: {
|
||||
// 轮播图参数
|
||||
slidesPerView: 5,
|
||||
autoplay: true,
|
||||
loop: true,
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
diffSeconds(val) {
|
||||
const hours = Math.floor(val / 3600);
|
||||
// 当前秒数 / 60，向下取整
|
||||
// 获取到所有分钟数 3600 / 60 = 60分钟
|
||||
// 对60取模，超过小时数的分钟数
|
||||
const minutes = Math.floor(val / 60) % 60;
|
||||
// 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
|
||||
const seconds = val % 60;
|
||||
this.hours = hours < 10 ? "0" + hours : hours;
|
||||
this.minutes = minutes < 10 ? "0" + minutes : minutes;
|
||||
this.seconds = seconds < 10 ? "0" + seconds : seconds;
|
||||
|
||||
if (val === 0) {
|
||||
clearInterval(this.interval);
|
||||
this.hours = 0;
|
||||
this.minutes = 0;
|
||||
this.seconds = 0;
|
||||
this.countDown(this.options.list);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.countDown(this.options.list);
|
||||
},
|
||||
beforeDestroy() {
|
||||
clearInterval(this.interval);
|
||||
},
|
||||
methods: {
|
||||
// 倒计时
|
||||
countDown(list) {
|
||||
/**
|
||||
* 默认倒计时两小时
|
||||
* 如果没有开始，则显示未开始
|
||||
* 进行中显示倒计时
|
||||
* 今天的秒杀结束则显示已结束
|
||||
*/
|
||||
let nowHour = new Date().getHours();
|
||||
if (nowHour < Number(list[0].time)) {
|
||||
// 活动未开始
|
||||
this.currHour = list[0].time;
|
||||
this.actStatus = 0;
|
||||
} else if (nowHour >= Number(list[list.length - 1].time + 2)) {
|
||||
// 活动已结束
|
||||
this.actStatus = 2;
|
||||
this.currHour = list[list.length - 1].time;
|
||||
} else {
|
||||
// 活动进行中
|
||||
this.actStatus = 1;
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
if (nowHour == Number(list[i].time)) {
|
||||
this.currHour = list[i].time;
|
||||
}
|
||||
if (
|
||||
nowHour > Number(list[i].time) &&
|
||||
nowHour < Number(list[i].time + 2)
|
||||
) {
|
||||
this.currHour = list[i].time;
|
||||
}
|
||||
}
|
||||
// 当前0点时间戳
|
||||
let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
|
||||
// 活动倒计时
|
||||
this.diffSeconds = Math.floor(
|
||||
(zeroTime +
|
||||
3600 * 1000 * (this.currHour + 2) -
|
||||
new Date().getTime()) /
|
||||
1000
|
||||
);
|
||||
const that = this;
|
||||
this.interval = setInterval(() => {
|
||||
this.diffSeconds--;
|
||||
}, 1000);
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.seckill {
|
||||
width: 100%;
|
||||
height: 260px;
|
||||
display: flex;
|
||||
position: relative;
|
||||
.desc{
|
||||
position: absolute;
|
||||
color: $theme_color;
|
||||
left: 200px;
|
||||
top: 5px;
|
||||
}
|
||||
.aside {
|
||||
overflow: hidden;
|
||||
width: 190px;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
background-image: url("../../../assets/seckillBg.png");
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
margin-top: 31px;
|
||||
}
|
||||
|
||||
.hour {
|
||||
margin-top: 90px;
|
||||
text-align: center;
|
||||
span {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.count-down {
|
||||
margin: 10px 0 0 30px;
|
||||
> span {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
background-color: #2f3430;
|
||||
margin-right: 20px;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
&::after {
|
||||
content: ":";
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
font-weight: bolder;
|
||||
font-size: 18px;
|
||||
width: 20px;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
> span:last-child::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.act-status {
|
||||
margin: 10px 0 0 65px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
width: 1000px;
|
||||
// background: #efefef;
|
||||
.swiper-slide {
|
||||
height: 260px;
|
||||
.content {
|
||||
width: 200px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 200px;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(180deg, white, #eeeeee, white);
|
||||
}
|
||||
img {
|
||||
margin-top: 30px;
|
||||
}
|
||||
> div {
|
||||
width: 160px;
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
}
|
||||
> div:nth-of-type(1):hover {
|
||||
color: $theme_color;
|
||||
cursor: pointer;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
border: 1px solid $theme_color;
|
||||
line-height: 24px;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
|
||||
span:nth-child(1) {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
width: 92px;
|
||||
background-color: $theme_color;
|
||||
position: relative;
|
||||
&::before {
|
||||
content: " ";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent white transparent transparent;
|
||||
border-style: solid;
|
||||
border-width: 24px 8px 0 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 84px;
|
||||
}
|
||||
}
|
||||
|
||||
span:nth-child(2) {
|
||||
color: #999;
|
||||
width: 66px;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
62
manager/src/views/page-decoration/modelList/setup-box.scss
Normal file
62
manager/src/views/page-decoration/modelList/setup-box.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
.setup-content{
|
||||
position: relative;
|
||||
&:hover{
|
||||
.setup-box{
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setup-box{
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
z-index: 99;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.ivu-btn{
|
||||
float: right;
|
||||
margin-right: 5px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-tab-bar{
|
||||
margin-left: 20px;
|
||||
table{
|
||||
margin-top: 10px;
|
||||
display:inline-block;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
max-height: 400px !important;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
thead{
|
||||
background-color: #eee;
|
||||
th{
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
td{
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
tbody>tr:hover{
|
||||
background-color: aliceblue;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-top-advert{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
>*{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ivu-input-wrapper{
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
20
manager/src/views/page-decoration/readme.md
Normal file
20
manager/src/views/page-decoration/readme.md
Normal file
@@ -0,0 +1,20 @@
|
||||
### 楼层装修页面
|
||||
|
||||
#### floorList.vue 楼层列表
|
||||
|
||||
#### renovation.vue 楼层装修主页面
|
||||
|
||||
#### singleConfig.vue 右侧配置项
|
||||
|
||||
#### modelForm.vue 中间展示所选模块
|
||||
|
||||
#### modelFormItem.vue 单个模块样式
|
||||
|
||||
#### modelConfig.js 模块数据
|
||||
|
||||
#### modelList文件夹为添加的模块
|
||||
|
||||
### wap文件夹为移动端楼层装修
|
||||
|
||||
|
||||
### draggable中文文档 (http://www.itxst.com/vue-draggable/tutorial.html)
|
||||
175
manager/src/views/page-decoration/renovation.vue
Normal file
175
manager/src/views/page-decoration/renovation.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div class="renovation">
|
||||
<!-- 左侧模块列表 -->
|
||||
<div class="model-list">
|
||||
<div class="classification-title">基础模块</div>
|
||||
<draggable tag="ul" :list="modelData" v-bind="{group:{ name:'model', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}" >
|
||||
<li v-for="(model, index) in modelData" :key="index" class="model-item">
|
||||
<Icon :type="model.icon" />
|
||||
<span>{{model.name}}</span>
|
||||
</li>
|
||||
</draggable>
|
||||
</div>
|
||||
<!-- 中间展示模块 -->
|
||||
<div class="show-content">
|
||||
<model-form ref="modelForm" :data="modelForm"></model-form>
|
||||
</div>
|
||||
<!-- 操作按钮 -->
|
||||
<div class="btn-bar">
|
||||
<Button type="primary" :loading="submitLoading" @click="saveTemplate">保存模板</Button>
|
||||
<Button class="ml_10" @click="resetTemplate">还原模板</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { modelData } from "./modelConfig";
|
||||
import Draggable from "vuedraggable";
|
||||
import ModelForm from "./modelForm.vue";
|
||||
import * as API_floor from "@/api/other.js";
|
||||
export default {
|
||||
components: {
|
||||
Draggable,
|
||||
ModelForm,
|
||||
},
|
||||
mounted() {
|
||||
this.getTemplateItem(this.$route.query.id);
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
modelData, // 可选模块数据
|
||||
modelForm: { list: [] }, // 模板数据
|
||||
submitLoading: false, // 提交加载状态
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
saveTemplate() {
|
||||
// 保存模板
|
||||
this.submitTemplate(this.$route.query.pageShow ? 'OPEN' : 'CLOSE')
|
||||
},
|
||||
// 提交模板
|
||||
submitTemplate(pageShow) {
|
||||
this.submitLoading = true
|
||||
const modelForm = JSON.parse(JSON.stringify(this.modelForm))
|
||||
modelForm.list.unshift(this.$refs.modelForm.navList);
|
||||
modelForm.list.unshift(this.$refs.modelForm.topAdvert);
|
||||
const data = {
|
||||
id: this.$route.query.id,
|
||||
pageData: JSON.stringify(modelForm),
|
||||
pageShow
|
||||
};
|
||||
API_floor.updateHome(this.$route.query.id, data).then((res) => {
|
||||
this.submitLoading = false
|
||||
if (res.success) {
|
||||
this.$Message.success("保存模板成功");
|
||||
}
|
||||
});
|
||||
},
|
||||
resetTemplate() {
|
||||
// 还原模板
|
||||
this.getTemplateItem(this.$route.query.id);
|
||||
},
|
||||
getTemplateItem(id) {
|
||||
// 获取模板数据
|
||||
API_floor.getHomeData(id).then((res) => {
|
||||
if (res.success) {
|
||||
let pageData = res.result.pageData;
|
||||
if (pageData) {
|
||||
pageData = JSON.parse(pageData);
|
||||
if (pageData.list[0].type === "topAdvert") {
|
||||
// topAdvert 为顶部广告 navList为导航栏
|
||||
this.$refs.modelForm.topAdvert = pageData.list[0];
|
||||
this.$refs.modelForm.navList = pageData.list[1];
|
||||
pageData.list.splice(0, 2);
|
||||
this.modelForm = pageData;
|
||||
} else {
|
||||
this.modelForm = { list: [] };
|
||||
}
|
||||
} else {
|
||||
this.modelForm = { list: [] };
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
modelForm: {
|
||||
deep: true,
|
||||
handler: function (val) {
|
||||
console.log(val);
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.renovation {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
.model-list {
|
||||
width: 120px;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
background: #fff;
|
||||
margin-top: 60px;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
box-shadow: 1px 1px 10px #999;
|
||||
.classification-title {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
.model-item {
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
background: #eee;
|
||||
margin-top: 10px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
&:hover {
|
||||
border: 1px dashed #409eff;
|
||||
color: #409eff;
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
.ghost::after {
|
||||
border: none;
|
||||
height: 0;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
.show-content {
|
||||
margin-left: 150px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
.ghost {
|
||||
background: #fff;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
&::after {
|
||||
content: "松开鼠标添加模块";
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
border: 1px dashed #409eff;
|
||||
color: #409eff;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
}
|
||||
}
|
||||
.btn-bar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
height: 50px;
|
||||
padding: 10px;
|
||||
box-shadow: 1px 1px 10px #999;
|
||||
z-index: 99;
|
||||
top: 100px;
|
||||
}
|
||||
</style>
|
||||
164
manager/src/views/page-decoration/wap/advertising.vue
Normal file
164
manager/src/views/page-decoration/wap/advertising.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div class="model-view">
|
||||
<div class="model-view-content">
|
||||
<div class="content">
|
||||
<div class="wap-title">首页</div>
|
||||
<div class="draggable">
|
||||
<!-- 全屏 -->
|
||||
<div class="full-shadow" v-if="type == 'full'">
|
||||
<img :src="advertising[0].img" alt="" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model-config">
|
||||
<div class="decorate">
|
||||
<div class="decorate-title">全屏广告</div>
|
||||
<div class="decorate-list">
|
||||
<div
|
||||
class="decorate-item"
|
||||
v-for="(item, index) in advertising"
|
||||
:key="index"
|
||||
>
|
||||
<div class="decorate-item-title">
|
||||
<div>设置</div>
|
||||
</div>
|
||||
<div class="decorate-item-box">
|
||||
<!-- 选择照片 -->
|
||||
<div class="decorate-view">
|
||||
<div class="decorate-view-title">选择图片</div>
|
||||
<div>
|
||||
<img class="show-image" :src="item.img" alt />
|
||||
<input
|
||||
type="file"
|
||||
class="hidden-input"
|
||||
@change="changeFile(item, index)"
|
||||
ref="files"
|
||||
:id="'files' + index"
|
||||
/>
|
||||
<div class="tips">
|
||||
建议尺寸
|
||||
<span>{{ item.size }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selectBtn">
|
||||
<Button
|
||||
size="small"
|
||||
@click="handleClickFile(item, index)"
|
||||
ghost
|
||||
type="primary"
|
||||
>选择照片</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选择连接 -->
|
||||
<div class="decorate-view">
|
||||
<div class="decorate-view-title">选择图片</div>
|
||||
<div>
|
||||
<Button
|
||||
ghost
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="clickLink(item)"
|
||||
>选择链接</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <Button type="primary" @click="addDecorate()" ghost>添加</Button> -->
|
||||
<liliDialog ref="liliDialog" :types="linkType"></liliDialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
type: "full", // 是否全屏
|
||||
|
||||
//全屏广告
|
||||
advertising: [
|
||||
{
|
||||
img:
|
||||
"https://st-gdx.dancf.com/gaodingx/0/uxms/design/20200903-182035-5e87.png?x-oss-process=image/resize,w_932/interlace,1,image/format,webp",
|
||||
size: "750*1624",
|
||||
},
|
||||
],
|
||||
|
||||
linkType: "", // 选择类型
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 点击链接
|
||||
clickLink(item) {
|
||||
this.$refs.liliDialog.open('link')
|
||||
},
|
||||
//点击图片解析成base64
|
||||
changeFile(item, index) {
|
||||
const file = document.getElementById("files" + index).files[0];
|
||||
if (file == void 0) return false;
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
this.$nextTick((res) => {
|
||||
reader.onload = (e) => {
|
||||
item.img = e.target.result;
|
||||
};
|
||||
});
|
||||
},
|
||||
// 点击选择照片
|
||||
handleClickFile(item, index) {
|
||||
document.getElementById("files" + index).click();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "./style.scss";
|
||||
@import "./decorate.scss";
|
||||
.decorate-radio {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.window-shadow,
|
||||
.full-shadow {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
left: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.window-shadow {
|
||||
> img {
|
||||
width: 306px;
|
||||
height: 418px;
|
||||
}
|
||||
}
|
||||
.full-shadow {
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.draggable {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn-item {
|
||||
> img {
|
||||
margin: 4px 0;
|
||||
border-radius: 50%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
159
manager/src/views/page-decoration/wap/alertAdvertising.vue
Normal file
159
manager/src/views/page-decoration/wap/alertAdvertising.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="model-view">
|
||||
<div class="model-view-content">
|
||||
<div class="content">
|
||||
<div class="wap-title">首页</div>
|
||||
<div class="draggable">
|
||||
<!-- 弹窗广告 -->
|
||||
<div class="window-shadow">
|
||||
<img :src="advertising[0].img" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="model-config">
|
||||
<div class="decorate">
|
||||
<div class="decorate-title">弹窗广告</div>
|
||||
|
||||
<div class="decorate-list">
|
||||
<div
|
||||
class="decorate-item"
|
||||
v-for="(item, index) in advertising"
|
||||
:key="index"
|
||||
>
|
||||
<div class="decorate-item-title">
|
||||
<div>设置</div>
|
||||
</div>
|
||||
<div class="decorate-item-box">
|
||||
<!-- 选择照片 -->
|
||||
<div class="decorate-view">
|
||||
<div class="decorate-view-title">选择图片</div>
|
||||
<div>
|
||||
<img class="show-image" :src="item.img" alt />
|
||||
<input
|
||||
type="file"
|
||||
class="hidden-input"
|
||||
@change="changeFile(item, index)"
|
||||
ref="files"
|
||||
:id="'files' + index"
|
||||
/>
|
||||
<div class="tips">
|
||||
建议尺寸
|
||||
<span>{{ item.size }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selectBtn">
|
||||
<Button
|
||||
size="small"
|
||||
@click="handleClickFile(item, index)"
|
||||
ghost
|
||||
type="primary"
|
||||
>选择照片</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选择连接 -->
|
||||
<div class="decorate-view">
|
||||
<div class="decorate-view-title">选择图片</div>
|
||||
<div>
|
||||
<Button
|
||||
ghost
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="clickLink(item)"
|
||||
>选择链接</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<liliDialog ref="liliDialog" :types="linkType"></liliDialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
type: "full", // 展示方式
|
||||
//全屏广告
|
||||
advertising: [
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/9136ecddcddf6607184fab689207e7e3.png",
|
||||
size: "612*836",
|
||||
},
|
||||
],
|
||||
linkType: "", // 选择类型
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 点击链接
|
||||
clickLink(item) {
|
||||
this.$refs.liliDialog.open('link')
|
||||
},
|
||||
//点击图片解析成base64
|
||||
changeFile(item, index) {
|
||||
const file = document.getElementById("files" + index).files[0];
|
||||
if (file == void 0) return false;
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
this.$nextTick((res) => {
|
||||
reader.onload = (e) => {
|
||||
item.img = e.target.result;
|
||||
};
|
||||
});
|
||||
},
|
||||
// 点击选择照片
|
||||
handleClickFile(item, index) {
|
||||
document.getElementById("files" + index).click();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "./style.scss";
|
||||
@import "./decorate.scss";
|
||||
.decorate-radio {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.window-shadow,
|
||||
.full-shadow {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
left: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.window-shadow {
|
||||
> img {
|
||||
width: 306px;
|
||||
height: 418px;
|
||||
}
|
||||
}
|
||||
.full-shadow {
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.draggable {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn-item {
|
||||
> img {
|
||||
margin: 4px 0;
|
||||
border-radius: 50%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
658
manager/src/views/page-decoration/wap/config.js
Normal file
658
manager/src/views/page-decoration/wap/config.js
Normal file
@@ -0,0 +1,658 @@
|
||||
import * as API_Other from "@/api/other";
|
||||
|
||||
// 获取楼层装修信息
|
||||
export function initData(id) {
|
||||
API_Other.getHomeData(id).then(res => {
|
||||
debugger
|
||||
homeData = res;
|
||||
console.log(res)
|
||||
});
|
||||
}
|
||||
|
||||
export let homeData = {};
|
||||
|
||||
/**
|
||||
* drawer:true 广告右侧打开抽屉中显示
|
||||
* drawerPromotions:true 广告右侧打开抽屉中显示
|
||||
* ad_drawer:true 活动魔方右侧显示
|
||||
* notAdd: true 没有添加按钮
|
||||
* notLink: true 没有链接功能
|
||||
* notImg: true 没有选择图片功能
|
||||
* close:true 右侧关闭按钮
|
||||
*/
|
||||
export const modelData = [
|
||||
{
|
||||
type: "carousel",
|
||||
name: "图片轮播",
|
||||
img: "md-image",
|
||||
onlyImg: true,
|
||||
notTitle: false,
|
||||
close: true,
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img: "https://i.loli.net/2020/12/05/fKH4CwImpbuD5Xj.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "750*350",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2020/12/05/12kleCgrSLfKoQs.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "750*350",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/ZlzcCdnpejtN9gL.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "750*350",
|
||||
model: "link"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "leftOneRightTwo",
|
||||
name: "左一右二",
|
||||
notAdd: true,
|
||||
drawer: true,
|
||||
onlyImg: true,
|
||||
view: "tpl_ad_list",
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*335",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/kdB3AE9ay4c1SnN.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*177",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/FmDr9ksiXeEqYLU.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*177",
|
||||
model: "link"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "title",
|
||||
name: "标题栏",
|
||||
img: "md-image",
|
||||
// notTitle:true,
|
||||
notAdd: true,
|
||||
notImg: true,
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
title: "标题",
|
||||
color: "#fff",
|
||||
title1: '领取',
|
||||
color1: "#fff",
|
||||
bk_color: "#FF0000",
|
||||
textAlign: "center",
|
||||
link: "",
|
||||
url: '',
|
||||
model: "link"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "leftTwoRightOne",
|
||||
name: "左二右一",
|
||||
notAdd: true,
|
||||
drawer: true,
|
||||
onlyImg: true,
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/kdB3AE9ay4c1SnN.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*177",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/FmDr9ksiXeEqYLU.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*177",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*335",
|
||||
model: "link"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "flexThree",
|
||||
name: "三列单行",
|
||||
drawer: true,
|
||||
notAdd: true,
|
||||
onlyImg: true,
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "226*226 (1:1)",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "226*226 (1:1)",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "226*226 (1:1)",
|
||||
model: "link"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "flexOne",
|
||||
name: "一张大图",
|
||||
drawer: true,
|
||||
notAdd: true,
|
||||
onlyImg: true,
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img: "https://i.loli.net/2020/12/05/8wSNWbnqujDh6HL.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "750*280",
|
||||
model: "link"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "flexTwo",
|
||||
name: "两张横图",
|
||||
drawer: true,
|
||||
notAdd: true,
|
||||
onlyImg: true,
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*220",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*220",
|
||||
model: "link"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "topOneBottomTwo",
|
||||
name: "上一下二",
|
||||
drawer: true,
|
||||
notAdd: true,
|
||||
onlyImg: true,
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "710*170",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*170",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*170",
|
||||
model: "link"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "topTwoBottomOne",
|
||||
name: "上二下一",
|
||||
drawer: true,
|
||||
notAdd: true,
|
||||
onlyImg: true,
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*170",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*170",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "710*170",
|
||||
model: "link"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "flexFive",
|
||||
name: "五列单行",
|
||||
drawer: true,
|
||||
notAdd: true,
|
||||
onlyImg: true,
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img: "https://picsum.photos/id/127/200/200",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "75*75（1:1）",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "75*75（1:1）",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "75*75（1:1）",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "75*75（1:1）",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "75*75（1:1）",
|
||||
model: "link"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "flexFour",
|
||||
name: "四列单行",
|
||||
drawer: true,
|
||||
notAdd: true,
|
||||
onlyImg: true,
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "88*88（1:1）",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "88*88（1:1）",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "88*88（1:1）",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "88*88（1:1）",
|
||||
model: "link"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "textPicture",
|
||||
name: "文字图片",
|
||||
drawer: true,
|
||||
notAdd: true,
|
||||
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
title: "文字",
|
||||
size: "88*88（1:1）",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
title: "文字",
|
||||
size: "88*88（1:1）",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
title: "文字",
|
||||
size: "88*88（1:1）",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
|
||||
url: "",
|
||||
link: "",
|
||||
title: "文字",
|
||||
size: "88*88（1:1）",
|
||||
model: "link"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
type: "tpl_ad_list",
|
||||
name: "广告魔方",
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
bg_img: "",
|
||||
name: "",
|
||||
url: ""
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "menu",
|
||||
name: "宫格导航",
|
||||
img: "md-image",
|
||||
close: true,
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img: "https://i.loli.net/2020/12/05/SoGAv7gYybuWzED.png",
|
||||
url: "",
|
||||
link: "",
|
||||
title: "标题",
|
||||
size: "88*88 (1:1)",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2020/12/05/JXR5K3sbIeENjqH.png",
|
||||
url: "",
|
||||
link: "",
|
||||
title: "标题",
|
||||
size: "88*88 (1:1)",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2020/12/05/KlZfnCFIdEV231Y.png",
|
||||
url: "",
|
||||
link: "",
|
||||
title: "标题",
|
||||
size: "88*88 (1:1)",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2020/12/05/GfmMyN2wrUVIlci.png",
|
||||
url: "",
|
||||
link: "",
|
||||
title: "标题",
|
||||
size: "88*88 (1:1)",
|
||||
model: "link"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2020/12/05/eznDa3iNby5FkYL.png",
|
||||
url: "",
|
||||
link: "",
|
||||
title: "标题",
|
||||
size: "88*88 (1:1)",
|
||||
model: "link"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "search",
|
||||
name: "搜索",
|
||||
img: "md-image",
|
||||
notAdd: true,
|
||||
notLink: true,
|
||||
notImg: true,
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
title: "搜索"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "goods",
|
||||
name: "商品分类",
|
||||
img: "md-image",
|
||||
notAdd: true,
|
||||
notLink: true,
|
||||
notImg: true,
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
/**
|
||||
* 2021/12/9
|
||||
* 新增索引（‘index’）判断商品归属分类
|
||||
* 之前代码没有配置index也不会收到印象
|
||||
* 新建的楼层将采用索引判断分类
|
||||
*/
|
||||
titleWay: [
|
||||
{
|
||||
title: "精选",
|
||||
desc: "电子推荐",
|
||||
___index: 0,
|
||||
},
|
||||
{
|
||||
title: "实惠",
|
||||
desc: "便宜好货",
|
||||
___index: 1,
|
||||
},
|
||||
{
|
||||
title: "进口",
|
||||
desc: "国际自营",
|
||||
___index: 2,
|
||||
},
|
||||
{
|
||||
title: "推荐",
|
||||
desc: "喂奶推荐",
|
||||
___index: 3,
|
||||
}
|
||||
],
|
||||
listWay: [
|
||||
{
|
||||
img: "https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
|
||||
price: "120",
|
||||
title:
|
||||
" 微软 (Microsoft) Xbox 无线控制器/手柄 湛蓝色 | 3.5mm耳机接口蓝牙连接 Xbox主机电脑平板通用",
|
||||
type: "精选",
|
||||
___index: 0
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2020/12/05/c9mptI5Pg8qJ6ny.png",
|
||||
title:
|
||||
"宏碁(acer) DP高清线1.2版 2K*4KDisplayPort公对公接线笔记本电脑显卡连接显示器视频线1.5米",
|
||||
price: "190",
|
||||
type: "精选",
|
||||
___index: 0
|
||||
},
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "notice",
|
||||
name: "公告",
|
||||
img: "md-image",
|
||||
notAdd: false,
|
||||
notLink: true,
|
||||
notImg: true,
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
title: [{ context: "这是一条公告" }],
|
||||
color: "#666",
|
||||
bk_color: "#FFF",
|
||||
direction: "horizontal",
|
||||
img: 'http://files.sxcfx.cn/upload/20220318/71e5d27aca82aeedf647052e1e4ceaaa.png'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "promotions",
|
||||
name: "促销活动",
|
||||
img: "md-image",
|
||||
notAdd: true,
|
||||
notLink: true,
|
||||
notImg: true,
|
||||
close: true,
|
||||
options: {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
{
|
||||
notAdd: true,
|
||||
notImg: true,
|
||||
notLink: true,
|
||||
drawerPromotions: true,
|
||||
type: "promotionDetail",
|
||||
promotionsType: "PINTUAN",
|
||||
name: "拼团活动",
|
||||
subBkColor: "#e1212b",
|
||||
subName: "惊喜折扣",
|
||||
subColor: "#fff",
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
{
|
||||
notAdd: true,
|
||||
notImg: true,
|
||||
notLink: true,
|
||||
drawerPromotions: true,
|
||||
type: "promotionDetail",
|
||||
promotionsType: "LIVE",
|
||||
name: "直播活动",
|
||||
subBkColor: "#e1212b",
|
||||
subName: "优惠好价",
|
||||
subColor: "#fff",
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
{
|
||||
notAdd: true,
|
||||
notImg: true,
|
||||
notLink: true,
|
||||
drawerPromotions: true,
|
||||
type: "promotionDetail",
|
||||
promotionsType: "SECKILL",
|
||||
name: "秒杀活动",
|
||||
subBkColor: "#e1212b",
|
||||
subName: "x点场",
|
||||
subColor: "#fff",
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: []
|
||||
}
|
||||
},
|
||||
{
|
||||
notAdd: true,
|
||||
notImg: true,
|
||||
notLink: true,
|
||||
drawerPromotions: true,
|
||||
type: "promotionDetail",
|
||||
promotionsType: "KANJIA",
|
||||
name: "砍价活动",
|
||||
subBkColor: "#e1212b",
|
||||
subName: "超值好物",
|
||||
subColor: "#fff",
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: []
|
||||
}
|
||||
}
|
||||
];
|
||||
163
manager/src/views/page-decoration/wap/decorate.scss
Normal file
163
manager/src/views/page-decoration/wap/decorate.scss
Normal file
@@ -0,0 +1,163 @@
|
||||
/deep/ .ivu-modal-mask,
|
||||
.ivu-modal-wrap {
|
||||
z-index: 800;
|
||||
}
|
||||
|
||||
.decorate-view-link {
|
||||
font-size: 12px;
|
||||
margin: 0 4px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.decorate-view-style {
|
||||
border: 1px solid #ededed;
|
||||
background: #f7f7fa;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
padding: 30px 0 0 0;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
>.select-style {
|
||||
background: #ededed;
|
||||
padding: 15px 0;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.decorate-border {
|
||||
border: 1px solid #ededed;
|
||||
margin: 10px 0;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.drawer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
>.drawer-item {
|
||||
cursor: pointer;
|
||||
border: 1px solid #ededed;
|
||||
background: #f9f0ff;
|
||||
width: 170px;
|
||||
margin-right: 14px;
|
||||
color: #9254de;
|
||||
margin-bottom: 14px;
|
||||
border-radius: 0.8em;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.decorate {
|
||||
padding: 0 20px;
|
||||
height: calc(100vh - 120px);
|
||||
overflow-y: auto;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
|
||||
.decorate-title {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.decorate-list {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.decorate-view {
|
||||
display: flex;
|
||||
margin: 12px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.decorate-item-box {
|
||||
background: #fff;
|
||||
padding: 10px;
|
||||
border: 1px solid #ededed;
|
||||
}
|
||||
|
||||
.decorate-item-title {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
line-height: 40px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.decorate-view-title {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.decorate-item {
|
||||
background: #ededed;
|
||||
border-top-left-radius: 0.4em;
|
||||
margin-bottom: 20px;
|
||||
border-top-right-radius: 0.4em;
|
||||
}
|
||||
|
||||
.show-image {
|
||||
max-width: 50px;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
|
||||
>span {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
|
||||
.selectBtn {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.bing-goods-list {
|
||||
display: flex;
|
||||
|
||||
>.bing-goods-item {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
||||
>img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.align-text {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card-box {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.decorate-notice {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.card {}
|
||||
|
||||
.card:hover {
|
||||
background: #ededed;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: #ededed;
|
||||
}
|
||||
576
manager/src/views/page-decoration/wap/decorate.vue
Normal file
576
manager/src/views/page-decoration/wap/decorate.vue
Normal file
@@ -0,0 +1,576 @@
|
||||
<template>
|
||||
<div class="decorate">
|
||||
<div class="decorate-title">
|
||||
{{ res.name }}
|
||||
<Button
|
||||
style="margin-left: 20px"
|
||||
size="small"
|
||||
ghost
|
||||
v-if="
|
||||
res.type == 'tpl_ad_list' ||
|
||||
res.type == 'tpl_activity_list' ||
|
||||
res.drawer
|
||||
"
|
||||
type="primary"
|
||||
@click="selectStyle()"
|
||||
>选择风格</Button
|
||||
>
|
||||
<Button
|
||||
style="margin-left: 20px"
|
||||
size="small"
|
||||
ghost
|
||||
v-if="res.type == 'promotions' || res.drawerPromotions"
|
||||
type="primary"
|
||||
@click="selectPromotions()"
|
||||
>选择促销活动</Button
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- 右侧显示抽屉 -->
|
||||
<Drawer title="选择风格" :closable="false" width="400" v-model="styleFlag">
|
||||
<div class="drawer">
|
||||
<div
|
||||
class="drawer-item"
|
||||
@click="clickDrawer(item, index)"
|
||||
v-for="(item, index) in modelData"
|
||||
:key="index"
|
||||
v-if="item.drawer"
|
||||
>
|
||||
<img src alt />
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Drawer>
|
||||
|
||||
<!-- 右侧显示抽屉 -->
|
||||
<Drawer
|
||||
title="选择促销活动(最多只能展示两个活动)"
|
||||
:closable="false"
|
||||
width="400"
|
||||
v-model="promotionsFlag"
|
||||
>
|
||||
<div class="drawer">
|
||||
<div
|
||||
class="drawer-item"
|
||||
@click="clickDrawer(item, index)"
|
||||
v-for="(item, index) in modelData"
|
||||
:key="index"
|
||||
v-if="item.drawerPromotions"
|
||||
>
|
||||
<img src alt />
|
||||
<span>{{ item.name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Drawer>
|
||||
|
||||
<!-- 卡片集合 -->
|
||||
<div
|
||||
class="decorate-list"
|
||||
v-if="
|
||||
(res.type != 'tpl_ad_list' &&
|
||||
res.type != 'tpl_activity_list' &&
|
||||
res.type != 'promotions') ||
|
||||
res.drawer ||
|
||||
res.drawerPromotions
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="decorate-item"
|
||||
v-for="(item, index) in res.options.list"
|
||||
:key="index"
|
||||
>
|
||||
<div class="decorate-item-title">
|
||||
<div>卡片</div>
|
||||
<Icon
|
||||
@click="closeDecorate(index)"
|
||||
v-if="res.close || res.type == 'promotionDetail'"
|
||||
size="20"
|
||||
color="#e1251b"
|
||||
type="md-close-circle"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="decorate-item-box">
|
||||
<div
|
||||
class="decorate-border"
|
||||
v-if="item.titleWay"
|
||||
v-for="(title_item, title_index) in item.titleWay"
|
||||
:key="title_index"
|
||||
>
|
||||
<div class="decorate-view">
|
||||
<div class="decorate-view-title">标题{{ title_index + 1 }}</div>
|
||||
<div>
|
||||
<Input v-model="title_item.title" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="decorate-view">
|
||||
<div class="decorate-view-title">描述</div>
|
||||
<div>
|
||||
<Input v-model="title_item.desc" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="decorate-view">
|
||||
<div class="decorate-view-title">绑定商品</div>
|
||||
<div
|
||||
class="decorate-view-link"
|
||||
v-if="res.options.list[0].listWay.length != 0"
|
||||
>
|
||||
<!-- 绑定商品选择器回调已选择的商品 -->
|
||||
<div
|
||||
v-if="
|
||||
title_item.___index == bindGoods.___index ||
|
||||
title_item.title == bindGoods.type
|
||||
"
|
||||
v-for="(bindGoods, bindGoodsIndex) in res.options.list[0]
|
||||
.listWay"
|
||||
:key="bindGoodsIndex"
|
||||
>
|
||||
{{ bindGoods.title }},
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
@click="bindGoodsId(title_item)"
|
||||
size="small"
|
||||
ghost
|
||||
type="primary"
|
||||
>选择商品</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 选择照片 -->
|
||||
<div class="decorate-view" v-if="!res.notImg">
|
||||
<div class="decorate-view-title">选择照片</div>
|
||||
<div>
|
||||
<img class="show-image" :src="item.img" alt />
|
||||
|
||||
<div class="tips">
|
||||
建议尺寸
|
||||
<span>{{ item.size }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="selectBtn">
|
||||
<Button
|
||||
size="small"
|
||||
@click="handleClickFile(item, index)"
|
||||
ghost
|
||||
type="primary"
|
||||
>选择照片</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="decorate-view"
|
||||
v-if="item.title != void 0 && !res.notTitle && res.type == 'title'"
|
||||
>
|
||||
<div class="decorate-view-title">文字对齐方式</div>
|
||||
<div class="card-box">
|
||||
<div
|
||||
class="card"
|
||||
:class="{ active: textAlign == 'left' }"
|
||||
@click="changeTextAlign('left')"
|
||||
>
|
||||
<img
|
||||
:src="require('@/assets/align-text-left.png')"
|
||||
class="align-text"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="card"
|
||||
:class="{ active: textAlign == 'center' }"
|
||||
@click="changeTextAlign('center')"
|
||||
>
|
||||
<img
|
||||
:src="require('@/assets/align-text-center.png')"
|
||||
class="align-text"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<!-- <div
|
||||
class="card"
|
||||
:class="{ active: textAlign == 'right' }"
|
||||
@click="changeTextAlign('right')"
|
||||
>
|
||||
<img
|
||||
:src="require('@/assets/align-text-right.png')"
|
||||
class="align-text"
|
||||
alt=""
|
||||
/>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="decorate-view"
|
||||
v-if="
|
||||
item.title != void 0 &&
|
||||
!res.notTitle &&
|
||||
(res.type == 'title' ||
|
||||
res.type == 'notice' ||
|
||||
res.type == 'promotionDetail')
|
||||
"
|
||||
>
|
||||
<div class="decorate-view-title">背景颜色</div>
|
||||
<div class="decorate-view">
|
||||
<ColorPicker v-model="item.bk_color" />
|
||||
<Input v-model="item.bk_color" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="decorate-view"
|
||||
v-if="item.title != void 0 && !res.notTitle && res.type == 'notice'"
|
||||
>
|
||||
<div class="decorate-view-title">方向</div>
|
||||
<div class="decorate-view">
|
||||
<Select
|
||||
style="width: 200px"
|
||||
@on-change="changeDirection($event, item)"
|
||||
v-model="item.direction"
|
||||
>
|
||||
{{ item.direction }}
|
||||
<Option label="横向" value="horizontal"></Option>
|
||||
<Option label="纵向" value="vertical"></Option>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 填写标题 -->
|
||||
<div
|
||||
class="decorate-view"
|
||||
v-if="item.title != void 0 && !res.notTitle && res.type != 'notice'"
|
||||
>
|
||||
<div class="decorate-view-title">菜单标题</div>
|
||||
<div>
|
||||
<Input v-model="item.title" style="width: 200px" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="decorate-view"
|
||||
v-if="
|
||||
item.title != void 0 &&
|
||||
!res.notTitle &&
|
||||
(res.type == 'title' || res.type == 'notice')
|
||||
"
|
||||
>
|
||||
<div class="decorate-view-title">标题颜色</div>
|
||||
<div class="decorate-view">
|
||||
<ColorPicker v-model="item.color" />
|
||||
<Input v-model="item.color" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 填写小标题 -->
|
||||
<div
|
||||
class="decorate-view"
|
||||
v-if="item.title1 != void 0 && !res.notTitle"
|
||||
>
|
||||
<div class="decorate-view-title">小标题</div>
|
||||
<div>
|
||||
<Input v-model="item.title1" style="width: 200px" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="decorate-view"
|
||||
v-if="item.title1 != void 0 && !res.notTitle"
|
||||
>
|
||||
<div class="decorate-view-title">小标题颜色</div>
|
||||
<div class="decorate-view">
|
||||
<ColorPicker v-model="item.color1" />
|
||||
<Input v-model="item.color1" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="decorate-view"
|
||||
v-if="res.type === 'notice' && !res.notTitle"
|
||||
>
|
||||
<div class="decorate-view-title">公告内容</div>
|
||||
<div>
|
||||
<div
|
||||
v-for="(t, tindex) in item.title"
|
||||
:key="tindex"
|
||||
class="decorate-notice"
|
||||
>
|
||||
<Input v-model="t.context" style="width: 200px" />
|
||||
<Icon
|
||||
@click="removeNotice(tindex)"
|
||||
size="16"
|
||||
type="md-close-circle"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 填写链接 -->
|
||||
|
||||
<div class="decorate-view" v-if="!res.notLink">
|
||||
<div class="decorate-view-title">选择模式</div>
|
||||
<div
|
||||
v-if="item.url && item.url.length != 0"
|
||||
class="decorate-view-link"
|
||||
>
|
||||
已选链接：
|
||||
|
||||
<span>
|
||||
{{
|
||||
ways.find((e) => {
|
||||
return item.url.___type == e.name;
|
||||
}).title
|
||||
}}
|
||||
-
|
||||
<!-- 当选择完链接之后的商品名称 -->
|
||||
<span v-if="item.url.___type == 'goods'">
|
||||
{{ item.url.goodsName }}</span
|
||||
>
|
||||
<!-- 当选择完链接之后的分类回调 -->
|
||||
<span v-if="item.url.___type == 'category'">
|
||||
{{ item.url.name }}</span
|
||||
>
|
||||
<!-- 当选择完链接之后的店铺回调 -->
|
||||
<span v-if="item.url.___type == 'shops'">
|
||||
{{ item.url.memberName }}</span
|
||||
>
|
||||
<!-- 当选择完链接之后的其他回调 -->
|
||||
<span v-if="item.url.___type == 'other'">
|
||||
{{ item.url.title }}</span
|
||||
>
|
||||
|
||||
<!-- 当选择完活动之后的其他回调 -->
|
||||
<span v-if="item.url.___type == 'marketing'">
|
||||
<span v-if="item.url.___promotion == 'SECKILL'"> 秒杀 </span>
|
||||
<span v-if="item.url.___promotion == 'FULL_DISCOUNT'">
|
||||
满减
|
||||
</span>
|
||||
<span v-if="item.url.___promotion == 'PINTUAN'"> 拼团 </span>
|
||||
{{ item.url.title || item.url.goodsName }}
|
||||
</span>
|
||||
<!-- 当选择完活动之后的其他回调 -->
|
||||
<span v-if="item.url.___type == 'pages'">
|
||||
{{ item.url.title }}</span
|
||||
>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<RadioGroup
|
||||
@on-change="clickLink(item, index, res)"
|
||||
v-model="item.model"
|
||||
type="button"
|
||||
>
|
||||
<Radio value="link" label="link">链接</Radio>
|
||||
<Radio v-if="res.onlyImg" value="hotzone" label="hotzone"
|
||||
>热区</Radio
|
||||
>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 链接地址-->
|
||||
<div
|
||||
class="decorate-view"
|
||||
v-if="item.url && item.url.url && item.url.___type == 'other'"
|
||||
>
|
||||
<div class="decorate-view-title">外部链接</div>
|
||||
<div>
|
||||
<Input v-model="item.url.url" style="width: 200px" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="item.url && item.url.url && item.url.___type == 'other'">
|
||||
(如非同域名下，则在小程序与公众号中无效)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
v-if="
|
||||
res.type != 'tpl_ad_list' &&
|
||||
res.type != 'tpl_activity_list' &&
|
||||
!res.notAdd &&
|
||||
res.direction != 'horizontal'
|
||||
"
|
||||
type="primary"
|
||||
@click="addDecorate(res.type, res)"
|
||||
ghost
|
||||
>添加</Button
|
||||
>
|
||||
|
||||
<liliDialog
|
||||
ref="liliDialog"
|
||||
@selectedLink="selectedLink"
|
||||
@selectedGoodsData="selectedGoodsData"
|
||||
></liliDialog>
|
||||
|
||||
<Modal width="1200px" v-model="picModelFlag">
|
||||
<ossManage @callback="callbackSelected" ref="ossManage" />
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ossManage from "@/views/sys/oss-manage/ossManage";
|
||||
import { modelData } from "./config";
|
||||
import ways from "@/components/lili-dialog/wap.js"; // 选择链接的类型
|
||||
export default {
|
||||
components: {
|
||||
ossManage,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ways, // 选择链接的类型
|
||||
picModelFlag: false, //图片选择器
|
||||
linkType: "goods", // dialog弹窗口类型
|
||||
styleFlag: false, //广告魔方开关
|
||||
textAlign: this.res.options.list[0]
|
||||
? this.res.options.list[0].textAlign
|
||||
: "center", //文字对齐方式
|
||||
promotionsFlag: false, //广告魔方开关
|
||||
selectedLinkIndex: "", //选择链接的索引
|
||||
modelData, // 装修数据
|
||||
selectedGoods: "", // 已选商品
|
||||
selectedLinks: "", // 已选链接
|
||||
modelList: "", // 装修列表
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
res: {
|
||||
handler: (val) => {},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
props: ["res"],
|
||||
methods: {
|
||||
// 改变横纵切换title内容
|
||||
changeDirection(val, data) {
|
||||
if (val == "horizontal") {
|
||||
const props = { ...data };
|
||||
data.title = [];
|
||||
data.title.push(props.title[0]);
|
||||
}
|
||||
},
|
||||
// 选择风格
|
||||
selectStyle() {
|
||||
this.styleFlag = !this.styleFlag;
|
||||
},
|
||||
selectPromotions() {
|
||||
this.promotionsFlag = !this.promotionsFlag;
|
||||
},
|
||||
// 回调选择的链接
|
||||
selectedLink(val) {
|
||||
this.selectedLinks.url = val;
|
||||
},
|
||||
// 回调的商品信息
|
||||
selectedGoodsData(val) {
|
||||
if (!val) return false;
|
||||
let data = val.map((item) => {
|
||||
delete item.selected;
|
||||
delete item.intro;
|
||||
delete item.mobileIntro;
|
||||
return {
|
||||
img: item.thumbnail,
|
||||
title: item.goodsName,
|
||||
type: this.selectedGoods.title,
|
||||
___index: this.selectedGoods.___index,
|
||||
...item,
|
||||
};
|
||||
});
|
||||
this.res.options.list[0].listWay.push(...data);
|
||||
this.linkType = "";
|
||||
},
|
||||
// 绑定商品
|
||||
bindGoodsId(val) {
|
||||
this.selectedGoods = val;
|
||||
this.liliDialogFlag(true);
|
||||
},
|
||||
// 点击抽屉
|
||||
clickDrawer(item, index) {
|
||||
this.$emit("handleDrawer", item);
|
||||
this.styleFlag = false;
|
||||
},
|
||||
// 打开图片选择器
|
||||
liliDialogFlag(flag) {
|
||||
this.$refs.liliDialog.clearGoodsSelected();
|
||||
this.$refs.liliDialog.goodsFlag = flag;
|
||||
this.$refs.liliDialog.flag = true;
|
||||
},
|
||||
|
||||
changeTextAlign(val) {
|
||||
this.res.options.list[0].textAlign = val;
|
||||
this.textAlign = val;
|
||||
},
|
||||
// 点击链接赋值一个唯一值，并将当前选择的模块赋值
|
||||
clickLink(val, index, oval) {
|
||||
if (val.model === "link") {
|
||||
this.selectedLinks = val;
|
||||
this.liliDialogFlag(false);
|
||||
}
|
||||
},
|
||||
//点击图片解析成base64
|
||||
changeFile(item, index) {
|
||||
const file = document.getElementById("files" + index).files[0];
|
||||
if (file == void 0) return false;
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
this.$nextTick((res) => {
|
||||
reader.onload = (e) => {
|
||||
item.img = e.target.result;
|
||||
};
|
||||
});
|
||||
},
|
||||
//添加设置
|
||||
addDecorate(type, data) {
|
||||
if (type === "notice") {
|
||||
if (data.options.list[0].direction == "vertical") {
|
||||
this.res.options.list[0].title.push({
|
||||
content: "",
|
||||
});
|
||||
} else {
|
||||
this.$Message.error("仅纵向支持多添加");
|
||||
}
|
||||
} else {
|
||||
let way = {
|
||||
img: "https://picsum.photos/id/264/200/200",
|
||||
title: "标题",
|
||||
link: "",
|
||||
url: "",
|
||||
size: this.res.options.list[0].size,
|
||||
model: "link",
|
||||
};
|
||||
this.res.options.list.push(way);
|
||||
}
|
||||
},
|
||||
addHotPoint() {
|
||||
let way = {
|
||||
img: "https://picsum.photos/id/264/200/200",
|
||||
text: "标题",
|
||||
link: "",
|
||||
url: "",
|
||||
};
|
||||
this.res.options.list[0].points.push(way);
|
||||
},
|
||||
// 图片选择器回显
|
||||
callbackSelected(val) {
|
||||
this.picModelFlag = false;
|
||||
this.selectedGoods.img = val.url;
|
||||
},
|
||||
// 点击选择图片
|
||||
handleClickFile(item, index) {
|
||||
this.$refs.ossManage.selectImage = true;
|
||||
this.selectedGoods = item;
|
||||
this.picModelFlag = true;
|
||||
},
|
||||
removeNotice(index) {
|
||||
this.$nextTick(() => {
|
||||
this.res.options.list[0].title.splice(index, 1);
|
||||
});
|
||||
},
|
||||
// 关闭
|
||||
closeDecorate(index) {
|
||||
this.$nextTick(() => {
|
||||
this.res.options.list.splice(index, 1);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "./decorate.scss";
|
||||
</style>
|
||||
17
manager/src/views/page-decoration/wap/index.js
Normal file
17
manager/src/views/page-decoration/wap/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import index from './index.vue' //首页
|
||||
|
||||
import advertising from './advertising.vue' //全屏活动
|
||||
import alertAdvertising from './alertAdvertising.vue' //弹窗活动
|
||||
|
||||
|
||||
|
||||
const templates = {
|
||||
index,
|
||||
|
||||
advertising,
|
||||
alertAdvertising
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default templates
|
||||
265
manager/src/views/page-decoration/wap/index.vue
Normal file
265
manager/src/views/page-decoration/wap/index.vue
Normal file
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<!-- 拖拽栏 ，展示栏 -->
|
||||
<div class="model-view">
|
||||
<div class="model-view-menu">
|
||||
<draggable
|
||||
class="model-view-menu-item"
|
||||
:list="modelData"
|
||||
:move="handleMove"
|
||||
v-bind="{
|
||||
group: { name: 'model', pull: 'clone', put: false, animation: 150 },
|
||||
sort: false,
|
||||
ghostClass: 'ghost',
|
||||
}"
|
||||
>
|
||||
<li
|
||||
v-for="(model, index) in modelData"
|
||||
v-if="!model.drawer && !model.drawerPromotions"
|
||||
:key="index"
|
||||
class="model-item"
|
||||
>
|
||||
<img src alt />
|
||||
<span>{{ model.name }}</span>
|
||||
</li>
|
||||
</draggable>
|
||||
</div>
|
||||
|
||||
<div class="model-view-content">
|
||||
<div class="content">
|
||||
<div class="wap-title">首页</div>
|
||||
<draggable
|
||||
class="draggable"
|
||||
group="model"
|
||||
ghostClass="ghost"
|
||||
@add="handleContentlAdd"
|
||||
@end="handleContentlEnd"
|
||||
v-model="contentData.list"
|
||||
>
|
||||
<div
|
||||
class="list"
|
||||
v-for="(element, index) in contentData.list"
|
||||
:key="element.key"
|
||||
>
|
||||
<component
|
||||
class="component"
|
||||
:class="{ active: selected == index }"
|
||||
@click.native="handleComponent(element, index)"
|
||||
:is="templates[element.type]"
|
||||
:res="element.options"
|
||||
></component>
|
||||
<Icon
|
||||
v-if="selected == index"
|
||||
@click="closeComponent(index)"
|
||||
color="#e1251b"
|
||||
size="25"
|
||||
class="close"
|
||||
type="ios-close-circle"
|
||||
/>
|
||||
</div>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 右侧栏 -->
|
||||
<div class="model-config">
|
||||
<decorate
|
||||
@handleDrawer="handleDrawer"
|
||||
v-if="decorateData"
|
||||
:res="decorateData"
|
||||
></decorate>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import templates from "./template/index";
|
||||
import Draggable from "vuedraggable";
|
||||
import { modelData } from "./config";
|
||||
import decorate from "./decorate";
|
||||
import * as API_Other from "@/api/other";
|
||||
import * as API_Promotions from "@/api/promotion";
|
||||
export default {
|
||||
components: {
|
||||
Draggable,
|
||||
decorate,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
templates, // 模板类型
|
||||
modelData, // 装修模型
|
||||
qrcode: "", // 二维码
|
||||
selected: 0, // 已选下标
|
||||
contentData: {
|
||||
// 总数据
|
||||
list: [],
|
||||
},
|
||||
decorateData: "", // 装修数据
|
||||
decoratePromotionsData: "", // 装修数据
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
contentData: {
|
||||
handler(val) {
|
||||
this.$store.state.styleStore = val;
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 初始化数据
|
||||
init() {
|
||||
if (!this.$route.query.id) return false;
|
||||
API_Other.getHomeData(this.$route.query.id).then((res) => {
|
||||
this.contentData = JSON.parse(res.result.pageData);
|
||||
|
||||
this.handleComponent(this.contentData.list[0], 0);
|
||||
});
|
||||
},
|
||||
|
||||
// 中间组件拖动，右侧数据绑定不变
|
||||
handleContentlEnd(evt) {
|
||||
const { newIndex } = evt;
|
||||
this.handleComponent(this.contentData.list[newIndex], newIndex);
|
||||
},
|
||||
|
||||
// 关闭楼层装修
|
||||
closeComponent(index) {
|
||||
this.$nextTick(() => {
|
||||
this.decorateData = "";
|
||||
|
||||
// 如果当前楼层不为一
|
||||
if (this.contentData.list.length > 1) {
|
||||
// 如果当前最底层 给下一层赋值
|
||||
|
||||
if (index - 1 == -1) {
|
||||
this.handleComponent(this.contentData.list[index], index);
|
||||
} else {
|
||||
// 如果不是最底层给上一层赋值
|
||||
this.handleComponent(this.contentData.list[index - 1], index - 1);
|
||||
}
|
||||
this.contentData.list.splice(index, 1);
|
||||
} else {
|
||||
this.contentData.list.splice(index, 1);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 点击楼层装修
|
||||
handleComponent(val, index) {
|
||||
this.selected = index;
|
||||
this.$set(this, "decorateData", val);
|
||||
},
|
||||
// 右侧栏回调
|
||||
handleDrawer(val) {
|
||||
let newIndex = this.selected;
|
||||
if (val.promotionsType) {
|
||||
if (this.contentData.list[newIndex].options.list.length >= 2) {
|
||||
this.$Message.error("最多只能展示两个活动");
|
||||
return;
|
||||
}
|
||||
if (val.promotionsType === "LIVE") {
|
||||
API_Promotions.getLiveList({
|
||||
status: "START",
|
||||
pageSize: 1,
|
||||
}).then((res) => {
|
||||
if (res.success && res.result.size > 0) {
|
||||
API_Promotions.getLiveInfo(res.result.records[0].id).then(
|
||||
(res) => {
|
||||
if (res.success) {
|
||||
this.contentData.list[newIndex].options.list.push({
|
||||
type: val.promotionsType,
|
||||
title: val.name,
|
||||
title1: val.subName,
|
||||
color1: val.subColor,
|
||||
bk_color: val.subBkColor,
|
||||
data: res.result.commodityList
|
||||
? res.result.commodityList.splice(0, 2)
|
||||
: [],
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
API_Promotions.getAllPromotion().then((res) => {
|
||||
let exist = this.contentData.list[newIndex].options.list.find(
|
||||
(i) => i.type === val.promotionsType
|
||||
);
|
||||
|
||||
if (res.success && !exist) {
|
||||
this.contentData.list[newIndex].options.list.push({
|
||||
data: res.result[val.promotionsType]
|
||||
? res.result[val.promotionsType].splice(0, 2)
|
||||
: [],
|
||||
type: val.promotionsType,
|
||||
title1: val.subName,
|
||||
color1: val.subColor,
|
||||
bk_color: val.subBkColor,
|
||||
title: val.name,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
this.$set(this.contentData.list, newIndex, {
|
||||
...val,
|
||||
options: {
|
||||
...this.contentData.list[newIndex].options,
|
||||
},
|
||||
// 绑定键值
|
||||
model: val.type,
|
||||
});
|
||||
} else {
|
||||
this.decorateData = "";
|
||||
|
||||
this.$set(this.contentData.list, newIndex, {
|
||||
...val,
|
||||
options: {
|
||||
...val.options,
|
||||
},
|
||||
|
||||
// 绑定键值
|
||||
model: val.type,
|
||||
});
|
||||
this.contentData.list = JSON.parse(
|
||||
JSON.stringify(this.contentData.list)
|
||||
);
|
||||
this.$set(this, "decorateData", this.contentData.list[newIndex]);
|
||||
}
|
||||
},
|
||||
|
||||
// 封装拖拽参数
|
||||
package(val, newIndex) {
|
||||
this.contentData.list[newIndex] = "";
|
||||
val = JSON.parse(JSON.stringify(val));
|
||||
this.$set(this.contentData.list, newIndex, {
|
||||
...val,
|
||||
options: {
|
||||
...val.options,
|
||||
},
|
||||
|
||||
// 绑定键值
|
||||
model: val.type,
|
||||
});
|
||||
},
|
||||
// 拖动
|
||||
handleContentlAdd(evt) {
|
||||
const { newIndex } = evt;
|
||||
|
||||
this.package(this.contentData.list[newIndex], newIndex);
|
||||
this.handleComponent(this.contentData.list[newIndex], newIndex);
|
||||
},
|
||||
handleMove() {
|
||||
return true;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "./style.scss";
|
||||
</style>
|
||||
39
manager/src/views/page-decoration/wap/main.vue
Normal file
39
manager/src/views/page-decoration/wap/main.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<!-- 顶部栏 -->
|
||||
<navbar @selected="selected" />
|
||||
|
||||
<component :is="layout[name]"></component>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import layout from "./index";
|
||||
import navbar from "./navbar";
|
||||
export default {
|
||||
components: {
|
||||
navbar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
layout, // 装修模块
|
||||
name: "index", // 装修的页面
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
selected(val) { // 顶部栏点击切换
|
||||
this.name = val;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.box {
|
||||
height: calc(100vh - 120px);
|
||||
width: 98%;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
background: #fff;
|
||||
border-radius: 0.4em;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
214
manager/src/views/page-decoration/wap/navbar.vue
Normal file
214
manager/src/views/page-decoration/wap/navbar.vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<!-- 预览保存 -->
|
||||
<div class="model-title">
|
||||
<div>店铺装修</div>
|
||||
<div class="btns">
|
||||
<Button
|
||||
@click="clickBtn(item)"
|
||||
size="small"
|
||||
v-for="(item, index) in way"
|
||||
:key="index"
|
||||
:type="item.selected ? 'primary' : ''"
|
||||
>
|
||||
{{ item.title }}
|
||||
</Button>
|
||||
</div>
|
||||
<div class="model-title-view-btn">
|
||||
<!-- TODO 后期会补全 目前版本暂无 -->
|
||||
<!-- <Poptip placement="bottom" width="100">
|
||||
<Button size="default" @click="creatQrCode">预览模板</Button>
|
||||
<div slot="content" class="default-view-content">
|
||||
<div>临时预览</div>
|
||||
<div ref="qrCodeUrl"></div>
|
||||
</div>
|
||||
</Poptip> -->
|
||||
<Button size="default" type="primary" @click="handleSpinShow">保存模板</Button>
|
||||
|
||||
<Modal
|
||||
title="保存中"
|
||||
v-model="saveDialog"
|
||||
:closable="true"
|
||||
:mask-closable="false"
|
||||
:footer-hide="true"
|
||||
>
|
||||
<div v-if="progress">
|
||||
<div class="model-item">
|
||||
模板名称 <Input style="width: 200px" v-model="submitWay.name" />
|
||||
</div>
|
||||
<div class="model-item">
|
||||
是否立即发布
|
||||
<i-switch v-model="submitWay.pageShow">
|
||||
<span slot="open">开</span>
|
||||
<span slot="close">关</span>
|
||||
</i-switch>
|
||||
</div>
|
||||
|
||||
<Button type="primary" @click="save()">保存</Button>
|
||||
</div>
|
||||
<Progress v-else :percent="num" status="active" />
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as API_Other from "@/api/other.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
progress: true, // 展示进度
|
||||
num: 20, // 提交进度
|
||||
saveDialog: false, // 加载状态
|
||||
way: [
|
||||
// 装修tab栏切换
|
||||
{
|
||||
title: "首页",
|
||||
name: "index",
|
||||
selected: true,
|
||||
},
|
||||
// {
|
||||
// title: "全屏广告",
|
||||
// name: "advertising",
|
||||
// selected: false,
|
||||
// },
|
||||
// {
|
||||
// title: "弹窗广告",
|
||||
// name: "alertAdvertising",
|
||||
// selected: false,
|
||||
// },
|
||||
],
|
||||
|
||||
submitWay: {
|
||||
// 表单信息
|
||||
pageShow: this.$route.query.type || false,
|
||||
name: this.$route.query.name || "模板名称",
|
||||
pageClientType: "H5",
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {},
|
||||
mounted() {},
|
||||
methods: {
|
||||
clickBtn(val) {
|
||||
this.way.forEach((item, index) => {
|
||||
item.selected = false;
|
||||
});
|
||||
val.selected = true;
|
||||
this.$emit("selected", val.name);
|
||||
},
|
||||
|
||||
/**
|
||||
* 加载，并保存模板
|
||||
*/
|
||||
handleSpinShow() {
|
||||
this.saveDialog = true;
|
||||
},
|
||||
|
||||
// 填写是否发布，模板名称之后保存
|
||||
save() {
|
||||
if (this.$store.state.styleStore == void 0) {
|
||||
this.$Message.error("请装修楼层");
|
||||
return false;
|
||||
}
|
||||
|
||||
this.submitWay?.pageShow === true
|
||||
? (this.submitWay.pageShow = "OPEN")
|
||||
: (this.submitWay.pageShow = "CLOSE");
|
||||
|
||||
this.submitWay.pageData = JSON.stringify(this.$store.state.styleStore);
|
||||
this.submitWay.pageType = "INDEX";
|
||||
|
||||
this.$route.query.id ? this.update() : this.submit(this.submitWay);
|
||||
},
|
||||
|
||||
// 更新
|
||||
update() {
|
||||
this.progress = false;
|
||||
API_Other.updateHome(this.$route.query.id, {
|
||||
pageData: JSON.stringify(this.$store.state.styleStore),
|
||||
name: this.submitWay.name,
|
||||
pageShow: this.submitWay.pageShow,
|
||||
pageType: "INDEX",
|
||||
pageClientType: "H5",
|
||||
})
|
||||
.then((res) => {
|
||||
this.num = 50;
|
||||
if (res.success) {
|
||||
this.num = 80;
|
||||
/**制作保存成功动画¸ */
|
||||
setTimeout(() => {
|
||||
this.saveDialog = false;
|
||||
this.$Message.success("修改成功");
|
||||
this.goback();
|
||||
}, 1000);
|
||||
} else {
|
||||
this.saveDialog = false;
|
||||
this.$Message.error("修改失败，请稍后重试");
|
||||
}
|
||||
console.log(res);
|
||||
})
|
||||
.catch((error) => {});
|
||||
},
|
||||
|
||||
// 返回查询数据页面
|
||||
goback() {
|
||||
this.$router.push({
|
||||
path: "/wapList",
|
||||
});
|
||||
},
|
||||
|
||||
// 保存
|
||||
submit(submitWay) {
|
||||
this.progress = false;
|
||||
API_Other.setHomeSetup(submitWay)
|
||||
.then((res) => {
|
||||
this.num = 50;
|
||||
if (res.success) {
|
||||
this.num = 80;
|
||||
/**制作保存成功动画¸ */
|
||||
setTimeout(() => {
|
||||
this.saveDialog = false;
|
||||
this.$Message.success("保存成功");
|
||||
this.goback();
|
||||
}, 1000);
|
||||
} else {
|
||||
this.progress = true;
|
||||
this.saveDialog = false;
|
||||
this.$Message.error("保存失败，请稍后重试");
|
||||
}
|
||||
console.log(res);
|
||||
})
|
||||
.catch((error) => {});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.model-item {
|
||||
width: 100%;
|
||||
padding: 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> * {
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
.model-title {
|
||||
height: 70px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
> .model-title-view-btn {
|
||||
> * {
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
* {
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
98
manager/src/views/page-decoration/wap/style.scss
Normal file
98
manager/src/views/page-decoration/wap/style.scss
Normal file
@@ -0,0 +1,98 @@
|
||||
.model-view {
|
||||
display: flex;
|
||||
.model-view-menu {
|
||||
flex: 1.5;
|
||||
min-width: 250px;
|
||||
> .model-view-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
.model-config {
|
||||
flex: 2.5;
|
||||
}
|
||||
.model-view-content {
|
||||
flex: 6;
|
||||
}
|
||||
.model-item {
|
||||
line-height: 1.75;
|
||||
font-size: 13px;
|
||||
margin: 0 5px 10px 5px;
|
||||
border: 1px solid #ededed;
|
||||
background: #f6f6f9;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.model-view-content {
|
||||
background: #f6f6f9;
|
||||
border-radius: 0.8em;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.wap-title {
|
||||
line-height: 44px;
|
||||
text-align: center;
|
||||
height: 44px;
|
||||
border-bottom: 1px solid #ededed;
|
||||
}
|
||||
.content {
|
||||
margin: 20px 0;
|
||||
padding: 50px 13px;
|
||||
width: 360px;
|
||||
background: url("../../../assets/iPhoneX_model.png") no-repeat;
|
||||
height: 780px;
|
||||
background-size: 360px;
|
||||
overflow: hidden;
|
||||
> .component,
|
||||
.draggable {
|
||||
height: 590px;
|
||||
overflow-y: auto;
|
||||
background: #ebebeb;
|
||||
}
|
||||
> .draggable {
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
position: relative;
|
||||
}
|
||||
.close {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 10px;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.model-btn {
|
||||
> * {
|
||||
margin: 0 4px;
|
||||
}
|
||||
}
|
||||
.qrCode {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.default-view-content {
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
line-height: 2;
|
||||
/deep/ img {
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.model-config {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.active {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid $theme_color;
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
.position-box{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.join-box {
|
||||
display: flex;
|
||||
}
|
||||
.item-price {
|
||||
> span {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #e1212b;
|
||||
}
|
||||
}
|
||||
.join-item {
|
||||
flex: 1;
|
||||
}
|
||||
.item-img {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
.item-img-box {
|
||||
position: relative;
|
||||
}
|
||||
.item-line-through {
|
||||
> span {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.item-position-tips {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
bottom: 0;
|
||||
}
|
||||
.join-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
height: 50px;
|
||||
> div:nth-of-type(1) {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
51
manager/src/views/page-decoration/wap/template/index.js
Normal file
51
manager/src/views/page-decoration/wap/template/index.js
Normal file
@@ -0,0 +1,51 @@
|
||||
import tpl_banner from "./tpl_banner";
|
||||
import tpl_title from "./tpl_title";
|
||||
import tpl_left_one_right_two from "./tpl_left_one_right_two";
|
||||
import tpl_left_two_right_one from "./tpl_left_two_right_one";
|
||||
import tpl_top_one_bottom_two from "./tpl_top_one_bottom_two";
|
||||
import tpl_top_two_bottom_one from "./tpl_top_two_bottom_one";
|
||||
import tpl_flex_one from "./tpl_flex_one";
|
||||
import tpl_flex_two from "./tpl_flex_two";
|
||||
import tpl_flex_three from "./tpl_flex_three";
|
||||
import tpl_flex_five from "./tpl_flex_five";
|
||||
import tpl_flex_four from "./tpl_flex_four";
|
||||
import tpl_text_picture from "./tpl_text_picture";
|
||||
import tpl_menu from "./tpl_menu";
|
||||
import tpl_search from "./tpl_search";
|
||||
import tpl_promotion_detail from "./tpl_promotion_detail";
|
||||
import tpl_integral from "./tpl_integral";
|
||||
import tpl_spike from "./tpl_spike";
|
||||
import tpl_group from "./tpl_group";
|
||||
import tpl_ad_list from "./tpl_view_list";
|
||||
import tpl_activity_list from './tpl_view_list';
|
||||
// import tpl_hot_area from './tpl_hot_area';
|
||||
import tpl_goods from "./tpl_goods";
|
||||
import tpl_notice from "./tpl_notice";
|
||||
import tpl_promotions from "./tpl_promotions";
|
||||
|
||||
export default {
|
||||
notice: tpl_notice,
|
||||
carousel: tpl_banner,
|
||||
title: tpl_title,
|
||||
leftOneRightTwo: tpl_left_one_right_two,
|
||||
leftTwoRightOne: tpl_left_two_right_one,
|
||||
topOneBottomTwo: tpl_top_one_bottom_two,
|
||||
topTwoBottomOne: tpl_top_two_bottom_one,
|
||||
flexThree: tpl_flex_three,
|
||||
flexFive: tpl_flex_five,
|
||||
flexFour: tpl_flex_four,
|
||||
flexTwo: tpl_flex_two,
|
||||
textPicture: tpl_text_picture,
|
||||
menu: tpl_menu,
|
||||
search: tpl_search,
|
||||
promotionDetail: tpl_promotion_detail,
|
||||
flexOne: tpl_flex_one,
|
||||
goods: tpl_goods,
|
||||
integral: tpl_integral,
|
||||
spike: tpl_spike,
|
||||
group: tpl_group,
|
||||
// hotArea: tpl_hot_area,
|
||||
tpl_ad_list,
|
||||
promotions: tpl_promotions,
|
||||
tpl_activity_list,
|
||||
};
|
||||
31
manager/src/views/page-decoration/wap/template/tpl.scss
Normal file
31
manager/src/views/page-decoration/wap/template/tpl.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
.image-mode {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
padding: 1px;
|
||||
}
|
||||
.layout {
|
||||
padding: 8px;
|
||||
margin: 4px 0;
|
||||
background: #fff;
|
||||
}
|
||||
.layout,
|
||||
.view-height-75,
|
||||
.view-height-150 {
|
||||
overflow: hidden;
|
||||
}
|
||||
.view-width-100{
|
||||
width: 100%;
|
||||
}
|
||||
.view-height-75 {
|
||||
height: 75px;
|
||||
}
|
||||
.view-height-150 {
|
||||
height: 150px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.view-height-85 {
|
||||
height: 85px;
|
||||
flex: 1;
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<Carousel class="carousel" v-if="res" autoplay :autoplay-speed="5000">
|
||||
<CarouselItem v-for="(item, index) in res.list" :key="index">
|
||||
<div>
|
||||
<img class="image-mode" :src="item.img" />
|
||||
</div>
|
||||
</CarouselItem>
|
||||
</Carousel>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
title: "导航栏",
|
||||
props: ["res"],
|
||||
watch: {
|
||||
res: {
|
||||
handler(newValue, oldValue) {
|
||||
this.$set(this,'res',newValue);
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.carousel,
|
||||
.image-mode {
|
||||
height: 150px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,30 @@
|
||||
|
||||
<template>
|
||||
<div class="layout">
|
||||
<img class="image-mode" :src="res.list[0].img" alt="">
|
||||
<img class="image-mode" :src="res.list[1].img" alt="">
|
||||
<img class="image-mode" :src="res.list[2].img" alt="">
|
||||
<img class="image-mode" :src="res.list[3].img" alt="">
|
||||
<img class="image-mode" :src="res.list[4].img" alt="">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
title: "五列单行图片模块",
|
||||
props: ["res"],
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.layout {
|
||||
background: #e8e8e8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-size: cover;
|
||||
}
|
||||
img {
|
||||
width: 67px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,33 @@
|
||||
|
||||
<template>
|
||||
<div class="layout">
|
||||
<img class="image-mode" :src="res.list[0].img" alt="">
|
||||
<img class="image-mode" :src="res.list[1].img" alt="">
|
||||
<img class="image-mode" :src="res.list[2].img" alt="">
|
||||
<img class="image-mode" :src="res.list[3].img" alt="">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
title: "四列单行图片模块",
|
||||
props: ["res"],
|
||||
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.layout {
|
||||
// background: #e8e8e8;
|
||||
// height: 84px;
|
||||
display: flex;
|
||||
padding: 0 8px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
img{
|
||||
width: 84px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="flex-one">
|
||||
<img :src="res.list[0].img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['res']
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './tpl.scss';
|
||||
.flex-one{
|
||||
width: 100%;
|
||||
display: block;
|
||||
height: 110px;
|
||||
overflow: hidden;
|
||||
>img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,29 @@
|
||||
|
||||
<template>
|
||||
<div class="layout">
|
||||
<img class="image-mode" :src="res.list[0].img" alt="">
|
||||
<img class="image-mode" :src="res.list[1].img" alt="">
|
||||
<img class="image-mode" :src="res.list[2].img" alt="">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
title: "三列单行图片模块",
|
||||
props: ["res"],
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.layout {
|
||||
background: #e8e8e8;
|
||||
height: 110px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-size: cover;
|
||||
}
|
||||
img{
|
||||
width: 111px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="flex-two">
|
||||
<div class="flex-item">
|
||||
<img :src="res.list[0].img" alt />
|
||||
</div>
|
||||
<div class="flex-item">
|
||||
<img :src="res.list[1].img" alt />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
title: "两张横图",
|
||||
props: ["res"],
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.flex-two {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 110px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.flex-item {
|
||||
width: 50%;
|
||||
> img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
170
manager/src/views/page-decoration/wap/template/tpl_goods.vue
Normal file
170
manager/src/views/page-decoration/wap/template/tpl_goods.vue
Normal file
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="goods-cell-title">
|
||||
<div
|
||||
class="goods-item-title"
|
||||
:class="{ selected: selected.index == index }"
|
||||
@click="handleClickTitle(title, index)"
|
||||
v-for="(title, index) in res.list[0].titleWay"
|
||||
:key="index"
|
||||
>
|
||||
<h4>{{ title.title }}</h4>
|
||||
<div>{{ title.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="goods-list">
|
||||
<div
|
||||
v-if="
|
||||
item.___index != undefined
|
||||
? selected.index == item.___index
|
||||
: selected.val == item.type
|
||||
"
|
||||
class="goods-item"
|
||||
v-for="(item, item_index) in res.list[0].listWay"
|
||||
:key="item_index"
|
||||
>
|
||||
<div class="goods-img">
|
||||
<Icon
|
||||
size="20"
|
||||
color="#e1251b"
|
||||
@click="closeGoods(item, item_index)"
|
||||
class="goods-icon"
|
||||
type="ios-close-circle"
|
||||
/>
|
||||
<img :src="item.img" alt />
|
||||
</div>
|
||||
<div class="goods-desc">
|
||||
<div class="goods-title">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div class="goods-bottom">
|
||||
<div class="goods-price">￥{{ item.price | unitPrice }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
selected: {
|
||||
// 已选数据
|
||||
index: 0,
|
||||
},
|
||||
};
|
||||
},
|
||||
props: ["res"],
|
||||
watch: {
|
||||
res: {
|
||||
handler(val) {
|
||||
// 监听父级的值 如果有值将值赋给selected
|
||||
if (val) {
|
||||
this.selected.val = this.res.list[0].listWay[0].type;
|
||||
}
|
||||
},
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
// 删除商品
|
||||
closeGoods(val, index) {
|
||||
this.res.list[0].listWay.splice(index, 1);
|
||||
},
|
||||
// 切换商品列表
|
||||
handleClickTitle(val, index) {
|
||||
this.selected.index = index;
|
||||
this.selected.val = val.title;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.layout {
|
||||
padding: 8px 0;
|
||||
background: #e8e8e8;
|
||||
}
|
||||
.selected {
|
||||
> h4 {
|
||||
color: #000 !important;
|
||||
}
|
||||
> div {
|
||||
font-weight: bold;
|
||||
color: $theme_color !important;
|
||||
}
|
||||
}
|
||||
.goods-cell-title {
|
||||
padding: 10px;
|
||||
transition: 0.35s;
|
||||
display: flex;
|
||||
// cursor: pointer;
|
||||
> .goods-item-title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
> h4 {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
}
|
||||
> div {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.goods-item {
|
||||
width: 50%;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 0.4em;
|
||||
overflow: hidden;
|
||||
}
|
||||
.goods-img {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 158px;
|
||||
height: 150px;
|
||||
border-top-left-radius: 0.4em;
|
||||
border-top-right-radius: 0.4em;
|
||||
overflow: hidden;
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.goods-desc {
|
||||
border-bottom-left-radius: 0.4em;
|
||||
border-bottom-right-radius: 0.4em;
|
||||
width: 158px;
|
||||
background: #fff;
|
||||
padding: 4px;
|
||||
margin: 0 auto;
|
||||
> .goods-title {
|
||||
font-size: 12px;
|
||||
height: 38px;
|
||||
display: -webkit-box;
|
||||
font-weight: 500;
|
||||
-webkit-box-orient: vertical;
|
||||
|
||||
-webkit-line-clamp: 2;
|
||||
|
||||
overflow: hidden;
|
||||
}
|
||||
> .goods-bottom {
|
||||
display: flex;
|
||||
> .goods-price {
|
||||
line-height: 2;
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-icon {
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
39
manager/src/views/page-decoration/wap/template/tpl_group.vue
Normal file
39
manager/src/views/page-decoration/wap/template/tpl_group.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="join-list">
|
||||
<div class="join-title">
|
||||
<div>{{ res.list[0].title }}</div>
|
||||
|
||||
<div>更多</div>
|
||||
</div>
|
||||
<div class="join-box">
|
||||
<div class="join-item" v-for="item in 4" :key="item">
|
||||
<div class="item-img-box">
|
||||
|
||||
<img
|
||||
class="item-img"
|
||||
src="https://picsum.photos/id/268/200/200"
|
||||
alt
|
||||
/>
|
||||
</div>
|
||||
<div class="item-price">
|
||||
<span>￥120.00</span>
|
||||
</div>
|
||||
<div class="item-line-through">
|
||||
<span>￥190.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ["res"]
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
@import './advertising.scss';
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="hot-area">
|
||||
<!-- <img :src="res.list[0].img" alt="" /> -->
|
||||
<hotzone @change="changeHotzone" :zonesInit="res.zoneInfo" :image="res.list[0].img"></hotzone>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import hotzone from "@/components/hotzone";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
hotzone,
|
||||
},
|
||||
props: ["res"],
|
||||
methods: {
|
||||
changeHotzone(info) {
|
||||
console.log(info);
|
||||
console.log(this.res);
|
||||
this.res.zoneInfo = info;
|
||||
// this.$emit("change", res);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.hot-area {
|
||||
width: 100%;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
> img {
|
||||
width: 300px;
|
||||
height: 500px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="join-list">
|
||||
<div class="join-title">
|
||||
<div>{{ res.list[0].title }}</div>
|
||||
|
||||
<div>更多</div>
|
||||
</div>
|
||||
<div class="join-box">
|
||||
<div class="join-item" v-for="item in 4" :key="item">
|
||||
<div class="item-img-box">
|
||||
<img
|
||||
class="item-img"
|
||||
src="https://picsum.photos/id/268/200/200"
|
||||
alt
|
||||
/>
|
||||
|
||||
</div>
|
||||
<div class="item-price">
|
||||
<span>20积分</span>
|
||||
</div>
|
||||
<div class="item-line-through">
|
||||
<span>30积分</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ["res"]
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.join-box {
|
||||
display: flex;
|
||||
}
|
||||
.item-price {
|
||||
> span {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #e1212b;
|
||||
}
|
||||
}
|
||||
.join-item {
|
||||
flex: 1;
|
||||
}
|
||||
.item-img {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
.item-img-box {
|
||||
position: relative;
|
||||
}
|
||||
.item-line-through {
|
||||
> span {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.item-position-tips {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
bottom: 0;
|
||||
}
|
||||
.join-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
height: 50px;
|
||||
> div:nth-of-type(1) {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,89 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="join-list">
|
||||
<div class="join-title">
|
||||
<div>{{ res.list[0].title }}</div>
|
||||
|
||||
<div>更多</div>
|
||||
</div>
|
||||
<div class="join-box">
|
||||
<div class="join-item" v-for="item in 4" :key="item">
|
||||
<div class="item-img-box">
|
||||
<img
|
||||
class="item-img"
|
||||
src="https://picsum.photos/id/268/200/200"
|
||||
alt
|
||||
/>
|
||||
<div class="item-position-tips">2人团</div>
|
||||
</div>
|
||||
<div class="item-price">
|
||||
<span>￥120.00</span>
|
||||
</div>
|
||||
<div class="item-line-through">
|
||||
<span>￥120.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ["res"]
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.join-box {
|
||||
display: flex;
|
||||
}
|
||||
.item-price {
|
||||
> span {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #e1212b;
|
||||
}
|
||||
}
|
||||
.join-item {
|
||||
flex: 1;
|
||||
}
|
||||
.item-img {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
.item-img-box {
|
||||
position: relative;
|
||||
}
|
||||
.item-line-through {
|
||||
> span {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.item-position-tips {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
bottom: 0;
|
||||
}
|
||||
.join-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
height: 50px;
|
||||
> div:nth-of-type(1) {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,34 @@
|
||||
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="view-height-150">
|
||||
<img class="image-mode" :src="res.list[0].img" />
|
||||
</div>
|
||||
<div class="view-height-150">
|
||||
<div class="view-height-75">
|
||||
<img class="image-mode" :src="res.list[1].img" alt />
|
||||
</div>
|
||||
<div class="view-height-75">
|
||||
<img class="image-mode" :src="res.list[2].img" alt />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
title: "左一右二",
|
||||
props: ["res"]
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,39 @@
|
||||
|
||||
<template>
|
||||
<div class="layout ">
|
||||
<div class="view-height-150">
|
||||
<div class="view-height-75">
|
||||
<img class="image-mode" :src="res.list[0].img" alt />
|
||||
</div>
|
||||
<div class="view-height-75">
|
||||
<img class="image-mode" :src="res.list[1].img" alt />
|
||||
</div>
|
||||
</div>
|
||||
<div class="view-height-150">
|
||||
<img class="image-mode" style="height:150px;" :src="res.list[2].img" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
title: "左二右一",
|
||||
props: ["res"]
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.layout {
|
||||
height: 150px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background-size: cover;
|
||||
}
|
||||
.view-height-75 {
|
||||
.image-mode {
|
||||
height: 75px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
39
manager/src/views/page-decoration/wap/template/tpl_menu.vue
Normal file
39
manager/src/views/page-decoration/wap/template/tpl_menu.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="menu-list">
|
||||
<div class="menu-item" v-for="(item, index) in res.list" :key="index">
|
||||
<div>
|
||||
<img class="menu-img" :src="item.img" alt="" />
|
||||
</div>
|
||||
<div class="menu-title">{{ item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ["res"],
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.menu-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> .menu-item {
|
||||
text-align: center;
|
||||
width: 20%;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
.menu-img {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.menu-title {
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="background" :style="{ backgroundColor: res.list[0].bk_color }">
|
||||
<img :src="res.list[0].img" alt="" style="float:left;width: 20px;height: 20px;margin-top: 10px;margin-left: 10px;margin-right: 10px">
|
||||
<div class="title" :style="{ color: res.list[0].color }">
|
||||
{{ context }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
title: "公告",
|
||||
props: ["res"],
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
context: "",
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.context = this.res.list[0].title[this.index].context;
|
||||
setInterval(() => {
|
||||
this.context = this.res.list[0].title[this.index].context;
|
||||
if (this.index < this.res.list[0].title.length - 1) {
|
||||
this.index++;
|
||||
} else {
|
||||
this.index = 0;
|
||||
}
|
||||
}, 3000);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.background {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 42px;
|
||||
text-align: left;
|
||||
font-size: 10px;
|
||||
background-size: cover;
|
||||
}
|
||||
.layout {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background: #ffffff;
|
||||
}
|
||||
.title {
|
||||
line-height: 42px;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="join-list">
|
||||
<div
|
||||
v-for="(item, index) in res.list"
|
||||
:key="index"
|
||||
class="join-list-item"
|
||||
>
|
||||
<div>
|
||||
<div class="join-title">
|
||||
<div>{{ item.title }}</div>
|
||||
<div
|
||||
class="sub"
|
||||
:style="{
|
||||
backgroundColor: item.bk_color,
|
||||
color: item.color1,
|
||||
borderColor: item.bk_color,
|
||||
}"
|
||||
>
|
||||
{{ item.title1 }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="join-box">
|
||||
<div
|
||||
class="join-item"
|
||||
v-for="(i, _index) in item.data"
|
||||
:key="_index"
|
||||
>
|
||||
<div class="item-img-box">
|
||||
<img
|
||||
class="item-img"
|
||||
:src="i.thumbnail ? i.thumbnail : i.goodsImage"
|
||||
alt
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="ellipsis"
|
||||
:class="{ 'max-width': res.list.length <= 1 }"
|
||||
>
|
||||
{{ i.goodsName ? i.goodsName : i.name }}
|
||||
</div>
|
||||
<div class="item-price">
|
||||
<span>￥{{ i.price ? i.price : i.originalPrice }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ["res"],
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.join-box {
|
||||
display: flex;
|
||||
}
|
||||
.join-list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.join-list-item {
|
||||
flex: 1;
|
||||
}
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 54px; // 大于1个活动
|
||||
font-size: 11px;
|
||||
}
|
||||
.max-width {
|
||||
width: 158px !important;
|
||||
}
|
||||
.item-price {
|
||||
> span {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #e1212b;
|
||||
}
|
||||
}
|
||||
.join-item {
|
||||
flex: 1;
|
||||
}
|
||||
.item-img {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
.item-img-box {
|
||||
position: relative;
|
||||
}
|
||||
.item-line-through {
|
||||
> span {
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
text-decoration: line-through;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.item-position-tips {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
bottom: 0;
|
||||
}
|
||||
.join-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
height: 50px;
|
||||
> div:nth-of-type(1) {
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
> div:nth-of-type(2) {
|
||||
font-size: 10px;
|
||||
color: #fff;
|
||||
border: 2px solid;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
width: 30%;
|
||||
}
|
||||
.sub {
|
||||
background-color: #e1212b;
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="flex-two">
|
||||
请选择促销活动(最多只能展示两个活动)
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
title: "两张横图",
|
||||
props: ["res"],
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.flex-two {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
height: 110px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.flex-item {
|
||||
width: 50%;
|
||||
> img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="search">
|
||||
<Icon type="ios-search" />{{res.list[0].title}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ['res']
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.search{
|
||||
height: 32px;
|
||||
border-radius: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #ededed;
|
||||
}
|
||||
.layout{
|
||||
background: #fff;
|
||||
}
|
||||
</style>
|
||||
39
manager/src/views/page-decoration/wap/template/tpl_spike.vue
Normal file
39
manager/src/views/page-decoration/wap/template/tpl_spike.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="join-list">
|
||||
<div class="join-title">
|
||||
<div>{{ res.list[0].title }}</div>
|
||||
|
||||
<div>更多</div>
|
||||
</div>
|
||||
<div class="join-box">
|
||||
<div class="join-item" v-for="item in 4" :key="item">
|
||||
<div class="item-img-box">
|
||||
|
||||
<img
|
||||
class="item-img"
|
||||
src="https://picsum.photos/id/268/200/200"
|
||||
alt
|
||||
/>
|
||||
</div>
|
||||
<div class="item-price">
|
||||
<span>￥120.00</span>
|
||||
</div>
|
||||
<div class="item-line-through">
|
||||
<span>￥190.00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: ["res"]
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
@import './advertising.scss';
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,91 @@
|
||||
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="view-list">
|
||||
<div class="view-item">
|
||||
<div class="-item-tilte">{{res.list[0].title}}</div>
|
||||
<div class="-item-image">
|
||||
<img :src="res.list[0].img" alt />
|
||||
</div>
|
||||
</div>
|
||||
<div class="view-item">
|
||||
<div class="-item-tilte">{{res.list[1].title}}</div>
|
||||
<div class="-item-image">
|
||||
<img :src="res.list[1].img" alt />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="view-list">
|
||||
<div class="view-item">
|
||||
<div class="-item-tilte">{{res.list[2].title}}</div>
|
||||
<div class="-item-image">
|
||||
<img :src="res.list[2].img" alt />
|
||||
</div>
|
||||
</div>
|
||||
<div class="view-item">
|
||||
<div class="-item-tilte">{{res.list[3].title}}</div>
|
||||
<div class="-item-image">
|
||||
<img :src="res.list[3].img" alt />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
title: "文字图片模板",
|
||||
props: ["res"]
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.layout {
|
||||
display: flex;
|
||||
background: #e8e8e8;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-size: cover;
|
||||
padding: 0;
|
||||
}
|
||||
.-item-image{
|
||||
|
||||
padding: 10px ;
|
||||
>img{
|
||||
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.-item-tilte {
|
||||
background: #ff9f28;
|
||||
height: 30px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.view-list {
|
||||
width: 48%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
background: #fff;
|
||||
border-top-left-radius: 0.8em;
|
||||
border-top-right-radius: 0.8em;
|
||||
border: 1px solid #ededed;
|
||||
|
||||
> .view-item {
|
||||
width: 50%;
|
||||
}
|
||||
> .view-item:nth-of-type(1) {
|
||||
> .-item-tilte {
|
||||
border-top-left-radius: 0.8em;
|
||||
}
|
||||
}
|
||||
> .view-item:nth-of-type(2) {
|
||||
> .-item-tilte {
|
||||
border-top-right-radius: 0.8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
62
manager/src/views/page-decoration/wap/template/tpl_title.vue
Normal file
62
manager/src/views/page-decoration/wap/template/tpl_title.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="layout" :style="{ textAlign: res.list[0].textAlign }">
|
||||
<div class="background" :style="{ backgroundColor: res.list[0].bk_color }">
|
||||
<div class="title" :style="{ color: res.list[0].color }">
|
||||
{{ res.list[0].title }}
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 2px;
|
||||
color: #fff;
|
||||
line-height: 42px;
|
||||
font-size: 10px;
|
||||
"
|
||||
>
|
||||
<a
|
||||
:href="res.list[0].url"
|
||||
:style="{ color: res.list[0].color1 }"
|
||||
style="text-decoration: none"
|
||||
>{{ res.list[0].title1 }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
title: "标题栏",
|
||||
props: ["res"],
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.background {
|
||||
background-color: rgb(255, 87, 62);
|
||||
/*background: url("../../../../assets/title.png") no-repeat;*/
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
|
||||
height: 42px;
|
||||
background-size: cover;
|
||||
}
|
||||
.layout {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
height: 42px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background: #ffffff;
|
||||
}
|
||||
.title {
|
||||
line-height: 42px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-left: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,47 @@
|
||||
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="view-width-100">
|
||||
<img class="image-mode" :src="res.list[0].img" />
|
||||
</div>
|
||||
<div class="view-width-100">
|
||||
<div class="view-height-85">
|
||||
<img class="image-mode" :src="res.list[1].img" alt />
|
||||
</div>
|
||||
<div class="view-height-85">
|
||||
<img class="image-mode" :src="res.list[2].img" alt />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
title: "上一下二",
|
||||
props: ["res"]
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-size: cover;
|
||||
height: 170px;
|
||||
flex-direction: column;
|
||||
}
|
||||
img {
|
||||
width: 100% !important;
|
||||
height: 85px !important;
|
||||
}
|
||||
.view-width-100 {
|
||||
padding: 1px 0;
|
||||
display: flex;
|
||||
height: 85px;
|
||||
}
|
||||
.view-height-85 {
|
||||
padding: 0 1px;
|
||||
width: 50%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="view-width-100">
|
||||
<div class="view-height-85">
|
||||
<img class="image-mode" :src="res.list[0].img" alt />
|
||||
</div>
|
||||
<div class="view-height-85">
|
||||
<img class="image-mode" :src="res.list[1].img" alt />
|
||||
</div>
|
||||
</div>
|
||||
<div class="view-width-100">
|
||||
<img class="image-mode" :src="res.list[2].img" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
title: "上二下一",
|
||||
props: ["res"],
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.layout {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-size: cover;
|
||||
height: 170px;
|
||||
flex-direction: column;
|
||||
}
|
||||
img {
|
||||
width: 100% !important;
|
||||
height: 85px !important;
|
||||
}
|
||||
.view-width-100 {
|
||||
padding: 1px 0;
|
||||
display: flex;
|
||||
height: 85px;
|
||||
width: 100%;
|
||||
}
|
||||
.view-height-85 {
|
||||
padding: 0 1px;
|
||||
width: 50%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<div class="layout">请选择风格</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import './tpl.scss';
|
||||
.layout{
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
228
manager/src/views/page-decoration/wap/wapList.vue
Normal file
228
manager/src/views/page-decoration/wap/wapList.vue
Normal file
@@ -0,0 +1,228 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<Card class="category">
|
||||
<div :class="{active:i == selectedIndex}" class="category-item" v-for="(typeItem,i) in pageTypes" :key="typeItem.type">
|
||||
<div @click="clickType(typeItem.type,i)">{{typeItem.title}}</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card class="content">
|
||||
<Button type="primary" @click="handleAdd()">添加页面</Button>
|
||||
<div class="list">
|
||||
<Spin size="large" fix v-if="loading"></Spin>
|
||||
<div class="item item-title" >
|
||||
<div>页面名称</div>
|
||||
<div class="item-config">
|
||||
<div>状态</div>
|
||||
<div>操作</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item" v-for="(item, index) in list" :key="index">
|
||||
<div>{{ item.name || "暂无模板昵称" }}</div>
|
||||
<div class="item-config">
|
||||
<i-switch v-model="item.pageShow" @on-change="changeSwitch(item)">
|
||||
<span slot="open">开</span>
|
||||
<span slot="close">关</span>
|
||||
</i-switch>
|
||||
<Button type="info" placement="right" @click="handleEdit(item)" size="small">修改</Button>
|
||||
<Poptip confirm title="删除此模板？" @on-ok="handleDel(item)" >
|
||||
<Button type="error" size="small">删除</Button>
|
||||
</Poptip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="no-more" v-if="list.length ==0">暂无更多模板</div>
|
||||
</div>
|
||||
<Page :total="total" size="small" @on-change="(val) => {params.pageNumber = val; } " :current="params.pageNumber" :page-size="params.pageSize" show-sizer :page-size-opts="[10, 20, 50]" @on-page-size-change="changePageSize"/>
|
||||
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import * as API_Other from "@/api/other.js";
|
||||
export default {
|
||||
// components: {region},
|
||||
data() {
|
||||
return {
|
||||
selectedIndex: 0, // 装修那个页面的下标
|
||||
columns: [ // 表头
|
||||
{
|
||||
title: "页面名称",
|
||||
key: "name",
|
||||
},
|
||||
{
|
||||
title: "状态",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
key: "action",
|
||||
},
|
||||
],
|
||||
|
||||
loading: false, // 加载状态
|
||||
pageTypes: [ // 装修类型
|
||||
{
|
||||
type: "INDEX",
|
||||
title: "首页",
|
||||
},
|
||||
{
|
||||
type: "SPECIAL",
|
||||
title: "专题",
|
||||
},
|
||||
],
|
||||
params: { // 请求参数
|
||||
pageNumber: 1,
|
||||
pageSize: 10,
|
||||
sort: "createTime",
|
||||
order: "desc",
|
||||
pageType: "INDEX",
|
||||
pageClientType: "H5",
|
||||
},
|
||||
total: 0, // 页面数量
|
||||
list: [], // 总数据
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
params: {
|
||||
handler(val) {
|
||||
// this.pageNumber++;
|
||||
this.init();
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
// 切换tab
|
||||
clickType(val,index) {
|
||||
this.params.pageNumber = 1
|
||||
this.selectedIndex = index
|
||||
this.params.pageType = val;
|
||||
},
|
||||
// 是否发布
|
||||
changeSwitch(item) {
|
||||
this.loading = true;
|
||||
API_Other.releasePageHome(item.id).then((res) => {
|
||||
if (res.result) {
|
||||
this.loading = false;
|
||||
this.$Message.success("发布成功");
|
||||
this.init();
|
||||
}
|
||||
|
||||
this.init();
|
||||
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 初始化数据
|
||||
init() {
|
||||
this.loading = true;
|
||||
API_Other.getHomeList(this.params).then((res) => {
|
||||
if (!res.result) return false;
|
||||
this.loading = false;
|
||||
res.result.records.forEach((item) => {
|
||||
if (item.pageShow == "OPEN") {
|
||||
item.pageShow = true;
|
||||
} else {
|
||||
item.pageShow = false;
|
||||
}
|
||||
});
|
||||
this.list = res.result.records;
|
||||
this.total = res.result.total;
|
||||
});
|
||||
},
|
||||
// 装修楼层
|
||||
handleEdit(val) {
|
||||
this.$router.push({
|
||||
path: "/floorList/main",
|
||||
query: { id: val.id, name: val.name, type: val.pageShow },
|
||||
});
|
||||
},
|
||||
// 添加模板
|
||||
handleAdd() {
|
||||
this.$router.push({
|
||||
path: "/floorList/main",
|
||||
});
|
||||
},
|
||||
// 分页 改变页数
|
||||
changePageSize(v) {
|
||||
this.params.pageNumber = 1;
|
||||
this.params.pageSize = v;
|
||||
this.init();
|
||||
},
|
||||
// 删除模板
|
||||
handleDel(val) {
|
||||
this.loading = true;
|
||||
API_Other.removePageHome(val.id).then((res) => {
|
||||
if (res.result) {
|
||||
this.loading = false;
|
||||
this.init();
|
||||
this.$Message.success("删除成功");
|
||||
}
|
||||
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.category-item {
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
}
|
||||
.active {
|
||||
background: #ededed;
|
||||
}
|
||||
.item-title {
|
||||
background: #d7e7f5!important;
|
||||
height: 54px;
|
||||
}
|
||||
.no-more {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.wrapper {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
}
|
||||
.category {
|
||||
flex: 2;
|
||||
}
|
||||
.content {
|
||||
flex: 8;
|
||||
}
|
||||
* {
|
||||
margin: 5px;
|
||||
}
|
||||
.list {
|
||||
min-height: 600px;
|
||||
position: relative;
|
||||
}
|
||||
.item:nth-of-type(2) {
|
||||
margin: 0 5px;
|
||||
}
|
||||
.item {
|
||||
width: 100% !important;
|
||||
padding: 0 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
> .item-config {
|
||||
width: 180px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.item:nth-of-type(2n+1) {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user