Skip to content

E
ElectricitySheep
Commit 7068bd08 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent f30293dc
Hide whitespace changes
Inline Side-by-side
Showing with 98 additions and 82 deletions
src/components/StoreDesign/ShufflingFigure.vue
View file @ 7068bd08
......@@ -14,20 +14,20 @@
</div>
</div>
<div>
<div class="app-banner-list">
<div class="app-banner-list" v-for="(item,index) in dataList" :key="index">
<div class="el-card app-banner-list-item">
<div style="padding:0">
<div style="position: relative;"><img class="banner_topImg"
src="https://cdnimg.iotweixin.com/uploads/mall1285/20200519/8d4e60ccdcc4ec7f06eb9f9a09aa116f.jpg"
alt="">
<el-tooltip slot="label" class="item" effect="dark" content="删除" placement="top">
<img class="delImg" src="../../assets/img/userman/del.png" alt="">
</el-tooltip>
<div style="position: relative;"><img class="banner_topImg" :src="getIconLink(item.NavImg)" alt="">
<a @click="EditRole(item)">修改</a>
<el-tooltip slot="label" class="item" effect="dark" content="删除" placement="top">
<img class="delImg" src="../../assets/img/userman/del.png" alt="" @click="RemmoveRole(item)">
</el-tooltip>
</div>
</div>
<div class="banner_btmDiv">
<div class="app-banner-text">标题：12</div>
<div class="app-banner-text">路径：12</div>
<div class="app-banner-text">标题：{{item.NavName}}</div>
<div class="app-banner-text">路径：{{item.NavLink}}</div>
</div>
</div>
</div>
......@@ -36,29 +36,29 @@
</template>
<!-- 选择图片文件 -->
<el-dialog title="轮播图编辑" :visible.sync="isShowLunbo" width="960px">
<el-form label-width="100px" :model="addMsg" :rules="rules" ref="addMsg">
<el-form-item label="标题">
<el-input type="text" v-model="addMsg.title" size="small" maxlength="100"></el-input>
</el-form-item>
<el-form-item label="跳转链接">
<el-input type="text" v-model="addMsg.link" size="small" maxlength="200">
<el-button slot="append" @click="isShowLink=true">选择链接</el-button>
</el-input>
</el-form-item>
<el-form-item label="图片" prop="imgUrl">
<el-tooltip class="item" effect="dark" content="建议尺寸:750 * 350" placement="top">
<el-button size="mini" @click="choicImg=true">选择图片</el-button>
</el-tooltip>
<div class="zk_pic_box" flex="main:center cross:center" style="width:80px;height:80px;"
:style="{backgroundImage:'url(' + getIconLink(addMsg.imgUrl) + ')'}">
<i v-if="addMsg.imgUrl==''" class="el-icon-picture-outline"></i>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="isShowLunbo = false" size="small">取消</el-button>
<el-button type="primary" @click="addShuffImg" size="small">提交</el-button>
</span>
<el-form label-width="100px" :model="addMsg" :rules="rules" ref="addMsg">
<el-form-item label="标题">
<el-input type="text" v-model="addMsg.NavName" size="small" maxlength="100"></el-input>
</el-form-item>
<el-form-item label="跳转链接">
<el-input type="text" v-model="addMsg.NavLink" size="small" maxlength="200">
<el-button slot="append" @click="isShowLink=true">选择链接</el-button>
</el-input>
</el-form-item>
<el-form-item label="图片" prop="NavImg">
<el-tooltip class="item" effect="dark" content="建议尺寸:750 * 350" placement="top">
<el-button size="mini" @click="choicImg=true">选择图片</el-button>
</el-tooltip>
<div class="zk_pic_box" flex="main:center cross:center" style="width:80px;height:80px;"
:style="{backgroundImage:'url(' + getIconLink(addMsg.NavImg) + ')'}">
<i v-if="addMsg.NavImg==''" class="el-icon-picture-outline"></i>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="isShowLunbo = false" size="small">取消</el-button>
<el-button type="primary" @click="addShuffImg" size="small">提交</el-button>
</span>
</el-dialog>
<!-- 选择图片文件 -->
<el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
......@@ -72,7 +72,6 @@
<el-button size="small" type="danger" @click="getChoiceLink()">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
......@@ -83,23 +82,20 @@
return {
loading: false,
//添加图片弹窗
isShowLunbo:false,
isShowLunbo: false,
//选择图片弹窗
choicImg:false,
choicImg: false,
//选择链接弹窗
isShowLink:false,
isShowLink: false,
dataList: [],
msg: {
pageIndex: 1,
pageSize: 15,
},
addMsg: {
title:'', //标题
link:'', //跳转链接
imgUrl:'' //图片链接
Id: 0, //编号
NavName: '', //标题
NavLink: '', //跳转链接
NavImg: '' //图片链接
},
rules: {
imgUrl: [{
NavImg: [{
required: true,
message: "图片不能为空",
trigger: "change"
......@@ -107,37 +103,50 @@
},
};
},
created() {
},
created() {},
components: {
ChooseImg,
chooseMeun
},
methods: {
//添加图片
addShuffImg(){
addShuffImg() {
this.apipost("/api/Tenant/SetMallNav", this.addMsg, res => {
if (res.data.resultCode == 1) {
this.isShowLunbo = false;
this.getList();
this.clearMsg();
this.Success(res.data.message);
} else {
this.Info(res.data.message);
}
})
},
//清空消息
clearMsg() {
this.addMsg.Id = 0;
this.addMsg.NavName = '';
this.addMsg.NavLink = '';
this.addMsg.NavImg = '';
},
//选择图片
SelectId(msg) {
this.addMsg.imgUrl = msg.url;
this.addMsg.NavImg = msg.url;
this.choicImg = false;
},
//获取选择链接
getChoiceLink() {
//调用子组件方法
var obj = this.$refs.chooseMeun.getChooseMenu();
this.addMsg.link = obj.PageUrl;
this.addMsg.NavLink = obj.PageUrl;
this.isShowLink = false;
},
//获取轮播图列表
getList() {
this.apipost("/api/Employee/GetRolePageList", this.msg, res => {
this.apipost("/api/Tenant/GetMallNavList", {}, res => {
if (res.data.resultCode == 1) {
this.dataList = res.data.data.pageData;
this.total = res.data.data.count;
this.dataList = res.data.data
console.log("this.dataList", this.dataList)
} else {
this.Info(res.data.message);
}
......@@ -155,15 +164,16 @@
},
//修改
EditRole(item) {
this.apipost("/api/Employee/GetRole", {
RoleId: item.RoleId
this.apipost("/api/Tenant/GetMallNav", {
Id: item.Id
}, 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.isShowLunbo = true;
var jsonData = res.data.data;
this.addMsg.Id = jsonData.Id;
this.addMsg.NavName = jsonData.NavName;
this.addMsg.NavLink = jsonData.NavLink;
this.addMsg.NavImg = jsonData.NavImg;
} else {
this.Info(res.data.message);
}
......@@ -173,8 +183,8 @@
RemmoveRole(item) {
var that = this;
that.Confirm("是否要删除?", function () {
that.apipost("/api/Employee/RemoveRole", {
RoleId: item.RoleId
that.apipost("/api/Tenant/RemoveMallNav", {
Id: item.Id
}, res => {
if (res.data.resultCode == 1) {
that.getList();
......@@ -238,32 +248,38 @@
margin-right: 20px;
cursor: pointer;
}
.shuffing .app-banner-text {
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-top:10px;
margin-top: 10px;
}
.shuffing .delImg{
display: none;
position: absolute;
bottom: 20px;
right: 20px;
padding: 0px;
.shuffing .delImg {
display: none;
position: absolute;
bottom: 20px;
right: 20px;
padding: 0px;
}
.shuffing .app-banner-list:hover .delImg{
display: block;
.shuffing .app-banner-list:hover .delImg {
display: block;
}
.shuffing .banner_btmDiv{
height: 90px;
padding: 10px;
font-size: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
.shuffing .banner_btmDiv {
height: 90px;
padding: 10px;
font-size: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}
.shuffing .banner_topImg{
height: 190px;
width: 250px;
.shuffing .banner_topImg {
height: 190px;
width: 250px;
display: block;
}
</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