Classify&commodity detail

fore-end/API/categories.js

@@ -0,0 +1,9 @@
+const { http } = require('../utils/util')
+
+const API = {
+    getCategoryURL: '/category'
+}
+
+function getCategoryIMG() {
+    
+}

fore-end/app.json

@@ -1,52 +1,53 @@
 {
-   "usingComponents": {
-    "van-button": "@vant/weapp/button/index",
-    "van-image": "@vant/weapp/image/index",
-    "van-icon": "@vant/weapp/icon/index",
-    "van-search": "@vant/weapp/search/index"
-   },
-  "pages":[
-    "pages/home/home",
-    "pages/classify/classify",
-    "pages/append/append",
-    "pages/message/message",
-    "pages/user/user"
-  ],
-  "window":{
-    "backgroundTextStyle":"light",
-    "navigationBarBackgroundColor": "#fff",
-    "navigationBarTitleText": "WeChatTrading",
-    "navigationBarTextStyle":"black"
-  },
-  "tabBar": {
-    "list": [
-        {
-          "pagePath": "pages/home/home",
-          "iconPath": "/assets/tabBar_img/home.png",
-          "selectedIconPath": "/assets/tabBar_img/home-active.png"
-        },
-        {
-            "pagePath": "pages/classify/classify",
-            "iconPath": "/assets/tabBar_img/classify.png",
-            "selectedIconPath": "/assets/tabBar_img/classify-active.png"
-        },
-        {
-            "pagePath": "pages/append/append",
-            "iconPath": "/assets/tabBar_img/append.png",
-            "selectedIconPath": "/assets/tabBar_img/append-active.png"
-        },
-        {
-            "pagePath": "pages/message/message",
-            "iconPath": "/assets/tabBar_img/message.png",
-            "selectedIconPath": "/assets/tabBar_img/message-active.png"
-        },
-        {
-            "pagePath": "pages/user/user",
-            "iconPath": "/assets/tabBar_img/user.png",
-            "selectedIconPath": "/assets/tabBar_img/user-active.png"
-        }
-  ],
-  "borderStyle": "white"
-},
-  "sitemapLocation": "sitemap.json"
-}
+    "usingComponents": {
+        "van-button": "@vant/weapp/button/index",
+        "van-image": "@vant/weapp/image/index",
+        "van-icon": "@vant/weapp/icon/index",
+        "van-search": "@vant/weapp/search/index"
+    },
+    "pages": [
+        "pages/home/home",
+        "pages/classify/classify",
+        "pages/append/append",
+        "pages/message/message",
+        "pages/user/user",
+        "pages/details/details"
+    ],
+    "window": {
+        "backgroundTextStyle": "light",
+        "navigationBarBackgroundColor": "#fff",
+        "navigationBarTitleText": "WeChatTrading",
+        "navigationBarTextStyle": "black"
+    },
+    "tabBar": {
+        "list": [
+            {
+                "pagePath": "pages/home/home",
+                "iconPath": "/assets/tabBar_img/home.png",
+                "selectedIconPath": "/assets/tabBar_img/home-active.png"
+            },
+            {
+                "pagePath": "pages/classify/classify",
+                "iconPath": "/assets/tabBar_img/classify.png",
+                "selectedIconPath": "/assets/tabBar_img/classify-active.png"
+            },
+            {
+                "pagePath": "pages/append/append",
+                "iconPath": "/assets/tabBar_img/append.png",
+                "selectedIconPath": "/assets/tabBar_img/append-active.png"
+            },
+            {
+                "pagePath": "pages/message/message",
+                "iconPath": "/assets/tabBar_img/message.png",
+                "selectedIconPath": "/assets/tabBar_img/message-active.png"
+            },
+            {
+                "pagePath": "pages/user/user",
+                "iconPath": "/assets/tabBar_img/user.png",
+                "selectedIconPath": "/assets/tabBar_img/user-active.png"
+            }
+        ],
+        "borderStyle": "white"
+    },
+    "sitemapLocation": "sitemap.json"
+}

fore-end/components/avatar/avatar.wxss

