<template> <view> <!-- 顶部导航 --> <view class="topTabBar" :style="{position:headerPosition,top:headerTop}"> <view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex)"> <view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid}}</view> </view> </view> <!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿,所以漂浮顶部选项卡使用page本身的滑动 --> <view class="order-list"> <view class="list"> <view class="onorder" v-if="orderList.length==0"> <image :src="imagewxUrl+imgadres"></image> </view> <view class="row" v-for="(row,index) in orderList" :key="index" @click="jumpDetails(row.id)"> <view class="width96 height40"> <view class="width50 flleft aliitem fotlt font16"> <image src="../../static/img/order1.png" style="width: 50rpx;height: 50rpx;"></image> 话费充值 </view> <view class="width50 flright fotrt fcor666 font15"> {{row.createTimed | formatDate('-')}} </view> </view> <view class="width96 line1 mart10"></view> <view class="width96 height60 mart10"> <view class="width70 flleft fotlt "> <view class="font16 fontwig6 text1 fcor333"> {{row.operatorName}} </view> <view class="font15 text1 fcor999 mart5"> 数量 : 1 </view> </view> <view class="width30 flright fotrt fcor666 font15 fotrt"> <view class="font16 fontwig6 text1 fcor333" v-if="row.payRealPrice"> ¥{{row.payRealPrice}} </view> <view class="font16 fontwig6 text1 fcor333" v-else> ¥0 </view> <view class="fotrt font15 text1 fcor999 mart5">{{typeText[row.payStatus]}}</view> </view> </view> <view class="width96 line1 mart10 marb5" v-if="row.payStatus == 101"> </view> <view class="btns" v-if="row.payStatus == 101"> <block> <view class="default" @tap.stop="cancelRechargeOrder(row.id)">取消订单</view> <view class="pay" @tap.stop="toPayment(row)">付款</view> </block> </view> </view> </view> </view> </view> </template> <script> import { getUserOrderListhuafei, cancelRechargeOrder } from '../../Utils/Api.js'; let app = getApp() export default { data() { return { headerPosition: "fixed", imagewxUrl: app.globalData.imageWxImg, imgadres: 'noorder.png', imgadres1: 'dhf.png', headerTop: "0px", typeText: { 101: '等待付款', 102: '订单已支付', 100: '订单已完成', 104: '订单已取消', 105: '订单已退款' }, // 退换货 orderType: ['全部', '待支付', '已支付', '已完成', '已取消', '已退款'], //订单列表 演示数据 orderList: [], tabbarIndex: 0, pageNum: 1, pageSize: 10, isNoMoreData: false, loadingText: '', typeId: '', imageUrl: app.globalData.imgUrl, reFresh: "" } }, onLoad(option) { // #ifdef H5 this.headerTop = '44px'; // #endif let tbIndex = parseInt(option.tbIndex) + 1; this.tabbarIndex = tbIndex; if (tbIndex == 0) { this.typeId = ''; } if (tbIndex == 1) { this.typeId = 101; } if (tbIndex == 2) { this.typeId = 102; } if (tbIndex == 3) { this.typeId = 100; } if (tbIndex == 4) { this.typeId = 104; } if (tbIndex == 5) { this.typeId = 105; } this.getUserOrderListhuafei(); }, onPageScroll(e) { return; //兼容iOS端下拉时顶部漂移 this.headerPosition = e.scrollTop >= 0 ? "fixed" : "absolute"; }, onReachBottom() { this.getUserOrderListhuafei(); }, filters: { toFixed: function(x) { return parseFloat(x).toFixed(2); }, //过滤器 用于格式化时间 formatDate: function(value, spe = '/') { let data = new Date(value); let year = data.getFullYear(); let month = data.getMonth() + 1; let day = data.getDate(); let h = data.getHours(); let mm = data.getMinutes(); let s = data.getSeconds(); month = month >= 10 ? month : "0" + month; day = day >= 10 ? day : "0" + day; h = h >= 10 ? h : "0" + h; mm = mm >= 10 ? mm : "0" + mm; s = s >= 10 ? s : "0" + s; return `${year}${spe}${month}${spe}${day} ${h}:${mm}:${s}`; } }, watch: { //监听reFresh,如果有修改就执行监听器 reFresh: function() { this.tabbarIndex = 0; this.typeId = ''; this.pageNum = 1; this.orderList = [] this.isNoMoreData = false; this.getUserOrderListhuafei(); } }, methods: { //查询订单列表 getUserOrderListhuafei() { uni.showLoading({ title: '加载中...' }) if (this.isNoMoreData) { uni.hideLoading() return false; } let statusId = this.typeId; let pagenum = this.pageNum; let params = { status: statusId, pageNum: this.pageNum, pageSize: this.pageSize } getUserOrderListhuafei(params).then(res => { if (res.return_code == '000000' && res.return_data.list != '') { uni.hideLoading(); this.isNoMoreData = res.return_data.list.length == this.pageSize ? false : true; if (res.return_data.total == (this.pageNum * this.pageSize)) { this.isNoMoreData = true; } this.orderList = this.orderList.concat(res.return_data.list); this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum; } else { this.orderList = []; uni.hideLoading() } }) }, //跳转详情 jumpDetails(e) { uni.navigateTo({ url: '../rechargeDetails/rechargeDetails?id=' + e }) }, //取消订单 cancelRechargeOrder(row) { let that = this; uni.showModal({ title: '取消订单', content: '确定取消此订单?', success: (res) => { if (res.confirm) { uni.showLoading({ title: '加载中...' }) let params = { orderId: row, } cancelRechargeOrder(params).then(res => { if (res.return_code == '000000') { uni.hideLoading(); uni.showToast({ title: res.return_data, icon: 'none', duration: 2000 }) this.pageNum = 1; this.orderList = [] this.isNoMoreData = false; that.getUserOrderListhuafei(); } else { uni.showToast({ title: res.return_msg, icon: 'none', duration: 2000 }) uni.hideLoading() } }) } else if (res.cancel) { console.log('用户点击取消'); } } }); }, //去支付 toPayment(row) { uni.redirectTo({ url: '../recharge-pay/recharge-pay?goodsId=' + row.goodsId + '&payPrice=' + row.payRealPrice+'&orderId='+row.id }) }, showType(tbIndex) { this.tabbarIndex = tbIndex; this.pageNum = 1; this.orderList = [] this.isNoMoreData = false; if (tbIndex == 0) { this.typeId = ''; } if (tbIndex == 1) { this.typeId = 101; } if (tbIndex == 2) { this.typeId = 102; } if (tbIndex == 3) { this.typeId = 100; } if (tbIndex == 4) { this.typeId = 104; } if (tbIndex == 5) { this.typeId = 105; } this.getUserOrderListhuafei(); }, } } </script> <style lang="scss"> page { background-color: #f3f3f3; } .zspec { font-size: 22rpx; background-color: #0083f5; color: #FFFFFF; height: 40rpx; display: -webkit-box; display: -webkit-flex; display: flex; width: 44px; -webkit-box-align: center; -webkit-align-items: center; align-items: center; padding: 0 15rpx; border-radius: 4px; margin-bottom: 10px; margin-left: 5px; } .loading-text { width: 100%; display: flex; justify-content: center; align-items: center; height: 60upx; color: #979797; font-size: 24upx; } .topTabBar { width: 100%; position: fixed; top: 0; z-index: 10; background-color: #f8f8f8; height: 80upx; display: flex; justify-content: space-around; .grid { width: 20%; height: 80upx; display: flex; justify-content: center; align-items: center; color: #444; font-size: 28upx; .text { height: 76upx; display: flex; align-items: center; &.on { color: #0083f5; border-bottom: solid 4upx #0083f5; } } } } .order-list { margin-top: 80upx; padding-top: 20upx; width: 100%; .list { width: 94%; margin: 0 auto; .onorder { width: 100%; height: 50vw; display: flex; justify-content: center; align-content: center; flex-wrap: wrap; image { width: 70vw; margin-top: 150px; } .text { width: 100%; height: 60upx; font-size: 28upx; color: #444; display: flex; justify-content: center; align-items: center; } } .row { width: calc(100% - 40upx); padding: 10upx 20upx; border-radius: 10upx; background-color: #fff; margin-bottom: 20upx; .type { font-size: 26upx; color: #0083f5; height: 50upx; display: flex; align-items: center; } .order-info { width: 100%; display: flex; .left { flex-shrink: 0; width: 25vw; height: 25vw; image { width: 25vw; height: 25vw; border-radius: 10upx; } } .right { width: 100%; margin-left: 10upx; position: relative; .name { width: 100%; font-size: 18px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .spec { color: #a7a7a7; font-size: 14px; } .price-number { width: 100%; font-size: 15px; display: flex; .price { font-size: 14px; margin-right: 5upx; } } } } .detail { display: flex; justify-content: flex-end; align-items: flex-end; height: 60upx; font-size: 26upx; .sum { padding: 0 8upx; display: flex; align-items: flex-end; .price { font-size: 30upx; } } } .btns { height: 80upx; display: flex; align-items: center; justify-content: flex-end; view { min-width: 120upx; height: 70rpx; padding: 0 20upx; border-radius: 50upx; display: flex; justify-content: center; align-items: center; font-size: 28upx; margin-left: 20upx; } .default { border: solid 1upx #ccc; color: #666; } .pay { background-color: #0083f5; color: #FFFFFF; } } } } } </style>