订单详情页修改

src/pages-order/detail/index.vue

@@ -1,73 +1,152 @@
 <template>
   <view>
     <view class="goods-section">
-      <view class="g-item"  style="padding-top: 10px;">
+      <view class="g-item" style="padding-top: 10px;">
         <view class="right">
           <view class="price-box">
             <text class="font12">￥</text>
-            <text class="price">{{ ((state.detail.amount+state.detail.grantsAmount)/100).toFixed(2) }}</text>
+            <text class="price">{{ ((state.detail.amount) / 100).toFixed(2) }}</text>
+            <text class="font12">元</text>
           </view>
-          <block class="price-dsc" >洗车消费</block>
+          <block class="price-dsc">洗车消费</block>
         </view>
       </view>
     </view>
-    <!-- 金额明细 -->
-    <view class="yt-list" >
+
+    <view class="yt-list">
       <view class="yt-list-cell b-b">
         <text class="cell-tit clamp">订单编号</text>
-        <text class="cell-tip copy" @click="handleCopy">{{ state.detail.orderNo }} <uv-icon name="info-circle"></uv-icon></text>
+        <text class="cell-tip copy" @click="handleCopy">{{ state.detail.orderId }}
+          <uv-icon name="info-circle"></uv-icon>
+        </text>
+      </view>
+      <view class="yt-list-cell b-b">
+        <text class="cell-tit clamp">总消费金额</text>
+        <text class="cell-tip red">-￥{{ ((state.detail.amount) / 100).toFixed(2) }}元</text>
       </view>
       <view class="yt-list-cell b-b">
-        <text class="cell-tit clamp">支付金额</text>
-        <text class="cell-tip red">-￥{{ ((state.detail.amount)/100).toFixed(2)  }}</text>
+        <text class="cell-tit clamp">充值款支付金额</text>
+        <text class="cell-tip red">-￥{{ ((state.detail.rechargePayment) / 100).toFixed(2) }}元</text>
       </view>
+      <view class="yt-list-cell b-b">
+        <text class="cell-tit clamp">赠款支付金额</text>
+        <text class="cell-tip red">-￥{{ ((state.detail.grantsPayment) / 100).toFixed(2) }}元</text>
+      </view>
+
       <view class="yt-list-cell b-b">
         <text class="cell-tit clamp">优惠金额</text>
-        <text class="cell-tip red">-￥{{ ((state.detail.grantsAmount)/100).toFixed(2)  }}</text>
+        <text class="cell-tip red">-￥{{ ((state.detail.discountMoney) / 100).toFixed(2) }}元</text>
       </view>
-      <view class="yt-list-cell desc-cell">
-        <text class="cell-tit clamp">备注</text>
-        {{ state.detail.remark }}
+
+      <view class="yt-list-cell b-b">
+        <text class="cell-tit clamp">订单状态</text>
+        <text class="cell-tip" :class="state.detail.orderStatus==0?'primary':(state.detail.orderStatus==1?'success':'error')">
+          {{ fmtDictName('Order.status', state.detail.orderStatus) }}
+        </text>
       </view>
       <view class="yt-list-cell b-b">
-        <text class="cell-tit clamp">交易状态</text>
-        <text class="cell-tip" :class="state.detail.status==0?'primary':(state.detail.status==1?'success':'error')">
-          {{fmtDictName('WalletDetail.status', state.detail.status)}}
+        <text class="cell-tit clamp">支付状态</text>
+        <text class="cell-tip" :class="state.detail.payStatus==0?'primary':(state.detail.payStatus==1?'success':'error')">
+          {{ fmtDictName('Order.pay', state.detail.payStatus) }}
         </text>
       </view>
       <view class="yt-list-cell b-b">
-        <text class="cell-tit clamp">创建时间</text>
-        <text class="cell-tip">{{   fmtDateTime(state.detail.createTime)}}</text>
+        <text class="cell-tit clamp">开始时间</text>
+        <text class="cell-tip">{{ fmtDateTime(state.detail.startTime) }}</text>
       </view>
       <view class="yt-list-cell b-b">
