count-pass-app/substaticpages/trace/index.vue

<template>
	<view class="trace">
		<image style="width:100%;border-radius:10rpx;margin-bottom:30rpx"
			src="http://icc-oss.oss-cn-hangzhou.aliyuncs.com/app/czzn-app/trace-banner.png" mode="widthFix" />
		<view class="check-result">
			<view class="title">
				<image style="width:36rpx;margin-right:20rpx" src="../../static/czzn-img/approve/trace.png"
					mode="widthFix" />
				防伪结果查询
			</view>
			<template v-if="traceInfo">
				<view class="info">
					<view class="head">亲爱的{{vehicleOrder.companyName}}: </view>
					<view class="content">
						您好!您所查询的防伪编码为{{vehicleOrder.markingCodeName}},是{{vehicleOrder.tenantName}}生产正品{{vehicleOrder.materialName}}编码。该编码首次查询时间为{{traceInfo.createTime}}当前是第{{traceInfo.number}}次查询。请检验核对，谨防假冒。
					</view>
					<view class="bottom">
						查询时间：{{traceInfo.traceTime}}
					</view>

				</view>
			</template>
			<template v-else>
				<u-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/list.png" text="无法显示该订单的溯源信息">
				</u-empty>
			</template>
		</view>
		<view class="btn-wrap" v-if="traceInfo">
			<view class="btn" @click="toPage(0)">溯源链条</view>
			<view class="btn" @click="toPage(1)">电子票据</view>
		</view>
	</view>
</template>

<script>
	import {
		create
	} from '../../api/trace'
	export default {
		data() {
			return {
				orderId: "",
				tenantId: "",
				traceInfo: null,
				vehicleOrder:null,
			}
		},
		onLoad(options) {
			console.log("获取到参数信息、", options);
			this.orderId = options.orderId
			this.tenantId = options.tenantId
			this.createTrace()

		},
		methods: {
			createTrace() {
				let data = {
					orderId: this.orderId,
					tenantId: this.tenantId
				}
				create(data).then(res => {
					if (res.statusCode == 200 && res.data.code == 0) {
						this.traceInfo = res.data.data
						this.vehicleOrder = res.data.data.vehicleOrder
						console.log("当前订单信息、", this.traceInfo);
					}
				})
			},
			toPage(index) {
				uni.navigateTo({
					url: `/substaticpages/trace/trace?index=${index}&orderId=${this.orderId}&tenantId=${this.tenantId}`
				})
			}
		}
	}
</script>
<style>
	/* #ifndef APP-NVUE */
	page {
		background-color: #f5f7fa;
	}

	/* #endif */
</style>
<style lang="scss" scoped>
	.trace {
		padding: 20rpx 30rpx 150rpx;

		.btn-wrap {
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			left: 0;
			padding: 30rpx;
			background-color: #f5f7fa;
			width: 100%;
			display: flex;
			justify-content: space-around;

			.btn {
				width: 288rpx;
				line-height: 88rpx;
				color: #528BF7;
				border: 1px solid #528BF7;
				text-align: center;
				background-color: #fff;
				border-radius: 10rpx;
				font-size: 30rpx;
			}
		}
	}

	.check-result {
		padding: 0 30rpx;
		background-color: #fff;
		border-radius: 10rpx;

		.title {
			line-height: 90rpx;
			border-bottom: 1px solid #F0F2F5;
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-weight: bold;
		}

		.info {
			font-size: 28rpx;
			line-height: 48rpx;
			padding: 30rpx 0 100rpx;
		}

		.head {
			font-size: 24rpx;
			line-height: 40rpx;
			padding: 0 0 25rpx;
		}

		.content {
			text-indent: 20px;
		}

		.bottom {
			padding-top: 20px;
			text-align: end;
		}
	}
</style>