feat: 订单详情交互对接
This commit is contained in:
duanshuwen
241
components/Calender/demo.vue
Normal file
241
components/Calender/demo.vue
Normal file
@@ -0,0 +1,241 @@
|
||||
<template>
|
||||
<view class="demo-page">
|
||||
<!-- 页面标题 -->
|
||||
<view class="demo-header">
|
||||
<text class="demo-title">日历组件交互演示</text>
|
||||
<text class="demo-subtitle">点击日期图标打开日历</text>
|
||||
</view>
|
||||
|
||||
<!-- 日期选择器 -->
|
||||
<view class="date-picker-container">
|
||||
<view class="date-picker" @tap="openCalendar">
|
||||
<view class="date-display">
|
||||
<text class="date-label">选择日期</text>
|
||||
<text class="date-value" v-if="selectedDate">{{ formatDate(selectedDate) }}</text>
|
||||
<text class="date-placeholder" v-else>请点击日期图标选择</text>
|
||||
</view>
|
||||
<view class="date-icon">
|
||||
<uni-icons type="calendar-filled" size="24" color="#1890ff"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 选择结果展示 -->
|
||||
<view class="result-display" v-if="selectedDate">
|
||||
<view class="result-card">
|
||||
<text class="result-title">已选择日期</text>
|
||||
<text class="result-date">{{ formatDate(selectedDate) }}</text>
|
||||
<text class="result-price" v-if="selectedPrice">价格：¥{{ selectedPrice }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 日历组件 -->
|
||||
<Calendar
|
||||
:visible="calendarVisible"
|
||||
:price-data="priceData"
|
||||
mode="single"
|
||||
:default-value="selectedDate"
|
||||
@close="handleCalendarClose"
|
||||
@select="handleDateSelect"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import Calendar from './index.vue'
|
||||
|
||||
// 响应式数据
|
||||
const calendarVisible = ref(false)
|
||||
const selectedDate = ref('')
|
||||
const selectedPrice = ref(null)
|
||||
|
||||
// 模拟价格数据
|
||||
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,
|
||||
'2024-02-01': 399,
|
||||
'2024-02-02': 299,
|
||||
'2024-02-03': 199,
|
||||
'2024-02-04': 299,
|
||||
'2024-02-05': 399,
|
||||
'2024-02-06': 499,
|
||||
'2024-02-07': 599,
|
||||
'2024-02-08': 299,
|
||||
'2024-02-09': 199,
|
||||
'2024-02-10': 299
|
||||
})
|
||||
|
||||
// 方法定义
|
||||
// 打开日历
|
||||
const openCalendar = () => {
|
||||
calendarVisible.value = true
|
||||
}
|
||||
|
||||
// 处理日历关闭
|
||||
const handleCalendarClose = () => {
|
||||
calendarVisible.value = false
|
||||
}
|
||||
|
||||
// 处理日期选择
|
||||
const handleDateSelect = (data) => {
|
||||
selectedDate.value = data.date
|
||||
selectedPrice.value = data.price
|
||||
calendarVisible.value = false
|
||||
|
||||
// 输出选择结果到控制台
|
||||
console.log('选择的日期:', data.date)
|
||||
console.log('日期价格:', data.price)
|
||||
}
|
||||
|
||||
// 格式化日期显示
|
||||
const formatDate = (dateStr) => {
|
||||
if (!dateStr) return ''
|
||||
const date = new Date(dateStr)
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
const weekDays = ['日', '一', '二', '三', '四', '五', '六']
|
||||
const weekDay = weekDays[date.getDay()]
|
||||
|
||||
return `${year}年${month}月${day}日 周${weekDay}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.demo-page {
|
||||
padding: 20px;
|
||||
background-color: #f8f9fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.demo-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.demo-title {
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: #262626;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.demo-subtitle {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.date-picker-container {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
background-color: #ffffff;
|
||||
border-radius: 12px;
|
||||
border: 2px solid #e8e8e8;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:active {
|
||||
border-color: #1890ff;
|
||||
box-shadow: 0 4px 12px rgba(24, 144, 255, 0.15);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
.date-display {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.date-label {
|
||||
font-size: 14px;
|
||||
color: #8c8c8c;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.date-value {
|
||||
font-size: 18px;
|
||||
color: #262626;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.date-placeholder {
|
||||
font-size: 16px;
|
||||
color: #bfbfbf;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.date-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-color: #f0f8ff;
|
||||
border-radius: 50%;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.date-picker:active .date-icon {
|
||||
background-color: #e6f7ff;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.result-display {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 16px rgba(24, 144, 255, 0.3);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.result-date {
|
||||
font-size: 20px;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.result-price {
|
||||
font-size: 16px;
|
||||
color: #fff2e8;
|
||||
font-weight: 500;
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
padding: 4px 12px;
|
||||
border-radius: 16px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user