com.kasite.client.uniapp.patient/pagesPatient/st1/business/outpatient/outpatientRefundNew/refundForm/refundForm.vue

<template>
  <view>
    <view class="container">
      <view class="content">
        <!-- 基础信息表单 -->
        <view v-if="formConfig_basic.length" class="white-panel no-padding">
          <gForm
            id="form_basic"
            ref="form_basic"
            :formConfig="formConfig_basic"
            :formData="formData"
            @formSubmit="onFormSubmit"
            @errorReport="onErrorReport"
            @formDataChange="onFormDataChange"
            @smsCodeSendSuccess="onSmsCodeSendSuccess"
            @smsCodeSendFail="onSmsCodeSendFail"
            @actionClick="onActionClick"
          />
        </view>

        <!-- 办理类型选择 -->
        <tabBar
          :tabList="relationTypeConf.relationTypeList"
          :value="relationTypeConf.relationTypeSlt"
          @tabClick="tabClick"
        ></tabBar>

        <!-- 转账信息表单 -->
        <view class="white-panel no-padding">
          <block v-if="formData.TransferType == 'Bank'">
            <gForm
              id="form_bank"
              ref="form_bank"
              :formConfig="formConfig_bank"
              :formData="formData"
              @formSubmit="onFormSubmit"
              @errorReport="onErrorReport"
              @formDataChange="onFormDataChange"
              @smsCodeSendSuccess="onSmsCodeSendSuccess"
              @smsCodeSendFail="onSmsCodeSendFail"
              @actionClick="onActionClick"
            />
          </block>

          <block v-if="formData.TransferType == 'Wechat'">
            <gForm
              id="form_wechat"
              ref="form_wechat"
              :formConfig="formConfig_wechat"
              :formData="formData"
              @formSubmit="onFormSubmit"
              @errorReport="onErrorReport"
              @formDataChange="onFormDataChange"
              @smsCodeSendSuccess="onSmsCodeSendSuccess"
              @smsCodeSendFail="onSmsCodeSendFail"
              @actionClick="onActionClick"
            />
          </block>

          <block v-if="formData.TransferType == 'Zfb'">
            <gForm
              id="form_zfb"
              ref="form_zfb"
              :formConfig="formConfig_zfb"
              :formData="formData"
              @formSubmit="onFormSubmit"
              @errorReport="onErrorReport"
              @formDataChange="onFormDataChange"
              @smsCodeSendSuccess="onSmsCodeSendSuccess"
              @smsCodeSendFail="onSmsCodeSendFail"
              @actionClick="onActionClick"
            />
          </block>
        </view>

        <!-- 证件上传 -->
        <view class="block-title font-bold require">请上传就诊人身份证</view>
        <view class="white-panel display-flex__ac" style="gap: 20upx">
          <view
            class="upload-image__content"
            @click="uploadImage('oneselfFrontIdCard')"
          >
            <view class="upload-image__main display-flex__ac display-flex__jc">
              <image
                v-if="
                  getListKey(
                    formData.ReviewImages,
                    'key',
                    'oneselfFrontIdCard',
                    'value'
                  )
                "
                :src="
                  autoUrl(
                    baseUrl,
                    getListKey(
                      formData.ReviewImages,
                      'key',
                      'oneselfFrontIdCard',
                      'value'
                    )
                  )
                "
                mode="aspectFit"
              />
              <image v-else src="../static/images/rxm.png" mode="aspectFit" />
            </view>
            <view class="upload-image__info text-center backgroundCustom">
              点击拍摄/上传人像面
            </view>
          </view>
          <view
            class="upload-image__content"
            @click="uploadImage('oneselfBackIdCard')"
          >
            <view class="upload-image__main display-flex__ac display-flex__jc">
              <image
                v-if="
                  getListKey(
                    formData.ReviewImages,
                    'key',
                    'oneselfBackIdCard',
                    'value'
                  )
                "
                :src="
                  autoUrl(
                    baseUrl,
                    getListKey(
                      formData.ReviewImages,
                      'key',
                      'oneselfBackIdCard',
                      'value'
                    )
                  )
                "
                mode="aspectFit"
              />
              <image v-else src="../static/images/ghm.png" mode="aspectFit" />
            </view>
            <view class="upload-image__info text-center backgroundCustom">
              点击拍摄/上传国徽面
            </view>
          </view>
        </view>

        <block v-if="relationTypeConf.relationTypeSlt == '2'">
          <view class="block-title font-bold require">请上传代办人身份证</view>
          <view class="white-panel display-flex__ac" style="gap: 20upx">
            <view
              class="upload-image__content"
              @click="uploadImage('agentFrontIdCard')"
            >
              <view
                class="upload-image__main display-flex__ac display-flex__jc"
              >
                <image
                  v-if="
                    getListKey(
                      formData.ReviewImages,
                      'key',
                      'agentFrontIdCard',
                      'value'
                    )
                  "
                  :src="
                    autoUrl(
                      baseUrl,
                      getListKey(
                        formData.ReviewImages,
                        'key',
                        'agentFrontIdCard',
                        'value'
                      )
                    )
                  "
                  mode="aspectFit"
                />
                <image
                  v-else
                  src="../static/images/rxm.png"
                  mode="aspectFit"
                />
              </view>
              <view class="upload-image__info text-center backgroundCustom">
                点击拍摄/上传人像面
              </view>
            </view>
            <view
              class="upload-image__content"
              @click="uploadImage('agentBackIdCard')"
            >
              <view
                class="upload-image__main display-flex__ac display-flex__jc"
              >
                <image
                  v-if="
                    getListKey(
                      formData.ReviewImages,
                      'key',
                      'agentBackIdCard',
                      'value'
                    )
                  "
                  :src="
                    autoUrl(
                      baseUrl,
                      getListKey(
                        formData.ReviewImages,
                        'key',
                        'agentBackIdCard',
                        'value'
                      )
                    )
                  "
                  mode="aspectFit"
                />
                <image
                  v-else
                  src="../static/images/ghm.png"
                  mode="aspectFit"
                />
              </view>
              <view class="upload-image__info text-center backgroundCustom">
                点击拍摄/上传国徽面
              </view>
            </view>
          </view>
        </block>

        <!-- 温馨提示 -->
        <view class="tip">
          <view class="tip-title text-color__dominant font-bold"
            >温馨提示</view
          >
          <view class="tip-content text-justify">
            <rich-text
              :nodes="
                getListKey(
                  channelTypeList,
                  'value',
                  formData.TransferType,
                  'tip'
                )
              "
            />
          </view>
        </view>
      </view>
      <view class="public_btn_con">
        <view class="public_btn backgroundCustom" @click="beforeSubmitForm"
          >退款申请</view
        >
      </view>
    </view>

    <!-- 信息确认 -->
    <view class="dialog_mask" v-if="confirmDialogVisible"></view>
    <view class="dialog" v-if="confirmDialogVisible">
      <view class="dialog_header">收款信息确认</view>
      <view class="dialog_main">
        <!-- 银行卡转账 -->
        <block v-if="formData.TransferType == 'Bank'">
          <view class="innerBox displayFlexLeft">
            <view class="input_tit">收款户名</view>
            <view class="input_con">{{ formData.HandlerReName }}</view>
          </view>
          <view class="innerBox displayFlexLeft">
            <view class="input_tit">收款银行</view>
            <view class="input_con">{{ formData.HanderReBankName }}</view>
          </view>
          <view class="innerBox displayFlexLeft">
            <view class="input_tit">开户银行</view>
            <view class="input_con">{{ formData.HandlerBankName }}</view>
          </view>
          <view class="innerBox displayFlexLeft">
            <view class="input_tit">银行卡号</view>
            <view class="input_con">{{ formData.RecAccNo }}</view>
          </view>
        </block>
        <!-- 支付宝转账 -->
        <block v-else-if="formData.TransferType == 'Zfb'">
          <view class="innerBox displayFlexLeft">
            <view class="input_tit">支付宝收款户名</view>
            <view class="input_con">{{ formData.HandlerReName }}</view>
          </view>
          <view class="innerBox display-flex__ac">
            <view class="input_tit">支付宝账号</view>
            <view class="input_con">{{ formData.RecAccNo }}</view>
          </view>
        </block>
        <!-- 微信转账 -->
        <block v-else-if="formData.TransferType == 'Wechat'">
          <view class="innerBox display-flex__ac">
            <!-- <view class="input_tit"></view> -->
            <view class="input_con">
              请确认当前微信号实名和收款人姓名
              <text class="colorRed font-bold"
                >【{{ formData.HandlerReName }}】</text
              >
              一致
            </view>
          </view>
        </block>
      </view>
      <view class="dialog_btnList">
        <view class="dialog_btn" @click="changeDialogVisible_info"
          >取消申请</view
        >
        <view class="dialog_btn dialog_btn_confirm" @click="submitForm"
          >继续申请</view
        >
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, getCurrentInstance, nextTick } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { REQUEST_CONFIG } from '@/config';
import { requestWithCancel } from "./singletonRequest";
import { common } from '@/utils';
import {
  refundRegisterNew,
  refundUpdate,
  sendVerificationCode_V3 as sendVerificationCodeApi,
  checkVerificationCode_V3 as checkVerificationCodeApi,
  getBankNameUrl,
  userConfirmAuth
} from '@/pagesPatient/service/refund';
import {
  channelType,
  relationType,
  form_basic,
  form_bank,
  form_wechat,
  form_zfb,
} from "./formConfig";

