wxmp_pay_h5/src/views/Recharge.vue

<template>
  <div class="recharge-page">
    <!-- 顶部标题 -->
    <div class="page-header">
      <div class="header-content">
        <div class="logo-wrapper">
          <div class="logo-container">
            <img src="@/assets/images/logo.png" alt="告白语音" class="logo-image" />
          </div>
        </div>
      </div>
    </div>

    <!-- 用户信息 -->
    <div class="user-info-section">
      <div class="user-info-card">
        <div class="user-avatar">
          <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar" />
          <div v-else class="avatar-placeholder">
            <van-icon name="user-o" size="28" />
          </div>
          <!--<div class="switch-btn" @click="switchUser">
          </div>-->
        </div>
        <div class="user-details">
          <div class="user-name">{{ userInfo.nickname || "未知用户" }}</div>
          <div class="user-id">
            <img src="@/assets/images/id.png" alt="ID" class="id-icon" />
            <span>{{ userInfo.id || "未知ID" }}</span>
          </div>
        </div>
        <div class="action-buttons">
          <van-button v-if="canExchange === 'true'" type="primary" size="small" round @click="goToCoinExchange"
            class="action-btn">
            金币兑换
          </van-button>
          <van-button type="primary" size="small" round @click="logout" class="action-btn logout-btn">
            退出登录
          </van-button>
        </div>
      </div>
    </div>

    <!-- 充值金额选择 -->
    <div class="recharge-section">
      <h2 class="section-title">充值金额</h2>

      <div class="recharge-grid">
        <div v-for="(item, index) in rechargeOptionsWithCustom" :key="index" class="recharge-item"
          :class="{ active: selectedRecharge === index }" @click="selectRecharge(index)">
          <div class="diamond-icon">
            <img src="@/assets/images/recharge_zuanshi.png" alt="钻石" class="diamond-img" />
          </div>
          <template v-if="!item.isCustom">
            <div class="recharge-amount">{{ item.amount }}</div>
            <div class="recharge-price">¥{{ item.price }}</div>
          </template>
          <template v-else>
            <div class="recharge-amount">自定义金额</div>
            <div class="recharge-price">点击输入</div>
          </template>
        </div>
      </div>

      <div v-if="isCustomSelected" class="custom-input">
        <van-field v-model="customAmount" type="number" input-align="center" placeholder="请输入自定义金额(元)" clearable />
      </div>
    </div>

    <!-- 支付方式 -->
    <div class="payment-section">
      <div v-if="paymentType === 'alipay'" class="payment-option">
        <div class="payment-icon">
          <img src="@/assets/images/recharge_paypal.png" alt="支付宝支付" class="alipay-icon" />
        </div>
        <div class="payment-name">支付宝支付</div>
        <div class="payment-selected">
          <img src="@/assets/images/duihao.png" alt="选中" class="check-icon" />
        </div>
      </div>
      <div v-if="paymentType === 'wechat'" class="payment-option">
        <div class="payment-icon">
          <img src="@/assets/images/recharge_wechat.png" alt="微信支付" class="wechat-icon" />
        </div>
        <div class="payment-name">微信支付</div>
        <div class="payment-selected">
          <img src="@/assets/images/duihao.png" alt="选中" class="check-icon" />
        </div>
      </div>
    </div>

    <!-- 温馨提示 -->
    <div class="tips-section">
      <div class="tips-title">温馨提示：</div>
      <div class="tips-content">
        <div class="tip-item">
          1. 充值前请确定您已满18周岁并具有完全民事行为能力。
        </div>
        <div class="tip-item">
          2. 安全账号转账、理赔转账、刷单、代充均为骗局，请认真核实并确认
        </div>
        <div class="tip-item" v-if="paymentType === 'wechat'">
          3. 大额充值，支付方式可选择"零钱通"
        </div>
        <div class="tip-item" v-if="paymentType === 'alipay'">
          3. 大额充值，请确保支付宝账户余额充足
        </div>
        <div class="tip-item">4. 如有疑问，请联系服务号客服</div>
      </div>

      <!-- 协议勾选 -->
      <div class="agreement-checkbox" @click="toggleAgreement">
        <div class="checkbox-wrapper" :class="{ checked: agreementChecked }">
          <van-icon v-if="agreementChecked" name="success" size="14" color="#fff" />
        </div>
        <div class="agreement-text">
          我已阅读并同意
          <span class="agreement-link" @click.stop="showAgreement">《用户充值协议》</span>
        </div>
      </div>
    </div>

    <!-- 支付按钮 -->
    <div class="pay-button">
      <van-button type="primary" block round @click="confirmPay">确认支付</van-button>
    </div>

    <!-- 协议弹框 -->
    <van-dialog v-model="agreementVisible" title="用户充值协议" confirm-button-text="我已阅读" @confirm="agreementChecked = true"
      :show-cancel-button="false">
      <div class="agreement-content">
        <iframe v-if="agreementVisible" src="https://gbyy91.com/agreement/recharge.html" frameborder="0"
          class="agreement-iframe"></iframe>
      </div>
    </van-dialog>
  </div>
