You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
576 lines
14 KiB
576 lines
14 KiB
<template>
|
|
<!-- <div>订单详情</div> -->
|
|
<view class="box box-size">
|
|
<view class="top box-size" :style="{ borderRadius: '16rpx' }">
|
|
<view class="top_left box-size">
|
|
<view>
|
|
本单客户支付金额
|
|
<view class="vertically_center text1">
|
|
¥ {{ orderDetail.order?.h5OrderVO?.payAmount }}
|
|
</view>
|
|
</view>
|
|
X
|
|
<view>
|
|
您的分成比例
|
|
<view class="vertically_center text1">
|
|
<!-- 20% -->
|
|
{{ orderDetail.pet_payment_bcs[userInfo.userBcsRole - 1].paramValueText }}
|
|
</view>
|
|
</view>
|
|
=
|
|
<view>
|
|
本单酬劳
|
|
<view class="vertically_center text1">
|
|
¥ {{ orderDetail.order.orderGive}}
|
|
<!-- ¥ {{ orderDetail.pet_payment_bcs[userInfo.userBcsRole - 1].paramValueNo * orderDetail.order?.h5OrderVO?.payAmount }} -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="top_bottom">
|
|
<!-- 订单为系统派发，请确认订单信息后再抢单 -->
|
|
{{ typeInfo[orderDetail.order.type].content }}
|
|
</view>
|
|
<view class="top-button" :style="{ borderRadius: '27rpx' }">
|
|
{{ typeInfo[orderDetail.order.type].title }}
|
|
</view>
|
|
</view>
|
|
<view class="information box-size" :style="{ borderRadius: '16rpx' }">
|
|
<view class="form-title">
|
|
基本信息
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="time">
|
|
<view>
|
|
服务日期
|
|
</view>
|
|
<view v-if="orderDetail.order" class="time-content">
|
|
{{ getTextList().join('，') }}
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="time">
|
|
<view>
|
|
服务地址
|
|
</view>
|
|
<view class="time-content">
|
|
{{ orderDetail.order?.address }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="service box-size" :style="{ borderRadius: '8rpx' }">
|
|
<view class="horizontal_distribution service_top">
|
|
<view class="form-title">
|
|
服务内容和酬劳
|
|
</view>
|
|
<view @click="petInfo" class="text2 flex">
|
|
查看宠物信息
|
|
<u-icon name="arrow-right-double" color="#F5F5F5" size="10"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view v-for="pet in orderDetail.order.h5OrderVO.petVOList"
|
|
@click="toDetail(pet.id)"
|
|
:key="pet.id" class="pet_information box-size">
|
|
<view class="flex pet_item box-size">
|
|
<view class="img" :style="{borderRadius:'100rpx'}">
|
|
<image :src="pet.photo" mode=""></image>
|
|
</view>
|
|
<view >
|
|
<view class="flex name">
|
|
<view class="name_text">
|
|
{{ pet.breed }}
|
|
</view>
|
|
<image src="" mode=""></image>
|
|
</view>
|
|
{{ pet.type }}{{ pet.bodyType }}
|
|
</view>
|
|
</view>
|
|
<view class="pet-level" v-for="(it, i) in pet.productNameText">
|
|
{{ it.time }}
|
|
<text>{{ it.name }}</text>
|
|
上门1次
|
|
</view>
|
|
<!-- <view class="pet-level">
|
|
12-15
|
|
<text>专业喂养</text>
|
|
上门1次
|
|
</view> -->
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="flex money_total">
|
|
<view>
|
|
合计
|
|
</view>
|
|
<view class="money_text">
|
|
¥ {{ orderDetail.order.price }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="other_information box-size">
|
|
<view class="form-title">
|
|
其他信息
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="horizontal_distribution text3">
|
|
<view>
|
|
订单编号：
|
|
</view>
|
|
<view>
|
|
{{ orderDetail.order.orderSn }}
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="horizontal_distribution text3">
|
|
<view>
|
|
下单时间：
|
|
</view>
|
|
<view>
|
|
{{ orderDetail.order?.createTime }}
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="horizontal_distribution text3">
|
|
<view>
|
|
支付时间：
|
|
</view>
|
|
<view>
|
|
{{ orderDetail.order.payTime }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom">
|
|
<view @click="rushToBuyAnOrder" class="bottom_button level" :style="{ borderRadius: '41rpx' }">
|
|
立即抢单
|
|
</view>
|
|
</view>
|
|
|
|
<up-popup :show="showConfirmOrder" mode="bottom" @close="close" @open="open" :round="10" :closeable="true"
|
|
:safeAreaInsetBottom="false"
|
|
:customStyle="{padding:'60rpx 20rpx 40rpx 20rpx;position:relative;height:auto;background:#F6F5F8;'}">
|
|
<view>
|
|
<view style="position:absolute;top: 20rpx;left:0;text-align: center;width: 100%;">
|
|
订单信息
|
|
</view>
|
|
<view style="text-align: center;">
|
|
请全部确认后接单
|
|
</view>
|
|
<view class="order-confirmation">
|
|
<view class="confirmation-item">
|
|
<view class="confirmation-base">
|
|
<view class="title">
|
|
服务日期
|
|
</view>
|
|
<view class="desc">
|
|
共{{ getTextList().length }}天:{{ getTextList().join('，') }}
|
|
</view>
|
|
</view>
|
|
<view class="ok">
|
|
<view class="btn" @click="handleConfirm(0)" :class="{ 'btn-confirmed': confirmStatus[0] }">
|
|
{{ confirmStatus[0] ? '已确认' : '点击确定' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="confirmation-item">
|
|
<view class="confirmation-base">
|
|
<view class="title">
|
|
服务地址
|
|
</view>
|
|
<view class="desc">
|
|
{{ orderDetail.order.address }}
|
|
</view>
|
|
</view>
|
|
<view class="ok">
|
|
<view class="btn" @click="handleConfirm(1)" :class="{ 'btn-confirmed': confirmStatus[1] }">
|
|
{{ confirmStatus[1] ? '已确认' : '点击确定' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="confirmation-item">
|
|
<view class="confirmation-base">
|
|
<view class="title">
|
|
服务宠物
|
|
</view>
|
|
<view class="desc">
|
|
<view v-for="pet in orderDetail.order.h5OrderVO.petVOList" :key="pet.id">
|
|
{{ pet.breed }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="ok">
|
|
<view class="btn" @click="handleConfirm(2)" :class="{ 'btn-confirmed': confirmStatus[2] }">
|
|
{{ confirmStatus[2] ? '已确认' : '点击确定' }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="handbook">
|
|
接单即接受
|
|
<text class="text" @click="configPopupRef.open('pet_platform_introduction')">《伴宠师手册》</text>
|
|
</view>
|
|
<up-button @click="conform" color="#FFBF60" text="确定" shape="circle"></up-button>
|
|
</view>
|
|
</up-popup>
|
|
|
|
<!-- 抢单成功 -->
|
|
<up-popup :show="showOrderSuccess" mode="center" @close="orderSuccessClose" @open="orderSuccessOpen" :zIndex="999"
|
|
:round="10" :safeAreaInsetBottom="false" :customStyle="{ width:'80%' , 'background-color': 'transparent' }">
|
|
<view>
|
|
<image style="width: 100%;" :src="configList?.order_success?.paramValueImage" mode="widthFix"></image>
|
|
</view>
|
|
<view style="margin-top: -100%;padding: 40rpx;20rpx">
|
|
<view class="success-desc">
|
|
{{ configList?.order_success?.paramValueText || '请立即添加服务顾问，并提供订单编码' }}
|
|
</view>
|
|
<view style="position: relative;z-index: 999;" class="qr-code">
|
|
<image class="code-img" src="https://img.xjishu.com/img/zl/2018/6/30/1241359458913.gif"
|
|
mode="aspectFill"></image>
|
|
</view>
|
|
<view class="input">
|
|
<up-input placeholder="" border="none" v-model="value" disabled
|
|
:customStyle="{height:'60rpx','text-indent': '20rem', 'background-color': '#F3F3F3', position : 'relative','z-index' : '999' }"></up-input>
|
|
</view>
|
|
<view class="button-group">
|
|
<up-button @click="noneOrder" color="#FFBF60" text="复制订单编号" shape="circle"></up-button>
|
|
<up-button v-if="showSecondButton" @click="toMyOrder" color="#FFBF60" text="到我的订单查看" shape="circle" style="margin-top: 20rpx;"></up-button>
|
|
</view>
|
|
</view>
|
|
</up-popup>
|
|
<configPopup ref="configPopupRef" />
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
computed
|
|
} from 'vue'
|
|
import {
|
|
onLoad
|
|
} from '@dcloudio/uni-app'
|
|
import {
|
|
getByOrderId
|
|
} from "@/api/receivingHall/index.js"
|
|
import {
|
|
onShow
|
|
} from '@dcloudio/uni-app'
|
|
import order from '../../../api/order/order'
|
|
import {
|
|
startByOrderId
|
|
} from "@/api/receivingHall/index.js"
|
|
import {
|
|
useStore
|
|
} from "vuex"
|
|
|
|
import dayjs from "dayjs";
|
|
import configPopup from '@/components/configPopup.vue'
|
|
const configPopupRef = ref(null)
|
|
|
|
onLoad((options) => {
|
|
orderId.value = options.id || null;
|
|
});
|
|
|
|
onShow(() => {
|
|
getDetail();
|
|
})
|
|
|
|
const store = useStore();
|
|
const orderId = ref(null);
|
|
const orderDetail = ref({});
|
|
const showConfirmOrder = ref(false);
|
|
const showOrderSuccess = ref(false);
|
|
const value = ref("45619491656")
|
|
const petList = ref([])
|
|
const confirmStatus = ref([false, false, false]); // 添加确认状态数组，分别对应三个确认项
|
|
const showSecondButton = ref(false); // 控制第二个按钮的显示
|
|
const userInfo = computed(() => {
|
|
return store.getters.userInfo
|
|
})
|
|
const configList = computed(() => {
|
|
return store.getters.configList;
|
|
})
|
|
// 抢单
|
|
const rushToBuyAnOrder = () => {
|
|
open()
|
|
}
|
|
|
|
const typeInfo = [
|
|
{
|
|
title : '系统派单',
|
|
content : '订单为系统派发，请确认订单信息后再抢单',
|
|
},
|
|
{
|
|
title : '个人订单',
|
|
content : '订单为系统派发，请确认订单信息后再抢单',
|
|
},
|
|
{
|
|
title : '流失订单',
|
|
content : '订单为系统派发，请确认订单信息后再抢单',
|
|
},
|
|
]
|
|
|
|
// 查看宠物信息
|
|
const petInfo = () => {
|
|
uni.navigateTo({
|
|
url: "/otherPages/orderTakingManage/pet/index"
|
|
})
|
|
}
|
|
|
|
const open = () => {
|
|
showConfirmOrder.value = true;
|
|
}
|
|
|
|
const close = () => {
|
|
showConfirmOrder.value = false;
|
|
}
|
|
|
|
const orderSuccessClose = () => {
|
|
showOrderSuccess.value = false;
|
|
};
|
|
|
|
const orderSuccessOpen = () => {
|
|
showOrderSuccess.value = true;
|
|
// 重置按钮显示状态，初始只显示复制订单编号按钮
|
|
showSecondButton.value = false;
|
|
};
|
|
|
|
// 处理确认按钮点击事件
|
|
const handleConfirm = (index) => {
|
|
confirmStatus.value[index] = true;
|
|
}
|
|
|
|
const conform = async () => {
|
|
close();
|
|
// 重置确认状态
|
|
confirmStatus.value = [false, false, false];
|
|
let response = await startByOrderId({
|
|
id: orderId.value,
|
|
userId: userInfo.value.userId
|
|
})
|
|
if (response.code == 200 && response.data) {
|
|
uni.showToast({
|
|
title: '接单成功~',
|
|
icon: "none"
|
|
});
|
|
orderSuccessOpen();
|
|
}
|
|
}
|
|
|
|
const getDetail = async () => {
|
|
let response = await getByOrderId({
|
|
id: orderId.value,
|
|
userId: userInfo.value.userId,
|
|
});
|
|
if (response.code == 200 && response.data) {
|
|
orderDetail.value = response.data;
|
|
orderDetail.value.order.h5OrderVO.petVOList.forEach(pet => {
|
|
|
|
pet.productNameText = getProductNameText(pet.id, orderDetail.value.order.h5OrderVO.orderItemList,
|
|
orderDetail.value.order.h5OrderVO.orderServiceList)
|
|
})
|
|
}
|
|
}
|
|
|
|
function getOrderServiceText(petId, orderServiceList){
|
|
|
|
let YYYY = undefined
|
|
|
|
return orderServiceList
|
|
.filter(service => service.petId == petId)//过滤
|
|
.map(service => dayjs(service.serviceDate))//转成时间
|
|
.sort((a, b) => a.valueOf() - b.valueOf())//排序
|
|
.map((service, i) => {
|
|
// if(YYYY && YYYY.format('YYYY-MM') == service.format('YYYY-MM')){
|
|
// return service.format('DD')
|
|
// }
|
|
// if(YYYY && YYYY.format('YYYY') == service.format('YYYY')){
|
|
// return service.format('MM-DD')
|
|
// }
|
|
// YYYY = service
|
|
return service.format('MM-DD')
|
|
})
|
|
}
|
|
function getProductNameText(petId, productList, orderServiceList){
|
|
|
|
let orderService = orderServiceList.filter(service => service.petId == petId)
|
|
|
|
// return productList
|
|
// .filter(product => orderService.filter(service => service.id == product.orderServiceId).length > 0)
|
|
// .map(product => {
|
|
// return {
|
|
// time : dayjs(orderService.filter(service => service.id == product.orderServiceId)
|
|
// .serviceDate).format('MM-DD'),
|
|
// name : product.productName,
|
|
// }
|
|
// })
|
|
|
|
return orderService.map(item => {
|
|
|
|
let name = ''
|
|
|
|
productList.forEach(product => {
|
|
if(item.id == product.orderServiceId){
|
|
name = product.productName
|
|
}
|
|
})
|
|
|
|
return {
|
|
time : dayjs(item.serviceDate).format('MM-DD'),
|
|
name,
|
|
}
|
|
})
|
|
}
|
|
|
|
function getTextList(){
|
|
return orderDetail.value.order?.h5OrderVO
|
|
.orderServiceList.map(item =>
|
|
dayjs(item.serviceDate).format('MM-DD'))
|
|
}
|
|
|
|
const toDetail = (id) => {
|
|
uni.navigateTo({
|
|
url: `/otherPages/orderTakingManage/pet/detail?id=${id}`
|
|
})
|
|
}
|
|
|
|
// 复制订单编号
|
|
const noneOrder = () => {
|
|
uni.setClipboardData({
|
|
data: orderDetail.value.order.orderSn,
|
|
success: function() {
|
|
uni.showToast({
|
|
title: '复制成功',
|
|
icon: 'none'
|
|
});
|
|
// 点击复制按钮后显示第二个按钮
|
|
showSecondButton.value = true;
|
|
}
|
|
});
|
|
}
|
|
|
|
// 跳转到我的订单页面
|
|
const toMyOrder = () => {
|
|
orderSuccessClose();
|
|
uni.navigateTo({
|
|
url: '/pages/myOrdersManage/index'
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "index";
|
|
|
|
.line1 {
|
|
position: relative;
|
|
margin: 10rpx 0 20rpx 0;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
top: 10rpx;
|
|
left: -10rpx;
|
|
content: "";
|
|
width: 690rpx;
|
|
height: 0.5rpx;
|
|
background-color: #EFEFEF;
|
|
// background-color: red;
|
|
}
|
|
}
|
|
|
|
.time-content {
|
|
max-height: 120rpx;
|
|
overflow-y: auto;
|
|
word-break: break-word;
|
|
line-height: 1.5;
|
|
padding: 4rpx 0;
|
|
}
|
|
|
|
.order-confirmation {
|
|
.confirmation-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: white;
|
|
padding: 20rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
margin: 20rpx 0rpx;
|
|
|
|
.confirmation-base {
|
|
width: 75%;
|
|
|
|
.title {
|
|
font-size: 34rpx;
|
|
}
|
|
|
|
.desc {
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.ok {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 25%;
|
|
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #FFBF60;
|
|
color: white;
|
|
width: 100%;
|
|
height: 60rpx;
|
|
border-radius: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.handbook {
|
|
color: #999999;
|
|
margin: 10rpx 0rpx;
|
|
|
|
.text {
|
|
color: #FFBF60;
|
|
}
|
|
}
|
|
|
|
.success-desc {
|
|
text-align: center;
|
|
color: #787878;
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.qr-code {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 40rpx 0rpx;
|
|
|
|
.code-img {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
}
|
|
}
|
|
|
|
.input {
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.btn-confirmed {
|
|
background: #CCCCCC !important; /* 灰色背景 */
|
|
}
|
|
</style>
|