商品列表

app.json

@@ -5,7 +5,10 @@
     "pages/cart/cart",
     "pages/my/my",
     "pages/detail/detail",
-    "pages/login/login"
+    "pages/login/login",
+    "pages/Mall/presaleCommodity/presaleCommodity",
+    "pages/Mall/newCommodity/newCommodity",
+    "pages/Mall/hotCommodity/hotCommodity"
   ],
   "window": {
     "backgroundColor": "#FFFFFF",

components/header/header.js

@@ -0,0 +1,19 @@
+// components/header/header.js
+Component({
+    properties: {
+        // header嵌入的位置，index:首页
+        position:{
+            type:String,
+            value:''
+        }
+    },
+    data: {
+      index:0
+    },
+    methods: {
+        
+    },
+    ready: function(){
+        console.log(this.data.position);
+    }
+  })

components/header/header.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

components/header/header.wxml

@@ -0,0 +1,18 @@
+<!--components/header/header.wxml-->
+<view class="header">
+    <view class="header-bg"></view>
+    <view class="logo logo-at-left">
+      <image src="/images/index/logo.png" class="logo-image"></image>
+    </view>
+    <view class="mark-icon" wx:if="{{position != 'index'}}">
+       <image class="mark-image" src="/images/mall/{{position}}.png" mode="widthFix"/>
+    </view>
+    <view class="search-and-cart" wx:if="{{position === 'index'}}">
+      <view class="search">
+        <image src="/images/index/search.png" class="search-icon"></image>
+      </view>
+      <view class="cart">
+        <image src="/images/index/cart.png" class="cart-icon"></image>
+      </view>
+    </view>
+  </view>

components/header/header.wxss

@@ -0,0 +1,58 @@
+/* components/header/header.wxss */
+.header {
+    height: 330rpx;
+    position: relative;
+  }
+  .header .header-bg {
+    z-index: 1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 295rpx;
+    background: #CFEAE5;
+  }
+  .header .logo {
+    width: 150rpx;
+    height: 150rpx;
+    z-index: 99;
+  }
+  .header .logo.logo-at-left {
+    position: absolute;
+    top: 96rpx;
+    left: 36rpx;
+  }
+  .header .logo-image {
+    width: 100%;
+    height: 100%;
+  }
+  .header .mark-icon{
+    width: 100%;
+    height: 295rpx;
+    position: absolute;
+    top:0;
+    right:0;
+    z-index: 2;
+  }
+  .header .mark-icon .mark-image{
+      width: 100%;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+  }
+  .header .search-icon {
+    position: absolute;
+    z-index: 99;
+    top: 260rpx;
+    left: 30rpx;
+    height: 65rpx;
+    width: 530rpx;
+  }
+  .header .cart-icon {
+    position: absolute;
+    z-index: 99;
+    top: 260rpx;
+    right: 30rpx;
+    height: 65rpx;
+    width: 146rpx;
+  }

components/product-list/product-list.js

@@ -0,0 +1,60 @@
+// components/product-list/product-list.js
+Component({
+    properties: {
+        // header嵌入的位置，index:首页
+        position:{
+            type:String,
+            value:''
+        }
+    },
+    data: {
+        goodsList: [
+            {
+            name: "哪吒魔童闹海周边哪吒魔童闹海周边哪吒魔童闹海周边",
+            price: 49.5,
+            image:'/images/index/hot-item.png'
+            },
+            {
+            name: "若来十二生肖盲盒 桌面手办若来十二生肖盲盒 桌面手办若来十二生肖盲盒 桌面手办",
+            price: 49.5,
+            image:'/images/index/hot-item.png'
+            },
+            {
+            name: "官方正版姜子牙电影四不像",
+            price: 49.5,
+            image:'/images/index/hot-item.png'
+            },
+            {
+            name: "若来十二生肖盲盒 十二节气祖国版",
+            price: 49.5,
+            image:'/images/index/hot-item.png'
+            },
+            {
+                name: "哪吒魔童闹海周边哪吒魔童闹海周边哪吒魔童闹海周边",
+                price: 49.5,
+                image:'/images/index/hot-item.png'
+            },
+            {
+                name: "若来十二生肖盲盒 桌面手办若来十二生肖盲盒 桌面手办若来十二生肖盲盒 桌面手办",
+                price: 49.5,
+                image:'/images/index/hot-item.png'
+            },
+            {
+                name: "官方正版姜子牙电影四不像",
+                price: 49.5,
+                image:'/images/index/hot-item.png'
+            },
+            {
+                name: "若来十二生肖盲盒 十二节气祖国版",
+                price: 49.5,
+                image:'/images/index/hot-item.png'
+            },
+        ],
+    },
+    methods: {
+        
+    },
+    ready: function(){
+        console.log(this.data.position);
+    }
+})

components/product-list/product-list.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

components/product-list/product-list.wxml

@@ -0,0 +1,32 @@
+<!--components/product-list/product-list.wxml-->
+<scroll-view class="scrollView {{position === 'index'&&'scrollViewIndex'}}" scroll-y>
+    <view class="products">
+        <view class="goods-item" wx:for="{{goodsList}}" wx:key="index">
+            <view class="goods-image">
+                <image src="{{item.image}}" mode="aspectFill" class="goods-image-inner"></image>
+            </view>
+            <view class="goods-info">
+                <text class="goods-name">{{item.name}}</text>
+                <text class="goods-price" wx:if="{{position !== 'presale'}}">￥{{item.price}}</text>
+            </view>
+            <view class="goods-action" wx:if="{{position !== 'presale'}}">
+                <view class="favorite">
+                    <image src="/images/index/fav.png" class="favorite-icon"></image>
+                </view>
+                <view class="goods-but">
+                    <image class="add-to-cart" src="/images/index/add-cart.png" mode=""/>
+                    <image class="buy-now" src="/images/index/buy-now.png" mode=""/>
+                </view>
+            </view>
+            <view class="goods-action" wx:else>
+                <text class="goods-price">￥{{item.price}}</text>
+                <view class="goods-but">
+                    <view class="favorite">
+                        <image src="/images/mall/fav.png" class="favorite-icon"></image>
+                    </view>
+                    <image class="shoppingCart" src="/images/mall/cart.png" mode="widthFix"/>
+                </view>
+            </view>
+        </view>
+    </view>
+</scroll-view>

components/product-list/product-list.wxss

@@ -0,0 +1,81 @@
+/* components/product-list/product-list.wxss */
+.scrollView{
+    height: calc(100vh - 330rpx);
+}
+.scrollViewIndex{
+    height: 1080rpx;
+}
+.products{
+    padding:0 30rpx;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+.goods-item {
+    width: 326rpx; /* 313*1.0417 */
+    background: #fff;
+    border-radius: 25rpx; /* 20*1.0417 */
+    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 39rpx;
+    border: 4rpx solid #7AC7B5;
+}
+.goods-image {
+    width: 326rpx;
+    height: 326rpx;
+    background: #f7f7f7;
+}
+.goods-image-inner {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.goods-info {
+    padding: 16rpx 21rpx 0 21rpx;
+}
+.goods-name {
+    font-size: 18rpx;
+    color: #333;
+    display: block;
+    margin-bottom: 8rpx;
+    font-weight: bold;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    text-overflow: ellipsis;      
+}
+.goods-price {
+    font-size: 30rpx;
+    color: #40665E;
+}
+.goods-action {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 16rpx 21rpx 21rpx 21rpx;
+}
+.favorite {
+  width: 32rpx;
+  height: 32rpx;
+}
+.favorite-icon {
+  width: 100%;
+  height: 100%;
+}
+.shoppingCart{
+    width: 40rpx;
+    margin:0 20rpx 0 40rpx;
+}
+.goods-but{
+    display: flex;
+}
+.add-to-cart,
+.buy-now {
+  width: 99rpx;
+  height: 39rpx;
+  border-radius: 6rpx;
+  margin-left: 8rpx;
+}

pages/Mall/hotCommodity/hotCommodity.js

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

pages/Mall/hotCommodity/hotCommodity.json

@@ -0,0 +1,8 @@
+{
+  "usingComponents": {
+      "header":"/components/header/header",
+      "product-list":"/components/product-list/product-list"
+  },
+  "navigationStyle":"custom",
+  "navigationBarTitleText":"热门商品"
+}

pages/Mall/hotCommodity/hotCommodity.wxml

@@ -0,0 +1,7 @@
+<!--pages/Mall/hotCommodity/hotCommodity.wxml-->
+
+<!-- 头部 -->
+<header position="hot"></header>
+
+<!-- 商品列表 -->
+<product-list></product-list>

pages/Mall/hotCommodity/hotCommodity.wxss

@@ -0,0 +1 @@
+/* pages/Mall/hotCommodity/hotCommodity.wxss */

pages/Mall/newCommodity/newCommodity.js

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

pages/Mall/newCommodity/newCommodity.json

@@ -0,0 +1,8 @@
+{
+  "usingComponents": {
+      "header":"/components/header/header",
+      "product-list":"/components/product-list/product-list"
+  },
+  "navigationStyle":"custom",
+  "navigationBarTitleText":"新商品"
+}

pages/Mall/newCommodity/newCommodity.wxml

@@ -0,0 +1,7 @@
+<!--pages/Mall/newCommodity/newCommodity.wxml-->
+
+<!-- 头部 -->
+<header position="new"></header>
+
+<!-- 商品列表 -->
+<product-list></product-list>

pages/Mall/newCommodity/newCommodity.wxss

@@ -0,0 +1 @@
+/* pages/Mall/newCommodity/newCommodity.wxss */

pages/Mall/presaleCommodity/newCommodity.json

@@ -0,0 +1,8 @@
+{
+  "usingComponents": {
+      "header":"/components/header/header",
+      "product-list":"/components/product-list/product-list"
+  },
+  "navigationStyle":"custom",
+  "navigationBarTitleText":"新商品"
+}

pages/Mall/presaleCommodity/presaleCommodity.js

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

pages/Mall/presaleCommodity/presaleCommodity.wxml

@@ -0,0 +1,7 @@
+<!--pages/Mall/presaleCommodity/presaleCommodity.wxml-->
+
+<!-- 头部 -->
+<header position="presale"></header>
+
+<!-- 商品列表 -->
+<product-list position="presale"></product-list>

pages/Mall/presaleCommodity/presaleCommodity.wxss

@@ -0,0 +1 @@
+/* pages/Mall/presaleCommodity/presaleCommodity.wxss */

pages/index/index.js

@@ -64,24 +64,6 @@ Component({
         name: "立绘",
       },
     ],
-    goodsList: [
-      {
-        name: "哪吒魔童闹海周边",
-        price: 49.5
-      },
-      {
-        name: "若来十二生肖盲盒 桌面手办",
-        price: 49.5
-      },
-      {
-        name: "官方正版姜子牙电影四不像",
-        price: 49.5
-      },
-      {
-        name: "若来十二生肖盲盒 十二节气祖国版",
-        price: 49.5
-      },
-    ],
   },
 
   methods: {

pages/index/index.json

@@ -1,3 +1,6 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "header":"/components/header/header",
+    "product-list":"/components/product-list/product-list"
+  }
 }

pages/index/index.wxml

@@ -1,19 +1,9 @@
 <!--index.wxml-->
 <view class="container">
-  <view class="header">
-    <view class="header-bg"></view>
-    <view class="logo logo-at-left">
-      <image src="/images/index/logo.png" class="logo-image"></image>
-    </view>
-    <view class="search-and-cart">
-      <view class="search">
-        <image src="/images/index/search.png" class="search-icon"></image>
-      </view>
-      <view class="cart">
-        <image src="/images/index/cart.png" class="cart-icon"></image>
-      </view>
-    </view>
-  </view>
+  
+  <!-- 头部 -->
+  <header position="index"></header>
+
   <view class="banner">
     <view class="banner-item">
       banner
@@ -46,24 +36,7 @@
       <image src="/images/index/category-item.png" class="category-image"></image>
     </view>
   </view>
-  <view class="goods">
-    <view class="goods-row" wx:for="{{goodsList}}" wx:key="index" wx:for-item="row">
-      <view class="goods-item" wx:for="{{row}}" wx:key="itemIndex">
-        <view class="goods-image">
-          <image src="{{item.imageUrl}}" class="goods-image-inner"></image>
-        </view>
-        <view class="goods-info">
-          <text class="goods-name">{{item.name}}</text>
-          <text class="goods-price">￥{{item.price}}</text>
-        </view>
-        <view class="goods-action">
-          <view class="favorite">
-            <image src="/images/index/fav.png" class="favorite-icon"></image>
-          </view>
-          <button class="add-to-cart">加入购物车</button>
-          <button class="buy-now">立即购买</button>
-        </view>
-      </view>
-    </view>
-  </view>
+
+  <!-- 商品列表 -->
+  <product-list position="index"></product-list>
 </view>

pages/index/index.wxss

@@ -6,50 +6,6 @@ page {
   flex-direction: column;
 }
 
-.header {
-  height: 330rpx;
-  position: relative;
-}
-.header .header-bg {
-  z-index: 1;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 295rpx;
-  background: #dfefec;
-}
-.header .logo {
-  width: 150rpx;
-  height: 150rpx;
-  z-index: 99;
-}
-.header .logo.logo-at-left {
-  position: absolute;
-  top: 96rpx;
-  left: 36rpx;
-}
-.header .logo-image {
-  width: 100%;
-  height: 100%;
-}
-.header .search-icon {
-  position: absolute;
-  z-index: 99;
-  top: 260rpx;
-  left: 30rpx;
-  height: 65rpx;
-  width: 530rpx;
-}
-.header .cart-icon {
-  position: absolute;
-  z-index: 99;
-  top: 260rpx;
-  right: 30rpx;
-  height: 65rpx;
-  width: 146rpx;
-}
-
 .banner {
   display: flex;
   justify-content: center;
@@ -126,96 +82,3 @@ page {
   width: 100%;
   height: 100%;
 }
-.goods {
-  display: flex;
-  flex-direction: column;
-  padding: 21rpx 21rpx 0 21rpx;
-}
-
-.goods-row {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-evenly;
-  margin-bottom: 21rpx;
-}
-
-.goods-item {
-  width: 326rpx; /* 313*1.0417 */
-  background: #fff;
-  border-radius: 21rpx; /* 20*1.0417 */
-  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.goods-image {
-  width: 326rpx;
-  height: 326rpx;
-  margin: 0;
-  border-top-left-radius: 21rpx;
-  border-top-right-radius: 21rpx;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  overflow: hidden;
-  background: #f7f7f7;
-}
-.goods-image-inner {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.goods-info {
-  padding: 16rpx 21rpx 0 21rpx;
-}
-.goods-name {
-  font-size: 18rpx;
-  color: #333;
-  display: block;
-  margin-bottom: 8rpx;
-  font-weight: bold;
-}
-.goods-price {
-  font-size: 20rpx;
-  color: #e4393c;
-  font-weight: bold;
-}
-.goods-action {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 16rpx 21rpx 21rpx 21rpx;
-}
-.favorite {
-  width: 32rpx;
-  height: 32rpx;
-}
-.favorite-icon {
-  width: 100%;
-  height: 100%;
-}
-.add-to-cart,
-.buy-now {
-  width: 105rpx;
-  height: 36rpx;
-  line-height: 36rpx;
-  font-size: 16rpx;
-  border-radius: 6rpx;
-  margin-left: 8rpx;
-  padding: 0;
-  border: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-}
-.add-to-cart {
-  background: #fff;
-  color: #7AC7B5;
-  border: 2rpx solid #7AC7B5;
-}
-.buy-now {
-  background: #7AC7B5;
-  color: #fff;
-  border: none;
-}

project.config.json

@@ -1,28 +1,41 @@
-{
-  "appid": "wx12e34630814e5d30",
-  "compileType": "miniprogram",
-  "libVersion": "3.8.0",
-  "packOptions": {
-    "ignore": [],
-    "include": []
-  },
-  "setting": {
-    "coverView": true,
-    "es6": true,
-    "postcss": true,
-    "minified": true,
-    "enhance": true,
-    "showShadowRootInWxmlPanel": true,
-    "packNpmRelationList": [],
-    "babelSetting": {
-      "ignore": [],
-      "disablePlugins": [],
-      "outputPath": ""
-    }
-  },
-  "condition": {},
-  "editorSetting": {
-    "tabIndent": "insertSpaces",
-    "tabSize": 2
-  }
+{
+  "appid": "wx12e34630814e5d30",
+  "compileType": "miniprogram",
+  "libVersion": "3.8.0",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "setting": {
+    "coverView": true,
+    "es6": true,
+    "postcss": true,
+    "minified": true,
+    "enhance": true,
+    "showShadowRootInWxmlPanel": true,
+    "packNpmRelationList": [],
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    },
+    "compileWorklet": false,
+    "uglifyFileName": false,
+    "uploadWithSourceMap": true,
+    "packNpmManually": false,
+    "minifyWXSS": true,
+    "minifyWXML": true,
+    "localPlugins": false,
+    "disableUseStrict": false,
+    "useCompilerPlugins": false,
+    "condition": false,
+    "swc": false,
+    "disableSWC": true
+  },
+  "condition": {},
+  "editorSetting": {
+    "tabIndent": "insertSpaces",
+    "tabSize": 2
+  },
+  "simulatorPluginLibVersion": {}
 }

project.private.config.json

@@ -1,9 +1,24 @@
-{
-  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
-  "projectname": "GululuQ-mp",
-  "setting": {
-    "compileHotReLoad": true,
-    "urlCheck": false
-  },
-  "libVersion": "3.8.0"
+{
+    "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+    "projectname": "GululuQ-mp",
+    "setting": {
+        "compileHotReLoad": true,
+        "urlCheck": false,
+        "coverView": true,
+        "lazyloadPlaceholderEnable": false,
+        "skylineRenderEnable": false,
+        "preloadBackgroundData": false,
+        "autoAudits": false,
+        "useApiHook": true,
+        "useApiHostProcess": true,
+        "showShadowRootInWxmlPanel": true,
+        "useStaticServer": false,
+        "useLanDebug": false,
+        "showES6CompileOption": false,
+        "checkInvalidKey": true,
+        "ignoreDevUnusedFiles": true,
+        "bigPackageSizeSupport": false
+    },
+    "libVersion": "3.8.0",
+    "condition": {}
 }