|
|
@@ -2,6 +2,7 @@
|
|
|
import AreaCascader from '@/components/AreaCascader/index.vue';
|
|
|
import ReceiverEdit from './components/ReceiverEdit.vue';
|
|
|
import AfterSalesDetails from './components/AfterSalesDetails.vue';
|
|
|
+import {getOrderDetail,editLogisticsNol,editSaleOrderNew} from "@/api/points/order_api"
|
|
|
export default {
|
|
|
name: "details",
|
|
|
components: {
|
|
|
@@ -11,44 +12,11 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- orderStatus: '待发货',
|
|
|
- orderStatusOption:[
|
|
|
- {label:'全部',value:'1'},
|
|
|
- {label:'待发货',value:'2'},
|
|
|
- {label:'已发货',value:'3'}
|
|
|
- ],
|
|
|
- orderInfo: {
|
|
|
- orderNo: 'DORDER2026020100001',
|
|
|
- product: '广誉源毛巾',
|
|
|
- quantity: '3',
|
|
|
- actualPrice: '¥10+1000积分',
|
|
|
- customerPhone: '19900001234',
|
|
|
- orderTime: '2026-1-27 10:00:00',
|
|
|
- shippingTime: '2026-1-27 10:00:00',
|
|
|
- logisticsNo: 'SF2014523698',
|
|
|
- remark: '尽快发货尽快发货尽快发货尽快发货,'
|
|
|
- },
|
|
|
- receiverInfo: {
|
|
|
- name: '王五',
|
|
|
- phone: '19900004458',
|
|
|
- address: '山西省太原市万柏林区煤气化小西区35号'
|
|
|
- },
|
|
|
- productList: [
|
|
|
- {
|
|
|
- image: '/profile/upload/2026/01/27/美女技师1_20260127104524A001.png',
|
|
|
- name: '广誉源毛巾',
|
|
|
- spec: '白色',
|
|
|
- price: '300',
|
|
|
- actualPrice: '25'
|
|
|
- }
|
|
|
- ],
|
|
|
- afterSalesInfo: {
|
|
|
- type: '1',
|
|
|
- applyTime: '2026-1-27 10:00:00',
|
|
|
- reason: '不想要了',
|
|
|
- logisticsNo: 'SF52145236366',
|
|
|
- cost: '200',
|
|
|
- },
|
|
|
+ orderStatusOption:[],
|
|
|
+ orderInfo: {},
|
|
|
+ receiverInfo: {},
|
|
|
+ productList: [],
|
|
|
+ afterSalesInfo: {},
|
|
|
// 物流单号表单
|
|
|
logisticsForm: {
|
|
|
logisticsNo: '',
|
|
|
@@ -63,9 +31,40 @@ export default {
|
|
|
},
|
|
|
// 弹窗状态
|
|
|
logistics: false,
|
|
|
+ afterSaleOption:[
|
|
|
+ {label:'待审核',value:'0'},
|
|
|
+ {label:'审核通过',value:'1'},
|
|
|
+ {label:'审核拒绝',value:'2'},
|
|
|
+ {label:'待买家退货',value:'3'},
|
|
|
+ {label:'待商家收货',value:'4'},
|
|
|
+ {label:'退款处理中',value:'5'},
|
|
|
+ {label:'售后完成',value:'6'},
|
|
|
+ ]
|
|
|
};
|
|
|
},
|
|
|
+ created() {
|
|
|
+ this.getOrderInfo();
|
|
|
+ },
|
|
|
methods: {
|
|
|
+ async getOrderInfo() {
|
|
|
+ const res = await getOrderDetail({
|
|
|
+ orderId: this.$route.query.orderId,
|
|
|
+ })
|
|
|
+ const {afterSaleInfo,orderBaseInfo,orderItemInfo,receiverInfo} = res.data;
|
|
|
+ this.orderInfo = orderBaseInfo;
|
|
|
+ this.receiverInfo = receiverInfo;
|
|
|
+ this.productList = orderItemInfo;
|
|
|
+ this.afterSalesInfo = afterSaleInfo;
|
|
|
+ const {order_status} = await this.useDict('order_status');
|
|
|
+ this.orderStatusOption = order_status;
|
|
|
+ },
|
|
|
+ orderStatusName(){
|
|
|
+ if(this.orderStatusOption.length > 0){
|
|
|
+ return this.orderStatusOption.filter(item => item.value == this.orderInfo.orderStatus)[0].label;
|
|
|
+ }else{
|
|
|
+ return '--'
|
|
|
+ }
|
|
|
+ },
|
|
|
closeDialog() {
|
|
|
this.$tab.closePage(this.$route).then(({ visitedViews }) => {
|
|
|
const latestView = visitedViews.slice(-1)[0]
|
|
|
@@ -91,24 +90,46 @@ export default {
|
|
|
this.$message.success('收货人信息修改成功');
|
|
|
},
|
|
|
saveLogisticsNo() {
|
|
|
+ var _this = this;
|
|
|
// 保存物流单号
|
|
|
this.$refs.logisticsFormRef.validate((valid) => {
|
|
|
if (valid) {
|
|
|
- if (this.logisticsForm.type === 'order') {
|
|
|
- this.orderInfo.logisticsNo = this.logisticsForm.logisticsNo;
|
|
|
- } else if (this.logisticsForm.type === 'afterSales') {
|
|
|
- this.afterSalesInfo.logisticsNo = this.logisticsForm.logisticsNo;
|
|
|
+ let params = {};
|
|
|
+ let apiUrl = '';
|
|
|
+ if (_this.logisticsForm.type === 'order') {
|
|
|
+ apiUrl = editLogisticsNol;
|
|
|
+ params ={
|
|
|
+ orderId:_this.orderInfo.id,
|
|
|
+ logisticsNo:_this.logisticsForm.logisticsNo
|
|
|
+ }
|
|
|
+ } else if (_this.logisticsForm.type === 'afterSales') {
|
|
|
+ apiUrl = editSaleOrderNew;
|
|
|
+ params ={
|
|
|
+ afterSaleOrderId:_this.afterSalesInfo.afterSaleOrderId,
|
|
|
+ logisticsNo:_this.logisticsForm.logisticsNo
|
|
|
+ }
|
|
|
}
|
|
|
- this.logistics = false;
|
|
|
- this.$message.success('物流单号修改成功');
|
|
|
+
|
|
|
+ apiUrl(params).then(res => {
|
|
|
+ if(res.code === 200) {
|
|
|
+ if (_this.logisticsForm.type === 'order') {
|
|
|
+ _this.orderInfo.logisticsNo = _this.logisticsForm.logisticsNo;
|
|
|
+ }else {
|
|
|
+ _this.afterSalesInfo.logisticsNo = _this.logisticsForm.logisticsNo;
|
|
|
+ }
|
|
|
+ _this.logistics = false;
|
|
|
+ _this.$message.success('物流单号修改成功');
|
|
|
+ }
|
|
|
+ })
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
//费用详情弹窗
|
|
|
- viewAfterSalesDetails() {
|
|
|
- this.$refs.afterSaleDetailsRef.getRow()
|
|
|
+ viewAfterSalesDetails(val) {
|
|
|
+ this.$refs.afterSaleDetailsRef.getRow(val)
|
|
|
},
|
|
|
handleConfirmCostDetails(costData) {
|
|
|
+ this.getOrderInfo();
|
|
|
this.$message.success('费用详情已确认');
|
|
|
},
|
|
|
editLogisticsNo() {
|
|
|
@@ -158,11 +179,15 @@ export default {
|
|
|
<div class="order-status-section">
|
|
|
<div class="order-status">
|
|
|
<span class="status-label">当前订单状态:</span>
|
|
|
- <span class="status-value">{{ orderStatus }}</span>
|
|
|
+ <span class="status-value">{{ orderStatusName() }}</span>
|
|
|
</div>
|
|
|
<div class="order-actions">
|
|
|
- <el-button type="success" size="small" @click="modifyLogisticsNo">修改物流单号</el-button>
|
|
|
- <el-button type="success" size="small" @click="modifyReceiverInfo">修改收货人信息</el-button>
|
|
|
+ <el-button type="success" size="small"
|
|
|
+ v-if="orderInfo.orderStatus == 1"
|
|
|
+ @click="modifyLogisticsNo">修改物流单号</el-button>
|
|
|
+ <el-button type="success" size="small"
|
|
|
+ v-if="orderInfo.orderStatus == 1"
|
|
|
+ @click="modifyReceiverInfo">修改收货人信息</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
@@ -173,18 +198,53 @@ export default {
|
|
|
</div>
|
|
|
<div class="info-table">
|
|
|
<el-table :data="[orderInfo]" style="width: 100%; margin-bottom: 20px;">
|
|
|
- <el-table-column prop="orderNo" label="订单号" width="200"></el-table-column>
|
|
|
- <el-table-column prop="product" label="商品"></el-table-column>
|
|
|
- <el-table-column prop="quantity" label="数量" width="100"></el-table-column>
|
|
|
- <el-table-column prop="actualPrice" label="实付价格" width="120"></el-table-column>
|
|
|
- <el-table-column prop="customerPhone" label="客户手机号" width="150"></el-table-column>
|
|
|
- <el-table-column prop="orderTime" label="下单时间" width="180"></el-table-column>
|
|
|
- <el-table-column prop="shippingTime" label="发货时间" width="180"></el-table-column>
|
|
|
- <el-table-column prop="logisticsNo" label="物流单号"></el-table-column>
|
|
|
+ <el-table-column prop="orderNo" label="订单号" width="200">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.orderNo || '--' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="productName" label="商品">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.productName || '--' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="quantity" label="数量" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.quantity || '--' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="payAmount" label="实付价格" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.paymentType == 1">{{ scope.row.pointsUsed }}积分</span>
|
|
|
+ <span v-else-if="scope.row.paymentType == 2">¥{{ scope.row.payAmount }}</span>
|
|
|
+ <span v-else-if="scope.row.paymentType == 3">¥{{ scope.row.payAmount }}+{{ scope.row.pointsUsed }}积分</span>
|
|
|
+ <span v-else>--</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="phone" label="客户手机号" width="150">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.phone || '--' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="createTime" label="下单时间" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.createTime || '--' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="deliveryTime" label="发货时间" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.deliveryTime || '--' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="logisticsNo" label="物流单号">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.logisticsNo || '--' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
</el-table>
|
|
|
<div class="order-remark">
|
|
|
<div class="remark-label">订单备注:</div>
|
|
|
- <div class="remark-content">{{ orderInfo.remark }}</div>
|
|
|
+ <div class="remark-content">{{ orderInfo.buyerRemark || '--' }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
@@ -195,9 +255,21 @@ export default {
|
|
|
</div>
|
|
|
<div class="info-table">
|
|
|
<el-table :data="[receiverInfo]" style="width: 100%;">
|
|
|
- <el-table-column prop="name" label="收货人" width="150"></el-table-column>
|
|
|
- <el-table-column prop="phone" label="手机号" width="180"></el-table-column>
|
|
|
- <el-table-column prop="address" label="收货地址"></el-table-column>
|
|
|
+ <el-table-column prop="receiverName" label="收货人" width="150">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.receiverName || '--' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="receiverPhone" label="手机号" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.receiverPhone || '--' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="fullAddress" label="收货地址">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.fullAddress || '--' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
@@ -207,34 +279,67 @@ export default {
|
|
|
<span class="section-title">商品信息</span>
|
|
|
</div>
|
|
|
<div class="info-table">
|
|
|
- <el-table :data="productList" style="width: 100%;">
|
|
|
+ <el-table :data="[productList]" style="width: 100%;">
|
|
|
<el-table-column label="商品图片" width="100">
|
|
|
<template slot-scope="scope">
|
|
|
- <img v-if="scope.row.image" :src="scope.row.image" class="product-image" alt="商品图片">
|
|
|
+ <img v-if="scope.row.productImage" :src="scope.row.productImage" class="product-image"/>
|
|
|
<span v-else>无图片</span>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="name" label="商品名称"></el-table-column>
|
|
|
- <el-table-column prop="spec" label="规格" width="150"></el-table-column>
|
|
|
- <el-table-column prop="price" label="售价" width="100"></el-table-column>
|
|
|
- <el-table-column prop="actualPrice" label="实付" width="100"></el-table-column>
|
|
|
+ <el-table-column prop="productName" label="商品名称">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.productName || '--' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="specName" label="规格" width="150">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.specName || '--' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="priceMoney" label="售价" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.originPrice || '--' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="payAmount" label="实付" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.paymentType == 1">{{ scope.row.pointsUsed }}积分</span>
|
|
|
+ <span v-else-if="scope.row.paymentType == 2">¥{{ scope.row.payAmount }}</span>
|
|
|
+ <span v-else-if="scope.row.paymentType == 3">¥{{ scope.row.payAmount }}+{{ scope.row.pointsUsed }}积分</span>
|
|
|
+ <span v-else>--</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
</el-table>
|
|
|
</div>
|
|
|
</el-card>
|
|
|
|
|
|
- <el-card class="box-card">
|
|
|
+ <el-card class="box-card" v-if="orderInfo.orderStatus == 4">
|
|
|
<div slot="header" class="clearfix">
|
|
|
<span class="section-title">售后信息</span>
|
|
|
</div>
|
|
|
<div class="info-table">
|
|
|
<el-table :data="[afterSalesInfo]" style="width: 100%;">
|
|
|
- <el-table-column prop="type" label="售后类型" width="120"></el-table-column>
|
|
|
- <el-table-column prop="applyTime" label="申请时间" width="180"></el-table-column>
|
|
|
- <el-table-column prop="reason" label="申请原因"></el-table-column>
|
|
|
+ <el-table-column prop="type" label="售后类型" width="120">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span v-if="scope.row.afterSaleType == 1">退货</span>
|
|
|
+ <span v-else-if="scope.row.afterSaleType == 2">换货</span>
|
|
|
+ <span v-else>--</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="applyTime" label="申请时间" width="180">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.createTime || '--' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="reason" label="申请原因">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.row.applyReason || '--' }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<el-table-column label="物流单号(寄回)" width="200">
|
|
|
<template slot-scope="scope">
|
|
|
<div class="logistics-info">
|
|
|
- <span>{{ scope.row.logisticsNo }}</span>
|
|
|
+ <span>{{ scope.row.logisticsNo || '--' }}</span>
|
|
|
<el-button type="text" size="small" @click="editLogisticsNo">
|
|
|
<i class="el-icon-edit"></i>
|
|
|
</el-button>
|
|
|
@@ -243,14 +348,25 @@ export default {
|
|
|
</el-table-column>
|
|
|
<el-table-column prop="cost" label="费用" width="100">
|
|
|
<template slot-scope="scope">
|
|
|
- <el-button type="primary" size="small" @click="viewAfterSalesDetails">查看详情</el-button>
|
|
|
+ <el-link type="primary" @click="viewAfterSalesDetails(scope.row)">查看详情</el-link>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="操作" width="300">
|
|
|
+ <el-table-column prop="afterSaleStatus" label="状态" width="150">
|
|
|
<template slot-scope="scope">
|
|
|
- <div class="after-sales-actions">
|
|
|
- <el-button type="success" size="small" @click="agreeReturn">同意退货</el-button>
|
|
|
- <el-button type="success" size="small" @click="agreeRefund">同意退款</el-button>
|
|
|
+ {{afterSaleOption.filter(item => item.value == scope.row.afterSaleStatus)[0].label}}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="100">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <!-- 退货 -->
|
|
|
+ <div class="after-sales-actions" v-if="scope.row.afterSaleType == 1">
|
|
|
+ <el-link type="success" @click="agreeReturn" v-if="scope.row.afterSaleStatus == 0">同意退货</el-link>
|
|
|
+ <el-link type="success" @click="agreeReturn" v-if="scope.row.afterSaleStatus == 4">同意退款</el-link>
|
|
|
+ </div>
|
|
|
+ <!-- 换货 -->
|
|
|
+ <div class="after-sales-actions" v-if="scope.row.afterSaleType == 2">
|
|
|
+ <el-link type="success" @click="agreeReturn" v-if="scope.row.afterSaleStatus == 0">同意换货</el-link>
|
|
|
+ <el-link type="success" @click="agreeReturn" v-if="scope.row.afterSaleStatus == 4">确认收货</el-link>
|
|
|
</div>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
@@ -284,7 +400,6 @@ export default {
|
|
|
<!-- 售后详情弹窗组件 -->
|
|
|
<after-sales-details
|
|
|
ref="afterSaleDetailsRef"
|
|
|
- :order-status-option="orderStatusOption"
|
|
|
@confirm="handleConfirmCostDetails"
|
|
|
></after-sales-details>
|
|
|
</div>
|