Explorar o código

1、点击操作之后遮罩弹窗 按钮居中,点击更多也是一样
2、点击操作中,批量发货 文字 改成 全部已取货
3、按钮:操作变成灰色,跟 时间和筛选同个颜色
4、客户按钮去掉,输入框中文字改为:姓名/货号,操作按钮变长
5、打印、呼叫跑腿、更多 这几个按钮间距 拉大1倍

ouyang hai 2 semanas
pai
achega
ac93a0054a
Modificáronse 1 ficheiros con 186 adicións e 132 borrados
  1. 186 132
      hdApp/src/admin/home/order.vue

+ 186 - 132
hdApp/src/admin/home/order.vue

@@ -15,16 +15,12 @@
             <image class="filter-icon" :src="iconSrc('order-calendar')" mode="aspectFit" />
             <DateSelect ref="dateSelectRef" class="date-select" top="0" @selectDateFn="selectDateFn" defaultShowName="近30天" />
           </view>
-          <view class="filter-chip mode-chip" :class="{ active: searchStyle == 0 }" @click="changeSearchStyle">
-            <image class="filter-icon" :src="iconSrc('order-account-name')" mode="aspectFit" />
-            <text>{{ searchStyle == 0 ? '客户' : '编号' }}</text>
-          </view>
           <view class="search-box">
             <AppSearchModule
               ref="searchRef"
               :height="72"
               :fontSize="26"
-              placeholder="姓名/单号/编号"
+              placeholder="姓名/号"
               placeholderColor="#a4a8b0"
               backColor="#f2f4f3"
               v-model="searchText"
@@ -34,10 +30,6 @@
           </view>
           <view class="batch-op-wrap">
             <view class="batch-op-btn" @click.stop="toggleBatchMenu">操作</view>
-            <view v-if="showBatchMenu" class="batch-menu">
-              <view class="batch-menu-item" @click.stop="openBatchFetchModal">批量发货</view>
-              <view class="batch-menu-item batch-menu-close" @click.stop="closeBatchMenu">关闭</view>
-            </view>
           </view>
           <view class="filter-btn" @click.stop="openFilterPanel">
             <image class="filter-icon filter-icon-lg" :src="iconSrc('order-filter')" mode="aspectFit" />
@@ -169,7 +161,7 @@
             <text class="merge-arrow">›</text>
           </view>
 
-          <view class="action-row" @click.stop="closeActionMoreMenu">
+          <view class="action-row" @click.stop>
             <view class="action-row-main">
               <view
                 class="outline-action"
@@ -211,28 +203,6 @@
 
             <view class="action-more-wrap">
               <view class="outline-action" @click.stop="toggleActionMore(index)">更多</view>
-              <view v-if="activeMoreIndex === index" class="action-more-menu" @click.stop>
-                <view
-                  class="action-more-item"
-                  :class="{ disabled: !item._canSendWork }"
-                  @click.stop="handleMoreSendWork(index)"
-                >
-                  <image
-                    class="action-icon"
-                    :class="{ 'action-icon-muted': !item._canSendWork }"
-                    :src="iconSrc('order-bell')"
-                    mode="aspectFit"
-                  />
-                  <text>通知制作</text>
-                </view>
-                <view
-                  class="action-more-item"
-                  :class="{ disabled: !item._showConfirmReachAction }"
-                  @click.stop="handleMoreConfirmReach(index)"
-                >
-                  确认送达
-                </view>
-              </view>
             </view>
           </view>
         </view>
@@ -252,6 +222,43 @@
       </view>
     </uni-popup>
 
