# xinf-pc

**Repository Path**: xiaole9924/xinf-pc

## Basic Information

- **Project Name**: xinf-pc
- **Description**: 🧀 v3+ts+bt   百度地图找房

使用技术 ： hooks 全局弹框、vue-baidu-map地图找房、from表单验证封装、axios封装
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 2
- **Created**: 2021-06-28
- **Last Updated**: 2025-02-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 地图找房, vue-baidu-map

## README

```
欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，本文纯手打 [小乐] 专权。
持续更新中...

```


### 搜索房源   使用技术  vue3+ts+vuex+axios 
运行项目:  yarn install  yarn serve

### 区级搜索 地图找房展示
![输入图片说明](src/assets/images/%E5%8C%BA%E7%BA%A7%E6%94%BE%E5%A4%A7.png)

### 公交、学校、医院周边搜索
![输入图片说明](src/assets/images/%E5%B0%8F%E5%8C%BA%E8%8C%83%E5%9B%B4.png)

### 小区房源搜索
![输入图片说明](src/assets/images/%E6%90%9C%E7%B4%A2%E6%88%BF%E6%BA%90.png)

### vue3 hooks 登录动画弹框封装
![输入图片说明](src/assets/images/%E6%B3%A8%E5%86%8C%E5%BC%B9%E6%A1%86-%E9%AA%8C%E8%AF%81%E5%B0%81%E8%A3%85.png)

```typescript
import { onMounted , onUnmounted ,nextTick  } from 'vue'
import { useStore } from 'vuex'


const uesLoginModel = () => {
    const store = useStore()
    
    const bindLogin = ()=> {
        console.log(store.state.isLogin)
    }
    onMounted(()=> {
        const doms = document.querySelectorAll('.isLogin');
        nextTick(():void => {
            doms.forEach(dom => {
                dom.addEventListener('click',bindLogin)
            })
        })
    })

    onUnmounted(() => {
        console.log(123)
    })

 
}

export default uesLoginModel
```


### form 表单验证封装 父组件

```vue 
<template>
  <form>
    <slot name="default"></slot>
    <div class="submit-area" @click.prevent="submitForm">
      <slot name="submit">
        <!-- <button type="submit" class="btn btn-primary">提交</button> -->
      </slot>
    </div>
  </form>
</template>

<script lang="ts">
import { defineComponent, onUnmounted } from 'vue'
import mitt from "mitt"
export const emitter = mitt()
type ValidateFunc = () => boolean;

export default defineComponent({
    name: "ValidateForm",
    emits: ["form-submit"],
    setup(props, context) {
         let funcArray: ValidateFunc[] = [];
         const submitForm = () => {
             const result = funcArray.map((func)=> func()).every((result) => result)
             context.emit("form-submit",result)
         }
         const callBack = (func:ValidateFunc |any) => {
             funcArray.push(func)
         }
         emitter.on("form-item-created",callBack);

         onUnmounted(() => {
            emitter.off("form-item-created", callBack);
         });
         return {
             submitForm
         }
    },
})
</script>

```


### 表单子组件  input验证封装
```vue
<template>
    <div>
         <input
            class="inputs"
            v-model="inputRef.val"
            v-bind="$attrs"
            @blur="validateInput"
              />
            <div class="error" v-if="inputRef.error">
               * {{inputRef.message}}
            </div>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent,onMounted,PropType,reactive } from 'vue'
import { emitter } from './vForm.vue'
interface RuleProp {
  type: "required" | "email" | "custom";
  message: string;
  validator?: () => boolean;
}
const emailReg = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
export type RulesProp = RuleProp[]
export type TagType = "input" | "textarea"

export default defineComponent({
    props: {
        rules: Array as PropType<RulesProp>,
        tag: {
            type: String as PropType<TagType>,
            default: "input",
        },
        modelValue: String
    },
    inheritSttrs: false,

    setup(props,context) {
        const inputRef = reactive({
            val: computed({
                get:()=> props.modelValue || "",

                set: (val)=> {
                    context.emit("update:modelValue",val)
                }
            }),
            message: "",
            error: false
           
        })
        
        const validateInput = () => {
            if(props.rules) {
                const allpassed = props.rules.every((rule) => {
                    let passed = true;
                    inputRef.message = rule.message;
                    switch(rule.type) {
                        case "required":
                            passed = inputRef.val.trim()  !== "";
                            break;
                        case "email":
                            passed = emailReg.test(inputRef.val)
                            break;
                        default :
                        break;
                    }
                    return passed
                })
                inputRef.error = !allpassed
                return allpassed
            }
            return true;
        }
        onMounted(()=> {
            emitter.emit('form-item-created',validateInput)
        })
        return {
            inputRef,
            validateInput
        }
    },
})
</script>


<style>
.inputs {
  border: 0;
  width: 70%;
  color: #545454;
  background: transparent;
}
.error{
    color: #dc3545;
    position: absolute;
    left: 0;
    bottom: -20px;
    font-size: 10px;
}
</style>
```
###.封装axios+vuex
``` typescript

import axios from 'axios'
import { Commit } from 'vuex'

export const getAndCommit = async (url: string,  payload: any,commit: Commit ,mutationName?: string) => {
  const { data } = await axios.get(url,{params: payload})
  mutationName && commit(mutationName, data)
  return data
}

export const get = async (url: string,  payload: any) => {
  const { data } = await axios.get(url+payload)
  return data
}

export const postAndCommit = async (url: string,  payload: any,commit: Commit ,mutationName?: string) => {
  const { data } = await axios.post(url,payload)
  mutationName && commit(mutationName, data)
  return data
}

export default {
  getAndCommit, postAndCommit,get
}

```

