mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2025-12-21 10:25:53 +08:00
commit message
This commit is contained in:
Chopper
150
buyer/src/pages/user/Home.vue
Normal file
150
buyer/src/pages/user/Home.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div>
|
||||
<BaseHeader></BaseHeader>
|
||||
|
||||
<div class="container width_1200">
|
||||
<Layout class="layoutAll">
|
||||
<Sider class="side-bar" ref="side" :collapsed-width="78">
|
||||
<Menu
|
||||
class="side-menu"
|
||||
theme="light"
|
||||
width="auto"
|
||||
:active-name="$route.name"
|
||||
:open-names="['订单中心', '会员中心', '账户中心']"
|
||||
@on-select="onSelect"
|
||||
>
|
||||
<div class="user-icon">
|
||||
<div class="user-img">
|
||||
<img :src="userInfo.face" />
|
||||
</div>
|
||||
<p>{{userInfo.username | secrecyMobile}}</p>
|
||||
</div>
|
||||
|
||||
<!-- 循环导航栏 -->
|
||||
<Submenu
|
||||
v-for="(menu, index) in menuList"
|
||||
:key="index"
|
||||
:name="menu.title"
|
||||
>
|
||||
<template slot="title" v-if="menu.display">
|
||||
<Icon type="location"></Icon>
|
||||
<span>{{ menu.title }}</span>
|
||||
</template>
|
||||
<MenuItem
|
||||
v-for="(chlidren, i) in menu.menus"
|
||||
:key="i"
|
||||
:name="chlidren.path"
|
||||
>{{ chlidren.title }}</MenuItem
|
||||
>
|
||||
</Submenu>
|
||||
|
||||
</Menu>
|
||||
</Sider>
|
||||
<Layout class="layout ml_10">
|
||||
<Content class="content">
|
||||
<transition mode="out-in">
|
||||
<router-view></router-view>
|
||||
</transition>
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import menuList from './menu';
|
||||
import Storage from '@/plugins/storage.js';
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
data () {
|
||||
return {
|
||||
menuList
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
userInfo () {
|
||||
return JSON.parse(Storage.getItem('userInfo'));
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 每次点击左侧bar的callback
|
||||
onSelect (name) {
|
||||
this.$router.push({name: name});
|
||||
},
|
||||
// 跳转到个人中心的首页
|
||||
toUserMain () {
|
||||
this.$router.push(`/home`);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content {
|
||||
padding: 15px 50px;
|
||||
}
|
||||
|
||||
.header {
|
||||
@include background_color($light_background_color);
|
||||
}
|
||||
|
||||
.side-menu,
|
||||
.side-bar,
|
||||
.content {
|
||||
@include white_background_color();
|
||||
@include title_color($light_title_color);
|
||||
}
|
||||
|
||||
.side-bar {
|
||||
min-height: 600px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.layoutAll {
|
||||
min-height: 1200px;
|
||||
@include background_color($light_background_color);
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.side-bar a {
|
||||
@include title_color($light_title_color);
|
||||
}
|
||||
|
||||
.user-icon {
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-icon span {
|
||||
font-size: 96px;
|
||||
}
|
||||
|
||||
.user-img {
|
||||
margin-bottom: 15px;
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
border-radius: 48px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.user-img img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layout-footer-center {
|
||||
padding: 0px 15px;
|
||||
|
||||
padding-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
166
buyer/src/pages/user/menu.js
Normal file
166
buyer/src/pages/user/menu.js
Normal file
@@ -0,0 +1,166 @@
|
||||
// * icon 图标
|
||||
// * title 一级菜单
|
||||
// * display 是否显示菜单
|
||||
// * menus 菜单栏
|
||||
// * path路径 router 配置的
|
||||
|
||||
// 订单中心
|
||||
const order = [{
|
||||
icon: '',
|
||||
title: '订单中心',
|
||||
menus: [{
|
||||
icon: '',
|
||||
title: '我的订单',
|
||||
path: 'MyOrder'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
title: '收货地址',
|
||||
path: 'MyAddress'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
title: '售后订单',
|
||||
path: 'AfterSale'
|
||||
}
|
||||
],
|
||||
display: true
|
||||
}];
|
||||
|
||||
// 会员中心
|
||||
const member = [{
|
||||
icon: '',
|
||||
title: '会员中心',
|
||||
menus: [{
|
||||
icon: '',
|
||||
title: '用户信息',
|
||||
path: 'Profile'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
title: '账户安全',
|
||||
path: 'AccountSafe'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
title: '我的足迹',
|
||||
path: 'MyTracks'
|
||||
},
|
||||
|
||||
{
|
||||
icon: '',
|
||||
title: '我的收藏',
|
||||
path: 'Favorites'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
title: '分销推荐',
|
||||
path: 'Distribution'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
title: '我的评论',
|
||||
path: 'CommentList'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
title: '我的投诉',
|
||||
path: 'ComplainList'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
title: '我的积分',
|
||||
path: 'Point'
|
||||
}
|
||||
],
|
||||
display: true
|
||||
}];
|
||||
|
||||
// 账户中心
|
||||
const user = [{
|
||||
icon: '',
|
||||
title: '账户中心',
|
||||
menus: [{
|
||||
icon: '',
|
||||
title: '我的优惠券',
|
||||
path: 'Coupons'
|
||||
},
|
||||
{
|
||||
icon: '',
|
||||
title: '资金管理',
|
||||
path: 'MoneyManagement'
|
||||
}],
|
||||
display: true
|
||||
}]
|
||||
|
||||
// 活动中心
|
||||
// const activity = [{
|
||||
// icon: '',
|
||||
// title: '活动中心',
|
||||
// menus: [
|
||||
// // {
|
||||
// // icon: '',
|
||||
// // title: '拍卖活动',
|
||||
// // path: 'MyOrder',
|
||||
// // },
|
||||
// // {
|
||||
// // icon: '',
|
||||
// // title: '夺宝奇兵',
|
||||
// // path: 'MyOrder',
|
||||
// // },
|
||||
// ],
|
||||
// display: true
|
||||
// }]
|
||||
|
||||
// 批发中心
|
||||
// const wholesale = [
|
||||
// {
|
||||
// icon: '',
|
||||
// title: '批发中心',
|
||||
// menus: [
|
||||
// {
|
||||
// icon: '',
|
||||
// title: '我的采购单',
|
||||
// path: 'MyOrder',
|
||||
// },
|
||||
// {
|
||||
// icon: '',
|
||||
// title: '采购退货单',
|
||||
// path: 'MyOrder',
|
||||
// },
|
||||
// {
|
||||
// icon: '',
|
||||
// title: '我的求购单',
|
||||
// path: 'MyOrder',
|
||||
// },
|
||||
//
|
||||
// ],
|
||||
// display: true
|
||||
// }
|
||||
// ]
|
||||
|
||||
// 店铺
|
||||
// const shop = [
|
||||
// {
|
||||
// icon: '',
|
||||
// title: '店铺管理',
|
||||
// menus: [
|
||||
// {
|
||||
// icon: '',
|
||||
// title: '店铺后台',
|
||||
// path: 'MyOrder',
|
||||
// },
|
||||
// {
|
||||
// icon: '',
|
||||
// title: '商家等级',
|
||||
// path: 'MyOrder',
|
||||
// },
|
||||
// ],
|
||||
// display: true
|
||||
// }
|
||||
// ]
|
||||
// wholesale[0], shop[0]
|
||||
let menuList = []
|
||||
menuList.push(order[0], member[0], user[0])
|
||||
|
||||
export default menuList
|
||||
Reference in New Issue
Block a user