新增邀请好友弹窗

pages/components/shareDialog/shareDialog.js

@@ -0,0 +1,28 @@
+// pages/components/shareDialog/shareDialog.js
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    showDialog:{
+      type:Boolean,
+      value:false
+    }
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    onCloseDialog(){
+      this.triggerEvent('closeDialog',{})
+    }
+  }
+})

pages/components/shareDialog/shareDialog.json

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

pages/components/shareDialog/shareDialog.wxml

@@ -0,0 +1,21 @@
+<view class="sharePopup" wx:if="{{showDialog}}">
+	<view class="shareDialog">
+    <image src="../../../image/share_bg.png" class="share_bg"></image>
+    <image src="../../../image/close_icon.png" class="close_icon" bindtap="onCloseDialog"></image>
+		<view class="shareInfo">
+			<view class="shareInfo___top">邀请5位好友，可以优惠50元</view>
+			<view class="shareInfo___bottom">还有<text class="num">4</text>位好友待邀请</view>
+		</view>
+		<view class="shareList">
+			<block wx:for="{{5}}" wx:key="index">
+				<view class="shareItem">
+					<image src="../../../image/user_placeholder.png" class="user_placeholder"></image>
+					<view class="shareName">补贴{{3+index}}元</view>
+				</view>
+			</block>
+		</view>
+    <view class="btn-rechargeNow">
+			<text>去邀请好友</text>
+		</view>
+	</view>
+</view>

pages/components/shareDialog/shareDialog.wxss

@@ -0,0 +1,101 @@
+.sharePopup {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 100;
+}
+
+.shareDialog {
+  position: relative;
+  width: 606rpx;
+  height: 592rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-top: 50rpx;
+}
+
+.share_bg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+
+.close_icon {
+  position: absolute;
+  right: -25rpx;
+  top: 15rpx;
+  width: 100rpx;
+  height: 100rpx;
+}
+
+.close_icon:active {
+  opacity: 0.9;
+}
+
+.shareInfo {
+  text-align: center;
+}
+
+.shareInfo .num {
+  color: red;
+}
+
+.shareInfo___top {
+  font-size: 30rpx;
+  color: #573A0C;
+  margin-bottom: 10rpx;
+}
+
+.shareInfo___bottom {
+  font-size: 26rpx;
+  color: #CF8534;
+}
+
+.shareList {
+  width: 528rpx;
+  height: 186rpx;
+  margin: 30rpx auto;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  background: #F3DCB7;
+}
+
+.user_placeholder {
+  width: 76rpx;
+  height: 76rpx;
+  border-radius: 50%;
+}
+
+.shareItem {
+  text-align: center;
+}
+
+.shareName {
+  font-size: 24rpx;
+  color: #573A0C;
+}
+
+.btn-rechargeNow {
+  width: 328rpx;
+  height: 70rpx;
+  line-height: 70rpx;
+  text-align: center;
+  background-color: #fe7124;
+  background: linear-gradient(to right, #ff7a21 0%, #feb25a 100%);
+  text-align: center;
+  color: #fff;
+  border-radius: 16rpx;
+  margin: 0 auto;
+  margin-top: 40rpx;
+}

pages/phoneCharges/phoneCharges.js

@@ -21,7 +21,20 @@ Page({
     card_type: 'phone',
     card_no: '',
     fromSource: '',
-    payInfoChecked:true
+    payInfoChecked:true,
+    showShareDialog:false
+  },
+
+  onShowShareDialog(){
+    this.setData({
+      showShareDialog:true
+    })
+  },
+
+  onCloseShareDialog(){
+    this.setData({
+      showShareDialog:false
+    })
   },
 
   onCheckedPayInfo(){

pages/phoneCharges/phoneCharges.json

@@ -2,5 +2,8 @@
   "enablePullDownRefresh":true,
   "navigationBarTitleText": "手机充值",
   "navigationBarBackgroundColor": "#ffffff",
-  "navigationBarTextStyle": "black"
+  "navigationBarTextStyle": "black",
+  "usingComponents":{
+    "shareDialog":"../components/shareDialog/shareDialog"
+  }
 }

pages/phoneCharges/phoneCharges.wxml

@@ -41,7 +41,7 @@
 	</view>
 
   <view class="rechargeGear-footer" style="background:transparent;padding:0;">
-		<view class="btn-rechargeNow btn-rechargeNow___share" bindtap="handlerShare">
+		<view class="btn-rechargeNow btn-rechargeNow___share" bindtap="onShowShareDialog">
 			<text>分享好友</text>
 		</view>
 		<view class="btn-rechargeNow" bindtap="handlerRecharge">
@@ -76,4 +76,6 @@
       </view>
     </view>
   </view> -->
-</view>
+</view>
+
+<shareDialog showDialog="{{showShareDialog}}" bind:closeDialog="onCloseShareDialog"/>

pages/postage/postage.js

@@ -28,7 +28,20 @@ Page({
       { id: 1, icon: '/image/postage/petrochina.png', title: '中国石油', tips: '选择油卡', card_type: 'petrochina', card_no: '' }
     ],
     fromSource: '',
-    payInfoChecked:true
+    payInfoChecked:true,
+    showShareDialog:false
+  },
+
+  onShowShareDialog(){
+    this.setData({
+      showShareDialog:true
+    })
+  },
+
+  onCloseShareDialog(){
+    this.setData({
+      showShareDialog:false
+    })
   },
 
   onCheckedPayInfo(){
@@ -219,7 +232,9 @@ Page({
    * 生命周期函数--监听页面隐藏
    */
   onHide: function () {
-
+    this.setData({
+      showShareDialog:false
+    })
   },
 
   /**

pages/postage/postage.json

@@ -1,5 +1,8 @@
 {
   "enablePullDownRefresh":true,
   "navigationBarTitleText": "加油卡充值",
-  "navigationBarTextStyle": "black"
+  "navigationBarTextStyle": "black",
+  "usingComponents":{
+    "shareDialog":"../components/shareDialog/shareDialog"
+  }
 }

pages/postage/postage.wxml

@@ -60,7 +60,7 @@
 	</view>
 
 	<view class="rechargeGear-footer">
-		<view class="btn-rechargeNow btn-rechargeNow___share" bindtap="handlerShare">
+		<view class="btn-rechargeNow btn-rechargeNow___share" bindtap="onShowShareDialog">
 			<text>分享好友</text>
 		</view>
 		<view class="btn-rechargeNow" bindtap="handlerRecharge">
@@ -74,4 +74,6 @@
 		<view class="clause">2.本服务为全国加油卡代充服务、故<text>不提供充值发票</text>；</view>
 		<view class="clause">3.支付成功后，需收到充值成功通知短信后，方可到<text>加油站圈存</text>后加油使用；</view>
 	</view>
-</view>
+</view>
+
+<shareDialog showDialog="{{showShareDialog}}" bind:closeDialog="onCloseShareDialog"/>

pages/postage/postage.wxss

@@ -361,4 +361,4 @@
 
 .footerInfo text {
   color: #EE7530;
-}
+}