Fix(全国特产):[#1538]城市列表界面去掉二级三级分类，直接展示所有数据方便运营推广

pkg_product/views/nativeList.vue

@@ -2,143 +2,134 @@
   <view class="pkg-product-list">
     <view class="top-box">
       <view class="search-box flex jc-between ai-center">
-        <input type="text" v-model="keyword" placeholder="搜索商品" placeholder-style="color:#949494"
+        <input
-               @confirm="search">
+          v-model="keyword"
-        <image class="icon" :src="webUrl+'/20220903142935869059.png'" mode="scaleToFill"
+          type="text"
-               @click="search"></image>
+          placeholder="搜索商品"
+          placeholder-style="color:#949494"
+          @confirm="search"
+        >
+        <image
+          class="icon"
+          :src="webUrl+'/20220903142935869059.png'"
+          mode="scaleToFill"
+          @click="search"></image>
       </view>
-
-      <u-tabs :list="tabList" keyName="cateName" lineColor="#D30808"
-              :activeStyle="{color:'#FFFFFF',fontWeight:'bold'}"
-              :inactiveStyle="{color:'rgba(255,255,255,.6)'}"
-              lineWidth="120rpx" @click="tabsTap"></u-tabs>
     </view>
-
+    <view class="line-location flex ai-center">
+      <image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
+      <text class="bold">当前城市：{{ cityName }}</text>
+    </view>
     <view class="body-box">
-      <view class="aside-box flex-0">
-        <view class="item flex jc-center ai-center" :class="index === asideIndex ? 'active' : ''"
-              v-for="(item, index) in asideList" :key="index" @click="asideTap(index)">
-          <text class="one-t">{{ item.cateName }}</text>
-        </view>
-      </view>
-
       <view class="article-box">
-        <view class="line-location flex ai-center">
+        <scroll-view
-          <image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
+          :style="{'height':listHeight}"
-<!--          @click="goCity"-->
+          :enable-flex="true"
-          <text class="bold">当前城市：{{ cityName }}</text>
+          :scroll-anchoring="true"
-        </view>
+          :scroll-y="true"
-
+          :scroll-with-animation="true"
-        <scroll-view class="list flex flex-wrap" :style="{'height':listHeight}" :enable-flex="true"
+          :enable-back-to-top="true"
-                     :scroll-anchoring="true"
+          class="list flex flex-wrap"
-                     :scroll-y="true"
+          @scrolltolower="onLower"
-                     :scroll-with-animation="true" :enable-back-to-top="true" @scrolltolower="onLower">
+        >
-          <view class="item" @click="$global.navToGoods(item.id)" v-for="(item, index) in dataList"
+          <view
-                :key="index">
+            v-for="(item, index) in dataList"
-            <image class="cover" :src="item.image" mode="scaleToFill"/>
+            :key="index"
+            class="item"
+            @click="$global.navToGoods(item.id)"
+          >
+            <image
+              :src="item.image"
+              class="cover"
+              mode="scaleToFill"
+            />
             <view class="name more-t">{{ item.storeName }}</view>
             <view class="price bold">￥{{ item.price }}</view>
           </view>
         </scroll-view>
-
+        <image
-        <image class="img-nodata" :src="webUrl+'/20231023131208675588.png'" mode="scaleToFill" v-if="dataList.length===0"/>
+          v-if="dataList.length === 0"
+          :src="webUrl + '/20231023131208675588.png'"
+          class="img-nodata"
+          mode="scaleToFill"
+        />
       </view>
     </view>
   </view>
 </template>
 
 <script>
-import {fetchNormal, getCategory} from "@/api/store";
+import { fetchNormal, getCategory } from "@/api/store"
-
 export default {
-  name: "nativeList",
+  name: 'NativeListPage',
   data() {
     return {
       webUrl: this.$VUE_APP_RESOURCES_URL,
-      keyword: "",
+      keyword: '',
-      asideList: [],
+      dataList: [],
-      asideIndex: 0,
-      dataList: [], // 列表数据
-      tabList: [],
       cityId: null,
-      cityName: "",
+      cityName: '',
       page: 1,
-      listHeight: "auto"
+      listHeight: 'auto',
+      loading: false
     }
   },
   onLoad(option) {
-    this.cityId = option.cityId;
+    this.cityId = option.cityId
-    this.init();
+    this.init()
   },
   methods: {
-    goCity() {
-      uni.redirectTo({
-        url: `/pages/chose-city/chose-city?type=0&city=${this.cityName}`
-      })
-    },
     init() {
-      getCategory(0, 35, this.cityId, true).then(({data}) => {
+      const memCityName = uni.getStorageSync('cityName')
-        this.tabList = data;
+      if (memCityName.length) {
-        this.asideList = data[0].children;
+        this.cityName = memCityName
-        let memCityName = uni.getStorageSync("cityName")
+        uni.removeStorageSync('cityName')
-        if (memCityName.length) {
+      }
-          this.cityName = memCityName;
+      this.search()
-          uni.removeStorageSync("cityName")
-        }
-        this.search();
-      });
     },
     onLower() {
-      this.page++;
+      if (this.loading) {
-      this.search();
+        return
+      }
+      this.page++
+      this.search()
     },
     search() {
-      let that = this;
+      const _this = this
-      let param = {
+      _this.loading = true
+      fetchNormal({
         isGood: 1,
-        page: this.page,
+        page: _this.page,
-        keyword: this.keyword,
+        keyword: _this.keyword,
-        cityName: this.cityName,
+        cityName: _this.cityName
-        sid: this.asideList[this.asideIndex].id
+      }).then(({data}) => {
-      };
+        if (_this.page === 1) {
-
+          _this.dataList = []
-      fetchNormal(param).then(({data}) => {
-        if (this.page === 1) {
-          this.dataList = [];
         }
-        this.dataList = this.dataList.concat(data);
+        _this.dataList = _this.dataList.concat(data)
+        _this.loading = false
         uni.getSystemInfo({
           success: function (res) {
-            let len = that.dataList.length;
+            const len = _this.dataList.length
-            let {windowHeight} = res;
+            const { windowHeight } = res
-            that.listHeight = "auto";
+            _this.listHeight = 'auto'
             if (windowHeight > 600 && len > 6) {
-              that.listHeight = "100%";
+              _this.listHeight = '100%'
             }
             if (windowHeight <= 600 && len > 4) {
-              that.listHeight = "100%";
+              _this.listHeight = '100%'
             }
           }
-        });
+        })
       }).catch(err => {
+        _this.loading = false
         uni.showToast({
           title: err + '',
           icon: 'none',
           mask: false,
           duration: 1500
-        });
+        })
       })
-    },
-    tabsTap(item) {
-      this.asideList = item.children;
-      this.asideIndex = 0;
-      this.page = 1;
-      this.search();
-    },
-    asideTap(index) {
-      this.asideIndex = index;
-      this.page = 1;
-      this.search();
     }
   }
 }
