猫妈狗爸伴宠师小程序前端代码
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.
 
 
 
 

227 lines
4.9 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-012-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">
¥&nbsp;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>