Second commit

fore-end/API/categories.js

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

fore-end/API/classifyGoods.js

@@ -0,0 +1,14 @@
+const { http } = require('../utils/util')
+
+const API = {
+    getCategoryGoods: '/goods/category/{page}/{pageSize}'
+}
+
+function getClassifyGoods(data) {
+    // return http( API.getCategoryGoods, {data: data})
+    return http({url: API.getCategoryGoods, data: data})
+}
+
+module.exports = {
+    getClassifyGoods
+}

fore-end/app.json

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

fore-end/app.wxss

@@ -14,6 +14,7 @@ page {
     /* padding右边不起效果解决办法 */
     box-sizing:border-box;
     background-color: #f5f5f5;
+    --themeColor: #FFC300;/*定义全局颜色*/
 }
 
 /* text样式 */
@@ -29,9 +30,9 @@ page {
 
 /* 文字下方黄色横线 */
 .color_block {
-    width: 215rpx;
+    width: 90rpx;
     height: 20rpx;
-    background-color: #FFC300;
+    background-color: var(--themeColor);
     opacity: 0.8;
     z-index: -1;
 }

fore-end/pages/classify/classify.wxml

@@ -1,10 +1,10 @@
 <!--pages/classify/classify.wxml-->
 <view>
     <!-- 标题 -->
-    <view class="classify_topic">categories</view>
+    <view class="classify_topic">分类</view>
     <!-- 展示分类 -->
     <view class="classify_list">
-        <view class="categories" wx:for="{{classifyList}}">
+        <view class="categories" wx:for="{{classifyList}}" wx:key="Id">
             <view class="categories_card">
                 <van-image width="90" height="90" fit="cover" src="{{item.Pic}}" />
             </view>

fore-end/pages/classify/classify.wxss

@@ -10,8 +10,8 @@ image {
     font-size: 80rpx;
     font-weight: 800;
     color: #808080;
-    margin-top: 70rpx;
-    margin-left: 167rpx;
+    margin: 70rpx;
+    text-align: center;
 }
 
 .classify_list {

fore-end/pages/classify_detail/classify_detail.js

@@ -0,0 +1,78 @@
+// pages/classify_detail/classify_detail.js
+// const { http } = require('../../utils/util')
+const { getClassifyGoods } = require('../../API/classifyGoods')
+
+Page({
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+        classifyShow: [],
+        page: 1,
+        pageSize: 6
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad(options) {
+        this.getGoods()
+        // console.log(options);
+        // var id = options;
+    },
+
+    getGoods() {
+        getClassifyGoods(this.data).then((res) => {
+            console.log(res);
+        })
+    },
+    /**
+     * 生命周期函数--监听页面初次渲染完成
+     */
+    onReady() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面显示
+     */
+    onShow() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面隐藏
+     */
+    onHide() {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面卸载
+     */
+    onUnload() {
+
+    },
+
+    /**
+     * 页面相关事件处理函数--监听用户下拉动作
+     */
+    onPullDownRefresh() {
+
+    },
+
+    /**
+     * 页面上拉触底事件的处理函数
+     */
+    onReachBottom() {
+
+    },
+
+    /**
+     * 用户点击右上角分享
+     */
+    onShareAppMessage() {
+
+    }
+})

fore-end/pages/classify_detail/classify_detail.json

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

fore-end/pages/classify_detail/classify_detail.wxml

@@ -0,0 +1,8 @@
+<!--pages/classify_detail/classify_detail.wxml-->
+<view class="title">
+    <text class="text">分类一</text>
+</view>
+<!-- 商品展示 -->
+<view class="goodsShow">
+    <commodity_card></commodity_card>
+</view>

fore-end/pages/classify_detail/classify_detail.wxss

@@ -0,0 +1,21 @@
+/* pages/classify_detail/classify_detail.wxss */
+.title {
+    position: fixed;
+    width: 100%;
+    height: 60rpx;
+    margin-top: -20rpx;
+    margin-left: -20rpx;
+    z-index: 100;
+    background-color:  var(--themeColor);
+}
+
+.text {
+    line-height: 60rpx;
+    margin-left: 315rpx;
+}
+
+.goodsShow {
+    margin-top: 50rpx;
+    height: 1500rpx;
+}
+

fore-end/pages/home/home.js

@@ -1,11 +1,7 @@
 // pages/home/home.js
-const { http } = require('../../utils/util')
-const { getGoods } = require('../../utils/util')
+const { getCategoryAPI } = require('../../API/categories')
+const { getClassifyGoods } = require('../../API/classifyGoods')
 
-const API = {
-    getCategoryURL: '/category',
-    getGoodsMessage: '/goods/recommend'
-}
 
 Page({
 
@@ -14,9 +10,16 @@ Page({
      */
     data: {
         //存放分类列表
-        classifyList: []
+        classifyList: [],
+        //用于存放页面上划高度
+        scrollTop: 0,
     },
 
+    userTo() {
+        wx.switchTab({
+          url: '/pages/user/user',
+        })
+    },
     classifyTo() {
         wx.switchTab({//tabBar页面跳转要用wx.switchTab
           url: '/pages/classify/classify',
@@ -27,29 +30,31 @@ Page({
           url: '/pages/search/search',
         })
     },
+    //获取点击分类的id
+    detailClassifyTo({ currentTarget }) {
+        const id = currentTarget.dataset.num;
+        wx.navigateTo({
+            url: '/pages/classify_detail/classify_detail?classify_id=' + id,
+        })
+    },
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad(options) {
-        this.getClassifyList(),
-        this.getGoodsList()    
+        this.getClassifyList();
     },
 
     getClassifyList() {
-        http({url: API.getCategoryURL, data: this.data}).then((res) => {
-            wx.setStorageSync('classifyList',res);
-            let classifyList = wx.getStorageSync('classifyList')
+        getCategoryAPI(this.data).then((data) => {
             this.setData({
-                classifyList: [...res],
-                imgUrl: classifyList[0].Pic,
-                classifyName: classifyList[0].Name
+                classifyList: data
             })
         })
     },
 
     getGoodsList() {
-        getGoods({url: API.getGoodsMessage, data: this.data}).then((res) => {
-            console.log(res);
+        getClassifyGoods(this.data).then((data) => {
+            console.log(data);
         })
     },
     /**
@@ -100,6 +105,16 @@ Page({
     onShareAppMessage() {
 
     },
+
+    /**
+     * 监听页面滑动
+     */
+    onPageScroll(data) {
+        // console.log(data.scrollTop);
+        this.setData({
+            scrollTop: data.scrollTop
+        })
+    }
 })
 
 

fore-end/pages/home/home.wxml

@@ -1,19 +1,21 @@
 <!--pages/home/home.wxml-->
 <!-- 头部 -->
 <view class="head">
-    <!-- 头像 -->
-    <view class="head-portrait-bg">
-        <van-image width="100rpx" height="100rpx" fit="cover" src="/assets/home_img/head_portrait.jpg" radius="20rpx"></van-image>
+    <view bind:tap="userTo">
+        <!-- 头像 -->
+        <view class="head-portrait-bg">
+            <van-image width="100rpx" height="100rpx" fit="cover" src="/assets/home_img/head_portrait.jpg" radius="20rpx"></van-image>
+        </view>
+        <!-- 昵称 -->
+        <view class="username">deter</view>
     </view>
-    <!-- 昵称 -->
-    <view class="username">deter</view>
     <!-- 消息提示 -->
     <view>
-        <van-icon name="bell" custom-style="margin" class="head_bell" size="50rpx" info="9" color="#FFC300"/>
+        <van-icon name="bell" custom-style="margin" class="head_bell" size="50rpx" info="9" color="var(--themeColor)"/>
     </view>
 </view>
 <!-- 搜索框 -->
-<view class="search_box">
+<view class="search_box {{scrollTop > 85 ? 'addClass' : ''}}">
     <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"/>
@@ -24,24 +26,26 @@
 <view class="categories">
     <!-- categories -->
     <view style="position: relative;">
-        <view class="text">categories</view>
+        <view class="text">分类</view>
         <view class="color_block categories_block "></view>
     </view>
     <!-- 点击前往分类页面 -->
-    <view class="text_small" bind:tap="classifyTo">Browser more</view>
+    <view class="text_small" bind:tap="classifyTo">更多分类</view>
 </view>
 
  <!-- 分类推荐 -->
 <scroll-view scroll-x style='display: flex;white-space:nowrap; margin-top: 80rpx;'>
-    <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 class="categories_card" wx:for="{{classifyList}}" wx:for-item="item" wx:key="index">
+        <view bind:tap="detailClassifyTo" data-num='{{item.Id}}'>
+            <van-image width="75" height="75" radius="20rpx" src="{{item.Pic}}" />
+            <view class="name_show">{{item.Name}}</view>
+        </view>
     </view>
 </scroll-view>
 
 <!-- 商品展示 -->
 <view style="position: relative;">
-    <view class="display_text text">Recommend</view>
+    <view class="display_text text">推荐商品</view>
     <view class="color_block recommend_block"></view>
 </view>
 

fore-end/pages/home/home.wxss

@@ -41,6 +41,13 @@
     border-radius: 20rpx;
 }
 
+.addClass {
+    position: fixed;
+    top: 0rpx;
+    z-index: 100;
+    margin-right: 20rpx;
+}
+
 .search_text {
     float: left;
     padding-left: 15rpx;
@@ -71,15 +78,13 @@ button[plain]{ border:0 }
 }
 
 .categories view:nth-child(2) {
-    float: left;
-    margin-left: 150rpx;
+    float: right;
     margin-top: 12rpx;
 }
 
 .categories_block {
     position: absolute;
     top: 18rpx;
-    left: -153rpx;
 }
 
 /* 分类卡片展示 */
@@ -103,7 +108,7 @@ button[plain]{ border:0 }
 /* 商品 */
 .recommend_block {
     position: absolute;
-    width: 255rpx;
+    width: 170rpx;
     top: 32rpx
 }
 

fore-end/project.private.config.json

@@ -4,5 +4,25 @@
     "setting": {
         "compileHotReLoad": false,
         "urlCheck": false
+    },
+    "condition": {
+        "miniprogram": {
+            "list": [
+                {
+                    "name": "",
+                    "pathName": "pages/home/home",
+                    "query": "",
+                    "launchMode": "default",
+                    "scene": null
+                },
+                {
+                    "name": "",
+                    "pathName": "pages/classify_detail/classify_detail",
+                    "query": "classify_id=1",
+                    "launchMode": "default",
+                    "scene": null
+                }
+            ]
+        }
     }
 }

fore-end/utils/util.js

@@ -1,5 +1,5 @@
 import Toast from '@vant/weapp/toast/toast';
-const baseURL = "http://192.168.31.29:8084";//后台服务提供的地址
+const baseURL = "http://192.168.31.28:8084";//后台服务提供的地址
 
 const formatTime = date => {
   const year = date.getFullYear()
@@ -24,34 +24,11 @@ function http(url, option) {
           ...option,
           method: 'GET',
           success: (res) => {
-            console.log(res);
+            // console.log(res);
             const {code, message, data} = res.data;
               if(code == 200) {
                 resolve(data);
-              } else {
-                Toast.fail('系统异常');
-                reject();
-              }
-          },
-          fail: (err) => {
-            Toast.fail('系统异常');
-            console.log(err);
-            reject(err);
-          }
-        })
-    })
-}
-
-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) {
+              } else if(code == 500) {
                 resolve(data);
               } else {
                 Toast.fail('系统异常');
@@ -66,8 +43,8 @@ function getGoods(url, option) {
         })
     })
 }
+
 module.exports = {
   formatTime,
-  http,
-  getGoods
+  http
 }