feat: 新增订单列表交互

2025-07-27 18:08:06 +08:00
parent 87bdac8c57
commit 4cd0f59966
31 changed files with 3535 additions and 2559 deletions
--- a/pages/order/components/OrderCard/styles/index.scss
+++ b/pages/order/components/OrderCard/styles/index.scss
@@ -0,0 +1,130 @@
+.order-card {
+  background-color: #fff;
+  border-radius: 6px 6px 12px 12px;
+  box-shadow: 0px 3px 8px 0 rgba(0,0,0,0.12); 
+  margin: 12px;
+  transition: all 0.3s ease;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  &.expired {
+    filter: grayscale(100%);
+  }
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 14px 12px 16px;
+}
+
+.status-info {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.status-icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.order-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #333333;
+  line-height: 1.4;
+  flex: 1;
+}
+
+.status-tag {
+  box-sizing: border-box;
+  padding: 6px 16px;
+  border-radius: 20px ;
+  font-size: 12px;
+  font-weight: 500;
+  
+  &.tag-pending {
+    background-color: #FFF7E6;
+    color: #FF8C00;
+    border: 1px solid #FFD591;
+  }
+  
+  &.tag-completed {
+    background-color: #F6FFED;
+    color: #52C41A;
+    border: 1px solid #B7EB8F;
+  }
+  
+  &.tag-cancelled {
+    background-color: #F5F5F5;
+    color: #999999;
+    border: 1px solid #D9D9D9;
+  }
+  
+  &.tag-processing {
+    background-color: #E6F7FF;
+    color: #1890FF;
+    border: 1px solid #91D5FF;
+  }
+}
+
+
+
+.card-content {
+  padding: 16px;
+}
+
+.info-row {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.label {
+  font-size: 12px;
+  color: #666666;
+  flex-shrink: 0;
+  margin-right: 8px;
+}
+
+.value {
+  font-size: 14px;
+  color: #333333;
+  flex: 1;
+}
+
+.action-area {
+  padding-bottom: 16px;
+}
+
+.action-btn {
+  width: 280px;
+  height: 42px;
+  border-radius: 50px;
+  border: 2px solid #FFCA70;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+  background: linear-gradient( 179deg, #FFB100 0%, #FF7F19 100%);
+  color: #ffffff;
+  margin: 0 auto;
+
+  &:hover {
+    background: linear-gradient(135deg, #FF7A00 0%, #FF6600 100%);
+  }
+  
+  &:active {
+    transform: scale(0.95);
+  }
+}