feat:添加农情互动的弹窗

src/components/popup/agriExecutePopup.vue

@@ -11,43 +11,31 @@
         <div class="popup-content">
             <!-- 头部区域 -->
             <div class="popup-header">
-                <div class="header-left">
-                    <div class="expert-logo">
-                        <img v-if="expertAvatar" :src="expertAvatar" alt="专家头像" />
-                        <div v-else class="default-logo">
-                            <span class="logo-icon">🌿</span>
-                        </div>
-                    </div>
-                    <div class="expert-info">
-                        <div class="expert-name">{{ expertName || "专家" }} 邀请您</div>
-                    </div>
+                <img class="expert-logo" src="@/assets/img/mine/expert-icon.png" alt="" />
+                <div class="expert-info">
+                    <span>{{ popupData.expertName || "韦帮稳" }}专家</span>
+                    <span class="invite-text">邀请您</span>
                 </div>
             </div>
 
             <!-- 标题 -->
-            <div class="popup-title">{{ title }}</div>
+            <div class="popup-title">{{ popupData.title }}</div>
 
             <!-- 异常信息区域 -->
-            <div class="abnormal-info" v-if="abnormalText">
-                {{ abnormalText }}
+            <div class="abnormal-info">
+                {{ popupData.abnormalText }}
             </div>
 
             <!-- 图片区域 -->
-            <div class="image-container" v-if="imageUrl">
-                <img :src="imageUrl" alt="农事执行图片" class="execute-image" />
-                <div v-if="showMarker" class="image-marker">
-                    <div class="marker-line"></div>
-                    <div class="marker-x">✕</div>
-                </div>
-            </div>
+            <img src="@/assets/img/home/example-4.png" alt="农事执行图片" class="execute-image" />
 
             <!-- 按钮区域 -->
             <div class="popup-buttons">
-                <div class="btn-later" @click="handleLater">
-                    {{ laterButtonText }}
+                <div class="btn-later" @click="handleLater" v-if="popupData.laterBtn">
+                    {{ popupData.laterButtonText || "稍后执行" }}
                 </div>
                 <div class="btn-executed" @click="handleExecuted">
-                    {{ executedButtonText }}
+                    {{ popupData.executedButtonText || "我已执行" }}
                 </div>
             </div>
         </div>
@@ -64,45 +52,15 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
-    // 专家名称
-    expertName: {
-        type: String,
-        default: "",
-    },
-    // 专家头像
-    expertAvatar: {
-        type: String,
-        default: "",
-    },
     // 标题
