Skip to content

P
pica.cloud.web-education-admin
提交 a4242ea4 编写于 作者: shuang.zhou's avatar shuang.zhou
浏览文件
操作

订单详情页 样式修改 & 退款说明

上级 98c5e6af
显示空白字符变更
内嵌 并排
正在显示 包含 208 行增加 和 88 行删除
src/utils/shop/index.js
浏览文件 @ a4242ea4
......@@ -128,3 +128,13 @@ export const brokerOwnerListAll = (params) => {
description: '云鹊店铺-订单管理-招募人列表',
})
};
// 获取退款说明
export const getRefundDesc = (params) => {
return fetch({
headers,
url: getBaseUrl(`/store/orders/admin/queryRefundDesc/${params.orderId}/${params.goodsId}`),
method: 'post',
data: params,
description: '退货',
})
};
src/views/goods/order-detail.vue
浏览文件 @ a4242ea4
......@@ -2,13 +2,86 @@
<div class="order-detail-wrapper">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird" :jumPathThird="jumPathThird"></bread-crumb>
<div class="order-detail-content screenSet" id="screenSet">
<div class="header-title">订单详情</div>
<el-row :gutter="20" class="order-detail-header">
<el-col :span="20"><div class="header-title">订单详情</div></el-col>
<el-col :span="4" >
<div class="trade-status"><img :src="statusImgUrl"/> {{showStatusStr}}</div>
</el-col>
</el-row>
<!-- <div class="header-title">订单详情</div> -->
<div class="detail-all-info">
<div class="trade-status" v-if="showStatus == 1"><img src="../../assets/image/order/order_status1.png"/>交易成功</div>
<!-- <div class="trade-status" v-if="showStatus == 1"><img src="../../assets/image/order/order_status1.png"/>交易成功</div>
<div class="trade-status" v-if="showStatus == 2"><img src="../../assets/image/order/order_status2.png"/>已发货</div>
<div class="trade-status" v-if="showStatus == 3"><img src="../../assets/image/order/order_status3.png"/>待发货</div>
<div class="trade-status" v-if="showStatus == 4"><img src="../../assets/image/order/order_status4.png"/>等待买家付款</div>
<div class="trade-status" v-if="showStatus == 5"><img src="../../assets/image/order/order_status5.png"/>退款/关闭</div>
<div class="trade-status" v-if="showStatus == 5"><img src="../../assets/image/order/order_status5.png"/>退款/关闭</div> -->
<!-- 表格 -->
<el-table :data="tableData" border class="item-table" style="width: 100%;margin-top: 30px;">
<el-table-column prop="goodsName" label="商品名称" min-width="100" align="center">
<template slot-scope="scope">
<div style="cursor: pointer;color: #449284" @click="goGoodsEdit(scope.row)">{{ scope.row.goodsName }}</div>
</template>
</el-table-column>
<el-table-column prop="size" label="规格" min-width="100" align="center"></el-table-column>
<el-table-column prop="goodsQuantity" label="数量" min-width="100" align="center">
<template slot-scope="scope">
<span>×{{ scope.row.goodsQuantity }}</span>
</template>
</el-table-column>
<el-table-column prop="price" label="单价" min-width="100" align="center">
<template slot-scope="scope">
<span>￥{{ scope.row.price | toFixed2 }}</span>
</template>
</el-table-column>
<el-table-column prop="totalPrice" label="商品总额" min-width="100" align="center">
<template slot-scope="scope">
<span>￥{{ scope.row.totalPrice | toFixed2 }}</span>
</template>
</el-table-column>
<el-table-column prop="amount" label="商品实付" min-width="100" align="center">
<template slot-scope="scope">
<span>￥{{ scope.row.amount | toFixed2 }}</span>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" min-width="100" align="center">
<template slot-scope="scope">
<span>{{orderDetailData.showStatusStr}}</span>
</template>
</el-table-column>
<el-table-column prop="expressCompany" label="物流公司" min-width="100" align="center">
<template slot-scope="scope">
<span>{{scope.row.expressCompany || '--'}}</span>
</template>
</el-table-column>
<el-table-column prop="expressNo" label="物流公司单号" min-width="110" align="center">
<template slot-scope="scope">
<span>{{scope.row.expressNo || '--'}}</span>
</template>
</el-table-column>
<el-table-column prop="belongPackage" label="所属包裹" min-width="100" align="center">
<template slot-scope="scope">
<span>{{scope.row.belongPackage || '所属包裹'}}</span>
</template>
</el-table-column>
<el-table-column prop="refundDesc" label="退款说明" min-width="100" align="center">
<template slot-scope="scope">
<el-button v-if="[6, 7, 8].includes(scope.row.status)" type="text" @click="showRefundDetail(scope.row.goodsId,scope.row.id)">查看</el-button>
<span v-else> -- </span>
</template>
</el-table-column>
</el-table>
<div class="total-set">
<p><span>商品总额：</span><span>￥{{orderDetailData.totalPrice | toFixed2}}</span></p>
<p><span>优惠：</span><span>-￥{{orderDetailData.totalCouponFee | toFixed2}}</span></p>
<p><span>&nbsp;运费：</span>
<span v-if="orderDetailData.expressFee == 0">免运费</span>
<span v-else-if="orderDetailData.expressFee != 0">￥{{orderDetailData.expressFee | toFixed2}}</span>
</p>
<p class="total-price" v-if="showStatus == 1 || showStatus == 2 || showStatus == 3"><span>实付：</span><span>￥{{orderDetailData.amount | toFixed2}}</span></p>
<p class="total-price" v-if="showStatus == 4"><span>应付：</span><span>￥{{(orderDetailData.totalPrice)| toFixed2}}</span></p>
<p class="total-price" v-if="showStatus == 5"><span>实付：</span><span>￥0.00</span></p>
</div>
<!-- 物流信息 -->
<div class="trade-info">
<el-card class="left-card">
<div slot="header" class="clearfix">
......@@ -61,11 +134,11 @@
</div>
<div v-if="(showStatus == 3) && (storeType == 1 || storeType == 2)">
<div class="trade-status1">
<p>
<!-- <p>
<i class="el-icon-truck" style="font-size: 18px"></i>
<span class="send-status">{{storeType == 1 ? '待发货' : '待配送'}}</span>
</p>
<el-button type="text" @click="showSendDialog">{{storeType == 1 ? '去发货' : '去配送'}}</el-button>
</p> -->
<!-- <el-button type="text" @click="showSendDialog">{{storeType == 1 ? '去发货' : '去配送'}}</el-button> -->
</div>
<p>收货地址：{{orderDetailData.receiverAddr}}，{{orderDetailData.receiver}}，{{orderDetailData.receiverMobile}}</p>
</div>
......@@ -93,40 +166,6 @@
</div>
</el-card>
</div>
<el-table :data="tableData" border class="item-table" style="width: 100%;margin-top: 30px;">
<el-table-column prop="goodsName" label="商品名称" min-width="100" align="center">
<template slot-scope="scope">
<div style="cursor: pointer;color: #449284" @click="goGoodsEdit(scope.row)">{{ scope.row.goodsName }}</div>
</template>
</el-table-column>
<el-table-column prop="size" label="规格" min-width="100" align="center"></el-table-column>
<el-table-column prop="goodsQuantity" label="数量" min-width="100" align="center">
<template slot-scope="scope">
<span>×{{ scope.row.goodsQuantity }}</span>
</template>
</el-table-column>
<el-table-column prop="price" label="单价" min-width="100" align="center">
<template slot-scope="scope">
<span>￥{{ scope.row.price | toFixed2 }}</span>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" min-width="100" align="center">
<template slot-scope="scope">
<span>{{orderDetailData.showStatusStr}}</span>
</template>
</el-table-column>
</el-table>
<div class="total-set">
<p><span>商品总额：</span><span>￥{{orderDetailData.totalPrice | toFixed2}}</span></p>
<p><span>优惠：</span><span>-￥{{orderDetailData.totalCouponFee | toFixed2}}</span></p>
<p><span>&nbsp;运费：</span>
<span v-if="orderDetailData.expressFee == 0">免运费</span>
<span v-else-if="orderDetailData.expressFee != 0">￥{{orderDetailData.expressFee | toFixed2}}</span>
</p>
<p class="total-price" v-if="showStatus == 1 || showStatus == 2 || showStatus == 3"><span>实付：</span><span>￥{{orderDetailData.amount | toFixed2}}</span></p>
<p class="total-price" v-if="showStatus == 4"><span>应付：</span><span>￥{{(orderDetailData.totalPrice)| toFixed2}}</span></p>
<p class="total-price" v-if="showStatus == 5"><span>实付：</span><span>￥0.00</span></p>
</div>
</div>
<send-set-dialog
:sendGoodsDialog="sendGoodsDialog"
......@@ -162,8 +201,9 @@
<script>
// import { openLoading, closeLoading } from "../../utils/utils";
import BreadCrumb from "@/components/breadcrumb.vue";
import { queryOrderDetail, updateExpressNo, expressInfo } from '@/utils/shop';
import { queryOrderDetail, updateExpressNo, expressInfo, getRefundDesc } from '@/utils/shop';
import SendSetDialog from "@/components/shop/send-set-dialog";
export default {
components: {
BreadCrumb,
......@@ -221,7 +261,10 @@
dtType: 1,
sendSetForm: {},
showOrderNoFlag: false,
expressType: 1
expressType: 1,
isShowRefundDetail: false, // 是否展示退款说明弹窗
statusImgUrl: '',
showStatusStr: '', // 订单状态文案
}
},
created() {
......@@ -233,6 +276,25 @@
this.init();
},
methods: {
// 退款说明
showRefundDetail(goodsId, orderId) {
let parmas = {
goodsId: goodsId,
orderId: orderId
}
getRefundDesc(parmas).then(res => {
if (res.code == "000000") {
this.isShowRefundDetail = true;
this.$alert(`<p>退款方式：${res.refundWay}</p>
<p>退款金额：${res.refundAmount}元</p>
<p>退款对象：${res.refundObject}</p>
<p>退款理由：${res.refundReason}</p>`,
'退款说明', {
dangerouslyUseHTMLString: true
});
}
})
},
init() {
queryOrderDetail(this.orderId).then(res => {
if (res.code == '000000') {
......@@ -241,6 +303,8 @@
this.showStatus = res.data.showStatus;
this.expressType = res.data.expressType; // 小店 1.普通快递，2云鹊快递
this.tableData = goodsInfoDtoList;
this.showStatusStr = res.data.showStatusStr;
this.statusImgUrl = require(`../../assets/image/order/order_status${res.data.showStatus}.png`);
this.viewLogistics()
}
})
......@@ -375,37 +439,61 @@
.order-detail-content{
background: #fff;
padding: 10px;
.header-title{
padding: 10px 12px;
.order-detail-header {
border-bottom: 1px solid #efefef;
}
.header-title {
font-size: 13px;
color: #449284;
border-bottom: 1px solid #efefef;
line-height: 35px;
}
.detail-all-info{
.trade-status{
display: flex;
align-items: center;
justify-content: center;
padding: 30px 0;
text-align: center;
font-size: 24px;
font-size: 20px;
padding-bottom: 15px;
img{
width: 25px;
height: 25px;
margin-right: 15px;
vertical-align: -6px;
}
.set-icon{
color: #449284;
font-size: 28px;
font-size: 20px;
margin-right: 10px;
}
}
.total-set{
text-align: right;
margin-top: 20px;
p{
font-size: 13px;
color: #999999;
line-height: 24px;
span:first-child{
display: inline-block;
width: 72px;
text-align: left;
}
span:last-child{
display: inline-block;
width: 90px;
}
}
.total-price{
font-size: 15px;
color: #333333;
margin-top: 5px;
}
}
.detail-all-info{
padding-bottom: 30px;
.trade-info{
width: 100%;
box-sizing: border-box;
display: flex;
font-size: 13px;
justify-content: space-between;
margin-top: 30px;
.el-card__body{
padding-top: 10px;
}
......@@ -435,6 +523,7 @@
.right-card{
width: 28%;
display: inline-block;
max-height: 280px;
}
.left-card, .right-card{
p{
......@@ -451,29 +540,6 @@
clear: both
}
}
.total-set{
text-align: right;
margin-top: 10px;
p{
font-size: 13px;
color: #999999;
line-height: 24px;
span:first-child{
display: inline-block;
width: 72px;
text-align: left;
}
span:last-child{
display: inline-block;
width: 90px;
}
}
.total-price{
font-size: 15px;
color: #333333;
margin-top: 5px;
}
}
}
}
.el-button--text{
......
src/views/goods/order-manage.vue
浏览文件 @ a4242ea4
......@@ -123,7 +123,7 @@
>导出订单</el-button
>
</div>
<div class="button-container">
<!-- <div class="button-container">
<el-button
type="primary"
size="small"
......@@ -136,17 +136,26 @@
@click="ShowExportDialog(2)"
>批量取消订单</el-button
>
</div>
</div> -->
</el-col>
</el-row>
</el-form>
<el-tabs v-model="activeName" @tab-click="handleClick">
<!-- <el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="全部" name="all"></el-tab-pane>
<el-tab-pane label="等待买家付款" name="first"></el-tab-pane>
<el-tab-pane label="等待发货" name="second"></el-tab-pane>
<el-tab-pane label="已发货" name="third"></el-tab-pane>
<el-tab-pane label="交易成功" name="fourth"></el-tab-pane>
<el-tab-pane label="退款/关闭" name="five"></el-tab-pane>
</el-tabs> -->
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="全部" name="all"></el-tab-pane>
<el-tab-pane label="待支付" name="first"></el-tab-pane>
<el-tab-pane label="待发货" name="second"></el-tab-pane>
<el-tab-pane label="已发货" name="third"></el-tab-pane>
<el-tab-pane label="已完成" name="fourth"></el-tab-pane>
<el-tab-pane label="已取消" name="six"></el-tab-pane>
<el-tab-pane label="退款/关闭" name="five"></el-tab-pane>
</el-tabs>
<el-table
:data="tableData"
......@@ -187,7 +196,7 @@
</el-table-column>
<el-table-column
prop="amount"
label="实收款"
label="订单实付"
min-width="100"
align="center"
>
......@@ -258,6 +267,38 @@
</p>
</template>
</el-table-column>
<el-table-column
prop="goodsTotalPrice"
label="商品总额"
min-width="100"
align="center"
>
<template slot-scope="scope">
<p
v-for="(item, index) in scope.row.goodsTotalPrice"
:key="index"
class="p-normal"
>
￥{{ item | toFixed2 }}
</p>
</template>
</el-table-column>
<el-table-column
prop="goodsRealPay"
label="商品实付"
min-width="100"
align="center"
>
<template slot-scope="scope">
<p
v-for="(item, index) in scope.row.goodsRealPay"
:key="index"
class="p-normal"
>
￥{{ item | toFixed2 }}
</p>
</template>
</el-table-column>
<el-table-column
prop="commissionAmount"
......@@ -322,7 +363,7 @@
<!--<el-button @click="closeTrade(scope.row)" type="text" size="small">关闭交易</el-button>-->
<!--<el-button @click="changePrice(scope.row)" type="text" size="small">修改价格</el-button>-->
<!-- <el-button @click="sendGoods(scope.row)" type="text" size="small">发货</el-button>-->
<el-button
<!-- <el-button
v-if="
scope.row.storeType == 1 &&
scope.row.showStatus == 3 &&
......@@ -360,11 +401,11 @@
type="text"
size="small"
>配送完成</el-button
>
> -->
<el-button @click="goDetail(scope.row)" type="text" size="small"
>查看详情</el-button
>
<el-button
<!-- <el-button
v-if="
(scope.row.storeType == 1 || scope.row.storeType == 2) &&
scope.row.showStatus == 3 &&
......@@ -374,7 +415,7 @@
type="text"
size="small"
>退款退货</el-button
>
> -->
<!-- <el-button type="text" size="small">查看物流</el-button> -->
</div>
</template>
......@@ -1278,6 +1319,9 @@ export default {
} else if (this.activeName == "five") {
//交易关闭
this.searchForm.showStatus = 5;
} else if (this.activeName == "six") {
//交易关闭
this.searchForm.showStatus = 6;
}
this.searchForm.pageNo = 1;
this.searchList();
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或