feiniao-farm-h5/src/views/old_mini/home/components/problemReminder.vue

<template>
    <Popup v-model:show="show" class="problem-reminder-popup">
        <div class="problem-reminder">
            <!-- 标题区域 -->
            <div class="problem-reminder-header">
                <div class="title-section">
                    <div class="main-title">填写以下问题</div>
                    <div class="sub-title">为您定制农事提醒</div>
                </div>
                <img class="header-icon" src="@/assets/img/home/file-icon.png" alt="" />
            </div>
            <div class="question-section-wrapper">
                <span class="question-text">{{ questPopupData.quest }}</span>
                <div class="img">
                    <img :src="questPopupData.backgroundImage" alt="" />
                </div>
                <div class="options-section">
                    <span class="options-label">您可以选择</span>
                    <div class="options-buttons">
                        <div class="option-btn" @click="toUpload">拍照识别</div>
                        <div class="option-btn" @click="toPage" v-if="curRole == 0">咨询专家</div>
                    </div>
                </div>
            </div>
            <!-- 底部按钮区域 -->
            <div class="bottom-buttons">
                <div
                    v-for="(opt, idx) in bottomAnswerOptions"
                    :key="idx"
                    class="bottom-btn"
                    :class="{ 'yes-btn': isYesOption(opt), 'no-btn': !isYesOption(opt) }"
                    @click="onBottomOptionClick(opt)"
                >
                    {{ getOptionLabel(opt) }}
                </div>
            </div>
            <div class="forward-btn bottom-btn" v-if="curRole == 2">转发给客户</div>
        </div>
    </Popup>
    <Popup v-model:show="noShow" class="no-popup">
        <div class="no-popup-title">
            <span>感谢您的配合</span>
            <div class="no-popup-title-sub">飞鸟将会记录下您当前的农场情况</div>
        </div>
        <div class="no-popup-btn" @click="noShow = false">我知道了</div>
    </Popup>
    <!-- 农事信息弹窗 -->
    <detail-dialog ref="detailDialogRef" :show-success-only="true"></detail-dialog>
    <!-- 新增：激活上传弹窗 -->
    <active-upload-popup @handleUploadSuccess="handleUploadSuccess"></active-upload-popup>
</template>
<script setup>
import { Popup } from "vant";
import { ref,watch } from "vue";
import wx from "weixin-js-sdk";
import activeUploadPopup from "@/components/popup/activeUploadPopup.vue";
import detailDialog from "@/components/detailDialog.vue";
import eventBus from "@/api/eventBus";
import { useRouter } from "vue-router";
const router = useRouter();

const props = defineProps({
    farmId: {
        type: [Number, String],
        default: null,
    }
}); 

const show = ref(false);
const noShow = ref(false);
const dropdownGardenItem = ref({
    organId: 93490,
    periodId: 1,
    wktVal: "wktVal",
    address: "address",
    district: "district",
    name: "荔博园",
});
const toUpload = () => {
    wx.miniProgram.navigateTo({
        url: `/pages/subPages/carmera/index?gardenData=${JSON.stringify(dropdownGardenItem.value)}`,
    });
};

function toPage() {
    router.push("/expert_list");
}
const detailDialogRef = ref(null);

const curRole = localStorage.getItem("SET_USER_CUR_ROLE");

watch(() => props.farmId, (newVal) => {
    if (newVal) {
        fetchQuestPopup();
    }
});

const questPopupData = ref({});
const bottomAnswerOptions = ref([]);
const fetchQuestPopup = () => {
    VE_API.home
        .fetchQuestPopup({ farmId: props.farmId })
        .then(({ data }) => {
            if (Array.isArray(data) && data.length > 0) {
                show.value = true;
                questPopupData.value = data[0];
                bottomAnswerOptions.value = transformAnswerOptions(questPopupData.value?.answerOptions);
            }
        })
        .catch(() => {});
};

function transformAnswerOptions(raw) {
    let parsed = raw;
    if (typeof raw === "string") {
        try {
            parsed = JSON.parse(raw);
        } catch (e) {
            parsed = [raw];
        }
    }
    if (Array.isArray(parsed)) {
        return parsed.map((item) => {
            if (item && typeof item === "object") {
                const label = item.name;
                const value = item.value;
                return { label, value };
            }
            return { label: String(item), value: item };
        });
    }
    return [];
}

function getOptionLabel(opt) {
    return opt?.label ?? String(opt ?? "");
}

