feat(登录): 添加戒子身份验证功能及相关页面

实现戒子通过身份证号登录的功能，包括： 1. 新增登录页面LoginID.vue 2. 修改api接口路径和参数 3. 添加戒子信息查询接口 4. 创建戒子详情页StudentInfo.vue 5. 暂时禁用路由鉴权逻辑

feat(登录): 添加戒子身份验证功能及相关页面
实现戒子通过身份证号登录的功能，包括： 1. 新增登录页面LoginID.vue 2. 修改api接口路径和参数 3. 添加戒子信息查询接口 4. 创建戒子详情页StudentInfo.vue 5. 暂时禁用路由鉴权逻辑
hookehuyr
Commit 2e1b38350b2a71f092dcf44a18a3d943bb2fedcc 2e1b3835 1 parent 21f7dbf0
Showing 4 changed files with 353 additions and 132 deletions
src/api/index.js
src/router/index.js
src/views/LoginID.vue
src/views/StudentInfo.vue
--- a/src/api/index.js
View file @2e1b383
+++ b/src/api/index.js
View file @2e1b383
 /*
  * @Date: 2023-08-24 09:42:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-11-04 21:18:22
+ * @LastEditTime: 2025-11-12 14:53:22
  * @FilePath: /stdj_h5/src/api/index.js
  * @Description: 文件描述
  */
@@ -11,7 +11,8 @@ const Api = {
   GET_HOME: '/srv/?a=home',
   GET_ARTICLE: '/srv/?a=get_article',
   GET_ARTICLE_FILE: '/srv/?a=get_article&t=file',
-  POST_LOGIN: '/srv/?a=login',
+  POST_LOGIN: '/srv/?a=user',
+  GET_USER_INFO: '/srv/?a=user',
 };
 /**
@@ -90,13 +91,26 @@ export const getArticleDetailAPI = (params) => fn(fetch.get(Api.GET_ARTICLE, par
 /**
  * @description: 登录接口
- * @param {String} phone 手机号
+ * @param {String} mobile 手机号
- * @param {String} code 验证码
+ * @param {String} mobile_code 验证码
+ * @param {String} idcard 身份证号
  * @returns {Object} data
- * @property string data.token 登录凭证
+ * @property string data.id 用户id（后续接口要转的值）
- * @property object data.user 用户信息
+ * @property string data.nickname 法名
- * @property string data.user.id 用户id
- * @property string data.user.nickname 昵称
- * @property string data.user.avatar 头像
  */
 export const loginAPI = (params) => fn(fetch.post(Api.POST_LOGIN, params));
+
+/**
+ * @description: 戒子信息查询
+ * @param {String} i 用户id
+ * @returns {Object} data
+ * @property string data.id 用户id
+ * @property string data.name 姓名
+ * @property string data.nickname 法名
+ * @property string data.courtesy_name 字号
+ * @property string data.introduction 简介
+ * @property string data.group_title 堂口
+ * @property string data.avatar[{name,url}] 证件照
+ * @property string data.photo[{name,url}] 其它照片
+ */
+export const getUserInfoAPI = (params) => fn(fetch.get(Api.GET_USER_INFO, params));
--- a/src/router/index.js
View file @2e1b383
+++ b/src/router/index.js
View file @2e1b383
 /*
  * @Date: 2025-10-30 10:29:15
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-11-11 22:10:22
+ * @LastEditTime: 2025-11-12 10:06:07
  * @FilePath: /stdj_h5/src/router/index.js
  * @Description: 文件描述
  */
