200 lines
4.2 KiB
Vue
200 lines
4.2 KiB
Vue
<template>
|
||
<s-layout title="订单记录" class="record-list-page">
|
||
<view class="page-wrap">
|
||
<scroll-view class="list" scroll-y>
|
||
<view class="order-card" v-for="order in orders" :key="order.id">
|
||
<!-- 收入 -->
|
||
<view class="card-top">
|
||
<text class="income">本单收入 {{ order.income }}元</text>
|
||
</view>
|
||
|
||
<!-- 分割线 -->
|
||
<view class="divider"></view>
|
||
|
||
<!-- 内容头 -->
|
||
<view class="card-header">
|
||
<view class="left">
|
||
<text class="label">订单号：</text>
|
||
<text class="order-no">{{ order.orderNo }}</text>
|
||
</view>
|
||
<text class="status">{{ order.statusText }}</text>
|
||
</view>
|
||
|
||
<!-- 可能的提示 -->
|
||
<view v-if="order.notice" class="notice-orange">
|
||
{{ order.notice }}
|
||
</view>
|
||
|
||
<!-- 地址信息 -->
|
||
<view class="card-body">
|
||
<!-- 起点 -->
|
||
<view class="addr-row">
|
||
<text class="distance">{{ order.pickDistance }}</text>
|
||
<view class="addr-content">
|
||
<text class="place-title">{{ order.pickName }}</text>
|
||
<text class="place-addr">{{ order.pickAddr }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 终点 -->
|
||
<view class="addr-row to">
|
||
<text class="distance">{{ order.deliverDistance }}</text>
|
||
<view class="addr-content">
|
||
<text class="place-title">{{ order.deliverName }}</text>
|
||
<text class="place-addr">{{ order.deliverAddr }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部信息 -->
|
||
<view class="card-footer">
|
||
<text class="customer">{{ order.customer }}</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</s-layout>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
|
||
// 静态示例数据，后续可对接接口
|
||
const orders = ref([
|
||
{
|
||
id: 1,
|
||
income: '12.5',
|
||
orderNo: '2021021115544',
|
||
statusText: '已完成',
|
||
notice: '',
|
||
pickDistance: '873m',
|
||
pickName: '乐易购-学院站',
|
||
pickAddr: '广东省广州市天河区学院站荷光路',
|
||
deliverDistance: '1.2km',
|
||
deliverName: '广东省广州市天河区**********',
|
||
deliverAddr: '张氏（先生） 屋号1254',
|
||
customer: '',
|
||
},
|
||
{
|
||
id: 2,
|
||
income: '12.5',
|
||
orderNo: '2021021115545',
|
||
statusText: '顾客取消订单',
|
||
notice: '提示：已取餐订单，顾客退款不影响配送费结算',
|
||
pickDistance: '873m',
|
||
pickName: '乐易购-学院站',
|
||
pickAddr: '广东省广州市天河区学院站荷光路',
|
||
deliverDistance: '1.2km',
|
||
deliverName: '广东省广州市天河区**********',
|
||
deliverAddr: '张氏（先生） 屋号1254',
|
||
customer: '',
|
||
},
|
||
{
|
||
id: 3,
|
||
income: '12.5',
|
||
orderNo: '2021021115546',
|
||
statusText: '顾客取消订单',
|
||
notice: '',
|
||
pickDistance: '873m',
|
||
pickName: '乐易购-学院站',
|
||
pickAddr: '广东省广州市天河区学院站荷光路',
|
||
deliverDistance: '1.2km',
|
||
deliverName: '广东省广州市天河区**********',
|
||
deliverAddr: '张氏（先生） 屋号1254',
|
||
customer: '',
|
||
},
|
||
]);
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-wrap {
|
||
padding: 16px;
|
||
background: transparent;
|
||
}
|
||
.list {
|
||
min-height: 200px;
|
||
}
|
||
.order-card {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
margin-bottom: 14px;
|
||
overflow: hidden;
|
||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||
}
|
||
.card-top {
|
||
padding: 10px 14px;
|
||
}
|
||
.income {
|
||
color: #e74c3c;
|
||
font-weight: 600;
|
||
}
|
||
.divider {
|
||
height: 1px;
|
||
background: #eee;
|
||
}
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 10px 14px;
|
||
}
|
||
.card-header .left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.label {
|
||
color: #666;
|
||
font-size: 13px;
|
||
margin-right: 6px;
|
||
}
|
||
.order-no {
|
||
color: #222;
|
||
font-weight: 600;
|
||
}
|
||
.status {
|
||
color: #999;
|
||
font-size: 13px;
|
||
}
|
||
.notice-orange {
|
||
background: #f3a23a;
|
||
color: #fff;
|
||
padding: 8px 12px;
|
||
margin: 6px 14px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
}
|
||
.card-body {
|
||
padding: 10px 14px 6px;
|
||
}
|
||
.addr-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 8px;
|
||
}
|
||
.addr-row.to {
|
||
margin-top: 8px;
|
||
}
|
||
.distance {
|
||
color: #999;
|
||
width: 42px;
|
||
font-size: 12px;
|
||
}
|
||
.addr-content {
|
||
flex: 1;
|
||
}
|
||
.place-title {
|
||
display: block;
|
||
font-weight: 700;
|
||
color: #222;
|
||
margin-bottom: 6px;
|
||
}
|
||
.place-addr {
|
||
color: #999;
|
||
font-size: 13px;
|
||
}
|
||
.card-footer {
|
||
padding: 10px 14px 14px;
|
||
color: #999;
|
||
font-size: 13px;
|
||
}
|
||
</style> |