jimei-hudong-h5/pages/shop/list.vue

<template>
    <view class="container" :style="appThemeStyle">
        <mescroll-body ref="mescrollRef" :sticky="true" :down="{ native: true }" :up="upOption">
            <!-- 页面头部 -->
            <view class="header">
                <u-search class="search" v-model="keyword" :placeholder="options.search ? options.search : '搜索店铺'"
                          @search="getShopList" @custom="getShopList" @clear="getShopList"/>
            </view>
            <scroll-view scroll-x v-if="cateList.length > 1">
                <view class="cate-filter">
                    <u-tag text="全部分类" shape="circle"
                           @click="changeCategory('all')"
                           :bgColor="selectedCategoryList.length === cateList.length ? '#9e1a91' : 'transparent'"
                           :color="selectedCategoryList.length === cateList.length ? 'white' : '#9e1a91'"
                           borderColor="#9e1a91"/>
                    <u-tag :text="item.name" shape="circle" plain v-for="(item, index) in cateList"
                           :key="index"
                           @click="changeCategory(item.category_id)"
                           :bgColor="(selectedCategoryList.length === 1 && selectedCategoryList[0] === item.category_id) ? '#9e1a91' : 'transparent'"
                           :color="(selectedCategoryList.length === 1 && selectedCategoryList[0] === item.category_id) ? 'white' : '#9e1a91'"
                           borderColor="#9e1a91"/>
                </view>
            </scroll-view>
            <view class="shop-item" v-for="(item, index) in list.data" :key="index" @click="toDetail(item.shop_id)">
                <image :src="item.logo_url" mode="aspectFill"/>
                <view class="content">
                    <view class="name-wrap">
                        <text class="title">{{ item.shop_name }}</text>
                        <image v-if="item.type === 1" mode="widthFix" src="../../static/qiye.png"></image>
                        <image v-else mode="widthFix" src="../../static/geren.png"></image>
                    </view>
                    <view class="cate">
                        <text class="tips cate-name">{{ item.category.name }}</text>
                        <text class="tips">营业时间:{{ item.shop_hours }}</text>
                    </view>
                    <view class="score-wrap">
                        <view class="score">
                            <u-rate size="25" active-color="#f4a213" :current="item.score" :disabled="true"/>
                            <text style="font-size: 25rpx;">{{ item.comment_count }}人评价</text>
                        </view>
                        <text class="sales">销量: {{ item.goods_sales }}</text>
                    </view>
                    <view class="address">
                        <text class="tips oneline-hide" style="width: 400rpx">{{ item.full_address }}</text>
                        <u-icon name="arrow-right"/>
                        <view class="sales-wrap">
                            <text>距离: {{ item.distance }}km</text>
                        </view>
                    </view>
                </view>
            </view>
        </mescroll-body>
    </view>
</template>

<script>
import * as CategoryApi from '@/api/shop/navCategory/index'
import * as ShopApi from '@/api/shop'
import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
import Search from '@/components/search'
import {
    getEmptyPaginateObj,
    getMoreListData
} from '@/core/app'

const pageSize = 15
export default {
    name: "list",
    components: {
        MescrollBody,
        Search,
    },
    mixins: [MescrollMixin],
    data() {
        return {
            cateList: [],
            selectedCategoryList: [],
            upOption: {
                // 首次自动执行
                auto: true,
                // 每页数据的数量; 默认10
                page: {
                    size: pageSize
                },
                // 数量要大于4条才显示无更多数据
                noMoreSize: 4,
            },
            list: getEmptyPaginateObj(),
            keyword: '',
            latitude: '',
            longitude: '',
        }
    },
    async onLoad(options) {
        this.options = options
        // await this.getLocation()
        await this.getChildCategory(options.shopId)
        await this.getShopList(1)
    },
    methods: {
        async getChildCategory(categoryId) {
            const {data: {detail}} = await CategoryApi.detail(categoryId)
            this.cateList = JSON.parse(detail.shop_category_list)
            this.selectedCategoryList = this.cateList.map(item => parseInt(item.category_id))
        },
        getShopList() {
            const app = this
            ShopApi.list({
                category_list: this.selectedCategoryList.join(),
                keyword: this.keyword,
                latitude: this.latitude,
                longitude: this.longitude,
            }).then(result => {
                app.list.data = result.data.list
                console.log(app.list.data)
                app.mescroll.endBySize(app.list.data.length, app.list.data.length)
            })
                .catch(() => this.mescroll.endErr())
        },
        upCallback(page) {
            const app = this
            // 设置列表数据
            ShopApi.list({
                category_list: this.selectedCategoryList.join()
            }).then(list => {
                app.mescroll.endBySize(app.list.data.length, app.list.data.length)
            })
                .catch(() => this.mescroll.endErr())
        },
        handleSearch() {
        },
        changeCategory(cateId) {
            if (cateId === 'all') this.selectedCategoryList = this.cateList.map(item => parseInt(item.category_id))
            else this.selectedCategoryList = [parseInt(cateId)]
            this.getShopList()
        },
        toDetail(shopId) {
            this.$navTo('pages/shop/detail', {
                shopId
            })
        },
        getLocation() {
            const _this = this
            return new Promise((resolve, reject) => {
                uni.getLocation({
                    type: 'wgs84',
                    success: (res) => {
                        resolve(res)
                    },
                    fail() {
                        reject()
                        _this.$toast('获取定位失败，请点击右下角按钮重新尝试定位')
                    },
                    complete: res => {
                        console.log(res)
                    }
                })
            })
        },
    }
}
</script>

<style scoped lang="scss">
.header {
    padding: 20rpx;
}

.cate-filter {
    padding: 20rpx 8rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    * {
        margin-right: 10rpx;
        flex-shrink: 0;
    }
}

.shop-item {
    background-color: white;
    border-radius: 30rpx;
    padding: 20rpx;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 20rpx;

    image {
        width: 140rpx;
        height: 140rpx;
        border-radius: 20rpx;
        margin-right: 15rpx;
        flex-shrink: 0;
    }

    .content {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;

        .title {
            font-size: 30rpx;
            font-weight: bold;
        }

        .tips {
            font-size: 25rpx;
            color: gray;
            margin: 5rpx 0;
        }

        .score-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;

            .score {
                display: flex;
                align-items: center;
                justify-content: flex-start;
            }

            .sales {
                color: #4D0868;
            }
        }

        .cate {
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .cate-name {
                margin-right: 15rpx;
                background-color: #F8EEF7;
                padding: 5px;
                border-radius: 999rpx;
            }
        }

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

            .sales-wrap {
                display: flex;
                align-items: flex-start;
                justify-content: flex-end;
                flex-direction: column;
                margin-left: 15rpx;
                font-size: 25rpx;
                flex-shrink: 0;
                color: #4D0868;
            }
        }
    }
}

.name-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    image {
        margin-left: 15rpx;
        width: 100rpx;
    }
}
</style>