ch
2 years ago
parent
3cf9e54b01
commit
0f0b283387
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 928 B |
|
After Width: | Height: | Size: 763 B |
|
After Width: | Height: | Size: 752 B |
|
After Width: | Height: | Size: 812 B |
@ -0,0 +1,27 @@
|
||||
<!--
|
||||
* @Author: ch
|
||||
* @Date: 2022-05-09 20:00:57
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-05-09 20:04:59
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<el-dialog :visible="visible" @close="close">
|
||||
<slot></slot>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
visible : {
|
||||
type : Boolean,
|
||||
default : false
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
close(...args){
|
||||
this.$emit('close', args)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,127 @@
|
||||
<!--
|
||||
* @Author: ch
|
||||
* @Date: 2022-05-09 16:24:49
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-05-09 21:26:52
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<table class="goods">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>商品信息</th>
|
||||
<th width="96">单价</th>
|
||||
<th width="96">数量</th>
|
||||
<th width="163">实付款</th>
|
||||
<th width="135">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="i in products" :key="i.orderProductId">
|
||||
<td class="not-border"><UIGoodsInfo :goods="i"/></td>
|
||||
<td class="not-border">
|
||||
<UiMoney :money="i.realAmount" float/>
|
||||
</td>
|
||||
<td class="not-border">{{i.quantity}}</td>
|
||||
<td>
|
||||
<UiMoney :money="i.realAmount" float/>
|
||||
</td>
|
||||
<td>
|
||||
<template v-if="i.afterSaleApplyFlag || [2,3,4].includes(i.detailStatus)">
|
||||
<a v-if="i.afterSaleApplyFlag">申请售后</a>
|
||||
<span v-else>
|
||||
{{ i.detailStatus === 2 ? '退款中' : i.detailStatus === 3 ? '已退款' : '退款关闭'}}
|
||||
</span>
|
||||
</template>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="message">
|
||||
<div>
|
||||
<label>买家留言</label>
|
||||
<span>{{orderInfo.userMessage || '无'}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<label>商品总额</label>
|
||||
<UiMoney :money="orderInfo.totalAmount" float/>
|
||||
</p>
|
||||
<p>
|
||||
<label>运费</label>
|
||||
<UiMoney :money="orderInfo.shippingAmount" float/>
|
||||
|
||||
</p>
|
||||
<p>
|
||||
<label>
|
||||
{{orderInfo.orderStatus == 1 ? '应付款：' : '实付款：'}}
|
||||
</label>
|
||||
<UiMoney :money="orderInfo.payAmount" float prefix suffix/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import UIGoodsInfo from '@/components/UIGoodsInfo.vue'
|
||||
import UiMoney from '@/components/UiMoney.vue'
|
||||
|
||||
export default {
|
||||
components: { UIGoodsInfo, UiMoney },
|
||||
props : {
|
||||
orderInfo : {
|
||||
type : Object,
|
||||
default : () => ({})
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
products (){
|
||||
return this.orderInfo.products || []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.goods{
|
||||
width: 100%;
|
||||
border: 1px solid #ddd;
|
||||
margin-top: 30px;
|
||||
th{
|
||||
height: 42px;
|
||||
background: #f8f8f8;
|
||||
font-weight: normal
|
||||
};
|
||||
td{
|
||||
text-align: center;
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px 20px;
|
||||
&.not-border{
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
tbody tr:first-child td{
|
||||
padding-top: 20px
|
||||
}
|
||||
tbody tr:last-child td{
|
||||
padding-bottom: 20px
|
||||
}
|
||||
}
|
||||
.message{
|
||||
border: 1px solid #ddd;
|
||||
border-top: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30px;
|
||||
p{
|
||||
width: 250px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&:nth-child(2){
|
||||
margin: 20px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,72 @@
|
||||
<!--
|
||||
* @Author: ch
|
||||
* @Date: 2022-05-09 14:41:37
|
||||
* @LastEditors: ch
|
||||
* @LastEditTime: 2022-05-09 19:55:10
|
||||
* @Description: file content
|
||||
-->
|
||||
<template>
|
||||
<ul class="step">
|
||||
<li v-for="item in steps" :key="item.operationType">
|
||||
<img src="@/assets/img/account/order_status_1.png"/>
|
||||
<b>{{item.operationTypeDesc}}</b>
|
||||
<span>{{item.createTime}}</span>
|
||||
<span>{{item.createTime}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<script>
|
||||
import UiButton from '../../../../../../components/UiButton.vue'
|
||||
export default {
|
||||
components: { UiButton },
|
||||
props: {
|
||||
orderInfo : {
|
||||
type : Object,
|
||||
default : () => ({})
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
steps(){
|
||||
const normalStep = [
|
||||
{type : 1, name : '待付款' },
|
||||
{type : 6, name : '支付订单' },
|
||||
{type : 7, name : '平台发货' },
|
||||
{type : 1, name : '确认收货' },
|
||||
{type : 1, name : '交易完成' },
|
||||
{type : 2, name : '交易关闭' }
|
||||
];
|
||||
return [];
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.step{
|
||||
padding: 45px 65px 0 65px;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
li{
|
||||
text-align: center;
|
||||
img{
|
||||
width: 66px;
|
||||
}
|
||||
b{
|
||||
display: block;
|
||||
margin: 10px 0;
|
||||
color: #999;
|
||||
}
|
||||
span{
|
||||
display: block;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue