com.kasite.client.uniapp.patient/pagesPersonal/st1/business/authorizeMangement/authorizeIndex/authorizeIndex.vue

<template>
	<view class="container">
	  <view class="content">
	    <view class="public_tip">
	      <view class="public_tip_box displayFlexRow">
	        <image class="tips_icon" :src="iconUrl.spot_left"  />
	        <text class="colorCustom">温馨提示</text>
	        <image class="tips_icon" :src="iconUrl.spot_right"  />
	      </view>
	      <view class="public_tip_text">1.普通授权服务：系统默认只对个别基础服务进行授权操作。 2、人脸核身出示，接受查验，凭绿码方可进入院区。针对老年人等不使用、</view>
	      <view class="public_tip_text">2.高级授权服务：开启高级授权服务，使用者将可 使用您的信息进行就诊业务操作，以及查阅您的全 部隐私档案数据，开启高级授权，需</view>
	      <view class="public_tip_text">3.解除绑定：将把您的档案信息及授权服务，从对方亲情成员列表中移除。</view>
	    </view>
	    <view class="textTip">
	      您当前已授权{{authorizeList.length}}个亲情成员业务操作，业务授权开启后，亲情成员可为您处理门诊挂号、充值缴费、检查预约、报告查询等
	    </view>
	    <view class="authoList">
	      <view class="authoBox" v-for="(item, index) in authorizeList" :key="index">
	        <view class="authoBox_info">
	          <view class="authoBox_infoName">姓名：{{item.member.memberName}}</view>
	          <view class="authoBox_infoTxt">手机号：{{item.member.mobile}}</view>
	          <view class="authoBox_infoTxt">身份证：{{item.member.idCardNo}}</view>
	          <!-- 占位 -->
	          <view class="authoBox_infoBlank"></view>
	          <view class="authoBox_infoTxt"> 绑定时间：{{item.createTime}}</view>
	          <view class="authoBox_infoTxt">授权方式：{{item.bindModeCodeName}}</view>
	          <view class="authoBox_infoTag displayFlexLeft">
	            <view class="tag">
	              <text class="bg backgroundCustom "></text>
	              <text class="text colorCustom">{{item.relationCodeName}}</text>
	            </view>
	          </view>
	        </view>
	        <view class="authoBox_operate displayFlexBetween">
	          <view class="colorCustom_F08" v-if="item.memberAccountAuth.seniorOpen == 1">已开启高级授权</view>
	          <view v-if="item.memberAccountAuth.seniorOpen == 0">已授权<text class="colorCustom_F08">{{getAuthNum(item.memberAccountAuth)}}</text>项业务服务操作</view>
	          <view class=" displayFlexLeft ">
	            <view class="authoBox_operateBtn border border" @click="unbind(item)">解除绑定</view>
	            <view class="authoBox_operateBtn backgroundCustom ml16" @click="jmpDetails(item)">授权管理</view>
	          </view>
	        </view>
	      </view>
	    </view>
	    <view v-if="authorizeList.length == 0">
	      <noData value="暂无数据"></noData>
	    </view>
	  </view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { queryAccountAuthList as queryAccountAuthListApi, backstageDelUserMember_V3 } from '@/pagesPersonal/service/patientManagement';
import { common } from '@/utils';
import icon from '@/utils/icon';
import noData from '@/pages/st1/components/noData/noData.vue';

const app = getApp();
const iconUrl = ref(icon)
const myInfo = ref<any>({});
const authorizeList = ref<any[]>([]);

onShow(() => {
    myInfo.value = app.globalData.myInfo || {};
    queryAccountAuthList();
});

// 查询我的授权列表
const queryAccountAuthList = async () => {
    let { resData } = await queryAccountAuthListApi({
        openId: uni.getStorageSync('openid'),
        memberId: myInfo.value.memberId,
        store: {
            baseMemberEncryptionStore: myInfo.value.baseMemberEncryptionStore,
        },
        accountSn: myInfo.value.accountSn,
    });
    authorizeList.value = resData || [];
};

