get classify goods

fore-end/API/appraise.js

@@ -89,6 +89,7 @@ function getOrder(params) {
 	)
 }
 
+// 获取分类信息
 function getCategoryAPI() {
     // return http( API.getCategoryURL, {data: data})
     return request.get(
@@ -96,10 +97,10 @@ function getCategoryAPI() {
 	)
 }
 
+// 获取分类出来的商品信息
 function getClassifyGoods(data) {
-    // return http( API.getCategoryGoods, {data: data})
     return request.get(
-		API.getCategoryGoods+`/${data.page}/${data.pageSize}`
+		API.getCategoryGoods + `/${data.page}/${data.pageSize}` + '?category=' + data.id
 	)
 }
 

fore-end/app.js

@@ -35,33 +35,33 @@ var infoOption = {
 	//检测缓存是否有token
 	// console.log(wx.getStorageSync('token'));
 	if(wx.getStorageSync('token') == ''){
-		console.log('token不存在');
+		// console.log('token不存在');
 		// 登录
 		wx.login({
 			success: (res) => {
 				//获取用户昵称和头像
 				//和微信接口服务校验
-			  console.log("code: "+res.code);
+			//   console.log("code: "+res.code);
 			  var url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + wxInfo.appid + '&secret=' + wxInfo.appSecret + '&js_code=' + res.code + '&grant_type=authorization_code'
 			  wx.request({
 				url:url,
 				success: (res) => {
-					console.log(res);
-					console.log(res.data.openid);
+					// console.log(res);
+					// console.log(res.data.openid);
 					wx.setStorageSync('vid', res.data.openid);
-					console.log(wx.getStorageSync('vid'));
+					// console.log(wx.getStorageSync('vid'));
 					loginOption.data = {
 						vid: wx.getStorageSync('vid'),
 					}
-					console.log(loginOption.data);
+					// console.log(loginOption.data);
 					login(loginOption).then(res => {
-						console.log(res);
+						// console.log(res);
 						wx.setStorageSync('token', res.data.data.token);
 						wx.setStorageSync('uid', res.data.data.user_info.uid);
 						wx.setStorageSync('avatarUrl', res.data.data.user_info.avatar);
 						wx.setStorageSync('nickName', res.data.data.user_info.name);
 					}).catch(err => {
-						console.log(err);
+						// console.log(err);
 						wx.navigateTo({
 							url: '/pages/register/register',
 						})
@@ -72,38 +72,38 @@ var infoOption = {
 		  })
 	}else{
 		getUserInfo(infoOption).then(res => {
-			console.log(res);
-			console.log('token有效');
+			// console.log(res);
+			// console.log('token有效');
 			wx.setStorageSync('uid', res.data.data.uid);
 			wx.setStorageSync('avatarUrl', res.data.data.avatar);
 			wx.setStorageSync('nickName', res.data.data.name);
 			wx.setStorageSync('personalSignatrue', res.data.data.sign);
-			console.log(wx.getStorageSync('uid'));
+			// console.log(wx.getStorageSync('uid'));
 		}).catch(err => {
-			console.log('token已失效，请重新登录');
+			// console.log('token已失效，请重新登录');
 			wx.login({
 				success: (res) => {
 					//和微信接口服务校验
-				  console.log("code: "+res.code);
+				//   console.log("code: "+res.code);
 				  var url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' + wxInfo.appid + '&secret=' + wxInfo.appSecret + '&js_code=' + res.code + '&grant_type=authorization_code'
 				  wx.request({
 					url:url,
 					success: (res) => {
-						console.log(res);
-						console.log(res.data.openid);
+						// console.log(res);
+						// console.log(res.data.openid);
 						wx.setStorageSync('vid', res.data.openid);
-						console.log(wx.getStorageSync('vid'));
+						// console.log(wx.getStorageSync('vid'));
 						loginOption.data = {
 							vid: wx.getStorageSync('vid'),
 						}
 						login(loginOption).then(res => {
-							console.log(res);
+							// console.log(res);
 							wx.setStorageSync('token', res.data.data.token);
 							wx.setStorageSync('uid', res.data.data.user_info.uid);
 							wx.setStorageSync('avatarUrl', res.data.data.user_info.avatar);
 							wx.setStorageSync('nickName', res.data.data.user_info.name);
 						}).catch(err => {
-							console.log(err);
+							// console.log(err);
 							wx.navigateTo({
 								url: '/pages/register/register',
 							})

fore-end/components/commodity_card/commodity_card.js

@@ -1,27 +1,45 @@
 // components/commodity_card/commodity_card.js
+const { getClassifyGoods } = require('../../API/appraise')
+
 Component({
+    lifetimes: {
+        created: function() {
+
+        }
+    },
     /**
      * 组件的属性列表
+     * 是属性名到属性设置的映射表
      */
     properties: {
-
+        comList: {
+            type: []
+        }
     },
-
     /**
      * 组件的初始数据
      */
     data: {
-
+        imgUrl: "",
+        price: 0,
+        page: 1,
+        pageSize: 6,
+        id: 0
     },
 
     /**
      * 组件的方法列表
      */
     methods: {
-        detailTo() {
+        detailTo(e) {
+            console.log(e.currentTarget.dataset);
+            const id = e.currentTarget.dataset.id;
+            const title = e.currentTarget.dataset.title;
+            const price = e.currentTarget.dataset.price;
+            const comImg = e.currentTarget.dataset.pic;
             wx.navigateTo({
-              url: '/pages/details/details',
+              url: '/pages/details/details?id=' + id + '&title=' + title + '&price=' + price + '&img=' + comImg,
             })
-        }
+        },
     }
 })

fore-end/components/commodity_card/commodity_card.wxml

@@ -1,15 +1,11 @@
 <!--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="" 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="" class="commodity_image"/>
-    </view>
-    <view class="commodity_show">
-        <image src="/assets/recommend_img/recom_3.jpg" mode="" class="commodity_image"/>
+    <view class="commodity_show" wx:for="{{comList}}" wx:key="index">
+        <view  bind:tap="detailTo" data-id='{{item.Id}}' data-price='{{item.Price}}' data-Title='{{item.Title}}' data-pic='{{item.Pic}}'>
+            <image src="{{item.Pic}}" alt="" class="commodity_image"/>
+            <text class="commodity_name">{{item.Title}}</text>
+            <text class="price">￥{{item.Price}}</text>
+            <avatar></avatar>
+        </view>
     </view>
 </view>

fore-end/pages/classify/classify.js

@@ -1,9 +1,6 @@
 // pages/classify/classify.js
-const { http } = require('../../utils/util')
+const { getCategoryAPI,getClassifyGoods} = require('../../API/appraise')
 
-const API = {
-    getCategoryURL: '/category'
-}
 
 Page({
 
@@ -14,6 +11,14 @@ Page({
         classifyList: []
     },
 
+    //获取点击分类的id
+    detailClassifyTo({ currentTarget }) {
+        const id = currentTarget.dataset.num;
+        const title = currentTarget.dataset.title;
+        wx.navigateTo({
+            url: '/pages/classify_detail/classify_detail?classify_id=' + id + '&title=' + title,
+        })
+    },
     /**
      * 生命周期函数--监听页面加载
      */
@@ -22,13 +27,11 @@ Page({
     },
 
     getClassifyList() {
-        http({url: API.getCategoryURL, data: this.data}).then((res) => {
-            wx.setStorageSync('classifyList',res);
-            let classifyList = wx.getStorageSync('classifyList')
+		getCategoryAPI(this.data)
+		.then((res) => {
+            const { code, data, mesage } = res.data;
             this.setData({
-                classifyList: [...res],
-                imgUrl: classifyList[0].Pic,
-                classifyName: classifyList[0].Name
+                classifyList: data
             })
         })
     },

fore-end/pages/classify/classify.wxml

@@ -5,7 +5,7 @@
     <!-- 展示分类 -->
     <view class="classify_list">
         <view class="categories" wx:for="{{classifyList}}" wx:key="Id">
-            <view class="categories_card">
+            <view class="categories_card" bind:tap="detailClassifyTo" data-num='{{item.Id}}' data-title='{{item.Name}}'>
                 <van-image width="90" height="90" fit="cover" src="{{item.Pic}}" />
             </view>
             <view class="text">{{item.Name}}</view>

fore-end/pages/classify/classify.wxss

@@ -10,12 +10,13 @@ image {
     font-size: 80rpx;
     font-weight: 800;
     color: #808080;
-    margin: 70rpx;
+    margin-left: 40rpx;
+    margin-top: 60rpx;
+    margin-bottom: 20rpx;
     text-align: center;
 }
 
 .classify_list {
-    margin-top: 40rpx;
     margin-left: 10rpx;
     display: flex;
     padding: 30rpx;
@@ -27,5 +28,5 @@ image {
 /* 展示分类 */
 .text {
     margin-left: 42rpx;
-    margin-top: 15rpx;
+    margin-top: 5rpx;
 }

fore-end/pages/classify_detail/classify_detail.js

@@ -10,7 +10,11 @@ Page({
     data: {
         classifyShow: [],
         page: 1,
-        pageSize: 6
+        pageSize: 6,
+        id: 1,
+        title: "",
+        //节流阀
+        isLoading: false
     },
 
     /**
@@ -18,13 +22,30 @@ Page({
      */
     onLoad(options) {
         this.getGoods()
-        // console.log(options);
-        // var id = options;
+        this.setData({
+            // 传递点击的分类id
+            id: options.classify_id,
+            //传递点击的分类名称
+            title: options.title
+        })
     },
 
     getGoods() {
+        //加载的loading效果
+        wx.showLoading({
+          title: '数据获取中',
+        })
         getClassifyGoods(this.data).then((res) => {
+            const { data } = res.data;
             console.log(res);
+            this.setData({
+                classifyShow: [...this.data.classifyShow , ...data.data],
+                isLoading: true
+            })
+            console.log(this.data.classifyShow);
+        })
+        this.setData({
+            isLoading: false
         })
     },
     /**
@@ -66,7 +87,12 @@ Page({
      * 页面上拉触底事件的处理函数
      */
     onReachBottom() {
-
+        if(this.data.isLoading) {
+            this.setData({
+                page: this.data.page + 1,
+            })
+            this.getGoods()
+        }
     },
 
     /**

fore-end/pages/classify_detail/classify_detail.json

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

fore-end/pages/classify_detail/classify_detail.wxml

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

fore-end/pages/classify_detail/classify_detail.wxss

@@ -6,12 +6,14 @@
     margin-top: -20rpx;
     margin-left: -20rpx;
     z-index: 100;
+    padding-left: 30rpx;
     background-color:  var(--themeColor);
 }
 
 .text {
     line-height: 60rpx;
-    margin-left: 315rpx;
+    text-align: center;
+    /* margin-left: 315rpx; */
 }
 
 .goodsShow {

fore-end/pages/details/details.js

@@ -5,14 +5,23 @@ Page({
      * 页面的初始数据
      */
     data: {
-
+        id: 0,
+        title: "",
+        price: 0,
+        pic: ""
     },
 
     /**
      * 生命周期函数--监听页面加载
      */
     onLoad(options) {
-
+        console.log(options);
+        this.setData({
+            id: options.id,
+            title: options.title,
+            price: options.price,
+            pic: options.img
+        })
     },
 
     /**

fore-end/pages/details/details.wxml

@@ -1,7 +1,7 @@
 <!--pages/details/details.wxml-->
 <!-- 商品图片展示 -->
 <view class="detail_pic">
-    <van-image width="350" height="300" fit="cover" radius="10" src="/assets/recommend_img/recom_1.jpg" />
+    <van-image width="350" height="300" fit="cover" radius="10" src="{{pic}}" />
 </view>
 
 <!-- 用户展示 -->
@@ -9,8 +9,8 @@
     <!-- 用户信息：头像 产品名称、价格 卖家昵称 联系卖主按钮 -->
     <view class="seller_msg">
         <van-image round width="70" height="70" fit="cover" src="/assets/home_img/head_portrait.jpg" />
-        <text class="commodity_name">产品名称</text>
-        <text class="price">￥49.9</text>
+        <text class="commodity_name">{{title}}</text>
+        <text class="price">￥{{price}}</text>
         <text class="seller_name">deter</text>
         <van-button color="#FFC300" custom-style="border-radius: 20rpx; color: #000000; font-size: 35rpx; position: absolute; top: 30rpx; right: 10rpx;">联系卖主</van-button>
     </view>

fore-end/pages/home/home.js

@@ -32,8 +32,9 @@ Page({
     //获取点击分类的id
     detailClassifyTo({ currentTarget }) {
         const id = currentTarget.dataset.num;
+        const title = currentTarget.dataset.title;
         wx.navigateTo({
-            url: '/pages/classify_detail/classify_detail?classify_id=' + id,
+            url: '/pages/classify_detail/classify_detail?classify_id=' + id + '&title=' + title,
         })
     },
     /**
@@ -41,22 +42,26 @@ Page({
      */
     onLoad(options) {
         this.getClassifyList();
+        this.setData({
+            avatarUrl:wx.getStorageSync('avatarUrl'),
+            nickName: wx.getStorageSync('nickName')
+        })
     },
 
     getClassifyList() {
 		getCategoryAPI(this.data)
-		.then((data) => {
+		.then((res) => {
+            const { code, data, mesage } = res.data;
             this.setData({
                 classifyList: data
             })
         })
     },
-
-    getGoodsList() {
-        getClassifyGoods(this.data).then((data) => {
-            console.log(data);
-        })
-    },
+    // getGoodsList() {
+    //     getClassifyGoods(this.data).then((data) => {
+    //         console.log(data);
+    //     })
+    // },
     /**
      * 生命周期函数--监听页面初次渲染完成
      */
@@ -106,15 +111,15 @@ Page({
 
     },
 
-    /**
-     * 监听页面滑动
-     */
-    onPageScroll(data) {
-        // console.log(data.scrollTop);
-        this.setData({
-            scrollTop: data.scrollTop
-        })
-    }
+    // /**
+    //  * 监听页面滑动
+    //  */
+    // onPageScroll(data) {
+    //     // console.log(data.scrollTop);
+    //     this.setData({
+    //         scrollTop: data.scrollTop
+    //     })
+    // }
 })
 
 

fore-end/pages/home/home.wxml

@@ -1,25 +1,27 @@
 <!--pages/home/home.wxml-->
 <!-- 头部 -->
-<view class="head">
+<view class="bigBox">
+    <view class="head" style="position: fixed;">
     <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>
+            <van-image width="100rpx" height="100rpx" fit="cover" src="{{avatarUrl}}" radius="20rpx"></van-image>
         </view>
         <!-- 昵称 -->
-        <view class="username">deter</view>
+        <view class="username">{{nickName}}</view>
     </view>
     <!-- 消息提示 -->
     <view>
         <van-icon name="bell" custom-style="margin" class="head_bell" size="50rpx" info="9" color="var(--themeColor)"/>
     </view>
 </view>
-<!-- 搜索框 -->
-<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"/>
-    </button>
+    <!-- 搜索框 -->
+    <view class="search_box" style="position: fixed; top: 129rpx">
+        <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>
+    </view>
 </view>
 
 <!-- 分类展示 -->
@@ -36,7 +38,7 @@
  <!-- 分类推荐 -->
 <scroll-view scroll-x style='display: flex;white-space:nowrap; margin-top: 80rpx;'>
     <view class="categories_card" wx:for="{{classifyList}}" wx:for-item="item" wx:key="index">
-        <view bind:tap="detailClassifyTo" data-num='{{item.Id}}'>
+        <view bind:tap="detailClassifyTo" data-num='{{item.Id}}' data-title='{{item.Name}}'>
             <van-image width="75" height="75" radius="20rpx" src="{{item.Pic}}" />
             <view class="name_show">{{item.Name}}</view>
         </view>

fore-end/pages/home/home.wxss

@@ -1,7 +1,16 @@
 /* pages/home/home.wxss */
+.bigBox {
+    position: relative;
+    height: 210rpx;
+    z-index: 100;
+}
+
 /* 头部区域 */
 .head {
     height: 130rpx;
+    background-color: #f5f5f5;
+    /* margin-top: -20rpx; */
+    /*怎么办啊啊啊*/
 }
 
 .head-portrait-bg {
@@ -20,7 +29,8 @@
 
 .username {
     float: left;
-    width: 100rpx;
+    /* width: 100rpx; */
+    width: fit-content;
     margin-top: 30rpx;
     margin-left: 20rpx;
     font-size: 18px;
@@ -35,7 +45,7 @@
 
 /* 搜索栏 */
 .search_box {
-    width: 100%;
+    width: 720rpx;
     height: 80rpx;
     background-color: #E8E7E7;
     border-radius: 20rpx;
@@ -46,6 +56,7 @@
     top: 0rpx;
     z-index: 100;
     margin-right: 20rpx;
+    margin-top: 130rpx;
 }
 
 .search_text {

fore-end/project.config.json

@@ -12,7 +12,7 @@
 		"enhance": true,
 		"showShadowRootInWxmlPanel": false,
 		"packNpmRelationList": [],
-		"ignoreUploadUnusedFiles": true,
+		"ignoreUploadUnusedFiles": false,
 		"setting": {
 			"packNpmManually": true,
 			"packNpmRelationList": [
@@ -28,11 +28,10 @@
 		"tabIndent": "tab",
 		"tabSize": 4
 	},
-	"appid": "wxc25f00d0fc026ae7",
-	"libVersion": "3.1.5",
+	"condition": {},
 	"packOptions": {
 		"ignore": [],
 		"include": []
 	},
-	"condition": {}
+	"appid": "wxc25f00d0fc026ae7"
 }

fore-end/utils/util.js

@@ -28,21 +28,24 @@ function http(url, option) {
 			"Authorization": (url!=loginURL && url!=registerURL) ? wx.getStorageSync('token') : '' 
 		  },
 		  ...option,
-
           success(res) {
-				const {data,code,message} = res.data;
-			  if(code == 200){
-				// resolve(data);
+            const {data,code,message} = res.data;
+            console.log(res);
+			if(code == 200){
 				resolve(res);
-			  }else if(code == 500){
+			}else if(code == 500){
 				reject(res);
-			  }else{
+			}else{
 				  reject(res);
-			  }
+			}
           },
           fail(err) {
             console.log(err);
             reject(err);
+          },
+          //数据加载完毕关闭loading
+          complete: () => {
+            wx.hideLoading()
           }
         })
     })
@@ -89,9 +92,10 @@ function chooseImage(){
 	})
 }
 
+
 module.exports = {
     formatTime,
 	http,
 	upLoad,
-	chooseImage,
+    chooseImage
   }