触底加载hebing

src/config/request/apiList/plm/mobileBrand/index.js

@@ -51,5 +51,10 @@ export default {
             url: `${baseUrl}/supplierInfo`,
             method: "get"
         },
+        //搜索
+        'selectAllStylePage': {
+            url: `${baseUrl}/selectAllStylePage`,
+            method: "post"
+        }
     }
 }
\ No newline at end of file

src/pages.json

@@ -87,8 +87,6 @@
       }
     },
 
-
-
     {
       "path": "pages/order/item",
       "style": {
@@ -511,6 +509,20 @@
         "enablePullDownRefresh": false,
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/brands/search",
+      "style": {
+        "navigationBarTitleText": "搜索",
+        "navigationBarTextStyle": "white",
+        "enablePullDownRefresh": false,
+        "navigationStyle": "custom",
+        "mp-alipay": {
+          "transparentTitle": "always",
+          "titlePenetrate": "YES",
+          "allowsBounceVertical": "NO"
+        }
+      }
     }
   ],
   "globalStyle": {
@@ -519,14 +531,15 @@
     "navigationBarBackgroundColor": "#F8F8F8",
     "backgroundColor": "#F8F8F8"
   },
-	"condition" : { //模式配置，仅开发期间生效
-		"current": 0, //当前激活的模式(list 的索引项)
-		"list": [
-			{
-				"name": "", //模式名称
-				"path": "", //启动页面，必选
-				"query": "" //启动参数，在页面的onLoad函数里面得到
-			}
-		]
-	}
+  "condition": {
+    //模式配置，仅开发期间生效
+    "current": 0, //当前激活的模式(list 的索引项)
+    "list": [
+      {
+        "name": "", //模式名称
+        "path": "", //启动页面，必选
+        "query": "" //启动参数，在页面的onLoad函数里面得到
+      }
+    ]
+  }
 }

src/pages/brands/brands.vue

