974 lines
31 KiB
Vue
974 lines
31 KiB
Vue
<template>
|
|
<view class="newsList" ref="container">
|
|
<hx-navbar :back="false" :fixed="true" title="七彩云上" statusBarFontColor="#ffffff" color="#ffffff" :left-slot="true"
|
|
:background-color="[13,197,197]" :right-slot="true">
|
|
<block slot="left">
|
|
<view class="location acea-row row-center row-middle"
|
|
style="position: relative;height: 42rpx;margin-left: 35rpx;box-sizing: border-box;">
|
|
<image style="width: 30rpx;height: 30rpx;" :src="webUrl+'/20210807134107296760.png'" mode=""></image>
|
|
<view class="city-name" @click="cityNameClick">{{cityName}}</view>
|
|
|
|
</view>
|
|
</block>
|
|
</hx-navbar>
|
|
|
|
<view style="position: fixed;right: 0;width: 100%;z-index: 5;" :style="{top:navHeight}">
|
|
<drop-down :showDd="showCitySelect" :list="cityList" @select="selectCity" @close="closeCitySelect"></drop-down>
|
|
</view>
|
|
|
|
<view class="acea-row row-column"
|
|
style="position: fixed;left: 0;right: 0;background-color: #0DC5C5;z-index: 4;overflow-y: hidden;"
|
|
:style="{top:segTop+'px'}">
|
|
|
|
<!-- 搜索开始 -->
|
|
<view class="searchGood" style="margin-top: 10rpx;">
|
|
<view class="search acea-row row-between-wrapper">
|
|
<view class="input acea-row row-between-wrapper">
|
|
<text class="iconfont icon-sousuo2"></text>
|
|
<input style="color: #acacac !important;" type="text" placeholder="请输入搜索关键词" confirm-type="search"
|
|
v-model="search" @confirm="refreshData" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 搜索结束 -->
|
|
|
|
<!-- tab开始 -->
|
|
<view class="top-tab acea-row row-middle" style="position: relative;">
|
|
<view class="tab acea-row row-middle row-center" @click="changeTab(0)">
|
|
<view :style="(activeIndex==0?'background:#F6F6F6':'')"
|
|
class="tab-wrap acea-row row-column row-middle row-center">
|
|
<image v-if="activeIndex==0" style="width: 36rpx;height:36rpx" :src="webUrl+'/20210824104937140590.png'"
|
|
mode=""></image>
|
|
<image v-else style="width: 36rpx;height:36rpx" :src="webUrl+'/20210807135928525293.png'"
|
|
mode="scaleToFill"></image>
|
|
<text :style="'font-size:22rpx;margin-top4rpx;color:'+(activeIndex==0?'#0DC5C5':'#ffffff')">#住在云上</text>
|
|
</view>
|
|
</view>
|
|
<view class="tab acea-row row-middle row-center" @click="changeTab(1)">
|
|
<view :style="(activeIndex==1?'background:#F6F6F6':'')"
|
|
class="tab-wrap acea-row row-column row-middle row-center">
|
|
<image v-if="activeIndex==1" style="width: 32rpx;height:36rpx" :src="webUrl+'/20210824104954282401.png'"
|
|
mode=""></image>
|
|
<image v-else style="width: 36rpx;height:36rpx" :src="webUrl+'/20210807140012422075.png'"
|
|
mode="scaleToFill"></image>
|
|
<text :style="'font-size:22rpx;margin-top4rpx;color:'+(activeIndex==1?'#0DC5C5':'#ffffff')">#逛在云上</text>
|
|
</view>
|
|
</view>
|
|
<view class="tab acea-row row-middle row-center" @click="changeTab(2)">
|
|
<view :style="(activeIndex==2?'background:#F6F6F6':'')"
|
|
class="tab-wrap acea-row row-column row-middle row-center">
|
|
<image v-if="activeIndex==2" style="width: 32rpx;height:36rpx" :src="webUrl+'/20210824105005945092.png'"
|
|
mode=""></image>
|
|
<image v-else style="width: 36rpx;height:36rpx" :src="webUrl+'/20210807140042265370.png'"
|
|
mode="scaleToFill"></image>
|
|
<text :style="'font-size:22rpx;margin-top4rpx;color:'+(activeIndex==2?'#0DC5C5':'#ffffff')">#吃在云上</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="tab acea-row row-middle row-center" @click="changeTab(3)">
|
|
<view :style="(activeIndex==3?'background:#F6F6F6':'')"
|
|
class="tab-wrap acea-row row-column row-middle row-center">
|
|
<image v-if="activeIndex==3" style="width: 36rpx;height:36rpx" :src="webUrl+'/20210824105016005512.png'"
|
|
mode=""></image>
|
|
<image v-else style="width: 36rpx;height:36rpx" :src="webUrl+'/20210807140136696881.png'"
|
|
mode="scaleToFill"></image>
|
|
<text :style="'font-size:22rpx;margin-top4rpx;color:'+(activeIndex==3?'#0DC5C5':'#ffffff')">#彩云资讯</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- tab结束 -->
|
|
|
|
<!-- <block v-if="activeIndex==3">
|
|
<view class="" style="padding:30rpx 30rpx 0 30rpx;background-color: #F5F5F5;">
|
|
<v-tabs v-model="current" :fixed="true" :tabs="tabs" bgColor="#f5f5f5" itemBorderRadius="14.5px" itemMarginRight="30rpx" activeItemBgColor="#ff0000" itemBgColor="RGB(232,232,232)" line-height="0" color="RGB(197,198,204)" activeColor="#fff" @change="changeArtileTab"></v-tabs>
|
|
</view>
|
|
</block> -->
|
|
|
|
</view>
|
|
|
|
<!-- 占位 -->
|
|
<!-- <view class="" :style="{height:activeIndex==3?'252rpx':'152rpx'}"></view> -->
|
|
<view class="" style="height: 252rpx;"></view>
|
|
|
|
<!-- 住在云上开始 -->
|
|
<block v-if="activeIndex==0">
|
|
<view class="wrapper hot" v-if="innArray.length > 0">
|
|
<view class="hotGoodsList acea-row">
|
|
<view :style="{width:hotInnColumnWidth}" @click="goInnDetail(item)" class="newProductsItem"
|
|
v-for="(item, innInfoIndex) in innArray" :key="innInfoIndex">
|
|
<view class="img-box">
|
|
<image style="border-radius: 8rpx;" :style="{width:hotInnColumnWidth,height:hotInnColumnWidth}"
|
|
:src="item.cover" />
|
|
<view class="like-btn" @click="likeInn(item)">
|
|
<image v-if="item.zanHistory==0" style="width: 100%;height: 100%;" :src="webUrl+'/20230304134637330341.png'"
|
|
mode=""></image>
|
|
<image v-if="item.zanHistory>0" style="width: 100%;height: 100%;" :src="webUrl+'/20230304134642958611.png'"
|
|
mode=""></image>
|
|
</view>
|
|
<view class="acea-row row-middle"
|
|
style="flex-wrap: nowrap;position: absolute;left: 24rpx;right: 24rpx;bottom: 20rpx;z-index: 2;"
|
|
v-if="item.cityName != undefined && item.cityName.length>0">
|
|
<image style="width: 22rpx;height: 22rpx;" :src="webUrl+'/20210609100715629446.png'" mode=""></image>
|
|
<text style="color: #fff;font-size: 22rpx;margin-left: 10rpx;">{{item.cityName}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="pro-info line2" style="min-height: 80rpx;padding: 0 10rpx;"><text>{{ item.content }}</text>
|
|
</view>
|
|
<!-- <view class="inn-tag-wrap acea-row row-left row-middle" style="padding:0 10rpx">
|
|
<view class="zanmost-tag" v-if="item.zanMostTag>0">点赞最多</view>
|
|
<view class="latest-tag" v-if="item.newTag>0">最新发布</view>
|
|
<view class="location-tag" v-if="item.cityName != undefined && item.cityName.length>0">{{item.cityName}}</view>
|
|
</view> -->
|
|
<view class="inn-shop-info acea-row row-middle"
|
|
style="flex-wrap: nowrap;margin-bottom: 20rpx;padding: 10rpx;">
|
|
<view class="acea-row row-center row-middle" style="flex-shrink: 0;">
|
|
<image class="inn-shop-icon" :src="item.logo" mode=""></image>
|
|
</view>
|
|
<view class="acea-row row-column row-between" style="flex-grow: 1;margin-left: 10rpx;">
|
|
<view class="inn-shop-name">{{item.name}}</view>
|
|
<view class="inn-shop-date">{{ innOpenDateString(item.createdTime,'yyyy/MM/dd') }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</block>
|
|
<!-- 住在云上结束 -->
|
|
|
|
<!-- 逛在云上开始 -->
|
|
<block v-if="activeIndex==1">
|
|
<!-- <view class="wrapper hot" v-if="innArray.length > 0" >
|
|
<view class="hotGoodsList acea-row row-column" >
|
|
<view style="border-radius: 8rpx;background: #FFFFFF;flex-wrap: nowrap;margin: 35rpx 35rpx 0 35rpx;padding: 16rpx;" @click="goInnDetail(item)" class="acea-row" v-for="(item, innInfoIndex) in innArray" :key="innInfoIndex">
|
|
<view class="img-box" style="width: 164rpx;height: 164rpx;flex-shrink: 0;">
|
|
<image style="border-radius: 4rpx 4rpx 0px 0px;width: 100%;height: 100%;" :src="item.cover" />
|
|
</view>
|
|
<view class="acea-row row-column row-around" style="flex-grow: 1;">
|
|
<view class="pro-info line1" style="padding: 0 10rpx;border-radius: 4rpx;">{{ item.name }}</view>
|
|
<view class="pro-info acea-row line2" style="padding: 0 10rpx;line-height: 28rpx;">
|
|
<text class="" style="font-size: 24rpx;color: #a9a9a9;">{{item.content}}</text>
|
|
</view>
|
|
|
|
<view class="inn-shop-info acea-row row-middle" style="flex-wrap: nowrap;padding: 10rpx;">
|
|
<image class="" style="width: 28rpx;height: 28rpx;" :src="webUrl+'/20210402172346756674.png'" mode=""></image>
|
|
<text class="" style="font-size: 24rpx;color: #666666;">{{item.address}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
<view class="wrapper hot" v-if="innArray.length > 0">
|
|
<view class="hotGoodsList acea-row" style="">
|
|
<view :style="{width:hotGoodsColumnWidth,background:'#ffffff'}" @click="goInnDetail(item)"
|
|
class="newProductsItem" v-for="(item, innInfoIndex) in innArray" :key="innInfoIndex">
|
|
<view class="img-box" style="position: relative;">
|
|
<image style="border-radius: 8rpx" :style="{width:hotInnColumnWidth,height:hotInnColumnWidth}"
|
|
:src="item.cover" />
|
|
|
|
|
|
|
|
<view class="acea-row row-column"
|
|
style="flex-wrap: nowrap;position: absolute;left: 8rpx;right: 8rpx;bottom: 20rpx;z-index: 2;">
|
|
<view class="acea-row row-middle"
|
|
style="padding-left: 6rpx;padding-right: 16rpx;align-self: flex-start;min-height: 42rpx;color: #ffffff;font-size: 22rpx;background-image: url(http://admin-api.xdd618.com/file/pic/20210609100647993289.png);background-repeat: no-repeat;background-size: 100% 100%;"
|
|
v-if="item.cityName != undefined && item.cityName.length>0">
|
|
{{item.cityName}}
|
|
</view>
|
|
<view class="acea-row row-middle line2"
|
|
style="padding: 10rpx;background: #fff;border-radius: 0px 12px 12px 12px;opacity: 0.9;color: #333333;font-size: 24rpx;">
|
|
{{ item.content }}
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- <view class="pro-info line2" style="min-height: 80rpx;padding: 0 10rpx;border-radius: 4rpx;margin-top: 6rpx;">{{ item.content }}</view> -->
|
|
|
|
<view class="inn-shop-info acea-row row-middle" style="flex-wrap: nowrap;padding: 10rpx;">
|
|
<view class="acea-row row-center row-middle" style="flex-shrink: 0;">
|
|
<image class="inn-shop-icon" :src="item.logo" mode=""></image>
|
|
</view>
|
|
<view class="acea-row row-column row-between" style="flex-grow: 1;margin-left: 10rpx;">
|
|
<view class="inn-shop-name">{{item.name}}</view>
|
|
<!-- <view class="inn-shop-date">{{innOpenDateString(item.createdTime,'yyyy/MM/dd')}}</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<!-- 逛在云上结束 -->
|
|
|
|
<!-- 吃在云上开始 -->
|
|
<block v-if="activeIndex==2">
|
|
<view class="wrapper hot" v-if="innArray.length > 0">
|
|
<view class="hotGoodsList acea-row row-column">
|
|
<view
|
|
style="border-radius: 8rpx;background: #FFFFFF;flex-wrap: nowrap;margin: 35rpx 35rpx 0 35rpx;padding: 16rpx;"
|
|
@click="goInnDetail(item)" class="acea-row row-column" v-for="(item, innInfoIndex) in innArray"
|
|
:key="innInfoIndex">
|
|
|
|
<view class="inn-shop-info acea-row row-middle" style="flex-wrap: nowrap;padding: 10rpx;">
|
|
<view class="acea-row row-center row-middle" style="flex-shrink: 0;">
|
|
<image class="inn-shop-icon" :src="item.logo" mode=""></image>
|
|
</view>
|
|
<view class="acea-row row-column row-between" style="flex-grow: 1;margin-left: 10rpx;">
|
|
<view class="inn-shop-name">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="pro-info acea-row line2" style="padding: 0 10rpx;line-height: 28rpx;">
|
|
<text class="" style="font-size: 24rpx;color: #a9a9a9;">{{item.content}}</text>
|
|
</view>
|
|
<!-- <view class="" style="height: 319rpx;overflow: hidden;margin-bottom: 28rpx;border-radius: 12rpx;">
|
|
<img-box style="width: 100%;" :imgList='item.pics.slice(0,3)' :num='item.pics.slice(0,3).length'></img-box>
|
|
</view> -->
|
|
|
|
<block v-if="item.pics && item.pics.length>1">
|
|
<img-box style="width: 100%;" :imgList='item.pics.slice(0,3)' :num='item.pics.slice(0,3).length'
|
|
:imgRadius='12'></img-box>
|
|
</block>
|
|
<block v-else>
|
|
<view class="" style="height: 319rpx;overflow: hidden;margin-bottom: 28rpx;border-radius: 12rpx;">
|
|
<img-box style="width: 100%;" :imgList='item.pics.slice(0,3)' :num='item.pics.slice(0,3).length'
|
|
:imgRadius='12'></img-box>
|
|
</view>
|
|
</block>
|
|
|
|
<view class="pro-info acea-row" style="padding: 0;line-height: 28rpx;">
|
|
<image class="" style="width: 28rpx;height: 28rpx;" :src="webUrl+'/20210402172346756674.png'" mode="">
|
|
</image>
|
|
<text class="" style="font-size: 24rpx;color: #666666;">{{item.address}}</text>
|
|
</view>
|
|
<!-- <view class="inn-tag-wrap acea-row row-left row-middle" style="">
|
|
<view class="zanmost-tag" v-if="item.zanMostTag>0">点赞最多</view>
|
|
<view class="latest-tag" v-if="item.newTag>0">最新发布</view>
|
|
<view class="location-tag" v-if="item.cityName != undefined && item.cityName.length>0">{{item.cityName}}</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<!-- 吃在云上结束 -->
|
|
|
|
<!-- 彩云资讯开始 -->
|
|
<block v-if="activeIndex==3">
|
|
<view class="list" v-for="(item, articleListIndex) in articleList" :key="articleListIndex">
|
|
<view @click="goNewsDetail(item)" class="item acea-row" style="flex-wrap: nowrap;">
|
|
<view class="text acea-row row-column-between">
|
|
<view class="acea-row row-column" style="position: relative;">
|
|
<view class="name line2">{{ item.title }}</view>
|
|
<view class="summary line2" style="width: 322rpx;">{{ item.synopsis }}</view>
|
|
</view>
|
|
<view class="acea-row row-between">
|
|
<view class="see-num-box acea-row row-middle">
|
|
<image :src="webUrl+'/20230304131559277594.png'" class="eye-icon" mode=""></image>
|
|
<text class="see-num-text">{{item.visit||0}}</text>
|
|
</view>
|
|
<view class="">
|
|
{{ shortDateString(item.addTime) }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="pictrue">
|
|
<image :src="item.imageInput" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<!-- 彩云资讯结束 -->
|
|
|
|
<!--暂无客栈-->
|
|
<block v-if="activeIndex!=3">
|
|
<view class="noCommodity" v-if="innArray.length === 0 && !loading">
|
|
<view class="noPictrue">
|
|
<image src="@/static/images/img_nodata.png" class="image" />
|
|
<!-- <image src="@/static/images/img_nodata.png" mode="widthFix"></image> -->
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
<block v-if="activeIndex==3">
|
|
<view class="noCommodity" v-if="articleList.length === 0 && !loading">
|
|
<view class="noPictrue">
|
|
<image :src="webUrl+'/20210203154951097926.png'" class="image" />
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import {
|
|
getArticleList,
|
|
getHotelNewsCategory
|
|
} from "@/api/public";
|
|
import {
|
|
getHotelList,
|
|
getHotelCityList
|
|
} from "@/api/inn.js";
|
|
import {
|
|
formatDateTime,
|
|
isNullOrEmpty
|
|
} from "@/utils";
|
|
import dropDown from "@/components/drop-down/drop-down.vue";
|
|
import config from '@/utils/mapConfig';
|
|
import imgBox from '@/components/imageTypeSet/imagebox.vue'
|
|
|
|
var that;
|
|
//获取系统状态栏高度
|
|
// var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
|
export default {
|
|
name: "FoodInfomation",
|
|
components: {
|
|
// choseCity,
|
|
dropDown,
|
|
imgBox
|
|
},
|
|
props: {},
|
|
data: function() {
|
|
return {
|
|
showCitySelect: false,
|
|
current: 0,
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
activeIndex: 3,
|
|
navHeight: 20 + 44 + 'px',
|
|
segTop: 20 + 64,
|
|
searchTop: 64 + 64 + 20,
|
|
hotInnColumnWidth: '325rpx',
|
|
cityName: "定位中...",
|
|
page: 1,
|
|
limit: 20,
|
|
search: "",
|
|
loadTitle: "",
|
|
loading: false,
|
|
loadend: false,
|
|
imgUrls: [],
|
|
navLsit: [],
|
|
articleList: [],
|
|
cityList: [], //有客栈入驻的城市列表
|
|
innArray: [],
|
|
active: 0,
|
|
cid: 0,
|
|
swiperNew: {
|
|
pagination: {
|
|
el: ".swiper-pagination",
|
|
clickable: true
|
|
},
|
|
autoplay: {
|
|
disableOnInteraction: false,
|
|
delay: 2000
|
|
},
|
|
loop: true,
|
|
speed: 1000,
|
|
observer: true,
|
|
observeParents: true
|
|
},
|
|
tabs: [],
|
|
newsTypeArray: [],
|
|
curSelectCategory: ''
|
|
};
|
|
},
|
|
onShow: function() {
|
|
this.getHotelCityList();
|
|
|
|
//进入时如果有jumpIndex
|
|
var initIdx = uni.getStorageSync('jumpIndex');
|
|
if (initIdx) {
|
|
this.activeIndex = parseInt(initIdx);
|
|
console.log('jumpIndex:' + initIdx);
|
|
uni.removeStorageSync('jumpIndex');
|
|
}
|
|
// this.getHotelList();
|
|
this.getArticleLists();
|
|
this.getHotelNewsCategory();
|
|
},
|
|
onLoad: function(e) {
|
|
that = this;
|
|
uni.getSystemInfo({
|
|
success: (e) => {
|
|
|
|
//两列商品宽度
|
|
that.hotInnColumnWidth = (e.screenWidth - uni.upx2px(90)) / 2 + 'px';
|
|
|
|
that.navHeight = e.statusBarHeight + 44 + 'px';
|
|
that.segTop = e.statusBarHeight + 44;
|
|
that.searchTop = e.statusBarHeight + 44 + uni.upx2px(64);
|
|
|
|
|
|
|
|
|
|
}
|
|
});
|
|
uni.$on('needRefresh', item => {
|
|
console.log(item, '第一页面数据');
|
|
this.cityName = item.cityName;
|
|
this.refreshData();
|
|
});
|
|
|
|
//this.getHotelList();
|
|
//this.getArticleLists();
|
|
|
|
//获取定位地址
|
|
this.getCurAddress();
|
|
},
|
|
onUnload: function() {
|
|
uni.$off('needRefresh');
|
|
},
|
|
mounted: function() {
|
|
// this.articleBanner();
|
|
//this.articleCategory();
|
|
|
|
// this.$scroll(this.$refs.container, () => {
|
|
// !this.loading && this.getArticleLists();
|
|
// });
|
|
|
|
|
|
//this.getHotelList();
|
|
//this.getArticleLists();
|
|
|
|
//获取定位地址
|
|
//this.getCurAddress();
|
|
},
|
|
onPullDownRefresh() {
|
|
this.refreshData();
|
|
|
|
},
|
|
onReachBottom() {
|
|
if (this.activeIndex != 3) {
|
|
!this.loading && this.getHotelList();
|
|
} else {
|
|
!this.loading && this.getArticleLists();
|
|
}
|
|
},
|
|
methods: {
|
|
isNullOrEmpty,
|
|
getHotelNewsCategory() {
|
|
var that = this;
|
|
getHotelNewsCategory()
|
|
.then(res => {
|
|
if (res.data && res.data.length > 0) {
|
|
that.newsTypeArray = res.data;
|
|
that.tabs = [];
|
|
that.newsTypeArray.unshift({
|
|
'label': '全部',
|
|
'value': ''
|
|
});
|
|
that.newsTypeArray.forEach((item) => {
|
|
that.tabs.push('#' + item.label);
|
|
});
|
|
}
|
|
})
|
|
.catch(err => {
|
|
|
|
})
|
|
},
|
|
changeArtileTab(index) {
|
|
console.log('当前选中索引：' + index)
|
|
console.log("this.newsTypeArray.length: " + this.newsTypeArray.length)
|
|
//获取分类
|
|
if (index < this.newsTypeArray.length) {
|
|
//获取切换分类并刷新列表
|
|
var curCategory = this.newsTypeArray[index];
|
|
this.curSelectCategory = curCategory.value;
|
|
this.page = 1;
|
|
this.loading = false;
|
|
this.loadend = false;
|
|
this.getArticleLists();
|
|
}
|
|
|
|
},
|
|
selectCity(city) {
|
|
this.showCitySelect = false;
|
|
//this.$refs.popup.close();
|
|
// console.log("selectCity:"+this.showCitySelect);
|
|
this.cityName = city;
|
|
this.refreshData();
|
|
},
|
|
closeCitySelect() {
|
|
this.showCitySelect = false;
|
|
//this.$refs.popup.close();
|
|
// console.log("closeCitySelect:"+this.showCitySelect);
|
|
},
|
|
getHotelCityList() {
|
|
getHotelCityList().then((res) => {
|
|
that.cityList = res.data;
|
|
var allItem = {
|
|
name: '全 国'
|
|
}
|
|
that.cityList.unshift(allItem);
|
|
}).catch((err) => {
|
|
|
|
}).finally(() => {
|
|
|
|
})
|
|
},
|
|
// popChange(e){
|
|
// this.showCitySelect = e.show;
|
|
// },
|
|
cityNameClick() {
|
|
this.showCitySelect = true;
|
|
},
|
|
refreshData: function() {
|
|
this.page = 1;
|
|
this.loading = false;
|
|
this.loadend = false;
|
|
if (this.activeIndex != 3) {
|
|
this.getHotelList();
|
|
} else {
|
|
this.getArticleLists();
|
|
}
|
|
},
|
|
changeTab: function(index) {
|
|
this.innArray = [];
|
|
this.activeIndex = index;
|
|
this.page = 1;
|
|
this.loading = false;
|
|
this.loadend = false;
|
|
|
|
//刷新数据
|
|
if (this.activeIndex != 3) {
|
|
this.getHotelList();
|
|
} else {
|
|
this.getArticleLists();
|
|
}
|
|
},
|
|
goInnDetail: function(item) {
|
|
//跳转到客栈详情
|
|
this.$yrouter.push({
|
|
path: "/pagesInn/inn/innHome",
|
|
query: {
|
|
id: item.id
|
|
}
|
|
});
|
|
|
|
},
|
|
likeInn: function(item) {
|
|
//喜欢操作
|
|
|
|
},
|
|
//获取当前定位地址
|
|
getCurAddress() {
|
|
|
|
var that = this;
|
|
//定位
|
|
uni.showLoading({
|
|
title: '定位中...'
|
|
});
|
|
|
|
//this.getLocation();
|
|
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: function(res) {
|
|
let latitude = res.latitude;
|
|
let longitude = res.longitude;
|
|
|
|
console.log('latitude:' + latitude + 'longitude:' + longitude)
|
|
|
|
// #ifdef H5
|
|
Vue.jsonp(
|
|
'https://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' + longitude + '&key=' +
|
|
config.key, {
|
|
//callbackName: 'QQmap',
|
|
output: 'jsonp',
|
|
}).then(json => {
|
|
// Success.
|
|
uni.hideLoading();
|
|
that.cityName = json.result.ad_info.city;
|
|
//定位成功刷新数据
|
|
if (that.activeIndex != 3) {
|
|
that.refreshData();
|
|
}
|
|
|
|
}).catch(err => {
|
|
// Failed.
|
|
console.log('地址解析失败:' + JSON.stringify(err));
|
|
uni.hideLoading();
|
|
})
|
|
// #endif
|
|
|
|
// #ifndef H5
|
|
uni.request({
|
|
url: 'https://apis.map.qq.com/ws/geocoder/v1/?location=' + latitude + ',' + longitude +
|
|
'&key=' + config.key,
|
|
success: function(res) {
|
|
// console.log('res:'+JSON.stringify(res.data));
|
|
uni.hideLoading();
|
|
|
|
that.cityName = res.data.result.ad_info.city;
|
|
|
|
//定位成功刷新数据
|
|
if (that.activeIndex != 3) {
|
|
that.refreshData();
|
|
}
|
|
|
|
},
|
|
fail: function(res) {
|
|
console.log('地址解析失败');
|
|
uni.hideLoading();
|
|
},
|
|
complete: function() {
|
|
|
|
}
|
|
});
|
|
// #endif
|
|
},
|
|
fail: function(res) {
|
|
uni.hideLoading();
|
|
|
|
// uni.showToast({
|
|
// title:'城市定位失败:'+JSON.stringify(res),
|
|
// icon:'none',
|
|
// duration:2000
|
|
// })
|
|
}
|
|
});
|
|
|
|
|
|
},
|
|
shortDateString(dataStr) {
|
|
var ret = '';
|
|
if (isNullOrEmpty(dataStr)) {
|
|
|
|
} else {
|
|
var s = dataStr.toString();
|
|
s = s.replace(/-/g, "/");
|
|
var date = new Date(s).getTime();
|
|
ret = formatDateTime(date, 'yyyy-MM-dd');
|
|
}
|
|
return ret;
|
|
},
|
|
innOpenDateString(str, format) {
|
|
return formatDateTime(str, format);
|
|
},
|
|
goNewsDetail(item) {
|
|
this.$yrouter.push({
|
|
path: "/pages/foodInfomation/foodInfomationDetail",
|
|
query: {
|
|
id: item.id
|
|
}
|
|
});
|
|
},
|
|
getArticleLists: function() {
|
|
let that = this;
|
|
if (that.loading) return; //阻止下次请求（false可以进行请求）；
|
|
if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
|
|
that.loading = true;
|
|
let q = {
|
|
page: that.page,
|
|
limit: that.limit,
|
|
name: that.search,
|
|
type: that.curSelectCategory
|
|
};
|
|
getArticleList(q).then(res => {
|
|
that.loading = false;
|
|
//apply();js将一个数组插入另一个数组;
|
|
if (that.page == 1) {
|
|
that.articleList = [];
|
|
}
|
|
that.articleList.push.apply(that.articleList, res.data);
|
|
that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
|
|
that.page = that.page + 1;
|
|
}).catch((err) => {
|
|
|
|
}).finally(() => {
|
|
uni.stopPullDownRefresh();
|
|
});
|
|
},
|
|
getHotelList: function() {
|
|
let that = this;
|
|
if (that.loading) return; //阻止下次请求（false可以进行请求）；
|
|
if (that.loadend) return; //阻止结束当前请求（false可以进行请求）；
|
|
that.loading = true;
|
|
var q = {
|
|
page: that.page,
|
|
limit: that.limit,
|
|
type: that.activeIndex + 1,
|
|
name: that.search
|
|
};
|
|
|
|
//如果定位到了城市加入参数
|
|
if (this.cityName.length > 0 && this.cityName != '定位中...') {
|
|
q.cityName = this.cityName;
|
|
//全国传空字符串
|
|
if (this.cityName == '全 国') {
|
|
q.cityName = '';
|
|
}
|
|
}
|
|
|
|
getHotelList(q).then(res => {
|
|
that.loading = false;
|
|
//apply();js将一个数组插入另一个数组;
|
|
if (that.page == 1) {
|
|
that.innArray = [];
|
|
}
|
|
that.innArray.push.apply(that.innArray, res.data);
|
|
that.loadend = res.data.length < that.limit; //判断所有数据是否加载完成；
|
|
that.page = that.page + 1;
|
|
}).catch((err) => {
|
|
|
|
}).finally(() => {
|
|
uni.stopPullDownRefresh();
|
|
});
|
|
},
|
|
onClick: function(name) {
|
|
if (name === 0) this.articleHotList();
|
|
else {
|
|
this.cid = this.navLsit[name].id;
|
|
this.articleList = [];
|
|
this.page = 1;
|
|
this.loadend = false;
|
|
this.loading = false;
|
|
this.getArticleLists(name);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.searchGood .search .input {
|
|
background-color: #f6f6f6 !important;
|
|
}
|
|
|
|
.searchGood .search {
|
|
padding-left: 35rpx !important;
|
|
padding-right: 35rpx !important;
|
|
}
|
|
|
|
.pink-dot {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
background: rgba(255, 86, 74, 0.4);
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
z-index: 0;
|
|
bottom: 0;
|
|
right: -12rpx;
|
|
}
|
|
|
|
.main-title {
|
|
font-size: 36rpx;
|
|
line-height: 36rpx;
|
|
// color: #080F1A;
|
|
color: #FFFFFF;
|
|
position: relative;
|
|
}
|
|
|
|
.eye-icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.zan-icon {
|
|
width: 32rpx;
|
|
height: 32rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.zan-num-text {
|
|
color: #080F1A;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.see-num-text {
|
|
color: #080F1A;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.newsList .list .item .text .name {
|
|
color: #080F1A !important;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.newsList .list .item .text {
|
|
margin-right: 10rpx;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
}
|
|
|
|
.newsList .list .item .pictrue {
|
|
flex-shrink: 0;
|
|
width: 288rpx !important;
|
|
height: 216rpx !important;
|
|
}
|
|
|
|
.newsList .list .item {
|
|
background-color: #fff;
|
|
flex-wrap: nowrap;
|
|
padding: 35rpx !important;
|
|
margin: 35rpx 30rpx !important;
|
|
border-radius: 8rpx;
|
|
|
|
}
|
|
|
|
.summary {
|
|
color: #C2C5CC;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.sub-title {
|
|
font-size: 14*2rpx;
|
|
margin-top: 10rpx;
|
|
color: rgba(252, 85, 179, 0.7);
|
|
}
|
|
|
|
.title .hot-title {
|
|
font-size: 18*2rpx;
|
|
color: #FF7900;
|
|
background: rgba(255, 255, 255, 1);
|
|
margin-left: 5*2rpx;
|
|
margin-right: 5*2rpx;
|
|
}
|
|
|
|
.hotGoodsList {
|
|
position: relative;
|
|
margin: 20rpx 0 35rpx 0;
|
|
background-color: transparent;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.hotGoodsList .newProductsItem {
|
|
margin-left: 35rpx;
|
|
margin-top: 20rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.img-box {
|
|
position: relative;
|
|
}
|
|
|
|
.price-tag {
|
|
position: absolute;
|
|
width: 39*2rpx;
|
|
height: 19*2rpx;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.like-btn {
|
|
position: absolute;
|
|
width: 24*2rpx;
|
|
height: 24*2rpx;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.inn-tag-wrap {
|
|
margin-top: 10rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.zanmost-tag {
|
|
padding: 2rpx 8rpx 2rpx 8rpx;
|
|
background: #FF2D69;
|
|
font-size: 10*2rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.latest-tag {
|
|
padding: 2rpx 8rpx 2rpx 8rpx;
|
|
background: #0DC5C5;
|
|
font-size: 10*2rpx;
|
|
color: #FFFFFF;
|
|
margin-left: 8rpx;
|
|
}
|
|
|
|
.location-tag {
|
|
padding: 2rpx 8rpx 2rpx 8rpx;
|
|
background: #EBECF0;
|
|
font-size: 10*2rpx;
|
|
color: #333333;
|
|
margin-left: 8rpx;
|
|
}
|
|
|
|
.inn-shop-icon {
|
|
border-radius: 50%;
|
|
width: 24*2rpx;
|
|
height: 24*2rpx;
|
|
}
|
|
|
|
.inn-shop-name {
|
|
font-size: 28rpx;
|
|
color: #080F1A;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.inn-shop-date {
|
|
font-size: 18rpx;
|
|
color: #C2C5CC;
|
|
}
|
|
|
|
.location {
|
|
padding: 4rpx 16rpx;
|
|
background: #EBECF0;
|
|
color: #41454D;
|
|
border-radius: 22rpx;
|
|
}
|
|
|
|
.city-name {
|
|
color: #41454D;
|
|
font-size: 24rpx;
|
|
margin-left: 4rpx;
|
|
line-height: 24rpx;
|
|
}
|
|
|
|
.btLine {
|
|
width: 100%;
|
|
height: 12rpx;
|
|
margin-top: -4rpx;
|
|
background: #FD685D;
|
|
}
|
|
|
|
.pro-info {
|
|
font-size: 14*2rpx;
|
|
|
|
}
|
|
|
|
.top-tab {
|
|
height: 104rpx;
|
|
margin-left: 35rpx;
|
|
margin-right: 35rpx;
|
|
margin-top: 20rpx;
|
|
// background: #E9E9E9;
|
|
// border-radius:22rpx;
|
|
}
|
|
|
|
.top-tab .tab {
|
|
position: relative;
|
|
// padding: 0 20rpx;
|
|
flex: 1;
|
|
text-align: center;
|
|
height: 100%;
|
|
}
|
|
|
|
.top-tab .tab .tab-title {
|
|
position: relative;
|
|
z-index: 1;
|
|
line-height: 84rpx;
|
|
}
|
|
|
|
.top-tab .tab .tab-bg {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 54rpx;
|
|
z-index: 0;
|
|
}
|
|
|
|
.top-tab .tab .tab-wrap {
|
|
// background: linear-gradient(180deg, #56D4D4 0%, #0DC5C5 100%);
|
|
// background: #F6F6F6;
|
|
// box-shadow: 0px 6rpx 16rpx #91D5D5;
|
|
opacity: 1;
|
|
border-radius: 12rpx;
|
|
padding: 10rpx;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
</style>
|