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+state.detail.grantsAmount)/100).toFixed(2) }}</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.orderNo }} <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.grantsAmount)/100).toFixed(2)  }}</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" :class="state.detail.status==0?'primary':(state.detail.status==1?'success':'error')">
          {{fmtDictName('WalletDetail.status', state.detail.status)}}
        </text>
      </view>
      <view class="yt-list-cell b-b">
        <text class="cell-tit clamp">创建时间</text>
        <text class="cell-tip">{{   fmtDateTime(state.detail.createTime)}}</text>
      </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>
</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} from "@/utils/common";


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

const state = reactive(initState())

onLoad((options:any) => {
  console.log("onshow",options)
  let {orderNo, id, type} = options;
  get(`/account/walletDetail?type=${type}&orderNo=${orderNo}`).then(res => {
    state.detail = res;
  })
})

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">
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: 70rpx;
  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;
  }
}

/* 支付列表 */
.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;
  }
}

.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;
  }

  .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;
  }
}

/* 优惠券面板 */
.mask {
  display: flex;
  align-items: flex-end;
  position: fixed;
  left: 0;
  top: var(--window-top);
  bottom: 0;
  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);
    }
  }
}

/* 优惠券列表 */
.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;

    &:after {
      position: absolute;
      left: 0;
      bottom: 0;
      content: '';
      width: 100%;
      height: 0;
      border-bottom: 1px dashed #f3f3f3;
      transform: scaleY(50%);
    }
  }

  .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;

    &:before {
      content: '￥';
      font-size: 34rpx;
    }
  }

  .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>