hainan_2024/h5/pages/user/choose/choose.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, $image, $response } from "@/api";
import { onShow } from "@dcloudio/uni-app";
import { useStore } from "@/store";
const $store = useStore();
const person_list = ref([]);
const getPersonList = async () => {
  const response = await $api("GetPersonList");
  $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 getUserInfo = async () => {
  const response = await $api("UserInfo");
  $response(response, () => {
    // $store.user = response.data.info
    $store.setUser(response.data.info);
    $store.setYytjInfo({}); // 切换体检人的时候清空预约信息
    uni.$lu.toast("切换成功");
    uni.navigateBack({
      delta: 1,
    });
  });
};
const choosePersonClick = async (info) => {
  const response = await $api("SetDefaultPerson", {
    person_id: info.id,
  });
  $response(response, () => {
    getUserInfo();
  });
};

onShow(() => {
  if (!!config_ref.value) {
    getPersonList();
  }
});
</script>
<template>
  <DraggableButton />
  <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">
        <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>
  </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>