Files
wxProject-w4w/miniprogram/pages/index/index.ts
T

796 lines
27 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
// index.ts
// 获取应用实例
const app = getApp<IAppOption>()
// wx.showLoading({
// title: '数据加载中...',
// mask: true
// })
// class stack{
// data=[]
// push=(d: any) =>{
// this.data.push(d);
// }
// }
Page({
data: {
// motto: 'Hello World',
text_startPage1: "知识库",
imgUrl_startPage1: "./static/icons/lib.svg",
function_startPage1: "popup_lib",
imgUrl_startPage2: "./static/icons/history.svg",
function_startPage2: "popup_history",
imgUrl_startPage3: "./static/icons/heart.svg",
function_startPage3: "popup_collect",
text_startPage4: "个性化",
imgUrl_startPage4: "./static/icons/self.svg",
function_startPage4: "popup_style",
tip_content: "不吃饭会饿死",
tip_hidden: false,
active_Page: "startPage",
currentDate: '',
curtain_hidden: true,
imgUrl_test:"https://tse4-mm.cn.bing.net/th/id/OIP-C.2MyVJAPY4CWrMUIKfruz9AHaHa?w=199&h=199&c=7&r=0&o=5&dpr=1.3&pid=1.7",
//有点误导性
// 瞬间开启摄像头影响流畅性了
// camera_hidden:true,
// 历史记录data
data_history: {
"2023.2.30": [
{
imgUrl:"https://tse3-mm.cn.bing.net/th/id/OIP-C.qM9D7c-Ow-C-xLARJdSwQwHaIO?pid=ImgDet&rs=1" , res:{scores: 1, arr: []}
},{
imgUrl:"https://tse3-mm.cn.bing.net/th/id/OIP-C.qM9D7c-Ow-C-xLARJdSwQwHaIO?pid=ImgDet&rs=1" , res:{scores: 75, arr: []}
},{
imgUrl:"https://tse3-mm.cn.bing.net/th/id/OIP-C.qM9D7c-Ow-C-xLARJdSwQwHaIO?pid=ImgDet&rs=1" , res:{scores: 1, arr: []}
},{
imgUrl:"https://tse3-mm.cn.bing.net/th/id/OIP-C.qM9D7c-Ow-C-xLARJdSwQwHaIO?pid=ImgDet&rs=1" , res:{scores: 1, arr: []}
},{
imgUrl:"https://tse3-mm.cn.bing.net/th/id/OIP-C.qM9D7c-Ow-C-xLARJdSwQwHaIO?pid=ImgDet&rs=1" , res:{scores: 1, arr: []}
},{
imgUrl:"https://tse3-mm.cn.bing.net/th/id/OIP-C.qM9D7c-Ow-C-xLARJdSwQwHaIO?pid=ImgDet&rs=1" , res:{scores: 1, arr: []}
},
], "2023.2.10": [
{
imgUrl:"https://tse3-mm.cn.bing.net/th/id/OIP-C.qM9D7c-Ow-C-xLARJdSwQwHaIO?pid=ImgDet&rs=1" , res:{scores: 1, arr: []}
}
], "2023.2.11": [
{
imgUrl:"https://tse3-mm.cn.bing.net/th/id/OIP-C.qM9D7c-Ow-C-xLARJdSwQwHaIO?pid=ImgDet&rs=1" , res:{scores: 1, arr: []}
}
], "2023.2.12": [
{
imgUrl:"https://tse3-mm.cn.bing.net/th/id/OIP-C.qM9D7c-Ow-C-xLARJdSwQwHaIO?pid=ImgDet&rs=1" , res:{scores: 1, arr: []}
}
], "2023.2.13": [
{
imgUrl:"https://tse3-mm.cn.bing.net/th/id/OIP-C.qM9D7c-Ow-C-xLARJdSwQwHaIO?pid=ImgDet&rs=1" , res:{scores: 1, arr: []}
}
],
},
//收藏夹data
data_collect: [
{
"date": "2023.15.16",
"scores": "99",
"imgUrl": "./static/icons/history.svg",
"remark": "方师傅康便面",
"riskBgColor": "springgreen",
"riskStr": "低风险"
},
{
"date": "2023.5.6",
"scores": "1",
"imgUrl": "./static/icons/history.svg",
"remark": "一二三四五六七",
"riskBgColor": "sandybrown",
"riskStr": "中风险"
},
{
"date": "2023.5.6",
"scores": "100",
"imgUrl": "./static/icons/history.svg",
"remark": "一二三四五六七",
"riskBgColor": "tomato",
"riskStr": "高风险"
},
{
"date": "2023.15.16",
"scores": "99",
"imgUrl": "./static/icons/history.svg",
"remark": "方师傅康便面",
"riskBgColor": "springgreen",
"riskStr": "低风险"
},
{
"date": "2023.5.6",
"scores": "1",
"imgUrl": "./static/icons/history.svg",
"remark": "一二三四五六七",
"riskBgColor": "tomato",
"riskStr": "高风险"
},
{
"date": "2023.5.6",
"scores": "100",
"imgUrl": "./static/icons/history.svg",
"remark": "一二三四五六七",
"riskBgColor": "tomato",
"riskStr": "高风险"
},
],
// 存储所有成分的信息, hidden: false, "riskBgColor": "springgreen", "riskStr": "低风险"由前端实现
data_lib: [
{
name: {
zh: "山梨酸钾",
en: "Potassium sorbate"
},
scores: 73,
info: "山梨酸钾,又名2,4-己二烯酸钾,是山梨酸的钾盐,分子式为C6H7O2K,无色或白色鳞片状结晶或结晶性粉末。 [1] 无臭或微有臭味,长期暴露在空气中易吸潮、被氧化分解而变色。易溶于水(67.6g/100mL 20℃),溶于丙二醇(5.8g/100mL)和乙醇(0.3g/10 mL)。山梨酸钾和山梨酸是常用的有机防腐剂,广泛用于食品、化状品、饲料的防腐。易于被人体吸收代谢,在体内无残留,无毒性。",
extra: [],
ADI: "",
// 搜索用
hidden: false,
//前端赋值
"riskBgColor": "springgreen",
"riskStr": "低风险"
}, {
name: {
zh: "李宁",
en: "L.N.G.N.M.S.L."
},
scores: 45,
info: "HAHA",
extra: [
{ type: "safe", name: "LPL" },
{ type: "unsafe", name: "飞舞" },
{ type: "unsafe", name: "精忠报国" },
],
ADI: "",
hidden: false,
riskBgColor: "sandybrown",
riskStr: "中风险"
}, {
name: {
zh: "丁基羟基茴香醚",
en: "Butyl hydroxyanisole(BHA)"
},
scores: 21,
info: "丁基羟基茴香醚(BHA),又名叔丁基-4-羟基茴香醚,化学式为C11H16O2,有两种异构体:3-BHA和2-BHA,一般指二者的混合物。2017年10月27日,世界卫生组织国际癌症研究机构公布的致癌物清单初步整理参考,叔丁基对羟基茴香醚(BHA)在2B类致癌物清单中。",
extra: [
{ type: "unsafe", name: "2B类致癌物" }
],
ADI: "0~0.5mg/kg bw",
hidden: false,
riskBgColor: "tomato",
riskStr: "高风险"
}
],
data_resultPage: {
scores: 60.5,
circleClip: "",
circleColor: "",
arr: [],
},
data_rcv: {
scores: 1,
arr: [],
},
sessionKey: "",
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('button.open-type.getUserInfo'),
canIUseGetUserProfile: false,
canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
},
// 启动时获取session
async onLoad() {
// wx.authorize()
// await this.updateSession()
// setInterval(()=>{
// this.updateSession()
// },60*1000*5)
console.log(this.data.sessionKey)
},
//开始界面的按钮相关动画
startPage_Bottons_leave() {
// var fd = wx.createSelectorQuery()
var time = 700;
var time1 = () => {
return Math.random() * 200;
}
this.animate('#gotoSearch', [
{ opacity: 1, translateY: 0, ease: 'ease-in' }, { opacity: 0, translateY: -300, ease: 'ease-in' },
], time)
this.animate('#tips_startPage', [
{ opacity: 1, ease: 'ease-in' }, { opacity: 0, ease: 'ease-in' },
], time, () => {
// this.setData({ tip_hidden: true })
})
setTimeout(() => {
this.animate('#buttom_startPage1', [
{ opacity: 1, translateX: 0, ease: 'ease-in' }, { opacity: 0, translateX: -300, ease: 'ease-in' },
], time)
}, time1())
setTimeout(() => {
this.animate('#buttom_startPage3', [
{ opacity: 1, translateX: 0, ease: 'ease-in' }, { opacity: 0, translateX: -300, ease: 'ease-in' },
], time)
}, time1())
setTimeout(() => {
this.animate('#buttom_startPage4', [
{ opacity: 1, translateX: 0, ease: 'ease-in' }, { opacity: 0, translateX: 300, ease: 'ease-in' },
], time)
}, time1())
setTimeout(() => {
this.animate('#buttom_startPage2', [
{ opacity: 1, translateX: 0, ease: 'ease-in' }, { opacity: 0, translateX: 300, ease: 'ease-in' },
], time)
}, time1())
},
startPage_Bottons_in() {
// var fd = wx.createSelectorQuery()
var time = 700;
var time1 = () => {
return Math.random() * 200;
}
this.animate('#gotoSearch', [
{ opacity: 0, translateY: -300, ease: 'ease-in' }, { opacity: 1, translateY: 0, ease: 'ease-out' },
], time)
// this.setData({ tip_hidden: false })
this.animate('#tips_startPage', [
{ opacity: 0, ease: 'ease-in' }, { opacity: 1, ease: 'ease-out' },
], time)
setTimeout(() => {
this.animate('#buttom_startPage1', [
{ opacity: 0, translateX: -300, ease: 'ease-in' }, { opacity: 1, translateX: 0, ease: 'ease-out' },
], time)
}, time1())
setTimeout(() => {
this.animate('#buttom_startPage3', [
{ opacity: 0, translateX: -300, ease: 'ease-in' }, { opacity: 1, translateX: 0, ease: 'ease-out' },
], time)
}, time1())
setTimeout(() => {
this.animate('#buttom_startPage4', [
{ opacity: 0, translateX: 300, ease: 'ease-in' }, { opacity: 1, translateX: 0, ease: 'ease-out' },
], time)
}, time1())
setTimeout(() => {
this.animate('#buttom_startPage2', [
{ opacity: 0, translateX: 300, ease: 'ease-in' }, { opacity: 1, translateX: 0, ease: 'ease-out' },
], time)
}, time1())
},
popup_camera() {
// this.setData({
// camera_hidden:false,
// })
this.startPage_Bottons_leave()
this.animate('#page_camera', [
{ opacity: 0, translateY: 0 }, { opacity: 1, translateY: "-100%", ease: 'ease-in-out', },
], 1000, () => {
this.selectComponent('#page_camera')
})
},
exit_camera() {
this.startPage_Bottons_in()
this.animate('#page_camera', [
{ opacity: 1, translateY: "-100%" }, { opacity: 0, translateY: "0", ease: 'ease-in-out' },
], 1000, () => {
// this.setData({
// camera_hidden:false,
// })
})
},
popup_history() {
this.startPage_Bottons_leave()
this.animate('#page_history', [
{ opacity: 0, translateY: 0 }, { opacity: 1, translateY: "-100%", ease: 'ease-in-out', },
], 1000, () => {
this.selectComponent('#page_history')
})
},
exit_history() {
this.startPage_Bottons_in()
this.animate('#page_history', [
{ opacity: 1, translateY: "-100%" }, { opacity: 0, translateY: "0", ease: 'ease-in-out' },
], 1000)
},
popup_collect() {
this.startPage_Bottons_leave()
this.animate('#page_collect', [
{ opacity: 0, translateY: 0 }, { opacity: 1, translateY: "-100%", ease: 'ease-in-out', },
], 1000, () => {
this.selectComponent('#page_collect')
})
},
exit_collect() {
this.startPage_Bottons_in()
this.animate('#page_collect', [
{ opacity: 1, translateY: "-100%" }, { opacity: 0, translateY: "0", ease: 'ease-in-out' },
], 1000)
},
popup_lib() {
this.startPage_Bottons_leave()
this.animate('#page_lib', [
{ opacity: 0, translateY: 0 }, { opacity: 1, translateY: "-100%", ease: 'ease-in-out', },
], 1000, () => {
this.selectComponent('#page_collect')
})
},
exit_lib() {
this.startPage_Bottons_in()
this.animate('#page_lib', [
{ opacity: 1, translateY: "-100%" }, { opacity: 0, translateY: "0", ease: 'ease-in-out' },
], 1000)
},
popup_style() {
this.startPage_Bottons_leave()
this.animate('#page_style', [
{ opacity: 0, translateY: 0 }, { opacity: 1, translateY: "-100%", ease: 'ease-in-out', },
], 1000, () => {
this.selectComponent('#page_style')
})
},
exit_style() {
this.startPage_Bottons_in()
this.animate('#page_style', [
{ opacity: 1, translateY: "-100%" }, { opacity: 0, translateY: "0", ease: 'ease-in-out' },
], 1000)
},
//遮罩动画
show_curtain() {
this.setData({
curtain_hidden: false
})
this.animate('#page_curtain', [
{ opacity: 0 }, { opacity: 1, ease: 'ease-in-out' },
], 1000)
},
hide_curtain() {
this.animate('#page_curtain', [
{ opacity: 1 }, { opacity: 0, ease: 'ease-in-out' },
], 1000, () => {
this.setData({
curtain_hidden: true
})
console.log('suc')
})
this.setData({
curtain_hidden: true
})
},
//查询结果页面相关
popup_result() {
// wx.getUserProfile({
// desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
// success: (res) => {
// console.log(res)
// this.setData({
// userInfo: res.userInfo,
// hasUserInfo: true,
// })
// }
// })
this.data.data_resultPage.circleClip = this.calculate_clip_path(this.data.data_resultPage.scores * 3.6)
this.data.data_resultPage.circleColor = this.scores2map(this.data.data_resultPage.scores).color
this.setData({
data_resultPage: this.data.data_resultPage
})
this.show_curtain()
this.animate('#page_result', [
{ opacity: 0, translateY: 0 }, { opacity: 1, translateY: "-100%", ease: 'ease-in-out', },
], 600)
},
//
exit_result() {
this.hide_curtain()
this.animate('#page_result', [
{ opacity: 1, translateY: "-100%" }, { opacity: 0, translateY: "0", ease: 'ease-in-out' },
], 600)
},
// 根据角度计算剪切路径,错了不怪我。。
calculate_clip_path(deg: number) {
var res = "polygon(50% 50%,0 0"
deg = deg % 360
if (deg < 90) {
var x = -Math.cos(deg * Math.PI / 90) * 50 + 50;
res = res + "," + x + "% 0"
} else if (deg < 180) {
deg -= 90
var y = -Math.cos(deg * Math.PI / 90) * 50 + 50;
res = res + ",100% 0" + ",100% " + y + "%"
} else if (deg < 270) {
deg = 270 - deg
var x = -Math.cos(deg * Math.PI / 90) * 50 + 50;
res = res + ",100% 0" + ",100% 100%" + "," + x + "% 100%"
} else {
deg = 360 - deg
var y = -Math.cos(deg * Math.PI / 90) * 50 + 50;
res = res + ",100% 0" + ",100% 100%" + ",0 100%" + ",0 " + y + "%"
}
res = res + ");"
return res
},
//收到搜索结果处理
receive_result(){
},
//收到成分数据更新处理
receive_lib(){
},
//更新成分数据
updateLib(){
wx.request({
url: 'http://127.0.0.1:5000/getLib', //仅为示例,并非真实的接口地址
data: {
},
method:"GET",
header: {
'content-type': 'application/json' // 默认值
},
success:res=> {
// console.log(res)
var data = res.data
console.log(data)
// 能跑
for(var n of data){
var scores = n.scores;
var map = this.scores2map(scores)
n.hidden = false
n.riskBgColor = map.color
n.riskStr = map.content
}
this.setData(
{"data_lib" : data}
)
},
fail(res){
console.log(res)
}
})
},
//更新历史记录
updateHistory(){
wx.request({
url: 'http://127.0.0.1:5000/getHistory', //仅为示例,并非真实的接口地址
data: {
userCode:this.data.sessionKey
},
method:"POST",
header: {
'content-type': 'application/json' // 默认值
},
success:res=> {
console.log(res)
var data = res.data
this.setData(
{"data_history" : data}
)
},
fail(res){
console.log(res)
}
})
},
// 更新session
updateSession(){
return new Promise((resolve, reject)=>{
this.getCode().then(code => {
wx.request({
url: 'http://127.0.0.1:5000/updateSession', //仅为示例,并非真实的接口地址
data: {
userCode:code
},
method:"POST",
header: {
'content-type': 'application/json' // 默认值
},
success:res=> {
console.log(res)
var data = res.data
this.setData(
{"sessionKey" : data}
)
resolve()
// setTimeout(this.updateSession,1000*60*5)
},
fail:res=>{
console.log(res)
setTimeout(this.updateSession,1000)
reject()
}
})
})
})
},
//拍照
takePhoto() {
const ctx = wx.createCameraContext()
console.log('takePhoto..')
ctx.takePhoto({
quality: 'normal',
//找时间把这里和choosePhoto的success合并一下(算了)
success: res => {
const tempImagePath = res.tempImagePath
console.log(tempImagePath)
console.log(res)
wx.getFileSystemManager().readFile({
filePath: tempImagePath, //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: res => { //成功的回调
console.log('data:image/png;base64,' + res.data)
const imgBase64 = res.data
wx.request({
url: 'http://127.0.0.1:5000/rcvImg', //仅为示例,并非真实的接口地址
data: {
imgBase64:imgBase64
},
method:"POST",
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res)
},
fail(res){
console.log(res)
}
})
}
})
}
})
},
//选择照片
choosePhoto() {
wx.chooseMedia({
mediaType: ['image'],
sourceType: ['album'],
sizeType: ["compressed"],
count: 1,
success(res) {
const tempImagePath = res.tempFiles[0].tempFilePath
console.log(tempImagePath)
console.log(res)
wx.getFileSystemManager().readFile({
filePath: tempImagePath, //选择图片返回的相对路径
encoding: 'base64', //编码格式
success: res => { //成功的回调
console.log('data:image/png;base64,' + res.data)
const imgBase64 = res.data
// 发送图片
wx.request({
url: 'http://127.0.0.1:5000/rcvImg', //仅为示例,并非真实的接口地址
data: {
imgBase64:imgBase64
},
method:"POST",
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res)
},
fail(res){
console.log(res)
}
})
}
})
}
})
},
scores2risk(scores: Number) {
if (scores < 33) {
return "high";
} else if (scores < 66) {
return "middle";
} else {
return "low";
}
},
readInput_lib(e: any) {
//其他搜索内容
var exf = (o: any, keyw: string) => {
//搜索额外信息
for (var i of o.extra) {
if (i.name.includes(keyw)) {
return true
}
}
//搜索风险
if (o.riskStr.includes(keyw)) {
return true
}
return false
}
var key = e.detail.value
for (var n of this.data.data_lib) {
// console.log(n)
if (n.name.zh.includes(key) || n.name.en.toLowerCase().includes(key.toLowerCase()) || exf(n, key)) {
n.hidden = false;
// console.log(n.name.zh)
} else {
n.hidden = true;
}
}
this.setData({ data_lib: this.data.data_lib })
// console.log(this.data.data_lib)
},
//将risk转为存储color和content的map
scores2map(scores: Number) {
var risk = this.scores2risk(scores)
switch (risk) {
case "low": {
return { "color": "springgreen", "content": "低风险" };
}
case "middle": {
return { "color": "sandybrown", "content": "中风险" };
}
case "high": {
return { "color": "tomato", "content": "高风险" };
}
}
return { "color": "tomato", "content": "高风险" };
},
// 事件处理函数
bindViewTap() {
wx.navigateTo({
url: '../logs/logs',
})
},
getUserProfile() {
// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认,开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
wx.getUserProfile({
desc: '存储历史记录', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
console.log(res, 666)
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
getUserInfo(e: any) {
// 不推荐使用getUserInfo获取用户信息,预计自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息
console.log(e)
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
},
getDate: function () {
var nowdate = new Date();
var nowyear = nowdate.getFullYear();
var nowmonth = nowdate.getMonth() + 1;
var nowday = nowdate.getDate();
var nowdata1 = nowyear + '年' + nowmonth + '月' + nowday + '日'
this.setData({
currentDate: nowdata1
});
},
// 获取用户code,以给服务端换取openId
getCode: async function () {
var code
await new Promise(function (res, rej) {
wx.login({
success: rcv => {
res(rcv.code)
}, fail: rcv => {
rej(rcv)
}
})
}).then(function (input: unknown) {
code = input
}).catch(function () {
code = ""
})
// console.log(code)
return code
},
testfunction: async function () {
await this.getCode().then(code => {
// code == "" => failed
if (code == "") {
this.testfunction()
} else {
console.log(code)
wx.chooseImage({
success(res) {
const tempFilePaths = res.tempFilePaths
console.log(tempFilePaths)
wx.uploadFile({
url: 'http://127.0.0.1:5000/rcvImg', //仅为示例,非真实的接口地址
filePath: tempFilePaths[0],
name: 'Img',
formData: {
'user': code
},
success(res) {
const data = res.data
console.log(data)
}
})
}
})
// wx.request({
// url: 'http://127.0.0.1:5000/rcvImg', //仅为示例,并非真实的接口地址
// data: {
// a:123212
// },
// method:"POST",
// header: {
// 'content-type': 'application/json' // 默认值
// },
// success (res) {
// console.log(res)
// },
// fail(res){
// console.log(res)
// }
// })
}
})
}
})