-        <text class="cell-tit clamp">交易时间</text>
-        <text class="cell-tip">{{   fmtDateTime(state.detail.transactionTime)}}</text>
+        <text class="cell-tit clamp">结束时间</text>
+        <text class="cell-tip">{{ fmtDateTime(state.detail.endTime) }}</text>
       </view>
+      <view class="yt-list-cell desc-cell">
+        <text class="cell-tit clamp">备注</text>
+        {{ state.detail.remark }}
+      </view>
+      <!--      <view class="yt-list-cell b-b">
+              <text class="cell-tit clamp">交易时间</text>
+              <text class="cell-tip">{{ fmtDateTime(state.detail.transactionTime) }}</text>
+            </view>-->
     </view>
     <view class="btn">
       <!--      <view class="btn_2" @click="jump_torefund(my_order.order_id)">退款</view>-->
     </view>
+
+    <view class="w100 gap"></view>
+    <!-- 金额明细 -->
+    <view class="order-item ml5 font14 color-info">费用明细</view>
+    <!--    <view class="yt-list">
+          <view class="yt-list-cell b-b">
+            <text class="cell-tit clamp">订单编号</text>
+            <text class="cell-tip copy" @click="handleCopy">{{ state.detail.orderNo }}
+              <uv-icon name="info-circle"></uv-icon>
+            </text>
+          </view>
+        </view>-->
+    <view class="order-item_header">
+      <view class="order-item_header_left">
+        <text class="order-item_header_left_title">项目</text>
+        <text class="order-item_header_left_price">时长</text>
+        <text class="order-item_header_left_num">单价</text>
+        <text class="order-item_header_left_total">小计</text>
+      </view>
+    </view>
+    <view class="order-item_body">
+      <view class="order-item_body_item" v-for="item in state.detail.orderItems" :key="item.id">
+        <view class="order-item_body_item_left">
+          <text class="order-item_body_item_left_name clamp">{{ item.name }}</text>
+          <text class="order-item_body_item_left_num">{{ item.seconds }}</text>
+          <text class="order-item_body_item_left_price">{{ item.price }}</text>
+          <text class="order-item_body_item_left_total">￥{{ item.amount }}元</text>
+        </view>
+      </view>
+    </view>
   </view>
+
+
 </template>
 <script setup lang="ts">
 
-import {onHide, onShow,onLoad} from "@dcloudio/uni-app";
+import {onHide, onShow, onLoad} from "@dcloudio/uni-app";
 import {reactive} from "vue";
 import {get} from "@/utils/https";
-import {fmtDictName,fmtDateTime} from "@/utils/common";
+import {fmtDictName, fmtDateTime, fmtDuration, fmtMoney} from "@/utils/common";
 
 
 const initState = () => ({
-  detail: {} as any
+  detail: {
+    orderItems:[] as any[]
+  } as any
 })
 
 const state = reactive(initState())
 
