首页生成礼包

需求：用户选择好要送的礼品过后，可以选择开奖方式，有直接开奖，满人开奖，以及定时开奖三种开奖方式，当订单创建完成后，请求支付，支付成功后，跳转到支付结果页，ps：这里支付需要商户号，所以创建订单后，直接支付成功。

小程序端

1 当用户点击生成礼包的时候，必须保证用户是登入状态，将订单信息发送给后端，创建订单后，跳转到支付结果页。

app.json

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

index.json

{

    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#e50e38",
    "navigationBarTitleText": "百步Gift",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": false

}

index.wxml

<!--index.wxml-->
<view class="container">
    <view class="top">
        <text class="text1">微信送礼新方式</text>
        <text class="text2">微信上送礼·对方填地址·免邮送上门</text>
        <navigator url="/pages/guide/guide" class="guide">操作指南</navigator>
    </view> 
    <block wx:if="{{gifts.length>0}}">
      <view class="gift-lists">
        <block wx:for="{{gifts}}" wx:for-index="index" wx:key="key">
            <view class="item">
              <image class="item-img" src="{{item.img}}"></image>
              <view class="caption">
                  <view class="name">{{item.name}}</view>
                  <view class="brief">{{item.brief}}</view>
                  <view class="price">¥{{item.price}}</view>
              </view>
              <view class="btn-group">
                  <view class="minus" bindtap='minusAction' data-id="{{item.product_id}}">-</view>
                  <input type="number" disabled class="ipt" value="{{item.num}}"></input>
                  <view class="plus" bindtap='plusAction' data-id="{{item.product_id}}">+</view>
              </view>
            </view>          
        </block>
        <view class="gift-total">
            <text class="num">共{{totalgiftsNum}}件礼物</text>
            <text bindtap='bindViewTap' class="add">继续添加></text>
        </view>
      </view>
    </block>
    <block wx:else>
      <view class="no-product" bindtap='bindViewTap'>
        <image class="gift-icon1" src='../../images/purplebox.png'></image>
        <view class="none-tip">
          <text class="tip1">开始挑选礼物</text>
          <text class="tip2">点击这里，挑选喜欢的礼物</text>
        </view>
      </view>
    </block>
    <view class="selectType">
        <view class="typeName">{{gifttype}}</view>
        <view class="selectBtn" bindtap='selectType'>更改玩法></view>
    </view>
    <block wx:if="{{gifttype=='定时开奖'}}">
      <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" class="typeIpt">
          <image src="../../images/ipt-icon1.png" class="icon"></image>
          <view class="tip">定时开奖</view>
          <view class="timer">
          {{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}}:{{multiArray[2][multiIndex[2]]}}</view>
      </picker>
    </block>
    <block wx:elif="{{gifttype=='满人开奖'}}">
      <view class="typeIpt">
          <image src="../../images/ipt-icon1.png" class="icon"></image>
          <view class="tip">开奖人数</view>
          <view class="ipt-wrap"><input bindinput="personChange" class="num" value="{{personNum}}" maxlength="3" placeholder='人数' type="number"></input>人</view>
      </view>
    </block>
    <block wx:else>
      <view bindtap='selectType' class="typeIpt">
          <image src="../../images/ipt-icon1.png" class="icon"></image>
          <view class="tip">每人最多可领一份礼物</view>
      </view>
    </block>
    <view class="selectType">
        <view class="typeName">传达心意，写祝福语</view>
    </view> 
    <textarea show-confirm-bar="false" class="wish" auto-height placeholder="大吉大利，送你好礼" placeholder-style="color:#ccc;" value="{{wish}}" bindinput="bindwish"/>
    <view class="total-price">¥<text class="price">{{totalPrice}}</text></view>
    <button class="btn-finish" bindtap='getRedPackage'>生成礼物红包</button>
    <view class="bottom">
        <navigator class="guide" url="/pages/guide/guide" hover-class="navigator-hover">使用说明</navigator>
    </view>
</view>

index.wxss

