fix: 完善弹窗

src/components/popup/tipPopup.vue

@@ -4,6 +4,7 @@
         round 
         class="tip-popup"
         :overlay-style="overlayStyle"
+        :closeable="hasClose"
         teleport="body"
         :close-on-click-overlay="closeOnClickOverlay"
         @click-overlay="handleClickOverlay"
@@ -73,6 +74,11 @@ const props = defineProps({
         type: String,
         default: "",
     },
+    // 是否可以关闭
+    hasClose: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const emit = defineEmits(["update:show", "confirm", "handleClickOverlay"]);

src/views/old_mini/modify_work/modify.vue

@@ -15,10 +15,10 @@
                         <div>{{ detailData?.name }}<span class="type-tag">标准农事</span></div>
                         <el-select v-if="isEdit" size="small" v-model="tagName" placeholder="标记为" style="width: 94px">
                             <el-option
-                            v-for="item in tagList"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value"
+                                v-for="item in tagList"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
                             />
                         </el-select>
                         <div class="edit-tag tag-text" v-else>{{ statusMap[tagName] }}</div>
@@ -531,6 +531,38 @@
         @handleSaveSuccess="handleSaveInteractSuccess"
         @handleDeleteInteract="handleDeleteInteract"
     ></interact-popup>
+
+    <!-- 取消关注提示 -->
+    <tip-popup
+        v-model:show="showTipPopup"
+        type="warning"
+        text="您确定要取消关注"
+        text2="农事吗？系统将不再为您推送该农事"
+        :highlightText="detailData.name"
+        :overlayStyle="{ 'z-index': 9999 }"
+        buttonText="确认取消关注"
+        @confirm="handleBtn"
+        :hasClose="true"
+        :closeOnClickOverlay="false"
+    />
+    <!-- 完善信息弹窗 -->
+    <popup 
+        v-model:show="showCompletePopup" 
+        round 
+        class="complete-tip-popup"
+        closeable
+    >
+    <img class="tip-icon success-icon" src="@/assets/img/home/right.png" alt="" />
+    <div class="tip-text success-text">
+        农事信息已完善
+    </div>
+        <div class="complete-content">
+        </div>
+        <div class="btn-wrap">
+            <div class="btn-item second" @click="handleViewDetail">查看详情</div>
+            <div class="btn-item primary" @click="handleCompleteNext">完善下一个农事</div>
+        </div>
+    </popup>
 </template>
 
 <script setup>
@@ -539,11 +571,12 @@ import { useRouter, useRoute } from "vue-router";
 import { ElMessage, ElMessageBox } from "element-plus";
 import customHeader from "@/components/customHeader.vue";
 import { useStore } from "vuex";
+import { Popup } from "vant";
 import { formatArea } from "@/common/commonFun";
 import priceSheetPopup from "@/components/popup/priceSheetPopup.vue";
 import interactPopup from "@/components/popup/interactPopup.vue";
 import priceTable from "../agri_work/components/priceTable.vue";
-
+import tipPopup from "@/components/popup/tipPopup.vue";
 import dayjs from "dayjs";
 const store = useStore();
 const pageRef = ref(null);
@@ -567,7 +600,7 @@ const hasPlanPermission = computed(() => {
 const tagList = ref([
     { label: "托管农事", value: 2 },
     { label: "特别关注", value: 1 },
-    { label: "取消关注", value: 0 },
+    // { label: "取消关注", value: 0 },
 ]);
 
 const tagName = ref("");
@@ -580,15 +613,24 @@ const interactFormData = ref({
 });
 const phenologyList = ref([]);
 
+// 是否编辑
 const isEdit = ref(false);
+// 是否只显示价格，不需要农情互动
 const onlyPrice = ref(false);
+// 是否不显示价格，种植方案没有价格
 const noPrice = ref(false);
+// 是否标注方案
 const isDefault = ref(false);
+// 是否在完善信息弹窗中
+const isDoingComplete = ref(false);
+
+const showCompletePopup = ref(false);
 onActivated(() => {
     isDefault.value = route.query.isDefault == 'true' ? true : false;
     isEdit.value = route.query.isEdit ? true : false;
     onlyPrice.value = route.query.onlyPrice ? true : false;
     noPrice.value = route.query.noPrice == 'true' ? true : false;
+    isDoingComplete.value = route.query.isDoingComplete == 'true' ? true : false;
     if (route.query.farmWorkId) {
         getDetail();
     }
@@ -625,14 +667,13 @@ const showPriceSheetPopup = () => {
 };
 
 const statusMap = ref({
-    0: "取消关注",
+    0: "",
     1: "特别关注",
     2: "托管农事",
 });
 const detailData = ref({});
 const userInfo = localStorage.getItem('localUserInfo');
 const userInfoObj = userInfo ? JSON.parse(userInfo) : {};
-console.log('userInfoObj', userInfoObj);
 const getDetail = async () => {
     const { data, code } = await VE_API.farm.getFarmWorkLib({ id: route.query.farmWorkId, farmId: route.query.farmId, agriculturalId: userInfoObj?.agriculturalId });
     if(code === 0) {
@@ -678,8 +719,21 @@ const getPriceList = async (schemeId, pesticideFertilizerCodes) => {
     quotationData.value = {...detailData.value, ...dynamicValidateForm};
 };
 
+const showTipPopup = ref(false);
+// 取消关注弹窗
 const handleCancelAttention = () => {
-    console.log('handleCancelAttention');
+    showTipPopup.value = true;
+};
+
+const handleBtn = () => {
+    showTipPopup.value = false;
+    // 切换标记
+    VE_API.container_farm_work_arrange.toggleFollow({ id: route.query.id, isFollow: 0 }).then((res) => {
+        if (res.code === 0) {
+            ElMessage.success("操作成功");
+            router.back();
+        }
+    });
 };
 
 const toEditPrescription = () => {
@@ -711,6 +765,33 @@ function getServiceCost(cost, area) {
     return (parseFloat(cost) * parseFloat(area)).toFixed(2);
 }
 
+const handleViewDetail = () => {
+    showCompletePopup.value = false;
+    isEdit.value = false;
+    nextTick(() => {
+        if (pageRef.value) {
+            pageRef.value.scrollTo({ top: 0, behavior: "auto" });
+        } else {
+            window.scrollTo(0, 0);
+        }
+    });
+};
+
+const handleCompleteNext = () => {
+    showCompletePopup.value = false;
+    router.replace({
+        path: "/modify",
+        query: {
+            farmWorkId: route.query.farmWorkId,
+            farmId: route.query.farmId,
+            id: route.query.id,
+            isEdit: true,
+            onlyPrice: false,
+            noPrice: false,
+            isDefault: false,
+        },
+    });
+};
 const resetForm = (formEl) => {
     if (!formEl) return;
     formEl.resetFields();
@@ -973,6 +1054,9 @@ const submitForm = (formEl) => {
     if (!formEl) return;
     formEl.validate(async (valid) => {
         if (valid) {
+            // 校验标记是否已选择
+            if (!validateTagName()) return;
+
             // 校验农情互动,不通过，直接返回失败
             if (!onlyPrice.value && !validateInteractForm()) return false;
 
@@ -991,6 +1075,15 @@ const submitForm = (formEl) => {
     });
 };
 
+// 校验标记是否已选择
+const validateTagName = () => {
+    if (tagName.value !== 1 && tagName.value !== 2) {
+        ElMessage.warning("请选择标记类型");
+        return false;
+    }
+    return true;
+};
+
 // 检验服务报价是否填写
 const validateServicePrice = () => {
     if (!servicePricePerMu.value) {
@@ -1070,6 +1163,10 @@ const submit = () => {
     VE_API.farm.updateBatchByScheme(priceList).then(async (res) => {
         if (res.code === 0) {
             await getDetail();
+            if (isDoingComplete.value) {
+                showCompletePopup.value = true;
+                return;
+            }
             ElMessage.success("保存成功");
             if (onlyPrice.value) {
                 // router.push(`/task_condition?noReload=true`);
@@ -1119,7 +1216,7 @@ const getFarmWorkArrangeDetail = async (id) => {
     if (!id) return;
     const { data, code } = await VE_API.farm.getFarmWorkArrangeDetail({ id });
     if(code === 0) {
-        tagName.value = data.isFollow;
+        tagName.value = data.isFollow === 0 ? null : data.isFollow;
         interactFormData.value = {
             phenologyId: data.phenologyId || "",
             interactionTime: data.interactionTime || "",
@@ -2179,61 +2276,57 @@ const handleDeleteInteract = () => {
     }
 }
 
-.tag-list {
-    font-size: 14px;
-    .tag-item + .tag-item {
-        margin-top: 6px;
-    }
-    .tag-item {
-        padding: 2px 8px;
-        text-align: center;
-        &.active {
-            color: #2199f8;
-            background: rgba(33, 153, 248, 0.16);
-            border-radius: 4px;
-        }
-    }
-}
-.task-tips-popup {
-    width: 75%;
-    padding: 28px 28px 20px;
+.complete-tip-popup {
+    width: 80%;
+    min-width: 294px;
+    padding: 28px 20px 20px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    .create-farm-icon {
-        width: 40px;
-        height: 40px;
-        margin-bottom: 12px;
-    }
-    .farm-check-icon {
-        width: 68px;
-        height: 68px;
+    .tip-icon {
         margin-bottom: 12px;
+        &.create-icon {
+            width: 40px;
+            height: 40px;
+        }
+        &.success-icon {
+            width: 68px;
+            height: 68px;
+        }
     }
-    .create-farm-text {
-        font-size: 20px;
-        font-weight: 500;
-        line-height: 40px;
+    .tip-text {
         margin-bottom: 32px;
         text-align: center;
         &.success-text {
             font-size: 24px;
-            font-weight: 500;
+            font-weight: 400;
         }
     }
-    .main-text {
-        color: #2199f8;
-    }
-    .create-farm-btn {
+    .btn-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
         width: 100%;
-        box-sizing: border-box;
-        padding: 8px;
-        border-radius: 25px;
-        font-size: 16px;
-        background: #2199f8;
-        color: #fff;
-        text-align: center;
+        .btn-item {
+            height: 40px;
+            line-height: 40px;
+            border-radius: 20px;
+            font-size: 16px;
+            color: #2199F8;
+            text-align: center;
+            &.second {
+                flex: none;
+                width: 92px;
+                border: 1px solid #2199F8;
+            }
+            &.primary {
+                flex: 1;
+                background: #2199f8;
+                color: #fff;
+            }
+        }
     }
 }
 </style>