345 lines
7.8 KiB
Vue
345 lines
7.8 KiB
Vue
<template>
|
|
<view class="order">
|
|
|
|
<!--导航栏-->
|
|
<view class="navbar">
|
|
<view
|
|
v-for="(item, index) in navList"
|
|
:key="index"
|
|
class="nav-item"
|
|
:class="tabCurrentIndex === index ? `text-${themeColor.name} current` : ''"
|
|
@tap="tabClick(index)"
|
|
>
|
|
{{ item.text }}
|
|
</view>
|
|
</view>
|
|
<!--订单列表-->
|
|
<swiper
|
|
class="swiper-box"
|
|
duration="300"
|
|
@change="changeTab"
|
|
>
|
|
<swiper-item
|
|
class="tab-content"
|
|
v-for="(tabItem, tabIndex) in navList"
|
|
:key="tabIndex"
|
|
>
|
|
<scroll-view
|
|
class="list-scroll-content"
|
|
scroll-y
|
|
@scrolltolower="getMoreOrderList"
|
|
>
|
|
<view
|
|
v-for="(item, index) in orderList"
|
|
:key="index"
|
|
class="rf-order-item"
|
|
>
|
|
<view class="i-top b-b">
|
|
<text class="time in1line">{{ item.code }}</text>
|
|
<text class="time">{{item.createTime }}</text>
|
|
|
|
</view>
|
|
|
|
<view
|
|
class="goods-box-single"
|
|
@tap.stop="
|
|
navTo(`/pages/product/jifenProduct?id=${item.skuId}`)
|
|
"
|
|
>
|
|
<image
|
|
class="goods-img"
|
|
:src="item.skuDetail.pic"
|
|
mode="aspectFill"
|
|
></image>
|
|
<view class="right">
|
|
<text class="title in2line">{{ item.skuDetail.name }}</text>
|
|
<text class="point" :class="'text-' + themeColor.name">{{ item.point || singleSkuText }}积分 * {{ item.num }}</text>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="price-box">
|
|
实付积分
|
|
<text class="price" :class="'text-'+themeColor.name">{{ item.point }}积分</text>
|
|
</view>
|
|
<view class="action-box b-t">
|
|
|
|
|
|
<button
|
|
class="action-btn"
|
|
:class="'bg-' + themeColor.name"
|
|
@tap="handleOrderOperation(item, 'detail')"
|
|
>
|
|
积分详情
|
|
</button>
|
|
|
|
<button
|
|
class="action-btn"
|
|
:class="'bg-' + themeColor.name"
|
|
v-if="item.status == 1"
|
|
@tap="handleOrderOperation(item, 'delivery')"
|
|
>
|
|
确认收货
|
|
</button>
|
|
</view>
|
|
</view>
|
|
<rf-load-more
|
|
:status="loadingType"
|
|
v-if="orderList.length > 0"
|
|
></rf-load-more>
|
|
<rf-empty
|
|
:list="guessYouLikeList"
|
|
info="暂无订单"
|
|
v-if="orderList.length === 0 && !loading"
|
|
></rf-empty>
|
|
</scroll-view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<rfLoading isFullScreen :active="loading"></rfLoading>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
/**
|
|
* @des 订单管理
|
|
*
|
|
* @author 237524947@qq.com
|
|
* @date 2020-01-15 11:54
|
|
* @copyright 2019
|
|
*/
|
|
import rfLoadMore from '@/components/rf-load-more/rf-load-more';
|
|
import moment from '@/common/moment';
|
|
import { orderDelete, querypointmallorderlist, confirmreceiptpointmallorder } from '@/api/userInfo';
|
|
import rfCountDown from '@/components/rf-count-down';
|
|
import { orderClose, guessYouLikeList } from '@/api/product';
|
|
import mConstData from '@/config/constData.config';
|
|
export default {
|
|
components: {
|
|
rfLoadMore,
|
|
rfCountDown
|
|
},
|
|
data() {
|
|
return {
|
|
tabCurrentIndex: null,
|
|
loadingType: 'more',
|
|
navList: this.$mConstDataConfig.orderPointNavList,
|
|
moneySymbol: this.moneySymbol,
|
|
orderList: [],
|
|
pageNum : 0,
|
|
loading: true,
|
|
isRefreshing: true,
|
|
guessYouLikeList: [],
|
|
singleSkuText: this.singleSkuText
|
|
};
|
|
},
|
|
computed: {
|
|
// 计算倒计时时间
|
|
second() {
|
|
return function(val) {
|
|
return Math.floor(val - new Date() / 1000);
|
|
};
|
|
}
|
|
},
|
|
filters: {
|
|
// 时间格式化
|
|
time(val) {
|
|
return val;
|
|
//return moment(val * 1000).format('YYYY-MM-DD HH:mm:ss');
|
|
},
|
|
// 状态显示格式化
|
|
orderStatusFilter(orderStatus) {
|
|
let state;
|
|
mConstData.orderPointNavList.forEach(orderItem => {
|
|
if (orderItem.key === parseInt(orderStatus, 10)) {
|
|
state = orderItem.value;
|
|
}
|
|
});
|
|
return state;
|
|
}
|
|
},
|
|
onShow() {
|
|
this.initData();
|
|
},
|
|
onLoad(options) {
|
|
/**
|
|
* 修复app端点击除全部订单外的按钮进入时不加载数据的问题
|
|
* 替换onLoad下代码即可
|
|
*/
|
|
this.tabCurrentIndex = parseInt(options.state, 10) + 1;
|
|
},
|
|
// 下拉刷新
|
|
onPullDownRefresh() {
|
|
this.pageNum = 0;
|
|
this.orderList.length = 0;
|
|
this.getOrderList('refresh');
|
|
},
|
|
// 加载更多
|
|
onReachBottom() {
|
|
if (this.loadingType === 'nomore' || this.orderList.length === 0) return;
|
|
this.pageNum++
|
|
this.getOrderList();
|
|
},
|
|
methods: {
|
|
// 倒计时关闭订单
|
|
timeUp(item) {
|
|
if (this.isRefreshing) {
|
|
this.isRefreshing = false;
|
|
this.handleOrderClose(item.id);
|
|
}
|
|
},
|
|
// 订单操作
|
|
handleOrderOperation(item, type) {
|
|
switch (type) {
|
|
case 'detail': // 订单详情
|
|
this.navTo(`/pages/order/pointDetail?id=${item.id}`);
|
|
break;
|
|
case 'delivery': // 确认收货
|
|
this.handleOrderTakeDelivery(item.id);
|
|
break;
|
|
}
|
|
},
|
|
// 跳转页面
|
|
navTo(route) {
|
|
this.$mRouter.push({ route });
|
|
},
|
|
// 关闭订单
|
|
async handleOrderClose(id) {
|
|
await this.$http
|
|
.get(`${orderClose}`, {
|
|
id
|
|
})
|
|
.then(() => {
|
|
this.isRefreshing = true;
|
|
this.$mHelper.toast('订单取消成功');
|
|
setTimeout(() => {
|
|
this.loading = true;
|
|
this.pageNum = 0;
|
|
this.orderList.length = 0;
|
|
this.getOrderList();
|
|
}, 500);
|
|
});
|
|
},
|
|
// 删除已关闭订单
|
|
async handleOrderDelete(id) {
|
|
await this.$http.delete(`${orderDelete}?id=${id}`, {}).then(() => {
|
|
this.$mHelper.toast('订单删除成功');
|
|
setTimeout(() => {
|
|
this.pageNum = 0;
|
|
this.orderList.length = 0;
|
|
this.getOrderList();
|
|
}, 500);
|
|
});
|
|
},
|
|
// 确认收货
|
|
async handleOrderTakeDelivery(id) {
|
|
await this.$http
|
|
.get(`${confirmreceiptpointmallorder}`, {
|
|
id
|
|
})
|
|
.then(() => {
|
|
this.pageNum = 0;
|
|
this.orderList.length = 0;
|
|
this.getOrderList();
|
|
});
|
|
},
|
|
// 数据初始化
|
|
async initData() {
|
|
this.pageNum = 0;
|
|
this.orderList.length = 0;
|
|
await this.getOrderList();
|
|
},
|
|
// 获取订单列表
|
|
async getOrderList(type) {
|
|
let navItem = this.navList[this.tabCurrentIndex];
|
|
const params = {};
|
|
|
|
if(navItem.state && navItem.state==6){
|
|
params.status=6;
|
|
}else{
|
|
if (navItem.state || navItem.state === 0) {
|
|
params.status = navItem.state;
|
|
}
|
|
}
|
|
|
|
params.pageNum = this.pageNum ;
|
|
await this.$http
|
|
.get(`${querypointmallorderlist}`, params)
|
|
.then(async r => {
|
|
if (type === 'refresh') {
|
|
uni.stopPullDownRefresh();
|
|
}
|
|
this.loadingType = r.list.length === 10 ? 'more' : 'nomore';
|
|
this.orderList = [...this.orderList, ...r.list];
|
|
if (this.orderList.length === 0) {
|
|
await this.getGuessYouLikeList();
|
|
}
|
|
this.loading = false;
|
|
})
|
|
.catch(() => {
|
|
this.loading = false;
|
|
if (type === 'refresh') {
|
|
uni.stopPullDownRefresh();
|
|
}
|
|
});
|
|
},
|
|
async getGuessYouLikeList() {
|
|
await this.$http.get(`${guessYouLikeList}`,{num:6}).then(r => {
|
|
this.guessYouLikeList = r.list;
|
|
});
|
|
},
|
|
// 监听swiper切换
|
|
changeTab(e) {
|
|
this.pageNum = 0;
|
|
this.orderList.length = 0;
|
|
this.tabCurrentIndex = e.target.current;
|
|
this.loading = true;
|
|
this.getOrderList();
|
|
},
|
|
// 顶部tab点击
|
|
tabClick(index) {
|
|
this.pageNum = 0;
|
|
this.orderList.length = 0;
|
|
this.tabCurrentIndex = index;
|
|
this.loading = true;
|
|
this.getOrderList();
|
|
},
|
|
// 顶部tab点击
|
|
getMoreOrderList() {
|
|
if (this.loadingType === 'nomore' || this.orderList.length === 0) return;
|
|
this.pageNum++
|
|
this.getOrderList();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
page,
|
|
.order {
|
|
background: $page-color-base;
|
|
height: 100%;
|
|
.order-search {
|
|
padding: $spacing-sm $spacing-base;
|
|
position: relative;
|
|
.order-search-input {
|
|
width: 100%;
|
|
background-color: $color-white;
|
|
border-radius: 40upx;
|
|
padding: $spacing-sm 0 $spacing-sm $spacing-lg;
|
|
color: $font-color-light;
|
|
}
|
|
.iconfont {
|
|
position: absolute;
|
|
right: 48upx;
|
|
top: 22upx;
|
|
}
|
|
}
|
|
.swiper-box {
|
|
height: calc(100% - 160upx);
|
|
}
|
|
.list-scroll-content {
|
|
height: 100%;
|
|
}
|
|
.uni-swiper-item {
|
|
height: auto;
|
|
}
|
|
}
|
|
</style>
|