From f55c749cbf0d37d5870f3361a91fe10f946f1493 Mon Sep 17 00:00:00 2001
From: Miao_Spring <539943419@qq.com>
Date: Wed, 8 Nov 2023 19:33:56 +0800
Subject: [PATCH] add searchng in lib
---
miniprogram/pages/index/index.scss | 169 ++++++++++++++++--
miniprogram/pages/index/index.ts | 68 ++++++-
miniprogram/pages/index/index.wxml | 49 ++++-
.../pages/index/static/icons/search.svg | 1 +
4 files changed, 261 insertions(+), 26 deletions(-)
create mode 100644 miniprogram/pages/index/static/icons/search.svg
diff --git a/miniprogram/pages/index/index.scss b/miniprogram/pages/index/index.scss
index 2d26041..d55e1c4 100644
--- a/miniprogram/pages/index/index.scss
+++ b/miniprogram/pages/index/index.scss
@@ -203,6 +203,60 @@
top: 10%;
overflow: scroll;
}
+.search{
+ position: relative;
+ height: 60rpx;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ // background-color: yellowgreen;
+ .search_bar{
+ // border: 2rpx solid rgb(104, 104, 104);
+ overflow: hidden;
+ height: 60rpx;
+ width: 450rpx;
+ position: relative;
+ // left: 40rpx;
+ border-radius: 15rpx;
+ .search_icon{
+ height: 60rpx;
+ width: 60rpx;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color:rgb(189, 189, 189);
+ image{
+ height: 45rpx;
+ width: 45rpx;
+ }
+ }
+ .search_input{
+ position: absolute;
+ width: 390rpx;
+ height: 60rpx;
+ background-color: rgb(241, 241, 241);
+ top: 0;
+ left: 60rpx;
+ // padding-left: 15rpx;
+ }
+ }
+ .search_button{
+ // border: 2rpx solid rgb(104, 104, 104);
+ height: 56rpx;
+ width: 120rpx;
+ background-color: rgb(146, 146, 146);
+ position: absolute;
+ font-size: larger;
+ color: whitesmoke;
+ top: 0;
+ left: 530rpx;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ border-radius: 15rpx;
+
+ }
+}
// 知识库界面
#page_lib{
@@ -214,12 +268,19 @@
.content{
display: flex;
flex-direction: column;
+ padding-top: 20rpx;
+ .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:30rpx 20rpx 30rpx 10rpx;
+ margin:15rpx 20rpx 15rpx 10rpx;
.node_content{
position: relative;
display: block;
@@ -256,11 +317,46 @@
display: flex;
align-items: center;
border-radius: 15rpx;
- position: relative;
+ 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;
@@ -308,11 +404,28 @@
left:399rpx;
top:15rpx;
// padding: 4rpx 0rpx 6rpx 10rpx;
- padding-left: 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;
@@ -328,20 +441,38 @@
border-radius: 15rpx;
overflow: hidden;
}
- .node_remark{
- height: 40%;
- width: 460rpx;
- background-color: tan;
+ ::-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:200rpx;
- bottom:20rpx;
+ left:400rpx;
+ bottom:15rpx;
padding: 5rpx 10rpx 10rpx 10rpx;
border-radius: 15rpx;
display: flex;
+ flex-direction: column;
align-items: center;
- justify-content: center;
- font-size: 60rpx;
- overflow: hidden;
+ 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;
+ }
}
}
}
@@ -363,6 +494,7 @@
.content{
display:flex;
flex-direction: column;
+ padding-top: 10rpx;
::-webkit-scrollbar {
width: 0;
height: 0;
@@ -376,7 +508,7 @@
width: auto;
border-radius: 15rpx;
background-color: violet;
- margin:30rpx;
+ margin:15rpx 25rpx;
// margin-top:30rpx;
// margin-left: 30rpx;
// margin-right: 30rpx;
@@ -449,12 +581,13 @@
.content{
display: flex;
flex-direction: column;
+ padding-top: 10rpx;
.node{
background-color: rgba($color: #ffffff, $alpha: 1);
border-radius: 15rpx;
height: 200rpx;
width: auto;
- margin:30rpx 20rpx 30rpx 10rpx;
+ margin:10rpx 20rpx 10rpx 10rpx;
.node_content{
position: relative;
display: block;
@@ -560,4 +693,12 @@
// // font-weight: 900;
// // font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
// }
+}
+
+#page_style{
+ background-color: rgba($color: #fff5d2, $alpha: 1.0);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ translate:0 100%;
}
\ No newline at end of file
diff --git a/miniprogram/pages/index/index.ts b/miniprogram/pages/index/index.ts
index c065fbd..2280e3e 100644
--- a/miniprogram/pages/index/index.ts
+++ b/miniprogram/pages/index/index.ts
@@ -23,6 +23,7 @@ Page({
function_startPage3:"popup_collect",
text_startPage4: "个性化",
imgUrl_startPage4:"./static/icons/self.svg",
+ function_startPage4:"popup_style",
tip_content: "不吃饭会饿死",
tip_hidden: false,
active_Page: "startPage",
@@ -50,8 +51,8 @@ Page({
"scores":"1",
"imgUrl":"./static/icons/history.svg",
"remark":"一二三四五六七",
- "riskBgColor":"tomato",
- "riskStr":"高风险"
+ "riskBgColor":"sandybrown",
+ "riskStr":"中风险"
},
{ "date":"2023.5.6",
"scores":"100",
@@ -86,13 +87,31 @@ Page({
{
name:{
zh:"山梨酸钾",
- en:"potassium sorbate"
+ en:"Potassium sorbate"
},
scores:73,
info:"山梨酸钾，又名2，4-己二烯酸钾，是山梨酸的钾盐，分子式为C6H7O2K，无色或白色鳞片状结晶或结晶性粉末。 [1] 无臭或微有臭味，长期暴露在空气中易吸潮、被氧化分解而变色。易溶于水（67.6g／100mL 20℃），溶于丙二醇（5．8g／100mL）和乙醇（0．3g／10 mL）。山梨酸钾和山梨酸是常用的有机防腐剂，广泛用于食品、化状品、饲料的防腐。易于被人体吸收代谢，在体内无残留，无毒性。",
- risk:[],
+ 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:"丁基羟基茴香醚",
@@ -100,9 +119,13 @@ Page({
},
scores:21,
info:"丁基羟基茴香醚（BHA），又名叔丁基-4-羟基茴香醚，化学式为C11H16O2，有两种异构体：3-BHA和2-BHA，一般指二者的混合物。2017年10月27日，世界卫生组织国际癌症研究机构公布的致癌物清单初步整理参考，叔丁基对羟基茴香醚（BHA）在2B类致癌物清单中。",
- risk:["2B类致癌物"],
- "riskBgColor":"tomato",
- "riskStr":"高风险"
+ extra:[
+ {type:"unsafe",name:"2B类致癌物"}
+ ],
+ ADI:"0~0.5mg/kg bw",
+ hidden:false,
+ riskBgColor:"tomato",
+ riskStr:"高风险"
}
],
userInfo: {},
@@ -259,6 +282,22 @@ Page({
], 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)
+ },
+
takePhoto() {
// ctx = wx.createCameraContext()
console.log('takePhoto..')
@@ -282,6 +321,21 @@ Page({
}
},
+ readInput_lib(e:any){
+ var key=e.detail.value
+ for(var n of this.data.data_lib_test){
+ // console.log(n)
+ if(n.name.zh.includes(key)){
+ n.hidden=false;
+ console.log(n.name.zh)
+ }else{
+ n.hidden=true;
+ }
+ }
+ this.setData({data_lib_test:this.data.data_lib_test})
+ console.log(this.data.data_lib_test)
+ },
+
//将risk转为存储color和content的map
scores2map(scores: Number){
var risk=this.scores2risk(scores)
diff --git a/miniprogram/pages/index/index.wxml b/miniprogram/pages/index/index.wxml
index fc3bd0f..4f0bcbf 100644
--- a/miniprogram/pages/index/index.wxml
+++ b/miniprogram/pages/index/index.wxml
@@ -18,7 +18,7 @@
-
+
{{text_startPage4}}
@@ -26,8 +26,8 @@
Daliy Tips:
{{tip_content}}
- 测试移去
- 弹出相机
+
@@ -55,15 +55,42 @@
+
+
+
+
+
+
+
+
+
-
+
{{ n.name.zh }}
+ {{ n.name.en }}
+
+
+ ADI
+ {{ n.ADI }}
+ {{ "暂无数据" }}
+
安全
危险
- 评分: {{ n.scores }}
+
+ 评分
+ {{ n.scores }}
+
{{ n.riskStr }}
+
@@ -118,4 +145,16 @@
+
+
+
+ 个性化
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/miniprogram/pages/index/static/icons/search.svg b/miniprogram/pages/index/static/icons/search.svg
new file mode 100644
index 0000000..5b3e727
--- /dev/null
+++ b/miniprogram/pages/index/static/icons/search.svg
@@ -0,0 +1 @@
+
\ No newline at end of file