bigdata_WX/pages/identifyPest/recognizeFail/recognizeFail.vue

<template>
	<view>
		<!-- <image src="../../static/Photoguide/9.png" class="failImg" mode=""></image> -->
		<image v-for="(item,index) in imgArr" class="failImg" :src="item"></image>

		<view class="failTxtBox">
			<view class="failBox_top">
				识别失败，正在努力开发中
			</view>
			<view class="failBox_centre">
				您选择的作物是【{{ urlData }}】
			</view>
			<view class="failBox_bottom">
				请确认拍摄的是否为此作物病虫害
			</view>
		</view>

		<view class="failTxt_ul">
			<view class="failTxt_list">
				<view class="failTxt_listTop">
					您的照片
				</view>
				<image v-for="(item,index) in imgArr"  class="failTxt_listImg" :src="item" mode=""></image>
				<view class="failTxt_listBtnBox">
					<u-button type="warning" @click="photographGuide" shape="circle" size="medium">查看拍照指南</u-button>
				</view>
			</view>

			<view class="failTxt_list">
				<view class="failTxt_listTop">
					示例照片
				</view>
				<image class="failTxt_listImg" :src="$imageURL_58003+'/bigservers/' + 'images/Photoguide_4.png'" mode=""></image>
				<view class="failTxt_listBtnBox">
					<u-button @click="returnInterface" class="failTxt_listBtn" type="success" shape="circle" size="medium">再拍一张</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgArr: [], //失败图片
				urlData: '', //作物名称
			}
		},
		methods: {
			// 跳转到拍照指南
			photographGuide() {
				uni.navigateTo({
				    url: '/pages/identifyPest/guidance/guidance'
				})
			},
			// 返回上一页
			returnInterface() {
				uni.navigateBack()
			},
		},
		onLoad(options) {
			console.log(options)
			this.imgArr.push(options.data) 
			this.urlData = options.name
			console.log(this.imgArr)
		}
	}
</script>

<style lang="scss">
	.failImg {
		width: 750rpx;
		height: 550rpx;
		margin-top: -1rpx;
	}

	.failTxtBox {
		margin: 55rpx 0 0 0;

		.failBox_top {
			text-align: center;
			// border: 1px solid #007AFF;
			font-size: 17px;
			font-weight: 550;
		}

		.failBox_centre {
			margin-top: 30rpx;
			text-align: center;
			// border: 1px solid #18B566;
			color: #858585;
		}

		.failBox_bottom {
			margin-top: 10rpx;
			text-align: center;
			// border: 1px solid #2C405Aq;
			color: #858585;
		}
	}

	.failTxt_ul {
		width: 680rpx;
		margin: 55rpx auto;
		display: flex;
		justify-content: space-between;

		.failTxt_list {
			.failTxt_listTop {}

			.failTxt_listImg {
				width: 300rpx;
				height: 350rpx;
			}

			.failTxt_listBtnBox {
				margin-top: 25rpx;
			}

			.failTxt_listBtn {
				width: 310rpx;
			}
		}
	}
</style>