zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 商品详情异常问题处理

Browse Source
This commit is contained in:
duanshuwen
2025-08-10 21:25:12 +08:00
parent bae468d11f
commit 1881faa47a
5 changed files with 164 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
pages/goods/index.vue
View File

@@ -8,6 +8,7 @@
:border-radius="0"
:height="300"
:images="goodsData.commodityPhotoList"
thumbnailBottom="36px"
/>
<view class="goods-content">

51
pages/module/booking/QuickBookingCalender.vue
View File

@@ -14,7 +14,11 @@
<!-- 日历按钮 -->
<view class="calendar-btn btn-bom" @click="openCalendar">
<image src="/static/booking_calendar.png" mode="widthFix" class="calendar-img" />
<image
src="/static/booking_calendar.png"
mode="widthFix"
class="calendar-img"
/>
<text class="calendar-text">日历</text>
</view>
</view>
@@ -30,33 +34,33 @@
</template>
<script setup>
import { ref, onMounted } from 'vue';
const emit = defineEmits(['update:date']); // 声明事件
import Calender from '@/components/Calender/index.vue';
import { ref, onMounted } from "vue";
const emit = defineEmits(["update:date"]); // 声明事件
import Calender from "@/components/Calender/index.vue";
const activeIndex = ref(2); // 默认今天
const dates = ref([]);
const calendarVisible = ref(false)
const selectedDate = ref('')
const calendarVisible = ref(false);
const selectedDate = ref("");
// 处理日历关闭
const handleCalendarClose = () => {
calendarVisible.value = false
}
calendarVisible.value = false;
};
// 处理日期选择
const handleDateSelect = (data) => {
selectedDate.value = data.date
calendarVisible.value = false
console.log('选择的日期:', data.date)
emit('update:date', { fullDate: selectedDate.value}); // 传回父组件
}
selectedDate.value = data.date;
calendarVisible.value = false;
console.log("选择的日期:", data.date);
emit("update:date", { fullDate: selectedDate.value }); // 传回父组件
};
// 初始化日期（前天、昨天、今天、明天、后天）
const initDates = () => {
const today = new Date();
const labels = ['前天', '昨天', '今天', '明天', '后天'];
const labels = ["前天", "昨天", "今天", "明天", "后天"];
for (let i = -2; i <= 2; i++) {
const d = new Date(today);
d.setDate(today.getDate() + i);
@@ -65,18 +69,20 @@ const initDates = () => {
dates.value.push({
label: labels[i + 2],
date: `${month}/${day}`,
fullDate: `${d.getFullYear()}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}`
fullDate: `${d.getFullYear()}-${String(month).padStart(2, "0")}-${String(
day
).padStart(2, "0")}`,
});
}
};
const selectDate = (index) => {
activeIndex.value = index;
emit('update:date', dates.value[index]); // 传回父组件
activeIndex.value = index;
emit("update:date", dates.value[index]); // 传回父组件
};
const openCalendar = () => {
calendarVisible.value = true
calendarVisible.value = true;
};
onMounted(() => {
@@ -88,8 +94,10 @@ onMounted(() => {
.date-picker {
background: rgba(140, 236, 255, 0.24);
padding: 8rpx 0;
border-radius: 8rpx;
margin-top: 12px;
border-radius: 16rpx;
margin: 12px 0 6px;
min-width: 325px;
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); /* 阴影 */
}
.date-list {
@@ -118,7 +126,7 @@ onMounted(() => {
}
.date-item.active {
background-color: #00A6FF;
background-color: #00a6ff;
}
.date-item.active .label,
.date-item.active .date {
@@ -130,7 +138,6 @@ onMounted(() => {
background: #fff;
border-radius: 0 16rpx 16rpx 0;
margin: -8rpx 0;
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); /* 阴影 */
}
.calendar-img {
width: 16px;

126
pages/module/booking/QuickBookingComponent.vue
View File

@@ -1,78 +1,74 @@
<template>
<view class="container">
<QuickBookingCalender class="calendar" @update:date="onDateSelected" />
<view v-for="item in commodityGroupDTOList" :key="commodityGroupKey(item.title)">
<QuickBookingContentList :commodityDTO="item" />
</view>
</view>
<view class="container">
<QuickBookingCalender class="calendar" @update:date="onDateSelected" />
<view
v-for="item in commodityGroupDTOList"
:key="commodityGroupKey(item.title)"
>
<QuickBookingContentList :commodityDTO="item" />
</view>
</view>
</template>
<script setup>
import QuickBookingCalender from './QuickBookingCalender.vue'
import QuickBookingContentList from './QuickBookingContentList.vue'
import { ref, nextTick } from 'vue'
import { onMounted } from 'vue'
import { quickBookingComponent } from '@/request/api/MainPageDataApi'
import { SCROLL_TO_BOTTOM } from '@/constant/constant'
import QuickBookingCalender from "./QuickBookingCalender.vue";
import QuickBookingContentList from "./QuickBookingContentList.vue";
import { ref, nextTick } from "vue";
import { onMounted } from "vue";
import { quickBookingComponent } from "@/request/api/MainPageDataApi";
import { SCROLL_TO_BOTTOM } from "@/constant/constant";
const selectedDate = ref({});
const selectedDate = ref({});
const commodityGroupDTOList = ref([])
const formattedDate = ref('')
const commodityGroupDTOList = ref([]);
const formattedDate = ref("");
const loadQuickBookingComponent = async () => {
formattedDate.value = formatDate(selectedDate.value.fullDate || new Date());
const res = await quickBookingComponent(formattedDate.value)
if(res.code === 0 && res.data) {
commodityGroupDTOList.value = res.data.commodityGroupDTOList
nextTick(() => {
setTimeout(() => {
uni.$emit(SCROLL_TO_BOTTOM, true)
}, 300)
});
}
}
const onDateSelected = (date) => {
console.log('Selected date:', date);
selectedDate.value = date;
loadQuickBookingComponent();
};
const loadQuickBookingComponent = async () => {
formattedDate.value = formatDate(selectedDate.value.fullDate || new Date());
const res = await quickBookingComponent(formattedDate.value);
if (res.code === 0 && res.data) {
commodityGroupDTOList.value = res.data.commodityGroupDTOList;
nextTick(() => {
setTimeout(() => {
uni.$emit(SCROLL_TO_BOTTOM, true);
}, 300);
});
}
};
// 格式化日期为 yyyy-MM-dd
const formatDate = (date) => {
const d = new Date(date);
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
};
const commodityGroupKey = (title) => {
return `${title}${formattedDate.value}`
}
const onDateSelected = (date) => {
console.log("Selected date:", date);
selectedDate.value = date;
loadQuickBookingComponent();
};
onMounted(() => {
console.log('=============')
loadQuickBookingComponent()
})
// 格式化日期为 yyyy-MM-dd
const formatDate = (date) => {
const d = new Date(date);
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, "0");
const day = String(d.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
};
const commodityGroupKey = (title) => {
return `${title}${formattedDate.value}`;
};
onMounted(() => {
console.log("=============");
loadQuickBookingComponent();
});
</script>
<style scoped lang="scss">
.container {
width: 100%;
flex: 1;
margin-bottom: 12px;
.calendar {
width: 100%;
height: 58px;
margin: 12px 0 6px;
}
}
.container {
width: 100%;
flex: 1;
margin-bottom: 12px;
.calendar {
width: 100%;
}
}
</style>