feat：添加提醒客户页面

src/router/globalRoutes.js

@@ -354,4 +354,10 @@ export default [
         meta: { keepAlive: true },
         component: () => import("@/views/old_mini/home/subPages/prescriptionPage.vue"),
     },
+    // 提醒客户
+    {
+        path: "/remind_customer",
+        name: "RemindCustomer",
+        component: () => import("@/views/old_mini/task_condition/components/remindCustomer.vue"),
+    },
 ];

src/views/old_mini/home/subPages/warningDetail.vue

@@ -1,13 +1,15 @@
 <template>
     <div class="warning-detail">
         <custom-header name="查看详情"></custom-header>
-        <div class="article-content">
+        <div class="article-content" :class="{ 'is-link': isLink }">
             <div class="article-header">
                 <div class="title">{{ warningDetail.title }}</div>
                 <div class="author-info">
                     <el-avatar :size="16" :src="warningDetail.icon" />
                     <span class="author-name">{{ warningDetail.name }}</span>
-                    <span class="qa-date">{{ warningDetail?.createTime && warningDetail?.createTime?.slice(0, 10) }}</span>
+                    <span class="qa-date">{{
+                        warningDetail?.createTime && warningDetail?.createTime?.slice(0, 10)
+                    }}</span>
                 </div>
             </div>
 
@@ -18,24 +20,48 @@
             <div class="article-text">
                 <span v-html="warningDetail.content"></span>
             </div>
+
+            <div class="article-footer">
+                <div class="footer-top">
+                    <img class="icon" src="@/assets/img/home/ask-icon.png" alt="" />
+                    <div class="title">在白点期，您当前农场是否出现白点？</div>
+                </div>
+                <div class="footer-bottom" :style="{ justifyContent: !isLink ? 'center' : 'flex-end' }">
+                    <div class="edit-btn" v-if="!isLink">编辑问题</div>
+                    <template v-else>
+                        <div class="edit-btn">否，未出现</div>
+                        <div class="edit-btn primary-btn">是，已出现</div>
+                    </template>
+                </div>
+            </div>
+
+            <div class="custom-bottom-fixed-btns" v-if="!isLink">
+                <div class="bottom-btn primary-btn" @click="handleForward">转发</div>
+            </div>
         </div>
     </div>
 </template>
 
 <script setup>
 import customHeader from "@/components/customHeader.vue";
-import { ref,onActivated } from "vue";
+import { ref, onActivated } from "vue";
 import { useRoute } from "vue-router";
 
 const route = useRoute();
 
+const isLink = ref(false);
+
 const warningDetail = ref({});
 const showImage = ref(false);
 onActivated(() => {
-    showImage.value = route.query.showImage === 'true' ? true : false;
+    showImage.value = route.query.showImage === "true" ? true : false;
     getWarningDetail();
 });
 
