Skip to content

E
ElectricitySheep
Commit 47feff40 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent a21a0f1b
Hide whitespace changes
Inline Side-by-side
Showing with 212 additions and 175 deletions
src/components/StoreDesign/navigationIcon.vue
View file @ 47feff40
<template> <template>
<div class="navigation"> <div class="navigation">
<template v-if="isShowAdd"> <template v-if="NavIconIsShowAdd">
<div class="head-title"> <div class="head-title">
导航图标列表 导航图标列表
<el-button @click="isShowAdd=false" style="float:right;margin-top: -5px;" size="small" type="primary">添加导航图标</el-button> <el-button @click="NavIconIsShowAdd=false" style="float:right;margin-top: -5px;" size="small" type="primary">
</div> 添加导航图标
<div class="content"> </el-button>
<div> </div>
<div class="searchInput"> <div class="content">
<el-input style="display:inline-block;width:225px;height:30px" <div>
placeholder="请输入搜索内容" <div class="searchInput">
v-model="value" <el-input style="display:inline-block;width:225px;height:30px" placeholder="请输入搜索内容"
size="small" v-model="msg.NavIconName" size="small" clearable @keyup.enter.native="msg.pageIndex=1,getList()">
clearable> </el-input>
</el-input> <span class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px" @click="msg.pageIndex=1,getList()"> </span>
<span class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"></span> </div>
</div>
</div>
<el-table
:data="tableData"
v-loading="loading"
border
style="width: 100%;margin:20px 0">
<el-table-column
prop="ID"
label="ID"
width="100">
</el-table-column>
<el-table-column
prop="address"
width="120"
label="名称">
</el-table-column>
<el-table-column
prop="name"
label="导航图标"
width="80">
</el-table-column>
<el-table-column
prop="name"
label="导航链接">
</el-table-column>
<el-table-column
prop="name"
label="排序"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="是否显示"
width="120">
</el-table-column>
<el-table-column
prop="address"
width="220"
label="操作">
</el-table-column>
</el-table>
<el-pagination style="text-align:right"
background
@current-change="handleCurrentChange"
:page-size="msg.pageSize"
layout="prev, pager, next"
:total="total">
</el-pagination>
</div> </div>
<el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0">
<el-table-column prop="NavIconId" label="编号" width="100">
</el-table-column>
<el-table-column prop="NavIconName" width="120" label="名称">
</el-table-column>
<el-table-column label="导航图标" width="80">
<template slot-scope="scope">
<img :src="scope.row.NavIconImg">
</template>
</el-table-column>
<el-table-column prop="NavIconUrl" label="导航链接">
</el-table-column>
<el-table-column prop="NavIconSort" label="排序" width="180">
</el-table-column>
<el-table-column prop="NavIconIsShowStr" label="是否显示" width="120">
</el-table-column>
<el-table-column width="220" label="操作">
<template slot-scope="scope">
<el-button size="mini" type="info" plain @click="EditNavIcon(scope.row)">编辑 </el-button>
<el-button size="mini" type="info" plain @click="RemmoveNavIcon(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination style="text-align:right" background @current-change="handleCurrentChange"
:page-size="msg.pageSize" layout="prev, pager, next" :total="total">
</el-pagination>
</div>
</template> </template>
<template v-else> <template v-else>
<div class="head-title"> <div class="head-title">
<span @click="isShowAdd=true" style="color:rgb(64, 158, 255);cursor:pointer;">导航图标列表</span><span style="margin:0 9px;color:#C0C4CC">/</span><span>导航图标编辑</span> <span @click="NavIconIsShowAdd=true" style="color:rgb(64, 158, 255);cursor:pointer;">导航图标列表</span><span
</div> style="margin:0 9px;color:#C0C4CC">/</span><span>导航图标编辑</span>
<div class="content"> </div>
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="80px" style="padding:0 20px;"> <div class="content">
<el-form-item label="名称" prop="name"> <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="80px" style="padding:0 20px;">
<el-input v-model="addMsg.name" class="w400" size="small" placeholder="请输入名称" maxlength="20" /> <el-form-item label="名称" prop="NavIconName">
</el-form-item> <el-input v-model="addMsg.NavIconName" class="w400" size="small" placeholder="请输入名称" maxlength="20" />
<el-form-item label="排序" prop="Sort"> </el-form-item>
<el-input type="text" v-model="addMsg.Sort" size="small" class="w400" placeholder="请输入排序" maxlength="20" /> <el-form-item label="排序" prop="NavIconSort">
</el-form-item> <el-input type="text" v-model="addMsg.NavIconSort" size="small" class="w400" placeholder="请输入排序"
<el-form-item label="导航图标" prop="img"> maxlength="4" />
<div> </el-form-item>
<el-tooltip class="item" effect="dark" content="建议尺寸:88*88" placement="top-start"> <el-form-item label="导航图标" prop="NavIconImg">
<el-upload class="avatar-uploader" action="" accept="image/jpeg,image/gif,image/png,image/bmp" <div>
:show-file-list="false" :http-request="UploadImage"> <el-tooltip class="item" effect="dark" content="建议尺寸:88*88" placement="top-start">
<el-button size="small">选择文件</el-button> <el-upload class="avatar-uploader" action="" accept="image/jpeg,image/gif,image/png,image/bmp"
</el-upload> :show-file-list="false" :http-request="UploadImage">
</el-tooltip> <el-button size="small">选择文件</el-button>
</div> </el-upload>
<div class="navImg"> </el-tooltip>
<img v-if="addMsg.img" :src="addMsg.img" alt="" /> </div>
<img v-else src="../../assets/img/default.png" alt=""/> <div class="navNavIconImg">
</div> <img v-if="addMsg.NavIconImg" :src="addMsg.NavIconImg" alt="" />
</el-form-item> <img v-else src="../../assets/img/default.png" alt="" />
<el-form-item label="导航链接" prop="link"> </div>
<el-input type="password" v-model="addMsg.link" class="w400" size="small" maxlength="100" /> </el-form-item>
<el-button plain size="small">选择链接</el-button> <el-form-item label="导航链接" prop="NavIconUrl">
</el-form-item> <el-input v-model="addMsg.NavIconUrl" class="w400" size="small" maxlength="100" />
<el-form-item label="是否显示"> <el-button plain size="small">选择链接</el-button>
<el-switch v-model="addMsg.isShow" ></el-switch> </el-form-item>
</el-form-item> <el-form-item label="是否显示">
</el-form> <el-switch v-model="addMsg.NavIconIsShow" :active-value="1" :inactive-value="0"></el-switch>
</div> </el-form-item>
<el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform('addMsg')">保存</el-button> </el-form>
</div>
<el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform('addMsg')">保存
</el-button>
</template> </template>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
let validataImg = (rule, value, callback) => { let validataNavIconImg = (rule, value, callback) => {
if (this.addMsg.img == '') { if (this.addMsg.NavIconImg == '') {
return callback(new Error('请选择导航图标')); return callback(new Error('请选择导航图标'));
} else { } else {
callback(); callback();
} }
} }
return { return {
loading:false, loading: false,
dialogVisible:false, dataList: [],
value:'', msg: {
options:[], pageIndex: 1,
tableData:[ pageSize: 15,
{ID:'111'} NavIconName: "",
], MallBaseId: 0,
msg:{
pageIndex:1,
pageSize:15,
}, },
total:0, total: 0,
isShowAdd:true, NavIconIsShowAdd: true,
addMsg:{ addMsg: {
name:'', NavIconId: 0, //导航Id
Sort:100, MallBaseId: 0, //小程序Id
img:'', NavIconName: '', //导航名称
link:'', NavIconSort: 100, //导航排序
isShow:true NavIconImg: '', //导航图标
NavIconUrl: '', //导航链接
NavIconIsShow: 0, //是否显示
}, },
rules: { rules: {
name: [{ NavIconName: [{
required: true, required: true,
message: "请输入导航名称", message: "请输入导航名称",
trigger: "blur" trigger: "blur"
}], }],
Sort: [{ NavIconSort: [{
required: true, required: true,
message: "请输入导航排序", message: "请输入导航排序",
trigger: "blur" trigger: "blur"
}], }],
img:[{ NavIconImg: [{
validator: validataImg, validator: validataNavIconImg,
trigger: "blur", trigger: "blur",
required: true required: true
}], }],
link: [{ NavIconUrl: [{
required: true, required: true,
message: "请选择导航链接", message: "请选择导航链接",
trigger: "blur" trigger: "blur"
...@@ -165,78 +145,135 @@ ...@@ -165,78 +145,135 @@
}, },
methods: { methods: {
handleCurrentChange(val) { handleCurrentChange(val) {
this.msg.pageIndex = val; this.msg.pageIndex = val;
this.getList();
},
getList() {
this.apipost("/api/Tenant/GetMiniProgrameNaviconPage", this.msg, res => {
if (res.data.resultCode == 1) {
this.dataList = res.data.data.pageData;
this.total = res.data.data.count;
} else {
this.Info(res.data.message);
}
})
},
//上传图片
UploadImage(file) {
this.UploadFileToTencent(this.FileType().UserNavIconImg, file.file, res => {
if (res.resultCode == 1) {
this.addMsg.NavIconImg = res.FileUrl;
}
})
},
submitform(addMsg) {
//提交创建、修改表单
this.$refs[addMsg].validate(valid => {
if (valid) {
this.saveMsg();
} else {
return false;
}
});
},
//保存
saveMsg() {
this.apipost("/api/Tenant/SetMiniProgrameNavicon", this.addMsg, res => {
if (res.data.resultCode == 1) {
this.getList(); this.getList();
}, this.NavIconIsShowAdd = true;
getList(){ this.addMsg.NavIconId = 0;
this.addMsg.NavIconName = "";
}, this.addMsg.NavIconSort = 100;
//上传图片 this.addMsg.NavIconImg = "";
UploadImage(file) { this.addMsg.NavIconUrl = "";
this.UploadFileToTencent(this.FileType().UserImg, file.file, res => { this.addMsg.NavIconIsShow = 0;
if (res.resultCode == 1) { } else {
this.addMsg.img = res.FileUrl; this.Info(res.data.message);
} }
}) })
}, },
submitform(addMsg) { //修改
//提交创建、修改表单 EditNavIcon(item) {
this.$refs[addMsg].validate(valid => { this.apipost("/api/Tenant/GetMiniProgrameNavicon", {
if (valid) { NavIconId: item.NavIconId
this.saveMsg(); }, res => {
if (res.data.resultCode == 1) {
this.addMsg = res.data.data;
this.NavIconIsShowAdd = false;
} else {
this.Info(res.data.message);
}
})
},
//删除
RemmoveNavIcon(item) {
var that = this;
that.Confirm("是否要删除?", function () {
that.apipost("/api/Tenant/RemoveMiniProgrameNavicon", {
NavIconId: item.NavIconId
}, res => {
if (res.data.resultCode == 1) {
that.getList();
} else { } else {
return false; that.Info(res.data.message);
} }
}); })
}, })
//保存 },
saveMsg(){
}
}, },
mounted() { mounted() {
this.addMsg.MallBaseId = this.getLocalStorage().MallBaseId;
this.msg.MallBaseId = this.getLocalStorage().MallBaseId;;
this.getList();
} }
}; };
</script> </script>
<style> <style>
.navImg{ .navNavIconImg {
width:80px; width: 80px;
height:80px; height: 80px;
} }
.navImg img{
width:100%; .navNavIconImg NavIconImg {
height:100%; width: 100%;
} height: 100%;
.navigation .blue{ }
color:#409EFF;
.navigation .blue {
} color: #409EFF;
.navigation .content .searchInput{
}
.navigation .content .searchInput {
border: 1px solid #DCDFE6; border: 1px solid #DCDFE6;
border-radius: 4px; border-radius: 4px;
} }
.navigation .content .searchInput .el-input__inner{
border:none;outline:none; .navigation .content .searchInput .el-input__inner {
border: none;
outline: none;
height: 30px; height: 30px;
line-height: 30px; line-height: 30px;
} }
.navigation .content .searchInput{
.navigation .content .searchInput {
line-height: normal; line-height: normal;
display: inline-table; display: inline-table;
width: 100%; width: 100%;
border-collapse: separate; border-collapse: separate;
border-spacing: 0; border-spacing: 0;
width:250px; width: 250px;
margin-right: 20px; margin-right: 20px;
} }
.navigation .content{
.navigation .content {
background: #fff; background: #fff;
margin-top:10px; margin-top: 10px;
padding: 20px; padding: 20px;
box-sizing: border-box; box-sizing: border-box;
} }
</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