447 lines
13 KiB
Vue
447 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<view class="order">
|
|||
|
|
<!--搜索导航栏-->
|
|||
|
|
<view class="order-search" @tap="navTo(`/pages/index/search/search?orderCode=搜索我的订单&type=order`)">
|
|||
|
|
<view class="order-search-input">请输入订单关键字</view>
|
|||
|
|
<view class="iconfont iconsousuo2"></view>
|
|||
|
|
</view>
|
|||
|
|
<!--导航栏-->
|
|||
|
|
<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.orderCode }}</text>
|
|||
|
|
<!--<text class="time">{{item.createTime | time}}</text>-->
|
|||
|
|
<text class="state" :class="'text-' + themeColor.name" v-if="parseInt(item.status, 10) !== 1">{{ item.status | orderStatusFilter }}</text>
|
|||
|
|
<view class="example-body" v-else>
|
|||
|
|
<rf-count-down :show-day="false" :second="second(item.closeTime)" @timeup="timeUp(item)" color="#FFFFFF"
|
|||
|
|
:background-color="themeColor.color" :border-color="themeColor.color" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="goods-box-single" @tap.stop="
|
|||
|
|
navTo(`/pages/order/detail?id=${item.id}`)
|
|||
|
|
" v-for="(goodsItem, goodsIndex) in item.orderSkus"
|
|||
|
|
:key="goodsIndex">
|
|||
|
|
<image class="goods-img" :src="goodsItem.skuImage" mode="aspectFill"></image>
|
|||
|
|
<view class="right">
|
|||
|
|
<text class="title in2line">{{ goodsItem.skuName }}</text>
|
|||
|
|
<text class="attr-box">{{ goodsItem.skuName || singleSkuText }} * {{ goodsItem.num }}</text>
|
|||
|
|
<text v-if="goodsItem.point_exchange_type == 2">
|
|||
|
|
<text class="point" :class="'text-' + themeColor.name">{{ goodsItem.product_money }} + {{ item.point }}积分
|
|||
|
|
</text>
|
|||
|
|
</text>
|
|||
|
|
<text v-else-if="goodsItem.point_exchange_type == 4">
|
|||
|
|
<text class="point">{{ item.point }}积分 </text>
|
|||
|
|
</text>
|
|||
|
|
<text class="price" v-else>
|
|||
|
|
<text :class="'text-' + themeColor.name">{{ moneySymbol }}{{ goodsItem.oldPrice || goodsItem.price }}
|
|||
|
|
<text v-if="goodsItem.gift_flag === 0">
|
|||
|
|
+ {{ item.point + '积分' || '' }}</text></text>
|
|||
|
|
</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="price-box">
|
|||
|
|
共
|
|||
|
|
<text class="num">{{ item.orderSkus.length }}</text>
|
|||
|
|
件商品 实付款
|
|||
|
|
<text class="price" :class="'text-'+themeColor.name">{{ moneySymbol }}{{ item.price }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="action-box b-t">
|
|||
|
|
<button class="action-btn" :class="'text-' + themeColor.name" v-if="item.status == 1" @tap="handleOrderOperation(item, 'close')">
|
|||
|
|
取消订单
|
|||
|
|
</button>
|
|||
|
|
<button class="action-btn" :class="'text-' + themeColor.name" v-if="
|
|||
|
|
(item.status == 4 || item.status == 3) &&
|
|||
|
|
item.orderType != 7
|
|||
|
|
"
|
|||
|
|
@tap="handleOrderOperation(item, 'shipping')">
|
|||
|
|
查看物流
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<button class="action-btn" v-if="
|
|||
|
|
item.status == '2'
|
|||
|
|
" @tap.stop="navToRefund(item, 1)">
|
|||
|
|
申请退款
|
|||
|
|
</button>
|
|||
|
|
<button class="action-btn" v-if="
|
|||
|
|
( item.status == 4) && item.canReturn
|
|||
|
|
"
|
|||
|
|
@tap.stop="navToRefund(item, 2)">
|
|||
|
|
申请退货
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<button class="action-btn" :class="'bg-' + themeColor.name" v-if="item.status == 1 &&item.presaleOrderCanPay"
|
|||
|
|
@tap="navTo(`/pages/user/money/pay?type=1&money=${item.orderType==='1'?item.presalePrice:item.price}`+'&&orderCode='+item.orderCode)">
|
|||
|
|
立即支付
|
|||
|
|
</button>
|
|||
|
|
<button class="action-btn" :class="'text-' + themeColor.name" v-if="(item.status == 4 ||
|
|||
|
|
item.status == 3 )"
|
|||
|
|
@tap="handleOrderOperation(item, 'buyagain')">
|
|||
|
|
再次购买
|
|||
|
|
</button>
|
|||
|
|
<button class="action-btn" :class="'bg-' + themeColor.name" v-if="
|
|||
|
|
(item.status == 4) &&
|
|||
|
|
item.evaluationStatus == 0
|
|||
|
|
"
|
|||
|
|
@tap="handleOrderOperation(item, 'evaluation')">
|
|||
|
|
评价
|
|||
|
|
</button>
|
|||
|
|
<button class="action-btn" :class="'bg-' + themeColor.name" v-if="item.status == 3" @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,
|
|||
|
|
orderList,
|
|||
|
|
orderTakeDelivery
|
|||
|
|
} from '@/api/userInfo';
|
|||
|
|
import rfCountDown from '@/components/rf-count-down';
|
|||
|
|
import {
|
|||
|
|
orderClose,
|
|||
|
|
guessYouLikeList,
|
|||
|
|
buyagain
|
|||
|
|
} from '@/api/product';
|
|||
|
|
import mConstData from '@/config/constData.config';
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
rfLoadMore,
|
|||
|
|
rfCountDown
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
tabCurrentIndex: null,
|
|||
|
|
loadingType: 'more',
|
|||
|
|
navList: this.$mConstDataConfig.orderNavList,
|
|||
|
|
moneySymbol: this.moneySymbol,
|
|||
|
|
orderList: [],
|
|||
|
|
pageNum: 0,
|
|||
|
|
orderType: 0,
|
|||
|
|
loading: true,
|
|||
|
|
isRefreshing: true,
|
|||
|
|
guessYouLikeList: [],
|
|||
|
|
singleSkuText: this.singleSkuText
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 计算倒计时时间
|
|||
|
|
second() {
|
|||
|
|
return function(val) {
|
|||
|
|
return Math.floor((new Date(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.orderStatus.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;
|
|||
|
|
if (options && options.orderType) {
|
|||
|
|
this.orderType = options.orderType;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 下拉刷新
|
|||
|
|
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: {
|
|||
|
|
navToRefund(item, type) {
|
|||
|
|
this.$mRouter.push({
|
|||
|
|
route: `/pages/order/refund/refund?data=${JSON.stringify(
|
|||
|
|
item
|
|||
|
|
)}&refundType=${type}`
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 倒计时关闭订单
|
|||
|
|
timeUp(item) {
|
|||
|
|
if (this.isRefreshing) {
|
|||
|
|
this.isRefreshing = false;
|
|||
|
|
// this.handleOrderClose(item.id);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 订单操作
|
|||
|
|
handleOrderOperation(item, type) {
|
|||
|
|
switch (type) {
|
|||
|
|
case 'buyagain': // 再次购买
|
|||
|
|
this.handleOrderBuyagain(item);
|
|||
|
|
break;
|
|||
|
|
case 'detail': // 订单详情
|
|||
|
|
this.navTo(`/pages/order/detail?id=${item.id}`);
|
|||
|
|
break;
|
|||
|
|
case 'evaluation': // 我要评价
|
|||
|
|
this.navTo(`/pages/order/evaluation/evaluation?order_id=${item.id}`);
|
|||
|
|
break;
|
|||
|
|
case 'close': // 取消订单
|
|||
|
|
|
|||
|
|
if (item.status == '1' && item.orderType != '1') {
|
|||
|
|
this.handleOrderClose(item.id);
|
|||
|
|
break;
|
|||
|
|
}else{
|
|||
|
|
this.$mHelper.toast('定金预售订单不能取消');
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 'delete': // 删除订单
|
|||
|
|
this.handleOrderDelete(item.id);
|
|||
|
|
break;
|
|||
|
|
case 'shipping': // 查看物流
|
|||
|
|
this.navTo(`/pages/order/shipping/shipping?id=${item.id}`);
|
|||
|
|
break;
|
|||
|
|
case 'delivery': // 确认收货
|
|||
|
|
this.handleOrderTakeDelivery(item.id);
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
async handleOrderBuyagain(item) {
|
|||
|
|
await this.$http.get(`${buyagain}`, {
|
|||
|
|
orderId: item.id
|
|||
|
|
}).then(() => {
|
|||
|
|
|
|||
|
|
let route = '/pages/cart/cart';
|
|||
|
|
this.$mRouter.switchTab({
|
|||
|
|
route
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 跳转页面
|
|||
|
|
navTo(route) {
|
|||
|
|
this.$mRouter.push({
|
|||
|
|
route
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 关闭订单
|
|||
|
|
async handleOrderClose(orderId) {
|
|||
|
|
console.log('close11')
|
|||
|
|
await this.$http
|
|||
|
|
.get(`${orderClose}`, {
|
|||
|
|
orderId
|
|||
|
|
})
|
|||
|
|
.then(r => {
|
|||
|
|
// 1 成功 -1 订单不存在 -2 用户不匹配 0 失败
|
|||
|
|
if (r == 1) {
|
|||
|
|
this.isRefreshing = true;
|
|||
|
|
this.$mHelper.toast('订单取消成功');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.loading = true;
|
|||
|
|
this.pageNum = 0;
|
|||
|
|
this.orderList.length = 0;
|
|||
|
|
this.getOrderList();
|
|||
|
|
}, 500);
|
|||
|
|
} else if (r == -1) {
|
|||
|
|
this.$mHelper.toast('订单不存在');
|
|||
|
|
} else if (r == -3) {
|
|||
|
|
this.$mHelper.toast('待付款才能关闭');
|
|||
|
|
} else if (r == -2) {
|
|||
|
|
this.$mHelper.toast('用户不匹配');
|
|||
|
|
} else {
|
|||
|
|
this.$mHelper.toast('订单取消失败');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 删除已关闭订单
|
|||
|
|
async handleOrderDelete(id) {
|
|||
|
|
await this.$http.delete(`${orderDelete}?id=${id}`, {}).then(r => {
|
|||
|
|
// 1 成功 -1 订单不存在 -2 用户不匹配 0 失败
|
|||
|
|
if (r == 1) {
|
|||
|
|
this.isRefreshing = true;
|
|||
|
|
this.$mHelper.toast('订单取消成功');
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.loading = true;
|
|||
|
|
this.pageNum = 0;
|
|||
|
|
this.orderList.length = 0;
|
|||
|
|
this.getOrderList();
|
|||
|
|
}, 500);
|
|||
|
|
} else if (r == -1) {
|
|||
|
|
this.$mHelper.toast('订单不存在');
|
|||
|
|
} else if (r == -3) {
|
|||
|
|
this.$mHelper.toast('待付款才能删除');
|
|||
|
|
} else if (r == -2) {
|
|||
|
|
this.$mHelper.toast('用户不匹配');
|
|||
|
|
} else {
|
|||
|
|
this.$mHelper.toast('订单取消失败');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 确认收货
|
|||
|
|
async handleOrderTakeDelivery(orderId) {
|
|||
|
|
await this.$http
|
|||
|
|
.get(`${orderTakeDelivery}`, {
|
|||
|
|
orderId
|
|||
|
|
})
|
|||
|
|
.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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
if (this.orderType) {
|
|||
|
|
params.orderType = this.orderType;
|
|||
|
|
}
|
|||
|
|
params.pageNum = this.pageNum;
|
|||
|
|
await this.$http
|
|||
|
|
.get(`${orderList}`, 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>
|