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