Commit da206835 authored by 黄奎's avatar 黄奎

页面修改

parent 053425e4
......@@ -17,16 +17,19 @@
<div style="position:relative;" :key="index">
<img :src="item.imgBg" style="width: 100%;">
<div class="module-name">
<template v-if="item.video_url!=''">
<template v-if="item.key=='video'&& item.video_url!=''">
<div class="video_msg">{{item.video_url}}</div>
</template>
<template v-else>{{item.name}}</template>
</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">
<img @click="delPlugn(index)" :src="domainManager().ImageUrl+'/Static/icon-destroy.png'"
class="module-icon">
</el-tooltip>
<el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
<img v-if="item.is_edit==1&&item.key=='video'" @click="comCkVideo=index,isShowVideo=true" style="left:20px;" :src="domainManager().ImageUrl+'/Static/icon-edit.png'" class="module-icon">
<img v-if="item.is_edit==1&&item.key=='video'" @click="comCkVideo=index,isShowVideo=true"
style="left:20px;" :src="domainManager().ImageUrl+'/Static/icon-edit.png'"
class="module-icon">
</el-tooltip>
</div>
</template>
......@@ -39,15 +42,17 @@
<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'">
<template v-for="item in PlusInData">
<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&&childItem.key!='video'">
<img src="../../assets/img/userman/edit.png" alt=""/>
<div class="home_Add" style="margin-left:10px;" @click="isShowDialog(childItem)"
v-if="childItem.is_edit==1&&childItem.key!='video'">
<img src="../../assets/img/userman/edit.png" alt="" />
</div>
</div>
</div>
......@@ -56,33 +61,52 @@
</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'">
<template v-for="item in PlusInData">
<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=""/>
<img src="../../assets/img/userman/edit.png" alt="" />
</div>
</div>
</div>
</template>
</div>
</el-tab-pane>
<el-tab-pane label="图片魔方" name="third">
<div flex="wrap:wrap" class="module-box">
<template v-for="item in PlusInData">
<div flex="dir:top" class="module-item-box" v-for="(childItem,index) in item.list" :key="index"
v-if="item.key=='block'">
<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'">
<template v-for="item in PlusInData">
<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=""/>
<img src="../../assets/img/userman/edit.png" alt="" />
</div>
</div>
</div>
......@@ -91,11 +115,9 @@
</el-tab-pane>
</el-tabs>
</div>
<el-button class="button-item" size="small" type="primary">保存</el-button>
<el-button class="button-item" size="small" type="primary" @click="SaveHomeData()">保存</el-button>
</div>
</div>
</div>
</template>
<!-- 导航图标编辑 -->
......@@ -244,7 +266,6 @@
<el-button size="small" type="danger" @click="saveVideo('videoMsg')">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
......@@ -255,24 +276,24 @@
export default {
data() {
return {
comCkVideo:-1,
comCkVideo: -1,
//选择图片
chooseImg:'',
chooseImg: '',
//导航图标
isShowNav:false,
isShowNav: false,
//公告
isShowNotice:false,
isShowNotice: false,
//专题
isShowTotic:false,
isShowTotic: false,
//领券中心
isShowCoupon:false,
isShowCoupon: false,
//选图片
choicImg:false,
choicImg: false,
//视频
isShowVideo:false,
isChoiceVideo:false,
radio:'4',
activeName:'first',
isShowVideo: false,
isChoiceVideo: false,
radio: '4',
activeName: 'first',
dataList: [],
addMsg: {
RoleName: '', //角色名称
......@@ -280,35 +301,35 @@
RoleAuth: '', //角色权限
},
//导航图标msg
navMsg:{
row_num:4
navMsg: {
row_num: 4
},
//视频
videoMsg:{
video_url:'', //视频文件
video_pic_url:'' //封面图
videoMsg: {
video_url: '', //视频文件
video_pic_url: '' //封面图
},
//公告msg
noticeMsg:{
NoticeName:'', //公告名称
NoticeContent:'', //公告内容
notice_bg_color:'', //公告背景色
notice_text_color:'', //公告文字颜色
notice_url:'',//图标
noticeMsg: {
NoticeName: '', //公告名称
NoticeContent: '', //公告内容
notice_bg_color: '', //公告背景色
notice_text_color: '', //公告文字颜色
notice_url: '', //图标
},
//专题
topicMsg:{
topic_num:'1', //专题显示数量
topic_url:'',
topic_url_2:''
topicMsg: {
topic_num: '1', //专题显示数量
topic_url: '',
topic_url_2: ''
},
//领券中心
couopnMsg:{
coupon_not_url:'', //未领取
coupon_url:'' //已领取图
couopnMsg: {
coupon_not_url: '', //未领取
coupon_url: '' //已领取图
},
//插件
ListData:[],
PlusInData: [],
//公告验证
rules2: {
NoticeName: [{
......@@ -353,7 +374,7 @@
}]
},
//视频验证
rulesVideo:{
rulesVideo: {
video_url: [{
required: true,
message: "请选择视频地址",
......@@ -365,7 +386,6 @@
trigger: "change"
}]
}
};
},
components: {
......@@ -374,50 +394,49 @@
chooseMeun,
Choosevideo
},
created() {
},
methods: {
//点击添加组件
addPlugn(item){
addPlugn(item) {
this.dataList.push(JSON.parse(JSON.stringify(item)));
},
//删除插件
delPlugn(index){
this.dataList.splice(index,1);
delPlugn(index) {
this.dataList.splice(index, 1);
},
//编辑
isShowDialog(item){
switch(item.key){
isShowDialog(item) {
switch (item.key) {
case 'home_nav':
this.isShowNav=true;
this.navMsg.row_num=item.row_num;
this.isShowNav = true;
this.navMsg.row_num = item.row_num;
break;
case 'notice':
this.isShowNotice=true;
this.noticeMsg=item;
this.isShowNotice = true;
this.noticeMsg = item;
break;
case 'topic':
this.isShowTotic=true;
this.topicMsg=item;
this.isShowTotic = true;
this.topicMsg = item;
break;
case 'coupon':
this.isShowCoupon=true;
this.isShowCoupon = true;
this.
break;
}
},
//确定编辑
sureNav(){
this.dataList.forEach(x=>{
if(x.key=='home_nav'){
x.row_num=this.navMsg.row_num;
sureNav() {
this.dataList.forEach(x => {
if (x.key == 'home_nav') {
x.row_num = this.navMsg.row_num;
}
})
this.isShowNav=false;
this.isShowNav = false;
},
saveTopic(addMsg){
saveTopic(addMsg) {
//提交创建、修改表单
this.$refs[addMsg].validate(valid => {
if (valid) {
......@@ -428,7 +447,7 @@
});
},
//保存领券
setCoupon(addMsg){
setCoupon(addMsg) {
//提交创建、修改表单
this.$refs[addMsg].validate(valid => {
if (valid) {
......@@ -439,16 +458,16 @@
});
},
//保存领券
saveCoupon(){
this.dataList.forEach(x=>{
if(x.key=='coupon'){
x.coupon_not_url=this.couopnMsg.coupon_not_url;
x.coupon_url=this.couopnMsg.coupon_url;
saveCoupon() {
this.dataList.forEach(x => {
if (x.key == 'coupon') {
x.coupon_not_url = this.couopnMsg.coupon_not_url;
x.coupon_url = this.couopnMsg.coupon_url;
}
})
},
//保存公告
saveNotice(addMsg){
saveNotice(addMsg) {
//提交创建、修改表单
this.$refs[addMsg].validate(valid => {
if (valid) {
......@@ -458,38 +477,41 @@
}
});
},
baocunNotice(){
this.dataList.forEach(x=>{
if(x.key=='notice'){
x.NoticeName=this.noticeMsg.NoticeName;
x.NoticeContent=this.noticeMsg.NoticeContent;
x.notice_bg_color=this.noticeMsg.notice_bg_color;
x.notice_text_color=this.noticeMsg.notice_text_color;
x.notice_url=this.noticeMsg.notice_url;
baocunNotice() {
this.dataList.forEach(x => {
if (x.key == 'notice') {
x.NoticeName = this.noticeMsg.NoticeName;
x.NoticeContent = this.noticeMsg.NoticeContent;
x.notice_bg_color = this.noticeMsg.notice_bg_color;
x.notice_text_color = this.noticeMsg.notice_text_color;
x.notice_url = this.noticeMsg.notice_url;
}
})
},
//确定保存专题
setTopic(){
this.dataList.forEach(x=>{
if(x.key=='topic'){
x.topic_num=this.topicMsg.topic_num;
x.topic_url=this.topicMsg.topic_url;
x.topic_url_2=this.topicMsg.topic_url_2;
setTopic() {
this.dataList.forEach(x => {
if (x.key == 'topic') {
x.topic_num = this.topicMsg.topic_num;
x.topic_url = this.topicMsg.topic_url;
x.topic_url_2 = this.topicMsg.topic_url_2;
}
})
},
GetMiniProgramMallIndex() {
this.apipost("/api/Tenant/GetMiniProgramMallIndex", {}, res => {
if (res.data.resultCode == 1) {
this.ListData=res.data.data;
this.PlusInData = res.data.data.PlusInData;
if (res.data.data.HomeDataList && res.data.data.HomeDataList.length > 0) {
this.dataList= res.data.data.HomeDataList;;
}
} else {
this.Info(res.data.message);
}
})
},
//保存视频
saveVideo(addMsg){
saveVideo(addMsg) {
//提交创建、修改表单
this.$refs[addMsg].validate(valid => {
if (valid) {
......@@ -499,22 +521,22 @@
}
});
},
baocunVideo(){
this.dataList[this.comCkVideo].video_url=this.videoMsg.video_url;
this.dataList[this.comCkVideo].video_pic_url=this.videoMsg.video_pic_url;
this.isShowVideo=false;
this.videoMsg.video_pic_url='';
this.videoMsg.video_url='';
baocunVideo() {
this.dataList[this.comCkVideo].video_url = this.videoMsg.video_url;
this.dataList[this.comCkVideo].video_pic_url = this.videoMsg.video_pic_url;
this.isShowVideo = false;
this.videoMsg.video_pic_url = '';
this.videoMsg.video_url = '';
},
//选择图片
SelectId(msg) {
if (this.chooseImg =='topicOne') {
if (this.chooseImg == 'topicOne') {
this.topicMsg.topic_url = msg.url;
}
if(this.chooseImg =='topicTwo'){
if (this.chooseImg == 'topicTwo') {
this.topicMsg.topic_url_2 = msg.url;
}
if(this.chooseImg=='video'){
if (this.chooseImg == 'video') {
this.videoMsg.video_pic_url = msg.url;
}
this.choicImg = false;
......@@ -523,8 +545,22 @@
this.videoMsg.video_url = val.Path;
this.isChoiceVideo = false;
},
//保存数据
SaveHomeData() {
var msg = {
MallBaseId: this.getLocalStorage().MallBaseId,
HomeDataList: this.dataList
};
console.log("msg", msg);
this.apipost("/api/Tenant/SetMiniProgramMallHome", msg, res => {
if (res.data.resultCode == 1) {
this.Success(res.data.message);
this.GetMiniProgramMallIndex();
} else {
this.Info(res.data.message);
}
})
}
},
mounted() {
this.GetMiniProgramMallIndex();
......@@ -533,15 +569,16 @@
</script>
<style>
.module-icon {
.module-icon {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
cursor: pointer;
}
.HomePage .module-name {
}
.HomePage .module-name {
font-size: 12px;
position: absolute;
top: 0;
......@@ -550,17 +587,20 @@
background: rgba(0, 0, 0, .2);
color: #ffffff;
text-align: center;
}
.HomePage .el-tabs__nav-scroll{
padding-left:20px;
}
.button-item {
}
.HomePage .el-tabs__nav-scroll {
padding-left: 20px;
}
.button-item {
padding: 9px 25px;
position: absolute;
bottom: -52px;
left: 0;
}
.HomePage .home_Add{
}
.HomePage .home_Add {
height: 33px;
width: 33px;
border-radius: 50%;
......@@ -568,30 +608,35 @@
color: rgb(128, 194, 105);
text-align: center;
line-height: 33px;
}
.module-box .edit-box {
}
.module-box .edit-box {
height: 55px;
border-top: 1px dotted #eeeeee;
color: blue;
cursor: pointer;
padding: 0 20%;
}
.module-box .name-box {
}
.module-box .name-box {
height: 70px;
}
.module-item-box {
}
.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;
......@@ -640,11 +685,13 @@
height: 64px;
line-height: 88px;
}
.HomePage .video_msg{
.HomePage .video_msg {
display: inline-block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
text-overflow: ellipsis;
}
</style>
......@@ -658,8 +658,8 @@
}
},
catGoodsNumChange(catIndex) {
if (this.data.catList[catIndex].goodsNum > 30) {
this.data.catList[catIndex].goodsNum = 30;
if (this.data.catList[catIndex].goodsNum > 3) {
this.data.catList[catIndex].goodsNum = 3;
}
if (this.data.catList[catIndex].goodsNum < 1) {
this.data.catList[catIndex].goodsNum = 1;
......
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