132 lines
4.2 KiB
Vue
132 lines
4.2 KiB
Vue
<script setup>
|
||
import XCountdown from "./XCountdown.vue";
|
||
import {toPage} from "../utils/uils.js";
|
||
import FBENUM from "../enum/FBENUM.js";
|
||
import PlatformENUM from "../enum/PlatformENUM.js";
|
||
import dayjs from "dayjs";
|
||
|
||
const {data} = defineProps({
|
||
data: {
|
||
type: Object,
|
||
default: {}
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<view @click="toPage(`/pages/taskDetails/index?id=${data.id}&task_children_id=${data.task_children_id}`)"
|
||
class="rounded-[8rpx] bg-[#fff] !p-[24rpx] overflow-hidden task-card">
|
||
<view class="!pb-[20rpx] !flex justify-between" style="border-bottom: 1px solid #E5E6EB">
|
||
<view style="font-size: 28rpx">
|
||
任务编号：{{ data.uid }}
|
||
</view>
|
||
<view v-if="data.back_status === 0" style="font-size: 24rpx">
|
||
<Text class="text-[#165DFF]">{{ dayjs(data.time).format('MM-DD-HH:mm') }}</Text>
|
||
后可开始回填
|
||
</view>
|
||
<x-countdown v-else-if="data.back_status === 1" :time="dayjs(data.time)">
|
||
<view style="font-size: 24rpx;font-weight: 400;" class="text-[rgb(78,89,105)]">回填倒计时:</view>
|
||
</x-countdown>
|
||
<x-countdown v-else-if="data.back_status === 2" :time="dayjs(data.time)">
|
||
<view style="font-size: 24rpx;font-weight: 400;" class="text-[rgb(78,89,105)]">审核倒计时:</view>
|
||
</x-countdown>
|
||
<view v-else-if="data.status === -1 || data.status === 3" class="text-[rgb(78,89,105)]"
|
||
style="font-size: 24rpx">
|
||
{{ data.time }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="!flex gap-[26rpx] !pt-[20rpx]">
|
||
<image class="!size-[88rpx] rounded-[50%] overflow-hidden" mode="aspectFill"
|
||
:src="data.logo"></image>
|
||
<view class="!h-[88rpx] !flex flex-col justify-between">
|
||
<view class="title">{{ data.goods_name }}</view>
|
||
<view class="!flex gap-[8rpx]">
|
||
<view class="tag">{{ data.platform }}</view>
|
||
<view class="tag">{{ FBENUM[data.fb_num - 1] }}连发</view>
|
||
</view>
|
||
</view>
|
||
<view class="!h-[88rpx] !ml-auto !flex items-center gap-[6rpx]">
|
||
<view class="price-info">
|
||
<text class="text-[rgb(255,87,34)]" v-if="data.is_settlement===1">{{ data.status_text }}</text>
|
||
<text class="text-black" v-if="data.is_settlement===0">{{ data.status_text }}</text>
|
||
<text class="text-[rgb(0,180,42)]" v-if="data.is_settlement===2">{{ data.status_text }}</text>
|
||
</view>
|
||
<view class="price">
|
||
<text class="unit">¥</text>
|
||
{{ data.coin.toFixed(2) }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="!mt-[34rpx] !px-[20rpx] !py-[10rpx] bg-[#F2F3F5] info relative">
|
||
<view class="!flex gap-[8rpx] justify-between">
|
||
<view>领取账号:</view>
|
||
<view>{{ data.account }}</view>
|
||
</view>
|
||
<view class="!flex gap-[8rpx] justify-between">
|
||
<view>领取时间:</view>
|
||
<view>{{ data.accept_time }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
.task-card {
|
||
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.info {
|
||
color: #000;
|
||
font-size: 24rpx;
|
||
font-weight: 300;
|
||
letter-spacing: 0;
|
||
text-align: left;
|
||
}
|
||
|
||
.title {
|
||
color: rgb(29, 33, 41);
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
line-height: 140%;
|
||
letter-spacing: 0;
|
||
text-align: left;
|
||
}
|
||
|
||
.price-info {
|
||
/* 12/Regular */
|
||
color: rgb(255, 87, 34);
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
line-height: 140%;
|
||
letter-spacing: 0;
|
||
text-align: right;
|
||
}
|
||
|
||
.price {
|
||
color: rgb(29, 33, 41);
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
line-height: 140%;
|
||
letter-spacing: 0;
|
||
text-align: right;
|
||
|
||
.unit {
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
|
||
.tag {
|
||
color: rgb(22, 93, 255);
|
||
font-size: 10px;
|
||
font-weight: 400;
|
||
line-height: 140%;
|
||
letter-spacing: 0;
|
||
text-align: center;
|
||
border-radius: 4rpx;
|
||
background: rgb(232, 243, 255);
|
||
padding: 3rpx 8rpx;
|
||
}
|
||
</style>
|