Skip to content

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

修改

parent 8932a6ea
Hide 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 @@
<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>
<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">
<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">
</el-tooltip>
</div>
</template>
</draggable>
......@@ -38,7 +46,7 @@
<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">
<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>
......@@ -91,7 +99,7 @@
</div>
</template>
<!-- 导航图标编辑 -->
<el-dialog title="编辑" :visible.sync="isShowNav" width="900px">
<el-dialog title="编辑" :visible.sync="isShowNav" width="600px">
<el-form label-width="150px">
<el-form-item label="图标一行显示个数">
<el-radio v-model="navMsg.row_num" :label="4">4个</el-radio>
......@@ -104,110 +112,152 @@
</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-dialog title="编辑" :visible.sync="isShowNotice" width="600px">
<el-form :model="noticeMsg" :rules="rules2" ref="noticeMsg" label-width="150px">
<el-form-item label="公告名称" prop="NoticeName" size="small">
<el-input type="text" v-model="noticeMsg.NoticeName"></el-input>
</el-form-item>
<el-form-item label="公告内容">
<el-input type="textarea" :rows="3"></el-input>
<el-form-item label="公告内容" prop="NoticeContent" size="small">
<el-input type="textarea" v-model="noticeMsg.NoticeContent" :rows="3"></el-input>
</el-form-item>
<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 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 label="图标">
<el-form-item label="图标" prop="notice_url">
<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="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>
:style="{backgroundImage:'url(' + getIconLink(noticeMsg.notice_url) + ')'}">
<i v-if="noticeMsg.notice_url==''" class="el-icon-picture-outline"></i>
</div>
</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>
<el-button size="small" type="danger" @click="saveNotice('noticeMsg')">确 定</el-button>
</span>
</el-dialog>
<!-- 专题 -->
<el-dialog title="编辑" :visible.sync="isShowTotic" width="900px">
<el-form label-width="150px">
<el-dialog title="编辑" :visible.sync="isShowTotic" width="600px">
<el-form :model="topicMsg" :rules="rules3" ref="topicMsg" label-width="150px">
<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 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-button size="mini">选择文件</el-button>
<el-button size="mini" @click="choicImg=true,chooseImg='topicOne'">选择文件</el-button>
</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"
:style="{backgroundImage:'url(' + getIconLink(subItem.imgUrl) + ')'}">
<i v-if="subItem.imgUrl==''" class="el-icon-picture-outline"></i>
:style="{backgroundImage:'url(' + getIconLink(topicMsg.topic_url) + ')'}">
<i v-if="topicMsg.topic_url==''" class="el-icon-picture-outline"></i>
</div>
</div> -->
</div>
</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-button size="mini">选择文件</el-button>
<el-button size="mini" @click="choicImg=true,chooseImg='topicTwo'">选择文件</el-button>
</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"
:style="{backgroundImage:'url(' + getIconLink(subItem.imgUrl) + ')'}">
<i v-if="subItem.imgUrl==''" class="el-icon-picture-outline"></i>
:style="{backgroundImage:'url(' + getIconLink(topicMsg.topic_url_2) + ')'}">
<i v-if="topicMsg.topic_url_2==''" class="el-icon-picture-outline"></i>
</div>
</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>
<el-button size="small" type="danger" @click="saveTopic('topicMsg')">确 定</el-button>
</span>
</el-dialog>
<!-- 领券中心 -->
<el-dialog title="编辑" :visible.sync="isShowCoupon" width="900px">
<el-form label-width="150px">
<el-form-item label="未领取图（满减券）">
<el-form :model="couopnMsg" :rules="rules4" ref="couopnMsg" label-width="150px">
<el-form-item label="未领取图（满减券）" prop="coupon_not_url">
<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="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>
:style="{backgroundImage:'url(' + getIconLink(couopnMsg.coupon_not_url) + ')'}">
<i v-if="couopnMsg.coupon_not_url==''" class="el-icon-picture-outline"></i>
</div>
</div> -->
</div>
</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-button size="mini">选择文件</el-button>
</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"
:style="{backgroundImage:'url(' + getIconLink(subItem.imgUrl) + ')'}">
<i v-if="subItem.imgUrl==''" class="el-icon-picture-outline"></i>
:style="{backgroundImage:'url(' + getIconLink(couopnMsg.coupon_url) + ')'}">
<i v-if="couopnMsg.coupon_url==''" class="el-icon-picture-outline"></i>
</div>
</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>
<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>
</el-dialog>
</div>
</template>
<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"
export default {
data() {
return {
comCkVideo:-1,
//选择图片
chooseImg:'',
//导航图标
isShowNav:false,
//公告
......@@ -216,6 +266,11 @@
isShowTotic:false,
//领券中心
isShowCoupon:false,
//选图片
choicImg:false,
//视频
isShowVideo:false,
isChoiceVideo:false,
radio:'4',
activeName:'first',
dataList: [],
......@@ -224,19 +279,100 @@
RoleIntro: '', //备注/描述
RoleAuth: '', //角色权限
},
//导航图标msg
navMsg:{
row_num:4
},
//视频
videoMsg:{
video_url:'', //视频文件
video_pic_url:'' //封面图
},
//公告msg
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:[],
//公告验证
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: {
draggable
draggable,
ChooseImg,
chooseMeun,
Choosevideo
},
created() {
......@@ -245,7 +381,7 @@
methods: {
//点击添加组件
addPlugn(item){
this.dataList.push(item);
this.dataList.push(JSON.parse(JSON.stringify(item)));
},
//删除插件
delPlugn(index){
......@@ -253,12 +389,23 @@
},
//编辑
isShowDialog(item){
console.log(item,'item');
switch(item.key){
case 'home_nav':
this.isShowNav=true;
this.navMsg.row_num=item.row_num;
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 @@
})
this.isShowNav=false;
},
GetMiniProgramMallIndex() {
this.apipost("/api/Tenant/GetMiniProgramMallIndex", {}, res => {
if (res.data.resultCode == 1) {
this.ListData=res.data.data;
saveTopic(addMsg){
//提交创建、修改表单
this.$refs[addMsg].validate(valid => {
if (valid) {
this.setTopic();
} 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() {
this.apipost("/api/Employee/SetRole", this.addMsg, res => {
if (res.data.resultCode == 1) {
this.getList();
this.clearInfo();
//保存公告
saveNotice(addMsg){
//提交创建、修改表单
this.$refs[addMsg].validate(valid => {
if (valid) {
this.baocunNotice();
} 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;
}
})
},
//修改
EditRole(item) {
this.apipost("/api/Employee/GetRole", {
RoleId: item.RoleId
}, res => {
//确定保存专题
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.addMsg = res.data.data;
let newArr = this.addMsg.RoleAuth.split(',');
setTimeout(() => {
this.$refs.tree.setCheckedKeys(newArr);
}, 10)
this.ListData=res.data.data;
} 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);
}
})
})
//保存视频
saveVideo(addMsg){
//提交创建、修改表单
this.$refs[addMsg].validate(valid => {
if (valid) {
this.baocunVideo();
} else {
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() {
this.GetMiniProgramMallIndex();
......@@ -436,5 +640,11 @@
height: 64px;
line-height: 88px;
}
.HomePage .video_msg{
display: inline-block;
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow:ellipsis;
}
</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