/**index.wxss**/
page{
  background: #f2f2f2;
}
.container{
  padding: 0;
  background: #f2f2f2;
}
.top{
  height: 360rpx;
  width: 100%;
  background: linear-gradient(#e50e38, #f0743e);
}
.top .text1{
  font-size: 40rpx;
  color: #fff;
  padding-left:80rpx;
  position: relative;
  top: 80rpx;
  display: block;
}
.top .text2{
  font-size: 30rpx;
  color: #fff;
  padding-left:80rpx;
  position: relative;
  top: 90rpx;
  display: block;
}
.top .guide{
  display: inline-block;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background: #f34043;
  position: absolute;
  right: 40rpx;
  top: 40rpx;
  text-align: center;
  color: #fff;
  padding: 20rpx;
  line-height: 30rpx;
  font-size: 24rpx;
}
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}
.swiper {
  height: 312.5rpx;
  width: 100%;
}
.swiper image {
  height: 100%;
  width: 100%;
}
.no-product{
  background: #faf1ea;
  width: 680rpx;
  height: 160rpx;
  border-radius:16rpx;
  position: relative;
  top:-80rpx;
  vertical-align: middle;
}
.no-product .gift-icon1{
  width:80rpx;
  height:80rpx;
  display:inline-block;
  vertical-align:middle;
  padding-top:40rpx;
  padding-left:40rpx;
  padding-right:40rpx;
}
.no-product .none-tip{
  display: inline-block;
  width: 450rpx;
  position:relative;
  top:40rpx;
}
.no-product .none-tip .tip1{
  color: #bea272;
  font-size: 34rpx;
  display: block;
}
.no-product .none-tip .tip2{
  color: #000;
  font-size: 30rpx;
  display: block;
  position: relative;
  top: 10rpx;
}
.gift-lists{
  background: #fff;
  width: 620rpx;
  border-radius:16rpx;
  position: relative;
  top:-80rpx;
  padding:30rpx;
}
.gift-lists .item{
  margin-bottom: 20rpx;
  border-bottom: 1px solid #eee;
  position: relative;
  padding-bottom:10rpx;
}
.gift-lists .item .item-img{
  width: 140rpx;
  height: 140rpx;
  padding-right: 20rpx;
}
.gift-lists .item .caption{
  width: 400rpx;
  display: inline-block;
}
.gift-lists .item .name{
  width: 400rpx;
  overflow: hidden;
  font-size: 28rpx;
  height: 40rpx;
  line-height: 40rpx;
}
.gift-lists .item .brief{
  width: 400rpx;
  overflow: hidden;
  font-size: 28rpx;
  height: 40rpx;
  line-height: 40rpx;
  color: #ccc;
}
.gift-lists .item .price{
  width: 400rpx;
  overflow: hidden;
  font-size: 28rpx;
  height: 40rpx;
  line-height: 40rpx;
  color: #e50e38;
}
.gift-lists .item .btn-group{
  position: absolute;
  right:0;
  bottom:10rpx;
  width:180rpx;
}
.gift-lists .item .btn-group .minus{
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  border: 2rpx solid #ccc;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 36rpx;
  color: #ccc;
  font-size: 28rpx;
}
.gift-lists .item .btn-group .plus{
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  border: 2rpx solid #ccc;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  line-height: 36rpx;
  color: #ccc;
  font-size: 28rpx;
}
.gift-lists .item .btn-group .ipt{
  width:80rpx;
  display:inline-block;
  text-align: center;
  height: 36rpx;
  font-size: 28rpx;
  vertical-align:middle;
  background: #f9f9f9;
  margin: 0 6rpx;
}
.gift-lists .gift-total{
  height: 48rpx;
}
.gift-lists .gift-total .num{
  color: #ccc;
  font-size:28rpx; 
  line-height: 48rpx;
  vertical-align: middle;
}
.gift-lists .gift-total .add{
  color: #9786ed;
  font-size:28rpx; 
  float: right;
  line-height: 48rpx;
  vertical-align: middle;
}
.selectType{
  width: 620rpx;
  height: 60rpx;
  position: relative;
  top: -80rpx;
  padding: 10rpx 65rpx;
}
.selectType .typeName{
  font-size: 28rpx;
  display: inline;
  vertical-align: middle;
  line-height:60rpx;
}
.selectType .selectBtn{
  font-size: 28rpx;
  float: right;
  vertical-align: middle;
  line-height: 60rpx;
  color: #9786ed;
}
.typeIpt{
    background: #fff;
    width: 620rpx;
    border-radius:16rpx;
    position: relative;
    top:-80rpx;
    padding:0rpx 30rpx;
    height: 80rpx;
    vertical-align: middle;
}
.typeIpt .ipt-wrap{
  font-size: 28rpx;
  display: inline-block;
  top: 0;
  right: 0;
  z-index: 99;
  position: absolute;
  height: 80rpx;
  vertical-align: middle;
  line-height: 80rpx;
  width: 120rpx;
  color: #000;
  padding-right:10rpx;
}
.timer{
  font-size: 28rpx;
  position: absolute;
  height: 80rpx;
  vertical-align: middle;
  line-height: 80rpx;
  width: 420rpx;
  color: #000;
  top: 0;
  right: 30rpx;
  text-align: right;
}
.typeIpt .ipt-wrap .num{
  width: 60rpx;
  display: inline-block;
  height:80rpx;
  vertical-align:middle;
  padding-right: 8rpx;
  text-align: right;
}
.typeIpt .icon{
  width: 40rpx;
  height: 40rpx;
  display: inline-block;
  padding-right: 10rpx;
  padding-top: 20rpx;
  line-height: 80rpx;
}
.typeIpt .tip{
  font-size: 28rpx;
  color: #ccc;
  display: inline-block;
  top: 0;
  position: absolute;
  height: 80rpx;
  vertical-align: middle;
  line-height: 80rpx;
}
.wish{
  background: #fff;
  width: 620rpx;
  border-radius:16rpx;
  position: relative;
  padding:10rpx 30rpx;
  vertical-align: middle;
  top:-80rpx;
  color: #ccc;
  font-size: 32rpx;
  padding-bottom: 60rpx;
}
.total-price{
  position: relative;
  top: -66rpx;
}
.total-price .price{
  font-size: 64rpx;
  padding-left: 10rpx;
}  
.btn-finish{
  background: #e50e38;
  border:none;
  color: #fff;
  width: 580rpx;
  font-size: 32rpx;
  padding: 8rpx 0;
  position: relative;
  top: -60rpx;
}
.bottom{
  padding-bottom: 10rpx;
  position: relative;
  top: -40rpx
}
.bottom .guide{
  display: inline-block;
  font-size: 28rpx;
  color: #ccc;
  vertical-align: middle;
  padding: 0 10rpx;
  height: 32rpx;
}
.bottom .agree{
  display: inline-block;
  font-size: 28rpx;
  color: #ccc;
  vertical-align: middle;
  padding: 0 10rpx;
  height: 32rpx;
}

