update

src/pages/taskDetails/components/MyBackfill.vue

@@ -1,12 +1,136 @@
 <script setup>
+import {reactive, ref, watch} from "vue";
+import XLink from "../../../components/XLink.vue";
+import XUpload from "../../../components/XUpload.vue";
+import XInput from "../../../components/XInput.vue";
+import Api from "../../../api/index.js";
+import {showToast} from "../../../utils/uils.js";
+import dayjs from "dayjs";
+import XCountdown from "../../../components/XCountdown.vue";
 
+const {data} = defineProps({
+    data: {
+        type: Object,
+        default: null,
+    }
+});
+
+const content = reactive([]);
+
+const current = ref(0);
+
+const success = async () => {
+    const {msg} = await Api.system.addTaskBackfill({
+        id: data.children.id,
+        cid: current.value + 1,
+        content: content,
+        type: data.task_content[current.value].is_image,
+    });
+    showToast(msg);
+}
+
+watch(
+    () => [data, current],
+    () => {
+        content.push(...data.children.back[current.value].content_arr);
+    },
+    {deep: true, immediate: true}
+)
 </script>
 
 <template>
     <!--我的回填-->
+    <view class="!flex gap-[24rpx] !mb-[28rpx]">
+        <view
+            v-for="(item,index) in data.task_content"
+            @click="current=index"
+            :class="['tab-item', index===current?'cur':'']">
+            回填{{ index + 1 }}
+        </view>
+    </view>
 
+    <view class="block">
+        <view class="block-title">
+            回填指引:
+        </view>
+        <view class="block-info">
+            <x-link>查看指引</x-link>
+        </view>
+    </view>
+
+    <view class="block">
+        <view class="block-title">
+            回填时间:
+        </view>
+        <view class="block-info">
+            {{ data.task_content[current].start_time }} 至 {{ data.task_content[current].end_time }}
+        </view>
+    </view>
+
+    <view class="block">
+        <view class="block-title">
+            倒计时:
+        </view>
+        <view class="block-info">
+            <x-countdown :time="dayjs(data.task_content[current].end_time)">
+            </x-countdown>
+        </view>
+    </view>
+
+    <view class="block" v-for="(v, index) in data.fb_num">
+        <view class="block-title">
+            视频1的评论区截图:
+        </view>
+        <view class="block-info">
+            <x-upload
+                @success="(e) => content[index] = e"
+                :files="content[index] ? [content[index]] : []"
+                v-if="data.task_content[current].is_image === 1">
+            </x-upload>
+            <x-input v-else v-model:model-value="content[index]" height="64rpx" placeholder="请输入内容"></x-input>
+        </view>
+    </view>
+
+    <tui-button @click="success">提交</tui-button>
 </template>
 
 <style scoped lang="scss">
+.tab-item {
+    padding: 12rpx 26rpx;
+    border-radius: 9999rpx;
+    background-color: #F7F8FA;
+    font-size: 24rpx;
+    color: #4E5969;
+    transition: 500ms;
+}
 
+.cur {
+    background-color: #E8F3FF;
+    color: #165DFF;
+}
+
+.block {
+    display: flex;
+    gap: 20rpx;
+    margin-bottom: 20rpx;
+
+    .block-title {
+        flex-shrink: 0;
+        color: rgb(134, 144, 156);
+        font-size: 24rpx;
+        font-weight: 500;
+        line-height: 140%;
+        letter-spacing: 0;
+        text-align: left;
+        width: 160rpx;
+    }
+
+    .block-info {
+        color: rgb(78, 89, 105);
+        font-size: 24rpx;
+        font-weight: 500;
+        line-height: 140%;
+        letter-spacing: 0;
+    }
+}
 </style>