|
|
@@ -2,7 +2,7 @@
|
|
|
<div class="ba-information">
|
|
|
<div class="ba-information__content">
|
|
|
<div class="page-header">
|
|
|
- <div class="page-title">完善个人信息</div>
|
|
|
+ <div class="page-title">请完善农场信息</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="info-card">
|
|
|
@@ -37,7 +37,24 @@
|
|
|
type="tel"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="常驻点位" prop="location" class="location-form-item">
|
|
|
+ <el-form-item label="种植品类" prop="crop">
|
|
|
+ <el-select
|
|
|
+ v-model="form.crop"
|
|
|
+ class="crop-select"
|
|
|
+ placeholder="选择品类"
|
|
|
+ placement="bottom-end"
|
|
|
+ popper-class="crop-select-popper"
|
|
|
+ teleported
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in CROP_OPTIONS"
|
|
|
+ :key="item"
|
|
|
+ :label="item"
|
|
|
+ :value="item"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="种植点位" prop="location" class="location-form-item">
|
|
|
<div class="location-block" @click="goSelectLocation">
|
|
|
<div class="map-preview">
|
|
|
<div class="map-preview__map" ref="previewMapRef"></div>
|
|
|
@@ -50,7 +67,7 @@
|
|
|
</div>
|
|
|
|
|
|
<div class="custom-bottom-fixed-btns">
|
|
|
- <div class="bottom-btn primary-btn" @click="handleNext">下一步 (1/4)</div>
|
|
|
+ <div class="bottom-btn primary-btn" @click="handleNext">确认信息</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -58,16 +75,20 @@
|
|
|
<script setup>
|
|
|
import { nextTick, onActivated, onBeforeUnmount, onMounted, reactive, ref } from "vue";
|
|
|
import { useRouter } from "vue-router";
|
|
|
-import { useStore } from "vuex";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
import SelectLocationMap from "../map/selectLocationMap.js";
|
|
|
|
|
|
const LOCATION_KEY = "ENTRY_RESIDENT_LOCATION";
|
|
|
const FORM_KEY = "ENTRY_BA_FORM";
|
|
|
-const DEFAULT_POINT = "POINT(113.6142086995688 23.585836479509055)";
|
|
|
+const STEP_KEY = "ENTRY_INFORMATION_STEP";
|
|
|
+/** 本地标记:用户已新增农场 */
|
|
|
+const HAS_FARM_KEY = "HAS_ENTRY_FARM";
|
|
|
+/** 默认定位:河北宁晋县 */
|
|
|
+const DEFAULT_POINT = "POINT(114.91863572509733 37.67702031436258)";
|
|
|
+/** 河北主要作物(固定下拉选项) */
|
|
|
+const CROP_OPTIONS = ["玉米", "冬小麦", "水稻", "马铃薯", "大豆", "谷子", "高粱", "莜麦"];
|
|
|
|
|
|
-const emit = defineEmits(["next"]);
|
|
|
const router = useRouter();
|
|
|
-const store = useStore();
|
|
|
|
|
|
const formRef = ref(null);
|
|
|
const previewMapRef = ref(null);
|
|
|
@@ -75,6 +96,7 @@ let previewMap = null;
|
|
|
const form = reactive({
|
|
|
name: "",
|
|
|
phone: "",
|
|
|
+ crop: "",
|
|
|
location: "",
|
|
|
});
|
|
|
|
|
|
@@ -91,15 +113,12 @@ const rules = {
|
|
|
trigger: "blur",
|
|
|
},
|
|
|
],
|
|
|
+ crop: [{ required: true, message: "请选择种植品类", trigger: "change" }],
|
|
|
location: [{ required: true, message: "请选择常驻点位", trigger: "change" }],
|
|
|
};
|
|
|
|
|
|
function getDefaultPoint() {
|
|
|
- return (
|
|
|
- localStorage.getItem("MINI_USER_LOCATION_POINT") ||
|
|
|
- store.state.home.miniUserLocationPoint ||
|
|
|
- DEFAULT_POINT
|
|
|
- );
|
|
|
+ return DEFAULT_POINT;
|
|
|
}
|
|
|
|
|
|
function readJson(key) {
|
|
|
@@ -114,7 +133,7 @@ function readJson(key) {
|
|
|
function saveFormDraft() {
|
|
|
sessionStorage.setItem(
|
|
|
FORM_KEY,
|
|
|
- JSON.stringify({ name: form.name, phone: form.phone })
|
|
|
+ JSON.stringify({ name: form.name, phone: form.phone, crop: form.crop })
|
|
|
);
|
|
|
}
|
|
|
|
|
|
@@ -123,6 +142,7 @@ function restoreFormDraft() {
|
|
|
if (!draft) return;
|
|
|
if (draft.name != null) form.name = draft.name;
|
|
|
if (draft.phone != null) form.phone = draft.phone;
|
|
|
+ if (draft.crop != null) form.crop = draft.crop;
|
|
|
}
|
|
|
|
|
|
function utilWktToCoordinate(point) {
|
|
|
@@ -182,12 +202,24 @@ const goSelectLocation = () => {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+function clearFormDraft() {
|
|
|
+ form.name = "";
|
|
|
+ form.phone = "";
|
|
|
+ form.crop = "";
|
|
|
+ form.location = "";
|
|
|
+ sessionStorage.removeItem(FORM_KEY);
|
|
|
+ sessionStorage.removeItem(LOCATION_KEY);
|
|
|
+ sessionStorage.removeItem(STEP_KEY);
|
|
|
+}
|
|
|
+
|
|
|
const handleNext = async () => {
|
|
|
if (!formRef.value) return;
|
|
|
try {
|
|
|
await formRef.value.validate();
|
|
|
- saveFormDraft();
|
|
|
- emit("next", { ...form });
|
|
|
+ localStorage.setItem(HAS_FARM_KEY, "1");
|
|
|
+ clearFormDraft();
|
|
|
+ router.replace("/growth_report");
|
|
|
+ ElMessage.success("上传成功,报告正在生成中...");
|
|
|
} catch {
|
|
|
// 校验未通过
|
|
|
}
|
|
|
@@ -306,6 +338,74 @@ onBeforeUnmount(() => {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ .crop-select {
|
|
|
+ width: 120px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-left: auto;
|
|
|
+ height: 32px;
|
|
|
+
|
|
|
+ :deep(.el-select__wrapper) {
|
|
|
+ box-shadow: none;
|
|
|
+ background: transparent;
|
|
|
+ padding: 0;
|
|
|
+ height: 32px;
|
|
|
+ min-height: 32px !important;
|
|
|
+ width: 100%;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-select__selection) {
|
|
|
+ position: relative;
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-select__selected-item) {
|
|
|
+ font-size: 15px;
|
|
|
+ color: #1a1a1a;
|
|
|
+ line-height: 32px;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-select__placeholder) {
|
|
|
+ position: absolute;
|
|
|
+ inset: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ margin: 0;
|
|
|
+ font-size: 15px;
|
|
|
+ color: #2199f8;
|
|
|
+ line-height: 32px;
|
|
|
+ transform: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-select__placeholder.is-transparent) {
|
|
|
+ color: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-select__suffix) {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 32px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ :deep(.el-select__caret) {
|
|
|
+ color: #2199f8;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.location-form-item {
|
|
|
display: block;
|
|
|
|
|
|
@@ -386,3 +486,9 @@ onBeforeUnmount(() => {
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.crop-select-popper {
|
|
|
+ min-width: 120px !important;
|
|
|
+}
|
|
|
+</style>
|