hainan_2024/h5/pages/user/fenzhen/xindiantu.vue

<script setup>
import DraggableButton from "@/pages/components/goHome.vue";
/**
 * name：
 * user：sa0ChunLuyu
 * date：2024年9月11日 19:24:50
 */
import { ref } from "vue";
import { $api, $response } from "@/api";
import { onShow } from "@dcloudio/uni-app";
import { useStore } from "@/store";
const $store = useStore();
const $props = defineProps({
  id: {
    type: String,
    default: "0",
  },
});

let tabIndex = ref(0);

const fenzhen_list = ref(false);

const getFenzhenInfo = async (id) => {
  uni.showLoading();
  const response = await $api("FenzhenInfo", {
    id: $props.id,
  });
  uni.hideLoading();
  $response(response, () => {
    fenzhen_list.value = response.data;
  });
};

const mountedAction = () => {
  getFenzhenInfo();
};

const config_ref = ref(null);
const configRef = (e) => {
  if (!config_ref.value) {
    config_ref.value = e;
    mountedAction();
  }
};

const timeShow = (time) => {
  let time_array = time.split(":");
  return `${time_array[0]}:${time_array[1]}`;
};

const tip_show = ref(false);
const tip_content = ref("");

const qijian = (item) => {
  uni.navigateTo({
    url: `/pages/user/fenzhen/qijian?id=${$props.id}&xmid=${item.id}`,
  });
};

onShow(() => {
  if (!!config_ref.value) {
    mountedAction();
  }
});
</script>
<template>
  <DraggableButton />
  <view>
    <view v-if="!!$store.config">
      <view :ref="configRef"></view>
    </view>
    <!-- <view class="tip_dialog_wrapper" v-if="!!tip_show">
      <view class="tip_dialog_box_wrapper">
        <view @click="tip_show = !tip_show" class="tip_dialog_close_wrapper">
          <image src="@/static/assets/contrast/close@2x.png"></image>
        </view>
        <view class="tip_dialog_text_wrapper" v-html="tip_content"></view>
      </view>
    </view> -->
    <view v-if="!!fenzhen_list">
      <view class="order_info_wrapper">
        <view class="person_name_wrapper">
          <view class="person_name_text_wrapper">{{
            fenzhen_list.info.name
          }}</view>
          <view class="person_sex_wrapper">{{
            fenzhen_list.info.sex === 1 ? "男士" : "女士"
          }}</view>
        </view>
        <view class="info_box_wrapper">
          <view class="info_wrapper">
            <view class="info_title_wrapper">体检套餐：</view>
            <view class="info_text_wrapper">{{
              fenzhen_list.info.combo_name
            }}</view>
          </view>
          <view class="info_wrapper info2_wrapper">
            <view class="info_title_wrapper">体检日期：</view>
            <view class="info_text_wrapper">{{
              fenzhen_list.info.check_date
            }}</view>
          </view>
          <view
            class="info_wrapper info2_wrapper"
            v-if="fenzhen_list.info.code"
          >
            <view class="info_title_wrapper">体检号条码：</view>
            <w-barcode
              :options="{
                width: 500,
                height: 100,
                code: fenzhen_list.info.code,
              }"
            ></w-barcode>
          </view>
        </view>
        <view class="tip_wrapper">
          <view class="tip_time_wrapper">
            <view class="tip_time_text_wrapper">开始体检时间</view>
            <view class="tip_time_value_wrapper">{{
              timeShow(fenzhen_list.info.start_time)
            }}</view>
            <view class="tip_time_text_wrapper">— 预计结束时间</view>
            <view class="tip_time_value_wrapper">{{
              timeShow(fenzhen_list.info.end_time)
            }}</view>
          </view>
          <view class="tip_box_wrapper">
            <view class="tip_icon_wrapper">
              <image src="@/static/assets/fenzhen/tip@2x.png"></image>
            </view>
            <view class="tip_text_wrapper"
              >尊敬的客户，为了使您的体检流程更加顺畅，请按以下步骤提
              示顺序逐项完成体检。</view
            >
          </view>
        </view>
      </view>
      <view class="time_line_wrapper py-40rpx px-10rpx">
        <view
          class="mb-20rpx flex rounded-8rpx w-428rpx h-66rpx ma b-0 b-1 b-solid b-#239EA3"
        >
          <view
            @click="tabIndex = 0"
            :class="tabIndex == 0 ? 'ckjg_active' : ''"
            class="text-#239EA3 flex-1 text-#26rpx bg-#D9F3F2 flex flex-items-center flex-justify-center rounded-l-8rpx"
          >
            未完成
          </view>
          <view
            @click="tabIndex = 1"
            :class="tabIndex == 1 ? 'ckjg_active' : ''"
            class="text-#239EA3 flex-1 flex flex-items-center flex-justify-center bg-#D9F3F2 rounded-r-8rpx"
            >已完成
          </view>
        </view>
        <view>
          <template v-for="(item, index) in fenzhen_list.list" :key="index">
            <view class="between h-90rpx b-0 b-b-1 b-solid b-#EAEAEA" v-if="item.status == 1 && tabIndex == 0">
              <view class="text-#000000 text-30rpx">{{ item.name }}</view>
              <view class="center">
                <text
									@click="qijian(item)"
									class="rounded-full text-28rpx center w-105rpx h-48rpx text-#E95515 bg-#FAECE6"
                  >弃检</text
                >
              </view>
            </view>
						<view class="between h-90rpx b-0 b-b-1 b-solid b-#EAEAEA" v-if="item.status == 4 && tabIndex == 1">
              <view class="text-#000000 text-30rpx">{{ item.name }}</view>
              <view class="center">
                <text
									class="rounded-full text-28rpx center w-105rpx h-48rpx mr-30rpx text-#239EA3 bg-#E5F3F2"
                  >完成</text
                >
								<text class="text-#141414 text-28rpx">{{ item.time }}</text>
              </view>
            </view>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>