-onLoad((options:any) => {
-  console.log("onshow",options)
+onLoad((options: any) => {
+  console.log("onshow", options)
+  let user = getApp<any>().globalData.user;
+  if (!user || !user.id) {
+    uni.showToast({
+      title: '请先登录',
+      icon: 'none'
+    })
+    setTimeout(() => {
+      uni.redirectTo({url: '/pages/index/index'})
+    }, 200)
+    return;
+  }
   let {orderNo, id, type} = options;
-  get(`/account/walletDetail?type=${type}&orderNo=${orderNo}`).then(res => {
+  get(`/wash-order/detailWashOrder?userId=${user.id}&orderId=${orderNo}`).then((res: any) => {
     state.detail = res;
+
+    state.detail.orderItems = res.detail?.filter((k: any) => k.amount > 0 || k.seconds > 0).map((s: any) => {
+      return {
+        name: fmtDictName('Order.feeType',s.name),
+        seconds: fmtDuration(s.seconds*1000),
+        price: fmtMoney(s.price),
+        amount: fmtMoney(s.amount),
+      }
+    })
+
+    console.log(state.detail)
   })
 })
 
@@ -76,30 +155,30 @@ onHide(() => {
 })
 
 
-const handleCopy = ()=>{
-    if (!state.detail.orderNo) return;
-    uni.setClipboardData({
-      data: state.detail.orderNo,
-      success: function () {
-        uni.showToast({
-          title: '复制成功',
-          icon: 'success',
-        })
-      }
-    })
+const handleCopy = () => {
+  if (!state.detail.orderNo) return;
+  uni.setClipboardData({
+    data: state.detail.orderNo,
+    success: function () {
+      uni.showToast({
+        title: '复制成功',
+        icon: 'success',
+      })
+    }
+  })
 }
 
 </script>
 
 
-<style lang="scss">
+<style lang="scss" scoped>
 page {
   background: #f8f8f8;
   padding-bottom: 100rpx;
 }
 
-.copy{
-  color:$uni-color-primary !important;
+.copy {
+  color: $uni-color-primary !important;
 }
 
 
@@ -176,9 +255,9 @@ page {
       }
     }
 
-    .price-dsc{
-      font-size:26rpx;
-      color:$uni-text-color-grey;
+    .price-dsc {
+      font-size: 26rpx;
+      color: $uni-text-color-grey;
     }
 
     .step-box {
@@ -196,7 +275,7 @@ page {
   display: flex;
   align-items: center;
   padding: 10rpx 30rpx 10rpx 40rpx;
-  line-height: 70rpx;
+  line-height: 50rpx;
   position: relative;
 
   &.cell-hover {
@@ -273,229 +352,71 @@ page {
   }
 }
 
-/* 支付列表 */
-.pay-list {
-  padding-left: 40rpx;
-  margin-top: 16rpx;
-  background: #fff;
-
-  .pay-item {
-    display: flex;
-    align-items: center;
-    padding-right: 20rpx;
-    line-height: 1;
-    height: 110rpx;
-    position: relative;
-  }
-
-  .icon-weixinzhifu {
-    width: 80rpx;
-    font-size: 40rpx;
-    color: #6BCC03;
-  }
-
-  .icon-alipay {
-    width: 80rpx;
-    font-size: 40rpx;
-    color: #06B4FD;
-  }
 
-  .icon-xuanzhong2 {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 60rpx;
-    height: 60rpx;
-    font-size: 40rpx;
-    color: #fa436a;
-  }
 
-  .tit {
-    font-size: 32rpx;
-    color: #303133;
-    flex: 1;
-  }
+.primary {
+  color: $uni-color-primary !important;
 }
 
-.footer {
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  z-index: 995;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  height: 90rpx;
-  justify-content: space-between;
-  font-size: 30rpx;
-  background-color: #fff;
-  z-index: 998;
-  color: #606266;
-  box-shadow: 0 -1px 5px rgba(0, 0, 0, .1);
-
-  .price-content {
-    padding-left: 30rpx;
-  }
 
-  .price-tip {
-    color: #fa436a;
-    margin-left: 8rpx;
-  }
+.success {
+  color: $uni-color-success !important;
+}
 
-  .price {
-    font-size: 36rpx;
-    color: #fa436a;
-  }
 
-  .submit {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 280rpx;
-    height: 100%;
-    color: #fff;
-    font-size: 32rpx;
-    background-color: #fa436a;
-  }
+.error {
+  color: $uni-color-error !important;
 }
 
-/* 优惠券面板 */
-.mask {
-  display: flex;
-  align-items: flex-end;
-  position: fixed;
-  left: 0;
-  top: var(--window-top);
-  bottom: 0;
+.gap {
   width: 100%;
-  background: rgba(0, 0, 0, 0);
-  z-index: 9995;
-  transition: .3s;
-
-  .mask-content {
-    width: 100%;
-    min-height: 30vh;
-    max-height: 70vh;
-    background: #f3f3f3;
-    transform: translateY(100%);
-    transition: .3s;
-    overflow-y: scroll;
-  }
-
-  &.none {
-    display: none;
-  }
-
-  &.show {
-    background: rgba(0, 0, 0, .4);
-
-    .mask-content {
-      transform: translateY(0);
-    }
-  }
+  height: 36rpx;
+  background-color: #f5f3f3;
+  margin-top: 15rpx;
+  margin-bottom: 10rpx;
 }
 
-/* 优惠券列表 */
-.coupon-item {
-  display: flex;
-  flex-direction: column;
-  margin: 20rpx 24rpx;
-  background: #fff;
-
-  .con {
-    display: flex;
-    align-items: center;
-    position: relative;
-    height: 120rpx;
-    padding: 0 30rpx;
+.order-item{
+  &_header{
+    width: 100%;
 
-    &:after {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      content: '';
+    &_left{
+      padding:5px;
       width: 100%;
-      height: 0;
-      border-bottom: 1px dashed #f3f3f3;
-      transform: scaleY(50%);
+      background-color: #eeefff;
+      color: #2c405a;
+      font-size: 16px;
+      display: inline-flex;
+      justify-content: space-around;
+
+      &_title,&_price,&_total,&_num{
+        width: 25%;
+        text-align: center;
+      }
     }
   }
 
-  .left {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    flex: 1;
-    overflow: hidden;
-    height: 100rpx;
-  }
-
-  .title {
-    font-size: 32rpx;
-    color: #303133;
-    margin-bottom: 10rpx;
-  }
-
-  .time {
-    font-size: 24rpx;
-    color: #909399;
-  }
-
-  .right {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    font-size: 26rpx;
-    color: #606266;
-    height: 100rpx;
-  }
-
-  .price {
-    font-size: 44rpx;
-    color: #fa436a;
+  &_body{
+    width: 100%;
 
-    &:before {
-      content: '￥';
-      font-size: 34rpx;
+    &_item{
+      font-size: 14px;
+
+      &_left{
+        display: inline-flex;
+        justify-content: space-around;
+        width: 100%;
+
+        &_left,&_price,&_total,&_num,&_name{
+          width: 25%;
+          text-align: center;
+          border: 1px solid #ccc;
+          border-right: none;
+          border-top: none;
+        }
+      }
     }
-  }
-
-  .tips {
-    font-size: 24rpx;
-    color: #909399;
-    line-height: 60rpx;
-    padding-left: 30rpx;
-  }
-
-  .circle {
-    position: absolute;
-    left: -6upx;
-    bottom: -10upx;
-    z-index: 10;
-    width: 20rpx;
-    height: 20rpx;
-    background: #f3f3f3;
-    border-radius: 100px;
 
-    &.r {
-      left: auto;
-      right: -6upx;
-    }
   }
 }
-
-.primary{
-  color: $uni-color-primary !important;
-}
-
-
-.success{
-  color: $uni-color-success !important;
-}
-
-
-.error{
-  color: $uni-color-error !important;
-}
 </style>

src/pages/user/index.vue

@@ -137,11 +137,8 @@ const toPage = (item: any) => {
         }
       });
       return;
-    } else if (path.includes("order") || path.includes("coupon")) {
-      uni.switchTab({
-        url: path
-      })
     }
+
     uni.navigateTo({
       url: item.path,
     });

src/utils/common.ts

@@ -102,3 +102,39 @@ const formatNumber = n => {
     n = n.toString();
     return n[1] ? n : '0' + n
 }
+
+export function fmtDuration(ms: number) {
+    let seconds = Math.floor(ms / 1000);
+    let minutes = Math.floor(seconds / 60);
+    let hours = Math.floor(minutes / 60);
+    let days = Math.floor(hours / 24);
+
+    hours %= 24;
+    minutes %= 60;
+    seconds %= 60;
+
+    // 构建时长字符串
+    let durationStr = '';
+    if (days > 0) {
+        durationStr += `${days}天 `;
+    }
+    if (hours > 0) {
+        durationStr += `${hours}小时 `;
+    }
+    if (minutes > 0) {
+        durationStr += `${minutes}分钟 `;
+    }
+    if (seconds > 0 || !durationStr) { // 如果没有小时和分钟，至少显示秒
+        durationStr += `${seconds}秒`;
+    }
+
+    return durationStr.trim(); // 去除可能的前后空格
+}
+
+
+export function fmtMoney(money: number) {
+    if (!money) {
+        return "0.00";
+    }
+    return (money / 100).toFixed(2);
+}