弹窗封装

component/group/group.wxml

@@ -80,5 +80,4 @@
       </view>
     </view>
   </view>
-  <button open-type="getUserInfo">授权</button>
 </template>

component/popup/popup.js

@@ -4,20 +4,43 @@ Component({
    * 组件的属性列表
    */
   properties: {
-
+    typeOf: {
+      type: "String",
+      value: ''
+    },
+    title: {
+      type: "String",
+      value: ''
+    },
+    headTextOne: {
+      type: "String",
+      value: ''
+    },
+    headTextTwo: {
+      type: "String",
+      value: ''
+    },
+    content: {
+      type: "Array",
+      value: ''
+    }
   },
 
   /**
    * 组件的初始数据
    */
   data: {
-
+    closeFlag: true
   },
 
   /**
    * 组件的方法列表
    */
   methods: {
-
+    close: function () {
+      this.setData({
+        closeFlag: !this.data.closeFlag
+      })
+    }
   }
 })

component/popup/popup.wxml

@@ -1,2 +1,82 @@
 <!--component/popup/popup.wxml-->
-<text>component/popup/popup.wxml</text>
+<view class="popup" hidden="{{closeFlag}}">
+    <!--成功-->
+    <view class="popup-container" wx:if="{{typeOf == 'success' ? true : false}}">
+        <view class="head-img" style="height: 240rpx">
+            <image src="../../static/groupImg/success.png"></image>
+        </view>
+        <view class="head-txt">
+            <view class="title">{{title}}</view>
+            <view class="head-con">
+                {{headTextOne}}
+            </view>
+            <view>
+                {{headTextTwo}}
+            </view>
+        </view>
+        <view class="content">    
+            <block wx:for="{{content}}" wx:key="{{index}}">
+                <text style="color: {{item.color}};">{{item.text}}</text>
+            </block>
+        </view>
+        <view class="send-btn">
+            <image src="../../static/groupImg/Invitation.png"></image>
+            <text>发起团购</text>
+        </view>
+    </view>
+    <!--失败 -->
+    <view class="popup-container"  wx:if="{{typeOf == 'error' ? true : false}}">
+        <view class="head-img" style="height: 366rpx; margin-top: -120rpx;">
+            <image src="../../static/groupImg/error.png"></image>
+        </view>
+        <view class="head-txt">
+            <view class="title" style="margin-top: 80rpx; color: #4A90E2;">很遗憾拼团失败</view>
+            <view class="head-con" style="color: #000">
+                您发起的团购拼团成功
+            </view>
+        </view>
+        <view class="content" style="margin-top: 30rpx;">    
+            <text style="color: #000;">您可以继续发起新的团购，</text>
+            <text style="color: #FF9B00;">不再需要支付本课程费用，拼团成功，</text>
+            <text style="color: #FF0000;">您将得到xxx元奖励。</text>
+        </view>
+        <view class="send-btn">
+            <image src="../../static/groupImg/Invitation.png"></image>
+            <text>发起团购</text>
+        </view>
+    </view>
+    <!--发起拼团成功 -->
+    <view class="popup-container"  wx:if="{{typeOf == 'sendSuccess' ? true : false}}">
+        <view class="head-img"style="text-align: center;margin-top: 29rpx;">
+            <image src="../../static/groupImg/tuanzhang.png" style="width: 160rpx; height: 160rpx;"></image>
+        </view>
+        <view class="content">
+            <text style="color: #F66C1C; font-weight: bolder;">报告团长</text>
+            <text style="color: #F66C1C;">不再需要支付本课程费用，拼团成功，</text>
+        </view>
+        <view class="content" style="margin-top: 30rpx; font-size: 36rpx;">
+            <text style="color: #000;">您可以继续发起新的团购，</text>
+            <text style="color: #FF9B00;">不再需要支付本课程费用，拼团成功，</text>
+            <text style="color: #FF0000;">您将得到xxx元奖励。</text>
+        </view>
+        <view class="bottom">
+            * 如果拼团失败，您预付的课程费将在48小时内退回您的账户。
+        </view>
+    </view>
+    <!--发起拼团失败 -->
+    <view class="popup-container"  wx:if="{{typeOf == 'senderror' ? true : false}}">
+        <view class="content">
+            <text style="color: #F66C1C; font-weight: bolder;">感谢团长</text>
+            <text style="color: #F66C1C;">不再需要支付本课程费用，拼团成功，</text>
+        </view>
+        <view class="head-img"style="text-align: center;margin-top: 29rpx;">
+            <image src="../../static/groupImg/liwu.png" style="width: 288rpx; height: 184rpx;"></image>
+        </view>
+        <view class="bottom" style="color: #000;">
+            * 如果拼团失败，您预付的课程费将在48小时内退回您的账户。
+        </view>
+    </view>
+    <view class="cha" bindtap="close">
+        <image src="../../static/groupImg/cha.png"></image>
+    </view>
+</view>

