第八节:参与抽奖

参与抽奖

需求:但用户点击购买者分享的礼物,点击进入抽奖,在抽奖之前判断1.未开奖未参与2.已经开奖跳转到结果页3.已参与未开奖开奖等待页面

小程序端

1在页面加载之前先判断是否已经参与抽奖,如果是未参与未开奖,则可以显示当前常与抽奖页面,不然就跳转到开奖结果页。

2 点击抽奖以后。跳转到等待开奖的页面

app.json

 {
  "pages": [
    "pages/index/index",
    "pages/list/list",
    "pages/item/item",
    "pages/login/login",    
    "pages/payment/payresult/payresult",
     "pages/gift/join/join",
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#e50e38",
    "navigationBarTitleText": "百步生活",
    "navigationBarTextStyle": "#fff",
    "enablePullDownRefresh": false,
    "backgroundColor": "#e50e38"
  },
}

join.wxml

<block wx:if="{{inited}}">
  <view class="main">
      <view class="join-info">
          <view class="package-info">
          </view>
          <image class="avatar" src="{{avatar}}"></image>
          <view class="uname">{{uname}}</view>
          <view class="openInfo">发起一个抽奖,
              <block wx:if="{{openType.get_method=='直接送礼'}}">直接送礼</block>
              <block wx:elif="{{openType.get_method=='满人开奖'}}">满{{openType.open_number}}人开奖</block>
              <block wx:elif="{{openType.get_method=='定时开奖'}}">{{openType.opentime}}开奖</block>
          </view>
          <view class="wish">{{wish}}</view>
          <view class="btn-join" bindtap='join' hidden='true'>抽</view>
          <form bindsubmit="join" report-submit='true'>
            <button form-type="submit" type="default" size="mini" class="btn-join">抽</button>
          </form>
      </view>
  </view>
</block>

join.wxss

page{
  width: 100%;
  height: 100%;
}
.main{
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: relative;
}
.main .join-info{
  width: 84%;
  height: 70%;
  background: #ca463a;
  border-radius: 16rpx;
  vertical-align: middle;
  text-align: center;
  position: absolute;
  top: 15%;
  left: 8%;
  overflow:hidden;
}
.main .join-info .package-info{
  height:70%;
  width:140%;
  background:#e4544b;
  border-bottom-left-radius:50%;
  border-bottom-right-radius:50%;
  margin:0 -20%;
}
.main .join-info .avatar{
  position:absolute;
  width:120rpx;
  height:120rpx;
  top:60rpx;
  left:50%;
  margin-left:-60rpx;
  border-radius: 50%;
  border: 2rpx solid #eccc99;
}
.main .join-info .uname{
  color: #eccc99;
  font-size: 32rpx;
  position: absolute;
  top: 200rpx;
  text-align: center;
  width: 100%;
}
.main .join-info .openInfo{
  color: #eccc99;
  font-size: 28rpx;
  position: absolute;
  text-align: center;
  width: 100%;
  top: 250rpx;
}
.main .join-info .wish{
  color: #eccc99;
  font-size: 40rpx;
  position: absolute;
  text-align: center;
  width: 100%;
  top: 320rpx;
}
.main .join-info .btn-join{
  background:#eccc99;
  font-size:60rpx;
  width:140rpx;
  height:140rpx;
  position:absolute;
  text-align:center;
  top:70%;
  border-radius:50%;
  color:#4c330a;
  left:50%;
  margin-left:-70rpx;
  margin-top:-70rpx;
  line-height: 134rpx;
  padding: 0;
}

join.js

