feat: 完成预诊大厅首页布局

.gitignore

@@ -24,6 +24,10 @@ dist
 .stylelintcache
 .eslintcache
 
+# auto types
+src/types/uni-components.d.ts
+src/types/auto-import.d.ts
+
 # lock 文件还是不要了，我主要的版本写死就好了
 # pnpm-lock.yaml
 # package-lock.json

package.json

@@ -90,6 +90,7 @@
     "@dcloudio/uni-components": "3.0.0-alpha-4010520240507001",
     "@dcloudio/uni-h5": "3.0.0-alpha-4010520240507001",
     "@dcloudio/uni-mp-weixin": "3.0.0-alpha-4010520240507001",
+    "@dcloudio/uni-ui": "^1.5.6",
     "czg": "^1.9.3",
     "dayjs": "1.11.10",
     "pinia": "2.0.36",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       '@dcloudio/uni-mp-weixin':
         specifier: 3.0.0-alpha-4010520240507001
         version: 3.0.0-alpha-4010520240507001(postcss@8.4.38)(rollup@4.18.0)(vue@3.4.21(typescript@4.9.5))
+      '@dcloudio/uni-ui':
+        specifier: ^1.5.6
+        version: 1.5.6
       czg:
         specifier: ^1.9.3
         version: 1.9.3
@@ -1014,6 +1017,9 @@ packages:
   '@dcloudio/uni-stat@3.0.0-alpha-4010520240507001':
     resolution: {integrity: sha512-bfQhoPFMg2dznypqIb6JOoLKjWgfNESg6/TyCJGgvixfz7AsV2qqYJTcoZeNlAcPaTCIU75wxtfE6XTBX5Ry+A==}
 
