com.kasite.client.uniapp.patient/pagesPersonal/st1/business/creditManagement/creditIndex/creditIndex.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="memeberInfo">
	      <image :src="iconUrl.credit_memberBg" class="credit_memberBg" mode="widthFix"></image>
	      <view class="memeberInfo_box">
	        <view class="memeberInfo_boxData displayFlexBetween">
	          <view class="boxData_left displayFlexLeft">
	            <image class="credit_memberBgT" :src="iconUrl.credit_memberBgT"/>
	            <view class="">
	              <view class="displayFlexLeft">
	                <text class="boxData_leftName">{{myInfo?.memberName}}</text>
	                <text class="boxData_leftTip backgroundCustom">本人</text>
	              </view>
	              <view class="colorCustom">福建省诊疗信用管理平台</view>
	            </view>
	          </view>
	          <view class="boxData_right">
	            <image class="credit_iconResk" :src="myInfo?.isCredit == 2 ? iconUrl.credit_iconResk : iconUrl.credit_iconExcell"></image>
	            <view class="boxData_rightText">
	              <!-- <image class="credit_iconReskText" :src="iconUrl.credit_iconReskText"></image> -->
	              <!-- <text class="">更新信用状态</text> -->
	            </view>
	          </view>
	        </view>
	        <view class="memeberInfo_boxTip">
	          <view class="bg backgroundCustom"></view>
	          <view v-if="myInfo?.isCredit == 2" class="colorRed">提醒：您存在信用风险，请及时处理</view>
	          <view v-if="myInfo?.isCredit == 1" class="colorCustom_F08">诊疗信用良好，可享受先诊疗后付费权益</view>
	        </view>
	      </view>
	    </view>
	    <view class="youCredit">
	      <view class="title">您的信用</view>
	      <view class="displayFlexRow border_bottom">
	        <view class="creditReport displayFlexCol">
	          <view class="creditReport_title">爽约记录</view>
	          <view class="creditReport_num">{{appoinmentList.length}}</view>
	        </view>
	        <view class="creditReport displayFlexCol">
	          <view class="creditReport_title">欠费逾期</view>
	          <view class="creditReport_num">{{(overdueList[0] && overdueList[0].ItemList && overdueList[0].ItemList.length) || 0}}</view>
	        </view>
	      </view>
	      <view class="checkCreditReport displayFlexBetween">
	        <view class="displayFlexLeft">
	          <image class="credit_icon" :src="iconUrl.credit_icon"></image>
	          <view class="checkCreditReport_text">
	            <view class="checkCreditReport_text1">信用记录</view>
	            <view class="checkCreditReport_text2">记录您在历次信用就医过程中信用状态</view>
	          </view>
	        </view>
	        <view class="checkCreditReport_btn backgroundCustom" @click="checkReport">查看</view>
	      </view>
	    </view>
	    <!-- 诊疗付费的权益 -->
	    <view class="rightsBox">
	      <view class="rightsBox_top displayFlexCol">
	        <view class="rightsBox_topTitle">了解先诊疗后付费权益</view>
	        <view class="rightsBox_topList displayFlexBetween">
	          <view class="topList_item displayFlexCol">
	            <image class="topList_itemImg" :src="iconUrl.credit_list"></image>
	            <view class="topList_itemName">先诊疗后付费</view>
	          </view>
	          <view class="topList_item displayFlexCol">
	            <image class="topList_itemImg" :src="iconUrl.credit_list1"></image>
	            <view class="topList_itemName">免交预缴金</view>
	          </view>
	          <view class="topList_item displayFlexCol">
	            <image class="topList_itemImg" :src="iconUrl.credit_list2"></image>
	            <view class="topList_itemName">当天一次结算</view>
	          </view>
	        </view>
	      </view>
	      <view class="rightsBox_floot ">
	        <view class="flootBox">
	          <view class="displayFlexLeft ">
	            <image src=""></image>
	            <view class="flootBox_title">免交预缴金就医</view>
	          </view>
	          <view class="flootBox_txt">享受免充值预缴金直接就医看病服务。院内签到取号时，信用平台将为您做信用就医使用授权，授权成功后，在就诊过程可享“先诊疗，后付费”。</view>
	        </view>
	        <view class="flootBox">
	          <view class="displayFlexLeft ">
	            <image src=""></image>
	            <view class="flootBox_title">取消预存预缴金</view>
	          </view>
	          <view class="flootBox_txt">在诊察环节不再进行诊察费预扣，在诊室就诊完成后，取药前，检查检验前及门诊手术前一次性完成当次所有医疗费用结算。</view>
	        </view>
	        <view class="flootBox border_bottom">
	          <view class="displayFlexLeft ">
	            <image src=""></image>
	            <view class="flootBox_title">建立诊疗失信限制</view>
	          </view>
	          <view class="flootBox_txt colorRed">未及时缴清欠费，将限制预约挂号，并取消享受“先诊疗后付费”的便利。</view>
	        </view>
	      </view>
	      <view class="rightsBox_bottom">
	        <block v-if="myInfo?.acceptCredit != 1">
	          <checkbox :checked="isCheckbox" color="var(--dominantColor)" @click="checkChange">我已阅读并同意</checkbox>
	          <view class="rightsBox_bottomBtn backgroundCustom" @click="clickAcceptCredit" data-accept-credit="1">立即使用</view>
	        </block>
	        
	        <view v-if="myInfo?.acceptCredit == 1" class="rightsBox_bottomBtn border boderColorCustom colorCustom" @click="clickAcceptCredit" data-accept-credit="0">暂不使用</view>
	      </view>
	    </view>
	  </view>
	</view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { usePreserMember } from '@/hook';
