uniapp-h5/src/pages/ycysp/component/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 goPwd(e){
        if(e.stopPropagation) { //W3C阻止冒泡方法  
            e.stopPropagation();  
        }
        emits('pwd-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>