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

Compare commits

base: zoujing:77936898f6b72490468aee7b3106dd7aa22a34be
Branches Tags
zoujing:main
zoujing:fix-812
..
compare: zoujing:b914d92cba3083ceb74ca1466971163a3a784da4
Branches Tags
zoujing:main
zoujing:fix-812

No commits in common. "77936898f6b72490468aee7b3106dd7aa22a34be" and "b914d92cba3083ceb74ca1466971163a3a784da4" have entirely different histories.
77936898f6 ... b914d92cba

7 changed files with 237 additions and 230 deletions
Show Stats Expand all files Collapse all files

59
components/ImageSwiper/index.vue
View File

@ -14,7 +14,7 @@
v-for="(item, index) in thumbnails" v-for="(item, index) in thumbnails"
:key="index" :key="index"
> >
<image :src="item.photoUrl" mode="aspectFill"></image> <image :src="item.imageUrl" mode="aspectFill"></image>
</swiper-item> </swiper-item>
</swiper> </swiper>
@ -23,11 +23,7 @@
</view> </view>
<!-- 缩略图部分 --> <!-- 缩略图部分 -->
<view <view v-if="showThumbnails" class="thumbnail-box">
v-if="showThumbnails"
class="thumbnail-box"
:style="thumbnailBoxStyle"
>
<scroll-view <scroll-view
class="thumbnail-scroll" class="thumbnail-scroll"
scroll-x="true" scroll-x="true"
@ -43,8 +39,8 @@
:id="`thumbnail-${index}`" :id="`thumbnail-${index}`"
@click="handleThumbnailClick(index)" @click="handleThumbnailClick(index)"
> >
<image :src="thumb.photoUrl" mode="aspectFill"></image> <image :src="thumb.imageUrl" mode="aspectFill"></image>
<text>{{ thumb.photoName }}</text> <text>{{ thumb.name }}</text>
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
@ -77,11 +73,6 @@ const props = defineProps({
type: Boolean, type: Boolean,
default: true, default: true,
}, },
// 缩略图距离底部的距离，支持数字(px)或字符串
thumbnailBottom: {
type: [Number, String],
default: 0,
},
}); });
const active = ref(0); const active = ref(0);
@ -112,18 +103,38 @@ const swiperStyle = computed(() => {
}; };
}); });
// 使用传入的图片数据或默认数据 // 默认图片数据
const thumbnails = computed(() => props.images); const defaultImages = [
{
imageUrl:
"https://one-feel-image-bucket.oss-cn-chengdu.aliyuncs.com/DH04006.jpg",
name: "瑶山古寨",
},
{
imageUrl:
"https://one-feel-image-bucket.oss-cn-chengdu.aliyuncs.com/DH04002.JPG",
name: "民俗表演",
},
{
imageUrl:
"https://one-feel-image-bucket.oss-cn-chengdu.aliyuncs.com/DH04007.jpg",
name: "特色美食",
},
{
imageUrl:
"https://one-feel-image-bucket.oss-cn-chengdu.aliyuncs.com/DH04014.JPG",
name: "传统服饰",
},
{
imageUrl:
"https://one-feel-image-bucket.oss-cn-chengdu.aliyuncs.com/DH04020.JPG",
name: "其他",
},
];
// 计算缩略图底部距离样式 // 使用传入的图片数据或默认数据
const thumbnailBoxStyle = computed(() => { const thumbnails = computed(() => {
const bottom = return props.images;
typeof props.thumbnailBottom === "number"
? `${props.thumbnailBottom}px`
: props.thumbnailBottom;
return {
bottom: bottom,
};
}); });
const handleThumbnailClick = (index) => { const handleThumbnailClick = (index) => {

99
components/ImageSwiper/styles/index.scss
View File

@ -1,80 +1,81 @@
.image-swiper { .image-swiper {
position: relative; position: relative;
width: 100%; width: 100%;
} }
.swiper-box { .swiper-box {
overflow: hidden; overflow: hidden;
// 高度和圆角通过内联样式动态设置 // 高度和圆角通过内联样式动态设置
} }
.swiper-item image { .swiper-item image {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.custom-indicator { .custom-indicator {
position: absolute; position: absolute;
top: 8px; top: 8px;
right: 8px; right: 8px;
z-index: 10; z-index: 10;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
border-radius: 50px; border-radius: 50px;
padding: 3px 8px; padding: 3px 8px;
font-size: 8px; font-size: 8px;
color: #fff; color: #fff;
} }
.thumbnail-box { .thumbnail-box {
position: absolute; position: absolute;
left: 12px; left: 12px;
right: 12px; right: 12px;
height: 60px; bottom: 0px;
height: 60px;
} }
.thumbnail-scroll { .thumbnail-scroll {
width: 100%; width: 100%;
height: 100%; height: 100%;
white-space: nowrap; white-space: nowrap;
} }
.thumbnail-list { .thumbnail-list {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
padding: 0 5px; padding: 0 5px;
} }
.thumbnail-item { .thumbnail-item {
flex-shrink: 0; flex-shrink: 0;
text-align: center; text-align: center;
transition: all 0.3s ease; transition: all 0.3s ease;
&.active { &.active {
image { image {
border: 1px solid #fff; border: 1px solid #fff;
}
} }
}
} }
.thumbnail-item image { .thumbnail-item image {
width: 48px; width: 48px;
height: 38px; height: 38px;
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
border: 1px solid transparent; border: 1px solid transparent;
transition: all 0.3s ease; transition: all 0.3s ease;
display: block; display: block;
} }
.thumbnail-item text { .thumbnail-item text {
color: #fff; color: #fff;
font-size: 8px; font-size: 8px;
display: block; display: block;
margin-top: 4px; margin-top: 4px;
transition: all 0.3s ease; transition: all 0.3s ease;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
max-width: 48px; max-width: 48px;
} }

130
pages/chat/ChatCardAI.vue
View File

@ -1,73 +1,73 @@
<template> <template>
<view class="container"> <view class="container">
<view class="chat-ai"> <view class="chat-ai">
<ChatMarkdown :key="textKey" :text="processedText" /> <ChatMarkdown
<slot name="content"></slot> :key="textKey"
</view> :text="processedText"
<slot name="footer"></slot> ></ChatMarkdown>
</view> <slot name="content"></slot>
</view>
<slot name="footer"></slot>
</view>
</template> </template>
<script setup> <script setup>
import { defineProps, computed, ref, watch } from "vue"; import { defineProps, computed, ref, watch } from "vue";
import ChatMarkdown from "./ChatMarkdown.vue"; import ChatMarkdown from "./ChatMarkdown.vue";
const props = defineProps({ const props = defineProps({
text: { text: {
type: String, type: String,
default: "", default: ''
}, }
}); });
// 用于强制重新渲染的key // 用于强制重新渲染的key
const textKey = ref(0); const textKey = ref(0);
// 处理文本内容 // 处理文本内容
const processedText = computed(() => { const processedText = computed(() => {
if (!props.text) { if (!props.text) {
return ""; return '';
} }
// 确保文本是字符串类型 // 确保文本是字符串类型
const textStr = String(props.text); const textStr = String(props.text);
// 处理加载状态的文本 // 处理加载状态的文本
if (textStr.includes("加载中") || textStr.includes("...")) { if (textStr.includes('加载中') || textStr.includes('...')) {
return textStr; return textStr;
} }
return textStr; return textStr;
}); });
// 监听text变化，强制重新渲染 // 监听text变化，强制重新渲染
watch( watch(() => props.text, (newText, oldText) => {
() => props.text, if (newText !== oldText) {
(newText, oldText) => { textKey.value++;
if (newText !== oldText) { }
textKey.value++; }, { immediate: true });
}
},
{ immediate: true }
);
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: 100%; // ✅ 限制最大宽度 max-width: 100%; // ✅ 限制最大宽度
overflow-x: hidden; // ✅ 防止横向撑开 overflow-x: hidden; // ✅ 防止横向撑开
.chat-ai { .chat-ai {
margin: 6px 12px; margin: 6px 12px;
padding: 0 12px; padding: 0 12px;
min-width: 80px; min-width: 80px;
background: rgba(255, 255, 255, 0.4); background: rgba(255,255,255,0.4);
box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.1); box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.1);
border-radius: 4px 20px 20px 20px; border-radius: 4px 20px 20px 20px;
border: 1px solid; border: 1px solid;
border-color: #ffffff; border-color: #FFFFFF;
} }
} }
</style> </style>

1
pages/goods/index.vue
View File

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

1
pages/login/styles/index.scss
View File

@ -22,7 +22,6 @@
.login-title { .login-title {
width: 137px; width: 137px;
height: 32px;
margin: 6px auto; margin: 6px auto;
} }

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

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

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

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