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