Client-Teapay/src/pages/settledMerchant/index.vue

<template>
    <div class="settledMerchantList">
        <div class="search-box flex_r flex_jb flex_ac">
            <div class="district" @click="showAddress = !showAddress">
                <span>{{ LocationCity }}</span>
                <span class="iconfont">&#xe62f;</span>
            </div>
            <div class="search flex_r flex_jb flex_ac">
                <span class="iconfont">&#xe661;</span>
                <input v-model="Query.name" @confirm="navSearch" class="inp" placeholder="搜索你要的内容">
                <span class="search_btn" @click="navSearch">搜索</span>
            </div>
            <!-- <div class="scan-ico iconfont">&#xe8cf;</div> -->
        </div>
        <div class="list" v-if="list.length">
            <div class="li_item" v-for="(i,s) in list" :key="s" @click="goMerchant(i)">
                <div class="logo_img">
                    <img :src="i.logo" alt="">
                </div>
                <div class="con_box">
                    <div class="p1 ellipsis">{{ i.name }}</div>
                    <div class="p2">{{ i.address }}</div>
                    <div class="p3">{{ $h.Div(i.distance, 1000).toFixed(2) }} km</div>
                </div>
            </div>
        </div>
        <not-goods v-else textStr="暂无附近商家"></not-goods>
        <!-- 城市选择 -->
        <h-address @select="selectaddress" :visible.sync="showAddress" />
    </div>
</template>
<script>
import hAddress from "@/components/h-address/address.vue"; //城市选择
import notGoods from "@/components/not-goods/index.vue";
import { post } from "@/request/api.js";
export default {
    name: "settledMerchantList",
    props: {},
    components: { hAddress,notGoods },
    data() {
        return {
            list: [],
            Query: {
                latitude: "",
                longitude: "",
                page: 1,
                rows: 20,
                city: ""
            },
            pageData: {},
            LocationCity: "中国",
            showAddress: false,
        };
    },
    methods: {
        goMerchant(da) {
            this.setLS("merchant", da)
            this.goto("/pagesC/settledMerchant/merchant", { id: da.id })
        },
        // 获取当前位置
        async getLocation() {
            let adres = await uni.Location();
            this.Query.latitude = adres.lat;
            this.Query.longitude = adres.lng;
            this.getList();
        },
        getList(page) {
            if (page) {
                this.list = []
                this.Query.page = 1
            }
            post("v1/merchant/list", this.Query).then(res => {
                if (res.code == 0) {
                    let da = res.data.data
                    delete res.data.data
                    this.pageData = res.data
                    this.list = [...this.list, ...da]
                    this.Query.page++
                }
            })
        },
        // 搜索
        navSearch() {
            if (!this.Query.name) delete this.Query.name
            this.getList(1);
        },
        // 获取当前城市
        async getToCity() {
            let { lat, lng } = await uni.Location();
            post("local/hotel/city", { longitude: lng, latitude: lat }).then(res => {
                if (res.code == 0) {
                    let da = res.data
                    // this.LocationCity = da.cityName;
                }
            })
        },
        // 选择城市
        selectaddress(da) {
            this.LocationCity = da.cityName;
            this.showAddress = false;
            this.Query.latitude = da.lat;
            this.Query.longitude = da.lng;
            this.Query.page = 1
            this.Query.city = da.cityName
            this.list = []
            this.getList()
        },
    },
    onLoad(da) {
        this.getToCity();
    },
    onShow() {
        this.getLocation();
    },
    mounted() {},
    onReachBottom() {
        if (this.Query.page < this.pageData.last_page) this.getList();
    },
};
</script>
<style scoped lang='scss'>
.search-box {
    width: 100%;
    padding: 30rpx 32rpx 0;

    .district {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;

        .iconfont {
            font-size: 20rpx;
            margin-left: 12rpx;
        }
    }

    .search {
        border: 1px solid #D78C2E;
        height: 60rpx;
        line-height: 60rpx;
        padding-left: 20rpx;
        border-radius: 31rpx;

        .iconfont {
            font-size: 30rpx;
        }

        .inp {
            font-size: 25rpx;
            padding: 0 8rpx;
            width: 336rpx;
        }

        .search_btn {
            background-color: #D78C2E;
            height: 100%;
            color: #fff;
            border-radius: 31rpx;
            font-size: 28rpx;
            padding: 0 28rpx;
        }
    }

    .scan-ico {
        font-size: 55rpx;
    }
}

.list {
    padding: 30rpx;

    .li_item {
        margin-bottom: 20rpx;
        padding: 28rpx 32rpx;
        background-color: #fff;
        border-radius: 10rpx;
        box-shadow: 4rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.12);
    }

    .li_title {
        font-size: 36rpx;
        margin-bottom: 16rpx;
    }

    .logo_img,
    .con_box {
        display: inline-block;
        vertical-align: top;
    }

    .logo_img {
        img {
            height: 180rpx;
            width: 180rpx;
            border-radius: 10rpx;
        }
    }

    .con_box {
        height: 180rpx;
        width: calc(100% - 180rpx - 28rpx);
        margin-left: 28rpx;
        position: relative;

        .p1 {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 6rpx;
        }

        .p2 {
            font-size: 24rpx;
            color: #999;
        }

        .p3 {
            font-size: 24rpx;
            color: #666;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    }
}
</style>