com.kasite.client.uniapp.patient/pagesPatient/st1/business/refund/refundApplicationForm/refundApplicationForm.vue

<template>
  <view class="container">
    <view class="content">
      <view class="content_box cardInfoBoxList">
        <view class="cardInfoBox border_bottom">
          <text class="input_tit">收款户名</text>
          <view class="input_con">
            <input class="moneyStyle" maxlength="20" placeholder-class="colorRed" placeholder="收款户名应与短信通知一致" type='text' @input="setVal" :value="querData.HandlerReName" data-name="querData.HandlerReName"></input>
          </view>
        </view>
        <view class="cardInfoBox border_bottom">
          <text class="input_tit">身份证号</text>
          <view class="input_con">
            <input class="moneyStyle" placeholder="请输入身份证件号码" type='idcard' @input="setVal" :value="querData.IdCardNo" data-name="querData.IdCardNo"></input>
          </view>
        </view>
        <view class="cardInfoBox border_bottom">
          <text class="input_tit">手机号码</text>
          <view class="input_con">
            <input class="moneyStyle" placeholder="请输入手机号码" type='number' @input="setVal" :value="querData.HandlerMobile" data-name="querData.HandlerMobile"></input>
          </view>
        </view>
        <view class="border_bottom">
          <view class="listTip"><image :src="iconUrl.icon_refundTip" class="icon_refundTip" mode="widthFix"></image> 收款户名、身份证、手机号码填写完成后再选择就诊卡</view>
          <view class="cardInfoBox displayFlexBetween">
            <text class="input_tit">选择就诊卡</text>
            <view style="padding-right: 30upx;" @click="getCardList" >
              <view v-if="querData.CardNo">{{querData.CardNo}}</view>
              <view class="colorCustom" v-else>点击选择就诊卡</view>
              
              <image class="public_right_img" :src="iconUrl.icon_right"></image>
            </view>
          </view>
        </view>
        <view class="cardInfoBox border_bottom">
          <text class="input_tit">退款金额</text>
          <view class="input_con">
            <input class="moneyStyle" placeholder-class="colorRed" placeholder="退款金额应与短信通知一致" type='digit' @input="setVal" :value="querData.RefundMoney" data-name="querData.RefundMoney"></input>
          </view>
        </view>
        <view class="cardInfoBox border_bottom">
          <text class="input_tit">银行卡号</text>
          <view class="input_con">
            <input class="moneyStyle" maxlength="20" placeholder="请输入银行卡号" type='number' @input="setVal" :value="querData.HandlerBankCardNo" data-name="querData.HandlerBankCardNo" @blur="getBankCard"></input>
          </view>
        </view>
        <view class="cardInfoBox border_bottom">
          <text class="input_tit">收款银行</text>
          <view class="input_con">
            <input class="moneyStyle" maxlength="20" placeholder="请输入收款银行" @input="setVal" :value="querData.HanderReBankName" data-name="querData.HanderReBankName"></input>
          </view>
        </view>
        <view class="cardInfoBox border_bottom">
          <text class="input_tit">开户银行</text>
          <view class="input_con">
            <input class="moneyStyle" maxlength="20" placeholder="请输入具体开户行名称" type='text' @input="setVal" :value="querData.HandlerBankName" data-name="querData.HandlerBankName"></input>
          </view>
        </view>
        <view class="cardInfoBox">
          <text class="input_tit">验证码</text>
          <view class="input_con">
            <input class="moneyStyle" maxlength="8" placeholder="请输入验证码" type='number' @input="setVal" :value="provingCode" data-name="provingCode"></input>
            <view class="code_con_txt" :class="{'colorCustom': disabledBtn}" @click="getCode" v-if="seconds<=0">获取验证码</view>
            <view class="code_con_txt colorCustom" v-else>{{seconds}}秒后重新获取</view>
          </view>
        </view>
      </view>
      <view class="tip"><text class="colorRed">*</text> 请上传退费材料</view>
  
      <view class="content_box mainBox">
        <view class="displayFlexBetween">
          <view class='front displayFlexCol' @click='imgcliack("oneselfFrontIdCard")'>
            <image :src='getImg(reviewImages,"oneselfFrontIdCard") ? getImg(reviewImages,"oneselfFrontIdCard") : iconUrl.front' class='identity'></image>
            <view class='pb10'><text class='colorRed'>*</text>患者本人身份证人像面</view>
          </view>
          <view class='front displayFlexCol' @click='imgcliack("oneselfBackIdCard")'>
            <image :src='getImg(reviewImages,"oneselfBackIdCard") ? getImg(reviewImages,"oneselfBackIdCard") : iconUrl.bankCard' class='identity'></image>
            <view class='pb10'><text class='colorRed'>*</text>退款银行卡正面</view>
          </view>
        </view>
      </view>
      <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">为了保障您预交金的资金安全，线上转账退款登记完成后，医院会进行基本信息审核，校验无误后为您办理退款，办理时间约7个工作日，请您耐心等待,有疑问欢迎在工作时间拨打电话0591-83947288</view>
      </view>
      <view class="public_btn_con bg_white">
        <view class="public_btn backgroundCustom" @click="jumpConfirmaPay">提交材料</view>
      </view>
      <!-- 信息确认 -->
      <view class="InfoDialog" v-if="showInfoDialog">
        <view class="dialog_con">
          <view class="dialogCon_tit">收款信息确认</view>
          <view class="dialogCon_inner">
            <view class="innerBox displayFlexLeft">
              <view class="input_tit">收款户名</view>
              <view class="input_con">{{querData.HandlerReName}}</view>
            </view>
            <view class="innerBox displayFlexLeft">
              <view class="input_tit">收款银行</view>
              <view class="input_con">{{querData.HanderReBankName}}</view>
            </view>
            <view class="innerBox displayFlexLeft">
              <view class="input_tit">开户银行</view>
              <view class="input_con">{{querData.HandlerBankName}}</view>
            </view>
            <view class="innerBox displayFlexLeft">
              <view class="input_tit">银行卡号</view>
              <view class="input_con">{{querData.HandlerBankCardNo}}</view>
            </view>
          </view>
          <view class="dialogCon_btnList">
            <view class="dialogCon_btn backgroundCustom_D9" @click="closeInfoDialog">取消申请</view>
            <view class="dialogCon_btn backgroundCustom" @click="diyRefundRegister">继续申请</view>
          </view>
        </view>
      </view>
      <!-- 选择就诊卡 -->
      <view class="select_card_mask displayFlexRow" v-if="showSelectCard">
        <view class="select_card_box displayFlexCol">
          <text class="select_card_title">请选择需要退费的就诊卡</text>
          <view class="page-section">
            <radio-group @change="radioChange">
              <radio class="addCardMask_radio displayFlexCol" :value="index.toString()" v-for="(item, index) in selectCardList" :key="index" color="var(--dominantColor)" :checked="querData.CardNo==item.ClinicCard">就诊卡：{{item.ClinicCard}}</radio>
            </radio-group>
          </view>
          <view class="select_card_footer_btn displayFlexRow">
            <text class="backgroundCustom" @click="selectCards('close')" >取消</text>
            <text class="backgroundCustom_F08" @click="selectCards('confirm')" >确定</text>
          </view>
        </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 { REQUEST_CONFIG } from '@/config';
