nyx: discover.js

1. 发现功能的页面优化

nyx: discover.js
1. 发现功能的页面优化
dc0b0a4e · jscat · 06874d25 · dc0b0a4e · dc0b0a4e · dc0b0a4e
Commit dc0b0a4e authored Mar 28, 2020 by jscat
--- a/增值产品-小程序及app/nyx-master/pages/discover/discover.js
+++ b/增值产品-小程序及app/nyx-master/pages/discover/discover.js
 // pages/kinds/kinds.js
@@ -56,6 +56,14 @@ Page({
    //分页加载部分
    isHideLoadMore: false,
    pageIndex: 1,      //分页搜索的page index
+    //页面格式
+    deviceRatio: 1,
+    navHeight: 0,
+    searchHeight: 0,
+    noteTop: 0,
+    noteHeight: 0,
  },
  switchCategory(e) {
@@ -78,6 +86,21 @@ Page({
   */
  onLoad: function (options) {
    var _this = this;
+    var device = wx.getSystemInfoSync()
+    //self.device = app.globalData.myDevice
+    // jscat miniprogram default width is 750rpx
+    var deviceRatio = device.windowWidth / 750
+    var winWidth = device.windowWidth * deviceRatio
+    var noteHeight = device.windowHeight - (40 - 60)
+    _this.setData({
+      searchHeight: 40,
+      navHeight: 40,
+      noteTop : (40+40),
+      noteHeight: noteHeight,
+      deviceRatio: deviceRatio,
+    })
    wx.setNavigationBarTitle({
      title: '发现',
    })

--- a/增值产品-小程序及app/nyx-master/pages/discover/discover.wxml
+++ b/增值产品-小程序及app/nyx-master/pages/discover/discover.wxml
 <view class="page">
 <view class="page">
  <!-- 搜索框 -->
-  <view class="search">
+  <view class="weui-search-bar">
-    <view class="searchBar">
+    <view class="weui-search-bar__form">
-      <icon class="weui-icon-search" type="search" size="14"></icon>
+        <view class="weui-search-bar__box">
-      <input  class="input" placeholder="大家都在搜" bindtap="entrySearch" disabled />
+            <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
+            <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
+            <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
+                <icon type="clear" size="14"></icon>
+            </view>
+        </view>
+        <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
+            <icon class="weui-icon-search" type="search" size="14"></icon>
+            <view class="weui-search-bar__text">搜索</view>
+        </label>
+    </view>
+    <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消
    </view>
  </view>
  <!-- 导航栏 -->
@@ -16,12 +27,12 @@
  </view>
  <!-- 文章列表 -->
-  <scroll-view class="list-block" scroll-y="true">
+  <scroll-view class="list-block" scroll-y="true" style="height:{{noteHeight}}px">
    <!-- 文章封面内容 -->
    <view class="notes-block" wx:for="{{notes}}" wx:for-item="item" wx:key="{{index}}">
      <view class="note-info">
        <navigator url="../discover/note-info/note-info?title={{item.title}}&content={{item.content}}&like={{item.like}}&note_image={{item.note_image}}&writer_name={{item.writer_name}}&writer_image={{item.writer_image}}" >
-          <view class="home-note-img">
+          <view class="note-img">
            <image src="{{item.note_image[0]}}"/>
          </view>
          <span>{{item.title}}</span>
@@ -39,7 +50,7 @@
        </view>
      </view>
    </view>
-  </scroll-view>
  <!-- 加载更多 -->
  <view class="weui-loadmore" hidden="{{isHideLoadMore}}">
@@ -50,6 +61,10 @@
    <view class="weui-loadmore__tips">没有更多啦 {{'>'}}_{{'<'}} </view>
  </view>
+  </scroll-view>
 </view>
--- a/增值产品-小程序及app/nyx-master/pages/discover/discover.wxss
+++ b/增值产品-小程序及app/nyx-master/pages/discover/discover.wxss
 .page{
 .page{
-  height:100%vh;
+  height:100vh;
-  display:flex;
-  flex-direction:column;
  background-color:#f5f8fa;
 }
 .search{
  background: #fff;
+  height: 40rpx;
 }
 .searchBar{
-  margin: 20rpx 30rpx;
+  height: 40rpx;
+  margin: 20rpx;
  border-radius: 30px;
  border:1px solid #f5f5f5;
  background: #f5f5f5;
@@ -40,6 +40,27 @@
  font-weight: bold;
 }
+/* */
+.list-block{
+  height:100%;
+  display:flex;
+  box-sizing:border-box;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+}
+.notes-block{
+  width: 46%;
+  /* height: 20%; */
+  margin: 6px;
+  background: #fff;
+  border-radius: 5px;
+  position: relative;
+  float: left;
+  display: block;
+}
+/*item title*/
 .note-info span{
  font-size: 17px;
  overflow : hidden;
@@ -49,7 +70,7 @@
  -webkit-box-orient: vertical;
  margin: 5px;
 }
-.home-note-img image{
+.note-img image{
  width: 100%;
  height: 170px;
  border-radius: 5px;
@@ -62,7 +83,7 @@
  margin-left: 0px;
  text-align: center;
  line-height: 38px;
-  font-size: 15px;
+  font-size: 30rpx;
 }
 .writer image{
  width: 30px;
@@ -70,7 +91,7 @@
  border-radius: 50%;
 }
 .like{
-  margin-left: 15px;
+  margin-left: 10px;
  display: flex;
 }
 .like image{
@@ -84,25 +105,6 @@
  margin: auto;
 } 
-.list-block{
-  height:100%;
-  display:flex;
-  box-sizing:border-box;
-  flex-direction:column;
-  align-items:center;
-  justify-content:center;
-}
-.notes-block{
-  width: 46%;
-  height: 20%;
-  margin: 6px;
-  background: #fff;
-  border-radius: 5px;
-  position: relative;
-  float: left;
-  display: block;
-}
  /*  加载更多   */

--- a/增值产品-小程序及app/nyx_app_key/api/src/main/resources/cn/com/fun/nyxkey/api/repository/Rockwell_keyMapper.xml
+++ b/增值产品-小程序及app/nyx_app_key/api/src/main/resources/cn/com/fun/nyxkey/api/repository/Rockwell_keyMapper.xml
 <?xml version="1.0" encoding="UTF-8"?>
@@ -270,8 +270,10 @@ limitations under the License.
    <select id="getCityInfo" parameterType="cn.com.fun.nyxkey.api.domain.query.Rockwell_keyT_areaQuery" resultType="cn.com.fun.nyxkey.api.domain.Rockwell_keyV_area_total">
        SELECT * FROM view_area_total
        WHERE 1=1
-        AND city=#{city}
+        <if test="city != null and city != '' ">
-        order by city asc
+            AND city=#{city}
+        </if>
+        order by city asc, district DESC
    </select>
    <!-- post api 4.1 从 view_post_info 获取 post信息
@@ -281,6 +283,7 @@ limitations under the License.
        WHERE 1=1
        <if test="areaId != 0 ">
            AND area_id = #{areaId}f
        </if>
        <if test="areaName != null and areaName != '' ">
            AND area_name = #{areaName}