<view class="container"> <view class="status-box"> <view bindtap="statusTap" class="status-label {{index == currentType ? 'active' : ''}}" wx:for-items="{{statusType}}" wx:key="{{index}}" data-index="{{index}}"> {{item}} <view class="{{tabClass[index]}}"></view> </view> </view> <view class="no-order" hidden="{{orderList ? true : false}}"> <image src="/images/no-order.png" class="no-order-img"></image> <view class="text">暂无订单</view> </view> <view class="order-list" hidden="{{orderList ? false : true}}"> <view class="a-order" wx:for-items="{{orderList}}" wx:key="{{index}}"> <view class="order-date"> <view class="date-box">下单时间:{{item.dateAdd}}</view> <view class="status {{(item.status==-1 || item.status==4) ? '':'red'}}">{{item.statusStr}}</view> </view> <view class="goods-info" bindtap="orderDetail" data-id="{{item.id}}"> <view class="goods-des"> <view>订单号:{{item.orderNumber}} </view> <view wx:if="{{item.remark && item.remark != ''}}">备注: {{item.remark}}</view> </view> </view> <view > <scroll-view class="goods-img-container" scroll-x="true"> <view class="img-box" wx:for-items="{{goodsMap[item.id]}}" wx:key="{{index}}"> <image src="{{item.pic}}" class="goods-img"></image> </view> </scroll-view> </view> <view class="price-box"> <view class="total-price">合计:¥ {{item.amountReal}}</view> <view class="btn cancel-btn" hidden="{{item.status==0? fslse : true}}" bindtap="cancelOrderTap" data-id="{{item.id}}">取消订单</view> <view class="btn topay-btn" hidden="{{item.status==0? fslse : true}}" bindtap="toPayTap" data-id="{{item.id}}" data-money="{{item.amountReal}}">马上付款</view> </view> </view> </view> </view> |
.container{ width: 100%; background-color: #F2f2f2; } .status-box{ width:100%; height: 88rpx; line-height: 88rpx; display: flex; justify-content: space-between; align-items: center; background-color: #fff; } .status-box .status-label{ width: 150rpx; height: 100%; text-align: center; font-size:28rpx; color:#353535; box-sizing: border-box; position: relative; } .status-box .status-label.active{ color:#e64340; border-bottom: 6rpx solid #e64340; } .status-box .status-label .red-dot{ width: 16rpx; height: 16rpx; position: absolute; left: 116rpx; top:23rpx; background-color: #f43530; border-radius: 50%; } .no-order{ width: 100%; position: absolute; bottom: 0; top: 88rpx; left: 0; right: 0; text-align: center; padding-top: 203rpx; background-color: #F2f2f2; } .no-order-img{ width: 81rpx; height: 96rpx; margin-bottom: 31rpx; } .no-order .text{ font-size:28rpx; color:#999999; text-align: center } .order-list{ width: 100%; } .order-list .a-order{ width: 100%; background-color: #fff; margin-top: 20rpx; } .order-list .a-order .order-date{ padding: 0 30rpx; height: 88rpx; display: flex; justify-content: space-between; font-size:26rpx; color:#000000; align-items: center; } .order-list .a-order .order-date .red{ font-size:26rpx; color:#e64340; } .a-order .goods-info, .goods-img-container{ width: 720rpx; margin-left: 30rpx; border-top: 1rpx solid #eee; border-bottom: 1rpx solid #eee; padding: 30rpx 0; display: flex; align-items: center; } .goods-info .img-box{ width: 120rpx; height: 120rpx; overflow: hidden; margin-right: 30rpx; background-color: #f7f7f7; } .goods-info .img-box .goods-img, .goods-img-container .img-box .goods-img{ width: 120rpx; height: 120rpx; } .goods-info .goods-des{ width: 540rpx; height: 78rpx; line-height: 39rpx; font-size:26rpx; color:#000000; overflow: hidden; } .goods-img-container{ height: 180rpx; box-sizing: border-box; white-space: nowrap; } .goods-img-container .img-box{ width: 120rpx; height: 120rpx; overflow: hidden; margin-right: 20rpx; background-color: #f7f7f7; display: inline-block; } .order-list .a-order .price-box{ position: relative; width: 720rpx; height: 100rpx; margin-left: 30rpx; box-sizing: border-box; padding: 20rpx 30rpx 20rpx 0; display: flex; align-items: center; justify-content: space-between; font-size:26rpx; } .order-list .a-order .price-box .total-price{ font-size:26rpx; color:#e64340; } .a-order .price-box .btn{ width: 166rpx; height: 60rpx; box-sizing: border-box; text-align: center; line-height: 60rpx; border-radius: 6rpx; margin-left: 20rpx; } .a-order .price-box .cancel-btn{ border: 1rpx solid #ccc; position: absolute; right: 216rpx; top:20rpx; } .a-order .price-box .topay-btn{ border:1px solid #e64340; color: #e64340; } |
var wxpay = require('../../utils/pay.js') var app = getApp() Page({ data:{ statusType: ["待付款", "待发货", "待收货", "待评价", "已完成"], currentType:0, tabClass: ["", "", "", "", ""] }, statusTap:function(e){ var curType = e.currentTarget.dataset.index; this.data.currentType = curType this.setData({ currentType:curType }); this.onShow(); }, orderDetail : function (e) { var orderId = e.currentTarget.dataset.id; wx.navigateTo({ url: "/pages/order-details/index?id=" + orderId }) }, cancelOrderTap:function(e){ var that = this; var orderId = e.currentTarget.dataset.id; wx.showModal({ title: '确定要取消该订单吗?', content: '', success: function(res) { if (res.confirm) { wx.showLoading(); wx.request({ url: 'https://api.it120.cc/' + app.globalData.subDomain + '/order/close', data: { token: app.globalData.token, orderId: orderId }, success: (res) => { wx.hideLoading(); if (res.data.code == 0) { that.onShow(); } } }) } } }) }, toPayTap:function(e){ var that = this; var orderId = e.currentTarget.dataset.id; var money = e.currentTarget.dataset.money; wx.request({ url: 'https://api.it120.cc/' + app.globalData.subDomain + '/user/amount', data: { token: app.globalData.token }, success: function (res) { if (res.data.code == 0) { // res.data.data.balance money = money - res.data.data.balance; if (money <= 0) { // 直接使用余额支付 wx.request({ url: 'https://api.it120.cc/' + app.globalData.subDomain + '/order/pay', method:'POST', header: { 'content-type': 'application/x-www-form-urlencoded' }, data: { token: app.globalData.token, orderId: orderId }, success: function (res2) { wx.reLaunch({ url: "/pages/order-list/index" }); } }) } else { wxpay.wxpay(app, money, orderId, "/pages/order-list/index"); } } else { wx.showModal({ title: '错误', content: '无法获取用户资金信息', showCancel: false }) } } }) }, onLoad:function(options){ // 生命周期函数--监听页面加载 }, onReady:function(){ // 生命周期函数--监听页面初次渲染完成 }, getOrderStatistics : function () { var that = this; wx.request({ url: 'https://api.it120.cc/' + app.globalData.subDomain + '/order/statistics', data: { token: app.globalData.token }, success: (res) => { wx.hideLoading(); if (res.data.code == 0) { var tabClass = that.data.tabClass; if (res.data.data.count_id_no_pay > 0) { tabClass[0] = "red-dot" } else { tabClass[0] = "" } if (res.data.data.count_id_no_transfer > 0) { tabClass[1] = "red-dot" } else { tabClass[1] = "" } if (res.data.data.count_id_no_confirm > 0) { tabClass[2] = "red-dot" } else { tabClass[2] = "" } if (res.data.data.count_id_no_reputation > 0) { tabClass[3] = "red-dot" } else { tabClass[3] = "" } if (res.data.data.count_id_success > 0) { //tabClass[4] = "red-dot" } else { //tabClass[4] = "" } that.setData({ tabClass: tabClass, }); } } }) }, onShow:function(){ // 获取订单列表 wx.showLoading(); var that = this; var postData = { token: app.globalData.token }; postData.status = that.data.currentType; this.getOrderStatistics(); wx.request({ url: 'https://api.it120.cc/' + app.globalData.subDomain + '/order/list', data: postData, success: (res) => { wx.hideLoading(); if (res.data.code == 0) { that.setData({ orderList: res.data.data.orderList, logisticsMap : res.data.data.logisticsMap, goodsMap : res.data.data.goodsMap }); } else { this.setData({ orderList: null, logisticsMap: {}, goodsMap: {} }); } } }) }, onHide:function(){ // 生命周期函数--监听页面隐藏 }, onUnload:function(){ // 生命周期函数--监听页面卸载 }, onPullDownRefresh: function() { // 页面相关事件处理函数--监听用户下拉动作 }, onReachBottom: function() { // 页面上拉触底事件的处理函数 } }) |
模板简介:该模板名称为【微信小程序待付款收货订单列表页样式设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。