import { getBankName, sendVerificationCode_V3, idCardVerification, refundSelectNew, refundRegister, checkVerificationCode_V3, getPatInfo } from '@/pagesPatient/service/refund/index';

const app = getApp();
const iconUrl = ref(icon);
const seconds = ref(0);
const disabledBtn = ref(false);
const provingCode = ref('');
const pcId = ref('');
const showInfoDialog = ref(false);
const reviewImages = ref<any[]>([]);
const querData = ref<any>({
  HandlerReName: '',
  HandlerBankName: '',
  HandlerBankCardNo: '',
  HanderReBankName: '',
  RefundMoney: '',
  HandlerMobile: '',
  IdCardNo: '',
  CardNo: '',
  PatientId: ''
});
const selectCardList = ref<any[]>([]);
const showSelectCard = ref(false);
const changCardIndex = ref<any>('');
const subDisabledBtn = ref(false);
let timer: any = null;

onLoad((options: any) => {
  let refunInfo = options.refunInfo ? JSON.parse(decodeURIComponent(options.refunInfo)) : {};
  if (common.isNotEmpty(refunInfo)) {
    querData.value = {
      HandlerReName: refunInfo.HandlerReName,
      HandlerBankName: refunInfo.HandlerBankName,
      HandlerBankCardNo: refunInfo.HandlerBankCardNo,
      HanderReBankName: refunInfo.HanderReBankName,
      RefundMoney: common.div(refunInfo.RefundMoney, 100),
      HandlerMobile: refunInfo.HandlerMobile,
      IdCardNo: refunInfo.IdCardNo,
    };
    reviewImages.value = JSON.parse(refunInfo.ReviewImages);
    disabledBtn.value = true;
    getBankCard();
  }
});

