com.kasite.client.uniapp.patient/pagesPatient/st1/business/signIn/signInDetails/signInDetails.vue

<template>
  <view class="container">
    <view class="content">
      <view class="item_list">
        <view class="header_time border_bottom">
          <text>{{ queryBean.regDate }} {{ queryBean.week }}</text>
        </view>
        <view class="main_centent border_bottom">
          <view class="record_info">
            <text>预约科室</text>
            <text>{{ queryBean.deptName }}</text>
          </view>
          <view class="record_info">
            <text>预约医生</text>
            <text>{{ queryBean.doctorName || "--" }}</text>
          </view>
          <view class="record_info">
            <text>就诊时间</text>
            <text> {{ queryBean.timeSliceName }} {{ queryBean.commendTime }} {{ queryBean.sqNo }}号</text>
          </view>
          <view class="record_info">
            <text>就诊类型</text>
            <text v-if="queryBean.sourceType == '006'">视频问诊</text>
            <text v-else>普通问诊</text>
          </view>
          <view class="record_info">
            <text>就诊位置</text>
            <text>{{ queryBean.workPlace || "--" }}</text>
          </view>
          <view class="record_info">
            <text>就诊人</text>
            <text>{{ queryBean.name }}</text>
          </view>
          <view class="record_info" v-if="!withoutCard">
            <text>就诊卡号</text>
            <text v-if="queryBean.cardNo">{{ queryBean.cardNo }}</text>
            <text v-else>暂无</text>
          </view>
        </view>
      </view>
      <view class="cardList_box">
        <view class="cardList_topText colorCustom_F08">
          就诊人"{{ currentUser.memberName }}"名下已关联
          <text>{{ cardList.length }}张就诊卡</text>
        </view>
        <view class="card_item displayFlexRow" v-for="(item, index) in cardList" :key="index" @click="chooseCard(item)">
          <view class="member_item_info displayFlexCol">
            <view class="info_memberMsg_name ">{{ item.memberName }}</view>
            <view class="info_memberCard">
              就诊卡：{{ item.cardNo }}
            </view>
          </view>
          <view class="set_default displayFlexRow">
            <image :src="changCardInfo.cardNo == item.cardNo ? iconUrl.circle_active : iconUrl.circle" />
          </view>
        </view>
      </view>

    </view>
    <view class="public_btn_con">
      <view class="public_btn backgroundCustom" @click="dialogShowChange">确定</view>
    </view>

    <view class="public_dialog" v-if="dialogIsShow">
      <view class="dialog_inner">
        <image class="icon_commonDel" @click="dialogShowChange" :src="iconUrl.icon_commonDel"></image>
        <view class="dialog_tit">签到校验</view>
        <view class="dialog_subtit">为了确保您顺利就诊，系统需要您再次核对签到信息，请输入您当前携带的 <text class="colorCustom">实体就诊卡</text> 的卡号后 3
          位数字</view>
        <view class="number_list flexCenter">
          <view class="num_item displayFlexBetween">
            <input class="number_input" maxlength="1" type='number' :focus="focusIndex == 0"
              @input="(e) => setVal(e, 0)"></input>
            <input class="number_input" maxlength="1" type='number' :focus="focusIndex == 1"
              @input="(e) => setVal(e, 1)"></input>
            <input class="number_input" maxlength="1" type='number' :focus="focusIndex == 2"
              @input="(e) => setVal(e, 2)"></input>
          </view>
        </view>
        <view @click="toDetail" class="public_btn backgroundCustom">确定</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { common } from '@/utils';
import icon from '@/utils/icon';
import { regSignForHis } from '@/pagesPatient/service/yygh';
import { queryMemberCardList_V3 } from '@/pagesPersonal/service/patientManagement';

const app = getApp();
const iconUrl = ref(icon);
const dialogIsShow = ref(false); //签到校验显隐
const queryBean = ref<any>({});  // 签到预约记录信息
const changCardInfo = ref<any>({}); //选中的卡信息
const checkCode = ref<string[]>([]);  //校验的后三位卡号
const focusIndex = ref(0);     //弹窗输入框获取焦点
const pageConfig = ref<any>({});
const currentUser = ref<any>({});
const withoutCard = ref(false);
const cardList = ref<any[]>([]);

onLoad((options: any) => {
  let config = common.deepCopy(app.globalData.config.pageConfiguration.signInList_config);
  pageConfig.value = config;
  
  if (options.queryBean) {
    try {
      queryBean.value = JSON.parse(decodeURIComponent(options.queryBean));
    } catch (e) {
      console.error(e);
      queryBean.value = {};
    }
  }

  currentUser.value = app.globalData.currentUser;
  withoutCard.value = app.globalData.withoutCard;
  main();
});

const main = async () => {
  let list: any[] = [];
  let resp = await queryMemberCardList_V3({
    memberId: currentUser.value.memberId
  });
  
  if (common.isNotEmpty(resp)) {
    list = resp.filter((item: any) => item.cardType == 1);
  }
  console.log(list);
  // 判断卡号列表是否为空 ，为空提示患者到窗口绑卡
  if (list.length == 0) {
    common.showModal('暂无就诊卡，请先到窗口办卡', () => {
      common.navigateBack(1);
    });
    return;
  }
  cardList.value = list;
  changCardInfo.value = list[0];
};

/**
 * 就诊卡点击
 */
