gypsy-crm-frontend-vu/pages/activities/monthly-list.vue

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <cwg-header :title="t('wallet.item52')" />

        <view id="custom_history" class="">
            <view class="main-content">
                <!-- 无任务列表提示 -->
                <cwg-empty-state v-if="!tableData || tableData.length === 0" title="UtaskList.item12" />
                <!-- 数据卡片展示 -->
                <view class="outer-card" v-for="(item, index) in tableData" :key="index"
                    v-show="tableData && tableData.length > 0">
                    <view class="data-cards">
                        <!-- 第一行：总数据 -->
                        <view class="total-data-row">
                            <view class="data-card total-card">
                                <view class="card-content">
                                    <view class="card-title">{{ t("UtaskList.item13") }}</view>
                                    <view class="card-value" style="color: #ff4d4f">
                                        {{ item.depositAmount || 0 }}
                                    </view>
                                </view>
                            </view>
                            <view class="data-card total-card">
                                <view class="card-content">
                                    <view class="card-title">{{ t("UtaskList.item3") }}</view>
                                    <view class="card-value" style="color: #ff4d4f">
                                        {{ item.completeVolume || 0 }}
                                    </view>
                                </view>
                            </view>
                            <view class="data-card total-card">
                                <view class="card-content">
                                    <view class="card-title">{{ t("Label.State") }}</view>
                                    <view class="card-value" :style="getStatusStyle(item.status)">
                                        {{ getStatusText(item.status) }}
                                    </view>
                                </view>
                            </view>

                            <view class="data-card total-card" v-if="item.status === 2">
                                <view class="card-content">
                                    <view class="card-title">
                                        {{ t("MonthlyActivities.item4") }}
                                    </view>
                                    <view class="card-value" :style="getGiveStatusStyle(item.giveStatus)">
                                        {{ getGiveStatusText(item.giveStatus) }}
                                    </view>
                                </view>
                            </view>
                        </view>

                        <!-- 第二行：分数据 -->
                        <view class="sub-data-row">
                            <view class="data-card">
                                <view class="card-content">
                                    <view class="card-value">{{ item.endDate }}</view>
                                    <view class="card-desc">{{ t("UtaskList.item10") }}</view>
                                </view>
                            </view>
                            <view class="data-card" v-if="item.status === 2">
                                <view class="card-content">
                                    <view class="card-value">{{ item.applyTime }}</view>
                                    <view class="card-desc">{{ t("MonthlyActivities.item6") }}</view>
                                </view>
                            </view>
                            <view class="data-card" v-if="item.status === 2">
                                <view class="card-content">
                                    <view class="card-value">{{ item.grantTime }}</view>
                                    <view class="card-desc">{{ t("MonthlyActivities.item7") }}</view>
                                </view>
                            </view>
                            <view class="data-card" v-if="item.logisticsOrder">
                                <view class="card-content">
                                    <view class="card-value">{{ item.logisticsOrder }}</view>
                                    <view class="card-desc">{{ t("MonthlyActivities.item9") }}</view>
                                </view>
                            </view>
                            <view class="data-card btn-card" v-show="shouldShowCard(item, item)">
                                <!-- 取消按钮 - status为1时显示 -->
                                <button v-if="item.status === 1" class="btn btn-dark btn-sm waves-effect waves-light btn-outline-dark1" @click="cancelTask(item.id)"
                                    :loading="loadingStates[item.id] === 'cancel'">
                                    {{ t("Btn.Cancel") }}
                                </button>
                                <!-- 礼物申请按钮 - status为2且giveStatus为1时显示 -->
                                <button class="btn btn-danger btn-sm waves-effect waves-light" v-if="item.status === 2 && item.giveStatus === 1 && lang1" @click="applyGift(item.id)"
                                    :loading="loadingStates[item.id] === 'applyGift'">
                                    {{ t("Btn.Application") }}
                                </button>
                            </view>
                        </view>

                        <!-- 提示信息 -->
                        <view class="tip-info" style="padding: 10px 0; color: #909399; font-size: 14px">
                            {{ t("MonthlyActivities.item10") }}
                        </view>
                    </view>
                </view>
            </view>

            <!-- 礼物申请对话框 -->
            <GiftApplicationPopup v-model:visible="dialogGiftApplication" :title="t('Btn.Application')"
                :giftList="giftList" :giftForm="giftForm" @confirm="submitGiftApply" />
        </view>
        <cwg-confirm-popup />
    </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue'
import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
import { activityApi } from "@/service/activity"
import Config from "@/config/index"
import GiftApplicationPopup from "./components/GiftApplicationPopup.vue"
import useUserStore from "@/stores/use-user-store";
const userStore = useUserStore();
import { useConfirm } from '@/hooks/useConfirm'
const confirm = useConfirm()
const { t, locale } = useI18n()
let { Code } = Config

