com.kasite.client.uniapp.patient/pagesPatient/st1/business/report/reportSelect/reportSelect.vue

<template>
  <view class="container">
    <view class="content">
      <image class="icon_menuSelect" :src="iconUrl.icon_menuSelect"></image>
      <image class="icon_menuSelectText" :src="iconUrl.icon_menuSelectText"></image>
      <view class="charging_title">检验、检查报告涉及患者个人隐私，在查询报告前，需先对您的身份进行实人认证</view>
      <template v-for="(item, ind) in queryBean.Children" :key="ind">
        <view class="charging_menu_list displayFlexCol" @click="goto(item)" v-if="item.IsShow == 1">
          <view class="displayFlexCol charging_menu_listText">
            <text class="menuName">{{ item.MenuName }}</text>
            <text class="tips" v-if="item.Tip && item.Tip != ''">在院期间的报告不可查询</text>
          </view>
          <image class="bg" :src="item.Icon"></image>
        </view>
      </template>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import icon from '@/utils/icon';
import { menuClick } from '@/utils';

const app = getApp();
const iconUrl = ref(icon);
const queryBean = ref<any>({});

onLoad(() => {
  /**如果点击菜单时   有多级页面  会给selectUrl_x赋值 */
  if (app.globalData.selectUrl_x) {
    try {
      queryBean.value = typeof app.globalData.selectUrl_x === 'string' 
        ? JSON.parse(app.globalData.selectUrl_x) 
        : app.globalData.selectUrl_x;
    } catch (e) {
      console.error('JSON parse error', e);
      queryBean.value = {};
    }
    app.globalData.selectUrl_x = null;
  }
});

const goto = (item: any) => {
  menuClick(item, null);
};
</script>

<style scoped>
.container,
.content {
  background: #fff;
  min-height: 100vh; /* Ensure full height cover */
}

.icon_menuSelect {
  width: 100%;
  height: 995upx;
  position: absolute;
  top: 0;
}

.icon_menuSelectText {
  position: absolute;
  width: 52upx;
  height: 31upx;
  top: 36upx;
  left: 36upx;
}

.charging_title {
  font-size: 28upx;
  font-family: PingFang SC;
  font-weight: 500;
  font-style: italic;
  color: #F8FFF1;
  position: relative;
  padding: 28upx 35upx 30upx;
  text-indent: 60upx;
  line-height: 50upx;
}

.charging_menu_list {
  height: 200upx;
  position: relative;
  margin: 0 30upx 30upx;
  align-items: flex-start;
  /* Ensure displayFlexCol behavior if not global */
  display: flex;
  flex-direction: column;
}

.charging_menu_listText {
  padding-left: 160upx;
  position: absolute;
  z-index: 2;
  align-items: flex-start;
  /* Ensure displayFlexCol behavior if not global */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Adjust based on look */
  height: 100%; /* Center vertically in the list item */
}

.charging_menu_list .menuName {
  font-size: 32upx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #263715;
}

.charging_menu_list .tips {
  font-size: 26upx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #344A1D;
  opacity: 0.6;
  margin-top: 20upx;
}

.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.displayFlexCol {
  display: flex;
  flex-direction: column;
}
</style>