index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    gifttype:'直接送礼',
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    totalPrice:"0.00",
    multiArray: ['', '', ''],
    gifts:[],
    personNum:3,
    objectMultiArray: [
        [], 
        [], 
        []
    ],
    multiIndex: [0, 0, 0],
    weekArr:['周日','周一','周二','周三','周四','周五','周六'],
    wish:''
  },
  bindwish:function(e){//祝福语保存到本地
      var _this = this;
      _this.data.wish = e.detail.value;
      wx.setStorageSync('wish', e.detail.value);
  },
  personChange:function(e){//开奖人数修改
      var _this = this;
      var p_num = e.detail.value;
      _this.data.personNum = p_num;
      wx.setStorageSync('p_num', e.detail.value);
  },
  getDate:function(){
    var _this = this;
    var _now = new Date();//当前时间
    var multi0 ='multiArray['+0+']';
    var multi1 = 'multiArray[' + 1 + ']';
    var multi2 = 'multiArray[' + 2 + ']';
    var nowDayArr = [_this.getMd(0), _this.getMd(1), _this.getMd(2), _this.getMd(3), _this.getMd(4), _this.getMd(5), _this.getMd(6)];
    var nowhoursArr = _this.getHour(0);
    var nowminutesArr = _this.getMin(0);
    _this.setData({
      [multi0]: nowDayArr,
      [multi1]: nowhoursArr,
      [multi2]: nowminutesArr
    });
  },
  getMd:function(dayNum){//参数1当前时间后第几天int类型 获取月份日期和星期 多列选择第一列
      var _this = this;
      var _now = new Date();
      var targetday_milliseconds = _now.getTime() + 1000 * 60 * 60 * 24 * dayNum;//目标日期的时间戳
      _now.setTime(targetday_milliseconds);//时间设置
      var _str = (_now.getFullYear()) + '年' +((_now.getMonth() + 1) < 10 ? '0' + (_now.getMonth() + 1) : (_now.getMonth() + 1)) + '月' + (_now.getDate() < 10 ? '0' + _now.getDate() : _now.getDate()) + '日 ' + _this.data.weekArr[_now.getDay()];
      return _str;
  },
  getHour: function (dayNum) {//时间选择多列第二列小时
      var _this = this;
      var _now = new Date();
      var _hour = _now.getHours();
      var _minute = _now.getMinutes();
      if(dayNum<=0){
        var hoursArr = [];
        var idx = parseInt(_hour);
        if(_minute>55){//如果已经过了55分钟则从下一个整点开始
          for (var i = idx+1; i <= 23; i++) {
            var _stri = i < 10 ? ('0' + i) : i;
            hoursArr.push(_stri);
          }
        }else{
          for (var i = idx; i <= 23; i++) {
            var _stri = i < 10 ? ('0' + i) : i;
            hoursArr.push(_stri);
          }
        }
        return hoursArr;
      }else{
        var hoursArr = [];
        var idx = parseInt(_hour);
        for (var i = 0; i <= 23; i++) {
          var _stri = i < 10 ? ('0' + i) : i;
          hoursArr.push(_stri);
        }
        return hoursArr;
      }
  },
  getMin:function(key){
    var _this = this;
    var _now = new Date();
    var _minute = _now.getMinutes();
    if(key==0){
        var MinutsArr=[];
        var idx = Math.ceil(parseInt(_minute)/5);
        if(idx==12){
          for (var i = 0; i < 12; i++) {
            var _strM = 5 * i < 10 ? ('0' + 5 * i) : 5 * i;
            MinutsArr.push(_strM);
          }
          return MinutsArr;
        }else{
          for (var i = idx; i < 12; i++) {
            var _strM = 5 * i < 10 ? ('0' + 5 * i) : 5 * i;
            MinutsArr.push(_strM);
          };
        }
        return MinutsArr;
    }else{
      var MinutsArr = [];
      var idx = Math.ceil(parseInt(_minute) / 5);
      for (var i = 0; i < 12; i++) {
        var _strM = 5 * i < 10 ? ('0' + 5 * i) : 5 * i;
        MinutsArr.push(_strM);
      }
      return MinutsArr;
    }
  },
  bindMultiPickerChange: function (e) {
    //console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      multiIndex: e.detail.value
    })
  },
  bindMultiPickerColumnChange: function (e) {
    //console.log('修改的列为', e.detail.column, '，值为', e.detail.value);
    var _this = this;
    var data = {
      multiArray: this.data.multiArray,
      multiIndex: this.data.multiIndex
    };
    data.multiIndex[e.detail.column] = e.detail.value;
    switch (e.detail.column) {//修改的列
      case 0://如果修改的是第一列
        switch (data.multiIndex[0]) {
          case 0://如果第一列的值是第一个
            data.multiArray[1] = _this.getHour(0);
            data.multiArray[2] = _this.getMin(0);
            break;
          default://第一列选择的值不是第一个的话后续值都是相同的
            data.multiArray[1] = _this.getHour(1);
            data.multiArray[2] = _this.getMin(1);
            break;
        }
        data.multiIndex[1] = 0;
        data.multiIndex[2] = 0;
        break;
      case 1://如果修改的是第二列
        switch (data.multiIndex[0]) {
          case 0://如果第一列的值是第一个
            switch (data.multiIndex[1]) {
              case 0:
                data.multiArray[2] = _this.getMin(0);
                break;
              default:
                data.multiArray[2] = _this.getMin(1);
                break;
            }
            break;
          case 1://如果第一列的值是第二个
            data.multiArray[2] = _this.getMin(1);
            break;
        }
        data.multiIndex[2] = 0;
        break;
    }
    this.setData(data);
  },
  //事件处理函数
  bindViewTap: function () {//选择商品跳转列表页
    wx.navigateTo({
      url: '../list/list'
    })
  },
  selectType:function(){//选择开奖方式
    var _this = this;
    wx.showActionSheet({
      itemList: ['直接送礼', '定时开奖', '满人开奖'],
      success: function (res) {
        if(res.tapIndex=="0"){
          _this.setData({
            gifttype:"直接送礼"
          });
          wx.setStorageSync('gifttype', "直接送礼");
        }else if (res.tapIndex == "1") {
          _this.setData({
            gifttype: "定时开奖"
          });
          wx.setStorageSync('gifttype', "定时开奖");
        }else if (res.tapIndex == "2") {
          _this.setData({
            gifttype: "满人开奖"
          });
          wx.setStorageSync('gifttype', "满人开奖");
        }
      },
      fail: function (res) {
        console.log(res.errMsg)
      }
    })
  },
  onLoad: function () {
    var _this = this;
    _this.getDate();
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    };
    this.setData({
      gifts: wx.getStorageSync('gifts') || [],
      wish: wx.getStorageSync('wish') || '',
      gifttype: wx.getStorageSync('gifttype') || '直接送礼',
      personNum: wx.getStorageSync('p_num') || this.data.personNum,
    },() => {//获取商品总数并且赋值
        var _total = 0;
        var _price = 0;
        for (var i = 0; i < _this.data.gifts.length;i++){
          _total += parseInt(_this.data.gifts[i].num);
          _price += parseFloat(_this.data.gifts[i].price) * _this.data.gifts[i].num;
        };
        _this.setData({
          totalgiftsNum:_total,
          totalPrice: _price.toFixed(2)
        })
    });
  },
  minusAction:function(e){//商品减操作
    var _this = this;
    var pid = e.currentTarget.dataset.id;
    for (var i = 0; i < _this.data.gifts.length; i++) {
      if (_this.data.gifts[i].product_id == pid) {
        var num = 'gifts[' + i + '].num';
        var numData = parseInt(_this.data.gifts[i].num);
        numData--;
        if(numData<=0){
          //从数组中删除
          var arr = _this.data.gifts;
          arr.splice(i,1);
          this.setData({
            gifts: arr
          }, () => {//获取商品总数并且赋值
            var _total = 0;
            var _price = 0;
            for (var i = 0; i < _this.data.gifts.length; i++) {
              _total += parseInt(_this.data.gifts[i].num);
              _price += parseFloat(_this.data.gifts[i].price) * _this.data.gifts[i].num;
            };
            _this.setData({
              totalgiftsNum: _total,
              totalPrice: _price.toFixed(2)
            })
          })
        }else{
          _this.setData({
            [num]: numData
          }, () => {//获取商品总数并且赋值
            var _total = 0;
            var _price = 0;
            for (var i = 0; i < _this.data.gifts.length; i++) {
              _total += parseInt(_this.data.gifts[i].num);
              _price += parseFloat(_this.data.gifts[i].price) * _this.data.gifts[i].num;
            };
            _this.setData({
              totalgiftsNum: _total,
              totalPrice: _price.toFixed(2)
            })
          })
        };
        wx.setStorageSync('gifts', _this.data.gifts);
        return;
      }
    }
  },
  plusAction: function (e) {//商品加操作
    var _this = this;
    var pid = e.currentTarget.dataset.id;
    for (var i = 0; i < _this.data.gifts.length; i++) {
      if (_this.data.gifts[i].product_id == pid) {
        var num = 'gifts[' + i + '].num';
        var numData = parseInt(_this.data.gifts[i].num);
        numData++;
        _this.setData({
          [num]: numData
        }, () => {//获取商品总数并且赋值
          var _total = 0;
          var _price = 0;
          for (var i = 0; i < _this.data.gifts.length; i++) {
            _total += parseInt(_this.data.gifts[i].num);
            _price += parseFloat(_this.data.gifts[i].price) * _this.data.gifts[i].num;
          };
          _this.setData({
            totalgiftsNum: _total,
            totalPrice: _price.toFixed(2)
          })
        });
        wx.setStorageSync('gifts', _this.data.gifts);
      }
    }
  },
  onShareAppMessage: function () {
    return {
      title: '来一场意外的邂逅',
      path: '/page/user?id=123'
    }
  },
  // opencamera: function () {
  //   wx.scanCode({
  //     success: (res) => {
  //       if (res.result) {
  //         wx.navigateTo({ url: res.result });
  //       }
  //     }
  //   })
  // },
  checkForm: function () {//提交表单数据验证
    var _this = this;
    var _error_tip = '';
    if (_this.data.gifts.length < 1) {//礼物列表是否为空
      _error_tip = '请先选择礼物';
      wx.showToast({
        title: _error_tip,
        icon: 'none',
        duration: 2000
      });
      return false;
    };
    switch (_this.data.gifttype) {
      case "直接送礼":
        break;
      case "定时开奖":
        var tp = _this.getGiftsTimestamp();
        var now = Date.parse(new Date()) / 1000;
        if (now >= tp) {
          _error_tip = '开奖时间已过，请重选';
          wx.showToast({
            title: _error_tip,
            icon: 'none',
            duration: 2000
          });
          return false;
        }
        break;
      case "满人开奖":
        if (parseInt(_this.data.personNum) < _this.data.gifts.length) {
          _error_tip = '开奖人数少于礼物数';
          wx.showToast({
            title: _error_tip,
            icon: 'none',
            duration: 2000
          });
          return false;
        }
        break;
    }
    return true;
  },
  errorBox:function(tip){//错误提示
      wx.hideLoading();
      wx.showToast({
        title: tip,
        icon: 'none',
        duration: 2000
      });
  },
  relogin:function(auth){//重新登录，auth为布尔值，true为需要验证授权，false时只更新login_key
      var _this = this;
      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);
                if(auth){
                    wx.getSetting({
                    success: res => {
                      if (res.authSetting['scope.userInfo']) {
                        // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
                        wx.getUserInfo({
                          success: res => {
                            // 可以将 res 发送给后台解码出 unionId
                            _this.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) {

                              }
                            });

                            // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
                            // 所以此处加入 callback 以防止这种情况
                            if (_this.userInfoReadyCallback) {
                              _this.userInfoReadyCallback(res)
                            }
                          }
                        })
                      } else {
                        //未授权跳到授权登录页
                        wx.hideLoading();
                        wx.navigateTo({
                          url: '../login/login?redirect=index',
                        })
                      }
                    }
                  })
                }
                _this.getRedPackage();
              }
            });
          }
        })
  },
  getGiftsTimestamp: function () {//定时开奖获取时间戳判断
    var _this = this;
    var ymd = _this.data.multiArray[0][_this.data.multiIndex[0]];
    var result = ymd.match(/\d+/g);
    var hour = _this.data.multiArray[1][_this.data.multiIndex[1]];
    var minutes = _this.data.multiArray[2][_this.data.multiIndex[2]];
    var _tspStr = result[0] + '/' + result[1] + '/' + result[2] + ' ' + hour + ':' + minutes;
    var date = new Date(_tspStr);
    var tsp = Date.parse(date);
    var utimeStamp = tsp / 1000;
    return String(utimeStamp);
  },
  getRedPackage:function(){//生成礼物红包操作
    //表单数据验证
    var _this = this;
    var result = _this.checkForm();
    if(!result){
        return;
    }
    //表单通过之后检测登录状态和授权状态
    wx.showLoading({
      title: '验证登录',
    });
    wx.checkSession({
        success:function(){//sessionKey未过期
            //判断授权状态
          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/order/creatOrder',//生成礼物红包接口
                          data:{
                            'productList': _this.data.gifts,
                            'login_key':wx.getStorageSync('login_key'),
                            'play': { 'method': _this.data.gifttype, 'openTime': _this.getGiftsTimestamp(), 'openPeople': _this.data.personNum},
                            'wish': _this.data.wish ? _this.data.wish:'大吉大利，送你好礼'
                          },
                          method: "POST",
                          header: {
                            'content-type': 'application/json' // 默认值
                          },
                          success:function(res){
                            if (res.data.code == 'error' && res.data.message) {
                              wx.showToast({
                                title: res.data.message,
                                icon:'none'
                              })
                            }else{
                              var _orderId = res.data.data.order_id;
                              //直接到结果页

                                  wx.removeStorageSync('gifts');
                                  wx.removeStorageSync('wish');
                                  wx.removeStorageSync('gifttype');
                                  wx.removeStorageSync('p_num');
                                  _this.setData({
                                      gifts: [],
                                      wish: '',
                                      gifttype: '直接送礼',
                                      personNum: _this.data.personNum,
                                    })
                                  wx.hideLoading();
                                  wx.navigateTo({
                                    url: '../payment/payresult/payresult?orderId=' + _orderId,
                                  })

                              //去除支付
                             // wx.request({
                                // url: app.globalData.apiDomain + '/api/payment?act=requestPayment',//订单创建成功后请求微信支付的参数
                                // data: {
                                //   'login_key': wx.getStorageSync('login_key'),
                                //   'order_id': _orderId
                                // },
                                // method: "POST",
                                // header: {
                                //   'content-type': 'application/json' // 默认值
                                // },
                                // success: function (res) {
                                //   wx.hideLoading();
                                //   wx.showLoading({
                                //     title: '等待支付',
                                //   });
                                //   //吊起微信支付
                                //   if (res.data.data.nonceStr && res.data.data.package && res.data.data.timeStamp && res.data.data.paySign) {
                                //     wx.requestPayment({
                                //       'timeStamp': String(res.data.data.timeStamp),
                                //       'nonceStr': res.data.data.nonceStr,
                                //       'package': res.data.data.package,
                                //       'signType': 'MD5',
                                //       'paySign': res.data.data.paySign,
                                //       'success': function (res) {//微信支付成功之后
                                //         //TODO清除数据
                                //         try {
                                //           wx.removeStorageSync('gifts');
                                //           wx.removeStorageSync('wish');
                                //           wx.removeStorageSync('gifttype');
                                //           wx.removeStorageSync('p_num');
                                //         } catch (e) {
                                //           // Do something when catch error
                                //         }
                                //         _this.setData({
                                //           gifts: [],
                                //           wish: '',
                                //           gifttype: '直接送礼',
                                //           personNum: _this.data.personNum,
                                //         })
                                //         wx.hideLoading();
                                //         wx.navigateTo({
                                //           url: '../payment/payresult/payresult?orderId=' + _orderId,
                                //         })
                                //       },
                                //       'fail': function (res) {
                                //         wx.hideLoading();
                                //         _this.errorBox('支付失败');
                                //       }
                                //     })
                                //   }
                                // },
                                // fail: function (res) {
                                //   wx.hideLoading();
                                //   if (res.data.message) {
                                //     wx.showToast({
                                //       title: res.data.message
                                //     })
                                //   }
                                // }
                              //})
                            }

                          },
                          fail:function(){
                            //订单创建失败
                            _this.errorBox('网络异常，请稍后再试');
                          }
                        })
                      },
                      fail:function(){
                        //后台解密用户信息失败
                        _this.errorBox('网络异常，请稍后再试');
                      }
                    });

                    //由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回所以此处加入 callback 以防止这种情况
                    if (_this.userInfoReadyCallback) {
                      _this.userInfoReadyCallback(res)
                    }
                  }
                })
              }else{
                //未授权跳到授权登录页
                wx.hideLoading();
                wx.navigateTo({
                  url: '../login/login?redirect=index',
                })
              }
            }
          })
        },
        fail:function(){//登录过期
          _this.relogin(true);
        }
    })
  }
})

