com.kasite.client.uniapp.patient/pages/st1/business/tabbar/personalCenter/personalCenter.vue

<template>
	<view class="container">
	  <view class="content">
	    <image :src="iconUrl.page_topBg" class="topBg_img"></image>
	    <view class="top_box">
	      <view class="topBox_title" :style="{marginTop: statusBarHeight + 'px', height: '44px', lineHeight: '44px'}">我的</view>
	    </view>
	    <view class="userBox" @click="currentUser.memberId ? goMemberList($event) : perfectInfo($event)">
	      <image class="personalCenter_topBg" :src="iconUrl.personalCenter_memberbg"></image>
	      <view class="user_wxinfo_box displayFlexBetween">
	        <view class="displayFlexLeft">
	          <view class="">
	            <image class="personalImg" :src="iconUrl.personalCenter_memberT"/>
	            <image class="credit_Img" v-if="currentUser.memberName" :src="currentUser.creditRemark !='1' ? iconUrl.credit_iconStateRisk:iconUrl.credit_iconStateExcellent"/>
	          </view>
	          <view v-if="currentUser.memberId">
	            <view class="info_memberMsg">
	              <text>{{currentUser.memberName}}</text>
	              <text class="tag" v-if="currentUser.memberType == 1">{{currentUser.relationName}}</text>
	              <text class="tag">默认就诊人</text>
	            </view>
	            <view class="memberInfo_cardInfo">
	              {{currentUser.cardType == 14 ? "住院号" : "就诊卡号"}}：{{currentUser.cardNo ? currentUser.cardNo : "无" }}
	            </view>
	          </view>
	          <block v-else>
	            <text class="addMemberText">添加就诊人</text>
	          </block>
	        </view>
	        <view class="electronMedical displayFlexCol" @click.stop="clickElectronMedical" v-if="currentUser.memberType == 1">
	          <image class="electronMedical_img" :src="iconUrl.dzybpz"></image>
	          <view class="electronMedical_txt">刷医保码</view>
	        </view>
	        <view class="choice_patient_btn">
	          就诊卡管理
	        </view>
	      </view>
	    </view>
	    <view class="operationModule" v-if="currentUser.memberId">
	      <view class="moduleBox displayFlexBetween">
	        <view class="displayFlexLeft">
	          <image class="moduleImag" :src="iconUrl.personalCenter_ref"></image>
	          <view class="moduleInfo">
	            <view class="moduleInfo_txt">预缴退费</view>
	            <view>预缴金充值后，是否14天后自动进行退费</view>
	          </view>
	        </view>
	        <switch color="var(--dominantColor)" :checked="currentUser.autoRemark == 1" @change="switchChangeFn"/>
	      </view>
	    </view>
	    <view class="menuBox">
	      <template v-for="(item, index) in menuObj.Children" :key="index">
	        <view class="menuBox_list" v-if="item.IsShow=='1'">
	          <view class="menuBox_listTitle">{{item.MenuName}}</view>
	          <view class="displayFlexLeft">
	            <template v-for="(subItem, subIndex) in item.Children" :key="subIndex">
	              <view class="list_item displayFlexCol" v-if="subItem.IsShow=='1'" @click="menuClickFn(subItem, item)">
	                <image class="list_item_img" :src="subItem.Icon"></image>
	                <text class="list_item_text">{{subItem.MenuName}}</text>
	              </view>
	            </template>
	          </view>
	        </view>
	      </template>
	    </view>
	  </view>
	</view>
</template>

<script lang="ts" setup>
import { getCurrentInstance, nextTick, ref } from 'vue';
import { useIsToAuthPage, usePreserMember, queryMemberCardList_V3 } from '../../../../../hook';
import { onShow } from '@dcloudio/uni-app';
import { common, menuClick } from '@/utils';
import icon from '@/utils/icon';
import store from '@/store';
import { queryMemberHeaderInfo, saveAutoRefundMark } from '@/pages/st1/service';


const { proxy } = getCurrentInstance() as any;
const app = getApp();

const iconUrl = ref(icon)
const memberNum = ref(0)
const relativesNum = ref(0)
const menuObj = ref<any>({}) //菜单选项
const currentUser = ref<any>({})
const statusBarHeight = ref<any>("")

onShow(async () => {
    /**当前的业务类型，006表示互联网医院   空表示普通的挂号业务 */
    app.globalData.sourceType = ""
    /**点击menu时进入添加就诊人 会设置toUrl 如果后退  需清空  否则从个人中心进入添加就诊人后  会进入toUrl页面 */
    app.globalData.toUrl = ""
    if (useIsToAuthPage()) {
      return
    }
    main()
})

