我的礼物记录

需求：用户在该页面可以在该页面查看自己的参与记录，购买记录，获奖记录。

小程序端

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",
    "pages/my/my",
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#e50e38",
    "navigationBarTitleText": "百步生活",
    "navigationBarTextStyle": "#fff",
    "enablePullDownRefresh": false,
    "backgroundColor": "#e50e38"
  },
}    

my.wxml

<view class="tab-wrap">
    <view class="tab" bindtap='selectTab' data-id='0'><text class='{{tab[0]}}'>我送出的</text></view>
    <view class="tab" bindtap='selectTab' data-id='1'><text class='{{tab[1]}}'>我收到的</text></view>
    <view class="tab" bindtap='selectTab' data-id='2'><text class='{{tab[2]}}'>我参与的</text></view>
</view>
<view class="lists">
    <block wx:if="{{showTab[0]}}">
      <block wx:if="{{list1.length>0}}">
          <block wx:for="{{list1}}" wx:for-index="index" wx:key="key">
              <navigator class="item" data-url="{{item.order_id}}"  bindtap="loadDetail"> 
                  <view class="header">
                      <text class="orderNum">订单号：{{item.order_id}}</text>
                      <text class="status" wx:if="{{item.order_methon.status=='finish'}}">已完成</text>
                      <text class="status" wx:if="{{item.order_methon.status=='begin'}}">进行中</text>
                      <text class="status" wx:if="{{item.order_methon.status=='read'}}">进行中</text>
                  </view>
                  <view class="inner">
                      <block wx:if="{{item.order_item.length>1}}">
                          <block wx:for="{{item.order_item}}" wx:for-index="idx" wx:key="key1" wx:for-item="productItem">
                              <block wx:if="{{idx<3}}">
                                  <image src="{{productItem.image_id.m_url}}"></image>
                              </block>
                          </block>
                      </block>
                      <block wx:else>
                        <image class="p-image" src="{{item.order_item[0].image_id.m_url}}"/> 
                        <view class="caption">
                            <view class="p-name">{{item.order_item[0].name}}</view> 
                            <view class="p-brief">{{item.order_item[0].brief}}</view>
                        </view>  
                      </block>
                      <text class="price1">¥{{item.order_total}}</text>
                      <text class="num1">共{{item.order_item.length}}件</text>
                  </view> 
                  <view class="bottom">
                      <text class="type">
                          <block wx:if="{{item.order_methon.get_method=='定时开奖'}}">{{item.order_methon.opentime}}开奖</block>
                          <block wx:elif="{{item.order_methon.get_method=='满人开奖'}}">满{{item.order_methon.open_number}}人开奖</block>
                          <block wx:else>{{item.order_methon.get_method}}</block>
                      </text>
                      <block wx:if="{{item.order_methon.status!='finish'}}">
                          <navigator url="/pages/payment/payresult/payresult?orderId={{item.order_id}}" class="act">去赠送</navigator>
                      </block>
                  </view>
              </navigator>
          </block>
      </block>
      <block wx:else>
          <view class="empty">
              <text class="nodata">暂无记录</text>
          </view>
      </block>
    </block>
    <block wx:if="{{showTab[1]}}">
      <block wx:if="{{list2.length>0}}">
        <block wx:for="{{list2}}" wx:for-index="index" wx:key="key">
            <navigator class="item" data-url="{{item.order_id}}"  bindtap="loadDetail">
                <view class="header">
                    <text class="orderNum">订单号：{{item.order_id}}</text>
                    <text class="status" wx:if="{{item.status=='send'}}">待发货</text>
                    <text class="status" wx:if="{{item.status=='nosend'}}">未填写收货地址</text>
                    <text class="status" wx:if="{{item.status=='sended'}}">已发货</text>
                </view>
                <view class="inner">
                    <image class="p-image" src="{{item.image_id.m_url}}"/> 
                    <view class="caption">
                        <view class="p-name">{{item.name}}</view> 
                        <view class="p-brief">{{item.brief}}</view>
                    </view>
                </view> 
                <view class="bottom">
                    <text class="type">{{item.buyerInfor.name}}送出</text>
                    <block wx:if="{{item.status=='nosend'}}">
                        <navigator url="/pages/gift/openresult/openresult?orderId={{item.order_id}}" class="act">填写地址</navigator>
                    </block>
                </view>
            </navigator>
        </block>
      </block>
      <block wx:else>
          <view class="empty">
              <text class="nodata">暂无记录</text>
          </view>
      </block>
    </block>
    <block wx:if="{{showTab[2]}}">
      <block wx:if="{{list3.length>0}}">
          <block wx:for="{{list3}}" wx:for-index="index" wx:key="key">
              <navigator  class="item" data-url="{{item.order_id}}"  bindtap="loadDetail">
                  <view class="header">
                      <text class="orderNum">订单号：{{item.order_id}}</text>
                      <text class="status">{{item.status}}</text>
                  </view>
                  <view class="inner">
                      <block wx:if="{{item.order.order_item.length>1}}">
                          <block wx:for="{{item.order.order_item}}" wx:for-index="idx" wx:key="key1" wx:for-item="productItem">
                              <block wx:if="{{idx<3}}">
                                  <image src="{{productItem.image_id.m_url}}"></image>
                              </block>
                          </block>
                      </block>
                      <block wx:else>
                        <image class="p-image" src="{{item.order.order_item[0].image_id.m_url}}"/> 
                        <view class="caption">
                            <view class="p-name">{{item.order.order_item[0].name}}</view> 
                            <view class="p-brief">{{item.order.order_item[0].brief}}</view>
                        </view>  
                      </block>
                      <text class="num">共{{item.order.order_item.length}}件</text>
                  </view> 
                  <view class="bottom">
                      <text class="type">{{item.buyerInfor.name}}送出    <block wx:if="{{item.order_methon.get_method=='定时开奖'}}">{{item.order_methon.opentime}}开奖</block>
                          <block wx:elif="{{item.order_methon.get_method=='满人开奖'}}">满{{item.order_methon.open_number}}人开奖</block>
                          <block wx:else>{{item.order_methon.get_method}}</block></text>
                  </view>
              </navigator>
          </block>
      </block>
      <block wx:else>
          <view class="empty">
              <text class="nodata">暂无记录</text>
          </view>
      </block>
    </block> 
