faet：对接互动列表接口

src/api/modules/home.js

@@ -103,4 +103,24 @@ module.exports = {
         url: config.base_dev_url + "container_farm_work_scheme/existsEnabledScheme",
         type: "get",
     },
+    //查询农场当前物候期的已触发的农情互动
+    listTriggeredByFarm: {
+        url: config.base_dev_url + "container_phenology_interaction/listTriggeredByFarm",
+        type: "get",
+    },
+    //获取当前物候期和下一物候期
+    getCurrentAndNextPhenology: {
+        url: config.base_dev_url + "v2/farm/getCurrentAndNextPhenology",
+        type: "get",
+    },
+    //农户上传图片、回答问题以及框选范围
+    uploadAnswer: {
+        url: config.base_dev_url + "container_phenology_interaction/uploadAnswer",
+        type: "post",
+    },
+    //判断是否存在已触发但未回复的农情互动
+    hasUnrepliedTriggeredInteraction: {
+        url: config.base_dev_url + "container_phenology_interaction/hasUnrepliedTriggeredInteraction",
+        type: "get",
+    },
 }

src/components/popup/farmInfoPopup.vue

@@ -6,63 +6,115 @@
         :close-on-click-overlay="true"
         teleport="body"
     >
-        <!-- 标题 -->
-        <div class="popup-title">为了更方便分析农场问题,请先完善您的农场信息</div>
-
-        <!-- 表单区域 -->
-        <el-form ref="formRef" :model="formData" :rules="rules" class="farm-form">
-            <!-- 农场位置 -->
-            <el-form-item label="农场位置" prop="location">
-                <el-input v-model="formData.location" placeholder="请输入农场位置" clearable />
-            </el-form-item>
-
-            <!-- 农场品种 -->
-            <el-form-item label="农场品种" prop="variety">
-                <div class="variety-select-wrap">
-                    <el-select
-                        v-model="formData.variety1"
-                        placeholder="请选择"
-                        class="variety-select"
-                        @change="handleVariety1Change"
-                    >
-                        <el-option
-                            v-for="item in variety1List"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
-                        />
-                    </el-select>
+        <!-- 第一步：农场信息填写 -->
+        <template v-if="currentStep === 1">
+            <!-- 标题 -->
+            <div class="popup-title">为了更方便分析农场问题,请先完善您的农场信息</div>
+
+            <!-- 表单区域 -->
+            <el-form ref="formRef" :model="formData" :rules="rules" class="farm-form">
+                <!-- 农场位置 -->
+                <el-form-item label="农场位置" prop="address">
+                    <el-input v-model="formData.address" placeholder="请输入农场位置" clearable />
+                </el-form-item>
+
+                <!-- 农场品种 -->
+                <el-form-item label="农场品种" prop="speciesId">
+                    <div class="variety-select-wrap">
+                        <el-select
+                            v-model="formData.speciesId"
+                            placeholder="请选择"
+                            class="variety-select"
+                            @change="handleSpecieChange"
+                        >
+                            <el-option
+                                v-for="item in specieList"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id"
+                            />
+                        </el-select>
+                        <el-select
+                            v-model="formData.typeId"
+                            placeholder="请选择"
+                            class="variety-select"
+                            :disabled="!formData.speciesId"
+                            @change="handleFruitsChange"
+                        >
+                            <el-option
+                                v-for="item in fruitsList"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id"
+                            />
+                        </el-select>
+                    </div>
+                </el-form-item>
+
+                <!-- 农场亩数 -->
+                <el-form-item label="农场亩数" prop="mu">
+                    <el-input v-model="formData.mu" placeholder="请输入" type="number">
+                        <template #suffix>
+                            <span class="unit">亩</span>
+                        </template>
+                    </el-input>
+                </el-form-item>
+
+                <!-- 农场名称 -->
+                <el-form-item label="农场名称" prop="name">
+                    <el-input
+                        v-model="formData.name"
+                        placeholder="请输入农场名称"
+                        clearable
+                        @input="handleNameInput"
+                    />
+                </el-form-item>
+            </el-form>
+        </template>
+
+        <!-- 第二步：物候期起始时间填写 -->
+        <template v-else>
+            <!-- 提示文字 -->
+            <div class="popup-title">请填写当下物候期起始时间，农事预测更精准</div>
+
+            <!-- 物候期表单 -->
+            <el-form ref="phenologyFormRef" :model="phenologyData" :rules="phenologyRules" class="farm-form">
+                <!-- 物候期选择器 -->
+                <el-form-item
+                    label="当下物候期"
+                    prop="phenologyId"
+                >
                     <el-select
