微信小程序tab选项卡，点击弹窗（带蒙版）五星好评-获取微信手机号码

<!--pages/index/received/received.wxml-->
<view class="swiper-tab">
  <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">待接订单</view>
  <view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">完成订单</view>
</view>

<swiper current="{{currentTab}}" duration="300" bindchange="swiperTab" style="height:1000rpx;">
  <swiper-item>
    <view class='goods-container' wx:for="{{goods}}" wx:key="">
      <view class="goods">
        <image class='pic' src='{{item.product_img}}'></image>
        <view class="name">{{item.product_name}}</view>
        <view class="public_name">{{item.public_name}}</view>
        <view class="sold">
          ￥{{item.price}}
        </view>
        <view class="public_time">{{item.time}}</view>
        <!-- 弹窗 -->
        <view class="modalDlg" wx:if="{{showModal}}">
          <view class="con_title">确认收货
            <view class='complain' bindtap='complain'>投诉</view>
          </view>
          <view class="userinfo">
            <button class='getUserInfo' wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
            <block wx:else>
              <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
              <text class="userinfo-nickname">{{userInfo.nickName}}</text>
              <view class='mob-number'>手机号：
                <text class='userinfo-mobile'>17327992041{{phoneNumber}}</text>
              </view>

              <view class='mob-number'>对校帮员评价：
                <!--五星  -->
                <view class='stars'>
                  <block wx:for="{{stars}}" wx:key="">
                    <image class="star-image" style="left: {{item*50}}rpx" src="{{key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">
                      <view class="item" style="left:0rpx" data-key="{{item+0.5}}" bindtap="selectLeft"></view>
                      <view class="item" style="left:25rpx" data-key="{{item+1}}" bindtap="selectRight"></view>
                    </image>
                  </block>
                </view>

                <!--五星  -->
              </view>
              <view class='mob-number' style='margin-left:110rpx;'>准时：
                <!-- <text class='userinfo-mobile'>521</text> -->
                <!--五星  -->
                <view class='stars' style="left:40%;">
                  <block wx:for="{{stars}}" wx:key="">
                    <image class="star-image" style="left: {{item*50}}rpx" src="{{key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">
                      <view class="item" style="left:0rpx" data-key="{{item+0.5}}" bindtap="selectLeft"></view>
                      <view class="item" style="left:25rpx" data-key="{{item+1}}" bindtap="selectRight"></view>
                    </image>
                  </block>
                </view>

                <!--五星  -->
              </view>
              <view class='mob-number' style='margin-left:110rpx;'>态度：
                <!--五星  -->
                <view class='stars' style="left:40%;">
                  <block wx:for="{{stars}}" wx:key="">
                    <image class="star-image" style="left: {{item*50}}rpx" src="{{key > item ?(key-item == 0.5?halfSrc:selectedSrc) : normalSrc}}">
                      <view class="item" style="left:0rpx" data-key="{{item+0.5}}" bindtap="selectLeft"></view>
                      <view class="item" style="left:25rpx" data-key="{{item+1}}" bindtap="selectRight"></view>
                    </image>
                  </block>
                </view>

                <!--五星  -->
              </view>

              <button class='allow' open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">点击授权</button>
            </block>
          </view>


          <view class='close_mask' bindtap="close_mask">确定</view>

        </view>

        <!--弹窗结束  -->
        <view class='number' bindtap='submit'>确认收货</view>

        <!--蒙版开始 -->
        <!-- <view class="mask" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"></view>  -->
        <!--蒙版结束  -->

      </view>
    </view>
  </swiper-item>
  <swiper-item>
    <view>22</view>
  </swiper-item>
</swiper>

