com.kasite.client.uniapp.patient/pagesPersonal/st1/business/creditManagement/creditReport/creditReport.vue

<template>
	<view class="container">
	  <view class="content">
	    <image :src="iconUrl.page_topBg" class="topBg_img"></image>
	    <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="checkCreditReport displayFlexBetween">
	        <view class="time_box displayFlexRow">
	          <picker class="displayFlexRow" mode="date" :value="query.startDate" :start="pickerStart" :end="query.endDate" @change="changeStartDate">
	            <view class="picker ">
	              {{query.startDate}}
	            </view>
	          </picker>
	          <text class="textTag">至</text>
	          <picker class="displayFlexRow" mode="date" :value="query.endDate" :start="query.startDate" :end="pickerEnd" @change="changeEndDate">
	            <view class="picker ">
	              {{query.endDate}}
	            </view>
	          </picker>
	        </view>
	        <picker class="sele_box displayFlexBetween" @change="bindPickerChange" :value="index" :range="array">
	          <view class="picker">{{array[index]}}</view>
	          <image class="public_right_img public_right_img30" :src="iconUrl.icon_right"></image>
	        </picker>
	      </view> -->
	      <view class="title border_bottom">服务使用记录</view>
	      <view class="displayFlexRow">
	        <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>
	    <view class="floot" v-if="appoinmentList.length > 0">
	      <view class="floot_title">预约记录</view>
	      <view class="floot_listBox displayFlexBetween" v-for="(item, index) in appoinmentList" :key="index">
	        <view class="yyInfo">
	          <view class="listBox_name">{{item.HospitalName}}-{{item.DeptName}}</view>
	          <view class="listBox_time">预约时间：{{item.RegDate+" "+item.CommendTime}}</view>
	        </view>
	        <view class="yyTip">爽约</view>
	      </view>
	    </view>
	    <view class="floot" v-if="overdueList.length > 0">
	      <view class="floot_title">欠费结算记录</view>
	      <view class="floot_listBox " v-for="(item, index) in overdueList" :key="index">
	        <view class="costInfo">
	          <view class="listBox_name">福州大学省立医院</view>
	          <view class="displayFlexBetween">
	            <view class="listBox_time">2024.09.01 08:00</view>
	            <view class="listBox_time colorRed">-￥104.21</view>
	          </view>
	          <view class="costInfo_tip">提醒：在本院有一笔未及时缴清费用，将会影响您先诊疗后付费</view>
	          <view class=" displayFlexLeft">
	            <view class="costInfo_btn border boderColorCustom colorCustom">去结算</view>
	            <view class="costInfo_btn backgroundCustom">更新信用</view>
	          </view>
	        </view>
	      </view>
	    </view> 
	  </view>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { useOnLoad } from '@/hook';
import { queryOverdueData, queryBreakAppoinmentList } from '@/pagesPersonal/service/patientManagement';
import {common} from "@/utils";
import icon from "@/utils/icon";

const app = getApp();

// 定义响应式数据
const iconUrl = ref(icon);
const myInfo = ref<any>({});
const overdueList = ref<any[]>([]);
const appoinmentList = ref([]);
const query = reactive({
  startDate: common.aFewDaysago(15),
  endDate: common.afterFewDays(1)
});
const pickerStart = ref(common.aFewDaysago(3650));
const pickerEnd = ref(common.afterFewDays(3650));
const array = ref(['全部']);
const index = ref(0);

useOnLoad((options) => {
  if (options && options.myInfo) {
    try {
      let info = JSON.parse(decodeURIComponent(options.myInfo));
      myInfo.value = info;
      getCredit(info);
    } catch (e) {
      console.error('解析myInfo失败', e);
    }
  }
});

const getCredit = async (info: any) => {
  // 获取欠费逾期记录
  let { resData: overdue } = await queryOverdueData({
    MemberId: info.memberId,
  });

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

  const overdueData = overdue || [];
  const appointmentData = appointment || [];

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

// Picker change events if needed in future (currently commented out in template but logic exists)
// const changeStartDate = (e) => { query.startDate = e.detail.value }
// const changeEndDate = (e) => { query.endDate = e.detail.value }
// const bindPickerChange = (e) => { index.value = e.detail.value }

</script>

<style lang="scss" scoped>
	/* pagesPersonal/st1/business/creditManagement/creditReport/creditReport.wxss */
	.topBg_img {
	  width: 100%;
	  height: 750upx;
	  position: fixed;
	  top: 0;
	  left: 0;
	}
	.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,.floot{
	  background: #fff;
	  border-radius: 20upx;
	  position: relative;
	  width: 698upx;
	  margin: 30upx auto 0;
	  padding: 30upx;
	}
	.youCredit .time_box{
	  border: 1upx solid #898999;
	  /* padding: 19upx 24upx; */
	  border-radius: 6upx;
	
	  width: 449upx;
	  height: 61upx;
	}
	.youCredit .time_box .textTag {
	  margin: 0 10upx;
	}
	.youCredit .sele_box{
	  border: 1upx solid #898999;
	  border-radius: 6upx;
	  width: 173upx;
	  height: 61upx;
	  position: relative;
	  padding-left: 20upx;
	  box-sizing: border-box;
	}
	.youCredit .picker {
	  font-size: 32upx;
	  color: #61616D;
	}
	.youCredit .title{
	  font-weight: bold;
	  font-size: 32upx;
	  color: #212326;
	  line-height: initial;
	  padding-bottom: 30upx;
	} 
	.youCredit .creditReport{
	  width: 300upx;
	  margin-top: 30upx;
	}
	.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-bottom: 30upx;
	}
	
	.floot .floot_title{
	  font-size: 32upx;
	  color: #212326;
	  font-weight: bold;
	}
	.floot .floot_listBox{
	  background: #ffffff;
	  box-shadow: 0upx 0upx 30upx 0upx #d8d8d8;
	  border-radius: 20upx;
	  padding: 0 24upx 20upx 24upx;
	  margin-top: 32upx;
	}
	.floot .floot_listBox .listBox_name{
	  font-weight: bold;
	  font-size: 30upx;
	  color: #212326;
	  padding: 32upx 0 24upx;
	}
	.floot .floot_listBox .listBox_time{
	  font-weight: 500;
	  font-size: 26upx;
	  color: #898999;
	  padding-bottom: 19upx ;
	
	}
	.yyTip{
	  font-size: 24upx;
	  border-radius: 6upx;
	  padding: 5upx 13upx;
	  color: #FF5D5F;
	  border: 2upx solid #FF5D5F;
	}
	.costInfo_tip{
	  font-size: 22upx;
	  color: #FF5D5F;
	  text-align: justify;
	  line-height: 30upx;
	}
	.costInfo_btn{
	  width: 170upx;
	  height: 66upx;
	  line-height: 66upx;
	  text-align: center;
	  font-size: 30upx;
	  margin-top: 28upx;
	  border-radius: 33upx;
	  margin-right: 16upx;
	}
</style>