5 Commits

Author SHA1 Message Date
39d1c81657 Merge branch 'fix-109' of https://git.nianxx.cn/zoujing/YGChatCS 2025-10-23 21:14:37 +08:00
f9df4c3f02 feat: 打字速度提升 2025-10-23 21:14:28 +08:00
bcfc4e12a0 feat: 相册的优化 2025-10-23 21:14:03 +08:00
duanshuwen
ea36177f05 feat: 提交订单页面搭建 2025-10-23 21:13:33 +08:00
3094211152 feat: 消息的展示样式调整 2025-10-23 20:33:23 +08:00
14 changed files with 286 additions and 67 deletions

View File

@@ -1,8 +1,10 @@
<template> <template>
<view class="stepper-wrapper"> <view class="stepper-wrapper border-box flex flex-items-center rounded-8">
<uni-icons type="minus" size="24" color="#999" @click="decrease" /> <uni-icons type="minus" size="24" color="#D1D1D1" @click="decrease" />
<text class="stepper-text">{{ value }}</text> <text class="stepper-text text-center font-size-14 font-500 color-000">
<uni-icons type="plus" size="24" color="#999" @click="increase" /> {{ value }} {{ unit }}
</text>
<uni-icons type="plus" size="24" color="#198CFF" @click="increase" />
</view> </view>
</template> </template>
@@ -23,6 +25,10 @@ const props = defineProps({
type: Number, type: Number,
default: 100, default: 100,
}, },
unit: {
type: String,
default: "",
},
}); });
// Emit // Emit

View File

@@ -1,11 +1,8 @@
.stepper-wrapper { .stepper-wrapper {
display: flex; background-color: #f3f9ff;
align-items: center; padding: 4px 7px;
} }
.stepper-text { .stepper-text {
width: 40px; width: 30px;
font-size: $uni-font-size-lg;
color: $uni-text-color;
text-align: center;
} }

View File

@@ -0,0 +1,45 @@
<template>
<!-- 选择数量 -->
<view
class="border-box bg-white p-12 rounded-12 flex flex-items-center mb-12"
>
<view class="flex-full">
<view class="font-size-16 font-500 color-000 line-height-24"
>选择数量</view
>
<view class="font-size-12 color-A3A3A3 line-height-16">
请选择套餐数量
</view>
</view>
<view class="right">
<Stepper v-model="quantity" />
</view>
</view>
<!-- 联系方式 -->
<view class="bg-white rounded-12 overflow-hidden">
<view
class="border-box border-bottom font-size-16 font-500 color-000 line-height-24 p-12"
>联系方式</view
>
<view class="flex flex-items-center border-box p-12">
<view class="font-size-14 font-500 color-525866 mr-12"> 联系手机 </view>
<view class="right">
<input
class="border-box rounded-8 px-4 py-2 font-size-15 color-000 line-height-20"
placeholder="请输入联系手机"
maxlength="11"
/>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from "vue";
import Stepper from "@/components/Stepper/index.vue";
const quantity = ref(1);
</script>
<style></style>

View File

@@ -0,0 +1,45 @@
<template>
<view class="bg-white rounded-12 overflow-hidden mb-12">
<view class="flex flex-items-center border-box p-12 border-bottom">
<view class="font-size-16 font-500 color-000 line-height-24 flex-full"
>入住信息</view
>
<view class="right">
<Stepper v-model="quantity" unit="间" />
</view>
</view>
<view class="border-box pl-12 pr-12">
<view class="border-box border-bottom pt-12 pb-12 flex flex-items-center">
<view class="font-size-14 font-500 color-525866 mr-12"> 住客姓名 </view>
<view class="right">
<input
class="border-box rounded-8 px-4 py-2 font-size-15 color-000 line-height-20"
placeholder="请输入姓名"
maxlength="11"
/>
</view>
</view>
<view class="flex flex-items-center border-box pt-12 pb-12">
<view class="font-size-14 font-500 color-525866 mr-12"> 联系手机 </view>
<view class="right">
<input
class="border-box rounded-8 px-4 py-2 font-size-15 color-000 line-height-20"
placeholder="请输入联系手机"
maxlength="11"
/>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { ref } from "vue";
import Stepper from "@/components/Stepper/index.vue";
const quantity = ref(1);
</script>
<style></style>

View File