// ---------- 响应式数据 ----------
const flag = ref(false)
const reasons = ref({})
const pictLoading = ref(false)
const tableData = ref<any[]>([])
const time = ref("")
const loadingStates = ref<Record<string, string | null>>({}) // 用于跟踪每个任务的加载状态

// 卡片数据
const totalTasks = ref(0)
const totalRewards = ref(0)
const completionRate = ref("0")
const inProgressTasks = ref(0)
const completedTasks = ref(0)
const expiredTasks = ref(0)
const rejectedTasks = ref(0)
const todayRewards = ref(0)
const weekRewards = ref(0)
const monthRewards = ref(0)
const activityLevel = ref("0")

// 礼物申请对话框相关
const dialogGiftApplication = ref(false)
const giftList = ref<any[]>([])
const giftForm = ref({
    id: null as number | null,
    giveCode: "",
    giveName: "",
    giveAddress: "",
    givePhone: "",
    giveAcceptName: "",
})
const giftSubmitting = ref(false)

// 原 watch 中依赖的 search（保留）
const search = ref({ type: "" })

// ---------- 计算属性 ----------
// 注意：document 在 uni-app 中不可用，此处保留原逻辑但需注意运行环境
// 若需兼容，可改用 uni.getSystemInfoSync().windowWidth

const lang1 = computed(() => {
    return userStore?.userInfo?.customInfo?.country == "CN"
})



// ---------- 方法 ----------
const getStatus = (status: number) => {
    if (status == 1) {
        return t("State.Ongoing")
    } else if (status == 2) {
        return t("State.Completed")
    } else if (status == 3) {
        return t("State.Cancelled")
    } else if (status == 4) {
        return t("State.expireTime")
    }
}

const getStatusText = (status: number) => {
    if (status == 1) {
        return t("State.InTask")
    } else if (status == 2) {
        return t("UtaskList.item6")
    } else if (status == 3) {
        return t("State.Cancelled")
    } else if (status == 4) {
        return t("State.Ended")
    }
    return ""
}

const getStatusStyle = (status: number) => {
    if (status == 1) {
        return "color: #ffd591;"
    } else if (status == 2) {
        return "color: #52c41a;"
    } else if (status == 3) {
        return "color: #999999;"
    } else if (status == 4) {
        return "color: #999999;"
    }
    return "color: var(--bs-heading-color);"
}

const getGiveStatusText = (giveStatus: number) => {
    if (giveStatus == 1) {
        return t("State.NotApply")
    } else if (giveStatus == 2) {
        return t("State.Applied")
    } else if (giveStatus == 3) {
        return t("State.Granted")
    }
    return ""
}

const getGiveStatusStyle = (giveStatus: number) => {
    if (giveStatus == 1) {
        return "color: #999999;"
    } else if (giveStatus == 2) {
        return "color: #1890ff;"
    } else if (giveStatus == 3) {
        return "color: #52c41a;"
    }
    return "color: var(--bs-heading-color);"
}

const canPerformAction = (task: any) => {
    return task.status === 1 || (task.status === 2 && task.withdrawStatus === 1)
}

const shouldShowCard = (el: any) => {
    const hasCancelButton = el.status === 1
    const hasGiftApplyButton = el.status === 2 && el.giveStatus === 1 && lang1.value
    return hasCancelButton || hasGiftApplyButton
}

// 恢复信用（原 completeTask）
const completeTask = async (id: number) => {
    return new Promise(async (resolve) => {
        const resConfirm = await uni.showModal({
            title: t("Msg.SystemPrompt"),
            content: t("surplusList.item9"),
            confirmText: t("Btn.Confirm"),
            cancelText: t("Btn.Cancel"),
        })
        if (!resConfirm.confirm) return resolve(null)

        loadingStates.value[id] = "complete"
        try {
            const res = await activityApi.ActivitySurplusRecoverCredit({ id })
            if (res.code == Code.StatusOK) {
                // uni.showToast({ title: t("Msg.Success"), icon: "success" })
                searchFunc()
            } else {
                uni.showToast({ title: res.msg, icon: "none" })
            }
        } catch (error) {
            uni.showToast({ title: t("Msg.Fail"), icon: "none" })
        } finally {
            loadingStates.value[id] = null
            resolve(null)
        }
    })
}

// 提现
const withdrawTask = async (id: number) => {
    return new Promise(async (resolve) => {
        const resConfirm = await uni.showModal({
            title: t("Msg.SystemPrompt"),
            content: t("UtaskList.item15"),
            confirmText: t("Btn.Confirm"),
            cancelText: t("Btn.Cancel"),
        })
        if (!resConfirm.confirm) return resolve(null)

        loadingStates.value[id] = "withdraw"
        try {
            const res = await activityApi.UcoinWithdraw({ id })
            if (res.code == Code.StatusOK) {
                searchFunc()
            } else {
                uni.showToast({ title: res.msg, icon: "none" })
            }
        } catch (error) {
            uni.showToast({ title: t("Msg.Fail"), icon: "none" })
        } finally {
            loadingStates.value[id] = null
            resolve(null)
        }
    })
}

