LJH_Shop/niucloud/addon/mall/web/pages/member/invoice.vue

<template>
    <div class="w-full min-h-[70vh]  bg-page pt-6">
        <div class="main-container flex justify-between">
            <sidebar></sidebar>
            <el-card class="box-card flex-1 ml-4" shadow="never">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
                    <el-tab-pane :label="t('all')" name="all"></el-tab-pane>
                    <el-tab-pane :label="t('invoice')" :name="1"></el-tab-pane>
                    <el-tab-pane :label="t('uninvoice')" :name="0"></el-tab-pane>
                </el-tabs>
                <div>
					<el-table  size="large" class="table-top">
						<el-table-column :label="t('gooodsInfo')" align="center" min-width="260" />
						<el-table-column :label="t('invoiceType')" align="center" min-width="100" />
						<el-table-column :label="t('status')" align="center" min-width="100" />
						<el-table-column :label="t('operation')" align="center" min-width="100" />
					</el-table>
					<div class="table-body min-h-[150px]" v-loading="invoiceTableData.loading">
						<div v-if="!invoiceTableData.loading">
							<template v-if="invoiceTableData.data.length">
								<div v-for="(item, index) in invoiceTableData.data" :key="index">
									<div class="flex items-center justify-between bg-[#f7f8fa] mt-[20px]  px-3 h-[35px] text-[12px] text-[#666]">
										<span class="ml-5">{{ t('orderDate') }}{{ item.orderData.create_time }}</span>
									</div>
									<el-table :data="(item as any).orderData.orderGoods" size="large" border  :show-header="false" :span-method="arraySpanMethod">
										<el-table-column align="left" min-width="260">
											<template #default="{ row }">
												<div class="flex cursor-pointer">
													<div class="flex items-center min-w-[80px] mr-[10px]">
														<img class="w-[80px] h-[80px]" v-if="row.goods_image" :src="img(row.goods_image)" alt="">
														<img class="w-[80px] h-[80px]" v-else src="" alt="">
													</div>
													<div class="flex flex-col justify-between min-w-[200px]">
														<div>
															<div class="multi-hidden text-[14px] leading-[18px]">{{ row.goods_name }}</div>
															<div class="text-[12px] text-[#999] mt-[4px]">{{ row.sku_name }}</div>
														</div>
														<div class="flex items-center justify-between">
															<span class="text-[13px]">￥{{ row.goods_money }}</span>
															<span class="text-[13px]">x{{ row.num }}</span>
														</div>
													</div>
												</div>
											</template>
										</el-table-column>
										<el-table-column min-width="100" align="center">
											<template #default>
												{{item.type_name}}
											</template>
										</el-table-column>
										<el-table-column min-width="100" align="center">
											<template #default="{ row }">
												<div class="">
													{{ item.is_invoice_name }}
												</div>
											</template>
										</el-table-column>
										<el-table-column min-width="100" align="center">
											<template #default>
												<div class="flex justify-center">
													<div  class="w-[86px] h-[30px] leading-[28px] text-[12px] text-[var(--el-color-primary)] rounded-[15px] text-center border-[1px] border-solid border-[var(--el-color-primary)] cursor-pointer" @click="handleDetail(item.id)">{{ t('detail') }}</div>
												</div>
											</template>
										</el-table-column>
									</el-table>
								</div>
							</template>
							<el-empty v-else  description="暂无数据"  :image-size="200" :image="img('static/resource/images/system/empty.png')" />
						</div>
					</div>
					<div class="mt-[16px] flex justify-end">
						<el-pagination v-model:current-page="invoiceTableData.page" v-model:page-size="invoiceTableData.limit"
						layout="total, sizes, prev, pager, next, jumper" :total="invoiceTableData.total"
							@size-change="loadOrderList()" @current-change="loadInvoiceList" />
					</div>
				</div>
            </el-card>
        </div>
		<!-- 发票详情 -->
		<el-dialog v-model="dialogInvoiceVisible" :title="t('invoiceInfo')" width="600px" :destroy-on-close="true">
			<el-scrollbar height="250px" v-loading="loading">
				<el-form :model="invoiceData" label-width="100px" ref="formRef" class="px-[10px]" label-position="left">
					<el-row>
						<el-col :span="12" v-if="invoiceData.is_invoice_name">
							<el-form-item :label="t('invoiceStatus')">
									<div class="input-width">{{ invoiceData.is_invoice_name }}</div>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="invoiceData.header_name">
							<el-form-item :label="t('headerName')">
									<div class="input-width">{{ invoiceData.header_name }}</div>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="invoiceData.header_type_name">
							<el-form-item :label="t('headTypeName')">
									<div class="input-width">{{ invoiceData.header_type_name }}</div>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="invoiceData.name">
							<el-form-item :label="t('name')">
									<div class="input-width">{{ invoiceData.name  }}</div>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="invoiceData.invoice_number">
							<el-form-item :label="t('invoiceNumber')">
									<div class="input-width">{{ invoiceData.invoice_number}}</div>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="invoiceData.type_name">
							<el-form-item :label="t('typeName')">
									<div class="input-width">{{ invoiceData.type_name}}</div>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item :label="t('email')">
									<div class="input-width">{{ invoiceData.email }}</div>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="invoiceData.money">
							<el-form-item :label="t('money')">
									<div class="input-width">{{ invoiceData.money}}</div>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="invoiceData.invoice_time">
							<el-form-item :label="t('invoiceTime')">
									<div class="input-width">{{ invoiceData.invoice_time === 0 ? '' : invoiceData.invoice_time }}</div>
							</el-form-item>
						</el-col>
						<template v-if="invoiceData.header_type == 2">
							<el-col :span="12" v-if="invoiceData.tax_number">
								<el-form-item :label="t('taxNumber')">
										<div class="input-width">{{ invoiceData.tax_number}}</div>
								</el-form-item>
							</el-col>
							<el-col :span="12" v-if="invoiceData.bank_name">
								<el-form-item :label="t('bankTame')">
										<div class="input-width">{{ invoiceData.bank_name }}</div>
								</el-form-item>
							</el-col>
							<el-col :span="12" v-if="invoiceData.bank_card_number">
								<el-form-item :label="t('bankCardNumber')">
										<div class="input-width">{{ invoiceData.bank_card_number }}</div>
								</el-form-item>
							</el-col>
							<el-col :span="12" v-if="invoiceData.address">
								<el-form-item :label="t('address')">
										<div class="input-width">{{ invoiceData.address }}</div>
								</el-form-item>
							</el-col>
							<el-col :span="12" v-if="invoiceData.telephone">
								<el-form-item :label="t('telephone')">
										<div class="input-width">{{ invoiceData.telephone }}</div>
								</el-form-item>
							</el-col>
						</template>
						<el-col :span="12">
							<el-form-item :label="t('applyTime')">
									<div class="input-width">{{ invoiceData.create_time }}</div>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="invoiceData.invoice_voucher">
							<el-form-item :label="t('invoiceVoucher')">
									<div><img class="w-[50px] max-h-[50px] inline-block"  :src="img(invoiceData.invoice_voucher)" alt="" @click="previewImage" ></div>
							</el-form-item>
						</el-col>
						<el-col :span="12" v-if="invoiceData.remark">
							<el-form-item :label="t('remark')">
									<div class="input-width break-all">{{ invoiceData.remark }}</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				
			</el-scrollbar>
			<template #footer>
				<div class="dialog-footer">
					<el-button type="primary" class="!bg-[var(--el-color-primary)] !border-[var(--el-color-primary)]" @click="dialogInvoiceVisible = false" dark>{{ t('confirm') }}</el-button>
				</div>
			</template>
		</el-dialog>
		<el-image-viewer :url-list="previewImageList" v-if="imageViewer.show" @close="imageViewer.show = false" :initial-index="imageViewer.index" :zoom-rate="1" />
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { getMallInvoice , getMallInvoiceDetail} from '@/addon/mall/api/invoice'
import { useRouter } from 'vue-router'

