# zm-travel

**Repository Path**: wzm_love_coding/zm-travel

## Basic Information

- **Project Name**: zm-travel
- **Description**: 这是一个Vue3+vite+vant+pinia的民宿公寓项目
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-08-06
- **Last Updated**: 2023-08-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# zm-trip

## 项目搭建

## 集成百度地图

-   在 html 中引入

```html
<script
    type="text/javascript"
    src="https://api.map.baidu.com/getscript?v=3.0&&type=webgl&ak=KoVcEI1WlPntVRBP0yAWlXzuyKzYedzV"
></script>
```

-   在组件中使用

```js
<template>
    <div class="detail-landlord">
        <DetailSection title="位置周边" moretext="查看更多周边信息">
            <template #sectionContent>
                <div class="location" ref="houseMapRef"></div>
            </template>
        </DetailSection>
    </div>
</template>

<script setup>
import DetailSection from '@/components/DetailSection/index.vue'
import { onMounted, ref } from 'vue'

const props = defineProps({
    position: {
        type: Object,
        default: () => ({})
    }
})

const houseMapRef = ref()
onMounted(() => {
    const map = new BMapGL.Map(houseMapRef.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 scoped lang="less">
.detail-landlord {
    .location {
        height: 300px;
    }
}
</style>

```

## 首页缓存 keep-alive

```html
<router-view v-slot="props">
    <keep-alive includes="home">
        <component :is="props.Component"></component>
    </keep-alive>
</router-view>
```

```js
<script>
export default {
    name: 'home'
}
</script>
```

## 记录页面位置

```js
const homeRef = ref()
const { isReachBottom, scrollTop } = useScroll(homeRef)
watch(isReachBottom, (newVal) => {
    if (newVal) {
        homeStore.getHomeListAction().then(() => {
            isReachBottom.value = false
        })
    }
})
// 跳回home页时，停留在原来的位置
onActivated(() => {
    homeRef.value?.scrollTo({
        top: scrollTop.value
    })
})


.home {
    margin-bottom: 50px;
    height: 100vh;
    box-sizing: border-box;
    overflow-y: auto;
}
```

## 视口设置和 pxtovw 单位的转换

```html
<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0,
		maxmum-scale=1.0,minmum-scale=1.0,user-scalable=no"
/>
```

-   `npm i postcss-px-to-viewport -D`
-   项目根目录创建 postcss.config.js 文件

```js
module.exports = {
    plugins: {
        'postcss-px-to-viewport': {
            viewportWidth: 375
        }
    }
}
```