平车列表页及详情页开发

src/components/Service/Service.vue

@@ -9,7 +9,7 @@
       <!-- 客服 -->
       <img style="height: 28px; width: 28px" src="./icon/tel-we.png" alt="" />
     </button>
-    <view class="edition">v4.0.1</view>
+    <view class="edition">v4.0.2</view>
   </div>
 </template>
 <script>

src/components/Volume/Volume.vue

@@ -2,11 +2,10 @@
   <view class="volume-box">
     <scroll-view scroll-x style="height: 100%; width: 100%">
       <view class="flex justify-between">
-        <view class="flex flex-col items-center justify-center" style="flex-shrink: 0" @click="apply">
+        <!-- <view class="flex flex-col items-center justify-center" style="flex-shrink: 0" @click="apply">
-          <!-- <img class="volume-img" src="@/static/image.png" alt="" /> -->
           <img class="volume-img" src="@/static/image.png" alt="" />
           <span class="mt-2" style="color: #70798c">申请</span>
-        </view>
+        </view> -->
         <!-- <view class="flex flex-col items-center justify-center" style="flex-shrink: 0" @click="statistics">
           <img class="volume-img" src="@/static/image.png" alt="" />
           <span class="mt-2" style="color: #70798c">统计</span>
@@ -16,7 +15,7 @@
           style="flex-shrink: 0"
           v-for="(item, index) in btnList"
           :key="index"
-          @click="jumpV(item.url)"
+          @click="jumpV(item)"
         >
           <!-- <img class="volume-img" src="@/static/image.png" alt="" /> -->
           <img class="volume-img" :src="item.iconUrl || '@/static/image.png'" alt="" />
@@ -78,13 +77,18 @@ export default {
       }
     },
     // 跳转到问卷调查
-    jumpV(url) {
+    jumpV(item) {
-      if (this.user.phone) {
+      const url = item.url;
-        console.log('this.userId: ', this.userId);
+      if (item.jumpType === 0) {
-        this.$u.route('pages/questionnaire-webview/questionnaire-webview', { u: this.userId, url: url });
+        uni.navigateTo({ url });
       } else {
-        // this.$u.route('/pages/get-phone-power/get-phone-power');
+        if (this.user.phone) {
-        this.$u.route('/pages/phone-bind/phone-bind');
+          console.log('this.userId: ', this.userId);
+          this.$u.route('pages/questionnaire-webview/questionnaire-webview', { u: this.userId, url: url });
+        } else {
+          // this.$u.route('/pages/get-phone-power/get-phone-power');
+          this.$u.route('/pages/phone-bind/phone-bind');
+        }
       }
     },
   },

src/pages/MoreCar/detail.vue

@@ -3,6 +3,7 @@
     <view class="title"> 平车信息 </view>
     <view
       class="car-box bor-left-lv"
+      v-if="car"
       :class="{
         'bor-left-lv': car.carStatus === 0,
         'bor-left-zhan': car.carStatus === 1,
@@ -10,6 +11,7 @@
         'bor-left-dian': car.carStatus === 3,
         'bor-left-li': car.carStatus === 4,
       }"
+      @click="openDetail"
     >
       <view class="car-title flex items-center">
         <view class="car-no">{{ car.carNo }}</view>
@@ -47,38 +49,66 @@
       </view>
     </view>
     <view class="title"> 时间轴 </view>
-    <view class="time-line-box"></view>
+    <view class="time-line-box">
+      <view class="flex" v-for="(step, stepIndex) in stepList" :key="step.stepId">
+        <view class="time-line-left flex flex-col items-center">
+          <view class="time-line-cir" :class="step.type === 1 ? 'green' : step.type === 2 ? 'blue' : ''"></view>
+          <view
+            class="time-line-bor"
+            v-if="stepIndex !== stepList.length - 1"
+            :class="step.type === 1 ? 'green-bg' : step.type === 2 ? 'blue-bg' : ''"
+          ></view>
+        </view>
+        <view class="time-line-right flex-1" style="margin-top: -16rpx">
+          <view class="w-full name-status flex justify-between">
+            <view :class="step.type === 1 ? 'green' : step.type === 2 ? 'blue' : ''">
+              {{ step.stepName }}
+            </view>
+            <view :class="step.type === 1 ? 'green' : step.type === 2 ? 'blue' : ''">
+              <!-- {{ step.type }} -->
+              {{ step.type === 0 ? '未开始' : step.type === 1 ? '待确认' : '已结束' }}
+            </view>
+          </view>
+          <view class="w-full time-status flex justify-between">
+            <view class="flex items-center" :class="step.type === 1 ? 'green' : step.type === 2 ? 'blue' : ''">
+              <!-- {{ step.stepName }} -->
+              <img src="@/static/news/logo2xg.png" v-if="step.type === 2" style="width: 32rpx; height: 32rpx; margin-right: 8rpx" alt="" />
+              <img src="@/static/news/logo2x.png" v-else style="width: 32rpx; height: 32rpx; margin-right: 8rpx" alt="" />
+              {{ step.startTime ? $moment(+step.startTime).format('YYYY-MM-DD HH:mm') : '未知' }}
+            </view>
+            <view>
+              <!-- {{ step.type }} -->
+              <u-icon size="32" name="edit-pen" :color="step.type === 1 ? '#00c767' : step.type === 2 ? '#4f8bff' : ''"></u-icon>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
   </div>
 </template>
 
 <script>
