feat: 新增订单列表交互
This commit is contained in:
duanshuwen
309
pages/order/components/Tabs/test.vue
Normal file
309
pages/order/components/Tabs/test.vue
Normal file
@@ -0,0 +1,309 @@
|
||||
<template>
|
||||
<view class="test-page">
|
||||
<view class="test-section">
|
||||
<text class="test-title">Tab组件测试</text>
|
||||
|
||||
<!-- 基础测试 -->
|
||||
<view class="test-item">
|
||||
<text class="item-title">基础用法</text>
|
||||
<Tab
|
||||
:tabs="basicTabs"
|
||||
:defaultActive="0"
|
||||
@change="handleTabChange"
|
||||
/>
|
||||
<view class="result">
|
||||
<text>当前选中: {{ currentTab.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 多标签测试 -->
|
||||
<view class="test-item">
|
||||
<text class="item-title">多标签测试</text>
|
||||
<Tab
|
||||
:tabs="multiTabs"
|
||||
:defaultActive="1"
|
||||
@change="handleMultiTabChange"
|
||||
/>
|
||||
<view class="result">
|
||||
<text>当前选中: {{ currentMultiTab.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 快速切换测试 -->
|
||||
<view class="test-item">
|
||||
<text class="item-title">快速切换测试</text>
|
||||
<Tab
|
||||
ref="fastTabRef"
|
||||
:tabs="fastTabs"
|
||||
:defaultActive="0"
|
||||
@change="handleFastTabChange"
|
||||
/>
|
||||
<view class="result">
|
||||
<text>当前选中: {{ currentFastTab.label }}</text>
|
||||
</view>
|
||||
<view class="test-buttons">
|
||||
<button
|
||||
v-for="(tab, index) in fastTabs"
|
||||
:key="index"
|
||||
class="test-btn"
|
||||
@click="switchToTab(index)"
|
||||
>
|
||||
切换到{{ tab.label }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 初始化测试 -->
|
||||
<view class="test-item">
|
||||
<text class="item-title">初始化测试</text>
|
||||
<text class="test-desc">测试指示器的动态高度和宽度初始化及错误处理</text>
|
||||
<Tab
|
||||
v-if="showInitTest"
|
||||
:tabs="initTestTabs"
|
||||
:defaultActive="initActiveIndex"
|
||||
@change="handleInitTestChange"
|
||||
/>
|
||||
<view class="result">
|
||||
<text>当前选中: {{ currentInitTab.label }}</text>
|
||||
</view>
|
||||
<view class="test-buttons">
|
||||
<button class="test-btn" @click="toggleInitTest">
|
||||
{{ showInitTest ? '隐藏' : '显示' }}组件
|
||||
</button>
|
||||
<button class="test-btn" @click="changeInitActive">
|
||||
切换默认激活项 (当前: {{ initActiveIndex }})
|
||||
</button>
|
||||
<button class="test-btn" @click="addInitTab">
|
||||
添加Tab
|
||||
</button>
|
||||
<button class="test-btn" @click="removeInitTab">
|
||||
移除Tab
|
||||
</button>
|
||||
<button class="test-btn" @click="rapidToggle">
|
||||
快速切换测试
|
||||
</button>
|
||||
</view>
|
||||
<view class="test-info">
|
||||
<text>错误处理测试：组件现在能够安全处理实例为null的情况</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import Tab from './index.vue'
|
||||
|
||||
// 基础标签
|
||||
const basicTabs = ref([
|
||||
{ label: '全部订单', value: 'all' },
|
||||
{ label: '服务工单', value: 'service' }
|
||||
])
|
||||
|
||||
// 多标签
|
||||
const multiTabs = ref([
|
||||
{ label: '全部', value: 'all' },
|
||||
{ label: '待支付', value: 'unpaid' },
|
||||
{ label: '待确认', value: 'unconfirmed' },
|
||||
{ label: '进行中', value: 'processing' },
|
||||
{ label: '已完成', value: 'completed' }
|
||||
])
|
||||
|
||||
// 快速切换测试
|
||||
const fastTabs = ref([
|
||||
{ label: '标签A', value: 'a' },
|
||||
{ label: '标签B', value: 'b' },
|
||||
{ label: '标签C', value: 'c' },
|
||||
{ label: '标签D', value: 'd' }
|
||||
])
|
||||
|
||||
// 初始化测试
|
||||
const initTestTabs = ref([
|
||||
{ label: '初始1', value: 'init1' },
|
||||
{ label: '初始2', value: 'init2' },
|
||||
{ label: '初始3', value: 'init3' }
|
||||
])
|
||||
|
||||
// 当前选中索引
|
||||
const currentTabIndex = ref(0)
|
||||
const currentMultiTabIndex = ref(1)
|
||||
const currentFastTabIndex = ref(0)
|
||||
const currentInitTabIndex = ref(1)
|
||||
|
||||
// 初始化测试状态
|
||||
const showInitTest = ref(true)
|
||||
const initActiveIndex = ref(1)
|
||||
|
||||
// 计算当前选中项
|
||||
const currentTab = computed(() => basicTabs.value[currentTabIndex.value] || {})
|
||||
const currentMultiTab = computed(() => multiTabs.value[currentMultiTabIndex.value] || {})
|
||||
const currentFastTab = computed(() => fastTabs.value[currentFastTabIndex.value] || {})
|
||||
const currentInitTab = computed(() => initTestTabs.value[currentInitTabIndex.value] || {})
|
||||
|
||||
// Tab引用
|
||||
const fastTabRef = ref(null)
|
||||
|
||||
// 事件处理
|
||||
const handleTabChange = ({ index, item }) => {
|
||||
currentTabIndex.value = index
|
||||
console.log('基础Tab切换:', item)
|
||||
}
|
||||
|
||||
const handleMultiTabChange = ({ index, item }) => {
|
||||
currentMultiTabIndex.value = index
|
||||
console.log('多标签Tab切换:', item)
|
||||
}
|
||||
|
||||
const handleFastTabChange = ({ index, item }) => {
|
||||
currentFastTabIndex.value = index
|
||||
console.log('快速Tab切换:', item)
|
||||
}
|
||||
|
||||
const handleInitTestChange = ({ index, item }) => {
|
||||
currentInitTabIndex.value = index
|
||||
console.log('初始化Tab切换:', item)
|
||||
}
|
||||
|
||||
// 程序化切换
|
||||
const switchToTab = (index) => {
|
||||
currentFastTabIndex.value = index
|
||||
if (fastTabRef.value) {
|
||||
fastTabRef.value.setActiveIndex(index)
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化测试方法
|
||||
const toggleInitTest = () => {
|
||||
showInitTest.value = !showInitTest.value
|
||||
}
|
||||
|
||||
const changeInitActive = () => {
|
||||
initActiveIndex.value = (initActiveIndex.value + 1) % initTestTabs.value.length
|
||||
}
|
||||
|
||||
const addInitTab = () => {
|
||||
const newIndex = initTestTabs.value.length + 1
|
||||
initTestTabs.value.push({
|
||||
label: `初始${newIndex}`,
|
||||
value: `init${newIndex}`
|
||||
})
|
||||
}
|
||||
|
||||
const removeInitTab = () => {
|
||||
if (initTestTabs.value.length > 1) {
|
||||
initTestTabs.value.pop()
|
||||
if (initActiveIndex.value >= initTestTabs.value.length) {
|
||||
initActiveIndex.value = initTestTabs.value.length - 1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const rapidToggle = () => {
|
||||
// 快速切换测试，模拟可能导致实例为null的场景
|
||||
let count = 0
|
||||
const interval = setInterval(() => {
|
||||
showInitTest.value = !showInitTest.value
|
||||
count++
|
||||
if (count >= 6) {
|
||||
clearInterval(interval)
|
||||
showInitTest.value = true
|
||||
}
|
||||
}, 200)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.test-page {
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.test-section {
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.test-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.test-item {
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.test-item:last-child {
|
||||
border-bottom: none;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.item-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #666;
|
||||
margin-bottom: 15px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.test-desc {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
margin-bottom: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.test-info {
|
||||
margin-top: 15px;
|
||||
padding: 10px;
|
||||
background-color: #f0f9ff;
|
||||
border-radius: 8px;
|
||||
border-left: 4px solid #007AFF;
|
||||
}
|
||||
|
||||
.test-info text {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.result {
|
||||
margin-top: 15px;
|
||||
padding: 10px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.result text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.test-buttons {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.test-btn {
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
background-color: #007AFF;
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.test-btn:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user