对任务详情页导航栏处理

src/pages-task/task-detail/index.vue

@@ -1,34 +1,44 @@
 <template>
-  <view class="task-detail-page">
-    <view v-if="loading" class="task-detail-state">
-      <wd-loading color="#3b9bed" />
-      <text class="task-detail-state__text">正在加载任务详情</text>
-    </view>
-
-    <view v-else-if="errorMessage" class="task-detail-state">
-      <view class="task-detail-state__icon task-detail-state__icon--error">!</view>
-      <text class="task-detail-state__title">详情加载失败</text>
-      <text class="task-detail-state__text">{{ errorMessage }}</text>
-      <button class="task-detail-state__retry" @click="loadTaskDetail">重新加载</button>
-    </view>
-
-    <template v-else-if="taskDetail">
-      <SignTaskDetail v-if="signTaskDetail" :task-detail="signTaskDetail" :records="signRecords" />
-      <ShareTaskDetail
-        v-else-if="shareTaskDetail"
-        :task-detail="shareTaskDetail"
-        @qr-state-change="handleQrStateChange"
-      />
-      <NormalTaskDetail
-        v-else-if="normalTaskDetail"
-        :task-detail="normalTaskDetail"
-        :task-config="taskContentConfig"
-      />
-    </template>
-
-    <view v-else class="task-detail-state">
-      <view class="task-detail-state__icon">⌕</view>
-      <text class="task-detail-state__title">暂无任务详情</text>
+  <view class="task-detail-layout">
+    <!-- #ifdef H5 -->
+    <wd-navbar fixed placeholder safeAreaInsetTop title="任务详情" />
+    <!-- #endif -->
+
+    <view class="task-detail-page">
+      <view v-if="loading" class="task-detail-state">
+        <wd-loading color="#3b9bed" />
+        <text class="task-detail-state__text">正在加载任务详情</text>
+      </view>
+
+      <view v-else-if="errorMessage" class="task-detail-state">
+        <view class="task-detail-state__icon task-detail-state__icon--error">!</view>
+        <text class="task-detail-state__title">详情加载失败</text>
+        <text class="task-detail-state__text">{{ errorMessage }}</text>
+        <button class="task-detail-state__retry" @click="loadTaskDetail">重新加载</button>
+      </view>
+
+      <template v-else-if="taskDetail">
+        <SignTaskDetail
+          v-if="signTaskDetail"
+          :task-detail="signTaskDetail"
+          :records="signRecords"
+        />
+        <ShareTaskDetail
+          v-else-if="shareTaskDetail"
+          :task-detail="shareTaskDetail"
+          @qr-state-change="handleQrStateChange"
+        />
+        <NormalTaskDetail
+          v-else-if="normalTaskDetail"
+          :task-detail="normalTaskDetail"
+          :task-config="taskContentConfig"
+        />
+      </template>
+
+      <view v-else class="task-detail-state">
+        <view class="task-detail-state__icon">⌕</view>
+        <text class="task-detail-state__title">暂无任务详情</text>
+      </view>
     </view>
   </view>
 </template>
@@ -309,6 +319,11 @@ onUnload(() => {
 </script>
 
 <style lang="scss" scoped>
+.task-detail-layout {
+  min-height: 100vh;
+  background: #f5f7fa;
+}
+
 .task-detail-page {
   min-height: 100vh;
   padding: 24rpx 24rpx 48rpx;
@@ -316,6 +331,12 @@ onUnload(() => {
   box-sizing: border-box;
 }
 
+/* #ifdef H5 */
+.task-detail-page {
+  min-height: calc(100vh - 44px);
+}
+/* #endif */
+
 .task-detail-state {
   display: flex;
   flex-direction: column;

src/pages.json

@@ -272,7 +272,10 @@
           "path": "task-detail/index",
           "style": {
             "navigationBarTitleText": "任务详情",
-            "navigationStyle": "default"
+            "navigationStyle": "default",
+            "h5": {
+              "navigationStyle": "custom"
+            }
           }
         }
       ]