// 跳转授权管理
const jmpDetails = (item: any) => {
    common.goToUrl(`/pagesPersonal/st1/business/authorizeMangement/authorizeDetails/authorizeDetails?authorizeInfo=${encodeURIComponent(JSON.stringify(item))}`);
};

// 解除绑定
const unbind = async (item: any) => {
    common.showModal(`解除对【${item.member.memberName}】绑定后，亲友成员将无法再看到绑定的就诊人信息！`, async () => {
        let { resData } = await backstageDelUserMember_V3({
            accountSn: item.memberAccountAuth.accountSn,
            memberId: item.memberAccountAuth.memberId,
        });
        if (resData.RespCode == '10000') {
            common.showModal('解除成功', () => {
                queryAccountAuthList();
            });
        }
    }, { title: "温馨提示", cancelText: '返回' });
};

// 授权业务数量
const getAuthNum = (item: any) => {
    let authNum = 0;
    // 授权业务字段名称
    let authList = ['bookOpen', 'chargeOpen'];
    for (let i = 0; i < authList.length; i++) {
        authNum = item[authList[i]] == 1 ? authNum + 1 : authNum;
    }
    return authNum;
};
</script>

<style lang="scss" scoped>
	.public_tip {
	  border-radius: 24upx;
	  background: white;
	  margin: 30upx;
	}
	
	.public_tip .tips_icon {
	  width: 75upx;
	  height: 23upx;
	}
	
	.public_tip .public_tip_box {
	  margin-bottom: 48upx;
	}
	
	.public_tip .public_tip_box text {
	  font-size: 32upx;
	  font-weight: bold;
	  padding: 0 24upx;
	  box-sizing: border-box;
	  color: #222326;
	}
	
	.public_tip .public_tip_text {
	  font-size: 28upx;
	  color: #62626D;
	  padding-bottom: 28upx;
	  line-height: 44upx;
	}
	
	.public_tip .public_tip_text:last-child {
	  padding-bottom: 0;
	}
	
	.textTip{
	  font-size: 28upx;
	  color: #898999;
	  line-height: 40upx;
	  text-align: justify;
	  font-style: normal;
	  text-transform: none;
	  margin: 30upx;
	}
	.authoBox{
	  border-radius: 24upx;
	  background: white;
	  margin: 30upx;
	  padding: 30upx;
	}
	.authoBox_info{
	  position: relative;
	  background: #F7F7F9;
	  border-radius: 10upx;
	  border-radius: 10upx;
	  padding: 19upx;
	}
	.authoBox_info .authoBox_infoName{
	  font-weight: bold;
	  font-size: 30upx;
	  color: #212326;
	  margin: 20upx 0 30upx;
	}
	.authoBox_info .authoBox_infoTxt{
	  font-size: 28upx;
	  color: #4D4D53;
	  margin-bottom: 19upx;
	}
	.authoBox_infoBlank{
	  height: 40upx;
	}
	.authoBox_info .authoBox_infoTag{
	  position: absolute;
	  right: 30upx;
	  top: 38upx;
	}
	.authoBox_info .authoBox_infoTag .tag{
	  padding: 4upx 8upx;
	  font-size: 22upx;
	  margin-left: 8upx;
	  position: relative;
	}
	.authoBox_info .authoBox_infoTag .tag .bg{
	  opacity: .1;
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
	}
	.authoBox_operate{
	  font-weight: bold;
	  font-size: 28upx;
	  color: #212326;
	  margin: 30upx 0 4upx;
	}
	.authoBox_operateBtn{
	  width: 137upx;
	  height: 60upx;
	  line-height: 60upx;
	  text-align: center;
	  font-size: 26upx;
	  font-weight: initial;
	  border-radius: 30upx;
	  color: var(--dominantColor);
	}
	.ml16{
	  margin-left: 16upx;
	}
</style>