mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-25 04:15:52 +08:00
commit message
This commit is contained in:
Chopper
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