|
|
@@ -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>
|