/* pages/index/received/received.wxss */
page{
  background: #f1f1f1;
}
.swiper-tab{
    width: 100%;
    border-bottom: 2rpx solid #ccc;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
}
.swiper-tab-item{
    width: 50%; 
    color:#434343;
    background: #ffffff;
    font-size:32rpx;
}
.active{
    color:#fd9802;
    border-bottom: 4rpx solid #fd9802;
}
/* 商品 */
.goods-container .goods {
	position: relative;
	padding: 20rpx 30rpx;
	font-size: 36rpx;
	line-height: 40rpx;
	border-bottom: 1px solid #f7f7f7;
  background: #ffffff;
  margin-top:30rpx;
}
.goods-container .goods .pic {
	float: left;
	width: 130rpx;
	height: 130rpx;
	margin-right: 20rpx;
}
.goods-container .goods .name {
 width: 30%;
	color: #fd9802;
	font-size: 30rpx;
	line-height: 46rpx;
 display: inline-block;
}
.goods-container .goods .public_name {
 width: 35%;
 text-align: right;
	color: #fd9802;
	font-size: 26rpx;
	line-height: 46rpx;
 display: inline-block;
}
.goods-container .goods .sold {
	color: #fd9802;
	font-size: 28rpx;
	line-height: 46rpx;
}
.goods-container .goods .price {
	color: #fd9802;
	font-size: 30rpx;
	line-height: 46rpx;
}
.goods-container .goods .public_time {
	color: #fd9802;
	font-size: 30rpx;
	line-height: 46rpx;
}

.number{
 position: absolute;
	right: 94rpx;
	bottom: 30rpx;
	width: 100rpx;
	height: 40rpx;
 font-size:22rpx;
 color:#323232;
 background: #499cfa;
 border-radius: 10rpx;
 text-align:center;
}

/* 点击充值弹窗 */

/* .mask {
width:100%;
height:210rpx;
position:fixed;
 top:0rpx; 
left:0;
 background:#000;
z-index:9000;
opacity:0.2; 
} */

.modalDlg {
width:100%;
height:580rpx;
position:fixed;
top:60%;
left:-88rpx;
z-index:9999;
margin:-370rpx 85rpx;
background-color:rgba(0,0,0,.3);
opacity:0.5;
display:flex;
flex-direction:column;
align-items:center;
}

.recharge_amount {
  color: #aaa;
  width: 450rpx;
  height: 80rpx;
  background: #f1f1f1;
  text-align: center;
  border-radius: 12rpx;
  margin-top: 56rpx;
  text-indent: 0;
}

.save_money {
  color: #fff;
  width: 270rpx;
  height: 80rpx;
  line-height: 80rpx;
  background: #d95155;
  text-align: center;
  border-radius: 12rpx;
  margin-top: 80rpx;
  font-size: 28rpx;
  text-indent: 0em;
}

.close_mask {
color:#fff;
position:fixed;
width:176rpx;
font-size:32rpx;
top:72%;
background:#00eca1;
border-radius:8rpx;
text-align:center;
height:60rpx;
line-height:60rpx;
}
/*弹窗里的内容  */
.con_title{
border-bottom:1rpx solid #fff;
width:100%;
height:80rpx;
text-align:center;
color:#fff;
line-height:80rpx;
}
.complain{
 position:relative;
top:-77rpx;
left:40%;
font-size:26rpx;
color:#e80115;
}
/*弹窗结束  */

/*获取微信头像开始  */
.userinfo {
  /* display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  top: -250rpx; */
  position: relative;
  height: 176rpx;
 left:-200rpx;
}

.userinfo-avatar {
  width: 140rpx;
  height: 140rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #fff;
  position: relative;
  top:-100rpx;
  font-size: 32rpx;
}

.usermotto {
  margin-top: 200px;
}

.getUserInfo {
  font-size: 22rpx;
  background: none;
}

/*头像结束  */
/*手机号码开始  */
.userinfo-mobile {
  color: #fff;
  position: relative;
  top:6rpx;
  font-size: 32rpx;
}
.allow{
width:50%;
height:50rpx;
font-size:22rpx;
background:#00eca1;
color:#fff;
position:relative;
top:-187%;
left:444rpx;
line-height:50rpx;
}
.mob-number{
position:relative;
left:56%;
top:-55%;
font-size:28rpx;
color:#fff;
height:60rpx;
line-height:60rpx;

}
/*五星  */
.stars{
  position:relative;
left:60%;
top:-110rpx;
}
.star-image {
   position: absolute;
  top: 50rpx; 
  width: 50rpx;
  height: 50rpx;
  src: "/image/received/normal.png";
}