+    <view v-if="showBatchMenu" class="action-dialog-overlay" @click="closeBatchMenu">
+      <view class="action-dialog-box" @click.stop>
+        <view class="action-dialog-title">操作</view>
+        <view class="action-dialog-list">
+          <view class="action-dialog-item primary" @click="openBatchFetchModal">全部已取货</view>
+          <view class="action-dialog-item" @click="closeBatchMenu">关闭</view>
+        </view>
+      </view>
+    </view>
+
+    <view
+      v-if="activeMoreIndex >= 0"
+      class="action-dialog-overlay"
+      @click="onMoreOverlayClick"
+    >
+      <view class="action-dialog-box" @click.stop>
+        <view class="action-dialog-title">更多操作</view>
+        <view class="action-dialog-list">
+          <view
+            class="action-dialog-item action-dialog-btn outline-action"
+            :class="{ disabled: !activeMoreItem || !activeMoreItem._canSendWork }"
+            @click="handleMoreSendWork(activeMoreIndex)"
+          >
+            通知制作
+          </view>
+          <view
+            class="action-dialog-item action-dialog-btn outline-action"
+            :class="{ disabled: !activeMoreItem || !activeMoreItem._showConfirmReachAction }"
+            @click="handleMoreConfirmReach(activeMoreIndex)"
+          >
+            确认送达
+          </view>
+          <view class="action-dialog-item cancel" @click="closeActionMoreMenu">取消</view>
+        </view>
+      </view>
+    </view>
+
     <view v-if="showBatchFetchModal" class="batch-fetch-overlay" @click="closeBatchFetchModal">
       <view class="batch-fetch-modal" @click.stop>
         <view class="batch-fetch-close" @click="closeBatchFetchModal">×</view>
@@ -313,7 +320,6 @@ import { getStaffList } from "@/api/staff";
 import AppSearchModule from "@/components/module/app-search";
 import { cancelExpressOrder } from "@/api/shop-express";
 import DateSelect from "@/components/module/dateSelect";
-import { getList } from "@/api/member";
 import { needWork } from "@/api/work";
 import { iconSrc } from "@/utils/iconSrc";
 
