BlockChainH5/pages/goods/attestation.vue

<template>
	<view class="GoodsAuthentication" v-if="loaded">
		<view class="authenticationTop">商品认证溯源码：{{token}}</view>
		<!-- 商品认证 商品和服务 -->
		<view class="authenticationItem">
			<view class="authenticationItemTitle">权证认证</view>
			<view class="authenticationItemcontent">
				<block v-for="(item,index) in goods" :key='index'>
					<view class="authenticationItemcontentItem" >
						<view class="title">{{item.title}}：</view>
						<view class="content" v-if="item.type !== 2">{{item.value || '暂无数据~'}}</view>
						<block v-if="item.type === 2">
							<image class="img" v-if="item.value" :src="item.value" @click="priveImg(item.value)" mode="aspectFill" />
							<view class="content" v-else>暂无数据~</view>
						</block>
					</view>
				</block>
			</view>
		</view>

		<!-- 企业认证 （商品和服务通用） -->
		<view class="authenticationItem">
			<view class="authenticationItemTitle">企业认证</view>
			<view class="authenticationItemcontent" v-if="certification">
				<view class="authenticationItemcontentItem" v-if="certification.name ">
					<view class="title">企业名称：</view>
					<view class="content">{{certification.name || '暂无数据'}}</view>
				</view>
				<view class="authenticationItemcontentItem" v-if="certification.address" >
					<view class="title">企业地址：</view>
					<view class="content">{{certification.address || '暂无数据'}}</view>
				</view>
				<view class="authenticationItemcontentItem" v-if="certification.certification.code">
					<view class="title">统一信用代码：</view>
					<view class="content">{{certification.certification.code || '暂无数据'}}</view>
				</view>
				<view class="authenticationItemcontentItem" v-if="certification.industry.title">
					<view class="title">行业：</view>
					<view class="content">{{certification.industry.title || '暂无数据'}}</view>
				</view>
				<view class="authenticationItemcontentItem" v-if="certification.range">
					<view class="title">经营范围：</view>
					<view class="content">{{certification.range || '暂无数据'}}</view>
				</view>
				<view class="authenticationItemcontentItem" v-if="certification.contack">
					<view class="title">联系电话：</view>
					<u-icon name="phone-fill" v-if='certification.contack'
						@click="call(certification.contact)" color="#2979ff" label-color="#2979ff" label-size="26"
						:label='certification.contact' />
					<view class="content" v-else> 暂无数据 </view>
				</view>
				<view class="authenticationItemcontentItem" v-if="certification.certification.license">
					<view class="title">营业执照：</view>
					<image class="img" v-if='certification.certification.license'
						:src="certification.certification.license"
						@click="priveImg(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 {
				token:"",
				certification: {},
				goods:[],
				loaded:false
			}
		},
		created() {
			managesAttestation(this.$Route.query.id).then(res => {
				this.$nextTick(() => {
					this.certification = res.certification
					this.goods = res.goods
					this.token = res.token
					this.loaded = true
				})
			})
		},
		methods: {
			priveImg(img) {
				uni.previewImage({
					longPressActions: {
					    itemList: []
					},
					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>