feat: 诊疗记录页面布局

pages.config.ts

@@ -12,10 +12,10 @@ export default defineUniPages({
     autoscan: true,
     custom: {
       '^wd-(.*)': 'wot-design-uni/components/wd-$1/wd-$1.vue',
-      '^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)':
-        'z-paging/components/z-paging$1/z-paging$1.vue',
       '^uv-(.*)': '@climblee/uv-ui/components/uv-$1/uv-$1.vue',
       '^uni-(.*)': '@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue',
+      '^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)':
+        'z-paging/components/z-paging$1/z-paging$1.vue',
     },
   },
   tabBar: {

src/components/timeline-list/index.vue

@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import type { TimeLineListData } from './type'
+const emit = defineEmits(['showClick'])
+interface IProps {
+  data: TimeLineListData
+}
+
+withDefaults(defineProps<IProps>(), {
+  data: () => [],
+})
+
+function showClick(index: number) {
+  emit('showClick', index)
+}
+</script>
+
+<template>
+  <div class="timeline-list">
+    <timeline>
+      <template v-for="(item, index) in data" :key="index">
+        <timeline-item :time="item.time">
+          <view class="content flex justify-between" @click="showClick(index)">
+            <view class="content-left">
+              {{ item.content }}
+            </view>
+            <view class="content-right">查看</view>
+          </view>
+        </timeline-item>
+      </template>
+    </timeline>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.content-right {
+  color: #4997ff;
+}
+</style>

src/components/timeline-list/type.ts

@@ -0,0 +1,7 @@
+import type { TimeLineItemProps } from '../timeline/type'
+
+export interface TimeLineListDataItem extends TimeLineItemProps {
+  content: string
+}
+
+export type TimeLineListData = TimeLineListDataItem[]

src/components/timeline/timeline-item.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import type { TimeLineItemProps } from './type'
+withDefaults(defineProps<TimeLineItemProps>(), {
+  lineColor: '#ccc',
+  circleColor: '#22c30c',
+})
+</script>
+
+<template>
+  <view class="timeline-item">
+    <view class="time">时间：{{ time }}</view>
+    <view class="timeline-item-content">
+      <slot></slot>
+    </view>
+    <view class="circle" :style="{ borderColor: circleColor }"></view>
+    <view class="line" :style="{ backgroundColor: lineColor }"></view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.timeline-item {
+  position: relative;
+  box-sizing: border-box;
+  padding-bottom: 60rpx;
+  padding-left: 40rpx;
+  font-size: 28rpx;
+  line-height: 1.6;
+  color: #666;
+  & .circle {
+    position: absolute;
+    top: 10rpx;
+    left: 0;
+    z-index: 1;
+    box-sizing: border-box;
+    width: 20rpx;
+    height: 20rpx;
+    content: '';
+    background-color: #fff;
+    border: 5rpx solid red;
+    border-radius: 50%;
+  }
+  & .line {
+    position: absolute;
+    top: 10rpx;
+    left: 10rpx;
+    z-index: 0;
+    width: 4rpx;
+    height: 100%;
+    content: '';
+    background-color: #ccc;
+    transform: translateX(-50%);
+  }
+}
+</style>

src/components/timeline/timeline.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup></script>
+
+<template>
+  <div class="timeline">
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

src/components/timeline/type.ts

@@ -0,0 +1,5 @@
+export interface TimeLineItemProps {
+  time: string
+  circleColor?: string
+  lineColor?: string
+}

src/pages/medical-record/index.vue

@@ -8,13 +8,30 @@
 </route>
 
 <template>
-  <view class="medical-record">诊疗记录</view>
+  <view class="medical-record">
+    <timeline-list :data="timelines" />
+  </view>
 </template>
 
 <script lang="ts" setup>
 //
+const timelines = ref([
+  {
+    time: '2023-01-01',
+    content: '项目名词：核磁共振',
+  },
+  {
+    time: '2023-01-01',
+    content: '项目名词：核磁共振',
+  },
+])
 </script>
 
 <style lang="scss" scoped>
+.medical-record {
+  box-sizing: border-box;
+  padding: 0 24rpx;
+  padding-top: 40rpx;
+}
 //
 </style>