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

<template>
    <div class="settledMerchantList">
        <my-nav v-model="Query.name" @send="navSearch" />
		<view class="next-search-history" v-if="oldKeywordList.length && !Query.name">
			<view class="history-title">
				<view class="title-name"><text>搜索历史</text></view>
				<view class="history-delete" v-if="isDelete">
					<view class="delete-all" @click="deleteAll"><text>全部删除</text></view>
					<view class="delete-line"></view>
					<view class="delete-complete" @click="deleteHistory"><text>完成</text></view>
				</view>
				<view v-else class="icon-block" @click="deleteHistory"><text class="iconfont" style="font-size: 36rpx;">&#xe601;</text></view>
			</view>
			<view class="next-history-list">
				<view class="history-name" v-for="(item,index) in oldKeywordList" :key="index" @click="historyItemClick(item,index)">
					{{item}}
					<text v-if="isDelete" class="iconfont" style="font-size: 30rpx;">&#xe609;</text>
				</view>
			</view>
            <view class="history-title">
                <view class="title-name"><text>附近商家</text></view>
            </view>
		</view>
        <div class="list">
            <div class="li_item" v-for="(i,s) in list" :key="s" @click="goMerchant(i)">
                <!-- <div class="li_title">{{ i.name }}</div> -->
                <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>
    </div>
</template>
<script>
import { post } from "@/request/api.js";
import myNav from "@/pagesC/components/nav/nav"
export default {
    name: "settledMerchantList",
    props: {},
    components: { myNav },
    data() {
        return {
            list: [],
            Query: {
                latitude: 113.9367,
                longitude: 22.5325,
                page: 1,
                rows: 20
            },
            pageData: {},
            oldKeywordList: [],
            isDelete: false,
        };
    },
    methods: {
        navSearch(va) {
            if(va){
                this.Query.name = va
                if (!this.oldKeywordList.includes(va)) this.oldKeywordList.push(va);
                this.setLS("oldKeywords", this.oldKeywordList)
            }
            else delete this.Query.name
            this.getList(1);
        },
        goMerchant(da){
            this.setLS("merchant",da)
            this.goto("/pagesC/settledMerchant/merchant",{id:da.id})
        },
        // 获取当前位置
        async getLocation() {
            let adres = await uni.Location();
            this.Query.longitude = adres.lng;
            this.Query.latitude = adres.lat;
        },
        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++
                }
            })
        },
        deleteHistory() {
            this.isDelete = !this.isDelete
        },
        deleteAll() {
            this.setLS("oldKeywords", [])
            this.oldKeywordList = []
        },
        historyItemClick(name, index) {
            if (this.isDelete) {
                this.oldKeywordList.splice(index, 1)
                this.setLS("oldKeywords", this.oldKeywordList)
            } else {
                this.Query.name = name
                this.getList(1);
            }
        },
    },
    onLoad(da) {
        this.getLocation();
        if(da.key) this.navSearch(da.key)
        else this.getList();
        this.oldKeywordList = this.getLS("oldKeywords") || [];
    },
    onShow() {},
    mounted() {},
    onReachBottom() {
        if (this.Query.page < this.pageData.last_page) this.getList();
    },
};
</script>
<style scoped lang='scss'>
.settledMerchantList {
    min-height: 100vh;
    background-color: #F5F5F5;
}

.next-search-history {
    padding: 0 20rpx;
    margin-top: 24rpx;

    .history-title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title-name {
            font-size: 30rpx;
            color: #666666;
            font-weight: bold;
            margin-left: 12rpx;
        }

        .history-delete {
            height: auto;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            .delete-all {
                font-size: 26rpx;
                color: #666666;
            }

            .delete-line {
                width: 1px;
                height: 20rpx;
                background-color: #999999;
                margin: 0 12rpx;
            }

            .delete-complete {
                font-size: 26rpx;
                color: #F71E1E;
            }
        }
    }

    .next-history-list {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 12rpx 0;

        .history-name {				
            background-color: #FFFFFF;
            border-radius: 25rpx;
            margin: 10rpx 12rpx;
            font-size: 26rpx;
            height: 48rpx;
            line-height: 48rpx;
            padding: 0 24rpx;
            color: #666666;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}

.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>