.item {
  position: absolute;
  top:18rpx;
  width: 75rpx;
  height: 50rpx;
  /* border:1rpx solid #000; */
}
/*五星  */

// pages/index/received/received.js
var app = getApp
Page({

  /**
   * 页面的初始数据
   */
  data: {
    stars: [0, 1, 2, 3, 4],
    normalSrc: '/image/received/normal.png',
    selectedSrc: '/image/received/selected.png',
    halfSrc: '/image/received/half.png',
    key: 0,//评分
    currentTab: 0,
    showModal: false,
    goods: [
      { product_name: "中华", price: '10', public_name: "刘大强",time:"09:30", product_img: 'http://img04.tooopen.com/images/20130712/tooopen_17270713.jpg' },
      { product_name: "黄山", price: '20', public_name: "刘登科", time: "10:00", product_img: 'http://img04.tooopen.com/images/20130617/tooopen_21241404.jpg' },
      { product_name: "小相公", price: '30', public_name: "刘志强", time: "11:30", product_img: 'http://img04.tooopen.com/images/20130701/tooopen_20083555.jpg' },
      { product_name: "苏烟", price: '40', public_name: "刘能能", time: "10:30", product_img: 'http://img02.tooopen.com/images/20141231/sy_78327074576.jpg' }
    ],
    userInfo: {
      avatarUrl: "",//用户头像  
      nickName: "",//用户昵称  
    },
    
  },
  //滑动切换
  swiperTab: function (e) {
    var that = this;
    that.setData({
      currentTab: e.detail.current
    });
  },
  //点击切换
  clickTab: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current
      })
    }
  },
  // 点击充值弹窗
  submit: function () {
    this.setData({
      showModal: true
    })
    
  },
  preventTouchMove: function () {

  },

  close_mask: function () {
    this.setData({
      showModal: false
    })
    var pages = getCurrentPages();
    var currPage = pages[pages.length - 1];   //当前页面
    var prevPage = pages[pages.length - 2];  //上一个页面
    wx.navigateBack({//返回
      delta: 2
    })
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that=this;
    wx.getUserInfo({
      success: function (res) {
        console.log(res);
        var avatarUrl = 'userInfo.avatarUrl';
        var nickName = 'userInfo.nickName';
        that.setData({
          [avatarUrl]: res.userInfo.avatarUrl,
          [nickName]: res.userInfo.nickName,
        })
      }
    })
  },
  //点击右边,半颗星
  selectLeft: function (e) {
    var key = e.currentTarget.dataset.key
    if (this.data.key == 0.5 && e.currentTarget.dataset.key == 0.5) {
      //只有一颗星的时候,再次点击,变为0颗
      key = 0;
    }
    console.log("得" + key + "分")
    this.setData({
      key: key
    })

  },
  //点击左边,整颗星
  selectRight: function (e) {
    var key = e.currentTarget.dataset.key
    console.log("得" + key + "分")
    this.setData({
      key: key
    })
  },
  complain:function(){
    wx.navigateTo({
      url: '/pages/index/complain/complain',
    })
  },
  getPhoneNumber: function (e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.iv)
    console.log(e.detail.encryptedData)
    wx.login({
      success: res => {
        console.log(res.code);
        wx.request({
          url: 'https://后台解密地址',
          data: {
            'encryptedData': encodeURIComponent(e.detail.encryptedData),
            'iv': e.detail.iv,
            'code': res.code
          },
          method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
          header: {
            'content-type': 'application/json'
          }, // 设置请求的 header
          success: function (res) {
            if (res.status == 1) {//我后台设置的返回值为1是正确
              //存入缓存即可
              wx.setStorageSync('phone', res.phone);
            }
          },
          fail: function (err) {
            console.log(err);
          }
        })
      }
    })
    if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
      wx.showModal({
        title: '提示',
        showCancel: false,
        content: '未授权',
        success: function (res) { }
      })
    } else {
      wx.showModal({
        title: '提示',
        showCancel: false,
        content: '同意授权',
        success: function (res) { }
      })
    }
  },   
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})