150 lines
4.2 KiB
Vue
150 lines
4.2 KiB
Vue
<template>
|
||
<view class="ctr">
|
||
<view class="price-ctr">
|
||
<view class="price flex-c">平台已收款</view>
|
||
<view class="desc flex-c">服务价格</view>
|
||
</view>
|
||
<view class="info">
|
||
<view class="item-row flex-sb line-after">
|
||
<view class="title flex-l">当前状态</view>
|
||
<view class="value flex-r order-status">
|
||
<text>待接单</text>
|
||
</view>
|
||
</view>
|
||
<view class="item-row flex-sb line-after">
|
||
<view class="title flex-l">服务类型</view>
|
||
<view class="value flex-r">
|
||
<text>日常保洁</text>
|
||
</view>
|
||
</view>
|
||
<view class="item-row flex-sb line-after">
|
||
<view class="title flex-l">客户姓名</view>
|
||
<view class="value flex-r">
|
||
<text>倪运昊</text>
|
||
</view>
|
||
</view>
|
||
<view class="item-row flex-sb">
|
||
<view class="title flex-l">客户电话</view>
|
||
<view class="value flex-r value-theme">
|
||
<me-icon class="icon" type="icon-call" color="var(--themeColor)" size="40rpx"></me-icon>
|
||
<text>18628195903</text>
|
||
</view>
|
||
</view>
|
||
<view class="item-row flex-sb line-after">
|
||
<view class="title flex-l">预约上门时间</view>
|
||
<view class="value flex-r">
|
||
<text>2025年03月22日21:01</text>
|
||
</view>
|
||
</view>
|
||
<view class="item-multi-line line-after">
|
||
<view class="title flex-l">客户地址</view>
|
||
<view class="value flex-l">浙江省瑞安市迎宾路58号海洋家属楼506号517房</view>
|
||
</view>
|
||
<view class="item-multi-line">
|
||
<view class="title flex-l">客户备注</view>
|
||
<view class="value flex-l">千古江山，英雄无觅孙仲谋处。舞榭歌台，风流总被雨打风吹去。斜阳草树，寻常巷陌，人道寄奴曾住。想当年，金戈铁马，气吞万里如虎。</view>
|
||
</view>
|
||
</view>
|
||
<me-empty-space height="376"></me-empty-space>
|
||
<view class="bottom">
|
||
<me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="686rpx" text-color="var(--titleColor)"></me-button>
|
||
|
||
<me-button @click="" text="确认接单" width="686rpx" icon-type="icon-flashlight" margin-top="32rpx"></me-button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
|
||
import MeIcon from "../../components/me-icon/me-icon.vue";
|
||
import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
|
||
import MeButton from "../../components/me-button/me-button.vue";
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.ctr {
|
||
padding: 0 32rpx;
|
||
box-sizing: border-box;
|
||
height: 100vh;
|
||
.price-ctr {
|
||
height: 200rpx;
|
||
width: 100%;
|
||
padding: 32rpx 20rpx;
|
||
box-sizing: border-box;
|
||
.price {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
font-weight: 500;
|
||
font-size: 36rpx;
|
||
color: var(--titleColor);
|
||
}
|
||
.desc {
|
||
width: 100%;
|
||
height: 56rpx;
|
||
font-size: 28rpx;
|
||
color: var(--summaryColor);
|
||
}
|
||
}
|
||
.info {
|
||
width: 100%;
|
||
background: var(--containerBgColor);
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
.item-row {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
position: relative;
|
||
.title {
|
||
width: 200rpx;
|
||
height: 100%;
|
||
font-size: 30rpx;
|
||
color: var(--summaryColor);
|
||
}
|
||
.value {
|
||
width: 446rpx;
|
||
height: 100%;
|
||
font-size: 30rpx;
|
||
color: var(--titleColor);
|
||
.icon {
|
||
margin-right: 8rpx;
|
||
}
|
||
}
|
||
.order-status {
|
||
color: #E18F00 !important;
|
||
}
|
||
.value-theme {
|
||
color: var(--themeColor) !important;
|
||
}
|
||
}
|
||
.item-multi-line {
|
||
width: 100%;
|
||
position: relative;
|
||
padding-bottom: 8rpx;
|
||
box-sizing: border-box;
|
||
.title {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
font-size: 30rpx;
|
||
color: var(--summaryColor);
|
||
}
|
||
.value {
|
||
width: 100%;
|
||
font-size: 30rpx;
|
||
color: var(--titleColor);
|
||
line-height: 48rpx;
|
||
}
|
||
}
|
||
}
|
||
.bottom {
|
||
width: 100%;
|
||
padding-top: 20rpx;
|
||
padding-bottom: 68rpx;
|
||
background: var(--pageBgColor);
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
bottom: 0;
|
||
}
|
||
}
|
||
</style>
|