|
<template>
|
<div class="list-content">
|
<div class="list-head">
|
<div class="list-search">
|
<van-search
|
v-model="value"
|
placeholder="请输入场景关键词"
|
@cancel="onCancel"
|
/>
|
</div>
|
<div class="list-banner">
|
<van-image
|
lazy-load
|
:src="banner" rel="external nofollow"
|
/>
|
</div>
|
</div>
|
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
|
<van-list
|
v-model="loading"
|
:finished="finished"
|
:immediate-check="false"
|
:offset="8"
|
finished-text="没有更多了"
|
@load="onLoad"
|
>
|
<van-cell v-for="(item,index) in list" :key="index" >
|
<div class="list-li">
|
<div class="list-left">
|
<van-image
|
lazy-load
|
:src="banner" rel="external nofollow"
|
/>
|
</div>
|
<div class="list-right">
|
<p class="r-title">场景名称场景景名称场景场景名称场景景名称场景</p>
|
<div class="r-tip">
|
<span>场景名称场景景名称场景场景名称场景景名称场景</span>
|
<span>场景名称场景景名称场景场景名称场景景名称场景</span>
|
<span>文字dsadasddasdas3</span>
|
</div>
|
<p class="r-time">
|
<img src="../../assets/images/clock.svg">
|
距离结束还有<span>50</span>天
|
</p>
|
</div>
|
</div>
|
</van-cell>
|
</van-list>
|
</van-pull-refresh>
|
<Tabbar></Tabbar>
|
</div>
|
</template>
|
<script>
|
import { mapActions, mapState } from "vuex";
|
import Tabbar from "@/components/Tabbar";
|
export default {
|
components: { Tabbar },
|
data() {
|
return {
|
banner: require('@/assets/images/banner.svg'),
|
value:'',
|
list: [],
|
loading: false,
|
finished: false,
|
refreshing: false,
|
page:1,
|
pageSize:8,
|
scenes_name:'',
|
scenes_type:'',
|
total:'',
|
};
|
},
|
computed: {
|
...mapState({ token: "token" }),
|
},
|
created () {
|
this.getPageData();
|
},
|
methods: {
|
...mapActions({
|
newgetList: "newgetList", // 发送验证码
|
}),
|
getPageData(){
|
let _this = this;
|
_this.newgetList({query:
|
{
|
token:_this.token,
|
page:_this.page,
|
}
|
}).then((res) =>{
|
_this.total = res.total;
|
if(res.list.length === 0){
|
_this.finished = true;
|
return;
|
}
|
if(res.list.length < _this.pageSize){
|
_this.finished = true;
|
}
|
if(_this.page == 1){
|
_this.list = res.list;
|
console.log(_this.page);
|
}else{
|
_this.list = _this.list.concat(res.list);
|
console.log(_this.page,'2');
|
}
|
}).catch(err => {
|
_this.$toast.fail(err.msg)
|
}).finally(()=>{
|
_this.loading = false;
|
_this.refreshing = false;
|
});
|
},
|
onLoad(){
|
this.page++;
|
this.getPageData();
|
console.log(3);
|
},
|
onCancel(){},
|
onRefresh() {
|
this.page = 1;
|
this.finished = false;
|
this.getPageData();
|
}
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.list-content{
|
padding-bottom: 90px;
|
}
|
.list-search{
|
position: fixed;
|
top: 0;
|
left: 0;
|
z-index: 99;
|
width: 100%;
|
height: 88px;
|
.van-search{
|
padding: 8px 32px;
|
}
|
}
|
.list-banner{
|
height: 300px;
|
margin-top: 88px;
|
.van-image{
|
width: 100%;
|
height: 100%;
|
}
|
}
|
/deep/ .van-pull-refresh{
|
background-color: #f8f8f8;
|
}
|
/deep/ .van-list{
|
background-color: #f8f8f8;
|
.van-cell{
|
padding: 20px 0 20px 32px;
|
height: 200px;
|
margin-top: 20px;
|
.list-li{
|
display: flex;
|
height: 100%;
|
width: 100%;
|
.list-left{
|
width: 232px;
|
height: 160px;
|
.van-image{
|
width: 100%;
|
height: 100%;
|
.van-image__img{
|
object-fit:cover
|
}
|
}
|
}
|
.list-right{
|
width: 420px;
|
margin-left: 16px;
|
.r-title{
|
height: 48px;
|
line-height: 48px;
|
color: #000000;
|
font-size: 32px;
|
font-weight: 500;
|
white-space:nowrap;
|
overflow:hidden;
|
text-overflow:ellipsis;
|
margin-bottom: 12px;
|
}
|
.r-tip{
|
font-size: 0;
|
height: 36px;
|
line-height: 36px;
|
span{
|
display: inline-block;
|
font-size: 14px;
|
color: #16BAA8;
|
text-align: center;
|
max-width: 134px;
|
height: 36px;
|
line-height: 36px;
|
border: 1px solid #16BAA8;
|
background: #ffffff;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
margin-right: 8px;
|
text-align: center;
|
}
|
span:last-child{
|
margin-right: 0;
|
}
|
}
|
.r-time{
|
margin-top: 20px;
|
height: 42px;
|
line-height: 42px;
|
img{
|
width: 28px;
|
height: 28px;
|
position: relative;
|
top:3px;
|
}
|
span{
|
color: #ff7b73;
|
display: inline-block;
|
margin: 0 4px;
|
}
|
}
|
}
|
}
|
}
|
.van-cell::after{
|
border-bottom:none;
|
}
|
}
|
</style>
|
