Quellcode durchsuchen

feat:添加内容弹窗

wangsisi vor 5 Tagen
Ursprung
Commit
f95c4c6bd4

+ 18 - 22
src/components/pageComponents/ArchivesFarmTimeLine.vue

@@ -38,9 +38,9 @@
                                                 <span class="van-ellipsis">{{ shouldShowBlue(p) ? '物候进程' : fw.title }}</span>
                                                 <el-icon v-if="shouldShowBlue(p)"><ArrowRight /></el-icon>
                                             </div>
-                                            <div class="text green van-ellipsis" v-if="fw?.sourceType === 7">
+                                            <!-- <div class="text green van-ellipsis" v-if="fw?.sourceType === 7">
                                                 执行者:{{ fw.sourceDataJson.executorName }}
-                                            </div>
+                                            </div> -->
                                         </div>
                                         <div class="title-text van-ellipsis" v-if="shouldShowBlue(p)">{{ fw.title }}</div>
                                     </div>
@@ -1087,7 +1087,7 @@ watch(
                                 .left-date {
                                     color: #2199f8;
                                     border: 1px solid #2199f8;
-                                    padding: 1px 5px;
+                                    padding: 1px 5px; 
                                     border-radius: 2px;
                                     font-size: 12px;
                                 }
@@ -1146,7 +1146,7 @@ watch(
                                 box-sizing: border-box;
                                 top: -4px;
                                 right: -6px;
-                                background: #2199f8;
+                                background: #BFBFBF;
                                 color: #fff;
                                 font-size: 12px;
                                 border-radius: 50%;
@@ -1188,46 +1188,42 @@ watch(
                 }
 
                 .arrange-card.status-warning {
-                    border-color: #f67d7d;
+                    border-color: #FF4E4E;
 
                     .card-left {
                         .left-info {
                             .left-date {
-                                background: #f67d7d;
+                                color: #FF4E4E;
+                                border-color: #FF4E4E;
                             }
                         }
-                    }
-
-                    .card-right {
-                        .num {
-                            background: #f67d7d;
+                        .title-text{
+                            color: #FF4E4E;
+                            background: rgba(255, 78, 78, 0.1);
                         }
                     }
-
                     &::before {
-                        border-right-color: #f67d7d;
+                        border-right-color: #FF4E4E;
                     }
                 }
 
                 .arrange-card.status-complete {
-                    border-color: #52c03c;
+                    border-color: #FF943D;
 
                     .card-left {
                         .left-info {
                             .left-date {
-                                background: #52c03c;
+                                color: #FF943D;
+                                border-color: #FF943D;
                             }
                         }
-                    }
-
-                    .card-right {
-                        .num {
-                            background: #52c03c;
+                        .title-text{
+                            color: #FF943D;
+                            background: rgba(255, 149, 61, 0.1);
                         }
                     }
-
                     &::before {
-                        border-right-color: #52c03c;
+                        border-right-color: #FF943D;
                     }
                 }
 

+ 163 - 0
src/components/popup/droneConsultPopup.vue

@@ -0,0 +1,163 @@
+<template>
+    <popup v-model:show="showValue" round class="drone-consult-popup" :close-on-click-overlay="true" teleport="body">
+        <div class="popup-content">
+            <!-- 无人机咨询:飞鸟购买 -->
+            <template v-if="type === 'droneConsult'">
+                <div class="top-text">未监测您果园有配套的无人机,您可咨询飞鸟购买</div>
+                <div class="code-wrap">
+                    <img class="code-img" src="@/assets/img/home/qrcode.png" alt="">
+                </div>
+                <div class="hint-bubble">长按可添加客服,咨询相关问题</div>
+                <div class="action-btn" @click="handleCopy">一键复制微信号</div>
+            </template>
+            <!-- 地形/建模航线 -->
+            <template v-else-if="type === 'terrainRoute'">
+                <div class="top-text">
+                    <div>需要获取精细的地形信息才可以规划航</div>
+                    <div>线,点击获取建模航线</div>
+                </div>
+                <div class="action-btn" @click="handleConfirm">立即获取</div>
+            </template>
+            <!-- 航线已生成(兼容图片 UI:中间区域不展示,仅文案 + 我知道了) -->
+            <template v-else-if="type === 'terrainRouteSuccess'">
+                <div class="top-text">果园三维建模航线已经生成,航线已经推送到遥控器上,请您按照规划的航线起飞即可</div>
+                <div class="video-wrap"></div>
+                <div class="action-btn" @click="handleConfirm">我知道了</div>
+            </template>
+        </div>
+    </popup>
+</template>
+
+<script setup>
+import { Popup } from "vant";
+import { computed } from "vue";
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    /** 弹窗类型:droneConsult 无人机咨询 | terrainRoute 地形/建模航线 | terrainRouteSuccess 航线已生成(兼容图片 UI,中间区域不展示) */
+    type: {
+        type: String,
+        default: "droneConsult",
+    },
+    /** 要复制的微信号(仅 type=droneConsult 时有效),不传则复制默认客服号 */
+    wechatId: {
+        type: String,
+        default: "",
+    },
+});
+
+const emit = defineEmits(["update:show", "copy", "confirm"]);
+
+const showValue = computed({
+    get: () => props.show,
+    set: (value) => emit("update:show", value),
+});
+
+const handleCopy = async () => {
+    const id = props.wechatId || "feiniao-kefu";
+    try {
+        await navigator.clipboard.writeText(id);
+        emit("copy", id);
+        emit("update:show", false);
+    } catch (e) {
+        console.error("复制失败", e);
+        emit("copy", id);
+        emit("update:show", false);
+    }
+};
+
+const handleConfirm = () => {
+    emit("confirm");
+    emit("update:show", false);
+};
+</script>
+
+<style scoped lang="scss">
+.drone-consult-popup {
+    width: 89%;
+    padding: 20px 16px;
+
+    .popup-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .top-text {
+        font-size: 16px;
+        color: #333;
+        text-align: left;
+        line-height: 1.6;
+        margin-bottom: 20px;
+        width: 100%;
+    }
+
+    .code-wrap{
+        width: 186px;
+        height: 186px;
+        background: #f5f5f5;
+        border-radius: 4px;
+        border: 0.86px solid rgba(33, 153, 248, 0.2);
+        background: rgba(33, 153, 248, 0.04);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .code-img{
+            width: 176px;
+            height: 176px;
+            object-fit: cover;
+        }
+    }
+
+    .hint-bubble {
+        padding: 12px;
+        color: #2199f8;
+        background: rgba(33, 153, 248, 0.1);
+        padding: 3px 9px 9px;
+        border-radius: 8px;
+        position: relative;
+        margin-top: 5px;
+        margin: 16px 0;
+
+        // 三角形小尖尖
+        &::before {
+            content: "";
+            position: absolute;
+            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);
+        }
+    }
+
+    .video-wrap{
+        width: 100%;
+        height: 220px;
+        background: rgba(33, 153, 248, 0.05);
+        border-radius: 5px;
+        border: 1px solid rgba(33, 153, 248, 0.2);
+        margin-bottom: 16px;
+    }
+
+    .action-btn {
+        width: 100%;
+        box-sizing: border-box;
+        font-size: 16px;
+        background: #2199f8;
+        color: #fff;
+        text-align: center;
+        padding: 8px;
+        border-radius: 4px;
+    }
+
+    .top-text > div {
+        margin-bottom: 0;
+    }
+}
+</style>

+ 42 - 12
src/views/old_mini/interactionList/drawRegion.vue

@@ -16,10 +16,14 @@
             </div>
         </div>
     </div>
+
+    <!-- 地形/建模航线提示弹窗(复用 droneConsultPopup:terrainRoute 立即获取 → terrainRouteSuccess 航线已生成) -->
+    <drone-consult-popup v-model:show="showTerrainRoutePopup" :type="terrainPopupType" @confirm="onTerrainRouteConfirm" />
 </template>
 
 <script setup>
 import customHeader from "@/components/customHeader.vue";
+import DroneConsultPopup from "@/components/popup/droneConsultPopup.vue";
 import { ref, onMounted, onActivated, onDeactivated } from "vue";
 import DrawRegionMap from "./map/drawRegionMap.js";
 import { useRouter, useRoute } from "vue-router";
@@ -31,26 +35,37 @@ const route = useRoute();
 const mapContainer = ref(null);
 const drawRegionMap = new DrawRegionMap();
 
-const type = ref(null)
+const type = ref(null);
+const showTerrainRoutePopup = ref(false);
+/** 弹窗类型:terrainRoute 立即获取 | terrainRouteSuccess 航线已生成 */
+const terrainPopupType = ref("terrainRoute");
+
 onMounted(() => {
-    type.value = route.query.type
-    const point = route.query.mapCenter || "POINT (113.6142086995688 23.585836479509055)"
+    type.value = route.query.type;
+    const point = route.query.mapCenter || "POINT (113.6142086995688 23.585836479509055)";
     drawRegionMap.initMap(point, mapContainer.value);
+    if (route.query.showTerrainPopup === "1") {
+        showTerrainRoutePopup.value = true;
+    }
 });
 
 onActivated(() => {
-    const point = route.query.mapCenter || "POINT (113.6142086995688 23.585836479509055)"
-    
+    const point = route.query.mapCenter || "POINT (113.6142086995688 23.585836479509055)";
+
     // 先绘制地块
     const polygonData = route.query.polygonData;
 
     if (polygonData) {
         drawRegionMap.setAreaGeometry(JSON.parse(polygonData)?.geometryArr);
     }
-    
+
     // 再设置地图中心位置,确保视图在 mapCenter
-    drawRegionMap.setMapPosition(convertPointToArray(point))
-})
+    drawRegionMap.setMapPosition(convertPointToArray(point));
+
+    if (route.query.showTerrainPopup === "1") {
+        showTerrainRoutePopup.value = true;
+    }
+});
 
 onDeactivated(() => {
     drawRegionMap.clearLayer()
@@ -77,12 +92,27 @@ const deletePolygon = () => {
     });
 };
 