-                        v-model="formData.variety2"
-                        placeholder="请选择"
-                        class="variety-select"
-                        :disabled="!formData.variety1"
-                        @change="handleVariety2Change"
+                        v-model="phenologyData.phenologyId"
+                        placeholder="选择物候期"
+                        style="width: 100%"
+                        @change="handlePhenologyChange"
                     >
                         <el-option
-                            v-for="item in variety2List"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
+                            v-for="phenology in phenologyList"
+                            :key="phenology.phenologyId"
+                            :label="phenology.phenologyName"
+                            :value="phenology.phenologyId"
                         />
                     </el-select>
-                </div>
-            </el-form-item>
-
-            <!-- 农场亩数 -->
-            <el-form-item label="农场亩数" prop="acreage">
-                <el-input v-model="formData.acreage" placeholder="请输入" type="number">
-                    <template #suffix>
-                        <span class="unit">亩</span>
-                    </template>
-                </el-input>
-            </el-form-item>
-
-            <!-- 农场名称 -->
-            <el-form-item label="农场名称" prop="farmName">
-                <el-input v-model="formData.farmName" placeholder="请输入农场名称" clearable />
-            </el-form-item>
-        </el-form>
+                </el-form-item>
+
+                <!-- 日期选择器 -->
+                <el-form-item
+                    label="起始时间"
+                    prop="phenologyStartDate"
+                >
+                    <el-date-picker
+                        v-model="phenologyData.phenologyStartDate"
+                        type="date"
+                        placeholder="选择时间"
+                        format="YYYY-MM-DD"
+                        value-format="YYYY-MM-DD"
+                        style="width: 100%"
+                    />
+                </el-form-item>
+            </el-form>
+        </template>
 
         <!-- 确认按钮 -->
         <div class="btn-confirm" @click="handleConfirm">确认信息</div>
@@ -71,8 +123,12 @@
 
 <script setup>
 import { Popup } from "vant";
-import { computed, ref, watch, nextTick } from "vue";
+import { computed, ref, watch, nextTick ,onMounted} from "vue";
 import { ElMessage } from "element-plus";
+import { convertPointToArray } from "@/utils/index";
+import { useStore } from "vuex";
+
+const store = useStore();
 
 const props = defineProps({
     // 控制弹窗显示/隐藏
@@ -90,8 +146,45 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    expertMiniUserId: {
+        type: [String, Number],
+        default: "",
+    },
 });
 
+const city = ref("");
+const MAP_KEY = "CZLBZ-LJICQ-R4A5J-BN62X-YXCRJ-GNBUT";
+function getLocationName(location) {
+    const params = {
+        key: MAP_KEY,
+        location,
+    };
+    VE_API.old_mini_map.location(params).then(({ result }) => {
+        const add = result.formatted_addresses?.recommend ? result.formatted_addresses.recommend : result.address + "";
+        formData.value.address = add;
+        city.value = result.address_component?.city + result.address_component?.district || "";
+    });
+}
+
+onMounted(() => {
+    const arr = convertPointToArray(store.state.home.miniUserLocationPoint);
+    getLocationName(`${arr[1]},${arr[0]}`);
+    getSpecieList();
+});
+
+function getSpecieList() {
+    return VE_API.farm.fetchSpecieList({ point: store.state.home.miniUserLocationPoint }).then(({ data }) => {
+        specieList.value = data || [];
+        return data;
+    });
+}
+
+function getFruitsList(parentId) {
+    VE_API.farm.fruitsTypeItemList({ parentId }).then(({ data }) => {
+        fruitsList.value = data;
+    });
+}
+
 const emit = defineEmits(["update:show", "confirm"]);
 
 // 处理v-model双向绑定
