You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
278 lines
6.5 KiB
278 lines
6.5 KiB
<template>
|
|
<view class="v-pages-bg p-b-24 p-t-24">
|
|
<!-- 分类 -->
|
|
<view class="v-page-title circle">
|
|
<view class="inner"><text class="text">热门推荐</text></view>
|
|
</view>
|
|
<scroll-view scroll-x="true">
|
|
<view class="v-method-class row">
|
|
<view class="list_item" v-for="(item,index) in class_list" :key="index" @click="gotoClassPage(item)">
|
|
<view class="item_image">
|
|
<image class="img" :src="rootPath+item.logo" mode="widthFix"></image>
|
|
</view>
|
|
<view class="item-bottom">
|
|
<view class="item_name">{{item.title}}</view>
|
|
<view class="item_desc">{{item.subtitle}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- 列表 -->
|
|
<view class="v-page-title circle m-t-40">
|
|
<view class="inner"><text class="text">文旅攻略</text></view>
|
|
</view>
|
|
<mescroll-uni :up="upOption" @down="downCallback" @up="upCallback" :fixed="false">
|
|
<view class="v-method-list">
|
|
<view class="list_item row" v-for="(item,index) in data_list" :key="index" @click="gotoPages(item)">
|
|
<view class="item_image">
|
|
<view class="item-recommend" v-if="item.isrecommend=='YES'">热门推荐</view>
|
|
<image class="img" :src="rootPath+item.logo" mode="widthFix"></image>
|
|
</view>
|
|
<view class="item_content col">
|
|
<view class="title">{{item.title}}</view>
|
|
<view class="dec">{{item.subtitle}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</mescroll-uni>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// 自定义的mescroll-xinlang.vue
|
|
import MescrollUni from '@/components/mescroll-diy/mescroll-xinlang.vue';
|
|
export default {
|
|
components: {
|
|
MescrollUni
|
|
},
|
|
data() {
|
|
return {
|
|
//公共路径
|
|
rootPath: this.$config.ROOTPATH,
|
|
//数据滚动
|
|
mescroll: undefined,
|
|
downOption: {
|
|
auto: false //是否在初始化完毕之后自动执行下拉回调callback; 默认true
|
|
},
|
|
upOption: {
|
|
auto: true //是否在初始化完毕之后自动执行下拉回调callback; 默认true
|
|
},
|
|
//轮播
|
|
indicatorDots: false,
|
|
autoplay: true,
|
|
interval: 3000,
|
|
duration: 500,
|
|
//数据
|
|
pic_list: [], //轮播图数据
|
|
class_list: [], //分类数据
|
|
data_list: [], //列表数据
|
|
parames: {
|
|
pagesize: 10,
|
|
pageno: 1,
|
|
noData: false,
|
|
loading: false,
|
|
finished: false,
|
|
type: this.$param.methodType,
|
|
userkey: this.$param.userkey,
|
|
},
|
|
};
|
|
},
|
|
onLoad(option) {
|
|
this.getInitPage()
|
|
},
|
|
methods: {
|
|
// 页面初始化
|
|
getInitPage: function() {
|
|
this.getClassData()
|
|
},
|
|
// 获取分类数据
|
|
getClassData() {
|
|
var requestData = {
|
|
type: this.$param.methodType,
|
|
userkey: this.$param.userkey,
|
|
};
|
|
this.$Request.get(this.$config.getMethodList, requestData, '', '', false, true).then(res => {
|
|
this.class_list = res.data
|
|
this.pic_list = this.class_list.filter((item, index) => {
|
|
return item.isrecommend == 'YES'
|
|
})
|
|
});
|
|
},
|
|
/*下拉刷新的回调 */
|
|
downCallback(mescroll) {
|
|
this.mescroll = mescroll
|
|
this.parames.pageno = 1
|
|
this.data_list = []
|
|
this.getListData();
|
|
// #ifdef H5
|
|
this.top = uni.upx2px(100 + 88) + 'px'; // H5的高度需加上 88的标题栏
|
|
// #endif
|
|
// #ifndef H5
|
|
this.top = uni.upx2px(100) + 'px'; // 非H5不必加
|
|
// #endifL
|
|
setTimeout(() => {
|
|
this.mescroll.endSuccess();
|
|
this.top = 0;
|
|
}, 2500);
|
|
},
|
|
/*上拉刷新的回调 */
|
|
upCallback(mescroll) {
|
|
this.mescroll = mescroll
|
|
this.parames.pageno = this.mescroll.num
|
|
this.getListData();
|
|
},
|
|
// 获取列表数据
|
|
getListData() {
|
|
this.$Request.get(this.$config.getMethodRecommendList, this.parames, '', '', false, true).then(res => {
|
|
const curPageData = res.data || [] // 当前页数据
|
|
if (this.mescroll.num == 1) this.data_list = []; // 第一页需手动制空列表
|
|
this.data_list = [...this.data_list, ...curPageData]
|
|
setTimeout(() => {
|
|
this.mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
|
|
}, 1000);
|
|
}).catch(() => {
|
|
this.mescroll.endErr(); // 请求失败, 结束加载
|
|
});
|
|
},
|
|
// 跳转分类页面
|
|
gotoClassPage(val){
|
|
uni.navigateTo({
|
|
url: "/subPageA/method/methodList/methodClass?guid=" + val.guid
|
|
});
|
|
},
|
|
// 跳转详情页面
|
|
gotoPages(val) {
|
|
uni.navigateTo({
|
|
url: "/subPageA/method/methodDetail/methodDetail?guid=" + val.guid
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #f5f6fa;
|
|
}
|
|
.v-method-class {
|
|
box-sizing: border-box;
|
|
padding: 0 24rpx;
|
|
|
|
.list_item {
|
|
position: relative;
|
|
flex: 0 0 240rpx;
|
|
width: 240rpx;
|
|
height: 150rpx;
|
|
margin-right: 24rpx;
|
|
border-radius: 20rpx;
|
|
|
|
.item-bottom {
|
|
position: absolute;
|
|
left: 0;
|
|
padding-left: 24rpx;
|
|
bottom: 10rpx;
|
|
padding: 0 10rpx;
|
|
}
|
|
|
|
.item_name {
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
}
|
|
|
|
.item_image {
|
|
width: 240rpx;
|
|
height: 150rpx;
|
|
border-radius: 20rpx;
|
|
overflow: hidden;
|
|
|
|
.img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.item_desc {
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.v-method-list {
|
|
padding: 0 24rpx;
|
|
|
|
.list_item {
|
|
margin-bottom: 24rpx;
|
|
border-radius: 10rpx;
|
|
background-color: #fff;
|
|
height: 180rpx;
|
|
overflow: hidden;
|
|
background-color: #fff;
|
|
box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, .1);
|
|
|
|
.item_image {
|
|
position: relative;
|
|
width: 270rpx;
|
|
flex: 0 0 270rpx;
|
|
height: 180rpx;
|
|
margin-right: 24rpx;
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
.img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
.item-recommend {
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 100%;
|
|
height: 40rpx;
|
|
padding: 0 20rpx 0 40rpx;
|
|
color: #fff;
|
|
line-height: 40rpx;
|
|
font-size: 24rpx;
|
|
background: linear-gradient(to right, rgba(224, 75, 0, .7), rgba(224, 75, 0, 0));
|
|
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 10rpx;
|
|
top: 50%;
|
|
transform: translate(0, -50%);
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
background: url('@/static/animg/daolan/icon-zan.png');
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
|
|
.item_content {
|
|
padding: 24rpx 24rpx 0 0;
|
|
|
|
.title {
|
|
font-size: 30rpx;
|
|
margin-bottom: 10rpx;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dec {
|
|
margin-top: 10rpx;
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
/* 显示的行数 */
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |