popularize-front/pages_order/invoiceRecords.vue

<template>
     <view class='invoiceRecords'>
        <view class="head-box"></view>
        <Navbar :title="$t('pages_order.invoice_records.title')" :autoBack="true" :bgColor="bgColor" leftIconSize="18px" height="100rpx" :leftIconColor="leftIconColor" :titleStyle="{color:fontColor}" /><!-- 开票记录 -->
        <view class="content contentPosition_">
            <view class="info cardStyle_" v-for="(item, index) in list" :key="index">
                <view class="left" v-if="item.noType == 0">
                    <image :src="item.activityList[0] &&
					 item.activityList[0].image &&
					 item.activityList[0].image.split(',')[0]" alt=""/>
                </view>
				<view class="left" v-if="item.noType == 1">
					<image :src="item.travelList[0] &&
					 item.travelList[0].image &&
					 item.travelList[0].image.split(',')[0]" alt=""/>
				</view>
                <view class="right">
                    <view class="detailed">
                        <view class="title" v-if="item.noType == 0">
							{{item.activityList[0] && $ot(item.activityList[0], 'active', 'title')}}
						</view>
						 <view class="title" v-if="item.noType == 1">
							 {{item.travelList[0] && $ot(item.travelList[0], 'travel', 'title')}}
						 </view>
                        <view class="date">{{item.createTime}}</view>
						<view class="date"
						style="padding-top: 0;">{{item.name}}</view>
                        <view class="emil">{{item.emil}}</view>
                    </view>
                    <view class="data">
                        <text>{{$t('pages_order.invoice_records.standard_ticket')}}</text><!-- 标准票 -->
                        <text>×1</text>
                        <text class="btn">{{ $t(`pages_order.invoice_records.states.${stateKeys[item.state]}`) }}</text>
                    </view>
                </view>
            </view>
			<uv-load-more :status="uvLoadMore" fontSize="24rpx" dashed line />
		</view>
     </view>
</template>

<script>
import Navbar from '@/pages/components/Navbar.vue'
import { globalMixin } from '../pages/mixins/globalMixin';
import listMixin from '@/mixins/list.js'
export default {
     mixins: [globalMixin, listMixin],
    components:{
        Navbar
    },
    data() {
        return {
			mixinsListApi : 'getInvoicePageList',
			state : ['开票中', '已开票', '开票失败'], // 保留原有数组以兼容
			stateKeys : ['invoicing', 'invoiced', 'failed'], // 新增状态键数组用于国际化
        };
    },
    components: {

    },
    computed: {

    },
    watch: {

    },
    created() {
		
    },
	onShow() {
		console.log("进入了发票管理")
	},
    mounted() {
		
    },
    methods: {
		getImage(){
			return item.image && item.image.split(',')[0]
		},
    }
};
</script>

<style scoped lang="scss">
.invoiceRecords {
	.content{
		margin-top: 40rpx;
		.title,
		.date{
			overflow:hidden; //超出的文本隐藏
			text-overflow:ellipsis; //溢出用省略号显示
			white-space:nowrap; //溢出不换行
			width: 370rpx;
		}
	}
    .info {
        margin: 10rpx 32rpx 0rpx;
        padding: 35rpx 0 35rpx 24rpx;
        border-radius: 26rpx;
		.left{
			flex-shrink: 0;
		}
        .right {
            .data {
				padding-top: 10rpx;
                display: flex;
                justify-content: space-between;
                .btn {
                    background: #381615;
                    color: $uni-color-primary;
                    padding: 10rpx 40rpx;
                    border-radius: 30rpx 0px 0px 30rpx;
                }
            }
        } 
    }
    
}
</style>