소스 검색

feat: 录入信息

lxf 1 일 전
부모
커밋
11f71a35a0

+ 7 - 0
src/router/globalRoutes.js

@@ -156,4 +156,11 @@ export default [
         meta: { keepAlive: true },
         component: () => import("@/views/old_mini/farm_info/index.vue"),
     },
+    // 录入信息
+    {
+        path: "/entry_information",
+        name: "EntryInformation",
+        meta: { keepAlive: false },
+        component: () => import("@/views/old_mini/entry_information/index.vue"),
+    },
 ];

+ 47 - 0
src/views/old_mini/entry_information/components/baInformation.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="ba-information">
+        <div class="ba-information__content">
+            <!-- 基本信息 -->
+            基本信息
+        </div>
+        <div class="custom-bottom-fixed-btns">
+            <div class="bottom-btn primary-btn" @click="emit('next')">下一步 (1/3)</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const emit = defineEmits(["next"]);
+</script>
+
+<style lang="scss" scoped>
+.ba-information {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding-bottom: 80px;
+
+    &__content {
+        flex: 1;
+        overflow-y: auto;
+    }
+
+    .custom-bottom-fixed-btns {
+        background: transparent;
+        box-shadow: none;
+
+        .bottom-btn {
+            flex: 1;
+            padding: 12px 0;
+            font-size: 16px;
+            border-radius: 25px;
+        }
+
+        .primary-btn {
+            background: #2199f8;
+            color: #fff;
+        }
+    }
+}
+</style>

+ 55 - 0
src/views/old_mini/entry_information/components/selectCategory.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="select-category">
+        <div class="select-category__content">
+            <!-- 选择种植品类 -->
+            种植品类
+        </div>
+        <div class="custom-bottom-fixed-btns">
+            <div class="bottom-btn secondary-btn" @click="emit('prev')">上一步</div>
+            <div class="bottom-btn primary-btn" @click="emit('next')">下一步</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const emit = defineEmits(["prev", "next"]);
+</script>
+
+<style lang="scss" scoped>
+.select-category {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding-bottom: 80px;
+
+    &__content {
+        flex: 1;
+        overflow-y: auto;
+    }
+
+    .custom-bottom-fixed-btns {
+        gap: 12px;
+        background: transparent;
+        box-shadow: none;
+
+        .bottom-btn {
+            flex: 1;
+            padding: 12px 0;
+            font-size: 16px;
+            border-radius: 25px;
+        }
+
+        .secondary-btn {
+            color: #2199f8;
+            background: #fff;
+            border: 1px solid #2199f8;
+        }
+
+        .primary-btn {
+            background: #2199f8;
+            color: #fff;
+        }
+    }
+}
+</style>

+ 55 - 0
src/views/old_mini/entry_information/components/selectVariety.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="select-variety">
+        <div class="select-variety__content">
+            <!-- 选择种植品种 -->
+            种植品种
+        </div>
+        <div class="custom-bottom-fixed-btns">
+            <div class="bottom-btn secondary-btn" @click="emit('prev')">上一步</div>
+            <div class="bottom-btn primary-btn" @click="emit('confirm')">确定信息</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const emit = defineEmits(["prev", "confirm"]);
+</script>
+
+<style lang="scss" scoped>
+.select-variety {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding-bottom: 80px;
+
+    &__content {
+        flex: 1;
+        overflow-y: auto;
+    }
+
+    .custom-bottom-fixed-btns {
+        gap: 12px;
+        background: transparent;
+        box-shadow: none;
+
+        .bottom-btn {
+            flex: 1;
+            padding: 12px 0;
+            font-size: 16px;
+            border-radius: 25px;
+        }
+
+        .secondary-btn {
+            color: #2199f8;
+            background: #fff;
+            border: 1px solid #2199f8;
+        }
+
+        .primary-btn {
+            background: #2199f8;
+            color: #fff;
+        }
+    }
+}
+</style>

+ 54 - 0
src/views/old_mini/entry_information/index.vue

@@ -0,0 +1,54 @@
+<template>
+    <div class="entry-information-page">
+        <custom-header name="录入信息" bgColor="#fff"></custom-header>
+        <div class="entry-information-body">
+            <ba-information v-if="currentStep === 1" @next="handleNext" />
+            <select-category v-else-if="currentStep === 2" @prev="handlePrev" @next="handleNext" />
+            <select-variety v-else-if="currentStep === 3" @prev="handlePrev" @confirm="handleConfirm" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import customHeader from "@/components/customHeader.vue";
+import baInformation from "./components/baInformation.vue";
+import selectCategory from "./components/selectCategory.vue";
+import selectVariety from "./components/selectVariety.vue";
+
+const currentStep = ref(1);
+
+const handleNext = () => {
+    if (currentStep.value < 3) {
+        currentStep.value += 1;
+    }
+};
+
+const handlePrev = () => {
+    if (currentStep.value > 1) {
+        currentStep.value -= 1;
+    }
+};
+
+const handleConfirm = () => {
+    // TODO: 提交信息
+};
+</script>
+
+<style lang="scss" scoped>
+.entry-information-page {
+    min-height: 100vh;
+    // background: #e8f4ff;
+    background: linear-gradient(180deg, #57B5FF 0%, #BBE1FF 10%, #F6F6F6 100%),
+linear-gradient(270deg, rgba(218, 195, 255, 0.59) 0%, #E6F2FF 0.01%, #8FC5FE 100%);
+    display: flex;
+    flex-direction: column;
+}
+
+.entry-information-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+</style>