<!--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 () {
}
})
![](https://i-blog.csdnimg.cn/blog_migrate/d70369a6c6e86e31aa84216f516c3f3a.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e83f2436771f7ac237bdcd6b92718566.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d66d9fb0804a1d76447b70d57372cd25.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e0692f10e51dbb3fccca3299368d68b3.png)