xx-applets/src/components/order/item.vue

<template>
    <view class="order-item" @click="toDetail">
        <view class="order-header">
            <view class="state-text" :style="{ color: models.order.getOrderStateTextColor(order.state) }">
                <text>{{ models.order.getOrderStateText(order.state) }}</text>
            </view>
            <view class="more">
                <text class="text">详情</text>
                <text class="iconfont icon-jinru"></text>
            </view>
        </view>
        <view class="order-body">
            <view class="row">
                <text class="title">订单编号：</text>
                <text class="text">{{ order.orderId }}</text>
                <text class="copy" @click.stop="copyOrderId(order.orderId)">复制</text>
            </view>
            <view class="row">
                <text class="title">服务分类：</text>
                <text class="text">{{ order.cate }}</text>
            </view>
            <view class="row limit-line clamp-1">
                <text class="title">需求内容：</text>
                <text class="text">{{ order.explain }}</text>
            </view>
            <view class="row">
                <text class="title">下单时间：</text>
                <text class="text">{{ order.createTime }}</text>
            </view>
            <view class="row">
                <text class="title">服务时间：</text>
                <text class="text">{{ order.serviceTime }}</text>
            </view>
            <view class="worker-box">
                <block
                    v-if="
                        order.orderType == models.order.type.NORMAL ||
                        order.orderType == models.order.type.CUSTOM_PRICE ||
                        (order.orderType == models.order.type.WORKER_PRICE && order.state == models.order.state.NO_SERVICE)
                    "
                >
                    <view class="worker-item-box">
                        <worker-item :data="order.worker" />
                    </view>
                </block>
                <block v-else>
                    <view class="worker-list-group">
                        <view class="list-group">
                            <view class="list-item" v-for="(item, index) in previewWorkerList" :key="index">
                                <image class="cover" :src="item.cover" mode="aspectFill" />
                                <text class="price">¥ {{ item.price }}</text>
                            </view>
                        </view>
                        <view class="more-worker">
                            <text class="text">{{ order.workerList.length }}位师傅已报价</text>
                            <text class="iconfont icon-jinru"></text>
                        </view>
                    </view>
                </block>
            </view>
        </view>
        <view class="order-footer">
            <slot></slot>
        </view>
    </view>
</template>

<script>
import WorkerItem from "@/components/worker/item";
export default {
    name: "order-order-item",
    data() {
        return {
            models: this.$models,
            previewWorkerList: [],
        };
    },
    props: {
        order: {
            type: Object,
            default: () => {},
        },
    },
    components: {
        WorkerItem,
    },
    created() {
        for (let index = 0; index < 3; index++) {
            if (this.order.workerList[index]) {
                this.previewWorkerList.push(this.order.workerList[index]);
            } else {
                break;
            }
        }
    },
    mounted() {},
    destroyed() {},
    methods: {
        copyOrderId(orderId) {
            const that = this;
            uni.setClipboardData({
                data: orderId,
                success(result) {
                    that.$utils.toast("内容已复制");
                },
                fail(error) {
                    that.$utils.toast("复制失败");
                },
            });
        },
        toDetail() {
            let type = "detail";
            if (this.order.status == this.$models.order.state.NO_SELECT_WORKER) {
                type = "worker";
            }
            this.$utils.toPage("/pages/order/detail?type=" + type + "&id=" + this.order.id);
        },
    },
};
</script>

<style lang="less" scoped>
.order-item {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    .order-header {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 32rpx;
        padding: 30rpx 0 18rpx 0;
        .state-text {
            font-size: 30rpx;
            font-weight: bold;
        }
        .more {
            font-size: 26rpx;
            color: #666666;
            display: flex;
            align-items: center;
        }
        .iconfont {
            color: #a7a7a7;
            font-size: 32rpx;
            margin-left: 8rpx;
        }
    }
}
.order-body {
    width: 100%;
    border-bottom: 2rpx solid #e8e7e7;
    padding: 18rpx 0;
    .row {
        position: relative;
        width: 100%;
        font-size: 28rpx;
        line-height: 30rpx;
        margin-bottom: 22rpx;
        .title {
            color: #999999;
        }
        .text {
            color: #000000;
        }
        .copy {
            color: #8194f2;
            margin-left: 24rpx;
        }
    }
    .row:last-child {
        margin-bottom: 0;
    }
    .worker-box {
        width: 100%;
    }
}
.order-footer {
    width: 100%;
}
.worker-list-group {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 20rpx 0 10rpx 0;
    .list-group {
        display: flex;
    }
    .list-item:first-child {
        margin-left: 0;
    }
    .list-item {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin-left: 36rpx;
        .cover {
            width: 110rpx;
            height: 110rpx;
            box-sizing: border-box;
            border-radius: 50%;
            overflow: hidden;
            margin-bottom: 8rpx;
        }
        .price {
            font-size: 26rpx;
            font-weight: bold;
            color: #ec7655;
        }
    }
    .more-worker {
        display: flex;
        align-items: center;
        .text {
            font-size: 26rpx;
            font-weight: bold;
            color: #666666;
        }
        .iconfont {
            font-size: 32rpx;
            color: #a7a7a7;
        }
    }
}
.worker-item-box {
    width: 100%;
    padding: 20rpx 0 10rpx 0;
}
</style>