-    title: {
-        type: String,
-        default: "梢期杀虫 农事执行",
-    },
-    // 异常信息文本
-    abnormalText: {
-        type: String,
-        default: "由于***异常的出现,由于***异常的出现,由于***异常的出现,由于***异常的出现,",
-    },
-    // 图片URL
-    imageUrl: {
-        type: String,
-        default: "",
-    },
-    // 是否显示图片标记
-    showMarker: {
-        type: Boolean,
-        default: true,
-    },
-    // 稍后执行按钮文字
-    laterButtonText: {
-        type: String,
-        default: "稍后执行",
-    },
-    // 我已执行按钮文字
-    executedButtonText: {
-        type: String,
-        default: "我已执行",
+    popupData: {
+        type: Object,
+        default: () => ({
+            expertName: "韦帮稳",
+            title: "梢期杀虫 农事执行",
+            abnormalText: "由于***异常的出现,由于***异常的出现,由于***异常的出现,由于***异常的出现,",
+            imageUrl: "",
+        }),
     },
     // 遮罩层样式
     overlayStyle: {
@@ -146,11 +104,8 @@ const handleExecuted = () => {
 
 <style scoped lang="scss">
 .agri-execute-popup {
-    width: 85%;
-    max-width: 400px;
-    padding: 20px;
-    box-sizing: border-box;
-    background: #ffffff;
+    width: 100%;
+    padding: 16px;
     border-radius: 12px;
 
     .popup-content {
@@ -159,161 +114,84 @@ const handleExecuted = () => {
     }
 
     .popup-header {
-        margin-bottom: 12px;
-
-        .header-left {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-
-            .expert-logo {
-                width: 40px;
-                height: 40px;
-                border-radius: 50%;
-                background: #4caf50;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                flex-shrink: 0;
-                overflow: hidden;
-
-                img {
-                    width: 100%;
-                    height: 100%;
-                    object-fit: cover;
-                }
-
-                .default-logo {
-                    width: 100%;
-                    height: 100%;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-
-                    .logo-icon {
-                        font-size: 24px;
-                    }
-                }
-            }
+        margin-bottom: 5px;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        .expert-logo {
+            width: 26px;
+            height: 26px;
+        }
 
-            .expert-info {
-                .expert-name {
-                    font-size: 14px;
-                    color: #666666;
-                    line-height: 1.4;
-                }
+        .expert-info {
+            font-size: 16px;
+            .invite-text {
+                color: #999999;
+                margin-left: 6px;
             }
         }
     }
 
     .popup-title {
-        font-size: 20px;
-        font-weight: 600;
-        color: #000000;
-        margin-bottom: 12px;
-        line-height: 1.4;
+        font-size: 26px;
+        margin-bottom: 14px;
+        font-family: "PangMenZhengDao";
     }
 
     .abnormal-info {
-        background: #e3f2fd;
         padding: 12px;
-        border-radius: 6px;
-        font-size: 14px;
-        color: #333333;
-        line-height: 1.6;
-        margin-bottom: 16px;
-        word-break: break-all;
-    }
-
-    .image-container {
-        position: relative;
-        width: 100%;
-        margin-bottom: 20px;
-        border: 2px solid #ff0000;
+        color: #2199f8;
+        background: rgba(33, 153, 248, 0.1);
+        padding: 3px 9px 9px;
         border-radius: 8px;
-        overflow: hidden;
-        background: #f5f5f5;
-        min-height: 200px;
-
-        .execute-image {
-            width: 100%;
-            height: auto;
-            display: block;
-            object-fit: cover;
-        }
-
-        .image-marker {
+        position: relative;
+        margin-top: 5px;
+        
+        // 三角形小尖尖
+        &::before {
+            content: "";
             position: absolute;
-            top: 15%;
-            left: 50%;
-            transform: translateX(-50%);
-            pointer-events: none;
-            z-index: 1;
-
-            .marker-line {
-                width: 1px;
-                height: 50px;
-                background: transparent;
-                border-left: 1px dashed #2199f8;
-                margin: 0 auto;
-            }
-
-            .marker-x {
-                width: 20px;
-                height: 20px;
-                background: #2199f8;
-                border-radius: 50%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                color: #ffffff;
-                font-size: 12px;
-                font-weight: bold;
-                margin: 0 auto;
-                margin-top: -10px;
-                border: 1px solid #ffffff;
-                box-shadow: 0 0 0 1px #2199f8;
-            }
+            top: -8px;
+            left: 20px;
+            width: 0;
+            height: 0;
+            border-left: 15px solid transparent;
+            border-right: 2px solid transparent;
+            border-bottom: 8px solid rgba(33, 153, 248, 0.1);
         }
     }
 
+    .execute-image {
+        width: 100%;
+        height: 184px;
+        border-radius: 5px;
+        object-fit: cover;
+        margin: 11px 0 13px 0;
+    }
+
     .popup-buttons {
         display: flex;
-        gap: 12px;
+        gap: 13px;
 
         .btn-later,
         .btn-executed {
             flex: 1;
-            padding: 12px;
-            border-radius: 25px;
+            padding: 8px;
+            border-radius: 4px;
             font-size: 16px;
             text-align: center;
-            cursor: pointer;
-            transition: all 0.3s;
         }
 
         .btn-later {
-            background: #ffffff;
-            border: 1px solid rgba(153, 153, 153, 0.5);
-            color: #666666;
-
-            &:active {
-                background: #f5f5f5;
-                transform: scale(0.98);
-            }
+            border: 1px solid #d7d7d7;
+            color: #9d9d9d;
         }
 
         .btn-executed {
             background: #2199f8;
             color: #ffffff;
-            border: none;
-
-            &:active {
-                background: #1a8ae6;
-                transform: scale(0.98);
-            }
+            border: 1px solid #2199f8;
         }
     }
 }
 </style>
-

src/views/old_mini/agri_record/index.vue

@@ -32,19 +32,6 @@
         :closeOnClickOverlay="false"
         :zIndex="9999"
     />
-
-    <!-- 农事执行弹窗 -->
-    <agri-execute-popup
-        v-model:show="showAgriExecutePopup"
-        :expert-name="agriExecuteData.expertName"
-        :expert-avatar="agriExecuteData.expertAvatar"
-        :title="agriExecuteData.title"
-        :abnormal-text="agriExecuteData.abnormalText"
-        :image-url="agriExecuteData.imageUrl"
-        :show-marker="agriExecuteData.showMarker"
-        @later="handleAgriLater"
-        @executed="handleAgriExecuted"
-    />
 </template>
 
 <script setup>
@@ -56,24 +43,12 @@ import weatherInfo from "@/components/weatherInfo.vue";
 import { useRouter, useRoute } from "vue-router";
 import farmInfoPopup from "../home/components/farmInfoPopup.vue";
 import tipPopup from "@/components/popup/tipPopup.vue";
-import agriExecutePopup from "@/components/popup/agriExecutePopup.vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import ArchivesFarmTimeLine from "@/components/pageComponents/ArchivesFarmTimeLine.vue";
 
 const showFarmPopup = ref(false); // 农场领取成功弹窗
-const showAgriExecutePopup = ref(false); // 农事执行弹窗 - 默认显示
 const date = ref(new Date());
 
-// 农事执行弹窗数据
-const agriExecuteData = ref({
-    expertName: "韦帮稳",
-    expertAvatar: "",
-    title: "梢期杀虫 农事执行",
-    abnormalText: "由于***异常的出现,由于***异常的出现,由于***异常的出现,由于***异常的出现,",
-    imageUrl: "",
-    showMarker: true,
-});
-
 const defaultGardenId = ref(null);
 const isHeaderShow = ref(false);
 const isDefaultFarm = ref(false);
@@ -341,30 +316,6 @@ function handlePage(url) {
         query: query,
     });
 }
-
-// 农事执行弹窗相关方法
-const handleAgriLater = () => {
-    console.log("稍后执行");
-    // 可以在这里添加稍后执行的逻辑
-};
-
-const handleAgriExecuted = () => {
-    console.log("我已执行");
-    // 可以在这里添加执行完成的逻辑
-};
-
-// 显示农事执行弹窗的方法（可以在需要的地方调用）
-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;
-};
 </script>
 
 <style scoped lang="scss">

src/views/old_mini/home/index.vue

@@ -42,6 +42,14 @@
         :closeOnClickOverlay="false"
         :zIndex="9999"
     />
+
+    <!-- 农事执行弹窗 -->
+    <agri-execute-popup
+        v-model:show="showAgriExecutePopup"
+        :popupData="agriExecuteData"
+        @later="handleAgriLater"
+        @executed="handleAgriExecuted"
+    />
 </template>
 
 <script setup>
@@ -52,6 +60,7 @@ import AgriculturalDynamics from "./components/AgriculturalDynamics.vue";
 import { useRouter, useRoute } from "vue-router";
 import wx from "weixin-js-sdk";
 import tipPopup from "@/components/popup/tipPopup.vue";
+import agriExecutePopup from "@/components/popup/agriExecutePopup.vue";
 import knowledgeCard from "./components/knowledgeCard.vue";
 
 const store = useStore();
@@ -64,6 +73,48 @@ const handleBtn = () => {
     router.push("/plan?pageType=plant&headerTitle=请设置您的种植方案");
 };
 
+// 农事执行弹窗相关
+const showAgriExecutePopup = ref(false); // 农事执行弹窗
+// const agriExecuteData = ref({
+//     expertName: "韦帮稳",
+//     title: "梢期杀虫 农事执行",
+//     abnormalText: "由于***异常的出现,由于***异常的出现,由于***异常的出现,由于***异常的出现,",
+//     imageUrl: "",
+//     laterBtn:true,
+// });
+
+const agriExecuteData = ref({
+    expertName: "韦帮稳",
+    title: "农情互动任务采集",
+    abnormalText: "现在已处于 花芽分化期 ，上传照片反馈您的荔枝生长近况",
+    imageUrl: "",
+    executedButtonText:'查看任务',
+});
+
+// 农事执行弹窗相关方法
+const handleAgriLater = () => {
+    console.log("稍后执行");
+    // 可以在这里添加稍后执行的逻辑
+};
+
+const handleAgriExecuted = () => {
+    console.log("我已执行");
+    // 可以在这里添加执行完成的逻辑
+};
+
+// 显示农事执行弹窗的方法（可以在需要的地方调用）
+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});