微信小程序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.keyif (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.keyconsole.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, CONNECTheader: {'content-type': 'application/json'}, // 设置请求的 headersuccess: 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 () {}
})

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

微信小程序Tab选项卡切换大集合
代码地址如下: http://www.demodashi.com/demo/14028.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
通俗易懂的五星评价代码——微信小程序如何展示像淘宝天猫那样五星好评？
项目背景 2020年起始,微信官方宣布支持小程序直播.陆续有很多的商家与开发者参与到这场微信生态直播大潮中,作为电商小程序评价内容必不可少的,官方没有提供评价组件只能自己动手丰衣足食.网上看了很多资料 ...
微信小程序 tab选项卡，可点击，可滑动
看下效果图: <view class="swiper-tab"><view class="swiper-tab-item {{currentTab==0 ...
微信小程序 - tab选项卡切换的实现方法
页面效果大体思路首先是把新闻的内容,还有活动的内容都列到wxml上然后把tab写出来.现在的难点是如何把tab和下面的内容联系起来我们定义一个公共变量,变量名是state,当state= 'n ...
微信小程序点击按钮弹出弹窗_微信小程序实现的点击按钮弹出底部上拉菜单功能示例...
本文实例讲述了微信小程序实现的点击按钮弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml 弹出action sheet {{item.txt}} 取消提示:您选择了菜单{ ...
PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
navtab触底小程序_微信小程序TAB切换效果
微信小程序tab切换效果话不多说,先上效果图主要是让在一个WXML上面显示2个页面,用来分页展示东西. 直接上代码了: 首先是wxml {{item}} A页 B页然后是wxcss样式代码 .t ...
微信小程序-tab左右滑动切换
微信小程序-tab左右滑动切换一.简介 1.核心思想二.实现 1.wxml实现 2.js实现 3.wxss实现三.参考和总结四.优化 0.效果图 1.每个tab长度自适应 2.先前隔tab点击 ...
微信小程序顶部选项卡 tabs 下拉刷新
微信小程序顶部选项卡 tabs 下拉刷新 **首先 wxml 页面带swiper 滑动切换功能 **  <view class=& ...

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

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

最新文章

热门文章