1

src/components/MobileFloatingActions/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <transition name="mfa-slide">
+    <div v-show="visible" class="mobile-floating-actions">
+      <slot />
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'MobileFloatingActions',
+  data() {
+    return {
+      keyboardOpen: false
+    }
+  },
+  computed: {
+    visible() {
+      return !this.keyboardOpen
+    }
+  },
+  mounted() {
+    if (window.visualViewport) {
+      this._onViewportResize = () => {
+        const vv = window.visualViewport
+        this.keyboardOpen = window.innerHeight - vv.height > 120
+      }
+      window.visualViewport.addEventListener('resize', this._onViewportResize)
+      window.visualViewport.addEventListener('scroll', this._onViewportResize)
+    }
+  },
+  beforeDestroy() {
+    if (window.visualViewport && this._onViewportResize) {
+      window.visualViewport.removeEventListener('resize', this._onViewportResize)
+      window.visualViewport.removeEventListener('scroll', this._onViewportResize)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.mobile-floating-actions {
+  position: fixed;
+  left: 12px;
+  right: 12px;
+  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
+  z-index: 999;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  background: rgba(255, 255, 255, 0.96);
+  border-radius: 16px;
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
+  backdrop-filter: blur(10px);
+
+  ::v-deep .el-button {
+    flex: 1;
+    height: 44px;
+    margin: 0;
+    border-radius: 12px;
+    font-size: 15px;
+  }
+
+  ::v-deep .el-button--primary {
+    flex: 1.6;
+    font-weight: 600;
+  }
+}
+
+.mfa-slide-enter-active,
+.mfa-slide-leave-active {
+  transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.mfa-slide-enter,
+.mfa-slide-leave-to {
+  transform: translateY(12px);
+  opacity: 0;
+}
+
+@media (min-width: 769px) {
+  .mobile-floating-actions {
+    display: none;
+  }
+}
+</style>

src/main.js

@@ -41,6 +41,7 @@ import MobileTable from '@/components/MobileTable'
 import MobileSearchForm from '@/components/MobileSearchForm'
 import MobileButtonGroup from '@/components/MobileButtonGroup'
 import MobileBottomNav from '@/components/MobileBottomNav'
+import MobileFloatingActions from '@/components/MobileFloatingActions'
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@@ -66,6 +67,7 @@ Vue.component('MobileTable', MobileTable)
 Vue.component('MobileSearchForm', MobileSearchForm)
 Vue.component('MobileButtonGroup', MobileButtonGroup)
 Vue.component('MobileBottomNav', MobileBottomNav)
+Vue.component('MobileFloatingActions', MobileFloatingActions)
 
 Vue.use(directive)
 Vue.use(plugins)

src/views/system/jd-instruction/fadan-quick-record.vue

@@ -100,7 +100,7 @@
           <el-input v-model="form.logisticsLink" type="textarea" :rows="2" placeholder="落库必填" clearable />
         </el-form-item>
 
-        <div class="btn-row">
+        <div v-if="!isMobile" class="btn-row">
           <el-button type="primary" size="medium" :loading="loading" @click="generate">录单</el-button>
           <el-button size="medium" @click="resetForm">重置表单</el-button>
           <el-button v-if="resultText" size="medium" @click="copyResult">
@@ -150,6 +150,14 @@
     </el-dialog>
 
     <quick-record-model-shop-config v-model="showShopConfig" @saved="loadShopOptions" />
+
+    <mobile-floating-actions v-if="isMobile">
+      <el-button type="primary" :loading="loading" @click="generate">录单</el-button>
+      <el-button @click="resetForm">重置</el-button>
+      <el-button v-if="resultText" @click="copyResult">
+        {{ resultPieces.length > 1 ? '复制全部' : '复制' }}
+      </el-button>
+    </mobile-floating-actions>
   </div>
 </template>
 
@@ -676,6 +684,10 @@ export default {
   padding-bottom: 16px;
 }
 
+.fadan-quick-record--mobile {
+  padding-bottom: 80px;
+}
+
 .fadan-quick-record--mobile .box-card {
   margin: 0 12px 20px;
 }

src/views/system/social-media/xianyu-wenan.vue

@@ -38,7 +38,7 @@
               clearable
             />
           </el-form-item>
-          <el-form-item>
+          <el-form-item v-if="!mobile">
             <el-button
               type="primary"
               class="btn-generate"
@@ -117,6 +117,15 @@
         </el-row>
       </div>
     </el-card>
+
+    <mobile-floating-actions v-if="mobile">
+      <el-button type="primary" :loading="generating" @click="handleGenerate">
+        生成文案
+      </el-button>
+      <el-button :disabled="!form.title && !form.remark" @click="handleClearInput">
+        清空
+      </el-button>
+    </mobile-floating-actions>
   </div>
 </template>
 
@@ -332,7 +341,7 @@ export default {
 /* 移动端适配 */
 @media (max-width: 767px) {
   .xianyu-wenan-container {
-    padding: 8px;
+    padding: 8px 8px 80px;
   }
   .box-card {
     margin: 0 -8px;