|
|
|
|
@ -4,216 +4,99 @@ Component({ |
|
|
|
|
items: [{ |
|
|
|
|
id: 1, |
|
|
|
|
content: '打游戏', |
|
|
|
|
checked: false |
|
|
|
|
checked: false, |
|
|
|
|
pushed: false, |
|
|
|
|
}], |
|
|
|
|
// 输入框当前内容
|
|
|
|
|
inputedValue: "", |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
// 监听多选框的状态改变事件
|
|
|
|
|
// 更新待办的完成状态
|
|
|
|
|
checkboxChange(e) { |
|
|
|
|
// 登录后才可以修改待办事项的状态
|
|
|
|
|
this.login(() => { |
|
|
|
|
this._checkboxChange(e); |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 多选框状态改变实际处理函数
|
|
|
|
|
_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; |
|
|
|
|
} |
|
|
|
|
let items = JSON.parse(JSON.stringify(this.data.items)); |
|
|
|
|
for (const [index, item] of items.entries()) { |
|
|
|
|
if (item.checked !== e.detail.value.includes(item.id)) { |
|
|
|
|
// setData动态修改数据元素的一种方式
|
|
|
|
|
const key = `items[${index}].checked`; |
|
|
|
|
const checked = !item.checked; |
|
|
|
|
console.log(key, " ", checked); |
|
|
|
|
this.setData({ |
|
|
|
|
[key]: checked, |
|
|
|
|
}); |
|
|
|
|
// 调用云函数，更新数据库
|
|
|
|
|
getApp().cloud().callFunction({ |
|
|
|
|
name: 'updateCheck', |
|
|
|
|
data: { |
|
|
|
|
id: item.id, |
|
|
|
|
checked: checked, |
|
|
|
|
}, |
|
|
|
|
}); |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// 更新页面数据
|
|
|
|
|
this.setData({ |
|
|
|
|
items: items, |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
// 将items存储到缓存
|
|
|
|
|
wx.setStorage({ |
|
|
|
|
key: "items", |
|
|
|
|
data: items, |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
// 打印的内容会展现在调试器中
|
|
|
|
|
// console.log(this.data.items)
|
|
|
|
|
|
|
|
|
|
// 上传数据到后端
|
|
|
|
|
this.uploadData(items); |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
// 监听键盘输入事件
|
|
|
|
|
// 获取随机id
|
|
|
|
|
getUUID(randomLength = 12) { |
|
|
|
|
// 返回36位UUID
|
|
|
|
|
return Math.random().toString().substr(2, randomLength) + Date.now().toString(36); |
|
|
|
|
}, |
|
|
|
|
// 监听输入框按键
|
|
|
|
|
keyInput(e) { |
|
|
|
|
this.setData({ |
|
|
|
|
inputedValue: e.detail.value |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 监听按钮点击事件
|
|
|
|
|
inputSubmit() { |
|
|
|
|
// 登录之后才可以添加新的待办事项
|
|
|
|
|
this.login(() => { |
|
|
|
|
this._inputSubmit(); |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 点击提交按钮后实际执行的函数
|
|
|
|
|
_inputSubmit() { |
|
|
|
|
// 读取数据
|
|
|
|
|
let items = JSON.parse(JSON.stringify(this.data.items)); |
|
|
|
|
// console.log("上传前: ",items);
|
|
|
|
|
// 新建待办事项
|
|
|
|
|
inputSubmit() {
|
|
|
|
|
// 设置新条目的id
|
|
|
|
|
let newId = 1; |
|
|
|
|
const newID = this.getUUID(); |
|
|
|
|
if (this.data.inputedValue === "") { |
|
|
|
|
console.log("待办事项不能为空!"); |
|
|
|
|
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, |
|
|
|
|
const newItem = { |
|
|
|
|
id: newID, |
|
|
|
|
content: this.data.inputedValue, |
|
|
|
|
checked: false |
|
|
|
|
}); |
|
|
|
|
console.log(items[0]); |
|
|
|
|
// 更新data
|
|
|
|
|
checked: false, |
|
|
|
|
pushed: false, |
|
|
|
|
}; |
|
|
|
|
// 将新条目更新到items状态中
|
|
|
|
|
let items = JSON.parse(JSON.stringify(this.data.items)); |
|
|
|
|
items.unshift(newItem); |
|
|
|
|
this.setData({ |
|
|
|
|
items: items, |
|
|
|
|
inputedValue: "", //将输入框中的值清空
|
|
|
|
|
}); |
|
|
|
|
// 将items本地存储
|
|
|
|
|
wx.setStorage({ |
|
|
|
|
key: "items", |
|
|
|
|
data: items |
|
|
|
|
inputedValue: "", |
|
|
|
|
}); |
|
|
|
|
// items和this.data.items指向的值一模一样
|
|
|
|
|
// console.log("上传后: ", items);
|
|
|
|
|
// console.log("上传后：", this.data.items);
|
|
|
|
|
this.uploadData(items); |
|
|
|
|
}, |
|
|
|
|
// 检查token是否过期
|
|
|
|
|
isTokenAvailable() { |
|
|
|
|
const now = Date.parse(new Date()); |
|
|
|
|
try { |
|
|
|
|
const accessTime = wx.getStorageSync('access_time'); |
|
|
|
|
// token的有效时间为5分钟
|
|
|
|
|
if ((accessTime !== '') && (now - accessTime < 5 * 60 * 1000)) { |
|
|
|
|
return true; |
|
|
|
|
// 将items提交到云数据库中
|
|
|
|
|
this.uploadData(newItem); |
|
|
|
|
// 订阅服务
|
|
|
|
|
this.subscribe(); |
|
|
|
|
// 发送邮件服务
|
|
|
|
|
getApp().cloud().callFunction({ |
|
|
|
|
name: 'sendEmail', |
|
|
|
|
data: { |
|
|
|
|
content: newItem.content, |
|
|
|
|
} |
|
|
|
|
} catch { |
|
|
|
|
// do something
|
|
|
|
|
} |
|
|
|
|
return false; |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 获取token
|
|
|
|
|
getToken(callback) { |
|
|
|
|
// --------------
|
|
|
|
|
// 步骤一：获取code
|
|
|
|
|
// --------------
|
|
|
|
|
wx.login({ |
|
|
|
|
// 向用户申请发送推送服务
|
|
|
|
|
subscribe() { |
|
|
|
|
// 填写模板id
|
|
|
|
|
const templateId = 'qyVdbBkue4HUeuzXIeHo8LH938gMPKJMj2bP9zTnQCo'; |
|
|
|
|
wx.requestSubscribeMessage({ |
|
|
|
|
tmplIds: [templateId], |
|
|
|
|
success(res) { |
|
|
|
|
if (res.code) { |
|
|
|
|
// 查看code
|
|
|
|
|
// console.log("code: ", res.code);
|
|
|
|
|
// --------------
|
|
|
|
|
// 步骤二：用code换取token
|
|
|
|
|
// --------------
|
|
|
|
|
wx.request({ |
|
|
|
|
url: 'http://127.0.0.1:8000/api/weixin/login/', |
|
|
|
|
method: 'POST', |
|
|
|
|
data: { |
|
|
|
|
code: res.code, |
|
|
|
|
}, |
|
|
|
|
success: res => { |
|
|
|
|
// 查看是否收到token
|
|
|
|
|
// console.log(res.data);
|
|
|
|
|
console.log("重新获取token成功!"); |
|
|
|
|
const access = res.data.access; |
|
|
|
|
// 将token保存到本地
|
|
|
|
|
wx.setStorage({ |
|
|
|
|
key: 'access', |
|
|
|
|
data: access, |
|
|
|
|
}); |
|
|
|
|
// 保存获取token的时间
|
|
|
|
|
wx.setStorage({ |
|
|
|
|
key: 'access_time', |
|
|
|
|
data: Date.parse(new Date()), |
|
|
|
|
}); |
|
|
|
|
// --------------
|
|
|
|
|
// 步骤三：用token获取用户数据
|
|
|
|
|
// --------------
|
|
|
|
|
// wx.request({
|
|
|
|
|
// url: 'http://127.0.0.1:8000/api/weixin/data/',
|
|
|
|
|
// type: 'GET',
|
|
|
|
|
// header: {
|
|
|
|
|
// 'Authorization': 'Bearer ' + access
|
|
|
|
|
// },
|
|
|
|
|
// success: res => {
|
|
|
|
|
// console.log(res.data);
|
|
|
|
|
// // 调用回调函数
|
|
|
|
|
// // 以便登录成功后执行后续操作
|
|
|
|
|
// // 因为wx.login,wx.request都是异步的,
|
|
|
|
|
// // 这样写才能保证callback一定晚于wx.login执行
|
|
|
|
|
// callback();
|
|
|
|
|
// }
|
|
|
|
|
// })
|
|
|
|
|
callback(); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
} else { |
|
|
|
|
console.log("登录失败! " + res.errMsg); |
|
|
|
|
} |
|
|
|
|
console.log("订阅成功!", res); |
|
|
|
|
}, |
|
|
|
|
fail(err) { |
|
|
|
|
console.log('订阅失败!', err); |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
}, |
|
|
|
|
// 登录函数
|
|
|
|
|
login(callback = (() => {})) { |
|
|
|
|
if (!this.isTokenAvailable()) { |
|
|
|
|
console.log("token已失效,需要重新向django请求token!"); |
|
|
|
|
// 获取token并传入callback
|
|
|
|
|
this.getToken(callback); |
|
|
|
|
} else { |
|
|
|
|
console.log("token有效!从缓存中直接读取!"); |
|
|
|
|
// const access = wx.getStorageSync('access');
|
|
|
|
|
// console.log("token: ", access);
|
|
|
|
|
callback(); |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 将清单数据上传django
|
|
|
|
|
uploadData(items) { |
|
|
|
|
const access = wx.getStorageSync('access'); |
|
|
|
|
wx.request({ |
|
|
|
|
url: 'http://127.0.0.1:8000/api/weixin/data/', |
|
|
|
|
method: 'POST', |
|
|
|
|
header: { |
|
|
|
|
'Authorization': 'Bearer ' + access, |
|
|
|
|
}, |
|
|
|
|
data: { |
|
|
|
|
items: items, |
|
|
|
|
}, |
|
|
|
|
success: res => { |
|
|
|
|
// 上传成功后打印一下
|
|
|
|
|
console.log("上传成功"); |
|
|
|
|
console.log(res); |
|
|
|
|
}, |
|
|
|
|
async uploadData(item) { |
|
|
|
|
const db = await getApp().database(); |
|
|
|
|
db.collection('todo').add({ |
|
|
|
|
data: item, |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
@ -221,35 +104,16 @@ Component({ |
|
|
|
|
lifetimes: { |
|
|
|
|
// 在组件实例进入页面节点树时执行
|
|
|
|
|
attached() { |
|
|
|
|
// const that = this;
|
|
|
|
|
// 从缓存中读取items
|
|
|
|
|
wx.getStorage({ |
|
|
|
|
key: 'items', |
|
|
|
|
success: res => { |
|
|
|
|
getApp().cloud().callFunction({ |
|
|
|
|
name: 'getList', |
|
|
|
|
complete: res => { |
|
|
|
|
console.log('获取数据成功!'); |
|
|
|
|
// console.log('Result: ',res);
|
|
|
|
|
this.setData({ |
|
|
|
|
items: res.data.filter(v => v.checked === false) |
|
|
|
|
items: res.result.fetchResult.data, |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
this.login(() => { |
|
|
|
|
const access = wx.getStorageSync('access'); |
|
|
|
|
// 从后端获取items数据
|
|
|
|
|
wx.request({ |
|
|
|
|
url: 'http://127.0.0.1:8000/api/weixin/data/', |
|
|
|
|
type: 'GET', |
|
|
|
|
header: { |
|
|
|
|
'authorization': 'Bearer ' + access, |
|
|
|
|
}, |
|
|
|
|
success: res => { |
|
|
|
|
console.log("读取数据成功!"); |
|
|
|
|
// 只读取未完成的清单
|
|
|
|
|
this.setData({ |
|
|
|
|
items: res.data.items.filter(v => v.checked === false) |
|
|
|
|
}) |
|
|
|
|
// console.log(this.data.items);
|
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}); |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
}) |
