update

src/components/TaskCard.vue

@@ -1,6 +1,7 @@
 <script setup>
 import dy from "../static/images/抖音.png";
 import qrw from "../static/icons/qrw.png";
+import XCountdown from "./XCountdown.vue";
 </script>
 
 <template>
@@ -9,9 +10,12 @@ import qrw from "../static/icons/qrw.png";
             <view style="font-size: 28rpx">
                 任务编号：DF1212
             </view>
-            <view style="font-size: 24rpx">
+            <view v-if="false" style="font-size: 24rpx">
                 <Text class="text-[#165DFF]">08-13-09:54</Text>后可开始回填
             </view>
+            <x-countdown v-else>
+                <view style="font-size: 24rpx;font-weight: 400;" class="text-[rgb(78,89,105)]">审核倒计时:</view>
+            </x-countdown>
         </view>
 
         <view class="!flex gap-[26rpx] !pt-[20rpx]">

src/components/XAlert.vue

@@ -0,0 +1,25 @@
+<script setup>
+import {ref} from "vue";
+
+const show = ref(false);
+</script>
+
+<template>
+    <view @click="show=true">
+        <slot></slot>
+    </view>
+
+    <tui-alert
+        fadeIn
+        v-bind="$attrs"
+        @cancel="show=false"
+        maskClosable
+        @click="show=false"
+        :show="show">
+        <slot name="context"></slot>
+    </tui-alert>
+</template>
+
+<style scoped>
+
+</style>

src/components/XCountdown.vue

@@ -0,0 +1,50 @@
+<script setup>
+import {ref} from "vue";
+import dayjs from "dayjs";
+
+const {time} = defineProps({
+    time: {
+        type: String,
+        default: '2025-03-28 10:10:00',
+    }
+});
+
+const diff = ref(dayjs(time).diff(dayjs(new Date()), 'second'));
+const hours = ref(null);
+const minutes = ref(null);
+const seconds = ref(null);
+
+const timer = setInterval(() => {
+    diff.value = dayjs(time).diff(dayjs(new Date()), 'second');
+    hours.value = Math.floor(diff.value / 3600);
+    minutes.value = Math.floor((diff.value % 3600) / 60);
+    seconds.value = diff.value % 60;
+}, 1000);
+</script>
+
+<template>
+    <view class="!flex items-center gap-[20rpx]">
+        <slot></slot>
+        <view class="!flex gap-[16rpx] items-center">
+            <view class="time-block" v-if="hours">{{ hours < 10 ? `0${hours}` : hours }}</view>
+            <view v-if="hours">:</view>
+            <view class="time-block" v-if="minutes">{{ minutes < 10 ? `0${minutes}` : minutes }}</view>
+            <view v-if="minutes">:</view>
+            <view class="time-block" v-if="seconds">{{ seconds < 10 ? `0${seconds}` : seconds }}</view>
+        </view>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.time-block {
+    background-color: #E8F3FF;
+    border-radius: 4rpx;
+    padding: 4rpx;
+    color: rgb(22, 93, 255);
+    font-size: 24rpx;
+    font-weight: 500;
+    line-height: 140%;
+    letter-spacing: 0;
+    text-align: center;
+}
+</style>

src/components/XDateRange.vue

@@ -0,0 +1,17 @@
+<script setup>
+import XDateTime from "./XDateTime.vue";
+
+const startTime = defineModel('startTime');
+const endTime = defineModel('endTime');
+</script>
+
+<template>
+    <view class="!flex gap-[20rpx] !w-full items-center">
+        <x-date-time v-model:model-value="startTime"></x-date-time>
+        <view class="">-</view>
+        <x-date-time v-model:model-value="endTime"></x-date-time>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+</style>

src/components/XDateTime.vue