// pages/gift/join/join.js
const app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
    inited:false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.showLoading({
      title: '加载中',
    });
    wx.hideShareMenu();
    //这里先用固定order——id
    var orderId = options.token;//获取订单token
    var _from = '';
    var _this = this;
    if (options.from){
        _from = options.from; 
        _this.setData({
          _from:_from
        });
    }
    _this.setData({
      orderId: orderId //这里先用固定的orderid
    },function(){
      console.log(orderId)
      wx.request({
        url: app.globalData.apiDomain + '/api/sharagift/checkHasJoin',
        data: {
          'login_key': wx.getStorageSync('login_key'),
          'order_id': orderId,
        },
        method: "POST",
        header: {
          'content-type': 'application/json' // 默认值
        },
        success: function (res) {//1.未开奖未参与2.已经开奖跳转到结果页3.已参与未开奖开奖等待页面
          if (res.data.code == 'error' || res.data.code == 'suc') {
            wx.redirectTo({
              url: '/pages/gift/openresult/openresult?orderId=' + orderId,
            })
          } else if (res.data.code == 'success') {
            wx.hideLoading();
            _this.setData({
              avatar: res.data.data.member_data.avatar,
              uname: res.data.data.member_data.name,
              openType: res.data.data.methons_data,
              wish: res.data.data.order_data.memo,
              inited:true
            })
          };
        },
        fail: function () {
          wx.hideLoading();
          wx.showToast({
            title: '网络不给力,请稍后再试',
          })
        }
      })
    });
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },
  join:function(e){
    var _this = this;
    var formId = e.detail.formId;
    wx.showLoading({
      title: '登录验证',
    });
    wx.checkSession({
      success:function(res){//session_key未过期
        wx.getSetting({
          success: res => {
            if (res.authSetting['scope.userInfo']) {
              // 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
              wx.getUserInfo({
                success: res => {
                  // 可以将 res 发送给后台解码出 unionId
                  app.globalData.userInfo = res.userInfo;
                  wx.request({
                    url: app.globalData.apiDomain+'/api/member/code/getUserInfo',
                    data: {
                      'iv': res.iv,
                      'encryptedData': res.encryptedData,
                      'login_key': wx.getStorageSync('login_key')
                    },
                    method: "POST",
                    header: {
                      'content-type': 'application/json' // 默认值
                    },
                    success: function (res) {
                      wx.hideLoading();
                      wx.showLoading({
                        title: '疯狂抢礼包中',
                      });
                      //调试到下一个页面
                      wx.request({
                        url: app.globalData.apiDomain +'/api/sharagift/JoinGift',//参与抽奖接口
                        data: {
                          'order_id': _this.data.orderId,
                          'login_key': wx.getStorageSync('login_key'),
                          'form_id': formId
                        },
                        method: "POST",
                        header: {
                          'content-type': 'application/json' // 默认值
                        },
                        success: function (res) {
                          if(res.data.code=='error'){
                            wx.hideLoading();
                            wx.showToast({
                              title: res.data.message
                            });
                            wx.reLaunch({
                              url: '/pages/index/index'
                            })
                          }else if (res.data.code == 'suc'){
                            wx.hideLoading();
                            wx.showToast({
                              title: '参与成功',
                              icon: 'none',
                              duration: 2000

                            });
                            wx.redirectTo({
                              url: '/pages/gift/openresult/openresult?orderId=' + _this.data.orderId
                            })
                          }else{
                            wx.hideLoading();
                            wx.showToast({
                              title: '参与成功',
                              icon:'none',
                              duration:2000

                            });
                            //如果是每日抽奖,去更新页面栈的数据
                            var pages = getCurrentPages();
                            if (pages.length > 1) {
                              //上一个页面实例对象
                              var prePage = pages[pages.length - 2];
                              //关键在这里,这里面是触发上个界面
                              prePage.changeStatus(_this.data.orderId);
                            }
                            wx.redirectTo({
                              url: '/pages/gift/openresult/openresult?orderId=' + _this.data.orderId
                            })
                          }
                        },
                        fail: function () {
                          //订单创建失败
                          wx.hideLoading();
                          wx.showToast({
                            title: '网络异常,请稍后再试',
                            icon: 'none',
                            duration: 2000
                          })
                        }
                      })
                    },
                    fail: function () {
                      //后台解密用户信息失败
                      wx.hideLoading();
                      wx.showToast({
                        title: '获取用户信息失败',
                        icon:'none',
                        duration: 2000
                      })
                    }
                  });

                  //由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回所以此处加入 callback 以防止这种情况
                  if (_this.userInfoReadyCallback) {
                    _this.userInfoReadyCallback(res)
                  }
                }
              })
            } else {
              //未授权跳到授权登录页
              wx.hideLoading();
              wx.navigateTo({
                url: '/pages/login/login?redirect=join',
              })
            }
          }
        })
      },
      fail: function () {//session_key已过期,登录更新login_key之后回调
        wx.login({
          success: res => {
            wx.request({
              url: app.globalData.apiDomain+'/api/member/code/login',
              data: {
                code: res.code
              },
              method: "POST",
              header: {
                'content-type': 'application/json' // 默认值
              },
              success: function (res) {
                wx.setStorageSync('login_key', res.data.data.login_key);
                _this.join();
              }
            });
          }
        })
      }
    })
  }
})

服务端

联系管理员微信tutu19192010,注册账号

上一篇
下一篇
Copyright © 2022 Egon的技术星球 egonlin.com 版权所有 帮助IT小伙伴学到真正的技术