f-web/src/modules/dj/views/test.vue

<!-- eslint-disable prettier/prettier -->
<!-- eslint-disable prettier/prettier -->
<template>
  <div class="test">
    <div class="tip custom-block"></div>
    <el-card shadow="never">
      <template #header>
        <div class="card-header">
          <span>在线调试</span>
          <el-link type="primary" href="https://doc.apipost.net/docs/detail/3a406d7ed003000?target_id=2406377fb07129"
            target="_blank">点击查看对接文档</el-link>
        </div>
      </template>
      <el-form :model="form" label-width="200px">
        <el-form-item label="商户号(mchId)" required>
          <el-input v-model="form.mchId" />
        </el-form-item>
        <el-form-item label="密钥(key)" required>
          <el-input v-model="key" />
        </el-form-item>
        <el-form-item label="商户订单号(outOrderNo)" required>
          <el-input v-model="form.outOrderNo" style="width: 80%;"></el-input>
          <el-button type="primary" style="margin-left: 2px;" @click="makeKey()">自动生成</el-button>
        </el-form-item>
        <el-form-item label="金额(amount)" required>
          <el-input-number :min="1" :max="99999" :precision="2" v-model="form.amount" />
        </el-form-item>
        <el-form-item label="货币单位(currency)" required>
          <el-input v-model="form.currency" />
        </el-form-item>
        <el-form-item label="支付类型(payType)" required>
          <el-input v-model="form.payType" />
        </el-form-item>
        <el-form-item label="平台用户ID(userId)" required>
          <el-input v-model="form.userId" />
        </el-form-item>
        <el-form-item label="平台用户IP(userIp)">
          <el-input v-model="form.userIp" />
        </el-form-item>
        <el-form-item label="同步跳转地址(returnUrl)">
          <el-input v-model="form.returnUrl" />
        </el-form-item>
        <el-form-item label="支付回调地址(notifyUrl)" required>
          <el-input v-model="form.notifyUrl" />
        </el-form-item>
        <el-form-item label="待签字符串">
          <code>{{ signStr }}</code>
        </el-form-item>
        <el-form-item label="签名(sign)" required>
          <el-input v-model="sign" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="onSubmit">确认</el-button>
          <el-button @click="onReset" :loading="loading">重置</el-button>
        </el-form-item>
        <el-form-item label="接口返回(JSON)" required>
          <el-input v-model="data" :rows="6" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-link v-if="payUrl" type="primary" :href="payUrl" target="_blank">前往支付页面</el-link>
          <el-link v-if="formText" type="primary" @click="toFormPay">前往支付页面</el-link>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" name="test" setup>
import { useCool } from "/@/cool";
import { ref, computed } from "vue";
import md5 from "md5";
import dayjs from "dayjs";

const { service } = useCool();
const loading = ref(false);

function makeKey() {
  form.value.outOrderNo = "TEST" + dayjs().format("YYYYMMDDHHmmss");
}

function toFormPay() {
  document.write(formText.value);
}

const key = ref("32394ae8b550485c53326f10764f8492");

const defaultForm = {
  mchId: "TEST",
  outOrderNo: "",
  notifyUrl: "http://157.175.73.225/api/admin/dj/open/notifyTest",
  returnUrl: "https://www.baidu.com",
  amount: 100,
  payType: "",
  userIp: "127.0.0.1",
  userId: "test",
  currency: 'USD'
};
const form = ref({
  ...defaultForm
});

const payUrl = ref("");

const formText = ref("");

const onSubmit = async () => {
  loading.value = true;
  try {
    const res = await service.dj.open.order({
      ...form.value,
      sign: sign.value
    });
    data.value = JSON.stringify(res);
    payUrl.value = res.payUrl || "";
    formText.value = res.form || "";
  } catch (err) {
    data.value = JSON.stringify(err);
  }
  loading.value = false;
};

const signStr = computed(() => {
  return signSort(form.value) + `&key=${key.value}`;
});

const sign = computed(() => {
  return md5(signSort(form.value) + `&key=${key.value}`);
});

const data = ref("");

function signSort(args: any) {
  var keys = Object.keys(args);
  keys = keys.sort();
  var newArgs = {};
  keys.forEach(function (key) {
    newArgs[key] = args[key];
  });

  var string = "";
  for (var k in newArgs) {
    string += "&" + k + "=" + newArgs[k];
  }
  string = string.substr(1);
  return string;
}

const onReset = () => {
  form.value = {
    ...defaultForm
  };
};
</script>

<style lang="scss">
.test {
  padding: 0 16px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>