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

<template>
	<view>
		<u-sticky bgColor="#4680F9">
			<u-tabs :current="activeIndex" :activeStyle="{color:'#fff',fontWeight:'bold'}"
				:inactiveStyle="{color:'#ffffff80'}" :scrollable="false" @change="onChangeIndex" :list="list"
				lineColor="#fff" lineWidth="160rpx"></u-tabs>
		</u-sticky>
		<view v-if="activeIndex==0">
			<u-cell :border="false" :customStyle="{'background':'#f5f7fa','font-weight':'bold','padding':'10rpx 10rpx'}"
				title="产品信息"></u-cell>
			<view class="cell-list">
				<p class="cell-item"><span class="label">产品溯源编码</span><span>{{vehicleOrder.markingCodeName}}</span></p>
				<p class="cell-item"><span class="label">销售区域</span><span>{{vehicleOrder.blockRegion}}</span></p>
			</view>
			<u-cell :border="false" :customStyle="{'background':'#f5f7fa','font-weight':'bold','padding':'10rpx 10rpx'}"
				title="业务流程"></u-cell>
			<view class="cell-list">
				<view class="step-view">
					<view class="step-item" v-for="item,index in vehicleOrderFlowList" :key="index">
						<view class="step-status">
							<span class="point"
								:class="index == vehicleOrderFlowList.length-1?'active-point':''"></span>
							<span class="title">
								<span class="title-text">{{item.name}}</span>
								<span class="title-time">{{item.time}}</span>
							</span>
						</view>
						<view class="step-line">
							<span class="no-line" v-if="index == vehicleOrderFlowList.length-1"></span>
							<span class="line" v-else></span>
							<span class="info">
								<span style="margin-right:40rpx">{{item.showName}}</span>
								<span style="margin-left:50rpx;color: #083af9;" v-if="item.linkAddress"
									@click="todo(item)">{{item.linkTitle}}</span>

							</span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view class="tabs-box">
				<view class="orderStatus-tab">
					<span :class="electronicValue == item.value ? 'active' : ''" v-for="item in traceElectronicTemp"
						@click="onElectronicChange(item)" :key="item.name">
						{{ item.name }}
					</span>
				</view>
			</view>{{"electronicUrl"+electronicUrl}}
			<template v-if="electronicUrl">


				<web-view :src="electronicUrl"></web-view>
			</template>
			<template v-else>
				<u-empty mode="data" icon="https://cdn.uviewui.com/uview/empty/list.png">
					<u-icon name="edit-pen" color="#2979ff" size="28" label="生成票据"></u-icon>
				</u-empty>
			</template>
		</view>
	</view>
</template>

