barter-app/pages/goods/tracedTo.vue

<template>
    <view class="GoodsAuthentication">
    	<view class="authenticationTop" v-if='list.length>0'>区块链溯源码：{{info.token}}</view>
    	<!-- 进度条 -->
    	<view v-if='list.length>0' class='timeAxis'>
            <view class="box-top"  v-for="(item,index) in list" :key="index">
            	<view class="left-box-top"><span>商品交易</span>{{item.blockTime}}</view> <!-- 左边 -->
            	<view class="line" :class="{active:true,none:index==(list.length-1)}"><!-- 中线 -->
            		<view class="dot" :class="{active:true}"></view><!-- 圆点 -->
            	</view>
                
                <!-- 右边 -->
            	<view class="right-box-top">
            		<view class="authenticationItem">
            			<view class="authenticationItemcontent">
            				<view class="authenticationItemcontentItem" v-if="item.goods">
            					<view class="title">名称：</view>
            					<view class="content">{{item.goods.name}}</view>
            				</view>
            				<view class="authenticationItemcontentItem" v-if="item.goods">
            					<view class="title">规格：</view>
            					<view class="content">{{item.goods.skus[0].unit}}</view>
            				</view>
            				<view class="authenticationItemcontentItem">
            					<view class="title">购买数量：</view>
            					<view class="content">{{item.amount}}</view>
            				</view>
            				<view class="authenticationItemcontentItem">
            					<view class="title">区块链高度：</view>
            					<view class="content">{{item.height}}</view>
            				</view>
            				<view class="authenticationItemcontentItem">
            					<view class="title">交易哈希：</view>
            					<view class="content">{{item.hash}}</view>
            				</view>
            				<view class="zhushi">注释：{{item.note}}</view>
            			</view>
            		</view>
            	</view>
            </view>
        </view>
    
    	<no-list v-if="list.length === 0" name='no-chain' txt="没有任何数据哦~" />
    	<!-- 弹窗提示喽 -->
    	<u-toast ref="uToast" />
    </view>
</template>

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

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

	.GoodsAuthentication {
		padding: 30rpx;
		.authenticationTop {
			width: 100%;
			padding: 20rpx 50rpx;
			background-color: #c82626;
			font-size: 26rpx;
			color: #fff;
			border-radius: 60rpx;
			word-break: break-all;
			text-align: center;
			margin-bottom: 40rpx;
		}

		// 商品认证
		.authenticationItem {
			width: 100%;
			min-height: 300rpx;
			.authenticationItemTitle {
				font-size: 30rpx;
				color: #333333;
				font-weight: 600;
				padding: 30rpx 20rpx;
			}
		}

		.timeAxis {
			margin-top: 60rpx;
		}
	}
    
    .box-top{
    	width: 100%;
    	min-height: 120rpx;
    	box-sizing: border-box;
    	display: flex;
    	flex-direction: row;
    	.left-box-top{
    		width: 124rpx;
    		text-align: center;
    		color: #cacaca;
    		font-size: 22rpx;
    		padding-top: 0;
    		display: flex;
    		flex-direction: column;
    		align-items: flex-end;
    		justify-content: flex-start;
    		box-sizing: border-box;
    		span{
    			font-size: 28rpx;
    			// font-weight: bold;
    			color:#333;
    			padding-bottom: 10rpx;
    			padding-right: 4rpx;
    		}
    	}
    	.line{
    		width: 2rpx;	
    		background-color: rgba(228,231,237,1);
    		margin: 0 20rpx 0 20rpx;
    		padding-top: 0;
    		.dot{
    			width: 20rpx;
    			height: 20rpx;
    			background-color: rgba(228,231,237,1);
    			border-radius: 50%;
    			position: relative;
    			left: -10rpx;
    		}
    	}
    	.right-box-top{
    		flex: 1;
    		width: calc( 100% - 170rpx);
    		padding: 0 0 20rpx 0;
    		// 商品认证
    		.authenticationItem{
    			width: 100%;
    			.authenticationItemcontent{
    				width: 100%;
    				background-color: #fff;
    				border-radius: 20rpx;
    				border: solid rgba(200,38,0,.05) 6rpx;
    				box-shadow:2rpx 2rpx 20rpx 0rpx rgba(200,38,0,.051);
    				padding:10rpx 20rpx;
    				.zhushi{
    					font-size: 24rpx;
    					color: #999;
    					padding: 10rpx 0;
    					word-wrap:break-word; 
    				}
    				.authenticationItemcontentItem{
    					display: flex;
    					flex-direction: row;
    					align-items: flex-start;
    					justify-content: flex-start;
    					box-sizing: border-box;
    					padding: 12rpx 0;
    					font-size: 26rpx;
    					.title{
    						width: 160rpx;
    					}
    					.content{
    						text-overflow: ellipsis;
    						width: calc( 100% - 180rpx);
    						word-wrap:break-word; 
    					}
    					.img{
    						width: 220rpx;
    						height: 160rpx;
    					}
    				}
    			}
    		}
    		
    	}
    }
    //激活元素
    .active{
    	background-color: #c82626 !important;
    }
    // 隐藏元素
    .none{
    	background-color: rgba(0,0,0,0) !important;
    }
</style>