拼团详情完成

app.json

@@ -7,7 +7,9 @@
     "pages/main/singleBook/singleBook",
     "pages/main/reading/reading",
     "pages/user/myEdit/myEdit",
-    "pages/discount-group/discount-group"
+    "pages/discount-group/discount-group",
+    "pages/group-details/group-details",
+    "pages/grade-details/grade-details"
   ],
   "window": {
     "backgroundTextStyle": "light",

pages/discount-group/discount-group.js

@@ -8,6 +8,16 @@ Page({
 
   },
 
+//点击跳转到团购详情
+groupDetails:function () {
+  wx.navigateTo({
+    url: '/pages/group-details/group-details'
+  })
+  wx.setNavigationBarTitle({
+    title: '拼团详情'
+  })
+},
+
   /**
    * 生命周期函数--监听页面加载
    */

pages/discount-group/discount-group.wxml

@@ -4,7 +4,7 @@
       <view class="group-container">
         <view class="less-group">
           <view class="group-box">
-            <view class="group-item">
+            <view class="group-item" bindtap="groupDetails">
               <image src="" style="background: red;"></image>
               <view>拼团价 <text>￥1</text></view>
               <view>原价 <text style="text-decoration: line-through;">￥99</text></view>

pages/grade-details/grade-details.js

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

pages/grade-details/grade-details.json

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

pages/grade-details/grade-details.wxml

@@ -0,0 +1,44 @@
+<!--pages/grade-details/grade-details.wxml-->
+<view class="group-details">
+    <scroll-view scroll-y="{{true}}">
+        <view class="grade-details">
+            <image src="" style="background: red;"></image>
+            <text>【部编版】一年级语文同步-上学期</text>
+            <text>《语文一年级上册》为人教社2016年修订的教材，包括“我上学了识字汉语拼音课文口语交际语文园地”和“快乐读吧供一年级上学期使用。</text>
+        </view>
+        <view class="catalog">
+            <image src="../../static/groupImg/Rectangle 34@2x.png"></image>
+            <text>语文目录</text>
+        </view>
+        <view class="catalog-list">
+            <view class="catalog-item">
+                <text class="left">第一课 小小的船</text>
+                <text class="right">3215朗读 ></text>
+            </view>
+            <view class="catalog-item">
+                <text class="left">第一课 小小的船</text>
+                <text class="right">3215朗读 ></text>
+            </view>
+            <view class="catalog-item">
+                <text class="left">第一课 小小的船</text>
+                <text class="right">3215朗读 ></text>
+            </view>            
+        </view>
+    </scroll-view>
+    <view class="group-btn">
+        <image class="bg1" src="../../static/groupImg/Rectangle 9.png"></image>
+        <image class="bg2" src="../../static/groupImg/Rectangle 9.png"></image>
+        <view class="Price">
+            <text>￥99</text>
+            <text>单人团</text>
+        </view>
+        <view class="Price">
+            <text>￥99</text>
+            <text>单人团</text>
+        </view>
+        <view class="Price">
+            <text>￥99</text>
+            <text>单人团</text>
+        </view>
+    </view>
+</view>

pages/grade-details/grade-details.wxss

@@ -0,0 +1,138 @@
+/* pages/grade-details/grade-details.wxss */
+.group-details {
+    height: 100%;
+    width: 100%;
+    background:rgba(240,241,245,1);    
+}
+
+
+scroll-view {
+    height: 100%;
+    width: 100%;
+}
+
+.grade-details {
+    margin: 12rpx 0;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    padding: 24rpx;
+}
+
+.grade-details image{
+    width: 100%;
+    height: 290rpx;
+    border-radius: 20rpx;
+}
+
+.grade-details text {
+    font-size: 32rpx;
+}
+
+.grade-details text:nth-child(2) {
+    margin: 12rpx 0;
+}
+
+.catalog {
+    width: 100%;
+    height: 62rpx;
+    background: #fff;
+    position: relative;
+}
+
+.catalog image {
+    position: absolute;
+    left: 24rpx;
+    top: 10rpx;
+    width: 208rpx;
+    height: 42rpx;
+}
+
+.catalog text {
+    position: absolute;
+    left: 34rpx;
+    top: 7rpx;
+    z-index: 2;
+    color: #fff;
+    font-size: 36rpx;
+}
+
+.catalog-list {
+    width: 100%;
+    padding: 18rpx;
+    box-sizing: border-box;
+}
+
+.catalog-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 88rpx;
+    background: #fff;
+    padding: 0 20rpx;
+    box-sizing: border-box;
+    margin-bottom: 12rpx;
+    border-radius: 10rpx;
+}
+
+.catalog-item .left {
+    color: #656565;
+    font-size: 36rpx;
+}
+
+.catalog-item .right {
+    color: #939393;
+    font-size: 28rpx;
+}
+
+.group-btn {
+    width: 100%;
+    height: 102rpx;
+    background: #E5E5E5;
+    display: flex;
+    position: absolute;
+    bottom: 0;
+}
+
+.group-btn .Price {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #000;
+}
+
+.group-btn .Price:nth-child(4) {
+    color: #4A90E2;
+}
+
+.group-btn .Price:nth-child(5) {
+    color: #FC6400;
+}
+
+.group-btn .Price text:nth-child(1) {
+    font-size: 32rpx;
+}
+
+.group-btn .Price text:nth-child(2) {
+    font-size: 36rpx;
+}
+
+
+.group-btn .bg1,
+.group-btn .bg2 {
+    position: absolute;
+    top: 15%;
+    width: 4rpx;
+    height: 70%;
+}
+
+.group-btn .bg1 {
+    left: 35%;
+}
+
+.group-btn .bg2 {
+    left: 68%;
+}

pages/group-details/group-details.js

@@ -0,0 +1,75 @@
+// pages/group-details/group-details.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+  //跳转到年级
+  gradeDetails: function () {
+    wx.navigateTo({
+      url: '/pages/grade-details/grade-details'
+    })
+    // wx.setNavigationBarTitle({
+    //   title: '限量优惠团购'
+    // })
+  
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/group-details/group-details.json

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

pages/group-details/group-details.wxml

@@ -0,0 +1,88 @@
+<!--pages/group-details/group-details.wxml-->
+<view class="group-details">
+    <view class="details-head">
+        <view class="headImg">
+            <view class="headImg-item">
+                
+            </view>
+            <view class="headImg-item">
+ 
+            </view>
+            <view class="headImg-item">
+                <image src="../../static/groupImg/Mask Copy@2x.png"></image>
+            </view>
+            <view class="headImg-item">
+                <image src="../../static/groupImg/Mask Copy@2x.png"></image>
+            </view>  
+            <view class="headImg-item">
+                <image src="../../static/groupImg/Mask Copy@2x.png"></image>
+            </view>
+            <view class="headImg-item">
+                <image src="../../static/groupImg/Mask Copy@2x.png"></image>
+            </view>                      
+        </view>
+        <view class="shengyu">
+            <view class="shengyu-num">仅剩<text>3</text>个名额就拼团成功了</view>
+            <view class="shengyu-time">
+                剩余时间:
+                <view class="time">
+                    <image src="../../static/groupImg/Rectangle 31@2x.png"></image>
+                    <text>1</text>
+                </view>
+                天
+                <view class="time">
+                    <image src="../../static/groupImg/Rectangle 31@2x.png"></image>
+                    <text>1</text>
+                </view>
+                <view class="time">
+                    <image src="../../static/groupImg/Rectangle 31@2x.png"></image>
+                    <text>1</text>
+                </view> 
+                时             
+                <view class="time">
+                    <image src="../../static/groupImg/Rectangle 31@2x.png"></image>
+                    <text>1</text>
+                </view>
+                <view class="time">
+                    <image src="../../static/groupImg/Rectangle 31@2x.png"></image>
+                    <text>1</text>
+                </view>                
+                分             
+            </view>
+        </view>
+    </view>
+    <scroll-view scroll-y="{{true}}">
+        <view class="grade-details" bindtap="gradeDetails">
+            <image src="" style="background: red;"></image>
+            <text>【部编版】一年级语文同步-上学期</text>
+            <text>《语文一年级上册》为人教社2016年修订的教材，包括“我上学了识字汉语拼音课文口语交际语文园地”和“快乐读吧供一年级上学期使用。</text>
+        </view>
+        <view class="catalog">
+            <image src="../../static/groupImg/Rectangle 34@2x.png"></image>
+            <text>语文目录</text>
+        </view>
+        <view class="catalog-list">
+            <view class="catalog-item">
+                <text class="left">第一课 小小的船</text>
+                <text class="right">3215朗读 ></text>
+            </view>
+            <view class="catalog-item">
+                <text class="left">第一课 小小的船</text>
+                <text class="right">3215朗读 ></text>
+            </view>
+            <view class="catalog-item">
+                <text class="left">第一课 小小的船</text>
+                <text class="right">3215朗读 ></text>
+            </view>            
+        </view>
+    </scroll-view>
+    <view class="group-details-btn">
+        <view class="left-btn">
+            开团
+        </view>
+        <view class="right-btn">
+            <image src="../../static/groupImg/Rectangle 8 Copy@2x.png"></image>
+            <text>参团</text>
+        </view>
+    </view>
+</view>

pages/group-details/group-details.wxss

@@ -0,0 +1,193 @@
+/* pages/group-details/group-details.wxss */
+.group-details {
+    height: 100%;
+    width: 100%;
+    background:rgba(240,241,245,1);    
+}
+
+.details-head {
+    width: 100%;
+    background: #fff;
+}
+
+.headImg {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 40rpx 0;
+    box-sizing: border-box;
+}
+
+.headImg-item {
+    width: 106rpx;
+    height: 106rpx;
+    background: red;
+    border-radius: 50%;
+    margin: 20rpx 22rpx;
+}
+
+.headImg-item image {
+    width: 100%;
+    height: 100%
+}
+
+.shengyu {
+ display: flex;
+ flex-direction: column;   
+ color: #696969;
+}
+
+.shengyu-num {
+    text-align:center;    
+}
+
+.shengyu-num text {
+    color: #FF4330;
+}
+
+.shengyu-time {
+    display: flex;
+    justify-content: center;
+    align-items: center; 
+    margin-top: 8rpx;  
+}
+
+.shengyu-time .time {
+    position: relative;
+    width: 20rpx;
+    height: 40rpx;
+    margin:  0 8rpx;
+}
+
+.shengyu-time .time image {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 20rpx;
+    height: 40rpx;
+}
+
+.shengyu-time .time  text{
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 2;
+    color: #fff;
+    font-size: 28rpx;
+}
+
+scroll-view {
+    height: 59%;
+    width: 100%;
+}
+
+.grade-details {
+    margin: 12rpx 0;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    padding: 24rpx;
+}
+
+.grade-details image{
+    width: 100%;
+    height: 290rpx;
+    border-radius: 20rpx;
+}
+
+.grade-details text {
+    font-size: 32rpx;
+}
+
+.grade-details text:nth-child(2) {
+    margin: 12rpx 0;
+}
+
+.catalog {
+    width: 100%;
+    height: 62rpx;
+    background: #fff;
+    position: relative;
+}
+
+.catalog image {
+    position: absolute;
+    left: 24rpx;
+    top: 10rpx;
+    width: 208rpx;
+    height: 42rpx;
+}
+
+.catalog text {
+    position: absolute;
+    left: 34rpx;
+    top: 7rpx;
+    z-index: 2;
+    color: #fff;
+    font-size: 36rpx;
+}
+
+.catalog-list {
+    width: 100%;
+    padding: 18rpx;
+    box-sizing: border-box;
+}
+
+.catalog-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 88rpx;
+    background: #fff;
+    padding: 0 20rpx;
+    box-sizing: border-box;
+    margin-bottom: 12rpx;
+    border-radius: 10rpx;
+}
+
+.catalog-item .left {
+    color: #656565;
+    font-size: 36rpx;
+}
+
+.catalog-item .right {
+    color: #939393;
+    font-size: 28rpx;
+}
+
+.group-details-btn {
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    width: 100%;
+    height: 102rpx;
+}
+
+.left-btn {
+    width: 35%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: #F0F1F5;
+}
+
+.right-btn {
+    width: 65%;
+}
+
+.right-btn image{
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 65%;
+    height: 100%;
+}
+
+.right-btn text{
+    position: absolute;
+    width: 65%;
+    color: #fff;
+    text-align: center;
+    line-height: 102rpx;
+}

project.config.json

@@ -36,7 +36,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 1,
+			"current": 3,
 			"list": [
 				{
 					"id": 0,
@@ -49,6 +49,17 @@
 					"name": "edit",
 					"pathName": "pages/user/myEdit/myEdit",
 					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "团购详情",
+					"pathName": "pages/group-details/group-details",
+					"query": ""
+				},
+				{
+					"id": -1,
+					"name": "课程详情",
+					"pathName": "pages/grade-details/grade-details"
 				}
 			]
 		}