feat: 引入uView Plus组件库，新增部分静态页面
This commit is contained in:
admin
200
pages/user/recordList.vue
Normal file
200
pages/user/recordList.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user