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) => { ...@@ -128,3 +128,13 @@ export const brokerOwnerListAll = (params) => {
description: '云鹊店铺-订单管理-招募人列表', 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 @@ ...@@ -2,13 +2,86 @@
<div class="order-detail-wrapper"> <div class="order-detail-wrapper">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird" :jumPathThird="jumPathThird"></bread-crumb> <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird" :jumPathThird="jumPathThird"></bread-crumb>
<div class="order-detail-content screenSet" id="screenSet"> <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="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 == 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 == 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 == 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"> <div class="trade-info">
<el-card class="left-card"> <el-card class="left-card">
<div slot="header" class="clearfix"> <div slot="header" class="clearfix">
...@@ -61,11 +134,11 @@ ...@@ -61,11 +134,11 @@
</div> </div>
<div v-if="(showStatus == 3) && (storeType == 1 || storeType == 2)"> <div v-if="(showStatus == 3) && (storeType == 1 || storeType == 2)">
<div class="trade-status1"> <div class="trade-status1">
<p> <!-- <p>
<i class="el-icon-truck" style="font-size: 18px"></i> <i class="el-icon-truck" style="font-size: 18px"></i>
<span class="send-status">{{storeType == 1 ? '待发货' : '待配送'}}</span> <span class="send-status">{{storeType == 1 ? '待发货' : '待配送'}}</span>
</p> </p> -->
<el-button type="text" @click="showSendDialog">{{storeType == 1 ? '去发货' : '去配送'}}</el-button> <!-- <el-button type="text" @click="showSendDialog">{{storeType == 1 ? '去发货' : '去配送'}}</el-button> -->
</div> </div>
<p>收货地址：{{orderDetailData.receiverAddr}}，{{orderDetailData.receiver}}，{{orderDetailData.receiverMobile}}</p> <p>收货地址：{{orderDetailData.receiverAddr}}，{{orderDetailData.receiver}}，{{orderDetailData.receiverMobile}}</p>
</div> </div>
...@@ -93,40 +166,6 @@ ...@@ -93,40 +166,6 @@
</div> </div>
</el-card> </el-card>
</div> </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> </div>
<send-set-dialog <send-set-dialog
:sendGoodsDialog="sendGoodsDialog" :sendGoodsDialog="sendGoodsDialog"
...@@ -162,8 +201,9 @@ ...@@ -162,8 +201,9 @@
<script> <script>
// import { openLoading, closeLoading } from "../../utils/utils"; // import { openLoading, closeLoading } from "../../utils/utils";
import BreadCrumb from "@/components/breadcrumb.vue"; 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"; import SendSetDialog from "@/components/shop/send-set-dialog";
export default { export default {
components: { components: {
BreadCrumb, BreadCrumb,
...@@ -221,7 +261,10 @@ ...@@ -221,7 +261,10 @@
dtType: 1, dtType: 1,
sendSetForm: {}, sendSetForm: {},
showOrderNoFlag: false, showOrderNoFlag: false,
expressType: 1 expressType: 1,
isShowRefundDetail: false, // 是否展示退款说明弹窗
statusImgUrl: '',
showStatusStr: '', // 订单状态文案
} }
}, },
created() { created() {
...@@ -233,6 +276,25 @@ ...@@ -233,6 +276,25 @@
this.init(); this.init();
}, },
methods: { 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() { init() {
queryOrderDetail(this.orderId).then(res => { queryOrderDetail(this.orderId).then(res => {
if (res.code == '000000') { if (res.code == '000000') {
...@@ -241,6 +303,8 @@ ...@@ -241,6 +303,8 @@
this.showStatus = res.data.showStatus; this.showStatus = res.data.showStatus;
this.expressType = res.data.expressType; // 小店 1.普通快递，2云鹊快递 this.expressType = res.data.expressType; // 小店 1.普通快递，2云鹊快递
this.tableData = goodsInfoDtoList; this.tableData = goodsInfoDtoList;
this.showStatusStr = res.data.showStatusStr;
this.statusImgUrl = require(`../../assets/image/order/order_status${res.data.showStatus}.png`);
this.viewLogistics() this.viewLogistics()
} }
}) })
...@@ -375,37 +439,61 @@ ...@@ -375,37 +439,61 @@
.order-detail-content{ .order-detail-content{
background: #fff; background: #fff;
padding: 10px; padding: 10px;
.header-title{ .order-detail-header {
padding: 10px 12px; border-bottom: 1px solid #efefef;
font-size: 13px; }
color: #449284; .header-title {
border-bottom: 1px solid #efefef; font-size: 13px;
} color: #449284;
.detail-all-info{ line-height: 35px;
}
.trade-status{ .trade-status{
display: flex; font-size: 20px;
align-items: center; padding-bottom: 15px;
justify-content: center;
padding: 30px 0;
text-align: center;
font-size: 24px;
img{ img{
width: 25px; width: 25px;
height: 25px; height: 25px;
margin-right: 15px; margin-right: 15px;
vertical-align: -6px;
} }
.set-icon{ .set-icon{
color: #449284; color: #449284;
font-size: 28px; font-size: 20px;
margin-right: 10px; 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{ .trade-info{
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
font-size: 13px; font-size: 13px;
justify-content: space-between; justify-content: space-between;
margin-top: 30px;
.el-card__body{ .el-card__body{
padding-top: 10px; padding-top: 10px;
} }
...@@ -435,6 +523,7 @@ ...@@ -435,6 +523,7 @@
.right-card{ .right-card{
width: 28%; width: 28%;
display: inline-block; display: inline-block;
max-height: 280px;
} }
.left-card, .right-card{ .left-card, .right-card{
p{ p{
...@@ -451,29 +540,6 @@ ...@@ -451,29 +540,6 @@
clear: both 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{ .el-button--text{
......
src/views/goods/order-manage.vue
浏览文件 @ a4242ea4
...@@ -123,7 +123,7 @@ ...@@ -123,7 +123,7 @@
>导出订单</el-button >导出订单</el-button
> >
</div> </div>
<div class="button-container"> <!-- <div class="button-container">
<el-button <el-button
type="primary" type="primary"
size="small" size="small"
...@@ -136,18 +136,27 @@ ...@@ -136,18 +136,27 @@
@click="ShowExportDialog(2)" @click="ShowExportDialog(2)"
>批量取消订单</el-button >批量取消订单</el-button
> >
</div> </div> -->
</el-col> </el-col>
</el-row> </el-row>
</el-form> </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="all"></el-tab-pane>
<el-tab-pane label="等待买家付款" name="first"></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="second"></el-tab-pane>
<el-tab-pane label="已发货" name="third"></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="fourth"></el-tab-pane>
<el-tab-pane label="退款/关闭" name="five"></el-tab-pane> <el-tab-pane label="退款/关闭" name="five"></el-tab-pane>
</el-tabs> </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 <el-table
:data="tableData" :data="tableData"
border border
...@@ -187,7 +196,7 @@ ...@@ -187,7 +196,7 @@
</el-table-column> </el-table-column>
<el-table-column <el-table-column
prop="amount" prop="amount"
label="实收款" label="订单实付"
min-width="100" min-width="100"
align="center" align="center"
> >
...@@ -258,6 +267,38 @@ ...@@ -258,6 +267,38 @@
</p> </p>
</template> </template>
</el-table-column> </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 <el-table-column
prop="commissionAmount" prop="commissionAmount"
...@@ -322,7 +363,7 @@ ...@@ -322,7 +363,7 @@
<!--<el-button @click="closeTrade(scope.row)" type="text" size="small">关闭交易</el-button>--> <!--<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="changePrice(scope.row)" type="text" size="small">修改价格</el-button>-->
<!-- <el-button @click="sendGoods(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=" v-if="
scope.row.storeType == 1 && scope.row.storeType == 1 &&
scope.row.showStatus == 3 && scope.row.showStatus == 3 &&
...@@ -360,11 +401,11 @@ ...@@ -360,11 +401,11 @@
type="text" type="text"
size="small" size="small"
>配送完成</el-button >配送完成</el-button
> > -->
<el-button @click="goDetail(scope.row)" type="text" size="small" <el-button @click="goDetail(scope.row)" type="text" size="small"
>查看详情</el-button >查看详情</el-button
> >
<el-button <!-- <el-button
v-if=" v-if="
(scope.row.storeType == 1 || scope.row.storeType == 2) && (scope.row.storeType == 1 || scope.row.storeType == 2) &&
scope.row.showStatus == 3 && scope.row.showStatus == 3 &&
...@@ -374,7 +415,7 @@ ...@@ -374,7 +415,7 @@
type="text" type="text"
size="small" size="small"
>退款退货</el-button >退款退货</el-button
> > -->
<!-- <el-button type="text" size="small">查看物流</el-button> --> <!-- <el-button type="text" size="small">查看物流</el-button> -->
</div> </div>
</template> </template>
...@@ -1278,6 +1319,9 @@ export default { ...@@ -1278,6 +1319,9 @@ export default {
} else if (this.activeName == "five") { } else if (this.activeName == "five") {
//交易关闭 //交易关闭
this.searchForm.showStatus = 5; this.searchForm.showStatus = 5;
} else if (this.activeName == "six") {
//交易关闭
this.searchForm.showStatus = 6;
} }
this.searchForm.pageNo = 1; this.searchForm.pageNo = 1;
this.searchList(); this.searchList();
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或