com.kasite.client.uniapp.patient/pagesPersonal/st1/business/patientManagement/relativesList/relativesList.vue

<template>
  <view class="container">
    <view class="content">
      <view v-if="list.length == 0" class="noData">
        <noData :value="noDataValue"></noData>
      </view>
      <view class="memberList_box" v-else>
        <view class="member_item" v-for="(item, index) in list" :key="index">
          <view class="memberItem_top">
            <image class="icon_userTop" :src="iconUrl.icon_userTop"></image>
            <view class="memberItem_topBox">
              <view class="displayFlexBetween">
                <view class="topBox_text_left">
                  <view>渠道：{{item.clientId|| '-'}}</view>
                  <view>手机号：{{item.account || '-'}}</view>
                  <view>绑定日期：{{item.createTime || '-'}}</view>
                  <view>授权方式：{{item.bindModeCodeName || '-'}}</view>
                </view>
                <view class="topBox_title_right displayFlexRow" v-if="item.relationCode != 1">
                  <view class="title_right_delect" @click.stop="delRelatives(item)">解绑</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { common } from '@/utils';
import icon from '@/utils/icon';
import { queryAuthUserMemberList } from '@/pages/st1/service/base';
import { delMemberInfo_V3 } from '@/pagesPersonal/service/patientManagement';
import noData from '@/pages/st1/components/noData/noData.vue';

const app = getApp();
const iconUrl = ref(icon);
const list = ref<any[]>([]);
const noDataValue = ref('暂无授权亲友信息');

onLoad(() => {
  queryAuthUserMemberListFn();
});

const queryAuthUserMemberListFn = async () => {
  let { resData } = await queryAuthUserMemberList({});
  if (resData.RespCode == 10000) {
    list.value = resData.Data || [];
  }
};

const delRelatives = (item: any) => {
  common.showModal(`尊敬的用户，是否确定解除【${item.account}】的 绑定？该操作无法回退！`, async () => {
    const { resData } = await delMemberInfo_V3({
      accountSn: item.accountSn,
      memberId: item.memberId
    });
    if (resData.RespCode == 10000) {
      queryAuthUserMemberListFn();
    }
  });
};
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background-color: #f5f5f5;
}
.content {
    padding: 20upx;
}
.member_item {
    background: #fff;
    border-radius: 10upx;
    padding: 30upx;
    margin-bottom: 20upx;
}
.memberItem_top {
    display: flex;
    align-items: flex-start;
}
.icon_userTop {
    width: 90upx;
    height: 90upx;
    margin-right: 30upx;
    border-radius: 50%;
}
.memberItem_topBox {
    flex: 1;
}
.displayFlexBetween {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.topBox_text_left {
    display: flex;
    flex-direction: column;
    font-size: 28upx;
    color: #333;
    line-height: 1.8;
}
.topBox_title_right {
    display: flex;
    align-items: center;
}
.title_right_delect {
    font-size: 24upx;
    color: #F04C4C;
    border: 1px solid #F04C4C;
    padding: 6upx 20upx;
    border-radius: 30upx;
}
.noData {
    margin-top: 100upx;
}
.displayFlexRow {
    display: flex;
    flex-direction: row;
}
</style>