cxkwin

miniprogram/pages/index/index.scss

@@ -7,9 +7,8 @@
     width:100%;
     justify-content: center;
     background-color: rgba($color: #fff5d2, $alpha: 1.0);
-    // font-family: "Ali Puhui";
-    // font-family:Arial, Helvetica, sans-serif
 }
+
 #startPage{
     display: flex;
     position: absolute;
@@ -17,7 +16,6 @@
     width:100%;
     justify-content: center;
     background-color: rgba($color: #fff5d2, $alpha: 1.0);
-
 }
 
 .text_startPage{
@@ -175,19 +173,106 @@
 .title{
     width: 100%;
     height: 100rpx;
-    background-color: aqua;
+    // background-color: aqua;
     position:absolute;
-    top:0rpx;
+    top:55rpx;
     display: flex;
     justify-content: center;
     align-items: center;
-    font-size: xx-large;
+    font-size: x-large;
 }
+
+// 知识库界面
 #page_lib{
     background-color: rgb(28, 41, 212);
     display: flex;
     align-items: center;
     justify-content: center;
-    // translate:0 100%;
+    translate:0 100%;
-    
+}
+
+// 历史记录
+#page_history{
+    background-color: rgba($color: #fff5d2, $alpha: 1.0);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .date1{
+        background-color: rgba($color: #fff5d2, $alpha: 1);
+        height: 50rpx;
+        width: 50%;
+        position: absolute;
+        top: 160rpx;
+        left: 10%;
+    }
+    .picture1{
+        background-color: rgba($color: #ffffff, $alpha: 1);
+        height: 170rpx;
+        width: 25%;
+        position: absolute;
+        top: 230rpx;
+        left: 10%;
+    }
+    .picture2{
+        background-color: rgba($color: #ffffff, $alpha: 1);
+        height: 170rpx;
+        width: 25%;
+        position: absolute;
+        top: 230rpx;
+        left: 38%;
+    }
+    #page_history_back{
+        height: 90rpx;
+        width: 90rpx;
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        // background-color: aquamarine;
+        top: 65rpx;
+        left:70rpx;
+        // font-size: 150rpx;
+        // font-weight: 900;
+        // font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    }
+    translate:0 100%;
+}
+
+// 收藏界面
+#page_collect{
+    background-color: rgba($color: #fff5d2, $alpha: 1.0);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .collect1{
+        background-color: rgba($color: #ffffff, $alpha: 1);
+        height: 170rpx;
+        width: 25%;
+        position: absolute;
+        top: 200rpx;
+        left: 10%;
+    }
+    .collect2{
+        background-color: rgba($color: #ffffff, $alpha: 1);
+        height: 170rpx;
+        width: 25%;
+        position: absolute;
+        top: 200rpx;
+        left: 38%;
+    }
+    #page_collect_back{
+        height: 90rpx;
+        width: 90rpx;
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        // background-color: aquamarine;
+        top: 65rpx;
+        left:70rpx;
+        // font-size: 150rpx;
+        // font-weight: 900;
+        // font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    }
+    translate:0 100%;
 }

miniprogram/pages/index/index.ts

@@ -16,6 +16,7 @@ Page({
         tip_content: "不吃饭会饿死",
         tip_hidden: false,
         active_Page: "startPage",
+        currentDate: '',
         // userInfo: {},
         // hasUserInfo: false,
         // canIUse: wx.canIUse('button.open-type.getUserInfo'),
@@ -28,6 +29,7 @@ Page({
             this.setData({
                 canIUseGetUserProfile: true
             })
+            this.getDate();
         }
     },
 
@@ -121,6 +123,38 @@ Page({
         ], 1000)
     },
 
+    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)
+    },
+
     takePhoto() {
         // ctx = wx.createCameraContext()
         console.log('takePhoto..')
@@ -162,5 +196,16 @@ Page({
             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
+        });
     }
-})
+})

miniprogram/pages/index/index.wxml

@@ -3,20 +3,19 @@
 
     <!-- 开始界面 -->
     <view class="miao_page" id = 'startPage'>
+        <!-- 立即搜索 -->
         <view class="buttom_startPage" id="gotoSearch" bind:tap="popup_camera">
-            <!-- 最大的固定是搜索 -->
             <image src="./static/icons/camera.svg" mode="'aspectFit'" style="height: 180rpx;width: 180rpx;margin-right:50rpx;" />
             <view class="text_startPage">立即搜索</view>
-            <!-- <view class="text_startPage1">拍照搜索</view> -->
         </view>
         <view class='buttom_startPage' id="buttom_startPage1">
             <image src="{{imgUrl_startPage1}}" mode="'aspectFit'" style="height: 100rpx;width: 100rpx;margin-right:30rpx;" />
             <view class="text_startPage">{{text_startPage1}}</view>
         </view>
-        <view class='buttom_startPage' id="buttom_startPage2">
+        <view class='buttom_startPage' id="buttom_startPage2" bind:tap="popup_history">
             <image src="{{imgUrl_startPage2}}" mode="'aspectFit'" style="height: 100rpx;width: 100rpx;" />
         </view>
-        <view class='buttom_startPage' id="buttom_startPage3">
+        <view class='buttom_startPage' id="buttom_startPage3" bind:tap="popup_collect">
             <image src="{{imgUrl_startPage3}}" mode="'aspectFit'" style="height: 100rpx;width: 100rpx;" />
         </view>
         <view class='buttom_startPage' id="buttom_startPage4">
@@ -52,4 +51,26 @@
         <view class="title">nmsl</view>
         <view class="serach">serach</view>
     </view>
+
+    <!-- 历史记录界面 -->
+    <view id="page_history" class="miao_page">
+        <view class="title">搜索历史</view>
+        <view id="page_history_back" bind:tap="exit_history">
+            <image src="./static/icons/back.svg" mode="aspectFit" />
+        </view>
+        <view class="date1">{{currentDate}}</view>
+        <view class="picture1">picture1</view>
+        <view class="picture2">picture2</view>
+    </view>
+
+    <!-- 我的收藏界面 -->
+    <view id="page_collect" class="miao_page">
+        <view class="title">我的收藏</view>
+        <view id="page_collect_back" bind:tap="exit_collect">
+            <image src="./static/icons/back.svg" mode="aspectFit" />
+        </view>
+        <view class="collect1">收藏1</view>
+        <view class="collect2">收藏2</view>
+    </view>
+
 </view>