BlockChainH5/pages/goods/attestation.vue

<template>
	<view class="GoodsAuthentication">
		<view class="authenticationTop">区块链溯源码：{{info.token}}</view>
		<!-- 商品认证 商品和服务 -->
		<view class="authenticationItem">
			<view class="authenticationItemTitle">商品认证</view>
			<view class="authenticationItemcontent" v-if="info.goods">
				<view class="authenticationItemcontentItem">
					<view class="title">{{info.goods.type ===1?'商品名称':'项目名称'}}: </view>
					<view class="content">{{info.goods.name || '暂无数据'}}</view>
				</view>
				<view class="authenticationItemcontentItem" v-if="info.goods.type ===1">
					<view class="title">生产批次：</view>
					<view class="content">{{info.goods.batch || '暂无数据'}}</view>
				</view>
				<view class="authenticationItemcontentItem" v-if="info.goods.type ===2">
					<view class="title">项目分类：</view>
					<view class="content">{{info.goods.category || '暂无数据'}}</view>
				</view>

				<view class="authenticationItemcontentItem" v-if="info.goods.type ===1">
					<view class="title">规格：</view>
					<view class="content">{{info.goods.skus[0].unit || '暂无数据'}}</view>
				</view>
				<view class="authenticationItemcontentItem">
					<view class="title">数量：</view>
					<view class="content">{{info.goods.skus[0].stock || '暂无数据'}}</view>
				</view>
				<view class="authenticationItemcontentItem">
					<view class="title">售价：</view>
					<view class="content">{{info.goods.skus[0].price || '暂无数据'}}</view>
				</view>
				<view class="authenticationItemcontentItem" v-if="info.goods.type ===1">
					<view class="title">生产日期：</view>
					<view class="content">{{info.goods.producted_at || '暂无数据'}}</view>
				</view>
				<view class="authenticationItemcontentItem">
					<view class="title">{{info.goods.type ===1?'保质期':'有效期'}}：</view>
					<view class="content">{{info.goods.expiried_at || '暂无数据'}}</view>
				</view>
				<view class="authenticationItemcontentItem" v-if="info.goods.type ===1">
					<view class="title">生产厂家：</view>
					<view class="content">{{info.goods.product_name || '暂无数据'}}</view>
				</view>
				<view class="authenticationItemcontentItem" v-if="info.goods.type ===1">
					<view class="title">生产地：</view>
					<view class="content">{{info.goods.product_address || '暂无数据'}}</view>
				</view>
				<view class="authenticationItemcontentItem">
					<view class="title">供应商：</view>
					<view class="content">{{info.goods.skus[0].price || '暂无数据'}}</view>
				</view>
				<view class="authenticationItemcontentItem">
					<view class="title">经营许可证：</view>
					<view class="content">{{info.goods.lisence || '暂无数据'}}</view>
				</view>
				<view class="authenticationItemcontentItem">
					<view class="title">实物照片：</view>
					<image class="img" v-if="info.goods.cover" :src="info.goods.cover"
						@click="priveImg(info.goods.cover)" mode="aspectFill" />
					<view class="content" v-else>暂无数据</view>
				</view>
			</view>
		</view>

		<!-- 企业认证 （商品和服务通用） -->
		<view class="authenticationItem">
			<view class="authenticationItemTitle">企业认证</view>
			<view class="authenticationItemcontent" v-if="info.certification">
				<view class="authenticationItemcontentItem">
					<view class="title">企业名称：</view>
					<view class="content">{{info.certification.name || '暂无数据'}}</view>
				</view>
				<view class="authenticationItemcontentItem">
					<view class="title">企业地址：</view>
					<view class="content">{{info.certification.address || '暂无数据'}}</view>
				</view>
				<view class="authenticationItemcontentItem">
					<view class="title">统一信用代码：</view>
					<view class="content">{{info.certification.certification.code || '暂无数据'}}</view>
				</view>
				<view class="authenticationItemcontentItem">
					<view class="title">行业：</view>
					<view class="content">{{info.certification.industry.title || '暂无数据'}}</view>
				</view>
				<view class="authenticationItemcontentItem">
					<view class="title">经营范围：</view>
					<view class="content">{{info.certification.range || '暂无数据'}}</view>
				</view>
				<view class="authenticationItemcontentItem">
					<view class="title">联系电话：</view>
					<u-icon name="phone-fill" v-if='info.certification.contack'
						@click="call(info.certification.contact)" color="#2979ff" label-color="#2979ff" label-size="26"
						:label='info.certification.contact' />
					<view class="content" v-else> 暂无数据 </view>
				</view>
				<view class="authenticationItemcontentItem">
					<view class="title">营业执照：</view>
					<image class="img" v-if='info.certification.certification.license'
						:src="info.certification.certification.license"
						@click="priveImg(info.certification.certification.license)" mode="aspectFill" />
					<view class="content" v-else>暂无数据</view>
				</view>
			</view>
		</view>

		<!-- 弹窗提示喽 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		managesAttestation
	} from '@/apis/interfaces/goods'
	export default {
		data() {
			return {
				info: ''
			}
		},
		created() {
			managesAttestation(this.$Route.query.id).then(res => {
				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;
		}

		// 商品认证
		.authenticationItem {
			width: 100%;
			min-height: 300rpx;
			margin-top: 20rpx;

			.authenticationItemTitle {
				font-size: 30rpx;
				color: #333333;
				font-weight: 600;
				padding: 30rpx 20rpx;
			}

			.authenticationItemcontent {
				width: 100%;
				min-height: 500rpx;
				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;

				.authenticationItemcontentItem {
					display: flex;
					flex-direction: row;
					align-items: flex-start;
					justify-content: flex-start;
					box-sizing: border-box;
					padding: 20rpx 0;
					font-size: 24rpx;

					.title {
						width: 180rpx;
					}

					.content {
						text-overflow: ellipsis;
						width: calc(100% - 180rpx);
					}

					.img {
						width: 340rpx;
						height: 200rpx;
					}
				}
			}
		}
	}
</style>