更新页面样式和结构，优化加载、错误和刷新页面的用户体验，调整Vite配置以使用生产环境API，新增订单详情展示功能，提升整体界面一致性和可读性
This commit is contained in:
yahaozhang
@@ -1,30 +1,70 @@
|
||||
<template>
|
||||
<div class="select-region-page">
|
||||
<div class="page-header">
|
||||
<h1 class="title">请选择您的账号类型</h1>
|
||||
<h1 class="title">订单详情</h1>
|
||||
</div>
|
||||
|
||||
<div class="region-buttons">
|
||||
<!-- 订单详情表格 -->
|
||||
<div class="order-details">
|
||||
<div class="detail-row">
|
||||
<div class="detail-label">代练大区</div>
|
||||
<div class="detail-label">状态</div>
|
||||
<div class="detail-label">打手信息</div>
|
||||
<div class="detail-label">目标点数</div>
|
||||
</div>
|
||||
<div class="detail-row detail-values">
|
||||
<div class="detail-value region-value">{{ selectedRegion || '未选择' }}</div>
|
||||
<div class="detail-value">待选区</div>
|
||||
<div class="detail-value">{{ mecmachineId || '待分配' }}</div>
|
||||
<div class="detail-value points-value">{{ totalPoints || 4000 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 选择大区输入框 -->
|
||||
<div class="region-selector">
|
||||
<input
|
||||
type="text"
|
||||
v-model="regionInput"
|
||||
placeholder="请选择大区"
|
||||
readonly
|
||||
class="region-input"
|
||||
/>
|
||||
<button
|
||||
@click="$emit('selectRegion', 'Q')"
|
||||
class="region-btn qq-btn"
|
||||
:disabled="submitting"
|
||||
:class="{ 'loading': submitting }"
|
||||
@click="confirmSelection"
|
||||
class="confirm-btn"
|
||||
:disabled="!selectedRegion || submitting"
|
||||
>
|
||||
<div v-if="submitting" class="loading-spinner small"></div>
|
||||
<div v-else class="btn-icon">Q</div>
|
||||
<span class="btn-text">{{ submitting ? '正在连接...' : 'QQ区' }}</span>
|
||||
确认选择
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 选择区域按钮 -->
|
||||
<div class="region-options">
|
||||
<button
|
||||
@click="selectRegionOption('Q')"
|
||||
class="option-btn qq-option"
|
||||
:class="{ 'selected': selectedRegion === 'QQ区' }"
|
||||
>
|
||||
<div class="option-icon qq-icon">
|
||||
<svg viewBox="0 0 24 24" width="32" height="32" fill="currentColor">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
</svg>
|
||||
</div>
|
||||
<span>QQ区</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="$emit('selectRegion', 'V')"
|
||||
class="region-btn wx-btn"
|
||||
:disabled="submitting"
|
||||
:class="{ 'loading': submitting }"
|
||||
@click="selectRegionOption('V')"
|
||||
class="option-btn wx-option"
|
||||
:class="{ 'selected': selectedRegion === '微信区' }"
|
||||
>
|
||||
<div v-if="submitting" class="loading-spinner small"></div>
|
||||
<div v-else class="btn-icon">V</div>
|
||||
<span class="btn-text">{{ submitting ? '正在连接...' : '微信区' }}</span>
|
||||
<div class="option-icon wx-icon">
|
||||
<svg viewBox="0 0 24 24" width="32" height="32" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
|
||||
<path d="M12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span>微信区</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -49,9 +89,37 @@ export default {
|
||||
mecmachineId: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
totalPoints: {
|
||||
type: Number,
|
||||
default: 4000
|
||||
}
|
||||
},
|
||||
emits: ['selectRegion']
|
||||
data() {
|
||||
return {
|
||||
selectedRegion: '',
|
||||
regionInput: '',
|
||||
regionCode: ''
|
||||
}
|
||||
},
|
||||
emits: ['selectRegion'],
|
||||
methods: {
|
||||
selectRegionOption(code) {
|
||||
this.regionCode = code
|
||||
if (code === 'Q') {
|
||||
this.selectedRegion = 'QQ区'
|
||||
this.regionInput = 'QQ区'
|
||||
} else if (code === 'V') {
|
||||
this.selectedRegion = '微信区'
|
||||
this.regionInput = '微信区'
|
||||
}
|
||||
},
|
||||
confirmSelection() {
|
||||
if (this.regionCode && !this.submitting) {
|
||||
this.$emit('selectRegion', this.regionCode)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -60,131 +128,213 @@ export default {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background: white;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
text-align: center;
|
||||
padding: 40px 20px 20px;
|
||||
color: white;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-bottom: 3px solid #4776e6;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 16px 0;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||||
margin: 0;
|
||||
color: #333;
|
||||
background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.region-buttons {
|
||||
/* 订单详情表格 */
|
||||
.order-details {
|
||||
background: white;
|
||||
margin: 16px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
padding: 12px 8px;
|
||||
text-align: center;
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #e9ecef;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.detail-values {
|
||||
background: white;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
padding: 12px 8px;
|
||||
text-align: center;
|
||||
border: 1px solid #e9ecef;
|
||||
border-top: none;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.region-value {
|
||||
color: #4CAF50;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.points-value {
|
||||
color: #f44336;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 选择大区区域 */
|
||||
.region-selector {
|
||||
margin: 16px;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.region-input {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
background: white;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.region-input::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
padding: 12px 24px;
|
||||
background: linear-gradient(135deg, #4776e6 0%, #8e54e9 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.confirm-btn:hover:not(:disabled) {
|
||||
opacity: 0.9;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.confirm-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 选择区域按钮 */
|
||||
.region-options {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 40px;
|
||||
padding: 0 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.region-btn {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
background: white;
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||
.option-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border: 3px solid transparent;
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
min-width: 120px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.region-btn:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
|
||||
.option-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.region-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.region-btn.loading {
|
||||
opacity: 0.8;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.region-btn.loading:hover {
|
||||
transform: none;
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
.option-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin-bottom: 12px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.qq-btn .btn-icon {
|
||||
.qq-icon {
|
||||
background: #12B7F5;
|
||||
}
|
||||
|
||||
.wx-btn .btn-icon {
|
||||
.wx-icon {
|
||||
background: #07C160;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
color: #333;
|
||||
.option-btn span {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid #667eea;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 16px;
|
||||
.option-btn.selected {
|
||||
border-color: #4776e6;
|
||||
background: #f3f4ff;
|
||||
}
|
||||
|
||||
.loading-spinner.small {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid #f3f3f3;
|
||||
border-top: 2px solid #667eea;
|
||||
margin: 0;
|
||||
.qq-option.selected {
|
||||
border-color: #12B7F5;
|
||||
background: #e3f2fd;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
.qq-option.selected span {
|
||||
color: #12B7F5;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.wx-option.selected {
|
||||
border-color: #07C160;
|
||||
background: #e8f5e9;
|
||||
}
|
||||
|
||||
.wx-option.selected span {
|
||||
color: #07C160;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.notice-text {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
background: #f8f9fa;
|
||||
border-top: 2px solid #e9ecef;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.notice-text p {
|
||||
margin: 4px 0;
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.machine-id-info {
|
||||
@@ -194,22 +344,37 @@ export default {
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.region-buttons {
|
||||
.detail-label,
|
||||
.detail-value {
|
||||
padding: 10px 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.region-selector {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.region-input,
|
||||
.confirm-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.region-options {
|
||||
gap: 20px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.region-btn {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
.option-btn {
|
||||
min-width: 100px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 20px;
|
||||
|
||||
.option-icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
|
||||
.option-btn span {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user