编辑页面操作按钮

pages/Project/detail.vue

@@ -101,7 +101,7 @@
             </span>
           </view>
 
-          <view class="authDetail">
+          <view class="authDetail" :style="authStyle">
             <view class="authTitle">审核详情:</view>
             <view>
               <uni-steps
@@ -115,15 +115,17 @@
       </view>
     </view>
 
-    <view class="footer" ref="footer">
+    <view class="footer" :style="editStyle" v-show="canEdit">
       <view class="footer_text" @click="showEdit"> 操作 </view>
       <edit
+        ref="footer"
         :project="currentProject"
         :user="user"
         :auth="auth"
         :flowList="flowList"
         :depRole="depRole"
         :isDetail="true"
+        @canEdit="canEdit = $event"
       />
     </view>
   </view>
@@ -140,10 +142,18 @@ export default {
   data() {
     return {
       auth: false,
+      canEdit: false,
       status: ["售前", "转执行", "转运营", "转质保"],
       flowList: [],
       depRole: [],
       user: {},
+      editClick: false,
+      editStyle: {
+        top: "calc(100vh - 50px)",
+      },
+      authStyle: {
+        "margin-bottom": "60px",
+      },
     };
   },
   computed: {
@@ -197,10 +207,15 @@ export default {
             .join("，");
       }
     },
-    showEdit(){
-      console.log(this.$refs.footer);
-      console.log(this.$refs.footer.$el.clientHeight);
-    }
+    showEdit() {
+      this.editClick = !this.editClick;
+      this.editStyle.top = this.editClick
+        ? `calc(100vh - 50px - ${this.$refs.footer.$el.clientHeight}px)`
+        : "calc(100vh - 50px)";
+      this.authStyle["margin-bottom"] = this.editClick
+        ? `calc(60px + ${this.$refs.footer.$el.clientHeight}px)`
+        : "60px";
+    },
   },
 };
 </script>
@@ -251,7 +266,7 @@ export default {
   width: 100%;
   font-size: 28rpx;
   border-bottom: 1rpx solid #eee;
-  margin-bottom: 60px;
+  transition: margin-bottom 0.5s;
   .authTitle {
     padding: 20rpx 0;
     margin: 10rpx 0;
@@ -260,8 +275,8 @@ export default {
 .footer {
   width: 100%;
   position: fixed;
-  top: calc(100vh - 50px);
   left: 0;
+  transition: top 0.5s;
 }
 .footer_text {
   text-align: center;

pages/Project/edit.vue

@@ -164,14 +164,15 @@ export default {
   },
   methods: {
     showEdit() {
-      return (
+      let toRet =
         !this.isDetail ||
         this.canEdit(0) ||
         this.canEdit(1) ||
         this.canEdit(2) ||
         this.canEdit(3) ||
-        this.canAuth()
-      );
+        this.canAuth();
+      this.$emit("canEdit", toRet);
+      return toRet;
     },
     hideHelper() {
       setTimeout(() => {