ch
3 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