Преглед на файлове

style: 订单列表「新用户」标签重新布局,admin-h5 移至卡片头部徽标区,admin-web 改为品牌红并加宽手机号列

skyline преди 2 седмици
родител
ревизия
061f29558c
променени са 2 файла, в които са добавени 22 реда и са изтрити 11 реда
  1. 20 9
      admin-h5/src/pages/order/list.vue
  2. 2 2
      admin-web/src/views/admin/ordering/index.vue

+ 20 - 9
admin-h5/src/pages/order/list.vue

@@ -27,12 +27,15 @@
         <view class="order-header">
           <view class="order-header-row">
             <text class="order-id-label">订单号</text>
-            <text
-              class="order-status"
-              :style="getOrderStatusStyle(order.orderStatus)"
-            >
-              {{ getOrderStatusText(order.orderStatus) }}
-            </text>
+            <view class="order-header-tags">
+              <text v-if="order.newUser" class="new-user-tag">新用户</text>
+              <text
+                class="order-status"
+                :style="getOrderStatusStyle(order.orderStatus)"
+              >
+                {{ getOrderStatusText(order.orderStatus) }}
+              </text>
+            </view>
           </view>
           <view class="order-header-row">
             <view class="order-id-wrapper">
@@ -70,7 +73,6 @@
             <text class="info-label">用户手机号</text>
             <view class="info-value-row">
               <text class="info-value">{{ order.mobilePhone || '匿名用户' }}</text>
-              <text v-if="order.newUser" class="new-user-tag">新用户</text>
               <AppIcon v-if="order.mobilePhone" name="copy" :size="28" color="#C6171E" class="copy-icon" @click.stop="copyText(order.mobilePhone)" />
             </view>
           </view>
@@ -472,6 +474,14 @@ const onPullDownRefresh = () => {
   margin-bottom: 0;
 }
 
+/* 订单头部右侧徽标组 */
+.order-header-tags {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  flex-shrink: 0;
+}
+
 .order-id-label {
   font-size: 24rpx;
   color: #999999;
@@ -560,11 +570,12 @@ const onPullDownRefresh = () => {
 
 /* 新用户订单标签 */
 .new-user-tag {
-  font-size: 20rpx;
+  font-size: 22rpx;
+  line-height: 1.4;
   color: #C6171E;
   background-color: rgba(198, 23, 30, 0.1);
   border-radius: 200rpx;
-  padding: 2rpx 16rpx;
+  padding: 6rpx 18rpx;
   font-weight: 500;
   white-space: nowrap;
   flex-shrink: 0;

+ 2 - 2
admin-web/src/views/admin/ordering/index.vue

@@ -131,7 +131,7 @@
                 <el-tag
                     v-if="row.newUser"
                     class="new-user-tag"
-                    type="success"
+                    type="danger"
                     size="small"
                     effect="light">
                   新用户
@@ -248,7 +248,7 @@ const state = reactive({
     {label: '消费站点', prop: 'stationId', width: 140, query: true, type: 'select', resizable: true, conf: {url: 'washStation/list', valueKey: 'stationId', labelKey: 'stationName'}},
     {label: '归属站点', prop: 'userStationId', width: 140, query: true, type: 'select', resizable: true, conf: {url: 'washStation/list', valueKey: 'stationId', labelKey: 'stationName'}},
     {width: 220, label: '订单号', prop: 'orderId', query: true, type: 'text', resizable: true, fixed: 'left'},
-    {width: 150, label: '用户手机号', prop: 'mobilePhone', query: true, type: 'text', fixed: 'left'},
+    {width: 180, label: '用户手机号', prop: 'mobilePhone', query: true, type: 'text', fixed: 'left'},
     {width: 100, label: '设备编号', prop: 'shortId', query: false, type: 'text', resizable: true},
     {width: 160, label: '开始时间', prop: 'startTime', query: false, sortable: 'custom', type: 'datetime', resizable: true, conf: {format: (val: any) => u.fmt.fmtDate(val)}},
     {width: 160, label: '结束时间', prop: 'endTime', query: false, sortable: 'custom', type: 'datetime', resizable: true, conf: {format: (val: any) => u.fmt.fmtDateTime(val)}},