// Components
import tabBar from "../components/tabBar/tabBar.vue";
import gForm from "../components/form/index.vue";

const app = getApp();

// Refs
const form_basic_ref = ref(null);
const form_bank_ref = ref(null);
const form_wechat_ref = ref(null);
const form_zfb_ref = ref(null);

// Data
const baseUrl = ref(`${REQUEST_CONFIG.BASE_URL}`);
const memberInfo = ref<any>({});
const refundDetail = ref<any>({});
const channelTypeList = ref(channelType);
const relationTypeConf = reactive({
  relationTypeSlt: "1",
  relationTypeList: relationType,
});

// Form Configs (Reactive to allow modifications)
const formConfig_basic_data = ref([...form_basic]);
const formConfig_bank_data = ref([...form_bank]);
const formConfig_wechat_data = ref([...form_wechat]);
const formConfig_zfb_data = ref([...form_zfb]);

// Expose configs for template
const formConfig_basic = formConfig_basic_data;
const formConfig_bank = formConfig_bank_data;
const formConfig_wechat = formConfig_wechat_data;
const formConfig_zfb = formConfig_zfb_data;

const formData = ref<any>({
  MemberName: "",
  IdCardNo: "",
  RefundMoney: 0,
  HandlerMobile: "",
  TransferType: "Bank",
  HandlerReName: "",
  HanderReBankName: "",
  HandlerBankName: "",
  RecAccNo: "",
  ReviewImages: [],
  PatientId: [],
  // Internal fields
  HandlerMobile_pcId: "",
  HandlerMobile_code: "",
});

