improvement: 搜索页面

src/common/api.js

@@ -57,4 +57,10 @@ module.exports = {
   getGoodsList(params) {
     return http.post(`/api/goods/list/${params}`);
   },
+  getSearchList(params) {
+    return http.post('/api/goods/query', params);
+  },
+  getGoodsUrl(params) {
+    return http.post('/api/goods/promotionUrl', params);
+  }
 };

src/components/custom/goodsList.wpy

@@ -33,7 +33,7 @@
 </template>
 <script>
   import wepy from '@wepy/core';
-  import { getGoodsList } from '../../common/api'
+  import { getGoodsList, getGoodsUrl } from '../../common/api'
   let touchDotX = 0, touchDotY = 0, page = 0, goodsIds = [], isListDone = false;
   const goodsNum = 2;
   wepy.component({
@@ -42,7 +42,8 @@
       current: 1,
       currentIndex: 1,  // 商品当前滑动到第几个
       circular: false, // 商品是否无限循环
-      list: []
+      list: [],
+      showLoading:false,
     },
     created() {
       // 获取推荐的商品列表
@@ -113,16 +114,17 @@
       },
       toViewPage(e) {
         let item = e.$wx.currentTarget.dataset.item;
-        wx.navigateToMiniProgram({
-          appId: 'wx91d27dbf599dff74',
-          path: 'pages/union/proxy/proxy?spreadUrl=' + encodeURIComponent(item.sku), // 跳转小程序的路径
-//          path:'pages/order/list/list',
-          // 有效值 develop（开发版），trial（体验版），release（正式版）
-          envVersion: 'release',
-          success(res) {
-//            console.log('跳转成功');
-          }
-        });
+        getGoodsUrl({skuId:item.sourceId}).then(data=>{
+          console.log(data,111);
+          wx.navigateToMiniProgram({
+            appId: 'wx91d27dbf599dff74',
+            path: 'pages/union/proxy/proxy?spreadUrl=' + encodeURIComponent(data), // 跳转小程序的路径
+            // 有效值 develop（开发版），trial（体验版），release（正式版）
+            envVersion: 'release',
+            success(res) {
+            }
+          });
+        })
       },
       touchStart (event) {
         touchDotX = event.touches[0].pageX; // 获取触摸时的原点
@@ -189,7 +191,6 @@
           if (list.length <= 4) {
             this.circular = false;
           }
-          console.log(current.itemid, this.currentIndex, this.current, 111);
           if (current.itemid >= list.length - 1) {
             this.current = this.currentIndex - 1;
           }
@@ -204,7 +205,6 @@
               that.current = Math.max(that.current - 1, 0);
             }
             // 删除完成之后
-            console.log(current.itemid, that.currentIndex, that.current, 222);
           }, 500);
         }
       }
@@ -277,5 +277,9 @@
   }
 </style>
 <config>
-  {}
+  {
+    "usingComponents": {
+      'goods-loading': '~@/components/custom/loading',
+    }
+  }
 </config>

src/components/custom/popup.wpy

@@ -7,7 +7,7 @@
       </div>
       <div class="popup-item">
         <button class="help-button" open-type="contact"></button>
-        <image class="image" src="/static/images/feedback@2x.png"></image>
+        <image class="image" src="/static/images/feedback.png"></image>
         <span class="desc">问题反馈</span>
       </div>
     </div>