@@ -371,7 +377,6 @@ export default {
       startTime: "",
       endTime: "",
       repeat: -1,
-      searchStyle: 0,
       searchText: "",
       lastSearchText: "",
       orderListRequestId: 0,
@@ -380,6 +385,8 @@ export default {
       showBatchFetchModal: false,
       batchFetchLoading: false,
       activeMoreIndex: -1,
+      // 打开「更多」弹窗后短暂忽略遮罩点击,避免同一次点击冒泡导致立刻关闭
+      ignoreMoreOverlayClose: false,
       repeatOptions: [
         { label: "全部", value: -1 },
         { label: "扫码单", value: 1 }
@@ -389,6 +396,13 @@ export default {
   computed: {
     hasActiveFilters () {
       return this.repeat !== -1 || this.shopAdminId !== 0;
+    },
+    /** 当前打开「更多」弹窗的订单行 */
+    activeMoreItem () {
+      if (this.activeMoreIndex < 0) {
+        return null;
+      }
+      return this.list.data[this.activeMoreIndex] || null;
     }
   },
   onLoad () {
@@ -454,13 +468,37 @@ export default {
      * @param {number} index - 订单列表索引
      */
     toggleActionMore (index) {
-      this.activeMoreIndex = this.activeMoreIndex === index ? -1 : index;
+      this.closeBatchMenu();
+      const targetIndex = Number(index);
+      if (this.activeMoreIndex === targetIndex) {
+        this.activeMoreIndex = -1;
+        this.ignoreMoreOverlayClose = false;
+        return;
+      }
+      // 先标记忽略遮罩关闭,再打开弹窗,防止小程序端同次点击冒泡到遮罩
+      this.ignoreMoreOverlayClose = true;
+      this.activeMoreIndex = targetIndex;
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.ignoreMoreOverlayClose = false;
+        }, 200);
+      });
+    },
+    /**
+     * 点击「更多」弹窗遮罩关闭
+     */
+    onMoreOverlayClick () {
+      if (this.ignoreMoreOverlayClose) {
+        return;
+      }
+      this.closeActionMoreMenu();
     },
     /**
      * 关闭订单卡片「更多」操作菜单
      */
     closeActionMoreMenu () {
       this.activeMoreIndex = -1;
+      this.ignoreMoreOverlayClose = false;
     },
     /**
      * 更多菜单:通知制作
@@ -498,6 +536,7 @@ export default {
      * 切换批量操作下拉菜单
      */
     toggleBatchMenu () {
+      this.closeActionMoreMenu();
       this.showBatchMenu = !this.showBatchMenu;
     },
     /**
@@ -537,8 +576,7 @@ export default {
         shopAdminId: this.shopAdminId,
         searchText: this.searchText,
         customId: this.customId,
-        repeat: this.repeat,
-        searchStyle: this.searchStyle
+        repeat: this.repeat
       }).then(res => {
         if (res.code == 1) {
           this.$msg(res.msg || "操作成功");
@@ -588,39 +626,23 @@ export default {
       this.resetList();
       this.getOrderList();
     },
+    /**
+     * 搜索框输入:关键词传给后端,由接口自动识别货号/姓名
+     */
     searchFn (e) {
-      if (this.searchStyle == 0) {
-        if (this.$util.isEmpty(this.searchText) && this.$util.isEmpty(this.lastSearchText)) {
-          return;
-        }
-
-        if (this.$util.isEmpty(e)) {
-          this.showSearch = false;
-          this.searchList = [];
-        } else {
-          this.lastSearchText = this.searchText;
-          getList({ page: 1, name: e, type: 0 }).then(res => {
-            if (!this.$util.isEmpty(res.data) && !this.$util.isEmpty(res.data.list)) {
-              this.showSearch = true;
-              this.searchList = res.data.list;
-            } else {
-              this.showSearch = false;
-              this.searchList = [];
-            }
-          });
-        }
-      } else {
-        if (this.$util.isEmpty(this.searchText) && this.$util.isEmpty(this.lastSearchText)) {
-          return;
-        }
-        if (this.searchText === this.lastSearchText) {
-          return;
-        }
-
-        this.lastSearchText = this.searchText;
-        this.resetList();
-        this.getOrderList();
+      if (this.$util.isEmpty(this.searchText) && this.$util.isEmpty(this.lastSearchText)) {
+        return;
+      }
+      if (this.searchText === this.lastSearchText) {
+        return;
       }
+
+      this.showSearch = false;
+      this.searchList = [];
+      this.customId = 0;
+      this.lastSearchText = this.searchText;
+      this.resetList();
+      this.getOrderList();
     },
     /**
      * 通知制作
@@ -705,13 +727,19 @@ export default {
         });
       });
     },
-    changeSearchStyle () {
-      this.searchStyle = this.searchStyle == 0 ? 1 : 0;
-      this.showSearch = false;
-      this.customId = 0;
+    clearFn () {
+      this.resetList();
+      this.shopAdminId = 0;
       this.searchText = "";
       this.lastSearchText = "";
-      this.resetList();
+      this.showSearch = false;
+      this.customId = 0;
+      this.searchTime = "";
+      this.startTime = "";
+      this.endTime = "";
+      if (this.$refs && this.$refs.searchRef) {
+        this.$refs.searchRef.search = "";
+      }
       this.getOrderList();
     },
     /**
@@ -777,8 +805,7 @@ export default {
         searchText: this.searchText,
         page: this.list.page,
         customId: this.customId,
-        repeat: this.repeat,
-        searchStyle: this.searchStyle
+        repeat: this.repeat
       }).then(res => {
         if (requestId !== this.orderListRequestId) {
           return false;
@@ -1040,44 +1067,102 @@ export default {
 }
 
 .batch-op-btn {
+  min-width: 108upx;
   height: 72upx;
-  padding: 0 14upx;
-  border: 1upx solid #09c567;
+  padding: 0 28upx;
+  border: 1upx solid #e3e8e6;
   border-radius: 16upx;
   background: #fff;
-  color: #09c567;
-  font-size: 24upx;
-  font-weight: 700;
+  color: #24282d;
+  font-size: 28upx;
+  font-weight: 400;
   line-height: 72upx;
+  text-align: center;
   white-space: nowrap;
   box-sizing: border-box;
 }
 
-.batch-menu {
-  position: absolute;
+.action-dialog-overlay {
+  position: fixed;
+  left: 0;
   right: 0;
-  top: 82upx;
-  z-index: 50;
-  min-width: 180upx;
-  padding: 8upx 0;
-  border: 1upx solid #09c567;
-  border-radius: 16upx;
+  top: 0;
+  bottom: 0;
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.action-dialog-box {
+  width: 620upx;
+  padding: 40upx 32upx 32upx;
+  border-radius: 24upx;
   background: #fff;
-  box-shadow: 0 12upx 28upx rgba(22, 33, 28, 0.12);
+  box-sizing: border-box;
 }
 
-.batch-menu-item {
-  padding: 18upx 28upx;
-  color: #09c567;
-  font-size: 28upx;
+.action-dialog-title {
+  margin-bottom: 24upx;
+  color: #24282d;
+  font-size: 34upx;
   font-weight: 700;
+  line-height: 48upx;
   text-align: center;
-  white-space: nowrap;
 }
 
-.batch-menu-close {
-  color: #666;
+.action-dialog-list {
+  overflow: hidden;
+  border-radius: 16upx;
+}
+
+.action-dialog-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 96upx;
+  padding: 0 24upx;
+  color: #24282d;
+  font-size: 32upx;
   font-weight: 500;
+  text-align: center;
+  background: #f7f8f8;
+  border: 1upx solid transparent;
+  box-sizing: border-box;
+
+  & + & {
+    margin-top: 16upx;
+  }
+
+  &.primary {
+    color: #09c567;
+    font-weight: 700;
+  }
+
+  &.cancel {
+    color: #666;
+    font-weight: 400;
+  }
+}
+
+/* 弹窗内操作按钮:与卡片「已取货」outline-action 同款样式 */
+.action-dialog-btn.outline-action {
+  width: 100%;
+  min-height: 96upx;
+  padding: 0 24upx;
+  font-size: 32upx;
+  font-weight: 700;
+  border-radius: 16upx;
+  color: #09c567;
+  border: 1upx solid #09c567;
+  background: #fff;
+}
+
+.action-dialog-btn.outline-action.disabled {
+  color: #b7bfc0;
+  border-color: #dbe0df;
+  background: #f5f7f6;
 }
 
 .batch-fetch-overlay {
@@ -1126,10 +1211,11 @@ export default {
 .batch-fetch-actions {
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 
 .batch-fetch-btn {
-  flex: 1;
+  width: 220upx;
   height: 80upx;
   border-radius: 12upx;
   font-size: 32upx;
@@ -1512,49 +1598,17 @@ export default {
 }
 
 .action-row-main > view + view {
-  margin-left: 8upx;
+  margin-left: 16upx;
 }
 
 .action-more-wrap {
   position: relative;
   flex-shrink: 0;
-  margin-left: 8upx;
-}
-
-.action-more-menu {
-  position: absolute;
-  right: 0;
-  bottom: 82upx;
-  z-index: 20;
-  min-width: 200upx;
-  padding: 8upx 0;
-  border: 1upx solid #09c567;
-  border-radius: 16upx;
-  background: #fff;
-  box-shadow: 0 12upx 28upx rgba(22, 33, 28, 0.12);
-}
-
-.action-more-item {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 18upx 24upx;
-  color: #09c567;
-  font-size: 26upx;
-  font-weight: 700;
-  white-space: nowrap;
-}
-
-.action-more-item text {
-  margin-left: 6upx;
-}
-
-.action-more-item.disabled {
-  color: #b7bfc0;
+  margin-left: 16upx;
 }
 
 .action-row > view + view {
-  margin-left: 8upx;
+  margin-left: 16upx;
 }
 
 .outline-action,