@@ -51,6 +51,11 @@ const routes = [
     component: () => import('../views/Login.vue')
   },
   {
+    path: '/jz_login',
+    name: '登录-戒子',
+    component: () => import('../views/LoginID.vue')
+  },
+  {
     path: '/volunteers',
     name: '义工',
     component: () => import('../views/Volunteers.vue')
@@ -101,24 +106,24 @@ router.beforeEach((to, from, next) => {
      * 访问控制：除首页('/')与登录页外，其余页面均需登录
      * 说明：优先读取 Cookie 中的 token；若不存在则回退读取本地存储 token，避免重复登录。
      */
-    const token_cookie = Cookies.get('token-stdj')
+    // const token_cookie = Cookies.get('token-stdj')
-    const is_login = !!(token_cookie)
+    // const is_login = !!(token_cookie)
-    // 白名单：无需登录校验的路径
+    // // 白名单：无需登录校验的路径
-    const white_list = ['/', '/login']
+    // const white_list = ['/', '/login']
-    const need_auth = !white_list.includes(to.path)
+    // const need_auth = !white_list.includes(to.path)
-    if (need_auth && !is_login) {
+    // if (need_auth && !is_login) {
-        // 在重定向前关闭或重置上一跳的loading，避免计数残留
+    //     // 在重定向前关闭或重置上一跳的loading，避免计数残留
-        try {
+    //     try {
-            const loading = useLoadingStore()
+    //         const loading = useLoadingStore()
-            loading.reset()
+    //         loading.reset()
-        } catch (e) {
+    //     } catch (e) {
-            void e
+    //         void e
-        }
+    //     }
-        next({ name: '登录', query: { redirect: to.fullPath } })
+    //     next({ name: '登录', query: { redirect: to.fullPath } })
-        return
+    //     return
-    }
+    // }
     next()
 })
--- a/src/views/LoginID.vue 0 → 100644
View file @2e1b383
+++ b/src/views/LoginID.vue 0 → 100644
View file @2e1b383
+<!--
+ * @Date: 2025-11-10 18:08:59
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2025-11-12 14:51:18
+ * @FilePath: /stdj_h5/src/views/LoginID.vue
+ * @Description: 登录页
+-->
+<template>
+  <div class="login-page">
+    <!-- 顶部LOGO标题 -->
+    <div class="logo-title">
+      <img class="logo-img" src="https://cdn.ipadbiz.cn/stdj/images/logo@2x.png" alt="Logo">
+    </div>
+
+    <!-- 戒子身份验证容器 -->
+    <div class="auth-card">
+      <div class="card-title">戒子身份验证</div>
+
+      <!-- 证件号码 -->
+      <div class="form-item">
+        <div class="input-with-icon phone">
+          <input class="input" type="text" placeholder="请输入证件号码" v-model="id_card" maxlength="18" />
+        </div>
+      </div>
+
+      <!-- 身份证验证按钮 -->
+      <div class="form-item">
+        <div class="btn primary" :class="{ disabled: id_login_disabled }" @click="on_click_login_by_id">立即查询</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useTitle } from '@vueuse/core'
+import { loginAPI } from '@/api/index.js'
+import { showFailToast, showSuccessToast } from 'vant'
+import Cookies from 'js-cookie'
+
+useTitle('戒子身份验证')
+
+const route = useRoute()
+const router = useRouter()
+
+// 表单状态
+const logging = ref(false)
+const id_card = ref('')
+
+/**
+ * 身份证登录按钮禁用条件
+ * 说明：登录进行中或输入内容为空时不可操作
+ */
+const id_login_disabled = computed(function () {
+    return (
+        logging.value ||
+        !is_not_empty(id_card.value)
+    )
+})
+
+/**
+ * 校验输入是否非空
+ * 说明：仅校验输入值是否为空字符串（去除首尾空格）
+ * @param {string} v 输入内容
+ * @returns {boolean} 是否非空
+ */
+const is_not_empty = function (v) {
+    return String(v || '').trim().length > 0
+}
+
+/**
+ * 身份证登录
+ * 说明：仅凭身份证号进行登录
+ * @returns {Promise<void>}
+ */
+const on_login_by_id = async function () {
+  if (logging.value) return
+  if (!is_not_empty(id_card.value)) {
+    showFailToast('请输入证件号码')
+    return
+  }
+  try {
+    logging.value = true
+    const { code, data } = await loginAPI({ idcard: id_card.value })
+    if (code) {
+      Cookies.set('token-stdj', data.id, { expires: 1 })
+      showSuccessToast('登录成功')
+      setTimeout(() => {
+        // 直接跳转到戒子信息页
+        router.replace({ path: '/studentInfo' })
+      }, 1000)
+    }
+  } catch (e) {
+    showFailToast('网络异常，请稍后重试')
+  } finally {
+    logging.value = false
+  }
+}
+
+/**
+ * 点击身份证登录包装函数
+ * 说明：在禁用态下不触发真实登录逻辑
+ * @returns {void}
+ */
+const on_click_login_by_id = function () {
+  if (id_login_disabled.value) return
+  on_login_by_id()
+}
+
+onMounted(() => {
+  // 初始化时，检查是否已登录（通过token判断）
+  const token = Cookies.get('token-stdj')
+  if (token) {
+    // 已登录，直接跳转到戒子信息页
+    router.replace({ path: '/studentInfo' })
+  }
+})
+</script>
+
+<style lang="less" scoped>
+// 页面背景与布局
+.login-page {
+  min-height: 100vh;
+  background-color: #FCF8F1; // 整个页面背景色
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 6rem 1rem;
+  background-image: url('https://cdn.ipadbiz.cn/stdj/images/bg002@2x.png');
+  background-size: cover;
+  background-position: center;
+}
+
+// 顶部Logo标题
+.logo-title {
+  margin-bottom: 2rem;
+}
+
+.logo-img {
+  height: 5.5rem;
+  object-fit: contain;
+  margin-top: 1rem;
+}
+
+// 验证容器
+.auth-card {
+  width: 100%;
+  max-width: 26rem;
+  background-color: rgba(174, 155, 99, 0.14); // 容器背景色
+  border-radius: 0.75rem;
+  padding: 1rem;
+  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.06);
+}
+
+.card-title {
+  text-align: center;
+  color: #432C0E;
+  font-size: 1.125rem;
+  font-weight: 700;
+  margin-top: 0.75rem;
+  margin-bottom: 1.25rem;
+}
+
+// 表单项布局
+.form-item {
+  margin-top: 1.25rem;
+  margin-bottom: 0.75rem;
+}
+
+// 输入框：带左侧图标
+.input-with-icon {
+  position: relative;
+}
+
+.input-with-icon::before {
+  content: '';
+  position: absolute;
+  left: 0.75rem;
+  top: 50%;
+  width: 1rem;
+  height: 1rem;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  transform: translateY(-50%);
+}
+
+.input-with-icon.phone::before {
+  background-image: url('https://cdn.ipadbiz.cn/stdj/images/%E8%BA%AB%E4%BB%BD@2x.png');
+}
+
+
+
+.input {
+  width: 100%;
+  height: 2.5rem;
+  border-radius: 0.5rem;
+  border: none;
+  background-color: #FFFFFF;
+  padding: 0 0.75rem 0 2.25rem; // 为左侧图标预留空间
+  box-shadow: inset 0 0 0 0.0625rem rgba(0, 0, 0, 0.08);
+}
+
+.input::placeholder {
+  color: #999999;
+}
+
+// 按钮样式
+.btn {
+  height: 2.5rem;
+  padding: 0 0.75rem;
+  border: none;
+  border-radius: 0.5rem;
+  background-color: #A67939; // 获取验证码与立即验证背景色
+  color: #FFFFFF;
+  font-weight: 600;
+  text-align: center;
+  line-height: 2.5rem;
+}
+
+.btn.primary {
+  width: 100%;
+}
+
+.btn.disabled {
+  // 不可操作态：明显的灰显与禁止样式
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+  filter: grayscale(30%);
+  box-shadow: none;
+}
+</style>
--- a/src/views/StudentInfo.vue
View file @2e1b383
+++ b/src/views/StudentInfo.vue
View file @2e1b383
 <!--
  * @Date: 2025-11-10 18:12:23
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-11-11 13:04:06
+ * @LastEditTime: 2025-11-12 15:14:14
  * @FilePath: /stdj_h5/src/views/StudentInfo.vue
  * @Description: 戒子详情页
 -->
