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> |