设备详情 删除 报废弹窗

packages/mobile/src/views/EquipmentDetails.vue

@@ -50,15 +50,26 @@
 
     <van-tabbar>
       <van-tabbar-item>
-        <template #default>
+        <van-popover
-          <van-button type="primary" style="width: 80px; border-radius: 10px">
+          placement="top-start"
-            更多
+          :show="showPopover"
-          </van-button>
+          :actions="actions"
-        </template>
+          @select="onSelect"
+        >
+          <template #reference>
+            <van-button type="primary" style="width: 80px; border-radius: 10px">
+              更多
+            </van-button>
+          </template>
+        </van-popover>
       </van-tabbar-item>
       <van-tabbar-item
         ><template #default>
-          <van-button type="warning" style="width: 80px; border-radius: 10px" @click="onBrokenPopupOpen">
+          <van-button
+            type="warning"
+            style="width: 80px; border-radius: 10px"
+            @click="onBrokenPopupOpen"
+          >
             损坏
           </van-button>
         </template></van-tabbar-item
@@ -72,7 +83,11 @@
       >
       <van-tabbar-item
         ><template #default>
-          <van-button type="primary" style="width: 80px; border-radius: 10px" @click="onRemarkPopupOpen">
+          <van-button
+            type="primary"
+            style="width: 80px; border-radius: 10px"
+            @click="onRemarkPopupOpen"
+          >
             备注
           </van-button>
         </template></van-tabbar-item
@@ -96,7 +111,46 @@
       :style="{ height: '20%' }"
       @close="onDeletePopupClose"
     >
+      <div
+        style="
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          padding: 0 16px;
+        "
+      >
+        <h1
+          style="
+            margin: 0 0 20px 0;
+            font-size: 18px;
+            color: #333;
+            text-align: center;
+          "
+        >
+          确认删除？
+        </h1>
+
+        <div style="display: flex; gap: 20px; width: 100%">
+          <van-button
+            type="default"
+            style="flex: 1; border-radius: 8px"
+            @click="onDeletePopupClose"
+          >
+            取消
+          </van-button>
+          <van-button
+            type="primary"
+            style="flex: 1; border-radius: 8px"
+            @click="onDeleteConfirm"
+          >
+            确认
+          </van-button>
+        </div>
+      </div>
     </van-popup>
+
     <van-popup
       :show="showBrokenPopup"
       position="bottom"
@@ -111,9 +165,58 @@
       position="bottom"
       closeable
       close-on-click-overlay
-      :style="{ height: '20%' }"
+      :style="{ height: '30%' }"
       @close="on报废PopupClose"
     >
+      <div
+        style="
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          padding: 0 16px;
+        "
+      >
+        <h1
+          style="
+            margin: 0 0 12px 0;
+            font-size: 18px;
+            color: #333;
+            text-align: center;
+          "
+        >
+          报废
+        </h1>
+
+        <van-field
+          v-model="scrapReason"
+          placeholder="请填写原因"
+          style="
+            width: 100%;
+            margin-bottom: 16px;
+            border-radius: 8px;
+            background: #f7f8fa;
+          "
+        />
+
+        <div style="display: flex; gap: 20px; width: 100%">
+          <van-button
+            type="default"
+            style="flex: 1; border-radius: 8px"
+            @click="on报废PopupClose"
+          >
+            取消
+          </van-button>
+          <van-button
+            type="primary"
+            style="flex: 1; border-radius: 8px"
+            @click="on报废Confirm"
+          >
+            确认
+          </van-button>
+        </div>
+      </div>
     </van-popup>
   </div>
 </template>
@@ -126,6 +229,16 @@ import { showToast } from "vant";
 const router = useRouter();
 const route = useRoute();
 
+const showPopover = ref(false);
+const actions = [{ text: "删除" }, { text: "报废" }];
+const onSelect = (action) => {
+  if (action.text === "删除") {
+    showDeletePopup.value = true;
+  }
+  if (action.text === "报废") {
+    show报废Popup.value = true;
+  }
+};
 const equipmentInfo = ref({
   title: "",
   label: "",
@@ -142,20 +255,32 @@ const onClickLeft = () => {
 };
 
 const show报废Popup = ref(false);
+const scrapReason = ref(''); // 报废原因
 const on报废PopupClose = () => {
   show报废Popup.value = false;
+  scrapReason.value = '';
 };
+const on报废Confirm = () => {
+  show报废Popup.value = false;
+  scrapReason.value = '';
+};
+
 const showBrokenPopup = ref(false);
 const onBrokenPopupOpen = () => {
-  showBrokenPopup.value = true; 
+  showBrokenPopup.value = true;
 };
 const onBrokenPopupClose = () => {
   showBrokenPopup.value = false;
 };
+
 const showDeletePopup = ref(false);
 const onDeletePopupClose = () => {
   showDeletePopup.value = false;
 };
+const onDeleteConfirm = () => {
+  showDeletePopup.value = false;
+};
+
 const showRemarkPopup = ref(false);
 const onRemarkPopupOpen = () => {
   showRemarkPopup.value = true;

packages/mobile/src/views/EquipmentManagement.vue

@@ -11,6 +11,7 @@
     <van-cell-group>
       <van-cell title="当前站点" value="李家坝仓库" />
     </van-cell-group>
+    <van-notice-bar mode="link">20台设备待确认</van-notice-bar>
 
     <div class="content">
       <van-cell-group>