团购页面和显示更多页面实现

app.json

@@ -4,7 +4,8 @@
     "pages/main/class/class",
     "pages/main/reading/reading",
     "pages/social/works/works",
-    "pages/user/myEdit/myEdit"
+    "pages/user/myEdit/myEdit",
+    "pages/discount-group/discount-group"
   ],
   "window": {
     "backgroundTextStyle": "light",

app.wxss

@@ -1,11 +1,15 @@
 /**app.wxss**/
+page {
+  width: 100%;
+  height: 100%;
+}
+
 .container {
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
-  padding: 80rpx 0;
+  padding-top: 80rpx;
   box-sizing: border-box;
-  /* background: #f0f1f5 */
 } 

component/group/group.js

@@ -5,5 +5,12 @@ export const groupInit =  (that) => {
       }
     })
     //请求数据封装
-  
+    that.more = function () {
+      wx.navigateTo({
+        url: '/pages/discount-group/discount-group'
+      })
+      wx.setNavigationBarTitle({
+        title: '限量优惠团购'
+      })
+    }
   }

component/group/group.wxml

@@ -1,3 +1,82 @@
 <template name="group">
-  <view> group 热团 </view>
+  <view class="group">
+    <scroll-view scroll-y="{{true}}">
+      <view class="group-container">
+        <view class="search">
+          <input type="text" placeholder="小学三年级下"></input>
+          <image class="sou" src="../../static/groupImg/Group 11@2x.png"></image>
+        </view>
+        <view class="less-group">
+          <view class="title">
+            <image class="ren" src="../../static/groupImg/tuandui@2x.png"></image>
+            <text class="left">限量优惠团购<text class="quota">（名额还剩1000份）</text></text>
+            <text class="right" bindtap="more">更多 ></text>
+          </view>
+          <view class="group-box">
+            <view class="group-item">
+              <image src="" style="background: red;"></image>
+              <view>拼团价 <text>￥1</text></view>
+              <view>原价 <text style="text-decoration: line-through;">￥99</text></view>
+            </view>
+            <view class="group-item">
+              <image src="" style="background: red;"></image>
+              <view>拼团价 <text>￥1</text></view>
+              <view>原价 <text style="text-decoration: line-through;">￥99</text></view>
+            </view>   
+            <view class="group-item">
+              <image src="" style="background: red;"></image>
+              <view>拼团价 <text>￥1</text></view>
+              <view>原价 <text style="text-decoration: line-through;">￥99</text></view>
+            </view>
+            <view class="group-item">
+              <image src="" style="background: red;"></image>
+              <view>拼团价 <text>￥1</text></view>
+              <view>原价 <text style="text-decoration: line-through;">￥99</text></view>
+            </view> 
+            <view class="group-item">
+              <image src="" style="background: red;"></image>
+              <view>拼团价 <text>￥1</text></view>
+              <view>原价 <text style="text-decoration: line-through;">￥99</text></view>
+            </view>
+            <view class="group-item">
+              <image src="" style="background: red;"></image>
+              <view>拼团价 <text>￥1</text></view>
+              <view>原价 <text style="text-decoration: line-through;">￥99</text></view>
+            </view>                                 
+          </view>
+        </view>
+      </view>
+      <view class="whole-group">
+          <view class="title">
+            <image class="ren" src="../../static/groupImg/tuandui@2x.png"></image>
+            <text class="left">限量优惠团购<text class="quota">（名额还剩1000份）</text></text>
+            <text class="right">更多 ></text>
+          </view>
+          <view class="group-box">
+            <view class="group-item">
+              <image src="" style="background: red;"></image>
+              <view id="grade">一年级语文下册</view>
+            </view>
+            <view class="group-item">
+              <image src="" style="background: red;"></image>
+              <view id="grade">一年级语文下册</view>
+            </view>   
+            <view class="group-item">
+              <image src="" style="background: red;"></image>
+              <view id="grade">一年级语文下册</view>
+            </view>                               
+          </view>
+        </view>
+    </scroll-view>
+    <view class="Collage-bottom">
+      <view>
+        <image src="../../static/groupImg/Shape1@2x.png"></image>
+        <text>发起团购</text>
+      </view>
+      <view>
+        <image src="../../static/groupImg/Shape2@2x.png"></image>
+        <text>发起团购</text>
+      </view>
+    </view>
+  </view>
 </template>

