Merge branch 'main' of https://git.brother7.cn/zoujing/YGChatCS
This commit is contained in:
@@ -14,7 +14,7 @@
|
|||||||
v-for="(item, index) in thumbnails"
|
v-for="(item, index) in thumbnails"
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<image :src="item.imageUrl" mode="aspectFill"></image>
|
<image :src="item.photoUrl" mode="aspectFill"></image>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
|
|
||||||
@@ -23,7 +23,11 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 缩略图部分 -->
|
<!-- 缩略图部分 -->
|
||||||
<view v-if="showThumbnails" class="thumbnail-box">
|
<view
|
||||||
|
v-if="showThumbnails"
|
||||||
|
class="thumbnail-box"
|
||||||
|
:style="thumbnailBoxStyle"
|
||||||
|
>
|
||||||
<scroll-view
|
<scroll-view
|
||||||
class="thumbnail-scroll"
|
class="thumbnail-scroll"
|
||||||
scroll-x="true"
|
scroll-x="true"
|
||||||
@@ -39,8 +43,8 @@
|
|||||||
:id="`thumbnail-${index}`"
|
:id="`thumbnail-${index}`"
|
||||||
@click="handleThumbnailClick(index)"
|
@click="handleThumbnailClick(index)"
|
||||||
>
|
>
|
||||||
<image :src="thumb.imageUrl" mode="aspectFill"></image>
|
<image :src="thumb.photoUrl" mode="aspectFill"></image>
|
||||||
<text>{{ thumb.name }}</text>
|
<text>{{ thumb.photoName }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
@@ -73,6 +77,11 @@ 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);
|
||||||
@@ -103,38 +112,18 @@ const swiperStyle = computed(() => {
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
// 默认图片数据
|
|
||||||
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 thumbnails = computed(() => {
|
const thumbnails = computed(() => props.images);
|
||||||
return props.images;
|
|
||||||
|
// 计算缩略图底部距离样式
|
||||||
|
const thumbnailBoxStyle = computed(() => {
|
||||||
|
const bottom =
|
||||||
|
typeof props.thumbnailBottom === "number"
|
||||||
|
? `${props.thumbnailBottom}px`
|
||||||
|
: props.thumbnailBottom;
|
||||||
|
return {
|
||||||
|
bottom: bottom,
|
||||||
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleThumbnailClick = (index) => {
|
const handleThumbnailClick = (index) => {
|
||||||
|
|||||||
@@ -29,7 +29,6 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
left: 12px;
|
left: 12px;
|
||||||
right: 12px;
|
right: 12px;
|
||||||
bottom: 0px;
|
|
||||||
height: 60px;
|
height: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,10 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<view class="chat-ai">
|
<view class="chat-ai">
|
||||||
<ChatMarkdown
|
<ChatMarkdown :key="textKey" :text="processedText" />
|
||||||
:key="textKey"
|
|
||||||
:text="processedText"
|
|
||||||
></ChatMarkdown>
|
|
||||||
<slot name="content"></slot>
|
<slot name="content"></slot>
|
||||||
</view>
|
</view>
|
||||||
<slot name="footer"></slot>
|
<slot name="footer"></slot>
|
||||||
@@ -18,8 +15,8 @@
|
|||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
text: {
|
text: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: "",
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// 用于强制重新渲染的key
|
// 用于强制重新渲染的key
|
||||||
@@ -28,14 +25,14 @@
|
|||||||
// 处理文本内容
|
// 处理文本内容
|
||||||
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;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -43,12 +40,15 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
// 监听text变化,强制重新渲染
|
// 监听text变化,强制重新渲染
|
||||||
watch(() => props.text, (newText, oldText) => {
|
watch(
|
||||||
|
() => props.text,
|
||||||
|
(newText, oldText) => {
|
||||||
if (newText !== oldText) {
|
if (newText !== oldText) {
|
||||||
textKey.value++;
|
textKey.value++;
|
||||||
}
|
}
|
||||||
}, { immediate: true });
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@@ -67,7 +67,7 @@
|
|||||||
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>
|
||||||
@@ -8,6 +8,7 @@
|
|||||||
: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">
|
||||||
|
|||||||
@@ -22,6 +22,7 @@
|
|||||||
|
|
||||||
.login-title {
|
.login-title {
|
||||||
width: 137px;
|
width: 137px;
|
||||||
|
height: 32px;
|
||||||
margin: 6px auto;
|
margin: 6px auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -14,7 +14,11 @@
|
|||||||
|
|
||||||
<!-- 日历按钮 -->
|
<!-- 日历按钮 -->
|
||||||
<view class="calendar-btn btn-bom" @click="openCalendar">
|
<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>
|
<text class="calendar-text">日历</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -30,33 +34,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);
|
||||||
@@ -65,18 +69,20 @@ 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(day).padStart(2, '0')}`
|
fullDate: `${d.getFullYear()}-${String(month).padStart(2, "0")}-${String(
|
||||||
|
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(() => {
|
||||||
@@ -88,8 +94,10 @@ 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: 8rpx;
|
border-radius: 16rpx;
|
||||||
margin-top: 12px;
|
margin: 12px 0 6px;
|
||||||
|
min-width: 325px;
|
||||||
|
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); /* 阴影 */
|
||||||
}
|
}
|
||||||
|
|
||||||
.date-list {
|
.date-list {
|
||||||
@@ -118,7 +126,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 {
|
||||||
@@ -130,7 +138,6 @@ 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;
|
||||||
|
|||||||
@@ -1,41 +1,43 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<QuickBookingCalender class="calendar" @update:date="onDateSelected" />
|
<QuickBookingCalender class="calendar" @update:date="onDateSelected" />
|
||||||
<view v-for="item in commodityGroupDTOList" :key="commodityGroupKey(item.title)">
|
<view
|
||||||
|
v-for="item in commodityGroupDTOList"
|
||||||
|
:key="commodityGroupKey(item.title)"
|
||||||
|
>
|
||||||
<QuickBookingContentList :commodityDTO="item" />
|
<QuickBookingContentList :commodityDTO="item" />
|
||||||
</view>
|
</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) => {
|
const onDateSelected = (date) => {
|
||||||
console.log('Selected date:', date);
|
console.log("Selected date:", date);
|
||||||
selectedDate.value = date;
|
selectedDate.value = date;
|
||||||
loadQuickBookingComponent();
|
loadQuickBookingComponent();
|
||||||
};
|
};
|
||||||
@@ -44,20 +46,19 @@
|
|||||||
const formatDate = (date) => {
|
const formatDate = (date) => {
|
||||||
const d = new Date(date);
|
const d = new Date(date);
|
||||||
const year = d.getFullYear();
|
const year = d.getFullYear();
|
||||||
const month = String(d.getMonth() + 1).padStart(2, '0');
|
const month = String(d.getMonth() + 1).padStart(2, "0");
|
||||||
const day = String(d.getDate()).padStart(2, '0');
|
const day = String(d.getDate()).padStart(2, "0");
|
||||||
return `${year}-${month}-${day}`;
|
return `${year}-${month}-${day}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
const commodityGroupKey = (title) => {
|
const commodityGroupKey = (title) => {
|
||||||
return `${title}${formattedDate.value}`
|
return `${title}${formattedDate.value}`;
|
||||||
}
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
console.log('=============')
|
console.log("=============");
|
||||||
loadQuickBookingComponent()
|
loadQuickBookingComponent();
|
||||||
})
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
@@ -68,11 +69,6 @@
|
|||||||
|
|
||||||
.calendar {
|
.calendar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 58px;
|
|
||||||
margin: 12px 0 6px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user