leromro-mini/pages/common/orderList/userItem.vue

<template>
    <view class="item">
        <view class="item-img">
            <up-image :show-loading="true" :src="data.volunteerPicture" width="112rpx" height="112rpx"></up-image>
        </view>
        <view class="item-info">
            <view class="item-title-box">
                <view class="item-title">
                    <view class="item-name">
                        志愿者姓名：{{ data.name }}
                    </view>
                    <dict-tag :options="order_status" :value="String(data.orderStatus)" />
                </view>
                <view class="item-de">
                    服务类别：{{data.businessTierName}}
                </view>
                 <view class="item-de">
                    下单日期：{{ data.createTime }}
                </view>
                <view class="item-time skill-description">
                    服务描述：{{ data.businessDescribe }}
                </view>
            </view>
            <view class="item-box">
                <view class="item-btns">
                    <view v-for="item in btns" :key="item.name">
                        <view class="btn-m" v-if="item.show ? item.show(data) : true" :type="item.type" text="取消"
                            @click="item.onClick(data)">
                            {{item.name}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

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

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

const order_status = inject('order_status');

const btns = [
    {
        name: '沟通',
        onClick: (e) => {
		console.log("TCL: e", e)
        uni.navigateTo({
            url: `/pages_orderuser/pages/talk/pages/index/index?orderId=${e.mainOrderId}`
        });
         },
        type: 'primary'
    },
    {
        name: '退款',
        onClick: (e)=>handleRefund(e),
        show: (item) => ['3'].includes(item.orderStatus),
        type: 'error'
    },
    {
        name: '取消',
        onClick: (e)=>handleCancel(e),
        show: (item) => ['1'].includes(item.orderStatus),
        type: 'warning'
    },
    {
        name: '查看',
        onClick: (e)=>handlClick(e),
        // show: (item) => item.orderStatus !== '1',
        type: 'info'
    },
]

//申请退款 
const handleRefund = (item) => {
    const mainOrderId = item.mainOrderId; // 获取详情id
    uni.navigateTo({
        url: `/pages_classify/pages/requestaRefund/requestaRefund?mainOrderId=${mainOrderId}`
    });
};
// 取消订单
const handleCancel = (item) => {
    const mainOrderId = item.mainOrderId;
    uni.navigateTo({
        url: `/pages_classify/pages/cancelationOforder/cancelationOforder?mainOrderId=${mainOrderId}`
    });
};
//查看
const handlClick = (item) => {
    const mainOrderId = item.mainOrderId; // 获取详情id
    uni.navigateTo({
        url: `/pages_classify/pages/orderItem/orderdetails?mainOrderId=${mainOrderId}`
    });
}
</script>

<style lang="scss" scoped>
.item {
    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: 20rpx;
        }

        .item-price {
            font-size: 30rpx;
            font-weight: 400;
            letter-spacing: 0rpx;
            line-height: 45rpx;
            color: rgba(203, 26, 28, 1);
            margin-bottom: 16rpx;
        }

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


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

                .btn-s {
                    font-size: 26rpx;
                    font-weight: 400;
                    color: rgba(221, 94, 69, 1);
                    text-align: center;
                    padding: 16rpx 0;
                    width: 156.03rpx;
                    border-radius: 8rpx;
                    background: rgba(0, 0, 0, 0);
                    display: flex;
                    justify-content: center;
                    border: 0rpx solid rgba(221, 94, 69, 1);
                }

                .btn-m {
                    border-radius: 59rpx;
                    font-size: 26rpx;
                    text-align: left;
                    margin-left: 24rpx;
                    display: flex;
                    justify-content: center;
                    color: #dd5e45;
                    padding: 12rpx 32rpx;
                    border: 1px solid;
                    border-radius: 59rpx;
                }


            }
        }
    }
}

.item-time-text {
    color: #dd5e45;
}

.skill-description {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 限制两行 */
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 1.4;
		min-height: 2.8em;
		/* 两行高度 */
	}

</style>