component/group/group.wxss

@@ -0,0 +1,144 @@
+::-webkit-scrollbar {
+    display: none;
+  }
+
+.group {
+    height: 100%;
+    width: 100%;
+    padding-bottom: 102rpx;
+    box-sizing: border-box; 
+}
+
+scroll-view {
+    height: 100%;
+}
+
+.group-container {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 0 18rpx; 
+    background: #fff;
+}
+
+.search {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 60rpx;
+    border-radius: 12rpx;
+    background: #F0F1F5;
+    padding: 0 20rpx;
+    box-sizing: border-box;
+}
+
+.search input {
+    width: 80%;
+    height: 100%;
+}
+
+.search image {
+    width: 34rpx;
+    height: 34rpx;
+}
+
+.less-group,
+.whole-group {
+    width: 100%;
+    background: #fff;
+}
+
+.whole-group {
+    margin-top: 32rpx;
+    padding: 0 18rpx; 
+    box-sizing: border-box;
+}
+
+.less-group .title,
+.whole-group .title {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 90rpx;
+    position: relative;
+}
+
+.title .left {
+    font-size: 32rpx;
+    padding-left: 52rpx; 
+}
+
+.quota {
+    font-size: 28rpx;
+    color: red;
+}
+
+.title .ren  {
+    width: 42rpx;
+    height: 36rpx;
+    position: absolute;
+    left: 0;
+}
+
+.title .right {
+    font-size: 28rpx;
+}
+
+
+.group-box {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.group-item {
+    display: flex;
+    flex-direction: column;
+}
+
+.group-item image {
+    width: 214rpx;
+    height: 278rpx;
+}
+
+.group-item view:nth-child(2) {
+    font-size: 32rpx;
+    color: #E51C23;
+}
+
+.group-item view:nth-child(3) {
+    font-size: 28rpx;
+    color: #969595;
+    margin-top: 18rpx;
+}
+
+
+.group-item text {
+    margin-left: 10rpx;
+}
+
+.group-item #grade {
+    margin-top: 20rpx;
+    color: #000;
+    text-align: center;
+    font-size: 28rpx;
+}
+
+.Collage-bottom {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ height: 102rpx;
+}
+
+.Collage-bottom image {
+    width: 42rpx;
+    height: 50rpx;
+    vertical-align: middle;
+    margin-right: 30rpx;
+}
+
+.Collage-bottom text {
+    vertical-align: middle;
+}

pages/discount-group/discount-group.js

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

pages/discount-group/discount-group.json

@@ -0,0 +1 @@
+{}

pages/discount-group/discount-group.wxml

@@ -0,0 +1,83 @@
+<!--pages/discount-group/discount-group.wxml-->
+<view class="discount-group">
+    <scroll-view scroll-y="{{true}}">
+      <view class="group-container">
+        <view class="less-group">
+          <view class="group-box">
+            <view class="group-item">
+              <image src="" style="background: red;"></image>
+              <view>拼团价 <text>￥1</text></view>
+              <view>原价 <text style="text-decoration: line-through;">￥99</text></view>
+            </view>
+            <view class="group-item">
+              <image src="" style="background: red;"></image>
+              <view>拼团价 <text>￥1</text></view>
+              <view>原价 <text style="text-decoration: line-through;">￥99</text></view>
+            </view>   
+            <view class="group-item">
+              <image src="" style="background: red;"></image>
+              <view>拼团价 <text>￥1</text></view>
+              <view>原价 <text style="text-decoration: line-through;">￥99</text></view>
+            </view>                  
+          </view>
+        </view>
+<view class="less-group">
+          <view class="group-box">
+            <view class="group-item">
+              <image src="" style="background: red;"></image>
+              <view>拼团价 <text>￥1</text></view>
+              <view>原价 <text style="text-decoration: line-through;">￥99</text></view>
+            </view>
+            <view class="group-item">
+              <image src="" style="background: red;"></image>
+              <view>拼团价 <text>￥1</text></view>
+              <view>原价 <text style="text-decoration: line-through;">￥99</text></view>
+            </view>   
+            <view class="group-item">
+              <image src="" style="background: red;"></image>
+              <view>拼团价 <text>￥1</text></view>
+              <view>原价 <text style="text-decoration: line-through;">￥99</text></view>
+            </view>                  
+          </view>
+        </view>
+<view class="less-group">
+          <view class="group-box">
+            <view class="group-item">
+              <image src="" style="background: red;"></image>
+              <view>拼团价 <text>￥1</text></view>
+              <view>原价 <text style="text-decoration: line-through;">￥99</text></view>
+            </view>
+            <view class="group-item">
+              <image src="" style="background: red;"></image>
+              <view>拼团价 <text>￥1</text></view>
+              <view>原价 <text style="text-decoration: line-through;">￥99</text></view>
+            </view>   
+            <view class="group-item">
+              <image src="" style="background: red;"></image>
+              <view>拼团价 <text>￥1</text></view>
+              <view>原价 <text style="text-decoration: line-through;">￥99</text></view>
+            </view>                  
+          </view>
+        </view>   
+<view class="less-group">
+          <view class="group-box">
+            <view class="group-item">
+              <image src="" style="background: red;"></image>
+              <view>拼团价 <text>￥1</text></view>
+              <view>原价 <text style="text-decoration: line-through;">￥99</text></view>
+            </view>
+            <view class="group-item">
+              <image src="" style="background: red;"></image>
+              <view>拼团价 <text>￥1</text></view>
+              <view>原价 <text style="text-decoration: line-through;">￥99</text></view>
+            </view>   
+            <view class="group-item">
+              <image src="" style="background: red;"></image>
+              <view>拼团价 <text>￥1</text></view>
+              <view>原价 <text style="text-decoration: line-through;">￥99</text></view>
+            </view>                  
+          </view>
+        </view>                           
+      </view>
+    </scroll-view>
+  </view>

pages/discount-group/discount-group.wxss

@@ -0,0 +1,84 @@
+/* pages/discount-group/discount-group.wxss */
+::-webkit-scrollbar {
+    display: none;
+  }
+
+.discount-group {
+    height: 100%;
+    width: 100%;
+    background:rgba(240,241,245,1);
+}
+
+scroll-view {
+    height: 100%;
+}
+
+.group-container {
+    width: 100%;
+}
+
+.less-group {
+    width: 100%;
+}
+
+.group-box {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background: #fff;
+    margin-bottom: 12rpx;
+    padding: 28rpx 18rpx; 
+    box-sizing: border-box;
+}
+
+.group-item {
+    display: flex;
+    flex-direction: column;
+}
+
+.group-item image {
+    width: 214rpx;
+    height: 278rpx;
+}
+
+.group-item view:nth-child(2) {
+    font-size: 32rpx;
+    color: #E51C23;
+}
+
+.group-item view:nth-child(3) {
+    font-size: 28rpx;
+    color: #969595;
+    margin-top: 18rpx;
+}
+
+
+.group-item text {
+    margin-left: 10rpx;
+}
+
+.group-item #grade {
+    margin-top: 20rpx;
+    color: #000;
+    text-align: center;
+    font-size: 28rpx;
+}
+
+.Collage-bottom {
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ height: 102rpx;
+}
+
+.Collage-bottom image {
+    width: 42rpx;
+    height: 50rpx;
+    vertical-align: middle;
+    margin-right: 30rpx;
+}
+
+.Collage-bottom text {
+    vertical-align: middle;
+}

pages/index/index.wxss

@@ -1,8 +1,8 @@
 /**index.wxss**/
 /*看*/
 @import "/component/hot/hot.wxss";
-/*搜索*/
-/* @import "/component/search/search.wxss"; */
+/*热团*/
+ @import "/component/group/group.wxss"; 
 /*我的*/
 @import "/component/my/my.wxss";
 .container{
@@ -26,6 +26,7 @@
   justify-content: space-between;
   align-items: center;
   margin-bottom: 15rpx;
+  z-index:1;
 }
 
 .tabbar {

project.config.json

@@ -11,7 +11,7 @@
 		"newFeature": true
 	},
 	"compileType": "miniprogram",
-	"libVersion": "2.3.0",
+	"libVersion": "2.3.2",
 	"appid": "wx8961a3e5512f307c",
 	"projectname": "reader",
 	"debugOptions": {