fuck

miniprogram/pages/index/index.scss

@@ -269,11 +269,12 @@
         display: flex;
         flex-direction: column;
         padding-top: 20rpx;
+        // padding-bottom: 40rpx;
         .lib_search{
             margin-bottom: 20rpx;
-            .lib_search_input{
+            // .lib_search_input{
-                // background-color: yellow;
+            //     // background-color: yellow;
-            }
+            // }
         }
         .node{
             background-color: rgba($color: #ffffff, $alpha: 1);
@@ -507,7 +508,7 @@
             height: 210rpx;
             width: auto;
             border-radius: 15rpx;
-            background-color: violet;
+            background-color: rgba(167, 180, 176, 0.863);
             margin:15rpx 25rpx;
             // margin-top:30rpx;
             // margin-left: 30rpx;
@@ -528,9 +529,13 @@
                 overflow: scroll;
                 .picture{
                     margin-left: 0;
-                    height: auto;
+                    height: 150rpx;
-                    width: auto;
+                    width: 150rpx;
                     border-radius: 15rpx;
+                    // overflow: hidden;
+                    image{
+                        border-radius: 15rpx;
+                    }
                 }
             }
         }
@@ -695,6 +700,7 @@
     // }
 }
 
+//个性化界面
 #page_style{
     background-color: rgba($color: #fff5d2, $alpha: 1.0);
     display: flex;
@@ -702,3 +708,92 @@
     justify-content: center;
     translate:0 100%;
 }
+
+//遮罩
+#curtain{
+    // background-color: rgba(0, 0, 0, 0.19);
+    background-color: rgba(0, 0, 0, 0);
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 1;
+    // transform: ;
+}
+//查询结果
+#page_result{
+    height: 90%;
+    width: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    translate: 0 100%;
+    background-color: rgba($color: #ffffff, $alpha: 1.0);
+    border-radius: 50rpx;
+    .content{
+        display: flex;
+        flex-direction:row;
+        justify-content: center;
+        overflow: scroll;
+        .result_isSafe{
+            background-color: #bfdfd7;
+            width: 300rpx;
+            height: 300rpx;
+            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;
+        }
+        .result_circle{
+            background-color: #bfdfd7;
+            width: 300rpx;
+            height: 300rpx;
+            margin:30rpx;
+            border-radius: 25rpx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 80rpx;
+            box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
+            .circle{
+                position:absolute;
+                width: 110px;
+                height: 110px;
+                border-radius: 50%;
+                // background-color: #fff5d2;
+                clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%);
+                transform: rotate(45deg);
+            }
+        }
+    }
+}
+
+
+
+//测试按钮
+.testButtom{
+    height: auto;
+    width: auto;
+    position: absolute;
+    bottom: 100rpx;
+    left:50rpx;
+    background-color: royalblue;
+}
+.testButtom1{
+    height: auto;
+    width: auto;
+    position: absolute;
+    bottom: 100rpx;
+    left:250rpx;
+    background-color: royalblue;
+}
+
+.testButtom2{
+    height: auto;
+    width: auto;
+    position: absolute;
+    bottom: 100rpx;
+    left:450rpx;
+    background-color: royalblue;
+}

miniprogram/pages/index/index.ts

@@ -3,6 +3,7 @@
 
 const app = getApp<IAppOption>()
 
+
 // class stack{
 //     data=[]
 //     push=(d: any) =>{
