com.kasite.client.uniapp.patient/pagesPersonal/st1/business/authorizeMangement/authorizeDetails/authorizeDetails.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="authoBox_info">
                <view class="authoBox_infoName">姓名：{{ authorizeInfo.member.memberName }}</view>
                <view class="authoBox_infoTxt">手机号：{{ authorizeInfo.member.mobile }}</view>
                <view class="authoBox_infoTxt">身份证：{{ authorizeInfo.member.idCardNo }}</view>
                <!-- 占位 -->
                <view class="authoBox_infoBlank"></view>
                <view class="authoBox_infoTxt"> 绑定时间：{{ authorizeInfo.createTime }}</view>
                <view class="authoBox_infoTxt">授权方式：{{ authorizeInfo.bindModeCodeName }}</view>
                <view class="authoBox_infoTag displayFlexLeft">
                    <view class="tag">
                        <text class="bg backgroundCustom "></text>
                        <text class="text colorCustom">{{ authorizeInfo.relationCodeName }}</text>
                    </view>
                </view>
            </view>
            <view class="floot" v-if="authorizeInfo.memberAccountAuth.seniorOpen == 0">
                <view class="title">普通授权服务：</view>
                <view class="flootBox">
                    <view class="flootBox_cont displayFlexBetween border_bottom">
                        <view>预约挂号</view>
                        <view class="displayFlexLeft">
                            <switch color="var(--dominantColor)"
                                :checked="authorizeInfo.memberAccountAuth.bookOpen == 1" @change="switchChangeFn($event, 'bookOpen')"
                                />
                            <picker class="dataPicker displayFlexLeft" mode="date" :start="pickerStart"
                                @change="switchChangeFn($event, 'bookTime')"
                                v-if="authorizeInfo.memberAccountAuth.bookOpen == 1">
                                <view class="picker textTag">{{ authorizeInfo.memberAccountAuth.bookTime || '永久授权' }}
                                </view>
                                <image v-if="authorizeInfo.memberAccountAuth.bookTime" class="icon_commonDel"
                                    :src="iconUrl.icon_commonDel" @click.stop="clearData('bookTime')"></image>
                                <image v-if="!authorizeInfo.memberAccountAuth.bookTime" class="public_right_img "
                                    :src="iconUrl.icon_right"></image>
                            </picker>
                        </view>
                    </view>
                    <view class="flootBox_cont displayFlexBetween">
                        <view>充值缴费</view>
                        <view class="displayFlexLeft">
                            <switch color="var(--dominantColor)"
                                :checked="authorizeInfo.memberAccountAuth.chargeOpen == 1"
                                @change="switchChangeFn($event, 'chargeOpen')" />
                            <picker class="dataPicker displayFlexLeft" mode="date" :start="pickerStart"
                                @change="switchChangeFn($event, 'chargeTime')"
                                v-if="authorizeInfo.memberAccountAuth.chargeOpen == 1">
                                <view class="picker textTag">{{ authorizeInfo.memberAccountAuth.chargeTime || '永久授权' }}
                                </view>
                                <image v-if="authorizeInfo.memberAccountAuth.chargeTime" class="icon_commonDel"
                                    :src="iconUrl.icon_commonDel" @click.stop="clearData('chargeTime')">
                                </image>
                                <image v-if="!authorizeInfo.memberAccountAuth.chargeTime" class="public_right_img "
                                    :src="iconUrl.icon_right"></image>
                            </picker>
                        </view>
                    </view>
                </view>
            </view>
            <view class="floot">
                <view class="title">高级授权服务：</view>
                <view class="flootBox">
                    <view class="flootBox_cont displayFlexBetween">
                        <view>开启高级授权</view>
                        <view class="displayFlexLeft">
                            <switch color="var(--dominantColor)"
                                :checked="authorizeInfo.memberAccountAuth.seniorOpen == 1"
                                @change="switchChangeFn($event, 'seniorOpen')" />
                            <picker class="dataPicker displayFlexLeft" mode="date" :start="pickerStart"
                                @change="switchChangeFn($event, 'seniorTime')"
                                v-if="authorizeInfo.memberAccountAuth.seniorOpen == 1">
                                <view class="picker textTag">{{ authorizeInfo.memberAccountAuth.seniorTime || '永久授权' }}
                                </view>
                                <image v-if="authorizeInfo.memberAccountAuth.seniorTime" class="icon_commonDel"
                                    :src="iconUrl.icon_commonDel" @click.stop="clearData('seniorTime')">
                                </image>
                                <image v-if="!authorizeInfo.memberAccountAuth.seniorTime" class="public_right_img "
                                    :src="iconUrl.icon_right"></image>
                            </picker>
                        </view>
                    </view>
                </view>
            </view>
            <view class="floot">
                <view class="title">解除绑定：</view>
                <view class="flootBox">
                    <view class="flootBox_cont displayFlexBetween">
                        <view>解除亲情成员的绑定关系</view>
                        <view class="operateBtn border boderColorCustom" @click="unbind">解除</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useOnLoad } from '@/hook';
