241 lines
7.5 KiB
Vue
241 lines
7.5 KiB
Vue
<template>
|
||
<view class="component-order-item">
|
||
<view class="order-header">
|
||
<view class="state-text" :style="{ color: stateTextColor }">
|
||
<text>{{ stateText }}</text>
|
||
</view>
|
||
<view class="more">
|
||
<text class="text">详情</text>
|
||
<text class="iconfont icon-jinru"></text>
|
||
</view>
|
||
</view>
|
||
<view class="order-body">
|
||
<view class="order-desc-row">
|
||
<text class="title">订单编号：</text>
|
||
<text class="text">{{ order.orderId }}</text>
|
||
<text class="copy" @click.stop="copyOrderId(order.orderId)">复制</text>
|
||
</view>
|
||
<block v-if="order.listType != 't3'">
|
||
<view class="order-desc-row">
|
||
<text class="title">服务分类：</text>
|
||
<text class="text">{{ order.cate }}</text>
|
||
</view>
|
||
<view class="order-desc-row limit-line clamp-1">
|
||
<text class="title">需求内容：</text>
|
||
<text class="text">{{ order.content }}</text>
|
||
</view>
|
||
</block>
|
||
<view class="order-desc-row">
|
||
<text class="title">下单时间：</text>
|
||
<text class="text">{{ order.createTime }}</text>
|
||
</view>
|
||
<view class="order-desc-row">
|
||
<text class="title">服务时间：</text>
|
||
<text class="text">{{ order.serviceTime }}</text>
|
||
</view>
|
||
<!-- 购买订单|报/议价订单|货运订单 可展示师傅信息 -->
|
||
<block v-if="order.listType == 't1' || order.listType == 't2' || order.listType == 't3'">
|
||
<view class="order-worker-box">
|
||
<!-- 报价订单未选择师傅 展示师傅列表 -->
|
||
<block v-if="order.listType == 't2' && order.orderType == 2 && order.state == 0">
|
||
<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.avatar" mode="aspectFill" />
|
||
<text class="price">¥ {{ item.price }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="more-worker">
|
||
<text class="worker-num">{{ order.workerList.length }}位师傅已报价</text>
|
||
<text class="iconfont icon-jinru"></text>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<!-- 购买订单|报/议价订单已选择师傅 展示师傅简介 -->
|
||
<block
|
||
v-if="
|
||
(order.listType == 't1' && order.state != 0 && order.state != 1) ||
|
||
(order.listType == 't2' && order.state != 0) ||
|
||
(order.listType == 't3' && order.state != 0 && order.state != 1)
|
||
"
|
||
>
|
||
<view class="worker-item-box">
|
||
<worker-item :data="order.worker" :showPrice="order.listType != 't3'" />
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<view class="order-footer">
|
||
<slot></slot>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import WorkerItem from "@/components/worker/item";
|
||
export default {
|
||
name: "component-order-item",
|
||
data() {
|
||
return {
|
||
stateText: "",
|
||
stateTextColor: "",
|
||
stateDesc: "",
|
||
previewWorkerList: [],
|
||
};
|
||
},
|
||
props: {
|
||
order: {
|
||
type: Object,
|
||
default: () => {},
|
||
},
|
||
},
|
||
components: {
|
||
WorkerItem,
|
||
},
|
||
async created() {
|
||
if (this.$utils.isType(this.order.workerList, "array")) {
|
||
for (let index = 0; index < 3; index++) {
|
||
if (this.order.workerList[index]) {
|
||
this.previewWorkerList.push(this.order.workerList[index]);
|
||
} else break;
|
||
}
|
||
}
|
||
let [stateText, stateDesc, stateTextColor] = await this.$models.order.stateText(
|
||
this.order.listType,
|
||
this.order.orderType,
|
||
this.order.state
|
||
);
|
||
this.stateText = stateText;
|
||
this.stateTextColor = stateTextColor || "#000000";
|
||
},
|
||
mounted() {},
|
||
destroyed() {},
|
||
methods: {
|
||
copyOrderId(orderId) {
|
||
const that = this;
|
||
uni.setClipboardData({
|
||
data: orderId,
|
||
success(result) {
|
||
that.$utils.toast("内容已复制");
|
||
},
|
||
fail(error) {
|
||
that.$utils.toast("复制失败");
|
||
},
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.component-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;
|
||
}
|
||
.order-desc-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;
|
||
}
|
||
}
|
||
.order-desc-row:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
.order-worker-box {
|
||
width: 100%;
|
||
}
|
||
.worker-item-box {
|
||
width: 100%;
|
||
padding: 20rpx 0 10rpx 0;
|
||
}
|
||
.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;
|
||
}
|
||
.worker-num {
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
color: #666666;
|
||
}
|
||
.iconfont {
|
||
font-size: 32rpx;
|
||
color: #a7a7a7;
|
||
}
|
||
}
|
||
.order-footer {
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style> |