bigDataApp/pages/index/index.vue

<template>
	<view class="content">
		<u-swiper :list="list" mode="dot" class="index_uswiper" height='300'></u-swiper>
		<view class="function">
			<view class="function_item" v-for="(item,index) in functionimg" :key="index" @click="tabfunction(index)">
				<image :src="item.src" mode=""></image>
				<p>{{item.text}}</p>
			</view>
		</view>
		<view class="equipment">
			<p class="equipment_p">系统设备</p>
			<view class="equipment_item">
				<view class="equipment_item_img" v-for="(item,index) in equipmentimg" :key="index" @click="tabequipment(index)">
					<image :src="item.src" mode=""></image>
				</view>
			</view>
		</view>
		<u-modal v-model="show" :mask-close-able="true" title="" :show-cancel-button="true" confirm-text="拍病害" cancel-text="拍虫害"
		 content="拍照识别病虫害" @confirm="confirm" @cancel="cancel"></u-modal>
		<kps-image-cutter @ok="onok" @cancel="oncancle" :url="url" :fixed="false" :blob="true" :maxWidth="500" :maxHeight="380" :height="380"></kps-image-cutter>
		<view class="loading" v-if="loadTF">
			<u-loading  mode="flower" size="100" :show="true" ></u-loading>
		</view>
	</view>
</template>

<script>
	import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
	export default {
		components: {
			kpsImageCutter
		},
		data() {
			return {
				loadTF:false,
				currentPage: 'tabBar1',
				list: [{
					image: '../../static/image/index/11.png'
				}, ],
				functionimg: [{
						src: "../../static/image/index/1.png",
						text: "四情基地"
					},
					{
						src: "../../static/image/index/2.png",
						text: "病虫识别"
					},
					{
						src: "../../static/image/index/3.png",
						text: "专家诊断"
					},
					{
						src: "../../static/image/index/4.png",
						text: "售后服务"
					}
				],
				equipmentimg: [{
						src: "../../static/image/index/5.png"
					},
					{
						src: "../../static/image/index/6.png"
					},
					{
						src: "../../static/image/index/7.png"
					},
					{
						src: "../../static/image/index/8.png"
					},
					{
						src: "../../static/image/index/9.png"
					},
					{
						src: "../../static/image/index/10.png"
					}
				],
				url: '',
				path: '',
				flag: 1,
				show: false
			}
		},
		onLoad() {
			
		},
		onShow(){
			this.loadTF = false
		},
		methods: {
			tabfunction(index) {
				if (index == 0) {
					uni.navigateTo({
						url: "../fourBase/index"
					})
				} else if (index == 1) {
					var that = this
					this.show = true
				} else if (index == 2) {
					uni.navigateTo({
						url: "../expertDiagnosis/index"
					})
				} else if (index == 3) {
					uni.navigateTo({
						url: "../afterSale/index"
					})
				}
			},
			tabequipment(index) {
				if (index == 0) {
					uni.navigateTo({
						url: "../cb/index/index"
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: "../prevention/index"
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: "/pages/monitor/index"
					})
				} else if (index == 3) {
					uni.navigateTo({
						url: "../environment/index"
					})
				} else if (index == 4) {
					uni.navigateTo({
						url: "../equipMange/index/index"
					})
				} else if (index == 5) {
					uni.showToast({
					    title: '此功能暂未开放',
					    duration: 2000,
						icon:"none"
					});
				}
			},
			onok(ev) {
				this.path = this.url
				console.log(ev)
				this.loadTF = true
				uni.showLoading({
					mask:true,
					success:function(){
						console.log(999)
					}
				});
				if(this.flag == 2){
					console.log('111')
					// pest.pests.insect_discern 虫害
					// uni.uploadFile({
					// 	// url: 'http://182.92.193.64:8002/api/api_gateway?method=base.bases.base_photo', //仅为示例，非真实的接口地址
					// 	url: 'http://182.92.193.64:8002/api/api_gateway?method=pest.pests.insect_discern', //仅为示例，非真实的接口地址
					// 	filePath: ev.path,
					// 	name: 'img_file',
					// 	formData: {
					// 		'user': 'test'
					// 	},
					// 	success: (uploadFileRes) => {
					// 		console.log(JSON.parse(uploadFileRes.data))
					// 		uni.navigateTo({
					// 			url: "../disandpests/index?datas=" + uploadFileRes.data + "&path=" + ev.path
					// 		})
					// 	}
					// });
				}else if(this.flag == 1){
					//pest.pests.insect_discern病害识别
					uni.showLoading({
					    title: '加载中'
					});
					uni.uploadFile({
						// url: 'http://182.92.193.64:8002/api/api_gateway?method=base.bases.base_photo', //仅为示例，非真实的接口地址
						url: 'http://182.92.193.64:8002/api/api_gateway?method=pest.pests.plant_discern', //仅为示例，非真实的接口地址
						filePath: ev.path,
						name: 'img_file',
						formData: {
							'user': 'test'
						},
						success: (uploadFileRes) => {
							console.log(JSON.parse(uploadFileRes.data))
							uni.navigateTo({
								url: "../disandpests/index?datas="+uploadFileRes.data + "&path=" + ev.path
							})
						}
					});
				}
				this.url = "";
			},
			oncancle() {
				// url设置为空，隐藏控件
				this.url = ''
			},
			confirm() {
				this.flag = 1
				uni.chooseImage({
					count: 1, //默认9
					// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera','album'], //从相册选择
					success: (res) => {
						this.url = res.tempFilePaths[0]
					}
				});
				console.log(1)
			},
			cancel() {
				this.flag = 2
				uni.chooseImage({
					count: 1, //默认9
					// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera','album'], //从相册选择
					success: (res) => {
						console.log(1)
						this.url = res.tempFilePaths[0]
					}
				});
			}
		}
	}
</script>
<style lang="scss">
	.index_uswiper {
		width: 95%;
		margin: 0 auto;
		border-radius: 20rpx !important;
	}
	.loading{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 100;
		width:100%;
		height: 100vh;
		background-color: rgba(0,0,0,0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.function {
		width: 95%;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-around;

		.function_item {
			width: 18%;
			text-align: center;

			image {
				width: 90rpx;
				height: 90rpx;
			}

			p {
				font-size: 24rpx;
			}
		}
	}

	.equipment {
		width: 95%;
		margin: 30rpx auto 0;

		.equipment_p {
			width: 90%;
			border-left: 8rpx solid #4BB85F;
			font-weight: 700;
			padding-left: 20rpx;
			margin-bottom: 20rpx;
		}

		.equipment_item {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.equipment_item_img {
				width: 49%;
				margin-top: 20rpx;

				image {
					width: 100%;
					height: 170rpx;
				}
			}
		}
	}
</style>