feat: 订单详情交互对接
This commit is contained in:
duanshuwen
253
components/Calender/example.vue
Normal file
253
components/Calender/example.vue
Normal file
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<view class="calendar-example">
|
||||
<!-- 页面标题 -->
|
||||
<view class="page-header">
|
||||
<text class="page-title">日历组件使用示例</text>
|
||||
</view>
|
||||
|
||||
<!-- 触发器区域 -->
|
||||
<view class="trigger-section">
|
||||
<view class="date-input" @tap="openCalendar">
|
||||
<view class="input-content">
|
||||
<text class="input-label">选择日期</text>
|
||||
<text class="input-value" v-if="selectedDate">{{ selectedDate }}</text>
|
||||
<text class="input-placeholder" v-else>请选择日期</text>
|
||||
</view>
|
||||
<uni-icons type="calendar" size="20" color="#1890ff"></uni-icons>
|
||||
</view>
|
||||
|
||||
<!-- 范围选择示例 -->
|
||||
<view class="date-input" @tap="openRangeCalendar">
|
||||
<view class="input-content">
|
||||
<text class="input-label">选择日期范围</text>
|
||||
<text class="input-value" v-if="selectedRange.start && selectedRange.end">
|
||||
{{ selectedRange.start }} 至 {{ selectedRange.end }}
|
||||
</text>
|
||||
<text class="input-placeholder" v-else>请选择日期范围</text>
|
||||
</view>
|
||||
<uni-icons type="calendar" size="20" color="#1890ff"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 结果显示区域 -->
|
||||
<view class="result-section" v-if="selectedDate || (selectedRange.start && selectedRange.end)">
|
||||
<text class="result-title">选择结果：</text>
|
||||
<view class="result-item" v-if="selectedDate">
|
||||
<text class="result-label">单选日期：</text>
|
||||
<text class="result-value">{{ selectedDate }}</text>
|
||||
</view>
|
||||
<view class="result-item" v-if="selectedRange.start && selectedRange.end">
|
||||
<text class="result-label">日期范围：</text>
|
||||
<text class="result-value">{{ selectedRange.start }} 至 {{ selectedRange.end }}</text>
|
||||
<text class="result-days">（共{{ rangeDays }}天）</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日历组件 - 单选模式 -->
|
||||
<Calendar
|
||||
:visible="calendarVisible"
|
||||
:price-data="priceData"
|
||||
mode="single"
|
||||
:default-value="selectedDate"
|
||||
@close="handleCalendarClose"
|
||||
@select="handleDateSelect"
|
||||
/>
|
||||
|
||||
<!-- 日历组件 - 范围选择模式 -->
|
||||
<Calendar
|
||||
:visible="rangeCalendarVisible"
|
||||
:price-data="priceData"
|
||||
mode="range"
|
||||
:default-value="[selectedRange.start, selectedRange.end]"
|
||||
@close="handleRangeCalendarClose"
|
||||
@range-select="handleRangeSelect"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import Calendar from './index.vue'
|
||||
|
||||
// 响应式数据
|
||||
const calendarVisible = ref(false)
|
||||
const rangeCalendarVisible = ref(false)
|
||||
const selectedDate = ref('')
|
||||
const selectedRange = ref({
|
||||
start: '',
|
||||
end: ''
|
||||
})
|
||||
|
||||
// 模拟价格数据
|
||||
const priceData = ref({
|
||||
'2024-01-15': 299,
|
||||
'2024-01-16': 399,
|
||||
'2024-01-17': 199,
|
||||
'2024-01-18': 299,
|
||||
'2024-01-19': 399,
|
||||
'2024-01-20': 499,
|
||||
'2024-01-21': 599,
|
||||
'2024-01-22': 299,
|
||||
'2024-01-23': 199,
|
||||
'2024-01-24': 299,
|
||||
'2024-01-25': 399,
|
||||
'2024-01-26': 299,
|
||||
'2024-01-27': 199,
|
||||
'2024-01-28': 299
|
||||
})
|
||||
|
||||
// 计算属性
|
||||
const rangeDays = computed(() => {
|
||||
if (!selectedRange.value.start || !selectedRange.value.end) return 0
|
||||
const start = new Date(selectedRange.value.start)
|
||||
const end = new Date(selectedRange.value.end)
|
||||
const diffTime = Math.abs(end - start)
|
||||
return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1
|
||||
})
|
||||
|
||||
// 方法定义
|
||||
// 打开单选日历
|
||||
const openCalendar = () => {
|
||||
calendarVisible.value = true
|
||||
}
|
||||
|
||||
// 打开范围选择日历
|
||||
const openRangeCalendar = () => {
|
||||
rangeCalendarVisible.value = true
|
||||
}
|
||||
|
||||
// 处理单选日历关闭
|
||||
const handleCalendarClose = () => {
|
||||
calendarVisible.value = false
|
||||
}
|
||||
|
||||
// 处理范围选择日历关闭
|
||||
const handleRangeCalendarClose = () => {
|
||||
rangeCalendarVisible.value = false
|
||||
}
|
||||
|
||||
// 处理日期选择
|
||||
const handleDateSelect = (data) => {
|
||||
selectedDate.value = data.date
|
||||
calendarVisible.value = false
|
||||
console.log('选择的日期:', data)
|
||||
}
|
||||
|
||||
// 处理范围选择
|
||||
const handleRangeSelect = (data) => {
|
||||
selectedRange.value = {
|
||||
start: data.startDate,
|
||||
end: data.endDate
|
||||
}
|
||||
rangeCalendarVisible.value = false
|
||||
console.log('选择的日期范围:', data)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.calendar-example {
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
}
|
||||
|
||||
.trigger-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.date-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #d9d9d9;
|
||||
transition: border-color 0.2s;
|
||||
|
||||
&:active {
|
||||
border-color: #1890ff;
|
||||
}
|
||||
}
|
||||
|
||||
.input-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
font-size: 14px;
|
||||
color: #8c8c8c;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.input-value {
|
||||
font-size: 16px;
|
||||
color: #262626;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.input-placeholder {
|
||||
font-size: 16px;
|
||||
color: #bfbfbf;
|
||||
}
|
||||
|
||||
.result-section {
|
||||
padding: 20px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.result-label {
|
||||
font-size: 14px;
|
||||
color: #8c8c8c;
|
||||
margin-right: 8px;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.result-value {
|
||||
font-size: 14px;
|
||||
color: #1890ff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.result-days {
|
||||
font-size: 12px;
|
||||
color: #52c41a;
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user