football/pages/store/store.vue

<template>
    <app-layout>
        <view class="cross-center store-head">
            <view v-if="toSearch" class="search-content">
                <input class="input"
                       :value="keyword"
                       @input="bindInput"
                       @confirm="bindConfirm"
                       @blur="beSearch"
                       confirm-type="search"
                       :focus="getFocus"/>
                <view v-if="keyword.length" @click="cancelPrint" class="main-center cross-center close-word">
                    <icon class="icon-close"></icon>
                </view>
            </view>
            <view v-else @click="beSearch" class="main-center search-content cross-center">
                <icon class="icon-search"></icon>
                <text class="search-text">搜索</text>
            </view>
        </view>
        <view class="shop-list">
            <app-shop :list="list"></app-shop>
        </view>
    </app-layout>
</template>

<script>
    import appShop from "../../components/page-component/app-shop/app-shop.vue";

    export default {
        name: "store",
        components: {appShop},
        data() {
            return {
                getFocus: false,
                longitude: 0,
                latitude: 0,
                url: '',
                keyword: '',
                goods_id: 0,
                list: null,
                args: false,
                load: false,
                page: 1,
                toSearch: false,
            }
        },

        onLoad: function (options) {
            const self = this;
            if (options.book_id) {
                self.url = self.$api.book.store_list;
                self.goods_id = options.book_id
            } else {
                self.url = self.$api.store.list;
                self.goods_id = 0
            }
            uni.getLocation({
                success: function (res) {
                    self.longitude = res.longitude;
                    self.latitude = res.latitude;
                    self.loadData();
                },
                fail: function (res) {
                    console.error(res);
                },
            })
        },

        onPullDownRefresh: function () {
            const self = this;
            self.keyword = '';
            self.toSearch = false;
            self.page = 1;

            uni.getLocation({
                success: function (res) {
                    self.longitude = res.longitude;
                    self.latitude = res.latitude;
                    self.loadData();
                },
                complete: function () {
                    uni.stopPullDownRefresh();
                }
            })
        },

        onShareAppMessage: function (e) {
            return this.$shareAppMessage({
                title: this.$children[0].navigationBarTitle,
                path: '/pages/store/store',
                params: {}
            });
        },

        onReachBottom: function () {
            const self = this;
            if (self.args || self.load)
                return;
            self.load = true;
            let page = self.page + 1;

            self.$request({
                url: self.url,
                data: {
                    page: page,
                    longitude: self.longitude,
                    latitude: self.latitude,
                    keyword: self.keyword,
                    goods_id: self.goods_id,
                }
            }).then(info => {
                if (info.code === 0) {
                    [self.page, self.args, self.list] = [page, info.data.list.length === 0, self.list.concat(self.forMatter(info.data.list))];
                }
                self.load = false;
            });
        },

        methods: {
            /*
             * update
             */
            forMatter(list) {
                list.forEach((v, k) => {
                    v.pic_url = v.cover_url;
                    let array = [];
                    for (let i = 0; i < v.score; i++) {
                        array.push(i);
                    }
                    v.score = array
                })
                return list;
            },
            //搜索
            bindConfirm: function (e) {
                this.loadData();
            },

            beSearch: function (e) {
                if (this.keyword.length === 0) {
                    this.toSearch = !this.toSearch;
                    this.getFocus = this.toSearch;
                }
            },

            cancelPrint() {
                this.keyword = '';
                this.toSearch = false;
                this.loadData();
            },

            bindInput: function (e) {
                this.keyword = e.detail.value;
            },

            loadData: function () {
                const self = this;

                self.$showLoading();
                self.$request({
                    url: self.url,
                    data: {
                        keyword: self.keyword,
                        longitude: self.longitude,
                        latitude: self.latitude,
                        goods_id: self.goods_id
                    },
                }).then(info => {
                    self.$hideLoading();
                    if (info.code === 0) {
                        self.list = self.forMatter(info.data.list);
                    }
                }).catch(info => {
                    self.$hideLoading();
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    .store-head {
        height: #{88rpx};
        width: 100%;

        .search-content {
            height: #{56rpx};
            border-radius: #{28rpx};
            background: #fff;
            position: relative;
            width: 100%;
            margin: 0 #{24rpx};
            padding-left: #{24rpx};

            .input {
                height: #{56rpx};
                border-radius: #{28rpx};
                color: #353535;
                width: 90%;
                background-color: #ffffff;
            }

            .icon-search {
                background-image: url("../../static/image/icon/icon-search.png");
                height: #{24rpx};
                width: #{24rpx};
                background-size: 100% auto;
                margin-right: #{10rpx};
                background-repeat: no-repeat;
            }

            .close-word {
                height: #{56rpx};
                width: #{70rpx};
                position: absolute;
                right: 0;
                top: 0;
                z-index: 20;

                .icon-close {
                    background-image: url("../../static/image/icon/icon-close.png");
                    background-repeat: no-repeat;
                    background-size: 100% auto;
                    height: #{25rpx};
                    width: #{25rpx};
                }
            }
        }

        .search-text {
            color: #b2b2b2;
            font-size: #{24rpx};
            margin: 0 #{5rpx};
        }

        .store-search {
            background-color: #ddd;
            border-radius: 0 #{10rpx} #{10rpx} 0;
            padding: 0 #{20rpx};
        }

        .store-icon {
            margin-bottom: #{10rpx};
            margin-right: #{10rpx};
        }
    }

    .shop-list {
        background: #FFFFFF;
    }
</style>