panqihua
2 years ago
parent
17aaf6b018
commit
789baada09
@ -0,0 +1,94 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<div class="logistics-info">物流公司：xxxxx<br /> |
||||||
|
物流单号：xxxx<br /> |
||||||
|
起点：湖北省武汉市东西湖区xxx<br /> |
||||||
|
目的地：xxxx<br /> |
||||||
|
发货时间：xxx<br /> |
||||||
|
签收时间：xxx<br /> |
||||||
|
完成时间：xxx |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="progress"> |
||||||
|
<div class="circle start"></div> |
||||||
|
<template v-for="item in 4"> |
||||||
|
<div class="line"></div> |
||||||
|
<div class="info"> |
||||||
|
昨天<br /> |
||||||
|
15:56 |
||||||
|
<div class="line-f"> |
||||||
|
<div class="line"></div> |
||||||
|
<div class="circle"></div> |
||||||
|
<div class="line"></div> |
||||||
|
</div> |
||||||
|
已揽件<br /> |
||||||
|
xxxxxxxxxxxxxxx |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<div class="line"></div> |
||||||
|
<i class="el-icon-caret-right end" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'Progress' |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped lang="scss"> |
||||||
|
$progress-color: #1684fc; |
||||||
|
$circle-size: 20px; |
||||||
|
|
||||||
|
.logistics-info { |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
|
||||||
|
.progress { |
||||||
|
margin-top: 50px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
&>.end { |
||||||
|
font-size: #{$circle-size*1.5}; |
||||||
|
position: relative; |
||||||
|
left: -2%; |
||||||
|
color: $progress-color; |
||||||
|
} |
||||||
|
|
||||||
|
&>.line { |
||||||
|
background-color: $progress-color; |
||||||
|
height: 2px; |
||||||
|
width: 8%; |
||||||
|
} |
||||||
|
|
||||||
|
&>.info { |
||||||
|
text-align: center; |
||||||
|
|
||||||
|
&>div { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
.line { |
||||||
|
background-color: $progress-color; |
||||||
|
height: 2px; |
||||||
|
flex: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.circle { |
||||||
|
border-radius: 50%; |
||||||
|
width: $circle-size; |
||||||
|
height: $circle-size; |
||||||
|
background-color: #555353; |
||||||
|
} |
||||||
|
|
||||||
|
.circle.start { |
||||||
|
|
||||||
|
background-color: $progress-color; |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,109 +0,0 @@ |
|||||||
<template> |
|
||||||
<div> |
|
||||||
<el-form :inline="true"> |
|
||||||
<el-form-item> |
|
||||||
<el-input placeholder="订单号" /> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item> |
|
||||||
<el-input placeholder="请输入订单号" /> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item> |
|
||||||
<el-select v-model="queryParams.refund_type" placeholder="退款类型" clearable> |
|
||||||
<el-option v-for="dict in dict.type.refund_type" :key="dict.value" :label="dict.label" |
|
||||||
:value="dict.value"></el-option> |
|
||||||
</el-select> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item> |
|
||||||
<el-date-picker v-model="queryParams.dateRange" style="width: 240px" value-format="yyyy-MM-dd" |
|
||||||
type="daterange" range-separator="-" start-placeholder="开始日期" |
|
||||||
end-placeholder="结束日期"></el-date-picker> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item> |
|
||||||
<el-button type="primary">查询</el-button> |
|
||||||
<el-button>重置</el-button> |
|
||||||
</el-form-item> |
|
||||||
<br /> |
|
||||||
<el-form-item> |
|
||||||
<el-select v-model="queryParams.after_sales_order_status" placeholder="全部状态" clearable> |
|
||||||
<el-option v-for="dict in dict.type.after_sales_order_status" :key="dict.value" :label="dict.label" |
|
||||||
:value="dict.value"></el-option> |
|
||||||
</el-select> |
|
||||||
</el-form-item> |
|
||||||
<el-form-item> |
|
||||||
<el-select v-model="queryParams.refund_cause" placeholder="全部原因" clearable> |
|
||||||
<el-option v-for="dict in dict.type.refund_cause" :key="dict.value" :label="dict.label" |
|
||||||
:value="dict.value"></el-option> |
|
||||||
</el-select> |
|
||||||
</el-form-item> |
|
||||||
</el-form> |
|
||||||
<el-button class="export">导出</el-button> |
|
||||||
<el-table :data="dataList" border> |
|
||||||
<el-table-column type="selection" align="center"></el-table-column> |
|
||||||
<el-table-column label="退款单号" align="center"> |
|
||||||
12313141 |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="退款类型" align="center"> |
|
||||||
退款退货 |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="退款原因" align="center"> |
|
||||||
拍错 |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="申请时间" align="center"> |
|
||||||
2022-12-31 12:31 |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="退款金额" align="center"> |
|
||||||
￥120.00 |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="退款说明" align="center"> |
|
||||||
7天无理由退款 |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="审核时间" align="center"> |
|
||||||
2022-12-31 12:31 |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="审核状态" align="center"> |
|
||||||
待审核 |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="用户ID" align="center"> |
|
||||||
12 |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="商品名称" align="center"> |
|
||||||
商品名称 |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="商品图片" align="center"> |
|
||||||
<img src="http://dummyimage.com/50x50" /> |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="价格" align="center"> |
|
||||||
￥120.00 |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="数量" align="center"> |
|
||||||
2 |
|
||||||
</el-table-column> |
|
||||||
<el-table-column label="商品图片" align="center"> |
|
||||||
<el-button type="text">详情</el-button> |
|
||||||
<el-button type="text">审核</el-button> |
|
||||||
</el-table-column> |
|
||||||
</el-table> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
<script> |
|
||||||
export default { |
|
||||||
name: 'QueryOrderForm', |
|
||||||
dicts: ['refund_type', 'after_sales_order_status', 'refund_cause'], |
|
||||||
data() { |
|
||||||
return { |
|
||||||
dataList: [{}], |
|
||||||
queryParams: { |
|
||||||
refund_type: undefined, |
|
||||||
after_sales_order_status: undefined, |
|
||||||
refund_cause: undefined, |
|
||||||
dateRange: undefined |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
} |
|
||||||
</script> |
|
||||||
<style scoped lang="scss"> |
|
||||||
.export { |
|
||||||
margin-bottom: 10px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -0,0 +1,260 @@ |
|||||||
|
<template> |
||||||
|
<el-dialog :visible="open" :show-close="false" @closed="view = true"> |
||||||
|
<div slot="title" class="title"> |
||||||
|
<span>详情</span> |
||||||
|
<i :class="{ |
||||||
|
'el-icon-close': view, 'el-icon-refresh-left': !view |
||||||
|
}" @click="view ? $emit('close') : view = true"></i> |
||||||
|
</div> |
||||||
|
<template v-if="view"> |
||||||
|
<div class="sub-title"><span>待审核</span></div> |
||||||
|
<div class="h2">退回信息</div> |
||||||
|
<el-form :inline="true" label-width="100px" label-position="left"> |
||||||
|
<el-form-item label="退款单号"> |
||||||
|
<el-input v-model="form.orderId"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="退款类型"> |
||||||
|
<el-input v-model="form.refundType"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<br /> |
||||||
|
<el-form-item label="退款原因"> |
||||||
|
<el-input v-model="form.refundCause"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="创建时间"> |
||||||
|
<el-input v-model="form.createTime"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<br /> |
||||||
|
<el-form-item label="详细原因"> |
||||||
|
<el-input type="textarea" autosize v-model="form.detailCause"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<br /> |
||||||
|
<el-form-item label="凭证"> |
||||||
|
<div class="img-list"> |
||||||
|
<el-image v-for="item in 3" :key="item" src="http://dummyimage.com/200x200" |
||||||
|
fit="contain"></el-image> |
||||||
|
</div> |
||||||
|
</el-form-item> |
||||||
|
<br /> |
||||||
|
<el-form-item label="退回金额"> |
||||||
|
<el-input v-model="form.refundAmount"> |
||||||
|
<template slot="prepend"> |
||||||
|
￥ |
||||||
|
</template> |
||||||
|
</el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="订单金额" class="amount"> |
||||||
|
<el-input v-model="form.orderAmount"> |
||||||
|
<template slot="prepend"> |
||||||
|
￥ |
||||||
|
</template> |
||||||
|
</el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="退回时间"> |
||||||
|
<el-input v-model="form.returnTime"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<br /> |
||||||
|
<el-form-item label="退回物流"> |
||||||
|
<el-input v-model="form.logisticsCompany"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="单号"> |
||||||
|
<el-input v-model="form.transactionCode"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-button type="text">查看物流</el-button> |
||||||
|
<br /> |
||||||
|
<el-form-item label="审核"> |
||||||
|
<el-radio v-model="form.auditType" :key="item.value" :label="item.value" |
||||||
|
v-for="item in dict.type.audit_status">{{ |
||||||
|
item.label |
||||||
|
}}</el-radio> |
||||||
|
<el-input type="textarea" v-model="form.refusalCause" placeholder="拒绝原因" autosize /> |
||||||
|
</el-form-item> |
||||||
|
|
||||||
|
</el-form> |
||||||
|
<div class="h2">订单消息</div> |
||||||
|
<el-form :inline="true" label-width="100px" label-position="left"> |
||||||
|
<el-form-item label="订单号"> |
||||||
|
<el-input v-model="order.orderId"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="购买门店"> |
||||||
|
<el-input v-model="order.shopName"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<br /> |
||||||
|
<el-form-item label="用户昵称"> |
||||||
|
<el-input v-model="order.nickName"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="用户ID"> |
||||||
|
<el-input v-model="order.userId"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<br /> |
||||||
|
<el-form-item label="配送物流"> |
||||||
|
<el-input v-model="order.logisticsCompany"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="快递单号"> |
||||||
|
<el-input v-model="order.transactionCode"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<br /> |
||||||
|
<el-form-item label="创建时间"> |
||||||
|
<el-input v-model="order.createTime"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<br /> |
||||||
|
<el-form-item label="收货人姓名"> |
||||||
|
<el-input v-model="order.userName"></el-input> |
||||||
|
</el-form-item> |
||||||
|
<el-form-item label="收货地址"> |
||||||
|
<el-select v-model="order.address.province" placeholder="请选择"> |
||||||
|
|
||||||
|
</el-select> |
||||||
|
<el-select v-model="order.address.city" placeholder="请选择"> |
||||||
|
|
||||||
|
</el-select> |
||||||
|
<el-select v-model="order.address.area" placeholder="请选择"> |
||||||
|
|
||||||
|
</el-select> |
||||||
|
<br /> |
||||||
|
<el-input v-model="order.address.address" style="margin-top:10px"></el-input> |
||||||
|
</el-form-item> |
||||||
|
</el-form> |
||||||
|
<div class="h2">退货商品</div> |
||||||
|
<el-table :data="shopList" border> |
||||||
|
<el-table-column label="商品编码" align="center"> |
||||||
|
DS000001 |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="商品名称" align="center"> |
||||||
|
联想笔记本 |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="商品图片" align="center"> |
||||||
|
<img src="http://dummyimage.com/50x50" /> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="规格" align="center"> |
||||||
|
黑色，L |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="数量" align="center"> |
||||||
|
10 |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="金额" align="center"> |
||||||
|
￥120.00 |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="退款金额" align="center"> |
||||||
|
￥120.00 |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="btn"> |
||||||
|
<el-button type="primary" @click="save">保存</el-button> |
||||||
|
<el-button @click="view = false">查看物流信息</el-button> |
||||||
|
<el-button @click="$emit('close')">关闭</el-button> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<order-progress v-else /> |
||||||
|
</el-dialog> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import OrderProgress from "./progress" |
||||||
|
export default { |
||||||
|
name: 'RefundOrderDetail', |
||||||
|
components: { OrderProgress }, |
||||||
|
dicts: ['audit_status'], |
||||||
|
props: { |
||||||
|
open: Boolean |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
//订单详情 true:显示动态，false:显示物流 |
||||||
|
view: true, |
||||||
|
form: { |
||||||
|
orderId: '1213154154153', |
||||||
|
refundType: '退款', |
||||||
|
refundCause: '多拍', |
||||||
|
createTime: '2022-12-31 12:31', |
||||||
|
detailCause: '', |
||||||
|
refundAmount: 1230, |
||||||
|
orderAmount: 1230, |
||||||
|
returnTime: '2022-12-31 12:31', |
||||||
|
logisticsCompany: '圆通物流', |
||||||
|
transactionCode: '单号', |
||||||
|
auditType: '0', |
||||||
|
refusalCause: undefined |
||||||
|
}, |
||||||
|
order: { |
||||||
|
orderId: '1213154154153', |
||||||
|
shopName: '门店名称', |
||||||
|
nickName: '用户昵称', |
||||||
|
userId: '用户ID', |
||||||
|
logisticsCompany: '圆通', |
||||||
|
transactionCode: '13132131361313132', |
||||||
|
createTime: '2022-12-31 12:31', |
||||||
|
address: { |
||||||
|
userName: '账单', |
||||||
|
phone: '18888888888', |
||||||
|
province: '河南省', |
||||||
|
city: '郑州市', |
||||||
|
area: '金水区', |
||||||
|
address: '光明路128号' |
||||||
|
} |
||||||
|
}, |
||||||
|
shopList: [{}], |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
|
||||||
|
save() { |
||||||
|
this.$modal.msgSuccess('保存成功') |
||||||
|
this.$emit('close') |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
<style scoped lang="scss"> |
||||||
|
.btn { |
||||||
|
margin-top: 20px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.amount { |
||||||
|
.el-input-group__prepend { |
||||||
|
padding: 0 !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.img-list { |
||||||
|
overflow-x: auto; |
||||||
|
white-space: nowrap; |
||||||
|
|
||||||
|
&>div { |
||||||
|
height: 100px; |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.export { |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.h2 { |
||||||
|
font-size: 16px; |
||||||
|
text-align: left; |
||||||
|
font-family: SourceHanSansSC-regular; |
||||||
|
margin: 20px 0; |
||||||
|
} |
||||||
|
|
||||||
|
.title { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
font-size: 16px; |
||||||
|
|
||||||
|
&>i { |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.sub-title { |
||||||
|
padding: 15px 20px; |
||||||
|
background-color: #e1efff; |
||||||
|
|
||||||
|
&>span { |
||||||
|
font-size: 14px; |
||||||
|
text-align: left; |
||||||
|
font-family: SourceHanSansSC-regular; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue