添加地址功能：手机号需要添加正则验证

pages/mall/list.vue

@@ -1,27 +1,40 @@
 <script setup>
   import { reactive, ref } from 'vue'
   import { onLoad } from '@dcloudio/uni-app'
-  import { getCategory } from '@/api/mall'
+  import { getCategory, getProductList } from '@/api/mall'
+  import { navigateTo } from '@/utils/router'
 
-  // 顶部分类选项
+  /** 顶部分类选项 */
   const topNavOptions = ref([])
   const formData = reactive({
     name: '',
     type: '0'
   })
+  /** 商品列表 */
+  const cardList = ref([])
 
   const categoryList = async () => {
     const res = await getCategory()
     topNavOptions.value = res.data
-    console.log(res.data, '===22==')
+  }
+
+  const getListData = async () => {
+    const res = await getProductList()
+    cardList.value = res.rows
+    console.log(res.rows)
   }
 
   const onTop = value => {
     formData.type = value
   }
 
-  onLoad(() => {
-    categoryList()
+  const onGo = item => {
+    navigateTo('/pages/mall/detail', { productId: item.id })
+  }
+
+  onLoad(async () => {
+    await categoryList()
+    await getListData()
   })
 </script>
 
@@ -31,8 +44,8 @@
       <cb-search v-model="formData.name"></cb-search>
       <view class="top-options">
         <view
-          v-for="item in topNavOptions"
-          :key="item.value"
+          v-for="(item, index) in topNavOptions"
+          :key="index"
           :class="{ active: item.id === formData.type }"
           class="text"
           @click="onTop(item.id)"
@@ -44,22 +57,27 @@
 
     <!-- 商品卡片 -->
     <view class="card-list">
-      <view v-for="item in 3" :key="item" class="card-item">
+      <view
+        v-for="item in cardList"
+        :key="item.id"
+        class="card-item"
+        @click="onGo(item)"
+      >
         <image
-          src="https://wx1.sinaimg.cn/mw690/92eeb099gy1i29hl0ne80j21jk2bcash.jpg"
+          :src="item.mainImage"
           mode="scaleToFill"
           class="imghead"
         ></image>
-        <text class="title">名称</text>
+        <text class="title">{{ item.productName }}</text>
         <view class="price">
           <view class="num-box">
             <text class="num">￥</text>
-            <text class="num">0.00</text>
+            <text class="num">{{ item.minPrice }}</text>
           </view>
-          <text class="buy">好评率：99%</text>
+          <!-- <text class="buy">好评率：99%</text> -->
         </view>
         <!-- 拼单数量 -->
-        <text class="bottom-name">拼单数量:12505件</text>
+        <text class="bottom-name">拼单数量:{{ item.salesCount }}件</text>
       </view>
     </view>
   </view>