Add little

fore-end/API/categories.js

@@ -1,9 +1,17 @@
 const { http } = require('../utils/util')
 
-const API = {
-    getCategoryURL: '/category'
-}
 
-function getCategoryIMG() {
-    
+
+// function getCategoryIMG(data) {
+//     return http(
+//         API.getCategoryURL,
+//         {
+//             method: 'GET',
+//             data: data
+//         }
+//     )
+// }
+
+module.exports = {
+    getCategoryIMG
 }

fore-end/app.json

@@ -11,7 +11,8 @@
         "pages/append/append",
         "pages/message/message",
         "pages/user/user",
-        "pages/details/details"
+        "pages/details/details",
+        "pages/search/search"
     ],
     "window": {
         "backgroundTextStyle": "light",

fore-end/components/avatar/avatar.wxml

@@ -1,7 +1,7 @@
 <!--components/avatar/avatar.wxml-->
 <view class="seller">
-    <view class="avatar_pic">
-        <image src="/assets/home_img/head_portrait.jpg" mode=""/>
+    <view class="avater">
+        <image src="/assets/home_img/head_portrait.jpg" mode="" class="avatar_pic"/>
     </view>
     <view class="seller_name">deter</view>
 </view>

fore-end/components/avatar/avatar.wxss

@@ -5,16 +5,18 @@
     left: 12rpx;
 }
 
