206 lines
4.2 KiB
Vue
206 lines
4.2 KiB
Vue
<template>
|
||
<!-- 页面根容器，灰色背景 -->
|
||
<view class="page">
|
||
|
||
<!-- ===== 分组：账号设置 ===== -->
|
||
<view class="group">
|
||
<!-- 分组标题 -->
|
||
<text class="group-title">base url</text>
|
||
<!-- 列表容器（白色卡片） -->
|
||
<view class="group-body">
|
||
<!-- 列表项：点击跳转或弹窗编辑 -->
|
||
<view class="cell" @tap="onEditApiUrl">
|
||
<text class="cell-value">{{ useConfig.getApiBaseUrl() || '未设置' }}</text>
|
||
</view>
|
||
<view class="btn-wrapper">
|
||
<button v-if="!isTesting" class="save-btn" @tap="onTest">测试连接</button>
|
||
<button v-if="isTesting" class="save-btn" disabled>正在测试...</button>
|
||
</view>
|
||
<view v-if="isTested&&!isTesting" :class="isTestok ? 'result success' : 'result error'">
|
||
{{ isTestok ? '✅ 连接成功' : '❌ 连接失败' }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- ====================== 这里是居中的按钮 ====================== -->
|
||
|
||
|
||
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref,onMounted } from 'vue'
|
||
import { isUrl } from '@/utils/index.js'
|
||
import { useConfigStore } from '../../stores/config'
|
||
|
||
const useConfig=useConfigStore()
|
||
|
||
// ---- 响应式状态 ----
|
||
const isTested=ref(false)//是否点了测试
|
||
const isTesting=ref(false)//是否正在测试
|
||
const isTestok=ref(false)//测试是否通过
|
||
|
||
// ---- 事件处理 ----
|
||
|
||
function onTest(){
|
||
//console.log("test")
|
||
isTested.value=true
|
||
isTesting.value=true
|
||
uni.request({
|
||
url: useConfig.getApiBaseUrl(),
|
||
method: 'GET',
|
||
timeout:1000,
|
||
success: (res) => {
|
||
//console.log('成功', res.data)
|
||
if(res.data.return.isOpsApiRoot==true){
|
||
isTestok.value=true
|
||
}
|
||
|
||
},
|
||
fail: (err) => {
|
||
//console.log('失败', err)
|
||
isTestok.value=false
|
||
},
|
||
complete() {
|
||
// 这个回调不管成功失败**一定**会执行
|
||
//console.log('请求完成')
|
||
isTesting.value=false
|
||
}
|
||
})
|
||
|
||
}
|
||
|
||
// 点击 API URL → 弹出输入框（示例用 uni.showModal 简单实现）
|
||
function onEditApiUrl() {
|
||
// 实际可跳转子页面或弹出自定义弹窗
|
||
uni.showModal({
|
||
title: 'API Base URL',
|
||
editable: true,
|
||
placeholderText: 'https://example.com',
|
||
content: useConfig.getApiBaseUrl(),
|
||
success(res) {
|
||
if (res.confirm) {
|
||
console.log(res)
|
||
if (isUrl(res.content)){
|
||
useConfig.setApiBaseUrl(res.content)
|
||
console.log(res.content,":ok")
|
||
|
||
}else{
|
||
console.log(res.content,":not a url")
|
||
}
|
||
|
||
|
||
|
||
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
onMounted(()=>{
|
||
|
||
})
|
||
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 页面底色 */
|
||
.page {
|
||
min-height: 100vh;
|
||
background-color: #f2f2f7; /* iOS 系统级灰色 */
|
||
padding-top: 20rpx;
|
||
}
|
||
|
||
/* 分组间距 */
|
||
.group {
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
/* 分组标题：小号灰色，左侧缩进 */
|
||
.group-title {
|
||
font-size: 24rpx;
|
||
color: #8e8e93;
|
||
padding: 0 32rpx 12rpx;
|
||
}
|
||
|
||
/* 白色卡片容器 */
|
||
.group-body {
|
||
background-color: #ffffff;
|
||
border-radius: 12rpx;
|
||
margin: 0 24rpx;
|
||
overflow: hidden; /* 保证圆角裁剪子项 */
|
||
}
|
||
|
||
/* 每一行 cell */
|
||
.cell {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 32rpx;
|
||
height: 96rpx;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
/* 点击高亮（uni-app 用 hover-class 实现，这里仅演示结构） */
|
||
.cell:active {
|
||
background-color: #f2f2f7;
|
||
}
|
||
|
||
/* 左侧标签 */
|
||
.cell-label {
|
||
font-size: 30rpx;
|
||
color: #1c1c1e;
|
||
}
|
||
|
||
/* 右侧容器（值 + 箭头） */
|
||
.cell-right {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
gap: 8rpx;
|
||
}
|
||
|
||
/* 右侧当前值 */
|
||
.cell-value {
|
||
font-size: 28rpx;
|
||
color: #8e8e93;
|
||
max-width: 300rpx; /* 防止超长文本撑破布局 */
|
||
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
/* 右箭头 */
|
||
.cell-arrow {
|
||
font-size: 36rpx;
|
||
color: #c7c7cc;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* switch 开关右对齐 */
|
||
.cell-switch {
|
||
transform: scale(0.85); /* 微调大小 */
|
||
}
|
||
|
||
/* 分割线：左侧缩进，不跨满 */
|
||
.divider {
|
||
height: 1rpx;
|
||
background-color: #e5e5ea;
|
||
margin-left: 32rpx; /* 左缩进，右边贴边，iOS 风格 */
|
||
}
|
||
|
||
/* 危险操作行（退出登录） */
|
||
.cell-danger {
|
||
justify-content: center; /* 文字居中 */
|
||
}
|
||
|
||
.cell-label-danger {
|
||
font-size: 30rpx;
|
||
color: #ff3b30; /* iOS 红色 */
|
||
}
|
||
</style>
|