component/popup/popup.wxss

@@ -1 +1,108 @@
-/* component/popup/popup.wxss */
+/* component/popup/popup.wxss */
+.popup {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .5);
+    z-index: 999;
+}
+
+.popup-container {
+    position: absolute;
+    left: 5%;
+    top: 50%;
+    transform: translateY(-50%);
+    background: #fff;
+    width: 90%;
+    height: auto;
+    border-radius: 20rpx;
+}
+
+.head-img {
+    width: 100%;
+}
+
+.head-img image {
+    width: 100%;
+    height: 100%;
+}
+
+.head-txt {
+    position: absolute;
+    top: 26rpx;
+    left: 0;
+    width: 100%;
+    text-align: center;
+    color: #fff;
+
+}
+
+.head-txt .title {
+    font-size: 48rpx;
+    font-weight: bolder;
+}
+
+.head-txt .head-con {
+    margin: 20rpx 0;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-size: 36rxp;
+}
+
+.content text {
+    margin: 6rpx 0;
+}
+
+
+.send-btn {
+    width: 70%;
+    height: 80rpx;
+    margin: 72rpx auto 40rpx auto;
+    position: relative;
+}
+
+.send-btn image {
+    width: 100%;
+    height: 100%;
+}
+
+.send-btn text {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    line-height: 80rpx;
+    color: #fff;
+    z-index: 3;
+}
+
+.cha {
+    position: absolute;
+    left: 50%;
+    bottom: 5%;
+    transform: translateX(-50%);
+    width: 80rpx;
+    height: 80rpx;
+}
+
+.cha image {
+    width: 100%;
+    height: 100%; 
+}
+
+.bottom {
+    width: 100%;
+    font-size: 20rpx;
+    text-align: center;
+    color: #767676;
+    margin: 60rpx 0 10rpx 0;
+}

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

@@ -5,7 +5,25 @@ Page({
    * 页面的初始数据
    */
   data: {
-    hideFlag: true
+    hideFlag: true,
+    content: [
+      {
+          text: "领袖体质魅力无穷！",
+          color: "#000"
+      },
+      {
+          text: "您可以继续发起新的团购，",
+          color: "#000"
+      },
+      {
+          text: "不再需要支付本课程费用，拼团成功，",
+          color: "#FF9B00"
+      },
+      {
+          text: "您将得到xxx元奖励。",
+          color: "#FF0000"
+      },
+    ]
   },
 
   //规则页显示和隐藏

pages/groupPage/collage-details/collage-details.json

@@ -1,6 +1,7 @@
 {
     "component": true,
     "usingComponents": {
-        "shareDialog": "/component/share/share"
+        "shareDialog": "/component/share/share",
+        "popup": "/component/popup/popup"
     }
   }

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

@@ -74,4 +74,10 @@
 </view> 
 <canvas canvas-id="myCanvas" style="width:370px; height: 507px; position: absolute; left: -99rpx; top: -999rpx;"></canvas>
 <shareDialog id="share-dialog"/>
+<popup
+    typeOf="senderror"
+    title="恭喜！"
+    headTextOne="您发起的团购拼团成功"
+    content="{{content}}"
+></popup>