tosolist

todilist

<template>
	<view>
		
		<uni-card title="请输入待办事项"><!-- 记住这个东西 -->
			<uni-easyinput v-model="value" placeholder="请输入待办事项"></uni-easyinput>
			<button type="primary" @click="addItem">添加事项</button>
		</uni-card>
		
		<uni-card title="待办事项">
			<view v-for="(item,index) in todolist" :key="index" class="todo_item"><!-- 这个:ket是什么意思 -->
				<view class="">{{item}}</view>
				<uni-icons type="checkmarkempty" size="30" style="color:aqua;" @click="redo(index)"></uni-icons>
                <uni-icons type="clear" size="30" style="color:pink;" @click="redo(index,'todo')"></uni-icons>
			</view>
		</uni-card>
		
		
		<uni-card title="已办事项">
			<view v-for="(item,index) in donelist" :key="index" class="done_item">
				<view class="">{{item}}</view>
				<uni-icons type="clear" size="26" style="color: aqua;" @click="clear(index,'done')"></uni-icons>
			</view>
			<button type="primary">添加事项</button>
		</uni-card>
		
		
	</view>
</template>

<script>
	export default {
			data() {
				return {
					value:'',
					todolist:['吃饭','睡觉','打豆豆'],
					donelist:['打球','考试','上课']
				}
			},
			methods: {
				addItem(){
					if(!this.value){
						uni.showToast({
							title:'事项不能为空',
							icon:'error'
						})
						return
					}
					this.todolist.push(this.value)
				},
				redo(index){
					//添加已办事项数组中的数据
					var data=this.todolist[index]
					this.donelist.push(data)
					//删除待办事项数组中的数据
					this.todolist.splice(index,1)
				},
				clear(index,name){
					if(name=='todo'){
						this.todolist.splice(index,1)
					}else{
						this.donelist.splice(index,1)
					}
				}
			}
		}
	</script>
	
	<style>
		.todo_item, .done_item{
			display: flex;
			border-bottom: 1px solid #ccc;
			margin: 10px;
			padding: 10px;
		}
		.todo_item view{
			flex: 1;
		}
		.done_item view{
			flex: 1;
		}
	</style>

<template>
	<view>
		<view class="username" >
			用户名：<input type="text" v-model="uname">
		</view>
		<view class="password" >
			密码：<input type="text" v-model="pwd">
		</view>
		<button type="primary" @click="reg">注册</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uname:'',
				pwd:''
			}
		},
		methods: {
			reg(){
				uni.request({
					url:'http://127.0.0.1:3008/api/reguser',
					data:{username:this.uname,password:this.pwd},
					method:'POST',
					success: function(res){
						// console.log(res)
						if(res.data.status==200){
							uni.showToast({
								title:'注册成功'
							})
							uni.navigateTo({
								url:'/pages/login/login'
							})
						}
					}
				})
			}
		}
	}
</script>

<style>

</style>

<template>
	<view>
		<view class="username" >
			用户名：<input type="text" v-model="uname">
		</view>
		<view class="password" >
			密码：<input type="text" v-model="pwd">
		</view>
		<button type="primary" @click="login">登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uname:'',
				pwd:''
			}
		},
		methods: {
			login(){//login代词表示的方法
				uni.request({//又请求了
					url:'http://127.0.0.1:3008/api/login',//又连接后端了
					data:{username:this.uname,password:this.pwd},
					method:'POST',
					success: function(res){
						// console.log(res)
						if(res.data.status==200){
							uni.switchTab({//页面跳转，tabbar页面哦
								url:'/pages/index/index'
							})
						}else{
							uni.showToast({
								title:'登录失败',
								icon:'error'
							})
							return//为啥要ruturn
						}
						
					}
				})
			}
		}
	}
</script>

<style>

</style>

<template>
	<view class="container">
		
		<view class="intro">本项目已包含uni ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。</view>
		<text class="intro">详见：</text>
		<uni-link :href="href" :text="href"></uni-link>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				href: 'https://uniapp.dcloud.io/component/README?id=uniui'
			}
		},
		methods: {

		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
</style>