订单页面调整

This commit is contained in:
曹磊 2024-07-22 16:51:13 +08:00
parent 511412fd0b
commit de1be498b7
2 changed files with 109 additions and 106 deletions

View File

@ -83,7 +83,7 @@
</view>
<view class="serverAddress">
<view class="add-con-title title-font">服务地址</view>
<view class=" value-font" style=";width: 73%; text-align: right;">{{order.address}}</view>
<view class="value-font" style="width: 73%; text-align: right;">{{order.address}}</view>
</view>
</view>
</view>
@ -120,7 +120,7 @@
<view class="justify-title-nav-bor"></view>
</view>
<view class="flex justify-between add-lin">
<view class="add-con-title title-font">订单编号</view>
<view class="add-con-title title-font">订单编号</view>
<view class="flex align-center" @tap="copy(order.ordersNo)">
<view class="value-font">{{order.ordersNo}}
<u-icon name="file-text" style="color: #096f4b;margin-left: 10rpx;"></u-icon>
@ -196,9 +196,9 @@
<view class="add-con-cont value-font" style="color: #FF6000;" v-if="order.couponMoney">-{{order.couponMoney}}</view>
<view class="add-con-cont value-font" v-else>-</view>
</view>
<view class="textarea-pay-list" v-if="order.remark">
<view calss="title-font">备注内容</view>
<view class="jusitify-line-end"></view>
<view calss="title-font">备注</view>
<view class="beizhu value-font">{{order.remark}}</view>
</view>
</view>
@ -1766,7 +1766,7 @@
font-weight: bold;
font-size: 32rpx;
color: #333333;
margin-bottom: 8px;
margin-bottom: 12px;
}
page {
background: #f7f7f7;
@ -1950,9 +1950,6 @@
.head-text{
font-size:30rpx;
}
.zhuangtai{
color: #029D88;
}
.level_button{
padding: 3rpx 13rpx;
background: linear-gradient(to right, #fe9131, #ff9869);
@ -2002,9 +1999,9 @@
color: #333;
}
.jusitify-line-end{
height: 1px;
border-bottom: 1px #f4f4f4 solid;
margin: 15px 0;
height:1px;
border-bottom: 1px #e5e5e5 solid;
margin: 30rpx 0;
}
.head-title{
font-weight: bold;

View File

@ -1,8 +1,8 @@
<template>
<view class="content">
<view v-if="order.overTimeOrders == 1" class="dingshi" style="font-size: 32upx;height: 150rpx;padding: 26rpx 29rpx 0 29rpx;">
<!-- <view v-if="order.overTimeOrders == 1" class="dingshi" style="font-size: 32upx;height: 150rpx;padding: 26rpx 29rpx 0 29rpx;">
<view style="color: red;font-size:26rpx">(订单已超时)</view>
</view>
</view> -->
<view class="padding-bottom u-skeleton">
<view class="bgImg u-skeleton-fillet" v-if="order.ordersMassageList && order.ordersMassageList.length > 0"
style="padding: 0 29rpx;">
@ -15,11 +15,11 @@
</view>
<view class="u-flex-1 margin-left-sm">
<view class="flex head-title-right">
<view class="head-text">
<view class="head-title">
{{order.entryName}}
</view>
<view class="zhuangtai">
<view v-if="order.status ==1">款...</view>
<view v-if="order.status ==1"></view>
<view v-if="order.status ==2">待服务</view>
<view v-if="order.status ==5">已完成</view>
<view v-if="order.status ==6">服务中</view>
@ -33,14 +33,15 @@
</view>
<view class="flex align-center">
<view style="width: 100%;">
<view class="flex justify-between margin-tb-sm" style="color: #999999;">
<view class="flex justify-between margin-tb-sm">
<view style="justify-content: space-between;">
{{order.duration}}分钟
<text class="title-font">服务时长</text><text class="value-font">{{order.duration}}分钟</text>
</view>
</view>
<view class="money-pay" style="justify-content: space-between;">
<view class="money-pay-zhen">
<text class="title-font">项目价格</text>
<span></span>
<span>{{order.massagePrice}} </span>
<!-- <span style="color: #666;font-size: 12px;margin-left: 3px;"> x{{order.massageNum}}</span> -->
@ -62,21 +63,21 @@
</view>
<view class="" style="background-color: #ffffff;border-radius: 24rpx;margin-top: 24rpx;padding: 29rpx;">
<view class="" v-if="order.artificer">
<view class="flex align-center justify-between add-lin">
<view class="add-con-title">下单人</view>
<view class="add-con-cont">
<view class="flex justify-between add-lin">
<view class="add-con-title title-font">客户姓名</view>
<view class="add-con-cont value-font">
{{order.userName}}
</view>
</view>
<view class="flex align-center justify-between add-lin">
<view class="add-con-title">联系方式</view>
<view class="add-con-cont">
<view class="flex justify-between add-lin">
<view class="add-con-title title-font">联系方式</view>
<view class="add-con-cont value-font">
{{order.phone ? order.phone.substring(0,3) + '****' + order.phone.substring(7,11) : ''}}
</view>
</view>
<view class="serverAddress add-lin">
<view class="add-con-title">服务地址</view>
<view class="add-con-cont" style="width: 73%; line-height: 34rpx;">{{order.address}}</view>
<view class="serverAddress">
<view class="add-con-title title-font">服务地址</view>
<view class="value-font" style="width: 73%; text-align: right;">{{order.address}}</view>
</view>
</view>
</view>
@ -94,8 +95,7 @@
<!-- <image src="../../static/img/phone.png" class="phone-pay"
@click="bindphone(order.artificer.phone)"></image> -->
</view>
<view class="level_button">{{order.technicianType=='3'?'新手':order.technicianType=='4'?'专家':order.technicianType=='5'?'资深':''}}</view>
<view class="level_button">{{order.technicianTypeName}}</view>
</view>
</view>
<view class="list-pay">
@ -104,21 +104,21 @@
<view class="justify-title-nav-bor"></view>
</view>
<view class="flex justify-between add-lin">
<view class="add-con-title">订单编号</view>
<view class="flex align-center" @tap="copy(order.ordersNo)"
style="color: #333;font-size: 26rpx;">
<view class="add-con-cont">{{order.ordersNo}}</view>
<u-icon name="file-text" style="color: #096f4b;margin-left: 10rpx;"></u-icon>
<view class="add-con-title title-font">订单编号</view>
<view class="flex align-center" @tap="copy(order.ordersNo)">
<view class="value-font">{{order.ordersNo}}
<u-icon name="file-text" style="color: #096f4b;margin-left: 10rpx;"></u-icon>
</view>
</view>
</view>
<view class="flex justify-between add-lin">
<view class="add-con-title">预约时间</view>
<view class="add-con-cont">{{order.serveTime}}</view>
<view class="add-con-title title-font">预约时间</view>
<view class="add-con-cont value-font">{{order.serveTime}}</view>
</view>
<view class="flex justify-between add-lin">
<view class="add-con-title">下单时间</view>
<view class="add-con-cont">{{order.createTime}}</view>
<view class="add-con-title title-font">下单时间</view>
<view class="add-con-cont value-font">{{order.createTime}}</view>
</view>
<view class="jusitify-line-end"></view>
<view class="justify-title-nav ">
@ -126,38 +126,35 @@
<view class="justify-title-nav-bor"></view>
</view>
<view class="flex justify-between add-lin">
<view class="add-con-title"> {{order.packageType=='105'?'项目次卡':order.packageType=='106'?'服务疗程':'套餐名称'}}</view>
<view class="add-con-cont">
<view class="add-con-title title-font"> {{order.packageType=='105'?'项目次卡':order.packageType=='106'?'服务疗程':'套餐名称'}}</view>
<view class="add-con-cont value-font">
{{order.ordersMassageList[0].userPackageDetail.mainTitle}}
</view>
</view>
<view class="flex justify-between add-lin">
<view class="add-con-title">项目名称</view>
<view class="add-con-cont">{{order.entryName}}</view>
<view class="add-con-title title-font">项目名称</view>
<view class="add-con-cont value-font">{{order.entryName}}</view>
</view>
<view class="flex justify-between add-lin">
<view class="add-con-title">服务时长</view>
<view class="add-con-cont">{{order.duration}}分钟</view>
<view class="add-con-title title-font">服务时长</view>
<view class="add-con-cont value-font">{{order.duration}}分钟</view>
</view>
<view class="flex justify-between add-lin">
<view class="add-con-title">项目价格</view>
<view class="add-con-cont">{{order.massagePrice}}</view>
<view class="add-con-title title-font">项目价格</view>
<view class="add-con-cont value-font" style="color: #019c88;">{{order.massagePrice}}</view>
</view>
<!-- <view class="flex justify-between add-lin">
<view class="add-con-title title-font">会员减免</view>
<view class="add-con-cont value-font" >-{{order.vipReductionMoney}}</view>
</view> -->
<view class="flex justify-between add-lin">
<view class="add-con-title">会员减免</view>
<view class="add-con-cont" >-{{order.vipReductionMoney}}</view>
<view class="add-con-title title-font">应付金额</view>
<view class="add-con-cont value-font">{{order.massagePrice}}</view>
</view>
<view class="flex justify-between add-lin">
<view class="add-con-title">应付金额</view>
<view class="add-con-cont">{{order.massagePrice}}</view>
</view>
<view class="flex align-center margin-top-lg" style="justify-content: flex-end;padding-bottom:5px ;margin: 5px 0px;">
<view style="color: #333;font-size: 26rpx;">实付金额</view>
<view class="" style="color: #333;">
<text style="font-size: 35rpx;font-weight: bold;">
0
</text>
<view class="flex justify-between add-lin" style="justify-content: flex-end;">
<view class="title-font">实付金额</view>
<view class="add-con-cont value-font" style="font-weight: bold;">
<text>0</text>
</view>
</view>
<view class="jusitify-line-end"></view>
@ -166,41 +163,43 @@
<view class="justify-title-nav-bor"></view>
</view>
<view class="flex justify-between add-lin" v-if="order.tripWay" >
<view class="add-con-title">出行方式</view>
<view class="add-con-cont" v-if="order.tripWay == 1">公交</view>
<view class="add-con-cont" v-if="order.tripWay == 2">出租</view>
<view class="add-con-cont" v-if="order.tripWay == 3">免费</view>
<view class="add-con-title title-font">出行方式</view>
<view class="add-con-cont value-font" v-if="order.tripWay == 1">公交</view>
<view class="add-con-cont value-font" v-if="order.tripWay == 2">出租</view>
<view class="add-con-cont value-font" v-if="order.tripWay == 3">免费</view>
</view>
<view class="flex justify-between add-lin" v-if="order.km" >
<view class="add-con-title">全程距离</view>
<view class="add-con-cont">{{order.km}}km</view>
<view class="add-con-title title-font">全程距离</view>
<view class="add-con-cont value-font">{{order.km}}km</view>
</view>
<view class="flex justify-between add-lin">
<view class="add-con-title">出行交通费用</view>
<view class="add-con-cont" v-if="order.taxiMoney">{{order.taxiMoney}}</view>
<view class="add-con-cont" v-else>-</view>
<view class="add-con-title title-font">出行费用</view>
<view class="add-con-cont value-font">{{order.taxiMoney}}</view>
</view>
<view class="textarea-pay-list" v-if="order.remark">
<view style="color: #999;font-size: 26rpx;margin-bottom: 9px;">备注内容</view>
<view class="beizhu">{{order.remark}}</view>
<view class="jusitify-line-end"></view>
<view class="title-font">备注</view>
<view class="beizhu value-font">{{order.remark}}</view>
</view>
</view>
</view>
<view class="pay-ding feiuong">
<view class="fei-title ">费用明细</view>
<view class="justify-title-nav ">
<view class="justify-title">费用明细</view>
<view class="justify-title-nav-bor"></view>
</view>
<view class="fei-view">
<view class="flex justify-between add-lin">
<view class="add-con-title">订单费用</view>
<view class="add-con-cont"><text style="font-weight: bold;">0</text></view>
<view class="add-con-title title-font">订单费用</view>
<view class="add-con-cont value-font"><text style="font-weight: bold;">0</text></view>
</view>
<view class="flex justify-between add-lin">
<view class="add-con-title">出行费用</view>
<view class="add-con-cont" v-if="order.taxiMoney"><text style="font-weight: bold;">{{order.taxiMoney}}</text></view>
<view class="add-con-cont" v-else>-</view>
<view class="add-con-title title-font">出行费用</view>
<view class="add-con-cont value-font"><text style="font-weight: bold;">{{order.taxiMoney}}</text></view>
</view>
<view class="fei-view-list-z">
<span>总金额</span>
<span style="color: #FF3939;font-size: 34rpx;">{{order.taxiMoney}}</span>
<view class="fei-view-list-z" style="justify-content: flex-end;">
<span class="title-font">合计</span>
<span class="value-font" style="color: #FF1200;font-weight: bold;font-size: 40rpx;">{{order.taxiMoney}}</span>
</view>
</view>
</view>
@ -562,6 +561,15 @@
this.loading = false
uni.hideLoading()
this.order = res.data;
if(res.data["technicianType"] == 3){
this.order["technicianTypeName"] = "新手"
}
if(res.data["technicianType"] == 4){
this.order["technicianTypeName"] = "专家"
}
if(res.data["technicianType"] == 5){
this.order["technicianTypeName"] = "资深"
}
var date = new Date(); //
var timestamp = this.getTimeStampWithoutSeconds(date); //
const twoHoursInMilliseconds = 2 * 60 * 60 * 1000; //
@ -1721,7 +1729,6 @@
justify-content: space-between;
}
.dingshi{
background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
@ -1729,6 +1736,7 @@
.zhuangtai{
color: #029D88;
font-weight: bold;
font-size: 32rpx;
}
.head-title-right{
display: flex;
@ -1736,22 +1744,12 @@
align-items: center;
justify-content: space-between;
}
.head-title{
margin-top: -2px;display: inline-block;
width: 300rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.fei-view-list span,.fei-view-list-z span{
font-weight: bold;
font-size: 25rpx;
font-size: 30rpx;
}
.fei-view-list-z{
height: 65rpx;
background-color: rgba(247, 247, 247, 0.8);
border-radius: 33rpx;
padding: 0px 10px;
padding-top: 20rpx;
}
.fei-view-list span:nth-child(1),.fei-view-list-z span:nth-child(1){
color: #666666;
@ -1836,8 +1834,8 @@
font-weight: bold;
}
.d-touxiang{
width: 46rpx;
height: 46rpx;
width: 60rpx;
height: 60rpx;
border-radius: 50%;
}
.money-pay-jia{
@ -1849,12 +1847,7 @@
}
.money-pay-zhen span{
color: #FF6000;
}
.money-pay-zhen span:nth-child(1){
font-size: 25rpx;
}
.money-pay-zhen span:nth-child(2){
font-size: 31.25rpx;
font-size: 32rpx;
font-weight: bold;
}
.money-pay-zhen{
@ -1871,7 +1864,7 @@
.head-top{
background-color: #ffffff;
border-radius: 24rpx;
padding: 29rpx;
padding: 30rpx;
}
.content{
padding-bottom: 140rpx;
@ -1883,7 +1876,7 @@
font-weight: bold;
font-size: 32rpx;
color: #333333;
margin-bottom: 8px;
margin-bottom: 12px;
}
page {
background: #f7f7f7;
@ -2067,8 +2060,8 @@
font-size:30rpx;
}
.add-lin{
height: 80rpx;
line-height: 80rpx;
height: 74rpx;
line-height: 74rpx;
}
.add-con-title{
color: #999;
@ -2108,8 +2101,21 @@
color: #333;
}
.jusitify-line-end{
height: 1px;
border-bottom: 1px #f4f4f4 solid;
margin: 15px 0;
height:1px;
border-bottom: 1px #e5e5e5 solid;
margin: 30rpx 0;
}
.head-title{
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
.title-font{
font-size: 30rpx;
color: #666666;
}
.value-font{
font-size: 30rpx;
color: #333333;
}
</style>