@@ -9,74 +9,61 @@
   <div class="masters-detail-container">
     <section class="single-list">
       <div class="item-card">
-        <img :src="article_item.src" :alt="article_item.title" class="item-image" />
+        <img :src="student_info.src" :alt="student_info.title" class="item-image" />
         <div class="item-content">
-          <div class="item-role">{{ article_item.role }}</div>
+          <div class="item-role">{{ student_info.role }}</div>
-          <div class="item-name" v-html="formatNameWithSuperscript(article_item.name)"></div>
+          <div class="item-name" v-html="formatNameWithSuperscript(student_info.name)"></div>
-          <div class="item-desc" v-html="article_item.desc"></div>
+          <div class="item-group-title">{{ student_info.group_title }}</div>
+          <div class="item-desc" v-html="student_info.desc"></div>
         </div>
       </div>
     </section>
     <!-- 标题图片 -->
     <div class="common-title">
-      <img src="https://cdn.ipadbiz.cn/stdj/images/%E7%9B%B8%E5%85%B3%E7%85%A7%E7%89%87@2x.png" alt="相关照片" class="title-image">
+      <img src="https://cdn.ipadbiz.cn/stdj/images/%E7%9B%B8%E5%85%B3%E7%85%A7%E7%89%87@2x.png" alt="相关照片"
+        class="title-image">
     </div>
     <!-- 下载提示：参考首页滑动提示样式 -->
