332 lines
7.5 KiB
Vue
332 lines
7.5 KiB
Vue
|
<template>
|
|||
|
|
<view
|
|||
|
|
class="refund"
|
|||
|
|
:style="{ backgroundColor: orderList.length === 0 ? '#fff' : '' }"
|
|||
|
|
>
|
|||
|
|
<!--订单列表-->
|
|||
|
|
<scroll-view class="list-scroll-content" scroll-y>
|
|||
|
|
<!-- 订单列表 -->
|
|||
|
|
<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">{{ item.status | orderStatusFilter }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="goods-box-single"
|
|||
|
|
@tap="navTo(`/pages/product/product?id=${goodsItem.spuId}&skuId=${goodsItem.skuId}`)"
|
|||
|
|
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.skuSpecs || singleSkuText }}</text>
|
|||
|
|
<text class="price" :class="'text-' + themeColor.name">{{ moneySymbol }}{{ goodsItem.price }} * {{ goodsItem.num }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="price-box">
|
|||
|
|
共
|
|||
|
|
<text class="num">{{ item.orderSkus.length }}</text>
|
|||
|
|
件商品
|
|||
|
|
</view>
|
|||
|
|
<view class="action-box b-t">
|
|||
|
|
<button
|
|||
|
|
class="action-btn"
|
|||
|
|
:class="'bg-' + themeColor.name"
|
|||
|
|
@tap="navTo(`/pages/order/detail?id=${item.orderId}`)"
|
|||
|
|
>
|
|||
|
|
订单详情
|
|||
|
|
</button>
|
|||
|
|
<button v-if='item.status==6'
|
|||
|
|
class="action-btn"
|
|||
|
|
:class="'bg-' + themeColor.name"
|
|||
|
|
@tap="showColorModal(item)"
|
|||
|
|
|
|||
|
|
>
|
|||
|
|
填写物流
|
|||
|
|
</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 class="cu-modal" :class="{ show: colorModal }">
|
|||
|
|
<view class="cu-dialog">
|
|||
|
|
<view class="login-type-form">
|
|||
|
|
<view class="input-item">
|
|||
|
|
<text class="tit">快递公司</text>
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
name="logisCompanyName"
|
|||
|
|
v-model="loginParams.logisCompanyName"
|
|||
|
|
placeholder="请输入快递公司"
|
|||
|
|
maxlength="11"
|
|||
|
|
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view class="input-item" >
|
|||
|
|
<text class="tit">运单号</text>
|
|||
|
|
<input
|
|||
|
|
name="waybillCode"
|
|||
|
|
type="text"
|
|||
|
|
v-model="loginParams.waybillCode"
|
|||
|
|
placeholder="请输入运单号"
|
|||
|
|
maxlength="20"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<button
|
|||
|
|
class="confirm-btn"
|
|||
|
|
:class="'bg-' + themeColor.name"
|
|||
|
|
:disabled="btnLoading"
|
|||
|
|
:loading="btnLoading"
|
|||
|
|
@tap="toLogin"
|
|||
|
|
>
|
|||
|
|
保存
|
|||
|
|
</button>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</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.vue';
|
|||
|
|
import { backorderlist ,fillthelogistics} from '@/api/product';
|
|||
|
|
import mConstData from '@/config/constData.config';
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
rfLoadMore
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
loginParams: {
|
|||
|
|
id: 0,
|
|||
|
|
logisCompanyName: '',
|
|||
|
|
waybillCode: ''
|
|||
|
|
},
|
|||
|
|
loadingType: 'more',
|
|||
|
|
btnLoading: false,
|
|||
|
|
orderList: [],
|
|||
|
|
pageNum :0,
|
|||
|
|
colorModal: false,
|
|||
|
|
moneySymbol: this.moneySymbol,
|
|||
|
|
loading: true,
|
|||
|
|
singleSkuText: this.singleSkuText
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
filters: {
|
|||
|
|
// 状态显示格式化
|
|||
|
|
orderStatusFilter(orderStatus) {
|
|||
|
|
let state;
|
|||
|
|
mConstData.refundStatus.forEach(orderItem => {
|
|||
|
|
if (orderItem.key === parseInt(orderStatus, 10)) {
|
|||
|
|
state = orderItem.value;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return state;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.initData();
|
|||
|
|
},
|
|||
|
|
// 下拉刷新
|
|||
|
|
onPullDownRefresh() {
|
|||
|
|
this.pageNum = 0;
|
|||
|
|
this.orderList.length = 0;
|
|||
|
|
this.getOrderList('refresh');
|
|||
|
|
},
|
|||
|
|
// 加载更多
|
|||
|
|
onReachBottom() {
|
|||
|
|
if (this.loadingType === 'nomore') return;
|
|||
|
|
this.pageNum++
|
|||
|
|
this.getOrderList();
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 提交表单
|
|||
|
|
async toLogin() {
|
|||
|
|
|
|||
|
|
this.btnLoading = true;
|
|||
|
|
await this.$http
|
|||
|
|
.get(`${fillthelogistics}`, this.loginParams)
|
|||
|
|
.then(r => {
|
|||
|
|
this.btnLoading = false;
|
|||
|
|
this.colorModal = false;
|
|||
|
|
if(r==1){
|
|||
|
|
this.initData();
|
|||
|
|
}else{
|
|||
|
|
this.$mHelper.toast('填写失败');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
.catch(() => {
|
|||
|
|
this.btnLoading = false;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
showColorModal(item) {
|
|||
|
|
this.loginParams.id=item.id;
|
|||
|
|
console.log(item)
|
|||
|
|
this.colorModal = true;
|
|||
|
|
},
|
|||
|
|
// 跳转页面
|
|||
|
|
navTo(route) {
|
|||
|
|
this.$mRouter.push({ route });
|
|||
|
|
},
|
|||
|
|
// 数据初始化
|
|||
|
|
initData() {
|
|||
|
|
this.orderList.length = 0;
|
|||
|
|
this.pageNum = 0;
|
|||
|
|
this.getOrderList();
|
|||
|
|
},
|
|||
|
|
// 获取订单列表
|
|||
|
|
async getOrderList(type) {
|
|||
|
|
const params = {};
|
|||
|
|
params.pageNum = this.pageNum ;
|
|||
|
|
params.synthesize_status = -1;
|
|||
|
|
await this.$http
|
|||
|
|
.get(`${backorderlist}`, params)
|
|||
|
|
.then(r => {
|
|||
|
|
this.loading = false;
|
|||
|
|
if (type === 'refresh') {
|
|||
|
|
uni.stopPullDownRefresh();
|
|||
|
|
}
|
|||
|
|
this.loadingType = r.list.length === 10 ? 'more' : 'nomore';
|
|||
|
|
this.orderList = [...this.orderList, ...r.list];
|
|||
|
|
})
|
|||
|
|
.catch(() => {
|
|||
|
|
this.loading = false;
|
|||
|
|
if (type === 'refresh') {
|
|||
|
|
uni.stopPullDownRefresh();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.list-scroll-content {
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
.uni-swiper-item {
|
|||
|
|
height: auto;
|
|||
|
|
}
|
|||
|
|
.input-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 0 30upx;
|
|||
|
|
background: $page-color-light;
|
|||
|
|
height: 120upx;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
margin-bottom: 50upx;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tit {
|
|||
|
|
height: 50upx;
|
|||
|
|
line-height: 56upx;
|
|||
|
|
font-size: $font-sm + 2upx;
|
|||
|
|
color: $font-color-base;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input {
|
|||
|
|
height: 60upx;
|
|||
|
|
font-size: $font-base + 2upx;
|
|||
|
|
color: $font-color-dark;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.input-item-sms-code {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
.sms-code-btn {
|
|||
|
|
position: absolute;
|
|||
|
|
color: #111;
|
|||
|
|
right: 20upx;
|
|||
|
|
bottom: 20upx;
|
|||
|
|
font-size: 28upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sms-code-resend {
|
|||
|
|
color: #999;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sms-code-btn:after {
|
|||
|
|
border: none;
|
|||
|
|
background-color: transparent;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.forget-section {
|
|||
|
|
font-size: $font-sm + 2upx;
|
|||
|
|
color: $font-color-spec;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 40upx;
|
|||
|
|
}
|
|||
|
|
.login-type-form {
|
|||
|
|
width: 80%;
|
|||
|
|
margin: 50upx auto;
|
|||
|
|
.input-item {
|
|||
|
|
position: relative;
|
|||
|
|
height: 90upx;
|
|||
|
|
line-height: 90upx;
|
|||
|
|
margin-bottom: $spacing-lg;
|
|||
|
|
.iconfont {
|
|||
|
|
font-size: 50upx;
|
|||
|
|
position: absolute;
|
|||
|
|
left: 0;
|
|||
|
|
}
|
|||
|
|
.login-type-input {
|
|||
|
|
height: 90upx;
|
|||
|
|
padding-left: 80upx;
|
|||
|
|
border-bottom: 1upx solid rgba(0, 0, 0, .1);
|
|||
|
|
}
|
|||
|
|
.sms-code-btn, sms-code-resend {
|
|||
|
|
width: 240upx;
|
|||
|
|
font-size: $font-base - 2upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.login-type-tips {
|
|||
|
|
padding: 0 50upx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
.confirm-btn {
|
|||
|
|
height: 80upx;
|
|||
|
|
line-height: 80upx;
|
|||
|
|
}
|
|||
|
|
</style>
|