@@ -0,0 +1,61 @@
<template>
<view class="booking h-screen flex flex-col">
<TopNavBar
titleAlign="center"
backgroundColor="#D9EEFF"
backIconColor="#000"
:shadow="false"
>
<template #title>
{{ title }}
</template>
</TopNavBar>
<view class="booking-content flex-full border-box p-12">
<!-- 预约内容 -->
<view class="border-box bg-white p-12 rounded-12 mb-12">
<view class="font-size-16 font-500 color-000 line-height-24"
>温泉季戏水单人票 +单人简餐</view
>
<view
class="border-box border-bottom font-size-12 color-99A0AE line-height-16 pb-12"
>温泉早鸟票2张 黄南武辣子鸡2人套餐1份</view
>
<view
class="border-box flex flex-items-center flex-justify-between pt-12"
>
<text class="font-size-12 color-43669A line-height-18"
>使用时间:周一至周日9:00-22:00</text
>
<view class="flex flex-items-center">
<text class="font-size-12 color-2D91FF line-height-16"
>取消政策</text
>
<uni-icons type="right" size="15" color="#99A0AE" />
</view>
</view>
</view>
<!-- 非酒店类型 -->
<ContactSection v-if="false" />
<!-- 酒店类型 -->
<UserSection />
</view>
</view>
</template>
<script setup>
import { ref } from "vue";
import TopNavBar from "@/components/TopNavBar/index.vue";
import ContactSection from "./components/ConactSection/index.vue";
import UserSection from "./components/UserSection/index.vue";
const title = ref("预约");
</script>
<style scoped lang="scss">
@import "./styles/index.scss";
</style>

View File