@@ -1,8 +1,8 @@
 /* components/avatar/avatar.wxss */
 .seller {
     position: absolute;
-    top: 980rpx;
-    left: 36rpx;
+    top: 450rpx;
+    left: 12rpx;
 }
 
 .seller view {

fore-end/components/categories_card/categories_card.js

@@ -1,6 +1,7 @@
 // components/categories_card/categories_card.js
 Component({
 
+    externalClasses: ['card-class'],
     /**
      * 组件的属性列表
      */

fore-end/components/categories_card/categories_card.wxml

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

fore-end/components/commodity_card/commodity_card.js

@@ -1,6 +1,5 @@
 // components/commodity_card/commodity_card.js
 Component({
-
     /**
      * 组件的属性列表
      */
@@ -19,6 +18,10 @@ Component({
      * 组件的方法列表
      */
     methods: {
-
+        detailTo() {
+            wx.navigateTo({
+              url: '/pages/details/details',
+            })
+        }
     }
 })

fore-end/components/commodity_card/commodity_card.wxml

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

fore-end/components/commodity_card/commodity_card.wxss

@@ -7,6 +7,7 @@
 
 .commodity_show {
     display: flex;
+    position: relative;
     width: 48%;
     height: 500rpx;
     padding: 7rpx;
@@ -22,14 +23,14 @@
 
 .commodity_name {
     position: absolute;
-    top: 885rpx;
-    left: 20px;
+    top: 360rpx;
+    left: 15rpx;
 }
 
 .price {
     position: absolute;
-    top: 930rpx;
-    left: 32rpx;
+    top: 400rpx;
+    left: 12rpx;
     color: #a08016;
     font-weight: 600;
 }

fore-end/pages/classify/classify.json

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

fore-end/pages/classify/classify.wxml

@@ -1 +1,32 @@
 <!--pages/classify/classify.wxml-->
+<view>
+    <!-- 标题 -->
+    <view class="classify_topic">categories</view>
+    <!-- 展示分类 -->
+    <view class="classify_list">
+        <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>
+        <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>
+</view>

fore-end/pages/classify/classify.wxss

@@ -1 +1,31 @@
-/* pages/classify/classify.wxss */
+/* pages/classify/classify.wxss */
+image {
+    width: 180rpx;
+    height: 180rpx;
+    border-radius: 20rpx;
+}
+
+/* 标题 */
+.classify_topic {
+    font-size: 80rpx;
+    font-weight: 800;
+    color: #808080;
+    margin-top: 70rpx;
+    margin-left: 167rpx;
+}
+
+.classify_list {
+    margin-top: 40rpx;
+    margin-left: 10rpx;
+    display: flex;
+    padding: 30rpx;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    box-sizing: border-box;
+}
+
+/* 展示分类 */
+.text {
+    margin-left: 42rpx;
+    margin-top: 15rpx;
+}

fore-end/pages/details/details.js

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

fore-end/pages/details/details.json

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

fore-end/pages/details/details.wxml

@@ -0,0 +1,27 @@
+<!--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" />
+</view>
+
+<!-- 用户展示 -->
+<view class="seller">
+    <!-- 用户信息：头像 产品名称、价格 卖家昵称 联系卖主按钮 -->
+    <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="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>
+    <!-- 卖的商品信息 -->
+    <view class="sell_msg">
+        <text class="sell_title">女士夏秋套装\n</text>
+        <view class="sell_detail" style="width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">女士T恤+短裤+鞋，未穿过，出售，价格可谈,女士T恤+短裤+鞋，未穿过，出售，价格可谈</view>
+    </view>
+</view>
+
+<!-- 推荐商品 -->
+<view class="recommend">
+    <commodity-card></commodity-card>
+</view>

fore-end/pages/details/details.wxss

@@ -0,0 +1,57 @@
+/* pages/details/details.wxss */
+.detail_pic {
+    display: flex;
+    justify-content: center;
+}
+
+/* 用户展示 */
+.seller {
+    margin-top: 20rpx;
+    width: 100%;
+}
+
+.seller_msg {
+    position: relative;
+}
+
+.commodity_name {
+    position: absolute;
+    top: 10rpx;
+    left: 160rpx;
+    font-weight: 600;
+}
+
+.price {
+    position: absolute;
+    top: 55rpx;
+    left: 160rpx;
+    color: #a08016;
+    font-weight: 600;
+}
+
+.seller_name {
+    position: absolute;
+    top: 90rpx;
+    left: 160rpx;
+    font-weight: 300;
+}
+
+/* 商品信息展示 */
+.sell_msg {
+    margin-top: 15rpx;
+    margin-left: 10rpx;
+}
+
+.sell_title {
+    font-size: 35rpx;
+}
+
+.sell_detail {
+    font-size: 25rpx;
+    color: #808080;
+}
+
+/* 推荐商品 */
+.recommend {
+    margin-top: 30rpx;
+}

fore-end/pages/home/home.js

@@ -1,4 +1,6 @@
 // pages/home/home.js
+const { http } = require('../../utils/util')
+
 Page({
 
     /**
@@ -8,6 +10,11 @@ Page({
         
     },
 
+    classifyTo() {
+        wx.switchTab({//tabBar页面跳转要用wx.switchTab
+          url: '/pages/classify/classify',
+        })
+    },
     /**
      * 生命周期函数--监听页面加载
      */

fore-end/pages/home/home.wxml

@@ -28,7 +28,7 @@
         <view class="color_block categories_block "></view>
     </view>
     <!-- 点击前往分类页面 -->
-    <view class="text_small">Browser more</view>
+    <view class="text_small" bind:tap="classifyTo">Browser more</view>
 </view>
 
  <!-- 分类推荐 -->

fore-end/project.private.config.json

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

fore-end/utils/util.js

@@ -1,3 +1,6 @@
+import Toast from '@vant/weapp/toast/toast';
+const baseURL = "http://192.168.31.28:8084";//后台服务提供的地址
+
 const formatTime = date => {
   const year = date.getFullYear()
   const month = date.getMonth() + 1
@@ -14,6 +17,30 @@ const formatNumber = n => {
   return n[1] ? n : `0${n}`
 }
 
+function http(url, option) {
+    return new Promise((resolve, reject) => {
+        wx.request({
+          url: baseURL + url,
+          ...option,
+          success(res) {
+              const {code, message, data} = JSON.parse(res.data);
+              if(code == 200) {
+                resolve(data);
+              } else {
+                Toast.fail('系统异常');
+                reject();
+              }
+          },
+          fail(err) {
+            Toast.fail('系统异常');
+            console.log(err);
+            reject(err);
+          }
+        })
+    })
+}
+
 module.exports = {
-  formatTime
+  formatTime,
+  http
 }