美食杰-个人空间

今天继续进行我们的美食杰项目

 用watch监听，是否是自己或他人的空间，然后“编辑个人资料”与“关注”根据空间转换

watch:{
    //监听路由变化，来判断路由是否有信息，从而分辨是否为自己的空间
    $route:{
      async handler(){
        let {userId} = this.$route.query;
        this.isOwner = !userId || userId === this.$store.state.userInfo.userId
        if(this.isOwner){
          this.userInfo = this.$store.state.userInfo
        }else{
          const {data}= await userInfo({userId})
          this.userInfo=data
        }
        // console.log(this.userInfo);
        this.activeName = this.$route.name;
        this.getInfo();
      },
      immediate:true
    }
  },

 

 此时，数据已经渲染好，当我们点击关注时，粉丝数量实时响应增长，且状态以及颜色改变

 运用三元表达式，控制 '已关注' 与 '关注' 切换

//当进入他人空间，编辑个人资料隐藏，关注字体显示
<router-link :to="{name:'edit'}" v-if="isOwner" >编辑个人资料</router-link>
//当进入自己空间，编辑个人资料显示，关注字体隐藏
<a href="javascript:;" class="follow-at"
  :class="{'no-follow-at':userInfo.isFollowing}"
  @click="toggleHandler"
>
   {{userInfo.isFollowing?'已关注':'关注'}}
</a>

点击事件：

async toggleHandler(){
      const {data} = await toggleFollowing({followUserId:this.userInfo.userId});
      // console.log(data);
      this.userInfo = data;
    },

 tab切换事件：

 

 注意：此处的点击事件要用ElementUI的 @tab-click="事件名"

<el-tabs class="user-nav" v-model="activeName" @tab-click="tabClickHandler">
      <el-tab-pane label="作品" name="works"></el-tab-pane>
      <el-tab-pane label="粉丝" name="fans"></el-tab-pane>
      <el-tab-pane label="关注" name="following"></el-tab-pane>
      <el-tab-pane label="收藏" name="collection"></el-tab-pane>
    </el-tabs>

 因为是路由跳转，所以点击时要出入query参数

tabClickHandler(){
      this.list=[];
      this.$router.push({
        name:this.activeName,
        query:{
          ...this.$route.query
        }
      })
    },

在页面显示定义一个数组

data(){
    return {
      userInfo:{},
      isOwner:false,
      activeName:'works',
      list:[]
    }
  },

const getOtherInfo = {
  async works(params){
    let data=(await getMenus(params)).data;
    data.flag='works'
    return data;
  },
  async following(params){
    let data=(await following(params)).data;
    data.flag='following'
    return data;
  },
  async fans(params){
    let data=(await fans(params)).data;
    data.flag='fans'
    return data;
  },
  async collection(params){
    let data=(await collection(params)).data;
    data.flag='collection'
    return data;
  }
}

async getInfo(){
      let data = await getOtherInfo[this.activeName]({userId:this.userInfo.userId})
      // console.log(data);
      if(this.activeName===data.flag){
        this.list=data.list
      }
    }

在router-view传参

<router-view :info="list" :activeName="activeName"></router-view>

分别在子组件接收

	props:{
		info:{
			type:Array,
			default:()=>[]
		},
		activeName:{
			type:String,
			default:'fans'
		}
	}
}

然后再子组件渲染数据就可以完成效果。

冲冲冲！