feiniao-farm-h5/src/views/old_mini/album_recognize/index.vue

<template>
    <div class="diseases-dictionary-detail">
        <div class="page-title" @click="goBack">
            <el-icon class="title-icon" color="rgba(0, 0, 0, 0.8)" size="16"><ArrowLeftBold /></el-icon>
            识别结果
        </div>
        <div class="detail-content">
            <div class="detail-img">
                <Swipe class="card-swipe-wrapper" :show-indicators="imgKey && imgKey.length > 1" :loop="false">
                    <SwipeItem v-for="(img, index) in imgKey" :key="index">
                        <div class="card-item">
                            <div class="ing-wrap" v-if="isRecognize">
                                <div>
                                    <el-icon size="20" class="is-loading">
                                        <Loading />
                                    </el-icon>
                                </div>
                                正在识别，请稍后...
                            </div>
                            <img class="card-bg" :src="displayUrls[index]" />
                            <div class="card-content" v-if="!isRecognize">
                                <div class="title-ques">
                                    <div class="ques-text">病虫名称:{{ recognizeResult[index]?.diseaseName }}</div>
                                </div>
                                <div class="dialog-famous">管理方法：</div>
                                <div class="dialog-answer">
                                    {{ recognizeResult[index]?.managementMethod }}
                                </div>
                                <div v-if="recognizeResult[index]?.basicInfo" class="advice-wrap">
                                    <div class="item-tag">基本信息</div>
                                    <div v-html="recognizeResult[index]?.basicInfo"></div>
                                </div>
                                <!-- <div class="famous-info" @click="toDetail(index)">
                                    <img src="@/assets/img/home/link-icon.png" />
                                    <span>点击查看农事详情</span>
                                </div> -->
                            </div>
                            <!-- <div class="card-content no-data" v-if="!isRecognize && recognizeResult[index]?.status === 'nodata'">
                                <img src="@/assets/img/home/good-fill.png" />
                                长势良好，并未发现病虫害
                            </div> -->
                        </div>
                    </SwipeItem>
                </Swipe>
            </div>
            <!-- <div class="btn-wrap" v-if="!isRecognize">
                <div class="btn share" @click="toConsult">咨询专家</div>
            </div> -->
        </div>
    </div>
    <!-- 农事信息弹窗 -->
    <detail-dialog ref="detailDialogRef" :show-success-only="true"></detail-dialog>
    <!-- 上传弹窗组件 -->
    <active-upload-popup></active-upload-popup>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { Swipe, SwipeItem } from "vant";
import { useRouter, useRoute } from "vue-router";
import { base_img_url2 } from "@/api/config.js";
import { ElMessage } from "element-plus";
import detailDialog from "@/components/detailDialog.vue";
import activeUploadPopup from "@/components/popup/activeUploadPopup.vue";
import { toRaw } from 'vue'

let resize = "?x-oss-process=image/resize,w_300";
const route = useRoute();
const miniJson = toRaw(route.query.miniJson);
const json = JSON.parse(miniJson || "{}");
// const json = JSON.parse(
//     `{"imgKey":["birdseye-look-mini/766/1761968109259.png","birdseye-look-mini/766/1761968110225.png"],"farmId":766,"id":"65","imageIds":["772470289337421824","772470289337421825"],"token":"bcc0e12d-bff6-4f1f-8edc-2ab80b19af41"}`)
const imgKey = json.imgKey?.split(",") || [];

const isRecognize = ref(true);
 
// 存储每张图片的 farmWorkLibId，用于后续接口请求
const farmWorkLibIdsByIndex = ref({});

// 预置显示地址：默认使用传入的 cloudFilename
const displayUrls = imgKey.map((p) => base_img_url2 + p + resize);
const detailDialogRef = ref(null);

const recognizeResult = ref([]);
onMounted(() => {
    VE_API.ali.AIRecognize({
        imageUrls: displayUrls,
    }).then(({data}) => {
        recognizeResult.value = data;
        isRecognize.value = false;
    });
});


const router = useRouter();
const goBack = () => {
    // router.go(-1);
    router.push(`/home`);
};

const toDetail = (index) => {
    // 根据当前图片的索引获取对应的 farmWorkLibId
    const farmWorkLibIdList = farmWorkLibIdsByIndex.value[index];
    const farmWorkLibId = Array.isArray(farmWorkLibIdList) && farmWorkLibIdList.length > 0 
        ? farmWorkLibIdList[0] 
        : null;
    
    // 调用子组件方法，传递 farmWorkLibId 参数
    if (farmWorkLibId) {
        detailDialogRef.value.showDialog(farmWorkLibId);
    } else {
        ElMessage.warning('暂无农事详情');
    }
};

const currentFarmId = localStorage.getItem('selectedFarmId')
const toConsult = async () => {
    const userId = await getNearStore();
    router.push(`/chat_frame?userId=${userId}&farmId=${currentFarmId}`);
};

async function getNearStore() {
    const params = {
        farmId: currentFarmId,
    };
    const {data} = await VE_API.z_agricultural_store.getStoreItem(params);
    return data.miniUserId;
}
</script>

