My first API success ye

fore-end/API/goods.js

@@ -0,0 +1,11 @@
+const { http } = require('../utils/util')
+
+function getGoods() {
+    return http({url: '/goods/recommend', data: this.data}).then((res) => {
+        console.log(res);
+    })
+}
+
+module.exports = {
+    getGoods
+}

fore-end/pages/classify/classify.js

@@ -1,20 +1,37 @@
 // pages/classify/classify.js
+const { http } = require('../../utils/util')
+
+const API = {
+    getCategoryURL: '/category'
+}
+
 Page({
 
     /**
      * 页面的初始数据
      */
     data: {
-
+        classifyList: []
     },
 
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad(options) {
-
+        this.getClassifyList()
     },
 
+    getClassifyList() {
+        http({url: API.getCategoryURL, data: this.data}).then((res) => {
+            wx.setStorageSync('classifyList',res);
+            let classifyList = wx.getStorageSync('classifyList')
+            this.setData({
+                classifyList: [...res],
+                imgUrl: classifyList[0].Pic,
+                classifyName: classifyList[0].Name
+            })
+        })
+    },
     /**
      * 生命周期函数--监听页面初次渲染完成
      */

fore-end/pages/classify/classify.wxml

@@ -4,29 +4,11 @@
     <view class="classify_topic">categories</view>
     <!-- 展示分类 -->
     <view class="classify_list">
-        <view class="categories">
+        <view class="categories" wx:for="{{classifyList}}">
             <view class="categories_card">
-                <van-image width="90" height="90" fit="cover" src="https://img.js.design/assets/smartFill/img394164da755928.jpeg" />
+                <van-image width="90" height="90" fit="cover" src="{{item.Pic}}" />
             </view>
-            <view class="text">分类1</view>
-        </view>
-        <view class="categories">
-            <view class="categories_card">
-                <van-image width="90" height="90" fit="cover" src="https://img.js.design/assets/smartFill/img394164da755928.jpeg" />
-            </view>
-            <view class="text">分类1</view>
-        </view>
-        <view class="categories">
-            <view class="categories_card">
-                <van-image width="90" height="90" fit="cover" src="https://img.js.design/assets/smartFill/img394164da755928.jpeg" />
-            </view>
-            <view class="text">分类1</view>
-        </view>
-        <view class="categories">
-            <view class="categories_card">
-                <van-image width="90" height="90" fit="cover" src="https://img.js.design/assets/smartFill/img394164da755928.jpeg" />
-            </view>
-            <view class="text">分类1</view>
+            <view class="text">{{item.Name}}</view>
         </view>
     </view>
 </view>

fore-end/pages/home/home.js

@@ -1,9 +1,10 @@
 // pages/home/home.js
 const { http } = require('../../utils/util')
+const { getGoods } = require('../../utils/util')
 
 const API = {
     getCategoryURL: '/category',
-    getGoodsURL: '/goods/category/{page}/{pageSize}'
+    getGoodsMessage: '/goods/recommend'
 }
 
 Page({
@@ -13,9 +14,7 @@ Page({
      */
     data: {
         //存放分类列表
-        classifyList: [],
-        imgUrl: '',
-        classifyName: '',
+        classifyList: []
     },
 
     classifyTo() {
@@ -32,15 +31,27 @@ Page({
      * 生命周期函数--监听页面加载
      */
     onLoad(options) {
-        this.getClassifyList()
+        this.getClassifyList(),
+        this.getGoodsList()    
     },
 
     getClassifyList() {
         http({url: API.getCategoryURL, data: this.data}).then((res) => {
-            
+            wx.setStorageSync('classifyList',res);
+            let classifyList = wx.getStorageSync('classifyList')
+            this.setData({
+                classifyList: [...res],
+                imgUrl: classifyList[0].Pic,
+                classifyName: classifyList[0].Name
+            })
         })
     },
 
+    getGoodsList() {
+        getGoods({url: API.getGoodsMessage, data: this.data}).then((res) => {
+            console.log(res);
+        })
+    },
     /**
      * 生命周期函数--监听页面初次渲染完成
      */

fore-end/pages/home/home.wxml

@@ -33,25 +33,9 @@
 
  <!-- 分类推荐 -->
 <scroll-view scroll-x style='display: flex;white-space:nowrap; margin-top: 80rpx;'>
-    <view class="categories_card">
-        <van-image width="75" height="75" radius="20rpx" src="{{imgUrl}}" />
-        <view class="name_show">{{classifyName}}</view>
-    </view>
-    <view class="categories_card">
-        <van-image width="75" height="75" radius="20rpx" src="{{imgUrl}}" />
-        <view class="name_show">衣物</view>
-    </view>
-    <view class="categories_card">
-        <van-image width="75" height="75" radius="20rpx" src="{{imgUrl}}" />
-        <view class="name_show">衣物</view>
-    </view>
-    <view class="categories_card">
-        <van-image width="75" height="75" radius="20rpx" src="{{imgUrl}}" />
-        <view class="name_show">衣物</view>
-    </view>
-    <view class="categories_card">
-        <van-image width="75" height="75" radius="20rpx" src="{{imgUrl}}" />
-        <view class="name_show">衣物</view>
+    <view class="categories_card" wx:for="{{classifyList}}" wx:key="item.Id">
+        <van-image width="75" height="75" radius="20rpx" src="{{item.Pic}}" />
+        <view class="name_show">{{item.Name}}</view>
     </view>
 </scroll-view>
 

fore-end/pages/search/search.json

@@ -1,5 +1,6 @@
 {
     "usingComponents": {
-        "van-search": "@vant/weapp/search/index"
+        "van-search": "@vant/weapp/search/index",
+        "avater": "/components/avatar/avatar"
     }
 }

fore-end/pages/search/search.wxml

@@ -5,5 +5,39 @@
         <van-icon name="search" size="50rpx" color="#696969" style="margin-top: 15rpx; margin-left: -430rpx;"/>
         <input type="search" name="" placeholder="搜索..." class="search_text"/>
     </view>
-    <view class="search_btton"></view>
+    <!-- 搜索按钮 -->
+    <view class="search_button">搜索</view>
+</view>
+
+<!-- 搜索历史 -->
+<view class="history">
+    <view class="history_title">搜索历史</view>
+    <!-- 清空 -->
+    <view class="empty">
+        <van-icon name="delete-o" />\t
+        <text>清空</text>
+    </view>
+    <!-- 历史记录展示 -->
+    <view class="history_show">
+        <view class="history_card">
+            <text space="nbsp">  iPhone手机  </text>
+        </view>
+    </view>
+</view>
+
+<!-- 猜你喜欢界面 -->
+<view class="prefer">
+    <!-- 标题 -->
+    <view style="font-size: 35rpx; margin-left: 8rpx; color: #494545;">猜你喜欢</view>
+    <!-- 刷新 -->
+    <view class="refresh">
+        <van-icon name="replay" color="#494545"/>
+    </view>
+    <!-- 商品卡片展示 -->
+    <view class="commodity">
+        <view class="commodity_card">
+            <image src="https://img.js.design/assets/smartFill/img352164da74c4b8.jpeg" mode="" class="commodity_img"/>
+            <avater class="avater"></avater>
+        </view>
+    </view>
 </view>

fore-end/pages/search/search.wxss

@@ -1,5 +1,5 @@
 /* pages/search/search.wxss */
-.search_box {
+.base_search {
     width: 80%;
     height: 80rpx;
     background-color: #E8E7E7;
@@ -10,5 +10,78 @@
     float: left;
     padding-left: 95rpx;
     padding-top: 15rpx;
-    background-color: ;
+}
+
+.search_button {
+    float: right;
+    margin-top: -64rpx;
+    margin-right: 20rpx;
+    font-size: 35rpx;
+    color: #494545;
+}
+
+/* 搜索历史 */
+.history {
+    width: 100%;
+    height: 200rpx;
+    margin-top: 20rpx;
+    color: #494545;
+}
+
+.history_title {
+    float: left;
+    margin-left: 8rpx;
+}
+
+.empty {
+    margin-left: 580rpx;
+}
+
+.history_show {
+    width: 100%;
+    height: 100rpx;
+    margin-top: 20rpx;
+}
+
+.history_card {
+    width: fit-content;
+    height: 65rpx;
+    background-color: #E8E7E7;
+    border-radius: 20rpx;
+    line-height: 65rpx;
+}
+
+/* 猜你喜欢 */
+.refresh {
+    float: right;
+    margin-top: -35rpx;
+}
+
+.commodity {
+    margin-top: 20rpx;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.commodity_card {
+    top: 10rpx;
+    position: relative;
+    display: flex;
+    width: 46%;
+    height: 380rpx;
+    padding: 10rpx;
+    justify-content: center;
+}
+
+.commodity_img {
+    height: 350rpx;
+    border-radius: 20rpx;
+}
+
+.avater {
+    position: absolute;
+    top: -160rpx;
+    left: 15rpx;
+    width: 150rpx;
+    color: white;
 }

fore-end/project.private.config.json

@@ -2,7 +2,7 @@
     "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
     "projectname": "WeChatTrading",
     "setting": {
-        "compileHotReLoad": true,
+        "compileHotReLoad": false,
         "urlCheck": false
     }
 }

fore-end/utils/util.js

@@ -24,8 +24,8 @@ function http(url, option) {
           ...option,
           method: 'GET',
           success: (res) => {
-              const {code, message, data} = res.data;
-              console.log(res);
+            console.log(res);
+            const {code, message, data} = res.data;
               if(code == 200) {
                 resolve(data);
               } else {
@@ -42,7 +42,32 @@ function http(url, option) {
     })
 }
 
+function getGoods(url, option) {
+    return new Promise((resolve, reject) => {
+        wx.request({
+          url: baseURL + url.url,
+          ...option,
+          method: 'GET',
+          success: (res) => {
+            console.log(res);
+            const {code, message, data} = res.data;
+              if(code == 500) {
+                resolve(data);
+              } else {
+                Toast.fail('系统异常');
+                reject();
+              }
+          },
+          fail: (err) => {
+            Toast.fail('系统异常');
+            console.log(err);
+            reject(err);
+          }
+        })
+    })
+}
 module.exports = {
   formatTime,
-  http
+  http,
+  getGoods
 }