zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

售后信息展示，单价展示问题处理

master
Chopper 2021-08-25 14:18:35 +08:00
parent b59da2c101
commit 589b7fc7c5
2 changed files with 75 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
buyer/src/pages/home/orderCenter/AfterSale.vue
View File

@ -4,7 +4,7 @@
<card _Title="我的售后" :_Size="16"></card> <card _Title="我的售后" :_Size="16"></card>
<!-- 搜索 筛选 --> <!-- 搜索 筛选 -->
<div class="mb_20 box"> <div class="mb_20 box">
<div class="global_float_right" > <div class="global_float_right">
<Input <Input
class="width_300" class="width_300"
search search
@ -16,15 +16,15 @@
</div> </div>
</div> </div>
<!-- 列表 --> <!-- 列表 -->
<empty v-if="orderList.length === 0" /> <empty v-if="orderList.length === 0"/>
<div class="order-content" v-else> <div class="order-content" v-else>
<template v-for="(order, onderIndex) in orderList"> <template v-for="(order, onderIndex) in orderList">
<div class="order-list" :key="onderIndex"> <div class="order-list" :key="onderIndex">
<div class="order-header"> <div class="order-header">
<div> <div>
<div v-if="order.serviceStatus">{{filterOrderStatus(order.serviceStatus)}}</div> <div v-if="order.serviceStatus">{{ filterOrderStatus(order.serviceStatus) }}</div>
<div> <div>
售后单号：{{ order.sn }} &nbsp; &nbsp; &nbsp;{{order.createTime}} 售后单号：{{ order.sn }} &nbsp; &nbsp; &nbsp;{{ order.createTime }}
&nbsp; &nbsp;{{ order.memberName | secrecyMobile }} &nbsp; &nbsp;{{ order.memberName | secrecyMobile }}
</div> </div>
</div> </div>
@ -34,14 +34,11 @@
</div> </div>
<div class="order-body"> <div class="order-body">
<div class="goods-list"> <div class="goods-list">
<img @click="goodsDetail(order.skuId, order.goodsId)" class="hover-color" :src="order.goodsImage" alt="" /> <img @click="goodsDetail(order.skuId, order.goodsId)" class="hover-color" :src="order.goodsImage" alt=""/>
<div> <div>
<div class="hover-color" @click="goodsDetail(order.skuId, order.goodsId)">{{ order.goodsName }}</div> <div class="hover-color" @click="goodsDetail(order.skuId, order.goodsId)">{{ order.goodsName }}</div>
<div class="mt_10"> <div class="mt_10"> x {{ order.num }}
<span class="global_color"
>{{ order.flowPrice | unitPrice("￥") }} </span
>x {{ order.num }}
</div> </div>
</div> </div>
</div> </div>
@ -52,10 +49,13 @@
<!-- 订单基础操作 --> <!-- 订单基础操作 -->
<Button @click="goDetail(order.sn)" type="info" size="small">售后详情</Button> <Button @click="goDetail(order.sn)" type="info" size="small">售后详情</Button>
<Button @click="openModal(order)" <Button @click="openModal(order)"
v-if="order.serviceStatus == 'PASS' && v-if="order.serviceStatus == 'PASS' &&
order.serviceType != 'RETURN_MONEY'" order.serviceType != 'RETURN_MONEY'"
type="warning" size="small">提交物流</Button> type="warning" size="small">提交物流
<Button @click="cancel(order.sn)" type="error" v-if="order.afterSaleAllowOperationVO.cancel" size="small">取消售后</Button> </Button>
<Button @click="cancel(order.sn)" type="error" v-if="order.afterSaleAllowOperationVO.cancel" size="small">
取消售后
</Button>
</div> </div>
</div> </div>
</div> </div>
@ -65,9 +65,9 @@
<!-- 分页 --> <!-- 分页 -->
<div class="page-size"> <div class="page-size">
<Page :total="total" @on-change="changePageNum" <Page :total="total" @on-change="changePageNum"
@on-page-size-change="changePageSize" @on-page-size-change="changePageSize"
:page-size="params.pageSize" :page-size="params.pageSize"
show-sizer> show-sizer>
</Page> </Page>
</div> </div>
<Modal v-model="logisticsShow" width="530"> <Modal v-model="logisticsShow" width="530">
@ -76,12 +76,15 @@
</p> </p>
<div> <div>
<div class="goods-list modal-goods"> <div class="goods-list modal-goods">
<img @click="goodsDetail(singleOrder.skuId, singleOrder.goodsId)" class="hover-color" :src="singleOrder.goodsImage" alt="" /> <img @click="goodsDetail(singleOrder.skuId, singleOrder.goodsId)" class="hover-color"
:src="singleOrder.goodsImage" alt=""/>
<div> <div>
<div class="hover-color" @click="goodsDetail(singleOrder.skuId, singleOrder.goodsId)">{{ singleOrder.goodsName }}</div> <div class="hover-color" @click="goodsDetail(singleOrder.skuId, singleOrder.goodsId)">
{{ singleOrder.goodsName }}
</div>
<div class="mt_10"> <div class="mt_10">
<span class="global_color" <span class="global_color"
>{{ singleOrder.flowPrice | unitPrice("￥") }} </span >{{ singleOrder.flowPrice | unitPrice("￥") }} </span
>x {{ singleOrder.num }} >x {{ singleOrder.num }}
</div> </div>
</div> </div>
@ -96,7 +99,8 @@
<Input v-model="form.logisticsNo" placeholder="请填写快递单号"></Input> <Input v-model="form.logisticsNo" placeholder="请填写快递单号"></Input>
</FormItem> </FormItem>
<FormItem label="发货时间" prop="mDeliverTime"> <FormItem label="发货时间" prop="mDeliverTime">
<DatePicker type="date" style="width:100%" v-model="form.mDeliverTime" @on-change="changeTime" format="yyyy-MM-dd" placeholder="选择发货时间"></DatePicker> <DatePicker type="date" style="width:100%" v-model="form.mDeliverTime" @on-change="changeTime"
format="yyyy-MM-dd" placeholder="选择发货时间"></DatePicker>
</FormItem> </FormItem>
</Form> </Form>
</div> </div>
@ -109,12 +113,13 @@
</template> </template>
<script> <script>
import { afterSaleList, cancelAfterSale } from '@/api/member.js'; import {afterSaleList, cancelAfterSale} from '@/api/member.js';
import { afterSaleDelivery, getLogisticsCompany } from '@/api/order.js'; import {afterSaleDelivery, getLogisticsCompany} from '@/api/order.js';
import { afterSaleStatusList } from '../enumeration.js' import {afterSaleStatusList} from '../enumeration.js'
export default { export default {
name: 'AfterSale', name: 'AfterSale',
data () { data() {
return { return {
orderList: [], // 订单列表 orderList: [], // 订单列表
params: { // 请求参数 params: { // 请求参数
@ -138,24 +143,24 @@ export default {
mDeliverTime: '' mDeliverTime: ''
}, },
rules: { // 必填校验 rules: { // 必填校验
logisticsId: [{ required: true, message: '请选择物流公司' }], logisticsId: [{required: true, message: '请选择物流公司'}],
logisticsNo: [{ required: true, message: '请填写物流编号' }], logisticsNo: [{required: true, message: '请填写物流编号'}],
mDeliverTime: [{ required: true, message: '请选择发货时间' }] mDeliverTime: [{required: true, message: '请选择发货时间'}]
}, },
submitLoading: false // 提交加载状态 submitLoading: false // 提交加载状态
}; };
}, },
mounted () { mounted() {
this.getList(); this.getList();
}, },
methods: { methods: {
goDetail (sn) { // 跳转售后详情 goDetail(sn) { // 跳转售后详情
this.$router.push({ this.$router.push({
name: 'AfterSaleDetail', name: 'AfterSaleDetail',
query: {sn} query: {sn}
}) })
}, },
cancel (sn) { // 取消售后申请 cancel(sn) { // 取消售后申请
this.$Modal.confirm({ this.$Modal.confirm({
title: '取消', title: '取消',
content: '<p>确定取消此次售后申请吗？</p>', content: '<p>确定取消此次售后申请吗？</p>',
@ -167,26 +172,27 @@ export default {
} }
}) })
}, },
onCancel: () => {} onCancel: () => {
}
}); });
}, },
goodsDetail (skuId, goodsId) { goodsDetail(skuId, goodsId) {
// 跳转商品详情 // 跳转商品详情
let routeUrl = this.$router.resolve({ let routeUrl = this.$router.resolve({
path: '/goodsDetail', path: '/goodsDetail',
query: { skuId, goodsId } query: {skuId, goodsId}
}); });
window.open(routeUrl.href, '_blank'); window.open(routeUrl.href, '_blank');
}, },
// 跳转店铺首页 // 跳转店铺首页
shopPage (id) { shopPage(id) {
let routeUrl = this.$router.resolve({ let routeUrl = this.$router.resolve({
path: '/Merchant', path: '/Merchant',
query: { id: id } query: {id: id}
}); });
window.open(routeUrl.href, '_blank'); window.open(routeUrl.href, '_blank');
}, },
getList () { // 获取售后列表 getList() { // 获取售后列表
this.spinShow = true; this.spinShow = true;
let params = JSON.parse(JSON.stringify(this.params)) let params = JSON.parse(JSON.stringify(this.params))
afterSaleList(params).then(res => { afterSaleList(params).then(res => {
@ -197,21 +203,23 @@ export default {
} }
}); });
}, },
changePageNum (val) { // 修改页码 changePageNum(val) { // 修改页码
this.params.pageNumber = val; this.params.pageNumber = val;
this.getList() this.getList()
}, },
changePageSize (val) { // 修改页数 changePageSize(val) { // 修改页数
this.params.pageNumber = 1; this.params.pageNumber = 1;
this.params.pageSize = val; this.params.pageSize = val;
this.getList() this.getList()
}, },
filterOrderStatus (status) { // 获取订单状态中文 filterOrderStatus(status) { // 获取订单状态中文
const ob = this.afterSaleStatusList.filter(e => { return e.status === status }); const ob = this.afterSaleStatusList.filter(e => {
return e.status === status
});
return ob[0].name return ob[0].name
}, },
// 获取物流公司列表 // 获取物流公司列表
getCompany () { getCompany() {
getLogisticsCompany().then(res => { getLogisticsCompany().then(res => {
if (res.success) { if (res.success) {
this.companyList = res.result this.companyList = res.result
@ -219,7 +227,7 @@ export default {
}) })
}, },
// 提交物流信息 // 提交物流信息
submitDelivery () { submitDelivery() {
this.submitLoading = true this.submitLoading = true
afterSaleDelivery(this.form).then(res => { afterSaleDelivery(this.form).then(res => {
if (res.success) { if (res.success) {
@ -233,7 +241,7 @@ export default {
}) })
}, },
// 提交物流modal // 提交物流modal
openModal (row) { openModal(row) {
console.log(row); console.log(row);
this.singleOrder = row; this.singleOrder = row;
this.form.afterSaleSn = row.sn this.form.afterSaleSn = row.sn
@ -244,7 +252,7 @@ export default {
} }
}, },
// 格式化时间 // 格式化时间
changeTime (time) { changeTime(time) {
this.form.mDeliverTime = time; this.form.mDeliverTime = time;
} }
} }
@ -255,25 +263,31 @@ export default {
.wrapper { .wrapper {
margin-bottom: 40px; margin-bottom: 40px;
} }
.box { .box {
overflow: hidden; overflow: hidden;
} }
.page-size { .page-size {
margin: 15px 0px; margin: 15px 0px;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
} }
/** 订单列表 */ /** 订单列表 */
.order-list { .order-list {
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 3px; border-radius: 3px;
margin-bottom: 10px; margin-bottom: 10px;
&:hover{ &:hover {
.del-btn{visibility: visible;} .del-btn {
visibility: visible;
}
} }
.del-btn{
.del-btn {
visibility: hidden; visibility: hidden;
} }
@ -283,12 +297,14 @@ export default {
padding: 10px; padding: 10px;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
> div:nth-child(1) > div:nth-child(2) { > div:nth-child(1) > div:nth-child(2) {
font-size: 12px; font-size: 12px;
color: #999; color: #999;
margin-top: 3px; margin-top: 3px;
} }
} }
.order-body { .order-body {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -298,16 +314,20 @@ export default {
> div:nth-child(2) { > div:nth-child(2) {
width: 150px; width: 150px;
text-align: center; text-align: center;
span { span {
color: #438cde; color: #438cde;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $theme_color; color: $theme_color;
} }
} }
.ivu-icon { .ivu-icon {
color: #ff8f23; color: #ff8f23;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $theme_color; color: $theme_color;
} }
@ -316,26 +336,31 @@ export default {
> div:nth-child(3) { > div:nth-child(3) {
width: 100px; width: 100px;
.ivu-btn { .ivu-btn {
margin-bottom: 10px; margin-bottom: 10px;
} }
} }
} }
} }
.goods-list { .goods-list {
width: 500px; width: 500px;
display: flex; display: flex;
margin-bottom: 10px; margin-bottom: 10px;
img { img {
width: 60px; width: 60px;
height: 60px; height: 60px;
margin-right: 10px; margin-right: 10px;
} }
> div { > div {
flex: 1; flex: 1;
} }
} }
.modal-goods{
.modal-goods {
padding: 5px; padding: 5px;
background-color: #eee; background-color: #eee;
} }

6
seller/src/views/order/order/orderDetail.vue
View File

@ -111,7 +111,7 @@
<div class="div-item-right"> <div class="div-item-right">
{{ orderInfo.receipt.receiptStatus == 0 ? "未开" : "已开" }} {{ orderInfo.receipt.receiptStatus == 0 ? "未开" : "已开" }}
</div> </div>
</div> </div>
</template> </template>
</Col> </Col>
<Col span="12"> <Col span="12">
@ -619,13 +619,13 @@ export default {
key: "unitPrice", key: "unitPrice",
minWidth: 100, minWidth: 100,
render: (h, params) => { render: (h, params) => {
if (!params.row.priceDetailDTO.unitPrice) { if (!params.row.unitPrice) {
return h("div", this.$options.filters.unitPrice(0, "￥")); return h("div", this.$options.filters.unitPrice(0, "￥"));
} }
return h( return h(
"div", "div",
this.$options.filters.unitPrice( this.$options.filters.unitPrice(
params.row.priceDetailDTO.unitPrice, params.row.unitPrice,
"￥" "￥"
) )
); );