const main = async () => {
  	statusBarHeight.value = JSON.parse(app.globalData.smallPro_systemInfo).statusBarHeight || 20
	menuObj.value = (uni.getStorageSync('menuList') || []).filter((item: any) => item.MenuName == 'PersonalCenter')[0] || {}
	getMember()
}

/**
 * 获取就诊人
 */
const getMember = async () => {
    let currentUsertemp = null
    let memberList = store.state.memberList || []
    if (!memberList.length) {
      await usePreserMember()
      memberList = store.state.memberList || []
    }
    if (common.isNotEmpty(memberList)) {
      let memberLists = memberList.filter((item: any) => item.userMemberList[0].isDefaultMember == 1)
      // 判断过滤默认操作人 : 没有默认操作人查询人列表第一条
      currentUsertemp = common.isNotEmpty(memberLists) ? memberLists[0] : memberList[0]
      if (common.isNotEmpty(currentUsertemp)) {
        let cardInfo = typeof currentUsertemp.memberOtherInfo == 'object' ? currentUsertemp.memberOtherInfo : JSON.parse(currentUsertemp.memberOtherInfo)
        if (common.isEmpty(cardInfo.defaultCard)) {
          let cardResp = await queryMemberCardList_V3(currentUsertemp.memberId)
          cardInfo = cardResp.filter((item: any) => item.cardType == 1)[0]
        }else{
          cardInfo = cardInfo.defaultCard
        }
        // 判断是否存在默认就诊卡
        currentUsertemp = {
          ...currentUsertemp,
          cardNo: cardInfo?.cardNo,
          encryptionStore: cardInfo?.cardEncryptionStore || cardInfo?.encryptionStore || '',
          cardType: '1' //返回的默认就诊卡都为就诊卡类型
        }
        app.globalData.currentUser = currentUsertemp
        getQueryMemberHeaderInfo(currentUsertemp)
      }
    }

	currentUser.value = currentUsertemp || {}
	console.log("currentUser.value======",currentUser.value)
}

/**
 * 点击就诊人列表
 */
const goMemberList = (e: any) => {
    common.goToUrl(`/pagesPersonal/st1/business/patientManagement/memberList/memberList?pageType=memberList`)
}

// 打开医保电子凭证 
const clickElectronMedical = () => {
    uni.navigateToMiniProgram({
      appId: "wxb032bc789053daf4",
      path: "pages/esscard/scancode-nhsa/main?channel=AAEQHg2Pe4b-JhLqiIyHf2g0&cityCode=350000",
    })
}

// 菜单点击
// 封装后的菜单点击，适配 data-item 传参
const menuClickFn = (item: any, parent: any) => {
    // 构造类似小程序事件对象的结构，或者直接传参给 menuClick 如果它支持
    // 这里为了兼容 utils/menuClick 的调用方式 (e, proxy)，我们构造一个伪事件对象
    const e = {
        currentTarget: {
            dataset: {
                item: item,
                'item-parent': parent
            }
        }
    };
    menuClick(e, proxy)
}

// 添加就诊人
const perfectInfo = () => {
    common.goToUrl(`/pagesPersonal/st1/business/patientManagement/selecteBindCardMode/selecteBindCardMode`)
}

/** 获取信用分 */
const getQueryMemberHeaderInfo = async (user: any) => {
	let { resp } = await queryMemberHeaderInfo({
		memberId: user.memberId,
		// accountSn:currentUser.accountSn
	})
	let creditList: any = {
		"信用较好":1,
		"信用良好":1,
		"信用一般":1,
		"信用欠佳":2,
		"信用宜昌":2,
	}
	currentUser.value.autoRemark = common.isNotEmpty(resp)?resp[0].autoRemark : ''
	currentUser.value.creditRemark = common.isNotEmpty(resp)?creditList[resp[0].credit] : ''
}

/**
 * 设置是否可退费
 */
const switchChangeFn = async (e: any) => {
    let value = e.detail.value;
    await saveAutoRefundMark({
      memberId: currentUser.value.memberId,
      autoRefundMark : value?1:0
    })
    getQueryMemberHeaderInfo(currentUser.value)
}

</script>

