master

分支 (1)

管理

管理

master

paper_web
/
src
/
App.vue

<template>
  <div id="app">
    <div id="head">
      <a @click="toHome" href="###">wallpaper</a>

      <div class="search">
        <input v-model="keyWork" type="text" placeholder="Search..." />
        <a @click="serachByKerWork" href="###" class="iconfont icon-sousuo"></a>
      </div>

      <div v-if="token!=''" class="user" href="###">
        <a href="###">
          <img :src="userImg==null?default_img:`${baseUrl}/${id}/${userImg}`" alt="" />
        </a>
        <div class="userinfo">
          <a @click="toPersonal" href="###"><span class="iconfont icon-geren">个人中心</span></a>
          <a @click="logout" href="###"><span class="iconfont icon-jinru">Logout</span></a>
        </div>
      </div>

      <div v-if="token==''" class="RLBox">
        <button @click="toRegister">Register</button>
        <button @click="toLogin">Login</button>
      </div>
    </div>
	<div class="category">
		<span style="color: lawngreen;">请选择标签:</span>
		<span>选中:</span>
		<span style="width: 10px;height: 10px; background-color: black;"></span>
		<span>未选:</span>
		<span style="width: 10px;height: 10px; background-color: #5e5e5e;"></span>
		<a @click="selectTag(item)" v-for="(item,index) in category" :class="item.selected?'selected':'no_selected'" href="###">
			{{item.tag}}
		</a>

		<button @click="serachByCategory" class="iconfont icon-sousuo"></button>
	</div>

	<keep-alive include="home">
		<router-view></router-view>
	</keep-alive>


  </div>
</template>

<script>
	import {mapState,mapGetters} from "vuex"
export default {
  name: "App",
  data() {
    return {
	  default_img:require('./static/default-avatar.jpg'),
	  baseUrl:'http://127.0.0.1:5000',
	  keyWork:'',
	  category:[
		  {
			tag:'天空',
			selected:false
		  },
		  {
		  	tag:'城市',
		  	selected:false
		  },
		  {
		  	tag:'动漫',
		  	selected:false
		  },
		  {
		  	tag:'大自然',
		  	selected:false
		  },
		  {
		  	tag:'美女',
		  	selected:false
		  }
	  ],
	  //传递给home页面的搜索词条
	  tags:''
    };
  },

  computed:{
	  ...mapState('user',['token']),
	  ...mapGetters('user',['id','userImg'])
  },


  mounted() {
	//token存在于session中,只要不关闭浏览器,登录状态就一直保持,除非token过期.
    console.log("app挂载了");
	if(localStorage.getItem('token')){
		this.$api.userApi.getinfo().then((res) => {
			console.log(res)
			if(res.status!=200){
				// console.log('token过期了')
				alert('身份信息已过期,请重新登录')
				//身份过期 重新登录 将localStorage保存的token清除
				localStorage.removeItem("token")
				this.$store.commit('user/logout')
				this.$router.push({
					path:'/login'
				})
			}else if(res.status == 200){
				this.$store.commit('user/setUserInfo',JSON.stringify(res.data.userinfo))
			}

		});
		this.$store.commit("user/setToken", localStorage.getItem("token"));

	}
  },

  methods: {
	logout(){
		localStorage.removeItem('token')
		this.$store.commit('user/logout')
		this.$router.replace({
			path:'/home'
		})
	},
	//分类搜索的时候，操作是否选中当前标签
	selectTag(item){
		item.selected = !item.selected
	},
	serachByCategory(){
		let arr=this.category.map(item=>{
			if(item.selected == true){
				return item.tag
			}
		})
		//将过滤出来的数组按照一定格式转换为关键词字符串
		this.tags =arr.filter(item=>{
			return item!=undefined
		}).join(',')
		if(this.tags!=''){
			this.$router.push({
				path:'/serach',
				query:{
					tags:this.tags
				}
			})
		}else{
			alert("请先选择属性")
		}

	},
	//通过输入框输入关键词搜索
	serachByKerWork(){
		this.tags = this.keyWork
		this.keyWork = ''
		this.$router.push({
			path:'/serach',
			query:{
				tags:this.tags
			}
		})
	},

    toRegister() {
      this.$router.push({
			path: "/register",
      });
    },
    toLogin() {
      this.$router.push({
        path: "/login",
      });
    },
    toHome() {
      this.$router.push({
        path: "/home",
      });
    },
	toPersonal(){
		this.$router.push({
			path:'/personal',
			query:{
				userId:this.id
			}
		})
	}
  },
};
</script>

<style lang="less">
@import url("https://at.alicdn.com/t/c/font_3573753_xb443zewp3.css");
* {
  margin: 0;
  padding: 0;
}
body {
  overflow-x: hidden;
}
#head {
  width: 100vw;
  position: fixed;
  z-index: 2;
  top: 0;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(to bottom, #292c2f 0, #191c1f 100%);
  > a:first-child {
    font-size: 32px;
    margin-left: 20px;
    line-height: 50px;
    color: white;
    text-decoration: none;
  }
  .search {
    width: 532px;
    height: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    input {
      width: 500px;
      height: 32px;
      outline: none;
    }
    a {
      width: 32px;
      height: 32px;
      font-size: 32px;
      line-height: 32px;
      background-color: #404143;
      color: white;
      text-decoration: none;
    }

  }

  .user {
    width: 50px;
    height: 50px;
    margin-right: 40px;
    position: relative;
    a {
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }

    .userinfo {
      position: absolute;
      top: 50px;
      left: -25px;
      width: 100px;
      height: 100px;
      background-color: #191c1f;
      display: none;
      a {
        height: 50px;
        line-height: 50px;
        color: white;
        text-decoration: none;
      }
    }
  }
  .user:hover .userinfo {
   display: block;
   display: flex;
   flex-direction: column;
   align-items: center;
  }

  .RLBox {
    width: 150px;
    height: 50px;
    display: flex;
    margin-right: 20px;
    align-items: center;
    justify-content: space-between;
    button {
      width: 70px;
      height: 32px;
      cursor: pointer;
      color: white;
      border-radius: 2px;
    }

    button:first-child {
      background-color: #a1c25a;
    }
    button:last-child {
      background-color: #204650;
    }
  }
}

 .category{
  	position: fixed;
	z-index: 1;
	width: 100vw;
	top: 50px;
  	height: 50px;
  	background-color: #292c2f;
	box-shadow:1px 1px 3px 3px #191c1f;
	display: flex;
	justify-content: center;
	align-items: center;

	span{
		margin-right: 10px;
		color: white;
	}

	button{
		width: 20px;
		height: 20px;
		cursor: pointer;
	}

	.selected{
		width: 60px;
		height: 24px;
		line-height: 24px;
		font-size: 16px;
		text-align: center;
		text-decoration: none;
		color: white;
		background-color: #353535;
		background-image: linear-gradient(to bottom,#404040 0,#292929 100%);
		box-shadow: 1px 1px 3px rgb(0 0 0 / 75%);
		margin-right: 20px;
		margin-left: 20px;
	}

	.no_selected{
		width: 60px;
		height: 24px;
		line-height: 24px;
		font-size: 16px;
		text-align: center;
		text-decoration: none;
		color: white;
		background-color: #5e5e5e;
		background-image: linear-gradient(to bottom,#777 0,#444 100%);
		box-shadow: 1px 1px 3px 3px #191c1f;
		margin-right: 20px;
		margin-left: 20px;
	}
  }
</style>