Feat(搜索):接口对接

api/store.js

@@ -210,3 +210,8 @@ export function storeListApi(data) {
         login: false
     });
 }
+
+// 商品列表
+export function getHotels(param) {
+    return request.get('/api/hotelMain/search', param, { login: false })
+}

pages.json

@@ -58,7 +58,7 @@
     {
       "path": "pages/shop/GoodSearch/index",
       "style": {
-        "navigationBarTitleText": "搜索商品"
+        "navigationBarTitleText": "搜索"
       }
     },
     {
@@ -78,7 +78,7 @@
     {
       "path": "pages/shop/GoodsList/index",
       "style": {
-        "navigationBarTitleText": "商品列表"
+        "navigationBarTitleText": "搜索"
       }
     },
     {
@@ -871,8 +871,8 @@
         "query": ""
       },
       {
-        "name": "积分",
+        "name": "搜索",
-        "path": "pages/user/Points/index",
+        "path": "pages/shop/GoodsList/index",
         "query": ""
       }
     ]

pages/home/index.vue

@@ -54,7 +54,7 @@
     <view class="acea-row row-middle row-between" style="padding-top: 20rpx;background: #fff;">
       <view @click="goGoodSearch()" class="search acea-row row-middle" style="flex-grow: 1;">
         <text class="iconfont icon-xiazai5" style="color: #acacac;"></text>
-        搜索商品
+        搜索
       </view>
     </view>
     <!-- 导航v9 -->

pages/shop/GoodSearch/index.vue

@@ -5,7 +5,7 @@
         <input
           v-model.trim="search"
           type="text"
-          placeholder="搜索商品"
+          placeholder="请输入"
           placeholder-style="color:#999"
         />
         <view class="btn flex-0 flex jc-center ai-center" @click="submit">

pages/shop/GoodsClass/index.vue

@@ -263,15 +263,6 @@
       goGoodSearch() {
         this.$yrouter.push("/pages/shop/GoodSearch/index");
       },
-      goGoodsList(child) {
-        this.$yrouter.push({
-          path: "/pages/shop/GoodsList/index",
-          query: {
-            id: child.id,
-            title: child.cateName
-          }
-        });
-      },
       activeCateId(n) {
         let index = 0;
         n = parseInt(n);
@@ -314,18 +305,6 @@
           });
         });
       },