+import { mapMutations } from 'vuex';
 export default {
   name: 'detail',
   components: {},
   props: {},
   data() {
     return {
-      car: {
+      car: null,
-        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: {
+    ...mapMutations('carbasics', ['setFirstAidId', 'setDetailValueType']),
+    // 查看病历填写详情
+    openDetail() {
+      this.setFirstAidId(this.car.firstAidId);
+      this.setDetailValueType(this.car.demonstrate);
+      uni.navigateTo({ url: `/pages/patientLine/patientLine?caseType=${0}` });
+    },
     async getSteps() {
       try {
         const params = { firstAidId: this.car.firstAidId };
@@ -92,7 +122,9 @@ export default {
   watch: {},
 
   // 页面周期函数--监听页面加载
-  onLoad() {
+  onLoad(options) {
+    console.log('options: ', options);
+    this.car = JSON.parse(options.info);
     this.getSteps();
   },
   // 页面周期函数--监听页面初次渲染完成0
@@ -115,9 +147,53 @@ export default {
 </script>
 
 <style scoped>
+.blue-bg {
+  background: #4f8bff !important;
+}
+.green-bg {
+  background: #00c767 !important;
+}
+.blue {
+  color: #4f8bff !important;
+  border-color: #4f8bff !important;
+}
+.green {
+  color: #00c767 !important;
+  border-color: #00c767 !important;
+}
+.name-status {
+  font-size: 32rpx;
+  font-family: OPPOSans-Bold, OPPOSans;
+  font-weight: bold;
+  color: #a3acbf;
+}
+.time-status {
+  margin-top: 12rpx;
+  font-size: 24rpx;
+  font-family: OPPOSans-Medium, OPPOSans;
+  font-weight: 500;
+  color: #a3acbf;
+}
+.time-line-left {
+  margin-right: 24rpx;
+}
+.time-line-cir {
+  width: 8px;
+  height: 8px;
+  border: 4rpx solid #a3acbf;
+  border-radius: 50%;
+  opacity: 1;
+}
+.time-line-bor {
+  width: 4rpx;
+  height: 112rpx;
+  background: #a3acbf;
+  opacity: 1;
+}
 .time-line-box {
+  margin-right: 24rpx;
   width: calc(100% - 64rpx);
-  height: 100rpx;
+  /* height: 100rpx; */
   margin: 32rpx;
   padding: 32rpx;
   background: #ffffff;

src/pages/MoreCar/index.vue

@@ -52,7 +52,7 @@
                 {{ medical }}
               </view>
             </view>
-            <view class="id-card">身份证：{{ car.idcard }}</view>
+            <view class="id-card">身份证：{{ car.idcard || '' }}</view>
           </view>
         </view>
       </view>
@@ -87,53 +87,7 @@ export default {
       itemStyle: {
         color: '#2C2B3B',
       },
-      carList: [
+      carList: [],
-        {
-          age: null,
-          carId: '1',
-          carNo: '1001',
-          carStatus: 0,
-          doctorId: '0',
-          doctorName: null,
-          firstAidId: '1601126216004542464',
-          gender: null,
-          medicalHistoryList: ['家族史', '心脏病', '高血压'],
-          name: '',
-          idcard: '123123444403142235',
-          nursesId: '1',
-          nursesName: '张野',
-        },
-        {
-          age: null,
-          carId: '2',
-          carNo: '1001',
-          carStatus: 0,
-          doctorId: '0',
-          doctorName: null,
-          firstAidId: '1601126216004542464',
-          gender: null,
-          medicalHistoryList: ['家族史', '心脏病', '高血压'],
-          name: '',
-          idcard: '123123444403142235',
-          nursesId: '1',
-          nursesName: '张野',
-        },
-        {
-          age: null,
-          carId: '3',
-          carNo: '1001',
-          carStatus: 0,
-          doctorId: '0',
-          doctorName: null,
-          firstAidId: '1601126216004542464',
-          gender: null,
-          medicalHistoryList: ['家族史', '心脏病', '高血压'],
-          name: '',
-          idcard: '123123444403142235',
-          nursesId: '1',
-          nursesName: '张野',
-        },
-      ],
       status: 0,
     };
   },
@@ -142,7 +96,7 @@ export default {
     detailCar(info) {
       console.log('info: ', info);
       if (this.status === 0 || this.status === 1) {
-        uni.navigateTo({ url: '/pages/MoreCar/detail' });
+        uni.navigateTo({ url: `/pages/MoreCar/detail?info=${JSON.stringify(info)}` });
       }
     },
     change(index) {
@@ -157,6 +111,7 @@ export default {
         };
         const res = await this.$u.api.queryCar(params);
         console.log('res: ', res);
+        this.carList = [...res];
       } catch (error) {}
     },
   },