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>
		<kps-image-cutter @ok="onok" @cancel="oncancle" :url="url" :fixed="false" :blob="false" :maxWidth="500" :maxHeight="500"></kps-image-cutter>
	</view>
</template>

<script>
	import kpsImageCutter from "@/components/ksp-image-cutter/ksp-image-cutter.vue";
	export default {
		components: {
			kpsImageCutter
		},
		data() {
			return {
				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: '',
				res:{},
				path:'',
				flag:1
			}
		},
		onLoad() {

		},
		methods: {
			// pest.pests.insect_discern 虫害
			async worm(data) {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=pest.pests.insect_discern',
					data: {
						img_file: data
					}
				})
				this.res = res.data
			},
			//pest.pests.insect_discern病害识别
			async disease(data) {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=pest.pests.plant_discern',
					data: {
						img_file: data
					}
				})
				this.res = res.data
			},
			tabfunction(index) {
				if (index == 0) {
					uni.navigateTo({
						url: "../fourBase/index"
					})
				} else if (index == 1) {
					var that = this
					uni.showModal({
						content: '拍照识别病虫害',
						confirmText: "拍病害",
						cancelText: "拍虫害",
						success: function(res) {
							if (res.confirm) {
								that.flag = 1
								uni.chooseImage({
									count: 1, //默认9
									// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
									sourceType: ['camera'], //从相册选择
									success: (res) => {
										that.url = res.tempFilePaths[0]
									}
								});
							} else if (res.cancel) {
								that.flag = 2
								uni.chooseImage({
									count: 1, //默认9
									// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
									sourceType: ['camera'], //从相册选择
									success: (res) => {
										console.log(1)
										that.url = res.tempFilePaths[0]
									}
								});
							}
						}
					});
				} 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) {
					console.log(5)
				}
			},
			onok(ev) {
				uni.uploadFile({
					url: 'http://182.92.193.64:8002/api/api_gateway?method=base.bases.base_photo', //仅为示例，非真实的接口地址
					filePath: ev.path,
					name: 'img_file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						console.log(this.flag)
						if(this.flag == 1){
						}else if(this.flag == 2){
							this.worm(JSON.parse(uploadFileRes.data).data.src)
						}
						uni.navigateTo({
							url:"../disandpests/index?datas="+JSON.stringify(this.res)+"&path="+JSON.parse(uploadFileRes.data).data.src
						}) 
						
					}
				});
				this.url = "";
				
			},
			oncancle() {
				// url设置为空，隐藏控件
				this.url = ''
			}
		}
	}
</script>
<style lang="scss">
	.index_uswiper {
		width: 95%;
		margin: 0 auto;
		border-radius: 20rpx !important;
	}

	.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>