const chooseCard = (item: any) => {
  changCardInfo.value = item;
};

/**
 * 签到校验赋值
 */
const setVal = (e: any, index: number) => {
  let value = e.detail.value;
  
  // Update array directly
  checkCode.value[index] = value;
  
  if (common.isNotEmpty(value)) {
    focusIndex.value = index + 1;
  }
};

/**
 * 签到校验显隐状态更改
 */
const dialogShowChange = () => {
  dialogIsShow.value = !dialogIsShow.value;
  checkCode.value = [];
  focusIndex.value = 0; // Reset focus when opening/closing
};

/**
 * 点击确认签到
 */
const toDetail = async () => {
  let code = checkCode.value;
  let cardInfo = changCardInfo.value;
  
  if (code.join('') != cardInfo.cardNo.substring(cardInfo.cardNo.length - 3)) {
    common.showModal(`请输入正确的就诊卡卡号后3位`);
    return;
  }
  
  let user = currentUser.value;
  let item = queryBean.value;
  
  let querData = {
    DeptCode: item.deptCode,
    DoctorName: item.doctorName,
    CardNo: cardInfo.cardNo,
    CardType: cardInfo.cardType,
    MemberId: cardInfo.memberId,
    OrderId: "",
    ChannelId: item.channelId,
    DeptName: item.deptName,
    DoctorCode: item.doctorCode,
    HisOrderId: item.hisOrderId,
    IdCardId: user.idCardNo,
    QueueNo: item.sqNo,
    RegisterDate: item.regDate,
    SourceType: "",
    UserName: item.name,
    TimeSlice: item.timeSlice,
    //后端表示原因,在此用于区分是否走星网
    Reason: pageConfig.value.signReason,
    Store: {
      baseMemberEncryptionStore: user.baseMemberEncryptionStore,
      cardEncryptionStore: cardInfo.encryptionStore
    }
  };
  
  let resp = await regSignForHis(querData);
  if (!common.isEmpty(resp)) {
    let queryBeanStr = JSON.stringify({
      ...resp[0]
    });
    common.goToUrl(`/pagesPatient/st1/business/pay/payState/payState?pageType=signIn&queryBean=${queryBeanStr}`);
  }
};
</script>

<style scoped>
.content {
  padding-bottom: 150upx;
}

.item_list {
  background: white;
  margin: 30upx;
  box-sizing: border-box;
  border-radius: 24upx;
}

.header_time {
  height: 100upx;
  padding: 36upx;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.header_time text:nth-child(1) {
  line-height: 32upx;
  font-size: 32upx;
  color: #333;
}

.header_time text:nth-child(2) {
  display: inline-block;
  width: 168upx;
  line-height: 56upx;
  text-align: center;
  font-size: 28upx;
  position: relative;
}

.main_centent {
  padding: 36upx;
  box-sizing: border-box;
}

.record_info {
  margin-bottom: 36upx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.record_info:last-child {
  margin-bottom: 0 !important;
}

.record_info text:nth-child(1) {
  width: 26%;
  display: inline-block;
  font-size: 30upx;
  color: #666;
}

.record_info text:nth-child(2) {
  width: 74%;
  display: inline-block;
  font-size: 30upx;
  color: #333;
}

.cardList_box {
  background: white;
  padding: 30upx;
  box-sizing: border-box;
  border-radius: 24upx;
  margin: 30upx;
}

.cardList_topText {
  font-size: 32upx;
  font-family: PingFang SC;
  font-weight: bold;
  margin: 6upx 3upx 0;
  line-height: 48upx;
  margin-bottom: 35upx;
}

.card_item {
  padding: 35upx 30upx;
  box-sizing: border-box;
  justify-content: space-between;
  box-shadow: 0px 0px 58px 0px rgba(0, 0, 0, 0.05);
  margin-bottom: 24upx;
  border-radius: 20upx;
}

.card_item .member_item_info {
  align-items: flex-start;
}

.card_item .member_item_info .info_memberMsg_name {
  font-size: 32upx;
  font-family: PingFang SC;
  font-weight: 800;
  color: #222326;
  margin-bottom: 21upx;
}

.card_item .member_item_info .info_memberCard {
  font-size: 28upx;
  font-family: PingFang SC;
  color: #62626D;
}

.set_default image {
  width: 40upx;
  height: 40upx;
  margin-left: 16upx;
}

.dialog_inner {
  width: 600upx;
  background: rgba(255, 255, 255, 1);
  border-radius: 24upx;
  position: relative;
  z-index: 3;
  padding: 0 30upx 40upx;
}

.icon_commonDel {
  width: 25upx;
  height: 25upx;
  position: absolute;
  top: 30upx;
  right: 30upx;
}

.dialog_tit {
  padding: 40upx 35upx;
  text-align: center;
  font-size: 36upx;
  font-family: PingFang SC;
  color: #333333;
  line-height: 38upx;
}

.dialog_subtit {
  font-size: 30upx;
  font-family: PingFang SC;
  color: #666666;
  line-height: 48upx;
}

.num_item {
  width: 100%;
  margin: 40upx 0;
}

.number_input {
  border: 1px solid #CCCCCC;
  width: 156upx;
  height: 110upx;
  line-height: 110upx;
  border-radius: 10upx;
  font-size: 60upx;
  text-align: center;
  color: #333333;
}
</style>