+const onTerrainRouteConfirm = () => {
+    if (terrainPopupType.value === "terrainRoute") {
+        setTimeout(() => {
+            terrainPopupType.value = "terrainRouteSuccess";
+            showTerrainRoutePopup.value = true;
+        }, 1000);
+    }else{
+        showTerrainRoutePopup.value = false;
+        router.back();
+    }
+};
+
 const confirm = () => {
-    // getAreaGeometry
-    const polygonData = drawRegionMap.getAreaGeometry()
-    console.log("polygonData", polygonData);
+    if (type.value === "droneConsult") {
+        terrainPopupType.value = "terrainRoute";
+        showTerrainRoutePopup.value = true;
+        return;
+    }
+    const polygonData = drawRegionMap.getAreaGeometry();
     sessionStorage.setItem("drawRegionPolygonData", JSON.stringify(polygonData));
-    router.back()
+    router.back();
 };
 </script>
 

+ 38 - 4
src/views/old_mini/interactionList/index.vue

@@ -49,7 +49,8 @@
                         <el-icon><Plus /></el-icon>
                         <span>继续上传照片</span>
                     </div> -->
-                    <uploader class="upload-wrap continue-upload-btn" multiple :max-count="10" :after-read="afterReadUpload">
+                    <uploader class="upload-wrap continue-upload-btn" multiple :max-count="10"
+                        :after-read="afterReadUpload">
                         <div class="upload-btn">
                             <el-icon>
                                 <Plus />
