平车列表页及详情页开发

src/apis/carbasics.js

@@ -122,6 +122,12 @@ const install = (Vue, vm) => {
   vm.$u.api.queryHospital = params => vm.$u.post(`${account}/queryHospital`, params);
   // 提交申请
   vm.$u.api.submitAccount = params => vm.$u.post(`${account}/submitAccount`, params);
+  // 查询五个状态的平车(绿道,占用,空闲,充电,离线)
+  vm.$u.api.queryCar = params =>
+    vm.$u.get(`${firstAid}/queryCar?hospitalId=${params.hospitalId}&status=${params.status}
+  `);
+  // 查询平车绑定患者的当前环节信息
+  vm.$u.api.getStep = params => vm.$u.post(`${firstAid}/step`, params);
 };
 
 export default { install };

src/pages.json

@@ -111,6 +111,12 @@
 			"style": {
 				"navigationBarTitleText": "查看更多"
 			}
+		},
+		{
+			"path": "pages/MoreCar/detail",
+			"style": {
+				"navigationBarTitleText": "平车"
+			}
 		}
 	],
 	"globalStyle": {

src/pages/MoreCar/detail.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="detail">
+    <view class="title"> 平车信息 </view>
+    <view
+      class="car-box bor-left-lv"
+      :class="{
+        'bor-left-lv': car.carStatus === 0,
+        'bor-left-zhan': car.carStatus === 1,
+        'bor-left-xian': car.carStatus === 2,
+        'bor-left-dian': car.carStatus === 3,
+        'bor-left-li': car.carStatus === 4,
+      }"
+    >
+      <view class="car-title flex items-center">
+        <view class="car-no">{{ car.carNo }}</view>
+        <view style="margin-right: 16rpx; font-size: 32rpx">{{ car.nursesName || '患者姓名' }}</view>
+        <view style="margin-right: 16rpx; font-size: 32rpx">{{ car.gender === 0 ? '女' : car.gender === 1 ? '男' : '性别' }}</view>
+        <view>{{ car.age || '年龄' }}</view>
+      </view>
+      <view class="info-box flex items-center">
+        <view class="car-no flex items-center">
+          <img v-if="car.carStatus === 0" src="@/static/news/绿.png" style="width: 60rpx; height: 60rpx" alt="" />
+          <img v-else-if="car.carStatus === 1" src="@/static/news/占.png" style="width: 60rpx; height: 60rpx" alt="" />
+          <img v-else-if="car.carStatus === 2" src="@/static/news/闲.png" style="width: 60rpx; height: 60rpx" alt="" />
+          <img v-else-if="car.carStatus === 3" src="@/static/news/电.png" style="width: 60rpx; height: 60rpx" alt="" />
+          <img v-else-if="car.carStatus === 4" src="@/static/news/离.png" style="width: 60rpx; height: 60rpx" alt="" />
+        </view>
+        <view>
+          <view class="flex">
+            <view
+              class="bing"
+              :class="{
+                lv: car.carStatus === 0,
+                zhan: car.carStatus === 1,
+                xian: car.carStatus === 2,
+                dian: car.carStatus === 3,
+                li: car.carStatus === 4,
+              }"
+              v-for="(medical, mIndex) in car.medicalHistoryList"
+              :key="mIndex"
+            >
+              {{ medical }}
+            </view>
+          </view>
+          <view class="id-card">身份证：{{ car.idcard }}</view>
+        </view>
+      </view>
+    </view>
+    <view class="title"> 时间轴 </view>
+    <view class="time-line-box"></view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'detail',
+  components: {},
+  props: {},
+  data() {
+    return {
+      car: {
+        age: null,
+        carId: '1',
+        carNo: '1001',
+        carStatus: 0,
+        doctorId: '0',
+        doctorName: null,
+        firstAidId: '1601126216004542464',
+        gender: null,
+        medicalHistoryList: ['家族史', '心脏病', '高血压'],
+        name: '',
+        idcard: '123123444403142235',
+        nursesId: '1',
+        nursesName: '张野',
+      },
+      status: 0,
+      stepList: [],
+    };
+  },
+  computed: {},
+  methods: {
+    async getSteps() {
+      try {
+        const params = { firstAidId: this.car.firstAidId };
+        const res = await this.$u.api.getStep(params);
+        this.stepList = [...res];
+      } catch (error) {
+        console.log('error: ', error);
+      }
+    },
+  },
+  watch: {},
+
+  // 页面周期函数--监听页面加载
+  onLoad() {
+    this.getSteps();
+  },
+  // 页面周期函数--监听页面初次渲染完成0
+  onReady() {},
+  // 页面周期函数--监听页面显示(not-nvue)
+  onShow() {},
+  // 页面周期函数--监听页面隐藏
+  onHide() {},
+  // 页面周期函数--监听页面卸载
+  onUnload() {},
+  // 页面处理函数--监听用户下拉动作
+  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
+  // 页面处理函数--监听用户上拉触底
+  // onReachBottom() {},
+  // 页面处理函数--监听页面滚动(not-nvue)
+  // onPageScroll(event) {},
+  // 页面处理函数--用户点击右上角分享
+  // onShareAppMessage(options) {},
+};
+</script>
+
+<style scoped>
+.time-line-box {
+  width: calc(100% - 64rpx);
+  height: 100rpx;
+  margin: 32rpx;
+  padding: 32rpx;
+  background: #ffffff;
+  box-shadow: 0px 4px 20px 0px rgba(39, 59, 97, 0.08);
+  border-radius: 24rpx;
+  opacity: 1;
+}
+.car-title {
+  margin-left: 42rpx;
+  font-size: 36rpx;
+  font-family: OPPOSans-Bold, OPPOSans;
+  font-weight: bold;
+  color: #70798c;
+}
+.car-no {
+  width: 140rpx;
+  margin-right: 10rpx;
+}
+.id-card {
+  font-size: 28rpx;
+  margin-top: 8rpx;
+  font-family: OPPOSans-Medium, OPPOSans;
+  font-weight: 500;
+  color: #70798c;
+}
+.lv {
+  background: #d2fff0;
+  color: #3dc195;
+}
+.zhan {
+  background: #ffece4;
+  color: #ff8833;
+}
+.xian {
+  background: #e4edff;
+  color: #5990ff;
+}
+.dian {
+  background: #ffe3dd;
+  color: #ff7b60;
+}
+.li {
+  background: #ececec;
+  color: #70798c;
+}
+.bing {
+  padding: 2rpx 8rpx;
+  font-size: 20rpx;
+  margin-right: 8rpx;
+}
+.info-box {
+  margin-left: 42rpx;
+  margin-top: 8rpx;
+  height: 80rpx;
+}
+.MoreCar {
+  height: 100vh;
+  overflow: hidden;
+}
+.car-box {
+  height: 188rpx;
+  width: calc(100% - 64rpx);
+  box-sizing: border-box;
+  margin: 32rpx 32rpx;
+  /* margin-bottom: 0; */
+  border-radius: 8rpx;
+  box-shadow: 0 0 30rpx 5rpx rgba(0, 0, 0, 0.1);
+  padding: 24rpx 0;
+}
+.bor-left-lv {
+  border-left: 4rpx solid #1bb299;
+}
+.bor-left-zhan {
+  border-left: 4rpx solid #ff8833;
+}
+.bor-left-xian {
+  border-left: 4rpx solid #5990ff;
+}
+.bor-left-dian {
+  border-left: 4rpx solid #ff7b60;
+}
+.bor-left-li {
+  border-left: 4rpx solid #70798c;
+}
+.title {
+  margin-left: 32rpx;
+  margin-top: 32rpx;
+  font-size: 36rpx;
+  font-family: OPPOSans-Bold, OPPOSans;
+  font-weight: bold;
+  color: #3e3d4d;
+}
+</style>

