我的礼物记录
需求：用户在该页面可以在该页面查看自己的参与记录，购买记录，获奖记录。
小程序端
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