AI优化订单列表和订单详情页面，主题颜色等

src/pages-order/detail/index.vue

@@ -1,109 +1,93 @@
 <template>
-  <view>
-    <view class="goods-section">
-      <view class="g-item" style="padding-top: 10px;">
-        <view class="right">
-          <view class="price-box">
-            <text class="font12">￥</text>
-            <text class="price">{{ ((state.detail.amount) / 100).toFixed(2) }}</text>
-            <text class="font12">元</text>
-          </view>
-          <block class="price-dsc">洗车消费</block>
+  <view class="container">
+    <!-- 订单总览 -->
+    <view class="order-overview">
+      <view class="order-overview_content">
+        <view class="order-overview_amount">
+          <text class="order-overview_currency">￥</text>
+          <text class="order-overview_price">{{ ((state.detail.amount) / 100).toFixed(2) }}</text>
+          <text class="order-overview_unit">元</text>
         </view>
+        <text class="order-overview_type">洗车消费</text>
       </view>
     </view>
 
-    <view class="yt-list">
-      <view class="yt-list-cell b-b">
-        <text class="cell-tit clamp">订单编号</text>
-        <text class="cell-tip copy" @click="handleCopy">{{ state.detail.orderId }}
-          <uv-icon name="info-circle"></uv-icon>
+    <!-- 订单信息 -->
+    <view class="order-info">
+      <view class="order-info_item">
+        <text class="order-info_label">订单编号</text>
+        <text class="order-info_value">
+          {{ state.detail.orderId }}
+          <text class="copy-icon" @click.stop="handleCopy">复制</text>
         </text>
       </view>
-      <view class="yt-list-cell b-b">
-        <text class="cell-tit clamp">总消费金额</text>
-        <text class="cell-tip red">-￥{{ ((state.detail.amount) / 100).toFixed(2) }}元</text>
+      <view class="order-info_item">
+        <text class="order-info_label">总消费金额</text>
+        <text class="order-info_value red">-￥{{ ((state.detail.amount) / 100).toFixed(2) }}元</text>
       </view>
-      <view class="yt-list-cell b-b">
-        <text class="cell-tit clamp">充值款支付金额</text>
-        <text class="cell-tip red">-￥{{ ((state.detail.rechargePayment) / 100).toFixed(2) }}元</text>
+      <view class="order-info_item">
+        <text class="order-info_label">充值款支付</text>
+        <text class="order-info_value red">-￥{{ ((state.detail.rechargePayment) / 100).toFixed(2) }}元</text>
       </view>
-      <view class="yt-list-cell b-b">
-        <text class="cell-tit clamp">赠款支付金额</text>
-        <text class="cell-tip red">-￥{{ ((state.detail.grantsPayment) / 100).toFixed(2) }}元</text>
+      <view class="order-info_item">
+        <text class="order-info_label">赠款支付</text>
+        <text class="order-info_value red">-￥{{ ((state.detail.grantsPayment) / 100).toFixed(2) }}元</text>
       </view>
-
-      <view class="yt-list-cell b-b">
-        <text class="cell-tit clamp">优惠金额</text>
-        <text class="cell-tip red">-￥{{ ((state.detail.discountMoney) / 100).toFixed(2) }}元</text>
+      <view class="order-info_item">
+        <text class="order-info_label">优惠金额</text>
+        <text class="order-info_value red">-￥{{ ((state.detail.discountMoney) / 100).toFixed(2) }}元</text>
       </view>
-
-      <view class="yt-list-cell b-b">
-        <text class="cell-tit clamp">订单状态</text>
-        <text class="cell-tip" :class="state.detail.orderStatus==0?'primary':(state.detail.orderStatus==1?'success':'error')">
+      <view class="order-info_item">
+        <text class="order-info_label">订单状态</text>
+        <text class="order-info_value" :class="state.detail.orderStatus==0?'primary':(state.detail.orderStatus==1?'success':'error')">
           {{ fmtDictName('Order.status', state.detail.orderStatus) }}
         </text>
       </view>
