hainan_2024/h5/pages/main/optionalProject/choose.vue

<script setup>
/**
 * name：
 * user：sa0ChunLuyu
 * date：2024年9月11日 19:24:50
 */
import { ref } from "vue";
import { $api, $image, $response } from "@/api";
import { onShow } from "@dcloudio/uni-app";
import { useStore } from "@/store";
const $store = useStore();
const person_list = ref([]);

let popup = ref(null);
let unitList = ref([]); // 单位列表
const getPersonList = async () => {
	uni.showLoading()
  const response = await $api("GetPersonList");
  uni.hideLoading()
  $response(response, () => {
    person_list.value = response.data.list;
  });
};

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

const choosePersonClick = async (info) => {
  // 查询团检ID
  const response = await $api("GetGroupUnit", {
    hospital_id: $store.save.hospital,
    id_number: info.id_number,
    phone: info.phone,
  });
  $response(response, () => {
    unitList.value = response.data.unit;
    if (response.data.unit.length > 1) {
      popup.value.open("bottom");
    }
    if (response.data.unit.length == 1) {
      getGroupCombo(response.data.unit[0]);
    }
  });
};

const getGroupCombo = async (info) => {
	uni.showLoading()
  // 获取团检套餐
  const response = await $api("GetGroupCombo", {
    hospital_id: $store.save.hospital,
    group_id: info.group_id,
  });
  uni.hideLoading()
  $response(response, () => {
    console.log(response);
    if (response.data.unit.length) {
      let data = response.data.unit[0];
      data.sex = info.sex;
      data.phone = info.phone;
      data.phone = info.married;
			$store.setGroupInfo(data);
      if (!data.items.length && data.tongshou_xiane > 0) {
        // 跳转到选择类似上 
        uni.navigateTo({
          url: "/pages/main/optionalProject/selectType"
        });
      } else {
        // 跳转到团检自选
        uni.navigateTo({
          url:
            "/pages/main/optionalProject/optionalDetails?groupId=" +
            info.group_id
        });
      }
    }
  });
};

onShow(() => {
  if (!!config_ref.value) {
    getPersonList();
  }
});
</script>
<template>
  <view>
    <view v-if="!!$store.config">
      <view :ref="configRef"></view>
    </view>
    <view class="person_list_wrapper">
      <view
        class="person_item_wrapper"
        v-for="(i, k) in person_list"
        :key="k"
        @click="choosePersonClick(i)"
      >
        <view class="person_avatar_wrapper">
          <image v-if="i.sex === 1" src="@/static/assets/userm.png"></image>
          <image v-else src="@/static/assets/userw.png"></image>
        </view>
        <view class="person_info_wrapper">
          <view class="person_text_wrapper">
            <view class="person_name_wrapper">{{ i.name }}</view>
            <view class="person_sex_wrapper"
              >{{ i.sex === 1 ? "男" : "女" }}性</view
            >
          </view>
          <view class="person_idnumber_wrapper">{{ i.id_number }}</view>
        </view>
        <view v-if="!!i.relation" class="person_type_wrapper">{{
          i.relation
        }}</view>
        <view class="person_type_wrapper">本人</view>
        <!-- <view v-if="i.is_default === 2" @click="choosePersonClick(i)" class="person_choose_wrapper">切换</view> -->
      </view>
    </view>
    <uni-popup ref="popup">
      <view
        class="center relative pt-47rpx pb-32rpx text-36rpx bg-#fff rounded-t-15rpx box-border"
      >
        <text class="line-height-[1] text-32rpx">请选择单位</text>
        <uni-icons
          @click="popup.close()"
          type="closeempty"
          color="#A6A6A6"
          size="26"
          class="absolute right-40rpx top-30rpx"
        ></uni-icons>
      </view>
      <view class="bg-#fff pb-40rpx">
        <view
          class="pt-20rpx pb-20rpx texdt-28rpx text-center"
          v-for="(i, k) in unitList"
          :key="k"
          @click="getGroupCombo(i)"
          >{{ i.group_name }}</view
        >
      </view>
    </uni-popup>
  </view>
</template>
<style scoped>
.person_list_wrapper {
  width: 750rpx;
  margin: 0 auto;
  overflow-y: auto;
}

.person_item_wrapper {
  width: 690rpx;
  height: 166rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.04);
  border-radius: 15rpx;
  position: relative;
  display: flex;
  align-items: center;
  margin: 20rpx auto 0;
}

.person_avatar_wrapper {
  width: 105rpx;
  height: 105rpx;
  margin-left: 47rpx;
}

.person_avatar_wrapper image {
  width: 105rpx;
  height: 105rpx;
  display: inline-block;
  object-fit: contain;
}

.person_info_wrapper {
  margin-left: 38rpx;
}

.person_text_wrapper {
  display: flex;
  align-items: end;
}

.person_name_wrapper {
  font-weight: 500;
  font-size: 32rpx;
  color: #0e0e0e;
  line-height: 1;
}

.person_sex_wrapper {
  font-size: 24rpx;
  color: #9e9e9e;
  line-height: 1;
  margin-left: 10rpx;
}

.person_idnumber_wrapper {
  font-size: 26rpx;
  color: #0e0e0e;
  line-height: 1;
  margin-top: 20rpx;
}

.person_type_wrapper {
  position: absolute;
  width: 100rpx;
  height: 46rpx;
  background: #c0c0c0;
  border-radius: 0rpx 15rpx 0rpx 15rpx;
  right: 0;
  top: 0;
  font-weight: 500;
  font-size: 24rpx;
  color: #ffffff;
  line-height: 46rpx;
  text-align: center;
}

.person_choose_wrapper {
  position: absolute;
  right: 10rpx;
  bottom: 10rpx;
  width: 130rpx;
  height: 50rpx;
  background: #239ea3;
  border-radius: 25rpx;
  font-weight: 400;
  font-size: 22rpx;
  color: #ffffff;
  line-height: 50rpx;
  text-align: center;
}
</style>