leromro-mini/pages/common/list/listItem.vue

<template>
    <view class="item">
        <view class="item-img">
            <img src="/static/img/dd.png" alt="" />
        </view>
        <view class="item-info">
            <view class="item-title-box">
                <view class="item-title">
                    <view class="item-name">
                        <dict-tag :options="lrr_service_category" :value="data.serviceCategory" />
                        <view v-if="data.serviceType">
                            -
                            <dict-tag :options="lrr_study" :value="data.serviceType" v-if="data.serviceCategory === 2" />
                            <dict-tag :options="lrr_chitchat" :value="data.serviceType" v-if="data.serviceCategory === 1" />
                        </view>
                        
                    </view>
                    <view class="item-tag" :style="statysColor"> {{ status_map[data.orderStatus] }}</view>
                </view>
                <view class="item-de">
                    服务地址：{{ data.addressId }}
                </view>
            </view>
            <view class="item-box">
                <view class="item-price"><span class="item-price-yuan">¥</span> {{ data.serviceOnePrice || 0 }}</view>
                <view class="item-btns">
                    <up-button type="error" text="查看" size="mini" :custom-style="btn_style"
                        @click="onClick(1)"></up-button>
                    <!-- <up-button type="error" text="沟通" size="mini" :custom-style="btn_style" @click="onClick(2)"></up-button>
                    <up-button type="error" text="上传照片" size="mini" :custom-style="btn_style" @click="onClick(3)"></up-button> -->
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { inject } from 'vue';
import DictTag from '@/components/DictTag/index.vue'
import { computed } from 'vue';

const props = defineProps({
    data: {
        type: Object,
        default: () => {
            return {}
        }
    }
});

const inject_click = inject('onClick');

const lrr_service_category = inject('lrr_service_category');
const lrr_chitchat = inject('lrr_chitchat');
const lrr_study = inject('lrr_study');

const status_map = {
    1: '待服务',
    2: '已取消',
    3: '进行中',
    4: '已完成',
    5: '申请退款中',
    6: '已退款',
    7: '部分退款',
    8: '待确认'
}
const status_color_map = {
    1: '#3c9cff',
    2: '#f56c6c',
    3: '#3c9cff',
    4: 'rgba(56, 148, 254, 1)',
    5: 'orange',
    6: '#3c9cff',
    7: 'orange',
    8: '#3c9cff'
}

const statysColor = computed(() => {
    return {
        color: status_color_map[props.data.orderStatus]
    }
});



const btn_style = ` width: 120rpx; height: 50rpx; font-size: 24rpx;border-radius: 25rpx;margin-left: 12rpx;`;

/**
 * 1: 查看
 * 2：沟通
 * 3：上传照片
 */
function onClick() {
    inject_click(props.data, 1);
}
</script>

<style lang="scss" scoped>
.item {
    height: 120px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 1);
    padding: 12px;
    margin-bottom: 12px;
    display: flex;

    .item-img {
        width: 96px;
        height: 96px;
        margin-right: 12px;

        image {
            height: 100%;
            width: 100%;
        }
    }

    .item-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .item-title-box {
            .item-title {
                font-size: 14px;
                font-weight: 700;
                letter-spacing: 0px;
                line-height: 20.27px;
                color: rgba(51, 51, 51, 1);
                text-align: left;
                vertical-align: top;
                margin-bottom: 10px;

                display: flex;
                align-content: center;
                justify-content: space-between;

                .item-name {
                    flex: 1;
                    display: flex;
                    // display: -webkit-box;
                    // -webkit-box-orient: vertical;
                    // -webkit-line-clamp: 1;
                    // overflow: hidden;
                    // text-overflow: ellipsis;
                    // word-break: break-all;
                }

                .item-tag {
                //    color: #3c9cff;
                }

            }

            .item-de {
                font-size: 12px;
                font-weight: 500;
                letter-spacing: 0px;
                line-height: 17.38px;
                color: rgba(153, 153, 153, 1);
                text-align: left;
                vertical-align: top;

                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
            }
        }

        .item-box {
            display: flex;
            align-content: flex-end;
            justify-content: space-between;

            .item-price {
                font-size: 18px;
                font-weight: 500;
                letter-spacing: 0px;
                line-height: 21.09px;
                color: rgba(246, 74, 31, 1);
                text-align: center;
                vertical-align: top;

                .item-price-yuan {
                    font-size: 13px;
                    font-weight: 700;
                    letter-spacing: 0px;
                    line-height: 21.09px;
                    color: rgba(246, 74, 31, 1);
                }
            }

            .item-btns {
                display: flex;
            }
        }
    }
}
</style>