+const handleForward = () => {
+    console.log("转发");
+};
+
 const getWarningDetail = () => {
     const params = {
         id: route.query.id,
@@ -54,9 +80,11 @@ const getWarningDetail = () => {
     .article-content {
         padding: 8px 16px;
         overflow-y: auto;
-        height: calc(100% - 40px);
+        height: calc(100% - 40px - 60px);
         box-sizing: border-box;
-
+        &.is-link {
+            height: calc(100% - 40px);
+        }
         .article-header {
             .title {
                 font-size: 18px;
@@ -72,7 +100,8 @@ const getWarningDetail = () => {
                 padding-bottom: 12px;
                 border-bottom: 1px solid #f5f5f5;
 
-                .author-name,.qa-date {
+                .author-name,
+                .qa-date {
                     font-size: 14px;
                     color: #666;
                     font-weight: normal;
@@ -91,8 +120,8 @@ const getWarningDetail = () => {
                 object-fit: cover;
             }
         }
-        .article-text{
-            ::v-deep{
+        .article-text {
+            ::v-deep {
                 img {
                     width: 100%;
                     height: 175px;
@@ -101,6 +130,53 @@ const getWarningDetail = () => {
                 }
             }
         }
+
+        .article-footer {
+            margin-top: 12px;
+            border-radius: 8px;
+            border: 1px solid #2199f8;
+            padding: 10px;
+            .footer-top {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+
+                .icon {
+                    width: 20px;
+                    height: 20px;
+                }
+
+                .title {
+                    font-size: 16px;
+                    font-weight: 600;
+                }
+            }
+
+            .footer-bottom {
+                display: flex;
+                justify-content: flex-end;
+                gap: 10px;
+                margin-top: 10px;
+                .edit-btn {
+                    padding: 7px 20px;
+                    background: rgba(33, 153, 248, 0.1);
+                    color: #2199f8;
+                    border-radius: 25px;
+                    font-size: 12px;
+                    text-align: center;
+                    &.primary-btn{
+                        background: #2199f8;
+                        color: #fff;
+                    }
+                }
+            }
+        }
+    }
+    .custom-bottom-fixed-btns {
+        justify-content: center;
+        .primary-btn {
+            padding: 10px 34px;
+        }
     }
 }
 </style>

src/views/old_mini/monitor/subPages/plan.vue

@@ -668,7 +668,7 @@ const getReproductiveItemHeight = (phenologyItem) => {
     .custom-bottom-fixed-btns {
         justify-content: center;
         .primary-btn {
-            padding: 10px 34px;
+            padding: 10px 50px;
         }
     }
 }

src/views/old_mini/task_condition/components/interact.vue

@@ -58,7 +58,7 @@
                                 <div class="farm-addr">{{ item?.address }}</div>
                             </div>
                         </div>
-                        <div class="right-wrap">提醒客户</div>
+                        <div class="right-wrap" @click="handleRemindCustomer(item)">提醒客户</div>
                     </div>
                     <div class="item-bottom">
                         <div class="bottom-tag">
@@ -544,6 +544,13 @@ function handleSelectCurrentPhenology(item) {
         phenologyListVal: phenologyList.value,
     });
 }
+
+function handleRemindCustomer(item) {
+    router.push({
+        path: "/remind_customer",
+        query: { id: item.id },
+    });
+}
 </script>
 
 <style lang="scss" scoped>

src/views/old_mini/task_condition/components/remindCustomer.vue

@@ -0,0 +1,131 @@
+<template>
+    <div class="service-records-page">
+        <custom-header name="提醒客户"></custom-header>
+        <div class="record-list">
+            <div v-for="(item, index) in renderList" :key="index" class="record-card">
+                <img class="thumb" :src="item.thumb" alt="农场缩略图" @error="handleImgError" />
+                <div class="card-body" @click="handleItemClick(item.raw)">
+                    <div class="card-body-left">
+                        <div class="title van-multi-ellipsis--l2">{{ item.title }}</div>
+                        <div class="date">{{ item.date }}</div>
+                    </div>
+                    <div class="forward-btn" @click.stop="handleForward(item.raw)">转发</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { ref, onMounted, computed } from "vue";
+import customHeader from "@/components/customHeader.vue";
+import { useRouter } from "vue-router";
+import defaultThumb from "@/assets/img/home/farm.png";
+const router = useRouter();
+
+// 服务记录列表数据
+const recordList = ref([]);
+
+onMounted(() => {
+    getUserList();
+});
+
+const getUserList = async () => {
+    const { data } = await VE_API.user.userList();
+    if (data.length) {
+        recordList.value = data.filter((item) => item.serviceCount != 0);
+    }
+};
+const formatDate = (dateStr) => {
+    if (!dateStr) return "--";
+    const date = new Date(dateStr);
+    if (Number.isNaN(date.getTime())) return dateStr;
+    const y = date.getFullYear();
+    const m = `${date.getMonth() + 1}`.padStart(2, "0");
+    const d = `${date.getDate()}`.padStart(2, "0");
+    return `${y}-${m}-${d}`;
+};
+const renderList = [
+    {
+        title: "湛江出现了高温灼烧气象预警，请注意某某防范!",
+        date: "2025-11-12",
+        thumb: defaultThumb,
+    },
+    {
+        title: "农情互动提醒:",
+        date: "2025-11-12",
+        thumb: defaultThumb,
+    },
+    {
+        title: "农事执行提醒",
+        date: "2025-11-12",
+        thumb: defaultThumb,
+    },
+];
+// 处理列表项点击
+const handleItemClick = (data) => {
+    router.push(`/warning_detail?id=782295538706944000&showImage=true`);
+};
+// 处理转发按钮点击
+const handleForward = (data) => {
+    // TODO: 实现转发功能
+    console.log("转发", data);
+};
+const handleImgError = (e) => {
+    e.target.src = defaultThumb;
+};
+</script>
+<style lang="scss" scoped>
+.service-records-page {
+    width: 100%;
+    min-height: 100vh;
+    background: #f5f5f5;
+    .record-list {
+        padding: 10px 12px;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+    .record-card {
+        display: flex;
+        gap: 12px;
+        padding: 12px 10px;
+        background: #ffffff;
+        border-radius: 12px;
+        align-items: center;
+        height: 98px;
+        box-sizing: border-box;
+        .thumb {
+            width: 80px;
+            height: 74px;
+            border-radius: 8px;
+            object-fit: cover;
+        }
+        .card-body {
+            width: calc(100% - 80px - 12px);
+            height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .card-body-left{
+                width: calc(100% - 62px - 12px);
+                height: 95%;
+                display: flex;
+                flex-direction: column;
+                justify-content: space-between;
+                .date {
+                    font-size: 13px;
+                    color: #86909C;
+                    margin-top: 4px;
+                }
+            }
+        }
+        .forward-btn {
+            padding: 6px 19px;
+            background: rgba(33, 153, 248, 0.1);
+            color: #2199F8;
+            border-radius: 25px;
+            font-size: 12px;
+        }
+    }
+}
+</style>