代码显示用uniapp写一个待办列表，每项代办都要能自定义代办时间，并且代办内容不能相同

<template>
<view class="container">
<view class="input-box">
<input type="text" v-model="todoInput" placeholder="请输入待办内容" />
<input type="datetime-local" v-model="todoTime" />
<button @click="addTodo">添加</button>
</view>

<view class="todo-list">
<view class="todo-item" v-for="(todo, index) in todoList" :key="index">
<view class="todo-content">{{ todo.content }}</view>
<view class="todo-time">{{ todo.time }}</view>
<view class="todo-delete" @click="deleteTodo(index)">删除</view>
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
todoInput: "",
todoTime: "",
todoList: [],
};
},
methods: {
addTodo() {
if (!this.todoInput || !this.todoTime) {
return;
}

// 判断代办内容是否已存在
if (this.todoList.some((item) => item.content === this.todoInput)) {
uni.showToast({
title: "已存在相同的代办内容",
icon: "none",
});
return;
}

const todo = {
content: this.todoInput,
time: this.todoTime,
};
this.todoList.push(todo);
this.todoInput = "";
this.todoTime = "";
},
deleteTodo(index) {
this.todoList.splice(index, 1);
},
},
};
</script>

<style>
.container {
padding: 20rpx;
}

.input-box {
display: flex;
justify-content: space-between;
align-items: center;
}

.input-box input {
width: 60%;
height: 80rpx;
font-size: 30rpx;
padding: 0 20rpx;
border: none;
border-bottom: 2rpx solid #ccc;
}

.input-box input[type="datetime-local"] {
width: 35%;
height: 80rpx;
font-size: 30rpx;
border: none;
border-bottom: 2rpx solid #ccc;
}

.input-box button {
width: 20%;
height: 80rpx;
font-size: 30rpx;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 5rpx;
}

.todo-list {
margin-top: 20rpx;
}

.todo-item {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #f9f9f9;
padding: 20rpx;
margin-bottom: 20rpx;
border-radius: 10rpx;
}

.todo-content {
font-size: 30rpx;
}

.todo-time {
font-size: 24rpx;
color: #666;
}

.todo-delete {
font-size: 24rpx;
color: #f00;
}
</style>