v1.0

pages/goodsList/goodsList.vue

@@ -0,0 +1,88 @@
+<template>
+  <layout>
+    <uv-sticky customNavHeight="0">
+      <uv-navbar
+        :fixed="false"
+        title="商品列表"
+        left-arrow
+        @leftClick="$onClickLeft"
+      />
+      <view class="search-bar">
+        <uv-search
+          v-model="keyword"
+          shape="round"
+          placeholder="搜索商品"
+          show-action
+          @search="onSearch"
+          @cancel="onCancel"
+        >
+          <template #action>
+            <view @click="onSearch">搜索</view>
+          </template>
+        </uv-search>
+      </view>
+    </uv-sticky>
+
+    <blank size="15"></blank>
+
+    <container>
+      <uv-grid
+        :border="false"
+        :col="2"
+        :gutter="10"
+      >
+        <uv-grid-item
+          v-for="(item, index) in dataList"
+          :key="index"
+        >
+          <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>
+    </container>
+  </layout>
+</template>
+
+<script setup>
+
+import { ref } from 'vue'
+import { getProductList } from '@/api/product'
+import { onLoad } from '@dcloudio/uni-app'
+import { usePage } from '@/hooks'
+
+const { keyword, refresh, dataList } = usePage(getProductList)
+
+onLoad((option) => {
+  keyword.value = option.keyword || ''
+  console.log("--> % onLoad % option:\n", option)
+  refresh()
+})
+
+const onSearch = () => {
+  console.log("--> % keyword:\n", keyword.value)
+  refresh()
+}
+
+const onClickLeft = () => {
+
+}
+
+const onCancel = () => {
+
+}
+
+
+</script>
+
+<style lang="less">
+</style>