</template>

<script>
// eslint-disable-next-line no-undef
import { getProductList } from "@/api/product";
import { getUserInfo } from "@/api/user";
import { aliPayCoin, aliPayH5 } from "@/api/pay";
import { ahtuCodeApi, wechatPayCoin, wxPay } from "@/api/pay";
import {
  getDevicePayWayId,
  getPlatformType,
  ALI_CUSTOM,
  PAYMENT_TYPE,
} from "@/utils/config";

export default {
  name: "RechargePage",
  data() {
    return {
      resultDataMess: {},
      userCode: "", // 用于微信支付
      userInfo: {
        // 用于支付宝支付
        id: "",
        nickname: "",
        avatar: "",
      },
      rechargeOptions: [],
      selectedRecharge: 0,
      paymentMethod: "alipay",
      isLoading: false,
      agreementChecked: false,
      agreementVisible: false,
      // 自定义金额
      customAmount: "",
      // 支付方式类型
      paymentType: PAYMENT_TYPE,
      // 金币兑换权限
      canExchange: localStorage.getItem("canExchange") || "false",
    };
  },
  computed: {
    selectedRechargeOption() {
      return this.rechargeOptionsWithCustom[this.selectedRecharge] || null;
    },
    // 显示列表 = 产品列表 + 自定义
    rechargeOptionsWithCustom() {
      if (ALI_CUSTOM && this.paymentType === "alipay") {
        return [...(this.rechargeOptions || []), { isCustom: true }];
      } else {
        return [...(this.rechargeOptions || [])];
      }
    },
    // 是否选择了自定义
    isCustomSelected() {
      const selectedOption = this.rechargeOptionsWithCustom[this.selectedRecharge];
      return selectedOption && selectedOption.isCustom === true;
    }
  },
  created() {
    // 获取用户信息
    this.initUserInfo();
    // 获取产品列表
    this.fetchProductList();
    if (this.paymentType === "wechat") {
      this.listenWeixinBridge(); // 监听桥梁加载
    }
  },
  methods: {
    // 初始化用户信息
    async initUserInfo() {
      // 从路由参数获取用户信息
      const { id, nickname, avatar } = this.$route.query;
      if (this.paymentType === "wechat") {
        this.userCode = this.$route.query.userCode;
      }
      if (id) {
        // 如果路由参数中有用户ID，直接使用
        this.userInfo.id = id;
        this.userInfo.nickname = nickname || "未知用户";
        this.userInfo.avatar = avatar || "";
      } else {
        // 如果没有用户ID，尝试从本地存储获取
        // const savedUserId = localStorage.getItem('lastUserId')
        // if (savedUserId) {
        //   try {
        //     // 从API获取用户信息
        //     const res = await getUserInfo(savedUserId)
        //     if (res.data && res.data.userId) {
        //       this.userInfo.id = res.data.userId
        //       this.userInfo.nickname = res.data.userName || '未知用户'
        //       this.userInfo.avatar = res.data.avatar || ''
        //     } else {
        //       this.$toast('未找到用户信息')
        //       this.$router.replace('/')
        //     }
        //   } catch (error) {
        //     console.error('获取用户信息失败:', error)
        //     this.$toast('获取用户信息失败')
        //     this.$router.replace('/')
        //   }
        // } else {
        // 没有用户ID，返回搜索页面
        this.$toast("请先登录");
        this.$router.replace("/");
        // }
      }

      // 保存最后使用的用户ID
      // if (this.userInfo.id) {
      //   localStorage.setItem("lastUserId", this.userInfo.id);
      // }
    },
    // 监听 weixinJSBridge 加载
    listenWeixinBridge() {
      if (window.WeixinJSBridge) {
        this.onWeixinBridgeReady();
      } else {
        const listener = () => this.onWeixinBridgeReady();
        document.addEventListener("WeixinJSBridgeReady", listener, false);
      }
    },
    // weixinJSBridge 加载成功回调
    onWeixinBridgeReady() {
      this.bridgeReady = true;
      console.log("weixinJSBridge 加载成功");
    },
    // 获取产品列表
    async fetchProductList() {
      try {
        const payWayId = getDevicePayWayId();
        const res = await getProductList(payWayId);
        this.rechargeOptions = res.data || [];
      } catch (error) {
        console.error("获取产品列表失败:", error);
        // 设置默认数据，以防接口调用失败
        this.rechargeOptions = [
          { amount: 60, price: 6 },
          { amount: 120, price: 6 },
          { amount: 300, price: 6 },
          { amount: 600, price: 6 },
          { amount: 1000, price: 6 },
          { amount: 2000, price: 6 },
          { amount: 3800, price: 6 },
          { amount: 5000, price: 6 },
          { amount: 10000, price: 6 },
        ];
      }
    },
    selectRecharge(index) {
      this.selectedRecharge = index;
    },
    // 切换用户
    switchUser() {
      this.$router.push("/");
    },
    // 切换协议勾选状态
    toggleAgreement() {
      this.agreementChecked = !this.agreementChecked;
    },
    // 显示协议弹框
    showAgreement() {
      this.agreementVisible = true;
    },
    confirmPay() {
      if (this.isLoading) return; // 防止重复点击

      if (!this.userInfo.id) {
        this.$toast("请先选择用户");
        return;
      }

      // 检查协议是否勾选
      if (!this.agreementChecked) {
        this.$toast("请阅读并同意充值协议");
        return;
      }

      // 自定义金额校验
      if (this.isCustomSelected) {
        const amountNumber = Number(this.customAmount);
        if (
          !this.customAmount ||
          Number.isNaN(amountNumber) ||
          amountNumber <= 0
        ) {
          this.$toast("请输入有效的自定义金额");
          return;
        }
      }

      const selectedOption = this.selectedRechargeOption;

      // 使用二次确认弹窗
      this.$dialog
        .confirm({
          title: "支付确认",
          message: `
          <div class="confirm-dialog-content">
            <div class="confirm-tip">请核实并确认ID是否正确，请提防：</div>
            <div class="warning-list">
              <div class="warning-item">刷单赚取佣金</div>
              <div class="warning-item">公检法要求转账到安全账户</div>
              <div class="warning-item">购物退款、理赔需要转账</div>
              <div class="warning-item">代充值</div>
              <div class="warning-item">支付返利活动</div>
            </div>
          </div>
        `,
          confirmButtonText: "确认支付",
          cancelButtonText: "取消",
          showCancelButton: true,
          showConfirmButton: true,
          allowHtml: true,
        })
        .then(() => {
          // 调用支付接口
          if (this.paymentType === "wechat") {
            this.requestWechatPay(selectedOption);
          } else {
            this.requestAliPay(selectedOption);
          }
        })
        .catch(() => {
          // 取消支付
        });
    },

    // 请求支付宝支付
    async requestAliPay(product) {
      // 显示加载提示
      this.isLoading = true;
      this.$toast.loading({
        message: "正在发起支付...",
        forbidClick: true,
        duration: 0,
      });

      try {
        // 获取平台类型
        const platform = getPlatformType();

        // 构建支付参数
        const payData = {
          userId: this.userInfo.id,
          productId: product && product.isCustom ? 1018 : product.id,
        };

        // 自定义金额时追加 amount
        if (product && product.isCustom) {
          payData.amount = Number(this.customAmount);
        }

        // 调用支付宝H5支付接口
        const res = await aliPayH5(payData, platform);
        this.$toast.clear();
        this.isLoading = false;

        // 优先尝试解析服务端 JSON 错误并提示
        try {
          if (typeof res === "string") {
            const trimmed = res.trim();
            if (trimmed.startsWith("{") || trimmed.startsWith("[")) {
              const json = JSON.parse(trimmed);
              if (
                json &&
                typeof json === "object" &&
                json.code !== undefined &&
                json.code !== 200
              ) {
                this.$toast.fail(json.message || "支付请求失败");
                return;
              }
            }
          } else if (
            res &&
            typeof res === "object" &&
            res.code !== undefined &&
            res.code !== 200
          ) {
            this.$toast.fail(res.message || "支付请求失败");
            return;
          }
        } catch (e) {
          // 忽略解析错误，继续后续流程
        }

        // 处理HTML表单响应
        if (typeof res === "string" && res.includes("<form")) {
          // 创建一个div来放置表单
          const div = document.createElement("div");
          div.innerHTML = res;
          document.body.appendChild(div);

          // 自动提交表单
          setTimeout(() => {
            const form = div.querySelector("form");
            if (form) {
              form.submit();
            } else {
              this.$toast.fail("支付表单加载失败");
            }
          }, 100);
        } else {
          this.$toast.fail("获取支付表单失败");
        }
      } catch (error) {
        this.$toast.clear();
        this.isLoading = false;
        console.error("支付请求失败:", error);
        this.$toast.fail("支付请求失败，请重试");
      }
    },

    // 请求微信支付
    async requestWechatPay(product) {
      // 显示加载提示
      this.isLoading = true;
      this.$toast.loading({
        message: "正在发起支付...",
        forbidClick: true,
        duration: 0,
      });

      try {
        // 构建支付参数
        const payWayId = getDevicePayWayId(); // 获取设备对应的支付方式ID
        const payData = {
          productName: "一号房间",
          openId: localStorage.getItem("userOpenId"),
          userId: this.userInfo.id,
          productId: product.id,
          amount: product.price,
          orderNo: Date.now(),
          payWayId: payWayId, // 添加支付方式ID
        };

        // 调用后端支付接口
        const res = await wxPay(payData);
        this.$toast.clear();
        this.isLoading = false;

        // 处理支付结果
        if (res.status == 200) {
          try {
            let signData = JSON.parse(res.data.outputJSON);
            this.resultDataMess = signData;
            console.log(signData, "signData");
            let wxJsapiParam = signData.wxJsapiParam;
            if (signData.returnCode == "0000") {
              // 5. 调用 weixinJSBridge 支付
              this.invokeWeixinBridgePayment(wxJsapiParam);
            } else {
              this.$toast.fail(
                this.resultDataMess.returnMsg || "获取支付链接失败"
              );
            }
          } catch {
            this.$toast.fail(
              this.resultDataMess.returnMsg || "获取支付链接失败"
            );
          }
        } else {
          this.$toast.fail(this.resultDataMess.returnMsg || "获取支付链接失败");
        }
      } catch (error) {
        this.$toast.clear();
        this.isLoading = false;
        console.error("支付请求失败:", error);
        this.$toast.fail("支付请求失败，请重试");
      }
    },
    // 调用 weixinJSBridge 支付
    invokeWeixinBridgePayment(payParams) {
      window.WeixinJSBridge.invoke(
        "getBrandWCPayRequest",
        payParams,
        this.handleWeixinPayResult
      );
    },
    // 处理支付结果
    handleWeixinPayResult(res) {
      if (res.err_msg === "get_brand_wcpay_request:ok") {
        // 支付成功
        this.handlePaymentSuccess(res);
      } else if (res.err_msg === "get_brand_wcpay_request:cancel") {
        // 支付取消
        this.handlePaymentCancel();
      } else {
        // 支付失败
        this.handlePaymentFailure(res);
      }
    },

    // 处理支付成功
    handlePaymentSuccess() {
      console.log("支付成功");
      this.$toast.success("支付成功");
      window.location.href = "https://gbyy91.com/pay";
    },

    // 处理支付失败
    handlePaymentFailure(message) {
      console.error("支付失败:", message);
      this.$toast.fail(message || "支付失败，请重试");
    },

    // 处理支付取消
    handlePaymentCancel() {
      console.log("用户取消支付");
      this.$toast("支付已取消");
    },

    // 金币兑换
    goToCoinExchange() {
      this.$router.push("/coin-exchange");
    },

    // 退出登录
    logout() {
      // 清除本地存储的用户信息
      // localStorage.removeItem("lastUserId");
      localStorage.removeItem("userId");
      localStorage.removeItem("userName");
      localStorage.removeItem("avatar");
      localStorage.removeItem("token");
      localStorage.removeItem("integral");
      localStorage.removeItem("canExchange");
      // 跳转到搜索页面
      this.$router.push("/");
    },
  },
};
</script>

