yantai-app/yt_yishiting/pages/grid/grid.vue

<template>
    <view>
        <view class="select-position">
            <view class="address">
                <image mode="scaleToFill" src="/static/data/images/grid/position.png" />
                <text>{{ curAddress }}</text>
            </view>
            <view class="check-position">
                <image mode="scaleToFill" src="/static/data/images/grid/now-position.png" />
                <text onTap="reposition">重新定位</text>
            </view>
        </view>
        <view class="search">
            <text>网格查找</text>
            <input placeholder="请输入小区楼栋名称，如1号楼" onInput="onInputChange" onConfirm="onInputConfirm" />
        </view>
        <view class="list">
            <view class="list-title">楼栋列表</view>
            <view class="list-content">
                <view v-for="(item, index) in list" :key="index">
                    <text>{{ item.neighborhoodName + '-' + item.buildingName + '-' + item.gridName }}</text>

                    <text class="list-in" :data-item="item" onTap="inGrid">进入</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { CustomerApi } from '../../utils/api';
import userTools from '../../utils/user';
import { fetchToken } from '../../utils/request';
const app = getApp();
export default {
    data() {
        return {
            list: [],
            curAddress: '',
            searchVal: ''
        };
    },
    onLoad() {
        this.fetchNeighBorhoodList();
        this.getLocation();
    },
    methods: {
        async fetchNeighBorhoodList() {
            let params = {
                buildingName: this.searchVal
            };
            let result = await CustomerApi.fetchNeighBorhoodListForDing(params);
            let { code, data } = result;
            if (code == 0 && data) {
                this.setData({
                    list: data
                });
            }
        },

        async fetchAutoreGuser(gridId) {
            let params = {
                gridId
            };
            let result = await CustomerApi.fetchAutoreGuser(params);
            let { code, data } = result;
            if (code == 0 && data) {
                userTools.setStoreGridInfo(data);
                fetchToken().then((res) => {
                    userTools.setStoreUserInfo(res.data);
                    uni.reLaunch({
                        url: '/pages/index/index'
                    });
                    app.globalData.session = true;
                });
            }
        },

        onInputChange(e) {
            let val = e.detail.value;
            if (!val) {
                this.setData(
                    {
                        searchVal: val
                    },
                    () => {
                        this.fetchNeighBorhoodList();
                    }
                );
            }
        },

        onInputConfirm(e) {
            let val = e.detail.value;
            if (!val) {
                return;
            }
            this.setData(
                {
                    searchVal: val
                },
                () => {
                    this.fetchNeighBorhoodList();
                }
            );
        },

        reposition() {
            this.getLocation();
        },

        inGrid(e) {
            let item = e.currentTarget.dataset.item;
            console.log(item.label, item.gridId);
            this.fetchAutoreGuser(item.gridId);
        },

        getLocation() {
            uni.showLoading({
                content: ''
            });
            let _this = this;
            uni.getLocation({
                success(res) {
                    uni.hideLoading();
                    console.log(res);
                    _this.setData({
                        curAddress: res.address
                    });
                },
                fail() {
                    uni.confirm({
                        title: '温馨提示',
                        content: '提交随手拍需要获取您的位置信息',
                        confirmButtonText: '确定',
                        success: (result) => {
                            if (result.confirm) {
                                this.getLocation();
                            }
                        }
                    });
                }
            });
        }
    }
};
</script>
<style>
.select-position {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100vw;
    height: 94rpx;
    background-color: #fff;
    padding: 0 22rpx;
    box-sizing: border-box;
}

.select-position > view {
    display: flex;
    align-items: center;
}

.select-position image {
    height: 36rpx;
    width: 36rpx;
    margin: 0 4rpx;
}

.check-position {
    font-size: 26rpx;
    color: #d81e06;
}

.search {
    display: flex;
    align-items: center;
    margin: 20rpx 30rpx;
    background-color: #fff;
    padding: 10rpx 15rpx;
    box-sizing: border-box;
}

.search text {
    font-size: 30rpx;
}

.search input {
    width: 70%;
    font-size: 30rpx;
}

.list {
    width: 100vw;
    background-color: #fff;
    padding: 30rpx 30rpx 0 30rpx;
    box-sizing: border-box;
}

.list-title {
    font-weight: bold;
    border-bottom: 2rpx solid #e7eeee;
    padding-bottom: 20rpx;
}

.list-content {
    padding: 0 10rpx;
}

.list-content view {
    display: flex;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 2rpx solid #e7eeee;
    justify-content: space-between;
}

.list-content text {
    font-size: 30rpx;
}

.list-content .list-in {
    font-size: 24rpx;
    border: 1px solid #c0c0c0;
    color: #aeaeae;
    padding: 4rpx 8rpx;
    border-radius: 2rpx;
}
</style>