hainan_2024/h5/pages/main/bgcx/bgcx.vue

<script setup>
/**
 * name：
 * user：bgcx
 * date：2024年9月20日 20:05:05
 */
import { ref, computed } from "vue";
import { $image, $api, $response } from "@/api";
import { onShow } from "@dcloudio/uni-app";
import { useStore } from "@/store";
const $store = useStore();
let tabIndex = ref(0); // 标签索引
const bgcx_list = ref(null);

const $props = defineProps({});
const mountedAction = async () => {
  uni.showLoading({
    title: "加载中",
  });
  // openId.value = $props.openId;
  // if (openId.value) {
  gettjbgInfo(); //  体检报告列表
  // }
};

const gettjbgInfo = async (index) => {
  tabIndex.value = index ? index : 0;
  // 获取 体检报告列表
  console.log(tabIndex.value);
  console.log($store, "store");
  let obj = {
    tj_status: tabIndex.value
  };
  const response = await $api("GetReportList", obj);
  $response(response, () => {
    console.log(response, "response");
    bgcx_list.value = response.data.list;
    uni.hideLoading();
  });
};

const config_ref = ref(null);
const configRef = (e) => {
  if (!config_ref.value) {
    config_ref.value = e;
    mountedAction();
  }
};
const routesDeatils = (val) => {
  // 跳转查看报告详情
  let tjhStr = val["体检号"];
  uni.navigateTo({
    url: `/pages/main/bgcx/ckbg/ckbg?tjh=${tjhStr}`,
  });
};

const tzroutes = (url) => {
  // 跳转路径
  uni.navigateTo({
    url: `/pages/main/bgcx/${url}/${url}`,
  });
};
onShow(() => {
  if (!!config_ref.value) {
    mountedAction();
  }
});
</script>
<template>
  <view>
    <view v-if="!!$store.config">
      <view :ref="configRef"></view>
    </view>
  </view>
  <view class="bgcx pl-10rpx pr-10rpx">
    <view class="bgcx_header">
      <view
        @click="tzroutes('bgjd')"
        class="bgcx_header_bgcolor"
        style="background: linear-gradient(-30deg, #3bcda9, #3dcbd1)"
      >
        <view class="bgcx_header_text"> 报告解读 </view>
        <image src="@/static/assets/slices/bgjd.png"></image>
      </view>
      <view
        @click="tzroutes('bgdb')"
        class="bgcx_header_bgcolor"
        style="background: linear-gradient(-30deg, #fec546, #ffae22)"
      >
        <view class="bgcx_header_text"> 报告对比 </view>
        <image src="@/static/assets/slices/bgdb.png"></image>
      </view>
      <view
        @click="tzroutes('qsfx')"
        class="bgcx_header_bgcolor"
        style="background: linear-gradient(-30deg, #8bbafe, #7898fe)"
      >
        <view class="bgcx_header_text"> 趋势分析 </view>
        <image src="@/static/assets/slices/xsfx.png"></image>
      </view>
    </view>
    <view class="bgcx_fullReport">
      <view class="text-#123531 text-34rpx"> 全部报告 </view>
      <view class="bgcx_fullReport_query mb-38rpx">
        <view
          @click="gettjbgInfo(0)"
          :class="tabIndex == 0 ? 'bgcx_fullReport_query_button_active' : ''"
          class="bgcx_fullReport_query_button"
          >全部</view
        >
        <view
          @click="gettjbgInfo(1)"
          :class="tabIndex == 1 ? 'bgcx_fullReport_query_button_active' : ''"
          class="bgcx_fullReport_query_button"
          >未出报告</view
        >
      </view>
      <view v-for="(val, i) in bgcx_list" :key="i" @click="routesDeatils(val)">
        <view class="flex items-center">
          <view class="w-8rpx h-8rpx bg-#239EA3 rounded-15rpx"> </view>
          <view class="ml-8rpx text-26rpx">
            {{ val["登记时间"] }}
          </view>
        </view>
        <view
          class="mt-29rpx mb-40rpx bg-#239EA3 rounded-20rpx flex"
          style="box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(141, 141, 141, 0.25)"
        >
          <view class="flex-1 pb-25rpx bg-#fff rounded-20rpx">
            <view
              v-show="!val.is_read"
              class="rounded-5rpx position-absolute right-94rpx text-#239EA3 rounded-rt-20rpx mt-3rpx w-70rpx h-36rpx bg-#F3F9F9 b-0 b-1 b-solid b-#E9F5F5 text-22rpx text-center"
            >
              未读
            </view>
            <view
              v-show="val.is_read"
              class="rounded-5rpx position-absolute right-94rpx rounded-rt-20rpx m-3rpx w-70rpx h-36rpx text-#ED6907 bg-#FCF5F0 b-0 b-1 b-solid b-#F9E1CF text-22rpx text-center"
            >
              已读
            </view>
            <view class="flex mt--20rpx mt-36rpx">
              <view class="flex flex-col items-center w-193rpx">
                <view class="line-height-[2.2] text-30rpx font-500">
                  {{ val["姓名"] }}
                </view>
                <view class="text-26rpx text-#868686">
                  {{ val["性别"] }}
                </view>
              </view>
              <view class="flex flex-col flex-1">
                <view class="line-height-[2.2] text-#0D0D0D text-26rpx">
                  体检报告
                </view>
                <view class="text-#868686 text-26rpx box-border pr-20rpx">
                  {{ val["套餐名称"] }}
                  <br />
                  报告编号： {{ val["体检号"] }}
                </view>
              </view>
            </view>
          </view>
          <view
            class="text-#fff w-26rpx ml-16rpx mr-16rpx text-26rpx mt-26rpx line-height-[1.2]"
          >
            体检报告
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<style scoped>
.bgcx {
  /* width: 750rpx; */
  margin: 0 auto;
}

.bgcx_header {
  margin-top: 20rpx;
  display: flex;
  justify-content: space-around;
}

.bgcx_header_bgcolor {
  width: 220rpx;
  height: 180rpx;
  border-radius: 15rpx;
}

.bgcx_header_bgcolor image {
  width: 100rpx;
  height: 100rpx;
  margin-left: 117rpx;
}

.bgcx_header_text {
  /* 	box-sizing: border-box;
		padding: 41rpx 0 0 19rpx; */
  color: #fff;
  font-size: 36rpx;
  margin: 35rpx 0 0 19rpx;
}

.bgcx_fullReport {
  /* width: 730rpx; */
  background: #ffffff;
  margin: 20rpx auto;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.04);
  border-radius: 5px;
  padding: 31rpx 25rpx;
  box-sizing: border-box;
}

.bgcx_fullReport_query {
  display: flex;
}

.bgcx_fullReport_query_button_active {
  background: #e2f2f1;
  border: 1px solid #239ea3;
  color: #239ea3;
}

.bgcx_fullReport_query_button {
  margin: 32rpx 30rpx 0 0;
  width: 150rpx;
  height: 58rpx;
  line-height: 58rpx;
  background: #f1f2f6;
  border-radius: 29rpx;
  text-align: center;
  font-size: 26rpx;
}
</style>