338 lines
8.6 KiB
Vue
338 lines
8.6 KiB
Vue
<template>
|
||
<!-- 订单进度步骤条 -->
|
||
<el-card class="box-card">
|
||
<div class="order-progress" :class="`progress-${progress}`">
|
||
<ul>
|
||
<li>
|
||
<span>下单时间</span>
|
||
<div class="tip">1</div>
|
||
<!-- <div class="tip">{{ record.create_time }}</div> -->
|
||
</li>
|
||
<li>
|
||
<span>付款</span>
|
||
<!-- <div v-if="record.pay_status == PayStatusEnum.SUCCESS.value" class="tip">付款于 {{ record.pay_time }}</div> -->
|
||
</li>
|
||
<li>
|
||
<span>发货</span>
|
||
<!-- <div v-if="record.delivery_status == DeliveryStatusEnum.DELIVERED.value" class="tip">发货于 {{
|
||
record.delivery_time }}</div> -->
|
||
</li>
|
||
<li>
|
||
<span>收货</span>
|
||
<!-- <div v-if="record.receipt_status == ReceiptStatusEnum.RECEIVED.value" class="tip">收货于 {{
|
||
record.receipt_time }}</div> -->
|
||
</li>
|
||
<li>
|
||
<span>完成</span>
|
||
<!-- <div v-if="record.order_status == OrderStatusEnum.COMPLETED.value" class="tip">完成于 {{
|
||
record.receipt_time }}</div> -->
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</el-card>
|
||
|
||
|
||
<!-- 订单信息 -->
|
||
<el-card class="box-card">
|
||
|
||
<!-- 订单操作 -->
|
||
<div class="order-operation">
|
||
<div class="card-title">订单操作</div>
|
||
|
||
<div class="btn-box">
|
||
<el-button type="primary">发 货</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
<el-divider />
|
||
|
||
<div class="order-info">
|
||
<div class="card-title">订单信息</div>
|
||
<el-row class="order-info-box">
|
||
<el-col :span="8">订单号： 11111</el-col>
|
||
<el-col :span="8">实付款金额： 11111</el-col>
|
||
<el-col :span="8">支付方式： 11111</el-col>
|
||
</el-row>
|
||
<el-row class="order-info-box">
|
||
<el-col :span="8">配送方式： 11111</el-col>
|
||
<el-col :span="8">运费金额： 11111</el-col>
|
||
<el-col :span="8">订单状态： 11111</el-col>
|
||
</el-row>
|
||
<el-row class="order-info-box">
|
||
<el-col :span="8">订单号： 11111</el-col>
|
||
<el-col :span="8">买家信息： 11111</el-col>
|
||
<el-col :span="8"> 买家留言： 11111</el-col>
|
||
</el-row>
|
||
</div>
|
||
|
||
|
||
|
||
</el-card>
|
||
|
||
|
||
<!-- 商品信息 -->
|
||
<el-card class="box-card">
|
||
|
||
<div class="card-title">订单商品</div>
|
||
|
||
<el-table v-loading="loading" :data="dataList" ref="tableRef" highlight-current-row>
|
||
<el-table-column prop="goodsInfo" label="商品信息" width="850">
|
||
<!-- <template #default="scope">
|
||
<div class="goods-info-box">
|
||
<el-image preview-teleported :hide-on-click-modal="true" lazy class="table-td-thumb" fit="contain"
|
||
:src="scope.row.goodsPicture?.split(',')[0]" :preview-src-list="scope.row.goodsPicture?.split(',')">
|
||
<div><el-icon :size="15">
|
||
<document />
|
||
</el-icon></div>
|
||
</el-image>
|
||
|
||
<div>
|
||
<div class="goods-info-text m2">
|
||
{{ scope.row.goodsName }}
|
||
</div>
|
||
<div>
|
||
<el-tag type="info">{{ scope.row.goodsSpecName }}</el-tag>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</template> -->
|
||
</el-table-column>
|
||
<el-table-column prop="payPrice" label="编码" width="150" />
|
||
<el-table-column prop="payPrice" label="重量(Kg)" width="150" />
|
||
<el-table-column prop="payType" label="单价" width="150">
|
||
<!-- <template #default="scope">
|
||
<div>￥ 2</div>
|
||
</template> -->
|
||
</el-table-column>
|
||
<el-table-column prop="payType" label="购买数量" width="150">
|
||
<!-- <template #default="scope">
|
||
<div>￥ 2</div>
|
||
</template> -->
|
||
</el-table-column>
|
||
<el-table-column prop="payType" label="商品总价" width="150">
|
||
<!-- <template #default="scope">
|
||
<div>￥ 2</div>
|
||
</template> -->
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
|
||
<div class="order-summary-box">
|
||
<div>订单总额: ￥111.00</div>
|
||
<div>运费金额: ￥0.00</div>
|
||
<div>实付款金额: <b>￥111.00</b></div>
|
||
</div>
|
||
|
||
</el-card>
|
||
|
||
|
||
<!-- 收货信息 / 发货信息 -->
|
||
<!-- 订单信息 -->
|
||
<el-card class="box-card">
|
||
|
||
<div class="card-title">收货信息</div>
|
||
<el-row class="order-info-box">
|
||
<el-col :span="8">收货人姓名： 11111</el-col>
|
||
<el-col :span="8">联系电话： 11111</el-col>
|
||
<el-col :span="8">收货地区： 11111</el-col>
|
||
</el-row>
|
||
<el-row class="order-info-box">
|
||
<el-col :span="8">详细地址： 11111</el-col>
|
||
</el-row>
|
||
|
||
<el-divider />
|
||
<div class="card-title">发货信息</div>
|
||
<el-row class="order-info-box">
|
||
<el-col :span="8">物流公司： 11111</el-col>
|
||
<el-col :span="8">物流单号： 11111</el-col>
|
||
<el-col :span="8">发货状态： 11111</el-col>
|
||
</el-row>
|
||
<el-row class="order-info-box">
|
||
<el-col :span="8">发货时间： 11111</el-col>
|
||
</el-row>
|
||
|
||
</el-card>
|
||
</template>
|
||
|
||
<script setup>
|
||
|
||
const progress = ref(2)
|
||
const loading = ref(false)
|
||
const dataList = ref([])
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.box-card {
|
||
position: relative;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.card-title {
|
||
// font-size: 18px;
|
||
margin-bottom: 30px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.btn-box {
|
||
display: flex;
|
||
}
|
||
|
||
// 分割线
|
||
.o-divider {
|
||
margin-bottom: 32px;
|
||
}
|
||
|
||
// 步骤条
|
||
.order-progress {
|
||
height: 26px;
|
||
line-height: 26px;
|
||
background: #f8f8f8;
|
||
border-radius: 13px;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
position: relative;
|
||
|
||
li {
|
||
list-style: none;
|
||
}
|
||
|
||
&:before,
|
||
&:after {
|
||
content: '';
|
||
position: absolute;
|
||
z-index: 2;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
border-radius: 13px;
|
||
background: #1890ff;
|
||
}
|
||
|
||
&:after {
|
||
background: #91d5ff;
|
||
z-index: 1;
|
||
}
|
||
|
||
&.progress-1 {
|
||
&:before {
|
||
width: 0;
|
||
}
|
||
|
||
&:after {
|
||
width: 20%;
|
||
}
|
||
}
|
||
|
||
&.progress-2 {
|
||
&:before {
|
||
width: 20%;
|
||
}
|
||
|
||
&:after {
|
||
width: 40%;
|
||
}
|
||
}
|
||
|
||
&.progress-3 {
|
||
&:before {
|
||
width: 40%;
|
||
}
|
||
|
||
&:after {
|
||
width: 60%;
|
||
}
|
||
}
|
||
|
||
&.progress-4 {
|
||
&:before {
|
||
width: 60%;
|
||
}
|
||
|
||
&:after {
|
||
width: 80%;
|
||
}
|
||
}
|
||
|
||
&.progress-5 {
|
||
&:before {
|
||
width: 100%;
|
||
}
|
||
|
||
&:after {
|
||
width: 100%;
|
||
}
|
||
|
||
li {
|
||
&:nth-child(5) {
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
li {
|
||
width: 20%;
|
||
float: left;
|
||
border-radius: 13px;
|
||
position: relative;
|
||
z-index: 3;
|
||
}
|
||
|
||
.tip {
|
||
font-size: 12px;
|
||
padding-top: 10px;
|
||
color: #8c8c8c;
|
||
}
|
||
|
||
&.progress-1 li:nth-child(1),
|
||
&.progress-2 li:nth-child(1),
|
||
&.progress-3 li:nth-child(1),
|
||
&.progress-4 li:nth-child(1),
|
||
&.progress-5 li:nth-child(1) {
|
||
color: #fff;
|
||
}
|
||
|
||
&.progress-2 li:nth-child(2),
|
||
&.progress-3 li:nth-child(2),
|
||
&.progress-4 li:nth-child(2),
|
||
&.progress-5 li:nth-child(2) {
|
||
color: #fff;
|
||
}
|
||
|
||
&.progress-3 li:nth-child(3),
|
||
&.progress-4 li:nth-child(3),
|
||
&.progress-5 li:nth-child(3) {
|
||
color: #fff;
|
||
}
|
||
|
||
&.progress-4 li:nth-child(4),
|
||
&.progress-5 li:nth-child(4) {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
|
||
// 信息盒子
|
||
.order-info{
|
||
margin-bottom: 10px;
|
||
}
|
||
.order-info-box {
|
||
font-size: 15px;
|
||
margin-top: 25px;
|
||
}
|
||
|
||
|
||
// 订单商品
|
||
.order-summary-box {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
flex-direction: column;
|
||
margin: 20px 0;
|
||
|
||
div {
|
||
font-size: 15px;
|
||
margin-bottom: 5px;
|
||
}
|
||
}
|
||
</style> |