Hfive/pages/electric/index.vue

<template>
	<view class="content">
		<view class="topswiper">
			<u-swiper :list="swiperlist" height="166"></u-swiper>
		</view>
		<view class="contentgrid flex-between">
			<view class="flex-colum" v-for="(item,index) in blueticket.img" :key="index"
				@click="clicknavigateTo(item,index)">
				<image :src="item.img" mode="aspectFill"></image>
				<text>{{item.title}}</text>
			</view>
		</view>
		<view class="contentlist">
			<view class="contentlisttitle">
				企业信息
			</view>
			<view class="contentlistitem flex-between" style="margin-top: 32rpx;">
				<text class="contentlistitemone">企业名称</text>
				<text class="contentlistitemtow">{{blueticket.store.title}}</text>
			</view>
			<view class="contentlistitem flex-between">
				<text class="contentlistitemone">纳税人税号</text>
				<text class="contentlistitemtow">{{blueticket.store.creditCode}}</text>
			</view>
			<view class="contentlistitem flex-between">
				<text class="contentlistitemone">地址</text>
				<text class="contentlistitemtow">{{blueticket.store.businessAddress}}</text>
			</view>
		</view>
		<view class="contentlist">
			<view class="contentlisttitle">
				蓝票数据概况
			</view>
			<view class="contentlistitem flex-between">
				<text class="contentlistitemone">发票合计金额</text>
				<text class="contentlistitemtow">{{blueticket.xj.fphjje}}</text>
			</view>
			<view class="contentlistitem flex-between">
				<text class="contentlistitemone">发票合计税额</text>
				<text class="contentlistitemtow">{{blueticket.xj.fphjse}}</text>
			</view>
			<view class="contentlistitem flex-between">
				<text class="contentlistitemone">剩余授信额度</text>
				<text class="contentlistitemtow">{{blueticket.xj.sysxed}}</text>
			</view>
			<view class="contentlistitem flex-between">
				<text class="contentlistitemone">剩余纸质发票张数</text>
				<text class="contentlistitemtow">{{blueticket.xj.syzzfpzs}}</text>
			</view>
			<view class="contentlistitem flex-between">
				<text class="contentlistitemone">已开具蓝票张数</text>
				<text class="contentlistitemtow">{{blueticket.xj.ykjlpzs}}</text>
			</view>
			<view class="contentlistitem flex-between">
				<text class="contentlistitemone">已使用发票授信额度</text>
				<text class="contentlistitemtow">{{blueticket.xj.ysyfpsxed}}</text>
			</view>
			<view class="contentlistitem flex-between">
				<text class="contentlistitemone">已使用发票张数</text>
				<text class="contentlistitemtow">{{blueticket.xj.ysyfpzs}}</text>
			</view>
			<view class="contentlistitem flex-between">
				<text class="contentlistitemone">总授信额度</text>
				<text class="contentlistitemtow">{{blueticket.xj.zsxed}}</text>
			</view>
		</view>
		<!-- <view class="contentbotton">
			<view class="contentbottontitle flex-between">
				<text class="contentbottontitleone">最近开票申请</text>
				<text class="contentbottontitletow">更多申请</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperlist: [
					'https://shuzu-download.oss-cn-shanghai.aliyuncs.com/advertise/2024-05-08-10-52-th-663ae8fc73220.png'
				],
				enterprise: {}, //企业
				blueticket: {
					xj: '',
					store: ''
				} //蓝票
			}
		},
		async onLoad(e) {
			let data = await this.api.hfivestoreqy()
			this.blueticket = data.data
		},
		methods: {

			clicknavigateTo(item, index) {
				switch (index) {
					case 0:
						// uni.pro.navigateTo('webview/webview', {
						// 	url: c
						// });
						uni.pro.navigateTo('electric/bluetools');
						break;
					case 1:
						uni.pro.navigateTo('electric/toexamine');
						// uni.pro.navigateTo(b, {
						// 	url: c
						// });
						break;
					case 2:
						uni.pro.navigateTo('electric/Invoicedgoods');
						break;
					case 3:
						uni.pro.navigateTo('electric/orderinquiry');
						break;
					case 4:
						uni.pro.navigateTo('electric/auditrecords');
						break;
					case 5:
						uni.pro.navigateTo('electric/issuer');
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F9F9F9;
	}

	.content {
		padding: 0 28rpx;

		.topswiper {
			padding-top: 32rpx;
			width: 100%;
		}

		.contentgrid {
			margin-top: 32rpx;
			padding: 0 32rpx 32rpx 32rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 24px 24px 24px 24px;

			&::after {
				content: "";
				width: 25%;
				display: inline-block;
			}

			.flex-colum {
				width: 25%;
				margin-top: 36rpx;

				image {
					width: 70rpx;
					height: 70rpx;
				}

				text {
					margin-top: 16rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
				}
			}
		}

		.contentlist {
			margin-top: 32rpx;
			padding: 32rpx;
			width: 100%;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			.contentlisttitle {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}

			.contentlistitem {
				margin-top: 24rpx;

				.contentlistitemone {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
				}

				.contentlistitemtow {
					width: 55%;
					text-align: right;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; //溢出不换行
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}

		.contentbotton {
			margin-top: 44rpx;
			width: 100%;
			padding: 20rpx 32rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			.contentbottontitle {
				.contentbottontitleone {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}

				.contentbottontitletow {
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #5872C9;
				}
			}
		}
	}
</style>