@@ -11,123 +12,185 @@ const app = getApp<IAppOption>()
 // }
 
 Page({
-    ctx:wx.createCameraContext(),
     data: {
         // motto: 'Hello World',
         text_startPage1: "知识库",
-        imgUrl_startPage1:"./static/icons/lib.svg",
+        imgUrl_startPage1: "./static/icons/lib.svg",
-        function_startPage1:"popup_lib",
+        function_startPage1: "popup_lib",
-        imgUrl_startPage2:"./static/icons/history.svg",
+        imgUrl_startPage2: "./static/icons/history.svg",
-        function_startPage2:"popup_history",
+        function_startPage2: "popup_history",
-        imgUrl_startPage3:"./static/icons/heart.svg",
+        imgUrl_startPage3: "./static/icons/heart.svg",
-        function_startPage3:"popup_collect",
+        function_startPage3: "popup_collect",
         text_startPage4: "个性化",
-        imgUrl_startPage4:"./static/icons/self.svg",
+        imgUrl_startPage4: "./static/icons/self.svg",
-        function_startPage4:"popup_style",
+        function_startPage4: "popup_style",
         tip_content: "不吃饭会饿死",
         tip_hidden: false,
         active_Page: "startPage",
         currentDate: '',
 
-        data_history_test:{
+        curtain_hidden: true,
-            "2023.2.30":["test1","test2","test2","test2","test2","test2","test2","test2","test2","test2"],
+
-            "2023.12.31":["test3","test4"],
+        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",
-            "2023.2.32":["test5","test6"],
+
-            "2023.2.33":["test7","test8"],
+        //有点误导性
-            "2023.2.34":["test9","test0"],
+        // 瞬间开启摄像头影响流畅性了
-            "2023.2.35":["test9","test0"],
+        // camera_hidden:true,
-            "2023.2.36":["test9","test0"],
+
-            "2023.12.37":["test9","test0"],
+        // 历史记录data
-        },
+        data_history: {
-        data_collect_test:[
+            "2023.2.30": [ 
-            {   "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":"高风险"
-            },
-        ],
-        data_lib_test:[
                 { 
-                name:{
+                    imgUrl:"https://tse3-mm.cn.bing.net/th/id/OIP-C.qM9D7c-Ow-C-xLARJdSwQwHaIO?pid=ImgDet&rs=1" , res:{scores: 1, arr: []} 
-                    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:{
+                    imgUrl:"https://tse3-mm.cn.bing.net/th/id/OIP-C.qM9D7c-Ow-C-xLARJdSwQwHaIO?pid=ImgDet&rs=1" , res:{scores: 75, arr: []} 
-                    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:{
+                    imgUrl:"https://tse3-mm.cn.bing.net/th/id/OIP-C.qM9D7c-Ow-C-xLARJdSwQwHaIO?pid=ImgDet&rs=1" , res:{scores: 1, arr: []} 
-                    zh:"丁基羟基茴香醚",
+                },{ 
-                    en:"Butyl hydroxyanisole（BHA）"
+                    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: []} 
                 },
-                scores:21,
+            ], "2023.2.10": [ 
-                info:"丁基羟基茴香醚（BHA），又名叔丁基-4-羟基茴香醚，化学式为C11H16O2，有两种异构体：3-BHA和2-BHA，一般指二者的混合物。2017年10月27日，世界卫生组织国际癌症研究机构公布的致癌物清单初步整理参考，叔丁基对羟基茴香醚（BHA）在2B类致癌物清单中。",
+                { 
-                extra:[
+                    imgUrl:"https://tse3-mm.cn.bing.net/th/id/OIP-C.qM9D7c-Ow-C-xLARJdSwQwHaIO?pid=ImgDet&rs=1" , res:{scores: 1, arr: []} 
-                    {type:"unsafe",name:"2B类致癌物"}
+                }
-                ],
+            ], "2023.2.11": [ 
-                ADI:"0~0.5mg/kg bw",
+                { 
-                hidden:false,
+                    imgUrl:"https://tse3-mm.cn.bing.net/th/id/OIP-C.qM9D7c-Ow-C-xLARJdSwQwHaIO?pid=ImgDet&rs=1" , res:{scores: 1, arr: []} 
-                riskBgColor:"tomato",
+                }
-                riskStr:"高风险"
+            ], "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: [],
+        },
+
+
+        user_session: "",
         userInfo: {},
         hasUserInfo: false,
         canIUse: wx.canIUse('button.open-type.getUserInfo'),
@@ -136,14 +199,14 @@ Page({
     },
     onLoad() {
         // @ts-ignore
-        if (wx.getUserProfile) {
+        // console.log(this.data.userInfo);
-            this.setData({
+        // wx.login(success = code => {
-                canIUseGetUserProfile: true
+        //     console.log('SUCCESS')
-            })
+        //     console.log(code)
-            this.getDate();
+        // })
-        }
     },
 
+    //开始界面的按钮相关动画
     startPage_Bottons_leave() {
         //   var fd = wx.createSelectorQuery()
         var time = 700;
@@ -188,7 +251,7 @@ Page({
             return Math.random() * 200;
         }
         this.animate('#gotoSearch', [
-            { opacity: 0, translateY: -300, ease: 'ease-in' },{ opacity: 1, translateY: 0, ease: 'ease-out' },
+            { opacity: 0, translateY: -300, ease: 'ease-in' }, { opacity: 1, translateY: 0, ease: 'ease-out' },
         ], time)
         // this.setData({ tip_hidden: false })
         this.animate('#tips_startPage', [
@@ -196,161 +259,395 @@ Page({
         ], time)
         setTimeout(() => {
             this.animate('#buttom_startPage1', [
-                { opacity: 0, translateX: -300, ease: 'ease-in' },{ opacity: 1, translateX: 0, ease: 'ease-out' }, 
+                { 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' },
+                { 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' }, 
+                { 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' }, 
+                { opacity: 0, translateX: 300, ease: 'ease-in' }, { opacity: 1, translateX: 0, ease: 'ease-out' },
             ], time)
         }, time1())
     },
 
-    popup_camera(){
+    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,()=>{
+        ], 1000, () => {
             this.selectComponent('#page_camera')
         })
     },
 
-    exit_camera(){
+    exit_camera() {
         this.startPage_Bottons_in()
         this.animate('#page_camera', [
             { opacity: 1, translateY: "-100%" }, { opacity: 0, translateY: "0", ease: 'ease-in-out' },
-        ], 1000)
+        ], 1000, () => {
+            // this.setData({
+            //     camera_hidden:false,
+            // })
+        })
     },
 
-    popup_history(){
+    popup_history() {
         this.startPage_Bottons_leave()
         this.animate('#page_history', [
             { opacity: 0, translateY: 0 }, { opacity: 1, translateY: "-100%", ease: 'ease-in-out', },
-        ], 1000,()=>{
+        ], 1000, () => {
             this.selectComponent('#page_history')
         })
     },
 
-    exit_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(){
+    popup_collect() {
         this.startPage_Bottons_leave()
         this.animate('#page_collect', [
             { opacity: 0, translateY: 0 }, { opacity: 1, translateY: "-100%", ease: 'ease-in-out', },
-        ], 1000,()=>{
+        ], 1000, () => {
             this.selectComponent('#page_collect')
         })
     },
 
-    exit_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(){
+    popup_lib() {
         this.startPage_Bottons_leave()
         this.animate('#page_lib', [
             { opacity: 0, translateY: 0 }, { opacity: 1, translateY: "-100%", ease: 'ease-in-out', },
-        ], 1000,()=>{
+        ], 1000, () => {
             this.selectComponent('#page_collect')
         })
     },
 
-    exit_lib(){
+    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(){
+    popup_style() {
         this.startPage_Bottons_leave()
         this.animate('#page_style', [
             { opacity: 0, translateY: 0 }, { opacity: 1, translateY: "-100%", ease: 'ease-in-out', },
-        ], 1000,()=>{
+        ], 1000, () => {
             this.selectComponent('#page_style')
         })
     },
 
-    exit_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()
+    show_curtain() {
-        console.log('takePhoto..')
-        this.ctx.takePhoto({
-            quality: 'high',
-            success: res => {
         this.setData({
-                    src: res.tempImagePath
+            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(){
+        this.getCode().then(code => {
+            wx.request({
+                url: 'http://127.0.0.1:5000/getHistory', //仅为示例，并非真实的接口地址
+                data: {
+                    userCode:code
+                },
+                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)
+                }
+            })
+        })
+    },
+
+    //拍照
+    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)
+                            }
+                        })
+                    }
                 })
             }
         })
     },
 
-    scores2risk(scores: Number){
+    //选择照片
-        if(scores < 33){
+    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){
+        } else if (scores < 66) {
             return "middle";
-        }else{
+        } else {
             return "low";
         }
     },
 
-    readInput_lib(e:any){
+    readInput_lib(e: any) {
-        var key=e.detail.value
+        //其他搜索内容
-        for(var n of this.data.data_lib_test){
+        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)){
+            if (n.name.zh.includes(key) || n.name.en.toLowerCase().includes(key.toLowerCase()) || exf(n, key)) {
-                n.hidden=false;
+                n.hidden = false;
-                console.log(n.name.zh)
+                // console.log(n.name.zh)
-            }else{
+            } else {
-                n.hidden=true;
+                n.hidden = true;
             }
         }
-        this.setData({data_lib_test:this.data.data_lib_test})
+        this.setData({ data_lib: this.data.data_lib })
-        console.log(this.data.data_lib_test)
+        // console.log(this.data.data_lib)
     },
 
     //将risk转为存储color和content的map
-    scores2map(scores: Number){
+    scores2map(scores: Number) {
-        var risk=this.scores2risk(scores)
+        var risk = this.scores2risk(scores)
-        switch(risk){
+        switch (risk) {
-            case "low":{
+            case "low": {
-                return {"color":"springgreen","content":"低风险"};
+                return { "color": "springgreen", "content": "低风险" };
             }
-            case "middle":{
+            case "middle": {
-                return {"color":"yellow","content":"中风险"};
+                return { "color": "sandybrown", "content": "中风险" };
             }
-            case "high":{
+            case "high": {
-                return {"color":"tomato","content":"高风险"};
+                return { "color": "tomato", "content": "高风险" };
             }
         }
-        return {"color":"tomato","content":"高风险"};
+        return { "color": "tomato", "content": "高风险" };
     },
 
 
@@ -364,9 +661,9 @@ Page({
     getUserProfile() {
         // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
         wx.getUserProfile({
-            desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
+            desc: '存储历史记录', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
             success: (res) => {
-                console.log(res)
+                console.log(res, 666)
                 this.setData({
                     userInfo: res.userInfo,
                     hasUserInfo: true
@@ -392,5 +689,70 @@ Page({
         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)
+                //     }
+                // })
+            }
+        })
     }
 })

miniprogram/pages/index/index.wxml

@@ -31,7 +31,7 @@
     </view>
 
     <!-- 相机界面，放在下面 -->
-    <view id='page_camera' class="miao_page">
+    <view id='page_camera' class="miao_page" wx:if="{{!camera_hidden}}">
         <camera id='camera' device-position="back" flash="off"></camera>
         <view id="page_camera_background"></view>
         <view id="buttom_takePhoto" bind:tap="takePhoto">
@@ -41,7 +41,7 @@
         <view id="page_camera_back" bind:tap="exit_camera">
             <image src="./static/icons/back.svg" mode="aspectFit" />
         </view>
-        <view id="page_camera_local">
+        <view id="page_camera_local" bind:tap="choosePhoto">
             <image src="./static/icons/local_Img.svg" mode="aspectFit" />
         </view>
     </view>
@@ -60,11 +60,11 @@
                     <view class="search_icon">
                         <image src="./static/icons/search.svg" mode="aspectFit" />
                     </view>
-                    <input class="search_input" id="input_libSearch" bindinput="readInput_lib" placeholder=" 输入名称搜索"/>
+                    <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 wx:for="{{ data_lib }}" wx:for-item="n">
                 <view class="node" hidden="{{ n.hidden }}" style="background-color: {{ n.riskBgColor }};">
                     <view class="node_content">
                         <view class="node_name">{{ n.name.zh }}</view>
@@ -110,12 +110,13 @@
         <view class="picture2">picture2</view> -->
 
         <view class="content">
-            <view class="history_part" wx:for="{{data_history_test}}" wx:for-index="date" wx:for-item="arr">
+            <view class="history_part" wx:for="{{data_history}}" wx:for-index="date" wx:for-item="arr">
                 <view class="history_time">{{date}}</view>
                 <view class="history_content">
-                    <view class="picture" wx:for="{{arr}}" wx:for-item="content">
+                    <view class="picture" wx:for="{{arr}}" wx:for-item="res">
                         <!-- {{content}} -->
-                        <image src="{{imgUrl_startPage2}}" mode="'aspectFit'" style="height: 150rpx;width: 150rpx;" />
+                        <!-- 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;" />
                     </view>
                 </view>
             </view>
@@ -131,7 +132,7 @@
             </view>
         </view>
         <view class="content">
-            <view wx:for="{{ data_collect_test }}" wx:for-item="n">
+            <view wx:for="{{ data_collect }}" wx:for-item="n">
                 <view class="node" style="background-color: {{ n.riskBgColor }};">
                     <view class="node_content">
                         <view class="node_date">{{ n.date }}</view>
@@ -157,4 +158,34 @@
         </view>
     </view>
 
+    <!-- 透明遮罩 -->
+    <view id="curtain" hidden="{{curtain_hidden}}"></view>
+
+    <!-- 查询结果页面 -->
+    <view id="page_result">
+        <view class="title">
+            <view>{{"查询结果"}}</view>
+            <view class="page_back" bind:tap="exit_result">
+                <image src="./static/icons/back.svg" mode="aspectFit" />
+            </view>
+        </view>
+        <view class="content">
+            <view class="result_isSafe">
+            </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>
+    </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>

project.config.json

@@ -17,7 +17,8 @@
       "disablePlugins": [],
       "outputPath": ""
     },
-    "condition": false
+    "condition": false,
+    "minified": true
   },
   "simulatorType": "wechat",
   "simulatorPluginLibVersion": {},

project.private.config.json

@@ -2,6 +2,7 @@
   "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
   "projectname": "wxProject-w4w",
   "setting": {
-    "compileHotReLoad": true
+    "compileHotReLoad": true,
+    "urlCheck": false
   }
 }