-.seller view {
+.avater{
     float: left;
 }
 
-.avatar_pic image{
+.avatar_pic {
     width: 45rpx !important;
     height: 45rpx !important;
+    border-radius: 20rpx;
 }
 
 .seller_name {
+    float: left;
     margin-left: 10rpx;
     font-weight: 300;
 }

fore-end/components/categories_card/categories_card.js

@@ -1,25 +0,0 @@
-// components/categories_card/categories_card.js
-Component({
-
-    externalClasses: ['card-class'],
-    /**
-     * 组件的属性列表
-     */
-    properties: {
-
-    },
-
-    /**
-     * 组件的初始数据
-     */
-    data: {
-
-    },
-
-    /**
-     * 组件的方法列表
-     */
-    methods: {
-
-    }
-})

fore-end/components/categories_card/categories_card.json

@@ -1,4 +0,0 @@
-{
-    "component": true,
-    "usingComponents": {}
-}

fore-end/components/categories_card/categories_card.wxml

@@ -1,4 +0,0 @@
-<!--components/categories_card/categories_card.wxml-->
-<view class="categories_card card-class">
-    <view class="name_show">衣物</view>
-</view>

fore-end/components/categories_card/categories_card.wxss

@@ -1,20 +0,0 @@
-/* components/categories_card/categories_card.wxss */
-.categories_card {
-    width: 150rpx;
-    height: 150rpx;
-    display: inline-block;
-    background-color: pink;
-    margin-right: 10rpx;
-    border-radius: 20rpx;
-}
-
-.name_show {
-    position: absolute;
-    top: 93rpx;
-    width: 150rpx;
-    height: 60rpx;
-    background-color: #eeeeee;
-    opacity: 0.7;
-    text-align: center;
-    line-height: 60rpx;
-}

fore-end/components/commodity_card/commodity_card.wxml

@@ -1,15 +1,15 @@
 <!--components/commodity_card/commodity_card.wxml-->
 <view class="commodity">
     <view class="commodity_show" bind:tap="detailTo">
-        <image src="/assets/recommend_img/recom_1.jpg" alt=""/>
+        <image src="/assets/recommend_img/recom_1.jpg" alt="" class="commodity_image"/>
         <text class="commodity_name">产品名称</text>
         <text class="price">￥49.9</text>
         <avatar></avatar>
     </view>
     <view class="commodity_show">
-        <image src="/assets/recommend_img/recom_2.jpg" mode=""/>
+        <image src="/assets/recommend_img/recom_2.jpg" mode="" class="commodity_image"/>
     </view>
     <view class="commodity_show">
-        <image src="/assets/recommend_img/recom_3.jpg" mode=""/>
+        <image src="/assets/recommend_img/recom_3.jpg" mode="" class="commodity_image"/>
     </view>
 </view>

fore-end/components/commodity_card/commodity_card.wxss

@@ -12,10 +12,9 @@
     height: 500rpx;
     padding: 7rpx;
     justify-content: center;
-    /* background-color: skyblue; */
 }
 
-.commodity_show image {
+.commodity_image {
     width: 340rpx;
     height: 340rpx;
     border-radius: 20rpx;

fore-end/pages/classify/classify.json

@@ -1,5 +1,3 @@
 {
-    "usingComponents": {
-        "categories_card": "/components/categories_card/categories_card"
-    }
+    "usingComponents": {}
 }

fore-end/pages/home/home.js

@@ -1,13 +1,21 @@
 // pages/home/home.js
 const { http } = require('../../utils/util')
 
+const API = {
+    getCategoryURL: '/category',
+    getGoodsURL: '/goods/category/{page}/{pageSize}'
+}
+
 Page({
 
     /**
      * 页面初始数据
      */
     data: {
-        
+        //存放分类列表
+        classifyList: [],
+        imgUrl: '',
+        classifyName: '',
     },
 
     classifyTo() {
@@ -15,11 +23,22 @@ Page({
           url: '/pages/classify/classify',
         })
     },
+    searchTo() {
+        wx.navigateTo({
+          url: '/pages/search/search',
+        })
+    },
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad(options) {
+        this.getClassifyList()
+    },
 
+    getClassifyList() {
+        http({url: API.getCategoryURL, data: this.data}).then((res) => {
+            
+        })
     },
 
     /**

fore-end/pages/home/home.json

@@ -1,6 +1,5 @@
 {
     "usingComponents": {
-        "categories_card": "/components/categories_card/categories_card",
         "commodity_card": "/components/commodity_card/commodity_card"
     }
 }

fore-end/pages/home/home.wxml

@@ -14,7 +14,7 @@
 </view>
 <!-- 搜索框 -->
 <view class="search_box">
-    <input type="search" name="" placeholder="搜索..." class="search_text"/>
+    <input type="search" name="" placeholder="搜索..." class="search_text" bind:tap="searchTo"/>
     <button class="search_button" plain="true">
         <van-icon class="search_icon" name="search" size="50rpx"/>
     </button>
@@ -33,11 +33,26 @@
 
  <!-- 分类推荐 -->
 <scroll-view scroll-x style='display: flex;white-space:nowrap; margin-top: 80rpx;'>
-    <categories_card></categories_card>
-    <categories_card></categories_card>
-    <categories_card></categories_card>
-    <categories_card></categories_card>
-    <categories_card></categories_card>
+    <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>
 </scroll-view>
 
 <!-- 商品展示 -->
@@ -48,3 +63,5 @@
 
 <!-- 商品卡片 -->
 <commodity_card></commodity_card>
+
+<van-toast id="van-toast" />

fore-end/pages/home/home.wxss

@@ -81,6 +81,23 @@ button[plain]{ border:0 }
     top: 18rpx;
     left: -153rpx;
 }
+
+/* 分类卡片展示 */
+.categories_card {
+    display: inline-block;
+    margin-right: 10rpx;
+}
+
+.name_show {
+    position: absolute;
+    top: 93rpx;
+    width: 150rpx;
+    height: 60rpx;
+    background-color: #eeeeee;
+    opacity: 0.7;
+    text-align: center;
+    line-height: 60rpx;
+}
 /* ------------------------------ */
 
 /* 商品 */

fore-end/pages/search/search.js

@@ -0,0 +1,66 @@
+// pages/search/search.js
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

fore-end/pages/search/search.json

@@ -0,0 +1,5 @@
+{
+    "usingComponents": {
+        "van-search": "@vant/weapp/search/index"
+    }
+}

fore-end/pages/search/search.wxml

@@ -0,0 +1,9 @@
+<!--pages/search/search.wxml-->
+<!-- 搜素框 -->
+<view class="search_box">
+    <view class="base_search">
+        <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>

fore-end/pages/search/search.wxss

@@ -0,0 +1,14 @@
+/* pages/search/search.wxss */
+.search_box {
+    width: 80%;
+    height: 80rpx;
+    background-color: #E8E7E7;
+    border-radius: 20rpx;
+}
+
+.search_text {
+    float: left;
+    padding-left: 95rpx;
+    padding-top: 15rpx;
+    background-color: ;
+}

fore-end/utils/util.js

@@ -1,5 +1,5 @@
 import Toast from '@vant/weapp/toast/toast';
-const baseURL = "http://192.168.31.28:8084";//后台服务提供的地址
+const baseURL = "http://192.168.31.29:8084";//后台服务提供的地址
 
 const formatTime = date => {
   const year = date.getFullYear()
@@ -20,10 +20,12 @@ const formatNumber = n => {
 function http(url, option) {
     return new Promise((resolve, reject) => {
         wx.request({
-          url: baseURL + url,
+          url: baseURL + url.url,
           ...option,
-          success(res) {
-              const {code, message, data} = JSON.parse(res.data);
+          method: 'GET',
+          success: (res) => {
+              const {code, message, data} = res.data;
+              console.log(res);
               if(code == 200) {
                 resolve(data);
               } else {
@@ -31,7 +33,7 @@ function http(url, option) {
                 reject();
               }
           },
-          fail(err) {
+          fail: (err) => {
             Toast.fail('系统异常');
             console.log(err);
             reject(err);