@@ -101,34 +194,35 @@ const showValue = computed({
 });
 
 const formRef = ref(null);
+const phenologyFormRef = ref(null);
+
+// 当前步骤：1-填写农场信息，2-填写物候期时间
+const currentStep = ref(1);
+
+// 用户是否手动修改过农场名称
+const isNameEdited = ref(false);
 
 // 表单数据
 const formData = ref({
-    location: "广东省广州市从化区",
-    variety1: "荔枝",
-    variety2: "桂味",
-    acreage: "",
-    farmName: "",
+    address: "",
+    speciesId: "",
+    typeId: "",
+    mu: "",
+    name: "",
 });
 
-// 品种选项（示例数据，实际应该从接口获取）
-const variety1List = ref([
-    { label: "荔枝", value: "荔枝" },
-    { label: "龙眼", value: "龙眼" },
-    { label: "芒果", value: "芒果" },
-    { label: "柑橘", value: "柑橘" },
-]);
-
-const variety2List = ref([
-    { label: "桂味", value: "桂味" },
-    { label: "妃子笑", value: "妃子笑" },
-    { label: "糯米糍", value: "糯米糍" },
-    { label: "黑叶", value: "黑叶" },
-]);
+// 物候期列表
+const phenologyList = ref([]);
+
+// 物候期表单数据
+const phenologyData = ref({});
+
+const specieList = ref([]);
+const fruitsList = ref([]);
 
 // 自定义验证器：验证农场品种
 const validateVariety = (rule, value, callback) => {
-    if (!formData.value.variety1 || !formData.value.variety2) {
+    if (!formData.value.speciesId || !formData.value.typeId) {
         callback(new Error("请选择农场品种"));
     } else {
         callback();
@@ -137,13 +231,19 @@ const validateVariety = (rule, value, callback) => {
 
 // 表单验证规则
 const rules = {
-    location: [{ required: true, message: "请输入农场位置", trigger: "blur" }],
-    variety: [{ validator: validateVariety, trigger: "change" }],
-    acreage: [
+    address: [{ required: true, message: "请输入农场位置", trigger: "blur" }],
+    speciesId: [{ required: true, validator: validateVariety, trigger: "change" }],
+    mu: [
         { required: true, message: "请输入农场亩数", trigger: "blur" },
         { pattern: /^\d+(\.\d+)?$/, message: "请输入有效的数字", trigger: "blur" },
     ],
-    farmName: [{ required: true, message: "请输入农场名称", trigger: "blur" }],
+    name: [{ required: true, message: "请输入农场名称", trigger: "blur" }],
+};
+
+// 物候期表单验证规则
+const phenologyRules = {
+    phenologyId: [{ required: true, message: "请选择物候期", trigger: "change" }],
+    phenologyStartDate: [{ required: true, message: "请选择起始时间", trigger: "change" }],
 };
 
 // 监听初始数据变化
@@ -162,54 +262,133 @@ watch(
     () => props.show,
     (newVal) => {
         if (newVal) {
+            // 重置步骤为第一步
+            currentStep.value = 1;
+            // 重置物候期列表和表单数据
+            phenologyList.value = [];
+            phenologyData.value = {};
+            // 重置名称编辑状态
+            isNameEdited.value = false;
             // 弹窗打开时，如果有初始数据则使用，否则使用默认值
             if (props.initialData && Object.keys(props.initialData).length > 0) {
                 Object.assign(formData.value, props.initialData);
             } else {
                 formData.value = {
-                    location: "广东省广州市从化区",
-                    variety1: "荔枝",
-                    variety2: "桂味",
-                    acreage: "",
-                    farmName: "",
+                    address: "",
+                    speciesId: "",
+                    typeId: "",
+                    mu: "",
+                    name: "",
                 };
             }
             // 清除验证状态
             nextTick(() => {
                 formRef.value?.clearValidate();
+                phenologyFormRef.value?.clearValidate();
             });
         }
     }
 );
 
 // 品种1变化时，重置品种2并触发验证
-const handleVariety1Change = (val) => {
-    formData.value.variety2 = "";
+const handleSpecieChange = (val) => {
+    formData.value.typeId = "";
+    const specie = specieList.value.find(item => item.id === val);
+    // 只有在用户没有手动修改名称时，才自动带出默认名称
+    if (specie && !isNameEdited.value) {
+        formData.value.name = city.value + specie.name + "农场";
+    }
+    getFruitsList(val);
     // 触发品种验证
     nextTick(() => {
-        formRef.value?.validateField("variety");
+        formRef.value?.validateField("speciesId");
     });
-    // 这里可以根据品种1的值动态加载品种2的选项
-    // 示例：不同品种对应不同的子品种列表
 };
 
 // 品种2变化时，触发验证
-const handleVariety2Change = () => {
+const handleFruitsChange = () => {
     nextTick(() => {
-        formRef.value?.validateField("variety");
+        // 校验农场品种（包含大类和品种）
+        formRef.value?.validateField("speciesId");
     });
 };
 
+// 农场名称输入时，标记为用户已手动修改
+const handleNameInput = () => {
+    isNameEdited.value = true;
+};
+
 // 确认信息
 const handleConfirm = async () => {
-    if (!formRef.value) return;
+    // 第一步：验证农场信息表单
+    if (currentStep.value === 1) {
+        if (!formRef.value) return;
+        try {
+            await formRef.value.validate();
+            
+            // 验证通过，获取物候期数据并切换到第二步
+            await getCurrentAndNextPhenology();
+            currentStep.value = 2;
+        } catch (error) {
+            console.log("表单验证失败", error);
+        }
+    } 
+    // 第二步：验证物候期表单并关闭弹窗
+    else {
+        if (!phenologyFormRef.value) return;
+        try {
+            await phenologyFormRef.value.validate();
+            // 验证通过，提交所有数据并关闭弹窗
+            emit("confirm", { 
+                ...formData.value,
+                ...phenologyData.value,
+                wkt: store.state.home.miniUserLocationPoint,
+                expertMiniUserId: props.expertMiniUserId,
+                containerId: specieList.value.find(item => item.id === formData.value.speciesId)?.defaultContainerId,
+            });
+            emit("update:show", false);
+        } catch (error) {
+            console.log("物候期表单验证失败", error);
+        }
+    }
+};
 
+// 获取当前日期（YYYY-MM-DD格式）
+const getTodayDate = () => {
+    const today = new Date();
+    const year = today.getFullYear();
+    const month = String(today.getMonth() + 1).padStart(2, "0");
+    const day = String(today.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+};
+
+// 物候期变化时，更新日期为对应物候期的 startDate
+const handlePhenologyChange = (phenologyId) => {
+    const selectedPhenology = phenologyList.value.find(item => item.phenologyId === phenologyId);
+    if (selectedPhenology && selectedPhenology.startDate) {
+        phenologyData.value.phenologyStartDate = selectedPhenology.startDate;
+    }
+};
+
+// 获取当前和下一个物候期
+const getCurrentAndNextPhenology = async () => {
     try {
-        await formRef.value.validate();
-        emit("confirm", { ...formData.value });
-        emit("update:show", false);
+        const { data } = await VE_API.home.getCurrentAndNextPhenology({ 
+            expertMiniUserId: props.expertMiniUserId,
+            containerId: specieList.value.find(item => item.id === formData.value.speciesId)?.defaultContainerId,
+        });
+        if (data && Array.isArray(data)) {
+            phenologyList.value = data;
+            // 初始化物候期表单数据，日期使用第一个物候期的 startDate
+            const firstPhenology = data[0];
+            phenologyData.value = {
+                phenologyId: firstPhenology?.phenologyId || "",
+                phenologyStartDate: firstPhenology?.startDate || getTodayDate(),
+            };
+        }
     } catch (error) {
-        console.log("表单验证失败", error);
+        console.error("获取物候期数据失败", error);
+        ElMessage.error("获取物候期数据失败");
     }
 };
 </script>

src/views/old_mini/home/components/knowledgeCard.vue

@@ -100,11 +100,14 @@ onMounted(() => {
     // 默认 topicId 首次进入时请求一次
     getKnowledgeList();
 });
-watch(store.state.home.gardenId, (newGardenId) => {
-    if (newGardenId) {
-        getKnowledgeList();
+watch(
+    () => store.state.home.gardenId,
+    (newGardenId) => {
+        if (newGardenId) {
+            getKnowledgeList();
+        }
     }
-});
+);
 
 const formatDate = (dateString) => {
     if (!dateString) return "";

src/views/old_mini/home/index.vue

@@ -9,13 +9,8 @@
         <!-- 天气遮罩 -->
         <div class="weather-mask" v-show="isExpanded" @click="handleMaskClick"></div>
         <!-- 天气 -->
-        <weather-info
-            ref="weatherInfoRef"
-            class="weather-info"
-            @weatherExpanded="weatherExpanded"
-            :isGarden="false"
-            @changeGarden="changeGarden"
-        ></weather-info>
+        <weather-info ref="weatherInfoRef" class="weather-info" @weatherExpanded="weatherExpanded" :isGarden="false"
+            @changeGarden="changeGarden"></weather-info>
         <div class="expert-home">
             <div class="expert-banner" @click="handleExpertBannerClick">
                 <img class="expert-banner-img" src="@/assets/img/home/banner.png" alt="">
@@ -32,37 +27,18 @@
             <AgriculturalDynamics />
         </template> -->
     </div>
-    <tip-popup
-        v-model:show="showTipPopup"
-        type="warning"
-        text="请设置"
-        highlightText="种植方案"
-        buttonText="去设置"
-        @confirm="handleBtn"
-        :closeOnClickOverlay="false"
-        :zIndex="9999"
-    />
+    <tip-popup v-model:show="showTipPopup" type="warning" text="请设置" highlightText="种植方案" buttonText="去设置"
+        @confirm="handleBtn" :closeOnClickOverlay="false" :zIndex="9999" />
 
     <!-- 农事执行弹窗 -->
-    <agri-execute-popup
-        v-model:show="showAgriExecutePopup"
-        :popupData="agriExecuteData"
-        @later="handleAgriLater"
-        @executed="handleAgriExecuted"
-    />
+    <agri-execute-popup v-model:show="showAgriExecutePopup" :popupData="agriExecuteData" @later="handleAgriLater"
+        @executed="handleAgriExecuted" />
 
     <!-- 提醒时间选择弹窗 -->
-    <reminder-time-popup
-        v-model:show="showReminderTimePopup"
-        @confirm="handleReminderTimeConfirm"
-    />
+    <reminder-time-popup v-model:show="showReminderTimePopup" @confirm="handleReminderTimeConfirm" />
 
     <!-- 执行轨迹弹窗 -->
-    <execute-trace-popup
-        v-model:show="showExecuteTracePopup"
-        @later="handleTraceLater"
-        @confirm="handleTraceConfirm"
-    />
+    <execute-trace-popup v-model:show="showExecuteTracePopup" @later="handleTraceLater" @confirm="handleTraceConfirm" />
 </template>
 
 <script setup>
@@ -95,17 +71,9 @@ const agriExecuteData = ref({
     title: "梢期杀虫 农事执行",
     abnormalText: "由于***异常的出现,由于***异常的出现,由于***异常的出现,由于***异常的出现,",
     imageUrl: "",
-    laterBtn:true,
+    laterBtn: true,
 });
 
-// const agriExecuteData = ref({
-//     expertName: "韦帮稳",
-//     title: "农情互动任务采集",
-//     abnormalText: "现在已处于 花芽分化期 ，上传照片反馈您的荔枝生长近况",
-//     imageUrl: "",
-//     executedButtonText:'查看任务',
-// });
-
 // 农事执行弹窗相关方法
 const handleAgriLater = () => {
     console.log("稍后执行");
@@ -117,11 +85,15 @@ const handleAgriLater = () => {
 };
 
 const handleAgriExecuted = () => {
-    console.log("我已执行");
+    console.log("我已执行111",agriExecuteData.value);
+    if(agriExecuteData.value.executedButtonText === '查看任务'){
+        router.push("/interaction_list?expertMiniUserId=81881");
+    }else{
+        // 显示执行轨迹弹窗
+        showExecuteTracePopup.value = true;
+    }
     // 关闭当前弹窗
     showAgriExecutePopup.value = false;
-    // 显示执行轨迹弹窗
-    showExecuteTracePopup.value = true;
 };
 
 // 提醒时间选择弹窗相关
@@ -148,29 +120,15 @@ const handleTraceConfirm = () => {
     // 可以在这里添加确认上传的逻辑
 };
 
-// 显示农事执行弹窗的方法（可以在需要的地方调用）
-const showAgriExecute = (data = {}) => {
-    agriExecuteData.value = {
-        expertName: data.expertName || "韦帮稳",
-        expertAvatar: data.expertAvatar || "",
-        title: data.title || "梢期杀虫 农事执行",
-        abnormalText: data.abnormalText || "由于***异常的出现,由于***异常的出现,由于***异常的出现,由于***异常的出现,",
-        imageUrl: data.imageUrl || "",
-        showMarker: data.showMarker !== undefined ? data.showMarker : true,
-    };
-    showAgriExecutePopup.value = true;
-};
-
 //判断是否存在可用方案
 async function checkExistsEnabledScheme() {
-    const { data } = await VE_API.home.existsEnabledScheme({containerId:null});
-    if(!data && localStorage.getItem("SET_USER_CUR_ROLE") == 2) {
+    const { data } = await VE_API.home.existsEnabledScheme({ containerId: null });
+    if (!data && localStorage.getItem("SET_USER_CUR_ROLE") == 2) {
         showTipPopup.value = true;
     }
 }
 
 const gardenId = ref(null);
-const isGarden = ref(false);
 const changeGarden = ({ id }) => {
     gardenId.value = id;
     getExpertByFarmId();
@@ -252,8 +210,23 @@ onMounted(() => {
             route: "/create_farm?type=client&isReload=true&from=home",
         });
     }
+    checkHasUnrepliedTriggeredInteraction();
 });
 
+const checkHasUnrepliedTriggeredInteraction = async () => {
+    const { data } = await VE_API.home.hasUnrepliedTriggeredInteraction({ farmId: localStorage.getItem("selectedFarmId") });
+    if (data.hasUnfinishedTask) {
+        agriExecuteData.value = {
+            expertName: "韦帮稳",
+            title: "农情互动任务采集",
+            abnormalText: `现在已处于 ${data.phenologyName}，上传照片反馈您的荔枝生长近况`,
+            imageUrl: "",
+            executedButtonText: '查看任务',
+        };
+        showAgriExecutePopup.value = true;
+    }
+};
+
 
 // 查询当前农资店的成员列表（只保留有"任务接单"权限的成员）
 const getManagerList = async () => {
@@ -307,16 +280,19 @@ const handleBannerClick = () => {
     position: relative;
     // background: linear-gradient(180deg, #f4f9fd 0%, #f9f9f9 100%);
     background: linear-gradient(180deg, #F9F9F9 0%, #F0F8FF 31.47%, #F9F9F9 46.81%, #F9F9F9 100%);
+
     .banner-wrap {
         width: 100%;
         height: 200px;
         position: relative;
         z-index: 1;
+
         .banner-img {
             width: 100%;
             height: 100%;
             object-fit: cover;
         }
+
         .banner-title {
             position: absolute;
             bottom: 0;
@@ -324,19 +300,18 @@ const handleBannerClick = () => {
             width: 100%;
             padding: 10px 12px 34px 12px;
             box-sizing: border-box;
-            background: linear-gradient(
-                180deg,
-                rgba(102, 102, 102, 0) -64.3%,
-                rgba(0, 0, 0, 0.0074) -1.43%,
-                rgba(0, 0, 0, 0.684747) 39.67%,
-                rgba(0, 0, 0, 0.74) 40.09%,
-                rgba(0, 0, 0, 0.74) 83.2%
-            );
+            background: linear-gradient(180deg,
+                    rgba(102, 102, 102, 0) -64.3%,
+                    rgba(0, 0, 0, 0.0074) -1.43%,
+                    rgba(0, 0, 0, 0.684747) 39.67%,
+                    rgba(0, 0, 0, 0.74) 40.09%,
+                    rgba(0, 0, 0, 0.74) 83.2%);
             color: #fff;
             font-weight: bold;
             backdrop-filter: blur(2px);
         }
     }
+
     .weather-mask {
         position: fixed;
         top: 0;
@@ -346,6 +321,7 @@ const handleBannerClick = () => {
         background-color: rgba(0, 0, 0, 0.52);
         z-index: 2;
     }
+
     .weather-info {
         width: calc(100% - 20px);
         position: absolute;
@@ -354,13 +330,17 @@ const handleBannerClick = () => {
         left: 10px;
         z-index: 3;
     }
+
     .expert-home {
         padding: 90px 10px 10px 10px;
+
         .expert-banner {
             position: relative;
+
             .expert-banner-img {
                 width: 100%;
             }
+
             .expert-desc {
                 position: absolute;
                 bottom: 0;
@@ -375,9 +355,11 @@ const handleBannerClick = () => {
                 display: flex;
                 align-items: center;
                 justify-content: space-between;
+
                 .expert-desc-icon {
                     width: 91px;
                 }
+
                 .desc-text {
                     font-family: "PangMenZhengDao";
                     font-size: 14px;
@@ -386,6 +368,7 @@ const handleBannerClick = () => {
                     align-items: center;
                     justify-content: center;
                     gap: 6px;
+
                     .dotted {
                         width: 5px;
                         height: 5px;

src/views/old_mini/interactionList/index.vue

@@ -5,8 +5,8 @@
             <div class="list-item" v-for="(item, index) in listData" :key="item.id || index"
                 :class="{ 'uploaded-item': item.upload }">
                 <!-- 标题区域 -->
-                <div class="item-header-wrapper" :class="{ 'has-status': item.upload }">
-                    <div class="item-header">长势采集: 物候进程</div>
+                <div class="item-header-wrapper" :class="{ 'has-status': item.isUploadPhoto }">
+                    <div class="item-header">{{ item.interactionTypeName }}</div>
                     <div class="upload-status" v-show="item.upload">
                         <el-icon class="status-icon">
                             <SuccessFilled />
@@ -29,9 +29,9 @@
                 </div>
 
                 <!-- 未上传状态内容 -->
-                <div v-show="!item.upload">
+                <div v-show="!item.isUploadPhoto">
                     <!-- 说明文字 -->
-                    <div class="item-desc">根据您上次农情互动根据您上次白点期</div>
+                    <div class="item-desc">{{ item.question }}</div>
 
                     <upload exampleImg>
                         <div class="upload-example">
@@ -40,14 +40,19 @@
                         </div>
                     </upload>
 
+                    <div class="question-wrapper">
+                        <span class="question-text">{{ item.phenologyName }}占比</span>
+                        <el-input v-model="item.remark" style="width: 80px" />
+                        <div class="draw-region-btn" @click="handleDrawRegion(item)">勾画发生区域</div>
+                    </div>
                     <!-- 输入框 -->
                     <div class="input-wrapper">
-                        <el-input v-model="item.proportion" placeholder="当前果园达到物候期的比例" clearable />
+                        <el-input v-model="item.remark" placeholder="添加备注：" clearable />
                     </div>
 
                     <!-- 按钮区域 -->
                     <div class="button-group">
-                        <div class="btn-not-reached" @click="handleNotReached(item)">暂未到达进程</div>
+                        <div class="btn-not-reached" @click="handleNotReached(item)">{{ item.cancelButtonName }}</div>
                         <div class="btn-confirm" @click="handleConfirm(item)">确认上传</div>
                     </div>
                 </div>
@@ -68,8 +73,7 @@
         </van-list>
     </div>
     <!-- 农场信息完善弹窗 -->
-    <tip-popup v-model:show="showTipPopup" type="warning" text="暂无农场，请先创建农场" buttonText="去创建"
-        @confirm="handleTipConfirm" />
+    <farm-info-popup :expertMiniUserId="query.expertMiniUserId" v-model:show="showFarmInfoPopup" @confirm="handleFarmInfoConfirm" />
 </template>
 <script setup>
 import { ref, onMounted } from "vue";
@@ -77,35 +81,26 @@ import { List as VanList } from "vant";
 import { ElMessage } from "element-plus";
 import customHeader from "@/components/customHeader.vue";
 import upload from "@/components/upload.vue";
-import TipPopup from "@/components/popup/tipPopup.vue";
+import FarmInfoPopup from "@/components/popup/farmInfoPopup.vue";
 import { useRouter, useRoute } from "vue-router";
-
-const showTipPopup = ref(false);
+const showFarmInfoPopup = ref(false);
 const loading = ref(false);
 const router = useRouter();
 const finished = ref(false);
 const listData = ref([]);
 const query = ref(useRoute().query);
-// 模拟数据，实际应该从接口获取
-const mockData = [
-    { id: 1, proportion: "", expanded: false },
-    { id: 2, proportion: "", expanded: false },
-    { id: 3, proportion: "10%", upload: true, expanded: false },
-];
-
 // 加载数据
-const onLoad = () => {
+const onLoad = async () => {
     loading.value = true;
     // 模拟接口请求
-    setTimeout(() => {
-        if (listData.value.length === 0) {
-            listData.value = [...mockData];
-        } else {
-            // 加载更多逻辑
-            finished.value = true;
-        }
-        loading.value = false;
-    }, 500);
+    const { data } = await VE_API.home.listTriggeredByFarm({ farmId: 766 })
+    if (listData.value.length === 0) {
+        listData.value = [...data];
+    } else {
+        // 加载更多逻辑
+        finished.value = true;
+    }
+    loading.value = false;
 };
 
 // 暂未到达进程
@@ -139,9 +134,18 @@ const toggleExpand = (item) => {
 };
 
 // 确认农场信息
-const handleFarmInfoConfirm = (data) => {
-    console.log("确认的农场信息:", data);
+const handleFarmInfoConfirm = async (data) => {
     // 这里可以处理提交逻辑
+    const {code, msg} = await VE_API.farm.saveFarm(data);
+    if (code === 0) {
+        ElMessage.success("农场信息确认成功");
+    } else {
+        ElMessage.error(msg || '农场信息确认失败');
+    }
+};
+
+const handleDrawRegion = (item) => {
+    console.log("勾画发生区域", item);
 };
 
 onMounted(() => {
@@ -151,11 +155,12 @@ onMounted(() => {
 
 const getFarmList = async () => {
     const { data } = await VE_API.farm.userFarmSelectOption();
-    if(data && data.length === 0) {
-        showTipPopup.value = true;
+    if (data && data.length === 0) {
+        showFarmInfoPopup.value = true;
     }
-    // showTipPopup.value = true;
+    // showFarmInfoPopup.value = true;
 }
+
 </script>
 <style scoped lang="scss">
 .interaction-list {
@@ -321,5 +326,30 @@ const getFarmList = async () => {
             margin-left: 12px;
         }
     }
+
+    .question-wrapper {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        margin: 12px 0 6px;
+        box-sizing: border-box;
+        width: 100%;
+
+        .question-text {
+             width: calc(100% - 136px - 90px);
+            background: #ffffff;
+            // border: 1px solid rgba(0, 0, 0, 0.05);
+            border-radius: 5px;
+            padding: 6px 10px;
+            color: #6f6f6f;
+        }
+
+        .draw-region-btn {
+            background: rgba(33, 153, 248, 0.1);
+            border-radius: 4px;
+            padding: 6px 10px;
+            color: #2199f8;
+        }
+    }
 }
 </style>