From 3f7a366a1899ca30eb438ddd4c84ce4050813e95 Mon Sep 17 00:00:00 2001 From: LinCyJang Date: Fri, 31 Oct 2025 00:50:02 +0800 Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=E7=AE=A1=E5=AE=B6=E8=AF=A6?= =?UTF-8?q?=E6=83=85/=E7=BC=BA=E7=AE=A1=E5=AE=B6=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pkg_product/views/housekeeperDetail.vue | 1297 ++--------------------- pkg_product/views/sojoumStore.vue | 22 +- 2 files changed, 101 insertions(+), 1218 deletions(-) diff --git a/pkg_product/views/housekeeperDetail.vue b/pkg_product/views/housekeeperDetail.vue index c686fcf..eae1a4d 100644 --- a/pkg_product/views/housekeeperDetail.vue +++ b/pkg_product/views/housekeeperDetail.vue @@ -4,7 +4,6 @@ @@ -26,90 +25,47 @@ - TA能帮你 - - - - {{ tag.text }} - + + 旅居管家 + {{record.name}} + + + + {{ record.desc }} - - - - - - 金牌管家 + + {{ tag }} + + + {{ record.intro }} + + + + 金牌管家 + / 服务保障 - - 高品质服务，助力顺畅沟通 - - 安全守护·接急应证 - 皮对突发装况 - - - - 出行天数：C1驾照(5年驾龄)，提供途径改变或小众自驾路线规划 + + · {{ item }} - - - - - - - 服务项目 - 精选优质服务，满足您的需求 - - - - - - - {{ service.name }} - - ￥ - {{ service.price }} - /{{ service.unit }} - - - - {{ service.description }} - - - - {{ feature }} - - - - - 服务时长：{{ service.duration }} - 已预约{{ service.bookingCount }}次 - - - - - - 立即预约 + + TA能帮你 + + + + 设计行程 - @@ -118,557 +74,41 @@ export default { name: 'HousekeeperDetail', data() { return { - scrollData: { - scrollTop: 0, - lastScrollTop: 0, - showBackToTop: false, - navbarVisible: true - }, - - // 性能优化相关 - reviewsLoading: false, - hasMoreReviews: true, - - housekeeperId: '', - - // 默认数据 - defaultBg: '/static/images/housekeeper-bg.jpg', - defaultAvatar: '/static/images/default-avatar.png', - defaultTags: [ - { icon: '/static/images/tag-schedule.png', text: '设计行程' }, - { icon: '/static/images/tag-food.png', text: '推荐美食' }, - { icon: '/static/images/tag-guide.png', text: '游玩向导' }, - { icon: '/static/images/tag-custom.png', text: '预定门票' }, - { icon: '/static/images/tag-recommend.png', text: '特色推荐' }, - { icon: '/static/images/tag-culture.png', text: '文化讲解' }, - { icon: '/static/images/tag-private.png', text: '私人定制' }, - { icon: '/static/images/tag-memory.png', text: '记忆保存' } - ], - - // 管家信息 - housekeeperInfo: { - id: 1, - name: '甄美丽', - title: '旅居管家', - avatar: '/static/images/housekeeper-avatar.jpg', - backgroundImage: '/static/images/housekeeper-bg.jpg', - rating: 5.0, - serviceYears: 3, - isOnline: true, - isGoldHousekeeper: true, - isFavorite: false, - description: '擅长行程规划，专注带来深度体验乡村旅游，农耕体验、古村探秘、山野徒步、农家美食，量身规划沉浸式乡村旅程。', - tags: [ - { icon: '/static/images/tag-schedule.png', text: '设计行程' }, - { icon: '/static/images/tag-food.png', text: '推荐美食' }, - { icon: '/static/images/tag-guide.png', text: '游玩向导' }, - { icon: '/static/images/tag-custom.png', text: '预定门票' } - ] - }, - - // 服务列表 - serviceList: [ - { - id: 1, - name: '一日游规划', - price: 299, - unit: '天', - duration: '8小时', - bookingCount: 128, - description: '专业定制一日游行程，包含景点推荐、路线规划、美食指南', - features: ['个性化定制', '全程陪同', '拍照服务'] - }, - { - id: 2, - name: '多日游策划', - price: 199, - unit: '天', - duration: '全天', - bookingCount: 86, - description: '深度多日游策划，涵盖住宿、交通、景点的全方位安排', - features: ['行程规划', '住宿推荐', '交通安排'] - }, - { - id: 3, - name: '美食探店', - price: 158, - unit: '次', - duration: '3小时', - bookingCount: 203, - description: '带您探索当地特色美食，品尝地道农家菜和特色小吃', - features: ['美食推荐', '预约订座', '文化讲解'] - } - ], - - // 评价列表 - reviewsList: [ - { - id: 1, - username: '张**', - userAvatar: '/static/images/user1.jpg', - rating: 5, - date: '2024-01-15', - content: '甄美丽管家服务非常专业，行程安排得很合理，带我们体验了很多当地特色，强烈推荐！', - images: ['/static/images/review1.jpg', '/static/images/review2.jpg'] - }, - { - id: 2, - username: '李**', - userAvatar: '/static/images/user2.jpg', - rating: 5, - date: '2024-01-10', - content: '第一次体验管家服务，超出预期！美丽很贴心，帮我们安排了很多有趣的活动。', - images: [] - }, - { - id: 3, - username: '王**', - userAvatar: '/static/images/user3.jpg', - rating: 4, - date: '2024-01-08', - content: '服务态度很好，对当地很熟悉，推荐的美食都很棒，下次还会选择她的服务。', - images: ['/static/images/review3.jpg'] - } - ], - - // 预约表单 - showBookingForm: false, - showDatePicker: false, - selectedService: {}, - bookingForm: { - date: '', - time: '', - phone: '', - requirements: '' - }, - formErrors: { - date: '', - time: '', - phone: '' - }, - availableTimeSlots: [ - { label: '09:00', value: '09:00', disabled: false }, - { label: '10:00', value: '10:00', disabled: false }, - { label: '11:00', value: '11:00', disabled: false }, - { label: '14:00', value: '14:00', disabled: false }, - { label: '15:00', value: '15:00', disabled: false }, - { label: '16:00', value: '16:00', disabled: false }, - { label: '17:00', value: '17:00', disabled: false }, - { label: '18:00', value: '18:00', disabled: false } - ] - } - }, - - computed: { - displayReviews() { - return this.reviewsList.slice(0, 3) - }, - - // 表单是否有效 - isFormValid() { - return this.bookingForm.date && - this.bookingForm.time && - this.bookingForm.phone && - this.isValidPhone(this.bookingForm.phone) && - !this.formErrors.date && - !this.formErrors.time && - !this.formErrors.phone - }, - - // 最小日期（今天） - minDate() { - return new Date().toISOString().split('T')[0] - }, - - // 最大日期（30天后） - maxDate() { - const date = new Date() - date.setDate(date.getDate() + 30) - return date.toISOString().split('T')[0] + record: {} } }, onLoad(options) { - this.housekeeperId = options.id || '1' - this.loadHousekeeperDetail() + this.record = JSON.parse(decodeURIComponent(options.obj)) + console.log(this.record); - // 预加载关键资源 - this.$nextTick(() => { - this.preloadResources() - }) - - }, - - onUnload() { - // 移除事件监听 - uni.$off('openBooking') - }, - - onPageScroll(e) { - // 使用优化的滚动处理 - // this.optimizedScrollHandler()(e) - }, - - onReachBottom() { - // 触底加载更多评价 - this.loadMoreReviews() }, methods: { - // 加载管家详情 - async loadHousekeeperDetail() { - try { - uni.showLoading({ title: '加载中...' }) - // 这里调用API获取管家详情 - // const res = await getHousekeeperDetail(this.housekeeperId) - // this.housekeeperInfo = res.data - // this.serviceList = res.data.services - // this.reviewsList = res.data.reviews - } catch (error) { - uni.showToast({ title: '加载失败', icon: 'error' }) - } finally { - uni.hideLoading() - } - }, - - // 选择服务 - selectService(service) { - this.selectedService = service - this.showBookingForm = true - }, - - // 预约服务 - bookService(service) { - this.selectService(service) - }, - - // 快速预约 - quickBook() { - if (this.serviceList.length > 0) { - this.selectService(this.serviceList[0]) - } - }, - - // 关闭预约表单 - closeBookingForm() { - this.showBookingForm = false - this.resetBookingForm() - }, - - // 重置预约表单 - resetBookingForm() { - this.bookingForm = { - date: '', - time: '', - phone: '', - requirements: '' - } - this.formErrors = { - date: '', - time: '', - phone: '' - } - }, - - // 弹窗状态变化 - onPopupChange(e) { - if (!e.show) { - this.closeBookingForm() - } - }, - - // 日期变化 - onDateChange(value) { - this.bookingForm.date = value - this.formErrors.date = '' - this.showDatePicker = false - this.updateAvailableTimeSlots() - }, - - // 选择时间段 - selectTimeSlot(slot) { - if (slot.disabled) return - - this.bookingForm.time = slot.value - this.formErrors.time = '' - }, - - // 更新可用时间段 - updateAvailableTimeSlots() { - const selectedDate = new Date(this.bookingForm.date) - const today = new Date() - const isToday = selectedDate.toDateString() === today.toDateString() - - if (isToday) { - const currentHour = today.getHours() - this.availableTimeSlots.forEach(slot => { - const slotHour = parseInt(slot.value.split(':')[0]) - slot.disabled = slotHour <= currentHour - }) - } else { - this.availableTimeSlots.forEach(slot => { - slot.disabled = false - }) - } - }, - - // 验证手机号 - validatePhone() { - if (!this.bookingForm.phone) { - this.formErrors.phone = '请输入联系电话' - } else if (!this.isValidPhone(this.bookingForm.phone)) { - this.formErrors.phone = '请输入正确的手机号' - } else { - this.formErrors.phone = '' - } - }, - - // 检查手机号格式 - isValidPhone(phone) { - return /^1[3-9]\d{9}$/.test(phone) - }, - - // 提交预约 - async submitBooking() { - // 如果表单无效，不允许提交 - if (!this.isFormValid) { - this.validateForm() - return - } - - try { - uni.showLoading({ title: '提交中...' }) - - const bookingData = { - housekeeperId: this.housekeeperId, - serviceId: this.selectedService.id, - serviceName: this.selectedService.name, - date: this.bookingForm.date, - time: this.bookingForm.time, - phone: this.bookingForm.phone, - requirements: this.bookingForm.requirements, - totalPrice: this.selectedService.price - } - - // 调用预约API - // const result = await this.$api.housekeeper.submitBooking(bookingData) - - // 模拟API调用 - await new Promise(resolve => setTimeout(resolve, 1000)) - - uni.showToast({ title: '预约成功', icon: 'success' }) - this.closeBookingForm() - - // 跳转到订单页面 - setTimeout(() => { - uni.navigateTo({ url: '/pages/order/MyOrder/index' }) - }, 1500) - - } catch (error) { - console.error('预约失败:', error) - uni.showToast({ title: '预约失败，请重试', icon: 'error' }) - } finally { - uni.hideLoading() - } - }, - - // 验证整个表单 - validateForm() { - let hasError = false - - if (!this.bookingForm.date) { - this.formErrors.date = '请选择预约日期' - hasError = true - } - - if (!this.bookingForm.time) { - this.formErrors.time = '请选择预约时间' - hasError = true - } - - if (!this.bookingForm.phone) { - this.formErrors.phone = '请输入联系电话' - hasError = true - } else if (!this.isValidPhone(this.bookingForm.phone)) { - this.formErrors.phone = '请输入正确的手机号' - hasError = true - } - - if (hasError) { - uni.showToast({ title: '请完善表单信息', icon: 'none' }) - } - - return !hasError - }, - - // 联系管家 - contactHousekeeper() { - // 跳转到聊天页面或拨打电话 - uni.navigateTo({ - url: `/pages/chat/index?housekeeperId=${this.housekeeperId}` - }) - }, - - // 收藏管家 - async favoriteHousekeeper() { - try { - // 调用收藏API - // await toggleFavoriteHousekeeper(this.housekeeperId) - - this.housekeeperInfo.isFavorite = !this.housekeeperInfo.isFavorite - const message = this.housekeeperInfo.isFavorite ? '收藏成功' : '取消收藏' - uni.showToast({ title: message, icon: 'success' }) - - } catch (error) { - uni.showToast({ title: '操作失败', icon: 'error' }) - } - }, - - // 查看更多评价 - viewMoreReviews() { - uni.navigateTo({ - url: `/pages/reviews/index?housekeeperId=${this.housekeeperId}` - }) - }, - - // 预览图片 - previewImage(images, current) { - uni.previewImage({ - urls: images, - current: current - }) - }, - - // 图片懒加载 - onImageLoad(e) { - // 图片加载成功后的处理 - console.log('图片加载成功:', e) - }, - - onImageError(e) { - // 图片加载失败的处理 - console.log('图片加载失败:', e) - // 可以设置默认图片 - }, - - // 节流函数 - 用于滚动事件优化 - throttle(func, delay) { - let timeoutId - let lastExecTime = 0 - return function (...args) { - const currentTime = Date.now() - - if (currentTime - lastExecTime > delay) { - func.apply(this, args) - lastExecTime = currentTime - } else { - clearTimeout(timeoutId) - timeoutId = setTimeout(() => { - func.apply(this, args) - lastExecTime = Date.now() - }, delay - (currentTime - lastExecTime)) - } - } - }, - - // 防抖函数 - 用于搜索等输入优化 - debounce(func, delay) { - let timeoutId - return function (...args) { - clearTimeout(timeoutId) - timeoutId = setTimeout(() => func.apply(this, args), delay) - } - }, - - // 优化的滚动处理 - optimizedScrollHandler() { - return this.throttle((e) => { - this.scrollData.scrollTop = e.detail.scrollTop - - // 当滚动到一定位置时显示返回顶部按钮 - this.scrollData.showBackToTop = e.detail.scrollTop > 500 - - // 滚动时隐藏/显示导航栏 - if (e.detail.scrollTop > this.scrollData.lastScrollTop) { - // 向下滚动 - this.scrollData.navbarVisible = false - } else { - // 向上滚动 - this.scrollData.navbarVisible = true - } - this.scrollData.lastScrollTop = e.detail.scrollTop - }, 16) // 约60fps - }, - - // 返回顶部 - backToTop() { - uni.pageScrollTo({ - scrollTop: 0, - duration: 300 - }) - }, - - // 预加载关键资源 - preloadResources() { - // 预加载管家头像 - if (this.housekeeperInfo.avatar) { - const img = new Image() - img.src = this.housekeeperInfo.avatar - } - - // 预加载服务图片 - this.serviceList.forEach(service => { - if (service.image) { - const img = new Image() - img.src = service.image - } - }) - }, - - // 数据分页加载 - async loadMoreReviews() { - if (this.reviewsLoading || !this.hasMoreReviews) return - - this.reviewsLoading = true - - try { - // 模拟API调用 - await new Promise(resolve => setTimeout(resolve, 1000)) - - const newReviews = [ - // 模拟新的评价数据 - { - id: Date.now(), - user: { - name: '新用户', - avatar: '/static/images/default-avatar.png' - }, - rating: 5, - content: '新加载的评价内容...', - date: '2024-01-20', - images: [] - } - ] - - this.reviewsList.push(...newReviews) - - // 检查是否还有更多数据 - this.hasMoreReviews = this.reviewsList.length < 50 // 假设最多50条评价 - - } catch (error) { - console.error('加载更多评价失败:', error) - uni.showToast({ title: '加载失败', icon: 'error' }) - } finally { - this.reviewsLoading = false - } - } + } } \ No newline at end of file diff --git a/pkg_product/views/sojoumStore.vue b/pkg_product/views/sojoumStore.vue index 5135579..42dd88f 100644 --- a/pkg_product/views/sojoumStore.vue +++ b/pkg_product/views/sojoumStore.vue @@ -375,18 +375,6 @@ export default { jiaLouProductArr: [], // 管家列表 jiaLouStewardArr: [ - { - name: '甄美丽', - avatar: '/static/images/horn.png', - desc: '我是旅居管家美丽，有5年从业经验，熟稔各地风土人情。可依需求调节行程节奏，让每段旅居都充满独特记忆，成为难忘故事。', - tags: ['真人美食活地图','体验设计师','本地活字典'] - }, - { - name: '李阿乐', - avatar: '/static/images/horn.png', - desc: '资深旅居向导，擅长深度文化体验与特色美食推荐，贴心服务。', - tags: ['美食推荐','文化向导','行程规划'] - } ] } }, @@ -413,7 +401,7 @@ export default { // 跳转管家详情 goHousekeeperDetail(item) { uni.navigateTo({ - url: '/pkg_product/views/housekeeperDetail?id=' + item.id + url: '/pkg_product/views/housekeeperDetail?obj=' +JSON.stringify(item) }) }, getJiaLouStewardList() { @@ -1271,9 +1259,11 @@ export default { position: relative; } .star { - position: absolute; right: 8rpx; - top: -12rpx; + /* top: -12rpx; */ + display: flex; + justify-content: flex-end; + translate: 0 -40%; } .star-icon { width: 58rpx; @@ -1321,7 +1311,7 @@ export default { border-radius: 120rpx; background: #FADE9F; padding: 6rpx 5rpx; - margin-bottom: 12rpx; color: #333; + translate: 0% -10%; } \ No newline at end of file