-      <view class="yt-list-cell b-b">
-        <text class="cell-tit clamp">支付状态</text>
-        <text class="cell-tip" :class="state.detail.payStatus==0?'primary':(state.detail.payStatus==1?'success':'error')">
+      <view class="order-info_item">
+        <text class="order-info_label">支付状态</text>
+        <text class="order-info_value" :class="state.detail.payStatus==0?'primary':(state.detail.payStatus==1?'success':'error')">
           {{ fmtDictName('Order.pay', state.detail.payStatus) }}
         </text>
       </view>
-      <view class="yt-list-cell b-b">
-        <text class="cell-tit clamp">开始时间</text>
-        <text class="cell-tip">{{ fmtDateTime(state.detail.startTime) }}</text>
+      <view class="order-info_item">
+        <text class="order-info_label">开始时间</text>
+        <text class="order-info_value">{{ fmtDateTime(state.detail.startTime) }}</text>
       </view>
-      <view class="yt-list-cell b-b">
-        <text class="cell-tit clamp">结束时间</text>
-        <text class="cell-tip">{{ fmtDateTime(state.detail.endTime) }}</text>
+      <view class="order-info_item">
+        <text class="order-info_label">结束时间</text>
+        <text class="order-info_value">{{ fmtDateTime(state.detail.endTime) }}</text>
       </view>
-      <view class="yt-list-cell desc-cell">
-        <text class="cell-tit clamp">备注</text>
-        {{ state.detail.remark }}
+      <view class="order-info_item">
+        <text class="order-info_label">备注</text>
+        <text class="order-info_value">{{ state.detail.remark || '无' }}</text>
       </view>
-      <!--      <view class="yt-list-cell b-b">
-              <text class="cell-tit clamp">交易时间</text>
-              <text class="cell-tip">{{ fmtDateTime(state.detail.transactionTime) }}</text>
-            </view>-->
-    </view>
-    <view class="btn">
-      <!--      <view class="btn_2" @click="jump_torefund(my_order.order_id)">退款</view>-->
     </view>
 
-    <view class="w100 gap"></view>
     <!-- 金额明细 -->
-    <view class="order-item ml5 font14 color-info">费用明细</view>
-    <!--    <view class="yt-list">
-          <view class="yt-list-cell b-b">
-            <text class="cell-tit clamp">订单编号</text>
-            <text class="cell-tip copy" @click="handleCopy">{{ state.detail.orderNo }}
-              <uv-icon name="info-circle"></uv-icon>
-            </text>
-          </view>
-        </view>-->
-    <view class="order-item_header">
-      <view class="order-item_header_left">
-        <text class="order-item_header_left_title">项目</text>
-        <text class="order-item_header_left_price">时长</text>
-        <text class="order-item_header_left_num">单价</text>
-        <text class="order-item_header_left_total">小计</text>
+    <view class="fee-detail">
+      <view class="fee-detail_header">
+        <text class="fee-detail_title">费用明细</text>
       </view>
-    </view>
-    <view class="order-item_body">
-      <view class="order-item_body_item" v-for="item in state.detail.orderItems" :key="item.id">
-        <view class="order-item_body_item_left">
-          <text class="order-item_body_item_left_name clamp">{{ item.name }}</text>
-          <text class="order-item_body_item_left_num">{{ item.seconds }}</text>
-          <text class="order-item_body_item_left_price">{{ item.price }}</text>
-          <text class="order-item_body_item_left_total">￥{{ item.amount }}元</text>
+      <view class="fee-detail_table">
+        <view class="fee-detail_header-row">
+          <text class="fee-detail_header-cell">项目</text>
+          <text class="fee-detail_header-cell">时长</text>
+          <text class="fee-detail_header-cell">单价</text>
+          <text class="fee-detail_header-cell">小计</text>
+        </view>
+        <view class="fee-detail_body">
+          <view class="fee-detail_row" v-for="item in state.detail.orderItems" :key="item.id">
+            <text class="fee-detail_cell">{{ item.name }}</text>
+            <text class="fee-detail_cell">{{ item.seconds }}</text>
+            <text class="fee-detail_cell">{{ item.price }}</text>
+            <text class="fee-detail_cell fee-detail_total">￥{{ item.amount }}元</text>
+          </view>
         </view>
       </view>
     </view>
   </view>
