105 lines
3.9 KiB
Vue
105 lines
3.9 KiB
Vue
|
<template>
|
||
|
|
<view class="waper">
|
||
|
|
<u-navbar :autoBack="true" bgColor="#fff">
|
||
|
|
<view slot='center' class="navbar_title">{{configData && configData.examine == 'true' ? '景点攻略' : '热门攻略'}}</view>
|
||
|
|
</u-navbar>
|
||
|
|
<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" :top="paddingTop + 'px'">
|
||
|
|
<view class="list_waper">
|
||
|
|
<navigator hover-class="none" class="list" v-for="(item, index) in list" :url="'/pages/strategy/detail?id=' + item.id" :key="index">
|
||
|
|
<view class="img">
|
||
|
|
<image :src="$utils.setImgUrl(item.image)" mode=""></image>
|
||
|
|
</view>
|
||
|
|
<view class="info">
|
||
|
|
<view class="title">{{item.title}}</view>
|
||
|
|
<view class="msg">{{item.description || ''}}</view>
|
||
|
|
<view class="from">
|
||
|
|
<view class="left">{{$utils.formatDate('Y-M-D', item.publishtime * 1000)}}</view>
|
||
|
|
<view class="right">
|
||
|
|
<u-icon name="eye" size="28rpx" color="#999" top="2rpx"></u-icon>
|
||
|
|
<view class="num">{{item.views}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</navigator>
|
||
|
|
</view>
|
||
|
|
</mescroll-body>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
|
||
|
|
export default {
|
||
|
|
mixins: [MescrollMixin],
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
paddingTop: 0,
|
||
|
|
list: [],
|
||
|
|
configData: null,
|
||
|
|
menuIndex: '1'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
async onLoad () {
|
||
|
|
let config = uni.getStorageSync('configData');
|
||
|
|
this.configData = config;
|
||
|
|
this.paddingTop = this.$paddingTop;
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async upCallback (page) {
|
||
|
|
let obj = { pageNum: page.num, pageSize: page.size };
|
||
|
|
let info = await this.$http.introductionList(obj);
|
||
|
|
if (page.num == 1) this.list = [];
|
||
|
|
this.list = this.list.concat(info.rows)
|
||
|
|
this.mescroll.endBySize(info.rows.length, info.total);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
|
||
|
|
.list_waper{
|
||
|
|
width: 100%; box-sizing: border-box; padding: 32rpx;
|
||
|
|
.list{
|
||
|
|
width: 100%; box-sizing: border-box; margin-bottom: 20rpx; padding: 24rpx; padding-left: 314rpx; position: relative; height: 250rpx; border-radius: 10rpx; background: #fff;
|
||
|
|
&:last-child{ margin-bottom: 0; }
|
||
|
|
.img{
|
||
|
|
width: 270rpx; height: 202rpx; position: absolute; left: 24rpx; top: 24rpx;
|
||
|
|
image{ border-radius: 10rpx; }
|
||
|
|
}
|
||
|
|
.info{
|
||
|
|
width: 100%; height: 100%; box-sizing: border-box; padding-top: 4rpx;
|
||
|
|
.title{
|
||
|
|
height: 47rpx;
|
||
|
|
font-weight: 600;
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: rgba(0,0,0,0.85);
|
||
|
|
line-height: 38rpx;
|
||
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
|
|
.msg{
|
||
|
|
font-size: 28rpx;
|
||
|
|
color: rgba(0,0,0,0.45);
|
||
|
|
line-height: 33rpx;
|
||
|
|
height: 84rpx;
|
||
|
|
margin-top: 4rpx;
|
||
|
|
-webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
|
||
|
|
}
|
||
|
|
.from{
|
||
|
|
width: 100%; margin-top: 23rpx; height: 34rpx; display: flex; justify-content: space-between; align-items: center;
|
||
|
|
.left{
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: rgba(0,0,0,0.45);
|
||
|
|
line-height: 28rpx;
|
||
|
|
}
|
||
|
|
.right{
|
||
|
|
display: flex; align-items: center;
|
||
|
|
.num{
|
||
|
|
margin-left: 4rpx;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: rgba(0,0,0,0.45);
|
||
|
|
line-height: 28rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|