function isYesOption(opt) {
    const label = (opt?.label ?? "").toString();
    const value = opt?.value;
    if (typeof value === "boolean") return value === true;
    if (typeof value === "number") return value === 1;
    if (typeof value === "string") {
        const v = value.trim().toLowerCase();
        if (v === "1" || v === "true" || v === "yes") return true;
    }
    const yesKeywords = ["是", "yes", "确认", "同意", "有", "发生"];
    return yesKeywords.some((k) => label.toLowerCase().includes(k.toLowerCase()));
}

const optValue = ref(null);
function onBottomOptionClick(opt) {
    show.value = false;
    optValue.value = opt.value;
    if (opt.value == 1) {
        eventBus.emit("activeUpload:show", {
            gardenIdVal: props.farmId,
            problemTitleVal: "请选择您出现白点的时间",
            typeVal: "question",
        });
    } else {
        saveQuestPopup();
    }
}

function saveQuestPopup() {
    const agriDate = getTodayStr();
    const params = {
        farmId: props.farmId,
        phenologyId: questPopupData.value.phenologyId,
        indicatorId: questPopupData.value.indicatorId,
        answerValue: optValue.value,
        agriDate: agriDate,
    };
    params.imagePaths = images.value;
    VE_API.home.saveQuestPopup(params).then((res) => {
        if (res.code === 0) {
            show.value = false;
            if (optValue.value != 1) {
                noShow.value = true;
            }
        }
    });
}

function getTodayStr() {
    const d = new Date();
    const y = d.getFullYear();
    const m = String(d.getMonth() + 1).padStart(2, "0");
    const day = String(d.getDate()).padStart(2, "0");
    return `${y}-${m}-${day}`;
}
const images = ref([]);
function handleUploadSuccess(params) {
    images.value = params.images;
    saveQuestPopup();
    detailDialogRef.value.showDialog("708734452137725952", "咨询专家");
}
</script>
<style lang="scss" scoped>
.problem-reminder-popup {
    width: 100%;
    border-radius: 14px;
    padding: 20px 15px;
    box-sizing: border-box;
    background-image: linear-gradient(180deg, #d1e7fd 0%, #ffffff 25%);
    .problem-reminder {
        display: flex;
        flex-direction: column;
        // 标题区域样式
        .problem-reminder-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 15px;

            .title-section {
                flex: 1;
                font-size: 22px;
                color: #1d1e1f;
                line-height: 1.2;
                div {
                    font-family: "PangMenZhengDao";
                }
            }

            .header-icon {
                width: 88px;
                height: 88px;
                margin-top: -10px;
                margin-right: -5px;
            }
        }
        .question-section-wrapper {
            border: 1px solid #ececec;
            border-radius: 8px;
            padding: 10px 8px;
            margin-top: -10px;
            background-color: #fff;
            .question-text {
                font-size: 16px;
                color: #252525;
                font-weight: 500;
            }
            .img {
                margin: 12px 0;
                width: 100%;
                height: 140px;
                img {
                    width: 100%;
                    height: 100%;
                    border-radius: 6px;
                    object-fit: cover;
                }
            }
            .options-section {
                display: flex;
                align-items: center;
                justify-content: space-between;
                background-color: rgba(33, 153, 248, 0.1);
                border-radius: 8px;
                padding: 7px 8px;
                font-weight: 500;
                .options-label {
                    font-size: 14px;
                    color: #2199f8;
                }

                .options-buttons {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 10px;
                    .option-btn {
                        padding: 5px 14px;
                        border-radius: 20px;
                        background: #fff;
                        color: #252525;
                        flex: 1;
                    }
                }
            }
        }
        // 底部按钮区域样式
        .bottom-buttons {
            display: flex;
            gap: 12px;
            margin-top: 10px;
        }
        .forward-btn{
            margin-top: 10px;
        }
        .bottom-btn {
            flex: 1;
            padding: 8px 0;
            border-radius: 25px;
            font-size: 16px;
            text-align: center;
            background: #fff;
            border: 1px solid #e5e5e5;

            &.yes-btn {
                background-image: linear-gradient(180deg, #76c3ff 0%, #2199f8 100%);
                color: #fff;
                border: none;
            }
        }
    }
}

.no-popup {
    width: 76%;
    border-radius: 14px;
    padding: 28px 15px 20px;
    box-sizing: border-box;
    .no-popup-title {
        font-size: 24px;
        font-weight: 500;
        text-align: center;
        .no-popup-title-sub {
            font-size: 16px;
            margin-top: 8px;
        }
    }
    .no-popup-btn {
        background-color: #2199f8;
        padding: 8px;
        border-radius: 20px;
        color: #fff;
        font-size: 16px;
        margin-top: 32px;
        text-align: center;
    }
}
</style>