<template> <view class="apply-item" @tap="tapItemHandle"> <view class="apply-item-tag" :class="[`apply-item-tag${item.dealStatus??1}`]">{{statusText}}</view> <view class="flex-row"> <u-image class="apply-item-image1" width="51.2rpx" height="51.2rpx" bgColor="transparent" src="@/pages/subpack/static/images/app/avatar-mini.png" /> <view class="apply-item-name">{{item.personName}}</view> </view> <view class="apply-item-content"> <view class="flex-row align-center"> <u-image class="apply-item-image2" width="36rpx" height="36rpx" bgColor="transparent" src="@/pages/subpack/static/images/app/cat-icon.png" /> <view class="apply-item-tips text-overflow"> <text>需求:</text> <text>{{item.careNeeds??'-'}}</text> </view> </view> <view class="flex-row align-center mt-08"> <u-image class="apply-item-image2" width="36rpx" height="36rpx" bgColor="transparent" src="@/pages/subpack/static/images/app/time-icon.png" /> <view class="apply-item-tips1"> <text>申请日期:</text> <text>{{item.applyDate??'-'}}</text> </view> </view> </view> </view> </template> <script setup> import { computed } from 'vue' import { getDict } from '@/common/status/index.js' const emit = defineEmits(['tapItem']) const props = defineProps({ item: { type: Object, default () { return { personName: '张三🤩', //申请人姓名 careNeeds: 'sdasad', //护理需求详情 applyDate: '2025-01-01 12:23:12', //申请日期 status: 1, //申请状态 dealStatus: 1, //处理状态 } } }, }) const tapItemHandle = () => { emit('tapItem', props.item) } const statusText = computed(() => { // console.log('???', props.item); if (props.item.dealStatus === 'complete') return '已完成'; let dict = getDict({ dictValue: props.item.status, dictType: 'care_apply_status' }); return dict.dictLabel ?? '空状态'; }) </script> <style lang="scss" scoped> :deep(.u-image) { display: flex; align-items: center; justify-content: center; } .apply-item { position: relative; background-color: #fff; margin: 24rpx; padding: 30rpx; border-radius: 20rpx; &-tag { position: absolute; right: 0; top: 0; font-size: 28rpx; color: #FFFFFF; background: linear-gradient(to right, #00D885 0%, #2CEFA4 100%); padding: 6rpx 24rpx; border-radius: 0 20rpx 0 20rpx; font-weight: 500; } &-tag1, &-tagno_start { background: linear-gradient(to right, #EFEFEF 0%, #EFEFEF 100%); color: #888888; } &-tag2, &-tagin_progress { background: linear-gradient(to right, #1677FF 0%, #5EA0FB 100%); } &-tag0, &-tagin_disagree { background: linear-gradient(to right, #fa3534 0%, #fa6355 100%); } &-name { font-size: 32rpx; color: #222222; margin-left: 20rpx; } &-content { margin-top: 20rpx; } &-tips { margin-left: 15rpx; font-size: 28rpx; color: #444444; } &-tips1 { margin-left: 15rpx; font-size: 24rpx; color: #444444; } } </style>