微信小程序开发交流qq群 581478349
承接微信小程序开发。扫码加微信。
正文：
效果图：
代码：
json代码：
{"enablePullDownRefresh": true,"backgroundColor": "#19ad19"}
js代码：
// pages/my_order/my_order.jsvar config = require('../../../config.js');var util = require('../../../utils/util.js');var app = getApp();var in_length = 0;Page({/*** 页面的初始数据*/data: {tab_two_click_item: 0,_data: [],},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {this.show_data(0, in_length);},/*** 页面下拉刷新的处理函数*/onPullDownRefresh() {in_length = 0;this.show_data(this.data.tab_two_click_item, in_length)},/*** 页面上拉触底事件的处理函数*/onReachBottom: function() {this.show_data(this.data.tab_two_click_item, in_length)},// 加载数据show_data: function(_item, _length) {var that = this;app.promise.then(resolve => {let data = {token: app.token,status: _item, //0 全部 1 成功 2 失败index: _length}var url = config.HTTP_URL + '/v1/order/list.do';util.request(url, 'post', data, '正在加载订单', function(res) {var _data = res.data.body;if (in_length == 0) {that.setData({_data: _data})in_length = _data.length;} else {let arr = [];let __data = that.data._data.concat(_data);if (that.data.tab_two_click_item == 0) {that.setData({_data: __data})in_length = __data.length;} else {for (let i = 0; i < __data.length; i++) {console.log(__data[i])if (__data[i].orderStatus == that.data.tab_two_click_item) {console.log('__data[i]', __data[i])arr = arr.concat(__data[i])}}in_length = arr.length;that.setData({_data: arr})}}console.log('in_length', in_length)})})},// 点击切换tabtab_two_click: function(e) {in_length = 0;this.setData({tab_two_click_item: e.target.id})this.show_data(e.target.id, in_length);},/*** 用户点击右上角分享*/onShareAppMessage: function() {}})
wxml代码
<!--pages/my_order/my_order.wxml--><view class='page_row'><view class='tab_two'><view bindtap='tab_two_click' id='0' class='tab_two_click_item {{tab_two_click_item==0?"tab_on":""}}'>全部</view></view><view class='tab_two'><view bindtap='tab_two_click' id='1' class='tab_two_click_item {{tab_two_click_item==1?"tab_on":""}}'>成功</view></view><view class='tab_two'><view bindtap='tab_two_click' id='2' class='tab_two_click_item {{tab_two_click_item==2?"tab_on":""}}'>失败</view></view></view><view class='order_list'><block wx:for='{{_data}}' wx:key='index'><view class='money'>{{item.productName}}<text>{{item.createTime}}</text></view><image wx:if='{{item.orderStatus==1}}' src='/images/change_version/stutas_succ.png'></image><image wx:if='{{item.orderStatus==0}}' src='/images/change_version/stutas_fail.png'></image><view class='detail'><text style='color: #d0d0d0;'>账号</text> {{item.number}}</view><view class='detail' style='margin-top: 20rpx;'><text style='color: #d0d0d0;'>金额</text> ￥<text style='font-size:60rpx;'>{{item.payFee}}</text></view><view class='division'></view><view class='page_row' style='width:100%;'><navigator url='order_query/order_query' wx:if='{{item.orderStatus==0}}'><button class='btn_kf btn_ts' style='margin-left: 30rpx;'>投诉</button></navigator><button class='btn_kf' wx:if='{{item.orderStatus==0}}'>联系客服</button><button class='btn' style='{{item.orderStatus==0?"left: 0rpx;":"left: 480rpx;"}}'>再次充值</button></view><view class='division2'></view></block></view>
wxss代码
/* pages/my_order/my_order.wxss */page{background: #F6F6F6;}.tab_two{background: #fff;font-weight: 600;width: 50%;text-align: center;height: 100rpx;line-height: 100rpx;padding-bottom: 10rpx;border-bottom: 1px solid #E8E8E8;position: relative;}.tab_two_click_item{width: 180rpx;position: relative;left: 50%;margin-left: -90rpx;}.tab_on{border-bottom: 10rpx solid #19ad19;}.order_list{background: #fff;width: 95%;position: relative;margin: 20rpx 20rpx 20rpx 20rpx;}.order_list .money{border-bottom: 1px solid #f2f2f2;padding: 20rpx 20rpx 20rpx 40rpx;}.order_list .money text{color: #666;font-size: 28rpx;float: right;line-height: 50rpx;margin-right: 20rpx;}.order_list .detail{margin-top: 50rpx;margin-left: 30rpx;font-size: 35rpx;}.order_list .detail text{margin-right: 30rpx;font-size: 35rpx;}.order_list image{width: 150rpx;height: 150rpx;border-radius: 50%;margin-top: 50rpx;margin-left: 480rpx;position: absolute}.division{width: 100%;height: 1px;background: #f2f2f2;margin-top: 70rpx;}.btn{background: #1AAD1A;color: white;border-radius: 10rpx;margin-top: 20rpx;width: 200rpx;height: 60rpx;font-size: 30rpx;line-height: 57rpx;position: relative;margin-left: 10rpx;}.btn_kf{background: #fff;margin-left: 10rpx;color: #19ad19;border-radius: 10rpx;margin-top: 20rpx;font-size: 30rpx;width: 200rpx;height: 60rpx;position: relative;left: 20rpx;line-height: 57rpx;border: 1px solid #19ad19;}.btn_ts{left: 10rpx;}.division2{width: 100%;height: 20rpx;background: #f2f2f2;margin-top: 20rpx;}