import { common } from '@/utils';
import icon from '@/utils/icon';
import { updateAccountAuthList as updateAccountAuthListApi, backstageDelUserMember_V3 } from '@/pagesPersonal/service/patientManagement';

const app = getApp();
const iconUrl = ref(icon)
const authorizeInfo = ref<any>({
    member: {},
    memberAccountAuth: {}
});
const pickerStart = ref(common.getDate());
const myInfo = ref<any>({});

useOnLoad((options) => {
    if (options.authorizeInfo) {
        authorizeInfo.value = JSON.parse(decodeURIComponent(options.authorizeInfo));
    }
    myInfo.value = app.globalData.myInfo || {};
});

// 点击开关与时间选择
const switchChangeFn = (e: any, type: string) => {
    let typeValue = e.detail.value;
    // 如果是 boolean 类型（switch 组件），转换为 0 或 1
    if (typeof typeValue === 'boolean') {
        typeValue = typeValue ? 1 : 0;
    }

    let msgObj: any = {
        bookOpen: `${typeValue ? '开启' : '关闭'}普通授权服务-预约挂号后，【${authorizeInfo.value.member.memberName}】将${typeValue ? '可以' : '无法'}为您进行该业务代理操作，是否确定${typeValue ? '开启' : '关闭'}？`,
        chargeOpen: `${typeValue ? '开启' : '关闭'}普通授权服务-充值缴费后，【${authorizeInfo.value.member.memberName}】将${typeValue ? '可以' : '无法'}为您进行该业务代理操作，是否确定${typeValue ? '开启' : '关闭'}？`,
        seniorOpen: `${typeValue ? '开启' : '关闭'}高级授权后，【${authorizeInfo.value.member.memberName}】将${typeValue ? '获得' : '失去'}所有业务代理操作，是否确定${typeValue ? '开启' : '关闭'}？`,
    };

    if (common.isNotEmpty(msgObj[type])) {
        common.showModal(msgObj[type], () => {
            updateAccountAuthList(type, typeValue);
        }, {
            title: '温馨提示', cancelText: '取消', callBack: () => {
                // 如果取消，需要还原 switch 的状态
                // 这里简单处理，实际上 switch 组件在 value 改变前已经变了，如果需要严格回滚可能需要 nextTick 或者重新赋值
                // 但原代码逻辑是取消后重置数据
                authorizeInfo.value.memberAccountAuth[type] = typeValue ? 0 : 1;
            }
        });
    } else {
        updateAccountAuthList(type, typeValue);
    }
};

// 清空时间
const clearData = (type: string) => {
    updateAccountAuthList(type, '');
};

// 更新授权信息
const updateAccountAuthList = async (type: string, typeValue: any) => {
    let { resData } = await updateAccountAuthListApi({
        accountSn: authorizeInfo.value.memberAccountAuth.accountSn,
        memberId: authorizeInfo.value.memberAccountAuth.memberId,
        [type]: typeValue
    });
    if (resData.RespCode == '10000') {
        common.showModal('修改成功');
        authorizeInfo.value.memberAccountAuth[type] = typeValue;
    } else {
        // 失败回滚？原逻辑：authorizeInfo.memberAccountAuth[type] = authorizeInfo.memberAccountAuth[type]
        // 实际上 Vue 双向绑定下可能不需要手动赋值回去，除非之前为了 UI 响应已经改了
    }
};

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

.authoBox_info {
    position: relative;
    border-radius: 24upx;
    background: white;
    margin: 30upx;
    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;
}

.floot {
    margin: 30upx;
}

.floot .title {
    font-weight: bold;
    font-size: 28upx;
    color: #212326;
    margin-bottom: 30upx;
}

.flootBox {
    background: #fff;
    border-radius: 20upx;
    padding: 0 30upx;
}

.flootBox_cont {
    height: 110upx;
}

.operateBtn {
    width: 137upx;
    height: 60upx;
    line-height: 60upx;
    text-align: center;
    font-size: 26upx;
    font-weight: initial;
    border-radius: 30upx;
    color: var(--dominantColor);
}

.dataPicker {
    height: 45upx;
    line-height: 45upx;
    border-radius: 4upx;
    border: 1upx solid #D5D5D5;
    padding: 0 42upx 0 18upx;
    margin-left: 15upx;
    position: relative;
}

.dataPicker .icon_commonDel {
    width: 20upx;
    height: 20upx;
    position: absolute;
    right: 14upx;
    top: 50%;
    margin-top: -10upx;
    z-index: 10;
}

.dataPicker .public_right_img {
    right: 14upx;
}
</style>