// 取消任务
const cancelTask = async (id: number) => {
    try {
        await confirm({
            title: t("Msg.SystemPrompt"),
            content: t("UtaskList.item8"),
            confirmText: t("Btn.Confirm"),
            cancelText: t("Btn.Cancel"),
        })
        const res = await activityApi.ActivityMonthlyCancel({ id })
        if (res.code == Code.StatusOK) {
            uni.showToast({ title: t("UtaskList.item9"), icon: "success" })
            searchFunc()
        } else {
            uni.showToast({ title: res.msg, icon: "none" })
        }
    } catch (error) {
        if (error?.msg) uni.showToast({ title: error.msg, icon: "none" })
    }
}

// 礼物申请 - 打开对话框并获取礼品列表
const applyGift = async (id: number) => {
    // 重置表单
    giftForm.value = {
        id: id,
        giveCode: "",
        giveName: "",
        giveAddress: "",
        givePhone: "",
        giveAcceptName: "",
    }
    giftList.value = []

    // 获取礼品列表
    try {
        const res = await activityApi.ActivityMonthlyGiveList({ id })
        if (res.code == Code.StatusOK) {
            giftList.value = res.data || []
            dialogGiftApplication.value = true
        } else {
            uni.showToast({ title: res.msg, icon: "none" })
        }
    } catch (error) {
        uni.showToast({ title: t("Msg.Fail"), icon: "none" })
    }
}

// 处理礼品选择变化
const handleGiftChange = (giveCode: string) => {
    const selectedGift = giftList.value.find(gift => gift.giveCode === giveCode)
    if (selectedGift) {
        giftForm.value.giveName = selectedGift.giveName
    }
}

// 提交礼物申请
const submitGiftApply = async (form) => {
    // 表单验证（假设模板中有 ref="giftForm" 的 uni-forms 组件）
    // 这里需要适配实际验证方式，简化起见调用一个验证函数，若验证失败则返回
    // 由于 uni-app 中没有直接提供 validate，需根据实际组件实现，此处保留原逻辑结构
    // 实际使用时请配合 uni-forms 或自定义验证
    const valid = true // 占位，实际需调用 this.$refs.giftForm.validate()
    if (!valid) return

    const resConfirm = await uni.showModal({
        title: t("Msg.SystemPrompt"),
        content: t("MonthlyActivities.item10"),
        confirmText: t("Btn.Confirm"),
        cancelText: t("Btn.Cancel"),
    })
    if (!resConfirm.confirm) return

    giftSubmitting.value = true
    try {
        const res = await activityApi.ActivityMonthlyGiveApply({
            id: giftForm.value.id,
            giveCode: form.giveCode,
            giveName: form.giveName,
            giveAddress: form.giveAddress.trim(),
            givePhone: form.givePhone.trim(),
        })
        if (res.code == Code.StatusOK) {
            // uni.showToast({ title: t("Msg.Success"), icon: "success" })
            dialogGiftApplication.value = false
            searchFunc()
        } else {
            uni.showToast({ title: res.msg, icon: "none" })
        }
    } catch (error) {
        uni.showToast({ title: t("Msg.Fail"), icon: "none" })
    } finally {
        giftSubmitting.value = false
    }
}

// 查看任务进度
const viewTaskProgress = async (id: number) => {
    loadingStates.value[id] = "progress"
    try {
        const res = await activityApi.UcoinProgress()
        if (res.code == Code.StatusOK) {
            uni.showToast({ title: res.msg, icon: "none" })
        } else {
            uni.showToast({ title: res.msg, icon: "none" })
        }
    } catch (error) {
        uni.showToast({ title: t("Msg.Fail"), icon: "none" })
    } finally {
        loadingStates.value[id] = null
    }
}

// 计算卡片数据（保留原方法体）
const calculateCardData = () => {
    // 可根据需求实现
}

// 返回活动
const backActivity = () => {
    uni.navigateBack()
}

// 获取列表
const searchFunc = async () => {
    if (flag.value) return
    flag.value = true

    pictLoading.value = true
    let res = await activityApi.ActivityMonthlyTaskList()
    if (res.code == Code.StatusOK) {
        tableData.value = res.data
        calculateCardData()
        // uni.showToast({ title: t("Msg.SearchSuccess"), icon: "success" })
        pictLoading.value = false
        flag.value = false
    } else {
        uni.showToast({ title: res.msg, icon: "none" })
        pictLoading.value = false
        flag.value = false
    }
}

