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

add searchng in lib

Browse Source
This commit is contained in:
539943419 committed 2023-11-08 19:33:56 +08:00
1 parent 226a5bbc2d
commit f55c749cbf
4 files changed
+261 -26
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

miniprogram/pages/index/index.scss
+155 -14
View File
@@ -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%;
}
miniprogram/pages/index/index.ts
+61 -7
View File
@@ -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)
miniprogram/pages/index/index.wxml
+44 -5
View File
@@ -18,7 +18,7 @@
<view class='buttom_startPage' id="buttom_startPage3" bind:tap="{{function_startPage3}}">
<image src="{{imgUrl_startPage3}}" mode="'aspectFit'" style="height: 100rpx;width: 100rpx;" />
</view>
<view class='buttom_startPage' id="buttom_startPage4">
<view class='buttom_startPage' id="buttom_startPage4" bind:tap="{{function_startPage4}}">
<view class="text_startPage">{{text_startPage4}}</view>
<image src="{{imgUrl_startPage4}}" mode="'aspectFit'" style="height: 100rpx;width: 100rpx;margin-left:30rpx;" />
</view>
@@ -26,8 +26,8 @@
<view class="tip_head" style="margin-left: 15rpx;font-weight: 600;">Daliy Tips:</view>
<view class="tip_content">{{tip_content}}</view>
</view>
<view class="buttom_startPage test" id='test' bind:tap="startPage_Bottons_leave">测试移去</view>
<view class="buttom_startPage test" id='test2' bind:tap="popup_camera">弹出相机</view>
<!-- <view class="buttom_startPage test" id='test' bind:tap="startPage_Bottons_leave">测试移去</view>
<view class="buttom_startPage test" id='test2' bind:tap="popup_camera">弹出相机</view> -->
</view>
<!-- 相机界面，放在下面 -->
@@ -55,15 +55,42 @@
</view>
</view>
<view class="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_lib" placeholder=" 输入名称搜索"/>
</view>
<!-- <view class="search_button" bind:tap="readInput_lib">搜索</view> -->
</view>
<view wx:for="{{ data_lib_test }}" wx:for-item="n">
<view class="node" style="background-color: {{ n.riskBgColor }};">
<view class="node" hidden="{{ n.hidden }}" 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">评分: {{ n.scores }}</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>
@@ -118,4 +145,16 @@
</view>
</view>
<!-- 个性化界面 -->
<view id="page_style" class="miao_page">
<view class="title">
<view>个性化</view>
<view class="page_back" bind:tap="exit_style">
<image src="./static/icons/back.svg" mode="aspectFit" />
</view>
</view>
<view class="content">
</view>
</view>
</view>
miniprogram/pages/index/static/icons/search.svg
+1
View File
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1699439860318" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2284" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M789.804097 737.772047 742.865042 784.699846 898.765741 940.600545 945.704796 893.672746Z" p-id="2285"></path><path d="M456.92259 82.893942c-209.311143 0-379.582131 170.282245-379.582131 379.582131s170.270988 379.570875 379.582131 379.570875c209.287607 0 379.558595-170.270988 379.558595-379.570875S666.210197 82.893942 456.92259 82.893942zM770.128989 462.477097c0 172.721807-140.508127 313.229934-313.206398 313.229934-172.720783 0-313.229934-140.508127-313.229934-313.229934s140.508127-313.229934 313.229934-313.229934C629.620861 149.247162 770.128989 289.75529 770.128989 462.477097z" p-id="2286"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 946 B