feat: 新增部分页面静态页面
This commit is contained in:
admin
214
pages/user/order/orderRecord.vue
Normal file
214
pages/user/order/orderRecord.vue
Normal 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/order/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>
|
||||
Reference in New Issue
Block a user