leromro-mini/pages/common/order/item.vue

<template>
    <view class="order-item">
        <view class="order-status">{{ data.orderStatus === '3' ? '进行中' : '待服务' }}</view>
        <view class="order-content">
            <image :show-loading="true" :src="data.volunteerPicture" class="item-img"></image>
            <view class="order-info">
                <view class="order-title">
                    <view class="order-name">{{ data.name }}</view>
                    <view class="order-price">￥{{ data.serviceOnePrice }}</view>
                </view>
                <view class="order-text">服务地址：{{ data.address }}</view>
                <view class="order-text">上门时间：{{ data.workDate }} {{ data.workStartTime }}</view>
            </view>
        </view>
        <view class="order-btns">
            <view class="order-btn1" @click="onSee">查看</view>
            <view class="order-btn2" @click="onTalk">
                <view class="message-icon"></view>
                去沟通
            </view>
            <view class="order-btn2" @click="onHandle" v-if="data.orderStatus === '1'">
                <view class="handle-icon"></view>
                去服务
            </view>
            <view class="order-btn2" @click="onPot" v-if="data.orderStatus === '3'">
                <view class="pot-icon"></view>
                去拍照
            </view>

        </view>
    </view>
</template>

<script setup>
import { getVolunteerOrderList } from '@/api/volunteer.js'
import { onMounted, ref } from 'vue';
import NoneView from '@/components/NoneView/index.vue'
import { onShow, onReachBottom, onUnload, onPageScroll } from '@dcloudio/uni-app'

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

})

const onSee = () => {
    uni.navigateTo({
        url: `/pages_classify/pages/details/index?secondOrderId=${props.data.secondOrderId}`,
    })
}
const onTalk = () => {
    uni.navigateTo({
        url: `/pages_orderuser/pages/talk/pages/index/index?orderId=${props.data.mainOrderId}&conversationType=2`
    });
}
const onHandle = () => {
    uni.navigateTo({
        url: `/pages_classify/pages/handle/index?secondOrderId=${props.data.secondOrderId}`,
    })
}

const onPot = () => {
    uni.navigateTo({
        url: `/pages_classify/pages/order/index?secondOrderId=${props.data.secondOrderId}`,
    })
}


</script>