@@ -26,6 +26,7 @@
     data: {
       menus: [
         { img: '/static/images/awards@2x.png', title: '我的抽奖', path: '/pages/myraffles' },
+        { img: '/static/images/order.png', title: '我的订单', path: 'jd' },
         { img: '/static/images/help@2x.png', title: '规则与帮助', path: '/pages/help' }
       ],
       show: false,
@@ -54,6 +55,17 @@
       },
       goNextPage: function(path) {
         this.$emit('showMenu', false);
+        if(path === 'jd') {
+          wx.navigateToMiniProgram({
+            appId: 'wx91d27dbf599dff74',
+            path:'pages/order/list/list',
+            // 有效值 develop（开发版），trial（体验版），release（正式版）
+            envVersion: 'release',
+            success(res) {
+            }
+          });
+          return;
+        }
         wx.navigateTo({
           url: path
         });
@@ -78,7 +90,7 @@
       display: flex;
       justify-content: space-between;
       align-items: center;
-      width: 350rpx;
+      width: 430rpx;
       height: 114rpx;
       position: absolute;
       left: 20rpx;

src/pages/index.wpy

@@ -183,10 +183,10 @@
       </button>
       <image v-if="!authmodal" @tap="showMenu(!showModal)" :src="userInfo.avatarUrl" mode="cover" class="userimage"></image>
     </view>
-    <!--<view class="search"  style="{{ searchStyle }}" bindtap="toSearch">
+    <view class="search"  style="{{ searchStyle }}" bindtap="toSearch">
       <image src="/static/images/search.png" class="searchimg"></image>
       搜索
-    </view>-->
+    </view>
     <view>
       <gold type="gold" :des="mainInfo && mainInfo.account && mainInfo.account.quantity || 0" :gold="sign" :isReceive="isReceive" @resetAddGold="resetAddGold" @showCorn="cornModalShow"></gold>
       <sign type="sign" des="签到" :sign="sign" @sign-in="signIn"></sign>
@@ -199,7 +199,7 @@
     <shared-popup v-if="showModal === 1" :inviteinfo="mainInfo && mainInfo.inviteRecord" @getSharedGold="getSharedGold"/>
     <popup @showMenu="showMenu" :showMenus="showModal === 3"/>
     <!--商品推荐列表-->
-    <!--<goods-list></goods-list>-->
+    <goods-list></goods-list>
     <van-dialog id="van-dialog"/>
     <van-notify id="van-notify"/>
     <van-popup show="{{ cornModal }}" bind:close="cornModalClose" custom-style="background-color:transparent">
@@ -240,7 +240,7 @@
       cornCode: '', // 克币充值码
       cornText: '',
       cornTextShow: false,
-      searchStyle:''
+      searchStyle:'',
     },
 
     computed: {
@@ -525,7 +525,7 @@
       'van-dialog': '~@/components/vant/dialog/index',
       'goods-list': '../components/custom/goodsList',
       'activity-list': '../components/custom/activityList',
-      'van-popup':'../components/vant/popup/index'
+      'van-popup':'../components/vant/popup/index',
     },
     navigationStyle: "custom",
     disableScroll: true

src/pages/raffle.wpy

