1

app.json

@@ -4,7 +4,8 @@
     "pages/test/test",
     "pages/index/index",
     "pages/logs/logs",
-    "pages/userCenter/userCenter"
+    "pages/userCenter/userCenter",
+    "components/banner/banner"
   ],
   "usingComponents": {
     "van-button": "/miniprogram_npm/vant-weapp/button/index",

components/banner/banner.js

@@ -0,0 +1,31 @@
+// components/banner/banner.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    bannerList: { type: Array }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    //轮播图配置
+    // 是否显示指示点
+    indicatorDots: true,
+    // 自动滚动
+    autoplay: true,
+    // 切换时间间隔
+    interval: 3000,
+    // 滑动动画时长
+    duration: 1200,
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

components/banner/banner.json

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

components/banner/banner.wxml

@@ -0,0 +1,9 @@
+<view class="main">
+  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
+    <block wx:for="{{bannerList}}" wx:key="item">
+      <swiper-item>
+        <image src="{{item.url}}" class="image" />
+      </swiper-item>
+    </block>
+  </swiper>
+</view>

components/banner/banner.wxss

@@ -0,0 +1,9 @@
+.main swiper {
+  height: 200px;
+}
+
+.main .image {
+  width: 100%;
+  height: 400rpx;
+  overflow: hidden;
+}

components/product/list.js

@@ -0,0 +1,23 @@
+// components/product/list.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    list: { type: Array }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+
+  }
+})

components/product/list.json

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

components/product/list.wxml

@@ -0,0 +1,19 @@
+<view class="main">
+  <view class="list" wx:key="item" wx:for="{{list}}">
+    <view class="image">
+      <image src="{{item.url}}"></image>
+    </view>
+    <view class="title">
+      <text>{{item.title}}</text>
+    </view>
+    <view class="btn">
+      <view class="left">
+        <text>¥{{item.money}}</text>
+        <text>{{item.personal}}人团</text>
+      </view>
+      <view class="right">
+        <button>拼一单</button>
+      </view>
+    </view>
+  </view>
+</view>

components/product/list.wxss

@@ -0,0 +1,77 @@
+.main {
+  padding: 20rpx;
+}
+
+.main .list {
+  float: left;
+  width: 100%;
+  background-color: #ffffff;
+  margin: 0 0 20rpx 0;
+  border-radius: 8px;
+  box-shadow: 0px 0px 8px 0px rgba(225, 225, 225, 100);
+}
+
+.main .list .image {
+  float: left;
+  width: 100%;
+}
+
+.main .list .image image {
+  width: 100%;
+  height: 346rpx;
+  border-top-left-radius: 10rpx;
+  border-top-right-radius: 10rpx;
+}
+
+.main .list .title {
+  padding: 0 20rpx;
+}
+
+.main .list .title text {
+  display: inline-block;
+  width: 100%;
+  font-size: 33rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: bold;
+  margin: 20rpx 0;
+}
+
+.main .list .btn {
+  padding: 0 20rpx;
+}
+
+.main .list .btn .left {
+  float: left;
+  width: 50%;
+  color: #ff0000;
+  font-weight: bold;
+  padding: 20rpx 0;
+}
+
+.main .list .btn .left text {
+  margin: 0 10rpx;
+}
+
+.main .list .btn .left text:last-child {
+  background-color: #ff0000;
+  color: #ffffff;
+  border-radius: 10rpx;
+  padding: 5rpx 10rpx;
+  font-size: 25rpx;
+}
+
+.main .list .btn .right {
+  float: right;
+  width: 50%;
+  text-align: right;
+}
+
+.main .list .btn .right button {
+  border-radius: 90rpx;
+  background-color: #ff0000;
+  color: #ffffff;
+  width: 50%;
+  line-height: 70rpx;
+}

pages/product/product.js

@@ -9,7 +9,28 @@ Page({
     navbarInfo: {
       title: '拼团列表',
       leftShow: false
-    }
+    },
+    bannerList: [
+      {
+        "url": "/pages/image/banner/banner1.png"
+      },
+      {
+        "url": "/pages/image/banner/banner1.png"
+      },
+    ],
+    list: [
+      {
+        url: '/pages/image/product/product1.png',
+        title: '超值抢购水光唇膜术，三人团1980，无任何超值抢购水光唇膜术，三人团1980，无任何',
+        money: '120',
+        personal: '2'
+      }, {
+        url: '/pages/image/product/product2.png',
+        title: '十九匠日式渐变显白夏季款式美甲',
+        money: '120',
+        personal: '4'
+      }
+    ]
   },
   leftBtn: function (type) {
     if (type.detail == '1') {

pages/product/product.json

@@ -1,5 +1,7 @@
 {
   "usingComponents": {
-    "nav-bar": "/components/navBar/navBar"
+    "nav-bar": "/components/navBar/navBar",
+    "banner-list": "/components/banner/banner",
+    "list": "/components/product/list"
   }
 }

pages/product/product.wxml

@@ -1,9 +1,11 @@
-<view class="mian">
-  <nav-bar navbarInfo="{{navbarInfo}}" bind:leftBtn="leftBtn"></nav-bar>
-  <view>
-    轮播图
+<view class="main">
+  <view class="one">
+    <nav-bar navbarInfo="{{navbarInfo}}" bind:leftBtn="leftBtn"></nav-bar>
   </view>
-  <view>
-    产品列表
+  <view class="two">
+    <banner-list bannerList="{{bannerList}}"></banner-list>
+  </view>
+  <view class="thr">
+    <list list="{{list}}"></list>
   </view>
 </view>

pages/product/product.wxss

@@ -1 +1,12 @@
-/* pages/product/product.wxss */
+.main {}
+
+.main .one {}
+
+.main .two {}
+
+.main .thr {
+  float: left;
+  width: 100%;
+  height: 100%;
+  background-color: #fdfdfd;
+}