const confirmDialogVisible = ref(false);

// Methods from WXS
const autoUrl = (baseUrl: string, url: string) => {
  if (!url) return url;
  if (url.indexOf("http") !== -1) return url;
  return baseUrl + url;
};

const getListKey = (
  list: any[],
  searchKeyStr: string,
  val: any,
  keyStr: string
) => {
  if (!list || !list.length) return "";
  let str = "";
  for (let i = 0; i < list.length; i++) {
    if (list[i][searchKeyStr] == val) {
      str = list[i][keyStr] || "";
      break;
    }
  }
  return str;
};

// Lifecycle
onLoad((options) => {
  initPageParam(options);
  initFormData();
});

// Methods

const initPageParam = (options: any) => {
  const queryBean = app.globalData.queryBean;
  if (queryBean) {
    memberInfo.value = queryBean.memberInfo;
    refundDetail.value = queryBean.refundDetail;
    app.globalData.queryBean = null;
  }
};

const initFormData = () => {
  // Mount sendCodeApi implementation
  formConfig_basic.value?.forEach((item: any) => {
    if (item.type === "smsCode") {
      item.sendCodeApi = (phone: string) => sendVerificationCode_V3(phone);
    }
  });

  // Multi-card handling
  const cardList = refundDetail.value?.CardInfoList || [];
  if (cardList.length > 1) {
    formConfig_basic.value = formConfig_basic.value.filter(
      (item: any) => item.key != "CardNo"
    );
  }

  const newFormData: any = {
    MemberName: memberInfo.value.memberName,
    IdCardNo: memberInfo.value.certNum,
    HandlerMobile: refundDetail.value.CardInfoList?.[0]?.Mobile || "",
    RefundMoney: (Number(refundDetail.value.CanRefundSum) || 0) / 100,
    CardNo: cardList?.[0]?.CardNo || "",
    PatientId: refundDetail.value.PatientId,
  };

  // Fast fill (Edit mode)
  if (app.globalData.fastEditRefundFormData) {
    Object.assign(newFormData, app.globalData.fastEditRefundFormData);
    relationTypeConf.relationTypeSlt = newFormData.FilingType || "1";
    app.globalData.fastEditRefundFormData = null;
  }

  formData.value = Object.assign({}, formData.value, newFormData);

  // Status handling
  if (formData.value.Status == "0" || formData.value.Status == "1") {
    formConfig_basic.value.forEach((item: any) => {
      item.readOnly = true;
      if (item.type == "smsCode") {
        item.type = "input";
      }
    });
  }
};