@@ -0,0 +1,4 @@
.booking {
background: linear-gradient(180deg, #d9eeff 0%, #f5f7fa 100%) 0 86px / 100%
100px no-repeat;
}

View File

@@ -1,19 +1,22 @@
<template> <template>
<view <view
class="card bg-white border-box p-8 rounded-12 flex flex-items-start m-12" class="card bg-white border-box p-8 rounded-12 flex flex-items-start m-12"
@click="handleClick(item)" @click.stop="handleClick(item)"
> >
<image <image
class="left rounded-10" class="left rounded-10"
:src="item.commodityIcon" :src="item.commodityPhoto"
mode="aspectFill" mode="aspectFill"
/> />
<view class="right border-box flex-full pl-12"> <view class="right border-box flex-full pl-12">
<view class="font-size-16 line-height-24 color-171717 mb-4"> <view class="font-size-16 line-height-24 color-171717 mb-4">
{{ item.commodityName }} {{ item.commodityName }}
</view> </view>
<view class="font-size-12 line-height-16 color-99A0AE mb-4"> <view
1 1.8 米大床 v-if="item.commodityFacility"
class="font-size-12 line-height-16 color-99A0AE mb-4"
>
{{ item.commodityFacility.join(" ") }}
</view> </view>
<view class="font-size-12 line-height-18 color-43669A"> <view class="font-size-12 line-height-18 color-43669A">
{{ item.commodityTradeRuleList.join(" / ") }} {{ item.commodityTradeRuleList.join(" / ") }}
@@ -23,12 +26,16 @@
<text <text
class="amt font-size-18 font-500 font-family-misans-vf line-height-24 color-FF3D60 mr-4" class="amt font-size-18 font-500 font-family-misans-vf line-height-24 color-FF3D60 mr-4"
> >
{{ item.commodityPrice }} {{ item.specificationPrice }}
</text> </text>
<text class="font-size-12 line-height-16 color-99A0AE"> <text class="font-size-12 line-height-16 color-99A0AE">
/{{ item.stockUnitLabel }} /{{ item.stockUnitLabel }}
</text> </text>
<text class="btn border-box rounded-10 color-white ml-16"></text> <text
class="btn border-box rounded-10 color-white ml-16"
@click.stop="handleBooking(item)"
></text
>
</view> </view>
</view> </view>
</view> </view>
@@ -43,10 +50,10 @@ const props = defineProps({
type: Object, type: Object,
required: true, required: true,
default: () => ({ default: () => ({
commodityIcon: "", commodityPhoto: "",
commodityId: "", commodityId: "",
commodityName: "", commodityName: "",
commodityPrice: "", specificationPrice: "",
commodityServices: [], commodityServices: [],
commodityTags: [], // 商品标签 commodityTags: [], // 商品标签
commodityTradeRuleList: [], // 交易规则列表 commodityTradeRuleList: [], // 交易规则列表
@@ -59,6 +66,10 @@ const props = defineProps({
const handleClick = ({ commodityId }) => { const handleClick = ({ commodityId }) => {
uni.navigateTo({ url: `/pages/goods/index?commodityId=${commodityId}` }); uni.navigateTo({ url: `/pages/goods/index?commodityId=${commodityId}` });
}; };
const handleBooking = ({ commodityId }) => {
uni.navigateTo({ url: `/pages/booking/index?commodityId=${commodityId}` });
};
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">

View File

@@ -79,22 +79,27 @@ const selectedDate = ref({
totalDays: 1, totalDays: 1,
}); });
const dataList = ref([]); const dataList = ref([]);
const commodityGroupDTOList = ref([]);
const paging = ref(null); const paging = ref(null);
const currentType = ref("0"); // 当前选中类型 const currentType = ref("0"); // 当前选中类型
const queryList = async (pageNum = 1, pageSize = 10) => { const queryList = async (pageNum = 1, pageSize = 10) => {
try { try {
const res = await quickBookingList({ const params = {
commodityTypeCode: currentType.value, commodityTypeCode: currentType.value,
size: pageSize, size: pageSize,
current: pageNum, current: pageNum,
}); };
console.log("API响应:", res.data.commodityGroupDTOList);
if (res && res.data && res.data.commodityGroupDTOList) { if (currentType.value === "0") {
commodityGroupDTOList.value = res.data.commodityGroupDTOList; params.checkInDate = selectedDate.value.startDate;
const records = res.data.commodityGroupDTOList[0].commodityList; params.checkOutDate = selectedDate.value.endDate;
}
const res = await quickBookingList(params);
console.log("API响应:", res.data.records);
if (res && res.data && res.data.records) {
const records = res.data.records;
// 完成数据加载,第二个参数表示是否还有更多数据 // 完成数据加载,第二个参数表示是否还有更多数据
paging.value.complete(records); paging.value.complete(records);
@@ -112,13 +117,11 @@ const queryList = async (pageNum = 1, pageSize = 10) => {
const handleTabChange = ({ item }) => { const handleTabChange = ({ item }) => {
console.log("item", item.value); console.log("item", item.value);
currentType.value = item.value; currentType.value = item.value;
// 从列表中找到对应的商品列表
const { commodityList } = if (currentType.value === "0") {
commodityGroupDTOList.value.find( }
(i) => i.commodityTypeCode === item.value
) || {}; paging.value.reload();
dataList.value = commodityList || [];
paging.value.complete(commodityList);
}; };
// 处理日历关闭 // 处理日历关闭
@@ -131,6 +134,7 @@ const handleDateSelect = (data) => {
selectedDate.value = data; selectedDate.value = data;
calendarVisible.value = false; calendarVisible.value = false;
console.log("选择的日期:", data); console.log("选择的日期:", data);
paging.value.reload();
}; };
</script> </script>

View File

@@ -64,6 +64,17 @@
} }
} }
] ]
},
{
"root": "pages-booking",
"pages": [
{
"path": "index",
"style": {
"navigationStyle": "custom"
}
}
]
} }
], ],
"globalStyle": { "globalStyle": {

View File

@@ -8,20 +8,22 @@
</view> </view>
<scroll-view scroll-y class="scroll-container overflow-auto"> <scroll-view scroll-y class="scroll-container overflow-auto">
<view class="pl-8 pr-8 pb-24"> <view class="pl-4 pr-4 pb-24">
<view class="flex flex-wrap"> <view class="grid-container">
<view <view
class="album-item" class="album-item"
v-for="(item, index) in albumList" v-for="(item, index) in albumList"
:key="index" :key="index"
> >
<view class="album-image-wrapper">
<image <image
class="album-image" class="album-image"
:src="item.photoUrl" :src="item.photoUrl"
mode="aspectFill" mode="aspectFill"
@click="handlePreview(item.photoUrl)" @click="handlePreview(item.photoUrl)"
></image> ></image>
<view class="album-title">{{ item.title }}</view> <view class="album-title">{{ item.name }}</view>
</view>
</view> </view>
</view> </view>
</view> </view>
@@ -53,35 +55,49 @@ const handlePreview = (photoUrl) => {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.scroll-container { .grid-container {
flex: 1; display: grid;
height: 100%; grid-template-columns: repeat(2, 1fr); // 每行2列
grid-gap: 8px;
padding: 12px;
} }
.album-item { .album-item {
position: relative; position: relative;
width: calc(50% - 8px); width: 100%;
margin: 4px; }
.album-image-wrapper {
position: relative;
width: 100%;
aspect-ratio: 1 / 1; // 保持宽高1:1
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
} }
.album-image { .album-image {
width: 100%; width: 100%;
height: 150px; height: 100%;
border-radius: 8px; object-fit: cover;
} }
.album-title { .album-title {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; right: 0;
padding: 8px; padding: 8px;
background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, #000000 100%); background: linear-gradient(
border-radius: 0 0 8px 8px; 180deg,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.6) 100%
);
color: #fff; color: #fff;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 0 0 8px 8px;
} }
</style> </style>

View File

@@ -540,7 +540,7 @@ const initTypewriterManager = () => {
} }
typewriterManager = new TypewriterManager({ typewriterManager = new TypewriterManager({
typingSpeed: 30, typingSpeed: 10,
cursorText: "", cursorText: "",
}); });

View File

@@ -16,6 +16,6 @@
} }
.tag-text { .tag-text {
color: #00a6ff; /* 蓝色文字,可根据设计调整 */ color: #2d91ff; /* 蓝色文字,可根据设计调整 */
font-size: $uni-font-size-base; font-size: $uni-font-size-base;
} }

View File

@@ -35,7 +35,7 @@ export default {
}, },
themeColor: { themeColor: {
type: String, type: String,
default: "#00A6FF", default: "#2D91FF",
}, },
codeBgColor: { codeBgColor: {
type: String, type: String,
@@ -45,6 +45,14 @@ export default {
type: String, type: String,
default: "PingFang SC, PingFang SC", default: "PingFang SC, PingFang SC",
}, },
fontColor: {
type: String,
default: "#171717",
},
fontSubColor: {
type: String,
default: "#4D4D4D",
},
aiMode: { aiMode: {
type: Boolean, type: Boolean,
default: false, default: false,
@@ -97,12 +105,15 @@ export default {
const themeColor = this.themeColor; const themeColor = this.themeColor;
const codeBgColor = this.codeBgColor; const codeBgColor = this.codeBgColor;
const fontFamily = this.fontFamily; const fontFamily = this.fontFamily;
const fontColor = this.fontColor;
const fontSubColor = this.fontSubColor;
let zeroStyle = { let zeroStyle = {
p: ` p: `
margin:4px 0; margin:4px 0;
font-size: 15px; font-size: 15px;
line-height:1.65; line-height:1.55;
font-family: ${fontFamily}; font-family: ${fontFamily};
color: ${fontColor};
`, `,
// 一级标题 // 一级标题
h1: ` h1: `
@@ -149,12 +160,14 @@ export default {
`, `,
// 列表 // 列表
ul: ` ul: `
font-size: 14px;
margin: 4px 0; margin: 4px 0;
color: #555; color: ${fontSubColor};
`, `,
li: ` li: `
font-size: 14px;
margin: 4px 0; margin: 4px 0;
color: #555; color: ${fontSubColor};
`, `,
// 链接 // 链接
a: ` a: `
@@ -168,6 +181,7 @@ export default {
`, `,
// 斜体 // 斜体
em: ` em: `
font-size: 14px;
color: ${themeColor}; color: ${themeColor};
font-family: ${fontFamily}; font-family: ${fontFamily};
letter-spacing:0.3em; letter-spacing:0.3em;
@@ -191,11 +205,11 @@ export default {
`, `,
th: ` th: `
border: 1px solid #202121; border: 1px solid #202121;
color: #555; color: ${fontSubColor};
`, `,
td: ` td: `
color:#555; color: ${fontSubColor};
border: 1px solid #555555; border: 1px solid ${fontSubColor};
`, `,
pre: ` pre: `
border-radius: 5px; border-radius: 5px;
@@ -211,12 +225,15 @@ export default {
const themeColor = this.themeColor; const themeColor = this.themeColor;
const codeBgColor = this.codeBgColor; const codeBgColor = this.codeBgColor;
const fontFamily = this.fontFamily; const fontFamily = this.fontFamily;
const fontColor = this.fontColor;
const fontSubColor = this.fontSubColor;
let zeroStyle = { let zeroStyle = {
p: ` p: `
margin:4px 0; margin:4px 0;
font-size: 15px; font-size: 15px;
line-height:1.55; line-height:1.55;
font-family: ${fontFamily}; font-family: ${fontFamily};
color: ${fontColor};
`, `,
// 一级标题 // 一级标题
h1: ` h1: `
@@ -272,11 +289,13 @@ export default {
// 列表 // 列表
ul: ` ul: `
margin: 4px 0; margin: 4px 0;
color: #555; font-size: 14px;
color: ${fontSubColor};
`, `,
li: ` li: `
margin: 4px 0; margin: 4px 0;
color: #555; font-size: 14px;
color: ${fontSubColor};
`, `,
// 链接 // 链接
a: ` a: `
@@ -311,12 +330,12 @@ export default {
border-collapse: collapse; border-collapse: collapse;
`, `,
th: ` th: `
border: 1px solid #202121; border: 1px solid ${fontSubColor};
color: #555; color: ${fontSubColor};
`, `,
td: ` td: `
color:#555; color: ${fontSubColor};
border: 1px solid #555555; border: 1px solid ${fontSubColor};
`, `,
pre: ` pre: `
border-radius: 5px; border-radius: 5px;

View File

@@ -6,7 +6,7 @@ class TypewriterManager {
constructor(options = {}) { constructor(options = {}) {
// 配置选项 // 配置选项
this.options = { this.options = {
typingSpeed: 50, // 打字速度(毫秒) typingSpeed: 10, // 打字速度(毫秒)- 调整为更快的速度
cursorText: "", // 光标样式 cursorText: "", // 光标样式
...options, ...options,
}; };