feat http请求结果不做统一处理

This commit is contained in:
DaxPay
2025-03-29 09:40:01 +08:00
parent 0ac629ea9f
commit acbf61d85b
3 changed files with 119 additions and 113 deletions

View File

@@ -1,23 +1,19 @@
// axios配置 可自行根据项目进行更改,只需更改该文件即可,其他文件可以不动 // axios配置 可自行根据项目进行更改,只需更改该文件即可,其他文件可以不动
import type { AxiosResponse } from 'axios' import type { AxiosResponse } from "axios";
import axios from 'axios' import axios from "axios";
import { showDialog, showFailToast } from 'vant' import { showDialog, showFailToast } from "vant";
import { VAxios } from './Axios' import { VAxios } from "./Axios";
import type { AxiosTransform } from './axiosTransform' import type { AxiosTransform } from "./axiosTransform";
import { checkStatus } from './checkStatus' import { checkStatus } from "./checkStatus";
import { formatRequestDate, joinTimestamp } from './helper' import { formatRequestDate, joinTimestamp } from "./helper";
import type { CreateAxiosOptions, RequestOptions } from './types' import type { CreateAxiosOptions, RequestOptions } from "./types";
import { ContentTypeEnum, RequestEnum, ResultEnum } from '@/enums/httpEnum' import { ContentTypeEnum, RequestEnum, ResultEnum } from "@/enums/httpEnum";
import { PageEnum } from '@/enums/pageEnum' import { useGlobSetting } from "@/hooks/setting";
import { useGlobSetting } from '@/hooks/setting'
import { isString } from '@/utils/is/' import { isString } from "@/utils/is/";
import { deepMerge, isUrl } from '@/utils' import { deepMerge, isUrl } from "@/utils";
import { setObjToUrlParams } from '@/utils/urlUtils' import { setObjToUrlParams } from "@/utils/urlUtils";
import type { Result } from "#/axios";
import router from '@/router'
import { storage } from '@/utils/Storage'
import type { Result } from '#/axios'
const globSetting = useGlobSetting() const globSetting = useGlobSetting()
const urlPrefix = globSetting.urlPrefix const urlPrefix = globSetting.urlPrefix
@@ -87,12 +83,11 @@ const transform: AxiosTransform = {
} }
// 接口请求成功,直接返回相应结果 // 接口请求成功,直接返回相应结果
if (code==ResultEnum.SUCCESS) { if (code == ResultEnum.SUCCESS) {
return result return result
} }
// 接口请求错误,统一提示错误信息 这里逻辑可以根据项目进行修改 // 接口请求错误,统一提示错误信息 这里逻辑可以根据项目进行修改
const errorMsg = msg throw new Error(msg)
throw new Error(errorMsg)
}, },
// 请求之前处理config // 请求之前处理config
@@ -214,7 +209,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
// 是否返回原生响应头 比如:需要获取响应头时使用该属性 // 是否返回原生响应头 比如:需要获取响应头时使用该属性
isReturnNativeResponse: false, isReturnNativeResponse: false,
// 需要对返回数据进行处理 // 需要对返回数据进行处理
isTransformResponse: true, isTransformResponse: false,
// post请求的时候添加参数到url // post请求的时候添加参数到url
joinParamsToUrl: false, joinParamsToUrl: false,
// 格式化提交参数时间 // 格式化提交参数时间

View File