<style scoped>
.recharge-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  padding-bottom: 10px;
  position: relative;
  overflow: hidden;
}

/* 顶部标题样式 */
.page-header {
  padding: 5px 16px 0;
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.header-content {
  display: flex;
  align-items: center;
  width: 100%;
}

.logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

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

.logo-image {
  width: 90px;
  height: 60px;
  object-fit: contain;
}

/* 页面标题样式 */
.page-title {
  text-align: center;
  margin-bottom: 5px;
}

.page-title h1 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

/* 用户信息样式 */
.user-info-section {
  padding: 0 8px;
  margin-top: 0;
  margin-bottom: 5px;
}

.user-info-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 8px;
  display: flex;
  align-items: center;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.user-avatar {
  margin-right: 10px;
  position: relative;
}

.avatar,
.avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #f5eeff;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #333;
}

.user-id {
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-flex;
}

.id-icon {
  width: 14px;
  height: 14px;
  margin-right: 4px;
}

.switch-account-btn {
  background-color: #b66fff;
  color: white;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 12px;
  position: absolute;
  right: 12px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(182, 111, 255, 0.3);
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  gap: 8px;
  margin-left: 8px;
}

/* 充值金额样式 */
.recharge-section {
  padding: 0 8px;
  margin-bottom: 5px;
}