const setVal = (e: any) => {
  let name = e.currentTarget.dataset.name;
  let value = e.detail.value;
  
  if (name == 'querData.RefundMoney') {
    value = common.validateNumber(value);
    querData.value.RefundMoney = value;
  } else if (name == 'querData.HandlerMobile') {
    let reg = new RegExp('^[1][3,4,5,7,8,9][0-9]{9}$');
    disabledBtn.value = reg.test(value);
    querData.value.HandlerMobile = value;
  } else if (name == 'querData.HandlerReName') {
    querData.value.HandlerReName = value;
  } else if (name == 'querData.IdCardNo') {
    querData.value.IdCardNo = value;
  } else if (name == 'querData.HandlerBankCardNo') {
    querData.value.HandlerBankCardNo = value;
  } else if (name == 'querData.HanderReBankName') {
    querData.value.HanderReBankName = value;
  } else if (name == 'querData.HandlerBankName') {
    querData.value.HandlerBankName = value;
  } else if (name == 'provingCode') {
    provingCode.value = value;
  }

  // Clear card selection when related fields change
  if (['querData.HandlerReName', 'querData.IdCardNo', 'querData.HandlerMobile'].includes(name)) {
    selectCardList.value = [];
    changCardIndex.value = '';
    querData.value.CardNo = '';
    querData.value.PatientId = '';
  }
};

const getBankCard = async () => {
  if (!common.isEmpty(querData.value.HandlerBankCardNo)) {
    let resp = await getBankName({
      HandlerBankCardNo: querData.value.HandlerBankCardNo
    });
    if (resp && resp[0]) {
      if (resp[0].BankName.indexOf("建设") == -1) {
        common.showModal('如您输入非建行卡卡号请务必明确开户行具体信息');
      }
      querData.value.HanderReBankName = resp[0].BankName;
    } else {
      querData.value.HanderReBankName = '未知';
    }
  }
};

const getCode = async () => {
  if (!disabledBtn.value) return;
  
  let queryData = {
    mobile: querData.value.HandlerMobile,
  };
  let resp = await sendVerificationCode_V3(queryData);
  if (!common.isEmpty(resp)) {
    pcId.value = resp[0].pcId;
    common.showModal('发送成功！');
    countDown();
  }
};