@@ -14,7 +14,7 @@ export function getOrderAndConfig(orderNo) {
/** /**
* 发起支付 * 发起支付
*/ */
export function payOrder(data:payParam){ export function payOrder(data: payParam) {
return http.request<Result<payConfig>>({ return http.request<Result<payConfig>>({
url: '/unipay/gateway/pay', url: '/unipay/gateway/pay',
method: 'POST', method: 'POST',
@@ -22,7 +22,6 @@ export function payOrder(data:payParam){
}) })
} }
/** /**
* 收银台配置 * 收银台配置
*/ */
@@ -49,7 +48,7 @@ export interface GatewayOrder {
description?: string description?: string
/** 金额(元) */ /** 金额(元) */
amount?: number amount?: number
expiredTime?: string; expiredTime?: string
} }
/** /**
* 聚合支付配置信息 * 聚合支付配置信息
@@ -100,26 +99,26 @@ export interface CashierConfig {
/** /**
* 支付配置项参数 * 支付配置项参数
*/ */
export interface payParam{ export interface payParam {
// 订单号 // 订单号
orderNo?:string, orderNo?: string
//支付配置项ID // 支付配置项ID
itemId?:number, itemId?: number
// 唯一标识 // 唯一标识
openId?:string, openId?: string
// 付款码 // 付款码
anthCode?:string, anthCode?: string
} }
/** /**
* 支付配置项参数返回值 * 支付配置项参数返回值
*/ */
export interface payConfig{ export interface payConfig {
// 商户订单号 // 商户订单号
bizOrderNo?:string, bizOrderNo?: string
// 订单号 // 订单号
orderNo?:string, orderNo?: string
//支付状态 // 支付状态
status?:string, status?: string
//支付参数体 // 支付参数体
payBody?:string payBody?: string
} }

View File

@@ -3,7 +3,9 @@
<div class="cash_topBox"> <div class="cash_topBox">
<div class="payPrice"> <div class="payPrice">
<span class="unit"></span> <span class="unit"></span>
<div class="price">{{ orderAndConfig.order.amount }} </div> <div class="price">
{{ orderAndConfig.order.amount }}
</div>
</div> </div>
<div class="excessTime"> <div class="excessTime">
<span class="exTitle">剩余支付时间</span> <span class="exTitle">剩余支付时间</span>
@@ -12,13 +14,17 @@
<span class="number">{{ orderTime.currentSeconds }}</span> <span class="number">{{ orderTime.currentSeconds }}</span>
</div> </div>
<div class="payMessItem"> <div class="payMessItem">
<div class="itemTitle">标题:</div> <div class="itemTitle">
标题:
</div>
<div class="itemContent"> <div class="itemContent">
{{ orderAndConfig.order.title }} {{ orderAndConfig.order.title }}
</div> </div>
</div> </div>
<div class="payMessItem"> <div class="payMessItem">
<div class="itemTitle">订单编号:</div> <div class="itemTitle">
订单编号:
</div>
<div class="itemContent"> <div class="itemContent">
{{ orderAndConfig.order.orderNo }} {{ orderAndConfig.order.orderNo }}
</div> </div>
@@ -34,151 +40,155 @@
@click="payTypeClick(item)" @click="payTypeClick(item)"
> >
<div class="itemType"> <div class="itemType">
<img src="@/assets/images/new_wx_pay.png" alt="" v-if="item.icon == 'wechat'" /> <img v-if="item.icon == 'wechat'" src="@/assets/images/new_wx_pay.png" alt="">
<img src="@/assets/images/zfb_pay.png" alt="" v-if="item.icon == 'alipay'" /> <img v-if="item.icon == 'alipay'" src="@/assets/images/zfb_pay.png" alt="">
<!-- <img src="@/assets/images/quick_pay.png" alt=""> --> <!-- <img src="@/assets/images/quick_pay.png" alt=""> -->
<p>{{ item.name }}</p> <p>{{ item.name }}</p>
<span v-if="item.recommend"> 推荐</span> <span v-if="item.recommend"> 推荐</span>
</div> </div>
<div class="selectBox"> <div class="selectBox">
<img v-if="item.id === selectId" src="@/assets/images/selected-arrow-icon.png" alt="" /> <img v-if="item.id === selectId" src="@/assets/images/selected-arrow-icon.png" alt="">
</div> </div>
</div> </div>
</div> </div>
<div class="payBtnBox" @click="payClick" v-if="selectId"> <div v-if="selectId" class="payBtnBox" @click="payClick">
支付<span>{{ orderAndConfig.order.amount }}</span> 支付<span>{{ orderAndConfig.order.amount }}</span>
</div> </div>
<div class="payBtnBox noSelect" v-else> <div v-else class="payBtnBox noSelect">
支付<span>{{ orderAndConfig.order.amount }}</span> 支付<span>{{ orderAndConfig.order.amount }}</span>
</div> </div>
</div> </div>
<!-- loading --> <!-- loading -->
<div class="loadingMask hide" id="loadingMask" v-if="loading"> <div v-if="loading" id="loadingMask" class="loadingMask hide">
<div class="content"> <div class="content">
<img class="loadingImg" src="@/assets/images/loading.png" alt="" /> <img class="loadingImg" src="@/assets/images/loading.png" alt="">
<div class="loadingTxt">处理中请耐心等待</div> <div class="loadingTxt">
处理中请耐心等待
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, onUnmounted, reactive, ref } from "vue"; import { onMounted, onUnmounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from 'vue-router'
import type { OrderAndConfig, payConfig } from "@/views/daxpay/cashier/Cashier.api"; import type { OrderAndConfig } from '@/views/daxpay/cashier/Cashier.api'
import { getOrderAndConfig, payOrder } from "@/views/daxpay/cashier/Cashier.api"; import { getOrderAndConfig, payOrder } from '@/views/daxpay/cashier/Cashier.api'
const route = useRoute(); const route = useRoute()
const router = useRouter(); const router = useRouter()
//获取传入的参数 // 获取传入的参数
const { code: orderNo } = route.params; const { code: orderNo } = route.params
//储存初始化的数据 // 储存初始化的数据
const orderAndConfig = ref<OrderAndConfig>(); const orderAndConfig = ref<OrderAndConfig>()
// 选中的支付方式 // 选中的支付方式
const selectId = ref<string>(); const selectId = ref<string>()
function payTypeClick(item) { function payTypeClick(item) {
selectId.value = item.id; selectId.value = item.id
} }
// 倒计时对象 // 倒计时对象
const orderTime = reactive({ const orderTime = reactive({
totalTme: 0, // 总共时间 totalTme: 0, // 总共时间
currentMinute: "00", // 当前分钟 currentMinute: '00', // 当前分钟
currentSeconds: "00", // 当前秒数 currentSeconds: '00', // 当前秒数
}); })
// 定时器 // 定时器
const { pause, resume } = useIntervalFn(() => { const { pause, resume } = useIntervalFn(() => {
getMinter(); //每秒获取分秒方法 getMinter() // 每秒获取分秒方法
}, 1000); }, 1000)
// 格式化时间 // 格式化时间
function formatTime(time: number) { function formatTime(time: number) {
return time.toString().padStart(2, "0"); return time.toString().padStart(2, '0')
} }
//获取倒计时秒数 // 获取倒计时秒数
function getDownTotalTime(expiredTime: any) { function getDownTotalTime(expiredTime: any) {
let nowTime = new Date(); //获取当前时间 const nowTime = new Date() // 获取当前时间
let excessTime = new Date(expiredTime); //获取失效时间 const excessTime = new Date(expiredTime) // 获取失效时间
let interval = excessTime.getTime() - nowTime.getTime(); //获取倒计时毫秒数 const interval = excessTime.getTime() - nowTime.getTime() // 获取倒计时毫秒数
if (interval > 0) { if (interval > 0) {
orderTime.totalTme = Math.floor(interval / 1000); orderTime.totalTme = Math.floor(interval / 1000)
} else { }
console.log("失效了"); else {
console.log('失效了')
} }
} }
//获取分秒 // 获取分秒
function getMinter() { function getMinter() {
orderTime.totalTme--; orderTime.totalTme--
orderTime.currentMinute = formatTime(Math.floor(orderTime.totalTme / 60)); orderTime.currentMinute = formatTime(Math.floor(orderTime.totalTme / 60))
orderTime.currentSeconds = formatTime(Math.floor(orderTime.totalTme % 60)); orderTime.currentSeconds = formatTime(Math.floor(orderTime.totalTme % 60))
} }
//监听倒计时,到时间跳转超时页面 // 监听倒计时,到时间跳转超时页面
watch( watch(
() => orderTime.totalTme, () => orderTime.totalTme,
(newValue) => { (newValue) => {
if (newValue == 0) { if (newValue == 0) {
router.replace("/PayExcessTime"); router.replace('/PayExcessTime')
} }
} },
); )
const loading = ref(false); const loading = ref(false)
// 发起支付 // 发起支付
function payClick() { function payClick() {
loading.value = true; loading.value = true
const form = { const form = {
orderNo: orderNo, orderNo,
itemId: selectId.value, itemId: selectId.value,
}; }
payOrder(form as any) payOrder(form as any)
.then(({ data }) => { .then(({ data }) => {
loading.value = false; console.log(data)
location.replace(data.payBody as any); // loading.value = false
// location.replace(data.payBody as any)
}) })
.catch((error) => { .catch((error) => {
console.log(error); console.log(error)
}); })
} }
onMounted(() => { onMounted(() => {
init(); init()
}); })
onUnmounted(() => { onUnmounted(() => {
pause(); pause()
}); })
/** /**
* 初始化 * 初始化
*/ */
function init() { function init() {
getOrderAndConfig(orderNo).then(({ data, code, msg }) => { getOrderAndConfig(orderNo).then(({ data, code, msg }) => {
if (code != 0) { if (code !== 0) {
//如果异常,跳转异常页面 // 如果异常,跳转异常页面
router.replace({ router.replace({
path: "/PayExcessTime", path: '/PayExcessTime',
query: { msg }, query: { msg },
}); })
return; return
} }
orderAndConfig.value = data; //赋值初始化数据 orderAndConfig.value = data // 赋值初始化数据
getDownTotalTime(data.order.expiredTime); //计算倒计时 getDownTotalTime(data.order.expiredTime) // 计算倒计时
getMinter(); //先执行一下 解决进入页面一秒后才显示倒计时 getMinter() // 先执行一下 解决进入页面一秒后才显示倒计时
resume(); //开启倒计时 resume() // 开启倒计时
}) })
.catch((error) => { .catch((error) => {
console.log(error); console.log(error)
}); })
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.cashier { .cashier {
font-family: "Microsoft YaHei", "微软雅黑", sans-serif; font-family: 'Microsoft YaHei', '微软雅黑', sans-serif;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background-color: #f5f5f5; background-color: #f5f5f5;
@@ -315,7 +325,9 @@ function init() {
width: 15rem; width: 15rem;
background: #ffffff; background: #ffffff;
border-radius: 0.2rem; border-radius: 0.2rem;
box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.03), 0px 9px 28px 0px rgba(0, 0, 0, 0.05), box-shadow:
0px 12px 48px 16px rgba(0, 0, 0, 0.03),
0px 9px 28px 0px rgba(0, 0, 0, 0.05),
0px 6px 16px -8px rgba(0, 0, 0, 0.08); 0px 6px 16px -8px rgba(0, 0, 0, 0.08);
display: flex; display: flex;
left: 50%; left: 50%;