<script>
	import {
		getTraceInfo
	} from '../../api/trace'
	export default {
		data() {
			return {
				showPreview: true,
				activeIndex: 0,
				electronicValue: "601",
				electronicUrl: "",
				orderId: "",
				tenantId: "",
				list: [{
					name: '溯源链条'
				}, {
					name: '订单票据'
				}],
				vehicleOrder: {},
				vehicleOrderFlowList: [{
						stepName: '下单',
						stepTime: '2022-12-21 09:32:56',
						showName: ['水泥出库', '库号：12号']
					},
					{
						stepName: '运输中',
						stepTime: '昨天 09:32',
						showName: ['【机阳县】', '水泥出厂（0571-4718283492）揽收']
					},
				],
				traceElectronicTemp: [{
					name: '质检单',
					value: '101'
				}, {
					name: '合格证',
					value: '103'
				}, {
					name: '磅单',
					value: '102'
				}]
			}

		},
		onLoad(options) {
			console.log("获取到参数信息、", options);
			this.orderId = options.orderId
			this.tenantId = options.tenantId
			if (options.index) {
				this.activeIndex = Number(options.index)
			}
			this.bindTraceInfo()

		},
		methods: {
			todo(item) {
				console.log("开始提交连接、", item);
				uni.navigateTo({
					url: item.linkAddress
				})
			},
			onElectronicChange(item) {
				this.electronicValue = item.value
				this.electronicUrl = ""
				if (this.vehicleOrderElectronicList) {
					var vehicleInfo = this.vehicleOrderElectronicList.filter(p => {
						return p.electronicType == this.electronicValue
					});
					if (vehicleInfo) {
						this.electronicUrl = vehicleInfo[0].address || '';
					}
				}
			},
			onChangeIndex(e) {
				this.activeIndex = e.index
			},
			bindTraceInfo() {
				let data = {
					orderId: this.orderId,
					tenantId: this.tenantId
				}
				var that = this
				getTraceInfo(data).then(res => {
					if (res.statusCode == 200 && res.data.code == 0) {
						that.vehicleOrder = res.data.data.vehicleOrder
						that.vehicleOrderFlowList = res.data.data.vehicleOrderFlowList
						that.vehicleOrderElectronicList = res.data.data.vehicleOrderElectronicList
						// if (that.vehicleOrderElectronicList) {
						// 	var vehicleInfo = that.vehicleOrderElectronicList.filter(p => {
						// 		return p.electronicType == 101
						// 	});
						// 	if (vehicleInfo) {
						// 		console.log("开始打开文件对象，",vehicleInfo);
						// 		uni.downloadFile({
						// 			url: vehicleInfo[0].address,
						// 			success: (result) => {
						// 				const path = result.tempFilePath;
						// 				console.log("开始打开文件，",path);
						// 				uni.openDocument({
						// 					filePath: path,
						// 					fileType: 'pdf',
						// 					success: (res) => {
						// 						uni.navigateBack({
						// 							delta: 1
						// 						});
						// 					},
						// 					fail: (err) => {
						// 						uni.showToast({
						// 							title: '打开文件失败',
						// 							icon: 'none',
						// 							duration: 2000
						// 						});
						// 					}
						// 				});
						// 			}
						// 		})
						// 	}
						// }
					}
					console.log("当前追溯信息、", res);
				})
			},
		}
	}
</script>

<style>
	/* #ifndef APP-NVUE */
	page {
		background-color: #f5f7fa;
	}

	/* #endif */
</style>
<style lang="scss" scoped>
	@import '../../common/css/public.scss';

	.preview {
		top: 150px;
	}

	.cell-list {
		font-size: 30rpx;
		padding: 0 40rpx;
		background-color: #fff;

		.cell-item {
			display: flex;
			justify-content: space-between;
			line-height: 108rpx;
			border-bottom: 1px solid #F2F2F2;

			.label {
				color: #666666;
			}

			&:last-of-type {
				border: none;
			}
		}

		.step-view {
			padding: 30rpx 0;

			.step-item {
				display: flex;
				flex-direction: column;
				line-height: 64rpx;
				margin-bottom: 24rpx;
				color: #666666;
				font-size: 24rpx;

				.step-status {
					display: flex;
					align-items: center;

					.point {
						width: 18rpx;
						height: 18rpx;
						border-radius: 50%;
						background-color: #CBDCFD;
						margin-right: 36rpx;
					}

					.active-point {
						background-color: #528BF7;
					}

					.title {
						.title-text {
							margin-right: 40rpx;
							color: #000;
							font-size: 28rpx;
							font-weight: bold;
						}
					}
				}

				.step-line {
					display: flex;

					.line {
						position: relative;
						width: 2rpx;
						background-color: #CBDCFD;
						margin-right: 52rpx;
						transform: translate(8rpx, 0);

						// height: 100%;
						&::before {
							content: '';
							height: 32rpx;
							width: 2rpx;
							background-color: #CBDCFD;
							position: absolute;
							left: 0rpx;
							top: -24rpx;
						}

						&::after {
							content: '';
							height: 52rpx;
							width: 2rpx;
							background-color: #CBDCFD;
							position: absolute;
							left: 0rpx;
							bottom: -48rpx;
						}
					}

					.no-line {
						margin-right: 54rpx;
					}
				}
			}
		}
	}
</style>