update

src/pages/taskDetails/index.vue

@@ -1,40 +1,63 @@
 <script setup>
 import goodsIcon from '../../static/icons/goodsIcon.png';
 import XNav from "../../components/XNav.vue";
-import {ref, onMounted, defineAsyncComponent} from 'vue';
+import {defineAsyncComponent, getCurrentInstance, nextTick, onMounted, reactive, ref} from 'vue';
 import {onLoad} from "@dcloudio/uni-app";
 import XLink from "../../components/XLink.vue";
 import XNoticeBar from "../../components/XNoticeBar.vue";
 import XImage from "../../components/XImage.vue";
 import fmt from "../../static/images/fmt.png";
+// #ifdef APP-PLUS
+import TaskDetails from "./components/TaskDetails.vue";
+import CollectMaterials from "./components/CollectMaterials.vue";
+import MyBackfill from "./components/MyBackfill.vue";
+import ReviewCommunication from "./components/ReviewCommunication.vue";
+// #endif
+
+// #ifndef APP-PLUS
+const TaskDetails = defineAsyncComponent(() => import('./components/TaskDetails.vue'));
+const CollectMaterials = defineAsyncComponent(() => import('./components/CollectMaterials.vue'));
+const MyBackfill = defineAsyncComponent(() => import('./components/MyBackfill.vue'));
+const ReviewCommunication = defineAsyncComponent(() => import('./components/ReviewCommunication.vue'));
+// #endif
 
 const details = ref(null);
-const mainDetailsRef = ref();
+const mainDetailWidth = ref(0);
 const currentTabs = ref(0);
-const tabs = [
+const tabs = reactive([
     {
         name: "任务详情",
-        component: defineAsyncComponent(() => import('./components/TaskDetails.vue')),
+        component: TaskDetails,
     },
     {
         name: "领取素材",
-        component: defineAsyncComponent(() => import('./components/CollectMaterials.vue')),
+        component: CollectMaterials,
     },
     {
         name: "我的回填",
-        component: defineAsyncComponent(() => import('./components/MyBackfill.vue')),
+        component: MyBackfill,
     },
     {
         name: "审核沟通",
-        component: defineAsyncComponent(() => import('./components/ReviewCommunication.vue')),
+        component: ReviewCommunication,
     },
-];
+]);
 
 onLoad((options) => {
     const {id} = options;
 });
 
 onMounted(() => {
+    nextTick(() => {
+        const instancs = getCurrentInstance();
+        uni.createSelectorQuery()
+            .in(instancs)
+            .select("#mainDetailBox")
+            .boundingClientRect()
+            .exec((result) => {
+                mainDetailWidth.value = result[0].width;
+            })
+    });
 })
 </script>
 
@@ -84,12 +107,12 @@ onMounted(() => {
             </view>
         </view>
 
-        <view ref="mainDetailsRef" class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden">
+        <view id="mainDetailBox" class="rounded-[16rpx] bg-[#fff] main-details overflow-hidden">
             <tui-tabs
-                v-if="mainDetailsRef?.$el?.clientWidth"
+                v-if="mainDetailWidth"
                 :tabs="tabs"
                 :currentTab="currentTabs"
-                :width="mainDetailsRef?.$el?.clientWidth"
+                :width="mainDetailWidth"
                 @change="({index})=>currentTabs=index">
             </tui-tabs>