Typhoneye/src/pages/MoreCar/detail.vue

<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>