web/pages/bulletin/modules/pay.vue

<template>
  <h2 class="title">
    下载本报告（PDF+PPT），需要支付
    <span class="price">{{ detail.useDownPayPrice }}</span> 元
  </h2>
  <h3>请选择支付方式</h3>
  <div class="pay-container">
    <div class="pay-box" @click="handlePay(isMobile() ? 'zfb_h5' : 'zfb')">
      <div class="pay-name">
        <span class="bqfl-iconfont icon-zhifubao f30 color1296DB mr5"></span>
        <span>支付宝支付</span>
      </div>
    </div>
    <div class="pay-box" @click="handlePay(isMobile() ? 'wx_h5' : 'wx')">
      <div class="pay-name">
        <span class="bqfl-iconfont icon-weixinzhifu f30 color00C800 mr5"></span>
        <span>微信支付</span>
      </div>
    </div>
  </div>

  <n-modal :show="toolsVisible" preset="dialog" :title="toolsTitle" :showIcon="false" @close="toolsVisible = false" @esc="toolsVisible = false" @mask-click="toolsVisible = false" :class="{ 'login-dialog': !pcShow }">
  </n-modal>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { createDiscreteApi } from "naive-ui";
const emit = defineEmits(["closeToolsDialog", "openWXCode"]);
const props = defineProps({
  detail: {
    type: Object,
    default: () => {},
  },
});

const handlePay = async (payMethod: string) => {
  const { code, data } = await getPayOrder_Api({
    researchBriefReportId: props.detail.id,
    payMethod: payMethod,
    payPrice: props.detail.useDownPayPrice,
  });
  if (code === 200) {
    if (payMethod == "wx") {
      emit("openWXCode", data);
    } else {
      downloadFile(data?.orderPayUrl);
      emit("closeToolsDialog", "zfbPayEnd");
    }
  }
};

onMounted(() => {
  console.log("isMobile===>", isMobile());
});

const NMessage = createDiscreteApi(["message"]);
const errorMsg = (msg: any) => {
  NMessage.message.error(msg || "服务端异常");
};
</script>

<style lang="scss" scoped>
.title {
  text-align: center;

  .price {
    color: #ff0000;
  }
}
h3 {
  text-align: center;
}
.pay-container {
  padding: 0 30px;
  .pay-box {
    width: 230px;
    background: #ffffff;
    margin: 0 auto 20px;
    cursor: pointer;
    border-radius: 10px;
    border: 1px solid #ccc;

    &:last-child {
      .img {
        border-color: #0090ff;
      }
    }

    .pay-name {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size: 18px;
      color: #1a1a1a;
    }
  }
}
</style>