248 lines
6.3 KiB
Vue
248 lines
6.3 KiB
Vue
|
<template>
|
|||
|
|
<view @click="onOrderDetail(order.id)" :id="`zp-id-${order.zp_index}`" :key="order.zp_index" v-for="(order,index) in orderList" class="order-card">
|
|||
|
|
<view class="no-box">
|
|||
|
|
<view class="order-no">
|
|||
|
|
<u-icon name="order"></u-icon>
|
|||
|
|
<text class="number">{{ order.no }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="status">{{order.statusStr}}</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="main-box" v-for="item in order.items" :key="item.id">
|
|||
|
|
<view>
|
|||
|
|
<u-avatar size="100" :src="order.avatar"></u-avatar>
|
|||
|
|
</view>
|
|||
|
|
<view class="right-box">
|
|||
|
|
<view class="nickname-box">
|
|||
|
|
<view class="nickname">{{order.nickname}}</view>
|
|||
|
|
<view class="info">订单时间：{{order.createTimeStr}}</view>
|
|||
|
|
<view class="info">服务内容：{{item.spuName}} {{item.properties.map((property) => property.valueName).join(' ')}}×{{item.count}}</view>
|
|||
|
|
<view class="info" v-if="order.sex == '1'">性别要求：女生</view>
|
|||
|
|
<view class="info" v-if="order.sex == '0'">性别要求：男生</view>
|
|||
|
|
<view class="info" v-if="userInfo.id == order.workerUserId">
|
|||
|
|
<text class="weixin">微信：{{order.weixin}}</text>
|
|||
|
|
<view @tap.stop="onCopy(order.weixin)">
|
|||
|
|
<u-icon name="outline-copy" custom-prefix="iconfont"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="info">
|
|||
|
|
<text>剩余时间：</text>
|
|||
|
|
<view v-if="order.receiveTime">
|
|||
|
|
<text v-if="order.end">已结束</text>
|
|||
|
|
<view v-else>
|
|||
|
|
<u-count-down :timestamp="order.timestamp" format="DD天HH时mm分ss秒" @end="order.end = true"></u-count-down>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<text v-else>暂未接单</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="info" v-if="order.userRemark">备注：{{order.userRemark}}</view>
|
|||
|
|
<view class="info" v-if="order.cancelReason">取消原因：{{order.cancelReason}}</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="price-box">
|
|||
|
|
<text class="price">{{order.brokeragePrice}}</text>
|
|||
|
|
<text>/钻</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="bottom-box">
|
|||
|
|
<view class="btn-box">
|
|||
|
|
<view v-if="order.buttons.includes('other')" class="btn">也被其它店员抢单</view>
|
|||
|
|
<view v-if="order.buttons.includes('detail')" @tap.stop="onOrderDetail(order.id)" class="btn">查看详情</view>
|
|||
|
|
<view v-if="order.buttons.includes('unpay')" @tap.stop="onOrderCancel(order.id, order.items[0].id)" class="btn">取消接单</view>
|
|||
|
|
<view v-if="order.buttons.includes('cancel')" @tap.stop="onCancel(order.id)" class="btn">取消订单</view>
|
|||
|
|
<view v-if="order.buttons.includes('invite')" @tap.stop="onBuy(order.items[0].spuId)" class="btn active">邀请好友抢单</view>
|
|||
|
|
<view v-if="order.buttons.includes('invite2')" @tap.stop="onBuy(order.items[0].spuId)" class="btn active">邀请评价</view>
|
|||
|
|
<view v-if="order.buttons.includes('agree')" @tap.stop="onOrderConfirm(order)" class="btn active">立即抢单</view>
|
|||
|
|
<view v-if="order.buttons.includes('confirm')" @tap.stop="onConfirm(order)" class="btn active">结束服务</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import sheep from '@/sheep';
|
|||
|
|
import dayjs from 'dayjs';
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
virtualList: {
|
|||
|
|
type: Array,
|
|||
|
|
default: [],
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
emits: ["onCancel", "onConfirm", "onOrderConfirm"],
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
userInfo: {
|
|||
|
|
get() {
|
|||
|
|
return sheep.$store('user').userInfo;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
orderList() {
|
|||
|
|
this.virtualList.forEach((order) => order.createTimeStr = sheep.$helper.timeFormat(order.createTime, 'yyyy-mm-dd hh:MM:ss'));
|
|||
|
|
this.virtualList.forEach((order) => order.timestamp = order.receiveTime ? sheep.$helper.parseTimeData(order.receiveTime) : 0);
|
|||
|
|
return this.virtualList;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 订单详情
|
|||
|
|
onOrderDetail(id) {
|
|||
|
|
sheep.$router.go('/pages/order/blind/detail', {
|
|||
|
|
id,
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
onCancel(orderId) {
|
|||
|
|
this.$emit('onCancel', orderId);
|
|||
|
|
},
|
|||
|
|
onBuy(id) {
|
|||
|
|
sheep.$router.go('/pages/clerk/detail/index', {
|
|||
|
|
id,
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 评价
|
|||
|
|
onComment(id) {
|
|||
|
|
sheep.$router.go('/pages/goods/comment/worker/add', {
|
|||
|
|
id,
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 继续支付
|
|||
|
|
onPay(payOrderId) {
|
|||
|
|
sheep.$router.go('/pages/pay/worker/index', {
|
|||
|
|
id: payOrderId,
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
onOrderCancel(orderId, itemId) {
|
|||
|
|
sheep.$router.go('/pages/order/worker/aftersale/apply', {
|
|||
|
|
orderId: orderId,
|
|||
|
|
itemId: itemId
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
onOrderConfirm(order) {
|
|||
|
|
this.$emit('onOrderConfirm', order);
|
|||
|
|
},
|
|||
|
|
// 复制
|
|||
|
|
onCopy(text) {
|
|||
|
|
sheep.$helper.copyText(text);
|
|||
|
|
},
|
|||
|
|
// 确认收货
|
|||
|
|
onConfirm(order) {
|
|||
|
|
this.$emit('onConfirm', order);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.order-card {
|
|||
|
|
padding: 10px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
background-color: #fff;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
.no-box {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
flex: 1;
|
|||
|
|
padding-bottom: 10px;
|
|||
|
|
color: rgb(100, 101, 102);
|
|||
|
|
|
|||
|
|
.order-no {
|
|||
|
|
|
|||
|
|
.number {
|
|||
|
|
margin-left: 5px;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main-box {
|
|||
|
|
display: flex;
|
|||
|
|
padding: 10px 0;
|
|||
|
|
border-top: 1px solid #fbf0f0;
|
|||
|
|
border-bottom: 1px solid #fbf0f0;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
|
|||
|
|
.right-box {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
flex: 1;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
|
|||
|
|
.nickname {
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: rgb(100, 101, 102);
|
|||
|
|
line-height: 22rpx;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.weixin {
|
|||
|
|
margin-right: 5px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.price-box {
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: rgb(100, 101, 102);
|
|||
|
|
|
|||
|
|
.price {
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
font-weight: bold;
|
|||
|
|
color: var(--ui-BG-Main);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bottom-box {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
|
|||
|
|
.btn-box {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.btn {
|
|||
|
|
background-color: #ddd;
|
|||
|
|
color: rgb(100, 101, 102);
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
border-radius: 40px;
|
|||
|
|
padding: 5px 10px;
|
|||
|
|
margin-left: 10px;
|
|||
|
|
min-width: 140rpx;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.active {
|
|||
|
|
background-color: var(--ui-BG-Main);
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|