<template> <div class="find"> <form action="1" class="searchBox"> <van-search v-model="searchValue" shape="round" placeholder="搜索相关故事" input-align="center" @search="onSearch" /> </form> <div class="areaList"> <div class="box"> <span :class="areaActive == 0 ? 'active' : ''" @click="areaClick(0, '')"><b>最新</b><u></u></span> <span :class="areaActive == item.area_code ? 'active' : ''" @click="areaClick(item.area_code, item.area_name)" v-for="(item, index) in AreaList" :key="index" ><b>{{ item.area_name.substring(0, 2) }}</b ><u></u ></span> </div> </div> <ul class="likeList"> <li v-for="(n, i) in likeList" :key="i" @click="gostoryDetail(n.id)"> <div class="top"> <span>故事</span> <div class="position"> <van-icon name="location" /> <b>杭州</b> </div> <img :src="n.coverUrl" alt="" /> </div> <div class="bottom"> <h3>{{ n.title }}</h3> <div> <img :src="n.faceUrl ? n.faceUrl : require('../assets/boy.png')" alt="" /> <span class="name">{{ n.name }}</span> <div class="zan"> <van-icon name="good-job-o" /> <span>{{ n.likeCount }}</span> </div> </div> </div> </li> <van-empty class="custom-image" image="https://img.yzcdn.cn/vant/custom-empty-image.png" description="暂无故事" v-if="likeList.length == 0" /> </ul> <div class="appendMore" v-if="likeList.length < likeCount" @click="likeMore">查看更多</div> <BottomNav :BottomNav="navActive"></BottomNav> <div :is="background"></div> </div> </template> <script> import BottomNav from '../components/BottomNav.vue' import Background from '../components/Background.vue' export default { components: { BottomNav, Background, }, data() { return { navActive: 2, searchValue: '', AreaList: '', areaActive: 0, likeList: [], likePage: 1, likeCount: 0, isNew: 1, areaName: '', background: '', } }, created() { this.GetZJSysAreaList() this.GetStoryList(1) }, methods: { gostoryDetail(id) { this.$router.push({ path: '/StoryDetail', query: { id: id } }) }, GetZJSysAreaList() { var that = this this.http .GetZJSysAreaList({ cityCode: this.projectCityCode, }) .then(function(res) { if (res.status == 1) { that.AreaList = res.data } }) }, GetStoryList(page) { var that = this this.http .GetStoryList({ pageIndex: page, pageSize: 10, title: this.searchValue, city: this.areaName, isNew: this.isNew, cs: this.projectCity, }) .then(function (res) { if (res.status == 1) { that.likeCount = res.data.count that.likeList = that.likeList.concat(res.data.items) } }) }, likeMore() { this.likePage++ this.GetStudyBaseList(this.likePage) }, areaClick(id, name) { this.areaActive = id if (id != 0) { this.isNew = 0 this.areaName = name } else { this.isNew = 1 this.areaName = '' } this.likeList = [] this.likePage = 1 this.GetStoryList(1) }, onSearch() { this.likeList = [] this.likePage = 1 this.GetStoryList(1) }, backgroundShow(text) { this.background = text }, }, filters: {}, } </script> <style lang="stylus" scoped> .find{ padding 0 40px 120px 40px box-sizing border-box .appendMore{ background-color #F7F7F7 border-radius 10px text-align center padding 220px 0 color #64B1FF font-size 1.2rem margin-bottom 20px } .areaList{ width 100% overflow auto padding 20px 0 div{ width 1200px span{ display inline-block width 100px text-align center font-size 1.6rem color #202228 font-weight 500 vertical-align middle } span.active{ position relative font-size 2rem b{ position relative z-index 100 } u{ width 100% height 16px border-radius 100px background-image linear-gradient(to right,#3FCC95,#ffffff) position absolute bottom 0 left 0 } } } } .likeList{ overflow hidden li{ float left width 50% box-sizing border-box margin-bottom 20px .top{ position relative span{ position absolute background-image linear-gradient(#5EFFC1,#10E693) left 20px top 20px z-index 100 padding 6px 10px border-radius 6px } img{ width 100% object-fit cover border-radius 20px } .position{ position absolute bottom 20px left 20px i{ color #06CB67 vertical-align middle font-size 1.8rem } b{ display inline-block vertical-align middle color white font-size 1.8rem } } } .bottom{ background-color white border-radius 0 0 10px 10px h3{ word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin 0 font-size 1.6rem } div{ position relative padding 10px 0 img{ width 40px height 40px border-radius 50% display inline-block vertical-align middle margin-right 10px } span.name{ display inline-block vertical-align middle color #7E7F81 font-size 1.2rem } div.zan{ position absolute right 20px bottom 6px font-size 1.2rem color #7E7F81 i{ font-size 1.4rem vertical-align top } span{ display inline-block vertical-align top } } } } } li:nth-child(2n){ padding-left 20px } li:nth-child(2n+1){ padding-right 20px } } } </style>