leromro-mini/pages_classify/components/orderList/listItem.vue

<template>
    <view class="item">
        <view class="item-img">
            <img :src="baseUrl + data.avatar" alt="" style="width: 112rpx; height: 112rpx;">
        </view>
        <view class="item-info">
            <view class="item-title-box">
                <view class="item-title">
                    <view class="item-name">
                        {{ data.name }}
                    </view>
                    <view v-if="data.score || ['0','1'].includes(String(data.orderStatus))">
                        <dict-tag :options="lrr_service_status" :value="String(data.orderStatus)"  />
                    </view>
                    <text v-else>
                        待评价
                    </text>
                </view>
                <view class="item-de">
                    <img src="/static/serverImg/list/ad2.png" alt="" style="width: 28rpx;height: 28rpx;">
                    {{ data.address }}
                </view>
                <view class="item-time">
                    {{ data.createTime }}
                </view>
            </view>
            <view class="item-box">
                <view class="item-price"><span class="item-price-yuan">¥</span> {{ data.serviceOnePrice || 0 }}</view>
                <view class="item-btns">
                    <view class="btn-s" @click="onClick(1)">查看</view>
                    <view class="btn-m" @click="onClick(2)"><img src="/static/serverImg/list/mess.png" alt=""
                            style="width: 28rpx;height: 28rpx;margin-right: 8rpx;">沟通</view>
                </view>
            </view>
        </view>
    </view>
</template>

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

import config from '@/config'
const baseUrl = config.baseUrl

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

const inject_click = inject('onClick');

const lrr_service_status = inject('lrr_service_status');

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

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

<style lang="scss" scoped>
.item {
    height: 294rpx;
    opacity: 1;
    border-radius: 24rpx;
    background: rgba(255, 255, 255, 1);
    margin-bottom: 24rpx;
    padding: 32rpx;
    display: flex;
    align-items: flex-start;

    .item-img {
        margin-right: 32rpx;
    }

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

        .item-title-box {
            .item-title {
                font-size: 30rpx;
                font-weight: 400;
                line-height: 45rpx;
                color: rgba(26, 26, 26, 1);
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 15rpx;
            }
        }

        .item-de {
            display: flex;
            font-size: 26rpx;
            font-weight: 400;
            line-height: 39rpx;
            color: rgba(153, 153, 153, 1);
            display: flex;
            align-items: center;
            justify-content: flex-start;
        }

        .item-time {
            font-size: 26rpx;
            font-weight: 400;
            letter-spacing: 0rpx;
            line-height: 39rpx;
            color: rgba(153, 153, 153, 1);
            margin-bottom: 40rpx;
        }

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

            .item-price {
                font-size: 30rpx;
                font-weight: 400;
                letter-spacing: 0rpx;
                line-height: 45rpx;
                color: rgba(255, 59, 48, 1);
            }

            .item-btns {
                display: flex;
                align-items: center;
                justify-content: center;

                .btn-s {
                    font-size: 26rpx;
                    font-weight: 400;
                    letter-spacing: 0rpx;
                    line-height: 39rpx;
                    color: rgba(51, 102, 255, 1);
                    text-align: center;

                    width: 156.03rpx;
                    height: 67rpx;
                    border-radius: 8rpx;
                    background: rgba(0, 0, 0, 0);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 0rpx solid rgba(51, 102, 255, 1);
                }

                .btn-m {
                    width: 188.03rpx;
                    height: 67rpx;
                    opacity: 1;
                    border-radius: 8rpx;
                    background: rgba(51, 102, 255, 1);

                    text-align: left;
                    margin-left: 24rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: rgba(255, 255, 255, 1);
                }
            }
        }
    }
}
</style>