.section-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.recharge-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 2px;
}

.recharge-item {
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid #dddddd;
  position: relative;
  overflow: hidden;
}

.recharge-item.active {
  background-color: #f5eeff;
  border: 1px solid #b66fff;
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(182, 111, 255, 0.2);
}

.recharge-item.active:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent #b66fff transparent transparent;
}

.recharge-item.active:after {
  content: "✓";
  position: absolute;
  top: 0;
  right: 3px;
  color: white;
  font-size: 10px;
  font-weight: bold;
}

.diamond-icon {
  margin-bottom: 3px;
}

.diamond-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.recharge-amount {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 1px;
}

.recharge-price {
  font-size: 12px;
  color: #666;
}

.custom-input {
  margin-top: 8px;
  padding: 0 2px;
}

/* 支付方式样式 */
.payment-section {
  padding: 0 8px;
  margin-bottom: 5px;
  background-color: #fff;
  border-radius: 12px;
  margin: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.payment-option {
  display: flex;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #eaeaea;
}

.payment-icon {
  margin-right: 12px;
}

.alipay-icon,
.wechat-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.payment-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.payment-selected {
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* 温馨提示样式 */
.tips-section {
  padding: 8px 12px;
  margin: 0 8px 5px;
  background-color: #f8f8f8;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.tips-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.tips-content {
  margin-bottom: 4px;
}

.tip-item {
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
  line-height: 1.5;
}

.tip-item:last-child {
  margin-bottom: 0;
}

.agreement-checkbox {
  display: flex;
  align-items: center;
  margin-top: 5px;
  cursor: pointer;
}

.checkbox-wrapper {
  width: 16px;
  height: 16px;
  border: 1px solid #ddd;
  border-radius: 3px;
  margin-right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox-wrapper.checked {
  background-color: #b66fff;
  border-color: #b66fff;
}

.agreement-text {
  font-size: 12px;
  color: #666;
}

.agreement-link {
  color: #b66fff;
  text-decoration: none;
}

/* 协议弹框样式 */
.agreement-content {
  padding: 10px;
  height: 60vh;
  overflow: hidden;
}

.agreement-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* 支付按钮样式 */
.pay-button {
  padding: 0 8px;
  margin-top: 8px;
  margin-bottom: 5px;
}

.pay-button .van-button {
  background-color: #b66fff;
  border: none;
  height: 38px;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(182, 111, 255, 0.3);
}

/* 二次确认弹窗样式 */
:deep(.custom-dialog1) {
  width: 90%;
  max-width: 300px;
  border-radius: 12px;
  overflow: hidden;
}

:deep(.custom-dialog .van-dialog__header) {
  padding: 15px 0;
  font-weight: 600;
  font-size: 16px;
  color: #333;
}

:deep(.custom-dialog .van-dialog__content) {
  padding: 10px 20px 15px;
  max-height: none;
  overflow: visible;
}

:deep(.confirm-dialog-content) {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

:deep(.confirm-price) {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

:deep(.confirm-tip) {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  margin-bottom: 3px;
  text-align: left;
  align-self: flex-start;
}

:deep(.warning-list) {
  width: 100%;
  text-align: left;
  margin-top: 0;
}

:deep(.warning-item) {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
  position: relative;
  padding-left: 12px;
}

:deep(.warning-item:before) {
  content: "•";
  position: absolute;
  left: 0;
  color: #666;
}

:deep(.warning-item:last-child) {
  margin-bottom: 0;
}

:deep(.custom-dialog .van-dialog__footer) {
  display: flex;
  border-top: 1px solid #eee;
}

:deep(.custom-dialog .van-button) {
  flex: 1;
  height: 44px;
  font-size: 16px;
  border: none;
  border-radius: 0;
  margin: 0;
}

:deep(.custom-dialog .van-dialog__cancel) {
  color: #333;
}

:deep(.custom-dialog .van-dialog__confirm) {
  color: #f44336;
  font-weight: normal;
}
</style>