</view>

my.wxss

/* pages/my/my.wxss */
page{
  background: #eee;
  height: 100%;
}
.tab-wrap{
  height: 88rpx;
  line-height: 88rpx;
  position: fixed;
  top: 0;
  background: #fff;
  padding-bottom: 2rpx;
  z-index: 10;
}
.tab-wrap .tab{
  display: inline-block;
  width: 250rpx;
  text-align: center;
  font-size: 32rpx;
  line-height: 86rpx;
  height:88rpx;
}
.tab-wrap .tab .active{
  border-bottom:2rpx solid #e50e38;
  display: inline-block;
  line-height: 86rpx;
}
.lists{
  padding-top:105rpx;
}
.lists .item{
  background: #fff;
  margin-bottom: 17rpx;
}
.lists .item .header{
  border-bottom:2rpx solid #eee;
  padding: 0 20rpx;
  height: 60rpx;
  line-height: 60rpx;
  letter-spacing: 2rpx;
}
.lists .item .header .orderNum{
  font-size: 24rpx;
}
.lists .item .header .status{
  font-size: 24rpx;
  float: right;
}
.lists .item .inner{
  padding: 12rpx 20rpx;
  border-bottom:2rpx solid #eee;
  position: relative;
  letter-spacing: 2rpx;
}
.lists .item .inner image{
  width: 150rpx;
  height: 150rpx;
  margin-left:12rpx;
}
.lists .item .inner .caption{
    display: inline-block;
    width: 380rpx;
    vertical-align: top;
    padding: 25rpx 10rpx;
}
.lists .item .inner .p-name{
    font-size: 24rpx;
    line-height: 50rpx;
    word-break: break-all;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.lists .item .inner .p-brief{
    font-size: 24rpx;
    line-height: 40rpx;
    color:#999;
}
.lists .item .inner .price{
  position: absolute;
  right:20rpx;
  top:40rpx;
  font-size:24rpx;
}
.lists .item .inner .price1{
  position: absolute;
  right:24rpx;
  top:44rpx;
  font-size:24rpx;
}
.lists .item .inner .num{
  position: absolute;
  right:20rpx;
  top:75rpx;
  color:#999999;
  font-size:24rpx;
}
.lists .item .inner .num1{
  position: absolute;
  right:20rpx;
  top:85rpx;
  color:#999999;
  font-size:24rpx;
}
.lists .item .bottom{
  padding: 0 20rpx;
  height: 80rpx;
  line-height: 80rpx;
  letter-spacing: 2rpx;
  position: relative;
}
.lists .item .bottom .type{
  font-size: 24rpx;
  color: #999999;
  position: relative;
  top: -5rpx;
}
.lists .item .bottom navigator{
  position:absolute;
  right:20rpx;
  font-size:24rpx;
  bottom:14rpx;
  border:2rpx solid #e50e38;
  line-height:40rpx;
  padding:4rpx 10rpx;
  border-radius:4rpx solid #e50e38;
  color: #e50e38;
}
.empty{
  text-align: center;
}
.nodata{
  color: #e50e38;
  text-align: center;
  padding: 4rpx 10rpx;
  border:2rpx solid #e50e38;
  border-radius: 4rpx;
  font-size: 24rpx;
  margin-top: 300rpx;
}

my.js

// pages/my/my.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
      'tab':['active','',''],
      'showTab':[true,false,false],
      'list1':[],
      'list2': [],
      'list3': [],
      'price': '36.80',
      'type': "直接送礼"
  },
  selectTab:function(e){
    wx.showLoading({
      title: '加载中',
    })
    var idx = e.currentTarget.dataset.id;
    var _this =this;
    var _tmpArr = [];
    var _tmpShow = [];
    if(idx=="0"){
      _this.buyLists();
      _tmpArr = ['active','',''];
      _tmpShow = [true,false,false];
    }else if(idx=="1"){
      _this.getLists();
      _tmpArr = ['', 'active', ''];
      _tmpShow = [false, true, false];
    } else if (idx == "2"){
      _this.joinLists();
      _tmpArr = ['', '', 'active'];
      _tmpShow = [false, false, true];
    }
    this.setData({
      'tab': _tmpArr,
      'showTab':_tmpShow
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  buyLists:function(){
    var _this = this;
    wx.request({
      url: app.globalData.apiDomain + '/api/joinlist/buyList',//buyList joinList getList
      data: {
        'login_key': wx.getStorageSync('login_key')
      },
      method: "POST",
      header: {
        'content-type': 'application/json' // 默认值
      },
      success:function(res){
          wx.hideLoading();
          _this.setData({
            list1:res.data.data
          });
      },
      fail:function(){
          wx.hideLoading();
          wx.showToast({
            title: '网络异常，请稍后再试',
            duration:'2000',
            icon:'none'
          })
      }
    })
  },
  getLists:function(){
    var _this = this;
    wx.request({
      url: app.globalData.apiDomain + '/api/joinlist/getList',//buyList joinList getList
      data: {
        'login_key': wx.getStorageSync('login_key')
      },
      method: "POST",
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        wx.hideLoading();
        _this.setData({
          list2: res.data.data
        });
      },
      fail: function () {
        wx.hideLoading();
        wx.showToast({
          title: '网络异常，请稍后再试',
          duration: '2000',
          icon: 'none'
        })
      }
    })
  },
  joinLists: function () {
    var _this = this;
    wx.request({
      url: app.globalData.apiDomain + '/api/joinlist/joinList',//buyList joinList getList
      data: {
        'login_key': wx.getStorageSync('login_key')
      },
      method: "POST",
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        wx.hideLoading();
        _this.setData({
          list3: res.data.data
        });
      },
      fail: function () {
        wx.hideLoading();
        wx.showToast({
          title: '网络异常，请稍后再试',
          duration: '2000',
          icon: 'none'
        })
      }
    })
  },
  onLoad: function (options) {
      var _this = this;
      wx.showLoading({
        title: '加载中',
      })
      wx.checkSession({
        success:function(){//请求接口
          _this.buyLists();
        },
        fail:function(){//登录过期
          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.buyLists();
                  //更新登录态后请求列表接口
                }
              });
            }
          })
        }
      })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

服务端

1通过小程序请求不同接口，返回该用户对应的数据。

urls.py

from django.contrib import admin
from django.urls import path
from django.conf.urls import url
from api.views import product,user,order,payment,sharagift,sharerus,delivery,joinlist

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()),
    url(r'^api/payment/returnOrderData$', payment.returnOrderData.as_view()),
    url(r'^api/joinlist/joinList$', joinlist.joinList.as_view()),
    url(r'^api/joinlist/buyList$', joinlist.buyList.as_view()),
    url(r'^api/joinlist/getList$', joinlist.getList.as_view()),
]

joinlist.py