af-mobile-client-vue3 1.3.12 → 1.3.14

package/src/views/component/UserDetailView/UserDetailPage.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import type { RecordEntry } from '@af-mobile-client-vue3/components/data/UserDetail/recordEntries'
+import type { BaseUser } from '@af-mobile-client-vue3/components/data/UserDetail/types'
+import UserDetail from '@af-mobile-client-vue3/components/data/UserDetail/index.vue'
+import { showToast, Dialog as VanDialog, NavBar as VanNavBar } from 'vant'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+
+// 从路由参数获取用户ID
+const userInfoId = route.params.userInfoId as string
+
+// 返回上一页
+function handleBack() {
+  router.back()
+}
+
+// 记录点击处理
+function handleRecordClick(entry: RecordEntry, user: BaseUser) {
+  showToast(`点击了${entry.title}，用户：${user.f_user_name}`)
+}
+
+// 业务办理点击处理
+function handleBusinessClick(user: BaseUser) {
+  VanDialog.alert({
+    title: '业务办理',
+    message: `为用户 ${user.f_user_name}（${user.f_userinfo_code}）办理业务`,
+  })
+}
+
+// 打印处理
+function handlePrint(user: BaseUser) {
+  showToast(`打印用户 ${user.f_user_name} 的档案`)
+}
+</script>
+
+<template>
+  <div class="user-detail-page">
+    <!-- 导航栏 -->
+    <VanNavBar
+      title="用户详情"
+      left-text="返回"
+      left-arrow
+      @click-left="handleBack"
+    />
+
+    <!-- 用户详情组件 -->
+    <UserDetail
+      :user-info-id="userInfoId"
+      :show-recent-time="true"
+      :show-bottom-buttons="true"
+      business-button-text="立即办理"
+      @record-click="handleRecordClick"
+      @business-click="handleBusinessClick"
+      @print="handlePrint"
+    />
+  </div>
+</template>
+
+<style scoped lang="less">
+.user-detail-page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: #f5f7fa;
+
+  .van-nav-bar {
+    flex-shrink: 0;
+  }
+
+  :deep(.user-detail) {
+    flex: 1;
+    overflow-y: auto;
+  }
+}
+</style>

