Init project
This commit is contained in:
lifizer
@@ -0,0 +1,973 @@
|
||||
<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>
|
||||
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<view class="newsDetail">
|
||||
<view class="title">{{ articleInfo.title }}</view>
|
||||
<view class="list acea-row row-middle">
|
||||
<view class="label line1" style="color: #999;">来源:{{articleInfo.author||"未知"}}</view>
|
||||
<view class="item">
|
||||
<!-- <text class="iconfont icon-shenhezhong"></text> -->
|
||||
{{ articleInfo.addTime }}
|
||||
</view>
|
||||
<view class="item acea-row row-middle">
|
||||
<image :src="webUrl+'/20230304131559277594.png'" class="eye-icon" mode=""></image>
|
||||
<text class="see-num-text">{{articleInfo.visit||0}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="conter" v-html="articleInfo.content"></view>
|
||||
</view>
|
||||
</template>
|
||||
<style>
|
||||
.conter>>>img{
|
||||
display:block;
|
||||
max-width:100% !important;
|
||||
}
|
||||
page{
|
||||
background: #fff !important;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="less">
|
||||
|
||||
|
||||
.newsDetail .list .label{
|
||||
padding: 0;
|
||||
max-width: auto !important;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.newsDetail .title{
|
||||
font-size: 40rpx !important;
|
||||
font-weight: bold;
|
||||
color: #080F1A !important;
|
||||
}
|
||||
|
||||
|
||||
.newsDetail .picTxt {
|
||||
width: 6.9*100rpx;
|
||||
height: 2*100rpx;
|
||||
border-radius: 0.2*100rpx;
|
||||
border: 1px solid #e1e1e1;
|
||||
position: relative;
|
||||
margin: 0.3*100rpx auto 0 auto;
|
||||
}
|
||||
.newsDetail .picTxt .pictrue {
|
||||
width: 2*100rpx;
|
||||
height: 2*100rpx;
|
||||
}
|
||||
.newsDetail .picTxt .pictrue image{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.2*100rpx 0 0 0.2*100rpx;
|
||||
display: block;
|
||||
}
|
||||
.newsDetail .picTxt .text {
|
||||
width: 4.6*100rpx;
|
||||
}
|
||||
.newsDetail .picTxt .text .name {
|
||||
font-size: 0.3*100rpx;
|
||||
color: #282828;
|
||||
}
|
||||
.newsDetail .picTxt .text .money {
|
||||
font-size: 0.24*100rpx;
|
||||
margin-top: 0.4*100rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.newsDetail .picTxt .text .money .num {
|
||||
font-size: 0.36*100rpx;
|
||||
}
|
||||
.newsDetail .picTxt .text .y_money {
|
||||
font-size: 0.26*100rpx;
|
||||
color: #999;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.newsDetail .picTxt .label {
|
||||
position: absolute;
|
||||
background-color: #303131;
|
||||
width: 1.6*100rpx;
|
||||
height: 0.5*100rpx;
|
||||
right: -0.07*100rpx;
|
||||
border-radius: 0.25*100rpx 0 0.06*100rpx 0.25*100rpx;
|
||||
text-align: center;
|
||||
line-height: 0.5*100rpx;
|
||||
bottom: 0.24*100rpx;
|
||||
}
|
||||
.newsDetail .picTxt .label .span {
|
||||
background-image: linear-gradient(to right, #fff71e 0%, #f9b513 100%);
|
||||
background-image: -webkit-linear-gradient(to right, #fff71e 0%, #f9b513 100%);
|
||||
background-image: -moz-linear-gradient(to right, #fff71e 0%, #f9b513 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
.newsDetail .picTxt .label:after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-bottom: 0.08*100rpx solid #303131;
|
||||
border-right: 0.08*100rpx solid transparent;
|
||||
top: -0.08*100rpx;
|
||||
right: 0;
|
||||
}
|
||||
.newsDetail .bnt {
|
||||
color: #fff;
|
||||
font-size: 0.3*100rpx;
|
||||
width: 6.9*100rpx;
|
||||
height: 0.9*100rpx;
|
||||
border-radius: 0.45*100rpx;
|
||||
margin: 0.48*100rpx auto 0 auto;
|
||||
text-align: center;
|
||||
line-height: 0.9*100rpx;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import { getArticleDetails } from "@/api/public";
|
||||
export default {
|
||||
name: "FoodInfomationDetail",
|
||||
components: {},
|
||||
props: {},
|
||||
data: function() {
|
||||
return {
|
||||
articleInfo: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
$yroute(to) {
|
||||
if (to.name === "NewsDetail") this.articleDetails();
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
this.articleDetails();
|
||||
},
|
||||
methods: {
|
||||
updateTitle() {
|
||||
// document.title = this.articleInfo.title || this.$yroute.meta.title;
|
||||
},
|
||||
articleDetails: function() {
|
||||
let that = this,
|
||||
id = this.$yroute.query.id;
|
||||
getArticleDetails(id).then(res => {
|
||||
var data = res.data;
|
||||
data.content = that.formatRichText(data.content);
|
||||
that.articleInfo = data;
|
||||
that.updateTitle();
|
||||
|
||||
console.log('current path:'+that.$yroute.path);
|
||||
|
||||
//动态配置share参数
|
||||
that.$set(that, "share", {
|
||||
title:that.articleInfo.title,
|
||||
path:'/pages/foodInfomation/foodInfomationDetail?id='+that.$yroute.query.id,
|
||||
imageUrl:'',
|
||||
desc:'',
|
||||
content:''
|
||||
});
|
||||
|
||||
});
|
||||
},
|
||||
/**
|
||||
* 处理富文本里的图片宽度自适应
|
||||
* 1.去掉img标签里的style、width、height属性
|
||||
* 2.img标签添加style属性：max-width:100%;height:auto
|
||||
* 3.修改所有style里的width属性为max-width:100%
|
||||
* 4.去掉<br/>标签
|
||||
* @param html
|
||||
* @returns {void|string|*}
|
||||
*/
|
||||
formatRichText:function(html){
|
||||
let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
|
||||
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
|
||||
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
|
||||
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
|
||||
return match;
|
||||
});
|
||||
newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
|
||||
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
|
||||
return match;
|
||||
});
|
||||
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
|
||||
newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');
|
||||
return newContent;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="search-box">
|
||||
<uni-search-bar placeholder="输入搜索关键词" @confirm="search" @clear="clearName"></uni-search-bar>
|
||||
</view>
|
||||
|
||||
<view class="list" v-if="list.length">
|
||||
<custom-waterfalls-flow :value="list" imageKey="imageInput">
|
||||
<view class="item" v-for="(item,index) in list" :key="index" slot="slot{{index}}" @click="goNewsDetail(item)">
|
||||
<image class="cover" :src="item.imageInput" mode="scaleToFill"></image>
|
||||
<view class="content">
|
||||
<view class="title more-t">{{item.title}}</view>
|
||||
<view class="mark more-t">{{item.synopsis}}</view>
|
||||
<view class="footer flex jc-between ai-center">
|
||||
<view class="visit flex ai-center">
|
||||
<image class="icon" :src="webUrl+'/20220609111928828152.png'" mode="scaleToFill"></image>
|
||||
{{item.visit}}
|
||||
</view>
|
||||
<view class="time">{{item.addTime.substring(0,10)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</custom-waterfalls-flow>
|
||||
</view>
|
||||
|
||||
<view class="v4-nodata" v-else>
|
||||
<image src="@/static/images/img_nodata.png" mode="scaleToFill" />
|
||||
<view class="text">暂无数据</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getArticleList
|
||||
} from "@/api/public";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
page: 1,
|
||||
limit: 8,
|
||||
keyword: "",
|
||||
list: [],
|
||||
isWait: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.fetchList();
|
||||
},
|
||||
onReachBottom() {
|
||||
this.page++;
|
||||
this.fetchList();
|
||||
},
|
||||
methods: {
|
||||
search(e) {
|
||||
this.keyword = e.value;
|
||||
this.page = 1;
|
||||
this.list = [];
|
||||
this.fetchList();
|
||||
},
|
||||
|
||||
clearName() {
|
||||
this.keyword = "";
|
||||
this.page = 1;
|
||||
this.list = [];
|
||||
this.fetchList();
|
||||
},
|
||||
|
||||
fetchList() {
|
||||
if (this.isWait) return;
|
||||
this.isWait = true;
|
||||
|
||||
let params = {
|
||||
keyword: this.keyword,
|
||||
page: this.page,
|
||||
limit: this.limit
|
||||
};
|
||||
|
||||
getArticleList(params).then(res => {
|
||||
if (res.status === 200) {
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
res.data[i].hide = true;
|
||||
this.list.push(res.data[i])
|
||||
}
|
||||
}
|
||||
this.isWait = false;
|
||||
});
|
||||
},
|
||||
|
||||
goNewsDetail(item) {
|
||||
this.$yrouter.push({
|
||||
path: "/pages/foodInfomation/foodInfomationDetail",
|
||||
query: {
|
||||
id: item.id
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.search-box {
|
||||
padding: 0 12rpx;
|
||||
background: #fff;
|
||||
|
||||
/deep/.uni-searchbar__box {
|
||||
border-radius: 44rpx !important;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin: 28rpx 32rpx;
|
||||
|
||||
.item {
|
||||
border-radius: 4rpx;
|
||||
background: #fff;
|
||||
|
||||
.cover {
|
||||
width: 332rpx;
|
||||
height: 200rpx;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 12rpx 16rpx 0;
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
line-height: 38rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.mark {
|
||||
margin: 14rpx 16rpx;
|
||||
font-size: 22rpx;
|
||||
line-height: 32rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 12rpx 16rpx 16rpx;
|
||||
border-top: 1rpx solid #E1E1E1;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
vertical-align: middle;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.visit {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.time {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user