com.kasite.client.uniapp.patient/pages/st1/components/hosList/hosList.vue

<template>
  <view>
    <view class="initial displayFlexRow">
      <view class="hosItem" v-for="(item, index) in hosList" :key="index" @click="selectHos(index)">
        <text :class="{ 'cur': item.check }">{{ item.name }}</text>
        <image v-if="item.check" :src="index == 0 ? iconUrl.icon_new_bg : index == 1 ? iconUrl.icon_old_bg : ''"></image>
      </view>
    </view>
    
    <template v-for="(item, index) in hosList" :key="index">
      <view class="hos_addr_box displayFlexRow" v-if="item.check">
        <image :src="iconUrl.icon_addr"></image>
        <text>{{ item.addr }}</text>
      </view>
    </template>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch, nextTick } from 'vue';
import { common } from '@/utils';
import icon from '@/utils/icon';

const props = defineProps({
  pageType: {
    type: String,
    default: ''
  },
  hosId: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['getHosId']);

const app = getApp();
const iconUrl = ref(icon);
const hosList = ref<any[]>([]);
const edition_slb = ref(false);

const initData = (isObserver = false) => {
  let arr: any[] = [];
  // Ensure globalData.hosList exists before accessing
  if (app.globalData?.hosList?.options) {
    let list = JSON.parse(JSON.stringify(app.globalData.hosList.options));
    list.forEach((item: any, index: number) => {
      // Default reset
      item.check = false;
      
      if (props.hosId && props.hosId !== "") {
        if (item.value == props.hosId) {
          item.check = true;
        }
      } else if (index == 0) {
        // Unified to default to index 0 (consistent with observer logic in original code)
        item.check = true;
      }
      
      if (item.value !== "") {
        arr.push(item);
      }
    });
  }
  hosList.value = arr;
  
  if (!isObserver && props.pageType != "noFristAuto" && arr.length > 0) {
    console.log(123);
    emit('getHosId', arr[0].value);
  }
};

onMounted(() => {
  edition_slb.value = uni.getStorageSync('wx_Slb') || false;
  initData();
});

watch(() => props.hosId, () => {
  initData(true);
});

const selectHos = (index: number) => {
  common.throttle(async () => {
    // Reset all checks
    hosList.value.forEach((item) => {
      item.check = false;
    });
    // Set current check
    if (hosList.value[index]) {
      hosList.value[index].check = true;
      
      const selectedValue = hosList.value[index].value;
      
      if (props.pageType == "deptList") {
        if (selectedValue == '22677') {
          app.globalData.districtId = '22677';
        } else {
          app.globalData.districtId = '';
        }
      }
      emit('getHosId', selectedValue);
    }
  });
};
</script>

<style lang="scss" scoped>
.displayFlexRow {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.displayFlexCol {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.initial, .concise {
  width: 100%;
  justify-content: space-between;
}

.initial .line_height {
  width: 33.3%;
  height: 100upx;
  position: relative;
}

.initial .line_height image {
  height: 100% !important;
}

.bgf7f7fc {
  background: #f7f7fc;
}

.initial .hosItem {
  width: 33%;
  height: 76upx;
  line-height: 76upx;
  font-size: 32upx;
  color: #43434A;
  text-align: center;
  background: #f1f1f6;
  border-radius: 50px;
  margin-right: 5%;
  position: relative;
  z-index: 1;
}

.initial .hosItem:last-child {
  margin-right: 0;
}

.initial text {
  font-size: 32upx;
  font-weight: bold;
  color: #43434A;
  position: relative;
  z-index: 17;
}

.initial text.cur {
  color: #fff;
}

.initial image {
  width: 100%;
  height: 81upx;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 16;
}

/* 适老版 */
.concise .hosItem {
  width: 218upx;
  margin-right: 18upx;
  height: 88upx;
  line-height: 88upx;
  font-size: 40upx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #62626D;
  background: #EDEEF5;
  text-align: center;
  border-radius: 44px;
  position: relative;
  z-index: 1;
}

.concise .hosItem:last-child {
  margin-right: 0;
}

.concise text {
  font-weight: bold;
  color: #62626D;
  position: relative;
  z-index: 17;
}

.concise text.cur {
  color: #fff;
}

.concise image {
  width: 100%;
  height: 88upx;
  position: absolute;
  left: 0;
  top: 2upx;
  z-index: 16;
}

.concise .line_height {
  width: 196upx;
  height: 104upx;
  position: relative;
  background: #F1F1F6;
  margin-right: 20upx;
  border-radius: 20upx;
}

.concise .line_height:nth-child(3n) {
  margin-right: 0;
}

.hos_addr_box_slb {
  width: 100%;
  justify-content: flex-start;
  padding: 36upx 30upx 0 30upx;
}

.hos_addr_box_slb image {
  width: 34upx;
  height: 38upx;
  margin-right: 16upx;
}

.hos_addr_box_slb text {
  font-size: 40upx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #222326;
}

.hos_addr_box {
  width: 100%;
  justify-content: flex-start;
  padding: 36upx 30upx 0 30upx;
}

.hos_addr_box image {
  width: 29upx;
  height: 33upx;
  margin-right: 16upx;
}

.hos_addr_box text {
  font-size: 28upx;
  font-weight: bold;
  color: #222326;
}
</style>