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.
343 lines
8.7 KiB
343 lines
8.7 KiB
<template>
|
|
<!-- <div>订单详情</div> -->
|
|
<view class="box">
|
|
<view class="top" :style="{ borderRadius: '8px' }">
|
|
<view class="money" :style="{ borderRadius: '8px' }">
|
|
<view class="top_left">
|
|
<view class="">
|
|
<u--text text="客户实际支付" size="10px"></u--text>
|
|
<u--text text="¥ 45" color="#FE4E41" size="15px" lineHeight="21px"></u--text>
|
|
</view>
|
|
<u-line color="#FFBF60" direction="col" length="30px"></u-line>
|
|
<view class="">
|
|
<u--text text="分成比例" size="10px"></u--text>
|
|
<u--text text="20%" color="#FE4E41" size="15px" lineHeight="21px"></u--text>
|
|
</view>
|
|
<u-line color="#FFBF60" direction="col" length="30px"></u-line>
|
|
<view class="">
|
|
<u--text text="本单酬劳" size="10px"></u--text>
|
|
<u--text text="¥ 9" color="#FE4E41" size="15px" lineHeight="21px"></u--text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="top_bottom">
|
|
<u--text text="订单为系统派发，请确认订单信息后再抢单" size="10px" color="#707070"></u--text>
|
|
</view>
|
|
<view class="top-button" :style="{ borderRadius: '27px' }">
|
|
<u--text text=" 系统派单" size="10px" color="#FFBF60" align="center" line-height="28px"></u--text>
|
|
</view>
|
|
</view>
|
|
<view class="information" :style="{ borderRadius: '8px' }">
|
|
<view class="text1">
|
|
<u-line color="#FFBF60" direction="col" length="15px" bold></u-line>
|
|
<u--text text="基本信息" size="15px" color="#000000"></u--text>
|
|
</view>
|
|
<u-divider text="" :hairline="true" lineColor="#F5F5F5"></u-divider>
|
|
<view class="time">
|
|
<u--text text="服务日期" size="13px" color="#000000"></u--text>
|
|
<u--text text="12-0，12-08" size="13px" color="#000000"></u--text>
|
|
</view>
|
|
<u-divider text="" :hairline="true" lineColor="#F5F5F5"></u-divider>
|
|
<view class="time">
|
|
<u--text text="服务地址" size="13px" color="#000000"></u--text>
|
|
<u--text text="湖南省长沙市雨花区人民东路" size="13px" color="#000000"></u--text>
|
|
</view>
|
|
</view>
|
|
<view class="service" :style="{ borderRadius: '8px' }">
|
|
<view class="horizontal_distribution">
|
|
<view class="text1">
|
|
<u-line color="#FFBF60" direction="col" length="15px"></u-line>
|
|
<u--text text="服务内容和酬劳" size="15px" color="#000000"></u--text>
|
|
</view>
|
|
<view class="text2">
|
|
<u--text text="查看宠物信息" size="10px" color="#F5F5F5"></u--text>
|
|
<u-icon name="arrow-right-double" color="#F5F5F5" size="10"></u-icon>
|
|
</view>
|
|
</view>
|
|
<u-divider text="" :hairline="true" lineColor="#F5F5F5"></u-divider>
|
|
<view class="pet_information">
|
|
<u--image
|
|
src="https://k.sinaimg.cn/n/sinakd20118/751/w690h861/20240406/8eda-d4d56e3bface126bd5806ff981a09314.jpg/w700d1q75cms.jpg"
|
|
shape="circle" width="50px" height="50px"></u--image>
|
|
<view class="">
|
|
<view class="flex">
|
|
<u--text text="小咪" size="14px" color="#000000"></u--text>
|
|
<u-icon name="woman" color="#F77293" size="10"></u-icon>
|
|
</view>
|
|
<u--text text="中华田园犬（小型犬）" size="14px" color="#707070"></u--text>
|
|
</view>
|
|
</view>
|
|
<u-divider text="" :hairline="true" lineColor="#F5F5F5"></u-divider>
|
|
<view class="flex">
|
|
<u--text text="12-14" size="14px" color="#707070"></u--text>
|
|
<u--text text="专业喂养" size="14px" color="#000000"></u--text>
|
|
<u--text text="上门1次" size="14px" color="#707070"></u--text>
|
|
</view>
|
|
<u-divider text="" :hairline="true" lineColor="#F5F5F5"></u-divider>
|
|
<view class="horizontal_distribution money_total">
|
|
<view>
|
|
<u--text text="合计" size="14px" color="#707070"></u--text>
|
|
</view>
|
|
<view>
|
|
<u--text text="¥ 45" size="14px" color="#FE4E41"></u--text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="other_information">
|
|
<view class="text1">
|
|
<u-line color="#FFBF60" direction="col" length="15px"></u-line>
|
|
<u--text text="其他信息" size="15px" color="#000000"></u--text>
|
|
</view>
|
|
<u-divider text="" :hairline="true" lineColor="#F5F5F5"></u-divider>
|
|
<view class="horizontal_distribution">
|
|
<view>
|
|
<u--text text="订单编号：" size="14px" color="#000000"></u--text>
|
|
</view>
|
|
<view>
|
|
<u--text text="fe34521532513256" size="14px" color="#000000"></u--text>
|
|
</view>
|
|
</view>
|
|
<u-divider text="" :hairline="true" lineColor="#F5F5F5"></u-divider>
|
|
<view class="horizontal_distribution">
|
|
<view>
|
|
<u--text text="下单时间：" size="14px" color="#000000"></u--text>
|
|
</view>
|
|
<view>
|
|
<u--text text="2024-12-45 12:32:41" size="14px" color="#000000"></u--text>
|
|
</view>
|
|
</view>
|
|
<u-divider text="" :hairline="true" lineColor="#F5F5F5"></u-divider>
|
|
<view class="horizontal_distribution">
|
|
<view>
|
|
<u--text text="支付时间：" size="14px" color="#000000"></u--text>
|
|
</view>
|
|
<view>
|
|
<u--text text="2024-12-45 12:32:41" size="14px" color="#000000"></u--text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom">
|
|
<view class="bottom_button" :style="{ borderRadius: '41px' }">
|
|
<u--text text="立即抢单" size="15px" color="#FFFFFF" align="center" line-height="60px"></u--text>
|
|
</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="12px" color="#707070" align="center"></u--text>
|
|
<view class="pop_image">
|
|
<u--image src="https://xxx.com/album/1.jpg" shape="square" width="100px"
|
|
height="100px"></u--image>
|
|
</view>
|
|
<view class="code" :style="{ borderRadius: '6px' }">
|
|
<!-- <u--input type="number" border="surround" v-model="value" @change="change"></u--input> -->
|
|
</view>
|
|
<view class="copy" :style="{ borderRadius: '40px' }">
|
|
<u--text text="复制订单编号" size="12px" color="#FFFFFF" align="center" line-height="50px"></u--text>
|
|
</view>
|
|
<view class="cancel" :style="{ borderRadius: '50px' }">
|
|
<u-icon name="close-circle" color="#707070" size="40"></u-icon>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
<u-button @click="show = true">打开</u-button>
|
|
</view>
|
|
</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 lang="scss">
|
|
.box {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #F5F5F5;
|
|
}
|
|
|
|
.top {
|
|
width: 350px;
|
|
height: 100px;
|
|
background-color: #FFFFFF;
|
|
margin: 14px 20px 0 20px;
|
|
}
|
|
|
|
.money {
|
|
width: 250px;
|
|
height: 80px;
|
|
}
|
|
|
|
.top_left {
|
|
width: 220px;
|
|
height: 26px;
|
|
display: flex;
|
|
padding: 25px 0 0 20px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.top_bottom {
|
|
width: 200px;
|
|
height: 26px;
|
|
// background-color: aqua;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.top-button {
|
|
width: 66px;
|
|
height: 28px;
|
|
border: 1px solid #FFBF60;
|
|
position: absolute;
|
|
top: 30px;
|
|
right: 30px;
|
|
}
|
|
|
|
.information {
|
|
width: 350px;
|
|
height: 130px;
|
|
background-color: #FFFFFF;
|
|
margin: 10px 20px 0 20px;
|
|
padding: 25px;
|
|
}
|
|
|
|
.text1 {
|
|
width: 120px;
|
|
height: 20px;
|
|
display: flex;
|
|
}
|
|
|
|
.time {
|
|
width: 300px;
|
|
height: 30px;
|
|
// background-color: gray;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.service {
|
|
width: 350px;
|
|
height: 190px;
|
|
background-color: #FFFFFF;
|
|
margin: 10px 20px 0 20px;
|
|
padding: 27px;
|
|
}
|
|
|
|
.horizontal_distribution {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.text2 {
|
|
width: 100px;
|
|
height: 20px;
|
|
display: flex;
|
|
}
|
|
|
|
.pet_information {
|
|
width: 300px;
|
|
height: 50px;
|
|
// background-color: red;
|
|
display: flex;
|
|
}
|
|
|
|
.money_total {
|
|
width: 300px;
|
|
}
|
|
|
|
.other_information {
|
|
width: 350px;
|
|
height: 190px;
|
|
background-color: #FFFFFF;
|
|
margin: 10px 20px 0 20px;
|
|
padding: 27px 0 0 27px;
|
|
}
|
|
|
|
.bottom {
|
|
width: 100%;
|
|
height: 60px;
|
|
background-color: #FFFFFF;
|
|
margin-top: 20px;
|
|
padding: 20px 50px;
|
|
}
|
|
|
|
.bottom_button {
|
|
width: 300px;
|
|
height: 60px;
|
|
background-color: #FFBF60;
|
|
}
|
|
|
|
.success {
|
|
width: 310px;
|
|
height: 370px;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.pop_top {
|
|
width: 310px;
|
|
height: 100px;
|
|
background-image: linear-gradient(to bottom, #FFBF60, #FFD494)
|
|
}
|
|
|
|
.code {
|
|
width: 250px;
|
|
height: 50px;
|
|
background-color: #F3F3F3;
|
|
margin: 30px 0 0 30px;
|
|
}
|
|
|
|
.pop_image {
|
|
display: grid;
|
|
place-items: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.copy {
|
|
width: 260px;
|
|
height: 50px;
|
|
background-color: #FFBF60;
|
|
margin: 30px 0 0 25px;
|
|
}
|
|
|
|
.cancel {
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: #FFFFFF;
|
|
position: absolute;
|
|
top: -20px;
|
|
right: -17px;
|
|
}
|
|
</style>
|