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

订单页面调整

This commit is contained in:
曹磊 2024-07-22 15:36:15 +08:00
parent 9f452d2752
commit d4cb7a9b62
5 changed files with 216 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/colorui/main.css
View File

@ -3134,7 +3134,7 @@ scroll-view.cu-steps .cu-item {
.margin-tb-sm { .margin-tb-sm {
margin-top: 20upx; margin-top: 20upx;
margin-bottom: 20upx; margin-bottom: 13upx;
} }
.margin-tb { .margin-tb {

3
my/order/pay.vue
View File

@ -294,8 +294,7 @@
</view> </view>
<view class="flex justify-between jusitify-line" > <view class="flex justify-between jusitify-line" >
<view class="line-word title-font">出行费用</view> <view class="line-word title-font">出行费用</view>
<view class="line-word-r value-font" v-if="order.taxiMoney">￥{{order.taxiMoney}}</view> <view class="line-word-r value-font">￥{{order.taxiMoney}}</view>
<view class="line-word-r value-font" v-else>-</view>
</view> </view>
<view class="jusitify-line-end jusitify-line"></view> <view class="jusitify-line-end jusitify-line"></view>
<view class="justify-title-nav"> <view class="justify-title-nav">

235
my/order/payModify.vue
View File

@ -9,19 +9,19 @@
<image :src="orderXm.massageImg" <image :src="orderXm.massageImg"
style="width: 100%;height: 100%;border-radius: 19upx;"></image> style="width: 100%;height: 100%;border-radius: 19upx;"></image>
</view> </view>
<view class="head-bottom 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="margin-right-xs text-df u-skeleton-fillet head-title"> <view class="margin-right-xs u-skeleton-fillet head-title">
{{orderXm.title}} {{orderXm.title}}
</view> </view>
</view> </view>
<view class="flex align-center">
<view style="justify-content: space-between;">
<text class="title-font">服务时长：</text><text class="value-font">{{orderXm.duration}}分钟</text>
</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">
<view style="justify-content: space-between;">
<text class="title-font">服务时长：</text><text class="value-font">{{orderXm.duration}}分钟</text>
</view>
</view>
<view class="money-pay"> <view class="money-pay">
<view class="money-pay-zhen"> <view class="money-pay-zhen">
<text class="title-font">项目价格：</text> <text class="title-font">项目价格：</text>
@ -43,113 +43,107 @@
</view> </view>
</view> </view>
</view> </view>
<view class="ske-padding margin-top-sm header-view"> </view>
<view v-if="!detailaddress">请选择地址</view> <view class="header-view header-padd header-margin ">
<view class="margin-right-xs"> <view v-if="!detailaddress">请选择地址</view>
<view class="jusitify-line"> <view class="margin-right-xs">
<view class="line-word title-font">客户姓名</view> <view class="jusitify-line">
<view class="line-word-r value-font" > <view class="line-word title-font">客户姓名</view>
<text>{{name}}</text> <view class="line-word-r value-font" >
<text class="xuanzhe" @click="getAddressList()">更换</text> <text>{{name}}</text>
</view> <text class="xuanzhe" @click="getAddressList()">更换</text>
</view>
<view class="jusitify-line">
<view class="line-word title-font">联系方式</view>
<view class="line-word-r value-font">
{{mobile}}
</view>
</view>
<view class="jusitify-line" style="align-items: center;">
<view class="line-word title-font">服务地址</view>
<view class="line-word-r value-font" style="width: 73%; text-align: right; ">
<span>
{{province}}/{{city}}/{{district}}/{{detailaddress}}
</span>
</view>
</view>
<view class="jusitify-line" v-if="order.remark">
<view class="line-word title-font">备注内容</view>
<view class="flex">
<view class="value-font">
{{order.remark}}
</view>
</view>
</view>
</view>
</view>
<view class="ske-padding margin-top-sm header-view">
<view class="jusitify-line" @click="liliaoshi">
<view class="line-word title-font" >
<span v-if="jishiName">{{jishiName.technicianTypeName}}</span>
<span >技师</span>
</view>
<view >
<span class="line-word-r value-font" v-if="jishiName">{{jishiName.artificerName}}</span>
<span class="line-word-r value-font" v-else>选择不同等级的技师价格不同哦~</span>
<span class="view-more"></span>
</view>
</view>
<view class="jusitify-line" v-if="jishiName">
<view class="line-word title-font" >
<span >项目原价</span>
</view>
<view >
<span class="line-word-r value-font">￥{{orderXm.price}}</span>
</view>
</view>
<view class="jusitify-line" v-if="jishiName">
<view class="line-word title-font" >
<span>{{jishiName.technicianTypeName}}</span>
<span >价格</span>
</view>
<view >
<span class="line-word-r value-font" style="color: #019c88">￥{{technicianRate}}</span>
</view>
</view>
<view class="jusitify-line" @click="youhuijuan">
<view class="line-word title-font">优惠券</view>
<view class="header-bottom-money-zhen">
<view v-if="couponDataList" class="" style="margin-right: 5px;">
<span>-￥{{couponDataList}}</span>
</view>
<span v-else>选择优惠券</span>
<span class="view-more"></span>
</view> </view>
</view> </view>
<view class="jusitify-line"> <view class="jusitify-line">
<view class="line-word title-font">服务时间</view> <view class="line-word title-font">联系方式</view>
<!-- <view class="fuwu-time-view" @change="changeLog"> <view class="line-word-r value-font">
<uni-datetime-picker :hide-second='true' v-model="single" type="datetime">{{single==''?order.serveTime:single}}</uni-datetime-picker> {{mobile}}
<image style="margin-left: 5px;" class="fuwu-img" src="../../static/images/my/jiantou.png" mode=""></image>
</view> -->
<view class="flex align-center justify-between value-font" style="margin-top: 15rpx;">
<view class="flex justify-between margin-tb-sm" @click="openData()">
<view v-if="startTime">{{startTime}}</view>
<view class="line-word-r" v-else>选择预约时间<span class="view-more"></span></view>
<!---<u-icon name="arrow-right" color="#999999"></u-icon>-->
</view>
</view> </view>
</view> </view>
<view class="jusitify-line" style="align-items: center;">
<view class="line-word title-font">服务地址</view>
</view> <view class="line-word-r value-font" style="width: 73%; text-align: right; ">
<view class="margin-top-xl pay-ding"> <span>
<view class="d-title title-font">备注</view> {{province}}/{{city}}/{{district}}/{{detailaddress}}
<view class="list-pay"> </span>
<view class="textarea-pay-list"> </view>
<textarea @input="textareaChange" class="textarea-pay" v-model="textareaData" placeholder="请输入备注" name="" maxlength="100"></textarea> </view>
<view class="jusitify-line" v-if="order.remark">
<view class="line-word title-font">备注内容</view>
<view class="flex">
<view class="value-font">
{{order.remark}}
</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="header-view header-padd header-margin ">
<view class="jusitify-line" @click="liliaoshi">
<view class="line-word title-font" >
<span v-if="jishiName">{{jishiName.technicianTypeName}}</span>
<span >技师</span>
</view>
<view >
<span class="line-word-r value-font" v-if="jishiName">{{jishiName.artificerName}}</span>
<span class="line-word-r value-font" v-else>选择不同等级的技师价格不同哦~</span>
<span class="view-more"></span>
</view>
</view>
<view class="jusitify-line" v-if="jishiName">
<view class="line-word title-font" >
<span >项目原价</span>
</view>
<view >
<span class="line-word-r value-font">￥{{orderXm.price}}</span>
</view>
</view>
<view class="jusitify-line" v-if="jishiName">
<view class="line-word title-font" >
<span>{{jishiName.technicianTypeName}}</span>
<span >价格</span>
</view>
<view >
<span class="line-word-r value-font" style="color: #019c88">￥{{technicianRate}}</span>
</view>
</view>
<view class="jusitify-line" @click="youhuijuan">
<view class="line-word title-font">优惠券</view>
<view class="header-bottom-money-zhen">
<view v-if="couponDataList" class="" style="margin-right: 5px;">
<span>-￥{{couponDataList}}</span>
</view>
<span v-else>选择优惠券</span>
<span class="view-more"></span>
</view>
</view>
<view class="jusitify-line">
<view class="line-word title-font">服务时间</view>
<!-- <view class="fuwu-time-view" @change="changeLog">
<uni-datetime-picker :hide-second='true' v-model="single" type="datetime">{{single==''?order.serveTime:single}}</uni-datetime-picker>
<image style="margin-left: 5px;" class="fuwu-img" src="../../static/images/my/jiantou.png" mode=""></image>
</view> -->
<view class="flex align-center justify-between value-font" style="margin-top: 15rpx;">
<view class="flex justify-between margin-tb-sm" @click="openData()">
<view v-if="startTime">{{startTime}}</view>
<view class="line-word-r value-font" v-else>选择预约时间<span class="view-more"></span></view>
<!---<u-icon name="arrow-right" color="#999999"></u-icon>-->
</view>
</view>
</view>
</view>
<view class="header-view header-padd header-margin">
<view class="d-title title-font">备注</view>
<view class="list-pay">
<view class="textarea-pay-list">
<textarea @input="textareaChange" class="textarea-pay" v-model="textareaData" placeholder="请输入备注" name="" maxlength="100"></textarea>
</view>
</view>
</view>
<view class="push-button"> <view class="push-button">
<view class="pay_btn" @click="openpay()">去支付</view> <view class="pay_btn" @click="openpay()">去支付</view>
</view> </view>
</view> </view>
<!-- <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton> --> <!-- <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton> -->
<u-popup v-model="showorder" mode="bottom" :closeable="closeable"> <u-popup v-model="showorder" mode="bottom" :closeable="closeable">
@ -1387,7 +1381,7 @@
font-weight: bold; font-weight: bold;
font-size: 32rpx; font-size: 32rpx;
color: #333333; color: #333333;
margin-bottom: 8px; margin-bottom: 12px;
} }
.view-more{ .view-more{
display:inline-block; display:inline-block;
@ -1585,15 +1579,15 @@
} }
.xuanzhe{ .xuanzhe{
background: linear-gradient(90deg, #029d88, #2fc094); background: linear-gradient(90deg, #029d88, #2fc094);
color: #ffffff; color: #ffffff;
margin-left: 5px; margin-left: 5px;
border-radius: 15px; border-radius: 15px;
height: 25px; height: 25px;
line-height: 25px; line-height: 25px;
width: 50px; width: 50px;
text-align: center; text-align: center;
font-size: 14px; font-size: 14px;
padding:6rpx 16rpx padding:6rpx 16rpx
} }
.header-view-data{ .header-view-data{
display: flex; display: flex;
@ -1617,9 +1611,14 @@
} }
.header-view{ .header-view{
background-color: #fff; background-color: #fff;
margin-bottom: 12px;
border-radius: 11px; border-radius: 11px;
} }
.header-padd{
padding: 36rpx;
}
.header-margin{
margin: 26rpx;
}
.head-foot span:nth-child(1){ .head-foot span:nth-child(1){
margin-right: 5px; margin-right: 5px;
} }
@ -1690,12 +1689,12 @@
background-color: #ffffff; background-color: #ffffff;
border-radius: 24rpx; border-radius: 24rpx;
padding: 29rpx; padding: 29rpx;
margin-top: 10px;
} }
.d-title{ .d-title{
font-weight: 400; font-weight: 400;
font-size: 29rpx; font-size: 29rpx;
color: #222; color: #222;
padding: 16px 15px 0px 15px;
width: 100%; width: 100%;
} }
.checkbox-data{ .checkbox-data{
@ -1716,7 +1715,6 @@
} }
.list-pay{ .list-pay{
width: 100%; width: 100%;
padding: 0px 29rpx;
} }
.pay-ding-top{ .pay-ding-top{
width: 100%; width: 100%;
@ -2012,7 +2010,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin: 0 auto; margin: 0 auto;
} }
.pay_btn{ .pay_btn{
display: inline-block; display: inline-block;
width: 92%; width: 92%;
@ -2047,6 +2045,13 @@
font-size: 32rpx; font-size: 32rpx;
color: #333333; color: #333333;
} }
.head-title-right{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-weight: bold;
}
.title-font{ .title-font{
font-size: 30rpx; font-size: 30rpx;
color: #666666; color: #666666;

142
my/order/payModifyTcMy.vue
View File

@ -9,19 +9,25 @@
<image :src="orderXm.massageImg" <image :src="orderXm.massageImg"
style="width: 100%;height: 100%;border-radius: 19upx;"></image> style="width: 100%;height: 100%;border-radius: 19upx;"></image>
</view> </view>
<view class="head-bottom 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="margin-right-xs u-skeleton-fillet head-title"> <view class="margin-right-xs u-skeleton-fillet head-title">
{{orderXm.title}} {{orderXm.title}}
</view> </view>
</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">
<view style="justify-content: space-between;">
<text class="title-font">服务时长：</text><text class="value-font">{{orderXm.duration}}分钟</text>
</view>
</view>
<view class="money-pay"> <view class="money-pay">
<view class="money-pay-zhen"> <view class="money-pay-zhen">
<text class="title-font">项目价格：</text>
<span>￥</span> <span>￥</span>
<span>{{orderXm.packagePrice}}/次</span> <span>{{orderXm.packagePrice}}</span>
</view> </view>
<view> <view>
<uni-number-box :disabled="true" :width='27' :min="1" :value='1' @change="changeValue" /> <uni-number-box :disabled="true" :width='27' :min="1" :value='1' @change="changeValue" />
@ -37,57 +43,56 @@
<view class="header-padd header-view header-margin"> <view class="header-padd header-view header-margin">
<view v-if="!detailaddress">请选择地址</view> <view v-if="!detailaddress">请选择地址</view>
<view class="margin-right-xs"> <view class="margin-right-xs">
<view class="flex justify-between heaer-height"> <view class="jusitify-line">
<view class="header-view-text">联系人</view> <view class="line-word title-font">客户姓名</view>
<view class="header-view-data"> <view class="line-word-r value-font">
<text>{{name}}</text> <text>{{name}}</text>
<text class="xuanzhe" @click="getAddressList()">修改</text> <text class="xuanzhe" @click="getAddressList()">更换</text>
</view> </view>
</view> </view>
<view class="flex justify-between heaer-height"> <view class="jusitify-line">
<view class="header-view-text">手机号码</view> <view class="line-word title-font">联系方式</view>
<view class="header-view-data"> <view class="line-word-r value-font">
{{mobile}} {{mobile}}
</view> </view>
</view> </view>
<view class="flex justify-between heaer-height"> <view class="jusitify-line" style="align-items: center;">
<view class="header-view-text">详细地址</view> <view class="line-word title-font">服务地址</view>
<view class="flex adders-view"> <view class="line-word-r value-font" style="width: 73%; text-align: right; ">
<span> <span>
{{province}}/{{city}}/{{district}}/{{detailaddress}} {{province}}/{{city}}/{{district}}/{{detailaddress}}
</span> </span>
<span class="view-more"></span>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="header-view header-padd header-margin "> <view class="header-view header-padd header-margin ">
<view class="fuwu-time heaer-height" @click="liliaoshi"> <view class="jusitify-line" @click="liliaoshi">
<view class="fuwu-title" > <view class="line-word title-font" >
<span>技师</span> <span>技师</span>
<!-- <span v-if="jishiName">{{jishiName.technicianTypeName}}</span> --> <!-- <span v-if="jishiName">{{jishiName.technicianTypeName}}</span> -->
</view> </view>
<view class="liliao-bottom" > <view >
<span v-if="jishiName.artificerId">{{jishiName.artificerName}}</span> <span class="line-word-r value-font" v-if="jishiName.artificerId">{{jishiName.artificerName}}</span>
<span v-else>请选择技师</span> <span class="line-word-r value-font" v-else>选择技师</span>
<span class="view-more"></span> <span class="view-more"></span>
</view> </view>
</view> </view>
<view class="fuwu-time heaer-height"> <view class="jusitify-line">
<view class="fuwu-title"> <view class="line-word title-font">
服务时间 服务时间
</view> </view>
<view class="flex align-center justify-between" style="ppadding: 0rpx 10rpx;"> <view class="flex align-center justify-between value-font" style="margin-top: 15rpx;">
<view class="flex justify-between margin-tb-sm" @click="openData()"> <view class="flex justify-between margin-tb-sm" @click="openData()">
<view v-if="startTime">{{startTime}}</view> <view v-if="startTime">{{startTime}}</view>
<view class="tetx-sm" v-else>请选择预约时间<span class="view-more"></span></view> <view class="line-word-r value-font" v-else>请选择预约时间<span class="view-more"></span></view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="header-view header-padd header-margin"> <view class="header-view header-padd header-margin">
<view class="d-title">备注</view> <view class="d-title title-font">备注</view>
<view class="list-pay"> <view class="list-pay">
<view class="textarea-pay-list"> <view class="textarea-pay-list">
<textarea @input="textareaChange" class="textarea-pay" v-model="textareaData" placeholder="请输入备注" name="" maxlength="100"></textarea> <textarea @input="textareaChange" class="textarea-pay" v-model="textareaData" placeholder="请输入备注" name="" maxlength="100"></textarea>
@ -95,8 +100,9 @@
</view> </view>
</view> </view>
<view class="pay_btn" style="margin-top: 30px;" @click="openpay()">去支付</view> <view class="push-button">
<view class="pay_btn" @click="openpay()">去支付</view>
</view>
</view> </view>
<!-- <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton> --> <!-- <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton> -->
<u-popup v-model="showorder" mode="bottom" :closeable="closeable"> <u-popup v-model="showorder" mode="bottom" :closeable="closeable">
@ -1392,12 +1398,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{
@ -1708,12 +1709,13 @@
background: linear-gradient(90deg, #029d88, #2fc094); background: linear-gradient(90deg, #029d88, #2fc094);
color: #ffffff; color: #ffffff;
margin-left: 5px; margin-left: 5px;
border-radius: 30rpx; border-radius: 15px;
height:50rpx; height: 25px;
line-height: 50rpx; line-height: 25px;
width: 100rpx; width: 50px;
text-align:center; text-align: center;
font-size: 26rpx; font-size: 14px;
padding:6rpx 16rpx
} }
.header-view-data{ .header-view-data{
display: flex; display: flex;
@ -1959,10 +1961,10 @@
background-color: #f7f7f7; background-color: #f7f7f7;
} }
.pay-title{ .pay-title{
font-weight: bold; font-weight: bold;
font-size: 31rpx; font-size: 32rpx;
color: #333333; color: #333333;
margin-bottom: 8px; margin-bottom: 12px;
} }
page { page {
background: #f7f7f7; background: #f7f7f7;
@ -2125,16 +2127,27 @@
} }
.pay_btn { .push-button{
width: 90%; width: 100%;
height: 48px;
position: fixed;
bottom: 0px;
display: flex;
flex-direction: column;
align-items: center;
margin: 0 auto; margin: 0 auto;
}
.pay_btn {
display: inline-block;
width: 92%;
text-align: center; text-align: center;
background: linear-gradient(90deg, #019C88, #28BA92, #35C495); background: linear-gradient(90deg, #019C88, #28BA92, #35C495);
height:80rpx; height: 40px;
border-radius: 80rpx; border-radius: 28px;
color: #ffffff; color: #ffffff;
line-height: 80rpx; line-height: 40px;
font-size: 32rpx; margin-top: 4px;
font-size: 34rpx;
} }
.serverAddress { .serverAddress {
display: flex; display: flex;
@ -2151,4 +2164,35 @@
height: 80rpx; height: 80rpx;
align-items: center; align-items: center;
} }
.head-title{
font-weight: bold;
font-size: 32rpx;
color: #333333;
}
.head-title-right{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-weight: bold;
}
.title-font{
font-size: 30rpx;
color: #666666;
}
.value-font{
font-size: 30rpx;
color: #333333;
}
.jusitify-line{
height: 78rpx;
padding: 20rpx 0;
display: flex;
justify-content: space-between;
}
.jusitify-line-end{
height:1px;
border-bottom: 1px #e5e5e5 solid;
margin: 30rpx 0;
}
</style> </style>

2
my/order/payShengji.vue
View File

@ -2478,7 +2478,7 @@
padding: 29rpx; padding: 29rpx;
} }
.content{ .content{
padding-top: 20px; padding-top: 11px;
width: 100%; width: 100%;
background-color: #f7f7f7; background-color: #f7f7f7;
} }