CjyTravel/subPageC/flower/index.vue

<template>
	<view class="v-pages-flower">
		<view class="v-pages-flower-inner">
			<view class="bg">
				<image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/flower-bg.png" class="img">
				</image>
			</view>
			<view class="icon" @click="chooseImage">
				<image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-camera.png" class="img">
				</image>
			</view>
			<view class="btn Camera" @click="chooseImage('camera')">拍照上传</view>
			<view class="btn Image" @click="chooseImage('album')">从照片中选择</view>
			<!-- 搜索结果 -->

			<u-popup :show="show" @close="close" mode="bottom">
				<view class="v-search-result"
					style="position: fixed; bottom: 0;left: 0; width: 100%;background-color: #fff;">
					<view class="search-title" v-if="search_result.length>0">{{search_result[0].name}}</view>
					<view class="search-image">
						<image :src="imageSrc" class="img" mode="aspectFit"></image>
					</view>
					<view class="search-other-title row flex-align-center">
						<image src="https://eluyou.ailuquan.cn/upload/image/2024/mapIcon/daolan/icon-flower.png"
							class="img" mode="widthFix"></image>其他查询结果
					</view>
					<view class="search-list">
						<scroll-view scroll-x="true">
							<view class="row">
								<view class="list_item" v-for="(item,index) in search_result" :key="index">
									<view class="name">{{item.name}}</view>
									<view class="similarity">相似度{{item.score}}%</view>
									<view class="bar">
										<view class="bar-inner" :style="{width: item.score+'%'}"></view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import UPopup from "@/uni_modules/uview-ui/components/u-popup/u-popup.vue"
	export default {
		comments: {
			UPopup
		},
		data() {
			return {
				//公共路径
				rootPath: this.$config.ROOTPATH,
				show: false,
				imageSrc: "",
				imageTitle: "",
				search_result: []
			}
		},
		onLoad() {},
		methods: {
			close() {
				this.show = false
				// console.log('close');
			},
			chooseImage: function(sourceType) {
				let $this = this
				uni.chooseMedia({
					count: 1,
					sizeType: ['compressed'],
					mediaType: ['image'],
					sourceType: [sourceType],
					success: (res) => {
						$this.imageSrc = res.tempFiles[0].tempFilePath
						uni.showLoading({
							title: '图片识别中...'
						})
						this.task = uni.uploadFile({
							url: this.rootPath +
								'/app-api/wechatshop/toolIdentify/identifyPlant', //仅为示例，非真实的接口地址
							filePath: $this.imageSrc,
							name: 'file',
							formData: {
								'file': $this.imageSrc
							},
							success: (res) => {
								console.log('uploadImage success, res is:', res)
								let data = JSON.parse(res.data)
								uni.showToast({
									title: '识别成功',
									icon: 'success',
									duration: 1000
								})
								$this.search_result = data.data.map((item, index) => {
									return {
										name: item.name,
										score: (item.score * 100).toFixed(2)
									}
								})
								$this.show = true
							},
							fail: (err) => {
								console.log('uploadImage fail', err);
								uni.showModal({
									content: err.errMsg,
									showCancel: false
								});
							},
							complete: (res) => {
								uni.hideLoading();
								this.task = null
							}
						});
					},
					fail: (err) => {
						console.log('chooseImage fail', err)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.v-pages-flower {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		overflow: hidden;
	}

	.v-pages-flower-inner {
		position: relative;
		height: 70vh;
		width: 100vw;
		overflow: hidden;


		.bg {
			content: '';
			width: 100vw;
			height: 60vh;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;

			image {
				width: 100vw;
				height: 100%;
			}
		}

		&:before {
			content: '';
			width: 160%;
			height: 100%;
			position: absolute;
			left: -30%;
			top: 0;
			z-index: 0;
			background: linear-gradient(to bottom, #0983ff, rgba(#0983ff, .8));
			border-radius: 0 0 50% 50%;
		}

		.icon {
			position: relative;
			z-index: 1;
			height: 50vh;

			.img {
				width: 30vw;
				height: 30vw;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}

			&:before {
				content: '';
				width: 40vw;
				height: 40vw;
				border-radius: 40vw;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				background-color: rgba(#fff, .05);

				z-index: 1;
			}

			&:after {
				content: '';
				width: 50vw;
				height: 50vw;
				border-radius: 50vw;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				border: 1rpx solid #fff;
				z-index: 1;
			}
		}

		.btn.Camera {
			position: relative;
			z-index: 1;
			width: 80%;
			height: 100rpx;
			margin: 0 auto;
			text-align: center;
			line-height: 100rpx;
			font-size: 28rpx;
			border-radius: 100rpx;
			color: #0983ff;
			background-color: #fff;
		}

		.btn.Image {
			position: relative;

			z-index: 1;
			width: 80%;
			height: 100rpx;
			margin: 10rpx auto;
			text-align: center;
			line-height: 100rpx;
			border-radius: 100rpx;
			color: #fff;
		}
	}

	.v-search-result {
		position: relative;
		z-index: 9;
		box-sizing: border-box;
		padding: 24rpx 24rpx 40rpx 24rpx;

		.search-title {
			font-size: 36rpx;
			text-align: center;
			margin-bottom: 24rpx;
		}

		.search-other-title {
			margin: 20rpx 0 10rpx 0;
			font-size: 28rpx;
			color: #666;

			.img {
				width: 30rpx;
				margin-right: 10rpx;
			}
		}

		.search-image {
			flex: 0 0 120rpx;
			width: 100%;
			height: 500rpx;
			overflow: hidden;

			.img {
				width: 100%;
			}
		}

		.search-list {
			padding: 10rpx 0;
			background-color: rgba(#000, .03);

			.list_item {
				position: relative;
				padding: 0 40rpx;

				&:not(:last-child) {
					&::after {
						content: "";
						position: absolute;
						right: 0;
						top: 16rpx;
						width: 1rpx;
						height: 50rpx;
						background-color: #e0e0e0;
					}
				}

				.name {
					text-align: center;
				}

				.similarity {
					color: #999;
					font-size: 24rpx;
				}

				.bar {
					position: relative;
					margin-top: 10rpx;
					height: 6rpx;
					border-radius: 6rpx;
					background-color: rgba(#000, .1);

					.bar-inner {
						position: absolute;
						height: 6rpx;
						border-radius: 6rpx;
						background-image: linear-gradient(to right, #0983ff, #00F9E5);
					}
				}
			}
		}

	}
</style>