539943419/wxProject-w4w
1
0 Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

完成除个性化外页面

Browse Source
This commit is contained in:
539943419 committed 2023-11-10 23:16:22 +08:00
1 parent cc88bc636a
commit fac7123cd1
3 files changed
+479 -63
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

miniprogram/pages/index/index.scss
+226
View File
@@ -282,6 +282,7 @@
height: 200rpx;
width: auto;
margin:15rpx 20rpx 15rpx 10rpx;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
.node_content{
position: relative;
display: block;
@@ -593,6 +594,7 @@
height: 200rpx;
width: auto;
margin:10rpx 20rpx 10rpx 10rpx;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
.node_content{
position: relative;
display: block;
@@ -733,6 +735,7 @@
background-color: rgba($color: #ffffff, $alpha: 1.0);
border-radius: 50rpx;
.content{
position: relative;
display: flex;
flex-direction:row;
justify-content: center;
@@ -744,6 +747,10 @@
margin:30rpx;
border-radius: 25rpx;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
display: flex;
justify-content: center;
align-items: center;
font-size: 150rpx;
}
.result_circle{
background-color: #bfdfd7;
@@ -766,6 +773,225 @@
transform: rotate(45deg);
}
}
.result_content{
display: flex;
flex-direction: column;
padding-top: 20rpx;
position: absolute;
top: 380rpx;
left: 0;
width: 100%;
height: auto;
// padding-bottom: 40rpx;
.lib_search{
margin-bottom: 20rpx;
// .lib_search_input{
// // background-color: yellow;
// }
}
.node{
background-color: rgba($color: #ffffff, $alpha: 1);
border-radius: 15rpx;
height: 200rpx;
width: auto;
margin:15rpx 20rpx 15rpx 10rpx;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
.node_content{
position: relative;
display: block;
height: 100%;
width: auto;
margin-left: 25rpx;
border-radius: 15rpx;
background-color: rgba($color: #ffffff, $alpha: 1);
// overflow: hidden;
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
// .node_nameBar{
// background-color: teal;
// position: absolute;
// top:20rpx;
// left:20rpx;
// overflow: scroll;
// height: 500rpx;
// width: 350rpx;
// display:flex;
// // flex-direction: column;
// justify-content: center;
// align-items: flex-start;
// }
.node_name{
font-size: 31rpx;
height:50rpx;
width:max-content;
background-color: rgba(150, 145, 138, 0.5);
padding:0rpx 10rpx;
display: flex;
align-items: center;
border-radius: 15rpx;
position: absolute;
top:15rpx;
left:20rpx;
max-width: 230rpx;
overflow: scroll;
white-space: nowrap;
// justify-content: center;
}
.node_name_en{
height:45rpx;
position: absolute;
top:80rpx;
left:20rpx;
max-width: 338rpx;
}
.node_adi{
font-size: 31rpx;
height:45rpx;
max-width:338rpx;
// background-color: rgba(150, 145, 138, 0.5);
// padding:0rpx 10rpx;
display: flex;
align-items: center;
border-radius: 15rpx;
position: absolute;
bottom:20rpx;
left:20rpx;
overflow: scroll;
white-space: nowrap;
.adi_title{
height:45rpx;
background-color:salmon;
padding:0rpx 10rpx;
}
.adi_content{
height:45rpx;
background-color:rgb(224, 224, 224);
padding:0rpx 10rpx;
}
}
.node_danger{
font-size: 31rpx;
height:50rpx;
width: 80rpx;
background-color: rgba(150, 145, 138, 0.5);
position: absolute;
left:299rpx;
top:15rpx;
// padding: 10rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15rpx;
background-color: tomato;
// view{
// position: relative;
// top:-0.5rpx;
// }
}
.node_safe{
font-size: 31rpx;
height:50rpx;
width: 80rpx;
background-color: rgba(150, 145, 138, 0.5);
position: absolute;
left:299rpx;
top:15rpx;
// padding: 10rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15rpx;
background-color:springgreen;
// view{
// position: relative;
// top:-0.5rpx;
// }
}
.node_scores{
font-size: 31rpx;
height:50rpx;
width: 135rpx;
background-color: rgba(150, 145, 138, 0.5);
position: absolute;
left:399rpx;
top:15rpx;
// padding: 4rpx 0rpx 6rpx 10rpx;
// padding-left: 10rpx;
display: flex;
align-items: center;
// justify-content: center;
border-radius: 15rpx;
overflow: hidden;
.scores_title{
height:50rpx;
width: 80rpx;
background-color:salmon;
display: flex;
align-items: center;
justify-content: center;
}
.scores_num{
height:50rpx;
width: 65rpx;
background-color:rgb(224, 224, 224);
display: flex;
align-items: center;
justify-content: center;
}
}
.node_risk{
font-size: 31rpx;
height:50rpx;
width: 120rpx;
position: absolute;
left:560rpx;
top:15rpx;
// padding: 0rpx 6rpx 6rpx 13rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15rpx;
overflow: hidden;
}
::-webkit-scrollbar {
width: 0;
height: 0;
color: transparent;
}
.node_extra{
height:95rpx;
width: 256rpx;
background-color: white;
border: 3rpx solid rgba(0, 0, 0, 0.356);
position: absolute;
left:400rpx;
bottom:15rpx;
padding: 5rpx 10rpx 10rpx 10rpx;
border-radius: 15rpx;
display: flex;
flex-direction: column;
align-items: center;
overflow: scroll;
.node_extra_empty{
margin: auto;
font-size: 45rpx;
}
.node_ex_content{
margin:5rpx;
height: 40rpx;
width: 240rpx;
display: flex;
border-radius: 15rpx;
align-items: center;
justify-content: center;
}
}
}
}
}
}
}
miniprogram/pages/index/index.ts
+201 -54
View File
@@ -2,18 +2,7 @@
// 获取应用实例
const app = getApp<IAppOption>()
// wx.showLoading({
// title: '数据加载中...',
// mask: true
// })
// class stack{
// data=[]
// push=(d: any) =>{
// this.data.push(d);
// }
// }
const serverAddr = "127.0.0.1:5000"
Page({
data: {
@@ -45,7 +34,7 @@ Page({
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: 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: []}
},{
@@ -80,15 +69,15 @@ Page({
data_collect: [
{
"date": "2023.15.16",
"scores": "99",
"res":{scores: 99, arr: []} ,
"imgUrl": "./static/icons/history.svg",
"remark": "方师傅康便面",
"riskBgColor": "springgreen",
"riskStr": "低风险"
"riskStr": "低风险",
},
{
"date": "2023.5.6",
"scores": "1",
"res":{scores: 99, arr: []} ,
"imgUrl": "./static/icons/history.svg",
"remark": "一二三四五六七",
"riskBgColor": "sandybrown",
@@ -96,7 +85,7 @@ Page({
},
{
"date": "2023.5.6",
"scores": "100",
"res":{scores: 99, arr: []} ,
"imgUrl": "./static/icons/history.svg",
"remark": "一二三四五六七",
"riskBgColor": "tomato",
@@ -104,7 +93,7 @@ Page({
},
{
"date": "2023.15.16",
"scores": "99",
"res":{scores: 99, arr: []} ,
"imgUrl": "./static/icons/history.svg",
"remark": "方师傅康便面",
"riskBgColor": "springgreen",
@@ -112,7 +101,7 @@ Page({
},
{
"date": "2023.5.6",
"scores": "1",
"res":{scores: 1, arr: []} ,
"imgUrl": "./static/icons/history.svg",
"remark": "一二三四五六七",
"riskBgColor": "tomato",
@@ -120,7 +109,7 @@ Page({
},
{
"date": "2023.5.6",
"scores": "100",
"res":{scores: 99, arr: []} ,
"imgUrl": "./static/icons/history.svg",
"remark": "一二三四五六七",
"riskBgColor": "tomato",
@@ -140,6 +129,70 @@ Page({
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: "高风险"
}
],
// 知识库搜索用
hidden_lib:{},
// 查询结果搜索用
hidden_result:{},
data_lib_map:{},
//查询展示用
data_resultPage: {
scores: 65,
circleClip: "",
circleColor: "",
arr: [{
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,
@@ -176,21 +229,59 @@ Page({
hidden: false,
riskBgColor: "tomato",
riskStr: "高风险"
}
},{
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: "精忠报国" },
],
data_resultPage: {
scores: 60.5,
circleClip: "",
circleColor: "",
arr: [],
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_rcv: {
scores: 1,
arr: [],
arr: ["山梨酸钾"],
},
@@ -206,7 +297,7 @@ Page({
// 启动时获取session
async onLoad() {
// wx.authorize()
// await this.updateSession()
await this.updateSession()
// setInterval(()=>{
// this.updateSession()
// },60*1000*5)
@@ -357,7 +448,14 @@ Page({
this.startPage_Bottons_in()
this.animate('#page_lib', [
{ opacity: 1, translateY: "-100%" }, { opacity: 0, translateY: "0", ease: 'ease-in-out' },
], 1000)
], 1000, ()=>{
// for(var n of this.data.data_lib){
// n.hidden=false
// }
// this.setData(
// {"data.data_lib":this.data.data_lib}
// )
})
},
popup_style() {
@@ -402,16 +500,6 @@ Page({
//查询结果页面相关
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({
@@ -423,7 +511,7 @@ Page({
], 600)
},
//
exit_result() {
this.hide_curtain()
this.animate('#page_result', [
@@ -431,6 +519,32 @@ Page({
], 600)
},
// 根据传入的包含scores和arr的object更新this.data.data_resultPage并popup_result
show_result(res: { scores: any,arr:Array<any> }) {
console.log(res)
var data_resultPage={
scores: res.scores,
arr: []}
for(var name of res.arr){
// 有时间去写个时间复杂度更低的，不过感觉也够用了
for(var n of this.data.data_lib){
if(n.name.zh.includes(name) || n.name.en.includes(name)){
data_resultPage.arr.push(n)
break
}
}
}
this.setData({
"data_resultPage":data_resultPage
})
this.popup_result()
},
show_result_wxml(e:any){
var res=e.currentTarget.dataset.index;
this.show_result(res)
},
// 根据角度计算剪切路径，错了不怪我。。
calculate_clip_path(deg: number) {
var res = "polygon(50% 50%,0 0"
@@ -468,7 +582,7 @@ Page({
//更新成分数据
updateLib(){
wx.request({
url: 'http://127.0.0.1:5000/getLib', //仅为示例，并非真实的接口地址
url: 'http://'+serverAddr+'/getLib', //仅为示例，并非真实的接口地址
data: {
},
method:"GET",
@@ -500,7 +614,7 @@ Page({
//更新历史记录
updateHistory(){
wx.request({
url: 'http://127.0.0.1:5000/getHistory', //仅为示例，并非真实的接口地址
url: 'http://'+serverAddr+'/getHistory', //仅为示例，并非真实的接口地址
data: {
userCode:this.data.sessionKey
},
@@ -526,7 +640,7 @@ Page({
return new Promise((resolve, reject)=>{
this.getCode().then(code => {
wx.request({
url: 'http://127.0.0.1:5000/updateSession', //仅为示例，并非真实的接口地址
url: 'http://'+serverAddr+'/updateSession', //仅为示例，并非真实的接口地址
data: {
userCode:code
},
@@ -545,7 +659,7 @@ Page({
},
fail:res=>{
console.log(res)
setTimeout(this.updateSession,1000)
// setTimeout(this.updateSession,1000)
reject()
}
})
@@ -571,7 +685,7 @@ Page({
console.log('data:image/png;base64,' + res.data)
const imgBase64 = res.data
wx.request({
url: 'http://127.0.0.1:5000/rcvImg', //仅为示例，并非真实的接口地址
url: 'http://'+serverAddr+'/rcvImg', //仅为示例，并非真实的接口地址
data: {
imgBase64:imgBase64
},
@@ -611,7 +725,7 @@ Page({
const imgBase64 = res.data
// 发送图片
wx.request({
url: 'http://127.0.0.1:5000/rcvImg', //仅为示例，并非真实的接口地址
url: 'http://'+serverAddr+'/rcvImg', //仅为示例，并非真实的接口地址
data: {
imgBase64:imgBase64
},
@@ -661,13 +775,46 @@ Page({
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;
// n.hidden = false;
this.data.hidden_lib[n.name.zh] = false
// console.log(n.name.zh)
} else {
n.hidden = true;
// n.hidden = true;
this.data.hidden_lib[n.name.zh] = true
}
}
this.setData({ data_lib: this.data.data_lib })
this.setData({ hidden_lib: this.data.hidden_lib })
// console.log(this.data.data_lib)
},
readInput_result(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;
this.data.hidden_result[n.name.zh] = false
// console.log(n.name.zh)
} else {
// n.hidden = true;
this.data.hidden_result[n.name.zh] = true
}
}
this.setData({ hidden_result: this.data.hidden_result })
// console.log(this.data.data_lib)
},
@@ -761,7 +908,7 @@ Page({
const tempFilePaths = res.tempFilePaths
console.log(tempFilePaths)
wx.uploadFile({
url: 'http://127.0.0.1:5000/rcvImg', //仅为示例，非真实的接口地址
url: 'http://'+serverAddr+'/rcvImg', //仅为示例，非真实的接口地址
filePath: tempFilePaths[0],
name: 'Img',
formData: {
@@ -775,7 +922,7 @@ Page({
}
})
// wx.request({
// url: 'http://127.0.0.1:5000/rcvImg', //仅为示例，并非真实的接口地址
// url: 'http://'+serverAddr+'/rcvImg', //仅为示例，并非真实的接口地址
// data: {
// a:123212
// },
miniprogram/pages/index/index.wxml
+52 -9
View File
@@ -65,7 +65,7 @@
<!-- <view class="search_button" bind:tap="readInput_lib">搜索</view> -->
</view>
<view wx:for="{{ data_lib }}" wx:for-item="n">
<view class="node" hidden="{{ n.hidden }}" style="background-color: {{ n.riskBgColor }};">
<view class="node" hidden="{{ hidden_lib[n.name.zh] }}" style="background-color: {{ n.riskBgColor }};">
<view class="node_content">
<view class="node_name">{{ n.name.zh }}</view>
<view class="node_name node_name_en">{{ n.name.en }}</view>
@@ -116,7 +116,7 @@
<view class="picture" wx:for="{{arr}}" wx:for-item="res" >
<!-- {{content}} -->
<!-- https://www.cnblogs.com/china-fanny/p/11213746.html#:~:text=%E5%A6%82%E4%BD%95%E6%98%BE%E7%A4%BA%20%EF%BC%9F%20%E4%BD%BF%E7%94%A8image%E6%A0%87%E7%AD%BE%EF%BC%8Csrc%E5%B1%9E%E6%80%A7%E6%B7%BB%E5%8A%A0,data%3Aimage%2Fpng%3Bbase64%2C%20%EF%BC%88%E6%B3%A8%E6%84%8F%EF%BC%9A%E8%8B%A5imgData%E8%BF%94%E5%9B%9E%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%90%AB%E6%9C%89data%3Aimage%2Fpng%3Bbase64%2C%E6%97%B6%EF%BC%8Csrc%E7%9B%B4%E6%8E%A5%E5%86%99src%3D%22%20%7B%20%7BimgData%7D%7D%22%E5%8D%B3%E5%8F%AF%EF%BC%89 -->
<image src="{{ res.imgUrl }}" mode="'aspectFit'" style="height: 150rpx;width: 150rpx;" />
<image src="{{ res.imgUrl }}" mode="'aspectFit'" style="height: 150rpx;width: 150rpx;"bind:tap="show_result_wxml" data-index="{{ res.res }}" />
</view>
</view>
</view>
@@ -133,11 +133,11 @@
</view>
<view class="content">
<view wx:for="{{ data_collect }}" wx:for-item="n">
<view class="node" style="background-color: {{ n.riskBgColor }};">
<view class="node" style="background-color: {{ n.riskBgColor }};" bind:tap="show_result_wxml" data-index="{{ n.res }}">
<view class="node_content">
<view class="node_date">{{ n.date }}</view>
<image class="node_img" src="{{ n.imgUrl }}" mode="'aspectFit'"/>
<view class="node_scores">评分: {{ n.scores }}</view>
<view class="node_scores">评分: {{ n.res.scores }}</view>
<view class="node_risk" style="background-color: {{ n.riskBgColor }};">{{ n.riskStr }}</view>
<view class="node_remark">{{ n.remark }}</view>
</view>
@@ -170,22 +170,65 @@
</view>
</view>
<view class="content">
<view class="result_isSafe">
<!-- 丑出天际 -->
<view class="result_isSafe" style="background-color: {{ data_resultPage.circleColor }}">
<view hidden="{{ !(data_resultPage.scores < 33) }}">差</view>
<view hidden="{{ !(data_resultPage.scores >= 33 && data_resultPage.scores < 66) }}">良</view>
<view hidden="{{ !(data_resultPage.scores >= 66) }}" style="color:rgb(241, 255, 250)">优</view>
</view>
<!-- 我就知道GPT写不出来 -->
<view class="result_circle">
<view class="circle" style="clip-path:{{ data_resultPage.circleClip }}; border:13px solid {{ data_resultPage.circleColor }}"></view>
<view class="scores">{{data_resultPage.scores}}</view>
</view>
<view class="result_content">
<view class="search lib_search">
<view class="search_bar lib_search_input">
<view class="search_icon">
<image src="./static/icons/search.svg" mode="aspectFit" />
</view>
<input class="search_input" id="input_libSearch" bindinput="readInput_result" placeholder=" 输入中/英文名称搜索"/>
</view>
<!-- <view class="search_button" bind:tap="readInput_lib">搜索</view> -->
</view>
<view wx:for="{{ data_resultPage.arr }}" wx:for-item="n">
<view class="node" hidden="{{ hidden_result[n.name.zh] }}" style="background-color: {{ n.riskBgColor }};">
<view class="node_content">
<view class="node_name">{{ n.name.zh }}</view>
<view class="node_name node_name_en">{{ n.name.en }}</view>
<view class="node_adi">
<view class="adi_title">ADI</view>
<view class="adi_content" wx:if="{{ n.ADI!='' }}">{{ n.ADI }}</view>
<view class="adi_content" wx:if="{{ n.ADI=='' }}">{{ "暂无数据" }}</view>
</view>
<!-- <image class="node_img" src="{{ n.imgUrl }}" mode="'aspectFit'"/> -->
<view class="node_safe" wx:if="{{ n.scores > 66 }}"><view>安全</view></view>
<view class="node_danger" wx:if="{{ n.scores < 33 }}"><view>危险</view></view>
<view class="node_scores">
<view class="scores_title" style="background-color: {{ n.riskBgColor }};">评分</view>
<view class="scores_num">{{ n.scores }}</view>
</view>
<view class="node_risk" style="background-color: {{ n.riskBgColor }};">{{ n.riskStr }}</view>
<view class="node_extra">
<view class="node_extra_empty" wx:if="{{ n.extra.length==0 }}">
暂无数据
</view>
<view wx:for="{{n.extra}}" wx:for-item="item">
<view class="node_ex_content" style="background-color: {{ item.type=='unsafe'?'tomato':'springgreen' }};">{{item.name}}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<!-- 成分详细信息 -->
<view id="composition_info"></view>
<view class="testButtom1" bind:tap="popup_result">显示查询结果</view>
<view class="testButtom2" bind:tap="updateHistory">更新历史记录</view>
<view class="testButtom" bind:tap="testfunction">测试获取</view>
<!-- <view class="testButtom1" bind:tap="popup_result">强制显示查询结果</view>
<view class="testButtom2" bind:tap="updateHistory">测试更新历史记录</view>
<view class="testButtom" bind:tap="testfunction">测试获取</view> -->
</view>