django_weixin_app/frontend/pages/index/index.js

Component({
	data: {
		// 数据
		items: [{
			id: 3,
			content: '打游戏',
			checked: false
		}, {
			id: 2,
			content: '吃饭',
			checked: false,
		}, {
			id: 1,
			content: '睡觉',
			checked: false,
		}],
		// 输入框当前内容
		inputedValue: "",
	},
	methods: {
		// 监听多选框的状态改变事件
		checkboxChange(e) {
			// 页面特有的数据
			// 获取本地数据的写法为this.data.xxx
			const items = JSON.parse(JSON.stringify(this.data.items));
			// checkbox的value
			const values = e.detail.value;
			// 将items和values进行对比
			// 根据values的值更新页面数据(即data.items)
			for (let i = 0, lenI = items.length; i < lenI; i++) {
				items[i].checked = false;
				for (let j = 0, lenJ = values.length; j < lenJ; j++) {
					if (items[i].id === parseInt(values[j])) {
						// 如果当前条目被选中则将items中对应的条目设置为已选中
						items[i].checked = true;
						break;
					}
				}
			}
			// 更新页面数据
			this.setData({
				items: items,
			});

			// 将items存储到缓存
			wx.setStorage({
				key: "items",
				data: items,
			})

			// 打印的内容会展现在调试器中
			// console.log(this.data.items)

		},
		// 监听键盘输入事件
		keyInput(e) {
			this.setData({
				inputedValue: e.detail.value
			})
		},
		// 监听提交按钮
		inputSubmit() {
			// 读取数据
			let items = JSON.parse(JSON.stringify(this.data.items));
			// 设置新条目的id
			let newId = 1;
			if (this.data.inputedValue === "") {
				console.log("待办事项不能为空!");
				return;
			}
			for (let value of items) {
				if (value.content === this.data.inputedValue) {
					console.log("该待办事件已存在!");
					return;
				}
			}
			if (items[0] !== undefined) {
				newId = items[0].id + 1; // 注意第一个item的id最大
			}
			// 将新条目更新到items中
			items.unshift({ // unshift表示将数据插到第一个位置
				id: newId,
				content: this.data.inputedValue,
				checked: false
			});
			console.log(items[0]);
			// 更新data
			this.setData({
				items: items,
				inputedValue: "", //将输入框中的值清空
			});
			// 将items本地存储
			wx.setStorage({
				key: "items",
				data: items
			});
		}
	},
	//生命周期函数
	lifetimes: {
		// 在组件实例进入页面节点树时执行
		attached() {
			// const that = this;
			// 从缓存中读取items
			wx.getStorage({
				key: 'items',
				success: res => {
					this.setData({
						items: res.data.filter(v=>v.checked===false)
					})
				}
      });
      
      // 请求后端数据
      wx.request({
        url: 'http://127.0.0.1:8000/api/weixin/login/',
        success: res => {
          console.log(res.data);
        }
      })
		}
	}

})