<template>
<view class="content">
<view v-if="list.length!==0" class="todo-header">
<view class="todo-header_left">
<text class="active-text">{{text}}</text>
<text>{{listData.length}}条</text>
</view>
<view class="todo-header_right">
<view class="todo-header_right_item active_tab " :class="{'active-tab':activeIndex === 0}" @click="tab(0)">
全部
</view>
<view class="todo-header_right_item" :class="{'active-tab':activeIndex === 1}" @click="tab(1)">
待办
</view>
<view class="todo-header_right_item" :class="{'active-tab':activeIndex === 2}" @click="tab(2)">
已完成
</view>
</view>
</view>
<view v-if="list.length===0">
<view class="image-default">
<image src="../../static/default.png" mode="aspectFit"></image>
</view>
<view class="default-info">
<view>
你还没有创建任何代办事项
</view>
<view>
点击下列+号创建一个吧
</view>
</view>
</view>
<view v-else class="todo-content">
<view class="todo-list " :class="{todo_finish:item.checked}" v-for="(item,index) in listData" :key
="index" @click="finish(item.id)">
<view class="todo-list_checkbox">
<view class="checkbox">
</view>
</view>
<view class="todo-list_content">
{{item.content}}
</view>
</view>
</view>
<!-- 创建按钮 -->
<view class="create_todo" @click="create">
<text class="iconfont icon-jia"></text>
</view>
<!-- 输入按钮 -->
<view v-if="active" class="create-content">
<view class="create-content-box">
<view class="create-input">
<input type="text" v-model="value" placeholder="请输入您要创建的todo"/>
</view>
<view class="create_button" @click="add">
创建
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
value:'',
list:[],
active:false,
activeIndex:0,
text:'全部'
}
},
onLoad() {
},
computed: {
listData() {
let list = JSON.parse(JSON.stringify(this.list))
let newList = []
// 点击 全部
if (this.activeIndex === 0) {
this.text = '全部'
return list
}
// 点击 待办事项
if (this.activeIndex === 1) {
// checked = false
list.forEach((item) => {
if (!item.checked) {
newList.push(item)
}
})
this.text = '待办'
return newList
}
// 点击 已完成
if (this.activeIndex === 2) {
// checked = ture
list.forEach((item) => {
if (item.checked) {
newList.push(item)
}
})
this.text = '已完成'
return newList
}
return []
},
},
methods: {
//打开输入框
create(){
this.active=true;
},
add(){
console.log(this.value);
if(this.value===''){
uni.showToast({
title:"请输入内容",
icon:'none'
})
}
this.list.unshift({
id:'id'+new Date().getTime(),
content:this.value,
checked:false
})
this.value='',
this.active=false
},
finish(id){
let index=this.list.findIndex((item)=>item.id===id)
console.log('我被点击了',this.list[index]);
this.list[index].checked=!this.list[index].checked;
},
tab(index){
this.activeIndex=index;
}
}
}
</script>
<style>
@import '../../common/icon.css';
.active-tab {
color: #279abf;
}
.todo-header{
/* position: fixed;
top: 0;
left: 0; */
display: flex;
align-items: center;
width: 100%;
padding: 0 15px;
font-size: 12px;
height: 45px;
box-sizing: border-box;
box-shadow: -1px 1px 5px 0 rgba(0,0,0,0.1) ;
background: #FFFFFF;
z-index: 10;
}
.todo-header_left{
width: 100%;
}
.active-text{
font-size: 14px;
color: #279def;
padding-right: 10px;
}
.todo-header_right{
flex-shrink: 0;
display: flex;
}
.todo-header_right_item{
padding: 0 5px;
}
.active_tab{
color: #279def;
}
.todo-content{
position: relative;
padding-top: 50px;
padding-bottom: 100px;
}
.todo-list{
position: relative;
display: flex;
align-items: center;
padding: 15px;
margin: 15px;
color: #0c3854;
font-size: 14px;
border-radius: 10px;
background: #cfebfd;
box-shadow: -1px 1px 5px 0 rgba(0,0,0,0.1)
,-1px 2px 1px 0 rgba(255,255,255) inset;
overflow: hidden;
}
.todo-list:after{
position: absolute;
content: '';
top:0;
left: 0;
bottom:0;
width: 5px;
background: #91d1e8;
}
.todo-list_checkbox{
padding-right: 15px;
}
.checkbox{
width: 20px;
height: 20px;
border-radius: 50%;
background: #FFFFFF;
box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
}
.todo_finish .checkbox{
position: relative;
background: #eee;
}
.todo_finish .checkbox:after{
content: '';
position: absolute;
width: 10px;
height: 10px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 50%;
background: #CFEBFD;
box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.2) inset;
}
.todo_finish .todo-list_content {
color: #999999;
}
.todo_finish.todo-list:before{
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 40px;
right: 10px;
height: 2px;
margin: auto 0;
background: #bdcdd8;
}
.todo_finish .todo-list_content:after{
background: #cccccc;
}
.create_todo{
display: flex;
justify-content: center;
align-items: center;
position: fixed;
bottom: 20px;
left: 0;
right: 0;
margin: 0 auto;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #deeff5;
box-shadow: -1px 1px 5px 2px rgba(0, 0, 0, 0.1), -1px 1px 1px 0 rgba(255, 255, 255) inset;
}
.icon-jia {
font-size: 30px;
color: #add8e6;
}
.create-content{
position: fixed;
bottom: 95px;
left: 20px;
right: 20px;
}
.create-content-box{
display: flex;
align-items: center;
padding:0 15px;
padding-right: 0;
border-radius: 50px;
background: #DEEFF5;
ox-shadow: -1px 1px 5px 2px rgba(0, 0, 0, 0.1);
}
.create-input{
/* width: 100%;
padding-right: 15px; */
width: 100%;
padding-right: 15px;
color: #add8e6;
}
.create_button{
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
width: 80px;
height: 50px;
border-radius: 50px;
font-size: 16px;
color: #88d4ec;
box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.1);
}
.create-content:after{
content: '';
position: absolute;
right: 0;
left: 0;
bottom: -8px;
margin: 0 auto;
width: 20px;
height: 20px;
background: #DEEFF5;
transform: rotate(45deg);
box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.1);
z-index: -1;
}
.create-content-box::after{
content: '';
position: absolute;
right: 0;
left: 0;
bottom: -8px;
margin: 0 auto;
width: 20px;
height: 20px;
background: #DEEFF5;
transform: rotate(45deg);
}
.image-default {
display: flex;
justify-content: center;
}
.image-default image {
width: 100%;
}
.default-info {
text-align: center;
font-size: 14px;
color: #CCCCCC;
}
</style>
前端学习(1733):前端系列javascript之状态栏
猜你喜欢
转载自blog.csdn.net/weixin_43392489/article/details/107148702
今日推荐
周排行