couponCenter_mpapp/src/components/IncomeItem.vue

<template>
    <view class="invite-item" @tap="handleItemClick">
        <view class="income-header-menu-item">
            <view class="income-header-menu-icon">
                <image :src="getImageUrl(`@img/income/${iconImages[type]}.png`)" mode="aspectFit" />
                <view class="income-header-menu-text">
                    <view v-if="[5, 6, 7].includes(data.commissionType)" class="income-header-menu-text-nickname">
                        <template v-if="data.commissionType === 5">
                            拉新奖励
                        </template>
                        <template v-if="data.commissionType === 6">
                            分享奖励
                        </template>
                        <template v-else>
                            提现到银行卡
                        </template>
                    </view>
                    <view v-else class="income-header-menu-text-nickname">
                        {{ data.receiveUserName }}
                    </view>
                    <view v-if="![5, 6, 7].includes(data.commissionType)">
                        {{ data.couponName }}
                        <template v-if="data.status === 2">
                            <text class="text-red ml-10rpx">(退款)</text>
                        </template>
                    </view>
                    <view>
                    <!-- <view v-if="[7].includes(data.commissionType)"> -->
                        {{ data.bankName }}招商银行
                    </view>
                </view>
            </view>
            <view class="income-header-menu-left">
                <view class="income-header-menu-left-amount">
                    <view class="center" v-if="![5, 6, 7].includes(data.commissionType)">
                        <template v-if="data.status === 2">
                            <up-icon name="minus" size="12" color="#333333" />
                        </template>
                        <!-- <template v-else>
                            <up-icon name="plus" size="12" color="#333333" />
                        </template> -->
                    </view>
                    <up-text mode="price" :style="{ flex: '0' }" :text="data.changeAmount" align="right"
                        color="#222222" font-size="30rpx" />
                </view>
                <view class="income-header-menu-left-time">
                    {{ type === 2 ? data.createTime : type === 1 ? data.settleTime : '预估' }}
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { getImageUrl } from '@/utils/imageUtil'

const props = defineProps({
    data: {
        type: Object,
        default: () => ({}),
    },
    type: {
        type: Number,
        default: 0,
    },
    itemClick: {
        type: Function,
        default: () => { },
    },
})

const iconImages = [
    'djs',  // type 0: 待结算
    'hb',   // type 1: 已结算
    'card', // type 2: 已提现
]

const emit = defineEmits(['itemClick'])

const handleItemClick = () => {
    if ([5, 6].includes(props.data.commissionType)) {
        emit('itemClick', props.data)
    }
}
</script>

<style lang="scss" scoped>
.invite-item {
    background: #ffffff;
    border-radius: 10rpx;

    .income-header-menu-item {
        height: 88rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eeeeee;
        padding: 32rpx 0 29rpx;
        margin: 0 20rpx;

        &:last-child {
            border-bottom: none;
        }

        .income-header-menu-icon {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 19rpx;

            image {
                width: 60rpx;
                height: 60rpx;
            }

            .income-header-menu-text {
                font-weight: 400;
                font-size: 24rpx;
                color: #888888;

                .income-header-menu-text-nickname {
                    font-size: 28rpx;
                    color: #222222;
                    margin-bottom: 18rpx;
                }
            }
        }

        .income-header-menu-left {
            font-weight: 400;
            font-size: 24rpx;
            color: #888888;

            .income-header-menu-left-amount {
                font-size: 28rpx;
                color: #222222;
                margin-bottom: 18rpx;
                text-align: right;
                display: flex;
                flex-direction: row;
                justify-content: flex-end;
            }

            .income-header-menu-left-time {
                text-align: right;
            }
        }
    }
}
</style>