zianxin/pj_admin_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:支付方式

Browse Source
This commit is contained in:
dzc committed 2025-10-21 16:44:03 +08:00
1 parent 99e4f28b3e
commit 6fc521b8bd
4 files changed
+14 -259
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/DictSelect/index.vue
+3 -1
View File
@@ -1,6 +1,6 @@
<template>
<el-select style="width: 100%" v-model="state.selectId" :placeholder="props.placeholder" clearable
@visible-change="(e: boolean) => e && getDictOptions()">
:multiple="props.multiple" @visible-change="(e: boolean) => e && getDictOptions()">
<el-option v-for="v in filterDictList" :key="v.code" :label="v.label" :value="v.value" />
</el-select>
</template>
@@ -16,9 +16,11 @@ export type Props = {
dictCode: string
placeholder?: string
hideIds?: string | Array<string>
multiple?: boolean
}
const props = withDefaults(defineProps<Props>(), {
placeholder: "请选择",
multiple: false,
})
const state = reactive<any>({
src/utils/jsonp.ts
+7 -50
View File
@@ -7,7 +7,6 @@ interface JsonpOptions {
timeout?: number
callbackName?: string
callbackParam?: string
debug?: boolean
}
/**
@@ -18,17 +17,11 @@ interface JsonpOptions {
*/
export function jsonp(url: string, options: JsonpOptions = {}): Promise<any> {
const {
timeout = 15000,
timeout = 10000,
callbackName = `jsonp_callback_${Date.now()}_${Math.random().toString(36).substr(2)}`,
callbackParam = "callback",
debug = false
} = options
if (debug) {
console.log('[JSONP] 发起请求:', url)
console.log('[JSONP] 回调函数名:', callbackName)
}
return new Promise((resolve, reject) => {
// 创建 script 标签
const script = document.createElement("script")
@@ -36,11 +29,7 @@ export function jsonp(url: string, options: JsonpOptions = {}): Promise<any> {
// 设置超时
const timer = setTimeout(() => {
cleanup()
const error = new Error(`JSONP request timeout after ${timeout}ms`)
if (debug) {
console.error('[JSONP] 请求超时:', error)
}
reject(error)
reject(new Error("JSONP request timeout"))
}, timeout)
// 清理函数
@@ -56,34 +45,22 @@ export function jsonp(url: string, options: JsonpOptions = {}): Promise<any> {
// 设置全局回调函数
;(window as any)[callbackName] = (data: any) => {
if (debug) {
console.log('[JSONP] 收到响应:', data)
}
cleanup()
resolve(data)
}
// 处理错误
script.onerror = (event) => {
script.onerror = () => {
cleanup()
const error = new Error("JSONP request failed to load script")
if (debug) {
console.error('[JSONP] 脚本加载失败:', event)
}
reject(error)
reject(new Error("JSONP request failed"))
}
// 构建请求 URL
const separator = url.includes("?") ? "&" : "?"
const requestUrl = `${url}${separator}${callbackParam}=${callbackName}`
if (debug) {
console.log('[JSONP] 完整请求URL:', requestUrl)
}
// 发起请求
script.src = requestUrl
script.async = true
document.head.appendChild(script)
})
}
@@ -93,11 +70,9 @@ export function jsonp(url: string, options: JsonpOptions = {}): Promise<any> {
*/
export class TencentMapAPI {
private apiKey: string
private debug: boolean
constructor(apiKey: string, debug: boolean = false) {
constructor(apiKey: string) {
this.apiKey = apiKey
this.debug = debug
}
/**
@@ -109,17 +84,8 @@ export class TencentMapAPI {
async reverseGeocode(lat: number, lng: number): Promise<any> {
const url = `https://apis.map.qq.com/ws/geocoder/v1/?location=${lat},${lng}&key=${this.apiKey}&get_poi=1&output=jsonp`
if (this.debug) {
console.log('[TencentMapAPI] 逆地址解析请求:', { lat, lng })
}
try {
const data = await jsonp(url, { debug: this.debug })
if (this.debug) {
console.log('[TencentMapAPI] 逆地址解析响应:', data)
}
const data = await jsonp(url)
return data
} catch (error) {
console.error("逆地址解析失败:", error)
@@ -138,17 +104,8 @@ export class TencentMapAPI {
keyword,
)}&page_size=10&page_index=1&key=${this.apiKey}&output=jsonp`
if (this.debug) {
console.log('[TencentMapAPI] 地址搜索请求:', { keyword, boundary })
}
try {
const data = await jsonp(url, { debug: this.debug })
if (this.debug) {
console.log('[TencentMapAPI] 地址搜索响应:', data)
}
const data = await jsonp(url)
return data
} catch (error) {
console.error("地址搜索失败:", error)
src/views/hard/hard-order/index.vue
+4
View File
@@ -30,6 +30,10 @@
<el-form-item style="width: 250px" label="用餐时间段" prop="hourType">
<dict-select v-model="state.queryForm.hourType" dict-code="daily_menu" />
</el-form-item>
<el-form-item style="width: 300px" label="支付方式" prop="orderStatusCodes">
<dict-select v-model="state.queryForm.orderStatusCodes" dict-code="hard_pay_type"
multiple />
</el-form-item>
<el-form-item style="width: 300px" label="订单状态" prop="orderStatus">
<dict-select v-model="state.queryForm.orderStatus" dict-code="hard_order_status" />
</el-form-item>
src/views/test-jsonp.vue
-208
View File
@@ -1,208 +0,0 @@
<template>
<div class="test-jsonp-page">
<h2>JSONP 跨域测试页面</h2>
<div class="test-section">
<h3>1. 逆地址解析测试</h3>
<el-button @click="testReverseGeocode" type="primary">
测试逆地址解析 (北京天安门)
</el-button>
<div v-if="reverseResult" class="result">
<p><strong>结果:</strong> {{ reverseResult }}</p>
</div>
</div>
<div class="test-section">
<h3>2. 地址搜索测试</h3>
<el-input
v-model="searchKeyword"
placeholder="输入搜索关键词"
style="width: 300px; margin-right: 10px;"
/>
<el-button @click="testSearch" type="primary">搜索</el-button>
<div v-if="searchResults.length > 0" class="result">
<p><strong>搜索结果:</strong></p>
<ul>
<li v-for="(item, index) in searchResults" :key="index">
{{ item.title }} - {{ item.address }}
</li>
</ul>
</div>
</div>
<div class="test-section">
<h3>3. 地图选择器组件测试</h3>
<map-select
ref="mapSelectRef"
v-model="selectedLocation"
placeholder="点击选择位置"
style="width: 400px;"
/>
<div v-if="selectedLocation" class="result">
<p><strong>选中位置:</strong></p>
<p>地址: {{ selectedLocation.address }}</p>
<p>坐标: {{ selectedLocation.coordinates }}</p>
</div>
</div>
<div class="logs">
<h3>日志信息</h3>
<div class="log-content">
<div v-for="(log, index) in logs" :key="index" class="log-item">
{{ log }}
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ElButton, ElInput, ElMessage } from 'element-plus'
import { TencentMapAPI } from '../utils/jsonp'
import MapSelect from '../components/map/map-select.vue'
// 创建腾讯地图API实例 (启用调试模式)
const mapAPI = new TencentMapAPI('CGABZ-3MH66-6VGST-MEMS3-K6U3V-DGBKA', true)
// 定义类型
interface LocationData {
address: string
coordinates: string
location: {
lat: number
lng: number
}
}
// 响应式数据
const reverseResult = ref('')
const searchKeyword = ref('北京大学')
const searchResults = ref<any[]>([])
const selectedLocation = ref<LocationData | null>(null)
const logs = ref<string[]>([])
// 添加日志
const addLog = (message: string) => {
const timestamp = new Date().toLocaleTimeString()
logs.value.unshift(`[${timestamp}] ${message}`)
if (logs.value.length > 10) {
logs.value.pop()
}
}
// 测试逆地址解析
const testReverseGeocode = async () => {
addLog('开始测试逆地址解析...')
try {
// 北京天安门坐标
const data = await mapAPI.reverseGeocode(39.908823, 116.397470)
if (data.status === 0) {
reverseResult.value = data.result.address
addLog(`逆地址解析成功: ${data.result.address}`)
ElMessage.success('逆地址解析成功')
} else {
addLog(`逆地址解析失败: ${data.message}`)
ElMessage.error('逆地址解析失败')
}
} catch (error) {
addLog(`逆地址解析错误: ${error}`)
ElMessage.error('逆地址解析错误')
console.error('逆地址解析错误:', error)
}
}
// 测试地址搜索
const testSearch = async () => {
if (!searchKeyword.value.trim()) {
ElMessage.warning('请输入搜索关键词')
return
}
addLog(`开始搜索: ${searchKeyword.value}`)
try {
const data = await mapAPI.searchLocation(searchKeyword.value)
if (data.status === 0) {
searchResults.value = data.data.map((item: any) => ({
title: item.title,
address: item.address,
location: item.location
}))
addLog(`搜索成功，找到 ${searchResults.value.length} 个结果`)
ElMessage.success(`搜索成功，找到 ${searchResults.value.length} 个结果`)
} else {
addLog(`搜索失败: ${data.message}`)
ElMessage.error('搜索失败')
}
} catch (error) {
addLog(`搜索错误: ${error}`)
ElMessage.error('搜索错误')
console.error('搜索错误:', error)
}
}
</script>
<style scoped>
.test-jsonp-page {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
.test-section {
margin-bottom: 30px;
padding: 20px;
border: 1px solid #e4e7ed;
border-radius: 8px;
background-color: #fafafa;
}
.test-section h3 {
margin-top: 0;
color: #409eff;
}
.result {
margin-top: 15px;
padding: 10px;
background-color: #f0f9ff;
border: 1px solid #b3d8ff;
border-radius: 4px;
}
.result ul {
margin: 5px 0;
padding-left: 20px;
}
.logs {
margin-top: 30px;
padding: 20px;
border: 1px solid #e4e7ed;
border-radius: 8px;
background-color: #f8f9fa;
}
.logs h3 {
margin-top: 0;
color: #67c23a;
}
.log-content {
max-height: 200px;
overflow-y: auto;
font-family: 'Courier New', monospace;
font-size: 12px;
}
.log-item {
padding: 2px 0;
border-bottom: 1px solid #eee;
}
.log-item:last-child {
border-bottom: none;
}
</style>