<style scoped lang="scss">
.order-item {
    border-radius: 16.46rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 3.66rpx 9.14rpx 6rpx rgba(0, 0, 0, 0.04);
    position: relative;
    margin-bottom: 20rpx;

    padding: 29rpx 32rpx;

    .order-status {
        position: absolute;
        background: linear-gradient(90deg, #FED593 0%, #FDC58C 100%);
        height: 47rpx;
        position: absolute;
        left: 0;
        top: 0;
        border-top-left-radius: 16rpx;
        border-bottom-right-radius: 16rpx;

        font-size: 24rpx;
        font-weight: 500;
        line-height: 44rpx;
        letter-spacing: normal;
        color: #843816;
        padding: 0 21rpx;
    }

    .order-content {
        display: flex;
        gap: 25rpx;

        .item-img {
            width: 106.1rpx;
            height: 106.45rpx;
        }

        .order-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 9rpx;

            .order-title {
                display: flex;
                align-items: flex-start;
                width: 100%;
                justify-content: space-between;

                .order-name {
                    font-family: PingFang SC;
                    font-size: 29.26rpx;
                    font-weight: 600;
                    line-height: 38.41rpx;
                    letter-spacing: normal;
                    color: rgba(0, 0, 0, 0.8);
                    margin-top: 20rpx;
                }

                .order-price {
                    font-family: PingFang SC;
                    font-size: 29.26rpx;
                    font-weight: 600;
                    line-height: 38.41rpx;
                    letter-spacing: normal;
                    color: rgba(0, 0, 0, 0.8);
                }
            }

            .order-text {
                font-family: PingFang SC;
                font-size: 25.6rpx;
                font-weight: normal;
                line-height: 31.09rpx;
                letter-spacing: normal;
                color: rgba(0, 0, 0, 0.5);
            }
        }
    }

    .order-btns {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 24rpx;
        margin-top: 27rpx;

        .isbtn {
            width: 130rpx;
            height: 56rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22rpx;
            font-weight: 500;
            line-height: 28rpx;
            letter-spacing: normal;
            border-radius: 32.92rpx;
        }

        .order-btn1 {
            @extend .isbtn;
            border: 0.91rpx solid #D94342;
            color: #D94342;

        }

        .order-btn2 {
            @extend .isbtn;
            border: 0.91rpx solid #D94342;
            background: #D94342;
            color: #FFFFFF;

        }

        .order-icon {
            width: 24rpx;
            height: 24rpx;
            margin-right: 6rpx;
            background-position: center;
            background-size: 24rpx auto;
            background-repeat: no-repeat;
        }

        .message-icon {
            @extend .order-icon;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAGrSURBVEiJ3ZWxalRREIa/I1uk2DJFii0sFCwsttiAD7BFICl8Ay0UfADBgHkDS2uxSJNS2BUfII2gYMCAAQNbRNBiC4uAgQQ+izurZ0/2bm6SbfSHC/eemfn/OefMzIV/HWmeUW0B68B9oAushGkM7AMnRchP4FVKaf9CAbUPvATuBNFH4DDMN+Mp0Qnf1ZTSwbzMn1thpD5Ul2qdp+M66qn6Yp7TVpAP1XYT4iJ+pL6uM/Yjg2Gc/6VRK6C21E/q96tkXieQZ7lGVSmPU0rHVxUocSN7X6eqgJ0F8P5JPBfoAnsLyH5MVdrnBFaAb9ckBzgAlmcJLApTPZML/KDqxOuiE1znBPaAblmi6lP1i9rL1u6qn9VnhW8b6AXXNNSN6OBHZZD6Jhsdo6zTlwvfJ2Fbm6ylzNgCPlBd9u2ymtRbwL34fJ9SOizsbeBrHM9qSuls1i4mo2JwmVERU+BdxPYvct6MbQ6ajIw4wkHEbDbNaDJRj9QHs8a1uhS2o8i8GXlG0I/qUf2l7qrb8ezGmuFTeyxNfpkbVHOqx98OHVP94d4Cw5kX+t/gNz+IaThao3wSAAAAAElFTkSuQmCC);

        }

        .handle-icon {
            @extend .order-icon;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAFzSURBVDiN5ZQvTEJRFId/bzJHIBhxe+EFAoFgIBgMbhqYIzhncLNi0sgGkegmjWgwGAm66SbNYDAQDAYCgWCQjWDQjWD4DBy3N7jvIaDJ0+75893fuefuSP/SgFUg9RugFeAQuAQGjOwT2JkHlgMqwINBAB6BGpAH2kDjOz8RA0pK2pJUlFSQFEj6kNSSdCSp5XleP5TvSxpEwQLgGLgDhqaqA9SBTcApBFi33A1X8NyCQwOfAJkIUAYohc41YFItsGzQ6rTpAlngFXgO+drAhSt5CXizhLUYaNqepgOkzeebqIOoojzwZBM/G1fugpq/ZDXRnQIJoAy8Az2gGAe12BVwHwkdSw6AW2uxGQNNmojyj8Chwn3gxVr1HfGCXe78PdPgWQNXHbEG0J0ZGgKc2v8Oxvw9oL4IOGmQm5AvZ8+wPTfYQEUD7dq5YoOL3DezwK9tmClGW665MNTAvqnshtW7zJsDnpe0J6nred7kfvhr+wKviuaczrVBzwAAAABJRU5ErkJggg==);
        }

        .pot-icon {
            @extend .order-icon;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAGgSURBVEiJ7ZShTxxhEMV/X4No0g1BnKhAnKioQFzSCiQOc38EdYiebpMaUIhDNLk6DIKkAoG55EgwiCaQtE0FtqKiSeWJo6HJiV8Fc3CFb/eWYplkkt03772Z3Z394CHuE+qcuqWeqSOvYxTYljpX5VFZBHrAOtAHDoHfgT8BngNvgQLo/M/0LXWsbldw3gdnqa5pQ+2qn9UL9Ze6UMFfCM5FaLpqo4y8OEUeqNtqs8ZQzeAOpoZazBH34+O1aj3utW5e7aiFuqQO1Y854kjdKTEp1HfqUeQbtYhaJzarE/c9dZgzUd0oMT+L+kmkgRWR6+p88DdU79JgsikrU9hKYN0M/58Gj3Kv5EasAv2U0vEEiOs+0J4lrtPgMXCewc+jdu8Gp0BbfToB4roNfJolnnVUAGyG2Td1N7C10G7W0F9NNVR7JbVWrOc48qjseKha04P4C4vaU932KMLjIFdcjukGpedJtXkjtGN1eYKnG6Q1YAf4A3wBftT0bwIvudyqVymlvWyDaPIMeA28AG4fWvn4CXwFPqSUvtfUPMRl/AU/GbOVti98AAAAAABJRU5ErkJggg==);

        }

    }
}
</style>