代码提交

pages/goodsList/goodsList.vue

@@ -2,23 +2,22 @@
   <layout>
     <uv-sticky customNavHeight="0">
       <uv-navbar
-        :fixed="false"
-        title="商品列表"
-        left-arrow
-        @leftClick="$onClickLeft"
+          :fixed="false"
+          title="商品列表"
+          left-arrow
+          @leftClick="goBack"
       />
       <view class="search-bar">
         <uv-search
-          v-model="keyword"
-          shape="round"
-          placeholder="搜索商品"
-          show-action
-          @search="onSearch"
-          @cancel="onCancel"
+            v-model="keyword"
+            shape="round"
+            placeholder="搜索商品"
+            show-action
+            @custom="onSearch"
+            @clear="onSearch"
+            @search="onSearch"
+            @cancel="onCancel"
         >
-          <template #action>
-            <view @click="onSearch">搜索</view>
-          </template>
         </uv-search>
       </view>
     </uv-sticky>
@@ -26,50 +25,69 @@
     <blank size="15"></blank>
 
     <container>
-      <uv-grid
-        :border="false"
-        :col="2"
-        :gutter="10"
-      >
-        <uv-grid-item
-          v-for="(item, index) in dataList"
-          :key="index"
+      <template v-if="!listEmpty">
+        <uv-grid
+            :border="false"
+            :col="1"
+            :gutter="10"
         >
-          <card style="margin-bottom: 10px;">
-            <goods
-              link
-              card
-              fill
-              :data="item"
-              :storeName="item.storeName"
-              :price="item.price"
-              :stock="item.stock"
-            >
-            </goods>
-          </card>
-        </uv-grid-item>
-      </uv-grid>
+          <uv-grid-item
+              v-for="(item, index) in dataList"
+              :key="index"
+          >
+            <card class="pro-card">
+              <goods
+                  link
+                  list
+                  :data="item"
+                  :storeName="item.storeName"
+                  :price="item.price"
+                  :stock="true"
+              >
+              </goods>
+            </card>
+          </uv-grid-item>
+        </uv-grid>
+      </template>
+      <Empty
+          v-else
+          :iconSrc="emptyIcon"
+      >
+        这里空空如也~
+      </Empty>
+      <!-- 加载中 -->
+      <ListLoadLoading v-if="loading" />
+      <!-- 加载完毕-->
+      <ListLoadOver v-if="loadend" />
     </container>
   </layout>
 </template>
 
 <script setup>
 
-import { ref } from 'vue'
 import { getProductList } from '@/api/product'
 import { onLoad } from '@dcloudio/uni-app'
 import { usePage } from '@/hooks'
+import { useRouter } from "@/hooks/useRouter";
+import Empty from "@/components/Empty/index.vue"
+import ListLoadOver from "@/components/ListLoadOver/index.vue"
+import ListLoadLoading from "@/components/ListLoadLoading/index.vue"
 
-const { keyword, refresh, dataList } = usePage(getProductList)
+import emptyIcon from "@/static/icon/empty/收藏.png"
 
-onLoad((option) => {
-  keyword.value = option.keyword || ''
-  console.log("--> % onLoad % option:\n", option)
+const {getParams, goBack} = useRouter()
+const {keyword, refresh, sid, dataList, loadend, loading, listEmpty} = usePage(getProductList)
+
+
+onLoad((options) => {
+  const params = getParams(options)
+  keyword.value = params.keyword || ''
+  sid.value = params.sid || ''
   refresh()
 })
 
 const onSearch = () => {
-  console.log("--> % keyword:\n", keyword.value)
+  console.log('点击搜索')
   refresh()
 }
 
@@ -84,5 +102,10 @@ const onCancel = () => {
 
 </script>
 
-<style lang="less">
+<style lang="scss">
+.pro-card {
+  margin-bottom: 20rpx;
+  border-radius: 15rpx;
+  width: 100%;
+}
 </style>