Client-Teapay/src/pagesB/scenicSpotTicket/index.vue

<template>
    <div class="scenicSpotTicket">
        <scroll-view @scrolltolower="scrolltolower" class="scroll-view" :scroll-y="true" :scroll-top="scrollTop" @scroll="scroll" :lower-threshold="100">
            <div class="head_box">
                <uni-easyinput prefixIcon="search" suffixIcon="搜索" v-model="qda.keyWord" placeholder="景点、目的地址、景点主题..." @confirm="onsearch" @change="onsearch" confirmType="search"/>
                <div class="filter_box flex_r">
                    <div class="filter_item" @click="showAddress = true">
                        <span class="item_name">{{qda.cityName}}</span>
                        <span class="iconfont ico">&#xeb6d;</span>
                    </div>
                    <div class="filter_item" @click="popupOpen">
                        <span class="item_name">{{sortFit}}</span>
                        <span class="iconfont ico">&#xeb6d;</span>
                    </div>
                </div>
            </div>
            <div class="scenicList" v-if="list.length">
                <div class="scenic_item flex_r flex_jb flex_wrap" v-for="(i,s) in list" :key="s" @click="goScenic({id:i.scenicId})">
                    <image :src="i.mainImage" mode="aspectFill" class="s_img" />
                    <div class="info">
                        <div class="scenicName">{{i.scenicName}}</div>
                        <div class="address">{{ i.address }}</div>
                        <div class="s_info">
                            <span>{{ i.themeGroups }}</span>
                            <span v-if="i.distance">距我{{i.distance}}km</span>
                            <span class="hotelStar">{{ i.star }}A</span>
                        </div>
                        <div class="avgScore flex_r flex_jb">
                            <div class="avgScore_num flex_r flex_jb flex_ac">
                                <uni-rate :max="5" :value="i.commentScore" :size="12" allow-half />
                                <span class="commentScore">{{i.commentScore}}分</span>
                            </div>
                            <div class="dinB price" v-if="i.marketPrice">{{ i.marketPrice }}</div>
                            <div class="price" v-else>暂无报价</div>
                        </div>
                    </div>
                    <div class="openTime">{{ i.openTime }}</div>
                </div>
            </div>
            <div class="onlist" v-if="onlist">
                <image class="errimg" src="http://teaclub.oss-cn-chengdu.aliyuncs.com/CloudShop/head_pic/8ff923549b8ef026eeca56d23d5e4bdc3a69299epng" mode="widthFix" />
                <div class="errmsg">没有搜索到景区喔~</div>
            </div>
        </scroll-view>
        <div class="BackTop iconfont" @click="onBackTop" v-if="oldscrollTop > 500">&#xe632;</div>
        <h-address @select="selectaddress" :visible.sync="showAddress" />
		<uni-popup ref="popup" :safe-area="false">
            <div class="popup_con">
                <div class="sort_li">
                    <div class="sort_item flex_r flex_jb flex_ac" v-for="(i,s) in sorts" :key="s" @click="onsort(i.v)">
                        <span :class="{corg:i.v == qda.sort}">{{ i.t }}</span>
                        <span class="iconfont ico" v-if="i.v == qda.sort">&#xe612;</span>
                    </div>
                </div>
            </div>
        </uni-popup>
    </div>
</template>
<script>
import hAddress from "@/pagesB/components/h-address/address.vue";
import { post } from "@/request/api.js";
import QQMapWX from '@/pagesB/static/js/qqmap-wx-jssdk.min.js';
const showmap = new QQMapWX({ key: 'K7LBZ-RE23Q-JEN5D-4ZNEI-MS54Q-BHF6D' });
export default {
    name: "scenicSpotTicket",
    props: {},
    components: {
        hAddress
    },
    data() {
        return {
            qda: {
                pageIndex: 1,
                pageSize: 20,
                sort: 0,
                distanceRange: 600,
            },
            listcount: 20,
            list: [], //景区列表
            showAddress: false,
            sorts: [
                {v:0,t:"综合排序"},
                {v:1,t:"好评优先"},
                {v:2,t:"距我最近"},
                {v:3,t:"星级最高"},
            ],
            scrollTop: 0,
            oldscrollTop: 0,
            onlist:false
        };
    },
    methods: {
        // 获取列表
        getlist() {
            let da = Object.assign({}, this.qda);
            uni.showLoading();
            post("local/ticket/scenicList", da).then((res) => {
                if (res.code == 0) {
                    if (this.qda.pageIndex == 1) this.list = [];
                    let da = res.data.data.scenicList;
                    this.list = [...this.list, ...da];
                    this.listcount = res.data.data.count;
                    if(da.length) this.onlist = false
                    else this.onlist = true
                }
                uni.hideLoading();
            });
        },
        // 滚动到底部拉取数据
        scrolltolower() {
            if (this.qda.pageIndex * this.qda.pageSize < this.listcount) {
                this.qda.pageIndex++;
                this.getlist();
            }
        },
        selectaddress(da) {
            this.qda.cityName = da.title;
            delete this.qda.latitude
            delete this.qda.longitude
            this.onsearch();
            this.showAddress = false;
        },
        openpicker(){
            this.$refs.cityPicker.show()
        },
        hidepicker(){
            this.$refs.cityPicker.show()
        },

        // 点击搜索
        onsearch() {
            this.qda.pageIndex = 1;
            this.getlist();
        },
        // 页面滚动
        scroll(e) {
            this.oldscrollTop = e.detail.scrollTop
        },
        // 返回顶部
        onBackTop(){
            this.scrollTop = this.oldscrollTop
            this.$nextTick(function() {
                this.scrollTop = 0;
                this.oldscrollTop = 0;
            });
        },
        popupOpen(){
            this.$refs.popup.open('bottom')
        },
        onsort(va){
            this.qda.sort = va;
            this.$refs.popup.close();
            this.onsearch();
        },
        goScenic(da){
            this.goto("/pagesB/scenicSpotTicket/scenic",da)
        }
    },
    onLoad(da) {
        let that = this
        showmap.reverseGeocoder({
            success(res) {
                let da = res.result.ad_info;
                that.citys = da.city_code.replace(da.nation_code, "");
                let { lat, lng } = res.result.location;
                that.qda = {
                    ...that.qda,
                    cityName: da.city,
                    longitude: lng,
                    latitude: lat
                }
                that.getlist();
            }
        });
    },
    onShow() {},
    mounted() {},
    computed: {
        sortFit() {
            for (const i of this.sorts) {
                if(i.v == this.qda.sort){
                    return i.t
                }
            }
        }
    },
};
</script>
<style scoped lang='scss'>
.head_box {
    background-color: #fff;
    padding: 28rpx 32rpx;
    .inp_search{
        border: none;
    }
}

