增加新需求

app.json

@@ -4,7 +4,9 @@
     "pages/details/details",
     "pages/setName/setName",
     "pages/album/album",
-    "pages/clip/clip"
+    "pages/clip/clip",
+    "pages/childMatch/childMatch",
+    "pages/access/access"
   ],
   "window": {
     "backgroundTextStyle": "light",

component/look/look.wxml

@@ -16,7 +16,7 @@
                             <image src="{{item.iconImg}}"></image>
                         </view>
                     </view>
-                    <view class="bottom">已经拖到底啦</view>
+                    <view class="bottom" style="margin-bottom: 28%;">已经拖到底啦</view>
                 </scroll-view>
             </swiper-item>    
         </block>        

component/look/look.wxss

@@ -26,7 +26,7 @@
 }
 
 swiper {
-    height: 74%;
+    height: 92%;
 }
 
 .look-video {

component/mys/mys.js

@@ -88,6 +88,12 @@ export function myInit(that) {
       url: '/pages/album/album' 
     })
   }
+  //跳转到比赛页
+  that.childMatch = () => {
+    wx.navigateTo({
+      url: '/pages/childMatch/childMatch' 
+    })
+  }
   //跳转到详情页
   that.detail = ({ currentTarget }) => {
     const id = currentTarget.dataset.id;

component/mys/mys.wxml

@@ -17,6 +17,9 @@
                 </view>
                 <view class="shaiwa">如何使用电视上的晒娃功能</view>
                 <view class="mengwa" bindtap="album">萌娃相册</view>
+                <view class="child" bindtap="childMatch">
+                    孩子王晒娃大赛
+                </view>
             </view>
         </swiper-item>
         <swiper-item>

component/mys/mys.wxss

@@ -41,6 +41,7 @@ swiper-item {
     background: #fff;
     padding: 0 25rpx;
     box-sizing: border-box;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, .2);
 }
 
 .information-item image {
@@ -95,6 +96,22 @@ swiper-item {
     font-weight: 600;
 }
 
+.child {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 116rpx;
+    margin-top: 27rpx;
+    border-radius: 20rpx;
+    background: #fff;
+    padding: 0 25rpx;
+    box-sizing: border-box;
+    color: #000;
+    font-size: 40rpx;
+    font-weight: 600;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, .2);
+}
+
 .my-collection {
     padding: 0 16rpx;
     box-sizing: border-box;

component/search/search.js

@@ -9,15 +9,24 @@ export const searchInit = (that) => {
   })
   //获取输入值,并请求接口
   that.focus = ({detail}) => {
-    httpRequestApi.getCourse({
-      title: detail.value
-    }).success((res)=>{
-      that.data.searchData.searchList = res.data.data.list;
+    if (detail.value) {
+      httpRequestApi.getCourse({
+        title: detail.value
+      }).success((res)=>{
+        console.log('搜索结果', res)
+        that.data.searchData.searchList = res.data.data.list;
+        that.data.searchData.recommendList = [];
+        that.setData({
+          searchData: that.data.searchData
+        })
+      })
+    }else {
+      that.data.searchData.searchList = [];
       that.data.searchData.recommendList = [];
       that.setData({
         searchData: that.data.searchData
       })
-    })
+    }
   }
   //跳转到详情页
   that.details = ({ currentTarget }) => {
@@ -27,7 +36,7 @@ export const searchInit = (that) => {
     })
   }
   httpRequestApi.getCategoryRecommend().success((res)=>{
-    console.log('搜', res)
+    console.log('热门搜', res)
     that.data.searchData.recommendList = res.data.data;
     that.setData({
       searchData: that.data.searchData

component/search/search.wxml

@@ -4,7 +4,8 @@
             <image class="icon" src="../../static/image/search.png"></image>
             <input placeholder="输入关键字" bindinput="focus"/>
         </view>
-        <view class="title" wx:if="{{(searchData.searchList.length > 0) || (searchData.recommendList.length > 0)}}">热门搜索</view>
+        <view class="title" wx:if="{{searchData.recommendList.length > 0}}">热门搜索</view>
+        <view class="title" wx:elif="{{searchData.searchList.length > 0}}">搜索结果</view>
         <view class="no-find"wx:else>
             <text>没有找到相关的内容</text>
             <text>换个关键字再试试吧</text>

component/search/search.wxss

@@ -13,6 +13,7 @@
     display: flex;
     align-items: center;
     padding-left: 10rpx;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, .2);
 }
 
 .search-video image {

pages/access/access.js

@@ -0,0 +1,66 @@
+// pages/access/access.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/access/access.json

@@ -0,0 +1 @@
+{}

pages/access/access.wxml

@@ -0,0 +1,63 @@
+<!--pages/access/access.wxml-->
+<view class="access">
+    <view class="information-item">
+        <image class="head" src="{{myData.avatar ? myData.avatar : '../../static/image/default.png'}}"></image>
+        <view class="access-name">
+            <text class="name">安安</text>
+            <text>00000赞</text>
+        </view>
+        <view class="stick">点赞</view>
+    </view>
+    <scroll-view scroll-y style="height: 80%; overflow: hidden;">
+        <view class="photo">
+            <view class="img">
+                <image style="background: skyblue;" src="" mode='aspectFill'></image> 
+            </view> 
+            <view class="img">
+                <image style="background: skyblue;" src="" mode='aspectFill'></image> 
+            </view> 
+            <view class="img">
+                <image style="background: skyblue;" src="" mode='aspectFill'></image> 
+            </view> 
+            <view class="img">
+                <image style="background: skyblue;" src="" mode='aspectFill'></image> 
+            </view>
+            <view class="img">
+                <image style="background: skyblue;" src="" mode='aspectFill'></image> 
+            </view> 
+            <view class="img">
+                <image style="background: skyblue;" src="" mode='aspectFill'></image> 
+            </view> 
+            <view class="img">
+                <image style="background: skyblue;" src="" mode='aspectFill'></image> 
+            </view> 
+            <view class="img">
+                <image style="background: skyblue;" src="" mode='aspectFill'></image> 
+            </view> 
+            <view class="img">
+                <image style="background: skyblue;" src="" mode='aspectFill'></image> 
+            </view> 
+            <view class="img">
+                <image style="background: skyblue;" src="" mode='aspectFill'></image> 
+            </view> 
+            <view class="img">
+                <image style="background: skyblue;" src="" mode='aspectFill'></image> 
+            </view> 
+            <view class="img">
+                <image style="background: skyblue;" src="" mode='aspectFill'></image> 
+            </view>
+            <view class="img">
+                <image style="background: skyblue;" src="" mode='aspectFill'></image> 
+            </view> 
+            <view class="img">
+                <image style="background: skyblue;" src="" mode='aspectFill'></image> 
+            </view> 
+            <view class="img">
+                <image style="background: skyblue;" src="" mode='aspectFill'></image> 
+            </view> 
+            <view class="img">
+                <image style="background: skyblue;" src="" mode='aspectFill'></image> 
+            </view>                                                              
+        </view>            
+    </scroll-view>
+</view>

pages/access/access.wxss

@@ -0,0 +1,83 @@
+/* pages/access/access.wxss */
+.access {
+    width: 100%;
+    height: 100%;
+    padding: 0 30rpx;
+    box-sizing: border-box;
+    background: #eaeaea;
+}
+
+.photo {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.img {
+    position: relative;
+    width: 332rpx;
+    height: 241rpx;
+    border-radius: 20rpx; 
+    margin-bottom: 30rpx;
+}
+
+.img image{
+    width: 100%;
+    height: 100%;
+    border-radius: 20rpx;
+}
+
+.img .delect {
+    position: absolute;
+    top: 15rpx;
+    right: 15rpx;
+    width: 53rpx;
+    height: 53rpx;
+}
+
+.img:nth-child(even) {
+    margin-left: 26rpx;
+}
+
+.information-item {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 20rpx 25rpx;
+    box-sizing: border-box;
+}
+
+.information-item image {
+    width: 193rpx;
+    height: 193rpx;
+    border-radius: 50%;
+    margin-right: 55rpx;
+}
+
+.access-name {
+    display: flex;
+    flex-direction: column;
+}
+
+.access-name .name {
+    color: #424242;
+    font-size: 40rpx;
+}
+
+.access-name text {
+    font-size: 32rpx;
+    color: #fe1000;
+    margin-top: 20rpx;
+}
+
+.stick {
+    position: absolute;
+    right: 25rpx;    
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 145rpx;
+    height: 145rpx;
+    background: orange;
+    color: #fff;
+    border-radius: 50%;
+}

pages/childMatch/childMatch.js

@@ -0,0 +1,72 @@
+// pages/childMatch/childMatch.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  //点击跳转到相册
+  album: ({ currentTarget }) => {
+    wx.navigateTo({
+      url: '/pages/access/access?id=1' 
+    })
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/childMatch/childMatch.json

@@ -0,0 +1 @@
+{}

pages/childMatch/childMatch.wxml

@@ -0,0 +1,22 @@
+<!--pages/childMatch/childMatch.wxml-->
+    <view class="child-container">
+        <view class="search-child">
+            <image class="icon" src="../../static/image/search.png"></image>
+            <input placeholder="输入关键字" bindinput="focus"/>
+        </view>
+        <scroll-view scroll-y style="height: 92%; overflow: hidden;">
+            <view class="photo">
+                <view class="img" bindtap="album">
+                    <image src="" style="background: skyblue;" mode='aspectFill'></image> 
+                    <image src="../../static/image/huangguan.png" class="crown"></image>
+                    <view class="ticket">0</view>
+                    <view class="child-name">安安</view>
+                </view> 
+            </view>
+        </scroll-view>
+        <view class="no-find" hidden="true">
+            <text>没有找到相关的内容</text>
+            <text>换个关键字再试试吧</text>
+        </view>
+    </view>
+

pages/childMatch/childMatch.wxss

@@ -0,0 +1,95 @@
+/* pages/childMatch/childMatch.wxss */
+.child-container {
+    height: 100%;
+    padding: 0 26rpx;
+    box-sizing: border-box;
+    background:#eaeaea;
+}
+
+.search-child {
+    width: 100%;
+    height: 95rpx;
+    background: #fff;
+    border-radius: 95rpx;
+    display: flex;
+    align-items: center;
+    padding-left: 10rpx;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, .2);
+}
+
+.search-child image {
+    width: 85rpx;
+    height: 85rpx;
+    margin-right: 20rpx;
+}
+
+.search-child input {
+    padding-left: 20rpx;
+    width:70%;
+}
+
+.no-find {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    position:absolute;
+    width:100%;
+    top:30%;
+    color: #6a6a6a;
+    
+}
+
+.photo {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 22rpx;
+}
+
+.img {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 332rpx;
+    border-radius: 20rpx; 
+    margin-top: 30rpx;
+}
+
+.img image{
+    width: 100%;
+    height: 241rpx;
+    border-radius: 20rpx;
+}
+
+.img .crown {
+    position: absolute;
+    top: -10rpx;
+    right: -10rpx;
+    width: 90rpx;
+    height: 90rpx;
+}
+
+.img .ticket {
+    position: absolute;
+    bottom: 90rpx;
+    right: 85rpx;
+    width: 162rpx;
+    height: 50rpx;  
+    text-align: center;
+    background: #fff;
+    border-radius: 50rpx;
+    line-height: 50rpx; 
+    font-size: 32rpx;
+    color: #fe5601;
+    font-weight: 600; 
+}
+
+.child-name {
+    margin-top: 26rpx;
+    font-size: 40rpx;
+}
+
+.img:nth-child(even) {
+    margin-left: 26rpx;
+}

pages/index/index.wxss

@@ -24,6 +24,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 3px 6px 0 rgba(0, 0, 0, .2);
 }
 
 .tabbar {