circulation_ancientCoins_new/components/visitorInfo.vue

<template>
	<view class="user-info-com" @click="$emit('click')">
		<view class="user-info">
			<view class="user-top">
				<view class="user-left">
					<view class="user-name PfScSemibold ft38">{{ visitorInfo.coin_name }}</view>
					<view class="user-num">{{ visitorInfo.year }}</view>
				</view>
				<view class="user-right" v-if="visitorInfo.status" :class="className[visitorInfo.status]">{{ descObj[visitorInfo.status] }}</view>
				<view class="user-right" v-else :class="className[visitorInfo.ancient_coin_status]">{{ visitorInfo.ancient_coin_status_desc }}</view>
			</view>
			<view class="user-bottom gap24 flex-between" v-if="visitorInfo.format || visitorInfo.operate_time">
				<view>
					<view v-if="visitorInfo.format">板式：{{ visitorInfo.format }}</view>
				</view>
				<view v-if="visitorInfo.operate_time">{{ visitorInfo.operate_time }} </view>
			</view>
		</view>

	</view>
</template>

<script>
export default {
	name: "visitorInfo",
	data() {
		return {
			cssUrl: this.cssUrl,
			className: {
				0: 'notStore',//未入库
				'1': 'inventory',//库存
				'2': 'outBound'//出库
			},
			descObj: {
				0: '未入库',//未入库
				'1': '库存',//库存
				'2': '已出库'//出库
			},
		}
	},
	props: {
		visitorInfo: {
			type: Object,
			// default: () => ({
			// 	name: '机制光绪通宝',
			// 	year: '1889年',
			// 	phone: '1310684212',
			// 	id: 3,
			// 	time: '2025.12.21 13:23',
			// 	address: '北京公博二部',
			// 	plateType:'板式：库平一钱满汉广',
			// 	type: '1'
			// })
		},
	},
	methods: {
		resetUinfo() {
			this.$emit('resetUinfo')
		}
	}
}
</script>

<style scoped lang="scss">
.user-info-com {
	font-family: PingFang SC;
	.user-info {
		margin: 0 18rpx 20rpx;
		background: #FFFFFF;
		padding: 34rpx 24rpx 44rpx;
		position: relative;

		.user-bg {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}
	}

	.gap24 {
		gap: 24rpx;
	}

	.phone {
		display: flex;
		align-items: center;
		height: 39rpx;
		line-height: 39rpx;

		img {
			width: 34rpx;
			height: 34rpx;
			margin-left: 12rpx;
		}
	}

	.user-top,
	.user-bottom {
		position: relative;
		display: flex;
		justify-content: space-between;
		z-index: 8;
	}

	.user-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.user-left {
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		&::before{
			content: '';
			display: block;
			position: absolute;
			width: 8rpx;
			height: 34rpx;
			border-radius: 10rpx;
			background: #58CA7F;
			left: 0;
			top: 8rpx;
		}

	}

	.user-name {
		font-size: 38rpx;
		color: #333333;
		line-height: 50rpx;
	}

	.user-num {
		margin-left: 24rpx;
		font-size: 28rpx;
		color: #79624A;
		line-height: 40rpx;

		font-size: 28rpx;
		font-weight: normal;
		line-height: 44rpx;
		letter-spacing: 0.86rpx;
		color: #242833;

	}

	.user-right {
		font-size: 26rpx;
		text-align: center;
		letter-spacing: 0.69rpx;
		color: #999999;
		line-height: 36rpx;
		border-radius: 6rpx;
		background: #FCFCFC;
		border: 1.5rpx solid #999999;
		padding: 2rpx 18rpx;
	}
	.notStore{
		color: #999999;
		background: #FCFCFC;
		border-color: #999999;
	}
	.inventory{
		color: #5FA1CB;
		background: #F7FCFF;
		border-color: #5FA1CB;
	}
	.outBound{
		color: #58CA7F;
		background: #F8FFF7;
		border-color: #5FA1CB;
		
	}

	.user-bottom {
		margin-top: 32rpx;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0.86rpx;
		color: #999999;
	}

	.user-card {
		font-size: 30rpx;
		color: #949699;
		line-height: 36rpx;
	}

	.user-last-time {
		font-size: 30rpx;
		color: #949699;
		line-height: 36rpx;
	}

}
</style>