-
-
 </template>
+
 <script setup lang="ts">
 
 import {onHide, onShow, onLoad} from "@dcloudio/uni-app";
@@ -114,7 +98,8 @@ import {fmtDictName, fmtDateTime, fmtDuration, fmtMoney} from "@/utils/common";
 
 const initState = () => ({
   detail: {
-    orderItems:[] as any[]
+    orderItems:[] as any[],
+    orderId: ''
   } as any
 })
 
@@ -134,8 +119,27 @@ onLoad((options: any) => {
     return;
   }
   let {orderNo, id, type} = options;
+  
+  // 先保存URL中的订单编号，确保复制功能可用
+  if (orderNo) {
+    state.detail.orderId = orderNo;
+  }
+  
   get(`/wash-order/detailWashOrder?userId=${user.id}&orderId=${orderNo}`).then((res: any) => {
-    state.detail = res;
+    // 合并API返回的数据，保留已保存的orderId
+    state.detail = {
+      ...state.detail,
+      ...res
+    };
+
+    // 检查API返回的数据结构，尝试获取订单编号
+    if (res.orderId) {
+      state.detail.orderId = res.orderId;
+    } else if (res.id) {
+      state.detail.orderId = res.id;
+    } else if (res.orderNo) {
+      state.detail.orderId = res.orderNo;
+    }
 
     state.detail.orderItems = res.detail?.filter((k: any) => k.amount > 0 || k.seconds > 0).map((s: any) => {
       return {
@@ -156,273 +160,225 @@ onHide(() => {
 
 
 const handleCopy = () => {
-  if (!state.detail.orderId) return;
-  uni.setClipboardData({
-    data: state.detail.orderId,
-    success: function () {
-      uni.showToast({
+  // 确保orderId存在且为字符串
+  let orderId = state.detail.orderId;
+  
+  // 使用微信小程序原生API复制文本
+  wx.setClipboardData({
+    data: orderId,
+    success: function() {
+      wx.showToast({
         title: '复制成功',
         icon: 'success',
-      })
+        duration: 2000
+      });
+    },
+    fail: function(error) {
+      console.error('复制到剪贴板失败:', error);
+
+      // 尝试使用uni-app API作为备选方案
+      uni.setClipboardData({
+        data: orderId,
+        success: function() {
+          uni.showToast({
+            title: '复制成功',
+            icon: 'success',
+            duration: 2000
+          });
+        },
+        fail: function() {
+          uni.showToast({
+            title: '复制失败',
+            icon: 'none'
+          });
+        }
+      });
     }
-  })
+  });
 }
 
 </script>
 
-
 <style lang="scss" scoped>
-page {
+.container {
   background: #f8f8f8;
-  padding-bottom: 100rpx;
+  padding-bottom: 30rpx;
 }
 
-.copy {
-  color: $uni-color-primary !important;
+/* 订单总览 */
+.order-overview {
+  margin-top: 20rpx;
+  background: #ffffff;
+  border-radius: 12rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+  padding: 40rpx 30rpx;
 }
 
+.order-overview_content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
 
-.goods-section {
-  margin-top: 16rpx;
-  background: #fff;
-  padding-bottom: 1px;
-
-  .g-header {
-    display: flex;
-    align-items: center;
-    height: 84rpx;
-    padding: 0 30rpx;
-    position: relative;
-  }
-
-  .logo {
-    display: block;
-    width: 50rpx;
-    height: 50rpx;
-    border-radius: 100px;
-  }
-
-  .name {
-    font-size: 30rpx;
-    color: #606266;
-    margin-left: 24rpx;
-  }
-
-  .g-item {
-    display: flex;
-    margin: 20rpx 30rpx;
-
-    image {
-      flex-shrink: 0;
-      display: block;
-      width: 140rpx;
-      height: 140rpx;
-      border-radius: 4rpx;
-    }
-
-    .right {
-      flex: 1;
-      padding-left: 24rpx;
-      overflow: hidden;
-      text-align: center;
-    }
-
-    .title {
-      font-size: 30rpx;
-      color: #303133;
-    }
-
-    .spec {
-      font-size: 26rpx;
-      color: #909399;
-    }
-
-    .price-box {
-      /* display: flex; */
-      /* align-items: center; */
-      color: #303133;
-      padding-top: 10rpx;
+.order-overview_amount {
+  display: flex;
+  align-items: baseline;
+  margin-bottom: 10rpx;
+}
 
-      .price {
-        margin-bottom: 4rpx;
-        font-size: 48rpx;
-      }
+.order-overview_currency {
+  font-size: 32rpx;
+  color: #fa436a;
+  margin-right: 4rpx;
+}
 
-      .number {
-        font-size: 26rpx;
-        color: #606266;
-        margin-left: 20rpx;
-      }
-    }
+.order-overview_price {
+  font-size: 64rpx;
+  font-weight: 600;
+  color: #fa436a;
+  line-height: 1;
+}
 
-    .price-dsc {
-      font-size: 26rpx;
-      color: $uni-text-color-tertiary;
-    }
+.order-overview_unit {
+  font-size: 32rpx;
+  color: #fa436a;
+  margin-left: 4rpx;
+}
 
-    .step-box {
-      position: relative;
-    }
-  }
+.order-overview_type {
+  font-size: 28rpx;
+  color: #606266;
 }
 
-.yt-list {
-  margin-top: 16rpx;
-  background: #fff;
+/* 订单信息 */
+.order-info {
+  margin-top: 20rpx;
+  background: #ffffff;
+  border-radius: 12rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+  overflow: hidden;
 }
 
-.yt-list-cell {
+.order-info_item {
   display: flex;
+  justify-content: space-between;
   align-items: center;
-  padding: 10rpx 30rpx 10rpx 40rpx;
-  line-height: 50rpx;
-  position: relative;
+  padding: 24rpx 30rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
 
-  &.cell-hover {
-    background: #fafafa;
-  }
+.order-info_item:last-child {
+  border-bottom: none;
+}
 
-  &.b-b:after {
-    left: 30rpx;
-  }
+.order-info_label {
+  font-size: 28rpx;
+  color: #606266;
+}
 
-  .cell-icon {
-    height: 32rpx;
-    width: 32rpx;
-    font-size: 22rpx;
-    color: #fff;
-    text-align: center;
-    line-height: 32rpx;
-    background: #f85e52;
-    border-radius: 4rpx;
-    margin-right: 12rpx;
-
-    &.hb {
-      background: #ffaa0e;
-    }
+.order-info_value {
+  font-size: 28rpx;
+  color: #303133;
+  text-align: right;
+  flex-shrink: 0;
+  margin-left: 40rpx;
+}
 
-    &.lpk {
-      background: #3ab54a;
-    }
+.copy-icon {
+  background-color: $uni-color-primary;
+  color: white;
+  padding: 6rpx 16rpx;
+  border-radius: 16rpx;
+  font-size: 22rpx;
+  margin-left: 10rpx;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  display: inline-block;
+}
 
-  }
+.copy-icon:active {
+  opacity: 0.8;
+  transform: scale(0.95);
+}
 
-  .cell-more {
-    align-self: center;
-    font-size: 24rpx;
-    color: #909399;
-    margin-left: 8rpx;
-    margin-right: -10upx;
-  }
+.order-info_value.red {
+  color: #fa436a;
+}
 
-  .cell-tit {
-    flex: 1;
-    font-size: 26rpx;
-    //color: #909399;
-    margin-right: 10rpx;
-  }
+/* 费用明细 */
+.fee-detail {
+  margin-top: 20rpx;
+  background: #ffffff;
+  border-radius: 12rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+  overflow: hidden;
+}
 
-  .cell-tip {
-    font-size: 28rpx;
-    color: #303133;
+.fee-detail_header {
+  padding: 24rpx 30rpx;
+  border-bottom: 1rpx solid #f0f0f0;
+}
 
-    &.disabled {
-      color: #909399;
-    }
+.fee-detail_title {
+  font-size: 32rpx;
+  font-weight: 500;
+  color: #303133;
+}
 
-    &.active {
-      color: #fa436a;
-    }
+.fee-detail_table {
+  width: 100%;
+}
 
-    &.red {
-      color: #fa436a;
-    }
-  }
+.fee-detail_header-row {
+  display: flex;
+  background-color: #fafafa;
+}
 
-  &.desc-cell {
-    .cell-tit {
-      max-width: 90rpx;
-    }
-  }
+.fee-detail_header-cell {
+  flex: 1;
+  padding: 20rpx;
+  font-size: 26rpx;
+  font-weight: 500;
+  color: #606266;
+  text-align: center;
+}
 
-  .desc {
-    flex: 1;
-    font-size: 28rpx;
-    color: #303133;
-  }
+.fee-detail_body {
+  background-color: #ffffff;
 }
 
+.fee-detail_row {
+  display: flex;
+  border-bottom: 1rpx solid #f0f0f0;
+}
 
+.fee-detail_row:last-child {
+  border-bottom: none;
+}
 
+.fee-detail_cell {
+  flex: 1;
+  padding: 24rpx 20rpx;
+  font-size: 26rpx;
+  color: #303133;
+  text-align: center;
+}
+
+.fee-detail_total {
+  color: #fa436a;
+  font-weight: 500;
+}
+
+/* 状态颜色 */
 .primary {
   color: $uni-color-primary !important;
 }
 
-
 .success {
   color: $uni-color-success !important;
 }
 
-
 .error {
   color: $uni-color-error !important;
 }
-
-.gap {
-  width: 100%;
-  height: 36rpx;
-  background-color: #f5f3f3;
-  margin-top: 15rpx;
-  margin-bottom: 10rpx;
-}
-
-.order-item{
-  &_header{
-    width: 100%;
-
-    &_left{
-      padding:5px;
-      width: 100%;
-      background-color: #eeefff;
-      font-size: 24rpx;
-      //color: #909399;
-      //color: #2c405a;
-      //font-size: 16px;
-      display: inline-flex;
-      justify-content: space-around;
-
-      &_title,&_price,&_total,&_num{
-        width: 25%;
-        text-align: center;
-        //border: 1px solid #ccc;
-        padding: 5px 0;
-      }
-    }
-  }
-
-  &_body{
-    width: 100%;
-
-    &_item{
-      font-size: 14px;
-
-      &_left{
-        display: inline-flex;
-        justify-content: space-around;
-        width: 100%;
-
-        &_left,&_price,&_total,&_num,&_name{
-          width: 25%;
-          text-align: center;
-          border: 1px solid #ccc;
-          border-right: none;
-          border-top: none;
-          font-size: 24rpx;
-          padding: 5px 0;
-        }
-      }
-    }
-
-  }
-}
 </style>

src/pages-order/list/index.vue

@@ -4,23 +4,26 @@
       <uv-list-item
           clickable show-arrow v-for="(item,index) in state.orderList" :key="index" @click="handleClickDetail(item)">
         <template #default>
-          <view class="wallet-item">
-            <view class="wallet-item_header">
-              <view class="flex-inline">
-                <text class="wallet-item_header-type">洗车消费</text>
-                <uv-text class="ml10" style="margin-left: 10px;" plain :size="12"
+          <view class="order-card">
+            <view class="order-card_content">
+              <view class="order-card_left">
+                <view class="order-card_info">
+                  <text class="order-card_label">订单编号</text>
+                  <text class="order-card_value">{{ item.orderId }}</text>
+                </view>
+                <view class="order-card_info">
+                  <text class="order-card_label">消费时间</text>
+                  <text class="order-card_value">{{ fmtDateTime(item.startTime) }}</text>
+                </view>
+              </view>
+              <view class="order-card_right">
+                <text class="order-card_amount">{{ (item.amount / 100).toFixed(2) }}元</text>
+                <uv-text plain :size="12"
                          :type="item.payStatus==0?'primary':(item.payStatus==1?'success':'error')"
-                         :text="fmtDictName('Order.pay', item.payStatus)"></uv-text>
-
-                <!--                  <uv-tags class="ml10" style="margin-left: 10px;" size="mini" plain
-                                           :type="item.orderStatus==0?'primary':(item.orderStatus==1?'success':'error')"
-                                           :text="fmtDictName('Order.status', item.orderStatus)"></uv-tags>-->
+                         :text="fmtDictName('Order.pay', item.payStatus)"
+                         class="order-card_status">
+                </uv-text>
               </view>
-              <text class="wallet-item_header-amt">{{ (item.amount / 100).toFixed(2) }}元</text>
-            </view>
-            <view class="wallet-item_body">
-              <text class="wallet-item_body-order">{{ item.orderId }}</text>
-              <text class="wallet-item_body-time">{{ fmtDateTime(item.startTime) }}</text>
             </view>
           </view>
         </template>
@@ -30,8 +33,6 @@
     <uv-load-more :status="computedLoadMoreStatus"
                   bgColor="#fff"
                   @loadmore="loadMore" dashed :height="30"/>
-    <!--    <login-bar class="w100 text-center"></login-bar>-->
-    <!--    <tab-bar :index="3"/>-->
   </view>
 </template>
 
@@ -123,297 +124,73 @@ const handleClickDetail = (orderDetail: any) => {
 <style lang="scss" scoped>
 .container {
   background-color: #f6f6f6;
+  padding: 20rpx 0;
 }
 
-.wallet-item {
-  display: flex;
-  flex-direction: column;
-  padding: 14rpx;
-  border-radius: 8rpx;
-  margin: 10rpx 16 prx 10rpx 10rpx;
-
-
-  &_header {
-    display: inline-flex;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-
-    &-type {
-      font-weight: 500;
-      font-size: 16px;
-      margin-right: 15rpx;
-    }
-
-
-    &-status {
-      font-size: 12px;
-      margin-left: 6px;
-      border: 1px solid $uni-color-primary;
-      border-radius: 2rpx;
-    }
+.order-card {
+  padding: 24rpx 30rpx;
+  background-color: #ffffff;
+  border-radius: 12rpx;
+  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
+  transition: transform 0.2s, box-shadow 0.2s;
 
-    &-amt {
-      font-weight: 500;
-      font-size: 17px;
-    }
+  &:active {
+    transform: translateY(2rpx);
+    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.05);
   }
-
-  &_body {
-    padding: 10rpx 0;
-    display: inline-flex;
-    justify-content: space-between;
-
-    &-order, &-time {
-      font-size: 12px;
-      color: $uni-color-subtitle
-    }
-  }
-}
-
-.font-size-lg {
-  border: none;
-  background-color: var(--theme_color);
 }
 
-.navbar {
-  height: calc(44px + var(--status-bar-height));
+.order-card_content {
   display: flex;
-  background-color: #ffffff;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.talk-btn {
-  height: 32px;
-  margin-left: 10px;
-  margin-top: 26px;
+.order-card_left {
+  flex: 1;
   display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 16px !important;
-  padding: 0 20rpx;
-  border-radius: 50rem !important;
-
-  image {
-    width: 40rpx;
-    height: 40rpx;
-    margin-right: 10px;
-  }
+  flex-direction: column;
 }
 
-.tabbar {
-  /* #ifdef MP-WEIXIN */
-  // margin-top: 60px;
-  /* #endif */
-
-  height: 100rpx;
-  background-color: #ffffff;
+.order-card_info {
   display: flex;
-  align-items: center;
-  justify-content: space-around;
-  // margin-top: 100rpx;
-
-  .item {
-    height: 100%;
-    font-size: 32rpx;
-    color: #999;
-    font-weight: 400 !important;
-    display: flex;
-    align-items: center;
-
-    &.active {
-      color: #343434;
-      border-bottom: 4rpx solid #343434;
-    }
-  }
+  flex-direction: column;
+  margin-bottom: 12rpx;
 }
 
-.swiper {
-  width: 100%;
-  height: calc(100vh - 44px);
+.order-card_label {
+  font-size: 24rpx;
+  color: #909399;
+  font-weight: 400;
 }
 
-
-.history-order {
-  width: 100%;
-  height: 100%;
-  position: relative;
-
-  .menu {
-    padding: 18rpx 30rpx;
-    display: flex;
-    align-items: center;
-    color: #FFFFFF;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 10;
-
-    .item {
-      padding: 14rpx 30rpx;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      image {
-        width: 40rpx;
-        height: 40rpx;
-        margin-right: 10rpx;
-      }
-
-      &.active {
-        color: var(--theme_color);
-        background-color: #ffffff;
-      }
-    }
-  }
-
-  .history-order-swiper {
-    width: 100%;
-    height: 100%;
-  }
+.order-card_value {
+  font-size: 28rpx;
+  color: #303133;
+  font-weight: 500;
+  word-break: break-all;
+  line-height: 1.4;
 }
 
-.store-order-wrapper {
-  width: 100%;
-  height: 100%;
+.order-card_right {
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
-  color: #999;
-  line-height: 1.3rem !important;
-
-  image {
-    width: 400rpx;
-    height: 333rpx;
-    margin-bottom: 40rpx;
-  }
+  min-width: 120rpx;
 }
 
-.orders-scroll {
-  width: 100%;
-  height: 100%;
-  padding-top: 104rpx;
+.order-card_amount {
+  font-size: 40rpx;
+  font-weight: 700;
+  color: #fa436a;
+  line-height: 1;
 }
 
-.orders-scroll1 {
-  width: 100%;
-  height: 100%;
-  padding-top: 20rpx;
+.order-card_status {
+  margin-top: 12rpx;
 }
 
-.good_name {
-  padding-left: 30rpx;
-  padding-top: 15rpx;
-  color: #555;
-  font-weight: 600;
-  font-size: 14px;
-}
-
-.order-list {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-
-  .order {
-    background-color: #ffffff;
-    padding: 30rpx 40rpx;
-    margin-bottom: 18rpx;
-
-    .header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .status {
-        font-size: 14px;
-        color: #595959;
-        display: flex;
-        align-items: center;
-
-        image {
-          width: 30rpx;
-          height: 30rpx;
-          margin-left: 10px;
-        }
-      }
-    }
-
-    .images {
-      display: flex;
-      padding: 30rpx 0;
-
-      image {
-        flex-shrink: 0;
-        width: 150rpx;
-        height: 112.5rpx;
-      }
-    }
-
-    .info {
-      display: flex;
-      align-items: center;
-      margin-bottom: 30rpx;
-
-      .left {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        font-size: 12px;
-        color: #7a7a7a;
-
-        // view {
-        // 	margin-bottom: 10rpx;
-        // 	font-size: 12px;
-
-        // 	&:last-child {
-        // 		margin-bottom: 0;
-        // 	}
-        // }
-      }
-
-      .right {
-        font-size: 32rpx;
-        color: #343434;
-      }
-    }
-
-    .action {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-
-
-      button {
-        margin-left: 30rpx;
-        font-size: 16px;
-      }
-    }
-  }
-
-  .button {
-    margin-left: 30rpx;
-    padding: 15rpx 20rpx;
-    font-size: 16px;
-    border-radius: 70rpx;
-    background-color: #eee;
-
-    &_pay {
-      background-color: var(--theme_color);
-      color: white;
-      border: none;
-      border-radius: 70rpx;
-    }
-
-    &_del {
-      color: white;
-      background-color: #F56C6C;
-    }
-
-    &_re {
-      color: white;
-      background-color: #5CB87A;
-    }
-  }
+.ml10 {
+  margin-left: 10px;
 }
 </style>

src/uni.scss

@@ -16,34 +16,69 @@
 
 @import '@climblee/uv-ui/theme.scss';
 
+/* 品牌主色调 */
+$uni-color-primary: #C6171E; // 主红色
+$uni-color-primary-light: #E84545; // 浅红色
+$uni-color-primary-dark: #A81212; // 深红色
+
 /* 行为相关颜色 */
-$uni-color-primary: #C6171E;
-$uni-color-success: #4cd964;
-$uni-color-warning: #f0ad4e;
-$uni-color-error: #dd524d;
-
-/* 文字基本颜色 */
-$uni-text-color: #333; // 基本色
-$uni-text-color-inverse: #fff; // 反色
-$uni-text-color-grey: #999; // 辅助灰色，如加载更多的提示信息
-$uni-text-color-placeholder: #808080;
-$uni-text-color-disable: #c0c0c0;
-
-/* 背景颜色 */
-$uni-bg-color: #fff;
-$uni-bg-color-grey: #f8f8f8;
-$uni-bg-color-hover: #f1f1f1; // 点击状态颜色
+$uni-color-success: #4CAF50; // 成功绿色
+$uni-color-warning: #FF9800; // 警告橙色
+$uni-color-error: #F44336; // 错误红色
+$uni-color-info: #2196F3; // 信息蓝色
+
+/* 文字颜色系统 */
+$uni-text-color: #1A1A1A; // 主文字色
+$uni-text-color-secondary: #666666; // 次要文字色
+$uni-text-color-tertiary: #999999; // 辅助文字色
+$uni-text-color-inverse: #FFFFFF; // 反色文字
+$uni-text-color-placeholder: #B0B0B0; // 占位符文字
+$uni-text-color-disable: #CCCCCC; // 禁用文字色
+
+/* 背景颜色系统 */
+$uni-bg-color: #FFFFFF; // 主背景色
+$uni-bg-color-page: #F5F7FA; // 页面背景色
+$uni-bg-color-card: #FFFFFF; // 卡片背景色
+$uni-bg-color-hover: #F8F8F8; // 点击状态背景色
 $uni-bg-color-mask: rgba(0, 0, 0, 0.4); // 遮罩颜色
 
-/* 边框颜色 */
-$uni-border-color: #c8c7cc;
+/* 边框颜色系统 */
+$uni-border-color: #E0E0E0; // 主边框色
+$uni-border-color-light: #F0F0F0; // 浅边框色
+$uni-border-color-dark: #D0D0D0; // 深边框色
+
+/* 辅助颜色 */
+$uni-color-divider: #F0F0F0; // 分割线颜色
+$uni-color-shadow: rgba(0, 0, 0, 0.1); // 阴影颜色
+$uni-color-highlight: rgba(198, 23, 30, 0.1); // 高亮背景色
 
 /* 尺寸变量 */
 
-/* 文字尺寸 */
-$uni-font-size-sm: 12px;
-$uni-font-size-base: 14px;
-$uni-font-size-lg: 16;
+/* 文字尺寸系统 */
+$uni-font-size-xs: 12px; // 最小文本
+$uni-font-size-sm: 13px; // 小号文本
+$uni-font-size-base: 14px; // 基础文本
+$uni-font-size-lg: 16px; // 大号文本
+$uni-font-size-xl: 18px; // 标题文本
+$uni-font-size-xxl: 20px; // 大标题文本
+$uni-font-size-xxxl: 24px; // 特大标题文本
+
+/* 行高系统 */
+$uni-line-height-xs: 1.2; // 紧凑行高
+$uni-line-height-sm: 1.4; // 小号行高
+$uni-line-height-base: 1.6; // 基础行高
+$uni-line-height-lg: 1.8; // 大号行高
+$uni-line-height-xl: 2.0; // 宽松行高
+
+/* 字重系统 */
+$uni-font-weight-normal: 400; // 常规字重
+$uni-font-weight-medium: 500; // 中等字重
+$uni-font-weight-semibold: 600; // 半粗字重
+$uni-font-weight-bold: 700; // 粗体字重
+
+/* 字体族 */
+$uni-font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+$uni-font-family-mono: 'Courier New', Courier, monospace;
 
 /* 图片尺寸 */
 $uni-img-size-sm: 20px;