|
|
@@ -1,10 +1,159 @@
|
|
|
<template>
|
|
|
<view class="page">
|
|
|
- <!-- 底部导航栏 - 放在 content 外面，确保固定在底部 -->
|
|
|
- <bar-navigasi-handap></bar-navigasi-handap>
|
|
|
- </view>
|
|
|
+ <!-- 搜索和筛选区域 -->
|
|
|
+ <view class="search-section">
|
|
|
+ <view class="search-box">
|
|
|
+ <uni-icons type="search" size="18" color="#999999"></uni-icons>
|
|
|
+ <input class="search-input" placeholder="搜客户姓名" placeholder-style="color: #999999" />
|
|
|
+ <text class="search-box-text">搜索</text>
|
|
|
+ </view>
|
|
|
+ <view class="filter-btn">
|
|
|
+ <uni-icons type="settings" size="18" color="#323232"></uni-icons>
|
|
|
+ <text class="filter-text">筛选</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 订单标签页 -->
|
|
|
+ <view class="order-tabs">
|
|
|
+ <view
|
|
|
+ class="tab-item"
|
|
|
+ :class="{ 'active': activeTab === 'all' }"
|
|
|
+ @click="switchTab('all')"
|
|
|
+ >
|
|
|
+ <text class="tab-text">全部订单(2)</text>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="tab-item"
|
|
|
+ :class="{ 'active': activeTab === 'progress' }"
|
|
|
+ @click="switchTab('progress')"
|
|
|
+ >
|
|
|
+ <text class="tab-text">进行中(0)</text>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="tab-item"
|
|
|
+ :class="{ 'active': activeTab === 'completed' }"
|
|
|
+ @click="switchTab('completed')"
|
|
|
+ >
|
|
|
+ <text class="tab-text">已完成(0)</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 订单列表 -->
|
|
|
+ <scroll-view class="order-list" scroll-y>
|
|
|
+ <!-- 订单卡片1 - 进行中 -->
|
|
|
+ <view class="order-card">
|
|
|
+ <view class="order-header">
|
|
|
+ <view class="user-info">
|
|
|
+ <image class="avatar" src="/static/images/profile.jpg" mode="aspectFill"></image>
|
|
|
+ <view class="user-details">
|
|
|
+ <text class="user-name">张明明</text>
|
|
|
+ <text class="valid-date">有效期至: 2025-11-07</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="status-tag status-tag--progress">进行中</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="order-content">
|
|
|
+ <view class="order-row">
|
|
|
+ <text class="order-label">订单编号</text>
|
|
|
+ <text class="order-value">LAW2023071500123</text>
|
|
|
+ </view>
|
|
|
+ <view class="order-row">
|
|
|
+ <text class="order-label">联系电话</text>
|
|
|
+ <text class="order-value">13877092066</text>
|
|
|
+ </view>
|
|
|
+ <view class="order-row">
|
|
|
+ <text class="order-label">服务费用</text>
|
|
|
+ <text class="order-value">¥200/次</text>
|
|
|
+ </view>
|
|
|
+ <view class="order-row">
|
|
|
+ <text class="order-label">下单时间</text>
|
|
|
+ <text class="order-value">2025-11-11 11:11:11</text>
|
|
|
+ </view>
|
|
|
+ <view class="order-row">
|
|
|
+ <text class="order-label">支付时间</text>
|
|
|
+ <text class="order-value">2025-11-11 11:11:11</text>
|
|
|
+ </view>
|
|
|
+ <view class="order-row">
|
|
|
+ <text class="order-label">佣金比例</text>
|
|
|
+ <text class="order-value">3%</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="order-footer">
|
|
|
+ <text class="revenue">收益: ¥280</text>
|
|
|
+ <view class="action-buttons">
|
|
|
+ <view class="action-btn action-btn--message">
|
|
|
+ <uni-icons type="chat" size="16" color="#1976D2"></uni-icons>
|
|
|
+ <text class="btn-text">发消息</text>
|
|
|
+ </view>
|
|
|
+ <view class="action-btn action-btn--call">
|
|
|
+ <uni-icons type="phone" size="16" color="#4CAF50"></uni-icons>
|
|
|
+ <text class="btn-text">联系客户</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 订单卡片2 - 已完成 -->
|
|
|
+ <view class="order-card">
|
|
|
+ <view class="order-header">
|
|
|
+ <view class="user-info">
|
|
|
+ <image class="avatar" src="/static/images/profile.jpg" mode="aspectFill"></image>
|
|
|
+ <view class="user-details">
|
|
|
+ <text class="user-name">张明明</text>
|
|
|
+ <text class="valid-date">有效期至: 2025-11-07</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="status-tag status-tag--completed">已完成</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="order-content">
|
|
|
+ <view class="order-row">
|
|
|
+ <text class="order-label">订单编号</text>
|
|
|
+ <text class="order-value">LAW2023071500123</text>
|
|
|
+ </view>
|
|
|
+ <view class="order-row">
|
|
|
+ <text class="order-label">联系电话</text>
|
|
|
+ <text class="order-value">13877092066</text>
|
|
|
+ </view>
|
|
|
+ <view class="order-row">
|
|
|
+ <text class="order-label">服务费用</text>
|
|
|
+ <text class="order-value">¥200/次</text>
|
|
|
+ </view>
|
|
|
+ <view class="order-row">
|
|
|
+ <text class="order-label">下单时间</text>
|
|
|
+ <text class="order-value">2025-11-11 11:11:11</text>
|
|
|
+ </view>
|
|
|
+ <view class="order-row">
|
|
|
+ <text class="order-label">支付时间</text>
|
|
|
+ <text class="order-value">2025-11-11 11:11:11</text>
|
|
|
+ </view>
|
|
|
+ <view class="order-row">
|
|
|
+ <text class="order-label">佣金比例</text>
|
|
|
+ <text class="order-value">3%</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
|
|
|
-
|
|
|
+ <view class="order-footer">
|
|
|
+ <text class="revenue">收益: ¥280</text>
|
|
|
+ <view class="action-buttons">
|
|
|
+ <view class="action-btn action-btn--delete">
|
|
|
+ <uni-icons type="trash" size="16" color="#F44336"></uni-icons>
|
|
|
+ <text class="btn-text">删除</text>
|
|
|
+ </view>
|
|
|
+ <view class="action-btn action-btn--message">
|
|
|
+ <uni-icons type="chat" size="16" color="#1976D2"></uni-icons>
|
|
|
+ <text class="btn-text">查看消息</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ <!-- 底部导航栏 -->
|
|
|
+ <bar-navigasi-handap></bar-navigasi-handap>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -13,9 +162,246 @@ import BarNavigasiHandap from "@/components/barNavigasiHandap.vue"
|
|
|
export default {
|
|
|
components: {
|
|
|
BarNavigasiHandap
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ activeTab: 'all' // 当前选中的标签页
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ switchTab(tab) {
|
|
|
+ this.activeTab = tab
|
|
|
+ // 这里可以根据tab筛选订单列表
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
+
|
|
|
<style scoped>
|
|
|
-
|
|
|
+.page {
|
|
|
+ padding-top: calc(var(--status-bar-height) + 20rpx);
|
|
|
+ padding-bottom: calc(16rpx + env(safe-area-inset-bottom)); /* 为底部导航栏留出空间 */
|
|
|
+ background: linear-gradient( 180deg, rgba(40,86,199,0.3) 0%, rgba(255,255,255,0) 100%);
|
|
|
+ height: 100vh;
|
|
|
+}
|
|
|
+.search-box-text{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 27rpx;
|
|
|
+ color: #151515;
|
|
|
+}
|
|
|
+
|
|
|
+/* 搜索区域 */
|
|
|
+.search-section {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 24rpx 30rpx;
|
|
|
+ padding-top: 0rpx;
|
|
|
+ gap: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.search-box {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background-color: #F5F5F5;
|
|
|
+ border-radius: 38rpx;
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+ gap: 12rpx;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.search-input {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #323232;
|
|
|
+}
|
|
|
+
|
|
|
+.search-btn {
|
|
|
+ padding: 20rpx 32rpx;
|
|
|
+ background-color: #007AFF;
|
|
|
+ color: #FFFFFF;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.filter-btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8rpx;
|
|
|
+ padding: 20rpx 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.filter-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #323232;
|
|
|
+}
|
|
|
+
|
|
|
+/* 订单标签页 */
|
|
|
+.order-tabs {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ width: 100vw;
|
|
|
+ margin: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-item {
|
|
|
+ padding: 24rpx 0;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-item.active {
|
|
|
+ font-weight: 600;
|
|
|
+ color: #323232;
|
|
|
+}
|
|
|
+.tab-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #8D8D8D;
|
|
|
+}
|
|
|
+
|
|
|
+.tab-item.active .tab-text {
|
|
|
+ color: #323232;
|
|
|
+}
|
|
|
+
|
|
|
+/* 订单列表 */
|
|
|
+.order-list {
|
|
|
+ flex: 1;
|
|
|
+ padding: 24rpx 30rpx;
|
|
|
+ height: calc(100vh - calc(16rpx + env(safe-area-inset-bottom)));
|
|
|
+}
|
|
|
+
|
|
|
+/* 订单卡片 */
|
|
|
+.order-card {
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 32rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
|
|
|
+}
|
|
|
+
|
|
|
+.order-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-start;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ padding-bottom: 24rpx;
|
|
|
+ border-bottom: 1px solid #EEEEEE;
|
|
|
+}
|
|
|
+
|
|
|
+.user-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.avatar {
|
|
|
+ width: 96rpx;
|
|
|
+ height: 96rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #F5F5F5;
|
|
|
+}
|
|
|
+
|
|
|
+.user-details {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 12rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.user-name {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #323232;
|
|
|
+}
|
|
|
+
|
|
|
+.valid-date {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #999999;
|
|
|
+}
|
|
|
+
|
|
|
+.status-tag {
|
|
|
+ padding: 8rpx 20rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.status-tag--progress {
|
|
|
+ background-color: #E8F5E9;
|
|
|
+ color: #4CAF50;
|
|
|
+}
|
|
|
+
|
|
|
+.status-tag--completed {
|
|
|
+ background-color: #FFF3E0;
|
|
|
+ color: #FF9800;
|
|
|
+}
|
|
|
+
|
|
|
+/* 订单内容 */
|
|
|
+.order-content {
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.order-row {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.order-label {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #999999;
|
|
|
+}
|
|
|
+
|
|
|
+.order-value {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #323232;
|
|
|
+ font-weight: 500;
|
|
|
+}
|
|
|
+
|
|
|
+/* 订单底部 */
|
|
|
+.order-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 24rpx;
|
|
|
+ border-top: 1px solid #EEEEEE;
|
|
|
+}
|
|
|
+
|
|
|
+.revenue {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #FF9800;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.action-buttons {
|
|
|
+ display: flex;
|
|
|
+ gap: 16rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.action-btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8rpx;
|
|
|
+ padding: 12rpx 24rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.action-btn--message {
|
|
|
+ background-color: #E3F2FD;
|
|
|
+ color: #1976D2;
|
|
|
+}
|
|
|
+
|
|
|
+.action-btn--call {
|
|
|
+ background-color: #E8F5E9;
|
|
|
+ color: #4CAF50;
|
|
|
+}
|
|
|
+
|
|
|
+.action-btn--delete {
|
|
|
+ background-color: #FFEBEE;
|
|
|
+ color: #F44336;
|
|
|
+}
|
|
|
+
|
|
|
+.btn-text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-left: 4rpx;
|
|
|
+}
|
|
|
</style>
|
