<template>
<div class="agenda">
<div class="dateNav">
<ul>
<li v-for="(dateTime,index) in dateTimes" :class="{'dateActice':ind===index}" @click="changeBgc(index)">{{dateTime}}</li>
</ul>
</div>
<div class="clearFloat"></div>
<div class="dateAgenda">
<ul>
<li v-for="(Agenda,index) in Agendas">
<div class="dateAgendaLeft">
<h1>{{Agenda.title}}</h1>
<p>{{Agenda.message}}</p>
</div>
<div class="dateAgendaRight">
<div @click="toAgenda(Agenda,index)" >
<span v-if="Agenda.state==true">![](../assets/images/ic-list_yiguanzhu@2x.png)<p>已关注</p></span>
<span v-if="Agenda.state==false">![](../assets/images/ic-list_guanzhu@2x.png)<p>关注</p></span>
</div>
<span>![](../assets/images/ic-luxian@2x.png)<p>去这里</p></span>
</div>
</li>
<div class="clearFloat"></div>
</ul>
</div>
</div>
</template>
<script>
export default {
name: 'agenda',
data () {
return {
dateTimes:["2017.8.21","2017.8.22","2017.8.23"],
ind:"",
dateAgendas:[],
Agendas:[]
}
},
methods:{
changeBgc:function(index){
this.ind=index;
},
toAgenda:function(Agenda,index){
Agenda.state=!Agenda.state
this.Agendas[index].state=Agenda.state
var array= JSON.parse(window.localStorage.localAgenda)
for(let i=0;i<array.length; i++){
if(Agenda.id==array[i].id){
array[i].state=Agenda.state
}
}
window.localStorage.localAgenda=JSON.stringify(array)
function isIn (a,arr) {
for (let i = 0; i < arr.length; i++) {
if (a == arr[i].id) {
return i
}
}
return -1;
}
if(Agenda.state==true){
console.log("3")
var array2= JSON.parse(window.localStorage.attenteds)
console.log("1",array2)
if(isIn(Agenda.id,array2)==-1){
array2.push(Agenda)
}
window.localStorage.attenteds=JSON.stringify(array2)
}
if(Agenda.state==false){
console.log("4")
var array2= JSON.parse(window.localStorage.attenteds)
console.log("2",array2)
if(isIn(Agenda.id,array2)!=-1){
var i =isIn(Agenda.id,array2)
array2.splice(i,1)
}
window.localStorage.attenteds=JSON.stringify(array2)
}
}
},
created(){
this.ind=0;
var AgendasObj=[
{id:1,title:"我是标题1",message:"信息摘要信息摘要信息摘要"},
{id:2,title:"我是标题1",message:"信息摘要信息摘要信息摘要"},
{id:3,title:"我是标题1",message:"信息摘要信息摘要信息摘要"},
{id:4,title:"我是标题1",message:"信息摘要信息摘要信息摘要"},
{id:5,title:"我是标题1",message:"信息摘要信息摘要信息摘要"},
{id:6,title:"我是标题1",message:"信息摘要信息摘要信息摘要"}
]
if(!window.localStorage.attenteds){
var attenteds=[]
window.localStorage.attenteds=JSON.stringify(attenteds)
}
if(!window.localStorage.localAgenda){
var localAgendas=[]
window.localStorage.localAgenda=JSON.stringify(localAgendas)
toStorage()
}else{
var localAgendas=[]
toStorage()
}
var newArray=JSON.parse(window.localStorage.localAgenda)
for(let i=0; i<AgendasObj.length; i++){
for(let j =0;j<newArray.length; j++){
if(AgendasObj[i].id==newArray[j].id){
AgendasObj[i].state=newArray[j].state
}
}
}
console.log("newAgendasObj",AgendasObj)
this.Agendas=AgendasObj
function toStorage(){
var array= JSON.parse(window.localStorage.localAgenda)
for(var i=0 ; i<AgendasObj.length; i++){
localAgendas[i]={}
localAgendas[i].id=AgendasObj[i].id
localAgendas[i].state=false
}
for(let j=0;j<localAgendas.length ; j ++ ){
if(isIn(localAgendas[j].id,array)==-1){
array.push(localAgendas[j])
}
}
window.localStorage.localAgenda=JSON.stringify(array)
}
function isIn (a,arr) {
for (let i = 0; i < arr.length; i++) {
if (a == arr[i].id) {
return i
}
}
return -1;
}
}
}
</script>
<style scoped>
</style>
localStorage 实现关注、取消关注功能
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 在 Android 使用 Timer 做倒计时。实现开始 (start),取消 (cancel),暂停 (paus...
- 今天过得忙碌而充实。 早上一上班,所做的事情是昨天下班时蹭车事故的延续。 昨天下午下班的时候,一不留神,把单位同事...