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.
425 lines
8.7 KiB
425 lines
8.7 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">
|
|
¥ 45
|
|
</view>
|
|
</view>
|
|
X
|
|
<view>
|
|
您的分成比例
|
|
<view class="vertically_center text1">
|
|
20%
|
|
</view>
|
|
</view>
|
|
=
|
|
<view>
|
|
本单酬劳
|
|
<view class="vertically_center text1">
|
|
¥ 9
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="top_bottom">
|
|
订单为系统派发，请确认订单信息后再抢单
|
|
</view>
|
|
<view class="top-button" :style="{ borderRadius: '27rpx' }">
|
|
系统派单
|
|
</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 class="">
|
|
12-0，12-08
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="time">
|
|
<view>
|
|
服务地址
|
|
</view>
|
|
<view class="">
|
|
{{ orderDetail.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.appletPetList" :key="pet.id" class="pet_information box-size">
|
|
<view class="flex pet_item box-size">
|
|
<view class="img" :style="{borderRadius:'100rpx'}">
|
|
<image :src="pet.headImage" mode=""></image>
|
|
</view>
|
|
<view class="">
|
|
<view class="flex name">
|
|
<view class="name_text">
|
|
{{ pet.nickName }}
|
|
</view>
|
|
<image src="" mode=""></image>
|
|
</view>
|
|
{{ pet.type }}
|
|
</view>
|
|
</view>
|
|
<view class="pet- level">
|
|
12-14
|
|
<text>专业喂养</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.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>
|
|
fe34521532513256
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="horizontal_distribution text3">
|
|
<view>
|
|
下单时间：
|
|
</view>
|
|
<view>
|
|
{{ orderDetail.createTime }}
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="horizontal_distribution text3">
|
|
<view>
|
|
支付时间：
|
|
</view>
|
|
<view>
|
|
{{ orderDetail.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">
|
|
共两天:12-09,01-09
|
|
</view>
|
|
</view>
|
|
<view class="ok">
|
|
<view class="btn">
|
|
点击确定
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="confirmation-item">
|
|
<view class="confirmation-base">
|
|
<view class="title">
|
|
服务地址
|
|
</view>
|
|
<view class="desc">
|
|
xxx省xx市
|
|
</view>
|
|
</view>
|
|
<view class="ok">
|
|
<view class="btn">
|
|
点击确定
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="confirmation-item">
|
|
<view class="confirmation-base">
|
|
<view class="title">
|
|
服务宠物
|
|
</view>
|
|
<view class="desc">
|
|
<view class="">
|
|
中华田园犬
|
|
</view>
|
|
<view class="">
|
|
中华田园犬2
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="ok">
|
|
<view class="btn">
|
|
点击确定
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="handbook">
|
|
接单即接受
|
|
<text class="text">《伴宠师手册》</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="{padding:'40rpx 20rpx',width:'80%'}">
|
|
<view>
|
|
<view class="success-desc">
|
|
请立即添加服务顾问，并提供订单编码
|
|
</view>
|
|
<view 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'}"></up-input>
|
|
</view>
|
|
<up-button @click="noneOrder" color="#FFBF60" text="复制订单编号" shape="circle"></up-button>
|
|
</view>
|
|
</up-popup>
|
|
</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"
|
|
|
|
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 userInfo = computed(() => {
|
|
return store.getters.userInfo
|
|
})
|
|
|
|
// 抢单
|
|
const rushToBuyAnOrder = () => {
|
|
open()
|
|
}
|
|
|
|
// 查看宠物信息
|
|
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;
|
|
};
|
|
|
|
const conform = async () => {
|
|
close();
|
|
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
|
|
});
|
|
if (response.code == 200 && response.data) {
|
|
orderDetail.value = response.data;
|
|
}
|
|
}
|
|
</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;
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
</style>
|