loser/menu-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 优化home页面和纪念日页面

Browse Source
This commit is contained in:
loser
2025-08-19 15:35:25 +08:00
parent 8389f51db5
commit 26f490de6e
4 changed files with 123 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages.json
View File

@@ -131,7 +131,7 @@
"selectedIconPath": "./static/images/home-active.png"
},
{
"pagePath": "pages/recipe/recipe",
"pagePath": "pages/order/order",
"text": "菜谱",
"iconPath": "./static/images/recipe.png",
"selectedIconPath": "./static/images/recipe-active.png"

90
src/pages/anniversary/anniversary.vue
View File

@@ -73,7 +73,7 @@
</view>
<!-- 悬浮新增按钮 -->
<view class="floating-add-btn" @click="showAddDialog">
<view class="floating-add-btn" v-if="!showDialog" @click="showAddDialog">
<uni-icons type="plus" size="32" color="#fff"></uni-icons>
</view>
@@ -97,18 +97,30 @@
></uni-easyinput>
</view>
<view class="form-item">
<text class="form-label">纪念日类型</text>
<view class="type-group">
<view class="type-item" :class="{active: formData.type === 1}" @click="formData.type = 1">恋爱纪念日</view>
<view class="type-item" :class="{active: formData.type === 2}" @click="formData.type = 2">生日</view>
<view class="type-item" :class="{active: formData.type === 3}" @click="formData.type = 3">其他</view>
</view>
</view>
<view class="form-item">
<text class="form-label">纪念日期</text>
<uni-datetime-picker
v-model="formData.date"
type="date"
:clear-icon="false"
@change="onDateChange"
></uni-datetime-picker>
<!-- 调试信息 -->
<text class="debug-info">当前日期值: {{ formData.date }}</text>
<!-- 测试按钮 -->
<view class="test-date-btn" @click="testSetDate">测试设置日期</view>
<view class="date-input" @click="openCalendar">
<text class="date-text">{{ formData.date || '请选择日期' }}</text>
<uni-icons type="calendar" size="20" color="#666"></uni-icons>
</view>
<uni-calendar
ref="calendarRef"
:insert="false"
:lunar="true"
:start-date="'1900-01-01'"
:end-date="'2100-12-31'"
:date="formData.date"
@confirm="onCalendarConfirm"
></uni-calendar>
</view>
</view>
@@ -131,11 +143,13 @@ const anniversaryList = ref([])
const showDialog = ref(false)
const isEdit = ref(false)
const popup = ref(null)
const calendarRef = ref(null)
const formData = ref({
id: null,
user_id: null,
lover_id: null,
title: '',
type: 3,
date: ''
})
@@ -195,11 +209,13 @@ const showAddDialog = () => {
user_id: 1, // 这里应该从用户信息中获取
lover_id: 2, // 这里应该从情侣信息中获取
title: '',
type: 3,
date: currentDate // 默认设置为当前日期
}
showDialog.value = true
popup.value.open()
// 悬浮按钮由 v-show 受 showDialog 控制自动隐藏
console.log('显示弹窗状态:', showDialog.value)
console.log('设置的默认日期:', currentDate)
}
@@ -212,6 +228,7 @@ const editAnniversary = (item) => {
user_id: item.user_id,
lover_id: item.lover_id,
title: item.title,
type: Number(item.type) || 3,
date: item.date
}
@@ -360,13 +377,18 @@ const getCountdownClass = (item) => {
}
const goBack = () => {
const pages = getCurrentPages()
if (pages.length > 1) {
uni.navigateBack()
} else {
uni.switchTab({ url: '/pages/home/home' })
}
}
const testSetDate = () => {
console.log('手动设置日期为 2023-10-27')
formData.value.date = '2023-10-27'
console.log('设置后的日期:', formData.value.date)
const openCalendar = () => {
if (calendarRef.value && calendarRef.value.open) {
calendarRef.value.open()
}
}
const getCurrentDate = () => {
@@ -379,9 +401,8 @@ const getCurrentDate = () => {
return currentDate
}
const onDateChange = (e) => {
console.log('日期选择器已选择:', e.value)
formData.value.date = e.value
const onCalendarConfirm = (e) => {
formData.value.date = e.fulldate || e.value || ''
}
</script>
@@ -674,6 +695,39 @@ const onDateChange = (e) => {
padding: 20rpx;
}
.type-group {
display: flex;
gap: 20rpx;
}
.type-item {
padding: 14rpx 22rpx;
border-radius: 12rpx;
border: 1rpx solid #ddd;
color: #666;
background: #f8f8f8;
}
.type-item.active {
color: #fff;
border-color: transparent;
background: linear-gradient(135deg, #FF6B9D 0%, #FF8E9E 100%);
}
.date-input {
display: flex;
align-items: center;
justify-content: space-between;
background: #f8f8f8;
border-radius: 10rpx;
padding: 20rpx;
}
.date-text {
font-size: 28rpx;
color: #333;
}
.debug-info {
font-size: 20rpx;
color: #999;

49
src/pages/anniversary/detail.vue
View File

@@ -71,12 +71,19 @@
<view class="form-item">
<text class="form-label">纪念日期</text>
<uni-datetime-picker
v-model="editForm.date"
type="date"
:clear-icon="false"
@change="onDateChange"
></uni-datetime-picker>
<view class="date-input" @click="openCalendar">
<text class="date-text">{{ editForm.date || '请选择日期' }}</text>
<uni-icons type="calendar" size="20" color="#666"></uni-icons>
</view>
<uni-calendar
ref="calendarRef"
:insert="false"
:lunar="true"
:start-date="'1900-01-01'"
:end-date="'2100-12-31'"
:date="editForm.date"
@confirm="onCalendarConfirm"
></uni-calendar>
</view>
<view class="form-item">
@@ -113,6 +120,7 @@ const anniversary = ref({})
const isEditing = ref(false)
const showCalendar = ref(false)
const editForm = ref({})
const calendarRef = ref(null)
// 纪念日类型
const anniversaryTypes = [
@@ -188,8 +196,14 @@ const cancelEdit = () => {
}
}
const onDateChange = (e) => {
editForm.value.date = e.value
const openCalendar = () => {
if (calendarRef.value && calendarRef.value.open) {
calendarRef.value.open()
}
}
const onCalendarConfirm = (e) => {
editForm.value.date = e.fulldate || e.value || ''
}
const saveChanges = async () => {
@@ -268,7 +282,12 @@ const deleteAnniversary = () => {
}
const goBack = () => {
const pages = getCurrentPages()
if (pages.length > 1) {
uni.navigateBack()
} else {
uni.switchTab({ url: '/pages/home/home' })
}
}
const getIconByType = (type) => {
@@ -488,6 +507,20 @@ const getCountdownText = (item) => {
color: #333;
}
}
.date-input {
display: flex;
align-items: center;
justify-content: space-between;
background: #f8f8f8;
border-radius: 10rpx;
padding: 20rpx;
}
.date-text {
font-size: 28rpx;
color: #333;
}
}
.form-actions {

2
src/pages/home/home.vue
View File

@@ -297,7 +297,7 @@ const goToDiary = () => {
}
const goToOrder = () => {
uni.switchTab({ url: '/pages/order/order' })
uni.navigateTo({ url: '/pages/order/order' })
}
const addAnniversary = () => {