const onFormSubmit = (e: any) => {
  // Not used in original code, but kept for compatibility
  // const { formData: val } = e;
};

const handleSubmit = () => {
  const componentConfigMap = [
    { formConfigName: "formConfig_basic", ref: form_basic_ref },
  ];

  if (formData.value.TransferType == "Bank") {
    componentConfigMap.push({
      formConfigName: "formConfig_bank",
      ref: form_bank_ref,
    });
  } else if (formData.value.TransferType == "Wechat") {
    componentConfigMap.push({
      formConfigName: "formConfig_wechat",
      ref: form_wechat_ref,
    });
  } else if (formData.value.TransferType == "Zfb") {
    componentConfigMap.push({
      formConfigName: "formConfig_zfb",
      ref: form_zfb_ref,
    });
  }

  let flag = true;
  for (const item of componentConfigMap) {
    // Check if config exists and has length (proxy for v-if)
    // In Vue, we check if ref is available
    const formComponent = item.ref.value;
    if (!formComponent) continue;

    formComponent.submitForm();
    if (formComponent.hasError) {
      flag = false;
      break;
    }
  }
  return flag;
};

const onErrorReport = (e: any) => {
  const { errorMsg } = e;
  common.throttle(() => {
    uni.showModal({
      title: "温馨提示",
      content: errorMsg,
      showCancel: false,
    });
  });
};

const onFormDataChange = async (e: any) => {
  const { formData: newFormData, target } = e;
  const [key, value] = Object.entries(target).flat() as [string, any];

  if (!key.includes("_")) {
    if (key === "TransferType") {
      if (value == "Wechat") {
        await requestMerchantTransfer().catch((err: any) => {
          common.showModal(err.message);
          newFormData[key] = formData.value[key];
        });
      }
      newFormData["RecAccNo"] = "";
    }

    formData.value = newFormData;

    if (key === "RecAccNo" && formData.value.TransferType === "Bank") {
      getBankName(target);
    }
    return;
  }

  const [baseKey, type] = key.split("_");
  if (type !== "phone") {
    formData.value = newFormData;
    return;
  }

  const target_pcId = formData.value[`${baseKey}_pcId`];
  if (!target_pcId || newFormData[key] == formData.value[key]) {
    formData.value = newFormData;
    return;
  }

  const modalSltRes = await uni.showModal({
    title: "温馨提示",
    content: "当前手机号已发送验证码，修改手机号需要重新发送，确认吗？",
  });

  if (modalSltRes.confirm) {
    newFormData[`${baseKey}_pcId`] = "";
  }
  if (modalSltRes.cancel) {
    newFormData[key] = formData.value[key];
  }
  formData.value = newFormData;
};

