gypsy-crm-frontend-vu/pages/activities/dollar-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">
                <!-- 无任务列表提示 -->
                <view class="list-empty-state" v-if="!tableData || tableData.length === 0">
                    <cwg-empty-state :title="t('UtaskList.item12')" />
                </view>

                <!-- 数据卡片展示 -->
                <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("DollarActivity.fieldDepositAmount") }}</view>
                                    <view class="card-value">{{ cell(item.depositAmount) }}</view>
                                </view>
                            </view>
                            <view class="data-card total-card">
                                <view class="card-content">
                                    <view class="card-title">{{ t("DollarActivity.fieldEndDate") }}</view>
                                    <view class="card-value">{{ cell(item.endDate) }}</view>
                                </view>
                            </view>
                            <view class="data-card total-card">
                                <view class="card-content">
                                    <view class="card-title">{{ t("DollarActivity.fieldApplyDepositAmount") }}</view>
                                    <view class="card-value">{{ cell(item.applyDepositAmount) }}</view>
                                </view>
                            </view>
                            <view class="data-card total-card">
                                <view class="card-content">
                                    <view class="card-title">{{ t("DollarActivity.fieldApplyGiveNum") }}</view>
                                    <view class="card-value">{{ cell(item.applyGiveNum) }}</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="statusStyle(item.status)">
                                        {{ statusText(item.status) }}
                                    </view>
                                </view>
                            </view>
                        </view>

                        <!-- 操作按钮行 -->
                        <view class="card-actions">
                            <view class="btn btn-outline-secondary btn-sm" @click="openApplyRecordDialog(item)">
                                {{ t("DollarActivity.applyRecord") }}
                            </view>
                            <view v-if="Number(item.status) === 1" class="btn btn-dark waves-effect waves-light"
                                :loading="cancelLoadingId === item.id" @click="confirmCancelDollarActivity(item)">
                                {{ t("Btn.Cancel") }}
                            </view>
                            <view v-if="showDollarClaimRewardButton(item)" class="btn btn-dark waves-effect waves-light"
                                @click="openClaimDialog(item)">
                                {{ t("DollarActivity.claimReward") }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 领取奖励对话框 -->
        <cwg-popup v-model:visible="dialogClaimVisible" type="center" :mask-click="false" :showFooters="true"
            :showClose="false" :title="t('DollarActivity.dialogClaimTitle')">
            <view class="dialog-popup1">
                <cwg-combox v-model:value="selectedRuleId" :clearable="false" :options="ruleOptionsList"
                    :placeholder="t('UtaskList.item19')" @change="handleGiftChange" />
            </view>
            <template #footer>
                <button hover-class="" class="btn btn-outline-secondary" @click="closeClaimDialog">{{ t("Btn.Cancel")
                    }}</button>

                <button hover-class="" class="btn btn-dark waves-effect waves-light btn-primary"
                    :loading="applySubmitting" :disabled="selectedRuleId === null || selectedRuleId === ''"
                    @click="confirmClaimReward">{{
                        t("Btn.Confirm") }}</button>
            </template>
        </cwg-popup>

        <!-- 申请记录对话框 -->
        <cwg-popup v-model:visible="dialogApplyRecordVisible" type="center" :mask-click="false" :showFooters="true"
            :width="'900px'" :showClose="false" :title="t('DollarActivity.applyRecord')">
            <view class="popup-content">
                <view class="dialog-body">
                    <uni-loading v-if="applyRecordList.length === 0 && applyRecordLoading"
                        v-loading="applyRecordLoading" />
                    <view class="record-table" v-if="applyRecordList.length > 0">
                        <view class="table-header">
                            <text class="col-deposit">{{ t("DollarActivity.recordDepositAmount") }}</text>
                            <text class="col-reward">{{ t("DollarActivity.recordRewardAmount") }}</text>
                            <text class="col-standard">{{ t("DollarActivity.fieldStandardVolume") }}</text>
                            <text class="col-ecn">{{ t("DollarActivity.fieldEcnVolume") }}</text>
                            <text class="col-cent">{{ t("DollarActivity.fieldCentVolume") }}</text>
                            <text class="col-time">{{ t("DollarActivity.fieldApplyTime") }}</text>
                        </view>
                        <!-- 表格内容 -->
                        <view class="table-body">
                            <view class="table-row" v-for="(record, idx) in applyRecordList" :key="idx">
                                <text class="col-deposit">{{ cell(record.depositAmount) }}</text>
                                <text class="col-reward">{{ cell(record.rewardAmount) }}</text>
                                <text class="col-standard">{{ cell(record.standardVolume) }}</text>
                                <text class="col-ecn">{{ cell(record.ecnVolume) }}</text>
                                <text class="col-cent">{{ cell(record.centVolume) }}</text>
                                <text class="col-time">{{ cell(record.addTime) }}</text>
                            </view>
                        </view>
                    </view>
                    <view v-if="applyRecordList.length === 0 && !applyRecordLoading" class="apply-record-empty">
                        <cwg-empty-state />
                    </view>
                </view>
            </view>
            <template #footer>
                <button hover-class="" class="btn btn-dark waves-effect waves-light" @click="closeApplyRecordDialog">{{
                    t('Btn.Confirm') }}</button>
            </template>
        </cwg-popup>
        <cwg-confirm-popup />
    </cwg-page-wrapper>
</template>

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

// ---------- 响应式数据 ----------
const flag = ref(false)
const pictLoading = ref(false)
const tableData = ref<any[]>([])

// 领取奖励弹窗相关
const claimDialog = ref<any>(null)
const dialogClaimVisible = ref(false)
const claimTaskId = ref<any>(null)
const ruleOptions = ref<any[]>([])
const selectedRuleId = ref<any>(null)
const selectedRuleIndex = ref(-1)
const ruleLoading = ref(false)
const applySubmitting = ref(false)

// 取消任务相关
const cancelLoadingId = ref<any>(null)
const ruleOptionsList = computed(() => {
    return ruleOptions.value.map((opt: any) => ({
        key: ruleOptionKey(opt),
        text: ruleOptionLabel(opt),
        value: ruleOptionValue(opt),
        disable: isRuleOptionDisabled(opt),
    }))
})

// 申请记录弹窗相关
const applyRecordDialog = ref<any>(null)
const dialogApplyRecordVisible = ref(false)
const applyRecordLoading = ref(false)
const applyRecordList = ref<any[]>([])
const applyRecordTaskId = ref<any>(null)

// ---------- 方法 ----------
const cell = (v: any) => {
    if (v === null || v === undefined || v === "") {
        return "--"
    }
    return v
}

const formatApplyRecordCell = (row: any, column: any, cellValue: any) => {
    return cell(cellValue)
}

const statusText = (status: any) => {
    const s = Number(status)
    if (s === 1) {
        return t("DollarActivity.statusInTask")
    }
    if (s === 2) {
        return t("DollarActivity.statusEnded")
    }
    if (s === 3) {
        return t("DollarActivity.statusCancelled")
    }
    return "--"
}

const statusStyle = (status: any) => {
    const s = Number(status)
    if (s === 1) {
        return { color: "#52c41a" }
    }
    if (s === 2) {
        return { color: "#eb3f57" }
    }
    if (s === 3) {
        return { color: "#8c8c8c" }
    }
    return { color: "#333" }
}

/** 已结束且剩余可申请次数不为 0 时显示领取奖励 */
const showDollarClaimRewardButton = (item: any) => {
    if (Number(item.status) !== 2) {
        return false
    }
    const n = item.applyGiveNum
    if (n === null || n === undefined) {
        return true
    }
    return Number(n) !== 0
}

const backActivity = () => {
    uni.navigateBack()
}

// picker 显示标签
const rulePickerLabel = (opt: any) => {
    if (!opt) return ''
    const dep = cell(opt.depositAmount)
    const rew = cell(opt.rewardAmount)
    return `${t("DollarActivity.fieldDepositAmount")}: ${dep} - ${t("DollarActivity.fieldRewardAmount")}: ${rew}`
}

// 处理 picker 选择变化
const onRuleChange = (e: any) => {
    const idx = e.detail.value
    if (idx !== undefined && ruleOptions.value[idx]) {
        selectedRuleIndex.value = idx
        selectedRuleId.value = ruleOptionValue(ruleOptions.value[idx])
    }
}

const ruleOptionValue = (opt: any) => {
    if (opt == null) {
        return null
    }
    const v = opt.id != null ? opt.id : opt.ruleId
    return v
}

const ruleOptionKey = (opt: any) => {
    const v = ruleOptionValue(opt)
    return v != null ? String(v) : Math.random()
}

const ruleOptionLabel = (opt: any) => {
    const dep = cell(opt.depositAmount)
    const rew = cell(opt.rewardAmount)
    return `${t("DollarActivity.fieldDepositAmount")}: ${dep} - ${t("DollarActivity.fieldRewardAmount")}: ${rew}`
}

/** display: 0 不可选（置灰），1 可选；未返回 display 时默认可选 */
const isRuleOptionDisabled = (opt: any) => {
    if (opt == null || opt.display === undefined || opt.display === null) {
        return false
    }
    return Number(opt.display) !== 1
}

const normalizeRuleList = (data: any) => {
    if (Array.isArray(data)) {
        return data
    }
    if (data && typeof data === "object") {
        if (Array.isArray(data.list)) {
            return data.list
        }
        if (Array.isArray(data.rules)) {
            return data.rules
        }
    }
    return []
}

const normalizeGiveRecordList = (data: any) => {
    if (Array.isArray(data)) {
        return data
    }
    if (data && typeof data === "object") {
        if (Array.isArray(data.list)) {
            return data.list
        }
        if (Array.isArray(data.records)) {
            return data.records
        }
    }
    return []
}

const openApplyRecordDialog = (item: any) => {
    applyRecordTaskId.value = item.id
    applyRecordList.value = []
    dialogApplyRecordVisible.value = true

    loadApplyRecordList()
}

const closeApplyRecordDialog = () => {
    dialogApplyRecordVisible.value = false
    onApplyRecordDialogClosed()
}

const onApplyRecordDialogClosed = () => {
    applyRecordTaskId.value = null
    applyRecordList.value = []
}

const loadApplyRecordList = async () => {
    if (applyRecordTaskId.value == null || applyRecordTaskId.value === "") {
        return
    }
    applyRecordLoading.value = true
    try {
        const res = await activityApi.ActivityDollarGiveRecord({
            id: applyRecordTaskId.value,
        })
        if (res.code == Code.StatusOK) {
            applyRecordList.value = normalizeGiveRecordList(res.data)
        } else {
            uni.showToast({ title: res.msg, icon: "none" })
            applyRecordList.value = []
        }
    } catch {
        uni.showToast({ title: t("Msg.Fail"), icon: "none" })
        applyRecordList.value = []
    } finally {
        applyRecordLoading.value = false
    }
}

const confirmCancelDollarActivity = async (item: any) => {
    try {
        await confirm({
            title: t("Msg.SystemPrompt"),
            content: t("DollarActivity.confirmCancel"),
            confirmText: t("Btn.Confirm"),
            cancelText: t("Btn.Cancel"),
        })
    } catch {
        return
    }
    cancelLoadingId.value = item.id
    try {
        const res = await activityApi.ActivityDollarCancel({ id: item.id })
        if (res.code == Code.StatusOK) {
            uni.showToast({ title: res.msg || t("Msg.Success"), icon: "success" })
            await searchFunc()
        } else {
            uni.showToast({ title: res.msg, icon: "none" })
        }
    } catch {
        uni.showToast({ title: t("Msg.Fail"), icon: "none" })
    } finally {
        cancelLoadingId.value = null
    }
}

const openClaimDialog = async (item: any) => {
    claimTaskId.value = item.id
    selectedRuleId.value = null
    selectedRuleIndex.value = -1
    ruleOptions.value = []
    dialogClaimVisible.value = true
    await loadDollarRules()
}

const closeClaimDialog = () => {
    dialogClaimVisible.value = false
    onClaimDialogClosed()
}

const onClaimDialogClosed = () => {
    claimTaskId.value = null
    ruleOptions.value = []
    selectedRuleId.value = null
    selectedRuleIndex.value = -1
}

const loadDollarRules = async () => {
    if (claimTaskId.value == null || claimTaskId.value === "") {
        return
    }
    ruleLoading.value = true
    try {
        const res = await activityApi.ActivityDollarRule({ id: claimTaskId.value })
        if (res.code == Code.StatusOK) {
            ruleOptions.value = normalizeRuleList(res.data)
            // 为每个选项添加显示标签
            ruleOptions.value.forEach((opt: any) => {
                opt.displayLabel = ruleOptionLabel(opt)
            })
            if (ruleOptions.value.length === 0) {
                uni.showToast({ title: res.msg || t("DollarActivity.emptyRuleList"), icon: "none" })
            }
        } else {
            uni.showToast({ title: res.msg, icon: "none" })
        }
    } catch {
        uni.showToast({ title: t("Msg.Fail"), icon: "none" })
    } finally {
        ruleLoading.value = false
    }
}

const confirmClaimReward = async () => {
    if (selectedRuleId.value === null || selectedRuleId.value === "" || claimTaskId.value == null) {
        uni.showToast({ title: t("DollarActivity.selectRulePlaceholder"), icon: "none" })
        return
    }
    applySubmitting.value = true
    try {
        const res = await activityApi.ActivityDollarApply({
            id: claimTaskId.value,
            ruleId: selectedRuleId.value,
        })
        if (res.code == Code.StatusOK) {
            uni.showToast({ title: res.msg || t("Msg.Success"), icon: "success" })
            closeClaimDialog()
            await searchFunc()
        } else {
            uni.showToast({ title: res.msg, icon: "none" })
        }
    } catch {
        uni.showToast({ title: t("Msg.Fail"), icon: "none" })
    } finally {
        applySubmitting.value = false
    }
}

const searchFunc = async () => {
    if (flag.value) {
        return
    }
    flag.value = true
    pictLoading.value = true
    let res = await activityApi.ActivityDollarSearchList()
    if (res.code == Code.StatusOK) {
        tableData.value = Array.isArray(res.data) ? res.data : []
    } else {
        uni.showToast({ title: res.msg, icon: "none" })
    }
    pictLoading.value = false
    flag.value = false
}

// ---------- 生命周期 ----------
onMounted(() => {
    searchFunc()
})
</script>

<style lang="scss" scoped>
@import "@/uni.scss";

#custom_history {
    width: 100%;
    height: 100%;

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

    .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(24);
    }

    .data-cards {
        .card-actions {
            margin-top: px2rpx(16);
            padding-top: px2rpx(12);
            border-top: 1px solid #f0f0f0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: px2rpx(20);

            .btn {
                padding: px2rpx(8) px2rpx(16);
                font-size: px2rpx(14);
                border-radius: px2rpx(6);
            }
        }

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

        .data-card {
            background: #fafafa;
            border-radius: px2rpx(12);
            padding: px2rpx(20) px2rpx(16);
            border: 1px solid #f0f0f0;
            text-align: center;

            .card-title {
                font-size: px2rpx(14);
                color: #666;
                margin-bottom: px2rpx(10);
                font-weight: 500;
            }

            .card-value {
                font-size: px2rpx(18);
                font-weight: 600;
                color: #333;
                line-height: 1.3;
                word-break: break-word;
            }
        }
    }

    @media (max-width: 768px) {
        .data-cards .total-data-row {
            grid-template-columns: 1fr;
        }
    }
}

