You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
3.4 KiB
113 lines
3.4 KiB
<template>
|
|
<div>
|
|
<!-- 头部 -->
|
|
<div class="front-header">
|
|
<div class="front-header-left" @click="navTo('/front/home')">
|
|
<img src="@/assets/imgs/logo.png" alt="">
|
|
<div class="title">SuperRice</div>
|
|
</div>
|
|
<div class="front-header-center" style="text-align: right">
|
|
<el-input style="width: 200px" placeholder="请输入商品名称" v-model="name"></el-input>
|
|
<el-button type="primary" style="margin-left: 5px" @click="search">搜素</el-button>
|
|
</div>
|
|
<div class="front-header-right">
|
|
<div v-if="!user.username">
|
|
<el-button @click="$router.push('/login')">登录</el-button>
|
|
<el-button @click="$router.push('/register')">注册</el-button>
|
|
</div>
|
|
<div v-else>
|
|
<el-dropdown>
|
|
<div class="front-header-dropdown">
|
|
<img @click="navToPerson" :src="user.avatar" alt="">
|
|
<div style="margin-left: 10px">
|
|
<span>{{ user.name }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
|
|
</div>
|
|
</div>
|
|
<el-dropdown-menu slot="dropdown">
|
|
<el-dropdown-item>
|
|
<div style="text-decoration: none" @click="navTo('/front/cart')">我的购物车</div>
|
|
</el-dropdown-item>
|
|
<el-dropdown-item>
|
|
<div style="text-decoration: none" @click="navTo('/front/collect')">我的收藏</div>
|
|
</el-dropdown-item>
|
|
<el-dropdown-item>
|
|
<div style="text-decoration: none" @click="navTo('/front/address')">我的地址</div>
|
|
</el-dropdown-item>
|
|
<el-dropdown-item>
|
|
<div style="text-decoration: none" @click="navTo('/front/orders')">我的订单</div>
|
|
</el-dropdown-item>
|
|
<el-dropdown-item>
|
|
<div style="text-decoration: none" @click="logout">退出</div>
|
|
</el-dropdown-item>
|
|
</el-dropdown-menu>
|
|
</el-dropdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 主体 -->
|
|
<div class="main-body">
|
|
<router-view ref="child" @update:user="updateUser" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "FrontLayout",
|
|
|
|
data() {
|
|
return {
|
|
top: '',
|
|
notice: [],
|
|
user: JSON.parse(localStorage.getItem("xm-user") || '{}'),
|
|
name: '' // 初始化为一个空字符串
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.loadNotice()
|
|
},
|
|
methods: {
|
|
loadNotice() {
|
|
this.$request.get('/notice/selectAll').then(res => {
|
|
this.notice = res.data
|
|
let i = 0
|
|
if (this.notice && this.notice.length) {
|
|
this.top = this.notice[0].content
|
|
setInterval(() => {
|
|
this.top = this.notice[i].content
|
|
i++
|
|
if (i === this.notice.length) {
|
|
i = 0
|
|
}
|
|
}, 2500)
|
|
}
|
|
})
|
|
},
|
|
updateUser() {
|
|
this.user = JSON.parse(localStorage.getItem('xm-user') || '{}') // 重新获取下用户的最新信息
|
|
},
|
|
navToPerson() {
|
|
location.href = '/front/person'
|
|
},
|
|
navTo(url) {
|
|
location.href = url
|
|
},
|
|
// 退出登录
|
|
logout() {
|
|
localStorage.removeItem("xm-user");
|
|
this.$router.push("/login");
|
|
},
|
|
search() {
|
|
let name = this.name ? this.name : ''
|
|
location.href = '/front/search?name=' + name
|
|
},
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
@import "@/assets/css/front.css";
|
|
</style>
|
|
|