const onActionClick = (e: any) => {
  const { formData: newFormData, target } = e;
  const [key, value] = Object.entries(target).flat();
  console.info(
    `%c 【表单项目点击】 %c key：${key} value：${value} `,
    "padding: 2px 6px; border-radius: 3px 0 0 3px; color: #fff; background: #FF6699; font-weight: bold;",
    "padding: 2px 6px; border-radius: 0 3px 3px 0; color: #fff; background: #FF9999; font-weight: bold;"
  );
};

const onSmsCodeSendSuccess = (e: any) => {
  const { key, res } = e;
  formData.value[`${key}_pcId`] = res?.[0]?.pcId || "";
  common.showModal(`验证码发送成功`, () => {}, { title: "温馨提示" });
  console.log(`短信验证码组件 ${key} 发送成功`, res);
};

const onSmsCodeSendFail = (e: any) => {
  const { key, err } = e;
  formData.value[`${key}_pcId`] = "";
  common.showModal(
    `验证码发送失败，原因：${err.message}`,
    () => {},
    { title: "温馨提示" }
  );
  console.log(`短信验证码组件 ${key} 发送失败`, err);
};

const beforeSubmitForm = async () => {
  if (!handleSubmit()) {
    return;
  }

  try {
    if (
      formConfig_bank.value.length &&
      relationTypeConf.relationTypeSlt == "1" &&
      formData.value.MemberName != formData.value.HandlerReName
    ) {
      const modalSltRes = await uni.showModal({
        title: "温馨提示",
        content: "收款户名与就诊人姓名不一致，是否切换为建议代办办理？",
      });
      if (modalSltRes.confirm) {
        relationTypeConf.relationTypeSlt = "2";
        return;
      }
      if (modalSltRes.cancel) {
        throw new Error("本人办理模式下收款户名必须与就诊人姓名一致");
      }
    }

    await checkUploadImage();
    changeDialogVisible_info();
  } catch (err: any) {
    common.showModal(err.message);
  }
};

const submitForm = async () => {
  changeDialogVisible_info();

  try {
    if (formData.value.TransferType === "Wechat") {
      await requestMerchantTransfer();
    }

    if (formData.value.Status === undefined || formData.value.Status == "3") {
      await checkVerificationCode_V3(
        formData.value.HandlerMobile_pcId,
        formData.value.HandlerMobile_code
      );
    }

    const reqData = {
      ...formData.value,
      BaseMemberEncryptionStore: memberInfo.value.baseMemberEncryptionStore,
      FilingType: relationTypeConf.relationTypeSlt,
      CardList: refundDetail.value.CardInfoList || formData.value.CardList,
      HandlerMobile: formData.value.HandlerMobile_phone,
      ReviewImages: formData.value.ReviewImages?.map((item: any) => ({
        ...item,
        value: `${baseUrl.value}${item.value}`,
      })),
      RecAccNo:
        formData.value.TransferType == "Wechat"
          ? uni.getStorageSync("smallProOpenId")
          : formData.value.RecAccNo,
    };

    let reqFunc = refundRegisterNew;
    if (formData.value.Status == "0" || formData.value.Status == "1") {
      reqFunc = refundUpdate;
    }

    const { resData, resp } = await reqFunc(reqData);
    if (resData.RespCode != "10000") {
      throw new Error(resData.RespMessage || `申请失败，请重试`);
    }
    if (resp.length > 0) {
      common.showModal(
        resp
          .map((cardInfo: any) => `${cardInfo.CardNo}：${cardInfo.ErrorMsg}`)
          .join("\n")
      );
      return;
    }
    common.goToUrl(
      `/pagesPatient/st1/business/outpatient/outpatientRefundNew/refundResult/refundResult`
    );
  } catch (err: any) {
    common.showModal(err.message);
  }
};

const uploadImage = async (key: string) => {
  try {
    const path = await chooseImage();
    const uploadRes: any = await upload(path.tempFiles[0].tempFilePath);
    if (uploadRes.RespCode != "10000") {
      common.showModal(`图片上传失败，请重试`);
      return;
    }
    const url = `${uploadRes.url.replace(/\\/g, "/")}`;
    const target = formData.value.ReviewImages.find(
      (item: any) => item.key == key
    );
    if (target) {
      target.value = url;
    } else {
      formData.value.ReviewImages.push({
        key: key,
        value: url,
      });
    }
  } catch (e) {
    // Handle error
  }
};

