You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
489 lines
11 KiB
489 lines
11 KiB
<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">
|
|
￥{{row.payRealPrice}}
|
|
</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>
|
|
|