@@ -91,7 +91,7 @@ export default {
   methods: {
     // 搜索按钮
     searchCli() {
-      this.$Router.push("/pages/home/search");
+      this.$Router.push("/pages/brands/search");
     },
     // 每日更新跳转
     headTab() {

src/pages/brands/browse.vue

@@ -79,7 +79,7 @@ export default {
   },
   //上拉加载
   onReachBottom() {
-    console.log("触发了");
+    // console.log("触发了");
     //判断当前页是否到达总页数
     if (this.current >= this.total) {
       this.loadText = true;

src/pages/brands/components/hotStyle.vue

@@ -105,7 +105,7 @@ export default {
   border: 2rpx solid #e3e1e0;
 
   .indexhot {
-    display: block;
+    display: inline-block;
     height: 434rpx;
     width: 330rpx;
     border-radius: 10rpx 10rpx 0 0;

src/pages/brands/components/hs-material-thumbnail.vue

@@ -12,6 +12,7 @@
         v-if="item.isMain"
         class="width_100 hs-height-160"
         :src="`${imgUrl}${item.fileCode}`"
+        mode="aspectFill"
       />
     </template>
     <view class="order_tit">
@@ -79,7 +80,7 @@ export default {
     padding: 20rpx;
     flex: 1;
     height: 100%;
-    // background: rgba(17, 21, 30, 0.5);
+    background: rgba(17, 21, 30, 0.5);
   }
 }
 

src/pages/brands/components/searchItem.vue

+<template>
+  <!-- 浏览记录组件和收藏 -->
+  <view class="browse">
+    <u-card
+      :head-border-bottom="false"
+      v-for="(item, index) in list"
+      :key="index"
+    >
+      <view slot="head" style="display: none"></view>
+      <!-- 主体 -->
+      <view slot="body">
+        <view class="item u-border-bottom">
+          <!-- 照片 -->
+          <image class="imges" :src="`${imgUrl}${item.effectPictureCode}`" />
+          <!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
+          <view class="title-wrap">
+            <view class="title">{{ item.styleTag }}</view>
+            <!-- 款号 -->
+            <view class="modelno">
+              <text class="textStyle1">款号</text>
+              <text class="textStyle2">{{ item.styleCode }}</text>
+              <!-- 是否需要爱心 -->
+              <view v-if="isbrowse">
+                <image
+                  @click="browerClick(item)"
+                  src="@/static/images/brank/blackxin.png"
+                  v-if="!item.isFavorite"
+                ></image>
+                <image
+                  @click="browerClick(item)"
+                  src="@/static/images/brank/lightxin.png"
+                  v-else
+                ></image>
+              </view>
+            </view>
+            <!-- 面料 -->
+            <view class="fabric">
+              <text class="textStyle1">面料</text>
+              <text class="textStyle2">{{ item.materialName }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </u-card>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    //是否显示爱心
+    isbrowse: {
+      type: Boolean,
+      default: false,
+    },
+    // 数据
+    list: { type: Array },
+  },
+  data() {
+    return {
+      islove: false, // 爱心的黑暗显影
+      imgUrl: this.$IMG_URL, // 图片前面的url
+    };
+  },
+  computed: {},
+  methods: {
+    //收藏款式接口
+    collectionFn(item) {
+      this.$http("mobileBrand.styleCollect", { id: item }).then((res) => {
+        if (res.code == 200) {
+          this.$emit("update");
+        }
+      });
+    },
+    //取消款式接口
+    unCollectionFn(param) {
+      this.$http("mobileBrand.cancelCollect", param).then((res) => {
+        if (res.code == 200) {
+          this.$emit("update");
+        }
+      });
+    },
+    // 爱心点击
+    browerClick(item) {
+      if (item.isFavorite == true) {
+        this.$u.toast(`已取消收藏`);
+        console.log(item.id);
+        this.unCollectionFn([item.id]);
+      } else {
+        this.$u.toast(`已收藏款式`);
+        this.collectionFn(item.id);
+      }
+    },
+  },
+  components: {},
+};
+</script>
+
+<style lang="scss" scoped>
+// 选项
+.checkstyle {
+  font-size: 42rpx;
+  margin-right: 10rpx;
+}
+
+.browse {
+  ::v-deep .u-card__body {
+    padding-top: 0rpx !important;
+  }
+  ::v-deep .u-card__head {
+    padding-bottom: 0rpx !important;
+  }
+}
+.item {
+  display: flex;
+  padding: 20rpx;
+}
+
+.imges {
+  width: 162rpx;
+  height: 162rpx;
+  margin-right: 20rpx;
+  border-radius: 12rpx;
+}
+
+.title {
+  width: 440rpx;
+  font-size: 28rpx;
+  height: 40rpx;
+  line-height: 40rpx;
+  font-family: PingFangSC, PingFangSC-Medium;
+  font-weight: 700;
+  text-align: left;
+  color: #333333;
+
+  overflow: hidden; /*超出部分隐藏*/
+  white-space: nowrap; /*禁止换行*/
+  text-overflow: ellipsis;
+}
+//头部时间图标
+.browseicon {
+  width: 32rpx;
+}
+//头部时间
+.browseTime {
+  width: 252rpx;
+  height: 32rpx;
+  font-size: 32rpx;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 1);
+  margin-left: 10rpx;
+}
+// 款号
+.modelno {
+  height: 40rpx;
+  margin-top: 16rpx;
+  display: flex;
+  position: relative;
+  image {
+    height: 40rpx;
+    width: 45rpx;
+    position: absolute;
+    right: 29rpx;
+  }
+}
+//面料
+.fabric {
+  margin-top: 6rpx;
+}
+//款号面料
+.textStyle1 {
+  color: rgba(0, 0, 0, 0.4);
+}
+.textStyle2 {
+  margin-left: 40rpx;
+  font-size: 14px;
+  font-family: PingFangSC, PingFangSC-Regular;
+  font-weight: 500;
+  color: #333333;
+}
+::v-deep .u-border-bottom {
+  padding-left: 0rpx;
+}
+</style>

src/pages/brands/search.vue

+<template>
+  <!-- 搜索界面 -->
+  <view class="">
+    <u-navbar
+      :is-back="true"
+      :background="{ backgroundColor: '#F5F5F5' }"
+      title=""
+    >
+      <view class="slot-wrap">
+        <view class="search-wrap">
+          <u-search
+            @search="searchCli"
+            bg-color="#fff"
+            border-color="#d5aa7a"
+            placeholder="请输入"
+            :show-action="false"
+            v-model="value"
+          ></u-search>
+        </view>
+      </view>
+    </u-navbar>
+    <search-item :isbrowse="true" :list="list" @update="update"> </search-item>
+    <view v-if="loadText" class="loadStyle">没有可用的数据了</view>
+  </view>
+</template>
+
+<script>
+import searchItem from "./components/searchItem.vue";
+export default {
+  components: { searchItem },
+  data() {
+    return {
+      value: "",
+      list: [],
+      total: 0, //总页数
+      current: 1,
+      size: 5,
+      //显示加载完毕后的文字
+      loadText: false,
+    };
+  },
+  methods: {
+    //更新
+    update() {
+      this.searchFn(1, 10, this.value);
+    },
+    // 搜索按钮
+    searchCli() {
+      this.searchFn(1, 10, this.value);
+    },
+    //搜索接口
+    searchFn(current, size, value) {
+      let param = {
+        current: current,
+        size: size,
+        styleTag: value,
+      };
+      this.$http("mobileBrand.selectAllStylePage", param).then((res) => {
+        let { code, data } = res;
+        if (code === 200) {
+          if (current == 1) {
+            this.list = data.records;
+          } else {
+            this.list.push(...data.records);
+            console.log(this.list);
+          }
+          this.total = data.total;
+        }
+      });
+    },
+  },
+  //上拉加载
+  onReachBottom() {
+    //判断当前页是否到达总页数
+    if (this.current >= this.total) {
+      this.loadText = true;
+    } else {
+      this.current++;
+      this.searchFn(this.current, this.size);
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.slot-wrap {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+.search-wrap {
+  margin: 0 20rpx;
+  flex: 1;
+}
+// 上拉加载
+.loadStyle {
+  width: 100%;
+  height: 60rpx;
+  line-height: 60rpx;
+  text-align: center;
+}
+</style>