@@ -152,13 +143,16 @@ export default {
   overflow-y: hidden;
 
   .top-box {
-    height: 142rpx;
+    height: 82rpx;
     background: #FF564A;
   }
 
   .line-location {
+    height: 90rpx;
     padding: 20rpx;
+    box-sizing: border-box;
     font-size: 28rpx;
+    background-color: #fff;
 
     image {
       width: 36rpx;
@@ -168,11 +162,21 @@ export default {
   }
 
   .body-box {
-    height: calc(100vh - 142rpx);
+    height: calc(100vh - 82rpx - 90rpx);
+    box-sizing: border-box;
 
     .article-box {
+      width: 100%;
+      .list {
+        padding: 0 0 20rpx 0;
+      }
       .item {
-        height: 362rpx;
+        width: 345rpx;
+        height: 455rpx;
+        .cover {
+          width: 345rpx;
+          height: 345rpx;
+        }
       }
     }
   }

pkg_product/views/nativeList_bak20240516.vue

@@ -0,0 +1,189 @@
+<template>
+  <view class="pkg-product-list">
+    <view class="top-box">
+      <view class="search-box flex jc-between ai-center">
+        <input type="text" v-model="keyword" placeholder="搜索商品" placeholder-style="color:#949494"
+               @confirm="search">
+        <image class="icon" :src="webUrl+'/20220903142935869059.png'" mode="scaleToFill"
+               @click="search"></image>
+      </view>
+
+      <u-tabs :list="tabList" keyName="cateName" lineColor="#D30808"
+              :activeStyle="{color:'#FFFFFF',fontWeight:'bold'}"
+              :inactiveStyle="{color:'rgba(255,255,255,.6)'}"
+              lineWidth="120rpx" @click="tabsTap"></u-tabs>
+    </view>
+
+    <view class="body-box">
+      <view class="aside-box flex-0">
+        <view class="item flex jc-center ai-center" :class="index === asideIndex ? 'active' : ''"
+              v-for="(item, index) in asideList" :key="index" @click="asideTap(index)">
+          <text class="one-t">{{ item.cateName }}</text>
+        </view>
+      </view>
+
+      <view class="article-box">
+        <view class="line-location flex ai-center">
+          <image :src="webUrl+'/20220903142929759087.png'" mode="scaleToFill"></image>
+<!--          @click="goCity"-->
+          <text class="bold">当前城市：{{ cityName }}</text>
+        </view>
+
+        <scroll-view class="list flex flex-wrap" :style="{'height':listHeight}" :enable-flex="true"
+                     :scroll-anchoring="true"
+                     :scroll-y="true"
+                     :scroll-with-animation="true" :enable-back-to-top="true" @scrolltolower="onLower">
+          <view class="item" @click="$global.navToGoods(item.id)" v-for="(item, index) in dataList"
+                :key="index">
+            <image class="cover" :src="item.image" mode="scaleToFill"/>
+            <view class="name more-t">{{ item.storeName }}</view>
+            <view class="price bold">￥{{ item.price }}</view>
+          </view>
+        </scroll-view>
+
+        <image class="img-nodata" :src="webUrl+'/20231023131208675588.png'" mode="scaleToFill" v-if="dataList.length===0"/>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import {fetchNormal, getCategory} from "@/api/store";
+
+export default {
+  name: "nativeList",
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      keyword: "",
+      asideList: [],
+      asideIndex: 0,
+      dataList: [], // 列表数据
+      tabList: [],
+      cityId: null,
+      cityName: "",
+      page: 1,
+      listHeight: "auto"
+    }
+  },
+  onLoad(option) {
+    this.cityId = option.cityId;
+    this.init();
+  },
+  methods: {
+    goCity() {
+      uni.redirectTo({
+        url: `/pages/chose-city/chose-city?type=0&city=${this.cityName}`
+      })
+    },
+    init() {
+      getCategory(0, 35, this.cityId, true).then(({data}) => {
+        this.tabList = data;
+        this.asideList = data[0].children;
+        let memCityName = uni.getStorageSync("cityName")
+        if (memCityName.length) {
+          this.cityName = memCityName;
+          uni.removeStorageSync("cityName")
+        }
+        this.search();
+      });
+    },
+    onLower() {
+      this.page++;
+      this.search();
+    },
+    search() {
+      let that = this;
+      let param = {
+        isGood: 1,
+        page: this.page,
+        keyword: this.keyword,
+        cityName: this.cityName,
+        sid: this.asideList[this.asideIndex].id
+      };
+
+      fetchNormal(param).then(({data}) => {
+        if (this.page === 1) {
+          this.dataList = [];
+        }
+        this.dataList = this.dataList.concat(data);
+        uni.getSystemInfo({
+          success: function (res) {
+            let len = that.dataList.length;
+            let {windowHeight} = res;
+            that.listHeight = "auto";
+            if (windowHeight > 600 && len > 6) {
+              that.listHeight = "100%";
+            }
+            if (windowHeight <= 600 && len > 4) {
+              that.listHeight = "100%";
+            }
+          }
+        });
+      }).catch(err => {
+        uni.showToast({
+          title: err + '',
+          icon: 'none',
+          mask: false,
+          duration: 1500
+        });
+      })
+    },
+    tabsTap(item) {
+      this.asideList = item.children;
+      this.asideIndex = 0;
+      this.page = 1;
+      this.search();
+    },
+    asideTap(index) {
+      this.asideIndex = index;
+      this.page = 1;
+      this.search();
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+@import "@/assets/css/product.less";
+
+.pkg-product-list {
+  height: 100vh;
+  overflow-y: hidden;
+
+  .top-box {
+    height: 142rpx;
+    background: #FF564A;
+  }
+
+  .line-location {
+    padding: 20rpx;
+    font-size: 28rpx;
+
+    image {
+      width: 36rpx;
+      height: 36rpx;
+      margin-right: 4rpx;
+    }
+  }
+
+  .body-box {
+    height: calc(100vh - 142rpx);
+
+    .article-box {
+      .item {
+        height: 362rpx;
+      }
+    }
+  }
+
+  .img-nodata {
+    position: relative;
+    top: 200rpx;
+    left: 50%;
+    transform: translate(-50%, 0);
+    width: 352rpx;
+    height: 338rpx;
+  }
+}
+</style>