menber-center/components/creditCard.vue

<template>
	<view class="credit-card-container" :class="`${size}`">
		<view class="title-box">
			<view class="title">
				广州市房地产中介服务人员
			</view>
			<view class="text">
				信用信息卡
			</view>
		</view>
		<view class="desc-box" v-if="!isLogin">
			<view class="text">
				请登录后查看
			</view>
		</view>
		<view class="desc-box" v-if="isLogin && !data.id" @click="onGuideClick()">
			<view class="text">
				用户暂未办理信用信息卡<br/>点击了解办理指引&gt;
			</view>
		</view>
		<view class="image-box" v-if="isLogin && data.id">
			<view class="image-item-box">
				<image class="photo" :src="data.photo"></image>
			</view>
			<view class="image-item-box">
				<view class="qrcode-box">
					<image class="qrcode" src="https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/zhengshu/qrCode.png"></image>
				</view>
				<view class="text">
					扫码查信用
				</view>
			</view>
		</view>
		<view class="info-box" v-if="isLogin && data.id">
			<view class="info-item-box">
				<view class="label">
					<span style="letter-spacing: 2em;">姓</span><span>名:</span>
				</view>
				<view class="text">
					{{ data.name }}
				</view>
			</view>
			<view class="info-item-box">
				<view class="label">
					<span style="letter-spacing: 2em;">卡</span><span>号:</span>
				</view>
				<view class="text">
					{{ data.number }}
				</view>
			</view>
			<view class="info-item-box">
				<view class="label">
					<span class="label-text">发卡时间:</span>
				</view>
				<view class="text">
					{{ data.time }}
				</view>
			</view>
		</view>
		<view class="publisher-box" v-if="isLogin && data.id">
			{{ data.publisher }}&nbsp;制
		</view>
	</view>
</template>

<script setup>
	import { ref, defineProps, computed, defineEmits } from 'vue'
	import { getToken } from '@/utils/auth.js'
	
	const emit = defineEmits(['guide'])
	const props = defineProps({
		isLogin: {
			type: Boolean,
			default: false
		},
		data: {
			type: Object,
			default: {
				id: null,
				number: null,
				name: null,
				time: null,
				publisher: null,
				photo: null,
				qrCode: null
			}
		},
		size: {
			type: String,
			default: 'mini' // mini | normal
		}
	})
	
	function onGuideClick() {
		emit('guide')
	}
</script>

<style lang="scss" scoped>
	.credit-card-container {
		height: 100%;
		width: 100%;
		
		.title-box {
			height: 20%;
			text-align: center;
			.title {}
			.text {}
		}
		.image-box {
			height: 40%;
			display: flex;
			
			.image-item-box {
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				.photo {
					height: 100%;
					width: 100%;
					object-fit: cover;
				}
				.qrcode {
					height: 100%;
					width: 100%;
					object-fit: cover;
				}
			}
		}
		.info-box {
			height: 30%;
			.info-item-box {
				display: flex;
				.label {
					width: 39%;
				}
				.text {
					width: 61%;
				}
			}
		}
		.publisher-box {
			height: 8%;
			text-align: center;
		}
	}
	
	.mini {
		@include backgroundImg('https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/zhengshu/credit-card-empty.png');
		padding: 15rpx 10rpx;
		.title-box {
			font-weight: bold;
			font-size: $uni-font-size-4;
			.title {
			}
			.text {
			}
		}
		.desc-box {
			height: 60%;
			display: flex;
			justify-content: center;
			align-items: center;
			text-align: center;
			.text {
				font-size: $uni-font-size-3;
				font-weight: bold;
			}
		}
		.image-box {
			padding: 0 10rpx;
			gap: 20rpx;
			.image-item-box {
				.qrcode-box {
					height: 70%;
					width: 100%;
				}
				.text {
					height: 20%;
					text-align: center;
					font-size: $uni-font-size-4;
					font-weight: bold;
				}
			}
		}
		.info-box {
			padding: 10rpx;
			.info-item-box {
				font-size: $uni-font-size-5;
				line-height: 25rpx;
				font-weight: bold;
			}
		}
		.publisher-box {
			position: relative;
			left: -9rpx;
			padding-top: 10rpx;
			font-size: $uni-font-size-6;
			font-weight: bold;
			transform: scale(0.7);
		}
	}
	
	.normal {
		padding: 25rpx 20rpx;
		.title-box {
			height: 18%;
			font-weight: bold;
			letter-spacing: 5rpx;
			line-height: 60rpx;
			.title {
				font-size: calc($uni-title-font-size-1 + 3rpx);
			}
			.text {
				font-size: calc($uni-title-font-size-1);
			}
		}
		.image-box {
			height: 40%;
			padding: 0 20rpx;
			gap: 20rpx;
			.image-item-box {
				.qrcode-box {
					height: 75%;
					width: 100%;
				}
				.text {
					height: 10%;
					text-align: center;
					font-size: $uni-title-font-size-2;
					font-weight: bold;
				}
			}
		}
		.info-box {
			height: 35%;
			padding: 30rpx 20rpx;
			.info-item-box {
				font-size: $uni-title-font-size-1;
				line-height: 80rpx;
				font-weight: bold;
			}
		}
		.publisher-box {
			padding-top: 10rpx;
			font-size: $uni-title-font-size-3;
			font-weight: bold;
		}
	}
	
	@mixin backgroundColor($color) {
		background: $color;
		background: -moz-linear-gradient(49deg, rgba(234,252,254,1) 0%, rgba(255, 255, 255, 1) 49%, $color 100%);
		background: -webkit-linear-gradient(49deg, rgba(234,252,254,1) 0%, rgba(255, 255, 255, 1) 49%, $color 100%);
		background: -o-linear-gradient(49deg, rgba(234,252,254,1) 0%, rgba(255, 255, 255, 1) 49%, $color 100%);
		background: -ms-linear-gradient(49deg, rgba(234,252,254,1) 0%, rgba(255, 255, 255, 1) 49%, $color 100%);
		background: repeating-linear-gradient(49deg, rgba(234,252,254,1) 0%, rgba(255, 255, 255, 1) 49%, $color 100%), url('https://sylwt.top/api/visitor/resources/image?name=/ydl/menber-center/zhengshu/credit-card-perview.png');
		background-blend-mode: darken;
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.blue {
		@include backgroundColor(rgb(43, 178, 255));
	}
	.red {
		@include backgroundColor(rgb(255, 53, 54));
	}
	.green {
		@include backgroundColor(rgb(61, 210, 59));
	}
</style>