.dialog-body {
    min-height: px2rpx(120);
    max-height: 60vh;
    overflow-y: auto;

    .picker-view {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: px2rpx(12) px2rpx(16);
        border: 1px solid #dcdfe6;
        border-radius: px2rpx(8);

        .placeholder-text {
            color: #c0c4cc;
        }

        .picker-arrow {
            color: #909399;
            font-size: px2rpx(14);
        }
    }

    .record-table {
        width: 100%;
        overflow-x: auto;
        font-size: px2rpx(14);

        .table-header,
        .table-row {
            display: flex;
            min-width: 600px;
            text-align: center;
            padding: px2rpx(20) px2rpx(8);
            border-bottom: 1px solid #ebeef5;
        }

        .table-header {
            background: #f5f7fa;
            font-weight: 600;
            color: #606266;
        }

        .col-deposit,
        .col-reward,
        .col-standard,
        .col-ecn,
        .col-cent,
        .col-time {
            flex: 1;
            word-break: break-word;
        }
    }

    .apply-record-empty {
        text-align: center;
        color: #999;
        padding: px2rpx(24) 0;
        font-size: px2rpx(14);
    }
}

// 弹窗样式
.dialog-popup {
    background: #ffffff;
    border-radius: px2rpx(16);
    width: 85%;
    max-width: 480px;

    &.dialog-large {
        max-width: 90%;
        width: 90%;

        @media (min-width: 768px) {
            max-width: 900px;
            width: 900px;
        }
    }

    .dialog-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: px2rpx(20) px2rpx(24);
        border-bottom: 1px solid #f0f0f0;

        .dialog-title {
            font-size: px2rpx(18);
            font-weight: 600;
            color: #333;
        }

        .dialog-close {
            width: px2rpx(32);
            height: px2rpx(32);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            .close-icon {
                font-size: px2rpx(20);
                color: #999;
            }
        }
    }



    .dialog-footer {
        display: flex;
        justify-content: flex-end;
        gap: px2rpx(12);
        padding: px2rpx(16) px2rpx(24);
        border-top: 1px solid #f0f0f0;

        button {
            padding: px2rpx(8) px2rpx(20);
            font-size: px2rpx(14);
            border-radius: px2rpx(6);
        }
    }
}


.dialog-popup1 {
    height: 20vh;
    max-height: 80vh;
}

// loading 状态
[v-loading] {
    position: relative;
}

// 按钮样式
.btn {
    border: none;
    border-radius: px2rpx(6);
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {

    &[disabled] {
        background-color: #f56c6c;
        cursor: not-allowed;
        color: var(--bs-body-bg);
    }
}

.btn-danger {
    background-color: #f56c6c;
    color: white;

    &:active {
        background-color: #e85c5c;
    }
}

.btn-outline-secondary {
    background-color: transparent;
    border: 1px solid #dcdfe6;
    color: #606266;

    &:active {
        background-color: #f5f7fa;
    }
}
</style>