<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="">
|
|
重庆市南岸区长嘉汇18栋9-2
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="service box-size" :style="{ borderRadius: '8rpx' }">
|
|
<view class="horizontal_distribution service_top">
|
|
<view class="form-title">
|
|
服务内容和酬劳
|
|
</view>
|
|
<view class="text2 flex">
|
|
查看宠物信息
|
|
<u-icon name="arrow-right-double" color="#F5F5F5" size="10"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="pet_information box-size">
|
|
<view class="flex pet_item box-size">
|
|
<view class="img" :style="{borderRadius:'100rpx'}">
|
|
<image
|
|
src="https://k.sinaimg.cn/n/sinakd20118/751/w690h861/20240406/8eda-d4d56e3bface126bd5806ff981a09314.jpg/w700d1q75cms.jpg"
|
|
mode=""></image>
|
|
</view>
|
|
<view class="">
|
|
<view class="flex name">
|
|
<view class="name_text">
|
|
小咪
|
|
</view>
|
|
<image src="" mode=""></image>
|
|
</view>
|
|
银渐层短毛猫(小型猫)
|
|
</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">
|
|
¥ 455
|
|
</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>
|
|
2024-12-45 12:32:41
|
|
</view>
|
|
</view>
|
|
<view class="line1">
|
|
</view>
|
|
<view class="horizontal_distribution text3">
|
|
<view>
|
|
支付时间:
|
|
</view>
|
|
<view>
|
|
2024-12-45 12:32:41
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="bottom_button level" :style="{ borderRadius: '41rpx' }">
|
|
立即抢单
|
|
</view>
|
|
</view>
|
|
<!-- <view>
|
|
<u-popup :show="show" mode="center" @close="close" @open="open">
|
|
<view class="success">
|
|
<view class="pop_top">
|
|
</view>
|
|
<u--text text="请立即添加服务顾问,并提供订单编码" size="12rpx" color="#707070" align="center"></u--text>
|
|
<view class="pop_image">
|
|
<u--image src="https://xxx.com/album/1.jpg" shape="square" width="100rpx"
|
|
height="100rpx"></u--image>
|
|
</view>
|
|
<view class="code" :style="{ borderRadius: '6rpx' }">
|
|
|
|
</view>
|
|
<view class="copy" :style="{ borderRadius: '40rpx' }">
|
|
<u--text text="复制订单编号" size="12rpx" color="#FFFFFF" align="center"
|
|
line-height="50rpx"></u--text>
|
|
</view>
|
|
<view class="cancel" :style="{ borderRadius: '50rpx' }">
|
|
<u-icon name="close-circle" color="#707070" size="40"></u-icon>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<u-button @click="show = true">打开</u-button>
|
|
</view> -->
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
show: false
|
|
}
|
|
},
|
|
methods: {
|
|
open() {
|
|
// console.log('open');
|
|
},
|
|
close() {
|
|
this.show = false
|
|
// console.log('close');
|
|
}
|
|
}
|
|
}
|
|
|
|
// export default {
|
|
// data() {
|
|
// return {
|
|
// value: ''
|
|
// }
|
|
// },
|
|
// methods: {
|
|
// change(e) {
|
|
// console.log('change', e);
|
|
// }
|
|
// }
|
|
// }
|
|
</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;
|
|
}
|
|
}
|
|
</style>
|