<!--pages/user/dingdan.wxml--> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" data-otype="pay" bindtap="swichNav">待付款</view> <view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" data-otype="deliver" bindtap="swichNav">待发货</view> <view class="swiper-tab-list {{currentTab==2 ? 'on' : ''}}" data-current="2" data-otype="receive" bindtap="swichNav">待收货</view> <view class="swiper-tab-list {{currentTab==3 ? 'on' : ''}}" data-current="3" data-otype="finish" bindtap="swichNav">已完成</view> <view class="swiper-tab-list {{currentTab==4 ? 'on' : ''}}" data-current="4" bindtap="swichNav">退款/售后</view> </view> <view class="c_t60"></view> <swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight}}px" bindchange="bindChange"> <!-- 待付款 --> <swiper-item> <view class="search_no" wx:if="{{!orderList0.length}}"> <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view> <text>没有可用订单/(ㄒoㄒ)/~~</text> </view> <view class="shop df" wx:for="{{orderList0}}"> <image class="sh_slt" src="{{item.photo_x}}"></image> <view class="df_1"> <view class="sp_text"> <navigator url="../index/detail?productId={{item.pid}}" hover-class="changestyle"> <view class="sp_tit ovh1">{{item.name}}</view> </navigator> <view class="sp_neb">单价:¥ {{item.price_yh}} 数量:×{{item.product_num}} 产品:×{{item.pro_count}}</view> <view class="sp_jg">¥:{{item.price}}</view> <view class="font_12 red fl_r" bindtap="payOrderByWechat" data-orderid="{{item.id}}" data-ordersn="{{item.order_sn}}" wx:if="{{item.type=='weixin'}}">微信支付</view> <!--<navigator class="font_12 red fl_r" url="../order/downline?orderId={{item.id}}" wx:if="{{item.PayType=='cash'}}">线下支付</navigator>--> <view class="font_12 red fl_r mr_5" bindtap="removeOrder" data-order-id="{{item.id}}">取消订单</view> <navigator url="../order/detail?orderId={{item.id}}" class="font_12 red fl_r mr_5">订单详情</navigator> </view> </view> </view> <view class="clear mt10" bindtap="getMore" wx:if="{{orderList0.length>0}}">点击查看更多</view> </swiper-item> <!-- 待发货 --> <swiper-item> <view class="search_no" wx:if="{{!orderList1.length}}"> <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view> <text>没有可用订单/(ㄒoㄒ)/~~</text> </view> <view class="shop df" wx:for="{{orderList1}}"> <image class="sh_slt" src="{{item.photo_x}}"></image> <view class="df_1"> <view class="sp_text"> <navigator url="../index/detail?productId={{item.pid}}" hover-class="changestyle"> <view class="sp_tit ovh1">{{item.name}}</view> </navigator> <view class="sp_neb">单价:¥ {{item.price_yh}} 数量:×{{item.product_num}} 产品:×{{item.pro_count}}</view> <view class="sp_jg">¥:{{item.price}}</view> <navigator class="font_12 red fl_r" url="tuihuo?orderId={{item.id}}">申请退款</navigator> <navigator url="../order/detail?orderId={{item.id}}" class="font_12 red fl_r mr_5">订单详情</navigator> </view> </view> </view> <view class="clear mt10" bindtap="getMore" wx:if="{{orderList1.length>0}}">点击查看更多</view> </swiper-item> <!-- 待收货 --> <swiper-item> <view class="search_no" wx:if="{{!orderList2.length}}"> <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view> <text>没有可用订单/(ㄒoㄒ)/~~</text> </view> <view class="shop df" wx:for="{{orderList2}}"> <image class="sh_slt" src="{{item.photo_x}}"></image> <view class="df_1"> <view class="sp_text"> <navigator url="../index/detail?productId={{item.pid}}" hover-class="changestyle"> <view class="sp_tit ovh1">{{item.name}}</view> </navigator> <view class="sp_neb">单价:¥ {{item.price_yh}} 数量:×{{item.product_num}} 产品:×{{item.pro_count}}</view> <view class="sp_jg">¥:{{item.price}}</view> <navigator class="font_12 red fl_r" url="tuihuo?orderId={{item.id}}">申请退款</navigator> <view class="font_12 red fl_r mr_5" bindtap="recOrder" data-order-id="{{item.id}}">确认收货</view> <navigator url="../order/detail?orderId={{item.id}}" class="font_12 red fl_r mr_5">订单详情</navigator> </view> </view> </view> <view class="clear mt10" bindtap="getMore" wx:if="{{orderList2.length>0}}">点击查看更多</view> </swiper-item> <!-- 已完成--> <swiper-item> <view class="search_no" wx:if="{{!orderList3.length}}"> <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view> <text>没有可用订单/(ㄒoㄒ)/~~</text> </view> <view class="shop df" wx:for="{{orderList3}}"> <image class="sh_slt" src="{{item.photo_x}}"></image> <view class="df_1"> <view class="sp_text"> <navigator url="../index/detail?productId={{item.pid}}" hover-class="changestyle"> <view class="sp_tit ovh1">{{item.name}}</view> </navigator> <view class="sp_neb">单价:¥ {{item.price_yh}} 数量:×{{item.product_num}} 产品:×{{item.pro_count}}</view> <view class="sp_jg">¥:{{item.price}}</view> <navigator url="../order/detail?orderId={{item.id}}" class="font_12 red fl_r mr_5">订单详情</navigator> </view> </view> </view> <view class="clear mt10" bindtap="getMore" wx:if="{{orderList3.length>0}}">点击查看更多</view> </swiper-item> <!-- 退款/售后 --> <swiper-item> <view class="search_no" wx:if="{{!orderList4.length}}"> <view class="font_14"><image class="scimg" src="/images/search_no.png"></image></view> <text>没有可用订单/(ㄒoㄒ)/~~</text> </view> <view class="shop df" wx:for="{{orderList4}}"> <image class="sh_slt" src="{{item.photo_x}}"></image> <view class="df_1"> <view class="sp_text"> <navigator url="../index/detail?productId={{item.pid}}" hover-class="changestyle"> <view class="sp_tit ovh1">{{item.name}}</view> </navigator> <view class="sp_neb">单价:¥ {{item.price_yh}} 数量:×{{item.product_num}} 产品:×{{item.pro_count}}</view> <view class="sp_jg">¥:{{item.price}}</view> <view class="font_12 red fl_r">{{item.desc}}</view> <!--<navigator url="../order/detail?orderId={{item.id}}" class="font_12 red fl_r mr_5">订单详情</navigator>--> </view> </view> </view> <view class="clear mt10" bindtap="getMore2" wx:if="{{orderList4.length>0}}">点击查看更多</view> </swiper-item> </swiper> |
/* pages/user/dingdan.wxss */ .swiper-tab{ width: 100%; border-bottom: 1px solid #eee; text-align: center; line-height: 80rpx; background: #fff; position: fixed; top: 0; z-index: 999; } .swiper-tab-list{ font-size: 12px; display: inline-block; width: 20%; color: #666; } .on{ color: #dd2727; border-bottom: 5rpx solid #dd2727; } .swiper-box{ display: block; height: 100%; width: 100%; overflow: hidden; } .clearbutton{ background: #fff; display: inline-block; margin:3% 3% 2% 3%; color: #dd2727; font-size: 14px; width: 94%; } .shop{ background: #fff; padding: 4%; margin-bottom: 10px; } .shop checkbox{ margin-top: 27px; } .sh_slt{ width: 80px; height: 80px; overflow: hidden; border-radius: 5px; margin-right: 4%; float: left; } .sp_text{ float: left; line-height: 20px; width: 100%; text-align: left; } .sp_tit{ width: 100%; overflow: hidden; font-size: 14px; } .sp_neb{ width: 100%; overflow: hidden; font-size: 12px; color: #999; } .sp_jg{ width: 100%; overflow: hidden; font-size: 14px; color: #fc0628; } .dle{ color: #999; font-size: 12px; float: right; } .dle image{ width: 18px; height: 18px; vertical-align: sub; } .jk_bottom{ position: fixed; bottom: 0; background: #fff; width: 100%; display: inline-flex; border-bottom: 1px solid #eee; font-size: 14px; color: #999; } .jk_bottom checkbox{ margin: 4% 0 4% 4%; } .jk_bottom .heji{ margin-top: 5.5%; width: 30%; text-align: right; } .jk_bottom .all{ margin-top: 5.5%; padding-left: 2%; } .jk_bottom .js_button{ background: #dd2727; float: right; color: #fff; font-size: 16px; text-align: center; width: 40%; position: absolute; right: 0; line-height: 50px; } .c_t60{ clear: both; height: 1px; padding-top: 48px; } .blue{ color: #42b1ff; } .mr_5{ margin-right: 5px; } .mt10{ margin: 0 auto; text-align: center; height: 70rpx; width: 450rpx; line-height: 70rpx; border-radius:10rpx; border: 1px solid #999; font-size: 30rpx; margin-top: 30rpx; } |
// pages/user/dingdan.js //index.js //获取应用实例 var app = getApp(); var common = require("../../utils/common.js"); Page({ data: { winWidth: 0, winHeight: 900, // tab切换 currentTab: 0, isStatus:'pay',//10待付款,20待发货,30待收货 40、50已完成 page:2, refundpage:2, orderList0:[], orderList1:[], orderList2:[], orderList3:[], orderList4:[], orderId:0 }, onLoad: function(options) { this.initSystemInfo(); this.setData({ currentTab: parseInt(options.currentTab), isStatus:options.otype }); if(this.data.currentTab == 4){ this.loadReturnOrderList(); }else{ this.loadOrderList(); } }, getOrderStatus:function(){ return this.data.currentTab == 0 ? 1 : this.data.currentTab == 2 ?2 :this.data.currentTab == 3 ? 3:0; }, //取消订单 removeOrder:function(e){ var that = this; var orderId = e.currentTarget.dataset.orderId; wx.showModal({ title: '提示', content: '你确定要取消订单吗?', success: function(res) { res.confirm && wx.request({ url: app.d.ceshiUrl + '/Api/Order/orders_edit', method:'post', data: { id: orderId, type:'cancel', }, header: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function (res) { //--init data var status = res.data.status; if(status == 1){ wx.showToast({ title: '操作成功!', duration: 2000 }); that.loadOrderList(); }else{ wx.showToast({ title: res.data.err, duration: 2000 }); } }, fail: function () { // fail wx.showToast({ title: '网络异常!', duration: 2000 }); } }); } }); }, //确认收货 recOrder:function(e){ var that = this; var orderId = e.currentTarget.dataset.orderId; wx.showModal({ title: '提示', content: '你确定已收到宝贝吗?', success: function(res) { res.confirm && wx.request({ url: app.d.ceshiUrl + '/Api/Order/orders_edit', method:'post', data: { id: orderId, type:'receive', }, header: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function (res) { //--init data var status = res.data.status; if(status == 1){ wx.showToast({ title: '操作成功!', duration: 2000 }); that.loadOrderList(); }else{ wx.showToast({ title: res.data.err, duration: 2000 }); } }, fail: function () { // fail wx.showToast({ title: '网络异常!', duration: 2000 }); } }); } }); }, loadOrderList: function(){ var that = this; wx.request({ url: app.d.ceshiUrl + '/Api/Order/index', method:'post', data: { uid:app.d.userId, order_type:that.data.isStatus, }, header: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function (res) { //--init data var status = res.data.status; var list = res.data.ord; switch(that.data.currentTab){ case 0: that.setData({ orderList0: list, winHeight: 900, }); break; case 1: that.setData({ orderList1: list, winHeight: 900, }); break; case 2: that.setData({ orderList2: list, winHeight: 900, }); break; case 3: that.setData({ orderList3: list, winHeight: 900, }); break; case 4: that.setData({ orderList4: list, winHeight: 900, }); break; } }, fail: function () { // fail wx.showToast({ title: '网络异常!', duration: 2000 }); } }); }, loadReturnOrderList:function(){ var that = this; wx.request({ url: app.d.ceshiUrl + '/Api/Order/order_refund', method:'post', data: { uid:app.d.userId, }, header: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function (res) { //--init data var data = res.data.ord; var status = res.data.status; if(status==1){ that.setData({ orderList4: data, winHeight: 900, }); }else{ wx.showToast({ title: res.data.err, duration: 2000 }); } }, fail: function () { // fail wx.showToast({ title: '网络异常!', duration: 2000 }); } }); }, //获取更多 getMore: function (e) { var that = this; var winHeight = that.data.winHeight; var page = that.data.page; wx.request({ url: app.d.ceshiUrl + '/Api/Order/get_more', method: 'post', data: { uid: app.d.userId, order_type: that.data.isStatus, page: that.data.page, }, header: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function (res) { var list = res.data.ord; if (list == '') { wx.showToast({ title: '没有更多数据!', duration: 2000 }); return false; } var len = (list.length)*120; var status = res.data.status; switch (that.data.currentTab) { case 0: that.setData({ orderList0: that.data.orderList0.concat(list), winHeight: winHeight + len, }); break; case 1: that.setData({ orderList1: that.data.orderList1.concat(list), winHeight: winHeight + len, }); break; case 2: that.setData({ orderList2: that.data.orderList2.concat(list), winHeight: winHeight + len, }); break; case 3: that.setData({ orderList3: that.data.orderList3.concat(list), winHeight: winHeight + len, }); break; case 4: that.setData({ orderList4: that.data.orderList4.concat(list), winHeight: winHeight + len, }); break; } //that.initProductData(data); that.setData({ page: page + 1, }); //endInitData }, fail: function (e) { wx.showToast({ title: '网络异常!', duration: 2000 }); } }) }, //退款获取更多 getMore2: function (e) { var that = this; var winHeight = that.data.winHeight; var page = that.data.refundpage; wx.request({ url: app.d.ceshiUrl + '/Api/Order/get_refund_more', method: 'post', data: { uid: app.d.userId, page: that.data.refundpage, }, header: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function (res) { var list = res.data.ord; if (list == '') { wx.showToast({ title: '没有更多数据!', duration: 2000 }); return false; } var len = (list.length) * 120; //that.initProductData(data); that.setData({ orderList4: that.data.orderList4.concat(list), refundpage: page + 1, winHeight: winHeight + len, }); //endInitData }, fail: function (e) { wx.showToast({ title: '网络异常!', duration: 2000 }); } }) }, // returnProduct:function(){ // }, initSystemInfo:function(){ var that = this; wx.getSystemInfo( { success: function( res ) { that.setData( { winWidth: res.windowWidth, winHeight: res.windowHeight }); } }); }, bindChange: function(e) { var that = this; that.setData( { currentTab: e.detail.current }); }, swichNav: function(e) { var that = this; if( that.data.currentTab === e.target.dataset.current ) { return false; } else { var current = e.target.dataset.current; that.setData({ currentTab: parseInt(current), isStatus: e.target.dataset.otype, page:2 }); //没有数据就进行加载 switch(that.data.currentTab){ case 0: !that.data.orderList0.length && that.loadOrderList(); break; case 1: !that.data.orderList1.length && that.loadOrderList(); break; case 2: !that.data.orderList2.length && that.loadOrderList(); break; case 3: !that.data.orderList3.length && that.loadOrderList(); break; case 4: that.data.orderList4.length = 0; that.loadReturnOrderList(); break; } }; }, /** * 微信支付订单 */ // payOrderByWechat: function(event){ // var orderId = event.currentTarget.dataset.orderId; // this.prePayWechatOrder(orderId); // var successCallback = function(response){ // console.log(response); // } // common.doWechatPay("prepayId", successCallback); // }, payOrderByWechat: function (e) { var that = this; var order_id = e.currentTarget.dataset.orderid; var order_sn = e.currentTarget.dataset.ordersn; if (!order_sn || !order_id){ wx.showToast({ title: "订单异常!", duration: 2000, }); return false; } that.setData({ orderId: order_id }); wx.request({ url: app.d.ceshiUrl + '/Api/Pay/dowxpay', data: { order_id: order_id, order_sn: order_sn, uid: app.d.userId, }, method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT header: { 'Content-Type': 'application/x-www-form-urlencoded' }, // 设置请求的 header success: function (res) { if (res.data.status == 1) { var order = res.data.success; wx.requestPayment({ timeStamp: order.timeStamp, nonceStr: order.nonceStr, package: order.package, signType: 'MD5', paySign: order.paySign, success: function (res) { wx.showToast({ title: "支付成功!", duration: 2000, }); setTimeout(function () { wx.navigateTo({ url: '../user/dingdan?currentTab=1&otype=deliver', }); }, 2500); }, fail: function (res) { wx.showToast({ title: res, duration: 3000 }) } }) } else { wx.showToast({ title: res.data.err, duration: 2000 }); } }, fail: function (e) { // fail wx.showToast({ title: '网络异常!', duration: 2000 }); } }) }, onShow: function () { if (this.data.currentTab == 4) { this.loadReturnOrderList(); } else { this.loadOrderList(); } }, }) |
模板简介:该模板名称为【微信小程序红色个人订单状态导航样式设计制作开发教程】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。