+  '@dcloudio/uni-ui@1.5.6':
+    resolution: {integrity: sha512-jmb98PasFvZkrIDXGh94GbdWg2/jyhgs1HUG+bU8eyL7Ltias/5XBz4q8w9RXyWUfqepJRqapPA2IIQpLCuTIg==}
+
   '@dcloudio/vite-plugin-uni@3.0.0-alpha-4010520240507001':
     resolution: {integrity: sha512-5jWLdqjd4Jwx2J0KSFaR3d5MzVwQs3i85MQGKEqKaWhD+wPpvTXJTswR048yr52fwxUELc22F1g105A7jl4mww==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -6763,6 +6769,8 @@ snapshots:
       - ts-node
       - vue
 
+  '@dcloudio/uni-ui@1.5.6': {}
+
   '@dcloudio/vite-plugin-uni@3.0.0-alpha-4010520240507001(postcss@8.4.38)(rollup@4.18.0)(vite@5.2.8(@types/node@20.14.2)(sass@1.77.5)(terser@5.31.1))(vue@3.4.21(typescript@4.9.5))':
     dependencies:
       '@babel/core': 7.24.7

src/components/user-card.vue

@@ -1,11 +1,36 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+interface IProps {
+  statusColor?: string
+}
+defineProps<IProps>()
+</script>
 
 <template>
-  <div class="user-card">
-    <view class="card-cover"></view>
-    <view class="card-content"></view>
-    <view class="status"></view>
+  <div class="user-card flex items-center py-6" border-b-2rpx border-b-solid border-b="[#ccc]">
+    <view class="card-cover mr-2 w-160rpx h-160rpx flex items-center overflow-hidden">
+      <image src="" class="w-full h-full" mode="widthFix" />
+    </view>
+    <view class="card-content flex-1">
+      <view class="name">张海华</view>
+      <view class="content-item">挂号科室：测试赛可</view>
+      <view class="content-item">挂号时间：2023-01-01 12:00</view>
+    </view>
+    <view class="status" :style="{ color: statusColor }">测试中</view>
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.card-cover {
+  background-color: pink;
+}
+.name {
+  font-size: 32rpx;
+  color: #333;
+}
+
+.content-item {
+  font-size: 24rpx;
+  line-height: 1.6;
+  color: #999;
+}
+</style>

src/components/w-search/index.vue

@@ -1,45 +1,46 @@
-<template>
-  <view class="w-search">
-    <uni-easyinput
-      :inputBorder="false"
-      :style="{ color: '#333' }"
-      suffixIcon="search"
-      :value="modelValue"
-      :placeholder="placeholder"
-      @update:modelValue="changeValue"
-      @iconClick="iconClick"
-    ></uni-easyinput>
-  </view>
-</template>
-
-<script lang="ts" setup>
-interface IProps {
-  placeholder?: string
-  modelValue?: string
-  bgcolor?: string
-}
-const props = withDefaults(defineProps<IProps>(), {
-  bgcolor: '#f5f5f5',
-})
-const emit = defineEmits(['search', 'update:modelValue'])
-function iconClick() {
-  emit('search', props.modelValue)
-}
-function changeValue(value: string) {
-  emit('update:modelValue', value)
-}
-</script>
-
-<style lang="scss" scoped>
-.w-search {
-  width: 100%;
-  padding: 0 30rpx;
-  overflow: hidden;
-  background: v-bind(bgcolor);
-  border-radius: 34rpx;
-  /* stylelint-disable-next-line selector-class-pattern */
-  :deep(.uni-easyinput__content) {
-    background: v-bind(bgcolor) !important;
-  }
-}
-</style>
+<template>
+  <view class="w-search">
+    <uni-easyinput
+      :inputBorder="false"
+      :style="{ color: '#333' }"
+      suffixIcon="search"
+      :value="modelValue"
+      :placeholder="placeholder"
+      @update:modelValue="changeValue"
+      @iconClick="iconClick"
+    ></uni-easyinput>
+  </view>
+</template>
+
+<script lang="ts" setup>
+interface IProps {
+  placeholder?: string
+  modelValue?: string
+  bgcolor?: string
+}
+const props = withDefaults(defineProps<IProps>(), {
+  bgcolor: '#f5f5f5',
+})
+const emit = defineEmits(['search', 'update:modelValue'])
+function iconClick() {
+  emit('search', props.modelValue)
+}
+function changeValue(value: string) {
+  emit('update:modelValue', value)
+}
+</script>
+
+<style lang="scss" scoped>
+.w-search {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 0 30rpx;
+  overflow: hidden;
+  background: v-bind(bgcolor);
+  border-radius: 34rpx;
+  /* stylelint-disable-next-line selector-class-pattern */
+  :deep(.uni-easyinput__content) {
+    background: v-bind(bgcolor) !important;
+  }
+}
+</style>

src/pages/index/index.vue

@@ -8,9 +8,17 @@
 }
 </route>
 <template>
-  <view>Home</view>
+  <view class="home">
+    <view class="search-area pt-2"><w-search placeholder="搜索患者姓名" /></view>
+    <user-card />
+  </view>
 </template>
 
 <script lang="ts" setup></script>
 
-<style></style>
+<style lang="scss" scoped>
+.home {
+  box-sizing: border-box;
+  padding: 0 24rpx;
+}
+</style>

vite.config.ts

@@ -15,6 +15,7 @@ import UniManifest from '@uni-helper/vite-plugin-uni-manifest'
 // @see https://unocss.dev/
 import UnoCSS from 'unocss/vite'
 import AutoImport from 'unplugin-auto-import/vite'
+import Components from '@uni-helper/vite-plugin-uni-components'
 import { visualizer } from 'rollup-plugin-visualizer'
 import ViteRestart from 'vite-plugin-restart'
 
@@ -61,6 +62,9 @@ export default ({ command, mode }) => {
       UniLayouts(),
       UniPlatform(),
       UniManifest(),
+      Components({
+        dts: 'src/types/uni-components.d.ts',
+      }),
       // UniXXX 需要在 Uni 之前引入
       Uni(),
       {