const router = useRouter()
const activeName = ref('all')
// 获取会员列表
const invoiceTableData = reactive({
    page: 1,
    limit: 10,
    total: 0,
    loading: true,
    data: []
})

const loadInvoiceList = (page = 1) =>{
    invoiceTableData.page = page
    invoiceTableData.loading = true
    getMallInvoice({
        page: invoiceTableData.page,
        limit: invoiceTableData.limit,
        is_invoice: activeName.value
    }).then(res =>{
        invoiceTableData.loading = false
        invoiceTableData.total = res.data.total
        invoiceTableData.data = res.data.data.map((el: any) => {
            el.orderData.orderGoods.forEach((v: any) => {
                v.rowNum = el.orderData.orderGoods.length
            })
            return el
        })
    })
}
loadInvoiceList()

// 切换状态
const handleClick = (event:any) =>{
    activeName.value = event
    loadInvoiceList()
}

// 查看发票详情
const loading = ref(false)
const dialogInvoiceVisible = ref(false)
const invoiceData = ref({})
const handleDetail = (id) =>{
	loading.value = true
    getMallInvoiceDetailFn(id)
    dialogInvoiceVisible.value = true
}
const getMallInvoiceDetailFn = async (id:any) => {
    invoiceData.value = await (await getMallInvoiceDetail(id)).data
	if(invoiceData.value.invoice_voucher) {
        previewImageList.push(img(invoiceData.value.invoice_voucher))
    }
    loading.value = false
}

//合并表格行
const arraySpanMethod = ({
    row,
    column,
    rowIndex,
    columnIndex
}) => {
    if (rowIndex === 0) {
        if (columnIndex === 0) {
            return [1, 1]
        } else if (columnIndex > 0) {
            return [row.rowNum, 1]
        } else {
            return [1, 1]
        }
    } else {
        if (columnIndex === 0) {
            return [1, 1]
        } else if (columnIndex > 0) {
            return [0, 0]
        } else {
            return [1, 1]
        }
    }
}
let previewImageList: string[] = reactive([])

/**
 * 查看图片
 */
const imageViewer = reactive({
    show: false,
    index: 0
})
const previewImage = () => {
    imageViewer.show = true
}
</script>

<style lang="scss" scoped>
.box-shadow{
    box-shadow: 0 3px 20px rgba(0,0,0,.08);
}
.table-top :deep(.el-table__body-wrapper) {
    display: none;
}

:deep(.el-table) {
    --el-table-row-hover-bg-color: var(--el-transfer-border-color);
}

</style>