Typhoneye/src/pages/MoreCar/detail.vue

<template>
  <div class="detail">
    <view class="title"> 平车信息 </view>
    <view
      class="car-box bor-left-lv"
      v-if="car"
      :class="{
        'bor-left-lv': car.carStatus === 1,
        'bor-left-zhan': car.carStatus === 0 || car.carStatus === 3,
        'bor-left-xian': car.carStatus === 2,
      }"
      @click="openDetail"
    >
      <!-- '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 ? car.nursesName : car.carStatus === 3 ? '无病历' : '无名氏'
        }}</view>
        <view style="margin-right: 16rpx; font-size: 32rpx">{{ car.gender === 0 ? '女' : car.gender === 1 ? '男' : '性别' }}</view>
        <view style="font-size: 32rpx">{{ car.age || '年龄' }}</view>
      </view>
      <view class="info-box flex items-center">
        <view class="car-no flex items-center">
          <img v-if="car.carStatus === 1" src="@/static/news/绿.png" style="width: 60rpx; height: 60rpx" alt="" />
          <img
            v-else-if="car.carStatus === 0 || car.carStatus === 3"
            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 === 1,
                zhan: car.carStatus === 0 || car.carStatus === 3,
                xian: car.carStatus === 2,
              }"
              v-for="(medical, mIndex) in car.medicalHistoryList"
              :key="mIndex"
            >
              <!-- dian: car.carStatus === 3,
                li: car.carStatus === 4, -->
              {{ medical }}
            </view>
          </view>
          <view class="id-card">身份证：{{ car.idcard || '暂无' }}</view>
        </view>
      </view>
    </view>
    <view class="title"> 时间轴 </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: null,
      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 };
        const res = await this.$u.api.getStep(params);
        this.stepList = [...res];
      } catch (error) {
        console.log('error: ', error);
      }
    },
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad(options) {
    console.log('options: ', options);
    this.car = JSON.parse(options.info);
    console.log('this.car: ', this.car);
    this.getSteps();
  },
  // 页面周期函数--监听页面初次渲染完成0
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</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; */
  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;
  overflow: hidden;
  text-overflow: ellipsis;
  /* display: -webkit-box; */
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.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>