Skip to content

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

修改

parent 8932a6ea
Show whitespace changes
Inline Side-by-side
Showing with 296 additions and 86 deletions
src/components/StoreDesign/HomePageLayout.vue
View file @ 053425e4
...@@ -16,10 +16,18 @@ ...@@ -16,10 +16,18 @@
<template v-for="(item,index) in dataList"> <template v-for="(item,index) in dataList">
<div style="position:relative;" :key="index"> <div style="position:relative;" :key="index">
<img :src="item.imgBg" style="width: 100%;"> <img :src="item.imgBg" style="width: 100%;">
<div class="module-name">{{item.name}}</div> <div class="module-name">
<template v-if="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"> <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>
<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">
</el-tooltip>
</div> </div>
</template> </template>
</draggable> </draggable>
...@@ -38,7 +46,7 @@ ...@@ -38,7 +46,7 @@
<div class="home_Add" @click="addPlugn(childItem)"> <div class="home_Add" @click="addPlugn(childItem)">
<img :src="domainManager().ImageUrl+'/Static/plus.png'" alt=""> <img :src="domainManager().ImageUrl+'/Static/plus.png'" alt="">
</div> </div>
<div class="home_Add" style="margin-left:10px;" @click="isShowDialog(childItem)" v-if="childItem.is_edit==1"> <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=""/> <img src="../../assets/img/userman/edit.png" alt=""/>
</div> </div>
</div> </div>
...@@ -91,7 +99,7 @@ ...@@ -91,7 +99,7 @@
</div> </div>
</template> </template>
<!-- 导航图标编辑 --> <!-- 导航图标编辑 -->
<el-dialog title="编辑" :visible.sync="isShowNav" width="900px"> <el-dialog title="编辑" :visible.sync="isShowNav" width="600px">
<el-form label-width="150px"> <el-form label-width="150px">
<el-form-item label="图标一行显示个数"> <el-form-item label="图标一行显示个数">
<el-radio v-model="navMsg.row_num" :label="4">4个</el-radio> <el-radio v-model="navMsg.row_num" :label="4">4个</el-radio>
...@@ -104,110 +112,152 @@ ...@@ -104,110 +112,152 @@
</span> </span>
</el-dialog> </el-dialog>
<!-- 公告 --> <!-- 公告 -->
<el-dialog title="编辑" :visible.sync="isShowNotice" width="900px"> <el-dialog title="编辑" :visible.sync="isShowNotice" width="600px">
<el-form label-width="150px"> <el-form :model="noticeMsg" :rules="rules2" ref="noticeMsg" label-width="150px">
<el-form-item label="公告名称"> <el-form-item label="公告名称" prop="NoticeName" size="small">
<el-input type="text"></el-input> <el-input type="text" v-model="noticeMsg.NoticeName"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="公告内容"> <el-form-item label="公告内容" prop="NoticeContent" size="small">
<el-input type="textarea" :rows="3"></el-input> <el-input type="textarea" v-model="noticeMsg.NoticeContent" :rows="3"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="公告背景色"> <el-form-item label="公告背景色">
<el-color-picker></el-color-picker> <el-color-picker v-model="noticeMsg.notice_bg_color"></el-color-picker>
</el-form-item> </el-form-item>
<el-form-item label="公告文字颜色"> <el-form-item label="公告文字颜色">
<el-color-picker></el-color-picker> <el-color-picker v-model="noticeMsg.notice_text_color"></el-color-picker>
</el-form-item> </el-form-item>
<el-form-item label="图标"> <el-form-item label="图标" prop="notice_url">
<el-tooltip class="item" effect="dark" content="建议尺寸36*36" placement="top"> <el-tooltip class="item" effect="dark" content="建议尺寸36*36" placement="top">
<el-button size="mini">选择文件</el-button> <el-button size="mini">选择文件</el-button>
</el-tooltip> </el-tooltip>
<!-- <div class="customize-share-title"> <div class="customize-share-title">
<div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center" <div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(subItem.imgUrl) + ')'}"> :style="{backgroundImage:'url(' + getIconLink(noticeMsg.notice_url) + ')'}">
<i v-if="subItem.imgUrl==''" class="el-icon-picture-outline"></i> <i v-if="noticeMsg.notice_url==''" class="el-icon-picture-outline"></i>
</div>
</div> </div>
</div> -->
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button size="small" @click="isShowNotice=false">取 消</el-button> <el-button size="small" @click="isShowNotice=false">取 消</el-button>
<el-button size="small" type="danger">确 定</el-button> <el-button size="small" type="danger" @click="saveNotice('noticeMsg')">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
<!-- 专题 --> <!-- 专题 -->
<el-dialog title="编辑" :visible.sync="isShowTotic" width="900px"> <el-dialog title="编辑" :visible.sync="isShowTotic" width="600px">
<el-form label-width="150px"> <el-form :model="topicMsg" :rules="rules3" ref="topicMsg" label-width="150px">
<el-form-item label="专题显示数量" size="small"> <el-form-item label="专题显示数量" size="small">
<el-input type="text"></el-input> <el-select v-model="topicMsg.topic_num" placeholder="请选择" size="small">
<el-option label="1个" value="1"></el-option>
<el-option label="2个" value="2"></el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="图标(1个专题)"> <el-form-item :label="topicMsg.topic_num==1?'图标(1个专题)':'图标(2个专题)'" prop="topic_url">
<el-tooltip class="item" effect="dark" content="建议尺寸104*32" placement="top"> <el-tooltip class="item" effect="dark" content="建议尺寸104*32" placement="top">
<el-button size="mini">选择文件</el-button> <el-button size="mini" @click="choicImg=true,chooseImg='topicOne'">选择文件</el-button>
</el-tooltip> </el-tooltip>
<!-- <div class="customize-share-title"> <div class="customize-share-title">
<div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center" <div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(subItem.imgUrl) + ')'}"> :style="{backgroundImage:'url(' + getIconLink(topicMsg.topic_url) + ')'}">
<i v-if="subItem.imgUrl==''" class="el-icon-picture-outline"></i> <i v-if="topicMsg.topic_url==''" class="el-icon-picture-outline"></i>
</div>
</div> </div>
</div> -->
</el-form-item> </el-form-item>
<el-form-item label="专题标签"> <el-form-item label="专题标签" prop="topic_url_2">
<el-tooltip class="item" effect="dark" content="建议尺寸54*28" placement="top"> <el-tooltip class="item" effect="dark" content="建议尺寸54*28" placement="top">
<el-button size="mini">选择文件</el-button> <el-button size="mini" @click="choicImg=true,chooseImg='topicTwo'">选择文件</el-button>
</el-tooltip> </el-tooltip>
<!-- <div class="customize-share-title"> <div class="customize-share-title">
<div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center" <div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(subItem.imgUrl) + ')'}"> :style="{backgroundImage:'url(' + getIconLink(topicMsg.topic_url_2) + ')'}">
<i v-if="subItem.imgUrl==''" class="el-icon-picture-outline"></i> <i v-if="topicMsg.topic_url_2==''" class="el-icon-picture-outline"></i>
</div>
</div> </div>
</div> -->
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button size="small" @click="isShowTotic=false">取 消</el-button> <el-button size="small" @click="isShowTotic=false">取 消</el-button>
<el-button size="small" type="danger">确 定</el-button> <el-button size="small" type="danger" @click="saveTopic('topicMsg')">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
<!-- 领券中心 --> <!-- 领券中心 -->
<el-dialog title="编辑" :visible.sync="isShowCoupon" width="900px"> <el-dialog title="编辑" :visible.sync="isShowCoupon" width="900px">
<el-form label-width="150px"> <el-form :model="couopnMsg" :rules="rules4" ref="couopnMsg" label-width="150px">
<el-form-item label="未领取图（满减券）"> <el-form-item label="未领取图（满减券）" prop="coupon_not_url">
<el-tooltip class="item" effect="dark" content="建议尺寸256*130" placement="top"> <el-tooltip class="item" effect="dark" content="建议尺寸256*130" placement="top">
<el-button size="mini">选择文件</el-button> <el-button size="mini">选择文件</el-button>
</el-tooltip> </el-tooltip>
<!-- <div class="customize-share-title"> <div class="customize-share-title">
<div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center" <div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(subItem.imgUrl) + ')'}"> :style="{backgroundImage:'url(' + getIconLink(couopnMsg.coupon_not_url) + ')'}">
<i v-if="subItem.imgUrl==''" class="el-icon-picture-outline"></i> <i v-if="couopnMsg.coupon_not_url==''" class="el-icon-picture-outline"></i>
</div>
</div> </div>
</div> -->
</el-form-item> </el-form-item>
<el-form-item label="已领取图"> <el-form-item label="已领取图" prop="coupon_url">
<el-tooltip class="item" effect="dark" content="建议尺寸256*130" placement="top"> <el-tooltip class="item" effect="dark" content="建议尺寸256*130" placement="top">
<el-button size="mini">选择文件</el-button> <el-button size="mini">选择文件</el-button>
</el-tooltip> </el-tooltip>
<!-- <div class="customize-share-title"> <div class="customize-share-title">
<div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center" <div class="zk_pic_box" style="width:80px;height:80px;" flex="main:center cross:center"
:style="{backgroundImage:'url(' + getIconLink(subItem.imgUrl) + ')'}"> :style="{backgroundImage:'url(' + getIconLink(couopnMsg.coupon_url) + ')'}">
<i v-if="subItem.imgUrl==''" class="el-icon-picture-outline"></i> <i v-if="couopnMsg.coupon_url==''" class="el-icon-picture-outline"></i>
</div>
</div> </div>
</div> -->
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button size="small" @click="isShowCoupon=false">取 消</el-button> <el-button size="small" @click="isShowCoupon=false">取 消</el-button>
<el-button size="small" type="danger">确 定</el-button> <el-button size="small" type="danger" @click="setCoupon('couopnMsg')">确 定</el-button>
</span>
</el-dialog>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
<ChooseImg @SelectId="SelectId"></ChooseImg>
</el-dialog>
<!-- 选择视频 -->
<el-dialog title="选择文件" :visible.sync="isChoiceVideo" width="1240px">
<Choosevideo @Selectvideo="Selectvideo"></Choosevideo>
</el-dialog>
<el-dialog title="编辑" :visible.sync="isShowVideo" width="600px">
<el-form :model="videoMsg" :rules="rulesVideo" ref="videoMsg" label-width="150px">
<el-form-item label="视频文件" size="small" prop="video_url">
<el-input type="text" v-model="videoMsg.video_url">
<el-button slot="append" @click="isChoiceVideo=true">选择文件</el-button>
</el-input>
</el-form-item>
<el-form-item label="封面图" prop="video_pic_url">
<el-tooltip class="item" effect="dark" content="建议尺寸750*400" placement="top">
<el-button size="mini" @click="choicImg=true,chooseImg='video'">选择文件</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(videoMsg.video_pic_url) + ')'}">
<i v-if="videoMsg.video_pic_url==''" class="el-icon-picture-outline"></i>
</div>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="isShowVideo=false">取 消</el-button>
<el-button size="small" type="danger" @click="saveVideo('videoMsg')">确 定</el-button>
</span> </span>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import ChooseImg from "@/components/global/ChooseImg.vue";
import Choosevideo from "@/components/global/Choosevideo.vue";
import chooseMeun from "../common/chooseMeun.vue";
import draggable from "vuedraggable" import draggable from "vuedraggable"
export default { export default {
data() { data() {
return { return {
comCkVideo:-1,
//选择图片
chooseImg:'',
//导航图标 //导航图标
isShowNav:false, isShowNav:false,
//公告 //公告
...@@ -216,6 +266,11 @@ ...@@ -216,6 +266,11 @@
isShowTotic:false, isShowTotic:false,
//领券中心 //领券中心
isShowCoupon:false, isShowCoupon:false,
//选图片
choicImg:false,
//视频
isShowVideo:false,
isChoiceVideo:false,
radio:'4', radio:'4',
activeName:'first', activeName:'first',
dataList: [], dataList: [],
...@@ -224,19 +279,100 @@ ...@@ -224,19 +279,100 @@
RoleIntro: '', //备注/描述 RoleIntro: '', //备注/描述
RoleAuth: '', //角色权限 RoleAuth: '', //角色权限
}, },
//导航图标msg
navMsg:{ navMsg:{
row_num:4 row_num:4
}, },
//视频
videoMsg:{
video_url:'', //视频文件
video_pic_url:'' //封面图
},
//公告msg //公告msg
noticeMsg:{ noticeMsg:{
NoticeName:'', //公告名称
NoticeContent:'', //公告内容
notice_bg_color:'', //公告背景色
notice_text_color:'', //公告文字颜色
notice_url:'',//图标
},
//专题
topicMsg:{
topic_num:'1', //专题显示数量
topic_url:'',
topic_url_2:''
},
//领券中心
couopnMsg:{
coupon_not_url:'', //未领取
coupon_url:'' //已领取图
}, },
//插件 //插件
ListData:[], ListData:[],
//公告验证
rules2: {
NoticeName: [{
required: true,
message: "请填写公告名称",
trigger: "blur"
}],
NoticeContent: [{
required: true,
message: "请填写公告内容",
trigger: "blur"
}],
notice_url: [{
required: true,
message: "请选择图标",
trigger: "change"
}]
},
rules3: {
topic_url: [{
required: true,
message: "请选择专题图标",
trigger: "change"
}],
topic_url_2: [{
required: true,
message: "请选择专题标签",
trigger: "change"
}]
},
//领券验证
rules4: {
coupon_not_url: [{
required: true,
message: "请选择未领取图",
trigger: "change"
}],
coupon_url: [{
required: true,
message: "请选择已领取图标",
trigger: "change"
}]
},
//视频验证
rulesVideo:{
video_url: [{
required: true,
message: "请选择视频地址",
trigger: "change"
}],
video_pic_url: [{
required: true,
message: "请选择封面图",
trigger: "change"
}]
}
}; };
}, },
components: { components: {
draggable draggable,
ChooseImg,
chooseMeun,
Choosevideo
}, },
created() { created() {
...@@ -245,7 +381,7 @@ ...@@ -245,7 +381,7 @@
methods: { methods: {
//点击添加组件 //点击添加组件
addPlugn(item){ addPlugn(item){
this.dataList.push(item); this.dataList.push(JSON.parse(JSON.stringify(item)));
}, },
//删除插件 //删除插件
delPlugn(index){ delPlugn(index){
...@@ -253,12 +389,23 @@ ...@@ -253,12 +389,23 @@
}, },
//编辑 //编辑
isShowDialog(item){ isShowDialog(item){
console.log(item,'item');
switch(item.key){ switch(item.key){
case 'home_nav': case 'home_nav':
this.isShowNav=true; this.isShowNav=true;
this.navMsg.row_num=item.row_num; this.navMsg.row_num=item.row_num;
break; break;
case 'notice':
this.isShowNotice=true;
this.noticeMsg=item;
break;
case 'topic':
this.isShowTotic=true;
this.topicMsg=item;
break;
case 'coupon':
this.isShowCoupon=true;
this.
break;
} }
}, },
//确定编辑 //确定编辑
...@@ -270,57 +417,114 @@ ...@@ -270,57 +417,114 @@
}) })
this.isShowNav=false; this.isShowNav=false;
}, },
GetMiniProgramMallIndex() { saveTopic(addMsg){
this.apipost("/api/Tenant/GetMiniProgramMallIndex", {}, res => { //提交创建、修改表单
if (res.data.resultCode == 1) { this.$refs[addMsg].validate(valid => {
this.ListData=res.data.data; if (valid) {
this.setTopic();
} else { } else {
this.Info(res.data.message); return false;
}
});
},
//保存领券
setCoupon(addMsg){
//提交创建、修改表单
this.$refs[addMsg].validate(valid => {
if (valid) {
this.saveCoupon();
} else {
return false;
}
});
},
//保存领券
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;
} }
}) })
}, },
//保存 //保存公告
saveMsg() { saveNotice(addMsg){
this.apipost("/api/Employee/SetRole", this.addMsg, res => { //提交创建、修改表单
if (res.data.resultCode == 1) { this.$refs[addMsg].validate(valid => {
this.getList(); if (valid) {
this.clearInfo(); this.baocunNotice();
} else { } else {
this.Info(res.data.message); return false;
}
});
},
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;
} }
}) })
}, },
//修改 GetMiniProgramMallIndex() {
EditRole(item) { this.apipost("/api/Tenant/GetMiniProgramMallIndex", {}, res => {
this.apipost("/api/Employee/GetRole", {
RoleId: item.RoleId
}, res => {
if (res.data.resultCode == 1) { if (res.data.resultCode == 1) {
this.addMsg = res.data.data; this.ListData=res.data.data;
let newArr = this.addMsg.RoleAuth.split(',');
setTimeout(() => {
this.$refs.tree.setCheckedKeys(newArr);
}, 10)
} else { } else {
this.Info(res.data.message); this.Info(res.data.message);
} }
}) })
}, },
//删除 //保存视频
RemmoveRole(item) { saveVideo(addMsg){
var that = this; //提交创建、修改表单
that.Confirm("是否要删除?", function () { this.$refs[addMsg].validate(valid => {
that.apipost("/api/Employee/RemoveRole", { if (valid) {
RoleId: item.RoleId this.baocunVideo();
}, res => {
if (res.data.resultCode == 1) {
that.getList();
} else { } else {
that.Info(res.data.message); return false;
} }
}) });
})
}, },
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') {
this.topicMsg.topic_url = msg.url;
}
if(this.chooseImg =='topicTwo'){
this.topicMsg.topic_url_2 = msg.url;
}
if(this.chooseImg=='video'){
this.videoMsg.video_pic_url = msg.url;
}
this.choicImg = false;
},
Selectvideo(val) {
this.videoMsg.video_url = val.Path;
this.isChoiceVideo = false;
},
}, },
mounted() { mounted() {
this.GetMiniProgramMallIndex(); this.GetMiniProgramMallIndex();
...@@ -436,5 +640,11 @@ ...@@ -436,5 +640,11 @@
height: 64px; height: 64px;
line-height: 88px; line-height: 88px;
} }
.HomePage .video_msg{
display: inline-block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
}
</style> </style>
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