mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-21 10:25:53 +08:00
优化管理端代码结构
This commit is contained in:
paulGao
49
manager/src/views/main-parts/footer.vue
Normal file
49
manager/src/views/main-parts/footer.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="foot">
|
||||
<Row type="flex" justify="space-around" class="help">
|
||||
<a class="item" :href="config.website" target="_blank">帮助</a>
|
||||
<a class="item" :href="config.website" target="_blank">隐私</a>
|
||||
<a class="item" :href="config.website" target="_blank">条款</a>
|
||||
</Row>
|
||||
<Row type="flex" justify="center" class="copyright">
|
||||
Copyright © {{year}} - Present
|
||||
<a :href="config.website" class="href" target="_blank" style="margin:0 5px;">{{config.title}}</a>
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
const config = require('@/config/index')
|
||||
export default {
|
||||
name: "footer",
|
||||
data() {
|
||||
return {
|
||||
config,
|
||||
year: new Date().getFullYear(), // 年
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.foot {
|
||||
position: fixed;
|
||||
bottom: 4vh;
|
||||
width: 368px;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
font-size: 14px;
|
||||
.help {
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1vh;
|
||||
width: 60%;
|
||||
.item {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
:hover {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
83
manager/src/views/main-parts/header.vue
Normal file
83
manager/src/views/main-parts/header.vue
Normal file
@@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div>
|
||||
<Row class="header">
|
||||
<img :src="domainLogo" class="logo" width="220px" />
|
||||
</Row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getBaseSite } from "@/api/common.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
domainLogo: require("@/assets/logo.png"),
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if (
|
||||
!localStorage.getItem("icon") ||
|
||||
!localStorage.getItem("title") ||
|
||||
!localStorage.getItem("icontitle_expiration_time")
|
||||
) {
|
||||
this.getSite();
|
||||
} else {
|
||||
// 如果缓存过期，则获取最新的信息
|
||||
if (new Date() > localStorage.getItem("icontitle_expiration_time")) {
|
||||
this.getSite();
|
||||
return;
|
||||
} else {
|
||||
this.domainLogo = localStorage.getItem("icon");
|
||||
let link =
|
||||
document.querySelector("link[rel*='icon']") ||
|
||||
document.createElement("link");
|
||||
link.type = "image/x-icon";
|
||||
link.href = localStorage.getItem("icon");
|
||||
link.rel = "shortcut icon";
|
||||
document.getElementsByTagName("head")[0].appendChild(link);
|
||||
window.document.title = localStorage.getItem("title") + " - 运营后台";
|
||||
}
|
||||
}
|
||||
},
|
||||
getSite() {
|
||||
//获取domainLogo
|
||||
getBaseSite().then((res) => {
|
||||
const { domainLogo, siteName } = JSON.parse(res.result.settingValue);
|
||||
this.domainLogo = domainLogo;
|
||||
// 过期时间
|
||||
var expirationTime = new Date().setHours(new Date().getHours() + 1);
|
||||
// 存放过期时间
|
||||
localStorage.setItem("icontitle_expiration_time", expirationTime);
|
||||
// 存放信息
|
||||
localStorage.setItem("icon", domainLogo);
|
||||
localStorage.setItem("title", siteName);
|
||||
let link =
|
||||
document.querySelector("link[rel*='icon']") ||
|
||||
document.createElement("link");
|
||||
link.type = "image/x-icon";
|
||||
link.href = domainLogo;
|
||||
link.rel = "shortcut icon";
|
||||
document.getElementsByTagName("head")[0].appendChild(link);
|
||||
window.document.title = siteName + " - 运营后台";
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.header {
|
||||
margin-bottom: 6vh;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center !important;
|
||||
}
|
||||
.logo {
|
||||
width: 440px;
|
||||
height: 158px;
|
||||
}
|
||||
</style>
|
||||
32
manager/src/views/main-parts/lang-switch.vue
Normal file
32
manager/src/views/main-parts/lang-switch.vue
Normal file
@@ -0,0 +1,32 @@
|
||||
<template>
|
||||
<div class="lang-icon">
|
||||
<Dropdown @on-click="langChange">
|
||||
<Icon type="md-globe" size="26"/>
|
||||
<DropdownMenu slot="list">
|
||||
<DropdownItem name="zh-CN">简体中文</DropdownItem>
|
||||
<DropdownItem name="en-US">English</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "langSwitch",
|
||||
methods: {
|
||||
langChange(v) {
|
||||
this.$i18n.locale = v;
|
||||
this.$store.commit("switchLang", v);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lang-icon {
|
||||
position: fixed;
|
||||
top: 2vh;
|
||||
right: 1.5vw;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
81
manager/src/views/main-parts/message-tip.vue
Normal file
81
manager/src/views/main-parts/message-tip.vue
Normal file
@@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div class="message-con">
|
||||
<Dropdown trigger="click">
|
||||
|
||||
<a href="javascript:void(0)">
|
||||
{{ value > 0 ? "有" + value + "条待办事项" : "无待办事项" }}
|
||||
<Icon v-if="value!=0" type="ios-arrow-down"></Icon>
|
||||
</a>
|
||||
<DropdownMenu v-if="value!=0" slot="list">
|
||||
<DropdownItem v-if="res.balanceCash" @click.native="navigateTo('deposit')">
|
||||
<Badge :count="res.balanceCash">待处理预存款提现申请 </Badge>
|
||||
</DropdownItem>
|
||||
<DropdownItem v-if="res.complain" @click.native="navigateTo('orderComplaint')">
|
||||
<Badge :count="res.complain">待处理投诉审核 </Badge>
|
||||
</DropdownItem>
|
||||
<DropdownItem v-if="res.distributionCash" @click.native="navigateTo('distributionCash')">
|
||||
<Badge :count="res.distributionCash">待处理分销商提现申请 </Badge>
|
||||
</DropdownItem>
|
||||
<DropdownItem v-if="res.goods" @click.native="navigateTo('applyGoods')">
|
||||
<Badge :count="res.goods">待处理商品审核 </Badge>
|
||||
</DropdownItem>
|
||||
<DropdownItem v-if="res.refund" @click.native="navigateTo('afterSaleOrder')">
|
||||
<Badge :count="res.refund">待处理售后申请 </Badge>
|
||||
</DropdownItem>
|
||||
<DropdownItem v-if="res.store" @click.native="navigateTo('shopAuth')">
|
||||
<Badge :count="res.store">待处理店铺入驻审核 </Badge>
|
||||
</DropdownItem>
|
||||
<DropdownItem v-if="res.waitPayBill" @click.native="navigateTo('accountStatementBill')">
|
||||
<Badge :count="res.waitPayBill">待与商家对账</Badge>
|
||||
</DropdownItem>
|
||||
<div></div>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "messageTip",
|
||||
data() {
|
||||
return {
|
||||
value: 0, // 消息数量
|
||||
empty: false, // 是否为空
|
||||
};
|
||||
},
|
||||
props: {
|
||||
res: {
|
||||
type: null,
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
navigateTo(name) {
|
||||
this.$router.push({
|
||||
name,
|
||||
});
|
||||
},
|
||||
init() {
|
||||
Object.keys(this.res).forEach((item) => {
|
||||
this.value = parseInt(this.value) + parseInt(this.res[item]);
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
/deep/ .ivu-select-dropdown {
|
||||
text-align: left;
|
||||
}
|
||||
.message-con {
|
||||
margin-right: 10px;
|
||||
}
|
||||
/deep/ .ivu-dropdown-item{
|
||||
padding: 7px 20px !important;
|
||||
}
|
||||
/deep/ .ivu-badge-count{
|
||||
right: -10px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,98 @@
|
||||
<template>
|
||||
<div class="ivu-shrinkable-menu">
|
||||
<!-- 一级菜单 -->
|
||||
<Menu ref="sideMenu" width="80px" theme="dark" :active-name="currNav" @on-select="selectNav">
|
||||
<MenuItem v-for="(item, i) in navList" :key="i" :name="item.name">
|
||||
{{item.title}}
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
<!-- 二级菜单 -->
|
||||
<Menu
|
||||
ref="childrenMenu"
|
||||
:active-name="$route.name"
|
||||
width="100px"
|
||||
@on-select="changeMenu"
|
||||
>
|
||||
<template v-for="item in menuList">
|
||||
<MenuGroup :title="item.title" :key="item.id" style="padding-left:0;">
|
||||
<MenuItem :name="menu.name" v-for="menu in item.children" :key="menu.name">
|
||||
{{menu.title}}
|
||||
</MenuItem>
|
||||
</MenuGroup>
|
||||
|
||||
</template>
|
||||
</Menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import util from "@/libs/util.js";
|
||||
|
||||
export default {
|
||||
name: "shrinkableMenu",
|
||||
computed: {
|
||||
menuList() {
|
||||
return this.$store.state.app.menuList;
|
||||
},
|
||||
navList() {
|
||||
return this.$store.state.app.navList;
|
||||
},
|
||||
currNav() {
|
||||
return this.$store.state.app.currNav;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
// 监听路由变化
|
||||
$route: {
|
||||
handler: function (val, oldVal) {
|
||||
if (val.meta.firstRouterName && val.meta.firstRouterName !== this.currNav) {
|
||||
this.selectNav(val.meta.firstRouterName)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeMenu(name) { //二级路由点击
|
||||
this.$router.push({
|
||||
name: name
|
||||
});
|
||||
},
|
||||
selectNav(name) { // 一级路由点击事件
|
||||
this.$store.commit("setCurrNav", name);
|
||||
this.setStore("currNav", name);
|
||||
util.initRouter(this);
|
||||
this.$nextTick(()=>{
|
||||
this.$refs.childrenMenu.updateActiveName()
|
||||
})
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.ivu-shrinkable-menu{
|
||||
height: calc(100% - 60px);
|
||||
width: 180px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ivu-btn-text:hover {
|
||||
background-color: rgba(255,255,255,.2) !important;
|
||||
}
|
||||
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu), .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu){
|
||||
background-color: #fff;
|
||||
&:hover{
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
.ivu-menu-vertical{
|
||||
overflow-y: auto;
|
||||
}
|
||||
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu), .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title-active:not(.ivu-menu-submenu){
|
||||
color: $theme_color;
|
||||
}
|
||||
/deep/.ivu-menu-vertical .ivu-menu-item-group-title {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
</style>
|
||||
253
manager/src/views/main-parts/tags-page-opened.vue
Normal file
253
manager/src/views/main-parts/tags-page-opened.vue
Normal file
@@ -0,0 +1,253 @@
|
||||
|
||||
|
||||
<template>
|
||||
|
||||
<div
|
||||
ref="scrollCon"
|
||||
@DOMMouseScroll="handlescroll"
|
||||
@mousewheel="handlescroll"
|
||||
class="tags-outer-scroll-con"
|
||||
>
|
||||
<ul v-show="visible" :style="{left: contextMenuLeft + 'px', top: contextMenuTop + 'px'}" class="contextmenu">
|
||||
<li v-for="(item, key) of actionList" @click="handleTagsOption(key)" :key="key">{{item}}</li>
|
||||
</ul>
|
||||
<div ref="scrollBody" class="tags-inner-scroll-body" :style="{left: tagBodyLeft + 'px'}">
|
||||
<transition-group name="taglist-moving-animation">
|
||||
<Tag
|
||||
type="dot"
|
||||
v-for="item in pageTagsList"
|
||||
ref="tagsPageOpened"
|
||||
:key="item.name"
|
||||
:name="item.name"
|
||||
@on-close="closePage"
|
||||
@click.native="linkTo(item)"
|
||||
:closable="item.name=='home_index'?false:true"
|
||||
:color="item.children?(item.children[0].name==currentPageName?'primary':'default'):(item.name==currentPageName?'primary':'default')"
|
||||
@contextmenu.prevent.native="contextMenu(item, $event)"
|
||||
>{{ itemTitle(item) }}</Tag>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "tagsPageOpened",
|
||||
data() {
|
||||
return {
|
||||
currentPageName: this.$route.name, // 当前路由名称
|
||||
tagBodyLeft: 0, // 标签左偏移量
|
||||
visible: false, // 显示操作按钮
|
||||
contextMenuLeft: 0, // 内容左偏移量
|
||||
contextMenuTop: 0, // 内容上偏移量
|
||||
actionList: {
|
||||
others: '关闭其他',
|
||||
clearAll: '关闭所有'
|
||||
},
|
||||
refsTag: [], // 所有已打开标签
|
||||
tagsCount: 1 // 标签数量
|
||||
};
|
||||
},
|
||||
props: {
|
||||
pageTagsList: Array,
|
||||
beforePush: {
|
||||
type: Function,
|
||||
default: item => {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return this.$store.state.app.currentTitle;
|
||||
},
|
||||
tagsList() {
|
||||
return this.$store.state.app.pageOpenedList;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
itemTitle(item) {
|
||||
if (typeof item.title == "object") {
|
||||
return this.$t(item.title.i18n);
|
||||
} else {
|
||||
return item.title;
|
||||
}
|
||||
},
|
||||
closePage(event, name) {
|
||||
let pageOpenedList = this.$store.state.app.pageOpenedList;
|
||||
let lastPageObj = pageOpenedList[0];
|
||||
if (this.currentPageName == name) {
|
||||
let len = pageOpenedList.length;
|
||||
for (let i = 1; i < len; i++) {
|
||||
if (pageOpenedList[i].name == name) {
|
||||
if (i < len - 1) {
|
||||
lastPageObj = pageOpenedList[i + 1];
|
||||
} else {
|
||||
lastPageObj = pageOpenedList[i - 1];
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let tagWidth = event.target.parentNode.offsetWidth;
|
||||
this.tagBodyLeft = Math.min(this.tagBodyLeft + tagWidth, 0);
|
||||
}
|
||||
this.$store.commit("removeTag", name);
|
||||
this.$store.commit("closePage", name);
|
||||
pageOpenedList = this.$store.state.app.pageOpenedList;
|
||||
localStorage.pageOpenedList = JSON.stringify(pageOpenedList);
|
||||
if (this.currentPageName == name) {
|
||||
this.linkTo(lastPageObj);
|
||||
}
|
||||
},
|
||||
linkTo(item) {
|
||||
if (this.$route.name == item.name) {
|
||||
return;
|
||||
}
|
||||
let routerObj = {};
|
||||
routerObj.name = item.name;
|
||||
if (item.argu) {
|
||||
routerObj.params = item.argu;
|
||||
}
|
||||
if (item.query) {
|
||||
routerObj.query = item.query;
|
||||
}
|
||||
if (this.beforePush(item)) {
|
||||
this.$router.push(routerObj);
|
||||
}
|
||||
},
|
||||
handlescroll(e) {
|
||||
var type = e.type;
|
||||
let delta = 0;
|
||||
if (type == "DOMMouseScroll" || type == "mousewheel") {
|
||||
delta = e.wheelDelta ? e.wheelDelta : -(e.detail || 0) * 40;
|
||||
}
|
||||
let left = 0;
|
||||
if (delta > 0) {
|
||||
left = Math.min(0, this.tagBodyLeft + delta);
|
||||
} else {
|
||||
if ( this.$refs.scrollCon.offsetWidth - 100 < this.$refs.scrollBody.offsetWidth ) {
|
||||
if ( this.tagBodyLeft < -( this.$refs.scrollBody.offsetWidth - this.$refs.scrollCon.offsetWidth + 100 ) ) {
|
||||
left = this.tagBodyLeft;
|
||||
} else {
|
||||
left = Math.max(
|
||||
this.tagBodyLeft + delta,
|
||||
this.$refs.scrollCon.offsetWidth -
|
||||
this.$refs.scrollBody.offsetWidth -
|
||||
100
|
||||
);
|
||||
}
|
||||
} else {
|
||||
this.tagBodyLeft = 0;
|
||||
}
|
||||
}
|
||||
this.tagBodyLeft = left;
|
||||
},
|
||||
handleTagsOption(type) {
|
||||
if (type == "clearAll") {
|
||||
this.$store.commit("clearAllTags");
|
||||
this.$router.push({
|
||||
name: "home_index"
|
||||
});
|
||||
} else {
|
||||
this.$store.commit("clearOtherTags", this);
|
||||
}
|
||||
this.tagBodyLeft = 0;
|
||||
},
|
||||
moveToView(tag) {
|
||||
if (tag.offsetLeft < -this.tagBodyLeft) {
|
||||
// 标签在可视区域左侧
|
||||
this.tagBodyLeft = -tag.offsetLeft + 10;
|
||||
} else if (
|
||||
tag.offsetLeft + 10 > -this.tagBodyLeft &&
|
||||
tag.offsetLeft + tag.offsetWidth <
|
||||
-this.tagBodyLeft + this.$refs.scrollCon.offsetWidth - 100
|
||||
) {
|
||||
// 标签在可视区域
|
||||
this.tagBodyLeft = Math.min(
|
||||
0,
|
||||
this.$refs.scrollCon.offsetWidth -
|
||||
100 -
|
||||
tag.offsetWidth -
|
||||
tag.offsetLeft -
|
||||
20
|
||||
);
|
||||
} else {
|
||||
// 标签在可视区域右侧
|
||||
this.tagBodyLeft = -(
|
||||
tag.offsetLeft -
|
||||
(this.$refs.scrollCon.offsetWidth - 100 - tag.offsetWidth) +
|
||||
20
|
||||
);
|
||||
}
|
||||
},
|
||||
contextMenu (item, e) {
|
||||
this.visible = true
|
||||
const offsetLeft = this.$el.getBoundingClientRect().left
|
||||
this.contextMenuLeft = e.clientX - offsetLeft + 10
|
||||
this.contextMenuTop = e.clientY - 64
|
||||
},
|
||||
closeMenu () {
|
||||
this.visible = false
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.refsTag = this.$refs.tagsPageOpened;
|
||||
setTimeout(() => {
|
||||
this.refsTag.forEach((item, index) => {
|
||||
if (this.$route.name == item.name) {
|
||||
let tag = this.refsTag[index].$el;
|
||||
this.moveToView(tag);
|
||||
}
|
||||
});
|
||||
}, 1); // 这里不设定时器就会有偏移bug
|
||||
this.tagsCount = this.tagsList.length;
|
||||
},
|
||||
watch: {
|
||||
$route(to) {
|
||||
this.currentPageName = to.name;
|
||||
this.$nextTick(() => {
|
||||
this.refsTag.forEach((item, index) => {
|
||||
if (to.name == item.name) {
|
||||
let tag = this.refsTag[index].$el;
|
||||
this.moveToView(tag);
|
||||
}
|
||||
});
|
||||
});
|
||||
this.tagsCount = this.tagsList.length;
|
||||
},
|
||||
visible (value) {
|
||||
if (value) {
|
||||
document.body.addEventListener('click', this.closeMenu)
|
||||
} else {
|
||||
document.body.removeEventListener('click', this.closeMenu)
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "@/views/main.scss";
|
||||
.contextmenu {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
padding: 5px 0;
|
||||
background: #fff;
|
||||
z-index: 11000;
|
||||
list-style-type: none;
|
||||
border-radius: 4px;
|
||||
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .1);
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 5px 15px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: #eee;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ivu-tag-primary, .ivu-tag-primary.ivu-tag-dot .ivu-tag-dot-inner{
|
||||
background: $theme_color;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user