Skip to content

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

页面修改

parent fd35d4c6
Hide whitespace changes
Inline Side-by-side
Showing with 686 additions and 0 deletions
src/components/StoreDesign/mimipage.vue 0 → 100644
View file @ f68c5571
<template>
<div class="navigation">
<template v-if="NavIconIsShowAdd">
<div class="head-title">
小程序页面
<el-button @click="NavIconIsShowAdd=false" style="float:right;margin-top: -5px;" size="small" type="primary">
添加导航图标
</el-button>
</div>
<div class="content">
<div>
<div class="searchInput">
<el-input style="display:inline-block;width:225px;height:30px" placeholder="请输入搜索内容"
v-model="msg.NavIconName" size="small" clearable @keyup.enter.native="msg.pageIndex=1,getList()">
</el-input>
<span class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px" @click="msg.pageIndex=1,getList()"> </span>
</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 v-else>
<div class="head-title">
<span @click="NavIconIsShowAdd=true" style="color:rgb(64, 158, 255);cursor:pointer;">导航图标列表</span><span
style="margin:0 9px;color:#C0C4CC">/</span><span>导航图标编辑</span>
</div>
<div class="content">
<el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="80px" style="padding:0 20px;">
<el-form-item label="名称" prop="NavIconName">
<el-input v-model="addMsg.NavIconName" class="w400" size="small" placeholder="请输入名称" maxlength="20" />
</el-form-item>
<el-form-item label="排序" prop="NavIconSort">
<el-input type="text" v-model="addMsg.NavIconSort" size="small" class="w400" placeholder="请输入排序"
maxlength="4" />
</el-form-item>
<el-form-item label="导航图标" prop="NavIconImg">
<div>
<el-tooltip class="item" effect="dark" content="建议尺寸:88*88" placement="top-start">
<el-upload class="avatar-uploader" action="" accept="image/jpeg,image/gif,image/png,image/bmp"
:show-file-list="false" :http-request="UploadImage">
<el-button size="small">选择文件</el-button>
</el-upload>
</el-tooltip>
</div>
<div class="navNavIconImg">
<img v-if="addMsg.NavIconImg" :src="addMsg.NavIconImg" alt="" />
<img v-else src="../../assets/img/default.png" alt="" />
</div>
</el-form-item>
<el-form-item label="导航链接" prop="NavIconUrl">
<el-input v-model="addMsg.NavIconUrl" class="w400" size="small" maxlength="100" />
<el-button plain size="small">选择链接</el-button>
</el-form-item>
<el-form-item label="是否显示">
<el-switch v-model="addMsg.NavIconIsShow" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
</el-form>
</div>
<el-button size="small" style="margin-top:20px;padding:9px 25px;" type="primary" @click="submitform('addMsg')">保存
</el-button>
</template>
</div>
</template>
<script>
export default {
data() {
let validataNavIconImg = (rule, value, callback) => {
if (this.addMsg.NavIconImg == '') {
return callback(new Error('请选择导航图标'));
} else {
callback();
}
}
return {
loading: false,
dataList: [],
msg: {
pageIndex: 1,
pageSize: 15,
NavIconName: "",
MallBaseId: 0,
},
total: 0,
NavIconIsShowAdd: true,
addMsg: {
NavIconId: 0, //导航Id
MallBaseId: 0, //小程序Id
NavIconName: '', //导航名称
NavIconSort: 100, //导航排序
NavIconImg: '', //导航图标
NavIconUrl: '', //导航链接
NavIconIsShow: 0, //是否显示
},
rules: {
NavIconName: [{
required: true,
message: "请输入导航名称",
trigger: "blur"
}],
NavIconSort: [{
required: true,
message: "请输入导航排序",
trigger: "blur"
}],
NavIconImg: [{
validator: validataNavIconImg,
trigger: "blur",
required: true
}],
NavIconUrl: [{
required: true,
message: "请选择导航链接",
trigger: "blur"
}]
},
};
},
created() {
},
methods: {
handleCurrentChange(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.NavIconIsShowAdd = true;
this.addMsg.NavIconId = 0;
this.addMsg.NavIconName = "";
this.addMsg.NavIconSort = 100;
this.addMsg.NavIconImg = "";
this.addMsg.NavIconUrl = "";
this.addMsg.NavIconIsShow = 0;
} else {
this.Info(res.data.message);
}
})
},
//修改
EditNavIcon(item) {
this.apipost("/api/Tenant/GetMiniProgrameNavicon", {
NavIconId: item.NavIconId
}, 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 {
that.Info(res.data.message);
}
})
})
},
},
mounted() {
this.addMsg.MallBaseId = this.getLocalStorage().MallBaseId;
this.msg.MallBaseId = this.getLocalStorage().MallBaseId;;
this.getList();
}
};
</script>
<style>
.navNavIconImg {
width: 80px;
height: 80px;
}
.navNavIconImg NavIconImg {
width: 100%;
height: 100%;
}
.navigation .blue {
color: #409EFF;
}
.navigation .content .searchInput {
border: 1px solid #DCDFE6;
border-radius: 4px;
}
.navigation .content .searchInput .el-input__inner {
border: none;
outline: none;
height: 30px;
line-height: 30px;
}
.navigation .content .searchInput {
line-height: normal;
display: inline-table;
width: 100%;
border-collapse: separate;
border-spacing: 0;
width: 250px;
margin-right: 20px;
}
.navigation .content {
background: #fff;
margin-top: 10px;
padding: 20px;
box-sizing: border-box;
}
</style>
src/components/system/minimenu.vue 0 → 100644
View file @ f68c5571
<style>
.minimenuDiv {
padding: 20px;
}
.minimenuDiv .query-box {
width: 100%;
padding: 0 0 20px;
border-bottom: 1px solid #ccc;
position: relative;
text-align: right;
}
.minimenuDiv .normalBtn {
color: #fff;
padding: 0 15px;
height: 30px;
background: #e95252;
border: 1px solid #e95252;
cursor: pointer;
border-radius: 15px;
margin-left: 10px;
outline: none;
}
</style>
<template>
<div class="minimenuDiv">
<div class="query-box">
名称： <el-input type="text" style="width:234px;" size="small" v-model="msg.PageName" clearable
@keyup.enter.native="msg.pageIndex=1,getPageList()"></el-input>
等级： <el-select style="width:234px;" size="small" v-model="msg.QPageType">
<el-option label="全部" :key="0" :value="0"></el-option>
<el-option v-for="item in pageType" :key="item.Id" :value="item.Id" :label="item.Name"></el-option>
</el-select>
状态： <el-select style="width:234px;" size="small" v-model="msg.Status">
<el-option label="全部" :key="-1" :value="-1"></el-option>
<el-option :key="0" :value="0" label="正常"></el-option>
<el-option :key="1" :value="1" label="禁用"></el-option>
</el-select>
<button type="button" class="normalBtn" @click="msg.pageIndex=1,getPageList()">查询</button>
<button type="button" class="normalBtn" @click="menuDialog=true,resetMsg()">新增</button>
<button type="button" class="normalBtn" @click="CommonJump('setminipage',{})">设置小程序菜单</button>
</div>
<table class="commonTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
<tr>
<th>菜单编号</th>
<th>菜单名称</th>
<th>菜单链接</th>
<th>菜单分类</th>
<th>状态</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in dataList" :key="index">
<td>{{item.PageId}}</td>
<td>{{item.PageName}}</td>
<td>{{item.PageUrl}}</td>
<td>{{item.PageTypeStr}}</td>
<td>{{item.StatusStr}}</td>
<td>
<el-tooltip class="item" effect="dark" content="修改" placement="top-start">
<el-button type="primary" icon="el-icon-edit" @click="getMenu(item.PageId)" circle style="padding:6px;">
</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start">
<el-button v-if="item.Status==0" type="danger" icon="el-icon-delete" @click="delMenu(item.PageId)" circle
style="padding:6px;"></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="恢复" placement="top-start">
<el-button v-if="item.Status==1" type="primary" icon="iconfont icon-icon_huifu"
@click="recoverMenu(item.PageId)" circle style="padding:5px;"></el-button>
</el-tooltip>
</td>
</tr>
</table>
<el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
v-if="dataList.length>0" layout="total,prev, pager, next, jumper" :page-size="msg.pageSize" :total="total">
</el-pagination>
<!-- 新增菜单 -->
<el-dialog title="新增菜单" :visible.sync="menuDialog" width="500px">
<el-form :model="addMsg" :rules="menurules" ref="addMsg" label-width="150px">
<el-form-item label="菜单名称" prop="PageName">
<el-input type="text" style="width:234px" size="small" maxlength="25" v-model="addMsg.PageName"></el-input>
</el-form-item>
<el-form-item label="菜单连接" prop="MenuUrl">
<el-input type="text" style="width:234px" size="small" maxlength="25" v-model="addMsg.PageUrl"></el-input>
</el-form-item>
<el-form-item label="菜单类型">
<el-select style="width:234px;" size="small" v-model="addMsg.PageType">
<el-option v-for="item in pageType" :key="item.Id" :value="item.Id" :label="item.Name"></el-option>
</el-select>
</el-form-item>
<el-form-item label="是否有参数">
<el-switch v-model="addMsg.IsParameter" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
<el-form-item label="参数值" v-if="addMsg.IsParameter==1">
<el-input type="text" style="width:234px" size="small" maxlength="25" v-model="addMsg.ParameterValue">
</el-input>
</el-form-item>
<el-form-item label="排序">
<el-input type="text" style="width:234px" @keyup.native="checkInteger(addMsg,'PageSort')" size="small"
maxlength="25" v-model="addMsg.PageSort"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="menuDialog = false">取 消</el-button>
<el-button size="small" type="primary" @click="submitForm('addMsg')">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
menuDialog: false,
currentPage: 1,
total: 0,
msg: {
pageIndex: 1,
pageSize: 20,
QPageType: 0,
PageName: "", //菜单名称
Status: -1, //菜单状态
},
dataList: [],
addMsg: {
PageId: 0, //页面编号
PageType: 1, //页面类型(1-基础页面,2-营销页面，3-订单页面，4-插件页面，5-diy页面
PageName: '', //页面名称
PageUrl: "", //页面地址
PageSort: 0, //页面排序
IsParameter: 0, //是否有参数(0-无参数，1-有参数)
ParameterValue: "", //参数值
},
pageType: [],
menurules: {
PageName: [{
required: true,
message: '请填写菜单名称。',
trigger: 'blur'
}],
}
};
},
created() {
},
methods: {
handleCurrentChange(val) {
this.msg.pageIndex = val;
this.getPageList();
},
submitForm(addMsg) {
//提交创建、修改表单
this.$refs[addMsg].validate(valid => {
if (valid) {
this.addMenu();
} else {
return false;
}
});
},
//重置菜单
resetMsg() {
this.addMsg.PageId = 0;
this.addMsg.PageType = 1;
this.addMsg.PageName = "";
this.addMsg.PageUrl = "";
this.addMsg.PageSort = "";
this.addMsg.IsParameter = 0;
this.addMsg.ParameterValue = "";
},
//获取页面类型
getPageTypeList() {
this.apipost("/api/Tenant/GetMiniProgramePageType", {}, res => {
if (res.data.resultCode == 1) {
this.pageType = res.data.data;
} else {
this.Info(res.data.message);
}
})
},
//获取分页数据
getPageList() {
this.apipost("/api/Tenant/GetMiniProgramePageManage_Page", 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);
}
})
},
//添加修改菜单
addMenu() {
this.apipost("/api/Tenant/SetMiniProgramePageManage", this.addMsg, res => {
if (res.data.resultCode == 1) {
this.getPageList();
this.menuDialog = false;
this.resetMsg();
} else {
this.Info(res.data.message);
}
})
},
//根据编号获取菜单
getMenu(Id) {
this.apipost("/api/Tenant/GetMiniProgramePageManage", {
PageId: Id
}, res => {
if (res.data.resultCode == 1) {
this.addMsg = res.data.data;
this.menuDialog = true;
} else {
this.Info(res.data.message);
}
})
},
//删除菜单
delMenu(Id) {
var that = this;
that.Confirm("是否删除?", function () {
that.apipost("/api/Tenant/SetMiniProgramePageManageStatus", {
PageId: Id,
Status: 1
}, res => {
if (res.data.resultCode == 1) {
that.Success(res.data.message);
that.getPageList();
} else {
that.Info(res.data.message);
}
})
});
},
//恢复菜单
recoverMenu(Id) {
this.apipost("/api/Tenant/SetMiniProgramePageManageStatus", {
PageId: Id,
Status: 0
}, res => {
if (res.data.resultCode == 1) {
this.Success(res.data.message);
this.getPageList();
} else {
this.Info(res.data.message);
}
})
},
},
mounted() {
this.getPageTypeList();
this.getPageList();
}
};
</script>
src/components/system/setminipage.vue 0 → 100644
View file @ f68c5571
<style>
.minimenuDiv {
padding: 20px;
}
.minimenuDiv .query-box {
width: 100%;
padding: 0 0 20px;
border-bottom: 1px solid #ccc;
position: relative;
text-align: right;
}
.minimenuDiv .normalBtn {
color: #fff;
padding: 0 15px;
height: 30px;
background: #e95252;
border: 1px solid #e95252;
cursor: pointer;
border-radius: 15px;
margin-left: 10px;
outline: none;
}
</style>
<template>
<div class="minimenuDiv">
<div class="query-box">
<button type="button" class="normalBtn" >保存</button>
</div>
<table class="commonTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
<tr>
<th>菜单类型</th>
<th>菜单</th>
</tr>
<tr v-for="(item,index) in dataList" :key="index">
<td>{{item.PageId}}</td>
<td>{{item.PageName}}</td>
<td>{{item.PageUrl}}</td>
<td>{{item.PageTypeStr}}</td>
<td>{{item.StatusStr}}</td>
<td>
<el-tooltip class="item" effect="dark" content="修改" placement="top-start">
<el-button type="primary" icon="el-icon-edit" @click="getMenu(item.PageId)" circle style="padding:6px;">
</el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start">
<el-button v-if="item.Status==0" type="danger" icon="el-icon-delete" @click="delMenu(item.PageId)" circle
style="padding:6px;"></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="恢复" placement="top-start">
<el-button v-if="item.Status==1" type="primary" icon="iconfont icon-icon_huifu"
@click="recoverMenu(item.PageId)" circle style="padding:5px;"></el-button>
</el-tooltip>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data() {
return {
loading: false,
menuDialog: false,
dataList: [],
addMsg: {
PageId: 0, //页面编号
PageType: 1, //页面类型(1-基础页面,2-营销页面，3-订单页面，4-插件页面，5-diy页面
PageName: '', //页面名称
PageUrl: "", //页面地址
PageSort: 0, //页面排序
IsParameter: 0, //是否有参数(0-无参数，1-有参数)
ParameterValue: "", //参数值
},
pageType: [],
menurules: {
PageName: [{
required: true,
message: '请填写菜单名称。',
trigger: 'blur'
}],
}
};
},
created() {
},
methods: {
//获取分页数据
getPageList() {
this.apipost("/api/Tenant/GetMiniProgramePageManageList", {}, res => {
if (res.data.resultCode == 1) {
this.dataList = res.data.data;
} else {
this.Info(res.data.message);
}
})
},
//添加修改菜单
setMenu() {
this.apipost("/api/Tenant/SetMiniProgramePageManage", this.addMsg, res => {
if (res.data.resultCode == 1) {
this.getPageList();
this.menuDialog = false;
this.resetMsg();
} else {
this.Info(res.data.message);
}
})
},
//根据编号获取菜单
getMenu(Id) {
this.apipost("/api/Tenant/GetMiniProgramePageManage", {
PageId: Id
}, res => {
if (res.data.resultCode == 1) {
this.addMsg = res.data.data;
this.menuDialog = true;
} else {
this.Info(res.data.message);
}
})
},
},
mounted() {
this.getPageList();
}
};
</script>
src/router/index.js
View file @ f68c5571
......@@ -40,6 +40,11 @@ export default new Router({
name: 'minimenu',
component: resolve => require(['@/components/system/minimenu'], resolve),
},
{
path: '/setminipage',//设置小程序菜单
name: 'setminipage',
component: resolve => require(['@/components/system/setminipage'], resolve),
},
{
path: '/mall',
name: 'mall',
......
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