mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-21 18:35:53 +08:00
修改一些发现的问题，新增秒杀活动设置，优惠券动态时间 以及 精准发圈用户和小程序直播页面
This commit is contained in:
lemon橪
@@ -1,254 +0,0 @@
|
||||
<template>
|
||||
<div class="floor-list">
|
||||
<div class="list">
|
||||
<div class="template-saved" v-for="item in templateList" :key="item.id">
|
||||
<div class="template-title">
|
||||
<span>{{ item.name }}</span>
|
||||
<span :class="{ 'theme-color': item.pageShow == 'OPEN' }">{{
|
||||
item.pageShow == "OPEN" ? "已发布" : "未发布"
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="template-content">
|
||||
<!-- <img :src="item.img || require(`@/assets/img-error.png`)" alt=""> -->
|
||||
<div class="cover">
|
||||
<Button icon="md-color-palette" @click="decorate(item.id)"
|
||||
>装修</Button
|
||||
>
|
||||
<Button icon="md-pricetags" @click="Template(item)">编辑</Button>
|
||||
<Button
|
||||
icon="md-send"
|
||||
v-if="item.pageShow == 'CLOSE'"
|
||||
@click="releaseTemplate(item.id)"
|
||||
>发布</Button
|
||||
>
|
||||
<Button
|
||||
icon="md-trash"
|
||||
v-if="item.pageShow == 'CLOSE'"
|
||||
@click="delTemplate(item.id)"
|
||||
>删除</Button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="new-template" @click="createTemp">
|
||||
<Icon type="md-add" />
|
||||
<div>新建模板</div>
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
v-model="showModal"
|
||||
title="模板设置"
|
||||
draggable
|
||||
width="600"
|
||||
:z-index="100"
|
||||
:loading="loading"
|
||||
mask-closable="false"
|
||||
@on-ok="newTemplate"
|
||||
@on-cancel="showModal = false"
|
||||
>
|
||||
<Form ref="form" :model="formData" :rules="rules" :label-width="80">
|
||||
<FormItem label="模板名称" prop="name">
|
||||
<Input v-model="formData.name" placeholder="请输入模板名称" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
</Modal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as API_floor from "@/api/other.js";
|
||||
export default {
|
||||
name: "floorList",
|
||||
data() {
|
||||
return {
|
||||
showModal: false,
|
||||
templateList: [],
|
||||
formData: {
|
||||
status: false,
|
||||
name: "",
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: "请输入模板名称", trigger: "blur" }],
|
||||
},
|
||||
loading: true,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
let height = window.innerHeight - 150;
|
||||
document.querySelector(".floor-list").style.height = height + "px";
|
||||
this.getTemplateList();
|
||||
},
|
||||
methods: {
|
||||
newTemplate() {
|
||||
// 添加，编辑模板
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (valid) {
|
||||
const data = this.formData;
|
||||
data.status ? (data.pageShow = "OPEN") : (data.pageShow = "CLOSE");
|
||||
delete data.status;
|
||||
(data.pageType = "INDEX"), (data.pageClientType = "PC");
|
||||
if (data.id) {
|
||||
API_floor.updateHome(data.id, data).then((res) => {
|
||||
this.$Message.success("编辑模板成功");
|
||||
this.showModal = false;
|
||||
this.getTemplateList();
|
||||
});
|
||||
} else {
|
||||
API_floor.setHomeSetup(data).then((res) => {
|
||||
this.$Message.success("新建模板成功");
|
||||
this.showModal = false;
|
||||
this.getTemplateList();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
createTemp() {
|
||||
// 新建表单
|
||||
this.$refs.form.resetFields();
|
||||
this.showModal = true;
|
||||
},
|
||||
|
||||
Template(item) {
|
||||
// 编辑表单
|
||||
item.pageShow == "OPEN" ? (item.status = true) : (item.status = false);
|
||||
this.formData = item;
|
||||
this.showModal = true;
|
||||
},
|
||||
|
||||
decorate(id) {
|
||||
// 装修
|
||||
this.$router.push({ name: "renovation", query: { id: id } });
|
||||
},
|
||||
|
||||
getTemplateList() {
|
||||
//模板列表
|
||||
let params = {
|
||||
pageNumber: 1,
|
||||
pageSize: 999,
|
||||
pageType: "INDEX",
|
||||
pageClientType: "PC",
|
||||
};
|
||||
API_floor.getHomeList(params).then((res) => {
|
||||
if (res.success) {
|
||||
this.templateList = res.result.records;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
releaseTemplate(id) {
|
||||
//发布模板
|
||||
API_floor.releasePageHome(id).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success("发布模板成功");
|
||||
this.getTemplateList();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
delTemplate(id) {
|
||||
this.$Modal.confirm({
|
||||
title: "提示",
|
||||
content: "<p>确定删除该模板吗？</p>",
|
||||
onOk: () => {
|
||||
API_floor.removePageHome(id).then((res) => {
|
||||
if (res.success) {
|
||||
this.$Message.success("删除模板成功");
|
||||
this.getTemplateList();
|
||||
}
|
||||
});
|
||||
},
|
||||
onCancel: () => {},
|
||||
});
|
||||
},
|
||||
},
|
||||
computed: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.floor-list {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
}
|
||||
.list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
> div {
|
||||
width: 260px;
|
||||
height: 450px;
|
||||
margin: 10px 15px;
|
||||
border: 1px solid #eee;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.new-template {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
border: 2px dashed $theme_color;
|
||||
color: $theme_color;
|
||||
background: #f88c7138;
|
||||
.ivu-icon {
|
||||
font-size: 30px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.template-saved {
|
||||
overflow: hidden;
|
||||
.template-title {
|
||||
padding: 10px;
|
||||
background: #eee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.theme-color {
|
||||
color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.template-content {
|
||||
height: 407px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: #ddd;
|
||||
&:hover {
|
||||
.cover {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.cover {
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
height: 407px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.ivu-btn {
|
||||
margin-bottom: 10px;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
&:hover {
|
||||
background-color: $theme_color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -8,7 +8,7 @@
|
||||
<div class="full-shadow" v-if="type == 'full'">
|
||||
<img :src="advertising[0].img" alt="" />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -16,7 +16,7 @@
|
||||
<div class="decorate">
|
||||
<div class="decorate-title">全屏广告</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="decorate-list">
|
||||
<div
|
||||
@@ -79,11 +79,11 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { btnWay } from "./btn.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
btnWay, // 按钮类型
|
||||
|
||||
type: "full", // 是否全屏
|
||||
|
||||
//全屏广告
|
||||
@@ -100,21 +100,16 @@ export default {
|
||||
},
|
||||
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];
|
||||
@@ -177,4 +172,4 @@ export default {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { btnWay } from "./btn.js";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -95,7 +95,7 @@ export default {
|
||||
},
|
||||
methods: {},
|
||||
mounted() {
|
||||
console.log(this.btnWay);
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 点击链接
|
||||
@@ -103,12 +103,7 @@ export default {
|
||||
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];
|
||||
@@ -171,4 +166,4 @@ export default {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,21 +0,0 @@
|
||||
/**
|
||||
* btnWay 设置悬浮按钮功能
|
||||
*/
|
||||
|
||||
export const btnWay = [
|
||||
{
|
||||
img: require('@/assets/icon.png'),
|
||||
title: "",
|
||||
size:"80*80"
|
||||
},
|
||||
{
|
||||
img: require('@/assets/icon.png'),
|
||||
title: "",
|
||||
size:"80*80"
|
||||
},
|
||||
{
|
||||
img: require('@/assets/icon.png'),
|
||||
title: "",
|
||||
size:"80*80"
|
||||
},
|
||||
];
|
||||
@@ -1,147 +0,0 @@
|
||||
<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>
|
||||
@@ -1,5 +1,5 @@
|
||||
import index from './index.vue' //首页
|
||||
import btn from './btn.vue' //按钮
|
||||
|
||||
import advertising from './advertising.vue' //全屏活动
|
||||
import alertAdvertising from './alertAdvertising.vue' //弹窗活动
|
||||
|
||||
@@ -7,7 +7,7 @@ import alertAdvertising from './alertAdvertising.vue' //弹窗活动
|
||||
|
||||
const templates = {
|
||||
index,
|
||||
btn,
|
||||
|
||||
advertising,
|
||||
alertAdvertising
|
||||
}
|
||||
|
||||
@@ -67,11 +67,7 @@ export default {
|
||||
name: "index",
|
||||
selected: true,
|
||||
},
|
||||
{
|
||||
title: "悬浮按钮",
|
||||
name: "btn",
|
||||
selected: false,
|
||||
},
|
||||
|
||||
{
|
||||
title: "全屏广告",
|
||||
name: "advertising",
|
||||
|
||||
Reference in New Issue
Block a user