优化买家端订单详情页,优化卖家端、平台端优惠券显示。优化结算页无效商品提示。

master
paulGao 2022-08-12 18:40:32 +08:00
parent aaf1c172de
commit 8ff6c0414a
4 changed files with 291 additions and 112 deletions

View File

@ -1,17 +1,50 @@
<template>
<div class="order-detail" v-if="order.order">
<card _Title="订单详情" :_Size="16"></card>
<Card class="mb_10" v-if="order.allowOperationVO.pay || order.allowOperationVO.rog || order.allowOperationVO.cancel">
<Button type="success" @click="goPay(order.order.sn)" size="small" v-if="order.allowOperationVO.pay"></Button>
<Button type="info" @click="received(order.order.sn)" size="small" v-if="order.allowOperationVO.rog"></Button>
<Button type="error" @click="handleCancelOrder(order.order.sn)" v-if="order.allowOperationVO.cancel" size="small"></Button>
<Card
class="mb_10"
v-if="
order.allowOperationVO.pay ||
order.allowOperationVO.rog ||
order.allowOperationVO.cancel
"
>
<Button
type="success"
@click="goPay(order.order.sn)"
size="small"
v-if="order.allowOperationVO.pay"
>去支付</Button
>
<Button
type="info"
@click="received(order.order.sn)"
size="small"
v-if="order.allowOperationVO.rog"
>确认收货</Button
>
<Button
type="error"
@click="handleCancelOrder(order.order.sn)"
v-if="order.allowOperationVO.cancel"
size="small"
>取消订单</Button
>
</Card>
<p class="verificationCode" v-if="order.order.verificationCode"><span>{{order.order.verificationCode}}</span></p>
<p class="verificationCode" v-if="order.order.verificationCode">
核验码<span>{{ order.order.verificationCode }}</span>
</p>
<div class="order-card">
<p class="global_color fontsize_18">{{ order.orderStatusValue }}</p>
<p>订单号{{ order.order.sn }}</p>
<div style="color:#999;" class="operation-time">操作时间{{order.order.updateTime}}</div>
<Steps class="progress" :current="progressList.length" direction="vertical">
<div style="color: #999" class="operation-time">
操作时间{{ order.order.updateTime || order.order.createTime }}
</div>
<Steps
class="progress"
:current="progressList.length"
direction="vertical"
>
<Step
:title="progress.message"
:content="progress.createTime"
@ -22,46 +55,55 @@
</div>
<div class="order-card">
<h3>收货人信息</h3>
<p>收货人{{order.order.consigneeName}}</p>
<p>手机号码{{order.order.consigneeMobile | secrecyMobile}}</p>
<p>收货地址{{order.order.consigneeAddressPath | unitAddress}} {{order.order.consigneeDetail}}</p>
<p>收货人{{ order.order.consigneeName }}</p>
<p>手机号码{{ order.order.consigneeMobile | secrecyMobile }}</p>
<p>
收货地址{{ order.order.consigneeAddressPath | unitAddress }}
{{ order.order.consigneeDetail }}
</p>
</div>
<div class="order-card">
<h3>付款信息</h3>
<p>支付方式{{order.paymentMethodValue}}</p>
<p>付款状态{{order.payStatusValue}}</p>
<p>支付方式{{ order.paymentMethodValue }}</p>
<p>付款状态{{ order.payStatusValue }}</p>
</div>
<div class="order-card" v-if="!order.order.verificationCode">
<h3>配送信息</h3>
<p>配送方式{{order.deliveryMethodValue}}</p>
<p>配送状态{{order.deliverStatusValue}}</p>
<p v-if="logistics">{{logistics.shipper || ''}}</p>
<p v-if="logistics">{{logistics.logisticCode || ''}}</p>
<p>配送方式{{ order.deliveryMethodValue }}</p>
<p>配送状态{{ order.deliverStatusValue }}</p>
<p v-if="logistics">
物流信息{{ logistics.shipper || "暂无物流信息" }}
</p>
<p v-if="logistics">
物流单号{{ logistics.logisticCode || "暂无物流单号" }}
</p>
<div class="div-express-log" v-if="logistics">
<div class="express-log">
<p>订单日志</p>
<div v-for="(item, index) in logistics.traces" :key="index">
<span class="time">{{ item.AcceptTime }}</span>
<span class="detail">{{ item.AcceptStation }}</span>
</div>
<div class="express-log">
<p>订单日志</p>
<div v-for="(item, index) in logistics.traces" :key="index">
<span class="time">{{ item.AcceptTime }}</span>
<span class="detail">{{ item.AcceptStation }}</span>
</div>
</div>
</div>
</div>
<div class="order-card" v-if="order.order.payStatus === 'PAID'">
<h3>发票信息</h3>
<template v-if="order.order.needReceipt">
<p>发票抬头{{order.receipt.receiptTitle}}</p>
<p>发票内容{{order.receipt.receiptContent}}</p>
<p v-if="order.receipt.taxpayerId">{{order.receipt.taxpayerId}}</p>
<p>发票抬头{{ order.receipt.receiptTitle }}</p>
<p>发票内容{{ order.receipt.receiptContent }}</p>
<p v-if="order.receipt.taxpayerId">
纳税人识别号{{ order.receipt.taxpayerId }}
</p>
</template>
<div v-else style="color:#999;margin-left:5px">
未开发票
</div>
<div v-else style="color: #999; margin-left: 5px">未开发票</div>
</div>
<!-- 订单商品 -->
<div class="goods">
<div class="shop-name">
<span @click="shopPage(order.order.storeId)">{{ order.order.storeName }}</span>
<span @click="shopPage(order.order.storeId)">{{
order.order.storeName
}}</span>
</div>
<table>
<thead>
@ -77,21 +119,52 @@
<tbody>
<tr v-for="(goods, goodsIndex) in order.orderItems" :key="goodsIndex">
<td>
<img @click="goodsDetail(goods.skuId, goods.goodsId)" :src="goods.image" alt="" />
<img
@click="goodsDetail(goods.skuId, goods.goodsId)"
:src="goods.image"
alt=""
/>
<div>
<p @click="goodsDetail(goods.skuId, goods.goodsId)" class="hover-color">
<p
@click="goodsDetail(goods.skuId, goods.goodsId)"
class="hover-color"
>
{{ goods.goodsName }}
</p>
</div>
</td>
<td>{{ goods.id }}</td>
<td>{{ goods.goodsPrice | unitPrice('¥') }}</td>
<td>{{ goods.goodsPrice | unitPrice("¥") }}</td>
<td>{{ goods.num }}</td>
<td>{{ (goods.goodsPrice * goods.num) | unitPrice('¥') }}</td>
<td>{{ (goods.goodsPrice * goods.num) | unitPrice("¥") }}</td>
<td>
<Button v-if="goods.afterSaleStatus.includes('NOT_APPLIED') || goods.afterSaleStatus.includes('PART_AFTER_SALE')" @click="applyAfterSale(goods.sn)" type="info" size="small" class="mb_5"></Button>
<Button v-if="goods.commentStatus == 'UNFINISHED'" @click="comment(order.order.sn, goodsIndex)" size="small" type="success" class="fontsize_12 mb_5" >评价</Button>
<Button v-if="goods.complainStatus == 'NO_APPLY'" @click="complain(order.order.sn, goodsIndex)" type="warning" class="fontsize_12" size="small"></Button>
<Button
v-if="
goods.afterSaleStatus.includes('NOT_APPLIED') ||
goods.afterSaleStatus.includes('PART_AFTER_SALE')
"
@click="applyAfterSale(goods.sn)"
type="info"
size="small"
class="mb_5"
>申请售后</Button
>
<Button
v-if="goods.commentStatus == 'UNFINISHED'"
@click="comment(order.order.sn, goodsIndex)"
size="small"
type="success"
class="fontsize_12 mb_5"
>评价</Button
>
<Button
v-if="goods.complainStatus == 'NO_APPLY'"
@click="complain(order.order.sn, goodsIndex)"
type="warning"
class="fontsize_12"
size="small"
>投诉</Button
>
</td>
</tr>
</tbody>
@ -102,127 +175,179 @@
<span>商品件数</span><span>{{ order.order.goodsNum }}</span>
</div>
<div>
<span>商品总价</span><span>{{ order.order.goodsPrice | unitPrice("¥") }}</span><br>
<span>商品总价</span
><span>{{ order.order.goodsPrice | unitPrice("¥") }}</span
><br />
</div>
<div>
<span>运费</span><span>+{{ order.order.freightPrice | unitPrice("¥") }}</span><br>
<span>运费</span
><span>+{{ order.order.freightPrice | unitPrice("¥") }}</span
><br />
</div>
<div v-if="order.order.priceDetailDTO.couponPrice">
<span>优惠券</span
><span
>-{{
order.order.priceDetailDTO.couponPrice || 0 | unitPrice("¥")
}}</span
>
</div>
<div v-if="order.order.discountPrice">
<span>活动优惠</span
><span>-{{ order.order.discountPrice | unitPrice("¥") }}</span>
</div>
<div v-if="order.order.priceDetailDTO.couponPrice"><span>优惠券</span><span>-{{ order.order.priceDetailDTO.couponPrice || 0 | unitPrice("¥") }}</span></div>
<div v-if="order.order.discountPrice"><span>活动优惠</span><span>-{{ order.order.discountPrice | unitPrice("¥") }}</span></div>
<div>
<span>应付金额</span>
<span class="actrual-price">{{ order.order.flowPrice | unitPrice("¥") }}</span>
<span class="actrual-price">{{
order.order.flowPrice | unitPrice("¥")
}}</span>
</div>
</div>
</div>
<Modal v-model="cancelAvail" title="请选择取消订单原因" @on-ok="sureCancel" @on-cancel="cancelAvail = false">
<RadioGroup v-model="cancelParams.reason" vertical type="button" button-style="solid">
<Modal
v-model="cancelAvail"
title="请选择取消订单原因"
@on-ok="sureCancel"
@on-cancel="cancelAvail = false"
>
<RadioGroup
v-model="cancelParams.reason"
vertical
type="button"
button-style="solid"
>
<Radio :label="item.reason" v-for="item in cancelReason" :key="item.id">
{{item.reason}}
{{ item.reason }}
</Radio>
</RadioGroup>
</Modal>
</div>
</template>
<script>
import { orderDetail, getTraces, sureReceived, cancelOrder } from '@/api/order.js';
import { afterSaleReason } from '@/api/member';
import {
orderDetail,
getTraces,
sureReceived,
cancelOrder,
} from "@/api/order.js";
import { afterSaleReason } from "@/api/member";
export default {
name: 'order-detail',
data () {
name: "order-detail",
data() {
return {
order: {}, //
progressList: [], //
logistics: "", //
cancelParams: { //
orderSn: '',
reason: ''
cancelParams: {
//
orderSn: "",
reason: "",
},
cancelAvail: false, // modal
cancelReason: [] //
cancelReason: [], //
};
},
methods: {
goodsDetail (skuId, goodsId) {
goodsDetail(skuId, goodsId) {
//
let routeUrl = this.$router.resolve({
path: '/goodsDetail',
query: { skuId, goodsId }
path: "/goodsDetail",
query: { skuId, goodsId },
});
window.open(routeUrl.href, '_blank');
window.open(routeUrl.href, "_blank");
},
//
shopPage (id) {
shopPage(id) {
let routeUrl = this.$router.resolve({
path: '/Merchant',
query: { id: id }
path: "/Merchant",
query: { id: id },
});
window.open(routeUrl.href, '_blank');
window.open(routeUrl.href, "_blank");
},
getDetail () { //
orderDetail(this.$route.query.sn).then(res => {
getDetail() {
//
orderDetail(this.$route.query.sn).then((res) => {
if (res.success) {
this.order = res.result;
this.progressList = res.result.orderLogs
this.progressList = res.result.orderLogs;
}
})
});
},
traces () { //
getTraces(this.$route.query.sn).then(res => {
traces() {
//
getTraces(this.$route.query.sn).then((res) => {
if (res.success) {
this.logistics = res.result
this.logistics = res.result;
}
})
});
},
received (sn) { //
sureReceived(sn).then(res => {
received(sn) {
//
sureReceived(sn).then((res) => {
if (res.success) {
this.$Message.success('确认收货成功')
this.getDetail()
this.$Message.success("确认收货成功");
this.getDetail();
}
})
});
},
goPay (sn) { //
this.$router.push({path: '/payment', query: {orderType: 'ORDER', sn}});
goPay(sn) {
//
this.$router.push({
path: "/payment",
query: { orderType: "ORDER", sn },
});
},
applyAfterSale (sn) { //
this.$router.push({name: 'ApplyAfterSale', query: {sn: sn}})
applyAfterSale(sn) {
//
this.$router.push({ name: "ApplyAfterSale", query: { sn: sn } });
},
comment (sn, goodsIndex) { //
this.$router.push({path: '/home/addEval', query: {sn, index: goodsIndex}})
comment(sn, goodsIndex) {
//
this.$router.push({
path: "/home/addEval",
query: { sn, index: goodsIndex },
});
},
complain (sn, goodsIndex) { //
this.$router.push({name: 'Complain', query: {sn, index: goodsIndex}})
complain(sn, goodsIndex) {
//
this.$router.push({ name: "Complain", query: { sn, index: goodsIndex } });
},
handleCancelOrder (sn) {
handleCancelOrder(sn) {
//
this.cancelParams.orderSn = sn;
afterSaleReason('CANCEL').then(res => {
afterSaleReason("CANCEL").then((res) => {
if (res.success) {
this.cancelReason = res.result;
this.cancelAvail = true
this.cancelParams.reason = this.cancelReason[0].reason
this.cancelAvail = true;
this.cancelParams.reason = this.cancelReason[0].reason;
}
})
});
},
sureCancel () { //
cancelOrder(this.cancelParams).then(res => {
sureCancel() {
//
cancelOrder(this.cancelParams).then((res) => {
if (res.success) {
this.$Message.success('取消订单成功')
this.getDetail()
this.cancelAvail = false
this.$Message.success("取消订单成功");
this.getDetail();
this.cancelAvail = false;
}
})
}
});
},
},
mounted() {
this.getDetail();
this.traces();
},
mounted () {
this.getDetail()
this.traces()
}
};
</script>
<style lang="scss" scoped>
.mb_5{
.mb_10 {
Button:nth-of-type(2) {
margin-left: 10px;
}
}
.mb_5 {
margin-bottom: 5px;
}
.order-card {
@ -323,7 +448,7 @@ table {
color: rgb(65, 63, 63);
font-weight: bold;
text-align: center;
span{
span {
color: $theme_color;
}
}

View File

@ -346,6 +346,16 @@ export default {
!res.result.checkedSkuList ||
res.result.checkedSkuList.length === 0
) {
if (res.result.skuList && res.result.skuList[0]) {
this.$Modal.warning({
title: "购物车存在无效商品!",
content:
"[" +
res.result.skuList[0].goodsSku.goodsName +
"]" +
res.result.skuList[0].errorMessage,
});
}
this.$router.push({
path: "/cart",
replace: true,

View File

@ -39,7 +39,11 @@
style="width: 200px"
></DatePicker>
</Form-item>
<Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn"
<Button
@click="handleSearch"
type="primary"
icon="ios-search"
class="search-btn"
>搜索</Button
>
</Form>
@ -59,18 +63,26 @@
>
<template slot-scope="{ row }" slot="action">
<Button
v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'"
v-if="
row.promotionStatus === 'CLOSE' || row.promotionStatus === 'NEW'
"
type="info"
size="small"
@click="see(row)"
>编辑
</Button>
<Button v-else type="default" size="small" @click="see(row, 'onlyView')"
<Button
v-else
type="default"
size="small"
@click="see(row, 'onlyView')"
>查看
</Button>
<Button
class="ml_5"
v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
v-if="
row.promotionStatus === 'START' || row.promotionStatus === 'NEW'
"
type="error"
size="small"
@click="close(row)"
@ -78,7 +90,9 @@
</Button>
<Button
class="ml_5"
v-if="row.promotionStatus === 'CLOSE' || row.promotionStatus === 'END'"
v-if="
row.promotionStatus === 'CLOSE' || row.promotionStatus === 'END'
"
type="error"
size="small"
@click="remove(row)"
@ -109,7 +123,10 @@ import {
updatePlatformCouponStatus,
deletePlatformCoupon,
} from "@/api/promotion";
import { promotionsStatusRender, promotionsScopeTypeRender } from "@/utils/promotions";
import {
promotionsStatusRender,
promotionsScopeTypeRender,
} from "@/utils/promotions";
export default {
name: "coupon",
@ -152,7 +169,10 @@ export default {
width: 100,
render: (h, params) => {
if (params.row.price) {
return h("div", this.$options.filters.unitPrice(params.row.price, "¥"));
return h(
"div",
this.$options.filters.unitPrice(params.row.price, "¥")
);
} else {
return h("div", params.row.couponDiscount + "折");
}
@ -172,6 +192,14 @@ export default {
);
},
},
{
title: "已被使用的数量/已领取数量",
key: "publishNum",
render: (h, params) => {
return h("div", params.row.usedNum + "/" + params.row.receivedNum);
},
},
{
title: "优惠券类型",
key: "couponType",
@ -207,7 +235,8 @@ export default {
} else if (params?.row?.startTime && params?.row?.endTime) {
return h("div", {
domProps: {
innerHTML: params.row.startTime + "<br/>" + params.row.endTime,
innerHTML:
params.row.startTime + "<br/>" + params.row.endTime,
},
});
}
@ -349,7 +378,7 @@ export default {
getPlatformCouponList(this.searchForm).then((res) => {
this.loading = false;
if (res.success) {
console.log(res)
console.log(res);
this.data = res.result.records;
this.total = res.result.total;
}

View File

@ -65,7 +65,9 @@
>
<template slot-scope="{ row }" slot="action">
<Button
v-if="row.promotionStatus === 'NEW' || row.promotionStatus === 'CLOSE'"
v-if="
row.promotionStatus === 'NEW' || row.promotionStatus === 'CLOSE'
"
type="info"
size="small"
@click="see(row)"
@ -75,7 +77,9 @@
>查看</Button
>
<Button
v-if="row.promotionStatus === 'START' || row.promotionStatus === 'NEW'"
v-if="
row.promotionStatus === 'START' || row.promotionStatus === 'NEW'
"
type="error"
size="small"
:style="{ marginLeft: '5px' }"
@ -104,7 +108,10 @@
<script>
import { getShopCouponList, updateCouponStatus } from "@/api/promotion";
import { promotionsStatusRender, promotionsScopeTypeRender } from "@/utils/promotions";
import {
promotionsStatusRender,
promotionsScopeTypeRender,
} from "@/utils/promotions";
export default {
name: "coupon",
@ -167,6 +174,13 @@ export default {
);
},
},
{
title: "已被使用的数量/已领取数量",
key: "publishNum",
render: (h, params) => {
return h("div", params.row.usedNum + "/" + params.row.receivedNum);
},
},
{
title: "优惠券类型",
key: "couponType",
@ -200,7 +214,8 @@ export default {
} else if (params?.row?.startTime && params?.row?.endTime) {
return h("div", {
domProps: {
innerHTML: params.row.startTime + "<br/>" + params.row.endTime,
innerHTML:
params.row.startTime + "<br/>" + params.row.endTime,
},
});
}