src/pages/MoreCar/index.vue

@@ -4,7 +4,7 @@
       <u-tabs
         :list="list"
         :is-scroll="false"
-        :current="current"
+        :current="status"
         @change="change"
         :active-item-style="itemStyle"
         bar-width="82"
@@ -14,20 +14,45 @@
     </view>
     <scroll-view scroll-y style="height: calc(100% - 84rpx); margin-top: 4rpx; padding: 0 16rpx">
       <div style="height: 1rpx; width: 100%"></div>
-      <view v-for="car in carList" :key="car.carId" class="car-box bor-left-lv">
+      <view
+        v-for="car in carList"
+        :key="car.carId"
+        class="car-box bor-left-lv"
+        :class="{
+          'bor-left-lv': status === 0,
+          'bor-left-zhan': status === 1,
+          'bor-left-xian': status === 2,
+          'bor-left-dian': status === 3,
+          'bor-left-li': status === 4,
+        }"
+        @click="detailCar(car)"
+      >
         <view class="title flex items-center">
-          <view style="margin-right: 32rpx">{{ car.carNo }}</view>
+          <view class="car-no">{{ car.carNo }}</view>
           <view style="margin-right: 16rpx; font-size: 32rpx">{{ car.nursesName || '患者姓名' }}</view>
           <view style="margin-right: 16rpx; font-size: 32rpx">{{ car.gender === 0 ? '女' : car.gender === 1 ? '男' : '性别' }}</view>
           <view>{{ car.age || '年龄' }}</view>
         </view>
         <view class="info-box flex items-center">
