mirror of
https://gitee.com/bootx/dax-pay-h5.git
synced 2025-10-15 14:40:27 +00:00
feat http请求结果不做统一处理
This commit is contained in:
@@ -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,
|
||||||
// 格式化提交参数时间
|
// 格式化提交参数时间
|
||||||
|
@@ -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
|
||||||
}
|
}
|
||||||
|
@@ -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%;
|
||||||
|
Reference in New Issue
Block a user