mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-21 18:35:53 +08:00
commit message
This commit is contained in:
Chopper
254
manager/src/views/lili-floor-renovation/floorList copy.vue
Normal file
254
manager/src/views/lili-floor-renovation/floorList copy.vue
Normal file
@@ -0,0 +1,254 @@
|
||||
<template>
|
||||
<div class="floor-list">
|
||||
<div class="list">
|
||||
<div class="template-saved" v-for="item in templateList" :key="item.id">
|
||||
<div class="template-title">
|
||||
<span>{{ item.name }}</span>
|
||||
<span :class="{ 'theme-color': item.pageShow == 'OPEN' }">{{
|
||||
item.pageShow == "OPEN" ? "已发布" : "未发布"
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="template-content">
|
||||
<!-- <img :src="item.img || require(`@/assets/img-error.png`)" alt=""> -->
|
||||
<div class="cover">
|
||||
<Button icon="md-color-palette" @click="decorate(item.id)"
|
||||
>装修</Button
|
||||
>
|
||||
<Button icon="md-pricetags" @click="Template(item)">编辑</Button>
|
||||
<Button
|
||||
icon="md-send"
|
||||
v-if="item.pageShow == 'CLOSE'"
|
||||
@click="releaseTemplate(item.id)"
|
||||
>发布</Button
|
||||
>
|
||||
<Button
|
||||
icon="md-trash"
|
||||
v-if="item.pageShow == 'CLOSE'"
|
||||
@click="delTemplate(item.id)"
|
||||
>删除</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="new-template" @click="createTemp">
|
||||
<Icon type="md-add" />
|
||||
<div>新建模板</div>
|
||||
</div>
|
||||
</div>
|
||||
<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" :rules="rules" :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,
|
||||
templateList: [],
|
||||
formData: {
|
||||
status: false,
|
||||
name: "",
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: "请输入模板名称", trigger: "blur" }],
|
||||
},
|
||||
loading: true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
let height = window.innerHeight - 150;
|
||||
document.querySelector(".floor-list").style.height = height + "px";
|
||||
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.pageShow == "OPEN" ? (item.status = true) : (item.status = false);
|
||||
this.formData = item;
|
||||
this.showModal = true;
|
||||
},
|
||||
|
||||
decorate(id) {
|
||||
// 装修
|
||||
this.$router.push({ name: "renovation", query: { id: id } });
|
||||
},
|
||||
|
||||
getTemplateList() {
|
||||
//模板列表
|
||||
let params = {
|
||||
pageNumber: 1,
|
||||
pageSize: 999,
|
||||
pageType: "INDEX",
|
||||
pageClientType: "PC",
|
||||
};
|
||||
API_floor.getHomeList(params).then((res) => {
|
||||
if (res.code == 200) {
|
||||
this.templateList = res.result.records;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
releaseTemplate(id) {
|
||||
//发布模板
|
||||
API_floor.releasePageHome(id).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$Message.success("发布模板成功");
|
||||
this.getTemplateList();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
delTemplate(id) {
|
||||
this.$Modal.confirm({
|
||||
title: "提示",
|
||||
content: "<p>确定删除该模板吗？</p>",
|
||||
onOk: () => {
|
||||
API_floor.removePageHome(id).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$Message.success("删除模板成功");
|
||||
this.getTemplateList();
|
||||
}
|
||||
});
|
||||
},
|
||||
onCancel: () => {},
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.floor-list {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
.list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
> div {
|
||||
width: 260px;
|
||||
height: 450px;
|
||||
margin: 10px 15px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.new-template {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border: 2px dashed $theme_color;
|
||||
color: $theme_color;
|
||||
background: #f88c7138;
|
||||
.ivu-icon {
|
||||
font-size: 30px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.template-saved {
|
||||
overflow: hidden;
|
||||
.template-title {
|
||||
padding: 10px;
|
||||
background: #eee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.theme-color {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.template-content {
|
||||
height: 407px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: #ddd;
|
||||
&:hover {
|
||||
.cover {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.cover {
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
height: 407px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.ivu-btn {
|
||||
margin-bottom: 10px;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
&:hover {
|
||||
background-color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
251
manager/src/views/lili-floor-renovation/floorList.vue
Normal file
251
manager/src/views/lili-floor-renovation/floorList.vue
Normal file
@@ -0,0 +1,251 @@
|
||||
<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.id)" size="small">装修</Button>
|
||||
<Poptip confirm title="删除此模板？" @on-ok="delTemplate(item.id)" @on-cancel="cancel">
|
||||
<Button type="error" size="small">删除</Button>
|
||||
</Poptip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="no-more" v-if="list.length ==0">暂无更多模板</div>
|
||||
</div>
|
||||
|
||||
</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" :rules="rules" :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
|
||||
formData: { // 新建模态框的数据
|
||||
status: false, // 模板是否开启
|
||||
name: "", // 模板名称
|
||||
},
|
||||
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(id) {
|
||||
// 装修
|
||||
this.$router.push({ name: "renovation", query: { id: id } });
|
||||
},
|
||||
|
||||
getTemplateList() {
|
||||
//模板列表
|
||||
let params = {
|
||||
pageNumber: 1,
|
||||
pageSize: 999,
|
||||
pageType: "INDEX",
|
||||
pageClientType: "PC",
|
||||
};
|
||||
API_floor.getHomeList(params).then((res) => {
|
||||
if (res.code == 200) {
|
||||
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.code === 200) {
|
||||
this.$Message.success("发布模板成功");
|
||||
this.getTemplateList();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
delTemplate(id) {
|
||||
API_floor.removePageHome(id).then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$Message.success("删除模板成功");
|
||||
this.getTemplateList();
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.category-item {
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
}
|
||||
.active {
|
||||
background: #ededed;
|
||||
}
|
||||
.item-title {
|
||||
background: #f5f7fa;
|
||||
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(3n) {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
</style>
|
||||
341
manager/src/views/lili-floor-renovation/modelConfig.js
Normal file
341
manager/src/views/lili-floor-renovation/modelConfig.js
Normal file
@@ -0,0 +1,341 @@
|
||||
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:'hotAdvert',
|
||||
name:'热门广告',
|
||||
icon:'md-image',
|
||||
showName:'',
|
||||
options:{
|
||||
list:[
|
||||
{
|
||||
img:"https://demo.dscmall.cn/storage/data/gallery_album/116/original_img/116_P_1573790294398.png",
|
||||
url:'',
|
||||
size:'1200*自定义'
|
||||
},
|
||||
{
|
||||
img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953434094179058.png',
|
||||
url:'',
|
||||
size:'230*190'
|
||||
},
|
||||
{
|
||||
img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953434094179058.png',
|
||||
url:'',
|
||||
size:'230*190'
|
||||
},
|
||||
{
|
||||
img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953434094179058.png',
|
||||
url:'',
|
||||
size:'230*190'
|
||||
},
|
||||
{
|
||||
img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953434094179058.png',
|
||||
url:'',
|
||||
size:'230*190'
|
||||
},
|
||||
{
|
||||
img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953434094179058.png',
|
||||
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:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1516301201726549362.png',url:'',size:"1300*586"},
|
||||
classification:[{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953445396793087.jpg',url:'', size:'190*210'}, {img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953445396793087.jpg',url:'', size:'190*210'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953445396793087.jpg',url:'', size:'190*210'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953445396793087.jpg',url:'', size:'190*210'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953445396793087.jpg',url:'', size:'190*210'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953445396793087.jpg',url:'', size:'190*210'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953445396793087.jpg',url:'', size:'190*210'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953445396793087.jpg',url:'', size:'190*210'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953445396793087.jpg',url:'', size:'190*210'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953445396793087.jpg',url:'', size:'190*210'},],
|
||||
brandList:[{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953455883586458.jpg',url:'', size:'240*105'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953455883586458.jpg',url:'', size:'240*105'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953455883586458.jpg',url:'', size:'240*105'},{img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953455883586458.jpg',url:'', size:'240*105'},]
|
||||
},
|
||||
},
|
||||
// {
|
||||
// type:'brand',
|
||||
// name:'首页品牌',
|
||||
// icon:'md-image',
|
||||
// options:{
|
||||
// brandViewList:[
|
||||
// {
|
||||
// nameCn:'品牌闪购',
|
||||
// nameEn:'BRAND SALE',
|
||||
// img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953433212156689.jpg',
|
||||
// url:''
|
||||
// },
|
||||
// {
|
||||
// nameCn:'品牌活动',
|
||||
// nameEn:'BRAND ACTIVITY',
|
||||
// img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953434269088434.jpg',
|
||||
// url:''
|
||||
// },
|
||||
// {
|
||||
// nameCn:'超级品牌日',
|
||||
// nameEn:'SUPER BRAND',
|
||||
// img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953434500632403.jpg',
|
||||
// url:''
|
||||
// }
|
||||
// ],
|
||||
// signList:[
|
||||
// {img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},
|
||||
// {img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},
|
||||
// {img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},
|
||||
// {img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},
|
||||
// {img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},
|
||||
// {img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''},{img:'https://x.dscmall.cn/storage/data/brandlogo/1490074056964147533.jpg',follow:0,url:''}
|
||||
// ],
|
||||
// },
|
||||
// },
|
||||
{
|
||||
type:'recommend',
|
||||
name:'好货推荐',
|
||||
icon:'md-image',
|
||||
options:{
|
||||
contentLeft:{
|
||||
title:'发现好货',
|
||||
secondTitle:'更多好货',
|
||||
bgColor:'#449dae',
|
||||
url:'',
|
||||
list: [
|
||||
{ img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953437520193959.jpg', name: '阿迪达斯三叶草', describe: '也许是每一款经典系列都应该有一个独特的故事吧', url:'',size:'160*160' },
|
||||
{ img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953437766680336.jpg', name: '360行车记录', describe: '夜行 监控 电子狗 蓝牙', url:'' ,size:'80*80'},
|
||||
{ img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953437766680336.jpg', name: '360行车记录', describe: '夜行 监控 电子狗 蓝牙', url:'' ,size:'80*80'},
|
||||
{ img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953437766680336.jpg', name: '360行车记录', describe: '夜行 监控 电子狗 蓝牙', url:'' ,size:'80*80'},
|
||||
{ img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953437766680336.jpg', name: '360行车记录', describe: '夜行 监控 电子狗 蓝牙', url:'' ,size:'80*80'},
|
||||
{ img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953437766680336.jpg', name: '360行车记录', describe: '夜行 监控 电子狗 蓝牙', url:'' ,size:'80*80'},
|
||||
{ img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953437766680336.jpg', name: '360行车记录', describe: '夜行 监控 电子狗 蓝牙', url:'' ,size:'80*80'},
|
||||
]
|
||||
},
|
||||
contentRight:{
|
||||
title:'特色推荐',
|
||||
secondTitle:'更多特色推荐',
|
||||
bgColor:'#a25684',
|
||||
url:'',
|
||||
list: [
|
||||
{ img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1516316460079621387.jpg', name: '好心情喝出来', describe: '遇见懂你的饮品', url:'',size:'80*80' },
|
||||
{ img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1516316460079621387.jpg', name: '好心情喝出来', describe: '遇见懂你的饮品', url:'',size:'80*80' },
|
||||
{ img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1516316460079621387.jpg', name: '好心情喝出来', describe: '遇见懂你的饮品', url:'',size:'80*80' },
|
||||
{ img: 'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1516316460079621387.jpg', name: '好心情喝出来', describe: '遇见懂你的饮品', url:'',size:'80*80' },
|
||||
]
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
type:'newGoodsSort',
|
||||
name:'新品排行',
|
||||
icon:'md-image',
|
||||
options:{
|
||||
left:{
|
||||
title:'特卖',
|
||||
secondTitle:"更多特卖",
|
||||
bgColor:'#c43d7e',
|
||||
url:'',
|
||||
list:[
|
||||
{name:'新年心愿单', describe:'满269减50,满999减100',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"160*160"},
|
||||
{name:'Ms.Maggie 冬季时尚', describe:'满269减50',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"90*90"},
|
||||
{name:'Ms.Maggie 冬季时尚', describe:'满269减50',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"90*90"},
|
||||
{name:'Ms.Maggie 冬季时尚', describe:'满269减50',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"90*90"},
|
||||
{name:'阿迪达斯 领跑时尚', describe:'满269减50',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"90*90"},
|
||||
],
|
||||
},
|
||||
middle:{
|
||||
title:'新品',
|
||||
secondTitle:"更多新品",
|
||||
bgColor:'#e66a07',
|
||||
url:'',
|
||||
list:[
|
||||
{name:'阿迪达斯 领跑时尚', describe:'满269减50',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"90*90"},
|
||||
{name:'阿迪达斯 领跑时尚', describe:'满269减50',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"90*90"},
|
||||
{name:'阿迪达斯 领跑时尚', describe:'满269减50',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"90*90"},
|
||||
{name:'阿迪达斯 领跑时尚', describe:'满269减50',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"90*90"},
|
||||
{name:'阿迪达斯 领跑时尚', describe:'满269减50',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"90*90"},
|
||||
{name:'阿迪达斯 领跑时尚', describe:'满269减50',img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953440019595029.jpg', url:'',size:"90*90"},
|
||||
]
|
||||
},
|
||||
right:{
|
||||
title:'排行榜',
|
||||
secondTitle:"精品风向标",
|
||||
bgColor:'#b62323',
|
||||
url:'',
|
||||
list:[
|
||||
{name:'小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包', price:14.9, img:'https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490165200470.jpg', url:''},
|
||||
{name:'小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包', price:14.9, img:'https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490165200470.jpg', url:''},
|
||||
{name:'小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包', price:14.9, img:'https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490165200470.jpg', url:''},
|
||||
{name:'小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包', price:14.9, img:'https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490165200470.jpg', url:''},
|
||||
{name:'小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包', price:14.9, img:'https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490165200470.jpg', url:''},
|
||||
{name:'小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包', price:14.9, img:'https://x.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1490165200470.jpg', url:''},
|
||||
]
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
type:'firstAdvert',
|
||||
name:'首页广告',
|
||||
icon:'md-image',
|
||||
options:{
|
||||
list:[
|
||||
{name:'LILI生鲜', describe:"年货带回家 满199减60", img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953435885264617.png', url:'',fromColor:'#e89621',toColor:"#f5c568",size:'170*170'},
|
||||
{name:'LILI众筹', describe:"备孕有孕检测仪", img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953436530337827.png', url:'', fromColor:"#325bb4", toColor:'#4c9afe',size:'170*170'},
|
||||
{name:'LILI生鲜', describe:"年货带回家 满199减60", img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953435885264617.png', url:'', fromColor:"#1c9daf", toColor:'#40cda7',size:'170*170'},
|
||||
{name:'LILI众筹', describe:"备孕有孕检测仪", img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953436530337827.png', url:'', fromColor:"#d13837", toColor:'#df6d4f',size:'170*170'},
|
||||
{name:'LILI生鲜', describe:"年货带回家 满199减60", img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953435885264617.png', url:'', fromColor:"#ca4283", toColor:'#eb75cf',size:'170*170'},
|
||||
{name:'LILI众筹', describe:"备孕有孕检测仪", img:'https://x.dscmall.cn/storage/data/gallery_album/61/original_img/1515953436530337827.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:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },],
|
||||
[{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },],
|
||||
[{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },],
|
||||
[{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', name:'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量', price:6666, url:'' },
|
||||
{ img:'https://demo.dscmall.cn/storage/images/201703/thumb_img/0_thumb_G_1489096810833.jpg', 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:'百货生鲜'},
|
||||
]
|
||||
},
|
||||
},
|
||||
]
|
||||
393
manager/src/views/lili-floor-renovation/modelForm.vue
Normal file
393
manager/src/views/lili-floor-renovation/modelForm.vue
Normal file
@@ -0,0 +1,393 @@
|
||||
<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><Icon type="md-pin" />北京</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 v-model="searchData" size="large" placeholder="输入你想查找的商品">
|
||||
<Button slot="append">搜索</Button>
|
||||
</i-input>
|
||||
<!-- <Tag
|
||||
v-for="(item, index) in promotionTags"
|
||||
:key="index"
|
||||
class="mt_10"
|
||||
>
|
||||
{{item}}
|
||||
</Tag> -->
|
||||
</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"
|
||||
:on-ok="sureDecorate"
|
||||
:on-cancel="cancelDecorate"
|
||||
>
|
||||
<!-- 顶部广告 -->
|
||||
<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>
|
||||
图片链接：<span>{{ topAdvert.url }}</span><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"
|
||||
:on-ok="sureDecorate"
|
||||
:on-cancel="cancelDecorate"
|
||||
>
|
||||
<!-- 分类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 /></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"
|
||||
@selectedGoodsData="selectedGoodsData"
|
||||
></liliDialog>
|
||||
<!-- 选择图片 -->
|
||||
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||
<ossManage @callback="callbackSelected" 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:'https://x.dscmall.cn/storage/data/gallery_album/108/original_img/108_P_1539564967582.jpg',
|
||||
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')
|
||||
},
|
||||
selectedLink(val) {
|
||||
console.log(val);
|
||||
if(this.showModalNav){
|
||||
this.selectedNav.url = this.$options.filters.formatLinkType(val);
|
||||
}else {
|
||||
this.topAdvert.url = this.$options.filters.formatLinkType(val);
|
||||
}
|
||||
},
|
||||
handleDelNav(index){ // 删除导航
|
||||
this.navList.list.splice(index,1)
|
||||
},
|
||||
handleAddNav(){ // 添加导航
|
||||
this.navList.list.push(
|
||||
{name:'',url:''}
|
||||
)
|
||||
console.log(this.navList.list)
|
||||
},
|
||||
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
|
||||
})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
|
||||
}
|
||||
}
|
||||
</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>
|
||||
425
manager/src/views/lili-floor-renovation/modelFormItem.vue
Normal file
425
manager/src/views/lili-floor-renovation/modelFormItem.vue
Normal file
@@ -0,0 +1,425 @@
|
||||
<template>
|
||||
<div class="model-item"
|
||||
v-if="element && element.key"
|
||||
>
|
||||
<!-- 轮播图模块，包括个人信息，快捷导航模块 -->
|
||||
<template v-if="element.type == 'carousel'">
|
||||
<model-carousel :data="element"></model-carousel>
|
||||
</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(' + element.options.bgImg.img + ')'}">
|
||||
<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 == 'brand'">
|
||||
<div class="brand">
|
||||
<div class="brand-view">
|
||||
<div class="brand-view-content" v-for="(brand,index) in element.options.brandViewList" :key="index">
|
||||
<div class="brand-view-title">
|
||||
<span><span class="fontsize_18 fw_bold">{{brand.nameCn}}</span> <span class="fw_bold">{{brand.nameEn}}</span></span>
|
||||
<span>更多></span>
|
||||
</div>
|
||||
<div class="brand-view-img">
|
||||
<img :src="brand.img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="brand-list">
|
||||
<li v-for="(sign,index) in element.options.signList" :key="index">
|
||||
<div class="brand-img">
|
||||
<img :src="sign.img" alt="">
|
||||
</div>
|
||||
<div class="brand-mash">
|
||||
<Icon type="ios-heart-outline" />
|
||||
<div>关注人数：{{ sign.follow }}</div>
|
||||
<div>点击进入</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="refresh">
|
||||
<Icon type="md-refresh" />
|
||||
<div>换一批</div>
|
||||
</li>
|
||||
</ul>
|
||||
</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"
|
||||
:on-ok="sureDecorate"
|
||||
:on-cancel="cancelDecorate"
|
||||
>
|
||||
<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>
|
||||
图片链接：<span>{{ selected.url }}</span> <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"
|
||||
@selectedGoodsData="selectedGoodsData"
|
||||
></liliDialog>
|
||||
<!-- 选择图片 -->
|
||||
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||
<ossManage @callback="callbackSelected" ref="ossManage" />
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModelCarousel from './modelList/carousel.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, Recommend, NewGoodsSort, FirstPageAdvert, NotEnough, Seckill, ossManage
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showModal:false,
|
||||
selected:{},
|
||||
picModelFlag: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
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);;
|
||||
},
|
||||
handleMoveEnd ({newIndex, oldIndex}) {
|
||||
console.log('index', newIndex, oldIndex)
|
||||
},
|
||||
handleEditModel (type) {
|
||||
this.showModal = true;
|
||||
},
|
||||
handleSelectImg(){ // 选择图片
|
||||
this.$refs.ossManage.selectImage = true;
|
||||
this.picModelFlag = true;
|
||||
},
|
||||
callbackSelected (val) {
|
||||
this.picModelFlag = false;
|
||||
this.selected.img = val.url;
|
||||
}
|
||||
|
||||
},
|
||||
watch: {
|
||||
|
||||
}
|
||||
}
|
||||
</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, .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 .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>
|
||||
|
||||
280
manager/src/views/lili-floor-renovation/modelList/carousel.vue
Normal file
280
manager/src/views/lili-floor-renovation/modelList/carousel.vue
Normal file
@@ -0,0 +1,280 @@
|
||||
<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="../../../assets/play.png" alt />
|
||||
<div>Hi，欢迎来到LiLi Shop</div>
|
||||
<div>
|
||||
<Button type="error" shape="circle">请登录</Button>
|
||||
<Button size="small" shape="circle">我要开店</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="shop-msg">
|
||||
<div>
|
||||
<span>店铺信息</span>
|
||||
<span>|</span>
|
||||
<span>网站帮助分类</span>
|
||||
</div>
|
||||
<ul>
|
||||
<li>免责条款</li>
|
||||
<li>联系我们</li>
|
||||
<li>咨询热点</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
v-model="showModal"
|
||||
title="快捷导航"
|
||||
draggable
|
||||
width="800"
|
||||
:z-index="100"
|
||||
mask-closable="false"
|
||||
:on-ok="sureDecorate"
|
||||
:on-cancel="cancelDecorate"
|
||||
>
|
||||
<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 v-model="item.url" disabled /></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"
|
||||
@selectedGoodsData="selectedGoodsData"
|
||||
></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,
|
||||
selected: null,
|
||||
picModelFlag: false,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
handleSelectModel () {
|
||||
// 编辑模块
|
||||
this.showModal = true;
|
||||
},
|
||||
handleAdd () {
|
||||
this.data.options.list.push({ img: "", url: "" });
|
||||
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) { // 选择链接回调
|
||||
console.log(val);
|
||||
this.selected.url = this.$options.filters.formatLinkType(val);
|
||||
console.log(this.selected.url);
|
||||
},
|
||||
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) {
|
||||
@include content_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>
|
||||
@@ -0,0 +1,160 @@
|
||||
<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"
|
||||
:on-ok="sureDecorate"
|
||||
:on-cancel="cancelDecorate"
|
||||
>
|
||||
<div class="modal-top-advert">
|
||||
<div>
|
||||
<img class="show-image" width="170" height="170" :src="selected.img" alt />
|
||||
</div>
|
||||
<div>
|
||||
<span>图片主标题：</span><Input v-model="selected.name" />
|
||||
</div>
|
||||
<div>
|
||||
<span>图片描述：</span><Input v-model="selected.describe" />
|
||||
</div>
|
||||
<div class="tips">
|
||||
建议尺寸：<span>{{ selected.size }}</span>
|
||||
</div>
|
||||
<div>
|
||||
图片链接：<span>{{ selected.url }}</span> <Button size="small" type="primary" @click="handleSelectLink">选择链接</Button>
|
||||
</div>
|
||||
<div>
|
||||
<span>渐变背景色：</span><Input v-model="selected.fromColor" /> <ColorPicker v-if="selected.fromColor" v-model="selected.fromColor" />
|
||||
</div>
|
||||
<div>
|
||||
<span>渐变背景色：</span><Input v-model="selected.toColor" /> <ColorPicker v-if="selected.toColor" v-model="selected.toColor" />
|
||||
</div>
|
||||
<div :style="{backgroundImage:`linear-gradient(to right, ${selected.fromColor}, ${selected.toColor})`}" class="exhibition"></div>
|
||||
<div>
|
||||
选择图片：<Button size="small" type="primary" @click="handleSelectImg">选择图片</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
<!-- 选择商品。链接 -->
|
||||
<liliDialog
|
||||
ref="liliDialog"
|
||||
@selectedLink="selectedLink"
|
||||
@selectedGoodsData="selectedGoodsData"
|
||||
></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 {
|
||||
props:{
|
||||
data:{
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
components:{ossManage},
|
||||
data() {
|
||||
return {
|
||||
options: this.data.options,
|
||||
showModal: false,
|
||||
selected: {},
|
||||
picModelFlag: false
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
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);;
|
||||
},
|
||||
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>
|
||||
@@ -0,0 +1,338 @@
|
||||
<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"
|
||||
:on-ok="sureDecorate"
|
||||
:on-cancel="cancelDecorate"
|
||||
>
|
||||
<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>
|
||||
图片链接：<span>{{ selected.url }}</span> <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="showModalTitle"
|
||||
title="装修"
|
||||
draggable
|
||||
width="800"
|
||||
:z-index="100"
|
||||
mask-closable="false"
|
||||
:on-ok="sureDecorate"
|
||||
:on-cancel="cancelDecorate"
|
||||
>
|
||||
<div class="modal-top-advert">
|
||||
<div>
|
||||
<span>主标题：</span><Input v-model="selected.title" />
|
||||
</div>
|
||||
<div>
|
||||
<span>副标题：</span><Input v-model="selected.secondTitle" />
|
||||
</div>
|
||||
<div>
|
||||
<span>副标题链接：{{selected.url}}</span><Button size="small" class="ml_10" type="primary" @click="handleSelectLink">选择链接</Button>
|
||||
</div>
|
||||
<div>
|
||||
<span>背景色：</span><ColorPicker v-if="selected.bgColor" v-model="selected.bgColor" />
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
<!-- 选择商品。链接 -->
|
||||
<liliDialog
|
||||
ref="liliDialog"
|
||||
@selectedLink="selectedLink"
|
||||
@selectedGoodsData="selectedGoodsData"
|
||||
></liliDialog>
|
||||
<!-- 选择图片 -->
|
||||
<Modal width="1200px" v-model="picModelFlag" footer-hide>
|
||||
<ossManage @callback="callbackSelected" 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,
|
||||
showModalTitle:false,
|
||||
selected: {},
|
||||
picModelFlag: false
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleSelectModel (item, type) {
|
||||
this.selected = item;
|
||||
console.warn(item);
|
||||
if(type){
|
||||
this.showModalTitle = 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')
|
||||
},
|
||||
selectedLink (val) {
|
||||
this.selected.url = this.$options.filters.formatLinkType(val);
|
||||
},
|
||||
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}`
|
||||
},
|
||||
|
||||
handleMoveEnd ({newIndex, oldIndex}) {
|
||||
console.log('index', newIndex, oldIndex)
|
||||
},
|
||||
handleEditModel (type) {
|
||||
this.showModal = true;
|
||||
},
|
||||
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>
|
||||
233
manager/src/views/lili-floor-renovation/modelList/notEnough.vue
Normal file
233
manager/src/views/lili-floor-renovation/modelList/notEnough.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<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"
|
||||
:on-ok="sureDecorate"
|
||||
:on-cancel="cancelDecorate"
|
||||
>
|
||||
<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><Input v-model="item.sort"/></td> -->
|
||||
<td v-if="index!=0">
|
||||
<Button type="error" size="small" @click="handleDelNav(index)">删除</Button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Modal>
|
||||
<!-- 选择商品。链接 -->
|
||||
<liliDialog
|
||||
ref="liliDialog"
|
||||
@selectedLink="selectedLink"
|
||||
@selectedGoodsData="selectedGoodsData"
|
||||
></liliDialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
data:{
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentIndex:0,
|
||||
conData:this.data,
|
||||
selected:{},
|
||||
showModal:false,
|
||||
showContent:true,
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
data:function(val){
|
||||
this.conData = val
|
||||
},
|
||||
conData:function(val){
|
||||
this.$emit('content',val)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
changeCurr(index){
|
||||
this.currentIndex = index;
|
||||
},
|
||||
handleSelectModel (item,type) {
|
||||
this.selected = item;
|
||||
this.showModal = true
|
||||
},
|
||||
handleSelectLink(item,index) { // 调起选择链接弹窗
|
||||
this.$refs.liliDialog.open('link')
|
||||
},
|
||||
handleSelectGoods(item) { // 调起选择链接弹窗
|
||||
if(item) this.selected = item;
|
||||
this.$refs.liliDialog.open('goods')
|
||||
},
|
||||
selectedLink(val) {
|
||||
this.selected.url = this.$options.filters.formatLinkType(val);
|
||||
},
|
||||
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>
|
||||
345
manager/src/views/lili-floor-renovation/modelList/recommend.vue
Normal file
345
manager/src/views/lili-floor-renovation/modelList/recommend.vue
Normal file
@@ -0,0 +1,345 @@
|
||||
<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">
|
||||
<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"
|
||||
:on-ok="sureDecorate"
|
||||
:on-cancel="cancelDecorate"
|
||||
>
|
||||
<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 />
|
||||
</div>
|
||||
<div>
|
||||
<span>图片主标题：</span><Input v-model="selected.name" />
|
||||
</div>
|
||||
<div>
|
||||
<span>图片描述：</span><Input v-model="selected.describe" />
|
||||
</div>
|
||||
<div class="tips">
|
||||
建议尺寸：<span>{{ selected.size }}</span>
|
||||
</div>
|
||||
<div>
|
||||
图片链接：<span>{{ selected.url }}</span> <Button size="small" 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="showModalTitle"
|
||||
title="装修"
|
||||
draggable
|
||||
width="800"
|
||||
:z-index="100"
|
||||
mask-closable="false"
|
||||
:on-ok="sureDecorate"
|
||||
:on-cancel="cancelDecorate"
|
||||
>
|
||||
<div class="modal-top-advert">
|
||||
<div>
|
||||
<span>主标题：</span><Input v-model="selected.title" />
|
||||
</div>
|
||||
<div>
|
||||
<span>副标题：</span><Input v-model="selected.secondTitle" />
|
||||
</div>
|
||||
<div>
|
||||
<span>副标题链接：{{selected.url}}</span><Button size="small" class="ml_10" type="primary" @click="handleSelectLink">选择链接</Button>
|
||||
</div>
|
||||
<div>
|
||||
<span>背景色：</span><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" 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,
|
||||
showModalTitle:false,
|
||||
selected:{},
|
||||
picModelFlag: false
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
handleSelectModel (item,type) {
|
||||
this.selected = item;
|
||||
if(type){
|
||||
this.showModalTitle = true
|
||||
} else {
|
||||
this.showModal = true
|
||||
}
|
||||
|
||||
},
|
||||
handleSelectLink(item,index) { // 调起选择链接弹窗
|
||||
this.$refs.liliDialog.open('link')
|
||||
},
|
||||
handleSelectGoods(item) { // 调起选择商品
|
||||
this.$refs.liliDialog.open('goods')
|
||||
},
|
||||
selectedLink(val) {
|
||||
this.selected.url = this.$options.filters.formatLinkType(val);
|
||||
},
|
||||
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 {
|
||||
display: flex;
|
||||
margin-top: 30px;
|
||||
height: 180px;
|
||||
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>
|
||||
263
manager/src/views/lili-floor-renovation/modelList/seckill.vue
Normal file
263
manager/src/views/lili-floor-renovation/modelList/seckill.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<div class="seckill">
|
||||
<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" class="swiper-slide">
|
||||
<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,
|
||||
days:'00',
|
||||
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;
|
||||
.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>
|
||||
@@ -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/lili-floor-renovation/readme.md
Normal file
20
manager/src/views/lili-floor-renovation/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)
|
||||
172
manager/src/views/lili-floor-renovation/renovation.vue
Normal file
172
manager/src/views/lili-floor-renovation/renovation.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<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'}"
|
||||
@end="handleMoveEnd"
|
||||
@start="handleMoveStart"
|
||||
:move="handleMove"
|
||||
>
|
||||
<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" @click="saveTemplate">保存模板</Button> <Button @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:[]} // 模板数据
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
saveTemplate(){ // 保存模板
|
||||
this.modelForm.list.unshift(this.$refs.modelForm.navList)
|
||||
this.modelForm.list.unshift(this.$refs.modelForm.topAdvert)
|
||||
const modelForm = JSON.stringify(this.modelForm)
|
||||
const data = {
|
||||
id:this.$route.query.id,
|
||||
pageData:modelForm,
|
||||
}
|
||||
API_floor.updateHome(this.$route.query.id, data).then(res=> {
|
||||
if(res.code === 200) {
|
||||
this.$Message.success('保存模板成功');
|
||||
} else {
|
||||
this.$Message.error(res.message)
|
||||
}
|
||||
})
|
||||
},
|
||||
resetTemplate(){ // 还原模板
|
||||
this.getTemplateItem(this.$route.query.id)
|
||||
},
|
||||
getTemplateItem(id){ // 获取模板数据
|
||||
API_floor.getHomeData(id).then(res => {
|
||||
if (res.code === 200) {
|
||||
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:[]}
|
||||
}
|
||||
}
|
||||
|
||||
// this.$refs.modelForm.topAdvert = {};
|
||||
// this.$refs.modelForm.navList = {}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
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>
|
||||
180
manager/src/views/lili-floor-renovation/wap/advertising.vue
Normal file
180
manager/src/views/lili-floor-renovation/wap/advertising.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<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>
|
||||
import { btnWay } from "./btn.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
btnWay,
|
||||
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: {},
|
||||
mounted() {
|
||||
console.log(this.btnWay);
|
||||
},
|
||||
methods: {
|
||||
|
||||
// 点击链接
|
||||
clickLink(item) {
|
||||
this.$refs.liliDialog.open('link')
|
||||
},
|
||||
|
||||
// 关闭
|
||||
closeDecorate(index) {
|
||||
this.$nextTick(() => {
|
||||
this.btnWay.splice(index, 1);
|
||||
});
|
||||
},
|
||||
//点击图片解析成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();
|
||||
// console.log(let files = files)
|
||||
},
|
||||
},
|
||||
};
|
||||
</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>
|
||||
174
manager/src/views/lili-floor-renovation/wap/alertAdvertising.vue
Normal file
174
manager/src/views/lili-floor-renovation/wap/alertAdvertising.vue
Normal file
@@ -0,0 +1,174 @@
|
||||
<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>
|
||||
<!-- <Button type="primary" @click="addDecorate()" ghost>添加</Button> -->
|
||||
<liliDialog ref="liliDialog" :types="linkType"></liliDialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { btnWay } from "./btn.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
btnWay,
|
||||
type: "full",
|
||||
//全屏广告
|
||||
advertising: [
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/9136ecddcddf6607184fab689207e7e3.png",
|
||||
size: "612*836",
|
||||
},
|
||||
],
|
||||
linkType: "",
|
||||
};
|
||||
},
|
||||
methods: {},
|
||||
mounted() {
|
||||
console.log(this.btnWay);
|
||||
},
|
||||
methods: {
|
||||
// 点击链接
|
||||
clickLink(item) {
|
||||
this.$refs.liliDialog.open('link')
|
||||
},
|
||||
|
||||
// 关闭
|
||||
closeDecorate(index) {
|
||||
this.$nextTick(() => {
|
||||
this.btnWay.splice(index, 1);
|
||||
});
|
||||
},
|
||||
//点击图片解析成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();
|
||||
// console.log(let files = files)
|
||||
},
|
||||
},
|
||||
};
|
||||
</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>
|
||||
21
manager/src/views/lili-floor-renovation/wap/btn.js
Normal file
21
manager/src/views/lili-floor-renovation/wap/btn.js
Normal file
@@ -0,0 +1,21 @@
|
||||
/**
|
||||
* btnWay 设置悬浮按钮功能
|
||||
*/
|
||||
|
||||
export const btnWay = [
|
||||
{
|
||||
img: "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/8153f1d85f462b277d024baf812814a6.png",
|
||||
title: "",
|
||||
size:"80*80"
|
||||
},
|
||||
{
|
||||
img: "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/c72f2c4f452d72e4ad82f38c72911ce4.png",
|
||||
title: "",
|
||||
size:"80*80"
|
||||
},
|
||||
{
|
||||
img: "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/875dd6d2b1980dbccbec0895f757cdff.png",
|
||||
title: "",
|
||||
size:"80*80"
|
||||
},
|
||||
];
|
||||
147
manager/src/views/lili-floor-renovation/wap/btn.vue
Normal file
147
manager/src/views/lili-floor-renovation/wap/btn.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div class="model-view">
|
||||
<div class="model-view-content">
|
||||
<div class="content">
|
||||
<div class="wap-title">首页</div>
|
||||
<div class="draggable">
|
||||
<div class="position">
|
||||
<div class="btn-item">
|
||||
<img
|
||||
src="https://shopro-1253949872.file.myqcloud.com/uploads/20200704/f6b9c9d20d21df541ac52e9548486e1a.png"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
<div class="btn-item" v-for="(item, index) in btnWay" :key="index">
|
||||
<img :src="item.img" alt="" />
|
||||
</div>
|
||||
</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 btnWay"
|
||||
:key="index"
|
||||
>
|
||||
<div class="decorate-item-title">
|
||||
<div>图标{{ index + 1 }}</div>
|
||||
<Icon
|
||||
@click="closeDecorate(index)"
|
||||
size="20"
|
||||
color="#e1251b"
|
||||
type="md-close-circle"
|
||||
/>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="primary" @click="addDecorate()" ghost>添加</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { btnWay } from "./btn.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
btnWay,
|
||||
};
|
||||
},
|
||||
methods: {},
|
||||
mounted() {
|
||||
console.log(this.btnWay);
|
||||
},
|
||||
methods: {
|
||||
//添加设置
|
||||
addDecorate() {
|
||||
let way = {
|
||||
img: "https://picsum.photos/id/264/200/200",
|
||||
title: "标题",
|
||||
size: this.btnWay[0].size,
|
||||
};
|
||||
this.btnWay.push(way);
|
||||
},
|
||||
|
||||
// 关闭
|
||||
closeDecorate(index) {
|
||||
this.$nextTick(() => {
|
||||
this.btnWay.splice(index, 1);
|
||||
});
|
||||
},
|
||||
//点击图片解析成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();
|
||||
// console.log(let files = files)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "./style.scss";
|
||||
@import "./decorate.scss";
|
||||
.draggable {
|
||||
position: relative;
|
||||
}
|
||||
.position {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
bottom: 50px;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.btn-item {
|
||||
> img {
|
||||
margin: 4px 0;
|
||||
border-radius: 50%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
636
manager/src/views/lili-floor-renovation/wap/config.js
Normal file
636
manager/src/views/lili-floor-renovation/wap/config.js
Normal file
@@ -0,0 +1,636 @@
|
||||
|
||||
import * as API_Other from '@/api/other'
|
||||
|
||||
// 获取楼层装修信息
|
||||
export function initData(id){
|
||||
API_Other.getHomeData(id).then(res=>{
|
||||
|
||||
homeData = res
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export let homeData ={}
|
||||
|
||||
|
||||
/**
|
||||
* drawer:true 广告右侧打开抽屉中显示
|
||||
* ad_drawer:true 活动魔方右侧显示
|
||||
* notAdd: true 没有添加按钮
|
||||
* notLink: true 没有连接功能
|
||||
* notImg: true 没有选择图片功能
|
||||
* close:true 右侧关闭按钮
|
||||
*/
|
||||
export const modelData = [
|
||||
{
|
||||
type: "carousel",
|
||||
name: "图片轮播",
|
||||
img: "md-image",
|
||||
notTitle: false,
|
||||
close: true,
|
||||
options: {
|
||||
list: [
|
||||
|
||||
{
|
||||
img: "https://i.loli.net/2020/12/05/fKH4CwImpbuD5Xj.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "750*350"
|
||||
},
|
||||
{
|
||||
img: "https://i.loli.net/2020/12/05/12kleCgrSLfKoQs.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "750*350"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/343e226d0d2e2d2efcf21f31a678ba46.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "750*350"
|
||||
},
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "leftOneRightTwo",
|
||||
name: "左一右二",
|
||||
notAdd: true,
|
||||
drawer: true,
|
||||
view: "tpl_ad_list",
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*335"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/cddb5d90a4241f6235d16368534bc730.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*177"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/e047d312fb5930de972ae288b9b3bae7.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*177"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "title",
|
||||
name: "标题栏",
|
||||
img: "md-image",
|
||||
notAdd: true,
|
||||
notLink: true,
|
||||
notImg: true,
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
title: "标题",
|
||||
color: "#000000"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "leftTwoRightOne",
|
||||
name: "左二右一",
|
||||
notAdd: true,
|
||||
drawer: true,
|
||||
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/cddb5d90a4241f6235d16368534bc730.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*177"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/e047d312fb5930de972ae288b9b3bae7.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*177"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*335"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "flexThree",
|
||||
name: "三列单行",
|
||||
drawer: true,
|
||||
notAdd: true,
|
||||
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size:"226*226 (1:1)"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size:"226*226 (1:1)"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size:"226*226 (1:1)"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "flexOne",
|
||||
name: "一张大图",
|
||||
drawer: true,
|
||||
notAdd: true,
|
||||
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img:
|
||||
"https://i.loli.net/2020/12/05/8wSNWbnqujDh6HL.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size:"750*280"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "flexTwo",
|
||||
name: "两张横图",
|
||||
drawer: true,
|
||||
notAdd: true,
|
||||
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*220"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*220"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "topOneBottomTwo",
|
||||
name: "上一下二",
|
||||
drawer: true,
|
||||
notAdd: true,
|
||||
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "710*170"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*170"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*170"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "topTwoBottomOne",
|
||||
name: "上二下一",
|
||||
drawer: true,
|
||||
notAdd: true,
|
||||
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
|
||||
size: "335*170"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "335*170"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size: "710*170"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "flexFive",
|
||||
name: "五列单行",
|
||||
drawer: true,
|
||||
notAdd: true,
|
||||
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img: "https://picsum.photos/id/127/200/200",
|
||||
url: "",
|
||||
link: "",
|
||||
size:"75*75（1:1）"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size:"75*75（1:1）"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size:"75*75（1:1）"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size:"75*75（1:1）"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size:"75*75（1:1）"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "flexFour",
|
||||
name: "四列单行",
|
||||
drawer: true,
|
||||
notAdd: true,
|
||||
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size:"88*88（1:1）"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size:"88*88（1:1）"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size:"88*88（1:1）"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
size:"88*88（1:1）"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "textPicture",
|
||||
name: "文字图片",
|
||||
drawer: true,
|
||||
notAdd: true,
|
||||
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
title: "88*88（1:1）"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
title: "88*88（1:1）"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
title: "88*88（1:1）"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://shopro-1253949872.file.myqcloud.com/uploads/20200704/0669a6adec3f35d45ec66a082e03774f.png",
|
||||
url: "",
|
||||
link: "",
|
||||
title: "88*88（1:1）"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
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)"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://i.loli.net/2020/12/05/JXR5K3sbIeENjqH.png",
|
||||
url: "",
|
||||
link: "",
|
||||
title: "标题",
|
||||
size: "88*88 (1:1)"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://i.loli.net/2020/12/05/KlZfnCFIdEV231Y.png",
|
||||
url: "",
|
||||
link: "",
|
||||
title: "标题",
|
||||
size: "88*88 (1:1)"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://i.loli.net/2020/12/05/GfmMyN2wrUVIlci.png",
|
||||
url: "",
|
||||
link: "",
|
||||
title: "标题",
|
||||
size: "88*88 (1:1)"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://i.loli.net/2020/12/05/eznDa3iNby5FkYL.png",
|
||||
url: "",
|
||||
link: "",
|
||||
title: "标题",
|
||||
size: "88*88 (1:1)"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
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: [
|
||||
{
|
||||
titleWay: [
|
||||
{
|
||||
title: "精选",
|
||||
desc: "电子推荐"
|
||||
},
|
||||
{
|
||||
title: "实惠",
|
||||
desc: "便宜好货"
|
||||
},
|
||||
{
|
||||
title: "进口",
|
||||
desc: "国际自营"
|
||||
},
|
||||
{
|
||||
title: "推荐",
|
||||
desc: "喂奶推荐"
|
||||
}
|
||||
],
|
||||
listWay: [
|
||||
{
|
||||
img:
|
||||
"https://api.7wpp.com/uploads/20200930/78d480fa1025394b9be24ef5eef17489.png",
|
||||
price: "120",
|
||||
title:
|
||||
" 微软 (Microsoft) Xbox 无线控制器/手柄 湛蓝色 | 3.5mm耳机接口蓝牙连接 Xbox主机电脑平板通用",
|
||||
type: "精选"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://i.loli.net/2020/12/05/c9mptI5Pg8qJ6ny.png",
|
||||
title:
|
||||
"宏碁(acer) DP高清线1.2版 2K*4KDisplayPort公对公接线笔记本电脑显卡连接显示器视频线1.5米",
|
||||
price: "190",
|
||||
type: "精选"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://i.loli.net/2020/12/05/QsSYIPF743Hgf8q.png",
|
||||
title:
|
||||
"宏碁(acer) DP高清线1.2版 2K*4KDisplayPort公对公接线笔记本电脑显卡连接显示器视频线1.5米",
|
||||
price: "10",
|
||||
type: "精选"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://i.loli.net/2020/12/05/VTwDYcLWnukGxat.png",
|
||||
title:
|
||||
"宏碁(acer) DP高清线1.2版 2K*4KDisplayPort公对公接线笔记本电脑显卡连接显示器视频线1.5米",
|
||||
price: "190",
|
||||
type: "精选"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://i.loli.net/2020/12/05/SIFwaVpE4YJAuQf.png",
|
||||
title:
|
||||
"宏碁(acer) DP高清线1.2版 2K*4KDisplayPort公对公接线笔记本电脑显卡连接显示器视频线1.5米",
|
||||
price: "10",
|
||||
type: "精选"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://api.7wpp.com/uploads/20201110/86d4dedc0d88ce4b1329b02a4b87fe7d.jpg",
|
||||
title:
|
||||
"宏碁(acer) DP高清线1.2版 2K*4KDisplayPort公对公接线笔记本电脑显卡连接显示器视频线1.5米",
|
||||
price: "190",
|
||||
type: "精选"
|
||||
},
|
||||
{
|
||||
img:
|
||||
"https://api.7wpp.com/uploads/20200930/0d9102613d7b7e738c83504f80194cd4.jpg",
|
||||
title:
|
||||
"宏碁(acer) DP高清线1.2版 2K*4KDisplayPort公对公接线笔记本电脑显卡连接显示器视频线1.5米",
|
||||
price: "10",
|
||||
type: "精选"
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
notAdd: true,
|
||||
notImg: true,
|
||||
type: "joinGroup",
|
||||
name: "拼团活动",
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
title: "测试拼团"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
notAdd: true,
|
||||
notImg: true,
|
||||
type: "integral",
|
||||
name: "积分活动",
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
title: "测试积分"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
notAdd: true,
|
||||
notImg: true,
|
||||
type: "spike",
|
||||
name: "秒杀活动",
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
title: "测试秒杀"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
notAdd: true,
|
||||
notImg: true,
|
||||
type: "group",
|
||||
name: "团购活动",
|
||||
img: "md-image",
|
||||
options: {
|
||||
list: [
|
||||
{
|
||||
title: "测试团购"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
];
|
||||
117
manager/src/views/lili-floor-renovation/wap/decorate.scss
Normal file
117
manager/src/views/lili-floor-renovation/wap/decorate.scss
Normal file
@@ -0,0 +1,117 @@
|
||||
|
||||
/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: 20px 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
276
manager/src/views/lili-floor-renovation/wap/decorate.vue
Normal file
276
manager/src/views/lili-floor-renovation/wap/decorate.vue
Normal file
@@ -0,0 +1,276 @@
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<!-- 卡片集合 -->
|
||||
<div class="decorate-list" v-if="
|
||||
(res.type != 'tpl_ad_list' && res.type != 'tpl_activity_list') ||
|
||||
res.drawer
|
||||
">
|
||||
<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" 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.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">
|
||||
<div class="decorate-view-title">菜单标题</div>
|
||||
<div>
|
||||
<Input v-model="item.title" style="width: 200px" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- 填写链接 -->
|
||||
|
||||
<div class="decorate-view" v-if="!res.notLink">
|
||||
<div class="decorate-view-title">选择链接</div>
|
||||
<div v-if="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>
|
||||
<Button ghost size="small" type="primary" @click="clickLink(item,index)">选择链接</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button v-if="
|
||||
res.type != 'tpl_ad_list' &&
|
||||
res.type != 'tpl_activity_list' &&
|
||||
!res.notAdd
|
||||
" type="primary" @click="addDecorate()" 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 "@/views/lili-dialog/wap.js"; // 选择链接的类型
|
||||
export default {
|
||||
components: {
|
||||
ossManage
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ways,
|
||||
picModelFlag: false, //图片选择器
|
||||
linkType: "goods", // dialog弹窗口类型
|
||||
styleFlag: false, //广告魔方开关
|
||||
selectedLinkIndex: "", //选择链接的索引
|
||||
modelData,
|
||||
selectedGoods: "",
|
||||
selectedLinks: "",
|
||||
modelList: "",
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
res: {
|
||||
handler: (val) => {},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
props: ["res"],
|
||||
mounted() {},
|
||||
methods: {
|
||||
// 选择风格
|
||||
selectStyle() {
|
||||
this.styleFlag = !this.styleFlag;
|
||||
},
|
||||
|
||||
// 回调选择的链接
|
||||
selectedLink(val) {
|
||||
this.selectedLinks.url = val;
|
||||
|
||||
console.log(this.selectedLinks);
|
||||
},
|
||||
|
||||
// 回调的商品信息
|
||||
selectedGoodsData(val) {
|
||||
if (!val) return false;
|
||||
val.forEach((item) => {
|
||||
delete item.selected;
|
||||
item.img = item.thumbnail;
|
||||
item.title = item.goodsName;
|
||||
item.type = this.selectedGoods.title;
|
||||
});
|
||||
this.res.options.list[0].listWay = this.res.options.list[0].listWay.concat(
|
||||
val
|
||||
);
|
||||
|
||||
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.goodsFlag = flag;
|
||||
this.$refs.liliDialog.flag = true;
|
||||
},
|
||||
|
||||
// 点击链接赋值一个唯一值，并将当前选择的模块赋值
|
||||
clickLink(val, index) {
|
||||
// this.selectedLinkIndex = index
|
||||
// val.___only = new Date().getTime(), //赋值当前时间戳 唯一
|
||||
this.selectedLinks = val;
|
||||
|
||||
console.log(this.selectedLinks);
|
||||
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() {
|
||||
let way = {
|
||||
img: "https://picsum.photos/id/264/200/200",
|
||||
title: "标题",
|
||||
link: "",
|
||||
url: "",
|
||||
size: this.res.options.list[0].size,
|
||||
};
|
||||
this.res.options.list.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;
|
||||
|
||||
// console.log(let files = files)
|
||||
},
|
||||
|
||||
// 关闭
|
||||
closeDecorate(index) {
|
||||
this.$nextTick(() => {
|
||||
this.res.options.list.splice(index, 1);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import "./decorate.scss";
|
||||
</style>
|
||||
17
manager/src/views/lili-floor-renovation/wap/index.js
Normal file
17
manager/src/views/lili-floor-renovation/wap/index.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import index from './index.vue' //首页
|
||||
import btn from './btn.vue' //按钮
|
||||
import advertising from './advertising.vue' //全屏活动
|
||||
import alertAdvertising from './alertAdvertising.vue' //弹窗活动
|
||||
|
||||
|
||||
|
||||
const templates = {
|
||||
index,
|
||||
btn,
|
||||
advertising,
|
||||
alertAdvertising
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default templates
|
||||
211
manager/src/views/lili-floor-renovation/wap/index.vue
Normal file
211
manager/src/views/lili-floor-renovation/wap/index.vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<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"
|
||||
: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'
|
||||
export default {
|
||||
components: {
|
||||
Draggable,
|
||||
decorate,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
templates,
|
||||
modelData,
|
||||
qrcode: "",
|
||||
selected: 0,
|
||||
contentData: {
|
||||
list: [],
|
||||
},
|
||||
decorateData: "",
|
||||
};
|
||||
},
|
||||
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)
|
||||
})
|
||||
},
|
||||
handleSpinShow() {
|
||||
this.$Spin.show();
|
||||
setTimeout(() => {
|
||||
this.$Spin.hide();
|
||||
}, 3000);
|
||||
},
|
||||
|
||||
// 中间组件拖动，右侧数据绑定不变
|
||||
handleContentlEnd(evt) {
|
||||
const { newIndex } = evt;
|
||||
this.handleComponent(this.contentData.list[newIndex], newIndex);
|
||||
},
|
||||
|
||||
// 关闭楼层装修
|
||||
closeComponent(index) {
|
||||
this.$nextTick(() => {
|
||||
this.decorateData = "";
|
||||
|
||||
console.log(this.contentData.list.length);
|
||||
// 如果当前楼层不为一
|
||||
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) {
|
||||
console.warn(val)
|
||||
this.selected = index;
|
||||
this.$set(this, "decorateData", val);
|
||||
},
|
||||
|
||||
handleDrawer(val) {
|
||||
let newIndex = this.selected;
|
||||
|
||||
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>
|
||||
44
manager/src/views/lili-floor-renovation/wap/main.vue
Normal file
44
manager/src/views/lili-floor-renovation/wap/main.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<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",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
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>
|
||||
231
manager/src/views/lili-floor-renovation/wap/navbar.vue
Normal file
231
manager/src/views/lili-floor-renovation/wap/navbar.vue
Normal file
@@ -0,0 +1,231 @@
|
||||
<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">
|
||||
<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";
|
||||
|
||||
import QRCode from "qrcodejs2";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
progress: true,
|
||||
num: 20,
|
||||
saveDialog: false,
|
||||
way: [
|
||||
{
|
||||
title: "首页",
|
||||
name: "index",
|
||||
selected: true,
|
||||
},
|
||||
{
|
||||
title: "悬浮按钮",
|
||||
name: "btn",
|
||||
selected: false,
|
||||
},
|
||||
{
|
||||
title: "全屏广告",
|
||||
name: "advertising",
|
||||
selected: false,
|
||||
},
|
||||
{
|
||||
title: "弹窗广告",
|
||||
name: "alertAdvertising",
|
||||
selected: false,
|
||||
},
|
||||
],
|
||||
qrcode: "",
|
||||
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
|
||||
? (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,
|
||||
})
|
||||
.then((res) => {
|
||||
this.num = 50;
|
||||
if (res.code == 200) {
|
||||
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.code == 200) {
|
||||
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) => {});
|
||||
},
|
||||
|
||||
creatQrCode() {
|
||||
if (this.qrcode) {
|
||||
return false;
|
||||
}
|
||||
// this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
|
||||
// text: "https://www.baidu.com", // 需要转换为二维码的内容
|
||||
// width: 100,
|
||||
// height: 100,
|
||||
// colorDark: "#000000",
|
||||
// colorLight: "#ffffff",
|
||||
// correctLevel: QRCode.CorrectLevel.H,
|
||||
// });
|
||||
},
|
||||
},
|
||||
};
|
||||
</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>
|
||||
101
manager/src/views/lili-floor-renovation/wap/style.scss
Normal file
101
manager/src/views/lili-floor-renovation/wap/style.scss
Normal file
@@ -0,0 +1,101 @@
|
||||
|
||||
.model-view {
|
||||
display: flex;
|
||||
.model-view-menu {
|
||||
flex: 1.5;
|
||||
|
||||
> .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: .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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,44 @@
|
||||
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_join_group from "./tpl_join_group";
|
||||
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_goods from "./tpl_goods";
|
||||
export default {
|
||||
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,
|
||||
joinGroup: tpl_join_group,
|
||||
flexOne: tpl_flex_one,
|
||||
goods: tpl_goods,
|
||||
integral:tpl_integral,
|
||||
spike:tpl_spike,
|
||||
group:tpl_group,
|
||||
tpl_ad_list,
|
||||
tpl_activity_list
|
||||
};
|
||||
@@ -0,0 +1,31 @@
|
||||
.image-mode {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
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,35 @@
|
||||
<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
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log(this.res);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.carousel,
|
||||
.image-mode {
|
||||
height: 150px;
|
||||
}
|
||||
</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="">
|
||||
<img class="image-mode" :src="res.list[4].img" alt="">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
title: "五列单行图片模块",
|
||||
props: ["res"],
|
||||
mounted() {
|
||||
console.log(this.res);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.layout {
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-size: cover;
|
||||
}
|
||||
img{
|
||||
width: 67px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,32 @@
|
||||
|
||||
<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"],
|
||||
mounted() {
|
||||
console.log(this.res);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.layout {
|
||||
height: 84px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-size: cover;
|
||||
}
|
||||
img{
|
||||
width: 84px;
|
||||
}
|
||||
</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,31 @@
|
||||
|
||||
<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"],
|
||||
mounted() {
|
||||
console.log(this.res);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.layout {
|
||||
height: 110px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-size: cover;
|
||||
}
|
||||
img{
|
||||
width: 111px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,39 @@
|
||||
<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"],
|
||||
mounted () {
|
||||
|
||||
}
|
||||
};
|
||||
</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,154 @@
|
||||
<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="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,
|
||||
val: "精选",
|
||||
},
|
||||
};
|
||||
},
|
||||
props: ["res"],
|
||||
mounted() {},
|
||||
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: #e4393c !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: #e4393c;
|
||||
}
|
||||
}
|
||||
}
|
||||
.goods-icon {
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
@@ -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,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,37 @@
|
||||
|
||||
<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"],
|
||||
mounted() {
|
||||
console.log(this.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,38 @@
|
||||
|
||||
<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" :src="res.list[2].img" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
title: "左二右一",
|
||||
props: ["res"],
|
||||
mounted() {
|
||||
console.log(this.res);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.layout {
|
||||
height: 167px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,38 @@
|
||||
<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;
|
||||
flex-wrap: wrap;
|
||||
|
||||
>.menu-item{
|
||||
text-align: center;
|
||||
width: 63px;
|
||||
margin:10px 0;
|
||||
}
|
||||
}
|
||||
.menu-img{
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
.menu-title{
|
||||
font-size: 12px;
|
||||
}
|
||||
</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>
|
||||
@@ -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,94 @@
|
||||
|
||||
<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"],
|
||||
mounted() {
|
||||
console.log(this.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>
|
||||
@@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<div class="layout">
|
||||
<div class="background">
|
||||
<div class="title" :style="{ color: res.list[0].color }">
|
||||
{{ res.list[0].title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
title: "标题栏",
|
||||
props: ["res"],
|
||||
mounted() {
|
||||
console.log(this.res);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "./tpl.scss";
|
||||
.background {
|
||||
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: 15px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,50 @@
|
||||
|
||||
<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"],
|
||||
mounted() {
|
||||
console.log(this.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,50 @@
|
||||
<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"],
|
||||
mounted() {
|
||||
console.log(this.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,16 @@
|
||||
<template>
|
||||
<div class="layout">请选择风格</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
destroyed(){
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
@import './tpl.scss';
|
||||
.layout{
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
223
manager/src/views/lili-floor-renovation/wap/wapList.vue
Normal file
223
manager/src/views/lili-floor-renovation/wap/wapList.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<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)" @on-cancel="cancel">
|
||||
<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" />
|
||||
|
||||
</Card>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
import * as API_Other from "@/api/other.js";
|
||||
// import region from '@/views/lili-components/multiple-region'
|
||||
// import marketing from '@/views/lili-dialog/template/marketing'
|
||||
// import Region from '@/views/lili-components/multiple-region'
|
||||
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: "",
|
||||
order: "asc",
|
||||
pageType: "INDEX",
|
||||
pageClientType: "H5",
|
||||
},
|
||||
total: "",
|
||||
list: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
params: {
|
||||
handler(val) {
|
||||
// this.pageNumber++;
|
||||
this.init();
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
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;
|
||||
console.log(this.list);
|
||||
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",
|
||||
});
|
||||
},
|
||||
|
||||
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: #f5f7fa;
|
||||
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(3n) {
|
||||
background: #f5f7fa;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user