###.封装登录接口
```typescript

import { types } from '../types'

const state = {

  isLogin: false,
  number: 1,
  loginType: 'login',
  row: {}
}
const getters = {

}

const mutations = {
  [types.HANDLER_LOGIN](state: any, data: any) {
    state.loginType = data.type
    state.isLogin = data.bol
  },
  [types.CHANGE_LOGINTYPE](state: any, str: string) {
    state.loginType = str
  },
  [types.GET_DATA](state: any, data: any) {
    state.row = data
  }
}

const actions = {
  // fetchData({ commit }) {
  //   getAndCommit('/houseList', types.GET_DATA, commit)
  // }
}

export default {
  namespaced: true, //命名空间
  state,
  getters,
  mutations,
  actions
}

```


### 封装 常用查询接口
``` typescript

import {getAndCommit , postAndCommit} from '@/api/https'
import { arrToObj, objToArr } from '../../../hooks/help'
import { types } from '../types'
const state = {
    houseList: [1,2,3]
}

const mutations = {
    [types.GET_HOUSELIST](state, data) {
        state.houseList = data.data
    }
}

const actions = {
    houseList({ commit } ,payload) {
        return getAndCommit('houseList',payload,commit)
    },
    newsList({ commit } ,payload) {
        return getAndCommit('api/getArticle',payload,commit)
    }
    ,
    houseDetail({ commit } ,payload) {
        return getAndCommit('house',payload,commit)
    }
}

const getters = {
    getHouseList: (state) => {
        return objToArr(state.houseList)
    }
}

export default {
  namespaced: true, //命名空间
  state,mutations,getters,actions
}

```


### 调用常用接口  通过vuex调用

``` typescript
<script>
import { defineComponent ,computed, reactive, toRefs,onMounted  } from 'vue';
import HouseList from '@/components/houseList/house.vue'
import Pagination from '@/components/pagination/index.vue'
import { useStore } from 'vuex'

export default defineComponent({
  name: 'Home',
  components: {
    HouseList,Pagination
  },
  setup() {
    const store = useStore() ;
    const isLogin = computed(() => store.state.isLogin)
    const data = reactive({
      page: {
        pageSize: 15,
        total: 100
      },
      form: {
        pageSize: 15,
        page: 1,
        house_title: "",
      },
      list: []
    })
    
    const handlerLogin = (bol,type) => {
      store.commit('handlerLogin',bol,type)
    }
    const changePage = (num) => {
      data.form.page = num
      getList()
      backtop()
    }
    const getList = ()=> {
      store.dispatch("home/houseList", data.form).then((res) => {
        let arr = res.data;
        arr.forEach((item) => {
          item.house_banner = item.house_banner && item.house_banner.split(",");
          item.keywords = item.keywords && item.keywords.split(",");
          item.item_pro = item.item_pro && item.item_pro.split(",");
          item.keywords =
            item.keywords && item.keywords.length && item.keywords.slice(0, 2);
        });
        data.page.total = res.last_page
        data.list = arr;
      });
    }

    const backtop = ()=>{
      document.documentElement.scrollTop = document.body.scrollTop = 0;
      }
    onMounted(() => {
      getList()
    });
    return {
      ...toRefs(data),
      handlerLogin,
      changePage,backtop,
      isLogin
    }
  }
});
</script>

```