const checkUploadImage = async () => {
  const imageKeyList = [
    { key: "oneselfFrontIdCard", text: "就诊人身份证人像面" },
    { key: "oneselfBackIdCard", text: "就诊人身份证国徽面" },
  ];
  if (relationTypeConf.relationTypeSlt == "2") {
    imageKeyList.push({ key: "agentFrontIdCard", text: "代办人身份证人像面" });
    imageKeyList.push({ key: "agentBackIdCard", text: "代办人身份证国徽面" });
  }

  const target = imageKeyList.find(
    (item) => !formData.value.ReviewImages.map((i: any) => i.key).includes(item.key)
  );
  if (target) {
    throw new Error(`请上传【${target.text}】` || `存在未上传的图片，请检查`);
  }
};

const chooseImage = async () => {
  const res = await uni.chooseMedia({
    count: 1,
    sourceType: ["album", "camera"],
    sizeType: ["compressed"],
  });
  return res;
};

const upload = (path: string) => {
  return new Promise((resolve, reject) => {
    common.showLoading();
    uni.uploadFile({
      url: `${REQUEST_CONFIG.BASE_URL}upload/uploadFileAndWatermark.do`,
      filePath: path,
      name: "newsFile",
      formData: {
        user: "test",
        watermarkText: "照片仅用于退款审核",
      },
      header: {
        token: uni.getStorageSync("token"),
      },
      success: (res) => resolve(JSON.parse(res.data)),
      fail: (err) => reject(err),
      complete: () => common.hideLoading(),
    });
  });
};

const sendVerificationCode_V3 = async (mobile: string) => {
  const reqData = { mobile };
  const { resData, resp } = await sendVerificationCodeApi(reqData, {
    showModal: false,
  });
  if (resData.RespCode != "10000") {
    throw new Error(resData.RespMessage);
  }
  return resp;
};

const checkVerificationCode_V3 = async (pcId: string, code: string) => {
  if (!pcId) {
    throw new Error("请先发送验证码");
  }
  const reqData = {
    pcId: pcId,
    verificationCode: code,
  };
  const { resData, resp } = await checkVerificationCodeApi(reqData, {
    showModal: false,
  });
  if (resData.RespCode != "10000") {
    throw new Error(resData.RespMessage || "验证码校验失败");
  }
};

const tabClick = (e: any) => {
  const { value } = e;
  relationTypeConf.relationTypeSlt = value;
};

const changeDialogVisible_info = () => {
  confirmDialogVisible.value = !confirmDialogVisible.value;
};

const getBankName = async (target: any = {}) => {
  const res = await requestWithCancel({
    url: getBankNameUrl,
    data: {
      ...target,
      HandlerBankCardNo: target["RecAccNo"],
    },
  });
  const resData = res.data;
  const resp = resData.Data || [];
  if (resData.RespCode != "10000" || !resp.length) {
    return;
  }
  formData.value.HanderReBankName = resp[0].BankName;
};

const requestMerchantTransfer = async () => {
  // #ifdef MP-WEIXIN
  if (!wx.canIUse("requestMerchantTransfer")) {
    throw new Error(
      `您的微信版本过低，无法使用微信转账退款，请更换转账方式或更新微信至最新版本。`
    );
  }

  const reqData = {
    UserDisplayName: "预交金退费",
    OperatorId: uni.getStorageSync("smallProOpenId"),
  };
  const { resData, resp } = await userConfirmAuth(reqData, {
    showModal: false,
  });
  if (resData.RespCode != "10000" || common.isEmpty(resp)) {
    throw new Error(`${resData.RespMessage}` || "获取微信退款授权配置失败");
  }
  if (common.isEmpty(resp)) {
    return;
  }

  const merchantTransferConfig = resp[0] || {};
  return new Promise((resolve, reject) => {
    wx.requestMerchantTransfer({
      mchId: merchantTransferConfig.MchId,
      appId: uni.getAccountInfoSync().miniProgram.appId,
      package: merchantTransferConfig.PackageInfo,
      openId: uni.getStorageSync("smallProOpenId"),
      success: (res) => {
        console.log("success:", res);
        resolve(res);
      },
      fail: (res) => {
        console.log("fail:", res);
        reject(res);
      },
    });
  });
  // #endif
};
</script>

