feat: 会员中心 hgcloud 主题初始化 + drone 部署步骤
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
- 解压官方默认主题 default_yfMBA.tar.gz 到 clientarea/hgcloud/ - .gitignore 排除压缩包和临时解压目录 - drone 新增步骤: 同步 hgcloud 到 /clientarea/template/pc/
This commit is contained in:
yiqiu
304
clientarea/hgcloud/components/asideMenu/asideMenu.js
Normal file
304
clientarea/hgcloud/components/asideMenu/asideMenu.js
Normal file
@@ -0,0 +1,304 @@
|
||||
// css 样式依赖common.css
|
||||
const asideMenu = {
|
||||
template: `
|
||||
<el-aside width="190px">
|
||||
<a :href="commonData.clientarea_logo_url || '/home.htm'" onclick="return false" class="menu-alink">
|
||||
<img class="ali-logo" :src="logo" @click="goHome" v-show="logo"></img>
|
||||
</a>
|
||||
<el-menu class="menu-top" :default-active="menuActiveId" @select="handleSelect" background-color="transparent"
|
||||
text-color="var(--color-menu-text)" active-text-color="var(--color-menu-text-active)">
|
||||
<template v-for="(item,index) in menu1">
|
||||
<!-- 只有一级菜单 -->
|
||||
<template v-if="!item.child || item.child?.length === 0">
|
||||
<a :href="getMenuUrl(item.id || item.url)" onclick="return false" class="menu-alink">
|
||||
<el-menu-item :key="item.id ? item.id : item.url" :index="item.id ? item.id + '' : item.url">
|
||||
<i class="iconfont" :class="item.icon"></i>
|
||||
<span class="aside-menu-text" slot="title">{{item.name}}</span>
|
||||
</el-menu-item>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<!-- 有二级菜单 -->
|
||||
<el-submenu v-else :key="item.id ? item.id : item.url" :index="item.id ? item.id + '' : item.url">
|
||||
<template slot="title">
|
||||
<i class="iconfont" :class="item.icon"></i>
|
||||
<span class="aside-menu-text" slot="title">{{item.name}}</span>
|
||||
</template>
|
||||
<template v-for="child in item.child">
|
||||
<a :href="getMenuUrl(child.id || child.url)" onclick="return false" class="menu-alink">
|
||||
<el-menu-item :index="child.id + ''" :key="child.id">
|
||||
{{child.name}}
|
||||
</el-menu-item>
|
||||
</a>
|
||||
</template>
|
||||
</el-submenu>
|
||||
</template>
|
||||
</el-menu>
|
||||
<div class="line" v-if="hasSeparate"></div>
|
||||
<el-menu class="menu-top" :default-active="menuActiveId" @select="handleSelect" background-color="transparent"
|
||||
text-color="var(--color-menu-text)" active-text-color="#FFF">
|
||||
<template v-for="(item,index) in menu2">
|
||||
<!-- 只有一级菜单 -->
|
||||
<template v-if="!item.child || item.child?.length === 0">
|
||||
<a :href="getMenuUrl(item.id || item.url)" onclick="return false" class="menu-alink">
|
||||
<el-menu-item :key="item.id ? item.id + '' : item.url" :index="item.id ? item.id + '' : item.url">
|
||||
<i class="iconfont" :class="item.icon"></i>
|
||||
<span class="aside-menu-text" slot="title">{{item.name}}</span>
|
||||
</el-menu-item>
|
||||
</a>
|
||||
</template>
|
||||
|
||||
<!-- 有二级菜单 -->
|
||||
<el-submenu v-else :key="item.id ? item.id : item.url" :index="item.id ? item.id + '' : item.url">
|
||||
<template slot="title">
|
||||
<i class="iconfont" :class="item.icon"></i>
|
||||
<span class="aside-menu-text" slot="title">{{item.name}}</span>
|
||||
</template>
|
||||
<template v-for="child in item.child">
|
||||
<a :href="getMenuUrl(child.id || child.url)" onclick="return false" class="menu-alink">
|
||||
<el-menu-item :index="child.id + ''" :key="child.id">
|
||||
{{child.name}}
|
||||
</el-menu-item>
|
||||
</a>
|
||||
</template>
|
||||
</el-submenu>
|
||||
</template>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
|
||||
`,
|
||||
// 云服务器 当前
|
||||
// 物理服务器 dcim
|
||||
// 通用产品
|
||||
data() {
|
||||
return {
|
||||
activeId: 1,
|
||||
menu1: [],
|
||||
menu2: [],
|
||||
logo: "",
|
||||
menuActiveId: "",
|
||||
iconsData: [],
|
||||
commonData: {},
|
||||
noRepeat: [],
|
||||
hasSeparate: false,
|
||||
originMenu: [],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.doGetMenu();
|
||||
// const mainLoading = document.getElementById("mainLoading");
|
||||
// if (mainLoading) {
|
||||
// mainLoading.style.display = "none";
|
||||
// }
|
||||
// if (document.getElementsByClassName("template")[0]) {
|
||||
// document.getElementsByClassName("template")[0].style.display = "block";
|
||||
// }
|
||||
},
|
||||
created() {
|
||||
this.getCommonSetting();
|
||||
},
|
||||
beforeUpdate() {},
|
||||
mixins: [mixin],
|
||||
updated() {
|
||||
// // 关闭loading
|
||||
// document.getElementsByClassName('template')[0].style.display = 'block'
|
||||
const mainLoading = document.getElementById("mainLoading");
|
||||
if (mainLoading) {
|
||||
mainLoading.style.display = "none";
|
||||
}
|
||||
if (document.getElementsByClassName("template")[0]) {
|
||||
document.getElementsByClassName("template")[0].style.display = "block";
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 页面跳转
|
||||
// toPage(e) {
|
||||
// // 获取 当前点击导航的id 存入本地
|
||||
// const id = e.id
|
||||
// localStorage.setItem('frontMenusActiveId', id)
|
||||
// // 跳转到对应路径
|
||||
// location.href = '/' + e.url
|
||||
// },
|
||||
// 获取通用配置
|
||||
async getCommonSetting() {
|
||||
try {
|
||||
const res = await getCommon();
|
||||
this.commonData = res.data.data;
|
||||
localStorage.setItem(
|
||||
"common_set_before",
|
||||
JSON.stringify(res.data.data)
|
||||
);
|
||||
this.logo = this.commonData.system_logo;
|
||||
} catch (error) {}
|
||||
},
|
||||
// 判断当前菜单激活
|
||||
setActiveMenu() {
|
||||
const originUrl = location.pathname.slice(1);
|
||||
const allUrl = originUrl + location.search;
|
||||
let flag = false;
|
||||
this.originMenu.forEach((item) => {
|
||||
// 当前url下存在和导航菜单对应的路径
|
||||
if (!item.child && item.url) {
|
||||
const url = String(item.url).split("?");
|
||||
if (
|
||||
(url.length > 1 && item.url == allUrl) ||
|
||||
(url.length == 1 && item.url == originUrl)
|
||||
) {
|
||||
this.menuActiveId = item.id + "";
|
||||
flag = true;
|
||||
}
|
||||
}
|
||||
// 当前url下存在二级菜单
|
||||
if (item.child && item.child.length > 0) {
|
||||
item.child.forEach((child) => {
|
||||
const url = String(child.url).split("?");
|
||||
if (
|
||||
(url.length > 1 && child.url == allUrl) ||
|
||||
(url.length == 1 && child.url == originUrl)
|
||||
) {
|
||||
this.menuActiveId = child.id + "";
|
||||
flag = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
if (!flag) {
|
||||
this.menuActiveId = localStorage.getItem("frontMenusActiveId") || "";
|
||||
}
|
||||
},
|
||||
goHome() {
|
||||
localStorage.frontMenusActiveId = "";
|
||||
const openUrl = this.commonData.clientarea_logo_url || "/home.htm";
|
||||
if (this.commonData.clientarea_logo_url_blank == 1) {
|
||||
window.open(openUrl);
|
||||
} else {
|
||||
location.href = openUrl;
|
||||
}
|
||||
},
|
||||
|
||||
// 获取前台导航
|
||||
doGetMenu() {
|
||||
getMenu().then((res) => {
|
||||
if (res.data.status === 200) {
|
||||
res.data.data.menu.forEach((item) => {
|
||||
if (item.child && item.child.length > 0) {
|
||||
this.originMenu.push(...item.child);
|
||||
} else {
|
||||
this.originMenu.push(item);
|
||||
}
|
||||
});
|
||||
const menu = res.data.data.menu;
|
||||
localStorage.setItem("frontMenus", JSON.stringify(menu));
|
||||
let index = menu.findIndex((item) => item.name == "分隔符");
|
||||
if (index != -1) {
|
||||
this.hasSeparate = true;
|
||||
this.menu1 = menu.slice(0, index);
|
||||
this.menu2 = menu.slice(index + 1);
|
||||
} else {
|
||||
this.hasSeparate = false;
|
||||
this.menu1 = menu;
|
||||
}
|
||||
|
||||
this.setActiveMenu();
|
||||
}
|
||||
});
|
||||
// 获取详情
|
||||
accountDetail()
|
||||
.then((res) => {
|
||||
if (res.data.status == 200) {
|
||||
let obj = res.data.data.account;
|
||||
let id = res.data.data.account.id;
|
||||
localStorage.setItem(
|
||||
"is_sub_account",
|
||||
obj.customfield?.is_sub_account
|
||||
);
|
||||
if (obj.customfield?.is_sub_account == 1) {
|
||||
// 子账户
|
||||
accountPermissions(id).then((relust) => {
|
||||
let rule = relust.data.data.rule;
|
||||
this.$emit("getruleslist", rule);
|
||||
});
|
||||
} else {
|
||||
// 主账户
|
||||
this.$emit("getruleslist", "all");
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err, "err----->");
|
||||
});
|
||||
},
|
||||
arrFun(n) {
|
||||
for (var i = 0; i < n.length; i++) {
|
||||
//用typeof判断是否是数组
|
||||
if (n[i].child && typeof n[i].child == "object") {
|
||||
let obj = JSON.parse(JSON.stringify(n[i]));
|
||||
delete obj.child;
|
||||
this.noRepeat.push(obj);
|
||||
this.arrFun(n[i].child);
|
||||
} else {
|
||||
this.noRepeat.push(n[i]);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/*
|
||||
* 获取菜单url
|
||||
* @param {Number} id 菜单id 或者url
|
||||
* @return {String} url 菜单url
|
||||
*/
|
||||
getMenuUrl(id) {
|
||||
const temp =
|
||||
this.originMenu.find((item) => item.id == id || item.url == id) || {};
|
||||
const reg =
|
||||
/^(((ht|f)tps?):\/\/)([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/;
|
||||
let url = "/" + temp.url;
|
||||
if (reg.test(temp.url)) {
|
||||
if (temp?.second_reminder === 1) {
|
||||
url = `/transfer.htm?target=${encodeURIComponent(temp.url)}`;
|
||||
} else {
|
||||
url = temp.url;
|
||||
}
|
||||
}
|
||||
return url;
|
||||
},
|
||||
|
||||
handleSelect(id) {
|
||||
localStorage.setItem("frontMenusActiveId", id);
|
||||
const temp =
|
||||
this.originMenu.find((item) => item.id == id || item.url == id) || {};
|
||||
const reg =
|
||||
/^(((ht|f)tps?):\/\/)([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/;
|
||||
if (reg.test(temp.url)) {
|
||||
if (temp?.second_reminder === 1) {
|
||||
return window.open(
|
||||
`/transfer.htm?target=${encodeURIComponent(temp.url)}`
|
||||
);
|
||||
} else {
|
||||
return window.open(temp.url);
|
||||
}
|
||||
}
|
||||
location.href = "/" + temp.url;
|
||||
},
|
||||
getAllIcon() {
|
||||
let url = "/upload/common/iconfont/iconfont.json";
|
||||
let _this = this;
|
||||
|
||||
// 申明一个XMLHttpRequest
|
||||
let request = new XMLHttpRequest();
|
||||
// 设置请求方法与路径
|
||||
request.open("get", url);
|
||||
// 不发送数据到服务器
|
||||
request.send(null);
|
||||
//XHR对象获取到返回信息后执行
|
||||
request.onload = function () {
|
||||
// 解析获取到的数据
|
||||
let data = JSON.parse(request.responseText);
|
||||
_this.iconsData = data.glyphs;
|
||||
_this.iconsData.map((item) => {
|
||||
item.font_class = "icon-" + item.font_class;
|
||||
});
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user