xl-mobile/src/components/AcceptAssignmentModal.vue

<script setup>
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, toPage} from "../utils/uils";

const emits = defineEmits(['success']);
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,
        pid: details.platform_id,
    });
    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 () => {
    if (!selected.value) {
        showToast('请选择帐号');
        return;
    }
    const {msg, data: {task_children_id, task_id}} = await Api.system.acceptTask({
        id: details.id,
        account: selected.value,
    });
    showToast(msg);
    show.value = false;
    await toPage(`/pages/taskDetails/index?id=${task_id}&task_children_id=${task_children_id}&delta=999`)
    emits('success');
}
</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 && po.status === 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 || po.status>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" v-if="po.status===0">
                            可在【我的】→【账号管理】中添加自媒体账号
                        </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>