feat: 平车详情弹窗

components/CarInfo/CarInfo.vue

@@ -0,0 +1,68 @@
+<template>
+  <uni-card :is-shadow="false" :border="false" style="width: 40vw" padding="10px">
+    <template v-slot:title>
+      <view class="text-center u-font-16 font-bold uni-mt-10 uni-mb-4">{{ currentCar?.carNo }}</view>
+      <view class="text-center u-font-13">{{ CAR_STATUS[currentCar!.online] }}</view>
+    </template>
+
+    <view class="list flex">
+      <view class="item flex-1">
+        <image class="item-icon" src="@/static/images/angle.png" mode="scaleToFill" />
+        <text>{{ currentCar?.sensorAngleV || '-' }}</text>
+      </view>
+      <view class="item">
+        <image class="item-icon" src="@/static/images/vibrate.png" mode="scaleToFill" />
+        <text>{{ currentCar?.sensorVibrate || '-' }}</text>
+      </view>
+      <view class="item">
+        <image class="item-icon" src="@/static/images/weight.png" mode="scaleToFill" />
+        <text>{{ currentCar?.sensorWeight || '-' }}</text>
+      </view>
+      <view class="item">
+        <image class="item-icon" src="@/static/images/power.png" mode="scaleToFill" />
+        <text>{{ currentCar?.sensorPower + '%' || '-' }}</text>
+      </view>
+    </view>
+
+    <template v-slot:actions>
+      <view class="flex justify-between uni-mb-16">
+        <u-button size="medium" type="primary" shape="circle" class="bg-main" @click="onCancel">关闭</u-button>
+      </view>
+    </template>
+  </uni-card>
+</template>
+
+<script lang="ts" setup>
+import { useServiceStore } from '@/store/modules/service';
+import { computed } from 'vue';
+import { CAR_STATUS } from '@/config/service'
+
+const emits = defineEmits(['on-cancel'])
+
+const service = useServiceStore()
+
+const currentCar = computed(() => service.currentCar)
+
+// cancel
+function onCancel() { emits('on-cancel') }
+
+</script>
+
+<style lang="scss" scoped>
+.item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+  padding: 1em;
+  background-color: #f6f6f9;
+  margin: 1em 0.5em;
+  border-radius: 8px;
+
+  .item-icon {
+    width: 2em;
+    height: 2em;
+    margin-bottom: 0.5em;
+  }
+}
+</style>

config/service.ts

@@ -15,9 +15,7 @@ export function GET_GENDER_TEXT_BY_CODE(code: number): string | undefined {
 }
 
 // 急救状态
-export const AID_STATUS = {
-  0: '创建',
-  1: '待审核',
-  2: '审核通过',
-  3: '审核拒绝',
-}
+export const AID_STATUS = { 0: '创建', 1: '待审核', 2: '审核通过', 3: '审核拒绝' }
+
+// 平车状态
+export const CAR_STATUS = { 0: '离线', 1: '在线' }

pages/patient-list/patient-list.vue

@@ -34,8 +34,15 @@
         </uni-grid-item>
       </uni-grid>
 
-      <image class="create-user" src="@/static/images/bed.png" mode="scaleToFill" />
+      <!-- 床🛏 -->
+      <image class="create-user" src="@/static/images/bed.png" mode="scaleToFill" @click="openCarInfo" />
     </view>
+
+
+    <!-- 平车详情弹窗 -->
+    <uni-popup ref="popupRef" background-color="transparent" style="z-index: 9999;">
+      <CarInfo @on-cancel="popupRef.close()" />
+    </uni-popup>
   </view>
 </template>
 
@@ -50,6 +57,7 @@ import { onReachBottom } from '@dcloudio/uni-app'
 const serviceStore = useServiceStore()
 const { pagination, updatePagination, resetPagination } = usePagination()
 
+const popupRef = ref()
 const data = ref<IPatient[]>([])
 const keywords = ref('')
 const searchHeight = ref(100)
@@ -57,9 +65,18 @@ const searchHeight = ref(100)
 const currentAidId = computed(() => serviceStore.currentPatient?.firstAidId)
 
 function onClickItem(event) {
-  const item = data[event.detail.index]
-  serviceStore.setCurrentPatient(item)
-  uni.$u.openPage('detail2')
+  console.log(event.detail);
+  const { index } = event.detail
+  if (index === 0) {
+    // 创建患者
+    uni.$u.openPage('detail2')
+  } else {
+    // 查看详情
+    const item = data.value[index - 1]
+    serviceStore.setCurrentPatient(item)
+    uni.$u.openPage('detail1')
+  }
+
 }
 
 function onSearch(searchValue: string) {
@@ -78,14 +95,23 @@ async function getAidList() {
   } catch (error) {
     console.error(error);
   }
+
 }
 
+// 查看平车详情
+function openCarInfo() {
+  popupRef.value.open()
+}
+
+// 获取search 组件的高度
 function onSearchLoad(height: number) {
   searchHeight.value = height
 }
 
-
+// 默认搜索
 onSearch('')
+
+// 触底加载下一页
 onReachBottom(() => {
   console.log('reach bottom', pagination);
   if (pagination.nextPage === 0) {