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="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,
				show: false
			}
		},
		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
					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) {
				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) {
							this.disease(JSON.parse(uploadFileRes.data).data.src)
						} 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 = ''
			},
			confirm() {
				this.flag = 1
				uni.chooseImage({
					count: 1, //默认9
					// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: (res) => {
						this.url = res.tempFilePaths[0]
					}
				});
			},
			cancel() {
				this.flag = 2
				uni.chooseImage({
					count: 1, //默认9
					// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					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;
	}

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