// ---------- 生命周期与监听 ----------
onMounted(() => {
    searchFunc()
})

// 原 watch（保留）
watch(
    () => search.value.type,
    () => {
        searchFunc()
    }
)

// 若需要 uni-app 页面生命周期可额外添加 onShow 等
// onShow(() => {})
</script>

<style lang="scss" scoped>
@import "@/uni.scss";
.tip-info{
  line-height: px2rpx(18);
}
#custom_history {
    width: 100%;
    height: 100%;

    .no-data-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: px2rpx(300);

        .no-data-content {
            text-align: center;
            color: var(--bs-heading-color);

            i {
                font-size: px2rpx(48);
                margin-bottom: px2rpx(16);
                display: block;
            }

            p {
                font-size: px2rpx(16);
                margin: 0;
            }
        }
    }

    .main-content {
        width: 100%;
        height: calc(100% - 50px);
        // @include bg_white();
        padding: px2rpx(20);
        box-sizing: border-box;
        overflow: hidden;
        overflow-y: auto;
    }

    .state.btn {
        background: #eb3f57;
        color: white;
        padding: px2rpx(3) px2rpx(15);
        border-radius: px2rpx(4);
    }

    .action-buttons {
        display: flex;
        flex-direction: column;
        gap: px2rpx(8);
        align-items: center;

        .el-button {
            min-width: px2rpx(80);
            font-size: px2rpx(12);
        }

        .status-text {
            font-size: px2rpx(14);
            color: var(--bs-heading-color);
            font-weight: 500;
        }
    }

    // 外层卡片样式
    .outer-card {
        background: #ffffff;
        border-radius: px2rpx(16);
        padding: px2rpx(24);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        border: 1px solid #f0f0f0;
        margin-bottom: px2rpx(30);
    }

    // 数据卡片样式
    .data-cards {
        display: flex;
        flex-direction: column;
        gap: px2rpx(20);

        .total-data-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: px2rpx(15);
        }

        .sub-data-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: px2rpx(15);
        }

        .data-card {
            background: #ffffff;
            border-radius: px2rpx(12);
            padding: px2rpx(24);
            //   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            border: 1px solid #f0f0f0;
            transition: all 0.3s ease;
            text-align: center;

            &:hover {
                transform: translateY(-2px);
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
            }

            // 根据状态设置背景色
            &.status-1 {
                background: #fff7e6; // 任务中 - 黄色背景
                border-color: #ffd591;
            }

            &.status-2 {
                background: #f6ffed; // 已完成 - 绿色背景
                border-color: #b7eb8f;
            }

            &.status-3,
            &.status-4 {
                background: #f5f5f5; // 已取消/已结束 - 灰色背景
                border-color: #d9d9d9;
            }

            &.total-card {
                background: #ffffff;
                color: var(--bs-heading-color);

                // border: 1px solid gray;
                .card-value {
                    color: var(--bs-heading-color);
                }

                .card-desc {
                    color: var(--bs-heading-color);
                }

                // 状态卡片的特殊样式
                &.status-1 {
                    background: #fff7e6;
                    border-color: #ffd591;
                }

                &.status-2 {
                    background: #f6ffed;
                    border-color: #b7eb8f;
                }

                &.status-3,
                &.status-4 {
                    background: #f5f5f5;
                    border-color: #d9d9d9;
                }
            }

            &.sub-card {
                background: #ffffff;
                border-left: px2rpx(4) solid #667eea;

                &:nth-child(2) {
                    border-left-color: #52c41a;
                }

                &:nth-child(3) {
                    border-left-color: #faad14;
                }

                &:nth-child(4) {
                    border-left-color: #ff4d4f;
                }
            }

            .card-content {
                .card-title {
                    font-size: px2rpx(16);
                    color: var(--bs-heading-color);
                    margin-bottom: px2rpx(8);
                    font-weight: 500;
                }

                .card-value {
                    font-size: px2rpx(18);
                    font-weight: 700;
                    color: var(--bs-heading-color);
                    margin-bottom: px2rpx(4);
                    line-height: 1;
                }

                .card-desc {
                    font-size: px2rpx(12);
                    color: var(--bs-heading-color);
                    line-height: 1.4;
                }
            }
        }

        .btn-card {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: px2rpx(10);

            button {
                width: 100%;
            }
        }
    }

    // 响应式设计
    @media (max-width: 768px) {
        .data-cards {

            .total-data-row,
            .sub-data-row {
                grid-template-columns: 1fr;
            }

            .data-card {
                padding: px2rpx(16);

                .card-content {
                    .card-value {
                        font-size: px2rpx(24);
                    }
                }
            }
        }
    }
}
</style>