af-mobile-client-vue3 1.6.19 → 1.6.21

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

@@ -1,78 +1,78 @@
-<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"
-      service-name="af-revenue"
-      :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>
+<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"
+      service-name="af-revenue"
+      :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

@@ -1,234 +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: '96603',
-    f_userinfo_code: '0011059531',
-    f_user_name: '脱**试',
-    f_user_phone: '155****7852',
-    f_address: '凤凰岭街***12室',
-    f_user_state: '正常',
-    f_user_type: '非民用',
-    f_meter_type: '机表',
-    f_meternumber: '11',
-    f_balance: 144.98,
-    f_balance_amount: 0,
-    f_userfiles_id: '110919994',
-    f_times: 0,
-    f_total_gas: 0,
-    f_valve_state: null,
-    f_hascard: '是',
-    f_card_id: null,
-  },
-])
-
-// 切换用户 - 现在跳转到新路由
-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>
+<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: '96603',
+    f_userinfo_code: '0011059531',
+    f_user_name: '脱**试',
+    f_user_phone: '155****7852',
+    f_address: '凤凰岭街***12室',
+    f_user_state: '正常',
+    f_user_type: '非民用',
+    f_meter_type: '机表',
+    f_meternumber: '11',
+    f_balance: 144.98,
+    f_balance_amount: 0,
+    f_userfiles_id: '110919994',
+    f_times: 0,
+    f_total_gas: 0,
+    f_valve_state: null,
+    f_hascard: '是',
+    f_card_id: null,
+  },
+])
+
+// 切换用户 - 现在跳转到新路由
+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>