297 lines
8.4 KiB
Vue
297 lines
8.4 KiB
Vue
<template>
|
|
<base-page>
|
|
<view class="goodslist">
|
|
<view class="goodslist-box">
|
|
<view class="goodslist-left">
|
|
<view class="goods-title">
|
|
退款维权
|
|
<text class="iconfont icongengduo1"></text>
|
|
</view>
|
|
<view class="goods-search">
|
|
<view class="search">
|
|
<text class="iconfont icon31sousuo"></text>
|
|
<input type="text" v-model="search_text" @input="search" placeholder="搜索订单号/商品名称" />
|
|
</view>
|
|
</view>
|
|
<block v-if="!one_judge && order_list.length > 0">
|
|
<scroll-view scroll-y="true" class="goods-list-scroll" :show-scrollbar="false" @scrolltolower="getOrderList">
|
|
<view
|
|
class="item"
|
|
@click="getOrderDetail(item.order_goods_id, index)"
|
|
v-for="(item, index) in order_list"
|
|
:key="index"
|
|
:class="index == selectGoodsKeys ? 'itemhover' : ''"
|
|
>
|
|
<view class="title">
|
|
<view>订单编号：{{ item.order_no }}</view>
|
|
<view>{{ item.order_type_name }}</view>
|
|
</view>
|
|
<view class="total-money-num">
|
|
<view class="box">
|
|
<view>订单金额</view>
|
|
<view>￥{{ item.real_goods_money }}</view>
|
|
</view>
|
|
<view class="box">
|
|
<view>退款金额</view>
|
|
<view>￥{{ item.refund_apply_money }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="total-money-num">
|
|
<view class="member-info">
|
|
<view>退款状态：</view>
|
|
<view>{{ item.refund_status_name }}({{ item.refund_type == 1 ? '仅退款' : '退款退货' }})</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</block>
|
|
<view class="notYet" v-else-if="!one_judge && order_list.length == 0">暂无数据</view>
|
|
</view>
|
|
<view class="goodslist-right">
|
|
<view class="goods-title">订单详情</view>
|
|
<view class="order-information tab-wrap" v-if="Object.keys(order_detail).length">
|
|
<view class="tab-head">
|
|
<text v-for="(item, index) in tabObj.list" :key="index" :class="{ active: tabObj.index == item.value }" @click="tabObj.index = item.value">
|
|
{{ item.name }}
|
|
</text>
|
|
</view>
|
|
<view class="tab-content">
|
|
<view class="other-information" v-if="tabObj.index == 1">
|
|
<view class="item-box">
|
|
<view class="item">
|
|
<view>买家：</view>
|
|
<view v-if="order_detail.nickname">{{ order_detail.nickname }}</view>
|
|
<view v-else>散客</view>
|
|
</view>
|
|
<view class="item">
|
|
<view>退款编号：</view>
|
|
<view>{{ order_detail.refund_no }}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view>申请时间：</view>
|
|
<view>{{ $util.timeFormat(order_detail.refund_action_time) }}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view>维权类型：</view>
|
|
<view>{{ order_detail.refund_mode > 1 ? '售后' : '退款' }}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view>退款方式：</view>
|
|
<view>
|
|
{{ order_detail.shop_active_refund == 1 ? '主动退款' : order_detail.refund_type == 1 ? '仅退款' : '退货退款' }} ({{
|
|
(order_detail.refund_type == 1 && '原路退款') || (order_detail.refund_type == 2 && '线下退款') || '退款到余额'
|
|
}})
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view>退款金额：</view>
|
|
<view>￥{{ order_detail.refund_status == 3 ? order_detail.refund_real_money : order_detail.refund_apply_money }}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view>退款原因：</view>
|
|
<view>{{ order_detail.refund_reason || '--' }}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view>退款说明：</view>
|
|
<view>{{ order_detail.refund_remark || '--' }}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view>商家退款说明：</view>
|
|
<view>{{ order_detail.shop_refund_remark || '--' }}</view>
|
|
</view>
|
|
<view class="item">
|
|
<view>退款状态：</view>
|
|
<view>{{ order_detail.refund_status_name }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="goods-info" v-if="tabObj.index == 2">
|
|
<view class="table">
|
|
<view class="table-th table-all">
|
|
<view class="table-td" style="width:45%">商品（元）</view>
|
|
<view class="table-td" style="width:15%">价格</view>
|
|
<view class="table-td" style="width:10%">数量</view>
|
|
<view class="table-td" style="width:15%;">小计（元）</view>
|
|
<view class="table-td" style="width:15%;justify-content: flex-end;">状态</view>
|
|
</view>
|
|
<view class="table-tr table-all">
|
|
<view class="table-td" style="width:45%">{{ order_detail.sku_name }}</view>
|
|
<view class="table-td" style="width:15%">{{ order_detail.price }}</view>
|
|
<view class="table-td" style="width:10%">{{ order_detail.num }}</view>
|
|
<view class="table-td" style="width:15%">{{ order_detail.goods_money }}</view>
|
|
<view class="table-td uni-column" style="width:15%;align-items: flex-end;">{{ order_detail.refund_status_name }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="other-information journal" v-if="tabObj.index == 3"><nsjournal :list="order_detail.refund_log_list"></nsjournal></view>
|
|
</view>
|
|
</view>
|
|
<block v-else><image class="cart-empty" :src="$util.img('public/uniapp/cashier/cart_empty.png')" mode="widthFix"></image></block>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</base-page>
|
|
</template>
|
|
|
|
<script>
|
|
import nsjournal from '@/components/ns-journal/ns-journal.vue';
|
|
export default {
|
|
components: {
|
|
nsjournal
|
|
},
|
|
data() {
|
|
return {
|
|
selectGoodsKeys: 0,
|
|
//获取订单的页数
|
|
page: 1,
|
|
//每次获取订单的条数
|
|
page_size: 8,
|
|
// 订单搜索是用到的数据
|
|
search_text: '',
|
|
//初始时加载详情数据判断
|
|
one_judge: true,
|
|
// 订单列表数据
|
|
order_list: [],
|
|
//订单详情数据
|
|
order_detail: {},
|
|
tabObj: {
|
|
list: [
|
|
{
|
|
value: 1,
|
|
name: '基础信息'
|
|
},
|
|
{
|
|
value: 2,
|
|
name: '商品信息'
|
|
},
|
|
{
|
|
value: 3,
|
|
name: '订单日志'
|
|
}
|
|
],
|
|
index: 1
|
|
}
|
|
};
|
|
},
|
|
onLoad(option) {
|
|
this.getOrderList();
|
|
},
|
|
methods: {
|
|
// 搜索
|
|
search() {
|
|
console.log('搜索', this.search_text);
|
|
this.page = 1;
|
|
this.order_list = [];
|
|
this.one_judge = true;
|
|
this.getOrderList();
|
|
},
|
|
/**
|
|
* 获取订单列表
|
|
*/
|
|
getOrderList() {
|
|
this.$api.sendRequest({
|
|
url: '/cashier/storeapi/cashierorderrefund/lists',
|
|
data: {
|
|
page: this.page,
|
|
page_size: this.page_size,
|
|
search: this.search_text
|
|
},
|
|
success: res => {
|
|
if (res.data.list.length == 0) {
|
|
this.order_detail = {};
|
|
this.one_judge = false;
|
|
}
|
|
if (res.code >= 0) {
|
|
this.page += 1;
|
|
if (this.order_list.length == 0) {
|
|
this.order_list = res.data.list;
|
|
} else {
|
|
this.order_list = this.order_list.concat(res.data.list);
|
|
}
|
|
//初始时加载一遍详情数据
|
|
if (this.one_judge) {
|
|
this.getOrderDetail(this.order_list[0].order_goods_id);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 获取订单详情数据
|
|
*/
|
|
getOrderDetail(order_goods_id, keys = 0, callback) {
|
|
this.selectGoodsKeys = keys;
|
|
this.$api.sendRequest({
|
|
url: '/cashier/storeapi/cashierorderrefund/detail',
|
|
data: {
|
|
order_goods_id
|
|
},
|
|
success: res => {
|
|
if (res.code >= 0) {
|
|
this.order_detail = res.data;
|
|
if (typeof callback == 'function') {
|
|
callback();
|
|
}
|
|
this.$forceUpdate();
|
|
this.one_judge = false;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import './public/css/orderlist.scss';
|
|
.total-money-num .box {
|
|
margin-top: 0;
|
|
}
|
|
.goodslist {
|
|
.goodslist-right {
|
|
.other-information {
|
|
.title {
|
|
margin-bottom: 0.1rem !important;
|
|
}
|
|
.item-box {
|
|
margin-bottom: 0.15rem;
|
|
.item {
|
|
&:nth-child(1),
|
|
&:nth-child(2) {
|
|
margin-top: 0 !important;
|
|
}
|
|
view:nth-child(1) {
|
|
width: 1rem !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-wrap {
|
|
padding: 0 !important;
|
|
background-color: #fff !important;
|
|
.tab-head {
|
|
display: flex;
|
|
background-color: #f8f8f8;
|
|
text {
|
|
width: 1.15rem;
|
|
height: 0.55rem;
|
|
line-height: 0.55rem;
|
|
text-align: center;
|
|
font-size: $uni-font-size-lg;
|
|
&.active {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.item-box {
|
|
padding: 0.1rem;
|
|
}
|
|
</style>
|