<style scoped>
.tip_dialog_text_wrapper {
  max-height: calc(100vh - 600rpx);
  overflow-y: auto;
}

.tip_dialog_wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 750rpx;
  background: #00000060;
  margin: 0 auto;
  z-index: 9999;
}

.tip_dialog_close_wrapper {
  position: absolute;
  top: 30rpx;
  right: 40rpx;
  width: 26rpx;
  height: 26rpx;
}

.tip_dialog_close_wrapper image {
  width: 26rpx;
  height: 26rpx;
  display: block;
  object-fit: contain;
}

.tip_dialog_box_wrapper {
  position: absolute;
  width: 610rpx;
  background: #ffffff;
  border-radius: 15rpx;
  padding-left: 50rpx;
  padding-right: 50rpx;
  padding-bottom: 90rpx;
  padding-top: 130rpx;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.time_line_item_more_wrapper {
  font-size: 22rpx;
  color: #239ea3;
  line-height: 1;
  text-decoration-line: underline;
  margin-right: 19rpx;
}

.time_line_item_text_wrapper {
  font-weight: 500;
  font-size: 24rpx;
  color: #6e6e6e;
  line-height: 1;
  margin-left: 42rpx;
}

.time_line_item_line_wrapper {
  width: 550rpx;
  height: 1rpx;
  background: #e8e8e8;
  border-radius: 1rpx;
  margin: 13rpx auto 5rpx;
}

.time_line_item_box_wrapper {
  width: 400rpx;
  height: 40rpx;
  background: #5a75ca30;
  border-radius: 5rpx;
  font-weight: 500;
  font-size: 24rpx;
  color: #5a75ca;
  line-height: 40rpx;
  text-align: center;
  margin-right: 17rpx;
}

.time_line_item_title_wrapper {
  width: 140rpx;
  font-weight: bold;
  font-size: 28rpx;
  color: #0d0d0d;
  line-height: 40rpx;
  height: 40rpx;
  margin-left: 22rpx;
}

.time_line_item_flex_wrapper {
  margin-top: 15rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.time_line_item_time_cover_wrapper {
  position: absolute;
  width: 2rpx;
  top: -36rpx;
  height: 100rpx;
  left: 50%;
  background: #ffffff;
  transform: translateX(-50%);
  z-index: 99;
}

.time_line_item_time_line_wrapper {
  position: absolute;
  width: 2rpx;
  top: 0;
  bottom: 0;
  left: 50%;
  background: #dedede;
  transform: translateX(-50%);
}

.time_line_item_time_dot_wrapper {
  position: absolute;
  width: 16rpx;
  height: 16rpx;
  background: #cfcece60;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 26rpx));
  z-index: 999;
}

.time_line_item_time_dot_in_wrapper {
  width: 8rpx;
  height: 8rpx;
  background: #cfcece;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.time_line_box_wrapper {
  margin-top: 28rpx;
}

.time_line_item_triangle_wrapper {
  width: 16rpx;
  height: 16rpx;
  border-left: 1rpx #e8e8e8 solid;
  border-bottom: 1rpx #e8e8e8 solid;
  background: #f8f8f8;
  position: absolute;
  top: 50%;
  left: -10rpx;
  transform: rotate(45deg);
}

.time_line_item_content_wrapper {
  width: 590rpx;
  background: #f8f8f8;
  border-radius: 5rpx;
  margin-left: 12rpx;
  position: relative;
  border: 1rpx #e8e8e8 solid;
  margin-top: 36rpx;
  padding-bottom: 15rpx;
}

.time_line_item_time_value_wrapper {
  width: 90rpx;
  height: 55rpx;
  background: #e4e4e4;
  border-radius: 28rpx;
  font-weight: 500;
  font-size: 28rpx;
  color: #212121;
  line-height: 55rpx;
  text-align: center;
  position: relative;
  z-index: 99;
}

.time_line_item_time_wrapper {
  width: 90rpx;
  position: absolute;
  left: 6rpx;
  right: 0;
  top: 0;
  bottom: 0;
}

.time_line_item_wrapper {
  width: calc(90rpx + 12rpx + 590rpx);
  display: flex;
  justify-content: end;
  margin: 0 auto;
  position: relative;
}

.time_line_title_wrapper {
  width: 180rpx;
  height: 60rpx;
  background: linear-gradient(90deg, #edf6f5 0%, #bbdfe1 99%);
  border-radius: 0rpx 30rpx 30rpx 0rpx;
  font-weight: bold;
  font-size: 25rpx;
  color: #123531;
  text-align: center;
  line-height: 60rpx;
  margin-top: 26rpx;
  overflow: hidden;
}

.time_line_wrapper {
  width: 710rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
  border-radius: 15rpx;
  margin: 53rpx auto 0;
  overflow: hidden;
  position: relative;
  padding-bottom: 30rpx;
}

.tip_text_wrapper {
  font-weight: 400;
  font-size: 22rpx;
  color: #e95515;
  line-height: 36rpx;
  margin-left: 10rpx;
}

.tip_icon_wrapper {
  width: 24rpx;
  height: 24rpx;
  margin-top: 5rpx;
}

.tip_icon_wrapper image {
  width: 24rpx;
  height: 24rpx;
  display: block;
  object-fit: contain;
}

.tip_box_wrapper {
  display: flex;
  margin-top: 20rpx;
}

.tip_time_value_wrapper {
  font-size: 36rpx;
  color: #239ea3;
  margin: 0 10rpx;
}

.tip_time_text_wrapper {
  font-size: 22rpx;
  color: #161616;
}

.tip_time_wrapper {
  display: flex;
  align-items: end;
  line-height: 1;
}

.tip_wrapper {
  width: 100%;
  padding: 30rpx;
  padding-bottom: 0;
  margin-top: 30rpx;
  border-top: 1rpx solid #e8e8e8;
  box-sizing: border-box;
}

.info2_wrapper {
  margin-top: 30rpx;
}

.info_box_wrapper {
  margin-top: 60rpx;
  margin-left: 29rpx;
}

.button_wrapper {
  display: flex;
  justify-content: end;
}

.desc_wrapper {
  width: 160rpx;
  height: 48rpx;
  background: #239ea3;
  border-radius: 5rpx;
  font-size: 20rpx;
  color: #ffffff;
  line-height: 48rpx;
  text-align: center;
  margin-right: 29rpx;
  margin-top: 24rpx;
}

.info_wrapper {
  display: flex;
  align-items: center;
}

.info_text_wrapper {
  font-size: 24rpx;
  color: #0f0f0f;
  line-height: 1;
}

.info_title_wrapper {
  font-size: 24rpx;
  color: #8b8b8b;
  line-height: 1;
}

.order_info_wrapper {
  width: 710rpx;
  /* height: 360rpx; */
  background: #ffffff;
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
  border-radius: 15rpx;
  margin: 20rpx auto 0;
  overflow: hidden;
  padding-bottom: 40rpx;
}

.person_name_wrapper {
  display: flex;
  align-items: end;
  margin-top: 72rpx;
  margin-left: 29rpx;
}

.person_name_text_wrapper {
  font-weight: bold;
  font-size: 34rpx;
  color: #171717;
}

.person_sex_wrapper {
  font-size: 24rpx;
  color: #7e7e7e;
  margin-left: 15rpx;
}

.time_line_item-2_wrapper .time_line_item_time_value_wrapper,
.time_line_item-1_wrapper .time_line_item_time_value_wrapper {
  background: #239ea3;
  color: #f8f8f8;
}

.time_line_item-2_wrapper .time_line_item_time_dot_wrapper,
.time_line_item-1_wrapper .time_line_item_time_dot_wrapper {
  background: #239ea360;
}

.time_line_item-2_wrapper .time_line_item_time_dot_in_wrapper,
.time_line_item-1_wrapper .time_line_item_time_dot_in_wrapper {
  background: #239ea3;
}

.time_line_item-2_wrapper .time_line_item_box_wrapper,
.time_line_item-1_wrapper .time_line_item_box_wrapper {
  background: #6cafb230;
  color: #239ea3;
}

.time_line_item--1_wrapper .time_line_item_time_value_wrapper {
  background: #239ea3;
  color: #f8f8f8;
}

.time_line_item--1_wrapper .time_line_item_time_dot_wrapper {
  background: #239ea360;
}

.time_line_item--1_wrapper .time_line_item_time_dot_in_wrapper {
  background: #239ea3;
}

.time_line_item--1_wrapper .time_line_item_box_wrapper {
  background: #e1af6830;
  color: #cc913e;
}

.table_wrapper {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 1rpx 1rpx 0px rgba(2, 2, 4, 0.05);
  border-radius: 10rpx;
  margin-top: 15rpx;
  overflow: hidden;
  padding-bottom: 34rpx;
}

.ckjg_active {
  background: #239ea3;
  color: #fff;
}
</style>