@@ -97,7 +98,7 @@
                 <template v-if="!item.expanded">
                     <span class="proportion-text" v-if="item.replyText">当前果园{{ item.phenologyName }}占比: {{
                         item.replyText
-                    }}%</span>
+                        }}%</span>
                     <span class="proportion-text" v-else>暂无数据</span>
                 </template>
                 <div class="toggle-btn" @click="toggleExpand(item)">
@@ -108,11 +109,19 @@
                 </div>
             </div>
         </div>
-
         <div class="empty-data" v-if="!loading && listData.length === 0">暂无数据</div>
     </div>
+
+    <div class="custom-bottom-fixed-btns" :class="{ 'center-btn': true}">
+        <!-- <div class="bottom-btn secondary-btn" @click="handleShowDroneConsultPopup">获取自动飞行航线</div>
+        <div class="bottom-btn secondary-btn">邀请农情互动</div> -->
+        <div class="bottom-btn primary-btn" @click="handleSubmitAll">一键提交</div>
+    </div>
+
     <!-- 农场信息完善弹窗 -->
     <farm-info-popup :oldUser="oldUser" :expertMiniUserId="query.expertMiniUserId" v-model:show="showFarmInfoPopup" />
+    <!-- 无人机/飞行航线咨询弹窗 -->
+    <drone-consult-popup v-model:show="showDroneConsultPopup" @copy="onCopyWechatId" />
 
     <!-- 示例照片轮播组件 -->
     <example-popup v-model:show="showExamplePopup" :images="exampleList" :start-index="exampleStartIndex"
@@ -156,6 +165,7 @@ import { Uploader, Popup } from "vant";
 import customHeader from "@/components/customHeader.vue";
 import upload from "@/components/upload.vue";
 import FarmInfoPopup from "@/components/popup/farmInfoPopup.vue";
+import DroneConsultPopup from "@/components/popup/droneConsultPopup.vue";
 import ExamplePopup from "./components/examplePopup.vue";
 import { useRouter, useRoute } from "vue-router";
 import { base_img_url2 } from "@/api/config";
@@ -165,6 +175,14 @@ import { getFileExt } from "@/utils/util";
 import MorePopup from "./components/morePopup.vue";
 
 
+const showDroneConsultPopup = ref(false);
+const handleShowDroneConsultPopup = () => {
+    // showDroneConsultPopup.value = true;
+    router.push(
+        `/draw_region?type=droneConsult`
+    );
+}
+
 const showFarmInfoPopup = ref(false);
 const loading = ref(false);
 const router = useRouter();
@@ -381,6 +399,10 @@ const openMorePopup = (images) => {
     morePopupRef.value.openPopup();
 }
 
+const onCopyWechatId = () => {
+    ElMessage.success("微信号已复制");
+};
+
 const oldUser = ref(false);
 onMounted(() => {
     // 初始化加载
@@ -388,7 +410,7 @@ onMounted(() => {
     // 加载数据
     loadData();
     oldUser.value = query.value.oldUser && Boolean(query.value.oldUser);
-    if(oldUser.value){
+    if (oldUser.value) {
         showFarmInfoPopup.value = true;
     }
 });
@@ -405,6 +427,10 @@ const getFarmList = async () => {
     }
 }
 
+const handleSubmitAll = () => {
+    console.log("一键提交");
+};
+
 </script>
 <style scoped lang="scss">
 .interaction-list {
@@ -697,6 +723,14 @@ const getFarmList = async () => {
     }
 }
 
+.center-btn{
+    justify-content: center;
+    .primary-btn{
+        padding: 10px 32px;
+        background: #2199F8;
+    }
+}
+
 .upload-progress-popup {
     width: 100%;
     padding: 20px 16px;