yangjun
/
sadjv3_user
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

订单页面调整

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
my/order/payding.vue
View File

@ -83,7 +83,7 @@
</view> </view>
<view class="serverAddress"> <view class="serverAddress">
<view class="add-con-title title-font">服务地址</view> <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> </view>
</view> </view>
@ -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" style="color: #FF6000;" v-if="order.couponMoney">-￥{{order.couponMoney}}</view>
<view class="add-con-cont value-font" v-else>-</view> <view class="add-con-cont value-font" v-else>-</view>
</view> </view>
<view class="textarea-pay-list" v-if="order.remark"> <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 class="beizhu value-font">{{order.remark}}</view>
</view> </view>
</view> </view>
@ -1766,7 +1766,7 @@
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
color: #333333; color: #333333;
margin-bottom: 8px; margin-bottom: 12px;
} }
page { page {
background: #f7f7f7; background: #f7f7f7;
@ -1950,9 +1950,6 @@
.head-text{ .head-text{
font-size:30rpx; font-size:30rpx;
} }
.zhuangtai{
color: #029D88;
}
.level_button{ .level_button{
padding: 3rpx 13rpx; padding: 3rpx 13rpx;
background: linear-gradient(to right, #fe9131, #ff9869); background: linear-gradient(to right, #fe9131, #ff9869);
@ -2002,9 +1999,9 @@
color: #333; color: #333;
} }
.jusitify-line-end{ .jusitify-line-end{
height: 1px; height:1px;
border-bottom: 1px #f4f4f4 solid; border-bottom: 1px #e5e5e5 solid;
margin: 15px 0; margin: 30rpx 0;
} }
.head-title{ .head-title{
font-weight: bold; font-weight: bold;

194
my/order/paydingTCX.vue
View File

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