[電商專案]--退出功能
阿新 • • 發佈：2021-01-05
技術標籤：專案# （vue全家桶）從零獨立開發企業級電商系統vue
前言
編寫退出模組
程式碼實現
<template>
<div class="login">
<div class="container">
<a href="/#/index"><img src="/imgs/login-logo.png" alt=""></a>
</div>
<div class= <template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
//import axios from 'axios'
//import storage from './storage/index'
export default {
name: 'App',
data(){
return{
res:{}
}
},
mounted(){
if(this.$cookie.get('userId')){
if(this.$cookie.get('userId')){
this.getUser();
this.getCartCount();
}
}
},
methods: {
getUser(){
this.axios.get('/user').then((res) =>{
this.$store.dispatch('saveUserName', res.username);
})
},
getCartCount(){
this.axios.get('/carts/products/sum').then((res) =>{
this.$store.dispatch('saveCartCount',res);
})
}
}
}
</script>
<style lang="scss">
@import './assets/scss/reset.scss';
@import './assets/scss/config.scss';
@import './assets/scss/button.scss';
</style>
<template>
<div class="header">
<div class="nav-topbar">
<!--建立頂部選單欄上面的小選單欄-->
<!--建立容器-->
<div class="container">
<!--建立選單-->
<div class="topbar-menu">
<a href="javascript:;">小米商城</a>
<a href="javascript:;">MUI</a>
<a href="javascript:;">雲服務</a>
<a href="javascript:;">協議規則</a>
</div>
<div class="topbar-user">
<a href="javascript:;" v-if="username">{{username}}</a>
<a href="javascript:;" v-if="!username" @click="login">登入</a>
<a href="javascript:;" v-if="username" @click="logout">退出</a>
<a href="javascript:;" v-if="username">我的訂單</a>
<a href="javascript:;" class="my-cart" @click="goToCart"><span class="icon-cart"></span>購物車({{cartCount}})</a>
</div>
</div>
</div>
<div class="nav-header">
<div class="container">
<div class="header-logo">
<a href="/#/index"></a>
</div>
<div class="header-menu">
<div class="item-menu">
<span>小米手機</span>
<div class="children">
<ul>
<li class="product" v-for="(item,index) in phoneList" :key="index">
<a v-bind:href="'/#/product/'+item.id" target="_blank">
<div class="pro-img">
<img :src="item.mainImage" :alt="item.subtitle"/>
</div>
<div class="pro-name">{{ item.name }}</div>
<div class="pro-price">{{ item.price | currency}}</div>
</a>
</li>
</ul>
</div>
</div>
<div class="item-menu">
<span>ReadMi紅米</span>
<div class="children"></div>
</div>
<div class="item-menu">
<span>電視</span>
<div class="children">
<ul>
<li class="product">
<a href="" target="_blank">
<div class="pro-img">
<img src="/imgs/nav-img/nav-3-1.jpg" alt=""/>
</div>
<div class="pro-name">小米CC9</div>
<div class="pro-price">1799￥</div>
</a>
</li>
<li class="product">
<a href="" target="_blank">
<div class="pro-img">
<img src="/imgs/nav-img/nav-3-1.jpg" alt=""/>
</div>
<div class="pro-name">小米CC9</div>
<div class="pro-price">1799￥</div>
</a>
</li>
<li class="product">
<a href="" target="_blank">
<div class="pro-img">
<img src="/imgs/nav-img/nav-3-1.jpg" alt=""/>
</div>
<div class="pro-name">小米CC9</div>
<div class="pro-price">1799￥</div>
</a>
</li>
<li class="product">
<a href="" target="_blank">
<div class="pro-img">
<img src="/imgs/nav-img/nav-3-1.jpg" alt=""/>
</div>
<div class="pro-name">小米CC9</div>
<div class="pro-price">1799￥</div>
</a>
</li>
<li class="product">
<a href="" target="_blank">
<div class="pro-img">
<img src="/imgs/nav-img/nav-3-1.jpg" alt=""/>
</div>
<div class="pro-name">小米CC9</div>
<div class="pro-price">1799￥</div>
</a>
</li>
<li class="product">
<a href="" target="_blank">
<div class="pro-img">
<img src="/imgs/nav-img/nav-3-1.jpg" alt=""/>
</div>
<div class="pro-name">小米CC9</div>
<div class="pro-price">1799￥</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="header-search">
<div class="wrapper">
<input type="text" name="keyword">
<a href="javascript:;"></a>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {mapState} from 'vuex'
export default {
name: 'nav-header',
data(){
return{
username:this.$store.state.username,
phoneList:[]
}
},
computed:{
// username(){
// return this.$store.state.username;
// },
// cartCount(){
// return this.$store.state.cartCount;
// },
...mapState(['username', 'cartCount'])
},
filters:{
currency(val){
if(!val){
return '0.00';
}else{
return '￥' +val.toFixed(2)+ '元';
}
}
},
mounted(){
this.getProductList();
let params =this.$route.params;
// eslint-disable-next-line no-empty
if(params && params.from== 'login'){
this.getCartCount();
}
},
methods:{
login(){
this.$router.push('/login');
},
getProductList(){
this.axios.get('/products',{
params:{
categoryId:'100012',
//pageSize:6
}
}).then((res) =>{
//res.list;
//陣列擷取
if(res.list.length>6){
this.phoneList = res.list.slice(0,6);
}
})
},
getCartCount(){
this.axios.get('/carts/products/sum').then((res=0)=>{
this.$store.dispatch('saveCartCount',res);
})
},
logout(){
this.axios.post('/user/logout').then(()=>{
this.$message.success('退出成功');
this.$cookie.set('userId','',{expires:'-1'});
this.$store.dispatch('saveUserName','');
this.$store.dispatch('saveCartCount','0');
})
},
goToCart(){
/*路由跳轉*/
this.$router.push('/cart');
}
}
}
</script>
<style lang="scss">
@import './../assets/scss/base.scss';
@import './../assets/scss/mixin.scss';
@import './../assets/scss/config.scss';
.header{
.nav-topbar{
height:39px;
line-height:39px;
background-color:#333333;
color:#B0B0B0;
.container{
@include flex();
a{
display: inline-block;
color:#B0B0B0;
margin-right: 17px;
}
.my-cart{
width:110px;
background-color:#FF6600;
text-align: center;
color:#ffffff;
.icon-cart{
@include bgImg(16px,12px,'/imgs/icon-cart-checked.png');
margin-right:4px ;
}
}
}
}
.nav-header{
.container{
position:relative;
height:112px;
@include flex();
.header-logo{
display:inline-block;
width:55px;
height:55px;
background-color:#FF6600;
a{
display:inline-block;
width:110px;
height:55px;
&:before{
content: '';
@include bgImg(55px,55px,'/imgs/mi-logo.png',55px);
transition:margin .2s;
}
&:after{
content: '';
@include bgImg(55px,55px,'/imgs/mi-home.png',55px);
}
&:hover:before{
margin-left: -55px;
transition: margin .2s;
}
}
}
}
.header-menu{
display:inline-block ;
width:264px;
padding-left:209px;
.item-menu {
display: inline-block;
color: #333333;
font-weight: bold;
font-size: 16px;
line-height: 112px;
margin-right: 20px;
span {
cursor: pointer;
}
&:hover {
color: $colorA;
.children{
height: 220px;
/*新增動畫效果*/
opacity: 1;
}
}
.children{
position:absolute;
top:112px;
left: 0;
width: 1226px;
height: 220px;
opacity: 0;
/*隱藏*/
overflow: hidden;
border-top: 1px; solid: #5555;
box-shadow: 0px 7px 6px 0px rgba(0,0,0,0.11);
z-index: 10;
/*新增動畫：控制某個屬性進行*/
transition: height .5s;
.product{
/*防止決定定位跑，*/
position:relative;
float:left;
width: 16.6%;
height: 220px;
font-size: 12px;
line-height: 12px;
text-align: center;
a{
display: inline-block;
}
img{
width: auto;
height: 111px;
margin-top: 26px;
}
.pro-img{
height: 137px;
}
.pro-name{
font-weight: bold;
margin-top: 19px;
margin-bottom: 8px;
color: $colorB;
}
.pro-price{
color: $colorA;
}
/*新增偽類*/
&:before{
content: '';
position:absolute;
top: 28px;
right: 0;
border-left: 1px solid $colorF;
height: 100px;
width: 1px;
}
/*去掉最後一個元素*/
&:last-child:before{
display: none;
}
}
}
}
.header-search{
width:319px;
.wrapper{
height:50px;
border:1px solid #E0E0E0;
display:flex;
align-items:center;
input{
border: none;
box-sizing:border-box;
border-right:1px solid #E0E0E0;
width:264px;
height:50px;
padding-left: 14px;
}
a{
@include bgImg(18px,18px,'/imgs/icon-search.png');
margin-left: 17px;
}
}
}
}
}
}
</style>