admission-uniapp/src/components/widgets/recruitsale/clue-card.vue

<template>
    <w-card @click="handleDetail">
        <template #title>
            <view class="flex justify-between w-full py-[10rpx]">
                <view class="flex">
                    <text>{{ item.studentName }}</text>
                    <view class="flex ml-[48rpx] gap-[4rpx] items-center">
                        <text class="text-primary">{{ item.phone }}</text>
                        <u-copy :content="item.phone">
                            <TIcon name="icon-copy" color="#0E66FB" />
                        </u-copy>
                    </view>
                </view>
            </view>
        </template>
        <template #content>
            <view class="flex flex-col gap-[16rpx]">
                <view
                    class="flex gap-[8rpx] items-center"
                    v-if="item.situation == converStatusEnum.EXCEPTION"
                >
                    <TIcon name="icon-warning" color="#F5222D" />
                    <text class="text-error">待电销老师重新跟进</text>
                </view>
                <view class="flex gap-[20rpx]">
                    <text class="text-muted w-[128rpx]">基本情况</text>
                    <view class="flex gap-[4rpx] flex-1 items-center">
                        <text>
                            {{ item.basicInformation }}
                        </text>
                        <u-copy :content="item.basicInformation !">
                            <TIcon name="icon-copy" color="#0E66FB" />
                        </u-copy>
                    </view>
                </view>
                <view class="flex gap-[20rpx]" v-if="item.telemarketingTeacherId !== null">
                    <text class="text-muted w-[128rpx]">电销老师</text>
                    <text class="flex-1">{{ item.telemarketingTeacherName }}</text>
                </view>
                <view
                    class="flex gap-[20rpx]"
                    v-if="
                        (item.situation == converStatusEnum.ADD_RELATION ||
                            item.situation == converStatusEnum.EXCEPTION) &&
                        item.state !== null
                    "
                >
                    <text class="text-muted w-[128rpx]">状态</text>
                    <text class="flex-1 text-error">{{ parseStateText }}</text>
                </view>
                <view
                    class="flex gap-[20rpx]"
                    v-if="
                        item.situation == converStatusEnum.CONVERTED ||
                        item.situation == converStatusEnum.FAILED
                    "
                >
                    <text class="text-muted w-[128rpx]">备注</text>
                    <view class="flex gap-[12rpx] flex-1">
                        <text class="text-error">{{ item.remark }}</text>
                        <view
                            class="flex gap-[4rpx] items-center text-primary text-[28rpx]"
                            @click.stop="handleUpdateRemark"
                        >
                            <TIcon name="icon-edit" color="#0E66FB" />
                            <text>修改</text>
                        </view>
                    </view>
                </view>
                <view class="flex gap-[20rpx]" v-if="item.situation == converStatusEnum.CONVERTED">
                    <text class="text-muted w-[128rpx]">成交时间</text>
                    <text class="flex-1">{{ item.updateTime }}</text>
                </view>
            </view>
        </template>
        <template #action>
            <view
                class="px-[32rpx] border-t border-solid border-[#F3F3F3] flex justify-end py-[12rpx]"
                v-if="!showAction"
            >
                <view class="flex justify-end gap-[16rpx]">
                    <u-button
                        color="#0E66FB"
                        shape="circle"
                        v-if="item.situation == converStatusEnum.UN_RECEIVED"
                        @click.stop="handleGet"
                    >
                        领取
                    </u-button>
                    <u-button
                        color="#0E66FB"
                        shape="circle"
                        v-if="item.situation == converStatusEnum.CONVERTED_PROCESS"
                        @click.stop="handleAddProgress"
                    >
                        添加进展
                    </u-button>
                    <u-button
                        color="#0E66FB"
                        shape="circle"
                        v-if="item.situation == converStatusEnum.ADD_RELATION"
                        @click.stop="handleComplete"
                    >
                        转化完成
                    </u-button>
                </view>
            </view>
        </template>
    </w-card>
</template>

<script setup lang="ts">
import { toast } from '@/utils/util'
import { PropType } from 'vue'
import { IClue } from '../telesale/clue-card.vue'
import { converStatusEnum, stateEnum } from '@/enums'
import { apiGetCluse } from '@/api/clue'
import { computed } from 'vue'

const props = defineProps({
    item: {
        type: Object as PropType<IClue>,
        default: () => ({})
    }
})
const emit = defineEmits(['handleUpdateRemark', 'refreshPage'])

const stateMap: Record<stateEnum, string> = {
    [stateEnum.ADD_RELATION]: '账号已添加',
    [stateEnum.NO_EXIST]: '账号不存在',
    [stateEnum.UN_PASS]: '账号未通过'
}
const parseStateText = computed(() => stateMap[props.item.state])
const showAction = computed(() => {
    const { situation } = props.item
    return (
        situation == converStatusEnum.EXCEPTION ||
        situation == converStatusEnum.CONVERTED ||
        situation == converStatusEnum.FAILED
    )
})
// 领取
const handleGet = async () => {
    const {
        item: { id }
    } = props
    try {
        await apiGetCluse({ id })
        toast('领取成功')
        emit('refreshPage')
    } catch (error) {}
}
// 添加进展
const handleAddProgress = () => {
    const { item } = props
    uni.navigateTo({
        url: '/bundle/pages/progress_add/index?id=' + item.id
    })
}
// 转化完成
const handleComplete = () => {
    const { item } = props
    uni.navigateTo({
        url: '/bundle/pages/complete_add/index?id=' + item.id
    })
}
// 修改备注
const handleUpdateRemark = () => {
    const { item } = props
    emit('handleUpdateRemark', item)
}
// 线索详情
const handleDetail = () => {
    const { item } = props
    uni.navigateTo({
        url: '/bundle/pages/clue/detail?id=' + item.id
    })
}
</script>
<style scoped></style>