Skip to content

E
ElectricitySheep
Commit d4f5dadc authored by zhengke's avatar zhengke
Browse files
Options

增加

parent d5e508f7
Hide whitespace changes
Inline Side-by-side
Showing with 446 additions and 0 deletions
src/components/StoreDesign/HomePageLayout.vue 0 → 100644
View file @ d4f5dadc
<template>
<div class="HomePage">
<template>
<div class="head-title">
首页布局设置
</div>
<div class="content">
<div style="display:flex;">
<div class="mobile-box">
<div class="top-bar" flex="main:center cross:center">
<div>首页</div>
</div>
<div class="show-box">
<div id='box'>
<draggable v-model="dataList">
<template v-for="(item,index) in dataList">
<div style="position:relative;" :key="index">
<img :src="item.imgBg" style="width: 100%;">
<div class="module-name">{{item.name}}</div>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start">
<img @click="delPlugn(index)" :src="domainManager().ImageUrl+'/Static/icon-destroy.png'" class="module-icon">
</el-tooltip>
</div>
</template>
</draggable>
</div>
</div>
</div>
<div class="el-card home_Content">
<div class="el-card__body" style="padding:10px">
<el-tabs v-model="activeName">
<el-tab-pane label="常用" name="first">
<div flex="wrap:wrap" class="module-box">
<template v-for="item in ListData">
<div flex="dir:top" class="module-item-box" v-for="(childItem,index) in item.list" :key="index" v-if="item.key=='normal'">
<div flex="main:center cross:center" class="name-box">{{childItem.name}}</div>
<div flex="main:center cross:center" class="edit-box">
<div class="home_Add" @click="addPlugn(childItem)">
<img :src="domainManager().ImageUrl+'/Static/plus.png'" alt="">
</div>
<div class="home_Add" style="margin-left:10px;" @click="isShowDialog(childItem)" v-if="childItem.is_edit==1">
<img src="../../assets/img/userman/edit.png" alt=""/>
</div>
</div>
</div>
</template>
</div>
</el-tab-pane>
<el-tab-pane label="商品分类" name="second">
<div flex="wrap:wrap" class="module-box">
<template v-for="item in ListData">
<div flex="dir:top" class="module-item-box" v-for="(childItem,index) in item.list" :key="index" v-if="item.key=='cat'">
<div flex="main:center cross:center" class="name-box">{{childItem.name}}</div>
<div flex="main:center cross:center" class="edit-box" @click="addPlugn(childItem)">
<div class="home_Add">
<img :src="domainManager().ImageUrl+'/Static/plus.png'" alt="">
</div>
<div class="home_Add" style="margin-left:10px;" v-if="childItem.is_edit==1">
<img src="../../assets/img/userman/edit.png" alt=""/>
</div>
</div>
</div>
</template>
</div>
</el-tab-pane>
<el-tab-pane label="图片魔方" name="third">角色管理</el-tab-pane>
<el-tab-pane label="插件" name="fourth">
<div flex="wrap:wrap" class="module-box">
<template v-for="item in ListData">
<div flex="dir:top" class="module-item-box" v-for="(childItem,index) in item.list" :key="index" v-if="item.key=='plugin'">
<div flex="main:center cross:center" class="name-box">{{childItem.name}}</div>
<div flex="main:center cross:center" class="edit-box" @click="addPlugn(childItem)">
<div class="home_Add">
<img :src="domainManager().ImageUrl+'/Static/plus.png'" alt="">
</div>
<div class="home_Add" style="margin-left:10px;" v-if="childItem.is_edit==1">
<img src="../../assets/img/userman/edit.png" alt=""/>
</div>
</div>
</div>
</template>
</div>
</el-tab-pane>
</el-tabs>
</div>
<el-button class="button-item" size="small" type="primary">保存</el-button>
</div>
</div>
</div>
</template>
<!-- 导航图标编辑 -->
<el-dialog title="编辑" :visible.sync="isShowNav" width="900px">
<el-form label-width="150px">
<el-form-item label="图标一行显示个数">
<el-radio v-model="navMsg.row_num" :label="4">4个</el-radio>
<el-radio v-model="navMsg.row_num" :label="5">5个</el-radio>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="isShowNav=false">取 消</el-button>
<el-button size="small" type="danger" @click="sureNav()">确 定</el-button>
</span>
</el-dialog>
<!-- 公告 -->
<el-dialog title="编辑" :visible.sync="isShowNotice" width="900px">
<el-form label-width="150px">
<el-form-item label="公告名称">
<el-input type="text"></el-input>
</el-form-item>
<el-form-item label="公告内容">
<el-input type="textarea" :rows="3"></el-input>
</el-form-item>
<el-form-item label="公告背景色">
<el-color-picker></el-color-picker>
</el-form-item>
<el-form-item label="公告文字颜色">
<el-color-picker></el-color-picker>
</el-form-item>
<el-form-item label="图标">
<el-tooltip class="item" effect="dark" content="建议尺寸36*36" placement="top">
<el-button size="mini">选择文件</el-button>
</el-tooltip>
<!-- <div class="customize-share-title">
<div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(subItem.imgUrl) + ')'}">
<i v-if="subItem.imgUrl==''" class="el-icon-picture-outline"></i>
</div>
</div> -->
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="isShowNotice=false">取 消</el-button>
<el-button size="small" type="danger">确 定</el-button>
</span>
</el-dialog>
<!-- 专题 -->
<el-dialog title="编辑" :visible.sync="isShowTotic" width="900px">
<el-form label-width="150px">
<el-form-item label="专题显示数量" size="small">
<el-input type="text"></el-input>
</el-form-item>
<el-form-item label="图标(1个专题)">
<el-tooltip class="item" effect="dark" content="建议尺寸104*32" placement="top">
<el-button size="mini">选择文件</el-button>
</el-tooltip>
<!-- <div class="customize-share-title">
<div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(subItem.imgUrl) + ')'}">
<i v-if="subItem.imgUrl==''" class="el-icon-picture-outline"></i>
</div>
</div> -->
</el-form-item>
<el-form-item label="专题标签">
<el-tooltip class="item" effect="dark" content="建议尺寸54*28" placement="top">
<el-button size="mini">选择文件</el-button>
</el-tooltip>
<!-- <div class="customize-share-title">
<div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(subItem.imgUrl) + ')'}">
<i v-if="subItem.imgUrl==''" class="el-icon-picture-outline"></i>
</div>
</div> -->
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="isShowTotic=false">取 消</el-button>
<el-button size="small" type="danger">确 定</el-button>
</span>
</el-dialog>
<!-- 领券中心 -->
<el-dialog title="编辑" :visible.sync="isShowCoupon" width="900px">
<el-form label-width="150px">
<el-form-item label="未领取图（满减券）">
<el-tooltip class="item" effect="dark" content="建议尺寸256*130" placement="top">
<el-button size="mini">选择文件</el-button>
</el-tooltip>
<!-- <div class="customize-share-title">
<div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(subItem.imgUrl) + ')'}">
<i v-if="subItem.imgUrl==''" class="el-icon-picture-outline"></i>
</div>
</div> -->
</el-form-item>
<el-form-item label="已领取图">
<el-tooltip class="item" effect="dark" content="建议尺寸256*130" placement="top">
<el-button size="mini">选择文件</el-button>
</el-tooltip>
<!-- <div class="customize-share-title">
<div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(subItem.imgUrl) + ')'}">
<i v-if="subItem.imgUrl==''" class="el-icon-picture-outline"></i>
</div>
</div> -->
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="isShowCoupon=false">取 消</el-button>
<el-button size="small" type="danger">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import draggable from "vuedraggable"
export default {
data() {
return {
//导航图标
isShowNav:false,
//公告
isShowNotice:false,
//专题
isShowTotic:false,
//领券中心
isShowCoupon:false,
radio:'4',
activeName:'first',
dataList: [],
addMsg: {
RoleName: '', //角色名称
RoleIntro: '', //备注/描述
RoleAuth: '', //角色权限
},
navMsg:{
row_num:4
},
//公告msg
noticeMsg:{
},
//插件
ListData:[],
};
},
components: {
draggable
},
created() {
},
methods: {
//点击添加组件
addPlugn(item){
this.dataList.push(item);
},
//删除插件
delPlugn(index){
this.dataList.splice(index,1);
},
//编辑
isShowDialog(item){
console.log(item,'item');
switch(item.key){
case 'home_nav':
this.isShowNav=true;
this.navMsg.row_num=item.row_num;
break;
}
},
//确定编辑
sureNav(){
this.dataList.forEach(x=>{
if(x.key=='home_nav'){
x.row_num=this.navMsg.row_num;
}
})
this.isShowNav=false;
},
GetMiniProgramMallIndex() {
this.apipost("/api/Tenant/GetMiniProgramMallIndex", {}, res => {
if (res.data.resultCode == 1) {
this.ListData=res.data.data;
} else {
this.Info(res.data.message);
}
})
},
//保存
saveMsg() {
this.apipost("/api/Employee/SetRole", this.addMsg, res => {
if (res.data.resultCode == 1) {
this.getList();
this.clearInfo();
} else {
this.Info(res.data.message);
}
})
},
//修改
EditRole(item) {
this.apipost("/api/Employee/GetRole", {
RoleId: item.RoleId
}, res => {
if (res.data.resultCode == 1) {
this.addMsg = res.data.data;
let newArr = this.addMsg.RoleAuth.split(',');
setTimeout(() => {
this.$refs.tree.setCheckedKeys(newArr);
}, 10)
} else {
this.Info(res.data.message);
}
})
},
//删除
RemmoveRole(item) {
var that = this;
that.Confirm("是否要删除?", function () {
that.apipost("/api/Employee/RemoveRole", {
RoleId: item.RoleId
}, res => {
if (res.data.resultCode == 1) {
that.getList();
} else {
that.Info(res.data.message);
}
})
})
},
},
mounted() {
this.GetMiniProgramMallIndex();
}
};
</script>
<style>
.module-icon {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
cursor: pointer;
}
.HomePage .module-name {
font-size: 12px;
position: absolute;
top: 0;
width: 100%;
height: 20px;
background: rgba(0, 0, 0, .2);
color: #ffffff;
text-align: center;
}
.HomePage .el-tabs__nav-scroll{
padding-left:20px;
}
.button-item {
padding: 9px 25px;
position: absolute;
bottom: -52px;
left: 0;
}
.HomePage .home_Add{
height: 33px;
width: 33px;
border-radius: 50%;
background-color: rgb(238, 249, 241);
color: rgb(128, 194, 105);
text-align: center;
line-height: 33px;
}
.module-box .edit-box {
height: 55px;
border-top: 1px dotted #eeeeee;
color: blue;
cursor: pointer;
padding: 0 20%;
}
.module-box .name-box {
height: 70px;
}
.module-item-box {
width: 44%;
max-width: 160px;
height: 125px;
font-size: 16px;
margin: 5px 10px;
border: 1px solid #eeeeee;
}
.HomePage .module-box {
height: auto;
overflow: auto;
padding: 5px 10px 20px;
}
.home_Content {
height: 100%;
position: relative;
width: 100%;
overflow: visible;
margin-bottom: 70px;
}
.HomePage .mobile-box .show-box {
height: 606px;
width: 378px;
overflow: auto;
}
.HomePage .content {
margin-top: 12px;
box-sizing: border-box;
}
.HomePage .mobile-box {
width: 400px;
height: 740px;
padding: 35px 11px;
background-color: #fff;
border-radius: 30px;
background-size: cover;
position: relative;
font-size: .85rem;
margin-right: 20px;
z-index: 3;
}
.HomePage .top-bar {
width: 375px;
height: 64px;
position: relative;
background: url(../../assets/img/head.png) center no-repeat;
}
.HomePage .top-bar div {
position: absolute;
text-align: center;
width: 378px;
font-size: 16px;
font-weight: 600;
height: 64px;
line-height: 88px;
}
</style>
src/router/index.js
View file @ d4f5dadc
...@@ -321,6 +321,12 @@ export default new Router({ ...@@ -321,6 +321,12 @@ export default new Router({
name: 'labelBar', name: 'labelBar',
component: resolve => require(['@/components/StoreDesign/labelBar'], resolve), component: resolve => require(['@/components/StoreDesign/labelBar'], resolve),
}, },
//店铺设计 首页布局
{
path: '/HomePageLayout',
name: 'HomePageLayout',
component: resolve => require(['@/components/StoreDesign/HomePageLayout'], resolve),
},
//店铺管理 小程序页面 //店铺管理 小程序页面
{ {
path: '/minipage', path: '/minipage',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment