zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 🎨 新增加专题功能

master
学习很差啦 2022-10-11 17:24:37 +08:00
parent 6007dc57d5
commit a70c741990
11 changed files with 504 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
manager/src/api/other.js
View File

@ -90,3 +90,12 @@ export const getMemberFeedbackDetail = (id) => {
export const getMemberMessage = (params) => {
return getRequest(`/other/memberMessage`, params);
};
// 弹窗广告
export const getOpenHomeData = params => {
return getRequest(`/other/pageData/pageType/${params}`);
};
// 保存修改弹窗广告
export const addOpenHomeData = params => {
return postRequest(`/other/pageData/pageType/${params}`);
};

2
manager/src/components/lili-dialog/template/index.js
View File

@ -5,6 +5,7 @@ import marketing from './marketing.vue'
import pages from './pages.vue'
import goods from '../goods-dialog.vue'
import other from './other.vue'
import special from './special.vue'
export default {
pages,
marketing,
@ -12,4 +13,5 @@ export default {
category,
goods,
other,
special
}

167
manager/src/components/lili-dialog/template/special.vue Normal file
View File

@ -0,0 +1,167 @@
<template>
<div class="wrapper">
<div class="content">
<div >
<div class="tables">
<Table
border
height="350"
tooltip
:loading="loading"
:columns="columns"
:data="data"
>
</Table>
<Page
@on-change="
(val) => {
params.pageNumber = val;
}
"
:current="params.pageNumber"
:page-size="params.pageSize"
class="mt_10"
:total="Number(totals)"
size="small"
show-elevator
/>
</div>
</div>
</div>
</div>
</template>
<script>
import { getHomeList } from "@/api/other.js";
export default {
data() {
return {
loading: true, //表格请求数据为true
promotionList: "", // 活动列表
selectedIndex: 0, //左侧菜单选择
promotions: "", //选中的活动key
index: 999, // 已选下标
data:[],
params: {
sort: "createTime",
order: "desc",
pageClientType: "H5",
pageNumber: 1,
pageSize: 10,
pageType: "SPECIAL",
},
total: 0, // 表单数据总数
columns: [
{
title: "专题名称",
key: "name",
tooltip: true,
// slot: 'name'
// width: 200,
},
{
title: "操作",
key: "action",
fixed: "right",
width: 100,
render: (h, params) => {
return h("div", [
h(
"Button",
{
props: {
type: this.index == params.index ? "primary" : "",
size: "small",
},
on: {
click: () => {
this.index = params.index;
params.row = {...params.row,pageType:'special'}
this.$emit("selected", [params.row]);
},
},
},
this.index == params.index ? "已选" : "选择"
),
]);
},
},
],
};
},
mounted() {
this.init();
},
methods: {
// 获取话题的标题
async init() {
let res = await getHomeList(this.params);
if (res.success) {
this.loading = false;
this.data= res.result.records
} else {
this.loading = false;
}
},
},
};
</script>
<style lang="scss" scoped>
img {
max-width: 100% !important;
}
.search {
width: 300px;
}
.page {
margin-top: 2vh;
text-align: right;
}
.time {
font-size: 12px;
}
.tables {
height: 400px;
margin-top: 20px;
overflow: auto;
width: 100%;
}
/deep/ .ivu-table-wrapper {
width: 100%;
}
.list {
margin: 0 1.5%;
height: 400px;
overflow: auto;
> .list-item {
padding: 10px;
transition: 0.35s;
cursor: pointer;
}
.list-item:hover {
background: #ededed;
}
}
.list {
flex: 1;
width: auto;
}
.content {
overflow: hidden;
flex: 4;
}
.active {
background: #ededed;
}
.wrapper {
overflow: hidden;
}
.search-views {
display: flex;
> * {
margin: 0 4px;
}
}
</style>

5
manager/src/components/lili-dialog/wap.js
View File

@ -25,6 +25,11 @@ export default [
url: "3",
name: "pages"
},
{
title: "专题",
url: "4",
name: "special"
},
{
title: "其他",
url: "3",

3
manager/src/store/index.js
View File

@ -10,7 +10,8 @@ Vue.use(Vuex);
const store = new Vuex.Store({
state: {
// 状态
openStyleStore: "", // 移动端楼层装修中选择风格存储
openStoreId:"",
notices: "" //通知提示信息
},
mutations: {

72
manager/src/views/page-decoration/wap/advertising.vue
View File

@ -70,17 +70,24 @@
</div>
</div>
<!-- <Button type="primary" @click="addDecorate()" ghost>添加</Button> -->
<liliDialog ref="liliDialog" :types="linkType"></liliDialog>
<liliDialog ref="liliDialog" @selectedLink="selectedLink" :types="linkType"></liliDialog>
</div>
<Modal width="1200px" v-model="picModelFlag">
<ossManage @callback="callbackSelected" ref="ossManage" />
</Modal>
</div>
</div>
</template>
<script>
import ossManage from "@/views/sys/oss-manage/ossManage";
import * as API_Other from "@/api/other.js";
export default {
components: {
ossManage,
},
data() {
return {
picModelFlag: false, //图片选择器
type: "full", // 是否全屏
//全屏广告
@ -91,31 +98,60 @@ export default {
size: "750*1624",
},
],
selectedLinks: {},
linkType: "", // 选择类型
};
},
watch: {
advertising: {
handler(val) {
this.$store.state.openStyleStore = val;
console.log(
"this.$store.state.openStyleStore",
this.$store.state.openStyleStore
);
},
deep: true,
},
},
mounted() {
this.openPage();
},
methods: {
openPage() {
const alertType = this.$route.query.pagetype;
const pageType = {
INDEX: "INDEX",
ALERT: "OPEN_SCREEN_PAGE",
OPEN_SCREEN_ANIMATION: "OPEN_SCREEN_ANIMATION",
}[alertType ? alertType : "INDEX"];
API_Other.getOpenHomeData(pageType).then((res) => {
this.$store.state.openStoreId = res.result.id;
res.result.pageData
? this.$set(this, "advertising", [JSON.parse(res.result.pageData)])
: "";
});
},
// 点击链接
clickLink(item) {
this.$refs.liliDialog.open('link')
},
//点击图片解析成base64
changeFile(item, index) {
const file = document.getElementById("files" + index).files[0];
if (file == void 0) return false;
const reader = new FileReader();
reader.readAsDataURL(file);
this.$nextTick((res) => {
reader.onload = (e) => {
item.img = e.target.result;
};
});
// 回调选择的链接
selectedLink(val) {
this.selectedLinks.url = val;
this.advertising[0].config = val;
},
// 点击选择照片
handleClickFile(item, index) {
document.getElementById("files" + index).click();
},
handleClickFile() {
this.$refs.ossManage.selectImage = true;
this.picModelFlag = true;
}, // 图片选择器回显
callbackSelected(val) {
this.picModelFlag = false;
this.advertising[0].img = val.url;
}
},
};
</script>

70
manager/src/views/page-decoration/wap/alertAdvertising.vue
View File

@ -48,7 +48,7 @@
@click="handleClickFile(item, index)"
ghost
type="primary"
>选择照片</Button
>选择链接</Button
>
</div>
</div>
@ -69,15 +69,28 @@
</div>
</div>
</div>
<liliDialog ref="liliDialog" :types="linkType"></liliDialog>
<liliDialog
ref="liliDialog"
@selectedLink="selectedLink"
:types="linkType"
></liliDialog>
</div>
<Modal width="1200px" v-model="picModelFlag">
<ossManage @callback="callbackSelected" ref="ossManage" />
</Modal>
</div>
</div>
</template>
<script>
import ossManage from "@/views/sys/oss-manage/ossManage";
import * as API_Other from "@/api/other.js";
export default {
components: {
ossManage,
},
data() {
return {
picModelFlag: false, //图片选择器
type: "full", // 展示方式
//全屏广告
advertising: [
@ -88,9 +101,57 @@ export default {
},
],
linkType: "", // 选择类型
selectedLinks: {},
};
},
watch: {
advertising: {
handler(val) {
this.$store.state.openStyleStore = val;
console.log(
"this.$store.state.openStyleStore",
this.$store.state.openStyleStore
);
},
deep: true,
},
},
mounted() {
this.openPage();
},
methods: {
// 回调选择的链接
selectedLink(val) {
this.selectedLinks.url = val;
this.advertising[0].config = val;
},
openPage() {
const alertType = this.$route.query.pagetype;
const pageType = {
INDEX: "INDEX",
ALERT: "OPEN_SCREEN_PAGE",
OPEN_SCREEN_ANIMATION: "OPEN_SCREEN_ANIMATION",
}[alertType ? alertType : "INDEX"];
API_Other.getOpenHomeData(pageType).then((res) => {
this.$store.state.openStoreId = res.result.id;
res.result.pageData
? this.$set(this, "advertising", [JSON.parse(res.result.pageData)])
: "";
});
},
// 图片选择器回显
callbackSelected(val) {
this.picModelFlag = false;
this.advertising[0].img = val.url;
},
// 点击选择图片
handleClickFile(item, index) {
this.$refs.ossManage.selectImage = true;
this.picModelFlag = true;
},
// 点击链接
clickLink(item) {
this.$refs.liliDialog.open('link')
@ -107,10 +168,7 @@ export default {
};
});
},
// 点击选择照片
handleClickFile(item, index) {
document.getElementById("files" + index).click();
},
},
};
</script>

50
manager/src/views/page-decoration/wap/decorate.vue
View File

@ -139,6 +139,20 @@
</div>
</div>
</div>
<div class="decorate-view" v-if="res.type == 'carousel'">
<div class="decorate-view-title">
<Button
@click="slotBanner(res, item, index, 'up')"
style="margin-right: 10px"
size="small"
>上移</Button
><Button
@click="slotBanner(res, item, index, 'down')"
size="small"
>下移</Button
>
</div>
</div>
<!-- 选择照片 -->
<div class="decorate-view" v-if="!res.notImg">
<div class="decorate-view-title">选择照片</div>
@ -325,9 +339,15 @@
{{
ways.find((e) => {
return item.url.___type == e.name;
}).title
}) ? ways.find((e) => {
return item.url.___type == e.name;
}).title : '发现'
}}
-
<!-- 当选择完链接之后的专题名称 -->
<span v-if="item.url.pageType == 'special'">
{{ item.url.name }}</span
>
<!-- 当选择完链接之后的商品名称 -->
<span v-if="item.url.___type == 'goods'">
{{ item.url.goodsName }}</span
@ -450,6 +470,32 @@ export default {
},
props: ["res"],
methods: {
slotBanner(val, key, index, down) {
console.log(val);
if (down == "down") {
this.downData(val.options.list, index);
} else {
this.upData(val.options.list, index);
}
},
upData(arr, index) {
let newArr = [];
if (arr.length > 1 && index !== 0) {
newArr = this.swapItems(arr, index, index - 1);
}
return newArr;
},
swapItems(arr, index1, index2) {
arr[index1] = arr.splice(index2, 1, arr[index1])[0];
return arr;
},
downData(arr,index) {
let newArr = [];
if (arr.length > 1 && index !== arr.length - 1) {
newArr = this.swapItems(arr, index, index + 1);
}
return newArr;
},
// 改变横纵切换title内容
changeDirection(val, data) {
if (val == "horizontal") {
@ -558,7 +604,7 @@ export default {
title: "标题",
link: "",
url: "",
size: this.res.options.list[0].size,
size: this.res.options.list[0] ? this.res.options.list[0].size : "",
model: "link",
};
this.res.options.list.push(way);

12
manager/src/views/page-decoration/wap/main.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="box">
<!-- 顶部栏 -->
<navbar @selected="selected" />
<navbar @selected="selected" :pagetype="pagetype" />
<component :is="layout[name]"></component>
</div>
@ -17,8 +17,18 @@ export default {
return {
layout, // 装修模块
name: "index", // 装修的页面
pagetype: "INDEX",
};
},
mounted() {
if (this.$route.query.pagetype == "ALERT") {
this.name = "alertAdvertising";
}
if (this.$route.query.pagetype == "OPEN_SCREEN_ANIMATION") {
this.name = "advertising";
}
this.pagetype = this.$route.query.pagetype;
},
methods: {
selected(val) { // 顶部栏点击切换
this.name = val;

112
manager/src/views/page-decoration/wap/navbar.vue
View File

@ -66,16 +66,16 @@ export default {
name: "index",
selected: true,
},
// {
// title: "全屏广告",
// name: "advertising",
// selected: false,
// },
// {
// title: "弹窗广告",
// name: "alertAdvertising",
// selected: false,
// },
{
title: "全屏广告",
name: "advertising",
selected: false,
},
{
title: "弹窗广告",
name: "ALERT",
selected: false,
},
],
submitWay: {
@ -86,7 +86,23 @@ export default {
},
};
},
watch: {},
watch: {
pagetype: {
handler(val) {
this.way.length = 0;
if (val == "INDEX") {
this.way.push({ title: "首页", name: "index", selected: true });
} else if (val == "SPECIAL") {
this.way.push({ title: "专题", name: "special", selected: true });
} else if (val == "ALERT") {
this.way.push({ title: "开屏广告", name: "alert", selected: true });
}else if (val == "OPEN_SCREEN_ANIMATION") {
this.way.push({ title: "app开屏页面", name: "OPEN_SCREEN_ANIMATION", selected: true });
}
},
immediate: true,
},
},
mounted() {},
methods: {
clickBtn(val) {
@ -106,7 +122,10 @@ export default {
// 填写是否发布，模板名称之后保存
save() {
if (this.$store.state.styleStore == void 0) {
if (
this.$store.state.styleStore == void 0 &&
(this.$route.query.pagetype && this.$route.query.pagetype != 'ALERT' && this.$route.query.pagetype != 'OPEN_SCREEN_ANIMATION')
) {
this.$Message.error("请装修楼层");
return false;
}
@ -117,18 +136,26 @@ export default {
this.submitWay.pageData = JSON.stringify(this.$store.state.styleStore);
this.submitWay.pageType = "INDEX";
this.submitWay.pageType = this.$route.query.pagetype || "INDEX";
// this.submitWay.pageType = this.pagetype;
this.$route.query.id ? this.update() : this.submit(this.submitWay);
if (this.$route.query.pagetype == 'ALERT' || this.$route.query.pagetype == 'OPEN_SCREEN_ANIMATION') {
this.update(this.submitWay);
} else {
this.$route.query.id ? this.updateHome() : this.submit(this.submitWay);
}
// this.$route.query.id ? this.update() : this.submit(this.submitWay);
},
// 更新
update() {
updateHome() {
this.progress = false;
API_Other.updateHome(this.$route.query.id, {
pageData: JSON.stringify(this.$store.state.styleStore),
name: this.submitWay.name,
pageShow: this.submitWay.pageShow,
pageType: "INDEX",
pageType: this.submitWay.pageType,
pageClientType: "H5",
})
.then((res) => {
@ -139,7 +166,7 @@ export default {
setTimeout(() => {
this.saveDialog = false;
this.$Message.success("修改成功");
this.goback();
this.goBack();
}, 1000);
} else {
this.saveDialog = false;
@ -150,8 +177,57 @@ export default {
.catch((error) => {});
},
// 更新
update(submitWay) {
console.log(this.$store.state.openStyleStore[0], "123123123");
if (this.$store.state.openStyleStore == void 0) {
this.$Message.error("请装修楼层!");
return false;
}
this.progress = false;
let id = this.$route.query.id;
const pagetype = this.$route.query.pagetype;
console.log(this.$store.state.openStyleStore, submitWay);
const pageType = {
INDEX: "INDEX",
ALERT: "OPEN_SCREEN_PAGE",
OPEN_SCREEN_ANIMATION: "OPEN_SCREEN_ANIMATION",
}[pagetype ? pagetype : "INDEX"];
if (pagetype) {
submitWay.pageData = JSON.stringify(
this.$store.state.openStyleStore[0]
);
submitWay.pageType = pageType;
id = this.$store.state.openStoreId;
}
API_Other.updateHome(id, submitWay)
.then((res) => {
this.num = 50;
if (res.success) {
this.num = 80;
/**制作保存成功动画¸ */
setTimeout(() => {
this.saveDialog = false;
this.$Message.success("修改成功");
this.goBack();
}, 1000);
} else {
this.saveDialog = false;
this.$Message.error("修改失败，请稍后重试");
}
console.log(res);
})
.catch((error) => {});
},
// 返回查询数据页面
goback() {
goBack() {
this.$router.push({
path: "/decoration/wap",
});
@ -169,7 +245,7 @@ export default {
setTimeout(() => {
this.saveDialog = false;
this.$Message.success("保存成功");
this.goback();
this.goBack();
}, 1000);
} else {
this.progress = true;

62
manager/src/views/page-decoration/wap/wapList.vue
View File

@ -1,8 +1,13 @@
<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
: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">
@ -70,6 +75,14 @@ export default {
type: "SPECIAL",
title: "专题",
},
// {
// type: "ALERT",
// title: "开屏广告",
// },
// {
// type: "OPEN_SCREEN_ANIMATION",
// title: "app开屏页面",
// },
],
params: { // 请求参数
pageNumber: 1,
@ -84,23 +97,38 @@ export default {
};
},
watch: {
params: {
handler(val) {
// this.pageNumber++;
this.init();
},
deep: true,
},
// params: {
// handler(val) {
// // this.pageNumber++;
// this.init();
// },
// deep: true,
// },
},
mounted() {
this.init();
},
methods: {
// 切换tab
clickType(val,index) {
this.params.pageNumber = 1
this.selectedIndex = index
this.params.pageType = val;
clickType(val, index) {
if (val == "ALERT") {
this.$router.push({
path: "/floorList/main",
query: { pagetype: val },
});
return;
} else if (val == "OPEN_SCREEN_ANIMATION") {
this.$router.push({
path: "/floorList/main",
query: { pagetype: val },
});
return;
} else {
this.params.pageNumber = 1;
this.selectedIndex = index;
this.params.pageType = val;
this.init();
}
},
// 是否发布
changeSwitch(item) {
@ -138,13 +166,19 @@ export default {
handleEdit(val) {
this.$router.push({
path: "/floorList/main",
query: { id: val.id, name: val.name, type: val.pageShow },
query: {
id: val.id,
name: val.name,
type: val.pageShow,
pagetype: this.params.pageType,
},
});
},
// 添加模板
handleAdd() {
this.$router.push({
path: "/floorList/main",
query: { pagetype: this.params.pageType },
});
},
// 分页 改变页数