package/src/views/component/UserDetailView/index.vue

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import type { BaseUser } from '@af-mobile-client-vue3/components/data/UserDetail/types'
+import NormalDataLayout from '@af-mobile-client-vue3/components/layout/NormalDataLayout/index.vue'
+import { Button as VanButton } from 'vant'
+
+import { reactive } from 'vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+// 模拟用户数据
+const mockUsers = reactive<BaseUser[]>([
+  {
+    f_userinfo_id: '65836',
+    f_userinfo_code: '1166730',
+    f_user_name: '刘思聪',
+    f_user_phone: '15199996077',
+    f_address: '滨河营业厅',
+    f_user_state: '正常',
+    f_user_type: '民用',
+    f_meter_type: '气量卡表',
+    f_meternumber: '0002353',
+    f_balance: 1.61,
+    f_balance_amount: 0,
+    f_userfiles_id: '71717',
+    f_times: 11,
+    f_total_gas: 768,
+    f_valve_state: '开启',
+    f_hascard: '是',
+    f_card_id: '9400002001',
+  },
+])
+
+// 切换用户 - 现在跳转到新路由
+function switchUser() {
+  const user = mockUsers[0]
+  router.push({
+    name: 'UserDetailRoute',
+    params: { userInfoId: user.f_userinfo_id },
+  })
+}
+</script>
+
+<template>
+  <NormalDataLayout title="UserDetail 用户详情组件">
+    <template #layout_content>
+      <div class="demo-container">
+        <!-- 基础使用说明 -->
+        <div class="demo-section">
+          <h3>基础使用</h3>
+          <p>UserDetail 组件用于展示用户的详细信息，支持动态配置记录入口和交互功能。</p>
+        </div>
+
+        <!-- 用户选择器 -->
+        <div class="demo-section">
+          <h3>点击用户查看详情</h3>
+          <div class="user-selector">
+            <VanButton
+              size="small"
+              @click="switchUser()"
+            >
+              {{ mockUsers[0].f_user_name }}
+              <span class="user-status" :class="`status-${mockUsers[0].f_user_state}`">
+                {{ mockUsers[0].f_user_state }}
+              </span>
+            </VanButton>
+          </div>
+        </div>
+
+        <!-- 功能特性说明 -->
+        <div class="demo-section">
+          <h3>组件特性</h3>
+          <ul class="feature-list">
+            <li>📋 用户基本信息展示与折叠</li>
+            <li>🔗 可配置的记录入口</li>
+            <li>⏰ 支持显示最近业务时间</li>
+            <li>🖨️ 内置打印功能</li>
+            <li>⚙️ 自定义 API 接口</li>
+            <li>🎨 多种用户状态样式</li>
+          </ul>
+        </div>
+
+        <!-- Props 说明 -->
+        <div class="demo-section">
+          <h3>主要 Props</h3>
+          <div class="props-table">
+            <div class="props-row">
+              <span class="prop-name">userInfoId</span>
+              <span class="prop-type">string</span>
+              <span class="prop-desc">用户ID（必传）</span>
+            </div>
+            <div class="props-row">
+              <span class="prop-name">showRecentTime</span>
+              <span class="prop-type">boolean</span>
+              <span class="prop-desc">是否展示历史时间</span>
+            </div>
+            <div class="props-row">
+              <span class="prop-name">recordEntries</span>
+              <span class="prop-type">RecordEntry[]</span>
+              <span class="prop-desc">记录入口配置</span>
+            </div>
+            <div class="props-row">
+              <span class="prop-name">showBottomButtons</span>
+              <span class="prop-type">boolean</span>
+              <span class="prop-desc">是否显示底部按钮区域</span>
+            </div>
+            <div class="props-row">
+              <span class="prop-name">showHeader</span>
+              <span class="prop-type">boolean</span>
+              <span class="prop-desc">是否显示头部导航栏</span>
+            </div>
+            <div class="props-row">
+              <span class="prop-name">headerTitle</span>
+              <span class="prop-type">string</span>
+              <span class="prop-desc">头部标题文本</span>
+            </div>
+            <div class="props-row">
+              <span class="prop-name">#bottom</span>
+              <span class="prop-type">slot</span>
+              <span class="prop-desc">底部插槽，可自定义按钮内容</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </NormalDataLayout>
+</template>
+
+<style scoped lang="less">
+.demo-container {
+  padding: 16px;
+}
+
+.demo-section {
+  margin-bottom: 24px;
+
+  h3 {
+    margin: 0 0 12px 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #323233;
+  }
+
+  p {
+    margin: 0 0 12px 0;
+    font-size: 14px;
+    color: #646566;
+    line-height: 1.5;
+  }
+}
+
+.user-selector {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+
+  .van-button {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  .user-status {
+    font-size: 12px;
+    padding: 1px 6px;
+    border-radius: 10px;
+
+    &.status-正常 {
+      background-color: #e6ffed;
+      color: #52c41a;
+    }
+
+    &.status-欠费 {
+      background-color: #fff1f0;
+      color: #f5222d;
+    }
+
+    &.status-暂停 {
+      background-color: #fff7e6;
+      color: #fa8c16;
+    }
+  }
+}
+
+.feature-list {
+  margin: 0;
+  padding-left: 20px;
+
+  li {
+    margin-bottom: 8px;
+    font-size: 14px;
+    color: #646566;
+    line-height: 1.5;
+  }
+}
+
+.props-table {
+  background-color: #f8f9fa;
+  border-radius: 8px;
+  padding: 12px;
+
+  .props-row {
+    display: flex;
+    align-items: center;
+    padding: 8px 0;
+    border-bottom: 1px solid #ebedf0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .prop-name {
+    flex: 0 0 120px;
+    font-size: 13px;
+    font-weight: 600;
+    color: #1976d2;
+    font-family: 'Monaco', 'Consolas', monospace;
+  }
+
+  .prop-type {
+    flex: 0 0 80px;
+    font-size: 12px;
+    color: #e91e63;
+    font-family: 'Monaco', 'Consolas', monospace;
+  }
+
+  .prop-desc {
+    flex: 1;
+    font-size: 13px;
+    color: #646566;
+  }
+}
+</style>