抽奖结果页以及填写地址

需求：用户进入该页面，判断是否已经开奖，如果未开奖等待开奖，如果已经开奖，则显示开奖结果，如果用户中将可以填写收货地址。

小程序端

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(){
            //网络或者服务器异常
          }
        })
      }
    })
  }
})

				

					
				
				

					
				
				

					
				
				

					
				
			

结果页服务端