BlockChainH5/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.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 => {
				console.log(res)
				this.list = res.list
				this.info = res
			})
		},
		methods: {
			priveImg(img) {
				uni.previewImage({
					current: img, // 当前显示图片的http链接
					urls: [img] // 需要预览的图片http链接列表
				})
			},
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				})

			}
		}
	}
</script>

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

	.GoodsAuthentication {
		padding: 30rpx;

		.authenticationTop {
			width: 100%;
			padding: 20rpx 50rpx;
			background-color: $mian-color;
			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>