update

src/components/AcceptAssignmentModal.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+import NULLICON from "../static/images/缺省图.png";
+import XModal from "./XModal.vue";
+import {getCurrentInstance, nextTick, onMounted, reactive, ref, watch} from "vue";
+import PlatformENUM from "../enum/PlatformENUM";
+import Api from "../api/index";
+import {showToast} from "../utils/uils";
+
+const {details} = defineProps({
+    details: {
+        type: Object,
+        default: {}
+    }
+});
+const show = ref(false);
+const tabWidth = ref(0);
+const selected = ref(null);
+const po = reactive({
+    status: 0
+});
+const vo = reactive([]);
+const tabs = [
+    {
+        id: 1,
+        name: '正常帐号'
+    },
+    {
+        id: 2,
+        name: '异常帐号'
+    },
+    {
+        id: 3,
+        name: '隐藏帐号'
+    },
+];
+
+const getData = async () => {
+    const {data} = await Api.system.myAccount({
+        status: po.status + 1
+    });
+    vo.length = 0;
+    vo.push(...data);
+}
+
+const change = (e) => {
+    po.status = e.index;
+    getData();
+}
+
+onMounted(() => {
+    nextTick(() => {
+        const instance = getCurrentInstance();
+        uni.createSelectorQuery()
+            .in(instance)
+            .select("#tabBox")
+            .boundingClientRect()
+            .exec((result) => {
+                console.log('我看看?', result[0])
+                tabWidth.value = result[0].width - 72;
+            })
+    });
+})
+
+watch(
+    () => show.value,
+    (val) => {
+        if (val) getData();
+    },
+    {deep: true}
+)
+
+const success = async () => {
+    const {msg} = await Api.system.acceptTask({
+        id: details.id,
+        account: selected.value,
+    });
+    showToast(msg);
+    show.value = false;
+}
+</script>
+
+<template>
+    <view @click="show=true">
+        <slot></slot>
+    </view>
+
+    <x-modal
+        v-model:show="show"
+        width="calc(100% - 60rpx)">
+        <view class="box">
+            <view class="text-center test-32r">选择接受此任务的账号</view>
+            <view class="test-24r bg-[#FFF7E8] text-[#FF7D00] py-[16rpx] text-center !mt-[20rpx]">
+                任务接受后无法放弃，逾期或失败会影响您的收益
+            </view>
+            <view id="tabBox" class="w-full !mt-[20rpx]">
+                <tui-tabs
+                    v-if="tabWidth"
+                    :tabs="tabs"
+                    :width="tabWidth"
+                    :currentTab="po.status"
+                    @change="change">
+                </tui-tabs>
+            </view>
+
+            <view class="!mt-[20rpx] px-[16rpx]">
+                <template v-if="vo.length > 0">
+                    <view
+                        :key="index"
+                        @click="v.is_use !== 0 ? selected = v.id : null"
+                        v-for="(v, index) in vo"
+                        class="!flex items-center py-[22rpx]">
+                        <radio :checked="selected === v.id" :disabled="v.is_use === 0"></radio>
+                        <image class="!size-[80rpx] rounded-[50%] overflow-hidden !ml-[34rpx]"
+                               :src="PlatformENUM[v.platform_id]"></image>
+                        <view class="!flex flex-col !ml-[16rpx]">
+                            <view class="test-28r">{{ v.nickname }}</view>
+                            <view class="text-[#86909C] test-24r">{{ v.account }}</view>
+                        </view>
+                        <view class="text-[#4E5969] test-24r bg-[#F2F3F5] rounded-[4rpx] !ml-auto"
+                              v-if="v.is_use === 0">
+                            今日已接其他任务
+                        </view>
+                    </view>
+                </template>
+
+                <template v-else>
+                    <view class="!flex flex-col items-center pb-[50rpx]">
+                        <image class="!size-[260rpx]" :src="NULLICON"></image>
+                        <view class="test-28r">
+                            可在【我的】→【账号管理】中添加自媒体账号
+                        </view>
+                    </view>
+                </template>
+            </view>
+
+            <view class="!flex gap-[24rpx] !mt-[20rpx]">
+                <tui-button type="gray-primary" @click="show=false">取消</tui-button>
+                <tui-button @click="success">确定</tui-button>
+            </view>
+        </view>
+    </x-modal>
+</template>
+
+<style scoped lang="scss">
+.box {
+    @apply px-[32rpx] py-[40rpx];
+}
+</style>