tabbar组件
Tabbar 标签栏
tabbar属性
v-model:当前选中标签的名称或索引值
active-color:选中标签的颜色
TabbarItem属性
to:点击后跳转的目标路由对象,同 vue-router 的 to 属性
icon:图标名称或图片链接,可选值见 Icon 组件
dot:是否显示图标右上角小红点
info:图标右上角徽标的内容
TabbarItem插槽
icon:自定义图标
//components/tabbar.vue
<template>
<div class="tab-bar">
<van-tabbar
v-model="currentIndex"
active-color="#ff9854"
route
>
<template v-for="(item, index) in tabbarData">
<van-tabbar-item :to="item.path">
<template #default>
<span>{{ item.text }}</span>
</template>
<template #icon>
<img v-if="currentIndex !== index" :src="getAssetURL(item.image)" alt="">
<img v-else :src="getAssetURL(item.imageActive)" alt="">
</template>
</van-tabbar-item>
</template>
</van-tabbar>
</div>
</template>
<script setup>
import tabbarData from "@/assets/data/tabbar.js"
import { getAssetURL } from "@/utils/load_assets.js"
import { ref, watch } from "vue";
import { useRoute } from "vue-router";
// 监听路由改变时, 找到对应的索引, 设置currentIndex
const route = useRoute()
const currentIndex = ref(0)
watch(route, (newRoute) => {
const index = tabbarData.findIndex(item => item.path === newRoute.path)
if (index === -1) return
currentIndex.value = index
})
</script>
<style lang="less" scoped>
.tab-bar {
// 局部定义一个变量: 只针对.tab-bar子元素才生效
// --van-tabbar-item-icon-size: 30px !important;
// 找到类, 对类中的CSS属性重写
// :deep(.class)找到子组件的类, 让子组件的类也可以生效
:deep(.van-tabbar-item__icon) {
font-size: 50px;
}
img {
height: 26px;
}
}
</style>
封装getAssetURL方法
//utils/load_assets.js
export const getAssetURL = (image) => {
// 参数一: 相对路径
// 参数二: 当前路径的URL
return new URL(`../assets/img/${image}`, import.meta.url).href
}
隐藏TabBar
//router/index.js
{
path: "/city",
component: () => import("@/views/city/city.vue"),
meta: {
hideTabBar: true
}
}
//App.vue
<template>
<div class="app">
<!-- name属性 -->
<router-view v-slot="props">
<keep-alive include="home">
<component :is="props.Component"></component>
</keep-alive>
</router-view>
<tab-bar v-show="!route.meta.hideTabBar"/>
<loading/>
</div>
</template>
<script setup>
import TabBar from "@/components/tab-bar/tab-bar.vue"
import Loading from "@/components/loading/loading.vue"
import { useRoute } from "vue-router";
const route = useRoute()
</script>
<style scoped>
</style>
Loading组件
// APP.vue
<template>
<div class="app">
<!-- name属性 -->
<router-view v-slot="props">
<keep-alive include="home">
<component :is="props.Component"></component>
</keep-alive>
</router-view>
<tab-bar v-show="!route.meta.hideTabBar"/>
<loading/>
</div>
</template>
<script setup>
import TabBar from "@/components/tab-bar/tab-bar.vue"
import Loading from "@/components/loading/loading.vue"
import { useRoute } from "vue-router";
const route = useRoute()
</script>
<style scoped>
</style>
//components/loading/loading.vue
<template>
<div
class="loading"
v-show="mainStore.isLoading"
@click="loadingClick"
>
<div class="bg">
<img src="@/assets/img/home/full-screen-loading.gif" alt="">
</div>
</div>
</template>
<script setup>
import useMainStore from '@/stores/modules/main';
const mainStore = useMainStore()
const loadingClick = () => {
mainStore.isLoading = false
}
</script>
<style lang="less" scoped>
.loading {
position: fixed;
z-index: 999;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,.2);
.bg {
display: flex;
justify-content: center;
align-items: center;
width: 104px;
height: 104px;
background: url(@/assets/img/home/loading-bg.png) 0 0 / 100% 100%;
img {
width: 70px;
height: 70px;
margin-bottom: 8px;
}
}
}
</style>
request
//services/request/index.js
import axios from 'axios'
import { BASE_URL, TIMEOUT } from './config'
import useMainStore from '@/stores/modules/main'
const mainStore = useMainStore()
class HYRequest {
constructor(baseURL, timeout=10000) {
this.instance = axios.create({
baseURL,
timeout
})
this.instance.interceptors.request.use(config => {
mainStore.isLoading = true
return config
}, err => {
return err
})
this.instance.interceptors.response.use(res => {
mainStore.isLoading = false
return res
}, err => {
mainStore.isLoading = false
return err
})
}
request(config) {
// mainStore.isLoading = true
return new Promise((resolve, reject) => {
this.instance.request(config).then(res => {
resolve(res.data)
// mainStore.isLoading = false
}).catch(err => {
reject(err)
// mainStore.isLoading = false
})
})
}
get(config) {
return this.request({ ...config, method: "get" })
}
post(config) {
return this.request({ ...config, method: "post" })
}
}
export default new HYRequest(BASE_URL, TIMEOUT)
首页
滚动底部的加载更多&页面滚动显示搜索
<template>
<div class="home" ref="homeRef">
<home-nav-bar/>
<div class="banner">
<img src="@/assets/img/home/banner.webp" alt="">
</div>
<home-search-box />
<home-categories />
<div class="search-bar" v-if="isShowSearchBar">
<search-bar :start-date="'09.19'" :end-date="'09.20'"/>
</div>
<home-content />
<!-- <button @click="moreBtnClick">加载更多</button> -->
</div>
</template>
<script>
export default { name: "home" }
</script>
<script setup>
import { onActivated, ref, watch } from 'vue'
import useHomeStore from '@/stores/modules/home';
import HomeNavBar from './cpns/home-nav-bar.vue'
import HomeSearchBox from './cpns/home-search-box.vue'
import HomeCategories from './cpns/home-categories.vue'
import HomeContent from './cpns/home-content.vue'
import SearchBar from '@/components/search-bar/search-bar.vue'
import useScroll from '@/hooks/useScroll'
import { computed } from '@vue/reactivity';
// 发送网络请求
const homeStore = useHomeStore()
homeStore.fetchHotSuggestData()
homeStore.fetchCategoriesData()
homeStore.fetchHouselistData()
// 监听滚动到底部
const homeRef = ref()
const { isReachBottom, scrollTop } = useScroll(homeRef)
watch(isReachBottom, (newValue) => {
if (newValue) {
homeStore.fetchHouselistData().then(() => {
isReachBottom.value = false
})
}
})
// 搜索框显示的控制
// const isShowSearchBar = ref(false)
// watch(scrollTop, (newTop) => {
// isShowSearchBar.value = newTop > 100
// })
// 定义的可响应式数据, 依赖另外一个可响应式的数据, 那么可以使用计算函数(computed)
const isShowSearchBar = computed(() => {
return scrollTop.value >= 360
})
// 跳转回home时, 保留原来的位置
onActivated(() => {
homeRef.value?.scrollTo({
top: scrollTop.value
})
})
</script>
<style lang="less" scoped>
.home {
height: 100vh;
overflow-y: auto;
box-sizing: border-box;
padding-bottom: 60px;
}
.banner {
img {
width: 100%;
}
}
.search-bar {
position: fixed;
z-index: 9;
top: 0;
left: 0;
right: 0;
height: 45px;
padding: 16px 16px 10px;
background-color: #fff;
}
</style>
useScroll工具
// hooks/useScroll.js
import { onDeactivated, onMounted, onUnmounted, ref } from 'vue';
import { throttle } from 'underscore'
// console.log(throttle)
// export default function useScroll(reachBottomCB) {
// const scrollListenerHandler = () => {
// const clientHeight = document.documentElement.clientHeight
// const scrollTop = document.documentElement.scrollTop
// const scrollHeight = document.documentElement.scrollHeight
// console.log("-------")
// if (clientHeight + scrollTop >= scrollHeight) {
// console.log("滚动到底部了")
// if (reachBottomCB) reachBottomCB()
// }
// }
// onMounted(() => {
// window.addEventListener("scroll", scrollListenerHandler)
// })
// onUnmounted(() => {
// window.removeEventListener("scroll", scrollListenerHandler)
// })
// }
export default function useScroll(elRef) {
let el = window
const isReachBottom = ref(false)
const clientHeight = ref(0)
const scrollTop = ref(0)
const scrollHeight = ref(0)
// 防抖/节流
//npm install underscore
const scrollListenerHandler = throttle(() => {
if (el === window) {
clientHeight.value = document.documentElement.clientHeight//clientHeight:包括padding但不包括border、margin、滚动条的高度,即客户端高度
scrollTop.value = document.documentElement.scrollTop//scrollTop: 代表在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高
scrollHeight.value = document.documentElement.scrollHeight//scrollHeight:表示了所有区域的高度,包含了因为滚动被隐藏的部分
} else {
clientHeight.value = el.clientHeight
scrollTop.value = el.scrollTop
scrollHeight.value = el.scrollHeight
}
if (clientHeight.value + scrollTop.value >= scrollHeight.value) {
console.log("滚动到底部了")
isReachBottom.value = true
}
}, 100)
onMounted(() => {
if (elRef) el = elRef.value
el.addEventListener("scroll", scrollListenerHandler)
})
onUnmounted(() => {
el.removeEventListener("scroll", scrollListenerHandler)
})
return { isReachBottom, clientHeight, scrollTop, scrollHeight }
}
search-bar组件
// components/search-bar/search-bar.vue
<template>
<div class="search">
<div class="select-time">
<div class="item start">
<div class="name">住</div>
<div class="date">{{ startDateStr }}</div>
</div>
<div class="item end">
<div class="name">离</div>
<div class="date">{{ endDateStr }}</div>
</div>
</div>
<div class="content">
<div class="keyword">关键字/位置/民宿</div>
</div>
<div class="right">
<i class="icon-search"></i>
</div>
</div>
</template>
<script setup>
import useMainStore from '@/stores/modules/main';
import { formatMonthDay } from '@/utils/format_date';
import { computed } from '@vue/reactivity';
import { storeToRefs } from 'pinia';
const mainStore = useMainStore()
const { startDate, endDate } = storeToRefs(mainStore)
const startDateStr = computed(() => formatMonthDay(startDate.value, "MM.DD"))
const endDateStr = computed(() => formatMonthDay(endDate.value, "MM.DD"))
</script>
<style lang="less" scoped>
.search {
display: flex;
flex-direction: row;
align-items: center;
height: 45px;
line-height:45px;
padding: 0 10px;
font-size: 14px;
color: #999;
border-radius: 6px;
background: #f2f4f6;
.left {
// max-width: 80px;
font-weight: 500;
min-width: 30px;
font-size: 14px;
padding-right: 6px;
margin-right: 5px;
border-right: 1px solid #fff;
color: #333;
white-space: nowrap;
}
.select-time {
display: flex;
flex-direction: column;
.item {
display: flex;
flex-direction: row;
align-items: center;
line-height: normal;
font-size: 10px;
.name {
font-size: 10px;
}
.date {
position: relative;
color: #333;
margin: 0 10px 0 3px;
font-weight: 500;
}
}
.end .date::after {
content: " ";
width: 0;
height: 0;
border: 4px solid #666;
border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #666;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
bottom: 0px;
right: -12px;
}
}
.content {
position: relative;
flex: 1;
padding: 0 6px;
text-align: left;
border-left: 1px solid #fff;
.keyword {
max-width: 155px;
font-size: 12px;
}
.icon-cancel {
position: absolute;
top: 30%;
right: 0;
display: inline-block;
background-image: url(../../assets/img/sprite.png);
background-position: -92px -58.5px;
width: 14.5px;
height: 15px;
background-size: 125px 110px;
}
}
.right {
display: flex;
align-items: center;
}
.icon-search {
width: 24px;
height: 24px;
display: inline-block;
background-image: url(../../assets/img/home/home-sprite.png);
background-position: -29px -151px;
background-size: 207px 192px;
}
}
</style>
NavBar组件
//views/home/cpns/home-nav-bar.vue
<template>
<div class="nav-bar">
<div class="title">弘源旅途</div>
</div>
</template>
<script setup>
</script>
<style lang="less" scoped>
.nav-bar {
display: flex;
justify-content: center;
align-items: center;
height: 46px;
border-bottom: 1px solid #f2f2f2;
.title {
color: var(--primary-color);
font-size: 16px;
font-weight: 600;
}
}
</style>
home-search-box组件
Calendar 日历
属性
- v-model:show:是否显示日历弹窗
- type:选择类型: single 表示选择单个日期, multiple 表示选择多个日期, range 表示选择日期区间
- round:是否显示圆角弹窗
- :show-confirm是否展示确认按钮
- @confirm日期选择完成后触发,若 show-confirm 为 true,则点击确认按钮后触发
<template>
<div class="search-box">
<!-- 位置信息 -->
<div class="location bottom-gray-line ">
<div class="city" @click="cityClick">{{ currentCity.cityName }}</div>
<div class="position" @click="positionClick">
<span class="text">我的位置</span>
<img src="@/assets/img/home/icon_location.png" alt="">
</div>
</div>
<!-- 日期范围 -->
<div class="section date-range bottom-gray-line " @click="showCalendar = true">
<div class="start">
<div class="date">
<span class="tip">入住</span>
<span class="time">{{ startDateStr }}</span>
</div>
<div class="stay">共{{ stayCount }}晚</div>
</div>
<div class="end">
<div class="date">
<span class="tip">离店</span>
<span class="time">{{ endDateStr }}</span>
</div>
</div>
</div>
<van-calendar
v-model:show="showCalendar"
type="range"
color="#ff9854"
:round="false"
:show-confirm="false"
@confirm="onConfirm"
/>
<!-- 价格/人数选择 -->
<div class="section price-counter bottom-gray-line">
<div class="start">价格不限</div>
<div class="end">人数不限</div>
</div>
<!-- 关键字 -->
<div class="section keyword bottom-gray-line">关键字/位置/民宿名</div>
<!-- 热门建议 -->
<div class="section hot-suggests">
<template v-for="(item, index) in hotSuggests" :key="index">
<div
class="item"
:style="{ color: item.tagText.color, background: item.tagText.background.color }"
>
{{ item.tagText.text }}
</div>
</template>
</div>
<!-- 搜索按钮 -->
<div class="section search-btn">
<div class="btn" @click="searchBtnClick">开始搜索</div>
</div>
</div>
</template>
<script setup>
import useCityStore from '@/stores/modules/city';
import { storeToRefs } from 'pinia';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import useHomeStore from "@/stores/modules/home"
import { formatMonthDay, getDiffDays } from "@/utils/format_date"
import useMainStore from '@/stores/modules/main';
import { computed } from '@vue/reactivity';
const router = useRouter()
// 位置/城市
const cityClick = () => {
router.push("/city")
}
const positionClick = () => {
navigator.geolocation.getCurrentPosition(res => {
console.log("获取位置成功:", res)
}, err => {
console.log("获取位置失败:", err)
}, {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 0
})
}
const cityStore = useCityStore()
const { currentCity } = storeToRefs(cityStore)
// 日期范围的处理
const mainStore = useMainStore()
const { startDate, endDate } = storeToRefs(mainStore)
const startDateStr = computed(() => formatMonthDay(startDate.value))
const endDateStr = computed(() => formatMonthDay(endDate.value))
const stayCount = ref(getDiffDays(startDate.value, endDate.value))
const showCalendar = ref(false)
const onConfirm = (value) => {
// 1.设置日期
const selectStartDate = value[0]
const selectEndDate = value[1]
mainStore.startDate = selectStartDate
mainStore.endDate = selectEndDate
stayCount.value = getDiffDays(selectStartDate, selectEndDate)
// 2.隐藏日历
showCalendar.value = false
}
// 热门建议
const homeStore = useHomeStore()
const { hotSuggests } = storeToRefs(homeStore)
// 开始搜索
const searchBtnClick = () => {
router.push({
path: "/search",
query: {
startDate: startDate.value,
endDate: endDate.value,
currentCity: currentCity.value.cityName
}
})
}
</script>
<style lang="less" scoped>
.search-box {
--van-calendar-popup-height: 100%;
}
.location {
display: flex;
align-items: center;
height: 44px;
padding: 0 20px;
.city {
flex: 1;
color: #333;
font-size: 15px;
}
.position {
width: 74px;
display: flex;
align-items: center;
.text {
position: relative;
top: 2px;
color: #666;
font-size: 12px;
}
img {
margin-left: 5px;
width: 18px;
height: 18px;
}
}
}
.section {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0 20px;
color: #999;
height: 44px;
.start {
flex: 1;
display: flex;
height: 44px;
align-items: center;
}
.end {
min-width: 30%;
padding-left: 20px;
}
.date {
display: flex;
flex-direction: column;
.tip {
font-size: 12px;
color: #999;
}
.time {
margin-top: 3px;
color: #333;
font-size: 15px;
font-weight: 500;
}
}
}
.date-range {
height: 44px;
.stay {
flex: 1;
text-align: center;
font-size: 12px;
color: #666;
}
}
.price-counter {
.start {
border-right: 1px solid var(--line-color);
}
}
.hot-suggests {
margin: 10px 0;
height: auto;
.item {
padding: 4px 8px;
margin: 4px;
border-radius: 14px;
font-size: 12px;
line-height: 1;
}
}
.search-btn {
.btn {
width: 342px;
height: 38px;
max-height: 50px;
font-weight: 500;
font-size: 18px;
line-height: 38px;
text-align: center;
border-radius: 20px;
color: #fff;
background-image: var(--theme-linear-gradient);
}
}
</style>
格式化时间
//utils/format_date.js
import dayjs from 'dayjs'
//格式化时间
export function formatMonthDay(date, formatStr = "MM月DD日") {
return dayjs(date).format(formatStr)
}
//时间差
export function getDiffDays(startDate, endDate) {
return dayjs(endDate).diff(startDate, "day")
}
useMainStore
//stores/modules/main.js
import { defineStore } from "pinia";
const startDate = new Date()
const endDate = new Date()
endDate.setDate(startDate.getDate() + 1)
const useMainStore = defineStore("main", {
state: () => ({
token: "",
startDate: startDate,
endDate: endDate,
isLoading: false
}),
})
export default useMainStore
useHomeStore
import { getHomeHotSuggests, getHomeCategories, getHomeHouselist } from "@/services";
import { defineStore } from "pinia";
const useHomeStore = defineStore("home", {
state: () => ({
hotSuggests: [],
categories: [],
currentPage: 1,
houselist: []
}),
actions: {
async fetchHotSuggestData() {
const res = await getHomeHotSuggests()
this.hotSuggests = res.data
},
async fetchCategoriesData() {
const res = await getHomeCategories()
this.categories = res.data
},
async fetchHouselistData() {
const res = await getHomeHouselist(this.currentPage)
this.houselist.push(...res.data)
this.currentPage++
}
}
})
export default useHomeStore
API
services/modules/home.js
import hyRequest from '../request'
export function getHomeHotSuggests() {
return hyRequest.get({
url: "/home/hotSuggests"
})
}
export function getHomeCategories() {
return hyRequest.get({
url: "/home/categories"
})
}
export function getHomeHouselist(currentPage) {
return hyRequest.get({
url: "/home/houselist",
params: {
page: currentPage
}
})
}
home-categories组件
//views/home/cpns/ home-categories.vue
<template>
<div class="categories">
<template v-for="(item, index) in categories" :key="item.id">
<div class="item">
<img :src="item.pictureUrl" alt="">
<div class="text">{{ item.title }}</div>
</div>
</template>
</div>
</template>
<script setup>
import useHomeStore from '@/stores/modules/home';
import { storeToRefs } from 'pinia';
const homeStore = useHomeStore()
const { categories } = storeToRefs(homeStore)
</script>
<style lang="less" scoped>
.categories {
display: flex;
overflow-x: auto;
height: 80px;
padding: 0 10px;
margin-top: 8px;
&::-webkit-scrollbar {//隐藏滚动条
display: none;
}
.item {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 70px;
text-align: center;
img {
width: 32px;
height: 32px;
}
.text {
font-size: 12px;
margin-top: 8px;
}
}
}
</style>
home-content组件
<template>
<div class="content">
<h2 class="title">热门精选</h2>
<div class="list">
<template v-for="(item, index) in houselist" :key="item.data.houseId">
<house-item-v9
v-if="item.discoveryContentType === 9"
:item-data="item.data"
@click="itemClick(item.data)"
/>
<house-item-v3
v-else-if="item.discoveryContentType === 3"
:item-data="item.data"
@click="itemClick(item.data)"
/>
</template>
</div>
</div>
</template>
<script setup>
import HouseItemV9 from "@/components/house-item-v9/house-item-v9.vue"
import HouseItemV3 from "@/components/house-item-v3/house-item-v3.vue"
import useHomeStore from '@/stores/modules/home';
import { storeToRefs } from 'pinia';
import { useRouter } from "vue-router";
const homeStore = useHomeStore()
const { houselist } = storeToRefs(homeStore)
const router = useRouter()
const itemClick = (item) => {
// 跳转到Detail页面
router.push("/detail/" + item.houseId)
}
</script>
<style lang="less" scoped>
.content {
padding: 10px 8px;
.title {
font-size: 22px;
padding: 10px;
}
.list {
display: flex;
flex-wrap: wrap;
}
}
</style>
house-item组件
// components/house-item-v3/house-item-v3.vue
<template>
<div class="house-item">
<div class="item-inner">
<div class="cover">
<img :src="itemData?.image?.url" alt="">
</div>
<div class="info">
<div class="location">
<img src="@/assets/img/home/location.png" alt="">
<span>{{ itemData.location }}</span>
</div>
<div class="name">{{ itemData.houseName }}</div>
<div class="summary">{{ itemData.summaryText }}</div>
<div class="price">
<div class="new"> ¥ {{ itemData.finalPrice }}</div>
<div class="old"> ¥ {{ itemData.productPrice }}</div>
<div class="tip" v-if="itemData.priceTipBadge">
{{ itemData.priceTipBadge.text }}
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
const props = defineProps({
itemData: {
type: Object,
default: () => ({})
}
})
const itemClick = () => {
console.log("itemClick", props.itemData.houseId)
}
</script>
<style lang="less" scoped>
.house-item {
width: 50%;
.item-inner {
margin: 5px;
background: #fff;
border-radius: 6px;
overflow: hidden;
.cover {
img {
width: 100%;
}
}
.info {
padding: 8px 10px;
color: #666;
font-size: 12px;
}
.location {
display: flex;
align-items: center;
img {
width: 12px;
height: 12px;
}
.text {
margin-left: 2px;
font-size: 12px;
color: #666;
}
}
.name {
margin: 5px 0;
font-size: 14px;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.price {
display: flex;
align-items: flex-start;
margin: 8px 0;
.new {
color: #ff9645;
font-size: 14px;
}
.old {
margin: 0 3px;
color: #999;
font-size: 12px;
text-decoration: line-through;
}
.tip {
background-image: linear-gradient(270deg,#f66,#ff9f9f);
color: #fff;
padding: 0 6px;
border-radius: 8px;
}
}
}
}
</style>
Rate 评分
属性
allow-half:是否允许半选
model-value:当前分值
// components/house-item-v9/house-item-v9.vue
<template>
<div class="house-item">
<div class="item-inner">
<div class="cover">
<img :src="itemData.image.url" alt="">
</div>
<div class="info">
<div class="summary">{{ itemData.summaryText }}</div>
<div class="name">{{ itemData.houseName }}</div>
<div class="price">
<van-rate :model-value="itemScore" color="#fff" :size="15" readonly allow-half />
<div class="new">¥ {{ itemData.finalPrice }}</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { computed } from '@vue/reactivity';
const props = defineProps({
itemData: {
type: Object,
default: () => ({})
}
})
const itemScore = computed(() => {
return Number(props.itemData.commentScore)
})
</script>
<style lang="less" scoped>
.house-item {
width: 50%;
.item-inner {
position: relative;
margin: 5px;
background: #fff;
border-radius: 6px;
overflow: hidden;
.cover {
img {
width: 100%;
}
}
.info {
position: absolute;
bottom: 0;
padding: 8px 10px;
color: #fff;
.summary {
font-size: 12px;
}
.name {
margin: 5px 0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.price {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
}
}
}
</style>
城市页面
Search 搜索
属性
shape:搜索框形状,可选值为 round
show-action:是否展示搜索框右侧取消按钮
@cancel:点击取消按钮时触发2.Tab 标签页
tabs属性
v-model:绑定当前选中标签的标识符
color:标签主题色
line-height:底部条高度,默认单位 px
tab属性
name:标签名称,作为匹配的标识符 tabactive=name
title:标题
//views/city/city.vue
<template>
<div class="city top-page">
<div class="top">
<!-- 1.搜索框 -->
<van-search
v-model="searchValue"
placeholder="城市/区域/位置"
shape="round"
show-action
@cancel="cancelClick"
/>
<!-- 2.tab的切换 -->
<!-- tabActive默认索引 -->
<van-tabs v-model:active="tabActive" color="#ff9854" line-height="3">
<template v-for="(value, key, index) in allCities" :key="key">
<van-tab :title="value.title" :name="key"></van-tab>
</template>
</van-tabs>
</div>
<div class="content">
<!-- <city-group :group-data="currentGroup" />
<city-group :group-data="currentGroup" /> -->
<template v-for="(value, key, index) in allCities">
<!-- <h2 v-show="tabActive === key">{{ value.title }}</h2> -->
<city-group v-show="tabActive === key" :group-data="value" />
</template>
</div>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
import { storeToRefs } from 'pinia';
import useCityStore from '@/stores/modules/city';
import { useRouter } from 'vue-router';
import { getCityAll } from "@/services"
import CityGroup from './cpns/city-group.vue'
const router = useRouter()
// 搜索框功能
const searchValue = ref("")
const cancelClick = () => {
router.back()
}
// tab的切换
const tabActive = ref()
/**
* 这个位置发送网络请求有两个缺点:
* 1.如果网络请求太多, 那么页面组件中就包含大量的对于网络请求和数据的处理逻辑
* 2.如果页面封装了很多的子组件, 子组件需要这些数据, 我们必须一步步将数据传递过去(props)
*/
// 网络请求: 请求城市的数据
// const allCity = ref({})
// getCityAll().then(res => {
// allCity.value = res.data
// })
// 从Store中获取数据
const cityStore = useCityStore()
cityStore.fetchAllCitiesData()
const { allCities } = storeToRefs(cityStore)
// 目的: 获取选中标签后的数据
// 1.获取正确的key: 将tabs中绑定的tabAction正确绑定
// 2.根据key从allCities获取数据, 默认直接获取的数据不是响应式的, 所以必须包裹computed
const currentGroup = computed(() => allCities.value[tabActive.value])
</script>
<style lang="less" scoped>
.city {
// --van-tabs-line-height: 30px;
// top固定定位
// .top {
// position: fixed;
// top: 0;
// left: 0;
// right: 0;
// }
// .content {
// margin-top: 98px;
// }
.top {
position: relative;
z-index: 9;
}
// 布局滚动
.content {
height: calc(100vh - 98px);
overflow-y: auto;
}
}
</style>
useCityStore
//store/modules/city.js
import { getCityAll } from "@/services";
import { defineStore } from "pinia";
const useCityStore = defineStore("city", {
state: () => ({
allCities: {},
currentCity: {
cityName: "广州"
}
}),
actions: {
async fetchAllCitiesData() {
const res = await getCityAll()
this.allCities = res.data
}
}
})
export default useCityStore
//stores/index.js
import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia
search和 tab顶部固定
.city{
.top{
position:relative;
z-index:9
}
.content{
height: calc(100vh - 98px);
overflow-y: auto;
}
}
cityGroup组件
IndexBar 索引栏
index-bar属性
sticky:是否开启锚点自动吸顶
index-list:索引字符列表,默认A-Z
index-anchor属性
index:索引字符,字母
cell属性
title:标签文本
//views/city/cpns/city-group.vue
<template>
<div class="city-group">
<van-index-bar :sticky="false" :index-list="indexList">
<van-index-anchor index="热门" />
<div class="list">
<template v-for="(city, index) in groupData.hotCities">
<div class="city" @click="cityClick(city)">{{ city.cityName }}</div>
</template>
</div>
<template v-for="(group, index) in groupData.cities" :key="index">
<van-index-anchor :index="group.group" />
<template v-for="(city, indey) in group.cities" :key="indey">
<van-cell :title="city.cityName" @click="cityClick(city)" />
</template>
</template>
</van-index-bar>
<!-- <template v-for="(group, index) in groupData.cities" :key="index">
<h2 class="title">标题: {{ group.group }}</h2>
<div class="list">
<template v-for="(city, indey) in group.cities" :key="indey">
<div class="city">{{ city.cityName }}</div>
</template>
</div>
</template> -->
</div>
</template>
<script setup>
import useCityStore from '@/stores/modules/city';
import { computed } from 'vue'
import { useRouter } from 'vue-router';
// 定义props
const props = defineProps({
groupData: {
type: Object,
default: () => ({})
}
})
// 动态的索引
const indexList = computed(() => {
const list = props.groupData.cities.map(item => item.group)
list.unshift("#")//自定义索引,前面添加#
return list
})
// 监听城市的点击
const router = useRouter()
const cityStore = useCityStore()
const cityClick = (city) => {
// 选中当前城市
cityStore.currentCity = city
// 返回上一级
router.back()
}
</script>
<style lang="less" scoped>
.list {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
padding: 10px;
padding-right: 25px;
.city {
width: 70px;
height: 28px;
border-radius: 14px;
font-size: 12px;
color: #000;
text-align: center;
line-height: 28px;
background-color: #fff4ec;
margin: 6px 0;
}
}
</style>
详情页
动态路由
//router/index.js
{
path: "/detail/:id",
component: () => import("@/views/detail/detail.vue")
}
detail.vue
NavBar 导航栏
属性
- title:标题
- left-text:左侧文案
- left-arrow:是否显示左侧箭头
- @ click-left:点击左侧按钮时触发
<template>
<div class="detail top-page" ref="detailRef">
<tab-control
v-if="showTabControl"
class="tabs"
:titles="names"
@tabItemClick="tabClick"
ref="tabControlRef"
/>
<van-nav-bar
title="房屋详情"
left-text="旅途"
left-arrow
@click-left="onClickLeft"
/>
<div class="main" v-if="mainPart" v-memo="[mainPart]">
<detail-swipe :swipe-data="mainPart.topModule.housePicture.housePics"/>
<detail-infos name="描述" :ref="getSectionRef" :top-infos="mainPart.topModule"/>
<detail-facility name="设施" :ref="getSectionRef" :house-facility="mainPart.dynamicModule.facilityModule.houseFacility"/>
<detail-landlord name="房东" :ref="getSectionRef" :landlord="mainPart.dynamicModule.landlordModule"/>
<detail-comment name="评论" :ref="getSectionRef" :comment="mainPart.dynamicModule.commentModule"/>
<detail-notice name="须知" :ref="getSectionRef" :order-rules="mainPart.dynamicModule.rulesModule.orderRules"/>
<detail-map name="周边" :ref="getSectionRef" :position="mainPart.dynamicModule.positionModule"/>
<detail-intro :price-intro="mainPart.introductionModule"/>
</div>
<div class="footer">
<img src="@/assets/img/detail/icon_ensure.png" alt="">
<div class="text">弘源旅途, 永无止境!</div>
</div>
</div>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getDetailInfos } from "@/services"
import TabControl from "@/components/tab-control/tab-control.vue"
import DetailSwipe from "./cpns/detail_01-swipe.vue"
import DetailInfos from "./cpns/detail_02-infos.vue"
import DetailFacility from "./cpns/detail_03-facility.vue"
import DetailLandlord from "./cpns/detail_04-landlord.vue"
import DetailComment from "./cpns/detail_05-comment.vue"
import DetailNotice from "./cpns/detail_06-notice.vue"
import DetailMap from "./cpns/detail_07-map.vue"
import DetailIntro from "./cpns/detail_08-intro.vue"
import useScroll from '@/hooks/useScroll'
const router = useRouter()
const route = useRoute()
const houseId = route.params.id
// 发送网络请求获取数据
const detailInfos = ref({})
const mainPart = computed(() => detailInfos.value.mainPart)
getDetailInfos(houseId).then(res => {
detailInfos.value = res.data
})
// 监听返回按钮的点击
const onClickLeft = () => {
router.back()
}
// tabControl相关的操作
const detailRef = ref()
const { scrollTop } = useScroll(detailRef)
const showTabControl = computed(() => {
return scrollTop.value >= 300
})
// const landlordRef = ref()
// const sectionEls = []
// const getSectionRef = (value) => {
// sectionEls.push(value.$el)
// }
const sectionEls = ref({})
const names = computed(() => {
return Object.keys(sectionEls.value)
})
const getSectionRef = (value) => {
if (!value) return
const name = value.$el.getAttribute("name")
sectionEls.value[name] = value.$el
}
let isClick = false
let currentDistance = -1
const tabClick = (index) => {
const key = Object.keys(sectionEls.value)[index]
const el = sectionEls.value[key]
let distance = el.offsetTop
if (index !== 0) {
distance = distance - 44
}
isClick = true
currentDistance = distance
detailRef.value.scrollTo({
top: distance,
behavior: "smooth"
})
}
// 页面滚动, 滚动时匹配对应的tabControll的index
const tabControlRef = ref()
watch(scrollTop, (newValue) => {
if (newValue === currentDistance) {
isClick = false
}
if (isClick) return
// 1.获取所有的区域的offsetTops
const els = Object.values(sectionEls.value)
const values = els.map(el => el.offsetTop)
// 2.根据newValue去匹配想要索引
let index = values.length - 1
for (let i = 0; i < values.length; i++) {
if (values[i] > newValue + 44) {
index = i - 1
break
}
}
// console.log(index)
tabControlRef.value?.setCurrentIndex(index)
})
</script>
<style lang="less" scoped>
.tabs {
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 0;
}
.footer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 120px;
img {
width: 123px;
}
.text {
margin-top: 12px;
font-size: 12px;
color: #7688a7;
}
}
</style>
TabControl交互和滚动
<template>
<div class="tab-control">
<template v-for="(item, index) in titles" :key="item">
<div class="tab-control-item"
:class="{ active: index === currentIndex }"
@click="itemClick(index)">
<span>{{ item }}</span>
</div>
</template>
</div>
</template>
<script>
export default {
props: {
titles: {
type: Array,
default: () => []
}
},
data() {
return {
currentIndex: 0
}
},
emits: ["tabItemClick"],
methods: {
itemClick(index) {
this.currentIndex = index
this.$emit("tabItemClick", index)
},
setCurrentIndex(index) {
this.currentIndex = index
}
}
}
</script>
<style lang="less" scoped>
.tab-control {
display: flex;
height: 44px;
line-height: 44px;
text-align: center;
background-color: #fff;
}
.tab-control-item {
flex: 1;
}
.tab-control-item.active {
color: var(--primary-color);
font-weight: 700;
}
.tab-control-item.active span {
border-bottom: 3px solid var(--primary-color);
padding: 8px;
}
</style>
轮播图组件
Swipe 轮播
Swipe属性
- autoplay:自动轮播间隔,单位为 ms
- indicator-color:指示器颜色
SwipeItem属性
- class:类名
Swipe插槽
- default:轮播内容
- indicator:自定义指示器
//detail/cpns/detail-swipe.vue
<template>
<div class="swipe">
<van-swipe class="swipe-list" :autoplay="3000" indicator-color="white">
<template v-for="(item, index) in swipeData">
<van-swipe-item class="item">
<img :src="item.url" alt="">
</van-swipe-item>
</template>
<template #indicator="{ active, total }">
<!-- <div class="indicator">{{ active }}/{{ swipeData.length }}-{{ total }}</div> -->
<div class="indicator">
<template v-for="(value, key, index) in swipeGroup" :key="key">
<span
class="item"
:class="{ active: swipeData[active]?.enumPictureCategory == key }"
>
<span class="text">{{ getName(value[0].title) }}</span>
<span class="count" v-if="swipeData[active]?.enumPictureCategory == key">
{{ getCategoryIndex(swipeData[active]) }}/{{ value.length }}
</span>
</span>
</template>
</div>
</template>
</van-swipe>
</div>
</template>
<script setup>
const props = defineProps({
swipeData: {
type: Array,
default: () => []
}
})
// 对数据进行转换
const swipeGroup = {}
// 思路二: 一次循环
for (const item of props.swipeData) {
let valueArray = swipeGroup[item.enumPictureCategory]
if (!valueArray) {
valueArray = []
swipeGroup[item.enumPictureCategory] = valueArray
}
valueArray.push(item)
}
// 思路一: 好理解, 两次循环
// for (const item of props.swipeData) {
// swipeGroup[item.enumPictureCategory] = []
// }
// for (const item of props.swipeData) {
// const valueArray = swipeGroup[item.enumPictureCategory]
// valueArray.push(item)
// }
// console.log(swipeGroup)
// 定义转换数据的方法
const nameReg = /【(.*?)】/i
const getName = (name) => {
// return name.replace(":", "").replace("】", "").replace("【", "")
const results = nameReg.exec(name)
return results[1]
}
const getCategoryIndex = (item) => {
const valueArray = swipeGroup[item.enumPictureCategory]
return valueArray.findIndex(data => data === item) + 1
}
</script>
<style lang="less" scoped>
.swipe {
.swipe-list {
.item {
img {
width: 100%;
}
}
.indicator {
position: absolute;
right: 5px;
bottom: 5px;
display: flex;
padding: 2px 5px;
font-size: 12px;
color: #fff;
background: rgba(0, 0, 0, 0.8);
.item {
margin: 0 3px;
&.active {
padding: 0 3px;
border-radius: 5px;
background-color: #fff;
color: #333;
}
}
}
}
}
</style>
detail-infos组件
<template>
<div class="infos">
<div class="name">{{ topInfos.houseName }}</div>
<div class="tags">
<template v-for="(item, index) in topInfos.houseTags" :key="index">
<span
class="item"
v-if="item.tagText"
:style="{ color: item.tagText.color, background: item.tagText.background.color }">
{{ item.tagText.text }}
</span>
</template>
</div>
<div class="comment extra">
<div class="left">
<span class="score">{{ topInfos.commentBrief.overall }}</span>
<span class="title">{{ topInfos.commentBrief.scoreTitle }}</span>
<span class="brief">{{ topInfos.commentBrief.commentBrief }}</span>
</div>
<div class="right">
<span class="count">
{{ topInfos.commentBrief.totalCount }}条评论
<van-icon name="arrow" />
</span>
</div>
</div>
<div class="position extra">
<div class="left address">
{{ topInfos.nearByPosition.address }}
</div>
<div class="right">
地图·周边
<van-icon name="arrow" />
</div>
</div>
</div>
</template>
<script setup>
defineProps({
topInfos: {
type: Object,
default: () => ({})
}
})
</script>
<style lang="less" scoped>
.infos {
padding: 16px;
background-color: #fff;
.name {
font-weight: 700;
font-size: 20px;
color: #333;
text-align: justify;
line-height: 24px;
overflow: hidden;
margin-bottom: 6px;
}
.tags {
margin: 10px 0;
.item {
font-size: 12px;
margin: 0 2px;
padding: 1px 3px;
}
}
.extra {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
margin: 12px 0;
border-radius: 5px;
font-size: 12px;
background-color: #f5f7fa;
.right {
color: #ff9645;
}
}
.comment {
.score {
font-size: 18px;
font-weight: 700;
color: #333;
}
.title {
color: #333;
font-weight: 700;
margin: 0 3px;
}
.brief {
color: #666;
}
}
.position {
.address {
font-size: 14px;
font-weight: 700;
color: #333;
}
}
}
</style>
detail-section组件
//components/detail-section/detail-section.vue
<template>
<div class="section">
<div class="header">
<h2 class="title">{{ title }}</h2>
</div>
<div class="content">
<slot>
<h3>我是默认内容</h3>
</slot>
</div>
<div class="footer" v-if="moreText.length">
<span class="more">{{ moreText }}</span>
<van-icon name="arrow" />
</div>
</div>
</template>
<script setup>
defineProps({
title: {
type: String,
default: "默认标题"
},
moreText: {
type: String,
default: ""
}
})
</script>
<style lang="less" scoped>
.section {
padding: 0 15px;
margin-top: 12px;
border-top: 5px solid #f2f3f4;
background-color: #fff;
.header {
height: 50px;
line-height: 50px;
border-bottom: 1px solid #eee;
.title {
font-size: 20px;
color: #333;
}
}
.content {
padding: 8px 0;
}
.footer {
display: flex;
justify-content: flex-end;
align-items: center;
height: 44px;
line-height: 44px;
color: #ff9645;
font-size: 14px;
font-weight: 600;
}
}
</style>
detail-facility组件
<template>
<div class="facility">
<detail-section title="房屋设施" more-text="查看全部设施">
<div class="facility-inner">
<template v-for="(item, index) in houseFacility.houseFacilitys" :key="index">
<div class="item" v-if="houseFacility.facilitySort?.includes(index)">
<div class="head">
<img :src="item.icon" alt="">
<div class="text">{{ item.groupName }}</div>
</div>
<div class="list">
<template v-for="(iten, indey) in item.facilitys.slice(0, 4)" :key="indey">
<div class="iten">
<i class="icon_check icon"></i>
<span>{{ iten.name }}</span>
</div>
</template>
</div>
</div>
</template>
</div>
</detail-section>
</div>
</template>
<script setup>
import DetailSection from "@/components/detail-section/detail-section.vue"
defineProps({
houseFacility: {
type: Object,
default: () => ({})
}
})
</script>
<style lang="less" scoped>
.facility-inner {
padding: 5px 0;
border-radius: 6px;
font-size: 12px;
background-color: #f7f9fb;
.item {
display: flex;
margin: 25px 0;
.head {
width: 90px;
text-align: center;
img {
width: 20px;
height: 20px;
}
.text {
margin-top: 5px;
color: #000;
}
}
.list {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
.iten {
display: flex;
align-items: center;
box-sizing: border-box;
width: 50%;
margin: 4px 0;
.icon {
margin: 0 6px;
}
.text {
color: #333;
}
}
}
}
}
</style>
detail-landlord组件
<template>
<div class="landlord">
<detail-section title="房东介绍" more-text="查看房东主页">
<div class="intro">
<div class="top">
<img :src="landlord.topScroll" alt="">
</div>
<div class="header">
<div class="left">
<div class="avatar">
<img :src="landlord.hotelLogo" alt="">
</div>
<div class="info">
<div class="name">{{ landlord.hotelName }}</div>
<div class="tags">
<template v-for="(item, index) in landlord.hotelTags">
<div class="item" :style="{ color: item.tagText.color }">
<span>{{ item.tagText.text }}</span>
<span v-if="index !== landlord.hotelTags.length - 1" class="divider">|</span>
</div>
</template>
</div>
</div>
</div>
<div class="right">
<div class="contact">联系房东</div>
</div>
</div>
<div class="bottom">
<template v-for="(item, index) in landlord.hotelSummary">
<div class="item">
<div class="title">{{ item.title }}</div>
<div class="score">{{ item.introduction }}</div>
<div class="desc">{{ item.tip }}</div>
</div>
</template>
</div>
</div>
</detail-section>
</div>
</template>
<script setup>
import DetailSection from "@/components/detail-section/detail-section.vue"
defineProps({
landlord: {
type: Object,
default: () => ({})
}
})
</script>
<style lang="less" scoped>
.intro {
.top {
img {
width: 100%;
border-radius: 3px;
}
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 10px;
.left {
display: flex;
.avatar {
img {
width: 54px;
height: 54px;
}
}
.name {
margin-top: 8px;
font-size: 16px;
font-weight: 600;
}
.tags {
display: flex;
margin-top: 5px;
font-size: 12px;
.divider {
margin: 0 5px;
}
}
}
.right {
.contact {
height: 24px;
line-height: 24px;
border-radius: 5px;
padding: 0 12px;
font-size: 12px;
color: #fff;
background-image: linear-gradient(90deg,#fa8c1d,#fcaf3f);
}
}
}
.bottom {
display: flex;
justify-content: space-between;
margin: 50px 10px 10px;
.item {
font-size: 12px;
.title {
color: #999;
}
.score {
margin: 5px 0;
font-size: 18px;
font-weight: 700;
color: #333;
}
.desc {
color: #666;
}
}
}
}
</style>
detail-comment 组件
<template>
<div class="comment">
<detail-section title="热门评论" :more-text="`查看全部${comment.totalCount}条评论`">
<div class="comment-inner">
<div class="header">
<div class="left">
<div class="score">
<span class="text">{{ comment.overall }}</span>
<div class="line"></div>
</div>
<div class="info">
<div class="title">{{ comment.scoreTitle }}</div>
<div class="count">{{ comment.totalCount }}条评论</div>
<div class="star">
<van-rate v-model="comment.overall" color="#ff9645" size="12" readonly allow-half />
</div>
</div>
</div>
<div class="right">
<template v-for="(item, index) in comment.subScores" :key="item">
<span class="item">{{ item }}</span>
</template>
</div>
</div>
<div class="tags">
<template v-for="(item, index) in comment.commentTagVo" :key="index">
<span class="item"
:style="{ color: item.color, background: item.backgroundColor }">
{{ item.text }}
</span>
</template>
</div>
<div class="content">
<div class="user">
<div class="avatar">
<img :src="comment.comment.userAvatars" alt="">
</div>
<div class="profile">
<div class="name">{{ comment.comment.userName }}</div>
<div class="date">{{ comment.comment.checkInDate }}</div>
</div>
</div>
<div class="text">
{{ comment.comment.commentDetail }}
</div>
</div>
</div>
</detail-section>
</div>
</template>
<script setup>
import DetailSection from "@/components/detail-section/detail-section.vue"
defineProps({
comment: {
type: Object,
default: () => ({})
}
})
</script>
<style lang="less" scoped>
.comment-inner {
padding: 10px 0;
.header {
display: flex;
.left {
display: flex;
align-items: center;
.score {
width: 65px;
height: 100%;
color: #333;
position: relative;
font-weight: 600;
.text {
font-size: 48px;
position: relative;
z-index: 9;
}
.line {
width: 66px;
height: 6px;
background: linear-gradient(90deg, #fa8c1d, #fcaf3f);
border-radius: 3px;
position: absolute;
bottom: 6px;
z-index: 5;
}
}
.info {
margin-left: 19px;
font-size: 12px;
color: #333;
.count {
margin: 3px 0;
color: #999;
}
}
}
.right {
display: flex;
flex-wrap: wrap;
flex: 1;
justify-content: flex-end;
.item {
margin-left: 5px;
font-size: 12px;
color: #666;
}
}
}
.tags {
display: flex;
margin: 10px 0;
flex-wrap: wrap;
.item {
padding: 3px 5px;
margin-right: 8px;
margin-top: 5px;
border-radius: 8px;
font-size: 12px;
}
}
.content {
padding: 10px;
border-radius: 6px;
background-color: #f7f9fb;
.user {
display: flex;
.avatar {
img {
width: 32px;
height: 32px;
border-radius: 50%;
}
}
.profile {
margin-left: 8px;
.date {
margin-top: 3px;
font-size: 12px;
color: #999;
}
}
}
.text {
font-size: 12px;
line-height: 16px;
color: #333;
margin-top: 16px;
}
}
}
</style>
detail-notice组件
<template>
<div class="notice">
<detail-section title="预定须知">
<div class="notice-inner">
<template v-for="(item, index) in orderRules" :key="index">
<div class="item">
<span class="title">{{ item.title }}</span>
<span class="intro">{{ item.introduction }}</span>
<span class="tip" v-if="item.tips">查看说明</span>
</div>
</template>
</div>
</detail-section>
</div>
</template>
<script setup>
import DetailSection from "@/components/detail-section/detail-section.vue"
defineProps({
orderRules: {
type: Array,
default: () => []
}
})
</script>
<style lang="less" scoped>
.notice-inner {
.item {
display: flex;
margin: 10px 0 20px;
font-size: 12px;
.title {
width: 64px;
color: #666;
}
.intro {
flex: 1;
color: #333;
}
}
}
</style>
detail-map组件
<template>
<div class="home">
<detail-section title="位置周边" more-text="查看更多周边信息">
<div class="baidu" ref="mapRef"></div>
</detail-section>
</div>
</template>
<script setup>
import DetailSection from "@/components/detail-section/detail-section.vue"
import { onMounted, ref } from "vue";
const props = defineProps({
position: {
type: Object,
default: () => ({})
}
})
const mapRef = ref()
onMounted(() => {
const map = new BMapGL.Map(mapRef.value); // 创建地图实例
const point = new BMapGL.Point(props.position.longitude, props.position.latitude); // 创建点坐标
map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
const marker = new BMapGL.Marker(point);
map.addOverlay(marker)
})
</script>
<style lang="less" scoped>
.baidu {
height: 250px;
}
</style>
detail-intro组件
<template>
<div class="intro">
<h2 class="title">{{ priceIntro.title }}</h2>
<div class="content">
{{ priceIntro.introduction }}
</div>
</div>
</template>
<script setup name="home">
defineProps({
priceIntro: {
type: Object,
default: () => ({})
}
})
</script>
<style lang="less" scoped>
.intro {
padding: 16px 12px;
border-top: 5px solid #f2f3f4;
.title {
font-size: 14px;
color: #000;
font-weight: 700;
}
.content {
margin-top: 10px;
font-size: 12px;
line-height: 1.5;
color: #666;
}
}
</style>
移动端适配
npm install postcss-px-to-viewpoint -D
`
// postcss.config.js
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 375,
selectorBlackList: ["favor"]//忽略的选择器
}
}
};
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<title>弘源旅途</title>