155 lines
4.5 KiB
Vue
155 lines
4.5 KiB
Vue
<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 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
|
||
});
|
||
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} = await Api.system.acceptTask({
|
||
id: details.id,
|
||
account: selected.value,
|
||
});
|
||
showToast(msg);
|
||
show.value = false;
|
||
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">
|
||
可在【我的】→【账号管理】中添加自媒体账号
|
||
</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>
|