feat:添加轨迹和提醒时间弹窗

src/components/popup/executeTracePopup.vue

@@ -0,0 +1,159 @@
+<template>
+    <popup v-model:show="showValue" class="execute-trace-popup" closeable teleport="body" :z-index="9999">
+        <div class="trace-section">
+            <div class="section-title">执行轨迹</div>
+            <!-- 二维码横幅 -->
+            <div class="qr-banner">
+                <span class="banner-text">扫码执行,自动记录人工执行轨迹</span>
+                <img class="qr-code" src="@/assets/img/home/qrcode.png" alt="二维码" />
+            </div>
+            <!-- 图片上传区域 -->
+            <upload exampleImg>
+                <div class="upload-example">
+                    <img class="example" src="@/assets/img/home/example-4.png" alt="" />
+                    <img class="example" src="@/assets/img/home/plus.png" alt="" />
+                </div>
+            </upload>
+        </div>
+
+        <!-- 执行现场部分 -->
+        <div class="scene-section">
+            <div class="section-title">执行现场</div>
+            <!-- 二维码横幅 -->
+            <div class="qr-banner">
+                <span class="banner-text">邀请好友拍照,立即获取执行照片</span>
+                <img class="qr-code" src="@/assets/img/home/qrcode.png" alt="二维码" />
+            </div>
+            <!-- 图片上传区域 -->
+            <upload exampleImg>
+                <div class="upload-example">
+                    <img class="example" src="@/assets/img/home/example-4.png" alt="" />
+                    <img class="example" src="@/assets/img/home/plus.png" alt="" />
+                </div>
+            </upload>
+        </div>
+
+        <!-- 底部按钮 -->
+        <div class="popup-buttons">
+            <div class="btn-later" @click="handleLater">稍后上传</div>
+            <div class="btn-confirm" @click="handleConfirm">确认上传</div>
+        </div>
+    </popup>
+</template>
+
+<script setup>
+import { Popup } from "vant";
+import upload from "@/components/upload.vue";
+import { computed } from "vue";
+
+const props = defineProps({
+    // 控制弹窗显示/隐藏
+    show: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const emit = defineEmits(["update:show", "later", "confirm"]);
+
+// 处理v-model双向绑定
+const showValue = computed({
+    get: () => props.show,
+    set: (value) => emit("update:show", value),
+});
+
+// 稍后上传
+const handleLater = () => {
+    emit("later");
+    emit("update:show", false);
+};
+
+// 确认上传
+const handleConfirm = () => {
+    emit("confirm");
+    emit("update:show", false);
+};
+</script>
+
+<style scoped lang="scss">
+.execute-trace-popup {
+    width: 90%;
+    padding: 24px 16px 20px;
+    border-radius: 8px;
+    background: linear-gradient(360deg, #ffffff 74.2%, #d1ebff 100%);
+
+    ::v-deep {
+        .van-popup__close-icon {
+            color: #333333;
+        }
+    }
+
+    .trace-section,
+    .scene-section {
+        .section-title {
+            font-size: 16px;
+            margin-bottom: 12px;
+        }
+
+        .qr-banner {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: rgba(33, 153, 248, 0.1);
+            padding: 5px 8px;
+            border-radius: 5px;
+            margin-bottom: 12px;
+            border: 0.5px solid #2199f8;
+
+            .banner-text {
+                color: #2199f8;
+            }
+
+            .qr-code {
+                width: 32px;
+                height: 32px;
+            }
+        }
+        .upload-example {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .example {
+                width: 80px;
+                height: 80px;
+            }
+            .example + .example {
+                margin-left: 12px;
+            }
+        }
+    }
+
+    .scene-section {
+        margin: 12px 0 24px 0;
+    }
+
+    .popup-buttons {
+        display: flex;
+        gap: 12px;
+
+        .btn-later,
+        .btn-confirm {
+            flex: 1;
+            padding: 6px;
+            border-radius: 2px;
+            text-align: center;
+        }
+
+        .btn-later {
+            color: #9D9D9D;
+            border: 1px solid #D7D7D7;
+        }
+
+        .btn-confirm {
+            background: #2199f8;
+            color: #ffffff;
+            border: 1px solid #2199f8;
+        }
+    }
+}
+</style>

src/components/popup/reminderTimePopup.vue

@@ -0,0 +1,120 @@
+<template>
+    <popup
+        v-model:show="showValue"
+        class="reminder-time-popup"
+        closeable
+    >
+        <div class="popup-content">
+            <!-- 标题 -->
+            <div class="popup-header">
+                <span class="required">*</span>
+                <span class="popup-title">请选择下次提醒时间</span>
+            </div>
+
+            <!-- 时间选择输入框 -->
+            <div class="time-input-wrapper">
+                <el-date-picker
+                    v-model="selectedTime"
+                    type="date"
+                    size="large"
+                    placeholder="请选择日期"
+                    format="YYYY-MM-DD"
+                    value-format="YYYY-MM-DD"
+                    style="width: 100%"
+                    :editable="false"
+                    :clearable="false"
+                />
+            </div>
+
+            <!-- 确认按钮 -->
+            <div class="btn-confirm" @click="handleConfirm">确认</div>
+        </div>
+    </popup>
+</template>
+
+<script setup>
+import { Popup } from "vant";
+import { computed, ref } from "vue";
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+    // 控制弹窗显示/隐藏
+    show: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const emit = defineEmits(["update:show", "confirm"]);
+
+// 处理v-model双向绑定
+const showValue = computed({
+    get: () => props.show,
+    set: (value) => emit("update:show", value),
+});
+
+// 选中的时间
+const selectedTime = ref("");
+
+// 确认按钮点击
+const handleConfirm = () => {
+    if (!selectedTime.value) {
+        ElMessage.warning("请选择日期");
+        return;
+    }
+    emit("confirm", selectedTime.value);
+    emit("update:show", false);
+    // 重置日期
+    selectedTime.value = "";
+};
+</script>
+
+<style scoped lang="scss">
+.reminder-time-popup {
+    width: 90%;
+    padding: 24px 18px 20px;
+    border-radius: 8px;
+    background: linear-gradient(360deg, #FFFFFF 74.2%, #D1EBFF 100%);
+
+
+    ::v-deep {
+        .van-popup__close-icon {
+            color: #333333;
+        }
+    }
+
+    .popup-content {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .popup-header {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+
+        .required {
+            color: #ff4d4f;
+            margin-right: 4px;
+            font-size: 16px;
+        }
+
+        .popup-title {
+            font-size: 16px;
+        }
+    }
+
+    .time-input-wrapper {
+        margin-bottom: 24px;
+    }
+
+    .btn-confirm {
+        padding: 10px;
+        background: #2199f8;
+        color: #ffffff;
+        border-radius: 25px;
+        font-size: 16px;
+        text-align: center;
+    }
+}
+</style>

src/views/old_mini/home/index.vue

@@ -50,6 +50,19 @@
         @later="handleAgriLater"
         @executed="handleAgriExecuted"
     />
+
+    <!-- 提醒时间选择弹窗 -->
+    <reminder-time-popup
+        v-model:show="showReminderTimePopup"
+        @confirm="handleReminderTimeConfirm"
+    />
+
+    <!-- 执行轨迹弹窗 -->
+    <execute-trace-popup
+        v-model:show="showExecuteTracePopup"
+        @later="handleTraceLater"
+        @confirm="handleTraceConfirm"
+    />
 </template>
 
 <script setup>
@@ -61,6 +74,8 @@ 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 reminderTimePopup from "@/components/popup/reminderTimePopup.vue";
+import executeTracePopup from "@/components/popup/executeTracePopup.vue";
 import knowledgeCard from "./components/knowledgeCard.vue";
 
 const store = useStore();
@@ -75,31 +90,62 @@ const handleBtn = () => {
 
 // 农事执行弹窗相关
 const showAgriExecutePopup = ref(false); // 农事执行弹窗
-// const agriExecuteData = ref({
-//     expertName: "韦帮稳",
-//     title: "梢期杀虫 农事执行",
-//     abnormalText: "由于***异常的出现,由于***异常的出现,由于***异常的出现,由于***异常的出现,",
-//     imageUrl: "",
-//     laterBtn:true,
-// });
-
 const agriExecuteData = ref({
     expertName: "韦帮稳",
-    title: "农情互动任务采集",
-    abnormalText: "现在已处于 花芽分化期 ，上传照片反馈您的荔枝生长近况",
+    title: "梢期杀虫 农事执行",
+    abnormalText: "由于***异常的出现,由于***异常的出现,由于***异常的出现,由于***异常的出现,",
     imageUrl: "",
-    executedButtonText:'查看任务',
+    laterBtn:true,
 });
 
+// const agriExecuteData = ref({
+//     expertName: "韦帮稳",
+//     title: "农情互动任务采集",
+//     abnormalText: "现在已处于 花芽分化期 ，上传照片反馈您的荔枝生长近况",
+//     imageUrl: "",
+//     executedButtonText:'查看任务',
+// });
+
 // 农事执行弹窗相关方法
 const handleAgriLater = () => {
     console.log("稍后执行");
     // 可以在这里添加稍后执行的逻辑
+    // 关闭当前弹窗
+    showAgriExecutePopup.value = false;
+    // 显示提醒时间选择弹窗
+    showReminderTimePopup.value = true;
 };
 
 const handleAgriExecuted = () => {
     console.log("我已执行");
-    // 可以在这里添加执行完成的逻辑
+    // 关闭当前弹窗
+    showAgriExecutePopup.value = false;
+    // 显示执行轨迹弹窗
+    showExecuteTracePopup.value = true;
+};
+
+// 提醒时间选择弹窗相关
+const showReminderTimePopup = ref(false);
+
+// 确认提醒时间
+const handleReminderTimeConfirm = (time) => {
+    console.log("选择的提醒时间:", time);
+    // 可以在这里添加提交提醒时间的逻辑
+};
+
+// 执行轨迹弹窗相关
+const showExecuteTracePopup = ref(false);
+
+// 稍后上传
+const handleTraceLater = () => {
+    console.log("稍后上传");
+    // 可以在这里添加稍后上传的逻辑
+};
+
+// 确认上传
+const handleTraceConfirm = () => {
+    console.log("确认上传");
+    // 可以在这里添加确认上传的逻辑
 };
 
 // 显示农事执行弹窗的方法（可以在需要的地方调用）