<template>
	<view class="GoodsChain">
		<image src="https://e-chain.cnskl.com/storage/imageresource/chain-bg.png" class='chainBg' />
		<view class="chain-content">
			<view class="chain-center">
				<image src="/static/images/service-logi.png" mode="aspectFill" class="logo" />
				<view class="name">易品新境区块链溯源证书</view>
				<view class="no">区块链溯源证书：{{info.token}}</view>
				<view class="content">
					<view class="con-item">兹证明：</view>
					<view class="con-item" v-if="info.company">
						{{info.company.name}}，产品符合溯源规范，认证内容如下：特授权其产品在易品新境区块链溯源商城出售！
					</view>
					<view class="con-item">交易哈希: {{info.hash}}</view>
					<view class="con-item">区块链高度: {{info.height}}</view>
				</view>
				<view class="date" v-if="info.applied_at">授权时间: {{info.applied_at}}</view>
				<view class="date">有效期至: {{info.ended_at}}</view>
				<view class="companyInfo">易品新境区块链有限公司</view>
			</view>
		</view>
		<!-- 弹窗提示喽 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
    import { managesChain } from '@/apis/interfaces/goods'
	export default {
		data() {
			return {
				info: ''
			}
		},
        created() {
            managesChain(this.$Route.query.id).then(res=>{
                this.info = res
            })
        },
		methods: {}
	}
</script>

<style lang="scss" scoped>
    page {
        background-color: #F7F7F7;
    }

	.GoodsChain {
		background-color:fff;
		width: 100%;
		min-height: 100vh;
		position: relative;
		z-index: 1;
		.chainBg{
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 2;
		}
		.chain-content{
			width: 100%;
			height: 100vh;
			z-index: 2;
			padding: 18vh 10vw 15vh 10vw ;
			box-sizing: border-box;
			position: relative;
			z-index: 3;
			.chain-center{
				width: 100%;
				height: 100%;
				.logo{
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					position: relative;
					margin-left: -80rpx;
					left: 50%;
					margin-bottom: 20rpx;
					border: solid rgba($color: #fff, $alpha: .3) 10rpx;
				}
				.name{
					font-size: 40rpx;
					font-weight: bold;
					text-align: center;
				}
				.no{
					font-size: 26rpx;
					font-weight: bold;
					text-align: center;
					margin-top: 10rpx;
				}
			
				.content{
					margin-top: 60rpx;
					font-size: 28rpx;
					padding: 0 20rpx;
					.con-item{
						margin-bottom: 30rpx;
						word-break: break-all;
					}
				}
				.date{
					text-align: right;
					margin-bottom: 10rpx;
					padding-right: 20rpx;
				}
				.companyInfo{
					text-align: right;
					margin-bottom: 40rpx;
					padding-right: 20rpx;
				}
			}
		}
	}
</style>
