uniapp-h5/src/pages/ycysp/components/order-item.vue

<template>
  <view class="order-item-wrapper flex flex-col box-border" @click="goDetail">
    <view class="nav-info flex flex-justify-between">
      <view>订单编号：{{ detail.order_no }}</view>
      <view :style="{ color: stateColor[detail.status] || '' }">{{
        stateConfig[detail.status]
      }}</view>
    </view>
    <view class="order-info">
      <view class="content flex">
        <image :src="detail.main_image" class="pro-img" />
        <view class="flex flex-1 flex-col">
          <view class="flex flex-justify-between name info-item">
            <view class="text-over">{{ detail.product_name }}</view>
            <view class="amount"
              ><text>￥</text>{{ detail.order_amount }}<text>元</text></view
            >
          </view>
          <view class="flex num">
            <view>充值账号：</view>
            <view>{{ maskPhoneNumber(detail.account) }}</view>
          </view>
          <view class="flex flex-justify-between num">
            <view>数量</view>
            <view>x1</view>
          </view>
        </view>
      </view>
      <view class="flex flex-justify-between time">
        <view>下单时间：{{ detail.create_time }}</view>
        <!-- <view v-if="[1].includes(detail.status)">优惠金额：¥{{ discount  }}</view> -->
      </view>
    </view>
    <view class="line"></view>
    <view class="bottoms">
      <!-- <view class="pay-des" v-if="[1].includes(detail.status)">
                <view class="count-item">共 1 件，应付总额：<text style="text-decoration: line-through;">￥{{ detail.order_amount }}</text></view>
                <view class="number-item">实际支付：¥{{ detail.wait_amount }}</view>
            </view> -->
      <view class="btns">
        <!-- <view class="btn del" @click="goDel">删除订单</view> -->
        <view class="btn pay" v-if="[1].includes(detail.status)" @click="goPay"
          >立即付款</view
        >
        <view
          class="btn pay"
          @click="goRefund"
          v-if="[4].includes(detail.status)"
          >申请退款</view
        >
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from "vue";
import { stateConfig, stateColor } from "../config";
const props = defineProps({
  detail: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});
const emits = defineEmits([
  "pay-event",
  "detail-event",
  "pwd-event",
  "del-event",
]);

function goPay(e) {
  if (e.stopPropagation) {
    //W3C阻止冒泡方法
    e.stopPropagation();
  }
  emits("pay-event", props.detail);
}

const discount = computed(() => {
  if (!Object.keys(props.detail).length) return 0;
  return (
    (Number(props.detail.order_amount) * 100 -
      Number(props.detail.wait_amount) * 100) /
    100
  );
});

function maskPhoneNumber(phoneNumber) {
  return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
}

function goDetail(e) {
  emits("detail-event", props.detail);
}

function goDel(e) {
  if (e.stopPropagation) {
    //W3C阻止冒泡方法
    e.stopPropagation();
  }
  emits("del-event", props.detail);
}

function goRefund(e) {
  if (e.stopPropagation) {
    //W3C阻止冒泡方法
    e.stopPropagation();
  }
  emits("refund-event", props.detail);
}
</script>

<style lang="scss">
.order-item-wrapper {
  width: 702rpx;
  // height: 386rpx;
  background: #ffffff;
  border-radius: 24rpx;
  padding: 24rpx;
  margin: 24rpx 0 16rpx;
}
.nav-info {
  font-size: 22rpx;
  font-weight: 400;
  :first-child {
    color: #333333;
  }
  :last-child {
    color: #787878;
  }
}
.order-info {
  margin-top: 24rpx;
  .content {
    margin-bottom: 24rpx;
    font-weight: 400;
    .pro-img {
      display: block;
      width: 90rpx;
      height: 90rpx;
      margin-right: 34rpx;
    }
  }
  .time {
    font-size: 22rpx;
    color: #6c6c6c;
  }
  .info-item {
    font-weight: bold;
    margin-bottom: 12rpx;
  }
  .text-over {
    max-width: 80%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .amount {
    color: #333333;
    font-weight: bold;
    font-size: 24rpx;
    text:nth-child(1) {
      font-size: 20rpx;
      font-weight: 400;
    }
    text:nth-child(2) {
      font-size: 22rpx;
    }
  }
  .name {
    font-size: 24rpx;
    color: #333333;
    font-weight: 700;
  }
  .num {
    font-size: 20rpx;
    color: #9e9e9e;
    font-weight: 400;
    margin-bottom: 10rpx;
  }
}
.count-item {
  font-size: 22rpx;
  color: #878787;
  text-align: right;
  margin-top: 8rpx;
}
.number-item {
  font-size: 24rpx;
  color: #2e92ff;
  text-align: right;
  margin-top: 16rpx;
}
.bottoms {
  padding: 10rpx 0 12rpx;
}
.btns {
  display: flex;
  justify-content: flex-end;
  margin-top: 24rpx;
  .btn {
    width: 168rpx;
    height: 64rpx;
    border-radius: 68rpx;
    font-weight: 400;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 48rpx;
  }
  .del {
    color: #545454;
    border: 2rpx solid #b9c8c7;
  }
  .pay {
    color: #ffffff;
    background: linear-gradient(270deg, #2c91ff 0%, #9ad2ff 100%);
  }
  .view {
    background: #ffffff;
    border-radius: 68rpx;
    border: 2rpx solid #ea0000;
    color: #ea0000;
  }
}
.line {
  margin-top: 24rpx;
  width: 662rpx;
  height: 1rpx;
  background-color: #e1e1f0;
  transform: scaleY(0.5);
}
</style>