<style scoped>
@import "../static/css/refund.css";

.container {
}

.content {
  padding: 0upx 30upx 200upx;
}

/* 块标题 start */
.block-title {
  position: relative;
  font-size: 32upx;
  padding: 0 26upx;
  margin: 20upx 0;
}

.require::after {
  content: "*";
  position: absolute;
  color: #ff1d1f;
  top: 10%;
  left: 0;
}
/* 块标题 end */

/* 办理类型 start */
.channel-type__selector {
  position: relative;
  height: 100upx;
  line-height: 100upx;
  overflow: hidden;
}

.channel-type__tag {
  height: inherit;
  line-height: inherit;
  font-size: 32upx;
  flex: 1 0 0;
  z-index: 9;
  transition: all 0.3s ease-in-out;
}

.channel-type__tag.active {
  color: #fff;
}

.channel-type__block {
  position: absolute;
  height: 100%;
  z-index: 1;
  border-radius: 24upx;
  transition: all 0.3s ease-in-out;
}
/* 办理类型 end */

/* 图片上传 start */
.upload-image__content {
  flex: 1 0 0;
  height: 240upx;
  display: flex;
  flex-direction: column;
  border-radius: 12upx;
  overflow: hidden;
  background-color: #eff1f5;
}

.upload-image__content .upload-image__main {
  flex: 1 0 0;
  padding: 20upx 20upx;
  height: 100%;
}

.upload-image__content .upload-image__info {
  height: 60upx;
  line-height: 60upx;
}
/* 图片上传end */

/* 提示 start */
.tip {
  margin-top: 40upx;
}

.tip .tip-title {
  font-size: 32upx;
}

.tip .tip-content {
  margin-top: 20upx;
  font-size: 28upx;
  color: #61616d;
  line-height: 50upx;
}
/* 提示 end */

/* 信息确认弹窗 start */
.dialog_mask {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
}

.dialog {
  background: #ffffff;
  border-radius: 30upx;
  width: 90%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 25;
}

.dialog_header {
  position: relative;
  padding: 40upx 30upx 30upx;
  font-size: 36upx;
  font-weight: 500;
  color: #000000;
  text-align: center;
}

.dialog_main {
  padding: 20upx 48upx;
}

.dialog_main .innerBox {
  height: 40upx;
  line-height: 40upx;
  font-size: 32upx;
}

.dialog_main .innerBox + .innerBox {
  margin-top: 30upx;
}

.dialog_main .input_tit,
.dialog_main .input_con {
  height: inherit;
  line-height: inherit;
}

.dialog_main .input_tit {
  min-width: 160upx;
  width: 28%;
  color: #333;
}

.dialog_main .input_con {
  flex: 1 0 0;
  padding: 0 20upx;
}

.dialog_btnList {
  padding: 20upx 30upx 20upx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20upx;
}

.dialog_btn {
  width: 100%;
  height: 90upx;
  border-radius: 9999999upx;
  font-size: 34upx;
  line-height: 90upx;
  text-align: center;
  background-color: #d9d9d9;
  color: #fff;
}

.dialog_btn.dialog_btn_confirm {
  background: var(--dominantColor) !important;
  color: #fff !important;
}
/* 信息确认弹窗 end */

/* 覆盖 */
.public_btn_con {
  background-color: #fff;
  z-index: 9;
}

.display-flex__ac {
  display: flex;
  align-items: center;
}

.display-flex__jc {
  display: flex;
  justify-content: center;
}

.displayFlexLeft {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.text-center {
  text-align: center;
}

.font-bold {
  font-weight: bold;
}

.no-padding {
  padding: 0 !important;
}

.backgroundCustom {
  background: var(--dominantColor) !important;
  color: #fff !important;
}

.text-color__dominant {
  color: var(--dominantColor);
}
</style>