频道编辑

使用 vant 组件的弹出提示来创建 频道编辑页面

使用 vant-cell 作标题容器-包含 button 按钮

使用 vant-gird 宫格显示每一个频道

调制 css 尽量和设计稿一致

具体步骤

• 组件通信 ，将频道数据传到编辑频道显示，active显示高亮

• 封装网络请求，获取所有的频道，过滤出频道推荐

  过滤逻辑

  computed:{
  	recommedChannels(){
  		const channels = []
  		this.allChannels.forEach(channel=>{
  			const ret = this.myChannels.find(myChannel>{
  				return myChannel.id = channel.id
  			})
  			if(!ret){//如果id频道不在我的频道中则加入推荐频道
  				channels.push(ret)
  			}
  		})
  		return channels
  	}
  }
  

  简化版本

  computed:{
  	recommendChannels(){
  		return this.allChannels.filter(channel=>{
  			return !this.myChannels.find(mychannel=>{
  				return mychannle.id === channle.id
  			})
  		})
  	}
  }
  

• 添加频道到我的频道-需要作持久化

• 处理 编辑完成图标 ，将推荐频道固定不删除的逻辑功能

• 我的频道点击事件，利用组件之间的通信

• 我的频道点击事件删除频道，首先判断是否为固定标签，然后删除频道，然后通知组件，需要注意 激活的 频道问题

数据持久化

分登入和未登入状态

未登入状态

将数据存储到本地中

添加删除

删除频道

登入状态

添加频道

• 封装网络请求
• 获取频道显示

删除频道

• 封装网络请求
• 删除频道然后显示

数据显示

未登入状态

直接将登入的用户接口频道数据显示

登入状态

有本地存储直接取数据拿来使用

• 如果没有本地存储拿为登入状态的默认频道接口