<style lang="scss" scoped>
	.container,
	.content {
	  background-color: #f6f7f8;
	}
	
	.topBg_img {
	  width: 100%;
	  height: 750upx;
	  position: fixed;
	  top: 0;
	  left: 0;
	}
	
	.top_box {
	  position: relative;
	  z-index: 1;
	  padding: 0 30upx;
	}
	
	.topBox_title {
	  width: 100%;
	  font-size: 32upx;
	  font-family: Source Han Sans CN;
	  font-weight: 500;
	  color: #000000;
	  text-align: center;
	}
	
	.userBox {
	  position: relative;
	  margin: 30upx ;
	}
	.userBox .personalCenter_topBg {
	  position: absolute;
	  width: 100%;
	  height: 205upx;
	}
	
	.user_wxinfo_box {
	  background-color: initial;
	  padding: 0 25upx;
	  position: relative;
	  display: flex;
	  height: 205upx;
	}
	
	.user_wxinfo_box .personalImg {
	  width: 109upx;
	  height: 109upx;
	  margin-right: 19upx;
	}
	.user_wxinfo_box .credit_Img {
	  width: 109upx;
	  height: 34upx;
	  margin-top: -17upx;
	}
	.user_wxinfo_box .info_memberMsg {
	  font-size: 36upx;
	  font-family: PingFang SC;
	  font-weight: bold;
	  color: #FFFFFF;
	  margin-bottom: 20upx;
	}
	.user_wxinfo_box .info_memberMsg .tag{
	  font-size: 22upx;
	  background-color: #fff;
	  height: 32upx;
	  line-height: 32upx;
	  padding: 0 6upx;
	  margin-left: 10upx;
	  border-radius: 4upx;
	  color: var(--dominantColor);
	}
	.user_wxinfo_box .addMemberText{
	  font-size: 36upx;
	  color: #fff;
	}
	.user_wxinfo_box .memberInfo_cardInfo{
	  color: #FFFFFF;
	  font-size: 28upx;
	}
	.user_wxinfo_box image.right-arrow {
	  width: 16upx;
	  height: 20upx;
	  margin-left: 14upx;
	}
	
	.user_wxinfo_box .electronMedical {
	  position: absolute;
	  right: 32upx;
	  top: 70upx;
	}
	.user_wxinfo_box .electronMedical_img{
	  width: 104upx;
	  height: 104upx;
	}
	.user_wxinfo_box .electronMedical_txt{
	  margin-top: -10upx;
	  color: #fff;
	  font-size: 20upx;
	}
	.user_wxinfo_box .choice_patient_btn{
	  font-size: 22upx;
	  text-align: center;
	  position: absolute;
	  right: 32upx;
	  top: 32upx;
	  color: var(--dominantColor);
	}
	.operationModule{
	  position: relative;
	  background: #FFFFFF;
	  border-radius: 24upx;
	  margin: 30upx;
	  padding: 0 20upx;
	}
	.operationModule .moduleBox{
	  height: 132upx;
	}
	.operationModule .moduleImag{
	  width: 58upx;
	  height: 58upx;
	  margin-right: 18upx;
	}
	.operationModule .moduleInfo{
	  font-size: 22upx;
	  color: #999999;
	}
	.operationModule .moduleInfo_txt{
	  font-size: 28upx;
	  color: #43434A;
	  margin-bottom: 12upx;
	}
	
	.operationModule .credit .credit_btn{
	  width: 130upx;
	  height: 50upx;
	  position: relative;
	  font-size: 24upx;
	  color: var(--dominantColor) !important;
	}
	.operationModule .credit .credit_btn .bg{
	  background-color: var(--dominantColor);
	  opacity: .2;
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  top: 0upx;
	  left: 0upx;
	  z-index: 0;
	  border-radius: 25upx;
	
	}
	.menuBox{
	  position: relative;
	}
	
	.menuBox_list {
	  background: #FFFFFF;
	  border-radius: 24upx;
	  margin: 30upx;
	  padding: 30upx 0 40upx;
	}
	.menuBox_list .menuBox_listTitle{
	  font-size: 32upx;
	  font-family: PingFang SC;
	  font-weight: bold;
	  color: #222326;
	  padding-left: 37upx;
	}
	.menuBox_list .list_item {
	  width: 25%;
	  margin-top: 47upx;
	}
	
	.menuBox_list .list_item .list_item_img {
	  width: 56upx;
	  height: 56upx;
	  margin-bottom: 16upx;
	}
	
	.menuBox_list .list_item .list_item_text {
	  font-size: 28upx;
	  font-family: PingFang SC;
	  color: #222326;
	}
</style>