.filter_box{
    margin-top: 12rpx;
    font-size: 26rpx;
    .filter_item{
        margin-left: 36rpx;
        &:first-child{
            margin-left: 0;
        }
        .ico{
            font-size: 20rpx;
            margin-left: 12rpx;
        }
    }
}

.scroll-view {
    height: 100vh;
}

.scenicList {
    padding: 28rpx 32rpx 60rpx;
}

.scenic_item {
    background-color: #fff;
    padding: 26rpx 30rpx;
    margin-bottom: 16rpx;
    border-radius: 12rpx;
    box-shadow: 4rpx 4rpx 18rpx 2rpx rgba(17, 18, 29, 0.1);

    &:last-child {
        margin-bottom: 0;
    }

    .s_img {
        width: 160rpx;
        height: 230rpx;
        border-radius: 8rpx;
    }

    .info {
        position: relative;
        width: calc(100% - 186rpx);
        padding-bottom: 50rpx;

        .scenicName {
            font-size: 30rpx;
            font-weight: 600;
            margin-bottom: 8rpx;
        }

        .address {
            font-size: 22rpx;
            color: #666;
        }

        .s_info {
            font-size: 24rpx;
            color: #666;
            margin-top: 10rpx;

            span {
                margin-right: 18rpx;

                &:last-child {
                    margin-right: 0;
                }
            }
        }

        .avgScore {
            width: 100%;
            position: absolute;
            bottom: 0;
            right: 0;
        }

        .avgScore_num {
            font-size: 24rpx;

            .commentScore {
                margin-left: 12rpx;
            }
        }

        .price {
            color: #666;
            font-size: 30rpx;
        }

        .dinB {
            font-size: 36rpx;
            color: #00B76C;

            &::before {
                content: "￥";
                font-size: 22rpx;
            }

            &::after {
                content: "起";
                margin-left: 6rpx;
                font-size: 22rpx;
            }
        }
    }

    .openTime {
        width: 100%;
        border-top: 2rpx dashed rgba($color: #000, $alpha: 0.25);
        margin-top: 16rpx;
        font-size: 26rpx;
        color: #666;
        padding-top: 8rpx;
    }
}
.popup_con{
    min-height: 500rpx;
    background-color: #fff;
    border-radius: 26rpx 26rpx 0 0;
    padding: 30rpx 32rpx 56rpx;
    .sort_item{
        padding: 16rpx 0;
        border-bottom: 1rpx solid rgba($color: #000, $alpha: 0.1);
        .ico{
            color: #00B76C;
            font-size: 32rpx;
        }
        .corg{
            color: #00B76C;
        }
        span{
            font-size: 30rpx;
        }
    }
}
.BackTop{
    width: 86rpx;
    height: 86rpx;
    text-align: center;
    line-height: 86rpx;
    font-size: 40rpx;
    position: fixed;
    right: 38rpx;
    bottom: 300rpx;
    background-color: rgba($color: #000, $alpha: 0.2);
    border-radius: 50%;
    color: #666;
}
.onlist{
    padding-top: 100rpx;
    text-align: center;
    .errimg{
        width: 500rpx;
    }
    .errmsg{
        font-size: 28rpx;
        color: #999;
    }
}
</style>
<style>
.uni-data-tree-input{
    display: none;
}
</style>