parent
92f206495f
commit
0d7b762949
@ -0,0 +1,396 @@ |
||||
<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"> |
||||
<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" @click="jumpDetails(row.id)"> |
||||
<view class="width70 flleft fotlt "> |
||||
<view class="font16 fontwig6 text1 fcor333"> |
||||
{{row.remarks}} |
||||
</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.payType == 1 || row.payType == 3"> |
||||
￥{{row.payPrice}} |
||||
</view> |
||||
<view class="font16 fontwig6 text1 fcor333 aliitem" style="justify-content: flex-end;" v-else> |
||||
<image style="width: 15px;height: 15px;" |
||||
src="../../static/img/jfx.png"> |
||||
</image>{{row.payPrice*100}} |
||||
</view> |
||||
<view class="fotrt font15 text1 fcor999 mart5">{{typeText[row.status]}}</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</template> |
||||
<script> |
||||
import { |
||||
getUserOrderListhuafei |
||||
} 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: { |
||||
1: '等待付款', |
||||
2: '订单已支付', |
||||
3: '订单已完成', |
||||
5: '订单已取消', |
||||
4: '订单已退款' |
||||
}, |
||||
// 退换货 |
||||
orderType: ['全部', '待支付', '已支付', '已完成', '已取消', '已退款'], |
||||
//订单列表 演示数据 |
||||
orderList: [], |
||||
list: [], |
||||
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.list = this.orderList[tbIndex]; |
||||
this.tabbarIndex = tbIndex; |
||||
this.typeId = tbIndex; |
||||
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}`; |
||||
} |
||||
}, |
||||
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() |
||||
} |
||||
}) |
||||
|
||||
|
||||
}, |
||||
showType(tbIndex) { |
||||
this.tabbarIndex = tbIndex; |
||||
this.pageNum = 1; |
||||
this.orderList = [] |
||||
this.isNoMoreData = false; |
||||
if (tbIndex == 0) { |
||||
this.typeId = ''; |
||||
} else { |
||||
this.typeId = tbIndex; |
||||
} |
||||
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> |
||||
Loading…
Reference in new issue