import { queryOverdueData, queryBreakAppoinmentList, acceptCredit } from '@/pagesPersonal/service/patientManagement';
import { common } from "@/utils";
import icon from "@/utils/icon.js";

const app = getApp();

// 定义响应式数据
const myInfo = ref<any>({});
const iconUrl = ref(icon);
const appoinmentList = ref([]);
const overdueList = ref<any[]>([]);
const isCheckbox = ref(false);
const statusBarHeight = ref(20);

// 生命周期
onShow(() => {
  main();
});

const main = async () => {
  let info = app.globalData.myInfo || uni.getStorageSync('myInfo') || {};
  statusBarHeight.value = app.globalData.statusBarHeight || 20;
  myInfo.value = info;
  await getCredit(info);
};

const getCredit = async (info: any) => {
  // 获取欠费逾期记录
  let { resData: overdue } = await queryOverdueData({
    MemberId: info.memberId,
  });
  
  // 确保 overdueList 是个数组
  const overdueData = overdue || [];

  // 未获取id 则跳去授权
  if (overdueData.length > 0 && !common.isEmpty(overdueData[0].WxMiniPath)) {
    common.showModal(`前往授权`, () => {
      uni.navigateToMiniProgram({
        appId: overdueData[0].WxMiniAppId,
        path: `${overdueData[0].WxMiniPath}&authSource=WX_MINI&authAppId=wx3cf937079d74124f&authBackUrl=${encodeURIComponent(`/pagesPersonal/st1/business/creditManagement/creditIndex/creditIndex`)}`,
        extraData: {},
        envVersion: 'release',
        success(res) {},
        fail(res) {
          common.navigateBack(1);
        },
      });
    });
    return;
  }

  // 获取爽约记录条数
  let { resData: appointment } = await queryBreakAppoinmentList({
    memberId: info.memberId,
  });
  const appointmentData = appointment || [];

  let creditLevel = 1;
  if (common.isNotEmpty(overdueData) || common.isNotEmpty(appointmentData)) {
    // 判断当前用户有存在欠费 或者爽约记录大于等于2
    creditLevel = ((overdueData[0]?.ItemList && overdueData[0]?.ItemList.length > 0) || appointmentData.length >= 2) ? 2 : 1;
  }
  
  overdueList.value = overdueData;
  appoinmentList.value = appointmentData;
  if (myInfo.value) {
    myInfo.value.isCredit = creditLevel;
  }
};

// 查看信用记录
const checkReport = () => {
  common.goToUrl(`/pagesPersonal/st1/business/creditManagement/creditReport/creditReport?myInfo=${encodeURIComponent(JSON.stringify(myInfo.value))}`);
};

const checkChange = (e: any) => {
  // console.log(e)
  isCheckbox.value = !isCheckbox.value;
};

const clickAcceptCredit = async (e: any) => {
  // 兼容 dataset 获取
  let targetStatus = e.currentTarget?.dataset?.acceptCredit;
  // 如果没有通过 dataset 传递，尝试直接作为参数（虽然模板里是dataset，但为了代码健壮性）
  if (targetStatus === undefined) {
      // 这里的逻辑主要是为了兼容模板写法
  }
  
  // 判断为打开使用且未阅读
  if (targetStatus == 1 && !isCheckbox.value) {
    common.showModal("请先阅读并同意");
    return;
  }
  
  let { resData } = await acceptCredit({
    memberId: myInfo.value.memberId,
    acceptCredit: targetStatus
  });
  
  if (resData && resData.RespCode == '10000') {
    await usePreserMember();
    if (myInfo.value) {
      myInfo.value.acceptCredit = targetStatus;
    }
  }
};
</script>