@@ -0,0 +1,36 @@
+<script setup>
+import timeIcon from "../static/icons/time.png";
+
+const modalValue = defineModel();
+const {placeholder} = defineProps({
+    placeholder: {
+        type: String,
+        default: "请选择时间",
+    }
+});
+
+const success = ({detail: {value}}) => {
+    modalValue.value = value;
+}
+</script>
+
+<template>
+    <picker mode="date" class="x-date-input" @change="success">
+        <view>
+            <image class="!size-[24rpx] !absolute left-[30rpx] top-1/2 -translate-y-1/2" :src="timeIcon"></image>
+            <text v-if="!modalValue" class="text-[#666]">{{ placeholder }}</text>
+            <text v-else>{{modalValue}}</text>
+        </view>
+    </picker>
+</template>
+
+<style lang="scss" scoped>
+.x-date-input {
+    background-color: #F2F3F5;
+    padding: 14rpx 0;
+    flex-grow: 1;
+    text-align: center;
+    border-radius: 4rpx;
+    position: relative;
+}
+</style>

src/components/XFilter.vue

@@ -0,0 +1,38 @@
+<script setup>
+const visible = defineModel('visible');
+const model = defineModel('model');
+const emits = defineEmits(['success']);
+
+const init = () => {
+    Object.keys(model.value).forEach(key => {
+        model.value[key] = null;
+    });
+    success();
+}
+
+const success = () => {
+    visible.value = false;
+    emits('success');
+}
+</script>
+
+<template>
+    <tui-drawer
+        mode="top"
+        maskZIndex="999"
+        zIndex="999"
+        @close="visible=false"
+        :visible="visible">
+        <view class="!pt-[100rpx] !p-[32rpx]">
+            <slot></slot>
+            <view class="!flex gap-[24rpx] !mt-[24rpx]">
+                <tui-button height="88rpx" plain @click="init">重置</tui-button>
+                <tui-button height="88rpx" @click="success">确定</tui-button>
+            </view>
+        </view>
+    </tui-drawer>
+</template>
+
+<style scoped>
+
+</style>

src/components/XFilterItem.vue

@@ -0,0 +1,29 @@
+<script setup>
+const {label} = defineProps({
+    label: {
+        type: String,
+        default: "标题",
+    }
+});
+</script>
+
+<template>
+    <view class="x-filter-item">
+        <view class="label">{{ label }}</view>
+        <slot></slot>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.x-filter-item {
+    margin-bottom: 36rpx;
+}
+.label {
+    color: rgb(134, 144, 156);
+    font-size: 24rpx;
+    font-weight: 500;
+    letter-spacing: 0;
+    text-align: left;
+    margin-bottom: 24rpx;
+}
+</style>

src/components/XNav.vue

@@ -14,7 +14,7 @@ const title = ref(document.title);
 
 <template>
     <template v-if="!isWXWeb()">
-        <view class="!flex justify-center items-center w-full h-[100rpx] bg-[#f9f9f9] fixed left-0 top-0 z-[998]">
+        <view class="!flex justify-center items-center w-full h-[100rpx] bg-[#f9f9f9] fixed left-0 top-0 z-[1000]">
             <image
                 v-if="showBack"
                 @click="backPage()"

src/components/XRadio.vue

@@ -0,0 +1,36 @@
+<script setup>
+import {inject} from "vue";
+
+const modelValue = inject('modelValue');
+const {value} = defineProps({
+    value: {
+        type: [String, Number],
+        default: 0
+    }
+});
+</script>
+
+<template>
+    <view @click="modelValue=value" :class="['x-radio', modelValue===value ? 'x-radio-cur' : '']">
+        <slot></slot>
+    </view>
+</template>
+
+<style lang="scss" scoped>
+.x-radio {
+    padding: 12rpx 0;
+    text-align: center;
+    background-color: #F7F8FA;
+    border-radius: 4rpx;
+    color: rgb(78, 89, 105);
+    font-size: 24rpx;
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0;
+    transition: 500ms;
+}
+.x-radio-cur {
+    background-color: #E8F3FF;
+    color: #165DFF;
+}
+</style>

src/components/XRadioGroup.vue

@@ -0,0 +1,17 @@
+<script setup>
+import {provide} from "vue";
+
+const modalValue = defineModel();
+
+provide('modelValue', modalValue);
+</script>
+
+<template>
+    <view>
+        <slot></slot>
+    </view>
+</template>
+
+<style scoped>
+
+</style>