首页页面

components/barNavigasiHandap.vue

@@ -2,31 +2,18 @@
 	<!-- 底部导航栏 -->
 	<view class="bottom-tabbar">
 		<view class="tabbar-container">
-			
 			<view 
+			    v-for="(item,index) in list" :key="index"
 				class="tab-item" 
-				:class="{ 'active': currentTab === 'index' }"
-				@click="switchTab('index')"
+				:class="{ 'active':currentTab === item.pathText }"
+				@click="switchTab(item.pathText)"
 			>
 				<image 
 					class="tab-icon" 
-					:src="currentTab === 'index' ? '/static/images/tabbar/home_.png' : '/static/images/tabbar/home.png'"
+					:src="item.pathText === currentTab ?item.oneIcon : item.twoIcon"
 					mode="aspectFit"
 				></image>
-				<text class="tab-text" :class="{ 'active-text': currentTab === 'index' }">首页</text>
-			</view>
-			
-			<view 
-				class="tab-item" 
-				:class="{ 'active': currentTab === 'mine' }"
-				@click="switchTab('mine')"
-			>
-				<image 
-					class="tab-icon" 
-					:src="currentTab === 'mine' ? '/static/images/tabbar/mine_.png' : '/static/images/tabbar/mine.png'"
-					mode="aspectFit"
-				></image>
-				<text class="tab-text" :class="{ 'active-text': currentTab === 'mine' }">我的</text>
+				<text class="tab-text" :class="{ 'active-text': currentTab === item.pathText }">{{item.name}}</text>
 			</view>
 		</view>
 	</view>
@@ -37,7 +24,23 @@ export default {
 	name: 'BarNavigasiHandap',
 	data() {
 		return {
-			currentTab: 'index' // 当前选中的tab
+			currentTab: 'index' ,// 当前选中的tab
+			list:[
+				{
+					name:'首页',
+					pathText:'index',
+					oneIcon:'/static/images/tabbar/home_.png',
+					twoIcon:'/static/images/tabbar/home.png',
+					
+				},
+				{
+					name:'我的',
+					pathText:'mine',
+					oneIcon:'/static/images/tabbar/mine_.png',
+					twoIcon:'/static/images/tabbar/mine.png',
+					
+				}
+			]
 		}
 	},
 	mounted() {
@@ -170,7 +173,6 @@ export default {
 .tab-text {
 	font-size: 26rpx;
 	color: #999999;
-	transition: color 0.3s ease;
 	line-height: 1;
 }
 

pages.json

@@ -2,111 +2,92 @@
   "pages": [{
     "path": "pages/login",
     "style": {
-      "navigationBarTitleText": "登录"
+      "navigationBarTitleText": "登录",
+      "navigationStyle": "custom"
     }
   }, {
     "path": "pages/register",
     "style": {
-      "navigationBarTitleText": "注册"
+      "navigationBarTitleText": "注册",
+      "navigationStyle": "custom"
     }
   }, {
     "path": "pages/index",
     "style": {
-      "navigationBarTitleText": "若依移动端框架",
+      "navigationBarTitleText": "首页",
       "navigationStyle": "custom"
     }
-  }, 
-  {
-	  "path": "pages/index",
-	  "style": {
-		"navigationBarTitleText": "首页"
-	  }  
-  },
-  {
-	"path": "pages/mine/index",
-	"style": {
-	  "navigationBarTitleText": "我的",
-	  "navigationStyle": "custom",
-	  "navigationBarBackgroundColor": "transparent"
-	}  
-  },
-  {
+  }, {
+    "path": "pages/mine/index",
+    "style": {
+      "navigationBarTitleText": "我的",
+      "navigationStyle": "custom"
+    }
+  }, {
     "path": "pages/work/index",
     "style": {
-      "navigationBarTitleText": "工作台"
+      "navigationBarTitleText": "工作台",
+      "navigationStyle": "custom"
     }
   }, {
     "path": "pages/mine/avatar/index",
     "style": {
-      "navigationBarTitleText": "修改头像"
+      "navigationBarTitleText": "修改头像",
+      "navigationStyle": "custom"
     }
   }, {
     "path": "pages/mine/info/index",
     "style": {
-      "navigationBarTitleText": "个人信息"
+      "navigationBarTitleText": "个人信息",
+      "navigationStyle": "custom"
     }
   }, {
     "path": "pages/mine/info/edit",
     "style": {
-      "navigationBarTitleText": "编辑资料"
+      "navigationBarTitleText": "编辑资料",
+      "navigationStyle": "custom"
     }
   }, {
     "path": "pages/mine/pwd/index",
     "style": {
-      "navigationBarTitleText": "修改密码"
+      "navigationBarTitleText": "修改密码",
+      "navigationStyle": "custom"
     }
   }, {
     "path": "pages/mine/setting/index",
     "style": {
-      "navigationBarTitleText": "应用设置"
+      "navigationBarTitleText": "应用设置",
+      "navigationStyle": "custom"
     }
   }, {
     "path": "pages/mine/help/index",
     "style": {
-      "navigationBarTitleText": "常见问题"
+      "navigationBarTitleText": "常见问题",
+      "navigationStyle": "custom"
     }
   }, {
     "path": "pages/mine/about/index",
     "style": {
-      "navigationBarTitleText": "关于我们"
+      "navigationBarTitleText": "关于我们",
+      "navigationStyle": "custom"
     }
   }, {
     "path": "pages/common/webview/index",
     "style": {
-      "navigationBarTitleText": "浏览网页"
+      "navigationBarTitleText": "浏览网页",
+      "navigationStyle": "custom"
     }
   }, {
     "path": "pages/common/textview/index",
     "style": {
-      "navigationBarTitleText": "浏览文本"
+      "navigationBarTitleText": "浏览文本",
+      "navigationStyle": "custom"
     }
   }],
-  // "tabBar": {
-  //   "color": "#000000",
-  //   "selectedColor": "#000000",
-  //   "borderStyle": "white",
-  //   "backgroundColor": "#ffffff",
-  //   "list": [{
-  //       "pagePath": "pages/index",
-  //       "iconPath": "static/images/tabbar/home.png",
-  //       "selectedIconPath": "static/images/tabbar/home_.png",
-  //       "text": "首页"
-  //     }, {
-  //       "pagePath": "pages/work/index",
-  //       "iconPath": "static/images/tabbar/work.png",
-  //       "selectedIconPath": "static/images/tabbar/work_.png",
-  //       "text": "工作台"
-  //     }, {
-  //       "pagePath": "pages/mine/index",
-  //       "iconPath": "static/images/tabbar/mine.png",
-  //       "selectedIconPath": "static/images/tabbar/mine_.png",
-  //       "text": "我的"
-  //     }
-  //   ]
-  // },
   "globalStyle": {
-    "navigationBarTextStyle": "black",
-    "navigationBarTitleText": "RuoYi",
-    "navigationBarBackgroundColor": "#FFFFFF"
+    "navigationBarTextStyle": "custom",
+    "navigationBarTitleText": "custom",
+    "navigationBarBackgroundColor": "custom",
+    "navigationStyle": "custom"
   }
 }

pages/index.vue

@@ -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>