307 lines
7.0 KiB
Vue
307 lines
7.0 KiB
Vue
<template>
|
|
<view
|
|
class="rf-order-search"
|
|
>
|
|
<!--header-->
|
|
<view class="rf-header-box">
|
|
<view class="rf-header" :style="{width:width+'px',height:height+'px'}">
|
|
<view class="rf-back" :style="{marginTop:arrowTop+'px'}" @tap="back">
|
|
<text class="iconfont iconzuo"></text>
|
|
</view>
|
|
<view class="input-box" :style="{marginTop:inputTop+'px'}">
|
|
<input
|
|
v-model="keyword"
|
|
@confirm="handleOrderSearch"
|
|
placeholder="请输入关键字"
|
|
placeholder-style="font-size: 24upx; color:#ccc;"
|
|
type="text" />
|
|
<text class="icon iconfont iconsousuo2" @tap.stop="handleOrderSearch"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!--订单列表-->
|
|
<scroll-view class="list-scroll-content" scroll-y :style="{top:height+'px'}">
|
|
<!-- 订单列表 -->
|
|
<view
|
|
v-for="(item, index) in orderList"
|
|
:key="index"
|
|
class="rf-order-item"
|
|
>
|
|
<view class="i-top b-b">
|
|
<text class="time">订单号：{{ item.orderCode }}</text>
|
|
|
|
<text class="state" v-if="parseInt(item.status, 10) !== 0">{{
|
|
item.status | orderStatusFilter
|
|
}}</text>
|
|
|
|
</view>
|
|
|
|
<view
|
|
class="goods-box-single"
|
|
@tap="navTo(`/pages/product/product?id=${goodsItem.spuId}`)"
|
|
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 }}</text>
|
|
<text class="price" :class="'text-' + themeColor.name">{{ moneySymbol }}{{ goodsItem.price }} * {{ goodsItem.num }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="price-box">
|
|
实付款
|
|
<text class="price">{{ item.price }}</text>
|
|
</view>
|
|
<view class="action-box b-t">
|
|
<button
|
|
class="action-btn"
|
|
:class="'bg-' + themeColor.name"
|
|
@tap="navTo(`/pages/order/detail?id=${item.id}`)"
|
|
>
|
|
订单详情
|
|
</button>
|
|
</view>
|
|
</view>
|
|
<rf-load-more
|
|
:status="loadingType"
|
|
v-if="orderList.length > 0"
|
|
></rf-load-more>
|
|
</scroll-view>
|
|
<rf-empty
|
|
info="暂无相关订单"
|
|
v-if="orderList.length === 0 && !loading"
|
|
></rf-empty>
|
|
<!--加载动画-->
|
|
<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 { orderList } from '@/api/userInfo';
|
|
import rfCountDown from '@/components/rf-count-down';
|
|
import { orderClose } from '@/api/product';
|
|
import mConstData from '@/config/constData.config';
|
|
export default {
|
|
components: {
|
|
rfLoadMore,
|
|
rfCountDown
|
|
},
|
|
data() {
|
|
return {
|
|
loadingType: 'more',
|
|
orderList: [],
|
|
pageNum :0,
|
|
loading: true,
|
|
keyword: null,
|
|
height: 64,
|
|
moneySymbol: this.moneySymbol,
|
|
inputTop: 0, // 搜索框距离顶部距离
|
|
arrowTop: 0, // 箭头距离顶部距离
|
|
singleSkuText: this.singleSkuText
|
|
};
|
|
},
|
|
computed: {
|
|
// 计算倒计时时间
|
|
second() {
|
|
return function(val) {
|
|
return Math.floor(15 * 60 - (new Date() / 1000 - val));
|
|
};
|
|
}
|
|
},
|
|
filters: {
|
|
// 时间格式化
|
|
time(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;
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
let obj = {};
|
|
// #ifdef MP-WEIXIN
|
|
// eslint-disable-next-line
|
|
obj = wx.getMenuButtonBoundingClientRect();
|
|
// #endif
|
|
// #ifdef MP-BAIDU
|
|
// eslint-disable-next-line
|
|
obj = swan.getMenuButtonBoundingClientRect();
|
|
// #endif
|
|
uni.getSystemInfo({
|
|
success: (res) => {
|
|
this.width = obj.left || res.windowWidth;
|
|
this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
|
|
this.inputTop = obj.top ? (obj.top + (obj.height - 30) / 2) : (res.statusBarHeight + 7);
|
|
this.arrowTop = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
|
|
}
|
|
});
|
|
this.initData(options);
|
|
},
|
|
// 下拉刷新
|
|
onPullDownRefresh() {
|
|
this.pageNum = 0;
|
|
this.orderList.length = 0;
|
|
this.getOrderList('refresh');
|
|
},
|
|
// 加载更多
|
|
onReachBottom() {
|
|
if (this.loadingType === 'nomore') return;
|
|
this.pageNum++
|
|
this.getOrderList();
|
|
},
|
|
methods: {
|
|
back() {
|
|
this.$mRouter.back();
|
|
},
|
|
// 跳转页面
|
|
navTo(route) {
|
|
this.$mRouter.push({ route });
|
|
},
|
|
// 倒计时关闭订单
|
|
timeUp(item) {
|
|
this.handleOrderClose(item.id);
|
|
},
|
|
// 关闭订单
|
|
async handleOrderClose(id) {
|
|
await this.$http
|
|
.get(`${orderClose}`, {
|
|
id
|
|
})
|
|
.then(() => {
|
|
this.$mHelper.toast('订单取消成功');
|
|
setTimeout(() => {
|
|
this.pageNum = 0;
|
|
this.orderList.length = 0;
|
|
this.getOrderList();
|
|
}, 500);
|
|
});
|
|
},
|
|
// 数据初始化
|
|
initData(options) {
|
|
this.keyword = options.keyword;
|
|
this.orderList.length = 0;
|
|
this.pageNum = 0;
|
|
this.getOrderList();
|
|
},
|
|
// 数据初始化
|
|
handleOrderSearch() {
|
|
this.orderList.length = 0;
|
|
this.pageNum = 0;
|
|
this.getOrderList();
|
|
},
|
|
// 获取订单列表
|
|
async getOrderList(type) {
|
|
const params = {};
|
|
params.keyword = this.keyword;
|
|
params.pageNum = this.pageNum ;
|
|
await this.$http
|
|
.get(`${orderList}`, {
|
|
...params
|
|
})
|
|
.then(r => {
|
|
this.loading = false;
|
|
if (type === 'refresh') {
|
|
uni.stopPullDownRefresh();
|
|
}
|
|
this.loadingType = r.length === 10 ? 'more' : 'nomore';
|
|
this.orderList = [...this.orderList, ...r];
|
|
})
|
|
.catch(() => {
|
|
this.loading = false;
|
|
if (type === 'refresh') {
|
|
uni.stopPullDownRefresh();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.rf-order-search {
|
|
.rf-header-box {
|
|
width: 100%;
|
|
background: $color-white;
|
|
position: fixed;
|
|
z-index: 100;
|
|
left: 0;
|
|
top: 0;
|
|
.rf-header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
.rf-back {
|
|
margin-left: 8rpx;
|
|
height: 32px !important;
|
|
width: 32px !important;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
.iconzuo {
|
|
font-size: $font-lg + 4upx;
|
|
font-weight: 500;
|
|
color: $font-color-dark;
|
|
}
|
|
}
|
|
}
|
|
.input-box {
|
|
width: 100%;
|
|
font-size: $font-sm;
|
|
box-sizing: border-box;
|
|
color: #999;
|
|
display: flex;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
height: 60upx;
|
|
background-color: $page-color-base;
|
|
border-radius: 30upx;
|
|
position: relative;
|
|
margin: 0 20upx 0 10upx;
|
|
.iconsousuo2 {
|
|
z-index: 100;
|
|
display: flex;
|
|
align-items: center;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 60upx;
|
|
height: 60upx;
|
|
font-size: $font-lg + 4upx;
|
|
color: $font-color-dark;
|
|
}
|
|
input {
|
|
width: 100%;
|
|
padding-left: 28upx;
|
|
height: 28upx;
|
|
color: $font-color-base;
|
|
font-size: 28upx;
|
|
}
|
|
}
|
|
}
|
|
.list-scroll-content {
|
|
position: relative;
|
|
}
|
|
}
|
|
</style>
|