-    <div class="download-hint">
+    <div v-if="student_info?.photo?.length" class="download-hint">
       <span class="download-icon">⬇</span>
       <span class="download-text">点击查看大图 长按图片下载</span>
     </div>
     <!-- 瀑布流内容 -->
-    <div class="waterfall-content">
+    <div v-if="student_info?.photo?.length" class="waterfall-content">
-      <van-list
-        v-model:loading="loading"
-        :finished="finished"
-        finished-text="没有更多了"
-        @load="onLoad"
-      >
       <div class="waterfall-container">
         <div class="waterfall-column" v-for="(column, index) in columns" :key="index">
-            <div
+          <div class="waterfall-item" v-for="item in column" :key="item.id" @click="onImageClick(item)">
-              class="waterfall-item"
-              v-for="item in column"
-              :key="item.id"
-              @click="onImageClick(item)"
-            >
             <div class="image-wrapper">
-                <img
+              <img :src="item.src" :alt="item.title" :style="{ height: item.height + 'px' }" @load="onImageLoad"
-                  :src="item.src"
+                @error="onImageError" />
-                  :alt="item.title"
-                  :style="{ height: item.height + 'px' }"
-                  @load="onImageLoad"
-                  @error="onImageError"
-                />
-                <!-- <div class="image-overlay">
-                  <span class="image-title">{{ item.title }}</span>
-                </div> -->
             </div>
           </div>
         </div>
       </div>
-      </van-list>
+    </div>
+    <div v-else>
+      <div class="empty-message">暂无相关照片</div>
     </div>
   </div>
 </template>
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, reactive } from 'vue'
 import { useTitle } from '@vueuse/core';
 import { useRoute, useRouter } from 'vue-router'
 import { showImagePreview } from 'vant'
+import Cookies from 'js-cookie'
 // 导入接口
-import { getArticleDetailAPI, getImgStreamAPI } from '@/api/index.js'
+import { getUserInfoAPI } from '@/api/index.js'
 useTitle('戒子详情')
 const route = useRoute()
 const router = useRouter()
-const article_item = ref({})
+const info_id = ref('');
+const student_info = ref({})
 /**
  * 为name字段的第一个文字添加上标效果
@@ -93,21 +80,33 @@ const formatNameWithSuperscript = (name) => {
 }
 /**
- * 加载文章详情
+ * 加载详情
  */
