117 lines
2.7 KiB
Vue
117 lines
2.7 KiB
Vue
<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>
|