抽奖结果页以及填写地址
需求：用户进入该页面，判断是否已经开奖，如果未开奖等待开奖，如果已经开奖，则显示开奖结果，如果用户中将可以填写收货地址。
小程序端
1在开奖页面显示后端返回的数据显示开奖结果，根据不同的状态显示不同的信息，如果中奖用户可以填写收货地址。如果未中奖或者未开奖则显示相应的结果。
app.json
{
"pages": [
"pages/index/index",
"pages/list/list",
"pages/item/item",
"pages/login/login",
"pages/payment/payresult/payresult",
"pages/gift/join/join",
"pages/gift/openresult/openresult",
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#e50e38",
"navigationBarTitleText": "百步生活",
"navigationBarTextStyle": "#fff",
"enablePullDownRefresh": false,
"backgroundColor": "#e50e38"
},
}openresult.wxml
<view class="container">
<view class="success-status">
<block wx:if="{{message=='200'}}">
<view class="tip">恭喜你，中奖了</view>
<view class="open-condition">获得"{{item_data[0].name}}"</view>
</block>
<block wx:elif="{{message=='201'}}">
<view class="tip">很遗憾，你未中奖</view>
<view class="open-condition">祝你下次好运</view>
</block>
<block wx:elif="{{message=='202'}}">
<view class="tip">参与成功，等待开奖</view>
<view class="open-condition">
<block wx:if="{{methodType.get_method=='满人开奖'}}">满{{methodType.open_number}}人开奖</block>
<block wx:if="{{methodType.get_method=='定时开奖'}}">{{methodType.opentime}}开奖</block>
</view>
</block>
<block wx:elif="{{message=='203'}}">
<view class="tip">礼包已过期</view>
</block>
</view>
<image class='avatar' src='{{buy_member.avatar}}'></image>
<scroll-view class="detail-box" scroll-y="true">
<view class="u-info">{{buy_member.name}}送出{{total_number}}份礼物</view>
<view class="wish">{{order_data.memo}}</view>
<block wx:if="{{message=='200'}}">
<view class="product-wrap">
<image src="{{item_data[0].image_id.m_url}}"></image>
<view class="name">{{item_data[0].name}}</view>
</view>
</block>
<block wx:if="{{message=='201'}}">
<block wx:for="{{item_data}}" wx:for-index="index" wx:key="key">
<view class="item-wrap">
<image class="item-img" src="{{item.image_id.m_url}}"></image>
<view class="text">
<view class="name">{{item.name}}</view>
<view class="num">共{{item.number}}份</view>
</view>
<view class="tip">未中奖</view>
</view>
</block>
</block>
<block wx:if="{{message=='202'}}">
<block wx:if="{{item_data.length>1}}">
<view class="product-wrap">
<image src="{{giftBox}}"></image>
</view>
</block>
<block wx:else>
<view class="product-wrap">
<image src="{{item_data[0].image_id.m_url}}"></image>
<view class="name">{{item_data[0].name}}</view>
</view>
</block>
<view class="join-total">已有{{join_member.length}}人参与</view>
<view class="avatarsLists">
<block wx:for="{{join_member}}" wx:for-index="index" wx:key="key">
<block wx:if="{{index<16}}">
<image class="join-avatar" src="{{item.member.avatar}}"></image>
</block>
</block>
</view>
</block>
<block wx:if="{{message=='203'}}">
<block wx:if="{{item_data.length>1}}">
<view class="product-wrap">
<image src="{{giftBox}}"></image>
</view>
</block>
<block wx:else>
<view class="product-wrap">
<image src="{{item_data[0].image_id.m_url}}"></image>
<view class="name">{{item_data[0].name}}</view>
</view>
</block>
</block>
<block wx:if="{{message=='200'||message=='201'}}">
<view class="record">
<view class="total">共{{join_member_count}}人参与,{{get_all_member.length}}人中奖</view>
<view wx:for="{{get_all_member}}" wx:for-index="index" wx:key="key">
<view class="record-item">
<image class="list-avatar" src="{{item.get_mermber_id.avatar}}"></image>
<text class="uname">{{item.get_mermber_id.name}}</text>
<text class="p-name">{{item.name}}</text>
</view>
</view>
</view>
</block>
<view class="padding-box"></view>
</scroll-view>
<block wx:if="{{message=='200' && !item_data[0].consignee_address}}">
<text bindtap='editAddr' class="btn-share">填写收货地址</text>
</block>
<block wx:elif="{{message!='200' && buy_member.member_id=='1'}}">
<button class="invite" open-type="share">邀请好友抽奖</button>
<text bindtap='toMore' class="join-more">参与更多抽奖</text>
</block>
<block wx:else>
<navigator class="btn-share" url="/pages/list/list">我也要送礼</navigator>
</block>
</view>openresult.wxss
button::after{
border: none;
}
.btn-share{
width: 480rpx;
height: 88rpx;
border-radius: 44rpx;
background: #e50e38;
color: #fff;
line-height: 88rpx;
text-align: center;
margin-top: 40rpx;
letter-spacing: 2rpx;
font-size: 36rpx;
position: absolute;
bottom: 120rpx;
left: 145rpx;
}
.invite{
width: 240rpx;
height: 88rpx;
border-radius: 44rpx;
background: #e50e38;
color: #fff;
line-height: 88rpx;
text-align: center;
margin-top: 40rpx;
letter-spacing: 2rpx;
font-size: 28rpx;
position: absolute;
bottom: 120rpx;
left: 90rpx;
border: none;
}
.join-more{
width: 240rpx;
height: 88rpx;
border-radius: 44rpx;
background: #fff;
color: #e50e38;
line-height: 88rpx;
text-align: center;
margin-top: 40rpx;
letter-spacing: 2rpx;
font-size: 28rpx;
position: absolute;
bottom: 120rpx;
right: 90rpx;
box-shadow:0 0 4rpx 4rpx #ccc;
}
page{
background: #e50e38;
width: 100%;
height: 100%;
}
.container{
width: 100%;
height: 100%;
padding: 0;
}
.container .success-status{
padding: 36rpx 0;
color: #fff;
height: 20%;
}
.container .success-status .tip{
text-align: center;
line-height: 60rpx;
font-size: 36rpx;
}
.container .success-status .open-condition{
text-align: center;
line-height: 60rpx;
font-size: 28rpx;
}
.detail-box{
position: relative;
height: 80%;
background: #fff;
width: 718rpx;
margin: 0 16rpx;
border-top-left-radius: 16rpx;
border-top-right-radius: 16rpx;
text-align: center;
}
.avatar{
position:absolute;
width:120rpx;
height:120rpx;
top:20%;
left:50%;
margin-top:-60rpx;
margin-left:-60rpx;
border-radius: 50%;
z-index: 999;
}
.u-info{
text-align: center;
padding-top:80rpx;
font-size:28rpx;
}
.wish{
text-align: center;
padding-top:32rpx;
font-size:36rpx;
margin-bottom: 20rpx;
}
.detail-box .name{
text-align: center;
font-size: 28rpx;
margin-bottom: 20rpx;
}
.detail-box image{
width: 450rpx;
height: 450rpx;
text-align: center
}
.product-wrap{
border: 2rpx solid #aa924c;
width: 450rpx;
margin: 20rpx 134rpx;
}
.item-wrap{
border: 2rpx solid #aa924c;
border-radius: 10rpx;
margin: 20rpx 50rpx;
text-align: left;
padding: 8rpx;
overflow: hidden;
position: relative;
}
.item-wrap .item-img{
width: 136rpx;
height: 138rpx;
}
.item-wrap .text{
display: inline-block;
width: 360rpx;
text-align: left;
vertical-align: top;
}
.item-wrap .text .name,.num{
text-align: left;
font-size: 30rpx;
margin-bottom: 0rpx;
color: #aa924c;
padding-left: 16rpx;
line-height: 68rpx;
height: 68rpx;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:1;
overflow: hidden;
text-overflow:ellipsis;
display: -webkit-box;
}
.item-wrap .tip{
background: #aa924c;
color: #fff;
text-align: center;
font-size: 20rpx;
transform: rotate(45deg);
top:-20rpx;
right:-72rpx;
position:absolute;
padding:10rpx 60rpx;
padding-top:40rpx;
}
.record{
background: #f8f8f8;
width: 680rpx;
margin: 0 auto;
border-radius: 10rpx;
line-height: 96rpx;
}
.record .total{
line-height: 96rpx;
text-align: left;
font-size: 30rpx;
padding-left: 40rpx;
border-bottom: 2rpx solid #eeeeee;
}
.record .record-item{
border-bottom: 2rpx solid #eeeeee;
text-align: left;
line-height: 120rpx;
position: relative;
}
.record .record-item .list-avatar{
height: 76rpx;
width: 76rpx;
border-radius: 50%;
display: inline-block;
line-height: 120rpx;
vertical-align: middle;
margin-left: 40rpx;
}
.record .record-item .uname{
padding-left: 20rpx;
font-size: 24rpx;
}
.record .record-item .p-name{
position: absolute;
right: 20rpx;
top: 0;
font-size: 24rpx;
text-align: right;
width: 280rpx;
height: 120rpx;
line-height: 120rpx;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:1;
overflow: hidden;
text-overflow:ellipsis;
display: -webkit-box;
}
.padding-box{
height: 250rpx;
}
.avatarsLists{
width: 535rpx;
margin: 0 auto;
}
.avatarsLists image.join-avatar{
width: 58rpx;
height: 58rpx;
display: inline-block;
margin-right: 10rpx;
margin-bottom: 10rpx;
}
.avatarsLists image.join-avatar:nth-child(8n){
margin-right: 0rpx;
}
.join-total{
font-size: 30rpx;
line-height: 50rpx;
margin-bottom: 20rpx;
}
openresult.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
giftBox:'/images/purplebox.jpg'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var _this = this;
//wx.hideShareMenu();//隐藏小程序头部的转发，必须使用按钮分享
wx.showShareMenu({
withShareTicket: true
});
this.setData({
orderId: options.orderId,
userInfo: app.globalData.userInfo
}, function () {
wx.request({//请求订单信息以及分享识别码
url: app.globalData.apiDomain + '/api/sharagift/checkIsGetGift',
data: {
'order_id': _this.data.orderId,
'login_key': wx.getStorageSync('login_key')
},
method: "POST",
header: {
'content-type': 'application/json' // 默认值
},
success: function (res) {
if (res.data.data.buy_member.member_id!='1'){
wx.hideShareMenu({});
};
_this.setData({
message: res.data.message,
buy_member: res.data.data.buy_member,
total_number: res.data.data.gift_number,
item_data: res.data.data.item_data,
order_data: res.data.data.order_data
});
if (res.data.data.order_methon){
_this.setData({
methodType: res.data.data.order_methon
})
};
if (res.data.data.join_member){
_this.setData({
join_member: res.data.data.join_member
})
};
if (res.data.data.get_all_member){
_this.setData({
get_all_member: res.data.data.get_all_member
})
};
if (res.data.data.join_member_count) {
_this.setData({
join_member_count: res.data.data.join_member_count
})
};
}
})
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
onShareAppMessage: function () {
var _this = this;
var _image = _this.data.item_data[0].image_id.m_url;
var showName = (app.globalData.userInfo && app.globalData.userInfo.nickName) ? app.globalData.userInfo.nickName : '';
return {
title: showName + '邀请你参与免费抽奖，快来试试手气吧！',
path: '/pages/gift/join/join?token=' + _this.data.order_data.order_id,
imageUrl: _image,
success: function (res) {
wx.showToast({
title: '分享成功',
icon: 'none',
duration: 2000
});
},
fail: function () {
wx.showToast({
title: '分享失败',
icon: 'none',
duration: 2000
});
}
}
},
toMore:function(){
wx.switchTab({
url: '/pages/daily/daily'
})
},
editAddr:function(){
var _this = this;
wx.chooseAddress({
success: function (res) {
console.log(res);
var userName = res.userName;
var postalCode = res.postalCode;
var provinceName = res.provinceName;
var cityName = res.cityName;
var countyName = res.countyName;
var detailInfo = res.detailInfo;
var nationalCode = res.nationalCode;
var telNumber = res.telNumber;
wx.request({
url: app.globalData.apiDomain + '/api/putdelivery/putAddress',
data: {
'login_key': wx.getStorageSync('login_key'),
'order_id': _this.data.orderId,
'userName': userName,
'postalCode': postalCode,
'provinceName': provinceName,
"cityName": cityName,
'countyName': countyName,
'detailInfo': detailInfo,
'nationalCode': nationalCode,
'telNumber': telNumber
},
method: "POST",
header: {
'content-type': 'application/json' // 默认值
},
success:function(res){
wx.reLaunch({
url: '/pages/index/index',
})
},
fail:function(){
//网络或者服务器异常
}
})
}
})
}
})