<!--
|
* @Author: 小明丶
|
* @Date: 2019-08-20 14:55:10
|
* @LastEditors: 小明丶
|
* @LastEditTime: 2020-11-23 16:28:59
|
* @Description: 订单组件
|
-->
|
<template>
|
<div class="order-item" @click="$emit('click')">
|
<header class="header flex-around-g text-center-g">
|
<div class="flex-1-g" :class="[index!==list.length-1 ? 'border-right' : '']" v-for="(item, index) in list"
|
:key="index">
|
<h5 class="title" :class="[item.color,index===2?'ch-status':'']" >{{item.value}}</h5>
|
<p class="label">{{item.label}}</p>
|
</div>
|
</header>
|
<footer class="footer">
|
<div class="flex-between-g">
|
<slot name="bottom-status">
|
<p v-if="orderId" class="flex-start-g">
|
<svg class="icon" aria-hidden="true" style="width:18px;height:18px">
|
<use xlink:href="#iconyonghu"></use>
|
</svg>
|
<span class="text-clip-g" style="max-width:120px;">{{orderId}}</span>
|
</p>
|
<p v-if="time" class="flex-start-g">
|
<svg class="icon" aria-hidden="true" style="width:18px;height:18px">
|
<use xlink:href="#iconshijian"></use>
|
</svg>
|
<time>{{+time | timeformat('yyyy-MM-dd HH:mm:ss')}}</time>
|
</p>
|
</slot>
|
</div>
|
<p v-if="user" class="flex-start-g">
|
<svg class="icon" aria-hidden="true" style="width:18px;height:18px">
|
<use xlink:href="#iconshanghumingcheng"></use>
|
</svg>
|
<span class="flex-1-g text-clip-g">{{user}}</span>
|
</p>
|
</footer>
|
</div>
|
</template>
|
<script>
|
// list结构说明：
|
// [
|
// {
|
// label:'',
|
// value:'',
|
// color:'' //标识状态颜色
|
// }
|
// ]
|
export default {
|
name: 'v-order-item',
|
props: {
|
time: {//时间
|
type:[String,Number],
|
},
|
user: String, //商户名
|
orderId: Number, //用户名
|
list: { //header数据展示
|
type: Array
|
}
|
},
|
created() {
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
|
|
.ch-status{
|
font-size: 13px!important;
|
width: 60px;
|
margin-left: 30px;
|
}
|
|
.order-item {
|
background-color: @c-bg-fff;
|
margin-bottom: 10px;
|
padding: 0 8px 10px;
|
border-radius: 3px;
|
.header {
|
height: 80px;
|
}
|
// .info{
|
// height: 100%;
|
// .flex(center,center,'',column);
|
// }
|
|
.title {
|
font-size: @font-18;
|
margin-bottom: 8px;
|
}
|
|
.label {
|
font-size: @font-12;
|
color: @c-text-999;
|
}
|
|
.footer {
|
height: 50px;
|
line-height: 25px;
|
background-color: #F7F7FA;
|
padding: 0 12px;
|
font-size: @font-12;
|
color: @c-text-666;
|
|
.icon {
|
width: 18px;
|
margin-right: 8px;
|
}
|
}
|
|
.success {
|
color: #19BE6B;
|
}
|
|
.error {
|
color: #ED4014;
|
}
|
|
.warning {
|
color: #FF9900;
|
}
|
}
|
|
.border-right {
|
position: relative;
|
&::after {
|
content: "";
|
display: block;
|
position: absolute;
|
right: 0;
|
top: 50%;
|
transform: translateY(-50%);
|
width: 1px;
|
height: 32px;
|
background: rgba(230, 230, 230, 1);
|
|
}
|
}
|
</style>
|