const countDown = () => {
  seconds.value = 60;
  timer = setInterval(() => {
    seconds.value--;
    if (seconds.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);
};

const chooseImage = () => {
  return new Promise(resolve => {
    uni.chooseImage({
      count: 1,
      sourceType: ['album', 'camera'],
      success: (res) => {
        resolve(res);
      }
    });
  });
};

const upLoad = (resp: any) => {
  uni.showLoading({ mask: true });
  return new Promise(resolve => {
    // Simple compression replacement
    uni.compressImage({
      src: resp.tempFilePaths[0],
      quality: 80,
      success: (compressedRes) => {
        uni.uploadFile({
          url: `${REQUEST_CONFIG.BASE_URL}upload/uploadFileAndWatermark.do`,
          filePath: compressedRes.tempFilePath,
          name: 'newsFile',
          formData: {
            user: 'test',
            watermarkText: "照片仅用于退款审核"
          },
          header: {
            token: uni.getStorageSync('token')
          },
          success(res) {
            uni.hideLoading();
            let data = JSON.parse(res.data.replace(/\\/g, "/"));
            if (data.RespCode == '10000') {
              resolve(data);
            } else {
              common.showModal('图片上传失败');
              resolve(false);
            }
          },
          fail(err) {
            uni.hideLoading();
            common.showModal('图片上传失败');
            resolve(false);
          }
        });
      },
      fail: (err) => {
         // Fallback to original if compression fails
         uni.uploadFile({
          url: `${REQUEST_CONFIG.BASE_URL}upload/uploadFileAndWatermark.do`,
          filePath: resp.tempFilePaths[0],
          name: 'newsFile',
          formData: {
            user: 'test',
            watermarkText: "照片仅用于退款审核"
          },
          header: {
            token: uni.getStorageSync('token')
          },
          success(res) {
            uni.hideLoading();
            let data = JSON.parse(res.data.replace(/\\/g, "/"));
            if (data.RespCode == '10000') {
              resolve(data);
            } else {
              common.showModal('图片上传失败');
              resolve(false);
            }
          }
        });
      }
    });
  });
};

const imgcliack = async (key: string) => {
  let resp: any = await chooseImage();
  if (!common.isEmpty(resp)) {
    let data: any = await upLoad(resp);
    if (!common.isEmpty(data)) {
      if (key == 'oneselfFrontIdCard') {
        let queryData = {
          filePath: data.url,
          type: 1, //1身份证 2户口本
        };
        let idCardInfo = await idCardVerification(queryData);
        if (common.isEmpty(idCardInfo)) return;
      }
      
      let img = REQUEST_CONFIG.BASE_URL + data.url;
      let tempReviewImages = [...reviewImages.value];
      let reviewImagesFiter = tempReviewImages.filter(ele => ele.key == key);
      
      if (common.isNotEmpty(reviewImagesFiter)) {
        tempReviewImages.forEach((item) => {
          if (item.key == key) item.value = img;
        });
      } else {
        tempReviewImages.push({
          key: key,
          value: img
        });
      }
      reviewImages.value = tempReviewImages;
    }
  }
};

const getImg = (list: any[], key: string) => {
  for (let i = 0; i < list.length; i++) {
    let item = list[i];
    if (item.key == key) {
      return item.value;
    }
  }
  return '';
};

const jumpConfirmaPay = async () => {
  if (subDisabledBtn.value) return;
  
  subDisabledBtn.value = true;
  setTimeout(() => {
    subDisabledBtn.value = false;
  }, 3000);

  if (await chenForm(querData.value)) return;
  if (await checkVerificationCode_V3()) return;

  let queryData = {
    Status: 1,
    OpenId: uni.getStorageSync('openid'),
    StartTime: common.aFewDaysago(7),
    EndTime: common.newDay(),
    Page: { PIndex: 0, PSize: 10 }
  };
  
  let { resp, resData } = await refundSelectNew(queryData);
  if (common.isNotEmpty(resp)) {
    let filtered = resp.filter((item: any) => {
      return (item.IdCardNo == querData.value.IdCardNo && 
              item.HandlerReName == querData.value.HandlerReName && 
              item.HandlerMobile == querData.value.HandlerMobile && 
              item.CardNo == querData.value.CardNo);
    });
    
    if (filtered.length) {
      common.showModal('您近期已提交过退款申请，请勿进行重复申请', () => {}, {
        title: '温馨提示',
        confirmText: '确定',
        confirmColor: '#AD2E27',
      });
      return;
    }
  }
  closeInfoDialog();
};

const closeInfoDialog = () => {
  showInfoDialog.value = !showInfoDialog.value;
};

const diyRefundRegister = async () => {
  let queryData = {
    OpenId: uni.getStorageSync('openid'),
    HosId: app.globalData.districtId || app.globalData.hosId,
    ReviewImages: JSON.stringify(reviewImages.value),
    ...querData.value,
  };
  let { resp, resData } = await refundRegister(queryData);
  if (resData.RespCode == 10000) {
    common.goToUrl(`/pagesPatient/st1/business/refund/refundApplicationState/refundApplicationState`, { skipWay: 'redirectTo' });
  } else {
    common.showModal("尊敬的患者您好，经核实，您填写的退款信息与医院数据不一致，请根据收到的短信通知核实退款信息后重新提交申请，如多次提交依然失败，请您前往我院门诊收费窗口办理退款，谢谢！");
  }
};

const chenForm = async (queryData: any) => {
  var namereg = /[^\u4e00-\u9fa5]/ig;
  if (common.isEmpty(queryData.HandlerReName) || namereg.test(queryData.HandlerReName)) {
    common.showModal('收款户名为空或格式不正确');
    return true;
  }
  let check = common.idCodeValid(queryData.IdCardNo);
  if (common.isEmpty(queryData.IdCardNo) || !check.pass) {
    common.showModal('身份证号码为空或格式不正确');
    return true;
  }
  let reg = new RegExp('^[1][3,4,5,7,8,9][0-9]{9}$');
  if (common.isEmpty(queryData.HandlerMobile) || !reg.test(queryData.HandlerMobile)) {
    common.showModal('手机号为空或格式不正确');
    return true;
  }
  if (common.isEmpty(queryData.CardNo) || common.isEmpty(queryData.PatientId)) {
    common.showModal('请选择就诊卡');
    return true;
  }
  if (common.isEmpty(queryData.HandlerBankCardNo)) {
    common.showModal('银行卡卡号为空或格式不正确');
    return true;
  }
  if (common.isEmpty(queryData.HanderReBankName)) {
    common.showModal('请输入收款银行');
    return true;
  }
  if (queryData.HanderReBankName.indexOf("建设") == -1 && common.isEmpty(queryData.HandlerBankName)) {
    common.showModal('开户银行地址不能为空');
    return true;
  }
  if (common.isEmpty(queryData.RefundMoney)) {
    common.showModal('退款金额不能为空');
    return true;
  }
  if (queryData.RefundMoney > 10000) {
    common.showModal('退款金额不能大于10000');
    return true;
  }
  // Check if both images are present
  // Legacy used indices 0 and 1, but reviewImages is an array of {key, value}
  // So we should check if we have the keys
  let hasFront = reviewImages.value.some(item => item.key == 'oneselfFrontIdCard');
  let hasBack = reviewImages.value.some(item => item.key == 'oneselfBackIdCard');
  
  if (!hasFront) {
    common.showModal('请上传患者本人身份证人像面');
    return true;
  }
  if (!hasBack) {
    common.showModal('请上传退款银行卡正面');
    return true;
  }
  return false;
};

const checkVerificationCode_V3 = () => {
  return new Promise(async (resolve, reject) => {
    if (common.isEmpty(pcId.value) || common.isEmpty(provingCode.value)) {
      common.showModal(common.isEmpty(pcId.value) ? '请先获取验证码' : '请输入验证码');
      resolve(true); // Return true to indicate error
    } else {
      let reqData = {
        pcId: pcId.value || '',
        verificationCode: provingCode.value,
      };
      let { resp, resData } = await checkVerificationCode_V3(reqData);
      if (resData.RespCode == 10000) {
        resolve(false); // No error
      } else {
        resolve(true); // Error
      }
    }
  });
};

const getCardList = async () => {
  var namereg = /[^\u4e00-\u9fa5]/ig;
  if (common.isEmpty(querData.value.HandlerReName) || namereg.test(querData.value.HandlerReName)) {
    common.showModal('收款户名为空或格式不正确');
    return;
  }
  let check = common.idCodeValid(querData.value.IdCardNo);
  if (common.isEmpty(querData.value.IdCardNo) || !check.pass) {
    common.showModal('身份证号码为空或格式不正确');
    return;
  }
  let reg = new RegExp('^[1][3,4,5,7,8,9][0-9]{9}$');
  if (common.isEmpty(querData.value.HandlerMobile) || !reg.test(querData.value.HandlerMobile)) {
    common.showModal('手机号为空或格式不正确');
    return;
  }
  let queryData = {
    MemberName: querData.value.HandlerReName,
    Mobile: querData.value.HandlerMobile,
    IdCardNo: querData.value.IdCardNo,
  };
  let { resp, resData } = await getPatInfo(queryData);
  if (resData.RespCode == 10000) {
    if (common.isNotEmpty(resp)) {
      showSelectCard.value = true;
      selectCardList.value = resp;
    } else {
      common.showModal("尊敬的患者您好，经核实，您填写的退款信息与医院数据库不一致，请根据收到的短信通知核实修改退款信息后重新提交申请。如仍未成功，请您前往我院门诊收费窗口办理退款，谢谢！", () => {}, { title: '温馨提示' });
    }
  }
};

const radioChange = (e: any) => {
  changCardIndex.value = e.detail.value;
};

const selectCards = (type: string) => {
  if (type == 'confirm') {
    if (common.isEmpty(changCardIndex.value)) {
      common.showModal('请选择要绑定的卡');
      return;
    }
    let selected = selectCardList.value[changCardIndex.value];
    querData.value.CardNo = selected.ClinicCard;
    querData.value.PatientId = selected.PatientId;
  }
  showSelectCard.value = false;
};

</script>

<style lang="scss" scoped>
.content{
  padding-bottom: 200upx;
}

.content_box{
  background:rgba(255,255,255,1);
  border-radius:30upx;
  margin: 30upx 30upx 0 30upx
}

.listTip{
  color: #62626D;
  padding-top: 30upx;
  display: flex;
}
.icon_refundTip{
  width: 55upx;
  height: 55upx;
}
.cardInfoBoxList {
  margin-top: 20upx;
  padding: 0 30upx ;
  position: relative;
}
.cardInfoBox {
  height: 110upx;
  font-size:32upx;
  font-weight:400;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;

}
.cardInfoBox .input_tit{
  width: 26%;
  color:#333;
}
.cardInfoBox .input_con{
  width: 74%;
  color: #222326;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cardInfoBox .input_con input{
  text-align: right;
}


.selectionBtn {
  width:170upx;
  height:58upx;
  font-size:26upx;
  font-weight:400; 
  line-height:60upx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 26upx;
  right: 30upx;
}
.tip {
  font-size: 30upx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(1, 1, 1, 1);
  padding:30upx 30upx 0;
  background-color: #F1F1F6;
  position: relative;
}
.mainBox {
  padding: 0upx 30upx 28upx;
  background: white;
}
.mainBox .front{
  width: 50%;
  margin-top: 28upx;
}
.mainBox image.identity{
  width: 90%;
  height: 200upx;
  border: 1px solid #ddd;
  border-radius: 10upx;
  display: block;
  margin: 0 auto 20upx;
}
.code_con_txt {
  font-size: 28upx;
  white-space: nowrap;
  padding: 20upx 0 20upx 20upx;
  color: #999;
}

.InfoDialog{
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialog_con{
  background: #FFFFFF;
  border-radius: 30upx;
  width: 80%;
}
.dialogCon_tit{
  position: relative;
  padding: 40upx 30upx 30upx;
  font-size: 36upx;
  font-weight: 500;
  color: #000000;
  text-align: center;
}
.dialogCon_inner{
  padding: 20upx 48upx;
}
.dialogCon_inner .innerBox:first-child{
  margin-top: 0;
}

.dialogCon_inner .innerBox{
  font-size: 32upx;
  align-items: baseline;
  margin-top: 30upx;
}
.dialogCon_inner .input_tit{
  width: 28%;
  color: #333;
}
.dialogCon_inner .input_con{
  width: 72%;
}
.dialogCon_btnList {
  padding: 20upx 30upx 20upx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialogCon_btn {
  width: 100%;
  height: 90upx;
  background: #FFFFFF;
  border-radius: 50px;
  font-size: 34upx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dialogCon_btn:last-child:not(:first-child){
  margin-left: 20upx;
}


.public_tip {
  margin: 30upx 30upx 0 30upx;
  border-radius: 24upx;
  background: white;
}

.public_tip .tips_icon {
  width: 75upx;
  height: 23upx;
}

.public_tip_box {
  margin-bottom: 28upx;
}

.public_tip_box text {
  font-size: 32upx;
  font-weight: bold;
  padding: 0 24upx;
  box-sizing: border-box;
  color: #222326;
}

.public_tip_text {
  font-size: 28upx;
  color: #62626D;
  padding-bottom: 28upx;
  line-height: 44upx;
  text-align: justify;
}

.public_tip_text:last-child {
  padding-bottom: 0;
}
/* 选择就诊卡弹窗 */
.select_card_mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

.select_card_box {
  width: 620upx;
  padding: 48upx;
  box-sizing: border-box;
  background: white;
  border-radius: 20upx;
}
.select_card_box .addCardMask_radio{
  margin-top: 28upx;
  width: 100%;
  font-size: 32upx;
  align-items: flex-start;
  z-index: 10;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;

}
.select_card_title {
  font-size: 36upx;
  font-weight: bold;
  color: #222326;
}

.select_card_tips {
  font-size: 28upx;
  color: #8A8A99;
  margin-top: 27upx;
}

.select_card_input {
  width: 100%;
  height: 100upx;
  line-height: 100upx;
  font-size: 32upx;
  color: #8A8A99;
  padding-left: 53upx;
  box-sizing: border-box;
  background: #F0F1F6;
  margin-top: 40upx;
  border-radius: 100upx;
}

.select_card_footer_btn {
  width: 100%;
  height: 88upx;
  margin-top: 81upx;
  justify-content: space-between;
}

.select_card_footer_btn text {
  width: 49%;
  line-height: 88upx;
  font-size: 34upx;
  font-weight: bold;
  color: #43434A;
  text-align: center;
  border-radius: 88upx;
}

.select_card_footer_btn text:nth-child(1) {
  border: 1upx solid #E6E6E6;
}
.page-section{
  padding-top: 40upx;
  width: 100%;
}
.select_card_mask  .select_card_nothing{
  margin-top: 40upx;
}

.colorRed {
  color: red;
}
.colorCustom {
  color: var(--dominantColor);
}
.backgroundCustom {
  background: var(--dominantColor);
  color: white;
}
.backgroundCustom_D9 {
  background: #D9D9D9;
  color: #333;
}
.backgroundCustom_F08 {
  background: var(--dominantColor);
  color: white;
}
.bg_white {
  background: white;
}
.pb10 {
  padding-bottom: 10upx;
}
.public_right_img {
  width: 30upx;
  height: 30upx;
}
</style>