服务端

1 添加创建订单接口，接收数据后，需要创建订单数据，对每一个礼物都要生成一个order_item，和一个订单的方法记录，这里直接将创建好的，订单置为支付状态。并返回订单号。

url.py

from django.contrib import admin
from django.urls import path
from django.conf.urls import url
from api.views import product,user

urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'^api/indexlist/categoryList$', product.caetgoryList.as_view()),
    url(r'^api/indexlist/IndexProductList$', product.ProductList.as_view()),
    url(r'^api/indexlist/categoryProductsList$', product.categoryProductsList.as_view()),
    url(r'^api/indexlist/detailProduct$', product.detailProduct.as_view()),
    url(r'^api/member/code/login$', user.login.as_view()),
    url(r'^api/member/code/getUserInfo$', user.getUserInfo.as_view()),
    url(r'^api/order/creatOrder$', order.creatOrder.as_view()),
]

order.py

from django.shortcuts import render,HttpResponse
from rest_framework.views import APIView
from api.wx import wxlogin,UserInfo,setting
from api import baseResponse
import time
import datetime
import random
from django.core.cache import cache #引入缓存模块
from api import models
from django.http import JsonResponse
import hashlib

#创建订单接口
class creatOrder(APIView):
    def post(self,request):
        params = request.data
        #判断参数是否传对，productList需要生成订单的商品列表，play订单开奖方式
        if params.get("login_key") and params.get("productList") and params.get("play"):
            #在redis中获取用户数据
            login_key = params['login_key']
            data = cache.get(login_key)
            if not data:
                re_data = baseResponse.resdic("error", "login_key已过期")
                return JsonResponse(re_data)
            data_list = data.split('&')
            #通过用户的openid查找用户
            member_info=models.Wxuser.objects.filter(openid=data_list[1]).values().first()
            #调用创建订单方法
            order_data=self.createOrder_def(params,member_info)
            re_data = baseResponse.resdic("success", "获取成功",order_data)
            return JsonResponse(re_data)
        else:
            re_data = baseResponse.resdic("error", "创建订单失败")
            return JsonResponse(re_data)

    def createOrder_def(self,params,member_info):
        #创建订单item
        order_data=self.creatOrderItem(params['productList'],member_info)
        #创建订单方法数据ordermethon
        self.creatOrderMethon(params['play'], order_data)
        order_data['createtime'] = datetime.datetime.now()
        order_data['pay_app'] = 'wxpay'
        order_data['member_id'] =member_info['id']
        order_data['get_method'] =params['play']['method']
        order_data['memo'] =params['wish']
        order_data['pay_status']=1
        order_data['payed'] =order_data['order_total']
        #将数据保存到order表中
        models.Order.objects.create(**order_data)
        return  order_data

    def creatOrderItem(self,data,member_infor):
        order_data={}
        #生成订单号
        order_data['order_id'] = str(int(time.time() * 1000)) + str(int(time.clock() * 1000000))
        order_data['order_total']=0
        order_data['quantity']=0
        for key,vale in enumerate(data):
            #查出传过来的商品列表中单个商品的数据
            product=models.Products.objects.filter(product_id=vale['product_id']).values().first()
            params={}
            params['order_id_id'] =order_data['order_id']
            params['product_id'] =vale['product_id']
            params['name'] =vale['name']
            params['buy_member_id_id'] =member_infor['id']
            params['image_id'] =vale['image_id']
            params['price'] = round(float(vale['price']), 3)
            params['brief'] =product['brief']
            for i in range(0,vale['num']):
                params['nums']=1
                params['amount']=product['price']
                #每个商品每个数量都生成一个订单item
                models.Order_items.objects.create(**params)
                #models.Order_items.create(order_id_id=params['order_id_id'],product_id=params['product_id'],name=params['name'],buy_member_id_id=params['buy_member_id_id'],image_id= params['image_id'],price=params['price'],brief=params['brief'],nums=params['nums'],amount=params['amount'])
            order_data['quantity'] +=vale['num'];
            order_data['order_total'] = order_data['order_total'] + (round(float(vale['price']), 3) * int(vale['num']))
        return order_data

    def creatOrderMethon(self,data,order_data):
        methon_data={}
        methon_data['get_method']=data['method']
        methon_data['order_id'] =order_data['order_id']
        #将数据存入到ordermethon中
        if data['method'] == "定时开奖":
            timeArray = time.localtime(int(data['openTime']))
            datatime = time.strftime("%Y-%m-%d %H:%M:%S", timeArray)
            methon_data['opentime']=datatime
        elif data['method'] == "满人开奖":
            methon_data['open_number']=data['openPeople']
        models.Order_methons.objects.create(**methon_data)
        return True