-const loadArticleDetail = async () => {
+const loadUserInfo = async () => {
   try {
-    // const articleId = route.params.id
+    const { code, data } = await getUserInfoAPI({ i: info_id.value })
-    const articleId = '3662153'
-    const { code, data } = await getArticleDetailAPI({ i: articleId })
     if (code) {
       // 遍历data对象，将每个元素转换为新的对象格式
-      article_item.value = {
+      student_info.value = {
         id: data.id,
-        role: data.post_excerpt,
+        role: data.name,
-        name: data.post_title,
+        name: data.nickname,
-        src: data?.file_list?.photo?.value,
+        src: data?.avatar[0].url,
-        desc: data.post_content
+        desc: data.introduction,
+        courtesy_name: data.courtesy_name,
+        group_title: data.group_title,
+        photo: data.photo,
+      }
+      // 处理图片数据
+      if (student_info.value.photo?.length) {
+        student_info.value.photo = student_info.value.photo.map(item => ({
+          id: item.id,
+          src: item.url,
+          title: item.name,
+          height: Math.floor(Math.random() * 200) + 200
+        }))
+        allImages.value = student_info.value.photo
+        distributeImages(student_info.value.photo)
       }
     }
   } catch (error) {
@@ -115,57 +114,10 @@ const loadArticleDetail = async () => {
   }
 }
-// const i = ref(router.currentRoute.value.query.i)
-const i = ref('3680502')
-
 // 响应式数据
-const loading = ref(false)
-const finished = ref(false)
-const currentPage = ref(0) // API使用0作为起始页码
-const pageSize = 10
 const allImages = ref([])
 const columns = reactive([[], []])
-// 加载数据
-const onLoad = async () => {
-  loading.value = true
-
-  try {
-    // 调用正式接口
-    const { code, data } = await getImgStreamAPI({
-      i: i.value,
-      page: currentPage.value,
-      limit: pageSize
-    })
-
-    if (code) {
-      const newData = data.list.map(item => ({
-        id: item.id,
-        src: item.value, // 修改为src，用于ImagePreview
-        title: item.name,
-        description: item.description,
-        date: item.post_date,
-        height: Math.floor(Math.random() * 200) + 200 // 随机高度用于瀑布流布局
-      }))
-
-      if (newData.length === 0) {
-        finished.value = true
-      } else {
-        allImages.value.push(...newData)
-        distributeImages(newData)
-        currentPage.value++
-      }
-    } else {
-      finished.value = true
-    }
-  } catch (error) {
-    console.error('加载数据失败:', error)
-    finished.value = true
-  } finally {
-    loading.value = false
-  }
-}
-
 // 分配图片到两列
 const distributeImages = (images) => {
   images.forEach(image => {
@@ -188,17 +140,8 @@ const distributeImages = (images) => {
  */
 // 图片点击事件 - 仅预览当前单张图片
 const onImageClick = (item) => {
-    console.log('点击图片:', item)
-
-    // 获取当前点击图片在所有图片中的索引
-    const currentIndex = allImages.value.findIndex(img => img.id === item.id)
-
-    // 提取所有图片的src用于预览
-    const images = allImages.value.map(img => img.src)
-
-    // 仅预览当前单张图片，禁用索引与循环
   showImagePreview({
-        images: [images[currentIndex]],
+    images: [item.src],
     startPosition: 0,
     showIndex: false,
     loop: false,
@@ -208,7 +151,7 @@ const onImageClick = (item) => {
 // 图片加载成功
 const onImageLoad = (event) => {
-  console.log('图片加载成功:', event.target.src)
+  // console.log('图片加载成功:', event.target.src)
 }
 // 图片加载失败
@@ -219,13 +162,20 @@ const onImageError = (event) => {
 }
 onMounted(() => {
-  loadArticleDetail()
+  // 检查是否已登录（通过token判断）
-  // 初始加载第一页数据
+  const token = Cookies.get('token-stdj')
-  onLoad()
+  if (!token) {
+    // 未登录，跳转到登录页
+    router.replace({ path: '/jz_login' })
+    return
+  }
+  //
+  info_id.value = token
+  //
+  loadUserInfo()
 })
 </script>
-
 <style scoped>
 /* 通用标题样式 */
 .common-title {
@@ -241,6 +191,14 @@ onMounted(() => {
   height: auto;
 }
+.empty-message {
+  text-align: center;
+  color: #999999;
+  font-size: 1rem;
+  margin-top: 2rem;
+}
+
+
 /* 下载提示样式（参考首页 swipe-hint） */
 .download-hint {
   display: flex;
@@ -252,11 +210,13 @@ onMounted(() => {
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
   font-weight: 700;
 }
+
 .download-icon {
   font-size: 0.875rem;
   line-height: 1;
   filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
 }
+
 .download-text {
   font-size: 0.875rem;
   font-weight: 700;
@@ -268,6 +228,7 @@ onMounted(() => {
   .download-hint {
     margin-bottom: 1.25rem;
   }
+
   .download-icon,
   .download-text {
     font-size: 0.8rem;
@@ -323,6 +284,12 @@ onMounted(() => {
   margin-top: 0.25rem;
 }
+.item-group-title {
+  font-size: 1rem;
+  font-weight: 500;
+  margin-top: 0.25rem;
+}
+
 .item-desc {
   margin-top: 0.5rem;
 }
@@ -447,6 +414,7 @@ onMounted(() => {
   0% {
     background-position: 200% 0;
   }
+
   100% {
     background-position: -200% 0;
   }