-          <img src="@/static/news/绿.png" style="width: 60rpx; height: 60rpx" alt="" />
+          <view class="car-no flex items-center">
+            <img v-if="status === 0" src="@/static/news/绿.png" style="width: 60rpx; height: 60rpx" alt="" />
+            <img v-else-if="status === 1" src="@/static/news/占.png" style="width: 60rpx; height: 60rpx" alt="" />
+            <img v-else-if="status === 2" src="@/static/news/闲.png" style="width: 60rpx; height: 60rpx" alt="" />
+            <img v-else-if="status === 3" src="@/static/news/电.png" style="width: 60rpx; height: 60rpx" alt="" />
+            <img v-else-if="status === 4" src="@/static/news/离.png" style="width: 60rpx; height: 60rpx" alt="" />
+          </view>
           <view>
             <view class="flex">
-              <view v-for="(medical, mIndex) in car.medicalHistoryList" :key="mIndex"> {{ medical }} </view>
+              <view
+                class="bing"
+                :class="{ lv: status === 0, zhan: status === 1, xian: status === 2, dian: status === 3, li: status === 4 }"
+                v-for="(medical, mIndex) in car.medicalHistoryList"
+                :key="mIndex"
+              >
+                {{ medical }}
               </view>
-            <view>身份证：{{ car.idcard }}</view>
+            </view>
+            <view class="id-card">身份证：{{ car.idcard }}</view>
           </view>
         </view>
       </view>
@@ -59,7 +84,6 @@ export default {
           name: '离线',
         },
       ],
-      current: 0,
       itemStyle: {
         color: '#2C2B3B',
       },
@@ -110,18 +134,38 @@ export default {
           nursesName: '张野',
         },
       ],
+      status: 0,
     };
   },
   computed: {},
   methods: {
+    detailCar(info) {
+      console.log('info: ', info);
+      if (this.status === 0 || this.status === 1) {
+        uni.navigateTo({ url: '/pages/MoreCar/detail' });
+      }
+    },
     change(index) {
-      this.current = index;
+      this.status = index;
+      this.getData();
+    },
+    async getData() {
+      try {
+        const params = {
+          hospitalId: '1436207203748159488',
+          status: this.status,
+        };
+        const res = await this.$u.api.queryCar(params);
+        console.log('res: ', res);
+      } catch (error) {}
     },
   },
   watch: {},
 
   // 页面周期函数--监听页面加载
-  onLoad() {},
+  onLoad() {
+    this.getData();
+  },
   // 页面周期函数--监听页面初次渲染完成
   onReady() {},
   // 页面周期函数--监听页面显示(not-nvue)
@@ -142,6 +186,42 @@ export default {
 </script>
 
 <style scoped>
+.car-no {
+  width: 140rpx;
+  margin-right: 10rpx;
+}
+.id-card {
+  font-size: 28rpx;
+  margin-top: 8rpx;
+  font-family: OPPOSans-Medium, OPPOSans;
+  font-weight: 500;
+  color: #70798c;
+}
+.lv {
+  background: #d2fff0;
+  color: #3dc195;
+}
+.zhan {
+  background: #ffece4;
+  color: #ff8833;
+}
+.xian {
+  background: #e4edff;
+  color: #5990ff;
+}
+.dian {
+  background: #ffe3dd;
+  color: #ff7b60;
+}
+.li {
+  background: #ececec;
+  color: #70798c;
+}
+.bing {
+  padding: 2rpx 8rpx;
+  font-size: 20rpx;
+  margin-right: 8rpx;
+}
 .info-box {
   margin-left: 42rpx;
   margin-top: 8rpx;
@@ -164,6 +244,18 @@ export default {
 .bor-left-lv {
   border-left: 4rpx solid #1bb299;
 }
+.bor-left-zhan {
+  border-left: 4rpx solid #ff8833;
+}
+.bor-left-xian {
+  border-left: 4rpx solid #5990ff;
+}
+.bor-left-dian {
+  border-left: 4rpx solid #ff7b60;
+}
+.bor-left-li {
+  border-left: 4rpx solid #70798c;
+}
 .title {
   margin-left: 42rpx;
   font-size: 36rpx;