Browse Source

fix: 认证身份

lxf 1 week ago
parent
commit
ae8c2773c2

+ 7 - 0
src/router/globalRoutes.js

@@ -160,6 +160,13 @@ export default [
         meta: { showTabbar: true, keepAlive: true },
         component: () => import("@/views/old_mini/agri_services/index.vue"),
     },
+    // 认证身份
+    {
+        path: "/authentication",
+        name: "Authentication",
+        component: () => import("@/views/old_mini/mine/pages/authentication.vue"),
+        meta: { keepAlive: true },
+    },
     // 专家-农事方案
     {
         path: "/expert_prescription",

+ 3 - 2
src/views/old_mini/mine/index.vue

@@ -173,8 +173,9 @@ const cellItems = computed(() => {
     ]
     if(curRole.value === 0) {
         list.unshift({
-            title: "认证农资",
-            path: "/register?identity=NZ",
+            title: "认证身份",
+            path: "/authentication",
+            // path: "/register?identity=NZ",
         });
     }
     return list;

+ 122 - 0
src/views/old_mini/mine/pages/authentication.vue

@@ -0,0 +1,122 @@
+<template>
+    <div class="authentication-page">
+        <custom-header name="认证身份"></custom-header>
+        <div class="content">
+            <span class="text">请选择您要认证的身份</span>
+            <div class="card-group">
+                <div
+                    :class="['card-item', { active: active === index }]"
+                    v-for="(item, index) in list"
+                    :key="index"
+                    @click="handleActive(item, index)"
+                >
+                    <div class="info">
+                        <div class="name">{{ item.name }}</div>
+                        <span>{{ item.desc }}</span>
+                    </div>
+                    <img :src="require(`@/assets/img/mine/${item.icon}-icon.png`)" alt="" />
+                </div>
+            </div>
+            <div class="button" @click="handleOk">选好了</div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import customHeader from "@/components/customHeader.vue";
+import {ref} from 'vue'
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+const list = [
+    {
+        name:"专家",
+        desc:"根据表型触发农事,确认农事处方",
+        icon:"figure",
+        identity:"EXPERT",
+        role:3
+    },
+    {
+        name:"农资农服",
+        desc:"巡飞地形,收集农情测报",
+        icon:"drone",
+        identity:"NZ",
+        role:2
+    },
+]
+    // {
+    //     name:"农服",
+    //     desc:"接单执行,服务农户",
+    //     icon:"shield",
+    //     identity:"NF",
+    //     role:1
+    // }
+
+const active = ref(0)
+const handleActive = (item,index) =>{
+    active.value = index
+}
+
+const handleOk = () =>{
+    // router.push(`/register?identity=${list[active.value].identity}&role=${list[active.value].role}`)
+    router.push(`/register??identity=NZ`)
+}
+</script>
+
+<style lang="scss" scoped>
+.authentication-page {
+    width: 100%;
+    height: 100vh;
+    background-color: #f5f7fb;
+    .content {
+        height: calc(100% - 40px);
+        padding: 60px 30px;
+        box-sizing: border-box;
+        .text {
+            font-size: 18px;
+        }
+        .card-group {
+            margin-top: 26px;
+            .card-item {
+                background: #fff;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 27px 20px;
+                border-radius: 2px;
+                border: 1px solid transparent;
+                &.active {
+                    background: rgba(33, 153, 248, 0.1);
+                    border: 1px solid #2199f8;
+                }
+                .info {
+                    .name {
+                        font-size: 18px;
+                        font-weight: bold;
+                        margin-bottom: 2px;
+                    }
+                    span {
+                        color: rgba(0, 0, 0, 0.2);
+                    }
+                }
+                img {
+                    width: 42px;
+                }
+            }
+
+            .card-item + .card-item {
+                margin-top: 20px;
+            }
+        }
+        .button {
+            color: #fff;
+            border-radius: 2px;
+            background: #2199f8;
+            text-align: center;
+            font-size: 16px;
+            padding: 8px 0;
+            margin-top: 50px;
+        }
+    }
+}
+</style>