[电商项目]--退出功能

系统管理员 2023-01-02 05:28 180阅读 0赞

# 前言 #

编写退出模块

--------------------

# 代码实现 #

<template>
      <div class="login">
        <div class="container">
          <a href="/#/index"><img src="/imgs/login-logo.png" alt=""></a>
        </div>
        <div class="wrapper">
          <div class="login-form">
            <h3>
              <span class="checked">账号登录</span><span class="sep-line">|</span><span>扫码登录</span>
            </h3>
            <div class="input">
              <input type="text" placeholder="请输入账号" v-model="username">
            </div>
            <div class="input">
              <input type="password" placeholder="请输入密码" v-model="password">
            </div>
            <div class="btn-box">
              <a href="javascript:;" class="btn" @click="login">登录</a>
            </div>
            <div class="tips">
              <div class="sms" @click="register">手机短信登录/注册</div>
              <div class="reg">立即注册<span>|</span>忘记密码？</div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="footer-link">
          <a href="" target="_blank">zcw主页</a><span>|</span>
          <a href="" target="_blank">Vue</a><span>|</span>
          <a href="" target="_blank">React全家桶</a><span>|</span>
          <a href="" target="_blank">微信支付</a>
        </div>
      </div>
    </template>
    <script>
    import {  mapActions} from 'vuex';
    export default { 
      name: 'login',
      data(){ 
        return{ 
          username: '',
          password: '',
          userId: ''
        }
      },
      methods: { 
        login(){ 
          let { username, password} = this;
          this.axios.post('/user/login',{ 
            username,
            password
          }).then((res)=>{ 
            this.$cookie.set('userId',res.id,{ expires: 'Session'});
            //this.$store.dispatch('saveUserName',res.username)
            this.saveUserName(res.username);
            this.$router.push({ 
              name:'index',
             /*path:'/index',*/
             /* query:{ form:'login' }*/
              params:{ 
                from:'login'
              }
            });
          })
        },
        ...mapActions(['saveUserName']),
        register(){ 
          this.axios.post('/user/register',{ 
            username: 'admin1',
            password: 'admin1',
            email: 'admin@163.com'
          }).then(() =>{ 
            this.$message.success('注册成功');
          })
        }
      }
    }
    </script>
    <style lang="scss">
    .login{ 
      &>.container{ 
        height: 113px;
        img{ 
          width: auto;
          height: 100%;
        }
      }
      .wrapper{ 
        background:url('/imgs/login-bg.jps') no-repeat center;
        .container{ 
          height: 576px;
          .login-form{ 
            box-sizing: border-box;
            padding-left: 31px;
            padding-right: 31px;
            width: 410px;
            height: 510px;
            background-color: #ffffff;
            position:absolute;
            bottom:29px;
            right: 0;
            h3{ 
              line-height: 23px;
              font-size: 24px;
              text-align: center;
              margin: 40px auto 49px;
              .checked{ 
                color: #FF6600;
              }
              .sep-line{ 
                margin: 0 32px;
              }
            }
            .input{ 
              display: inline-block;
              width: 348px;
              height: 50px;
              border:1px solid #E5E5E5;
              margin-bottom:20px;
              input{ 
                width: 100%;
                height: 100%;
                border: none;
                padding: 18px;
              }
            }
            .btn{ 
              width: 100%;
              line-height: 50px;
              margin-top: 10px;
              font-size: 16px;
            }
            .tips{ 
              margin-top:14px;
              display: flex;
              justify-content: space-between;
              font-size: 14px;
              cursor:pointer;
              .sms{ 
                color:#FF6600;
              }
              .reg{ 
                color:#999999;
                span{ 
                  margin:0 7px;
                }
              }
            }
          }
        }
      }
      .footer{ 
        height: 100px;
        padding-top: 60px;
        color: #999999;
        font-size: 16px;
        text-align: center;
        .footer-link{ 
          a{ 
            color: #999999;
            display: inline-block;
          }
          span{ 
            margin:0 10px;
          }
        }
        .copyright{ 
          margin-top: 13px;
        }
      }
    }
    </style>

<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>