ui样式和逻辑调整

component/group/group.js

@@ -1,4 +1,5 @@
 import httpRequestApi from '../../utils/APIClient';
+import util from '../../utils/util';
 const app = getApp();
 export const groupInit = (that) => {
   that.setData({
@@ -7,20 +8,37 @@ export const groupInit = (that) => {
       bookList: [],
       sendGroupFlag: true,
       selectFlag: [],
-      isIPX: app.globalData.isIPX
+      isIPX: app.globalData.isIPX,
+      timeList: [],
+      listLength: '',
+      baseIndex: 0
     }
   })
-  //请求数据封装
-  that.getGroupList = function () {
+  //推荐团购
+  that.recommend = function (start, end) {
     httpRequestApi.getGroupList().success( (res) => {
       console.log('推荐团购',res.data.data)
-      that.data.groupData.recommendList = res.data.data.splice(0,6);
+      that.data.groupData.listLength = res.data.data.length;
+      that.data.groupData.recommendList = res.data.data.slice(start, end);
+      that.data.groupData.recommendList.forEach( (item) => {
+        if(item.groupPurchaseOrder.closeTime - Date.parse(new Date()) < 0 ) {
+          that.data.groupData.timeList.push('时间到了，')
+        } else {
+          that.data.groupData.timeList.push(util.formatTime(item.groupPurchaseOrder.closeTime - Date.parse(new Date())).join(':'))
+        }
+      })
+      console.log('截取之后', that.data.groupData.recommendList)
       that.setData({
         groupData: that.data.groupData
       })
+      //util.formatTime(groupOrder.closeTime - Date.parse(new Date()))
     }).fail((error) => {
       console.log('错误',error)
     })
+  }
+
+  //请求数据封装
+  that.getGroupList = function () {
     httpRequestApi.getAllBooks(1, 10).success((res) => {
       console.log('全部课',res.data.data.list)
       that.data.groupData.bookList = res.data.data.list;
@@ -35,19 +53,25 @@ export const groupInit = (that) => {
       console.log('错误',error)
     })
   }();
+
+  that.recommend(0, 3);
+
+  //点击换一换
+  that.change = function () {
+    that.data.groupData.baseIndex++;
+    if(that.data.groupData.listLength < 3 * (that.data.groupData.baseIndex)) {
+      that.data.groupData.baseIndex = 0;
+    }
+    that.setData({
+      groupData: that.data.groupData
+    })
+    that.recommend(3 * that.data.groupData.baseIndex, 3 * (that.data.groupData.baseIndex + 1));
+  }
   //点击跳转
   that.more = function ({currentTarget}) {
-    let type;
-    if(currentTarget.dataset.type == 'group') {
-      wx.navigateTo({
-        url: `/pages/groupPage/discount-group/discount-group`
-      })
-    }else {
       wx.navigateTo({
         url: `../main/books/books`
       })
-    }
-
   }
   //发起团购
   that.sendGroup = function () {

component/group/group.wxml

@@ -2,12 +2,32 @@
   <view class="group">
     <scroll-view scroll-y="{{true}}">
       <view class="group-container">
-        <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" data-type="group">更多 ></text>
+        <block wx:for="{{groupData.recommendList}}" wx:key="{{index}}">
+          <view class="group-bars">
+            <view class="group-head">
+              <image src="{{item.organizer.avatar}}"></image>
+              <text>{{item.organizer.wechatName}}</text>
+            </view>
+            <view class="group-jion">
+              <view class="top-title">
+                <text>{{item.groupPurchaseOrder.groupTitle}}</text>
+                <text>{{item.groupPurchaseOrder.headcount}}人团</text>
+              </view>
+              <view class="group-detail">
+                <view class="number">
+                  <text>还剩{{item.groupPurchaseOrder.headcount - item.groupPurchaseOrder.joinCount}}人成团</text>
+                  <text>剩余{{groupData.timeList[index]}}结束</text>
+                </view>
+                <view class="jion-btn" bindtap="groupDetail" data-ind="{{index}}" data-id="{{item.groupPurchaseOrder.id}}" data-productId="{{item.groupPurchaseOrder.productId}}" data-groupId="{{item.groupPurchaseOrder.groupId}}">
+                  去参团
+                </view>
+              </view>
+            </view>
           </view>
+        </block>
+        <view class="change" bindtap="change">换一换</view>
+        <!--
+        <view class="less-group">
           <view class="group-box">
             <block wx:for="{{groupData.recommendList}}" wx:key="{{index}}">
               <view class="group-item" bindtap="groupDetail" data-ind="{{index}}" data-id="{{item.id}}" data-productId="{{item.productId}}" data-groupId="{{item.groupId}}">
@@ -22,13 +42,14 @@
             </block>                 
           </view>
         </view>
+        -->
+      </view>
+      <view class="title">
+        <image class="ren" src="../../static/groupImg/Shape3.png" style="width: 30rpx; height: 38rpx;"></image>
+        <text class="left">全部课程</text>
+        <text class="right" bindtap="more" data-type="course">更多 ></text>
       </view>
       <view class="whole-group">
-          <view class="title">
-            <image class="ren" src="../../static/groupImg/Shape3.png" style="width: 30rpx; height: 38rpx;"></image>
-            <text class="left">全部课程</text>
-            <text class="right" bindtap="more" data-type="course">更多 ></text>
-          </view>
           <view class="group-box"> 
             <block wx:for="{{groupData.bookList}}" wx:key="{{index}}">
               <view class="group-item" data-id="{{item.id}}" data-title="{{item.title}}" bindtap="goToBook">
@@ -51,6 +72,7 @@
       </view>
     </view>
   </view>
+  <!--
   <view class="group-popup" bindtap="sendGroup" hidden="{{groupData.sendGroupFlag}}">
       <view class="group-content">
         <view class="group-title">请选择课本</view>
@@ -69,4 +91,5 @@
         </view>
       </view>
   </view>
+  -->
 </template>

component/group/group.wxss

@@ -17,10 +17,93 @@ scroll-view {
     width: 100%;
     box-sizing: border-box;
     padding: 0 18rpx;
+}
+
+.group-bars {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 188rpx;
     background: #fff;
+    margin-top: 20rpx;
+    border-radius: 12rpx;
+    padding: 14rpx 28rpx;
+    box-sizing: border-box;
+}
+
+.group-head {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.group-head image {
+    width: 96rpx;
+    height: 96rpx;
+    border-radius: 50%;
+}
+
+.group-head text {
+    font-size: 32rpx;
+    margin-top: 12rpx;
+}
+
+.group-jion {
+    width: 460rpx;
+}
+
+.group-jion .top-title {
+    display: flex;
+    justify-content: space-between;
+    font-size: 32rpx;
+}
+
+.group-jion .group-detail {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 84rpx;
+    border: 4rpx solid #FFACB6;
+    border-radius: 12rpx;
+    overflow: hidden;
+    margin-top: 26rpx;
+}
+
+.group-jion .group-detail .number {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 34rpx;
+    font-size: 28rpx;
+    color: #4A4A4A;
+}
+
+.group-jion .group-detail .jion-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36%;
+    height: 100%;
+    background: #FF3E55;
+    color: #fff;
+    font-size: 36rpx;
+    line-height: 100%;
+}
+
+.change {
+    width: 146rpx;
+    height: 48rpx;
+    background: #5BB7FD;
+    border-radius: 48rpx;
+    margin: 20rpx auto;
+    text-align: center;
+    line-height: 48rpx;
+    color: #fff;
+    font-size: 28rpx;
 }
 
-.less-group,
+
 .whole-group {
     width: 100%;
     min-height: 60%;
@@ -28,18 +111,18 @@ scroll-view {
 }
 
 .whole-group {
-    margin-top: 32rpx;
-    padding: 0 18rpx;
+    padding: 20rpx 18rpx;
     box-sizing: border-box;
 }
 
-.less-group .title,
-.whole-group .title {
+.title {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    height: 90rpx;
+    height: 70rpx;
+    padding: 0 18rpx;
     position: relative;
+    box-sizing: border-box;
 }
 
 .title .left {
@@ -56,7 +139,7 @@ scroll-view {
     width: 42rpx;
     height: 36rpx;
     position: absolute;
-    left: 0;
+    left: 20rpx;
 }
 
 .title .right {
@@ -85,28 +168,6 @@ scroll-view {
     height: 278rpx;
 }
 
-.group-item .group-num {
-    position: absolute;
-    left: 0;
-    top: 14rpx;
-    width: 100rpx;
-    height: 40rpx;
-}
-
-.group-item .group-num image {
-    width: 100%;
-    height: 100%;
-}
-
-.group-item .group-num text {
-    color: #fff;
-    position: absolute;
-    left: 6rpx;
-    top: 4rpx;
-    z-index: 3;
-    font-size: 24rpx;
-}
-
 .group-item view:nth-child(2) {
     font-size: 32rpx;
     color: #E51C23;

pages/groupPage/collage-details/collage-details.js

@@ -7,7 +7,6 @@ Page({
    * 页面的初始数据
    */
   data: {
-    hideFlag: true,
     groupPurchaseInfo: {},
     organizer: {},
     surplusNum: '',
@@ -34,13 +33,6 @@ Page({
     read: false,
     organizerUid: ''
   },
-
-  //规则页显示和隐藏
-  hide: function () {
-    this.setData({
-      hideFlag: !this.data.hideFlag
-    })
-  },
   //显示分享页 
   openShare: function () {
     if(this.data.read){

pages/groupPage/collage-details/collage-details.wxml

@@ -51,16 +51,15 @@
         </view>
         <view class="invitation-btn" bindtap="openShare">
             <image src="../../../static/groupImg/Invitation.png"></image>
-            <text>{{read ? '去朗读' : '邀请朋友参加'}}</text>
+            <text>{{read ? '开始你的表演' : '邀请朋友参加'}}</text>
         </view>
     </view>  
-    <view class="rule" style="{{hideFlag ? 'right' : 'left'}}: 0" bindtap="hide">
-        <image src="../../../static/groupImg/rule{{hideFlag ? '1' : '2'}}.png"></image>
-        <text>拼团规则</text>        
-    </view>  
-    <view class="explain" hidden="{{hideFlag}}">
+    <view class="explain">
         <text>拼团规则</text>
-        * 转发给自己的朋友们，分享好课， 追随您一起学习进步。您的魅力不是吹的！ * 如果拼团失败，您预付的课程费将在48小时内退回您的账户。
+        <view>转发给自己的朋友们，分享好课， 追随您一起学习进步 您的魅力不是吹的</view>
+        <view>在限定时间内成功拼团，您将得到xx元的奖励金</view>
+        <view>如果拼团失败 </view>
+        <view>您预付的课程费将在48小时内退回您的账户</view>
     </view>
 </view> 
 <canvas canvas-id="myCanvas" style="width:370px; height: 507px; position: absolute; left: -999rpx; top: -9999rpx;"></canvas>

pages/groupPage/collage-details/collage-details.wxss

@@ -115,7 +115,7 @@
 .invitation-btn {
     position: absolute;
     left: 50%;
-    top: 65%;
+    top: 55%;
     transform: translate(-50%);
     width: 434rpx;
     height: 80rpx;
@@ -168,14 +168,16 @@
 
 .explain {
     position: absolute;
-    top: 73%;
-    left: 11%;
-    background: #61CA54;
-    padding: 20rpx;
+    top: 65%;
+    left: 0;
     color: #000;
     font-size: 32rpx;
-    width: 668rpx;
+    width: 100%;
+    padding: 0 80rpx;
     box-sizing: border-box;
+    text-align: center;
+    font-size: 28rpx;
+    line-height: 50rpx;
 } 
 
 .explain text {

pages/groupPage/grade-details/grade-details.wxml

@@ -31,9 +31,8 @@
         <image class="bg1" src="../../../static/groupImg/Rectangle_9.png" style="left: 50%"></image>   
         <block wx:for="{{payList}}" wx:key="{{index}}">
             <view class="Price" bindtap="pay" data-id="{{item.id}}" wx:if="{{share ? (index != 0) : true }}">
-                <view>继续开团</view>
+                <view>继续开团 赚奖学金</view>
                 <view>
-                    <text>￥{{item.price / 100}}</text>
                     <text>{{item.headcount}}人团</text>
                 </view>
             </view> 

pages/groupPage/grade-details/grade-details.wxss

@@ -90,10 +90,11 @@ scroll-view {
 .group-btn {
     width: 100%;
     height: 102rpx;
-    background: #E5E5E5;
+    background: #FF9209;
     display: flex;
     position: absolute;
     bottom: 0;
+    color: #fff;
 }
 
 .bottomx {
@@ -106,15 +107,6 @@ scroll-view {
     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) {

pages/groupPage/group-details/group-details.js

@@ -29,7 +29,10 @@ Page({
     content: [],
     organizer: '',
     hide: true,
-    isIPX: app.globalData.isIPX
+    isIPX: app.globalData.isIPX,
+    bookList: [],
+    sendGroupFlag: true,
+    selectFlag: []
   },
   jurisdiction: function () {
     //隐藏弹框
@@ -39,20 +42,43 @@ Page({
     //登录页信息
     this.onLoad();
   },
-  //跳转到年级
-  gradeDetails: function () {
-    // wx.navigateTo({
-    //   url: '/pages/groupPage/grade-details/grade-details'
-    // })
-    // wx.setNavigationBarTitle({
-    //   title: '限量优惠团购'
-    // })
+  //发起团购
+  sendGroup: function () {
+    this.setData({
+      sendGroupFlag: !this.data.sendGroupFlag
+    })
+  },
+  //选中团购课程
+  selectImg: function ({ currentTarget }) {
+    const ind = currentTarget.dataset.ind;
+    //判断单选
+    this.data.selectFlag.forEach((item, index) => {
+      if(index == ind) {
+        this.data.selectFlag[ind] = !this.data.selectFlag[ind];
+      }else {
+        this.data.selectFlag[index] = true;
+      }
+    })
+    this.setData({
+      selectFlag: this.data.selectFlag
+    })
+  },
+  //点击确定
+  sure: function () {
+    this.data.selectFlag.forEach( (item ,index) => {
+      if(!item) {
+        const productId = this.data.bookList[index].id;
+        this.setData({
+          sendGroupFlag: !this.data.sendGroupFlag
+        })
+        this.openGroup(productId)
+      }
+    })
 
   },
   //开团
-  openGroup: function () {
-   
-    const productId = this.data.productId;
+  openGroup: function (productId) {
+    //const productId = this.data.productId;
     const groupId = this.data.groupId;
     //开始发起团购
     httpRequestApi.SendGroupPurchas({
@@ -74,7 +100,7 @@ Page({
         })
         return false;
       }
-      debugger;
+      
       if (res.data.data.groupPurchaseOrder.groupType === 'BASE') {
         //掉起支付
         this.prePayMap(res.data.data.prePayMap, 'create');
@@ -90,9 +116,7 @@ Page({
   },
   //参团
   jionGroup: function () {
-    
     const orderId = this.data.orderId;
-    
     //开始发起团购
     httpRequestApi.JoinGroupPurchas(orderId).success((res) => {
       console.log('参加团购', res);
@@ -119,7 +143,6 @@ Page({
 
   //支付
   prePayMap: function (prePayMap, type) {
-    
     console.log(prePayMap)
     const that = this;
     wx.requestPayment({
@@ -174,9 +197,10 @@ Page({
         } else {
           this.goToDetail(groupOrder.id)
         }
-
-      } else {
+      } if (type = 'create') {
         debugger;
+        this.showSuccess(groupOrder.organizer, groupOrder.organizerPrice)
+      } else {
         for (var i = 0; i < surplusNum; i++) {
           this.data.surplusList.push(1);
         }
@@ -210,6 +234,7 @@ Page({
   },
   // 弹成功信息框
   showSuccess: function (organizerUid, price) {
+    debugger;
     if (wx.getStorageSync('uid') == organizerUid) {
       this.setData({
         typeOf: 'success',
@@ -283,75 +308,18 @@ Page({
       url: `../../main/class/class?id=${id}&title=${title}`
     })
   },
+
   //拼团是否成功并弹窗
   // groupSuccess: function (orderId, detailId) {
   //   httpRequestApi.groupSuccess(orderId).success(res => {
   //     console.log('团购是否成功', res.data.data)
   //     const status = res.data.data.status;
   //     const uid = res.data.data.uid;
-  //     if (status === 'SUCCESSED') {
-  //       if (wx.getStorageSync('uid') == uid) {
-  //         this.setData({
-  //           typeOf: 'success',
-  //           title: '恭喜 !',
-  //           headTextOne: '您发起的团购拼团成功',
-  //           content: [{
-  //               text: "领袖体质魅力无穷！",
-  //               color: "#000"
-  //             },
-  //             {
-  //               text: " 您可以继续发起新的团购，",
-  //               color: "#000"
-  //             },
-  //             {
-  //               text: " 不再需要支付本课程费用，拼团成功，",
-  //               color: "#FF9B00"
-  //             },
-  //             {
-  //               text: " 您将得到xxx元奖励。",
-  //               color: "#FF0000"
-  //             }
-  //           ],
-  //         })
-  //       } else {
-  //         this.setData({
-  //           typeOf: 'success',
-  //           title: '拼团成功 ! ',
-  //           headTextOne: '您参与的团购拼团成功',
-  //           headTextTwo: '订单号：12344',
-  //           content: [{
-  //               text: "感谢团长的分享",
-  //               color: "#000"
-  //             },
-  //             {
-  //               text: " 您也可以发起新的团购分享给需要的朋友们，",
-  //               color: "#000"
-  //             },
-  //             {
-  //               text: "作为新的发起人，您无需在支付本课程费用；",
-  //               color: "#FF0000"
-  //             },
-  //             {
-  //               text: "团购成功，您将得到xxx元奖励。",
-  //               color: "#FF0000"
-  //             }
-  //           ],
-  //         })
-  //       }
-  //     } else {
-  //       setTimeout(() => {
-  //         wx.navigateTo({
-  //           url: `/pages/groupPage/collage-details/collage-details?orderId=${detailId}`
-  //         })
-  //         wx.setNavigationBarTitle({
-  //           title: '拼团详情'
-  //         })
-  //       }, 3000)
-  //     }
   //   }).fail(error => {
   //     console.log('错误', eroor)
   //   })
   // },
+
   //再次发起团
   group: function () {
     this.openGroup();
@@ -381,7 +349,6 @@ Page({
     })
     //课本详情
     httpRequestApi.getBookDetail(wx.getStorageSync('uid'), productId).success((res) => {
-
       console.log('课本详情', res.data.data);
       const bookInfo = res.data.data.product;
       const lessonList = res.data.data.lessonList;
@@ -404,6 +371,19 @@ Page({
     }).fail((error) => {
 
     })
+    //全部课本
+    httpRequestApi.getAllBooks(1, 10).success((res) => {
+      console.log('全部课',res.data.data.list)
+      res.data.data.list.forEach(element => {
+        this.data.selectFlag.push(true);
+      });
+      this.setData({
+        bookList: res.data.data.list,
+        selectFlag: this.data.selectFlag
+      })
+    }).fail((error) => {
+      console.log('错误',error)
+    })
     //获取拼团信息
     this.jionSuccess(orderId);
   },

pages/groupPage/group-details/group-details.wxml

@@ -59,12 +59,35 @@
         </view>
     </scroll-view>
     <view class="group-details-btn {{isIPX ? 'bottomx' :''}}" hidden="{{surplusNum == '0'}}">
+        <!--
         <view class="left-btn" bindtap="openGroup">
             开团
         </view>
+        -->
+        <view class="left-btn" bindtap="sendGroup">
+            开团
+        </view>
         <view class="right-btn" bindtap="jionGroup">
-            <image src="../../../static/groupImg/jionBg.png"></image>
-            <text>参团</text>
+            参团
+        </view>
+    </view>
+</view>
+
+<view class="group-popup" bindtap="sendGroup" hidden="{{sendGroupFlag}}">
+    <view class="group-content">
+        <view class="group-title">请选择课本</view>
+        <view class="group-list">
+            <block wx:for="{{bookList}}" wx:key="{{index}}">
+                <view class="group-item" catchtap="selectImg" data-ind="{{index}}">
+                <image class="item-img" src="{{item.iconImg}}"></image>
+                <view id="grade">{{item.subTitle}}</view>
+                <image class="select-img" src="../../../static/groupImg/{{selectFlag[index] ? 'bai' : 'lan'}}.png"></image>
+                </view> 
+            </block>
+        </view>
+        <view class="sure" catchtap="sure">
+            <image src="../../../static/groupImg/sure.png"></image>
+            <text>确定</text>
         </view>
     </view>
 </view>

pages/groupPage/group-details/group-details.wxss

@@ -174,8 +174,11 @@ scroll-view {
     position: fixed;
     bottom: 0;
     display: flex;
+    align-items: center;
     width: 100%;
-    height: 102rpx;
+    height: 100rpx;
+    background: #FF9209;
+    color: #fff;
     z-index: 99;
 }
 
@@ -183,31 +186,92 @@ scroll-view {
     bottom: 20rpx;
 }
 
-.left-btn {
-    width: 35%;
-    height: 100%;
+.left-btn,
+.right-btn {
+    flex: 1;
+    height: 54rpx;
     display: flex;
     justify-content: center;
     align-items: center;
-    background: #F0F1F5;
 }
 
-.right-btn {
-    width: 65%;
+.left-btn {
+    border-right: 2rpx solid #fff;
 }
 
-.right-btn image{
+.group-popup {
     position: absolute;
-    right: 0;
+    left: 0;
     top: 0;
-    width: 65%;
+    width: 100%;
     height: 100%;
+    background: rgba(0, 0, 0, .5);
+    z-index: 99;
 }
 
-.right-btn text{
+.group-popup .group-content {
     position: absolute;
-    width: 65%;
-    color: #fff;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    width: 80%;
+    background: #fff;
+    border-radius: 20rpx;
+}
+
+.group-title {
     text-align: center;
-    line-height: 102rpx;
+    margin: 36rpx 0;
+}
+
+.group-list {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 0 62rpx;
+}
+.group-list .group-item{
+    position: relative;
+    display: flex;
+    margin-right:0;
+    justify-content: space-between;
+    flex-direction: column; 
+}
+.group-content-img {
+    width: 214rpx;
+    height: 290rpx;
+}
+
+.sure {
+    position: relative;
+    width: 392rpx;
+    height: 80rpx;
+    margin: 36rpx auto 26rpx auto;
+}
+
+.sure image {
+    width: 100%;
+    height: 100%;
+}
+
+.sure text {
+    position: absolute;
+    left: 164rpx;
+    top: 18rpx;
+    color: #fff;
+    z-index: 2;
+}
+
+.select-img {
+    position: absolute;
+    bottom: 56rpx;
+    right: 10rpx;
+    width: 52rpx;
+    height: 52rpx;
+    z-index: 99;
+}
+
+.group-item .item-img {
+    width: 214rpx;
+    height: 278rpx;
 }

pages/groupPage/my-group/my-group.js

@@ -1,5 +1,6 @@
 // pages/groupPage/my-group/my-group.js
 import httpRequestApi from '../../../utils/APIClient';
+import util from '../../../utils/util';
 Page({
 
   /**
@@ -16,7 +17,8 @@ Page({
     orderId: '',
     groupId: '',
     closeFlags: [],
-    ind: 0
+    ind: 0,
+    timeList: []
   },
     //跳转到团购详情页
   collageDetails: function ({currentTarget}) {
@@ -69,15 +71,22 @@ Page({
       }
       console.log('我的团', res.data.data.list)
       res.data.data.list.forEach(element => {
-        if(element.status == 'SUCCESSED') {
+        if(element.groupPurchaseOrder.status == 'SUCCESSED') {
           this.data.closeFlags.push(true);
+          this.data.timeList.push(util.formatDate(element.groupPurchaseOrder.gmtModified, 1))
         }else {
           this.data.closeFlags.push(false);
+          if(element.groupPurchaseOrder.closeTime - Date.parse(new Date()) < 0 ) {
+            this.data.timeList.push('时间到了，')
+          } else {
+            this.data.timeList.push(util.formatTime(element.groupPurchaseOrder.closeTime - Date.parse(new Date())).join(':'))
+          }
         }
       });
       this.setData({
         closeFlags: this.data.closeFlags,
-        myGroupList: res.data.data.list
+        myGroupList: res.data.data.list,
+        timeList: this.data.timeList
       })
     }).fail( error => {
       console.log('错误', error)

pages/groupPage/my-group/my-group.wxml

@@ -2,6 +2,32 @@
 <view class="my-group">
     <scroll-view scroll-y="{{true}}">
         <view class="my-group-content">
+          <block wx:for="{{myGroupList}}" wx:key="{{index}}">
+            <view class="group-bars">
+                <view class="group-head">
+                    <image src="{{item.organizer.avatar}}"></image>
+                    <text>{{item.organizer.wechatName}}</text>
+                </view>
+                <view class="group-jion">
+                <view class="top-title">
+                    <text>{{item.groupPurchaseOrder.groupTitle}}</text>
+                    <text>{{item.groupPurchaseOrder.headcount}}人团</text>
+                </view>
+                <view class="group-detail {{item.groupPurchaseOrder.status =='SUCCESSED' ? 'success-border' : ''}}">
+                    <view class="number">
+                        <text wx:if="{{item.groupPurchaseOrder.headcount - item.groupPurchaseOrder.joinCount}}">还剩{{item.groupPurchaseOrder.headcount - item.groupPurchaseOrder.joinCount}}人成团</text>
+                        <text wx:if="{{!(item.groupPurchaseOrder.headcount - item.groupPurchaseOrder.joinCount)}}">拼团成功</text>
+                        <text wx:if="{{item.groupPurchaseOrder.headcount - item.groupPurchaseOrder.joinCount}}">剩余{{timeList[index]}}结束</text>
+                        <text wx:if="{{!(item.groupPurchaseOrder.headcount - item.groupPurchaseOrder.joinCount)}}">{{timeList[index]}}</text>
+                    </view>
+                    <view class="jion-btn {{item.groupPurchaseOrder.status =='SUCCESSED' ? 'success-bg' : ''}}"  bindtap="collageDetails" data-ind="{{index}}" data-num="{{item.groupPurchaseOrder.status==='SUCCESSED'}}" data-orderId="{{item.groupPurchaseOrder.id}}" data-groupId="{{item.groupPurchaseOrder.groupId}}" data-productId="{{item.groupPurchaseOrder.productId}}" data-uid="{{item.groupPurchaseOrder.organizer}}">
+                        {{item.status =='SUCCESSED' ? '已成功' : '去参团'}}
+                    </view>
+                </view>
+                </view>
+            </view>
+          </block>
+            <!--
             <block wx:for="{{myGroupList}}" wx:key="{{index}}">
                 <view class="group-item" bindtap="collageDetails" data-ind="{{index}}" data-num="{{item.status==='SUCCESSED'}}" data-orderId="{{item.id}}" data-groupId="{{item.groupId}}" data-productId="{{item.productId}}" data-uid="{{item.organizer}}">
                     <image class="item-img" src="{{item.iconImg}}" ></image>
@@ -10,6 +36,7 @@
                     <image class="type-img" src="../../../static/groupImg/{{item.status==='SUCCESSED' ? 'yisuccess' : 'weisuccess' }}.png"></image>
                 </view> 
             </block>
+            -->
         </view>
     </scroll-view>
 </view>

pages/groupPage/my-group/my-group.wxss

@@ -2,6 +2,7 @@
 .my-group {
     width: 100%;
     height: 100%;
+    background:rgba(240,241,245,1);
 }
 
 .my-group scroll-view {
@@ -14,35 +15,86 @@
     display: flex;
     justify-content: row;
     flex-wrap: wrap;
-    padding-top: 44rpx;
+    padding: 0 16rpx;
     box-sizing: border-box;
 }
 
-.group-item {
-    position: relative;
+.group-bars {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 188rpx;
+    background: #fff;
+    margin-top: 20rpx;
+    border-radius: 12rpx;
+    padding: 14rpx 28rpx;
+    box-sizing: border-box;
+}
+
+.group-head {
     display: flex;
     flex-direction: column;
-    text-align: center;
-    margin-left: 28rpx;
+    align-items: center;
+    justify-content: center;
+}
+
+.group-head image {
+    width: 96rpx;
+    height: 96rpx;
+    border-radius: 50%;
+}
+
+.group-head text {
+    font-size: 32rpx;
+    margin-top: 12rpx;
+}
+
+.group-jion {
+    width: 460rpx;
+}
+
+.group-jion .top-title {
+    display: flex;
+    justify-content: space-between;
+    font-size: 32rpx;
+}
+
+.group-jion .group-detail {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 84rpx;
+    border: 4rpx solid #FFACB6;
+    border-radius: 12rpx;
+    overflow: hidden;
+    margin-top: 26rpx;
 }
 
-.group-item .item-img {
-    width: 214rpx;
-    height: 278rpx;
+.group-jion .success-border {
+    border: 4rpx solid #93D33D;
 }
 
-.type-img {
-    position: absolute;
-    left: 0;
-    top: 16rpx;
-    width: 100rpx;
-    height: 40rpx;
+.group-jion .group-detail .number {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 34rpx;
+    font-size: 28rpx;
+    color: #4A4A4A;
+}
+
+.group-jion .group-detail .jion-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36%;
+    height: 100%;
+    background: #FF3E55;
+    color: #fff;
+    font-size: 36rpx;
+    line-height: 100%;
 }
 
-.jiang {
-    position: absolute;
-    right: 5rpx;
-    bottom: 55rpx;
-    width: 82rpx;
-    height: 68rpx;   
+.group-jion .group-detail .success-bg {
+    background: #93D33D;
 }

project.config.json

@@ -36,7 +36,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 9,
+			"current": 10,
 			"list": [
 				{
 					"id": 0,
@@ -98,6 +98,12 @@
 					"name": "团购",
 					"pathName": "pages/groupPage/grade-details/grade-details",
 					"query": "id=1542264513955412"
+				},
+				{
+					"id": -1,
+					"name": "参团",
+					"pathName": "pages/groupPage/collage-details/collage-details",
+					"query": ""
 				}
 			]
 		}