car-wash-front/src/pages-order/detail/index.vue

<template>
  <view>
    <view class="goods-section">
      <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) / 100).toFixed(2) }}</text>
            <text class="font12">元</text>
          </view>
          <block class="price-dsc">洗车消费</block>
        </view>
      </view>
    </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.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.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.discountMoney) / 100).toFixed(2) }}元</text>
      </view>

      <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.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.startTime) }}</text>
      </view>
      <view class="yt-list-cell b-b">
        <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 {reactive} from "vue";
import {get} from "@/utils/https";
import {fmtDictName, fmtDateTime, fmtDuration, fmtMoney} from "@/utils/common";


const initState = () => ({
  detail: {
    orderItems:[] as any[]
  } as any
})

const state = reactive(initState())

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(`/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)
  })
})

onHide(() => {
  Object.assign(state, initState());
})


const handleCopy = () => {
  if (!state.detail.orderNo) return;
  uni.setClipboardData({
    data: state.detail.orderNo,
    success: function () {
      uni.showToast({
        title: '复制成功',
        icon: 'success',
      })
    }
  })
}

</script>


<style lang="scss" scoped>
page {
  background: #f8f8f8;
  padding-bottom: 100rpx;
}

.copy {
  color: $uni-color-primary !important;
}


.goods-section {
  margin-top: 16rpx;
  background: #fff;
  padding-bottom: 1px;

  .g-header {
    display: flex;
    align-items: center;
    height: 84rpx;
    padding: 0 30rpx;
    position: relative;
  }

  .logo {
    display: block;
    width: 50rpx;
    height: 50rpx;
    border-radius: 100px;
  }

  .name {
    font-size: 30rpx;
    color: #606266;
    margin-left: 24rpx;
  }

  .g-item {
    display: flex;
    margin: 20rpx 30rpx;

    image {
      flex-shrink: 0;
      display: block;
      width: 140rpx;
      height: 140rpx;
      border-radius: 4rpx;
    }

    .right {
      flex: 1;
      padding-left: 24rpx;
      overflow: hidden;
      text-align: center;
    }

    .title {
      font-size: 30rpx;
      color: #303133;
    }

    .spec {
      font-size: 26rpx;
      color: #909399;
    }

    .price-box {
      /* display: flex; */
      /* align-items: center; */
      color: #303133;
      padding-top: 10rpx;

      .price {
        margin-bottom: 4rpx;
        font-size: 48rpx;
      }

      .number {
        font-size: 26rpx;
        color: #606266;
        margin-left: 20rpx;
      }
    }

    .price-dsc {
      font-size: 26rpx;
      color: $uni-text-color-grey;
    }

    .step-box {
      position: relative;
    }
  }
}

.yt-list {
  margin-top: 16rpx;
  background: #fff;
}

.yt-list-cell {
  display: flex;
  align-items: center;
  padding: 10rpx 30rpx 10rpx 40rpx;
  line-height: 50rpx;
  position: relative;

  &.cell-hover {
    background: #fafafa;
  }

  &.b-b:after {
    left: 30rpx;
  }

  .cell-icon {
    height: 32rpx;
    width: 32rpx;
    font-size: 22rpx;
    color: #fff;
    text-align: center;
    line-height: 32rpx;
    background: #f85e52;
    border-radius: 4rpx;
    margin-right: 12rpx;

    &.hb {
      background: #ffaa0e;
    }

    &.lpk {
      background: #3ab54a;
    }

  }

  .cell-more {
    align-self: center;
    font-size: 24rpx;
    color: #909399;
    margin-left: 8rpx;
    margin-right: -10upx;
  }

  .cell-tit {
    flex: 1;
    font-size: 26rpx;
    color: #909399;
    margin-right: 10rpx;
  }

  .cell-tip {
    font-size: 26rpx;
    color: #303133;

    &.disabled {
      color: #909399;
    }

    &.active {
      color: #fa436a;
    }

    &.red {
      color: #fa436a;
    }
  }

  &.desc-cell {
    .cell-tit {
      max-width: 90rpx;
    }
  }

  .desc {
    flex: 1;
    font-size: 28rpx;
    color: #303133;
  }
}



.primary {
  color: $uni-color-primary !important;
}


.success {
  color: $uni-color-success !important;
}


.error {
  color: $uni-color-error !important;
}

.gap {
  width: 100%;
  height: 36rpx;
  background-color: #f5f3f3;
  margin-top: 15rpx;
  margin-bottom: 10rpx;
}

.order-item{
  &_header{
    width: 100%;

    &_left{
      padding:5px;
      width: 100%;
      background-color: #eeefff;
      color: #2c405a;
      font-size: 16px;
      display: inline-flex;
      justify-content: space-around;

      &_title,&_price,&_total,&_num{
        width: 25%;
        text-align: center;
      }
    }
  }

  &_body{
    width: 100%;

    &_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;
        }
      }
    }

  }
}
</style>