chenyijie/delivery-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 引入uView Plus组件库，新增部分静态页面

Browse Source
This commit is contained in:
admin
2026-01-17 16:55:19 +08:00
parent 34c63780a8
commit 849647d3c9
562 changed files with 73370 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
pages/user/orderRecord.vue Normal file
View File

@@ -0,0 +1,214 @@
<template>
<s-layout title="接单记录" class="order-record-page">
<view class="page-content">
<view class="top-select" @tap="showPicker = true">
<view class="select-style">
<text style="margin-right:15rpx;">{{ selectedLabel }}</text>
<up-icon name="arrow-down" color="#757575" size="15"></up-icon>
</view>
</view>
<!-- up-picker -->
<up-picker
:show="showPicker"
:columns="columns"
:defaultIndex="[defaultIndex]"
@confirm="onConfirm"
@cancel="showPicker = false"
@close="showPicker = false"
></up-picker>
<!-- 顶部提示 -->
<view class="notice">数据统计均截止昨日23:59，可能存在延迟，请耐心等待</view>
<!-- 单量卡片 -->
<view class="card card-volume">
<view class="card-header">
<view class="card-title">单量</view>
<view class="card-link" @click="toList">
查看 <up-icon name="arrow-right" color="#757575" size="15"></up-icon>
</view>
</view>
<view class="card-body volume-body">
<text class="volume-number">10<span class="unit">单</span></text>
<text class="volume-sub">已完成</text>
</view>
</view>
<!-- 转单记录卡片 -->
<!-- <view class="card card-transfer">
<view class="card-header">
<view class="left">
<text class="card-title">转单记录</text>
</view>
<view class="card-link">
查看 <up-icon name="arrow-right" color="#757575" size="15"></up-icon>
</view>
</view>
<view class="card-body transfer-body">
<view class="col">
<text class="col-number">0<span class="unit">单</span></text>
<text class="col-label">待处理订单</text>
</view>
<view class="col">
<text class="col-number">0<span class="unit">单</span></text>
<text class="col-label">我转出的</text>
</view>
<view class="col">
<text class="col-number">0<span class="unit">单</span></text>
<text class="col-label">我接收的</text>
</view>
</view>
</view> -->
</view>
</s-layout>
</template>
<script setup>
import { ref } from 'vue';
// picker 显示控制
const showPicker = ref(false);
// 默认选中标签
const selectedLabel = ref('今日');
// 默认选中的索引（0：今日）
const defaultIndex = 0;
// 列数据，u-picker 接受 columns 为数组的数组
const columns = [
[
{ text: '今日', value: 'today' },
{ text: '昨日', value: 'yesterday' },
{ text: '近7天', value: 'last7' },
{ text: '本月', value: 'month' },
],
];
function onConfirm(e) {
// e.value 为选中的值数组（每列一个）
const value = e && e.value && e.value[0];
if (value) {
selectedLabel.value = value.text || String(value);
}
showPicker.value = false;
}
function toList() {
uni.navigateTo({
url: '/pages/user/recordList'
})
}
</script>
<style lang="scss" scoped>
.page-content {
padding: 16px;
background: transparent;
}
.top-select {
display: flex;
justify-content: flex-end;
padding: 0 0 25rpx;
}
.select-style {
display: flex;
}
.notice {
background: #f5f5f5;
color: #999;
padding: 10px 12px;
border-radius: 6px;
font-size: 12px;
margin-bottom: 12px;
}
.card {
background: #fff;
border-radius: 8px;
padding: 14px;
margin-bottom: 12px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.card-title {
font-size: 16px;
font-weight: 600;
color: #333;
}
.card-link {
display: flex;
font-size: 13px;
color: #999;
}
.card-header .left {
display: flex;
align-items: center;
gap: 8px;
}
.tag {
color: #e74c3c;
font-size: 12px;
}
.volume-body {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 8px 0 4px;
}
.volume-number {
font-size: 36px;
font-weight: 700;
color: #333;
}
.unit {
font-size: 18px;
margin-left: 4px;
}
.volume-sub {
color: #999;
font-size: 13px;
margin-top: 6px;
}
.transfer-body {
display: flex;
justify-content: space-between;
padding-top: 6px;
}
.col {
flex: 1;
text-align: center;
}
.col-number {
font-size: 22px;
font-weight: 700;
color: #333;
}
.col-label {
color: #999;
font-size: 12px;
margin-top: 6px;
display: block;
}
</style>

200
pages/user/recordList.vue Normal file
View 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>