<style lang="scss" scoped>
	.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;
	}
	
	.memeberInfo{
	  width: 698upx;
	  height: 267upx;
	  position: relative;
	  margin: 30upx auto 0;
	}
	.memeberInfo .credit_memberBg{
	  position: absolute;
	  z-index: 0;
	  top: 0;
	  left: 0;
	}
	.memeberInfo .memeberInfo_box{
	  position: relative;
	  z-index: 1;
	  height: 100%;
	
	}
	.memeberInfo .memeberInfo_boxData{
	  height: 207upx;
	  padding-top: 30upx;
	}
	.memeberInfo .boxData_left .credit_memberBgT{
	  width: 102upx;
	  height: 102upx;
	  margin:0 30upx;
	}
	.memeberInfo .boxData_leftName{
	  font-weight: bold;
	  font-size: 36upx;
	  margin-right: 22upx;
	  margin-bottom: 12upx;
	}
	.memeberInfo .boxData_leftTip{
	  padding: 6upx;
	  font-size: 22upx;
	  margin-bottom: 9upx;
	  border-radius: 4upx;
	}
	.memeberInfo .boxData_right {
	  position: absolute;
	  right: 28upx;
	  top: 7upx;
	}
	.memeberInfo .boxData_right .credit_iconResk{
	  width: 155upx;
	  height: 155upx;
	}
	.memeberInfo .boxData_rightText{
	  position: relative;
	  left: -12upx;
	  z-index: 1;
	  width: 176upx;
	  height: 60upx;
	}
	.memeberInfo .boxData_rightText .credit_iconReskText{
	  position: absolute;
	}
	.memeberInfo .boxData_rightText text{
	  position: absolute;
	  top: 24upx;
	  width: 100%;
	  text-align: center;
	  color: #fff;
	}
	.memeberInfo .memeberInfo_box .memeberInfo_boxTip{
	  height: 60upx;
	  border-radius: 0upx 0 20upx 20upx;
	  font-size: 24upx;
	  padding-left: 32upx;
	  position: relative;
	  overflow: hidden;
	  display: flex;
	  align-items: center;
	}
	.memeberInfo .memeberInfo_box .memeberInfo_boxTip .bg{
	  position: absolute;
	  width: 100%;
	  height: 100%;
	  left: 0;
	  top: 0;
	  opacity: .2;
	}
	
	
	/* 您的信用 */
	.youCredit{
	  background: #fff;
	  border-radius: 20upx;
	  position: relative;
	  width: 698upx;
	  margin: 30upx auto 0;
	  padding: 30upx;
	}
	/* .youCredit  */
	.youCredit .title{
	  font-weight: bold;
	  font-size: 32upx;
	  color: #212326;
	} 
	.youCredit .creditReport{
	  width: 300upx;
	  margin: 30upx 0;
	}
	.youCredit .creditReport_title{
	  font-weight: bold;
	  font-size: 28upx;
	  color: #434349;
	  margin-bottom: 30upx;
	}
	.youCredit .creditReport_num{
	  font-weight: 800;
	  font-size: 38upx;
	  color: #FF5D5F;
	}
	.youCredit .checkCreditReport{
	  margin-top: 30upx;
	}
	.youCredit .credit_icon{
	  width: 65upx;
	  height: 70upx;
	  margin-right: 25upx;
	}
	.youCredit .checkCreditReport_text .checkCreditReport_text1{
	  font-weight: bold;
	  font-size: 28upx;
	  color: #434349;
	  margin-bottom: 12upx;
	}
	.youCredit .checkCreditReport_text .checkCreditReport_text2{
	  font-size: 22upx;
	  color: #999999;
	}
	.youCredit .checkCreditReport_btn{
	  width: 128upx;
	  height: 50upx;
	  line-height: 50upx;
	  border-radius: 25upx;
	  font-size: 24upx;
	  text-align: center;
	}
	
	
	/* 诊疗后付费权益 */
	.rightsBox{
	  background-color: #fff;
	  border-radius: 20upx 20upx 0 0;
	  margin-top: 30upx;
	  padding: 20upx 0 40upx;
	  position: relative;
	}
	.rightsBox_top{
	  background: #FFFFFF;
	  box-shadow: 0upx 0upx 16upx 0upx #DDDDDD;
	  border-radius: 20upx;
	  width: 709upx;
	  height: 245upx;
	  margin: 0 auto;
	}
	.rightsBox_top .rightsBox_topTitle{
	  font-weight: bold;
	  font-size: 32upx;
	  color: #212326;
	}
	.rightsBox_top .rightsBox_topList{
	  width: 100%;
	  padding: 0 30upx;
	  margin-top: 30upx;
	}
	.rightsBox_top .rightsBox_topList .topList_itemImg{
	  width: 90upx;
	  height: 90upx;
	
	}
	.rightsBox_top .rightsBox_topList .topList_itemName{
	  font-size: 28upx;
	  color: #434349;
	  margin-top: 17upx;
	}
	.rightsBox_floot{
	  padding: 30upx 50upx;
	}
	.rightsBox_floot .flootBox_title{
	  font-weight: bold;
	  font-size: 28upx;
	  color: #212326;
	}
	.rightsBox_floot .flootBox_txt{
	  font-size: 26upx;
	  color: #898999;
	  line-height: 36upx;
	  padding: 23upx 0 36upx;
	}
	.rightsBox_bottom{
	  margin:0 30upx ;
	}
	.rightsBox_bottomBtn{
	  height: 80upx;
	  line-height: 80upx;
	  border-radius: 45upx;
	  font-size: 32upx;
	  font-weight: 600;
	  text-align: center;
	  margin: 30upx 0;
	}
</style>