-      submitForm: function() {
-        var val = trim(this.search);
-        if (val) {
-          this.$yrouter.push({
-            path: "/pages/shop/GoodsList/index",
-            query: {
-              s: val
-            }
-          });
-          setTimeout(() => (this.search = ""), 500);
-        }
-      },
       asideTap(index) {
         this.navActive = index;
 

pages/shop/GoodsList/index.vue

@@ -1,64 +1,77 @@
 <template>
-  <view class="productList" ref="container">
+  <view class="productList">
     <form @submit.prevent="submitForm">
-      <view class="search bg-color-red acea-row row-between-wrapper">
+      <view class="search search-wrap acea-row row-between-wrapper">
         <view class="input acea-row row-between-wrapper">
+          <view class="search-type-wrap" @click="toggleSearchType(true)">
+            {{ searchType === 'good' ? '商品' : '店铺' }}
+            <text class="d3"></text>
+          </view>
+          <input
+            v-model="query.keyword"
+            placeholder="请输入"
+            confirm-type="search"
+            class="inp"
+            @confirm="submitForm"
+          />
           <text class="iconfont icon-sousuo"></text>
-          <input placeholder="搜索商品信息" v-model="where.keyword" confirm-type="search" @confirm="submitForm"/>
         </view>
-        <view
-            class="iconfont"
-            :class="Switch === true ? 'icon-pailie' : 'icon-tupianpailie'"
-            @click="switchTap"
-        ></view>
       </view>
     </form>
-    <view class="nav acea-row row-middle">
+    <view v-if="showSearchTypeLayer" class="search-type-layer">
-      <view
+      <view class="layer" @click="toggleSearchType(false)" />
+      <view class="content">
+        <view
+          v-for="(item, index) in searchTypeList"
+          :key="index"
+          :class="item.value === searchType ? 'on' : ''"
           class="item"
-          :class="title ? 'font-color-red' : ''"
+          @click="searchTypeItemClick(item)"
-          @click="set_where(0)"
+        >
-      >{{ title ? title : "默认" }}
+          {{ item.text }}
-      </view>
-      <view class="item" @click="set_where(1)">
-        价格
-        <image src="@/static/images/horn.png" v-if="price === 0"/>
-        <image src="@/static/images/up.png" v-if="price === 1"/>
-        <image src="@/static/images/down.png" v-if="price === 2"/>
-      </view>
-      <view class="item" @click="set_where(2)">
-        销量
-        <image src="@/static/images/horn.png" v-if="stock === 0"/>
-        <image src="@/static/images/up.png" v-if="stock === 1"/>
-        <image src="@/static/images/down.png" v-if="stock === 2"/>
-      </view>
-      <!-- down -->
-      <view class="item" :class="nows ? 'font-color-red' : ''" @click="set_where(3)">新品</view>
-    </view>
-    <view
-        class="list acea-row row-between-wrapper"
-        :class="Switch === true ? '' : 'on'"
-        ref="container"
-    >
-      <view
-          @click="goGoodsCon(item)"
-          class="item"
-          :class="Switch === true ? '' : 'on'"
-          v-for="(item, productListIndex) in productList"
-          :key="productListIndex"
-          :title="item.storeName"
-      >
-        <view class="pictrue" :class="Switch === true ? '' : 'on'">
-          <image :src="item.image" :class="Switch === true ? '' : 'on'"/>
         </view>
-        <view class="text" :class="Switch === true ? '' : 'on'">
+      </view>
+    </view>
+    <view class="nav acea-row row-middle">
+      <view class="item">
+        <text class="tag">
+          综合
+        </text>
+      </view>
+      <view class="item" @click="setQuery('priceOrder')">
+        价格
+        <image v-if="!query.priceOrder" src="@/static/images/horn.png" />
+        <image v-if="query.priceOrder === 'asc'" src="@/static/images/up.png" />
+        <image v-if="query.priceOrder === 'desc'" src="@/static/images/down.png" />
+      </view>
+      <view class="item" @click="setQuery('salesOrder')">
+        销量
+        <image v-if="!query.salesOrder" src="@/static/images/horn.png" />
+        <image v-if="query.salesOrder === 'asc'" src="@/static/images/up.png" />
+        <image v-if="query.salesOrder === 'desc'" src="@/static/images/down.png" />
+      </view>
+    </view>
+    <view v-if="searchType === 'good'" class="list acea-row row-between-wrapper">
+      <goo-skeleton
+        v-if="loading"
+        :show-avatar="false"
+      />
+      <view
+        v-for="(item, listIndex) in list"
+        :key="listIndex"
+        class="item"
+        @click="goGoodsCon(item.id)"
+      >
+        <view class="pictrue">
+          <image :src="item.image"/>
+        </view>
+        <view class="text">
           <view class="name more-t">{{ item.storeName }}</view>
-
+          <view class="vip acea-row row-between-wrapper">
-          <view class="vip acea-row row-between-wrapper" :class="Switch === true ? '' : 'on'">
             <view class="flex ai-end">
-              <view class="money" :class="Switch === true ? '' : 'on'">
+              <view class="money">
                 ￥
-                <text class="num" v-if="item.vipPrice && item.vipPrice>0">{{ force2Decimal(item.vipPrice) }}</text>
+                <text class="num" v-if="item.vipPrice && item.vipPrice > 0">{{ force2Decimal(item.vipPrice) }}</text>
                 <text class="num" v-else>{{ force2Decimal(item.price) }}</text>
               </view>
               <view class="vip-money">￥{{ force2Decimal(item.otPrice) }}</view>
@@ -67,237 +80,192 @@
           </view>
         </view>
       </view>
+      <u-loadmore
+        v-if="loadend"
+        :line="true"
+        status="nomore"
+        nomore-text="到底了"
+      />
     </view>
-    <no-good-data v-if="productList.length === 0 && where.page > 1" />
+    <view v-else class="list">
-    <Recommend v-if="productList.length === 0 && where.page > 1"></Recommend>
+      <view class="hotel-wrap">
+        <goo-skeleton
+          v-if="loading"
+        />
+        <view
+          v-for="(item, index) in list"
+          :key="index"
+          class="hotel-item"
+        >
+          <view class="hotel-item-main" @click="hotelItemClick(item)">
+            <image :src="item.logo" class="logo" />
+            <view class="info">
+              <view class="name one-t">
+                {{ item.name }}
+              </view>
+              <view class="type">
+                {{ item.typeName || ' ' }}
+              </view>
+              <view class="desc">
+                <view class="tip one-t">
+                  {{ item.tips || ' ' }}
+                </view>
+                <view class="btn">进店</view>
+              </view>
+            </view>
+          </view>
+          <view v-if="item.products" class="good-list">
+            <view
+              v-for="(good) in item.products"
+              class="good-item"
+              @click="goGoodsCon(good.productId)"
+            >
+              <image :src="good.productImage" class="img" />
+              <view class="price">
+                <text class="txt">￥</text>
+                {{ force2Decimal(good.productPrice) }}
+              </view>
+            </view>
+          </view>
+        </view>
+        <u-loadmore
+          v-if="loadend"
+          :line="true"
+          status="nomore"
+          nomore-text="到底了"
+        />
+      </view>
+    </view>
+    <no-good-data v-if="list.length === 0 && query.page > 1" />
   </view>
 </template>
 
 <script>
-import Recommend from "@/components/Recommend";
+import { getProducts, getHotels } from '@/api/store'
-import {getProducts} from "@/api/store";
+import { mapGetters } from 'vuex'
-import {mapGetters} from 'vuex';
+import NP from 'number-precision'
-import NP from "number-precision";
 import NoGoodData from '@/components/good/NoData'
 
 export default {
-  name: "GoodsList",
+  name: 'GoodsList',
   components: {
-    Recommend,
     NoGoodData
   },
-  props: {},
-  computed: mapGetters(["userInfo"]),
   data: function () {
-    // const { s = "", id = 0, title = "" } = this.$yroute.query;
-    const s = "",
-        id = 0,
-        title = "";
-
     return {
       webUrl: this.$VUE_APP_RESOURCES_URL,
-      hostProduct: [],
+      list: [],
-      productList: [],
+      query: {
-      Switch: true,
-      where: {
         page: 1,
-        limit: 8,
+        limit: 10,
-        keyword: s,
+        keyword: '',
-        sid: id, //二级分类id
+        priceOrder: '',
-        news: 0,
+        salesOrder: ''
-        priceOrder: "",
-        salesOrder: ""
       },
-      title: title && id ? title : "",
-      loadTitle: "",
       loading: false,
       loadend: false,
-      price: 0,
+      searchTypeList: Object.freeze([
-      stock: 0,
+        { text: '商品', value: 'good' },
-      nows: false
+        { text: '店铺', value: 'hotel' }
-    };
+      ]),
-  },
+      searchType: 'good',
-  watch: {
+      showSearchTypeLayer: false
-    title() {
-      this.updateTitle();
-    },
-    $yroute(to) {
-      // if (to.name !== "GoodsList") return;
-      // const { s = "", id = 0, title = "" } = to.query;
-      // if (s !== this.where.keyword || id !== this.where.sid) {
-      //   this.where.keyword = s;
-      //   this.loadend = false;
-      //   this.loading = false;
-      //   this.where.page = 1;
-      //   this.where.sid = id;
-      //   this.title = title && id ? title : "";
-      //   this.nows = false;
-      //   this.$set(this, "productList", []);
-      //   this.price = 0;
-      //   this.stock = 0;
-      //   this.get_product_list();
-      // }
     }
   },
-  onLoad: function (e) {
+  computed: mapGetters(['userInfo']),
-    const {s = "", id = 0, title = ""} = this.$yroute.query;
+  onLoad(e) {
-    if (s !== this.where.keyword || id !== this.where.sid) {
+    const { s = '' } = this.$yroute.query
-      this.where.keyword = s;
+    this.query.keyword = s
-      this.loadend = false;
+    this.getList()
-      this.loading = false;
-      this.where.page = 1;
-      this.where.sid = id;
-      this.title = title && id ? title : "";
-      this.nows = false;
-      this.$set(this, "productList", []);
-      this.price = 0;
-      this.stock = 0;
-      // this.get_product_list();
-    }
-    this.updateTitle();
-    this.get_product_list();
-  },
-  mounted: function () {
-    // const { s = "", id = 0, title = "" } = this.$yroute.query;
-    // this.updateTitle();
-    // this.get_product_list();
   },
   onReachBottom() {
-    !this.loading && this.get_product_list();
+    !this.loading && this.getList()
-  },
-  onHide() {
-    // this.hostProduct = [];
-    // this.productList = [];
-    // this.Switch = true;
-    // this.where = {
-    //   page: 1,
-    //   limit: 8,
-    //   keyword: s,
-    //   sid: id, //二级分类id
-    //   news: 0,
-    //   priceOrder: "",
-    //   salesOrder: ""
-    // };
-    // this.loadTitle = "";
-    // this.loading = false;
-    // this.loadend = false;
-    // this.price = 0;
-    // this.stock = 0;
-    // this.nows = fals;
   },
   methods: {
+    toggleSearchType(value) {
+      this.showSearchTypeLayer = value
+    },
+    searchTypeItemClick(item) {
+      if (item.value === this.searchType) {
+        return
+      }
+      this.searchType = item.value
+      this.toggleSearchType(false)
+      this.submitForm()
+    },
     force2Decimal(price) {
-
       return this.$force2Decimal(price);
     },
-    goGoodsCon(item) {
+    goGoodsCon(id) {
       this.$yrouter.push({
-        path: "/pages/shop/GoodsCon/index",
+        path: '/pages/shop/GoodsCon/index',
-        query: {id: item.id}
+        query: { id }
-      });
+      })
     },
-    updateTitle() {
+    hotelItemClick(item) {
-      // document.title = this.title || this.$yroute.meta.title;
+      this.$yrouter.push({
+        path: '/pagesInn/inn/innHome',
+        query: {
+          id: item.id
+        }
+      })
     },
-    get_product_list() {
+    getList() {
-      var that = this;
+      if (this.loading || this.loadend) {
-      this.setWhere();
+        return
-      // if (to.name !== "GoodsList") return;
-      // const { s = "", id = 0, title = "" } = this.$yroute.query;
-      // if (s !== this.where.keyword || id !== this.where.sid) {
-      //   this.where.keyword = s;
-      //   this.loadend = false;
-      //   this.loading = false;
-      //   this.where.page = 1;
-      //   this.where.sid = id;
-      //   this.title = title && id ? title : "";
-      //   this.nows = false;
-      //   this.$set(this, "productList", []);
-      //   this.price = 0;
-      //   this.stock = 0;
-      //   // this.get_product_list();
-      // }
-      let q = that.where;
-      getProducts(q).then(res => {
-        that.loading = false;
-        //that.productList.push.apply(that.productList, res.data);
-        that.productList.push.apply(that.productList, res.data.map((item) => {
-
-          //如果已经登录获取用户信息
-          if (that.$store.getters.token && that.userInfo) {
-            var p = NP.times(item.price, NP.divide(parseFloat(that.userInfo.discount), 100))
-            item.vipPrice = p;
-          }
-          return item;
-        }));
-
-
-        that.loadend = res.data.length < that.where.limit; //判断所有数据是否加载完成；
-        that.where.page = that.where.page + 1;
-      });
-    },
-    submitForm: function () {
-      this.$set(this, "productList", []);
-      this.where.page = 1;
-      this.loadend = false;
-      this.loading = false;
-      this.get_product_list();
-    },
-    //点击事件处理
-    set_where: function (index) {
-      let that = this;
-      switch (index) {
-        case 0:
-          // return that.$yrouter.push({path: "/pages/shop/GoodsClass/index"});
-          that.nows = false;
-          that.price = 0;
-          that.stock = 0;
-          break;
-        case 1:
-          if (that.price === 0) that.price = 1;
-          else if (that.price === 1) that.price = 2;
-          else if (that.price === 2) that.price = 0;
-          that.stock = 0;
-          break;
-        case 2:
-          if (that.stock === 0) that.stock = 1;
-          else if (that.stock === 1) that.stock = 2;
-          else if (that.stock === 2) that.stock = 0;
-          that.price = 0;
-          break;
-        case 3:
-          that.nows = !that.nows;
-          break;
-        default:
-          break;
       }
-      that.$set(that, "productList", []);
+      let reqFn = null
-      that.where.page = 1;
+      if (this.searchType === 'good') {
-      that.loadend = false;
+        reqFn = getProducts
-      that.get_product_list();
+      } else {
-    },
+        reqFn = getHotels
-    //设置where条件
-    setWhere: function () {
-      let that = this;
-      if (that.price === 0) {
-        that.where.priceOrder = "";
-      } else if (that.price === 1) {
-        that.where.priceOrder = "asc";
-      } else if (that.price === 2) {
-        that.where.priceOrder = "desc";
       }
-      if (that.stock === 0) {
+      this.loading = true
-        that.where.salesOrder = "";
+      reqFn(this.query).then(res => {
-      } else if (that.stock === 1) {
+        const { success, data } = res
-        that.where.salesOrder = "asc";
+        if (success) {
-      } else if (that.stock === 2) {
+          this.loading = false
-        that.where.salesOrder = "desc";
+          this.list.push.apply(this.list, data.map((item) => {
-      }
+            if (this.searchType === 'good') {
-      that.where.news = that.nows ? "1" : "0";
+              // 如果已经登录获取用户信息
+              if (this.$store.getters.token && this.userInfo) {
+                const p = NP.times(item.price, NP.divide(parseFloat(this.userInfo.discount), 100))
+                item.vipPrice = p
+              }
+            }
+            return item
+          }))
+          // 判断所有数据是否加载完成
+          this.loadend = data.length < this.query.limit
+          this.query.page++
+        }
+      }).catch(() => {
+        this.loading = false
+      })
     },
-    switchTap: function () {
+    submitForm() {
-      let that = this;
+      this.$set(this, 'list', [])
-      that.Switch = !that.Switch;
+      this.query.page = 1
+      this.loadend = false
+      this.loading = false
+      this.getList()
+    },
+    setQuery(key) {
+      const value = this.query[key]
+      if (!value) {
+        this.query[key] = 'asc'
+      } else if (value === 'asc') {
+        this.query[key] = 'desc'
+      } else {
+        this.query[key] = ''
+      }
+      if (key === 'priceOrder') {
+        this.query.salesOrder = ''
+      }
+      if (key === 'salesOrder') {
+        this.query.priceOrder = ''
+      }
+      this.submitForm()
     }
   }
 };
@@ -343,33 +311,173 @@ export default {
     }
   }
 }
-
+.search-type-layer {
-.list.on {
+  position: fixed;
-  padding: 0 32rpx;
+  top: 0;
-  background: none;
+  left: 0;
-
+  right: 0;
-  .item {
+  bottom: 0;
-    box-sizing: border-box;
+  z-index: 9999;
-    margin-top: 24rpx;
+  .layer {
-    padding: 24rpx 22rpx;
+    position: absolute;
-    border-bottom: none;
+    top: 0;
-
+    left: 0;
-    .pictrue {
+    right: 0;
-      width: 136rpx !important;
+    bottom: 0;
-      height: 136rpx !important;
+    z-index: 2;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+  .content {
+    position: absolute;
+    top: 80rpx;
+    left: 23rpx;
+    z-index: 5;
+    width: 120px;
+    padding: 10rpx;
+    border-radius: 4px;
+    background-color: #fff;
+    .item + .item {
+      border-top: 1px solid #707070;
     }
-
+    .item {
-    .text {
+      text-align: center;
-      display: flex;
+      line-height: 40px;
-      flex-direction: column;
+      font-size: 16px;
-      justify-content: space-between;
+      color: #333;
-
+      &.on {
-      .money {
+        color: #E92727;
-        margin-top: 0;
       }
-
+    }
-      .vip-money {
+  }
-        margin-left: 8rpx;
+}
+.search-wrap {
+  background-color: #fff;
+  .input {
+    height: 36px;
+    border-radius: 18px;
+    margin: 0;
+    background-color: #f6f6f6;
+    .search-type-wrap {
+      display: flex;
+      align-items: center;
+      padding: 0 20rpx 0 0;
+      border-right: 1px solid #ddd;
+      color: #999;
+      font-size: 26rpx;
+      .d3 {
+        width: 0;
+        height: 0;
+        margin: 0 0 -6px 4px;
+        border-width: 5px;
+        border-style: solid;
+        border-color: #999 transparent transparent  transparent;
+      }
+    }
+    .inp {
+      flex: 1;
+      padding: 0 0 0 20rpx;
+    }
+    .iconfont {
+      color: #E92727;
+    }
+  }
+}
+.nav {
+  .item {
+    width: 33.3333%;
+    .tag {
+      display: inline-block;
+      width: 72px;
+      height: 28px;
+      border-radius: 15px;
+      border: 1px solid #E92727;
+      color: #E92727;
+      text-align: center;
+      line-height: 28px;
+    }
+  }
+}
+.hotel-wrap {
+  padding: 23rpx 0;
+}
+.hotel-item {
+  padding: 15rpx;
+  margin: 0 0 23rpx;
+  border-radius: 4px;
+  background-color: #fff;
+  box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
+  .hotel-item-main {
+    display: flex;
+    justify-content: center;
+  }
+  .logo {
+    display: block;
+    width: 136rpx;
+    height: 136rpx;
+    border-radius: 6px;
+  }
+  .info {
+    width: calc(100% - 160rpx);
+    padding: 0 0 0 20rpx;
+    .name {
+      font-size: 16px;
+      color: #333;
+      font-weight: bold;
+    }
+    .type {
+      margin: 10rpx 0 0 0;
+    }
+    .desc {
+      display: flex;
+      justify-content: space-between;
+      margin: 10rpx 0 0 0;
+      font-size: 14px;
+      .tip {
+        flex: 1;
+        width: calc(100% - 120rpx);
+        color: #999;
+      }
+      .btn {
+        padding: 0 15px;
+        height: 28px;
+        border-radius: 14px;
+        color: #fff;
+        line-height: 28px;
+        background-color: #C51919;
+      }
+    }
+  }
+  .good-list {
+    display: flex;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    padding: 23rpx 0 0 0;
+    overflow-x: auto;
+    .good-item + .good-item {
+      margin: 0 0 0 15rpx;
+    }
+    .good-item {
+      position: relative;
+      .img {
+        display: block;
+        width: 210rpx;
+        height: 210rpx;
+        border-radius: 6px;
+      }
+      .price {
+        position: absolute;
+        bottom: 20rpx;
+        left: 50%;
+        padding: 8rpx 20rpx;
+        border-radius: 23rpx;
+        line-height: 30rpx;
+        font-size: 28rpx;
+        color: #333;
+        background-color: #fff;
+        transform: translateX(-50%);
+        .txt {
+          font-size: 22rpx;
+        }
       }
     }
   }

wenwan/views/goodsClass.vue

@@ -183,15 +183,6 @@ export default {
       //触发加载请求
       this.mescroll && this.mescroll.triggerDownScroll()
     },
-    goGoodsList(child) {
-      this.$yrouter.push({
-        path: "/pages/shop/GoodsList/index",
-        query: {
-          id: child.id,
-          title: child.cateName
-        }
-      });
-    },
     activeCateId(n) {
       let index = 0;
       n = parseInt(n);