@@ -334,7 +334,7 @@
             title: title[code],
             message: message[code]
           }).then(() => {
-            wx.navigateBack({url: '/pages/index'});
+            wx.navigateBack({delta: 1})
           });
         }).catch(() => {
           this.btnfont = '立即参与';

src/pages/search.wpy

@@ -2,17 +2,86 @@
   <view>
     <view class="search-head">
       <view class="search-wrapper">
-        <van-field clearable left-icon="/static/images/searchgrey.png" placeholder="搜索"></van-field>
+        <van-field clearable left-icon="search" placeholder="搜索" bind:confirm="search"></van-field>
+      </view>
+      <view class="search-cancel" bindtap="backUrl">取消</view>
+    </view>
+    <view class="search-list" v-show="list.length">
+      <view class="search-item" wx:for="{{list}}" wx:key="index" bindtap="toJingdong" data-id="{{item.sourceId}}">
+        <view class="image-left">
+          <van-image use-loading-slot src="{{item.images}}" class="img" width="240rpx" height="240rpx" radius="10rpx" fit="cover">
+            <van-loading slot="loading" type="spinner" size="20" vertical />
+          </van-image>
+        </view>
+        <view class="cont-right">
+          <view class="cont-wrap">
+            <view class="cont-title">
+              {{item.title}}
+            </view>
+            <view class="cont-price"><text class="dollar">￥</text>{{item.price}}</view>
+            <view class="cont-count">2236人购买</view>
+          </view>
+        </view>
       </view>
     </view>
   </view>
 </template>
 <script>
   import wepy from '@wepy/core';
+  import { getSearchList, getGoodsUrl } from '../common/api'
+  let page = 1, keyword = '' ;
   wepy.page({
     data: {
+      list:[],
+      isDone:false,
+    },
+    methods:{
+      backUrl() {
+        wx.navigateBack({delta: 1})
+      },
+      search(event) {
+        const val = event.$wx.detail;
+        if(keyword !== '') {
+          page = 1;
+        }
+        keyword = val;
+        if(page === 1) {
+          this.list = [];
+        }
+        this.getList(val);
+      },
+      getList(val) {
+        getSearchList({keyword:val,page:page}).then(data=>{
+          if(data) {
+            this.list = [...this.list,...data];
+          } else{
+            this.isDone = true;
+          }
+        }).catch(()=>{
 
-    }
+        });
+      },
+      toJingdong(event) {
+        const sourceId = event.$wx.currentTarget.dataset.id;
+        if(sourceId === undefined) return;
+        getGoodsUrl({skuId:sourceId}).then(data=>{
+          wx.navigateToMiniProgram({
+            appId: 'wx91d27dbf599dff74',
+            path: 'pages/union/proxy/proxy?spreadUrl=' + encodeURIComponent(data), // 跳转小程序的路径
+            // 有效值 develop（开发版），trial（体验版），release（正式版）
+            envVersion: 'release',
+            success(res) {
+            }
+          });
+        })
+      }
+    },
+    onReachBottom() {
+      console.log(this.isDone,11)
+      if(this.isDone) return;
+      page++;
+      this.getList(keyword);
+    },
   });
 </script>
 <config>
@@ -20,6 +89,8 @@
     navigationBarTitleText: 'Luckii',
     "usingComponents": {
       "van-field": "../components/vant/field/index",
+      "van-image": "../components/vant/image/index",
+      "van-loading": "../components/vant/loading/index",
     }
   }
 </config>
@@ -28,25 +99,87 @@
   .search-head{
     background-color: @whiteback;
     padding:35rpx 30rpx;
-    border-radius:0 0 10rpx 10rpx;
+    position: relative;
     .search-wrapper{
       width:88%;
       .van-cell {
         border:1rpx solid @maincolor;
         background-color: #f6f6f6;
-        border-radius: 30rpx;
-        padding:15rpx 20rpx;
+        border-radius: 35rpx;
+        padding:10rpx 25rpx;
         font-size: 26rpx;
       }
-      .van-cell__left-icon-wrap {
-        height:28rpx;
+      .van-cell::after{
+        border:none;
       }
       .van-field__input{
         height:30rpx;
+        outline:none;
       }
     }
-    .search-cont {
-      padding: 15rpx 20rpx;
+    .search-cancel{
+      font-size: @font-middle;
+      width:90rpx;
+      height:60rpx;
+      position: absolute;
+      right:10rpx;
+      top:40rpx;
+      text-align: center;
+      line-height:60rpx;
+    }
+  }
+  .search-list {
+    background-color: @whiteback;
+    margin-top:20rpx;
+    padding-left:30rpx;
+  }
+  .search-item {
+    padding-top:30rpx;
+    overflow: hidden;
+  }
+  .image-left {
+    width: 240rpx;
+    float: left;
+    height: 240rpx;
+    .img{
+      width:100%;
+      height:100%;
+    }
+  }
+  .cont-right {
+    padding-left:260rpx;
+    .cont-wrap {
+      border-bottom:1rpx solid #E6E6E6;
+      min-height: 240rpx;
+      padding-bottom: 20rpx;
+      padding-right:30rpx;
+      position: relative;
+    }
+    .cont-title {
+      font-size: @font-middle;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2; //行数
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      word-break:break-all;
+    }
+    .cont-count {
+      position: absolute;
+      bottom:20rpx;
+      left:0;
+      font-size: @font-common;
+      color:@lightgrey;
+    }
+    .cont-price {
+      .dollar{
+        font-size: @font-common;
+      }
+      position: absolute;
+      bottom:55rpx;
+      left:0;
+      font-size:34rpx;
+      color:@maincolor;
     }
   }
 </style>