<style lang="scss" scoped>
.diseases-dictionary-detail {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #fff;

    .page-title {
        height: 44px;
        line-height: 44px;
        text-align: center;
        font-size: 17px;
        font-weight: bold;
        // border-bottom: 1px solid #ededed;
        .title-icon {
            cursor: pointer;
            position: absolute;
            left: 16px;
            top: 13px;
        }
    }
    .detail-content {
        height: calc(100% - 44px);
        overflow: auto;
        .detail-img {
            height: calc(100% - 34px);
            position: relative;
            padding: 4px 16px 30px 16px;
            .card-swipe-wrapper {
                width: 100%;
                height: 100%;
                border-radius: 24px 0 36px 4px;
                overflow: hidden;
                :deep(.van-swipe-item) {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                }
                :deep(.van-swipe__indicators) {
                    bottom: 10px;
                }
                :deep(.van-swipe__indicator) {
                    width: 6px;
                    height: 6px;
                    background-color: #cccccc;
                    border-radius: 50%;
                    margin: 0 4px;
                    transition: all 0.3s;
                }
                :deep(.van-swipe__indicator--active) {
                    width: 20px;
                    height: 6px;
                    background-color: #2199f8;
                    border-radius: 3px;
                }
            }
            .card-item {
                width: 100%;
                height: 100%;
                position: relative;
                .ing-wrap {
                    color: #fff;
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 50%;
                    transform: translateY(-50%);
                    margin: 0 auto;
                    background: rgba(0, 0, 0, 0.6);
                    border-radius: 12px;
                    width: 164px;
                    height: 95px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    z-index: 10;
                }
                .card-bg {
                    border-radius: 24px 0 36px 4px;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
                .no-data {
                    color: #fff;
                    text-align: center;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    img {
                        width: 17px;
                        margin-right: 4px;
                    }
                }
                .card-content {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    padding: 12px 12px 26px 12px;
                    border-radius: 24px 0 36px 4px;
                    color: #ffffff;
                    background: rgba(0, 0, 0, 0.6);
                    backdrop-filter: blur(4px);
                    max-height: calc(100% - 38px);
                    overflow: auto;
                    width: 100%;
                    box-sizing: border-box;
                    &.no-data {
                        padding: 16px 0 20px 0;
                    }
                    .ques-text {
                        color: #ffd786;
                        font-size: 18px;
                        position: relative;
                        padding-left: 12px;
                    }
                    .ques-text:after {
                        content: "";
                        position: absolute;
                        width: 4px;
                        height: 15px;
                        top: 5px;
                        left: 0;
                        border-radius: 2px;
                        background: #ffd186;
                    }
                    .dialog-famous {
                        padding: 8px 0 4px 0;
                        color: #ffd786;
                        font-size: 16px;
                    }
                    .dialog-answer {
                        line-height: 24px;
                    }
                    .advice-wrap {
                        padding-top: 12px;
                    }
                    .item-tag {
                        width: fit-content;
                        padding: 4px 10px;
                        border-radius: 20px;
                        color: #ffd786;
                        background: rgba(255, 215, 134, 0.2);
                        margin-bottom: 6px;
                    }
                    .info {
                        padding: 10px 10px 6px 0;
                        font-size: 15px;
                    }
                    .desc {
                        font-size: 14px;
                        line-height: 24px;
                    }
                    .famous-info {
                        display: flex;
                        align-items: center;
                        color: #ffd786;
                        font-size: 16px;
                        padding: 8px 0 0px 0;
                        img {
                            width: 16px;
                            height: 16px;
                            margin-right: 4px;
                        }
                    }
                }
            }
        }
        .btn-wrap {
            width: 100%;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto;
            padding: 0 16px;
            box-sizing: border-box;
            .btn {
                height: 40px;
                line-height: 40px;
                font-size: 16px;
                text-align: center;
                color: #000;
                border-radius: 4px;
                &.primary {
                    flex: 1;
                    color: #fff;
                    background: #2199f8;
                }
                &.share {
                    flex: 1;
                    background: #fff;
                    // width: 20%;
                    min-width: 80px;
                    text-align: center;
                    border: 1px solid #8E8E8E;
                    color: #000;
                    border-radius: 20px;
                }
            }
            .btn + .btn {
                margin-left: 15px;
            }
        }
        .box-title {
            font-size: 16px;
            font-weight: bold;
            color: #000;
            padding: 16px 2px 16px 0;
        }
        .padding-t {
            padding-top: 26px;
        }
        .expert-box {
            .expert-item {
                display: flex;
                justify-content: space-between;
            }
            .expert-l {
                display: inline-flex;
                align-items: center;
                .expert-name {
                    padding-left: 10px;
                }
                .expert-tag {
                    background: #f7ecc7;
                    padding: 2px 6px;
                    color: #ae7d22;
                    width: fit-content;
                    border-radius: 4px;
                    font-size: 12px;
                    display: flex;
                    align-items: center;
                    margin-left: 10px;
                }
                img {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                }
            }
            .line {
                margin: 16px;
                width: calc(100% - 32px);
                height: 1px;
                background: #f1f1f1;
            }
        }
    }
}
</style>